github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

format with prettier-plugin-astro

pull/5142/head
Daniel 2023-05-25 13:37:08 +05:30
parent 9929ea8738
commit 8fdb94c68a
32 changed files with 2527 additions and 1079 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/html/components/_head.astro
View File

@ -1,28 +1,47 @@
---
const { title, path, isRtl } = Astro.props;
const cssPath = isRtl ? '.rtl' : '';
const cssPath = isRtl ? ".rtl" : "";
---
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{title}</title>
<!--begin::Primary Meta Tags-->
<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" />
<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"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/styles/overlayscrollbars.min.css" integrity="sha256-LWLZPJ7X1jJLI5OG5695qDemW1qQ7lNdbTfQ64ylbUY=" crossorigin="anonymous">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/styles/overlayscrollbars.min.css"
integrity="sha256-LWLZPJ7X1jJLI5OG5695qDemW1qQ7lNdbTfQ64ylbUY="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Font Awesome)-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3.0/css/all.min.css" integrity="sha256-/4UQcSmErDzPCMAiuOiWPVVsNN2s3ZY/NsmXNcj0IFc=" crossorigin="anonymous">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3.0/css/all.min.css"
integrity="sha256-/4UQcSmErDzPCMAiuOiWPVVsNN2s3ZY/NsmXNcj0IFc="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Font Awesome)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href={path + '/css/adminlte' + cssPath + '.css'} >
<link rel="stylesheet" href={path + "/css/adminlte" + cssPath + ".css"} />
<!--end::Required Plugin(AdminLTE)-->

60
src/html/components/_scripts.astro
View File

@ -1,41 +1,51 @@
---
const { path } = Astro.props;
const adminlteJsUrl = path + '/js/adminlte.js';
const adminlteJsUrl = path + "/js/adminlte.js";
---
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU=" crossorigin="anonymous"></script>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)-->
<!--begin::Required Plugin(Bootstrap 5)-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
<!--end::Required Plugin(Bootstrap 5)-->
<!--begin::Required Plugin(AdminLTE)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src={adminlteJsUrl} is:inline></script>
<!--end::Required Plugin(AdminLTE)-->
<!--begin::OverlayScrollbars Configure-->
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script is:inline>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
const SELECTOR_SIDEBAR_WRAPPER = ".sidebar-wrapper";
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true
}
scrollbarTheme: "os-theme-light",
scrollbarAutoHide: "leave",
scrollbarClickScroll: true,
};
document.addEventListener("DOMContentLoaded", function() {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
document.addEventListener("DOMContentLoaded", function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (
sidebarWrapper &&
typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== "undefined"
) {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll
}
})
clickScroll: Default.scrollbarClickScroll,
},
});
}
})
});
</script>
<!--end::OverlayScrollbars Configure-->

10
src/html/components/dashboard/_footer.astro
View File

@ -5,12 +5,14 @@ const year = new Date().getFullYear();
<!--begin::Footer-->
<footer class="app-footer">
<!--begin::To the end-->
<div class="float-end d-none d-sm-inline">
Anything you want
</div>
<div class="float-end d-none d-sm-inline">Anything you want</div>
<!--end::To the end-->
<!--begin::Copyright-->
<strong>Copyright &copy; 2014-{year} <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
<strong>
Copyright &copy; 2014-{year}
<a href="https://adminlte.io">AdminLTE.io</a>.
</strong>
All rights reserved.
<!--end::Copyright-->
</footer>
<!--end::Footer-->

187
src/html/components/dashboard/_sidenav.astro
View File

