252 lines
11 KiB
HTML
252 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>{{ Page Title }}</title>
|
|
|
|
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
|
|
|
|
<!--
|
|
All assets are self-hosted. No external requests at runtime.
|
|
Run setup/get-fonts.sh first to download Open Sans and Font Awesome.
|
|
See setup/INIT.md for full instructions.
|
|
-->
|
|
|
|
<!-- Open Sans (self-hosted) -->
|
|
<link href="/assets/css/open-sans.css" rel="stylesheet" />
|
|
|
|
<!-- Font Awesome Free 6 (self-hosted) -->
|
|
<link href="/assets/css/fontawesome/all.min.css" rel="stylesheet" />
|
|
|
|
<!-- Nucleo Icons (self-hosted, copied from source project) -->
|
|
<link href="/assets/css/nucleo-icons.css" rel="stylesheet" />
|
|
<link href="/assets/css/nucleo-svg.css" rel="stylesheet" />
|
|
|
|
<!-- Soft UI Dashboard CSS (self-hosted, copied from source project) -->
|
|
<link href="/assets/css/soft-ui-dashboard-tailwind.css" rel="stylesheet" />
|
|
</head>
|
|
|
|
<!--
|
|
REQUIRED body classes — set the base visual identity.
|
|
Do not remove or change these.
|
|
-->
|
|
<body class="m-0 font-sans antialiased font-normal text-base leading-default bg-gray-50 text-slate-500">
|
|
|
|
<!-- ============================================================
|
|
SIDEBAR (fixed left panel)
|
|
Width: max-w-62.5 = 15.625rem (250px)
|
|
Hidden on mobile, visible at xl breakpoint (1200px)
|
|
============================================================ -->
|
|
<aside
|
|
id="sidenav-main"
|
|
class="max-w-62.5 ease-nav-brand z-990 fixed inset-y-0 my-4 ml-4 block w-full -translate-x-full flex-wrap items-center justify-between overflow-y-auto rounded-2xl border-0 bg-white p-0 antialiased shadow-none transition-transform duration-200 xl:left-0 xl:translate-x-0 xl:bg-transparent"
|
|
>
|
|
<!-- Brand / Logo -->
|
|
<div class="h-19.5">
|
|
<a class="block px-8 py-6 m-0 text-sm whitespace-nowrap text-slate-700" href="/">
|
|
<span class="ml-1 font-semibold transition-all duration-200 ease-nav-brand">App Name</span>
|
|
</a>
|
|
</div>
|
|
|
|
<hr class="h-px mt-0 bg-transparent bg-gradient-horizontal-dark" />
|
|
|
|
<!-- Nav items -->
|
|
<div class="items-center block w-auto max-h-screen overflow-auto h-sidenav">
|
|
<ul class="flex flex-col pl-0 mb-0 list-none">
|
|
|
|
<!-- Active nav item -->
|
|
<li class="mt-0.5 w-full">
|
|
<a
|
|
href="/dashboard"
|
|
class="py-2.7 shadow-soft-xl text-sm ease-nav-brand my-0 mx-4 flex items-center whitespace-nowrap rounded-lg bg-white px-4 font-semibold text-slate-700 transition-colors"
|
|
>
|
|
<div class="bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-center stroke-0 text-center xl:p-2.5">
|
|
<i class="fas fa-tachometer-alt text-white text-sm"></i>
|
|
</div>
|
|
Dashboard
|
|
</a>
|
|
</li>
|
|
|
|
<!-- Inactive nav item -->
|
|
<li class="mt-0.5 w-full">
|
|
<a
|
|
href="/profile"
|
|
class="py-2.7 text-sm ease-nav-brand my-0 mx-4 flex items-center whitespace-nowrap px-4 font-semibold text-slate-500 transition-colors"
|
|
>
|
|
<div class="mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-center stroke-0 text-center bg-white shadow-soft-sm xl:p-2.5">
|
|
<i class="fas fa-user text-slate-700 text-sm"></i>
|
|
</div>
|
|
Profile
|
|
</a>
|
|
</li>
|
|
|
|
<!-- Section label -->
|
|
<li class="pt-4 ml-2 pl-6 mt-4">
|
|
<h6 class="pl-6 ml-2 font-bold leading-tight uppercase text-xs opacity-60">Account Pages</h6>
|
|
</li>
|
|
|
|
<!-- Add more nav items here following the same pattern -->
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Sidebar footer CTA card (optional) -->
|
|
<div class="mx-4 mt-4">
|
|
<div class="relative flex min-w-0 flex-col items-center break-words rounded-2xl border-0 bg-white bg-clip-border shadow-none">
|
|
<div class="mb-7.5 h-28 w-full overflow-hidden rounded-xl">
|
|
<div class="bg-gradient-to-tl from-slate-600 to-slate-300 h-full w-full"></div>
|
|
</div>
|
|
<div class="-mt-14 w-3/4 text-center">
|
|
<p class="mt-0 mb-4 font-semibold leading-tight text-xs">Need help?</p>
|
|
<a
|
|
href="#"
|
|
class="inline-block w-full px-8 py-2 mb-4 font-bold text-center text-black uppercase transition-all ease-in bg-white border-0 rounded-lg shadow-soft-md bg-150 leading-pro text-xs hover:shadow-soft-2xl hover:scale-102"
|
|
>
|
|
Documentation
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- END SIDEBAR -->
|
|
|
|
<!-- ============================================================
|
|
MAIN CONTENT AREA
|
|
xl:ml-68.5 = 17.125rem left margin to clear the fixed sidebar
|
|
============================================================ -->
|
|
<main class="ease-soft-in-out xl:ml-68.5 relative h-full max-h-screen rounded-xl transition-all duration-200">
|
|
|
|
<!-- TOP NAVBAR -->
|
|
<nav class="relative flex flex-wrap items-center justify-between px-0 py-2 mx-6 transition-all shadow-none duration-250 ease-soft-in rounded-2xl lg:flex-nowrap lg:justify-start">
|
|
<div class="flex items-center justify-between w-full px-4 py-1 mx-auto flex-wrap-inherit">
|
|
|
|
<!-- Breadcrumb -->
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="flex flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16">
|
|
<li class="text-sm leading-normal">
|
|
<a class="opacity-50 text-slate-700" href="#">Pages</a>
|
|
</li>
|
|
<li class="text-sm pl-2 capitalize leading-normal text-slate-700 before:float-left before:pr-2 before:content-['/']" aria-current="page">
|
|
Dashboard
|
|
</li>
|
|
</ol>
|
|
<h6 class="mb-0 font-bold capitalize">Dashboard</h6>
|
|
</nav>
|
|
|
|
<!-- Mobile sidebar toggle -->
|
|
<button
|
|
type="button"
|
|
class="inline-block p-0 font-bold text-center uppercase align-middle transition-all ease-in border-0 rounded-lg cursor-pointer text-xs leading-pro xl:hidden"
|
|
onclick="toggleSidenav()"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<i class="fas fa-bars text-slate-700"></i>
|
|
</button>
|
|
|
|
<!-- Right side: search + user -->
|
|
<div class="flex items-center mt-2 grow sm:mt-0 sm:mr-6 md:mr-0 lg:flex lg:basis-auto">
|
|
<div class="flex items-center md:ml-auto md:pr-4">
|
|
<div class="relative flex flex-wrap items-stretch w-full transition-all rounded-lg ease-soft">
|
|
<span class="text-sm ease-soft leading-5.6 absolute z-50 -ml-px flex h-full items-center whitespace-nowrap rounded-lg rounded-tr-none rounded-br-none border border-r-0 border-transparent bg-transparent py-2 px-2.5 text-center font-normal text-slate-500 transition-all">
|
|
<i class="fas fa-search" aria-hidden="true"></i>
|
|
</span>
|
|
<input
|
|
type="text"
|
|
class="pl-8.75 text-sm focus:shadow-soft-primary-outline ease-soft w-1/100 leading-5.6 relative -ml-px block min-w-0 flex-auto rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding py-2 pr-3 text-gray-700 transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none focus:transition-shadow"
|
|
placeholder="Search..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="flex flex-row justify-end pl-0 mb-0 list-none md-max:w-full">
|
|
<li class="flex items-center">
|
|
<a href="#" class="block px-0 py-2 font-semibold transition-all ease-nav-brand text-sm text-slate-500">
|
|
<i class="fas fa-user-circle text-lg mr-1"></i>
|
|
<span class="sm:inline">User Name</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- END NAVBAR -->
|
|
|
|
<!-- PAGE CONTENT -->
|
|
<div class="w-full px-6 py-6 mx-auto">
|
|
|
|
<!-- ── STAT CARDS ROW ── -->
|
|
<div class="flex flex-wrap -mx-3">
|
|
|
|
<!-- Stat card — duplicate and adjust for each metric -->
|
|
<div class="w-full max-w-full px-3 mb-6 sm:w-1/2 sm:flex-none xl:mb-0 xl:w-1/4">
|
|
<div class="relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border">
|
|
<div class="flex-auto p-4">
|
|
<div class="flex flex-row -mx-3">
|
|
<div class="flex-none w-2/3 max-w-full px-3">
|
|
<div>
|
|
<p class="mb-0 font-sans font-semibold leading-normal text-sm">Today's Money</p>
|
|
<h5 class="mb-0 font-bold">
|
|
$53,000
|
|
<span class="leading-normal text-sm font-weight-bolder text-lime-500">+55%</span>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
<div class="px-3 text-right basis-1/3">
|
|
<div class="inline-block w-12 h-12 text-center rounded-lg bg-gradient-to-tl from-purple-700 to-pink-500">
|
|
<i class="ni leading-none ni-money-coins text-lg relative top-3.5 text-white"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- /STAT CARDS ROW -->
|
|
|
|
<!-- ── CONTENT PANELS ROW ── -->
|
|
<div class="flex flex-wrap mt-6 -mx-3">
|
|
|
|
<!-- Main panel (7/12) -->
|
|
<div class="w-full max-w-full px-3 mt-0 lg:w-7/12 lg:flex-none">
|
|
<div class="relative flex flex-col min-w-0 break-words bg-white border-0 shadow-soft-xl rounded-2xl bg-clip-border">
|
|
<div class="border-black/12.5 rounded-t-2xl border-b-0 border-solid p-6 pb-0">
|
|
<h6 class="capitalize">Panel Title</h6>
|
|
<p class="text-sm leading-normal">Subtitle text</p>
|
|
</div>
|
|
<div class="flex-auto p-6 pt-0">
|
|
<!-- Content goes here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Side panel (5/12) -->
|
|
<div class="w-full max-w-full px-3 mt-4 lg:w-5/12 lg:flex-none lg:mt-0">
|
|
<div class="relative flex flex-col min-w-0 break-words bg-white border-0 shadow-soft-xl rounded-2xl bg-clip-border">
|
|
<div class="p-6">
|
|
<h6>Side Panel Title</h6>
|
|
<!-- Content goes here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- /CONTENT PANELS ROW -->
|
|
|
|
</div>
|
|
<!-- /PAGE CONTENT -->
|
|
|
|
</main>
|
|
<!-- END MAIN CONTENT AREA -->
|
|
|
|
<script>
|
|
function toggleSidenav() {
|
|
const sidenav = document.getElementById('sidenav-main');
|
|
sidenav.classList.toggle('-translate-x-full');
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|