removed gulp and implement cli and astro
This commit is contained in:
Daniel
3
src/html/.tsconfig.json
Normal file
3
src/html/.tsconfig.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/base"
|
||||
}
|
||||
30
src/html/components/_head.astro
Normal file
30
src/html/components/_head.astro
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
const { title, path, isRtl } = Astro.props
|
||||
const distPath = (path != undefined) ? path : '../../../dist'
|
||||
const cssPath = isRtl ? '.rtl' : ''
|
||||
---
|
||||
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>{title}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="title" content={title}>
|
||||
<meta name="author" content="ColorlibHQ">
|
||||
<meta name="description" content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS.">
|
||||
<meta name="keywords" content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard" />
|
||||
|
||||
<!-- OPTIONAL LINKS -->
|
||||
|
||||
<!-- Google Font: Source Sans Pro -->
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
|
||||
|
||||
<!-- overlayScrollbars -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.0.3/styles/overlayscrollbars.min.css" integrity="sha256-57dSpDS5wv9AYEEmLxcPfrVnygNCdqDWOXyoR46L9H0=" crossorigin="anonymous">
|
||||
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css" integrity="sha256-Z1K5uhUaJXA7Ll0XrZ/0JhX4lAtZFpT6jkKrEDT0drU=" crossorigin="anonymous">
|
||||
|
||||
<!-- REQUIRED LINKS -->
|
||||
|
||||
<!-- Theme style -->
|
||||
<link rel="stylesheet" href={distPath + '/css/adminlte' + cssPath + '.css'} >
|
||||
99
src/html/components/_scripts.astro
Normal file
99
src/html/components/_scripts.astro
Normal file
@@ -0,0 +1,99 @@
|
||||
---
|
||||
const { path } = Astro.props
|
||||
const distPath = (path != undefined) ? path : '../../../dist'
|
||||
---
|
||||
<!-- OPTIONAL SCRIPTS -->
|
||||
<!-- overlayScrollbars -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.0.3/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-/dwBbLeVyyWBtWfH3jHdL2oVVmLKoGnEFzoOSL3nJC0=" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- OPTIONAL SCRIPT For Bootstrap 5 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Bootstrap 5 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- REQUIRED SCRIPTS -->
|
||||
<!-- AdminLTE App -->
|
||||
<script src={distPath + '/js/adminlte.js'}></script>
|
||||
|
||||
<!-- OPTIONAL SCRIPTS -->
|
||||
<script is:inline>
|
||||
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
|
||||
const Default = {
|
||||
scrollbarTheme: 'os-theme-light',
|
||||
scrollbarAutoHide: 'leave'
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
if (typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
|
||||
OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR_WRAPPER), {
|
||||
scrollbars: {
|
||||
theme: Default.scrollbarTheme,
|
||||
autoHide: Default.scrollbarAutoHide,
|
||||
clickScroll: true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- DON'T USE THIS IN PRODUCTION -->
|
||||
<script is:inline>
|
||||
// Color Mode Toggler
|
||||
(() => {
|
||||
'use strict'
|
||||
|
||||
const storedTheme = localStorage.getItem('theme')
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
if (storedTheme) {
|
||||
return storedTheme
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
}
|
||||
|
||||
const setTheme = function (theme) {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark')
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme)
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme())
|
||||
|
||||
const showActiveTheme = theme => {
|
||||
const activeThemeIcon = document.querySelector('.theme-icon-active i')
|
||||
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
|
||||
const svgOfActiveBtn = btnToActive.querySelector('i').getAttribute('class')
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active')
|
||||
})
|
||||
|
||||
btnToActive.classList.add('active')
|
||||
activeThemeIcon.setAttribute('class', svgOfActiveBtn)
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
if (storedTheme !== 'light' || storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme())
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme())
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', () => {
|
||||
const theme = toggle.getAttribute('data-bs-theme-value')
|
||||
localStorage.setItem('theme', theme)
|
||||
setTheme(theme)
|
||||
showActiveTheme(theme)
|
||||
})
|
||||
})
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
12
src/html/components/dashboard/_footer.astro
Normal file
12
src/html/components/dashboard/_footer.astro
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
const year = new Date().getFullYear()
|
||||
---
|
||||
<!-- Main Footer -->
|
||||
<footer class="app-footer">
|
||||
<!-- To the end -->
|
||||
<div class="float-end d-none d-sm-inline">
|
||||
Anything you want
|
||||
</div>
|
||||
<!-- Default to the start -->
|
||||
<strong>Copyright © 2014-{year} <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
|
||||
</footer>
|
||||
278
src/html/components/dashboard/_sidenav.astro
Normal file
278
src/html/components/dashboard/_sidenav.astro
Normal file
@@ -0,0 +1,278 @@
|
||||
---
|
||||
const { path, mainPage, page } = Astro.props
|
||||
const distPath = (path != undefined) ? path : '../../../dist'
|
||||
const htmlPath = (path != undefined) ? '.' : '..'
|
||||
---
|
||||
<!-- Sidebar Container -->
|
||||
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
|
||||
<div class="sidebar-brand">
|
||||
<a href={htmlPath + '/index.html'} class="brand-link">
|
||||
<img src={distPath + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
|
||||
<span class="brand-text fw-light">AdminLTE 4</span>
|
||||
</a>
|
||||
<a class="pushmenu d-none d-lg-block" data-lte-toggle="sidebar-mini" href="javascript:;" role="button"><i class="fa-solid fa-angle-double-left"></i></a>
|
||||
</div>
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar-wrapper">
|
||||
<nav class="mt-2">
|
||||
<!-- Sidebar Menu -->
|
||||
<ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
|
||||
<li class:list={['nav-item', mainPage === 'dashboard' && 'menu-open']}>
|
||||
<a href="javascript:;" class:list={['nav-link', mainPage === 'dashboard' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-gauge-high"></i>
|
||||
<p>
|
||||
Dashboard
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/index.html'} class:list={['nav-link', page === 'index' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Dashboard v1</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/index2.html'} class:list={['nav-link', page === 'index2' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Dashboard v2</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/index3.html'} class:list={['nav-link', page === 'index3' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Dashboard v3</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class:list={['nav-item', mainPage === 'widgets' && 'menu-open']}>
|
||||
<a href="javascript:;" class:list={['nav-link', mainPage === 'widgets' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-box-open"></i>
|
||||
<p>
|
||||
Widgets
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/widgets/small-box.html'} class:list={['nav-link', page === 'small-box' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Small Box</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/widgets/info-box.html'} class:list={['nav-link', page === 'info-box' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>info Box</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/widgets/cards.html'} class:list={['nav-link', page === 'cards' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Cards</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class:list={['nav-item', mainPage === 'layout' && 'menu-open']}>
|
||||
<a href="javascript:;" class:list={['nav-link', mainPage === 'layout' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-copy"></i>
|
||||
<p>
|
||||
Layout Options
|
||||
<span class="badge text-bg-primary float-end me-3">6</span>
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/layout/unfixed-sidebar.html'} class:list={['nav-link', page === 'unfixed-sidebar' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Unfixed Sidebar</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/layout/fixed-sidebar.html'} class:list={['nav-link', page === 'fixed-sidebar' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Fixed Sidebar</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/layout/sidebar-mini.html'} class:list={['nav-link', page === 'sidebar-mini' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Sidebar Mini</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/layout/layout-rtl.html'} class:list={['nav-link', page === 'layout-rtl' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Layout RTL</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class:list={['nav-item', mainPage === 'ui-elements' && 'menu-open']}>
|
||||
<a href="javascript:;" class:list={['nav-link', mainPage === 'ui-elements' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-tree"></i>
|
||||
<p>
|
||||
UI Elements
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/UI/timeline.html'} class:list={['nav-link', page === 'timeline' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Timeline</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class:list={['nav-item', mainPage === 'forms' && 'menu-open']}>
|
||||
<a href="javascript:;" class:list={['nav-link', mainPage === 'forms' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-pen-to-square"></i>
|
||||
<p>
|
||||
Forms
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/forms/general.html'} class:list={['nav-link', page === 'general' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>General Elements</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class:list={['nav-item', mainPage === 'tables' && 'menu-open']}>
|
||||
<a href="javascript:;" class:list={['nav-link', mainPage === 'tables' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-table"></i>
|
||||
<p>
|
||||
Tables
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/tables/simple.html'} class:list={['nav-link', page === 'simple' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Simple Tables</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-header">EXAMPLES</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
|
||||
<p>
|
||||
Login & Register
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/examples/login.html'} class="nav-link ">
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Login v1</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/examples/register.html'} class="nav-link ">
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Register v1</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-circle"></i>
|
||||
<p>Level 1</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-circle"></i>
|
||||
<p>
|
||||
Level 1
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Level 2</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>
|
||||
Level 2
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-dot-circle"></i>
|
||||
<p>Level 3</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-dot-circle"></i>
|
||||
<p>Level 3</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-dot-circle"></i>
|
||||
<p>Level 3</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Level 2</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-circle"></i>
|
||||
<p>Level 1</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-header">LABELS</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-circle text-danger"></i>
|
||||
<p class="text">Important</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-circle text-warning"></i>
|
||||
<p>Warning</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-circle text-info"></i>
|
||||
<p>Informational</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- /.sidebar -->
|
||||
</aside>
|
||||
202
src/html/components/dashboard/_topbar.astro
Normal file
202
src/html/components/dashboard/_topbar.astro
Normal file
@@ -0,0 +1,202 @@
|
||||
---
|
||||
const { path } = Astro.props
|
||||
const distPath = (path != undefined) ? path : '../../../dist'
|
||||
---
|
||||
<!-- Navbar -->
|
||||
<nav class="app-header navbar navbar-expand bg-body">
|
||||
<div class="container-fluid">
|
||||
<!-- Start navbar links -->
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-lte-toggle="sidebar-full" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-md-block">
|
||||
<a href="#" class="nav-link">Home</a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-md-block">
|
||||
<a href="#" class="nav-link">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- End navbar links -->
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<!-- Navbar Search -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
|
||||
<i class="fa-solid fa-search"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Messages Dropdown Menu -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-bs-toggle="dropdown" href="#">
|
||||
<i class="fa-regular fa-comments"></i>
|
||||
<span class="navbar-badge badge text-bg-danger">3</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
||||
<a href="#" class="dropdown-item">
|
||||
<!-- Message Start -->
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src={distPath + '/assets/img/user1-128x128.jpg'} alt="User Avatar" class="img-size-50 rounded-circle me-3">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h3 class="dropdown-item-title">
|
||||
Brad Diesel
|
||||
<span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="fs-7">Call me whenever you can...</p>
|
||||
<p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<!-- Message Start -->
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src={distPath + '/assets/img/user8-128x128.jpg'} alt="User Avatar" class="img-size-50 rounded-circle me-3">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h3 class="dropdown-item-title">
|
||||
John Pierce
|
||||
<span class="float-end fs-7 text-secondary"><i class="fa-solid fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="fs-7">I got your message bro</p>
|
||||
<p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<!-- Message Start -->
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src={distPath + '/assets/img/user3-128x128.jpg'}alt="User Avatar" class="img-size-50 rounded-circle me-3">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h3 class="dropdown-item-title">
|
||||
Nora Silvester
|
||||
<span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="fs-7">The subject goes here</p>
|
||||
<p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Notifications Dropdown Menu -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-bs-toggle="dropdown" href="#">
|
||||
<i class="fa-regular fa-bell"></i>
|
||||
<span class="navbar-badge badge text-bg-warning">15</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
||||
<span class="dropdown-item dropdown-header">15 Notifications</span>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fa-solid fa-envelope me-2"></i> 4 new messages
|
||||
<span class="float-end text-secondary fs-7">3 mins</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fa-solid fa-users me-2"></i> 8 friend requests
|
||||
<span class="float-end text-secondary fs-7">12 hours</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fa-solid fa-file me-2"></i> 3 new reports
|
||||
<span class="float-end text-secondary fs-7">2 days</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown user-menu">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
|
||||
<img src={distPath + '/assets/img/user2-160x160.jpg'} class="user-image rounded-circle shadow" alt="User Image">
|
||||
<span class="d-none d-md-inline">Alexander Pierce</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
||||
<!-- User image -->
|
||||
<li class="user-header text-bg-primary">
|
||||
<img src={distPath + '/assets/img/user2-160x160.jpg'} class="rounded-circle shadow" alt="User Image">
|
||||
|
||||
<p>
|
||||
Alexander Pierce - Web Developer
|
||||
<small>Member since Nov. 2023</small>
|
||||
</p>
|
||||
</li>
|
||||
<!-- Menu Body -->
|
||||
<li class="user-body">
|
||||
<div class="row">
|
||||
<div class="col-4 text-center">
|
||||
<a href="#">Followers</a>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<a href="#">Sales</a>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<a href="#">Friends</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</li>
|
||||
<!-- Menu Footer-->
|
||||
<li class="user-footer">
|
||||
<a href="#" class="btn btn-default btn-flat">Profile</a>
|
||||
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static">
|
||||
<span class="theme-icon-active">
|
||||
<i class="my-1"></i>
|
||||
</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light">
|
||||
<i class="fa-regular fa-sun me-2"></i>
|
||||
Light
|
||||
<i class="fa-solid fa-check ms-auto d-none"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
|
||||
<i class="fa-solid fa-moon me-2"></i>
|
||||
Dark
|
||||
<i class="fa-solid fa-check ms-auto d-none"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto">
|
||||
<i class="fa-solid fa-circle-half-stroke me-2"></i>
|
||||
Auto
|
||||
<i class="fa-solid fa-check ms-auto d-none"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- TODO tackel in v4.1 -->
|
||||
<!-- <li class="nav-item">
|
||||
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
|
||||
<i class="fa-solid fa-expand-arrows-alt"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
|
||||
<i class="fa-solid fa-th-large"></i>
|
||||
</a>
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- /.navbar -->
|
||||
1
src/html/env.d.ts
vendored
Normal file
1
src/html/env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="astro/client" />
|
||||
157
src/html/pages/UI/timeline.astro
Normal file
157
src/html/pages/UI/timeline.astro
Normal file
@@ -0,0 +1,157 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Footer from '@components/dashboard/_footer.astro';
|
||||
import Topbar from '@components/dashboard/_topbar.astro';
|
||||
import Sidenav from '@components/dashboard/_sidenav.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
|
||||
const title = 'AdminLTE 4 | Timeline Elements'
|
||||
const mainPage = 'ui-elements'
|
||||
const page = 'timeline'
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} />
|
||||
</head>
|
||||
<body class="layout-fixed bg-body-tertiary">
|
||||
<div class="app-wrapper">
|
||||
<Topbar />
|
||||
<Sidenav mainPage={mainPage} page={page} />
|
||||
<!-- Main content -->
|
||||
<main class="app-main">
|
||||
<div class="app-content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Timeline</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Timeline</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main content -->
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<!-- Timelime example -->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<!-- The time line -->
|
||||
<div class="timeline">
|
||||
<!-- timeline time label -->
|
||||
<div class="time-label">
|
||||
<span class="text-bg-danger">10 Feb. 2023</span>
|
||||
</div>
|
||||
<!-- /.timeline-label -->
|
||||
<!-- timeline item -->
|
||||
<div>
|
||||
<i class="timeline-icon fa-solid fa-envelope text-bg-primary"></i>
|
||||
<div class="timeline-item">
|
||||
<span class="time"><i class="fa-solid fa-clock"></i> 12:05</span>
|
||||
<h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>
|
||||
|
||||
<div class="timeline-body">
|
||||
Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles,
|
||||
weebly ning heekya handango imeem plugg dopplr jibjab, movity
|
||||
jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle
|
||||
quora plaxo ideeli hulu weebly balihoo...
|
||||
</div>
|
||||
<div class="timeline-footer">
|
||||
<a class="btn btn-primary btn-sm">Read more</a>
|
||||
<a class="btn btn-danger btn-sm">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END timeline item -->
|
||||
<!-- timeline item -->
|
||||
<div>
|
||||
<i class="timeline-icon fa-solid fa-user text-bg-success"></i>
|
||||
<div class="timeline-item">
|
||||
<span class="time"><i class="fa-solid fa-clock"></i> 5 mins ago</span>
|
||||
<h3 class="timeline-header no-border"><a href="#">Sarah Young</a> accepted your friend request</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END timeline item -->
|
||||
<!-- timeline item -->
|
||||
<div>
|
||||
<i class="timeline-icon fa-solid fa-comments text-bg-warning"></i>
|
||||
<div class="timeline-item">
|
||||
<span class="time"><i class="fa-solid fa-clock"></i> 27 mins ago</span>
|
||||
<h3 class="timeline-header"><a href="#">Jay White</a> commented on your post</h3>
|
||||
<div class="timeline-body">
|
||||
Take me to your leader!
|
||||
Switzerland is small and neutral!
|
||||
We are more like Germany, ambitious and misunderstood!
|
||||
</div>
|
||||
<div class="timeline-footer">
|
||||
<a class="btn btn-warning btn-sm">View comment</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END timeline item -->
|
||||
<!-- timeline time label -->
|
||||
<div class="time-label">
|
||||
<span class="text-bg-success">3 Jan. 2023</span>
|
||||
</div>
|
||||
<!-- /.timeline-label -->
|
||||
<!-- timeline item -->
|
||||
<div>
|
||||
<i class="timeline-icon fa-solid fa-camera text-bg-primary"></i>
|
||||
<div class="timeline-item">
|
||||
<span class="time"><i class="fa-solid fa-clock"></i> 2 days ago</span>
|
||||
<h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
|
||||
<div class="timeline-body">
|
||||
<img src="../../assets/img/user1-128x128.jpg" alt="...">
|
||||
<img src="../../assets/img/user3-128x128.jpg" alt="...">
|
||||
<img src="../../assets/img/user4-128x128.jpg" alt="...">
|
||||
<img src="../../assets/img/user5-128x128.jpg" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END timeline item -->
|
||||
<!-- timeline item -->
|
||||
<div>
|
||||
<i class="timeline-icon fa-solid fa-video text-bg-info"></i>
|
||||
|
||||
<div class="timeline-item">
|
||||
<span class="time"><i class="fa-solid fa-clock"></i> 5 days ago</span>
|
||||
|
||||
<h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3>
|
||||
|
||||
<div class="timeline-body">
|
||||
<div class="ratio ratio-16x9">
|
||||
<iframe src="https://www.youtube.com/embed/tMWkeBIohBs" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-footer">
|
||||
<a href="#" class="btn btn-sm text-bg-warning">See comments</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END timeline item -->
|
||||
<div>
|
||||
<i class="timeline-icon fa-solid fa-clock text-bg-secondary"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
81
src/html/pages/examples/login.astro
Normal file
81
src/html/pages/examples/login.astro
Normal file
@@ -0,0 +1,81 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
|
||||
const title = 'AdminLTE 4 | Login Page'
|
||||
const { path } = Astro.props
|
||||
const htmlPath = (path != undefined) ? '.' : '..'
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} />
|
||||
</head>
|
||||
<body class="login-page bg-body-secondary">
|
||||
<div class="login-box">
|
||||
<div class="login-logo">
|
||||
<a href={htmlPath + '/index2.html'}><b>Admin</b>LTE</a>
|
||||
</div>
|
||||
<!-- /.login-logo -->
|
||||
<div class="card">
|
||||
<div class="card-body login-card-body">
|
||||
<p class="login-box-msg">Sign in to start your session</p>
|
||||
|
||||
<form action={htmlPath + '/index3.html'} method="post">
|
||||
<div class="input-group mb-3">
|
||||
<input type="email" class="form-control" placeholder="Email">
|
||||
<div class="input-group-text">
|
||||
<span class="fa-solid fa-envelope"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
<div class="input-group-text">
|
||||
<span class="fa-solid fa-lock"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
|
||||
<label class="form-check-label" for="flexCheckDefault">
|
||||
Remember Me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-4">
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn btn-primary">Sign In</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="social-auth-links text-center mb-3 d-grid gap-2">
|
||||
<p>- OR -</p>
|
||||
<a href="#" class="btn btn-primary">
|
||||
<i class="fa-brands fa-facebook me-2"></i> Sign in using Facebook
|
||||
</a>
|
||||
<a href="#" class="btn btn-danger">
|
||||
<i class="fa-brands fa-google-plus me-2"></i> Sign in using Google+
|
||||
</a>
|
||||
</div>
|
||||
<!-- /.social-auth-links -->
|
||||
|
||||
<p class="mb-1">
|
||||
<a href="forgot-password.html">I forgot my password</a>
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
<a href="register.html" class="text-center">Register a new membership</a>
|
||||
</p>
|
||||
</div>
|
||||
<!-- /.login-card-body -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.login-box -->
|
||||
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
84
src/html/pages/examples/register.astro
Normal file
84
src/html/pages/examples/register.astro
Normal file
@@ -0,0 +1,84 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
|
||||
const title = 'AdminLTE 4 | Register Page'
|
||||
const { path } = Astro.props
|
||||
const htmlPath = (path != undefined) ? '.' : '..'
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} />
|
||||
</head>
|
||||
<body class="register-page bg-body-secondary">
|
||||
<div class="register-box">
|
||||
<div class="register-logo">
|
||||
<a href={htmlPath + '/index2.html'}><b>Admin</b>LTE</a>
|
||||
</div>
|
||||
<!-- /.register-logo -->
|
||||
<div class="card">
|
||||
<div class="card-body register-card-body">
|
||||
<p class="register-box-msg">Register a new membership</p>
|
||||
|
||||
<form action={htmlPath + '/index3.html'} method="post">
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" placeholder="Full Name">
|
||||
<div class="input-group-text">
|
||||
<span class="fa-solid fa-user"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<input type="email" class="form-control" placeholder="Email">
|
||||
<div class="input-group-text">
|
||||
<span class="fa-solid fa-envelope"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
<div class="input-group-text">
|
||||
<span class="fa-solid fa-lock"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
|
||||
<label class="form-check-label" for="flexCheckDefault">
|
||||
I agree to the <a href="#">terms</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-4">
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn btn-primary">Sign In</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="social-auth-links text-center mb-3 d-grid gap-2">
|
||||
<p>- OR -</p>
|
||||
<a href="#" class="btn btn-primary">
|
||||
<i class="fa-brands fa-facebook me-2"></i> Sign in using Facebook
|
||||
</a>
|
||||
<a href="#" class="btn btn-danger">
|
||||
<i class="fa-brands fa-google-plus me-2"></i> Sign in using Google+
|
||||
</a>
|
||||
</div>
|
||||
<!-- /.social-auth-links -->
|
||||
|
||||
<p class="mb-0">
|
||||
<a href="login.html" class="text-center">I already have a membership</a>
|
||||
</p>
|
||||
</div>
|
||||
<!-- /.register-card-body -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.register-box -->
|
||||
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
92
src/html/pages/forms/general.astro
Normal file
92
src/html/pages/forms/general.astro
Normal file
@@ -0,0 +1,92 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Footer from '@components/dashboard/_footer.astro';
|
||||
import Topbar from '@components/dashboard/_topbar.astro';
|
||||
import Sidenav from '@components/dashboard/_sidenav.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
|
||||
const title = 'AdminLTE 4 | General Form Elements'
|
||||
const mainPage = 'forms'
|
||||
const page = 'general'
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} />
|
||||
</head>
|
||||
<body class="layout-fixed bg-body-tertiary">
|
||||
<div class="app-wrapper">
|
||||
<Topbar />
|
||||
<Sidenav mainPage={mainPage} page={page} />
|
||||
<!-- Main content -->
|
||||
<main class="app-main">
|
||||
<div class="app-content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">General Form</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">General Form</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main content -->
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<div class="row g-4">
|
||||
<!-- Start column -->
|
||||
<div class="col-md-6">
|
||||
<!-- general form elements -->
|
||||
<div class="card card-primary card-outline">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
Quick Example
|
||||
</div>
|
||||
</div>
|
||||
<form>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail1" class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
||||
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPassword1" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1">
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<input type="file" class="form-control" id="inputGroupFile02">
|
||||
<label class="input-group-text" for="inputGroupFile02">Upload</label>
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
||||
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
473
src/html/pages/index.astro
Normal file
473
src/html/pages/index.astro
Normal file
@@ -0,0 +1,473 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Footer from '@components/dashboard/_footer.astro';
|
||||
import Topbar from '@components/dashboard/_topbar.astro';
|
||||
import Sidenav from '@components/dashboard/_sidenav.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
|
||||
const title = 'AdminLTE v4 | Dashboard'
|
||||
const path = '../../dist'
|
||||
const mainPage = 'dashboard'
|
||||
const page = 'index'
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} path={path} />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
|
||||
</head>
|
||||
|
||||
<body class="layout-fixed bg-body-tertiary">
|
||||
<div class="app-wrapper">
|
||||
<Topbar path={path} />
|
||||
<Sidenav path={path} mainPage={mainPage} page={page} />
|
||||
<!-- Main content -->
|
||||
<main class="app-main">
|
||||
<div class="app-content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Dashboard</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Dashboard</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<!-- Small boxes (Stat box) -->
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-6">
|
||||
<!-- small box -->
|
||||
<div class="small-box text-bg-primary">
|
||||
<div class="inner">
|
||||
<h3>150</h3>
|
||||
|
||||
<p>New Orders</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="inner-icon ion ion-bag"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./col -->
|
||||
<div class="col-lg-3 col-6">
|
||||
<!-- small box -->
|
||||
<div class="small-box text-bg-success">
|
||||
<div class="inner">
|
||||
<h3>53<sup class="fs-5">%</sup></h3>
|
||||
|
||||
<p>Bounce Rate</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="inner-icon ion ion-stats-bars"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./col -->
|
||||
<div class="col-lg-3 col-6">
|
||||
<!-- small box -->
|
||||
<div class="small-box text-bg-warning">
|
||||
<div class="inner">
|
||||
<h3>44</h3>
|
||||
|
||||
<p>User Registrations</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="inner-icon ion ion-person-add"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./col -->
|
||||
<div class="col-lg-3 col-6">
|
||||
<!-- small box -->
|
||||
<div class="small-box text-bg-danger">
|
||||
<div class="inner">
|
||||
<h3>65</h3>
|
||||
|
||||
<p>Unique Visitors</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="inner-icon ion ion-pie-graph"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<!-- Main row -->
|
||||
<div class="row">
|
||||
<!-- Start col -->
|
||||
<div class="col-lg-7">
|
||||
<!-- Custom tabs (Charts with tabs)-->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
<i class="fa-solid fa-chart-pie me-1"></i>
|
||||
Sales
|
||||
</h3>
|
||||
<div class="card-tools">
|
||||
<ul class="nav nav-pills ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#revenue-chart" data-bs-toggle="tab">Area</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#sales-chart" data-bs-toggle="tab">Donut</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<div class="tab-content p-0">
|
||||
<!-- Morris chart - Sales -->
|
||||
<div class="chart tab-pane active" id="revenue-chart"
|
||||
style="position: relative; height: 300px;">
|
||||
<canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>
|
||||
</div>
|
||||
<div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">
|
||||
<canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
<!-- DIRECT CHAT -->
|
||||
<div class="card direct-chat direct-chat-primary">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Direct Chat</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<span title="3 New Messages" class="badge text-bg-primary">3</span>
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" title="Contacts" data-lte-toggle="chat-pane">
|
||||
<i class="fa-solid fa-comments"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<!-- Conversations are loaded here -->
|
||||
<div class="direct-chat-messages">
|
||||
<!-- Message. Default to the start -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-start">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-end">23 Jan 2:00 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src={path + '/assets/img/user1-128x128.jpg'} alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
Is this template really for free? That's unbelievable!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message to the end -->
|
||||
<div class="direct-chat-msg end">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-end">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-start">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src={path + '/assets/img/user3-128x128.jpg'} alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
You better believe it!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message. Default to the start -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-start">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-end">23 Jan 5:37 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src={path + '/assets/img/user1-128x128.jpg'} alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
Working with AdminLTE on a great new app! Wanna join?
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message to the end -->
|
||||
<div class="direct-chat-msg end">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-end">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-start">23 Jan 6:10 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src={path + '/assets/img/user3-128x128.jpg'} alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
I would love to.
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
</div>
|
||||
<!--/.direct-chat-messages-->
|
||||
|
||||
<!-- Contacts are loaded here -->
|
||||
<div class="direct-chat-contacts">
|
||||
<ul class="contacts-list">
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src={path + '/assets/img/user1-128x128.jpg'} alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Count Dracula
|
||||
<small class="contacts-list-date float-end">2/28/2023</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">How have you been? I was...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src={path + '/assets/img/user7-128x128.jpg'} alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Sarah Doe
|
||||
<small class="contacts-list-date float-end">2/23/2023</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">I will be waiting for...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src={path + '/assets/img/user3-128x128.jpg'} alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Nadia Jolie
|
||||
<small class="contacts-list-date float-end">2/20/2023</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">I'll call you back at...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src={path + '/assets/img/user5-128x128.jpg'} alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Nora S. Vans
|
||||
<small class="contacts-list-date float-end">2/10/2023</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Where is your new...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src={path + '/assets/img/user6-128x128.jpg'} alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
John K.
|
||||
<small class="contacts-list-date float-end">1/27/2023</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Can I take a look at...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src={path + '/assets/img/user8-128x128.jpg'} alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Kenneth M.
|
||||
<small class="contacts-list-date float-end">1/4/2023</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Never mind I found...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
</ul>
|
||||
<!-- /.contacts-list -->
|
||||
</div>
|
||||
<!-- /.direct-chat-pane -->
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">
|
||||
<form action="#" method="post">
|
||||
<div class="input-group">
|
||||
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
|
||||
<span class="input-group-append">
|
||||
<button type="button" class="btn btn-primary">Send</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /.card-footer-->
|
||||
</div>
|
||||
<!--/.direct-chat -->
|
||||
</div>
|
||||
<!-- /.Start col -->
|
||||
</div>
|
||||
<!-- /.row (main row) -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts path={path} />
|
||||
|
||||
<!-- OPTIONAL SCRIPTS -->
|
||||
|
||||
<!-- ChartJS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
|
||||
<script is:inline>
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR DEMO
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
/* Chart.js Charts */
|
||||
// Sales chart
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
var salesChartCanvas = document.querySelector('#revenue-chart-canvas').getContext('2d')
|
||||
|
||||
var salesChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Digital Goods',
|
||||
backgroundColor: 'rgba(60,141,188,0.9)',
|
||||
borderColor: 'rgba(60,141,188,0.8)',
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointColor: '#3b8bba',
|
||||
pointStrokeColor: 'rgba(60,141,188,1)',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(60,141,188,1)',
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
},
|
||||
{
|
||||
label: 'Electronics',
|
||||
backgroundColor: 'rgba(210, 214, 222, 1)',
|
||||
borderColor: 'rgba(210, 214, 222, 1)',
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointColor: 'rgba(210, 214, 222, 1)',
|
||||
pointStrokeColor: '#c1c7d1',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(220,220,220,1)',
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
var salesChartOptions = {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: {
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
yAxes: {
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// This will get the first returned node in the js collection.
|
||||
var salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
|
||||
type: 'line',
|
||||
data: salesChartData,
|
||||
options: salesChartOptions
|
||||
})
|
||||
|
||||
// Donut Chart
|
||||
var pieChartCanvas = document.querySelector('#sales-chart-canvas').getContext('2d')
|
||||
var pieData = {
|
||||
labels: [
|
||||
'Instore Sales',
|
||||
'Download Sales',
|
||||
'Mail-Order Sales'
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [30, 12, 20],
|
||||
backgroundColor: ['#f56954', '#00a65a', '#f39c12']
|
||||
}
|
||||
]
|
||||
}
|
||||
var pieOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
responsive: true
|
||||
}
|
||||
// Create pie or douhnut chart
|
||||
// You can switch between pie and douhnut using the method below.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
var pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]
|
||||
type: 'doughnut',
|
||||
data: pieData,
|
||||
options: pieOptions
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
966
src/html/pages/index2.astro
Normal file
966
src/html/pages/index2.astro
Normal file
@@ -0,0 +1,966 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Footer from '@components/dashboard/_footer.astro';
|
||||
import Topbar from '@components/dashboard/_topbar.astro';
|
||||
import Sidenav from '@components/dashboard/_sidenav.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
|
||||
const title = 'AdminLTE | Dashboard v2'
|
||||
const path = '../../dist'
|
||||
const mainPage = 'dashboard'
|
||||
const page = 'index2'
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} path={path} />
|
||||
</head>
|
||||
|
||||
<body class="layout-fixed bg-body-tertiary">
|
||||
<div class="app-wrapper">
|
||||
<Topbar path={path} />
|
||||
<Sidenav path={path} mainPage={mainPage} page={page} />
|
||||
<!-- Main content -->
|
||||
<main class="app-main">
|
||||
<div class="app-content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Dashboard v2</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Dashboard v2</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<!-- Info boxes -->
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon text-bg-primary shadow-sm"><i class="fa-solid fa-cog"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">CPU Traffic</span>
|
||||
<span class="info-box-number">
|
||||
10
|
||||
<small>%</small>
|
||||
</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon text-bg-danger shadow-sm"><i class="fa-solid fa-thumbs-up"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Likes</span>
|
||||
<span class="info-box-number">41,410</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<!-- fix for small devices only -->
|
||||
<!-- <div class="clearfix hidden-md-up"></div> -->
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon text-bg-success shadow-sm"><i class="fa-solid fa-shopping-cart"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Sales</span>
|
||||
<span class="info-box-number">760</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon text-bg-warning shadow-sm"><i class="fa-solid fa-users"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">New Members</span>
|
||||
<span class="info-box-number">2,000</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Monthly Recap Report</h5>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-tool dropdown-toggle" data-bs-toggle="dropdown">
|
||||
<i class="fa-solid fa-wrench"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end" role="menu">
|
||||
<a href="#" class="dropdown-item">Action</a>
|
||||
<a href="#" class="dropdown-item">Another action</a>
|
||||
<a href="#" class="dropdown-item">Something else here</a>
|
||||
<a class="dropdown-divider"></a>
|
||||
<a href="#" class="dropdown-item">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<p class="text-center">
|
||||
<strong>Sales: 1 Jan, 2023 - 30 Jul, 2023</strong>
|
||||
</p>
|
||||
|
||||
<div class="chart">
|
||||
<!-- Sales Chart Canvas -->
|
||||
<canvas id="salesChart" style="height: 180px;"></canvas>
|
||||
</div>
|
||||
<!-- /.chart-responsive -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-4">
|
||||
<p class="text-center">
|
||||
<strong>Goal Completion</strong>
|
||||
</p>
|
||||
|
||||
<div class="progress-group">
|
||||
Add Products to Cart
|
||||
<span class="float-end"><b>160</b>/200</span>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar text-bg-primary" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.progress-group -->
|
||||
|
||||
<div class="progress-group">
|
||||
Complete Purchase
|
||||
<span class="float-end"><b>310</b>/400</span>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar text-bg-danger" style="width: 75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- /.progress-group -->
|
||||
<div class="progress-group">
|
||||
<span class="progress-text">Visit Premium Page</span>
|
||||
<span class="float-end"><b>480</b>/800</span>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar text-bg-success" style="width: 60%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- /.progress-group -->
|
||||
<div class="progress-group">
|
||||
Send Inquiries
|
||||
<span class="float-end"><b>250</b>/500</span>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar text-bg-warning" style="width: 50%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.progress-group -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- ./card-body -->
|
||||
<div class="card-footer">
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-6">
|
||||
<div class="text-center border-end">
|
||||
<span class="text-success"><i class="fa-solid fa-caret-up"></i> 17%</span>
|
||||
<h5 class="fw-bold mb-0">$35,210.43</h5>
|
||||
<span class="text-uppercase">TOTAL REVENUE</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-6">
|
||||
<div class="text-center border-end">
|
||||
<span class="text-info"><i class="fa-solid fa-caret-left"></i> 0%</span>
|
||||
<h5 class="fw-bold mb-0">$10,390.90</h5>
|
||||
<span class="text-uppercase">TOTAL COST</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-6">
|
||||
<div class="text-center border-end">
|
||||
<span class="text-success"><i class="fa-solid fa-caret-up"></i> 20%</span>
|
||||
<h5 class="fw-bold mb-0">$24,813.53</h5>
|
||||
<span class="text-uppercase">TOTAL PROFIT</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-6">
|
||||
<div class="text-center">
|
||||
<span class="text-danger"><i class="fa-solid fa-caret-down"></i> 18%</span>
|
||||
<h5 class="fw-bold mb-0">1200</h5>
|
||||
<span class="text-uppercase">GOAL COMPLETIONS</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.card-footer -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- Main row -->
|
||||
<div class="row">
|
||||
<!-- Start col -->
|
||||
<div class="col-md-8">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<!-- DIRECT CHAT -->
|
||||
<div class="card direct-chat direct-chat-warning">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Direct Chat</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<span title="3 New Messages" class="badge text-bg-warning">3</span>
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" title="Contacts" data-lte-toggle="chat-pane">
|
||||
<i class="fa-solid fa-comments"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<!-- Conversations are loaded here -->
|
||||
<div class="direct-chat-messages">
|
||||
<!-- Message. Default to the start -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-start">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-end">23 Jan 2:00 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src={path + '/assets/img/user1-128x128.jpg'} alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
Is this template really for free? That's unbelievable!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message to the end -->
|
||||
<div class="direct-chat-msg end">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-end">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-start">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src={path + '/assets/img/user3-128x128.jpg'} alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
You better believe it!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message. Default to the start -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-start">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-end">23 Jan 5:37 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src={path + '/assets/img/user1-128x128.jpg'} alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
Working with AdminLTE on a great new app! Wanna join?
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message to the end -->
|
||||
<div class="direct-chat-msg end">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-end">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-start">23 Jan 6:10 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src={path + '/assets/img/user3-128x128.jpg'} alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
I would love to.
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
</div>
|
||||
<!--/.direct-chat-messages-->
|
||||
|
||||
<!-- Contacts are loaded here -->
|
||||
<div class="direct-chat-contacts">
|
||||
<ul class="contacts-list">
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src={path + '/assets/img/user1-128x128.jpg'} alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Count Dracula
|
||||
<small class="contacts-list-date float-end">2/28/2023</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">How have you been? I was...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src={path + '/assets/img/user7-128x128.jpg'} alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Sarah Doe
|
||||
<small class="contacts-list-date float-end">2/23/2023</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">I will be waiting for...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src={path + '/assets/img/user3-128x128.jpg'} alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Nadia Jolie
|
||||
<small class="contacts-list-date float-end">2/20/2023</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">I'll call you back at...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src={path + '/assets/img/user5-128x128.jpg'} alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Nora S. Vans
|
||||
<small class="contacts-list-date float-end">2/10/2023</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Where is your new...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src={path + '/assets/img/user6-128x128.jpg'} alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
John K.
|
||||
<small class="contacts-list-date float-end">1/27/2023</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Can I take a look at...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src={path + '/assets/img/user8-128x128.jpg'} alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Kenneth M.
|
||||
<small class="contacts-list-date float-end">1/4/2023</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Never mind I found...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
</ul>
|
||||
<!-- /.contacts-list -->
|
||||
</div>
|
||||
<!-- /.direct-chat-pane -->
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">
|
||||
<form action="#" method="post">
|
||||
<div class="input-group">
|
||||
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
|
||||
<span class="input-group-append">
|
||||
<button type="button" class="btn btn-warning">Send</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /.card-footer-->
|
||||
</div>
|
||||
<!--/.direct-chat -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<div class="col-md-6">
|
||||
<!-- USERS LIST -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Latest Members</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<span class="badge text-bg-danger">8 New Members</span>
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<div class="row text-center m-1">
|
||||
<div class="col-3 p-2">
|
||||
<img class="img-fluid rounded-circle" src={path + '/assets/img/user1-128x128.jpg'} alt="User Image">
|
||||
<a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Alexander Pierce</a>
|
||||
<div class="fs-8">Today</div>
|
||||
</div>
|
||||
<div class="col-3 p-2">
|
||||
<img class="img-fluid rounded-circle" src={path + '/assets/img/user1-128x128.jpg'} alt="User Image">
|
||||
<a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Norman</a>
|
||||
<div class="fs-8">Yesterday</div>
|
||||
</div>
|
||||
<div class="col-3 p-2">
|
||||
<img class="img-fluid rounded-circle" src={path + '/assets/img/user7-128x128.jpg'} alt="User Image">
|
||||
<a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Jane</a>
|
||||
<div class="fs-8">12 Jan</div>
|
||||
</div>
|
||||
<div class="col-3 p-2">
|
||||
<img class="img-fluid rounded-circle" src={path + '/assets/img/user6-128x128.jpg'} alt="User Image">
|
||||
<a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">John</a>
|
||||
<div class="fs-8">12 Jan</div>
|
||||
</div>
|
||||
<div class="col-3 p-2">
|
||||
<img class="img-fluid rounded-circle" src={path + '/assets/img/user2-160x160.jpg'} alt="User Image">
|
||||
<a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Alexander</a>
|
||||
<div class="fs-8">13 Jan</div>
|
||||
</div>
|
||||
<div class="col-3 p-2">
|
||||
<img class="img-fluid rounded-circle" src={path + '/assets/img/user5-128x128.jpg'} alt="User Image">
|
||||
<a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Sarah</a>
|
||||
<div class="fs-8">14 Jan</div>
|
||||
</div>
|
||||
<div class="col-3 p-2">
|
||||
<img class="img-fluid rounded-circle" src={path + '/assets/img/user4-128x128.jpg'} alt="User Image">
|
||||
<a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Nora</a>
|
||||
<div class="fs-8">15 Jan</div>
|
||||
</div>
|
||||
<div class="col-3 p-2">
|
||||
<img class="img-fluid rounded-circle" src={path + '/assets/img/user3-128x128.jpg'} alt="User Image">
|
||||
<a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Nadia</a>
|
||||
<div class="fs-8">15 Jan</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.users-list -->
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer text-center">
|
||||
<a href="javascript:">View All Users</a>
|
||||
</div>
|
||||
<!-- /.card-footer -->
|
||||
</div>
|
||||
<!--/.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- TABLE: LATEST ORDERS -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Latest Orders</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table m-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order ID</th>
|
||||
<th>Item</th>
|
||||
<th>Status</th>
|
||||
<th>Popularity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR9842</a></td>
|
||||
<td>Call of Duty IV</td>
|
||||
<td><span class="badge text-bg-success">Shipped</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR1848</a></td>
|
||||
<td>Samsung Smart TV</td>
|
||||
<td><span class="badge text-bg-warning">Pending</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR7429</a></td>
|
||||
<td>iPhone 6 Plus</td>
|
||||
<td><span class="badge text-bg-danger">Delivered</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR7429</a></td>
|
||||
<td>Samsung Smart TV</td>
|
||||
<td><span class="badge text-bg-info">Processing</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#00c0ef" data-height="20">90,80,-90,70,-61,83,63</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR1848</a></td>
|
||||
<td>Samsung Smart TV</td>
|
||||
<td><span class="badge text-bg-warning">Pending</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR7429</a></td>
|
||||
<td>iPhone 6 Plus</td>
|
||||
<td><span class="badge text-bg-danger">Delivered</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR9842</a></td>
|
||||
<td>Call of Duty IV</td>
|
||||
<td><span class="badge text-bg-success">Shipped</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.table-responsive -->
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer clearfix">
|
||||
<a href="javascript:void(0)" class="btn btn-sm btn-primary float-start">Place New Order</a>
|
||||
<a href="javascript:void(0)" class="btn btn-sm btn-secondary float-end">View All Orders</a>
|
||||
</div>
|
||||
<!-- /.card-footer -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<div class="col-md-4">
|
||||
<!-- Info Boxes Style 2 -->
|
||||
<div class="info-box mb-3 text-bg-warning">
|
||||
<span class="info-box-icon"><i class="fa-solid fa-tag"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Inventory</span>
|
||||
<span class="info-box-number">5,200</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
<div class="info-box mb-3 text-bg-success">
|
||||
<span class="info-box-icon"><i class="fa-regular fa-heart"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Mentions</span>
|
||||
<span class="info-box-number">92,050</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
<div class="info-box mb-3 text-bg-danger">
|
||||
<span class="info-box-icon"><i class="fa-solid fa-cloud-download-alt"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Downloads</span>
|
||||
<span class="info-box-number">114,381</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
<div class="info-box mb-3 text-bg-info">
|
||||
<span class="info-box-icon"><i class="fa-regular fa-comment"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Direct Messages</span>
|
||||
<span class="info-box-number">163,921</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Browser Usage</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="chart-responsive">
|
||||
<canvas id="pieChart" height="150"></canvas>
|
||||
</div>
|
||||
<!-- ./chart-responsive -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-4">
|
||||
<ul class="row list-unstyled text-nowrap">
|
||||
<li class="col"><i class="fa-regular fa-circle text-danger"></i> Chrome</li>
|
||||
<li class="col"><i class="fa-regular fa-circle text-success"></i> IE</li>
|
||||
<li class="col"><i class="fa-regular fa-circle text-warning"></i> FireFox</li>
|
||||
<li class="col"><i class="fa-regular fa-circle text-info"></i> Safari</li>
|
||||
<li class="col"><i class="fa-regular fa-circle text-primary"></i> Opera</li>
|
||||
<li class="col"><i class="fa-regular fa-circle text-secondary"></i> Navigator</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer p-0">
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
United States of America
|
||||
<span class="float-end text-danger">
|
||||
<i class="fa-solid fa-arrow-down fs-7"></i>
|
||||
12%</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
India
|
||||
<span class="float-end text-success">
|
||||
<i class="fa-solid fa-arrow-up fs-7"></i> 4%
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
China
|
||||
<span class="float-end text-info">
|
||||
<i class="fa-solid fa-arrow-left fs-7"></i> 0%
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.footer -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
<!-- PRODUCT LIST -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Recently Added Products</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<ul class="products-list product-list-in-card ps-2 pe-2">
|
||||
<li class="item">
|
||||
<div class="product-img">
|
||||
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<a href="javascript:void(0)" class="product-title">Samsung TV
|
||||
<span class="badge text-bg-warning float-end">$1800</span></a>
|
||||
<span class="product-description">
|
||||
Samsung 32" 1080p 60Hz LED Smart HDTV.
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- /.item -->
|
||||
<li class="item">
|
||||
<div class="product-img">
|
||||
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<a href="javascript:void(0)" class="product-title">Bicycle
|
||||
<span class="badge text-bg-info float-end">$700</span></a>
|
||||
<span class="product-description">
|
||||
26" Mongoose Dolomite Men's 7-speed, Navy Blue.
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- /.item -->
|
||||
<li class="item">
|
||||
<div class="product-img">
|
||||
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<a href="javascript:void(0)" class="product-title">
|
||||
Xbox One <span class="badge text-bg-danger float-end">
|
||||
$350
|
||||
</span>
|
||||
</a>
|
||||
<span class="product-description">
|
||||
Xbox One Console Bundle with Halo Master Chief Collection.
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- /.item -->
|
||||
<li class="item">
|
||||
<div class="product-img">
|
||||
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<a href="javascript:void(0)" class="product-title">PlayStation 4
|
||||
<span class="badge text-bg-success float-end">$399</span></a>
|
||||
<span class="product-description">
|
||||
PlayStation 4 500GB Console (PS4)
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- /.item -->
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer text-center">
|
||||
<a href="javascript:void(0)" class="uppercase">View All Products</a>
|
||||
</div>
|
||||
<!-- /.card-footer -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts path={path} />
|
||||
|
||||
<!-- OPTIONAL SCRIPTS -->
|
||||
|
||||
<!-- ChartJS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
|
||||
|
||||
<script is:inline>
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR DEMO
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
/* ChartJS
|
||||
* -------
|
||||
* Here we will create a few charts using ChartJS
|
||||
*/
|
||||
|
||||
//-----------------------
|
||||
// - MONTHLY SALES CHART -
|
||||
//-----------------------
|
||||
(function () {
|
||||
'use strict'
|
||||
// Get context with querySelector - using Chart.js .getContext('2d') method.
|
||||
var salesChartCanvas = document.querySelector('#salesChart').getContext('2d')
|
||||
|
||||
var salesChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Digital Goods',
|
||||
backgroundColor: 'rgba(60,141,188,0.9)',
|
||||
borderColor: 'rgba(60,141,188,0.8)',
|
||||
fill: true,
|
||||
pointRadius: 0,
|
||||
pointColor: '#3b8bba',
|
||||
pointStrokeColor: 'rgba(60,141,188,1)',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(60,141,188,1)',
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
},
|
||||
{
|
||||
label: 'Electronics',
|
||||
backgroundColor: 'rgba(210, 214, 222, 1)',
|
||||
borderColor: 'rgba(210, 214, 222, 1)',
|
||||
fill: true,
|
||||
pointRadius: 0,
|
||||
pointColor: 'rgba(210, 214, 222, 1)',
|
||||
pointStrokeColor: '#c1c7d1',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(220,220,220,1)',
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
var salesChartOptions = {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
tension: 0.4,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: {
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
yAxes: {
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// This will get the first returned node in the js collection.
|
||||
var salesChart = new Chart(salesChartCanvas, {
|
||||
type: 'line',
|
||||
data: salesChartData,
|
||||
options: salesChartOptions
|
||||
})
|
||||
|
||||
//---------------------------
|
||||
// - END MONTHLY SALES CHART -
|
||||
//---------------------------
|
||||
|
||||
//-------------
|
||||
// - PIE CHART -
|
||||
//-------------
|
||||
|
||||
// Get context with querySelector - using Chart.js .getContext('2d') method.
|
||||
var pieChartCanvas = document.querySelector('#pieChart').getContext('2d')
|
||||
|
||||
var pieData = {
|
||||
labels: [
|
||||
'Chrome',
|
||||
'IE',
|
||||
'FireFox',
|
||||
'Safari',
|
||||
'Opera',
|
||||
'Navigator'
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [700, 500, 400, 600, 300, 100],
|
||||
backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
|
||||
}
|
||||
]
|
||||
}
|
||||
var pieOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
// Create pie or douhnut chart
|
||||
// You can switch between pie and douhnut using the method below.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
var pieChart = new Chart(pieChartCanvas, {
|
||||
type: 'doughnut',
|
||||
data: pieData,
|
||||
options: pieOptions
|
||||
})
|
||||
})()
|
||||
//-----------------
|
||||
// - END PIE CHART -
|
||||
//-----------------
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
426
src/html/pages/index3.astro
Normal file
426
src/html/pages/index3.astro
Normal file
@@ -0,0 +1,426 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Footer from '@components/dashboard/_footer.astro';
|
||||
import Topbar from '@components/dashboard/_topbar.astro';
|
||||
import Sidenav from '@components/dashboard/_sidenav.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
|
||||
const title = 'AdminLTE | Dashboard v3'
|
||||
const path = '../../dist'
|
||||
const mainPage = 'dashboard'
|
||||
const page = 'index3'
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} path={path} />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
|
||||
</head>
|
||||
|
||||
<body class="layout-fixed bg-body-tertiary">
|
||||
<div class="app-wrapper">
|
||||
<Topbar path={path} />
|
||||
<Sidenav path={path} mainPage={mainPage} page={page} />
|
||||
<!-- Main content -->
|
||||
<main class="app-main">
|
||||
<div class="app-content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Dashboard v3</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Dashboard v3</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header border-0">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h3 class="card-title">Online Store Visitors</h3>
|
||||
<a href="javascript:void(0);">View Report</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<p class="d-flex flex-column">
|
||||
<span class="fw-bold fs-5">820</span>
|
||||
<span>Visitors Over Time</span>
|
||||
</p>
|
||||
<p class="ms-auto d-flex flex-column text-end">
|
||||
<span class="text-success">
|
||||
<i class="fa-solid fa-arrow-up"></i> 12.5%
|
||||
</span>
|
||||
<span class="text-secondary">Since last week</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- /.d-flex -->
|
||||
|
||||
<div class="position-relative mb-4">
|
||||
<canvas id="visitors-chart" height="200"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-row justify-content-end">
|
||||
<span class="me-2">
|
||||
<i class="fa-solid fa-square text-primary"></i> This Week
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<i class="fa-solid fa-square text-secondary"></i> Last Week
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header border-0">
|
||||
<h3 class="card-title">Products</h3>
|
||||
<div class="card-tools">
|
||||
<a href="#" class="btn btn-tool btn-sm">
|
||||
<i class="fa-solid fa-download"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-tool btn-sm">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body table-responsive p-0">
|
||||
<table class="table table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Product</th>
|
||||
<th>Price</th>
|
||||
<th>Sales</th>
|
||||
<th>More</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
|
||||
Some Product
|
||||
</td>
|
||||
<td>$13 USD</td>
|
||||
<td>
|
||||
<small class="text-success me-1">
|
||||
<i class="fa-solid fa-arrow-up"></i>
|
||||
12%
|
||||
</small>
|
||||
12,000 Sold
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" class="text-secondary">
|
||||
<i class="fa-solid fa-search"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
|
||||
Another Product
|
||||
</td>
|
||||
<td>$29 USD</td>
|
||||
<td>
|
||||
<small class="text-warning me-1">
|
||||
<i class="fa-solid fa-arrow-down"></i>
|
||||
0.5%
|
||||
</small>
|
||||
123,234 Sold
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" class="text-secondary">
|
||||
<i class="fa-solid fa-search"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
|
||||
Amazing Product
|
||||
</td>
|
||||
<td>$1,230 USD</td>
|
||||
<td>
|
||||
<small class="text-danger me-1">
|
||||
<i class="fa-solid fa-arrow-down"></i>
|
||||
3%
|
||||
</small>
|
||||
198 Sold
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" class="text-secondary">
|
||||
<i class="fa-solid fa-search"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
|
||||
Perfect Item
|
||||
<span class="badge text-bg-danger">NEW</span>
|
||||
</td>
|
||||
<td>$199 USD</td>
|
||||
<td>
|
||||
<small class="text-success me-1">
|
||||
<i class="fa-solid fa-arrow-up"></i>
|
||||
63%
|
||||
</small>
|
||||
87 Sold
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" class="text-secondary">
|
||||
<i class="fa-solid fa-search"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col-md-6 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header border-0">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h3 class="card-title">Sales</h3>
|
||||
<a href="javascript:void(0);">View Report</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<p class="d-flex flex-column">
|
||||
<span class="fw-bold fs-5">$18,230.00</span>
|
||||
<span>Sales Over Time</span>
|
||||
</p>
|
||||
<p class="ms-auto d-flex flex-column text-end">
|
||||
<span class="text-success">
|
||||
<i class="fa-solid fa-arrow-up"></i> 33.1%
|
||||
</span>
|
||||
<span class="text-secondary">Since last month</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- /.d-flex -->
|
||||
|
||||
<div class="position-relative mb-4">
|
||||
<canvas id="sales-chart" height="200"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-row justify-content-end">
|
||||
<span class="me-2">
|
||||
<i class="fa-solid fa-square text-primary"></i> This year
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<i class="fa-solid fa-square text-secondary"></i> Last year
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header border-0">
|
||||
<h3 class="card-title">Online Store Overview</h3>
|
||||
<div class="card-tools">
|
||||
<a href="#" class="btn btn-sm btn-tool">
|
||||
<i class="fa-solid fa-download"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-sm btn-tool">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center border-bottom mb-3">
|
||||
<p class="text-success fs-2">
|
||||
<i class="ion ion-ios-refresh-empty"></i>
|
||||
</p>
|
||||
<p class="d-flex flex-column text-end">
|
||||
<span class="fw-bold">
|
||||
<i class="ion ion-android-arrow-up text-success"></i> 12%
|
||||
</span>
|
||||
<span class="text-secondary">CONVERSION RATE</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- /.d-flex -->
|
||||
<div class="d-flex justify-content-between align-items-center border-bottom mb-3">
|
||||
<p class="text-warning fs-2">
|
||||
<i class="ion ion-ios-cart-outline"></i>
|
||||
</p>
|
||||
<p class="d-flex flex-column text-end">
|
||||
<span class="fw-bold">
|
||||
<i class="ion ion-android-arrow-up text-warning"></i> 0.8%
|
||||
</span>
|
||||
<span class="text-secondary">SALES RATE</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- /.d-flex -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-0">
|
||||
<p class="text-danger fs-2">
|
||||
<i class="ion ion-ios-people-outline"></i>
|
||||
</p>
|
||||
<p class="d-flex flex-column text-end">
|
||||
<span class="fw-bold">
|
||||
<i class="ion ion-android-arrow-down text-danger"></i> 1%
|
||||
</span>
|
||||
<span class="text-secondary">REGISTRATION RATE</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- /.d-flex -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col-md-6 -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts path={path} />
|
||||
|
||||
<!-- OPTIONAL SCRIPTS -->
|
||||
|
||||
<!-- ChartJS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
|
||||
|
||||
<script is:inline>
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR DEMO
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
/* global Chart:false */
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
var ticksStyle = {
|
||||
fontColor: '#495057',
|
||||
fontStyle: 'bold'
|
||||
}
|
||||
|
||||
var mode = 'index'
|
||||
var intersect = true
|
||||
|
||||
var salesChartSelector = document.querySelector('#sales-chart')
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
var salesChart = new Chart(salesChartSelector, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)',
|
||||
'rgba(255, 205, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(201, 203, 207, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(255, 159, 64)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(153, 102, 255)',
|
||||
'rgb(201, 203, 207)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
var visitorsChartSelector = document.querySelector('#visitors-chart')
|
||||
var visitorsChart = new Chart(visitorsChartSelector, {
|
||||
data: {
|
||||
labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
|
||||
datasets: [{
|
||||
type: 'line',
|
||||
data: [100, 120, 170, 167, 180, 177, 160],
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#007bff',
|
||||
pointBorderColor: '#007bff',
|
||||
pointBackgroundColor: '#007bff'
|
||||
// pointHoverBackgroundColor: '#007bff',
|
||||
// pointHoverBorderColor : '#007bff'
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
data: [60, 80, 70, 67, 80, 77, 100],
|
||||
backgroundColor: 'tansparent',
|
||||
borderColor: '#ced4da',
|
||||
pointBorderColor: '#ced4da',
|
||||
pointBackgroundColor: '#ced4da'
|
||||
// pointHoverBackgroundColor: '#ced4da',
|
||||
// pointHoverBorderColor : '#ced4da'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
tooltip: {
|
||||
mode: mode,
|
||||
intersect: intersect
|
||||
},
|
||||
hover: {
|
||||
mode: mode,
|
||||
intersect: intersect
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: {
|
||||
// display: false,
|
||||
gridLines: {
|
||||
display: true,
|
||||
lineWidth: '4px',
|
||||
color: 'rgba(0, 0, 0, .2)',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: Object.assign({
|
||||
beginAtZero: true,
|
||||
suggestedMax: 200
|
||||
}, ticksStyle)
|
||||
},
|
||||
xAxes: {
|
||||
display: true,
|
||||
gridLines: {
|
||||
display: false
|
||||
},
|
||||
ticks: ticksStyle
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
83
src/html/pages/layout/fixed-sidebar.astro
Normal file
83
src/html/pages/layout/fixed-sidebar.astro
Normal file
@@ -0,0 +1,83 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Footer from '@components/dashboard/_footer.astro';
|
||||
import Topbar from '@components/dashboard/_topbar.astro';
|
||||
import Sidenav from '@components/dashboard/_sidenav.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
|
||||
const title = 'AdminLTE 4 | Fixed Sidebar'
|
||||
const mainPage = 'layout'
|
||||
const page = 'fixed-sidebar'
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} />
|
||||
</head>
|
||||
<body class="layout-fixed bg-body-tertiary">
|
||||
<div class="app-wrapper">
|
||||
<Topbar />
|
||||
<Sidenav mainPage={mainPage} page={page} />
|
||||
|
||||
<!-- Main content -->
|
||||
<main class="app-main">
|
||||
<div class="app-content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Fixed Layout</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Fixed Layout</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main content -->
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Default box -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Title</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Start creating your amazing application!
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">
|
||||
Footer
|
||||
</div>
|
||||
<!-- /.card-footer-->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
83
src/html/pages/layout/layout-rtl.astro
Normal file
83
src/html/pages/layout/layout-rtl.astro
Normal file
@@ -0,0 +1,83 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Footer from '@components/dashboard/_footer.astro';
|
||||
import Topbar from '@components/dashboard/_topbar.astro';
|
||||
import Sidenav from '@components/dashboard/_sidenav.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
|
||||
const title = 'AdminLTE 4 | Layout RTL'
|
||||
const mainPage = 'layout'
|
||||
const page = 'layout-rtl'
|
||||
const isRtl = true
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="rtl">
|
||||
<head>
|
||||
<Head title={title} isRtl={isRtl} />
|
||||
</head>
|
||||
<body class="layout-fixed bg-body-tertiary">
|
||||
<div class="app-wrapper">
|
||||
<Topbar />
|
||||
<Sidenav mainPage={mainPage} page={page} />
|
||||
<!-- Main content -->
|
||||
<main class="app-main">
|
||||
<div class="app-content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Layout RTL</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Layout RTL</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main content -->
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Default box -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Title</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Start creating your amazing application!
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">
|
||||
Footer
|
||||
</div>
|
||||
<!-- /.card-footer-->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
82
src/html/pages/layout/sidebar-mini.astro
Normal file
82
src/html/pages/layout/sidebar-mini.astro
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Footer from '@components/dashboard/_footer.astro';
|
||||
import Topbar from '@components/dashboard/_topbar.astro';
|
||||
import Sidenav from '@components/dashboard/_sidenav.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
|
||||
const title = 'AdminLTE 4 | Sidebar Mini'
|
||||
const mainPage = 'layout'
|
||||
const page = 'sidebar-mini'
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} />
|
||||
</head>
|
||||
<body class="layout-fixed bg-body-tertiary sidebar-mini sidebar-collapse">
|
||||
<div class="app-wrapper">
|
||||
<Topbar />
|
||||
<Sidenav mainPage={mainPage} page={page} />
|
||||
<!-- Main content -->
|
||||
<main class="app-main">
|
||||
<div class="app-content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Sidebar Mini</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Sidebar Mini</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main content -->
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Default box -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Title</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Start creating your amazing application!
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">
|
||||
Footer
|
||||
</div>
|
||||
<!-- /.card-footer-->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
82
src/html/pages/layout/unfixed-sidebar.astro
Normal file
82
src/html/pages/layout/unfixed-sidebar.astro
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Footer from '@components/dashboard/_footer.astro';
|
||||
import Topbar from '@components/dashboard/_topbar.astro';
|
||||
import Sidenav from '@components/dashboard/_sidenav.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
|
||||
const title = 'AdminLTE 4 | Unfixed Sidebar'
|
||||
const mainPage = 'layout'
|
||||
const page = 'unfixed-sidebar'
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} />
|
||||
</head>
|
||||
<body class="bg-body-tertiary">
|
||||
<div class="app-wrapper">
|
||||
<Topbar />
|
||||
<Sidenav mainPage={mainPage} page={page} />
|
||||
<!-- Main content -->
|
||||
<main class="app-main">
|
||||
<div class="app-content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Unfixed Layout</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Unfixed Layout</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main content -->
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Default box -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Title</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Start creating your amazing application!
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">
|
||||
Footer
|
||||
</div>
|
||||
<!-- /.card-footer-->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
331
src/html/pages/tables/simple.astro
Normal file
331
src/html/pages/tables/simple.astro
Normal file
@@ -0,0 +1,331 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Footer from '@components/dashboard/_footer.astro';
|
||||
import Topbar from '@components/dashboard/_topbar.astro';
|
||||
import Sidenav from '@components/dashboard/_sidenav.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
|
||||
const title = 'AdminLTE 4 | Simple Tables'
|
||||
const mainPage = 'tables'
|
||||
const page = 'simple'
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} />
|
||||
</head>
|
||||
<body class="layout-fixed bg-body-tertiary">
|
||||
<div class="app-wrapper">
|
||||
<Topbar />
|
||||
<Sidenav mainPage={mainPage} page={page} />
|
||||
<!-- Main content -->
|
||||
<main class="app-main">
|
||||
<div class="app-content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Simple Tables</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Simple Tables</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main content -->
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Bordered Table</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge text-bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar text-bg-warning" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge text-bg-warning">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar text-bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge text-bg-primary">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar text-bg-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge text-bg-success">90%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer clearfix">
|
||||
<ul class="pagination pagination-sm m-0 float-end">
|
||||
<li class="page-item"><a class="page-link" href="#">«</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Condensed Full Width Table</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge text-bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar text-bg-warning" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge text-bg-warning">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar text-bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge text-bg-primary">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar text-bg-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge text-bg-success">90%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Simple Full Width Table</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<ul class="pagination pagination-sm float-end">
|
||||
<li class="page-item"><a class="page-link" href="#">«</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge text-bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar text-bg-warning" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge text-bg-warning">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar text-bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge text-bg-primary">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar text-bg-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge text-bg-success">90%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Striped Full Width Table</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge text-bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar text-bg-warning" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge text-bg-warning">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar text-bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge text-bg-primary">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar text-bg-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge text-bg-success">90%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
307
src/html/pages/widgets/cards.astro
Normal file
307
src/html/pages/widgets/cards.astro
Normal file
@@ -0,0 +1,307 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Footer from '@components/dashboard/_footer.astro';
|
||||
import Topbar from '@components/dashboard/_topbar.astro';
|
||||
import Sidenav from '@components/dashboard/_sidenav.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
|
||||
const title = 'AdminLTE 4 | Widgets - Cards'
|
||||
const mainPage = 'widgets'
|
||||
const page = 'cards'
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} />
|
||||
</head>
|
||||
<body class="layout-fixed bg-body-tertiary">
|
||||
<div class="app-wrapper">
|
||||
<Topbar />
|
||||
<Sidenav mainPage={mainPage} page={page} />
|
||||
<!-- Main content -->
|
||||
<main class="app-main">
|
||||
<div class="app-content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Cards</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Cards</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main content -->
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<h4 class="mb-2">Cards</h4>
|
||||
|
||||
<h5 class="mb-2">Abilities</h5>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="card card-primary collapsed-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Expandable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-success">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Collapsable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-warning">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Removable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-danger">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Maximizable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fa-solid fa-expand"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
|
||||
<h5 class="mb-2">Card Outlined</h5>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="card card-outline card-primary collapsed-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Expandable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-outline card-success">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Collapsable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-outline card-warning">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Removable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-outline card-danger">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Maximizable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fa-solid fa-expand"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
|
||||
<h5 class="mb-2">Card with <code>.text-bg-*</code> </h5>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="card text-bg-primary collapsed-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Expandable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card text-bg-success">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Collapsable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card text-bg-warning">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Removable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card text-bg-danger">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Maximizable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fa-solid fa-expand"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
358
src/html/pages/widgets/info-box.astro
Normal file
358
src/html/pages/widgets/info-box.astro
Normal file
@@ -0,0 +1,358 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Footer from '@components/dashboard/_footer.astro';
|
||||
import Topbar from '@components/dashboard/_topbar.astro';
|
||||
import Sidenav from '@components/dashboard/_sidenav.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
|
||||
const title = 'AdminLTE 4 | Widgets - Info Box'
|
||||
const mainPage = 'widgets'
|
||||
const page = 'info-box'
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
|
||||
</head>
|
||||
<body class="layout-fixed bg-body-tertiary">
|
||||
<div class="app-wrapper">
|
||||
<Topbar />
|
||||
<Sidenav mainPage={mainPage} page={page} />
|
||||
<!-- Main content -->
|
||||
<main class="app-main">
|
||||
<div class="app-content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Info Box</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Info Box</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main content -->
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<h5 class="mb-2">Info Box</h5>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon text-bg-primary shadow-sm"><i class="fa-solid fa-cog"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">CPU Traffic</span>
|
||||
<span class="info-box-number">
|
||||
10
|
||||
<small>%</small>
|
||||
</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon text-bg-success shadow-sm"><i class="fa-solid fa-shopping-cart"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Sales</span>
|
||||
<span class="info-box-number">760</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<!-- fix for small devices only -->
|
||||
<!-- <div class="clearfix hidden-md-up"></div> -->
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon text-bg-warning shadow-sm"><i class="fa-solid fa-users"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">New Members</span>
|
||||
<span class="info-box-number">2,000</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon text-bg-danger shadow-sm"><i class="fa-solid fa-thumbs-up"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Likes</span>
|
||||
<span class="info-box-number">41,410</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- =========================================================== -->
|
||||
<h5 class="mb-2">Info Box With Custom Shadows <small><i>Using Bootstrap's Shadow Utility</i></small></h5>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box shadow-none">
|
||||
<span class="info-box-icon text-bg-primary shadow-sm"><i class="fa-solid fa-cog"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">CPU Traffic</span>
|
||||
<span class="info-box-number">
|
||||
10
|
||||
<small>%</small>
|
||||
</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box shadow-sm">
|
||||
<span class="info-box-icon text-bg-success shadow-sm"><i class="fa-solid fa-shopping-cart"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Sales</span>
|
||||
<span class="info-box-number">760</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<!-- fix for small devices only -->
|
||||
<!-- <div class="clearfix hidden-md-up"></div> -->
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box shadow">
|
||||
<span class="info-box-icon text-bg-warning shadow-sm"><i class="fa-solid fa-users"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">New Members</span>
|
||||
<span class="info-box-number">2,000</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box shadow-lg">
|
||||
<span class="info-box-icon text-bg-danger shadow-sm"><i class="fa-solid fa-thumbs-up"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Likes</span>
|
||||
<span class="info-box-number">41,410</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- =========================================================== -->
|
||||
<h5 class="mt-4 mb-2">Info Box With <code>bg-*</code></h5>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-6 col-12">
|
||||
<div class="info-box text-bg-primary">
|
||||
<span class="info-box-icon"><i class="fa-regular fa-bookmark"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Bookmarks</span>
|
||||
<span class="info-box-number">41,410</span>
|
||||
|
||||
<div class="progress">
|
||||
<div class="progress-bar" style="width: 70%"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
70% Increase in 30 Days
|
||||
</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-12">
|
||||
<div class="info-box text-bg-success">
|
||||
<span class="info-box-icon"><i class="fa-regular fa-thumbs-up"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Likes</span>
|
||||
<span class="info-box-number">41,410</span>
|
||||
|
||||
<div class="progress">
|
||||
<div class="progress-bar" style="width: 70%"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
70% Increase in 30 Days
|
||||
</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-12">
|
||||
<div class="info-box text-bg-warning">
|
||||
<span class="info-box-icon"><i class="fa-regular fa-calendar-alt"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Events</span>
|
||||
<span class="info-box-number">41,410</span>
|
||||
|
||||
<div class="progress">
|
||||
<div class="progress-bar" style="width: 70%"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
70% Increase in 30 Days
|
||||
</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-12">
|
||||
<div class="info-box text-bg-danger">
|
||||
<span class="info-box-icon"><i class="fa-solid fa-comments"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Comments</span>
|
||||
<span class="info-box-number">41,410</span>
|
||||
|
||||
<div class="progress">
|
||||
<div class="progress-bar" style="width: 70%"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
70% Increase in 30 Days
|
||||
</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- =========================================================== -->
|
||||
<h5 class="mt-4 mb-2">Info Box With <code>bg-gradient</code></h5>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-6 col-12">
|
||||
<div class="info-box text-bg-primary bg-gradient">
|
||||
<span class="info-box-icon"><i class="fa-regular fa-bookmark"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Bookmarks</span>
|
||||
<span class="info-box-number">41,410</span>
|
||||
|
||||
<div class="progress">
|
||||
<div class="progress-bar" style="width: 70%"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
70% Increase in 30 Days
|
||||
</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-12">
|
||||
<div class="info-box text-bg-success bg-gradient">
|
||||
<span class="info-box-icon"><i class="fa-regular fa-thumbs-up"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Likes</span>
|
||||
<span class="info-box-number">41,410</span>
|
||||
|
||||
<div class="progress">
|
||||
<div class="progress-bar" style="width: 70%"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
70% Increase in 30 Days
|
||||
</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-12">
|
||||
<div class="info-box text-bg-warning bg-gradient">
|
||||
<span class="info-box-icon"><i class="fa-regular fa-calendar-alt"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Events</span>
|
||||
<span class="info-box-number">41,410</span>
|
||||
|
||||
<div class="progress">
|
||||
<div class="progress-bar" style="width: 70%"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
70% Increase in 30 Days
|
||||
</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-12">
|
||||
<div class="info-box text-bg-danger bg-gradient">
|
||||
<span class="info-box-icon"><i class="fa-solid fa-comments"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Comments</span>
|
||||
<span class="info-box-number">41,410</span>
|
||||
|
||||
<div class="progress">
|
||||
<div class="progress-bar" style="width: 70%"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
70% Increase in 30 Days
|
||||
</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
119
src/html/pages/widgets/small-box.astro
Normal file
119
src/html/pages/widgets/small-box.astro
Normal file
@@ -0,0 +1,119 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Footer from '@components/dashboard/_footer.astro';
|
||||
import Topbar from '@components/dashboard/_topbar.astro';
|
||||
import Sidenav from '@components/dashboard/_sidenav.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
|
||||
const title = 'AdminLTE 4 | Widgets - Small Box'
|
||||
const mainPage = 'widgets'
|
||||
const page = 'small-box'
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
|
||||
</head>
|
||||
<body class="layout-fixed bg-body-tertiary">
|
||||
<div class="app-wrapper">
|
||||
<Topbar />
|
||||
<Sidenav mainPage={mainPage} page={page} />
|
||||
<!-- Main content -->
|
||||
<main class="app-main">
|
||||
<div class="app-content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Small Box</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Small Box</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main content -->
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<!-- Small Box (Stat card) -->
|
||||
<h5 class="mb-2">Small Box</h5>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-6">
|
||||
<!-- small box -->
|
||||
<div class="small-box text-bg-primary">
|
||||
<div class="inner">
|
||||
<h3>150</h3>
|
||||
|
||||
<p>New Orders</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="inner-icon ion ion-bag"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./col -->
|
||||
<div class="col-lg-3 col-6">
|
||||
<!-- small box -->
|
||||
<div class="small-box text-bg-success">
|
||||
<div class="inner">
|
||||
<h3>53<sup class="fs-5">%</sup></h3>
|
||||
|
||||
<p>Bounce Rate</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="inner-icon ion ion-stats-bars"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./col -->
|
||||
<div class="col-lg-3 col-6">
|
||||
<!-- small box -->
|
||||
<div class="small-box text-bg-warning">
|
||||
<div class="inner">
|
||||
<h3>44</h3>
|
||||
|
||||
<p>User Registrations</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="inner-icon ion ion-person-add"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./col -->
|
||||
<div class="col-lg-3 col-6">
|
||||
<!-- small box -->
|
||||
<div class="small-box text-bg-danger">
|
||||
<div class="inner">
|
||||
<h3>65</h3>
|
||||
|
||||
<p>Unique Visitors</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="inner-icon ion ion-pie-graph"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user