@ -1,5 +1,5 @@
---
import { convertPathToHtml } from '../../../utils/index.js';
import { convertPathToHtml } from "../../../utils/index.js";
const { path, mainPage, page } = Astro.props;
const htmlPath = convertPathToHtml(path);
---
@ -9,9 +9,13 @@ const htmlPath = convertPathToHtml(path);
<!--begin::Sidebar Brand-->
<div class="sidebar-brand">
<!--begin::Brand Link-->
<a href={htmlPath + '/index.html'} class="brand-link">
<a href={htmlPath + "/index.html"} class="brand-link">
<!--begin::Brand Image-->
<img src={path + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
<img
src={path + "/assets/img/AdminLTELogo.png"}
alt="AdminLTE Logo"
class="brand-image opacity-75 shadow"
/>
<!--end::Brand Image-->
<!--begin::Brand Text-->
<span class="brand-text fw-light">AdminLTE 4</span>
@ -24,9 +28,17 @@ const htmlPath = convertPathToHtml(path);
<div class="sidebar-wrapper">
<nav class="mt-2">
<!--begin::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']}>
<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
@ -35,27 +47,39 @@ const htmlPath = convertPathToHtml(path);
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href={htmlPath + '/index.html'} class:list={['nav-link', page === 'index' && 'active']}>
<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']}>
<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']}>
<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']}>
<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
@ -64,75 +88,118 @@ const htmlPath = convertPathToHtml(path);
</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']}>
<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']}>
<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']}>
<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']}>
<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="nav-badge badge text-bg-secondary opacity-75 me-3">6</span>
<span class="nav-badge badge text-bg-secondary opacity-75 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']}>
<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']}>
<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']}>
<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/collapsed-sidebar.html'} class:list={['nav-link', page === 'collapsed-sidebar' && 'active']}>
<a
href={htmlPath + "/layout/collapsed-sidebar.html"}
class:list={[
"nav-link",
page === "collapsed-sidebar" && "active",
]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<p>Sidebar Mini <small>+ Collapsed</small></p>
</a>
</li>
<li class="nav-item">
<a href={htmlPath + '/layout/logo-switch.html'} class:list={['nav-link', page === 'logo-switch' && 'active']}>
<a
href={htmlPath + "/layout/logo-switch.html"}
class:list={["nav-link", page === "logo-switch" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<p>Sidebar Mini <small>+ Logo Switch</small></p>
</a>
</li>
<li class="nav-item">
<a href={htmlPath + '/layout/layout-rtl.html'} class:list={['nav-link', page === 'layout-rtl' && 'active']}>
<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']}>
<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
@ -141,15 +208,21 @@ const htmlPath = convertPathToHtml(path);
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href={htmlPath + '/UI/timeline.html'} class:list={['nav-link', page === 'timeline' && 'active']}>
<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']}>
<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
@ -158,15 +231,21 @@ const htmlPath = convertPathToHtml(path);
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href={htmlPath + '/forms/general.html'} class:list={['nav-link', page === 'general' && 'active']}>
<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']}>
<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
@ -175,7 +254,10 @@ const htmlPath = convertPathToHtml(path);
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href={htmlPath + '/tables/simple.html'} class:list={['nav-link', page === 'simple' && 'active']}>
<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>
@ -194,13 +276,13 @@ const htmlPath = convertPathToHtml(path);
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href={htmlPath + '/examples/login.html'} class="nav-link ">
<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 ">
<a href={htmlPath + "/examples/register.html"} class="nav-link">
<i class="nav-icon fa-regular fa-circle"></i>
<p>Register v1</p>
</a>
@ -210,25 +292,37 @@ const htmlPath = convertPathToHtml(path);
<li class="nav-header">DOCUMENTATIONS</li>
<li class="nav-item">
<a href={htmlPath + '/docs/introduction.html'} class:list={['nav-link', page === 'introduction' && 'active']}>
<a
href={htmlPath + "/docs/introduction.html"}
class:list={["nav-link", page === "introduction" && "active"]}
>
<i class="nav-icon fa-solid fa-download"></i>
<p>Installation</p>
</a>
</li>
<li class="nav-item">
<a href={htmlPath + '/docs/layout.html'} class:list={['nav-link', page === 'layout' && 'active']}>
<a
href={htmlPath + "/docs/layout.html"}
class:list={["nav-link", page === "layout" && "active"]}
>
<i class="nav-icon fa-solid fa-grip"></i>
<p>Layout</p>
</a>
</li>
<li class="nav-item">
<a href={htmlPath + '/docs/color-mode.html'} class:list={['nav-link', page === 'color-mode' && 'active']}>
<a
href={htmlPath + "/docs/color-mode.html"}
class:list={["nav-link", page === "color-mode" && "active"]}
>
<i class="nav-icon fa-solid fa-star-half-stroke"></i>
<p>Color Mode</p>
</a>
</li>
<li class:list={['nav-item', mainPage === 'components' && 'menu-open']}>
<a href="javascript:;" class:list={['nav-link', mainPage === 'components' && 'active']}>
<li class:list={["nav-item", mainPage === "components" && "menu-open"]}>
<a
href="javascript:;"
class:list={["nav-link", mainPage === "components" && "active"]}
>
<i class="nav-icon fa-solid fa-swatchbook"></i>
<p>
Components
@ -237,13 +331,19 @@ const htmlPath = convertPathToHtml(path);
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href={htmlPath + '/docs/components/main-header.html'} class:list={['nav-link', page === 'main-header' && 'active']}>
<a
href={htmlPath + "/docs/components/main-header.html"}
class:list={["nav-link", page === "main-header" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<p>Main Header</p>
</a>
</li>
<li class="nav-item">
<a href={htmlPath + '/docs/components/main-sidebar.html'} class:list={['nav-link', page === 'main-sidebar' && 'active']}>
<a
href={htmlPath + "/docs/components/main-sidebar.html"}
class:list={["nav-link", page === "main-sidebar" && "active"]}
>
<i class="nav-icon fa-regular fa-circle"></i>
<p>Main Sidebar</p>
</a>
@ -251,7 +351,10 @@ const htmlPath = convertPathToHtml(path);
</ul>
</li>
<li class="nav-item">
<a href={htmlPath + '/docs/browser-support.html'} class:list={['nav-link', page === 'browser-support' && 'active']}>
<a
href={htmlPath + "/docs/browser-support.html"}
class:list={["nav-link", page === "browser-support" && "active"]}
>
<i class="nav-icon fa-solid fa-edge"></i>
<p>Browser Support</p>
</a>

63
src/html/components/dashboard/_topbar.astro
View File

@ -2,6 +2,7 @@
const { path } = Astro.props;
const distPath = path;
---
<!--begin::Header-->
<nav class="app-header navbar navbar-expand bg-body">
<!--begin::Container-->
@ -9,7 +10,9 @@ const distPath = path;
<!--begin::Start Navbar Links-->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
<a class="nav-link" data-lte-toggle="sidebar" 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>
@ -41,15 +44,23 @@ const distPath = path;
<!--begin::Message-->
<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">
<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>
<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>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
@ -59,15 +70,23 @@ const distPath = path;
<!--begin::Message-->
<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">
<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>
<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>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
@ -77,15 +96,23 @@ const distPath = path;
<!--begin::Message-->
<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">
<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>
<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>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
@ -120,7 +147,9 @@ const distPath = path;
<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>
<a href="#" class="dropdown-item dropdown-footer">
See All Notifications
</a>
</div>
</li>
<!--end::Notifications Dropdown Menu-->
@ -128,13 +157,21 @@ const distPath = path;
<!--begin::User Menu Dropdown-->
<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">
<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">
<!--begin::User Image-->
<li class="user-header text-bg-primary">
<img src={distPath + '/assets/img/user2-160x160.jpg'} class="rounded-circle shadow" alt="User Image">
<img
src={distPath + "/assets/img/user2-160x160.jpg"}
class="rounded-circle shadow"
alt="User Image"
/>
<p>
Alexander Pierce - Web Developer

3
src/html/components/docs/browser-support.mdx
View File

@ -1,7 +1,8 @@
AdminLTE comes with the same browser support as Bootstrap 5.
> ##### Excerpt from Bootstrap's official Documentation!
> Bootstrap supports the __latest, stable releases__ of all major browsers and platforms.
>
> Bootstrap supports the **latest, stable releases** of all major browsers and platforms.
>
> For more details [look here](https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#supported-browsers).

96
src/html/components/docs/color-mode.mdx
View File

@ -6,12 +6,9 @@
<!-- Start navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a
class="nav-link"
data-lte-toggle="sidebar"
href="#"
role="button"><i class="fa-solid fa-bars"></i></a
>
<a class="nav-link" data-lte-toggle="sidebar" 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>
@ -67,8 +64,7 @@
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="auto"
>
<i class="fa-solid fa-circle-half-stroke me-2"
></i>
<i class="fa-solid fa-circle-half-stroke me-2"></i>
Auto
<i class="fa-solid fa-check ms-auto d-none"></i>
</button>
@ -84,48 +80,56 @@
```js
// Color Mode Toggler
(() => {
'use strict'
const storedTheme = localStorage.getItem('theme')
"use strict";
const storedTheme = localStorage.getItem("theme");
const getPreferredTheme = () => {
if (storedTheme) {
return storedTheme
return storedTheme;
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
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')
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)
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)
})
})
})
})()
};
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);
});
});
});
})();
```

64
src/html/components/docs/components/main-header.mdx
View File

@ -6,7 +6,9 @@
<!-- Start navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
<a class="nav-link" data-lte-toggle="sidebar" 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>
@ -36,15 +38,23 @@
<!-- Message Start -->
<div class="d-flex">
<div class="flex-shrink-0">
<img src="../../../dist/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
<img
src="../../../dist/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>
<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>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!-- Message End -->
@ -54,15 +64,23 @@
<!-- Message Start -->
<div class="d-flex">
<div class="flex-shrink-0">
<img src="../../../dist/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
<img
src="../../../dist/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>
<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>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!-- Message End -->
@ -72,15 +90,23 @@
<!-- Message Start -->
<div class="d-flex">
<div class="flex-shrink-0">
<img src="../../../dist/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
<img
src="../../../dist/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>
<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>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!-- Message End -->
@ -113,18 +139,28 @@
<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>
<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="../../../dist/assets/img/user2-160x160.jpg" class="user-image rounded-circle shadow" alt="User Image">
<img
src="../../../dist/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="../../../dist/assets/img/user2-160x160.jpg" class="rounded-circle shadow" alt="User Image">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="rounded-circle shadow"
alt="User Image"
/>
<p>
Alexander Pierce - Web Developer
@ -159,4 +195,4 @@
<!--end::Container-->
</nav>
<!-- /.navbar -->
```
```

34
src/html/components/docs/components/main-sidebar.mdx
View File

@ -8,7 +8,11 @@ The sidebar used in this page to the left provides an example of what your sideb
<!--begin::Brand Link-->
<a href="./index.html" class="brand-link">
<!--begin::Brand Image-->
<img src="./assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
<img
src="./assets/img/AdminLTELogo.png"
alt="AdminLTE Logo"
class="brand-image opacity-75 shadow"
/>
<!--end::Brand Image-->
<!--begin::Brand Text-->
<span class="brand-text fw-light">AdminLTE 4</span>
@ -21,7 +25,12 @@ The sidebar used in this page to the left provides an example of what your sideb
<div class="sidebar-wrapper">
<nav class="mt-2">
<!--begin::Sidebar Menu-->
<ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
<ul
class="nav sidebar-menu flex-column"
data-lte-toggle="treeview"
role="menu"
data-accordion="false"
>
<li class="nav-header">Nav Header</li>
<li class="nav-item">
<a href="./index.html" class="nav-link">
@ -41,7 +50,14 @@ The sidebar used in this page to the left provides an example of what your sideb
<li class="nav-item">
<a href="./index.html" class="nav-link">
<i class="nav-icon fa-regular fa-circle"></i>
<p>Level 2 (Badge) <span class="nav-badge badge text-bg-secondary opacity-75 me-3">6</span></p>
<p>
Level 2 (Badge)
<span
class="nav-badge badge text-bg-secondary opacity-75 me-3"
>
6
</span>
</p>
</a>
</li>
<li class="nav-item">
@ -98,8 +114,16 @@ You can use two logo images instead of logo with text, you only need to change t
```html
<div class="sidebar-brand">
<a href="./index.html" class="brand-link logo-switch">
<img src="./assets/img/AdminLTELogo.png" alt="AdminLTE Logo Small" class="brand-image-xl logo-xs opacity-75 shadow">
<img src="./assets/img/AdminLTEFullLogo.png" alt="AdminLTE Logo Large" class="brand-image-xs logo-xl opacity-75">
<img
src="./assets/img/AdminLTELogo.png"
alt="AdminLTE Logo Small"
class="brand-image-xl logo-xs opacity-75 shadow"
/>
<img
src="./assets/img/AdminLTEFullLogo.png"
alt="AdminLTE Logo Large"
class="brand-image-xs logo-xl opacity-75"
/>
</a>
</div>
```

29
src/html/components/docs/introduction.mdx
View File

@ -1,35 +1,60 @@
## Quick start
There are multiple ways to install AdminLTE.
### Download & Changelog:
Always Recommended to download from GitHub latest release [AdminLTE 4](https://github.com/ColorlibHQ/AdminLTE/releases/latest) for bug free and latest features.\
Visit the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) page to view the changelog.\
Legacy Releases are [AdminLTE 3](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0) / [AdminLTE 2](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18) / [AdminLTE 1](https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1).
## Stable release
### Grab from [jsdelivr](https://www.jsdelivr.com/package/npm/admin-lte) CDN:
_**Important Note**: You needed to add separately cdn links for plugins in your project._
```html
<script src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha2/dist/js/adminlte.min.js" integrity="sha256-5SPy1/00NR75iVOk7p0Ci0nwAAM8Ab7j31wyie+DKYw=" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha2/dist/js/adminlte.min.js"
integrity="sha256-5SPy1/00NR75iVOk7p0Ci0nwAAM8Ab7j31wyie+DKYw="
crossorigin="anonymous"
></script>
```
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha2/dist/css/adminlte.min.css" integrity="sha256-c66Dhf3TzKZoXxk8aNaf2lu580xGnKke4mjUtbpMqYg=" crossorigin="anonymous">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha2/dist/css/adminlte.min.css"
integrity="sha256-c66Dhf3TzKZoXxk8aNaf2lu580xGnKke4mjUtbpMqYg="
crossorigin="anonymous"
/>
```
### Using The Command Line:
_**Important Note**: To install it via npm/Yarn, you need at least Node.js 14 or higher._
#### Via npm
```bash
npm install admin-lte@4.0.0-alpha2 --save
```
#### Via Yarn
```bash
yarn add admin-lte@4.0.0-alpha2
```
#### Via Composer
```bash
composer require "almasaeed2010/adminlte=4.0.0-alpha2"
```
#### Via Git
```bash
git clone https://github.com/ColorlibHQ/AdminLTE.git
```

129
src/html/pages/UI/timeline.astro
View File

@ -1,14 +1,14 @@
---
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';
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 path = '../../../dist';
const mainPage = 'ui-elements';
const page = 'timeline';
const title = "AdminLTE 4 | Timeline Elements";
const path = "../../../dist";
const mainPage = "ui-elements";
const page = "timeline";
---
<!DOCTYPE html>
@ -38,7 +38,9 @@ const page = 'timeline';
<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>
<li class="breadcrumb-item active" aria-current="page">
Timeline
</li>
</ol>
</div>
</div>
@ -63,16 +65,24 @@ const page = 'timeline';
<!-- /.timeline-label -->
<!-- timeline item -->
<div>
<i class="timeline-icon fa-solid fa-envelope text-bg-primary"></i>
<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>
<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...
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>
@ -83,23 +93,35 @@ const page = 'timeline';
<!-- END timeline item -->
<!-- timeline item -->
<div>
<i class="timeline-icon fa-solid fa-user text-bg-success"></i>
<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>
<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>
<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>
<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!
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>
@ -114,15 +136,32 @@ const page = 'timeline';
<!-- /.timeline-label -->
<!-- timeline item -->
<div>
<i class="timeline-icon fa-solid fa-camera text-bg-primary"></i>
<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>
<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={path + '/assets/img/user1-128x128.jpg'} alt="...">
<img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
<img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
<img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
<img
src={path + "/assets/img/user1-128x128.jpg"}
alt="..."
/>
<img
src={path + "/assets/img/user1-128x128.jpg"}
alt="..."
/>
<img
src={path + "/assets/img/user1-128x128.jpg"}
alt="..."
/>
<img
src={path + "/assets/img/user1-128x128.jpg"}
alt="..."
/>
</div>
</div>
</div>
@ -132,23 +171,34 @@ const page = 'timeline';
<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>
<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>
<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>
<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>
<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>
<i
class="timeline-icon fa-solid fa-clock text-bg-secondary"
>
</i>
</div>
</div>
</div>
@ -167,6 +217,5 @@ const page = 'timeline';
<!--begin::Script-->
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

5
src/html/pages/docs/browser-support.astro
View File

@ -7,7 +7,7 @@ import Sidenav from "@components/dashboard/_sidenav.astro";
import Scripts from "@components/_scripts.astro";
const title = "Browser Support | AdminLTE 4";
const path = '../../../dist';
const path = "../../../dist";
const mainPage = "docs";
const page = "browser-support";
---
@ -67,6 +67,5 @@ const page = "browser-support";
<!--begin::Script-->
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

6
src/html/pages/docs/color-mode.astro
View File

@ -7,7 +7,7 @@ import Scripts from "@components/_scripts.astro";
import ColorMode from "@components/docs/color-mode.mdx";
const title = "Color Mode | AdminLTE 4";
const path = '../../../dist';
const path = "../../../dist";
const mainPage = "docs";
const page = "color-mode";
---
@ -142,7 +142,6 @@ const page = "color-mode";
<!-- Start column -->
<div class="col-12">
<ColorMode />
</div>
</div>
<!--end::Row-->
@ -234,6 +233,5 @@ const page = "color-mode";
})();
</script>
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

129
src/html/pages/docs/components/main-header.astro
View File

@ -7,7 +7,7 @@ import Sidenav from "@components/dashboard/_sidenav.astro";
import Scripts from "@components/_scripts.astro";
const title = "Main Header Component | AdminLTE 4";
const path = '../../../../dist';
const path = "../../../../dist";
const mainPage = "components";
const page = "main-header";
const distPath = path;
@ -58,14 +58,19 @@ const distPath = path;
<div class="callout callout-warning mb-4">
<h5 class="fw-bold">Reminder!</h5>
<p>
AdminLTE uses all of Bootstrap 5 components. It's a good start to review the [Bootstrap documentation](https://getbootstrap.com/) to get an idea of the various components that this documentation <b>does not</b> cover.
AdminLTE uses all of Bootstrap 5 components. It's a good start
to review the [Bootstrap
documentation](https://getbootstrap.com/) to get an idea of the
various components that this documentation <b>does not</b> cover.
</p>
</div>
<div class="callout callout-info mb-4">
<h5 class="fw-bold">Tips!</h5>
<p>
If you go through the example pages and would like to copy a component, right-click on the component and choose “inspect element” to get to the HTML quicker than scanning the HTML page.
If you go through the example pages and would like to copy a
component, right-click on the component and choose “inspect
element” to get to the HTML quicker than scanning the HTML page.
</p>
</div>
@ -76,7 +81,14 @@ const distPath = path;
<!-- Start navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
<a
class="nav-link"
data-lte-toggle="sidebar"
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>
@ -90,7 +102,12 @@ const distPath = path;
<ul class="navbar-nav ms-auto">
<!-- Navbar Search -->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<a
class="nav-link"
data-widget="navbar-search"
href="#"
role="button"
>
<i class="fa-solid fa-search"></i>
</a>
</li>
@ -101,20 +118,30 @@ const distPath = path;
<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">
<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">
<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>
<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>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!-- Message End -->
@ -124,15 +151,23 @@ const distPath = path;
<!-- 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">
<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>
<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>
<p class="fs-7 text-secondary">
<i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!-- Message End -->
@ -142,21 +177,31 @@ const distPath = path;
<!-- 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">
<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>
<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>
<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>
<a href="#" class="dropdown-item dropdown-footer">
See All Messages
</a>
</div>
</li>
<!-- Notifications Dropdown Menu -->
@ -165,36 +210,61 @@ const distPath = path;
<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-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>
<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>
<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>
<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>
<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">
<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">
<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">
<img
src={distPath + "/assets/img/user2-160x160.jpg"}
class="rounded-circle shadow"
alt="User Image"
/>
<p>
Alexander Pierce - Web Developer
@ -220,7 +290,9 @@ const distPath = path;
<!-- 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>
<a href="#" class="btn btn-default btn-flat float-end">
Sign out
</a>
</li>
</ul>
</li>
@ -243,6 +315,5 @@ const distPath = path;
<!--begin::Script-->
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

5
src/html/pages/docs/components/main-sidebar.astro
View File

@ -7,7 +7,7 @@ import Sidenav from "@components/dashboard/_sidenav.astro";
import Scripts from "@components/_scripts.astro";
const title = "Main Sidebar Component | AdminLTE 4";
const path = '../../../../dist';
const path = "../../../../dist";
const mainPage = "components";
const page = "main-sidebar";
---
@ -67,6 +67,5 @@ const page = "main-sidebar";
<!--begin::Script-->
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

5
src/html/pages/docs/introduction.astro
View File

@ -7,7 +7,7 @@ import Scripts from "@components/_scripts.astro";
import Introduction from "@components/docs/introduction.mdx";
const title = "Introduction | AdminLTE 4";
const path = '../../../dist';
const path = "../../../dist";
const mainPage = "docs";
const page = "introduction";
---
@ -67,6 +67,5 @@ const page = "introduction";
<!--begin::Script-->
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

58
src/html/pages/docs/layout.astro
View File

@ -6,7 +6,7 @@ import Sidenav from "@components/dashboard/_sidenav.astro";
import Scripts from "@components/_scripts.astro";
const title = "Layout | AdminLTE 4";
const path = '../../../dist';
const path = "../../../dist";
const mainPage = "docs";
const page = "layout";
---
@ -54,25 +54,56 @@ const page = "layout";
<div class="container-fluid">
<div class="callout callout-info mb-4">
<h5 class="fw-bold">Tips</h5>
<p>The <a href="/starter.html" class="link-primary">starter page</a> is a good place to start building your app if you’d like to start from scratch.</p>
<p>
The <a href="/starter.html" class="link-primary">
starter page
</a> is a good place to start building your app if you’d like to
start from scratch.
</p>
</div>
<p>The layout consists of five major parts:</p>
<ul>
<li>Wrapper <code>.app-wrapper</code> . A div that wraps the whole site.</li>
<li>Main Header <code>.app-header</code> . Contains the logo and navbar.</li>
<li>Main Sidebar <code>.app-sidebar</code> . Contains the sidebar user panel and menu.</li>
<li>Content <code>.app-main</code> . Contains the page header and content.</li>
<li>Main Footer <code>.app-footer</code> . Contains the footer.</li>
<li>
Wrapper <code>.app-wrapper</code> . A div that wraps the whole site.
</li>
<li>
Main Header <code>.app-header</code> . Contains the logo and navbar.
</li>
<li>
Main Sidebar <code>.app-sidebar</code> . Contains the sidebar user
panel and menu.
</li>
<li>
Content <code>.app-main</code> . Contains the page header and content.
</li>
<li>
Main Footer <code>.app-footer</code> . Contains the footer.
</li>
</ul>
<h4>Layout Options</h4>
<p>AdminLTE v4 provides a set of options to apply to your main layout. Each one of these classes can be added to the <code>body</code> tag to get the desired goal.</p>
<p>
AdminLTE v4 provides a set of options to apply to your main
layout. Each one of these classes can be added to the
<code>body</code> tag to get the desired goal.
</p>
<ul>
<li>Fixed Sidebar: use the class <code>.layout-fixed</code> to get a fixed sidebar.</li>
<li>Mini Sidebar on Toggle: use the class <code>.sidebar-expand-* .sidebar-mini</code> to have a collapsed sidebar upon loading.</li>
<li>Collapsed Sidebar: use the class <code>.sidebar-expand-* .sidebar-mini .sidebar-collapse</code> to have a collapsed sidebar upon loading.</li>
</ul>
<li>
Fixed Sidebar: use the class <code>.layout-fixed</code> to get a
fixed sidebar.
</li>
<li>
Mini Sidebar on Toggle: use the class
<code>.sidebar-expand-* .sidebar-mini</code>
to have a collapsed sidebar upon loading.
</li>
<li>
Collapsed Sidebar: use the class
<code>.sidebar-expand-* .sidebar-mini .sidebar-collapse</code> to
have a collapsed sidebar upon loading.
</li>
</ul>
</div>
<!-- /.container-fluid -->
</div>
@ -85,6 +116,5 @@ const page = "layout";
<!--begin::Script-->
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

36
src/html/pages/examples/login.astro
View File

@ -1,10 +1,10 @@
---
import Head from '@components/_head.astro';
import Scripts from '@components/_scripts.astro';
import Head from "@components/_head.astro";
import Scripts from "@components/_scripts.astro";
const title = 'AdminLTE 4 | Login Page';
const path = '../../../dist';
const htmlPath = '..';
const title = "AdminLTE 4 | Login Page";
const path = "../../../dist";
const htmlPath = "..";
---
<!DOCTYPE html>
@ -18,22 +18,26 @@ const htmlPath = '..';
<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>
<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">
<form action={htmlPath + "/index3.html"} method="post">
<div class="input-group mb-3">
<input type="email" class="form-control" placeholder="Email">
<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">
<input
type="password"
class="form-control"
placeholder="Password"
/>
<div class="input-group-text">
<span class="fa-solid fa-lock"></span>
</div>
@ -42,7 +46,12 @@ const htmlPath = '..';
<div class="row">
<div class="col-8">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<input
class="form-check-input"
type="checkbox"
value=""
id="flexCheckDefault"
/>
<label class="form-check-label" for="flexCheckDefault">
Remember Me
</label>
@ -74,7 +83,9 @@ const htmlPath = '..';
<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>
<a href="register.html" class="text-center">
Register a new membership
</a>
</p>
</div>
<!-- /.login-card-body -->
@ -84,6 +95,5 @@ const htmlPath = '..';
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

38
src/html/pages/examples/register.astro
View File

@ -1,10 +1,10 @@
---
import Head from '@components/_head.astro';
import Scripts from '@components/_scripts.astro';
import Head from "@components/_head.astro";
import Scripts from "@components/_scripts.astro";
const title = 'AdminLTE 4 | Register Page';
const path = '../../../dist';
const htmlPath = '..';
const title = "AdminLTE 4 | Register Page";
const path = "../../../dist";
const htmlPath = "..";
---
<!DOCTYPE html>
@ -18,28 +18,32 @@ const htmlPath = '..';
<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>
<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">
<form action={htmlPath + "/index3.html"} method="post">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Full Name">
<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">
<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">
<input
type="password"
class="form-control"
placeholder="Password"
/>
<div class="input-group-text">
<span class="fa-solid fa-lock"></span>
</div>
@ -48,7 +52,12 @@ const htmlPath = '..';
<div class="row">
<div class="col-8">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<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>
@ -77,7 +86,9 @@ const htmlPath = '..';
<!-- /.social-auth-links -->
<p class="mb-0">
<a href="login.html" class="text-center">I already have a membership</a>
<a href="login.html" class="text-center">
I already have a membership
</a>
</p>
</div>
<!-- /.register-card-body -->
@ -87,6 +98,5 @@ const htmlPath = '..';
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

472
src/html/pages/index.astro
View File

@ -1,14 +1,14 @@
---
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';
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';
const title = "AdminLTE v4 | Dashboard";
const path = "../../dist";
const mainPage = "dashboard";
const page = "index";
---
<!DOCTYPE html>
@ -18,10 +18,20 @@ const page = 'index';
<Head title={title} path={path} />
<!-- apexcharts -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css" integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css"
integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0="
crossorigin="anonymous"
/>
<!-- jsvectormap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/css/jsvectormap.min.css" integrity="sha256-+uGLJmmTKOqBr+2E6KDYs/NRsHxSkONXFHUL0fy2O/4=" crossorigin="anonymous">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/css/jsvectormap.min.css"
integrity="sha256-+uGLJmmTKOqBr+2E6KDYs/NRsHxSkONXFHUL0fy2O/4="
crossorigin="anonymous"
/>
</head>
<!--end::Head-->
<!--begin::Body-->
@ -44,7 +54,9 @@ const page = 'index';
<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>
<li class="breadcrumb-item active" aria-current="page">
Dashboard
</li>
</ol>
</div>
</div>
@ -60,7 +72,7 @@ const page = 'index';
<!--begin::Row-->
<div class="row">
<!--begin::Col-->
<div class="col-lg-3 col-6" >
<div class="col-lg-3 col-6">
<!--begin::Small Box Widget 1-->
<div class="small-box text-bg-primary">
<div class="inner">
@ -68,10 +80,20 @@ const page = 'index';
<p>New Orders</p>
</div>
<svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"></path>
<svg
class="small-box-icon"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
></path>
</svg>
<a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
<a href="#" class="small-box-footer">
More info <i class="fa-solid fa-arrow-circle-right"></i>
</a>
</div>
<!--end::Small Box Widget 1-->
</div>
@ -84,10 +106,20 @@ const page = 'index';
<p>Bounce Rate</p>
</div>
<svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"></path>
<svg
class="small-box-icon"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
></path>
</svg>
<a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
<a href="#" class="small-box-footer">
More info <i class="fa-solid fa-arrow-circle-right"></i>
</a>
</div>
<!--end::Small Box Widget 2-->
</div>
@ -100,10 +132,20 @@ const page = 'index';
<p>User Registrations</p>
</div>
<svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"></path>
<svg
class="small-box-icon"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
></path>
</svg>
<a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
<a href="#" class="small-box-footer">
More info <i class="fa-solid fa-arrow-circle-right"></i>
</a>
</div>
<!--end::Small Box Widget 3-->
</div>
@ -116,11 +158,27 @@ const page = 'index';
<p>Unique Visitors</p>
</div>
<svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path clip-rule="evenodd" fill-rule="evenodd" d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"></path>
<path clip-rule="evenodd" fill-rule="evenodd" d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"></path>
<svg
class="small-box-icon"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
></path>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
></path>
</svg>
<a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
<a href="#" class="small-box-footer">
More info <i class="fa-solid fa-arrow-circle-right"></i>
</a>
</div>
<!--end::Small Box Widget 4-->
</div>
@ -148,14 +206,32 @@ const page = 'index';
<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">
<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">
<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">
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
>
<i class="fa-solid fa-times"></i>
</button>
</div>
@ -167,11 +243,19 @@ const page = 'index';
<!-- 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>
<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">
<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!
@ -183,11 +267,19 @@ const page = 'index';
<!-- 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>
<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">
<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!
@ -199,11 +291,19 @@ const page = 'index';
<!-- 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>
<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">
<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?
@ -215,19 +315,24 @@ const page = 'index';
<!-- 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>
<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">
<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>
<div class="direct-chat-text">I would love to.</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
</div>
<!-- /.direct-chat-messages-->
@ -236,14 +341,22 @@ const page = 'index';
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src={path + '/assets/img/user1-128x128.jpg'} alt="User Avatar">
<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>
<small class="contacts-list-date float-end">
2/28/2023
</small>
</span>
<span class="contacts-list-msg">
How have you been? I was...
</span>
<span class="contacts-list-msg">How have you been? I was...</span>
</div>
<!-- /.contacts-list-info -->
</a>
@ -251,14 +364,22 @@ const page = 'index';
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src={path + '/assets/img/user7-128x128.jpg'} alt="User Avatar">
<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>
<small class="contacts-list-date float-end">
2/23/2023
</small>
</span>
<span class="contacts-list-msg">
I will be waiting for...
</span>
<span class="contacts-list-msg">I will be waiting for...</span>
</div>
<!-- /.contacts-list-info -->
</a>
@ -266,14 +387,22 @@ const page = 'index';
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src={path + '/assets/img/user3-128x128.jpg'} alt="User Avatar">
<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>
<small class="contacts-list-date float-end">
2/20/2023
</small>
</span>
<span class="contacts-list-msg">
I'll call you back at...
</span>
<span class="contacts-list-msg">I'll call you back at...</span>
</div>
<!-- /.contacts-list-info -->
</a>
@ -281,14 +410,22 @@ const page = 'index';
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src={path + '/assets/img/user5-128x128.jpg'} alt="User Avatar">
<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>
<small class="contacts-list-date float-end">
2/10/2023
</small>
</span>
<span class="contacts-list-msg">
Where is your new...
</span>
<span class="contacts-list-msg">Where is your new...</span>
</div>
<!-- /.contacts-list-info -->
</a>
@ -296,14 +433,22 @@ const page = 'index';
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src={path + '/assets/img/user6-128x128.jpg'} alt="User Avatar">
<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>
<small class="contacts-list-date float-end">
1/27/2023
</small>
</span>
<span class="contacts-list-msg">
Can I take a look at...
</span>
<span class="contacts-list-msg">Can I take a look at...</span>
</div>
<!-- /.contacts-list-info -->
</a>
@ -311,14 +456,22 @@ const page = 'index';
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src={path + '/assets/img/user8-128x128.jpg'} alt="User Avatar">
<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>
<small class="contacts-list-date float-end">
1/4/2023
</small>
</span>
<span class="contacts-list-msg">
Never mind I found...
</span>
<span class="contacts-list-msg">Never mind I found...</span>
</div>
<!-- /.contacts-list-info -->
</a>
@ -333,9 +486,16 @@ const page = 'index';
<div class="card-footer">
<form action="#" method="post">
<div class="input-group">
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
<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>
<button type="button" class="btn btn-primary">
Send
</button>
</span>
</div>
</form>
@ -348,11 +508,18 @@ const page = 'index';
<!-- Start col -->
<div class="col-lg-5 connectedSortable">
<div class="card text-white bg-primary bg-gradient border-primary">
<div
class="card text-white bg-primary bg-gradient border-primary"
>
<div class="card-header border-0">
<h3 class="card-title">Sales Value</h3>
<div class="card-tools">
<button type="button" class="btn btn-primary btn-sm " data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
<button
type="button"
class="btn btn-primary btn-sm"
data-lte-toggle="card-collapse"
>
<i class="fa-solid fa-plus"></i>
</button>
</div>
</div>
@ -397,25 +564,36 @@ const page = 'index';
<!-- OPTIONAL SCRIPTS -->
<!-- sortablejs -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js" integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ=" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"
integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ="
crossorigin="anonymous"
></script>
<!-- sortablejs -->
<script is:inline>
const connectedSortables = document.querySelectorAll('.connectedSortable')
connectedSortables.forEach(connectedSortable => {
const connectedSortables =
document.querySelectorAll(".connectedSortable");
connectedSortables.forEach((connectedSortable) => {
let sortable = new Sortable(connectedSortable, {
group: 'shared',
})
})
group: "shared",
});
});
const cardHeaders = document.querySelectorAll('.connectedSortable .card-header');
cardHeaders.forEach(cardHeader => {
cardHeader.style.cursor = 'move';
const cardHeaders = document.querySelectorAll(
".connectedSortable .card-header"
);
cardHeaders.forEach((cardHeader) => {
cardHeader.style.cursor = "move";
});
</script>
<!-- apexcharts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
crossorigin="anonymous"
></script>
<!-- ChartJS -->
<script is:inline>
@ -424,48 +602,70 @@ const page = 'index';
// ++++++++++++++++++++++++++++++++++++++++++
const sales_chart_options = {
series: [{
name: 'Digital Goods',
data: [28, 48, 40, 19, 86, 27, 90]
},{
name: 'Electronics',
data: [65, 59, 80, 81, 56, 55, 40]
}],
series: [
{
name: "Digital Goods",
data: [28, 48, 40, 19, 86, 27, 90],
},
{
name: "Electronics",
data: [65, 59, 80, 81, 56, 55, 40],
},
],
chart: {
height: 300,
type: 'area',
type: "area",
toolbar: {
show: false,
},
},
legend: {
show: false
show: false,
},
colors:['#0d6efd', '#20c997'],
colors: ["#0d6efd", "#20c997"],
dataLabels: {
enabled: false,
},
stroke: {
curve: 'smooth'
curve: "smooth",
},
xaxis: {
type: 'datetime',
categories: ["2023-01-01", "2023-02-01", "2023-03-01", "2023-04-01", "2023-05-01", "2023-06-01", "2023-07-01"]
type: "datetime",
categories: [
"2023-01-01",
"2023-02-01",
"2023-03-01",
"2023-04-01",
"2023-05-01",
"2023-06-01",
"2023-07-01",
],
},
tooltip: {
x: {
format: 'MMMM yyyy'
format: "MMMM yyyy",
},
},
};
const sales_chart = new ApexCharts(document.querySelector("#revenue-chart"), sales_chart_options);
const sales_chart = new ApexCharts(
document.querySelector("#revenue-chart"),
sales_chart_options
);
sales_chart.render();
</script>
<!-- jsvectormap -->
<script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js" integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js" integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY=" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js"
integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y="
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js"
integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY="
crossorigin="anonymous"
></script>
<!-- jsvectormap -->
<script is:inline>
@ -480,8 +680,8 @@ const page = 'index';
BR: 600, // Brazil
IN: 800, // India
GB: 320, // Great Britain
RU: 3000 // Russia
}
RU: 3000, // Russia
};
// World map by jsVectorMap
const map = new jsVectorMap({
@ -491,84 +691,98 @@ const page = 'index';
// Sparkline charts
const option_sparkline1 = {
series: [{
data: [1000, 1200, 920, 927, 931, 1027, 819, 930, 1021],
}],
chart: {
type: 'area',
series: [
{
data: [1000, 1200, 920, 927, 931, 1027, 819, 930, 1021],
},
],
chart: {
type: "area",
height: 50,
sparkline: {
enabled: true
enabled: true,
},
},
stroke: {
curve: 'straight'
curve: "straight",
},
fill: {
opacity: 0.3,
},
yaxis: {
min: 0
min: 0,
},
colors: ['#DCE6EC'],
colors: ["#DCE6EC"],
};
const sparkline1 = new ApexCharts(document.querySelector("#sparkline-1"), option_sparkline1);
const sparkline1 = new ApexCharts(
document.querySelector("#sparkline-1"),
option_sparkline1
);
sparkline1.render();
const option_sparkline2 = {
series: [{
data: [515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921],
}],
chart: {
type: 'area',
series: [
{
data: [515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921],
},
],
chart: {
type: "area",
height: 50,
sparkline: {
enabled: true
enabled: true,
},
},
stroke: {
curve: 'straight'
curve: "straight",
},
fill: {
opacity: 0.3,
},
yaxis: {
min: 0
min: 0,
},
colors: ['#DCE6EC'],
colors: ["#DCE6EC"],
};
const sparkline2 = new ApexCharts(document.querySelector("#sparkline-2"), option_sparkline2);
const sparkline2 = new ApexCharts(
document.querySelector("#sparkline-2"),
option_sparkline2
);
sparkline2.render();
const option_sparkline3 = {
series: [{
data: [15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21],
}],
chart: {
type: 'area',
series: [
{
data: [15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21],
},
],
chart: {
type: "area",
height: 50,
sparkline: {
enabled: true
enabled: true,
},
},
stroke: {
curve: 'straight'
curve: "straight",
},
fill: {
opacity: 0.3,
},
yaxis: {
min: 0
min: 0,
},
colors: ['#DCE6EC'],
colors: ["#DCE6EC"],
};
const sparkline3 = new ApexCharts(document.querySelector("#sparkline-3"), option_sparkline3);
const sparkline3 = new ApexCharts(
document.querySelector("#sparkline-3"),
option_sparkline3
);
sparkline3.render();
</script>
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

841
src/html/pages/index2.astro
View File

File diff suppressed because it is too large Load Diff

428
src/html/pages/index3.astro
View File

@ -1,14 +1,14 @@
---
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';
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';
const title = "AdminLTE | Dashboard v3";
const path = "../../dist";
const mainPage = "dashboard";
const page = "index3";
---
<!DOCTYPE html>
@ -18,7 +18,12 @@ const page = 'index3';
<Head title={title} path={path} />
<!-- apexcharts -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css" integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css"
integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0="
crossorigin="anonymous"
/>
</head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
@ -40,7 +45,9 @@ const page = 'index3';
<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>
<li class="breadcrumb-item active" aria-current="page">
Dashboard v3
</li>
</ol>
</div>
</div>
@ -108,91 +115,107 @@ const page = 'index3';
<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>
<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>
<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>
@ -253,10 +276,24 @@ const page = 'index3';
</div>
</div>
<div class="card-body">
<div class="d-flex justify-content-between align-items-center border-bottom mb-3">
<div
class="d-flex justify-content-between align-items-center border-bottom mb-3"
>
<p class="text-success fs-2">
<svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3"></path>
<svg
height="32"
fill="none"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3"
></path>
</svg>
</p>
<p class="d-flex flex-column text-end">
@ -267,10 +304,24 @@ const page = 'index3';
</p>
</div>
<!-- /.d-flex -->
<div class="d-flex justify-content-between align-items-center border-bottom mb-3">
<div
class="d-flex justify-content-between align-items-center border-bottom mb-3"
>
<p class="text-warning fs-2">
<svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"></path>
<svg
height="32"
fill="none"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
></path>
</svg>
</p>
<p class="d-flex flex-column text-end">
@ -281,15 +332,30 @@ const page = 'index3';
</p>
</div>
<!-- /.d-flex -->
<div class="d-flex justify-content-between align-items-center mb-0">
<div
class="d-flex justify-content-between align-items-center mb-0"
>
<p class="text-danger fs-2">
<svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"></path>
<svg
height="32"
fill="none"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
></path>
</svg>
</p>
<p class="d-flex flex-column text-end">
<span class="fw-bold">
<i class="ion ion-android-arrow-down text-danger"></i> 1%
<i class="ion ion-android-arrow-down text-danger"></i>
1%
</span>
<span class="text-secondary">REGISTRATION RATE</span>
</p>
@ -316,7 +382,11 @@ const page = 'index3';
<!-- OPTIONAL SCRIPTS -->
<!-- apexcharts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
crossorigin="anonymous"
></script>
<script is:inline>
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
@ -324,102 +394,120 @@ const page = 'index3';
// ++++++++++++++++++++++++++++++++++++++++++
var visitors_chart_options = {
series: [
series: [
{
name: "High - 2023",
data: [100, 120, 170, 167, 180, 177, 160]
data: [100, 120, 170, 167, 180, 177, 160],
},
{
name: "Low - 2023",
data: [60, 80, 70, 67, 80, 77, 100]
}
data: [60, 80, 70, 67, 80, 77, 100],
},
],
chart: {
chart: {
height: 200,
type: 'line',
type: "line",
toolbar: {
show: false
}
show: false,
},
},
colors: ['#0d6efd', '#adb5bd'],
colors: ["#0d6efd", "#adb5bd"],
stroke: {
curve: 'smooth'
curve: "smooth",
},
grid: {
borderColor: '#e7e7e7',
borderColor: "#e7e7e7",
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
opacity: 0.5,
},
},
legend: {
show: false
show: false,
},
markers: {
size: 1
size: 1,
},
xaxis: {
categories: ['22th', '23th', '24th', '25th', '26th', '27th', '28th'],
categories: ["22th", "23th", "24th", "25th", "26th", "27th", "28th"],
},
};
var visitors_chart = new ApexCharts(document.querySelector("#visitors-chart"), visitors_chart_options);
var visitors_chart = new ApexCharts(
document.querySelector("#visitors-chart"),
visitors_chart_options
);
visitors_chart.render();
var sales_chart_options = {
series: [{
name: 'Net Profit',
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
}, {
name: 'Revenue',
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
}, {
name: 'Free Cash Flow',
data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
}],
series: [
{
name: "Net Profit",
data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
},
{
name: "Revenue",
data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
},
{
name: "Free Cash Flow",
data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
},
],
chart: {
type: 'bar',
height: 200
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
type: "bar",
height: 200,
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: "55%",
endingShape: "rounded",
},
},
legend: {
show: false,
},
colors: ["#0d6efd", "#20c997", "#ffc107"],
dataLabels: {
enabled: false,
},
stroke: {
show: true,
width: 2,
colors: ["transparent"],
},
xaxis: {
categories: [
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
],
},
fill: {
opacity: 1,
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands";
},
},
},
},
legend: {
show: false
},
colors:['#0d6efd', '#20c997', '#ffc107'],
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands"
}
}
}
};
var sales_chart = new ApexCharts(document.querySelector("#sales-chart"), sales_chart_options);
var sales_chart = new ApexCharts(
document.querySelector("#sales-chart"),
sales_chart_options
);
sales_chart.render();
</script>
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

47
src/html/pages/layout/collapsed-sidebar.astro
View File

@ -1,14 +1,14 @@
---
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';
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 path = '../../../dist';
const mainPage = 'layout';
const page = 'collapsed-sidebar';
const title = "AdminLTE 4 | Sidebar Mini";
const path = "../../../dist";
const mainPage = "layout";
const page = "collapsed-sidebar";
---
<!DOCTYPE html>
@ -19,7 +19,9 @@ const page = 'collapsed-sidebar';
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-collapse bg-body-tertiary">
<body
class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-collapse bg-body-tertiary"
>
<!--begin::App Wrapper-->
<div class="app-wrapper">
<Topbar path={path} />
@ -38,7 +40,9 @@ const page = 'collapsed-sidebar';
<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">Collapsed Sidebar</li>
<li class="breadcrumb-item active" aria-current="page">
Collapsed Sidebar
</li>
</ol>
</div>
</div>
@ -60,10 +64,20 @@ const page = 'collapsed-sidebar';
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
<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">
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
title="Remove"
>
<i class="fa-solid fa-times"></i>
</button>
</div>
@ -72,9 +86,7 @@ const page = 'collapsed-sidebar';
Start creating your amazing application!
</div>
<!-- /.card-body -->
<div class="card-footer">
Footer
</div>
<div class="card-footer">Footer</div>
<!-- /.card-footer-->
</div>
<!-- /.card -->
@ -93,6 +105,5 @@ const page = 'collapsed-sidebar';
<!--begin::Script-->
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

43
src/html/pages/layout/fixed-sidebar.astro
View File

@ -1,14 +1,14 @@
---
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';
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 path = '../../../dist';
const mainPage = 'layout';
const page = 'fixed-sidebar';
const title = "AdminLTE 4 | Fixed Sidebar";
const path = "../../../dist";
const mainPage = "layout";
const page = "fixed-sidebar";
---
<!DOCTYPE html>
@ -39,7 +39,9 @@ const page = 'fixed-sidebar';
<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>
<li class="breadcrumb-item active" aria-current="page">
Fixed Layout
</li>
</ol>
</div>
</div>
@ -61,10 +63,20 @@ const page = 'fixed-sidebar';
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
<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">
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
title="Remove"
>
<i class="fa-solid fa-times"></i>
</button>
</div>
@ -73,9 +85,7 @@ const page = 'fixed-sidebar';
Start creating your amazing application!
</div>
<!-- /.card-body -->
<div class="card-footer">
Footer
</div>
<div class="card-footer">Footer</div>
<!-- /.card-footer-->
</div>
<!-- /.card -->
@ -94,6 +104,5 @@ const page = 'fixed-sidebar';
<!--begin::Script-->
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

43
src/html/pages/layout/layout-rtl.astro
View File

@ -1,14 +1,14 @@
---
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';
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 path = '../../../dist';
const mainPage = 'layout';
const page = 'layout-rtl';
const title = "AdminLTE 4 | Layout RTL";
const path = "../../../dist";
const mainPage = "layout";
const page = "layout-rtl";
const isRtl = true;
---
@ -39,7 +39,9 @@ const isRtl = true;
<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>
<li class="breadcrumb-item active" aria-current="page">
Layout RTL
</li>
</ol>
</div>
</div>
@ -61,10 +63,20 @@ const isRtl = true;
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
<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">
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
title="Remove"
>
<i class="fa-solid fa-times"></i>
</button>
</div>
@ -73,9 +85,7 @@ const isRtl = true;
Start creating your amazing application!
</div>
<!-- /.card-body -->
<div class="card-footer">
Footer
</div>
<div class="card-footer">Footer</div>
<!-- /.card-footer-->
</div>
<!-- /.card -->
@ -94,6 +104,5 @@ const isRtl = true;
<!--begin::Script-->
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

54
src/html/pages/layout/logo-switch.astro
View File

@ -1,14 +1,15 @@
---
import Head from '@components/_head.astro';
import Footer from '@components/dashboard/_footer.astro';
import Topbar from '@components/dashboard/_topbar.astro';
import Scripts from '@components/_scripts.astro';
import { convertPathToHtml } from '../../../utils/index.js';
import Head from "@components/_head.astro";
import Footer from "@components/dashboard/_footer.astro";
import Topbar from "@components/dashboard/_topbar.astro";
import Scripts from "@components/_scripts.astro";
import { convertPathToHtml } from "../../../utils/index.js";
const title = 'AdminLTE 4 | Sidebar Mini';
const path = '../../../dist';
const title = "AdminLTE 4 | Sidebar Mini";
const path = "../../../dist";
const htmlPath = convertPathToHtml(path);
---
<!DOCTYPE html>
<html lang="en">
<!--begin::Head-->
@ -24,9 +25,17 @@ const htmlPath = convertPathToHtml(path);
<!-- 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 logo-switch">
<img src={path + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo Small" class="brand-image-xl logo-xs opacity-75 shadow">
<img src={path + '/assets/img/AdminLTEFullLogo.png'} alt="AdminLTE Logo Large" class="brand-image-xs logo-xl opacity-75">
<a href={htmlPath + "/index.html"} class="brand-link logo-switch">
<img
src={path + "/assets/img/AdminLTELogo.png"}
alt="AdminLTE Logo Small"
class="brand-image-xl logo-xs opacity-75 shadow"
/>
<img
src={path + "/assets/img/AdminLTEFullLogo.png"}
alt="AdminLTE Logo Large"
class="brand-image-xs logo-xl opacity-75"
/>
</a>
</div>
<!-- Sidebar -->
@ -50,7 +59,9 @@ const htmlPath = convertPathToHtml(path);
<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">Logo Switch</li>
<li class="breadcrumb-item active" aria-current="page">
Logo Switch
</li>
</ol>
</div>
</div>
@ -72,10 +83,20 @@ const htmlPath = convertPathToHtml(path);
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
<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">
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
title="Remove"
>
<i class="fa-solid fa-times"></i>
</button>
</div>
@ -84,9 +105,7 @@ const htmlPath = convertPathToHtml(path);
Start creating your amazing application!
</div>
<!-- /.card-body -->
<div class="card-footer">
Footer
</div>
<div class="card-footer">Footer</div>
<!-- /.card-footer-->
</div>
<!-- /.card -->
@ -105,6 +124,5 @@ const htmlPath = convertPathToHtml(path);
<!--begin::Script-->
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

43
src/html/pages/layout/sidebar-mini.astro
View File

@ -1,14 +1,14 @@
---
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';
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 path = '../../../dist';
const mainPage = 'layout';
const page = 'sidebar-mini';
const title = "AdminLTE 4 | Sidebar Mini";
const path = "../../../dist";
const mainPage = "layout";
const page = "sidebar-mini";
---
<!DOCTYPE html>
@ -38,7 +38,9 @@ const page = 'sidebar-mini';
<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>
<li class="breadcrumb-item active" aria-current="page">
Sidebar Mini
</li>
</ol>
</div>
</div>
@ -60,10 +62,20 @@ const page = 'sidebar-mini';
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
<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">
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
title="Remove"
>
<i class="fa-solid fa-times"></i>
</button>
</div>
@ -72,9 +84,7 @@ const page = 'sidebar-mini';
Start creating your amazing application!
</div>
<!-- /.card-body -->
<div class="card-footer">
Footer
</div>
<div class="card-footer">Footer</div>
<!-- /.card-footer-->
</div>
<!-- /.card -->
@ -93,6 +103,5 @@ const page = 'sidebar-mini';
<!--begin::Script-->
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

43
src/html/pages/layout/unfixed-sidebar.astro
View File

@ -1,14 +1,14 @@
---
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';
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 path = '../../../dist';
const mainPage = 'layout';
const page = 'unfixed-sidebar';
const title = "AdminLTE 4 | Unfixed Sidebar";
const path = "../../../dist";
const mainPage = "layout";
const page = "unfixed-sidebar";
---
<!DOCTYPE html>
@ -38,7 +38,9 @@ const page = 'unfixed-sidebar';
<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>
<li class="breadcrumb-item active" aria-current="page">
Unfixed Layout
</li>
</ol>
</div>
</div>
@ -60,10 +62,20 @@ const page = 'unfixed-sidebar';
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
<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">
<button
type="button"
class="btn btn-tool"
data-lte-dismiss="card-remove"
title="Remove"
>
<i class="fa-solid fa-times"></i>
</button>
</div>
@ -72,9 +84,7 @@ const page = 'unfixed-sidebar';
Start creating your amazing application!
</div>
<!-- /.card-body -->
<div class="card-footer">
Footer
</div>
<div class="card-footer">Footer</div>
<!-- /.card-footer-->
</div>
<!-- /.card -->
@ -92,6 +102,5 @@ const page = 'unfixed-sidebar';
<!--begin::Script-->
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

241
src/html/pages/tables/simple.astro
View File

@ -1,14 +1,14 @@
---
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';
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 path = '../../../dist';
const mainPage = 'tables';
const page = 'simple';
const title = "AdminLTE 4 | Simple Tables";
const path = "../../../dist";
const mainPage = "tables";
const page = "simple";
---
<!DOCTYPE html>
@ -38,7 +38,9 @@ const page = 'simple';
<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>
<li class="breadcrumb-item active" aria-current="page">
Simple Tables
</li>
</ol>
</div>
</div>
@ -75,7 +77,11 @@ const page = 'simple';
<td>Update software</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
<div
class="progress-bar progress-bar-danger"
style="width: 55%"
>
</div>
</div>
</td>
<td><span class="badge text-bg-danger">55%</span></td>
@ -85,30 +91,52 @@ const page = 'simple';
<td>Clean database</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar text-bg-warning" style="width: 70%"></div>
<div
class="progress-bar text-bg-warning"
style="width: 70%"
>
</div>
</div>
</td>
<td><span class="badge text-bg-warning">70%</span></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
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>
<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
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>
<td>
<span class="badge text-bg-success">90%</span>
</td>
</tr>
</tbody>
</table>
@ -116,11 +144,21 @@ const page = 'simple';
<!-- /.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="#">&laquo;</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="#">&raquo;</a></li>
<li class="page-item">
<a class="page-link" href="#">&laquo;</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="#">&raquo;</a>
</li>
</ul>
</div>
</div>
@ -147,7 +185,11 @@ const page = 'simple';
<td>Update software</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
<div
class="progress-bar progress-bar-danger"
style="width: 55%"
>
</div>
</div>
</td>
<td><span class="badge text-bg-danger">55%</span></td>
@ -157,30 +199,52 @@ const page = 'simple';
<td>Clean database</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar text-bg-warning" style="width: 70%"></div>
<div
class="progress-bar text-bg-warning"
style="width: 70%"
>
</div>
</div>
</td>
<td><span class="badge text-bg-warning">70%</span></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
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>
<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
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>
<td>
<span class="badge text-bg-success">90%</span>
</td>
</tr>
</tbody>
</table>
@ -197,11 +261,21 @@ const page = 'simple';
<div class="card-tools">
<ul class="pagination pagination-sm float-end">
<li class="page-item"><a class="page-link" href="#">&laquo;</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="#">&raquo;</a></li>
<li class="page-item">
<a class="page-link" href="#">&laquo;</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="#">&raquo;</a>
</li>
</ul>
</div>
</div>
@ -222,7 +296,11 @@ const page = 'simple';
<td>Update software</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
<div
class="progress-bar progress-bar-danger"
style="width: 55%"
>
</div>
</div>
</td>
<td><span class="badge text-bg-danger">55%</span></td>
@ -232,30 +310,52 @@ const page = 'simple';
<td>Clean database</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar text-bg-warning" style="width: 70%"></div>
<div
class="progress-bar text-bg-warning"
style="width: 70%"
>
</div>
</div>
</td>
<td><span class="badge text-bg-warning">70%</span></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
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>
<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
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>
<td>
<span class="badge text-bg-success">90%</span>
</td>
</tr>
</tbody>
</table>
@ -285,7 +385,11 @@ const page = 'simple';
<td>Update software</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
<div
class="progress-bar progress-bar-danger"
style="width: 55%"
>
</div>
</div>
</td>
<td><span class="badge text-bg-danger">55%</span></td>
@ -295,30 +399,52 @@ const page = 'simple';
<td>Clean database</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar text-bg-warning" style="width: 70%"></div>
<div
class="progress-bar text-bg-warning"
style="width: 70%"
>
</div>
</div>
</td>
<td><span class="badge text-bg-warning">70%</span></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
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>
<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
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>
<td>
<span class="badge text-bg-success">90%</span>
</td>
</tr>
</tbody>
</table>
@ -342,6 +468,5 @@ const page = 'simple';
<!--begin::Script-->
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

159
src/html/pages/widgets/cards.astro
View File

@ -1,14 +1,14 @@
---
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';
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 path = '../../../dist';
const mainPage = 'widgets';
const page = 'cards';
const title = "AdminLTE 4 | Widgets - Cards";
const path = "../../../dist";
const mainPage = "widgets";
const page = "cards";
---
<!DOCTYPE html>
@ -38,7 +38,9 @@ const page = 'cards';
<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>
<li class="breadcrumb-item active" aria-current="page">
Cards
</li>
</ol>
</div>
</div>
@ -62,15 +64,18 @@ const page = 'cards';
<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
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>
<div class="card-body">The body of the card</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
@ -82,15 +87,18 @@ const page = 'cards';
<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
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>
<div class="card-body">The body of the card</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
@ -102,15 +110,18 @@ const page = 'cards';
<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
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>
<div class="card-body">The body of the card</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
@ -122,15 +133,18 @@ const page = 'cards';
<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
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>
<div class="card-body">The body of the card</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
@ -148,15 +162,18 @@ const page = 'cards';
<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
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>
<div class="card-body">The body of the card</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
@ -168,15 +185,18 @@ const page = 'cards';
<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
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>
<div class="card-body">The body of the card</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
@ -188,15 +208,18 @@ const page = 'cards';
<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
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>
<div class="card-body">The body of the card</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
@ -208,15 +231,18 @@ const page = 'cards';
<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
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>
<div class="card-body">The body of the card</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
@ -225,7 +251,7 @@ const page = 'cards';
</div>
<!--end::Row-->
<h5 class="mb-2">Card with <code>.text-bg-*</code> </h5>
<h5 class="mb-2">Card with <code>.text-bg-*</code></h5>
<!--begin::Row-->
<div class="row">
<div class="col-md-3">
@ -234,15 +260,18 @@ const page = 'cards';
<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
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>
<div class="card-body">The body of the card</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
@ -254,15 +283,18 @@ const page = 'cards';
<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
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>
<div class="card-body">The body of the card</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
@ -274,15 +306,18 @@ const page = 'cards';
<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
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>
<div class="card-body">The body of the card</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
@ -294,15 +329,18 @@ const page = 'cards';
<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
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>
<div class="card-body">The body of the card</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
@ -322,6 +360,5 @@ const page = 'cards';
<!--begin::Script-->
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

95
src/html/pages/widgets/info-box.astro
View File

@ -1,14 +1,14 @@
---
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';
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 path = '../../../dist';
const mainPage = 'widgets';
const page = 'info-box';
const title = "AdminLTE 4 | Widgets - Info Box";
const path = "../../../dist";
const mainPage = "widgets";
const page = "info-box";
---
<!DOCTYPE html>
@ -38,7 +38,9 @@ const page = 'info-box';
<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>
<li class="breadcrumb-item active" aria-current="page">
Info Box
</li>
</ol>
</div>
</div>
@ -56,7 +58,9 @@ const page = 'info-box';
<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>
<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>
@ -73,7 +77,9 @@ const page = 'info-box';
<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>
<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>
@ -90,7 +96,9 @@ const page = 'info-box';
<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>
<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>
@ -104,7 +112,9 @@ const page = 'info-box';
<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>
<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>
@ -119,12 +129,18 @@ const page = 'info-box';
<!--end::Row-->
<!-- =========================================================== -->
<h5 class="mb-2">Info Box With Custom Shadows <small><i>Using Bootstrap's Shadow Utility</i></small></h5>
<h5 class="mb-2">
Info Box With Custom Shadows <small>
<i>Using Bootstrap's Shadow Utility</i>
</small>
</h5>
<!--begin::Row-->
<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>
<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>
@ -141,7 +157,9 @@ const page = 'info-box';
<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>
<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>
@ -158,7 +176,9 @@ const page = 'info-box';
<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>
<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>
@ -172,7 +192,9 @@ const page = 'info-box';
<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>
<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>
@ -192,7 +214,9 @@ const page = 'info-box';
<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>
<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>
@ -212,7 +236,9 @@ const page = 'info-box';
<!-- /.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>
<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>
@ -232,7 +258,9 @@ const page = 'info-box';
<!-- /.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>
<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>
@ -252,7 +280,9 @@ const page = 'info-box';
<!-- /.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>
<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>
@ -279,7 +309,9 @@ const page = 'info-box';
<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>
<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>
@ -299,7 +331,9 @@ const page = 'info-box';
<!-- /.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>
<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>
@ -319,7 +353,9 @@ const page = 'info-box';
<!-- /.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>
<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>
@ -339,7 +375,9 @@ const page = 'info-box';
<!-- /.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>
<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>
@ -371,6 +409,5 @@ const page = 'info-box';
<!--begin::Script-->
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>

97
src/html/pages/widgets/small-box.astro
View File

@ -1,14 +1,14 @@
---
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';
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 path = '../../../dist';
const mainPage = 'widgets';
const page = 'small-box';
const title = "AdminLTE 4 | Widgets - Small Box";
const path = "../../../dist";
const mainPage = "widgets";
const page = "small-box";
---
<!DOCTYPE html>
@ -38,7 +38,9 @@ const page = 'small-box';
<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>
<li class="breadcrumb-item active" aria-current="page">
Small Box
</li>
</ol>
</div>
</div>
@ -63,10 +65,20 @@ const page = 'small-box';
<p>New Orders</p>
</div>
<svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"></path>
<svg
class="small-box-icon"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
></path>
</svg>
<a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
<a href="#" class="small-box-footer"></a>
More info <i class="fa-solid fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
@ -78,10 +90,20 @@ const page = 'small-box';
<p>Bounce Rate</p>
</div>
<svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"></path>
<svg
class="small-box-icon"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
></path>
</svg>
<a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
<a href="#" class="small-box-footer">
More info <i class="fa-solid fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
@ -93,10 +115,20 @@ const page = 'small-box';
<p>User Registrations</p>
</div>
<svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"></path>
<svg
class="small-box-icon"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
></path>
</svg>
<a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
<a href="#" class="small-box-footer">
More info <i class="fa-solid fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
@ -108,11 +140,27 @@ const page = 'small-box';
<p>Unique Visitors</p>
</div>
<svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path clip-rule="evenodd" fill-rule="evenodd" d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"></path>
<path clip-rule="evenodd" fill-rule="evenodd" d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"></path>
<svg
class="small-box-icon"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
></path>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
></path>
</svg>
<a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
<a href="#" class="small-box-footer">
More info <i class="fa-solid fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
@ -130,6 +178,5 @@ const page = 'small-box';
<!--begin::Script-->
<Scripts path={path} />
<!--end::Script-->
</body>
<!--end::Body-->
</body><!--end::Body-->
</html>