kjh2064
40cffb3beb
TaxBaik CI/CD / build-and-deploy (push) Successful in 2m26s
Problem: JavaScript login form saved tokens to localStorage but didn't notify CustomAuthenticationStateProvider, causing [Authorize] pages to remain in 'loading' state indefinitely. The provider only reads tokens when: 1. GetAuthenticationStateAsync() is called (page load) 2. NotifyAuthenticationStateChanged() is triggered (UI updates) But JavaScript login didn't trigger either, leaving the authentication state stale. Solution: Convert AdminLoginForm from HTML+JavaScript to pure Blazor component. Now the login flow is: 1. User enters credentials in Blazor form 2. HttpClient POST to /api/auth/login 3. Save tokens to localStorage 4. Call CustomAuthenticationStateProvider.LoginAsync() directly 5. Blazor detects auth state change and re-evaluates [Authorize] pages 6. Dashboard [Authorize] page renders successfully Result: Immediate authentication state update, no loading timeout on protected pages. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2501 lines
165 KiB
HTML
2501 lines
165 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="light" class="set-nav-dark">
|
|
|
|
|
|
<!-- Mirrored from getwebora.com/smartadmin/demo/ui-panels.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 30 Jun 2026 04:28:21 GMT -->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title> Panels | SmartAdmin - Enterprise Admin Dashboard by Webora</title>
|
|
<meta name="description" content="Page Description">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=5">
|
|
|
|
<!-- Standard favicon for browsers -->
|
|
<link rel="icon" href="img/favicon-32x32.png" type="image/png" sizes="32x32">
|
|
<link rel="icon" href="img/favicon-16x16.png" type="image/png" sizes="16x16">
|
|
|
|
<!-- Apple Touch Icon (iOS) -->
|
|
<link rel="apple-touch-icon" href="img/apple-touch-icon.png" sizes="180x180">
|
|
|
|
<!-- Android/Chrome (Progressive Web App) -->
|
|
<link rel="icon" href="img/favicon-192x192.png" type="image/png" sizes="192x192">
|
|
|
|
<!-- Call App Mode on ios devices -->
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
|
|
<!-- Remove Tap Highlight on Windows Phone IE -->
|
|
<meta name="msapplication-tap-highlight" content="no">
|
|
|
|
<!-- Vendor css -->
|
|
<link rel="stylesheet" media="screen, print" href="plugins/waves/waves.min.css">
|
|
|
|
<!-- Base css -->
|
|
<link rel="stylesheet" media="screen, print" href="css/smartapp.min.css">
|
|
|
|
<!-- Icons css-->
|
|
<link rel="stylesheet" media="screen, print" href="webfonts/smartadmin/sa-icons.css">
|
|
<link rel="stylesheet" media="screen, print" href="webfonts/fontawesome/fontawesome.css">
|
|
|
|
<!-- Save/Load functionality JavaScript -->
|
|
<script src="scripts/core/saveloadscript.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="app-wrap">
|
|
|
|
<header class="app-header">
|
|
<!-- Collapse icon -->
|
|
<div class="d-flex flex-grow-1 w-100 me-auto align-items-center">
|
|
|
|
<!-- App logo -->
|
|
<a href="dashboard-control-center.html" class="app-logo flex-shrink-0" data-prefix="v5.5.0" data-action="playsound" data-soundpath="media/sound/" data-soundfile="sawhisp.mp3">
|
|
<!-- <img src="img/logo.svg" alt="logo"> -->
|
|
|
|
<svg class="custom-logo">
|
|
<use href="img/app-logo.svg#custom-logo"></use>
|
|
</svg>
|
|
|
|
<!-- Logo Backdrop Animation -->
|
|
<div class="logo-backdrop">
|
|
<div class="blobs">
|
|
<svg viewbox="0 0 1200 1200">
|
|
<g class="blob blob-1">
|
|
<path d="M 100 600 q 0 -700, 500 -500 t 500 500 t -500 500 T 100 600 z" />
|
|
</g>
|
|
<g class="blob blob-2">
|
|
<path d="M 100 600 q -50 -400, 500 -500 t 450 550 t -500 500 T 100 600 z" />
|
|
</g>
|
|
<g class="blob blob-3">
|
|
<path d="M 100 600 q 0 -400, 500 -500 t 400 500 t -500 500 T 100 600 z" />
|
|
</g>
|
|
<g class="blob blob-4">
|
|
<path d="M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z" />
|
|
</g>
|
|
<g class="blob blob-1 alt">
|
|
<path d="M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z" />
|
|
</g>
|
|
<g class="blob blob-2 alt">
|
|
<path d="M 100 600 q 100 -600, 500 -500 t 400 500 t -500 500 T 100 600 z" />
|
|
</g>
|
|
<g class="blob blob-3 alt">
|
|
<path d="M 100 600 q 0 -400, 500 -500 t 400 500 t -500 500 T 100 600 z" />
|
|
</g>
|
|
<g class="blob blob-4 alt">
|
|
<path d="M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<button class="mobile-menu-icon me-2 d-flex d-sm-flex d-md-flex d-lg-none flex-shrink-0" data-action="toggle-swap" data-toggleclass="app-mobile-menu-open" aria-label="Toggle Mobile Menu">
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#menu"></use>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Collapse icon -->
|
|
<button type="button" class="collapse-icon me-3 d-none d-lg-inline-flex d-xl-inline-flex d-xxl-inline-flex" data-action="toggle" data-class="set-nav-minified" aria-label="Toggle Navigation Size">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 8">
|
|
<polygon fill="#878787" points="4.5,1 3.8,0.2 0,4 3.8,7.8 4.5,7 1.5,4" />
|
|
</svg>
|
|
</button>
|
|
|
|
<form class="app-search" role="search" action="https://getwebora.com/smartadmin/demo/search.html" autocomplete="off">
|
|
<input type="text" class="form-control" placeholder="Search for anything">
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Settings -->
|
|
<button type="button" class="btn btn-system hidden-mobile" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-drawer-settings" aria-label="Open Settings">
|
|
<svg class="sa-icon sa-icon-2x">
|
|
<use href="icons/sprite.svg#settings"></use>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Theme modes -->
|
|
<button type="button" class="btn btn-system" data-action="toggle-theme" aria-label="Toggle Dark Mode" aria-pressed="false">
|
|
<svg class="sa-icon sa-icon-2x sa-mode-light">
|
|
<use href="icons/sprite.svg#sun"></use>
|
|
</svg>
|
|
<svg class="sa-icon sa-icon-2x sa-mode-dark">
|
|
<use href="icons/sprite.svg#moon"></use>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Sidebar -->
|
|
<button type="button" class="btn btn-system d-none d-sm-block d-sm-none d-md-none d-lg-block" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-app-drawer" aria-label="Open Sidebar">
|
|
<svg class="sa-icon sa-icon-2x">
|
|
<use href="icons/sprite.svg#aperture"></use>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Full Screen Mode -->
|
|
<button type="button" class="btn btn-system d-none d-sm-block d-sm-none d-md-none d-lg-block" data-action="app-fullscreen" aria-label="Toggle Dark Mode" aria-pressed="false">
|
|
<svg class="sa-icon sa-icon-2x sa-fullscreen-on">
|
|
<use href="icons/sprite.svg#minimize"></use>
|
|
</svg>
|
|
<svg class="sa-icon sa-icon-2x sa-fullscreen-off">
|
|
<use href="icons/sprite.svg#maximize"></use>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Notifications -->
|
|
<button type="button" class="btn btn-system dropdown-toggle no-arrow" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Open Notifications">
|
|
<span class="badge badge-icon pos-top pos-end">5</span>
|
|
<svg class="sa-icon sa-icon-2x">
|
|
<use href="icons/sprite.svg#bell"></use>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Notifications dropdown -->
|
|
<div class="dropdown-menu dropdown-menu-animated dropdown-xl dropdown-menu-end p-0">
|
|
<div class="notification-header rounded-top mb-2">
|
|
<h4 class="m-0">
|
|
5 New
|
|
<small class="mb-0 opacity-80">User Notifications</small>
|
|
</h4>
|
|
</div>
|
|
|
|
<ul class="nav nav-tabs nav-tabs-clean" role="tablist">
|
|
<li class="nav-item d-none">
|
|
<a class="nav-link active" data-bs-toggle="tab" href="#tab-default" role="tab" aria-selected="true">Hidden</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link px-4 fs-md fw-500" data-bs-toggle="tab" href="#tab-messages" role="tab" aria-selected="false">Messages</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link px-4 fs-md fw-500" data-bs-toggle="tab" href="#tab-feeds" role="tab" aria-selected="false">Feeds</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link px-4 fs-md fw-500" data-bs-toggle="tab" href="#tab-events" role="tab" aria-selected="false">Events</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content tab-notification">
|
|
<!--Security message-->
|
|
<div class="tab-pane fade show active" id="tab-default" role="tabpanel">
|
|
<div class="d-flex h-100">
|
|
<div class="px-4 d-flex flex-column align-items-center justify-content-center">
|
|
|
|
<svg class="sa-icon sa-icon-5x sa-icon-primary">
|
|
<use href="icons/sprite.svg#arrow-up-circle"></use>
|
|
</svg>
|
|
<span class="text-center fw-300" style="font-size: 1.25rem;">
|
|
Select a tab above
|
|
</span>
|
|
<div class="mb-0 py-3 text-center fs-md fw-300 text-muted">
|
|
This blank page helps protect your privacy.
|
|
To change this default message, <a href="#">update your settings</a>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Messages -->
|
|
<div class="tab-pane fade" id="tab-messages" role="tabpanel">
|
|
<div class="custom-scroll h-100">
|
|
<ul class="notification">
|
|
<li class="unread alert alert-dismissable">
|
|
<div class="d-flex align-items-center">
|
|
<span class="status me-2">
|
|
<span class="profile-image rounded-circle d-inline-block" style="background-image:url('img/demo/avatars/avatar-c.png')"></span>
|
|
</span>
|
|
<span class="d-flex flex-column flex-1 ms-1">
|
|
<!-- <span class="name">Melissa Ayre <span class="badge bg-primary fw-n position-absolute top-0 end-0 mt-1">INBOX</span></span> -->
|
|
<span class="name">Melissa Ayre</span>
|
|
<span class="msg-a fs-sm">Re: New security codes</span>
|
|
<span class="msg-b fs-xs">Hello again and thanks for being part...</span>
|
|
<span class="fs-nano text-muted mt-1">56 seconds ago</span>
|
|
</span>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</li>
|
|
<li class="unread alert alert-dismissable">
|
|
<div class="d-flex align-items-center">
|
|
<span class="status me-2">
|
|
<span class="profile-image rounded-circle d-inline-block" style="background-image:url('img/demo/avatars/avatar-a.png')"></span>
|
|
</span>
|
|
<span class="d-flex flex-column flex-1 ms-1">
|
|
<span class="name">Adison Lee</span>
|
|
<span class="msg-a fs-sm">Msed quia non numquam eius</span>
|
|
<span class="fs-nano text-muted mt-1">2 minutes ago</span>
|
|
</span>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</li>
|
|
<li class="alert alert-dismissable">
|
|
<div class="d-flex align-items-center">
|
|
<span class="status status-success me-2">
|
|
<span class="profile-image rounded-circle d-inline-block" style="background-image:url('img/demo/avatars/avatar-b.png')"></span>
|
|
</span>
|
|
<span class="d-flex flex-column flex-1 ms-1">
|
|
<span class="name">Oliver Kopyuv</span>
|
|
<span class="msg-a fs-sm">Msed quia non numquam eius</span>
|
|
<span class="fs-nano text-muted mt-1">3 days ago</span>
|
|
</span>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</li>
|
|
<li class="alert alert-dismissable">
|
|
<div class="d-flex align-items-center">
|
|
<span class="status status-warning me-2">
|
|
<span class="profile-image rounded-circle d-inline-block" style="background-image:url('img/demo/avatars/avatar-e.png')"></span>
|
|
</span>
|
|
<span class="d-flex flex-column flex-1 ms-1">
|
|
<span class="name">Dr. John Cook PhD</span>
|
|
<span class="msg-a fs-sm">Msed quia non numquam eius</span>
|
|
<span class="fs-nano text-muted mt-1">2 weeks ago</span>
|
|
</span>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</li>
|
|
<li class="alert alert-dismissable">
|
|
<div class="d-flex align-items-center">
|
|
<span class="status status-success me-2">
|
|
<span class="profile-image rounded-circle d-inline-block" style="background-image:url('img/demo/avatars/avatar-h.png')"></span>
|
|
</span>
|
|
<span class="d-flex flex-column flex-1 ms-1">
|
|
<span class="name">Sarah McBrook</span>
|
|
<span class="msg-a fs-sm">Msed quia non numquam eius</span>
|
|
<span class="fs-nano text-muted mt-1">3 weeks ago</span>
|
|
</span>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</li>
|
|
<li class="alert alert-dismissable">
|
|
<div class="d-flex align-items-center">
|
|
<span class="status status-success me-2">
|
|
<span class="profile-image rounded-circle d-inline-block" style="background-image:url('img/demo/avatars/avatar-m.png')"></span>
|
|
</span>
|
|
<span class="d-flex flex-column flex-1 ms-1">
|
|
<span class="name">Anothony Bezyeth</span>
|
|
<span class="msg-a fs-sm">Msed quia non numquam eius</span>
|
|
<span class="fs-nano text-muted mt-1">one month ago</span>
|
|
</span>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</li>
|
|
<li class="alert alert-dismissable">
|
|
<div class="d-flex align-items-center">
|
|
<span class="status status-danger me-2">
|
|
<span class="profile-image rounded-circle d-inline-block" style="background-image:url('img/demo/avatars/avatar-j.png')"></span>
|
|
</span>
|
|
<span class="d-flex flex-column flex-1 ms-1">
|
|
<span class="name">Lisa Hatchensen</span>
|
|
<span class="msg-a fs-sm">Msed quia non numquam eius</span>
|
|
<span class="fs-nano text-muted mt-1">one year ago</span>
|
|
</span>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</li>
|
|
</ul>
|
|
<div class="notification-empty-msg">
|
|
<svg class="sa-icon sa-icon-5x sa-icon-primary">
|
|
<use href="icons/sprite.svg#coffee"></use>
|
|
</svg>
|
|
<span>
|
|
No new messages
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Feeds -->
|
|
<div class="tab-pane fade" id="tab-feeds" role="tabpanel">
|
|
<div class="custom-scroll h-100">
|
|
<ul class="notification">
|
|
<li class="unread alert alert-dismissable">
|
|
<div class="d-flex align-items-center show-child-on-hover">
|
|
<span class="d-flex flex-column flex-1">
|
|
<span class="name d-flex align-items-center">Administrator <span class="badge bg-success fw-n ms-1">UPDATE</span></span>
|
|
<span class="msg-a fs-sm">
|
|
System updated to version <strong>5.0</strong> <a href="buildnotes.html">(build notes)</a>
|
|
</span>
|
|
<span class="fs-nano text-muted mt-1">5 mins ago</span>
|
|
</span>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</li>
|
|
<li class="alert alert-dismissable">
|
|
<div class="d-flex align-items-center show-child-on-hover">
|
|
<div class="d-flex flex-column flex-1">
|
|
<span class="name">
|
|
Adison Lee <span class="fw-300 d-inline">replied to your video <a href="#" class="fw-400"> Cancer Drug</a> </span>
|
|
</span>
|
|
<span class="msg-a fs-sm mt-2">Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day...</span>
|
|
<span class="fs-nano text-muted mt-1">10 minutes ago</span>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</li>
|
|
<li class="alert alert-dismissable">
|
|
<div class="d-flex align-items-center show-child-on-hover">
|
|
<div class="d-flex flex-column flex-1">
|
|
<span class="name">
|
|
Troy Norman'<span class="fw-300">s new connections</span>
|
|
</span>
|
|
<div class="fs-sm d-flex align-items-center mt-2">
|
|
<span class="profile-image-md ms-1 rounded-circle d-inline-block" style="background-image:url('img/demo/avatars/avatar-a.png'); background-size: cover;"></span>
|
|
<span class="profile-image-md ms-1 rounded-circle d-inline-block" style="background-image:url('img/demo/avatars/avatar-b.png'); background-size: cover;"></span>
|
|
<span class="profile-image-md ms-1 rounded-circle d-inline-block" style="background-image:url('img/demo/avatars/avatar-c.png'); background-size: cover;"></span>
|
|
<span class="profile-image-md ms-1 rounded-circle d-inline-block" style="background-image:url('img/demo/avatars/avatar-e.png'); background-size: cover;"></span>
|
|
<div data-hasmore="+3" class="rounded-circle profile-image-md ms-1">
|
|
<span class="profile-image-md ms-1 rounded-circle d-inline-block" style="background-image:url('img/demo/avatars/avatar-h.png'); background-size: cover;"></span>
|
|
</div>
|
|
</div>
|
|
<span class="fs-nano text-muted mt-1">55 minutes ago</span>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</li>
|
|
<li class="alert alert-dismissable">
|
|
<div class="d-flex align-items-center show-child-on-hover">
|
|
<div class="d-flex flex-column flex-1">
|
|
<span class="name">Dr John Cook <span class="fw-300">sent a <span class="text-danger">new signal</span></span></span>
|
|
<span class="msg-a fs-sm mt-2">Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</span>
|
|
<span class="fs-nano text-muted mt-1">10 minutes ago</span>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</li>
|
|
<li class="alert alert-dismissable">
|
|
<div class="d-flex align-items-center show-child-on-hover">
|
|
<div class="d-flex flex-column flex-1">
|
|
<span class="name">Lab Images <span class="fw-300">were updated!</span></span>
|
|
<div class="fs-sm d-flex align-items-center mt-1">
|
|
<a href="#" class="ms-1 mt-1" title="Cell A-0012">
|
|
<span class="d-block img-share" style="background-image:url('img/thumbs/pic-7.png'); background-size: cover;"></span>
|
|
</a>
|
|
<a href="#" class="ms-1 mt-1" title="Patient A-473 saliva">
|
|
<span class="d-block img-share" style="background-image:url('img/thumbs/pic-8.png'); background-size: cover;"></span>
|
|
</a>
|
|
<a href="#" class="ms-1 mt-1" title="Patient A-473 blood cells">
|
|
<span class="d-block img-share" style="background-image:url('img/thumbs/pic-11.png'); background-size: cover;"></span>
|
|
</a>
|
|
<a href="#" class="ms-1 mt-1" title="Patient A-473 Membrane O.C">
|
|
<span class="d-block img-share" style="background-image:url('img/thumbs/pic-12.png'); background-size: cover;"></span>
|
|
</a>
|
|
</div>
|
|
<span class="fs-nano text-muted mt-1">55 minutes ago</span>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</li>
|
|
<li class="alert alert-dismissable">
|
|
<div class="d-flex align-items-center show-child-on-hover">
|
|
<div class="d-flex flex-column flex-1 w-100">
|
|
<div class="name mb-2"> Lisa Lamar<span class="fw-300"> updated project</span>
|
|
</div>
|
|
<div class="row fs-b fw-300">
|
|
<div class="col text-start"> Progress </div>
|
|
<div class="col text-end fw-500"> 45% </div>
|
|
</div>
|
|
<div class="progress progress-sm d-flex mt-1">
|
|
<span class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></span>
|
|
</div>
|
|
<span class="fs-nano text-muted mt-1">2 hrs ago</span>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</li>
|
|
</ul>
|
|
<div class="notification-empty-msg">
|
|
<svg class="sa-icon sa-icon-5x sa-icon-primary">
|
|
<use href="icons/sprite.svg#smile"></use>
|
|
</svg>
|
|
<span>
|
|
You are all set!
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- Events -->
|
|
<div class="tab-pane fade" id="tab-events" role="tabpanel">
|
|
<div class="d-flex flex-column h-100">
|
|
<div class="h-auto">
|
|
<table class="table-calendar m-0 w-100 h-100 border-0">
|
|
<tr>
|
|
<th colspan="7" class="pt-3 pb-2 px-3 text-center">
|
|
<div class="js-get-date h6 fw-600 mb-2">Fake Day, October 15th, 2090</div>
|
|
</th>
|
|
</tr>
|
|
<tr class="text-center">
|
|
<th>Sun</th>
|
|
<th>Mon</th>
|
|
<th>Tue</th>
|
|
<th>Wed</th>
|
|
<th>Thu</th>
|
|
<th>Fri</th>
|
|
<th>Sat</th>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted bg-faded">30</td>
|
|
<td>1</td>
|
|
<td>2</td>
|
|
<td>3</td>
|
|
<td>4</td>
|
|
<td>5</td>
|
|
<td>
|
|
<svg class="sa-icon sa-icon-warning m-1 position-absolute pos-left pos-top" style="--sa-icon-size: 0.85rem; --sa-fill-opacity: 0.5;">
|
|
<use href="icons/sprite.svg#star"></use>
|
|
</svg>
|
|
6
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>7</td>
|
|
<td>8</td>
|
|
<td>9</td>
|
|
<td class="bg-primary-600 text-white pattern-0">10</td>
|
|
<td>11</td>
|
|
<td>12</td>
|
|
<td>13</td>
|
|
</tr>
|
|
<tr>
|
|
<td>14</td>
|
|
<td>15</td>
|
|
<td>16</td>
|
|
<td>17</td>
|
|
<td>18</td>
|
|
<td>19</td>
|
|
<td>20</td>
|
|
</tr>
|
|
<tr>
|
|
<td>21</td>
|
|
<td>
|
|
<svg class="sa-icon sa-icon-info m-1 position-absolute pos-left pos-top" style="--sa-icon-size: 0.85rem; --sa-fill-opacity: 0.5;">
|
|
<use href="icons/sprite.svg#shield"></use>
|
|
</svg>
|
|
22
|
|
</td>
|
|
<td>23</td>
|
|
<td>24</td>
|
|
<td>25</td>
|
|
<td>26</td>
|
|
<td>27</td>
|
|
</tr>
|
|
<tr>
|
|
<td>28</td>
|
|
<td>29</td>
|
|
<td>30</td>
|
|
<td>31</td>
|
|
<td class="text-muted bg-faded">1</td>
|
|
<td class="text-muted bg-faded">2</td>
|
|
<td class="text-muted bg-faded">3</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="flex-1 custom-scroll shadow-inset-3">
|
|
<div class="p-2">
|
|
<div class="d-flex align-items-center text-left mb-3">
|
|
<div class="width-5 text-primary align-self-start table-calendar-appointment-date fw-300 text-center">
|
|
15
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="d-flex flex-column">
|
|
<span class="l-h-n fs-md fw-500">
|
|
October 2020
|
|
</span>
|
|
<span class="l-h-n fs-nano fw-400 text-secondary">
|
|
Monday
|
|
</span>
|
|
</div>
|
|
<div class="d-flex flex-column gap-2 mt-2">
|
|
<div>
|
|
<strong>2:30PM</strong> - Doctor's appointment
|
|
</div>
|
|
<div>
|
|
<strong>3:30PM</strong> - Report overview
|
|
</div>
|
|
<div>
|
|
<strong>4:30PM</strong> - Meeting with Donnah V.
|
|
</div>
|
|
<div>
|
|
<strong>5:30PM</strong> - Late Lunch
|
|
</div>
|
|
<div>
|
|
<strong>6:30PM</strong> - Report Compression
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="py-2 px-3 d-block rounded-bottom text-end border-light border-bottom-0 border-end-0 border-start-0">
|
|
<a href="#" class="fs-xs fw-500 ms-auto">view all notifications</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profile -->
|
|
<button type="button" data-bs-toggle="dropdown" title="drlantern@getwebora.com" class="btn-system bg-transparent d-flex flex-shrink-0 align-items-center justify-content-center" aria-label="Open Profile Dropdown">
|
|
<img src="img/demo/avatars/avatar-admin.png" class="profile-image profile-image-md rounded-circle" alt="Sunny A.">
|
|
</button>
|
|
|
|
<!-- Profile dropdown -->
|
|
<div class="dropdown-menu dropdown-menu-animated">
|
|
<div class="notification-header rounded-top mb-2">
|
|
<div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
|
|
<span class="status status-success d-inline-block me-2">
|
|
<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle" alt="Sunny A.">
|
|
</span>
|
|
<div class="info-card-text">
|
|
<div class="fs-lg text-truncate text-truncate-lg">Sunny A.</div>
|
|
<span class="text-truncate text-truncate-md opacity-80 fs-sm">sunnya@sadim.com</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown-divider m-0"></div>
|
|
|
|
<a href="#" class="dropdown-item" data-action="app-reset" role="button">
|
|
<span data-i18n="drpdwn.reset_layout">Reset Layout</span>
|
|
</a>
|
|
<a href="#" class="dropdown-item" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-drawer-settings" role="button">
|
|
<span data-i18n="drpdwn.settings">Settings</span>
|
|
</a>
|
|
<a href="#" class="dropdown-item d-block d-sm-block d-md-block d-lg-none" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-app-drawer" role="button">
|
|
<span data-i18n="drpdwn.settings">Virtual Assistant</span>
|
|
</a>
|
|
|
|
<div class="dropdown-divider m-0"></div>
|
|
|
|
<a href="#" class="dropdown-item d-flex justify-content-between align-items-center" data-action="app-fullscreen" aria-pressed="false" role="button">
|
|
<span data-i18n="drpdwn.fullscreen">Fullscreen</span>
|
|
<b class="text-muted fs-nano px-2 rounded font-monospace align-self-center border">F11</b>
|
|
</a>
|
|
<a href="#" class="dropdown-item d-flex justify-content-between align-items-center" data-action="app-print" role="button">
|
|
<span data-i18n="drpdwn.print">Print</span>
|
|
<span class="text-muted fs-nano px-2 rounded font-monospace align-self-center border">
|
|
<svg width="15" height="15">
|
|
<path d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953" stroke-width="1.2" stroke="currentColor" fill="none" stroke-linecap="square"></path>
|
|
</svg>
|
|
+ P
|
|
</span>
|
|
</a>
|
|
|
|
<div class="dropdown-multilevel dropdown-multilevel-left">
|
|
<div class="dropdown-item d-flex justify-content-between align-items-center">
|
|
<span data-i18n="drpdwn.language">Language</span>
|
|
<i class="sa sa-chevron-right"></i>
|
|
</div>
|
|
<div class="dropdown-menu">
|
|
<a href="#?lang=fr" class="dropdown-item" data-action="lang" data-lang="fr">Français</a>
|
|
<a href="#?lang=en" class="dropdown-item selected" data-action="lang" data-lang="en">English (US)</a>
|
|
<a href="#?lang=es" class="dropdown-item" data-action="lang" data-lang="es">Español</a>
|
|
<a href="#?lang=ru" class="dropdown-item" data-action="lang" data-lang="ru">Русский язык</a>
|
|
<a href="#?lang=jp" class="dropdown-item" data-action="lang" data-lang="jp">日本語</a>
|
|
<a href="#?lang=ch" class="dropdown-item" data-action="lang" data-lang="ch">中文</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown-divider m-0"></div>
|
|
|
|
<a class="dropdown-item py-3 fw-500 d-flex justify-content-between" href="auth-login.html">
|
|
<span class="text-danger" data-i18n="drpdwn.page-logout">Logout</span>
|
|
<span class="d-block text-truncate text-truncate-sm">@sunnyahmed</span>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<aside class="app-sidebar d-flex flex-column">
|
|
|
|
<a href="dashboard-control-center.html" class="app-logo flex-shrink-0" data-prefix="v5.5.0" data-action="playsound" data-soundpath="media/sound/" data-soundfile="sawhisp.html">
|
|
<!-- <img src="img/logo.svg" alt="logo"> -->
|
|
|
|
<svg class="custom-logo">
|
|
<use href="img/app-logo.svg#custom-logo"></use>
|
|
</svg>
|
|
|
|
<!-- Logo Backdrop Animation -->
|
|
<div class="logo-backdrop">
|
|
<div class="blobs">
|
|
<svg viewbox="0 0 1200 1200">
|
|
<g class="blob blob-1">
|
|
<path d="M 100 600 q 0 -700, 500 -500 t 500 500 t -500 500 T 100 600 z" />
|
|
</g>
|
|
<g class="blob blob-2">
|
|
<path d="M 100 600 q -50 -400, 500 -500 t 450 550 t -500 500 T 100 600 z" />
|
|
</g>
|
|
<g class="blob blob-3">
|
|
<path d="M 100 600 q 0 -400, 500 -500 t 400 500 t -500 500 T 100 600 z" />
|
|
</g>
|
|
<g class="blob blob-4">
|
|
<path d="M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z" />
|
|
</g>
|
|
<g class="blob blob-1 alt">
|
|
<path d="M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z" />
|
|
</g>
|
|
<g class="blob blob-2 alt">
|
|
<path d="M 100 600 q 100 -600, 500 -500 t 400 500 t -500 500 T 100 600 z" />
|
|
</g>
|
|
<g class="blob blob-3 alt">
|
|
<path d="M 100 600 q 0 -400, 500 -500 t 400 500 t -500 500 T 100 600 z" />
|
|
</g>
|
|
<g class="blob blob-4 alt">
|
|
<path d="M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<form class="app-menu-filter-container px-4">
|
|
<input type="text" class="form-control" id="searchInput" placeholder="Filter" autocomplete="off">
|
|
<div class="js-filter-message nav-filter-msg badge bg-secondary btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Clear filter"></div>
|
|
</form>
|
|
|
|
<nav id="js-primary-nav" class="primary-nav flex-grow-1 custom-scroll">
|
|
|
|
<ul id="js-nav-menu" class="nav-menu">
|
|
|
|
<li class="nav-title"><span>Insights</span></li>
|
|
|
|
<li class="nav-item">
|
|
<a href="#" title="Dashboards" data-filter-tags>
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#trello"></use>
|
|
</svg>
|
|
<span class="nav-link-text" data-i18n>Dashboards</span>
|
|
<span class="badge bg-danger-700 badge-end">New</span>
|
|
</a>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="dashboard-control-center.html">
|
|
<span class="nav-link-text" data-i18n>Control Center</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="dashboard-subscription.html">
|
|
<span class="nav-link-text" data-i18n>Subscription & Billing</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="dashboard-marketing.html">
|
|
<span class="nav-link-text" data-i18n>Marketing & Sales</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="dashboard-project-management.html">
|
|
<span class="nav-link-text" data-i18n>Project Management</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-title"><span>Config</span></li>
|
|
|
|
<li>
|
|
<a href="appintel.html">
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#cpu"></use>
|
|
</svg>
|
|
<span class="nav-link-text">Application Intel</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="#" title="Documentation" data-filter-tags>
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#book-open"></use>
|
|
</svg>
|
|
<span class="nav-link-text" data-i18n>Documentation</span>
|
|
</a>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="docs-build-notes.html">
|
|
<span class="nav-link-text" data-i18n>Build Notes</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="docs-getting-started.html">
|
|
<span class="nav-link-text" data-i18n>Getting Started</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="docs-smartappjs.html">
|
|
<span class="nav-link-text" data-i18n>App DOM</span>
|
|
<span class="badge bg-danger badge-end">P</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="docs-smartnavigationjs.html">
|
|
<span class="nav-link-text" data-i18n>Smart Navigation</span>
|
|
<span class="badge bg-danger badge-end">P</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="docs-smartfilterjs.html">
|
|
<span class="nav-link-text" data-i18n>Smart Filter</span>
|
|
<span class="badge bg-warning text-dark badge-end">D</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="docs-sortablejs.html">
|
|
<span class="nav-link-text" data-i18n>Sortable</span>
|
|
<span class="badge bg-warning text-dark badge-end">D</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="docs-bootstrapbundlejs.html">
|
|
<span class="nav-link-text" data-i18n>Bootstrap Bundle</span>
|
|
<span class="badge bg-warning text-dark badge-end">D</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="docs-smartslimscrolljs.html">
|
|
<span class="nav-link-text" data-i18n>Smart Slim Scroll</span>
|
|
<span class="badge bg-success badge-end">O</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="docs-wavesjs.html">
|
|
<span class="nav-link-text" data-i18n>Waves</span>
|
|
<span class="badge bg-success badge-end">O</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="docs-apexbarchartjs.html">
|
|
<span class="nav-link-text" data-i18n>Apex Chart Js</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="docs-easypiechartjs.html">
|
|
<span class="nav-link-text" data-i18n>Easy Pie Chart Js</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="docs-fullcalendarjs.html">
|
|
<span class="nav-link-text" data-i18n>Full Calendar Js</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="docs-peitychartsjs.html">
|
|
<span class="nav-link-text" data-i18n>Peity Chart Js</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="docs-smarttablesjs.html">
|
|
<span class="nav-link-text" data-i18n>Smart Table Js</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="docs-streamlinejs.html">
|
|
<span class="nav-link-text" data-i18n>Stream Line Js</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-title"><span>Layouts</span></li>
|
|
|
|
<li class="nav-item">
|
|
<a href="#" title="Access Control" data-filter-tags>
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#slash"></use>
|
|
</svg>
|
|
<span class="nav-link-text" data-i18n>Access Control</span>
|
|
</a>
|
|
|
|
<ul>
|
|
<li class="nav-item">
|
|
<a href="#" title="Authentication" data-filter-tags>
|
|
<span class="nav-link-text" data-i18n>Authentication Pages</span>
|
|
</a>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="auth-login.html">
|
|
<span class="nav-link-text" data-i18n>Login</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="auth-register.html">
|
|
<span class="nav-link-text" data-i18n>Register</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="auth-forgetpassword.html">
|
|
<span class="nav-link-text" data-i18n>Forget Password</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="auth-twofactor.html">
|
|
<span class="nav-link-text" data-i18n>2FA</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="auth-lockscreen.html">
|
|
<span class="nav-link-text" data-i18n>Lock Screen</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="emaildesign.html">
|
|
<span class="nav-link-text" data-i18n>Email Templates</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" title="Error Pages" data-filter-tags>
|
|
<span class="nav-link-text" data-i18n>Error Pages</span>
|
|
</a>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="error-404.html">
|
|
<span class="nav-link-text" data-i18n>404 Not Found</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="error-404-2.html">
|
|
<span class="nav-link-text" data-i18n>404 Not Found 2</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="error-500.html">
|
|
<span class="nav-link-text" data-i18n>500 Internal Server</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="profile.html">
|
|
<span class="nav-link-text" data-i18n>User Profile</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="#" title="Communication" data-filter-tags>
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#message-square"></use>
|
|
</svg>
|
|
<span class="nav-link-text" data-i18n>Communication</span>
|
|
</a>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="messenger.html">
|
|
<span class="nav-link-text" data-i18n>Messenger & Chat</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" title="Email" data-filter-tags>
|
|
<span class="nav-link-text" data-i18n>Email</span>
|
|
</a>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="systemmail.html">
|
|
<span class="nav-link-text" data-i18n>System Mail</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="systemmail-read.html">
|
|
<span class="nav-link-text" data-i18n>Mail Read</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="usercontact.html">
|
|
<span class="nav-link-text" data-i18n>User Contact</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="#" title="Miscellaneous" data-filter-tags>
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#archive"></use>
|
|
</svg>
|
|
<span class="nav-link-text" data-i18n>Miscellaneous</span>
|
|
</a>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="forum.html">
|
|
<span class="nav-link-text" data-i18n>Forum General</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="forum-threads.html">
|
|
<span class="nav-link-text" data-i18n>Forum Threads</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="forum-discussion.html">
|
|
<span class="nav-link-text" data-i18n>Forum Discussions</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="search.html">
|
|
<span class="nav-link-text" data-i18n>Search</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="landing.html" target="_blank">
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#zap"></use>
|
|
</svg>
|
|
<span class="nav-link-text">Landing</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-title"><span>Design</span></li>
|
|
|
|
<li class="nav-item">
|
|
<a href="#" title="UI Components" data-filter-tags>
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#layers"></use>
|
|
</svg>
|
|
<span class="nav-link-text" data-i18n>UI Components</span>
|
|
</a>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="ui-alerts.html">
|
|
<span class="nav-link-text" data-i18n>Alerts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-accordions.html">
|
|
<span class="nav-link-text" data-i18n>Accordions</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-badges.html">
|
|
<span class="nav-link-text" data-i18n>Badges</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-buttons.html">
|
|
<span class="nav-link-text" data-i18n>Buttons</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-buttongroup.html">
|
|
<span class="nav-link-text" data-i18n>Button Group</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-cards.html">
|
|
<span class="nav-link-text" data-i18n>Cards</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-breadcrumbs.html">
|
|
<span class="nav-link-text" data-i18n>Breadcrumbs</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-dropdowns.html">
|
|
<span class="nav-link-text" data-i18n>Dropdowns</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-navbars.html">
|
|
<span class="nav-link-text" data-i18n>Navbars</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-pagination.html">
|
|
<span class="nav-link-text" data-i18n>Pagination</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-scrollspy.html">
|
|
<span class="nav-link-text" data-i18n>ScrollSpy</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-collapse.html">
|
|
<span class="nav-link-text" data-i18n>Collapse</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-modal.html">
|
|
<span class="nav-link-text" data-i18n>Modal</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-tabs-pills.html">
|
|
<span class="nav-link-text" data-i18n>Tabs & Pills</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-tooltips.html">
|
|
<span class="nav-link-text" data-i18n>Tooltips</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-popovers.html">
|
|
<span class="nav-link-text" data-i18n>Popovers</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-toasts.html">
|
|
<span class="nav-link-text" data-i18n>Toasts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-progressbars.html">
|
|
<span class="nav-link-text" data-i18n>Progress Bars</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-spinners.html">
|
|
<span class="nav-link-text" data-i18n>Spinners</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-carousels.html">
|
|
<span class="nav-link-text" data-i18n>Carousels</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-panels.html">
|
|
<span class="nav-link-text" data-i18n>Panels</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-list-filter.html">
|
|
<span class="nav-link-text" data-i18n>List Filter</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="ui-sidepanels.html">
|
|
<span class="nav-link-text" data-i18n>Side Panels</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="#" title="System Utilities" data-filter-tags>
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#package"></use>
|
|
</svg>
|
|
<span class="nav-link-text" data-i18n>System Utilities</span>
|
|
</a>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="utilities-borders.html">
|
|
<span class="nav-link-text" data-i18n>Borders</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="utilities-display-property.html">
|
|
<span class="nav-link-text" data-i18n>Display Property</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="utilities-responsivegrid.html">
|
|
<span class="nav-link-text" data-i18n>Responsive Grid</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="utilities-position.html">
|
|
<span class="nav-link-text" data-i18n>Position</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="utilities-colorpalette.html">
|
|
<span class="nav-link-text" data-i18n>Color Palette</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="utilities-typography.html">
|
|
<span class="nav-link-text" data-i18n>Typography</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="utilities-sizing.html">
|
|
<span class="nav-link-text" data-i18n>Sizing</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="utilities-spacing.html">
|
|
<span class="nav-link-text" data-i18n>Spacing</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="utilities-flexbox.html">
|
|
<span class="nav-link-text" data-i18n>Flexbox</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="utilities-helpers.html">
|
|
<span class="nav-link-text" data-i18n>Helpers</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="utilities-visibility-generator.html">
|
|
<span class="nav-link-text" data-i18n>Visibility Generator</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="#" title="Iconography" data-filter-tags>
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#heart"></use>
|
|
</svg>
|
|
<span class="nav-link-text" data-i18n>Iconography</span>
|
|
</a>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="icons-system.html">
|
|
<span class="nav-link-text" data-i18n>System Icons</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="icons-fontawesome.html">
|
|
<span class="nav-link-text" data-i18n>FontAwesome 5.3</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="icons-smartadmin.html">
|
|
<span class="nav-link-text" data-i18n>SmartAdmin Icons 1.0</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="icons-stackgenerator.html">
|
|
<span class="nav-link-text" data-i18n>Stack Generator</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="icons-stacklibrary.html">
|
|
<span class="nav-link-text" data-i18n>Stack Library</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="#" title="Tables" data-filter-tags>
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#table"></use>
|
|
</svg>
|
|
<span class="nav-link-text" data-i18n>Tables</span>
|
|
</a>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="tables-basic.html">
|
|
<span class="nav-link-text" data-i18n>Basic Tables</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="tables-style-generator.html">
|
|
<span class="nav-link-text" data-i18n>Tables Style Generator</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="#" title="Forms" data-filter-tags>
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#edit"></use>
|
|
</svg>
|
|
<span class="nav-link-text" data-i18n>Forms</span>
|
|
</a>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="forms-inputs.html">
|
|
<span class="nav-link-text" data-i18n>Inputs</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="forms-checkbox-radio.html">
|
|
<span class="nav-link-text" data-i18n>Checkbox & Radio</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="forms-groups.html">
|
|
<span class="nav-link-text" data-i18n>Groups</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="forms-validation.html">
|
|
<span class="nav-link-text" data-i18n>Validation</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-title"><span>Data Visualization</span></li>
|
|
|
|
<li class="nav-item">
|
|
<a href="#" title="Smart Tables" data-filter-tags>
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#database"></use>
|
|
</svg>
|
|
<span class="nav-link-text" data-i18n>Smart Tables</span>
|
|
<span class="badge bg-primary-500 badge-end">1.2.7</span>
|
|
</a>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="smarttables-minimal.html">
|
|
<span class="nav-link-text" data-i18n>Minimal Settings</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="smarttables-responsive.html">
|
|
<span class="nav-link-text" data-i18n>Responsive Settings</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="smarttables-importexport-data.html">
|
|
<span class="nav-link-text" data-i18n>Import & Export Data</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="smarttables-json-source.html">
|
|
<span class="nav-link-text" data-i18n>JSON Data Source</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="smarttables-manage-records.html">
|
|
<span class="nav-link-text" data-i18n>Manage Records</span>
|
|
<span class="badge bg-warning text-dark badge-end">New</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="smarttables-fuzzy-matching.html">
|
|
<span class="nav-link-text" data-i18n>Fuzzy Matching</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="smarttables-server-side.html">
|
|
<span class="nav-link-text" data-i18n>Server-Side Mode</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="#" title="Apex Charts" data-filter-tags>
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#pie-chart"></use>
|
|
</svg>
|
|
<span class="nav-link-text" data-i18n>Apex Charts</span>
|
|
</a>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="apex-area.html">
|
|
<span class="nav-link-text" data-i18n>Area Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-bar.html">
|
|
<span class="nav-link-text" data-i18n>Bar Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-box-whisker.html">
|
|
<span class="nav-link-text" data-i18n>Box & Whisker Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-bubble.html">
|
|
<span class="nav-link-text" data-i18n>Bubble Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-candlestick.html">
|
|
<span class="nav-link-text" data-i18n>Candlestick Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-column.html">
|
|
<span class="nav-link-text" data-i18n>Column Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-funnel.html">
|
|
<span class="nav-link-text" data-i18n>Funnel Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-heatmap.html">
|
|
<span class="nav-link-text" data-i18n>Heatmap Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-line.html">
|
|
<span class="nav-link-text" data-i18n>Line Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-mixed-combo.html">
|
|
<span class="nav-link-text" data-i18n>Mixed/Combo Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-pie-donut.html">
|
|
<span class="nav-link-text" data-i18n>Pie/Donuts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-polar-area.html">
|
|
<span class="nav-link-text" data-i18n>Polar Area Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-radar.html">
|
|
<span class="nav-link-text" data-i18n>Radar Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-radialbars-circle.html">
|
|
<span class="nav-link-text" data-i18n>RadialBars/Circle Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-range-area.html">
|
|
<span class="nav-link-text" data-i18n>Range Area Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-scatter.html">
|
|
<span class="nav-link-text" data-i18n>Scatter Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-slope.html">
|
|
<span class="nav-link-text" data-i18n>Slope Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-sparkline.html">
|
|
<span class="nav-link-text" data-i18n>Sparklines</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-timeline.html">
|
|
<span class="nav-link-text" data-i18n>Timeline Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="apex-treemap.html">
|
|
<span class="nav-link-text" data-i18n>Treemap Charts</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="#" title="Data Bites" data-filter-tags>
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#grid"></use>
|
|
</svg>
|
|
<span class="nav-link-text" data-i18n>Data Bites</span>
|
|
</a>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="peity-charts.html">
|
|
<span class="nav-link-text" data-i18n>Peity Charts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="streamline.html">
|
|
<span class="nav-link-text" data-i18n>Streamline</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="easy-pie-chart.html">
|
|
<span class="nav-link-text" data-i18n>Easy Pie Chart</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="fullcalendar.html">
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#calendar"></use>
|
|
</svg>
|
|
<span class="nav-link-text">Full Calendar</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="no-results-msg pt-3 info-container">
|
|
<h6 class="mb-1"> No menu items found.</h6>
|
|
<p class="fs-sm">Try searching with different keywords.</p>
|
|
<div class="d-flex align-items-center gap-1 fs-xs fw-500 font-style-italic">
|
|
<kbd class="kbd-key">
|
|
<svg width="15" height="15" aria-label="Escape key" role="img">
|
|
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
|
|
<path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"></path>
|
|
</g>
|
|
</svg>
|
|
</kbd> to reset
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="nav-footer">
|
|
<svg class="sa-icon sa-thin">
|
|
<use href="icons/sprite.svg#wifi"></use>
|
|
</svg>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="backdrop" data-action="toggle-swap" data-toggleclass="app-mobile-menu-open"></div>
|
|
|
|
|
|
<!-- Sidebar Link Active Script -->
|
|
<script>
|
|
const sideNavMenu = document.getElementById("js-nav-menu");
|
|
const currentUrl = window.location.href.split(/[?#]/)[0]; // Match current URL
|
|
const allLinks = sideNavMenu.querySelectorAll("a");
|
|
const allCollapses = sideNavMenu.querySelectorAll("li [aria-expanded='true']"); // Ensure only one collapse is open at a time
|
|
|
|
// Prevent default toggle behavior for toggle links
|
|
sideNavMenu.querySelectorAll("li .has-ul").forEach((toggle) => { toggle.addEventListener("click", (e) => e.preventDefault()); });
|
|
|
|
allCollapses.forEach((collapse) => {
|
|
|
|
console.log(collapse)
|
|
collapse.addEventListener("show.bs.collapse", (event) => {
|
|
const currentCollapse = event.target;
|
|
|
|
// Get all ancestor collapses of the current item
|
|
const ancestors = [];
|
|
let el = currentCollapse.parentElement;
|
|
while (el && el !== sideNavMenu) {
|
|
if (el.classList.contains("collapse")) {
|
|
ancestors.push(el);
|
|
}
|
|
el = el.parentElement;
|
|
}
|
|
|
|
allCollapses.forEach((other) => {
|
|
if (other !== currentCollapse && !ancestors.includes(other)) {
|
|
new bootstrap.Collapse(other, { toggle: false }).hide();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
allLinks.forEach((link) => {
|
|
if (link.href === currentUrl) {
|
|
|
|
link.classList.add("active");
|
|
|
|
// Traverse up to activate all parents and show collapses
|
|
let currentElement = link.closest("li");
|
|
while (currentElement && currentElement !== sideNavMenu) {
|
|
currentElement.classList.add("active");
|
|
|
|
// Show parent collapses
|
|
const parentCollapse = currentElement.closest("[role='menu']");
|
|
if (parentCollapse) {
|
|
new bootstrap.Collapse(parentCollapse, { toggle: false }).show();
|
|
|
|
// Also mark the <li> that contains the collapse as active
|
|
const collapseParentLi = parentCollapse.closest("li");
|
|
if (collapseParentLi) {
|
|
collapseParentLi.classList.add("active");
|
|
}
|
|
|
|
currentElement = collapseParentLi;
|
|
} else {
|
|
currentElement = currentElement.parentElement;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<main class="app-body">
|
|
<div class="app-content">
|
|
|
|
<div class="content-wrapper">
|
|
|
|
|
|
<h1 class="subheader-title mb-2">Panels</h1>
|
|
|
|
|
|
|
|
<nav class="app-breadcrumb" aria-label="breadcrumb">
|
|
<ol class="breadcrumb ms-0 text-muted mb-0">
|
|
|
|
<li class="breadcrumb-item">Design</li>
|
|
|
|
|
|
<li class="breadcrumb-item">UI Components</li>
|
|
|
|
<li class="breadcrumb-item active" aria-current="page">Panels</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
|
|
<h6 class="mt-3 mb-4 fst-italic">Panels can be used in almost any situation, helping wrap everything in a slick & lightweight container.</h6>
|
|
|
|
|
|
<div class="main-content">
|
|
<div class="info-container">
|
|
<p>
|
|
Display data, tables, forms, or images effortlessly with our <strong>lightweight, clean, and highly customizable panels</strong>.
|
|
Expand to fullscreen, collapse, or close as needed. Equiped with many <strong>interactive features</strong>, a versatile design, these panels adapt to your workflow seamlessly.
|
|
<strong>Auto-save keeps your layout intact</strong>, while <strong>SortableJS</strong> lets you drag and organize panels seamlessly.
|
|
Need to print? Just switch to fullscreen for a perfect view. All panels can be reset to their default state by clicking the button below.
|
|
</p>
|
|
<p class="m-0">
|
|
<button type="button" onclick="resetPanelState();" class="btn btn-outline-secondary">↻ Reset Panel States</button>
|
|
</p>
|
|
</div>
|
|
<div class="row" id="sortable-grid">
|
|
<div class="col-sm-12 col-md-6 col-xl-6">
|
|
<!--Default panel-->
|
|
<div id="panel-1" class="panel panel-icon">
|
|
<div class="panel-hdr">
|
|
<h2>
|
|
Blank <span class="fw-light"><i>Panel</i></span>
|
|
</h2>
|
|
</div>
|
|
<div class="panel-container">
|
|
<div class="panel-content">
|
|
<div class="panel-tag">
|
|
All panels needs to have an unique ID in order to use the panel sorting funtions.
|
|
</div>
|
|
<p class="mb-0">Panel content goes here...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Collapsed panel-->
|
|
<div id="panel-2" class="panel panel-icon panel-collapsed">
|
|
<div class="panel-hdr">
|
|
<h2>
|
|
Collapsed <span class="fw-light"><i>Panel</i></span>
|
|
</h2>
|
|
<div class="panel-toolbar">
|
|
<button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
|
|
<svg class="sa-icon">
|
|
<use class="panel-collapsed-icon" href="img/sprite.svg#minus-circle"></use>
|
|
<use class="panel-expand-icon" href="img/sprite.svg#plus-circle"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-container">
|
|
<div class="panel-content">
|
|
<div class="panel-tag">
|
|
This panel is closed by default. To close a panel we add the class <code>.panel-collapsed</code> to <code>.panel</code>
|
|
</div>
|
|
<p class="mb-0">
|
|
Default panel text.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Collapsable panel-->
|
|
<div id="panel-3" class="panel panel-icon">
|
|
<div class="panel-hdr">
|
|
<h2>
|
|
Collapsable <span class="fw-light"><i>Panel</i></span>
|
|
</h2>
|
|
<div class="panel-toolbar">
|
|
<button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
|
|
<svg class="sa-icon">
|
|
<use class="panel-collapsed-icon" href="img/sprite.svg#minus-circle"></use>
|
|
<use class="panel-expand-icon" href="img/sprite.svg#plus-circle"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-container">
|
|
<div class="panel-content">
|
|
<div class="panel-tag">
|
|
Panel is closed by using the attribute <code>data-action="panel-collapse"</code>, and can be placed anywhere inside <code>.panel</code>
|
|
</div>
|
|
<p>
|
|
You can also place the collapse action inside the <code>.panel-content</code> as button or link
|
|
</p>
|
|
<button type="button" data-action="panel-collapse" class="btn btn-success me-2">collapse button</button>
|
|
<a href="javascript:void(0);" data-action="panel-collapse" class="text-success">collapse link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Fullscreen panel-->
|
|
<div id="panel-4" class="panel panel-icon">
|
|
<div class="panel-hdr">
|
|
<h2>
|
|
Fullscreen <span class="fw-light"><i>Panel</i></span>
|
|
</h2>
|
|
<div class="panel-toolbar">
|
|
<button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#stop-circle"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-container">
|
|
<div class="panel-content">
|
|
<div class="panel-tag">
|
|
Panel is closed by using the attribute <code>data-action="panel-fullscreen"</code>, and can be placed anywhere inside <code>.panel</code>
|
|
</div>
|
|
<p>
|
|
You can also place the collapse action inside the <code>.panel-content</code> as button or link
|
|
</p>
|
|
<button type="button" data-action="panel-fullscreen" class="btn btn-warning me-2">fullscreen button</button>
|
|
<a href="javascript:void(0);" data-action="panel-fullscreen" class="text-warning">fullscreen link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Close panel-->
|
|
<div id="panel-5" class="panel panel-icon">
|
|
<div class="panel-hdr">
|
|
<h2>
|
|
Close <span class="fw-light"><i>Panel</i></span>
|
|
</h2>
|
|
<div class="panel-toolbar">
|
|
<button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#x-circle"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-container">
|
|
<div class="panel-content">
|
|
<div class="panel-tag">
|
|
Panel is closed by using the attribute <code>data-action="panel-close"</code>, and can be placed anywhere inside <code>.panel</code>
|
|
</div>
|
|
<p>
|
|
You can also place the collapse action inside the <code>.panel-content</code> as button or link
|
|
</p>
|
|
<button type="button" data-action="panel-close" class="btn btn-danger me-2">close button</button>
|
|
<a href="javascript:void(0);" data-action="panel-close" class="text-danger">close link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Panel colors-->
|
|
<div id="panel-6" class="panel panel-icon">
|
|
<div class="panel-hdr">
|
|
<h2>
|
|
Panel <span class="fw-light"><i>Colors</i></span>
|
|
</h2>
|
|
<div class="panel-toolbar">
|
|
</div>
|
|
</div>
|
|
<div class="panel-container">
|
|
<div class="panel-content">
|
|
<div class="panel-tag">
|
|
You can mix and match any color styles, below is what we were found to be an interesting match.
|
|
</div>
|
|
<div class="d-flex flex-wrap justify-content-evenly gap-2 mb-3">
|
|
<button type="button" class="btn d-inline-block bg-primary-700 bg-success-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-primary-700 bg-success-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-primary-500 bg-info-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-primary-500 bg-info-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-primary-600 bg-primary-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-primary-600 bg-primary-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-info-600 bg-primray-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-info-600 bg-primray-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-info-600 bg-info-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-info-600 bg-info-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-info-700 bg-success-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-info-700 bg-success-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-success-900 bg-info-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-success-900 bg-info-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-success-700 bg-primary-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-success-700 bg-primary-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-success-600 bg-success-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-success-600 bg-success-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-danger-900 bg-info-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-danger-900 bg-info-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-success-500 bg-danger-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-success-500 bg-danger-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-success-300 bg-warning-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-success-300 bg-warning-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-success-200 bg-fusion-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-success-200 bg-fusion-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-primary-800 bg-danger-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-primary-800 bg-danger-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-primary-400 bg-warning-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-primary-400 bg-warning-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-primary-300 bg-fusion-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-primary-300 bg-fusion-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-info-500 bg-danger-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-info-500 bg-danger-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-info-800 bg-warning-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-info-800 bg-warning-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-info-200 bg-success-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-info-200 bg-success-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-danger-700 bg-primary-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-danger-700 bg-primary-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-danger-500 bg-info-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-danger-500 bg-info-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-danger-300 bg-success-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-danger-300 bg-success-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-warning-700 bg-primary-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-warning-700 bg-primary-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-warning-500 bg-info-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-warning-500 bg-info-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-warning-300 bg-danger-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-warning-300 bg-danger-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-faded bg-primary-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-faded bg-primary-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-faded bg-info-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-faded bg-info-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-faded bg-danger-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-faded bg-danger-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-fusion-400 bg-fusion-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-fusion-400 bg-fusion-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-faded width-3 height-3 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-faded"></button>
|
|
|
|
</div>
|
|
<div class="d-flex pt-3">
|
|
<button type="button" class="btn btn-outline-secondary" data-action="panel-reset">
|
|
Reset Styles
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Master button-->
|
|
<div id="panel-7" class="panel panel-icon">
|
|
<div class="panel-hdr">
|
|
<h2>
|
|
Master <span class="fw-light"><i>Button</i></span>
|
|
</h2>
|
|
|
|
<div class="panel-toolbar">
|
|
<button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
|
|
<svg class="sa-icon">
|
|
<use class="panel-collapsed-icon" href="img/sprite.svg#minus-circle"></use>
|
|
<use class="panel-expand-icon" href="img/sprite.svg#plus-circle"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<!-- master button needs to be the last child in .panel-hdr -->
|
|
<div class="panel-toolbar">
|
|
<button type="button" class="btn btn-toolbar-master px-0" data-bs-toggle="dropdown">
|
|
<i class="ellipsis-icon"></i>
|
|
</button>
|
|
<!-- included a wrapper here to make the dropdown menu animate and also respond to hitting edges -->
|
|
<div class="dropdown-menu-animated">
|
|
<div class="dropdown-menu dropdown-menu-end rounded-top rounded-bottom">
|
|
<button type="button" class="dropdown-item" data-action="panel-refresh" data-refresh-duration="2000" data-refresh-callback="updatePanelContent"><span data-i18n="drpdwn.refreshpanel">Refresh Content</span></button>
|
|
<button type="button" class="dropdown-item" data-action="panel-toggle" data-panel-toggle="panel-locked">
|
|
<span data-i18n="drpdwn.lockpanel" class="panel-locked-text">Unlock panel</span>
|
|
<span data-i18n="drpdwn.unlockpanel" class="panel-unlock-text">Lock panel</span>
|
|
</button>
|
|
<div class="dropdown-multilevel dropdown-multilevel-left">
|
|
<div class="dropdown-item d-flex justify-content-between align-items-center">
|
|
<span data-i18n="drpdwn.panelcolor">Panel Style</span>
|
|
<i class="sa sa-chevron-right"></i>
|
|
</div>
|
|
<div class="dropdown-menu">
|
|
<div class="d-flex flex-wrap align-items-center justify-content-center px-2 py-1 width-sm gap-1">
|
|
<button type="button" class="btn d-inline-block bg-primary-700 bg-success-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-primary-700 bg-success-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-primary-500 bg-info-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-primary-500 bg-info-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-primary-600 bg-primary-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-primary-600 bg-primary-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-info-600 bg-primray-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-info-600 bg-primray-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-info-600 bg-info-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-info-600 bg-info-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-info-700 bg-success-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-info-700 bg-success-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-success-900 bg-info-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-success-900 bg-info-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-success-700 bg-primary-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-success-700 bg-primary-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-success-600 bg-success-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-success-600 bg-success-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-danger-900 bg-info-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-danger-900 bg-info-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-fusion-400 bg-fusion-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-fusion-400 bg-fusion-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-faded width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-faded"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown-multilevel dropdown-multilevel-left">
|
|
<div class="dropdown-item d-flex justify-content-between align-items-center">
|
|
<span data-i18n="drpdwn.actions">Actions</span>
|
|
<i class="sa sa-chevron-right"></i>
|
|
</div>
|
|
<div class="dropdown-menu">
|
|
<button type="button" class="dropdown-item px-3" data-action="panel-collapse">
|
|
<div class="d-flex align-items-center">
|
|
<svg class="sa-icon sa-icon-success me-2">
|
|
<use class="panel-collapsed-icon" href="img/sprite.svg#minus-circle"></use>
|
|
<use class="panel-expand-icon" href="img/sprite.svg#plus-circle"></use>
|
|
</svg>
|
|
Toggle
|
|
</div>
|
|
</button>
|
|
<button type="button" class="dropdown-item px-3" data-action="panel-fullscreen">
|
|
<div class="d-flex align-items-center">
|
|
<svg class="sa-icon sa-icon-warning me-2">
|
|
<use href="icons/sprite.svg#stop-circle"></use>
|
|
</svg>
|
|
Fullscreen
|
|
</div>
|
|
</button>
|
|
<button type="button" class="dropdown-item px-3 text-danger" data-action="panel-close">
|
|
<div class="d-flex align-items-center">
|
|
<svg class="sa-icon sa-icon-danger me-2">
|
|
<use href="icons/sprite.svg#x-circle"></use>
|
|
</svg>
|
|
Close
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="dropdown-item"><span data-i18n="drpdwn.custombutton">Custom Button</span></button>
|
|
<button type="button" class="dropdown-item" data-action="panel-toggle" data-panel-toggle="panel-icon">
|
|
<span data-i18n="drpdwn.iconstyle">Icon Style</span>
|
|
</button>
|
|
<div class="dropdown-divider m-0"></div>
|
|
<button type="button" class="dropdown-item fw-500 text-danger" data-action="panel-reset">
|
|
<span data-i18n="drpdwn.resetpanel">Reset Panel</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel-container">
|
|
<div class="panel-content">
|
|
<div class="panel-tag">
|
|
The <code>.btn-toolbar-master</code> class enhances <code>.panel-toolbar</code> by integrating dropdown functionality and additional actions while optimizing space.
|
|
It supports icons, grouped actions, submenus, and input fields, making panels more interactive and organized.
|
|
</div>
|
|
<div class="d-flex">
|
|
<div class="dropdown-menu dropdown-menu-end rounded-top rounded-bottom show position-relative border" style="box-shadow:none; width: 10rem;">
|
|
<button type="button" class="dropdown-item" data-action="panel-refresh" data-refresh-duration="2000" data-refresh-callback="updatePanelContent"><span data-i18n="drpdwn.refreshpanel">Refresh Content</span></button>
|
|
<button type="button" class="dropdown-item" data-action="panel-toggle" data-panel-toggle="panel-locked">
|
|
<span data-i18n="drpdwn.lockpanel" class="panel-locked-text">Unlock panel</span>
|
|
<span data-i18n="drpdwn.unlockpanel" class="panel-unlock-text">Lock panel</span>
|
|
</button>
|
|
<div class="dropdown-multilevel dropdown-multilevel-right">
|
|
<div class="dropdown-item d-flex justify-content-between align-items-center">
|
|
<span data-i18n="drpdwn.panelcolor">Panel Style</span>
|
|
<i class="sa sa-chevron-right"></i>
|
|
</div>
|
|
<div class="dropdown-menu">
|
|
<div class="d-flex flex-wrap align-items-center justify-content-center px-2 py-1 width-sm gap-1">
|
|
<button type="button" class="btn d-inline-block bg-primary-700 bg-success-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-primary-700 bg-success-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-primary-500 bg-info-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-primary-500 bg-info-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-primary-600 bg-primary-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-primary-600 bg-primary-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-info-600 bg-primray-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-info-600 bg-primray-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-info-600 bg-info-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-info-600 bg-info-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-info-700 bg-success-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-info-700 bg-success-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-success-900 bg-info-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-success-900 bg-info-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-success-700 bg-primary-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-success-700 bg-primary-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-success-600 bg-success-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-success-600 bg-success-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-danger-900 bg-info-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-danger-900 bg-info-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-fusion-400 bg-fusion-gradient width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-fusion-400 bg-fusion-gradient"></button>
|
|
<button type="button" class="btn d-inline-block bg-faded width-2 height-2 p-0 rounded-0 hover-effect-dot" data-action="panel-style" data-panel-style="bg-faded"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown-multilevel dropdown-multilevel-right">
|
|
<div class="dropdown-item d-flex justify-content-between align-items-center">
|
|
<span data-i18n="drpdwn.actions">Actions</span>
|
|
<i class="sa sa-chevron-right"></i>
|
|
</div>
|
|
<div class="dropdown-menu">
|
|
<button type="button" class="dropdown-item px-3" data-action="panel-collapse">
|
|
<div class="d-flex align-items-center">
|
|
<svg class="sa-icon sa-icon-success me-2">
|
|
<use class="panel-collapsed-icon" href="img/sprite.svg#minus-circle"></use>
|
|
<use class="panel-expand-icon" href="img/sprite.svg#plus-circle"></use>
|
|
</svg>
|
|
Toggle
|
|
</div>
|
|
</button>
|
|
<button type="button" class="dropdown-item px-3" data-action="panel-fullscreen">
|
|
<div class="d-flex align-items-center">
|
|
<svg class="sa-icon sa-icon-warning me-2">
|
|
<use href="icons/sprite.svg#stop-circle"></use>
|
|
</svg>
|
|
Fullscreen
|
|
</div>
|
|
</button>
|
|
<button type="button" class="dropdown-item px-3 text-danger" data-action="panel-close">
|
|
<div class="d-flex align-items-center">
|
|
<svg class="sa-icon sa-icon-danger me-2">
|
|
<use href="icons/sprite.svg#x-circle"></use>
|
|
</svg>
|
|
Close
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="dropdown-item"><span data-i18n="drpdwn.custombutton">Custom Button</span></button>
|
|
<button type="button" class="dropdown-item" data-action="panel-toggle" data-panel-toggle="panel-icon">
|
|
<span data-i18n="drpdwn.iconstyle">Icon Style</span>
|
|
</button>
|
|
<div class="dropdown-divider m-0"></div>
|
|
<button type="button" class="dropdown-item fw-500 text-danger" data-action="panel-reset">
|
|
<span data-i18n="drpdwn.resetpanel">Reset Panel</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="js-refreshed-content badge bg-primary"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-xl-6">
|
|
<!--Panel label-->
|
|
<div id="panel-8" class="panel panel-icon">
|
|
<div class="panel-hdr">
|
|
<h2>
|
|
Label <span class="fw-light"><i>Panel</i></span>
|
|
<sup>
|
|
<span class="badge text-bg-warning ms-2">
|
|
sup
|
|
</span>
|
|
</sup>
|
|
</h2>
|
|
<div class="panel-toolbar">
|
|
<div class="panel-toolbar">
|
|
<span class="badge text-bg-primary fw-400">
|
|
Panel Badge
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel-container">
|
|
<div class="panel-content">
|
|
<div class="panel-tag">
|
|
You may place badge inside <code>.panel-toolbar</code>, <code>.panel-content</code> and <code>.panel-hdr</code>.
|
|
Check out the <a href="badges.html" target="_blank">badges page</a> to learn more about badges
|
|
</div>
|
|
</div>
|
|
<!-- panel footer with utility classes -->
|
|
<div class="panel-content py-2 rounded-bottom border-faded border-left-0 border-right-0 border-bottom-0 text-muted d-flex" style="gap: 5px;">
|
|
<span class="badge text-bg-danger">
|
|
Footer badge
|
|
</span>
|
|
<span class="badge rounded-pill text-bg-success">
|
|
Pill badge
|
|
</span>
|
|
<span class="badge rounded-pill rounded-circle text-bg-secondary ms-auto">
|
|
1
|
|
</span>
|
|
<span class="badge text-bg-warning px-1">
|
|
22
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Form elements-->
|
|
<div id="panel-9" class="panel panel-icon">
|
|
<div class="panel-hdr">
|
|
<h2>
|
|
Form <span class="fw-light"><i>elements</i></span>
|
|
</h2>
|
|
<div class="panel-toolbar">
|
|
<div class="form-check form-check-reverse form-switch mb-0">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
|
|
<label class="form-check-label" for="flexSwitchCheckDefault">Panel switch</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel-container">
|
|
<div class="panel-content">
|
|
<div class="panel-tag">
|
|
You can add form elements to <code>.panel-hdr</code> and any other parts of the <code>.panel</code>
|
|
</div>
|
|
</div>
|
|
<div class="panel-content py-2 rounded-bottom border-faded border-end-0 border-start-0 border-bottom-0 text-muted d-flex">
|
|
<div class="form-check mb-0">
|
|
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
|
|
<label class="form-check-label" for="flexCheckDefault">
|
|
Panel checkbox
|
|
<label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Form inputs-->
|
|
<div id="panel-10" class="panel panel-icon">
|
|
<div class="panel-hdr">
|
|
<h2>
|
|
Form <span class="fw-light"><i>Inputs</i></span>
|
|
</h2>
|
|
<div class="panel-toolbar gap-2">
|
|
<select class="form-select form-select-sm">
|
|
<option selected="">Select</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
<div class="d-flex position-relative ms-auto width-sm">
|
|
<svg class="sa-icon sa-icon-1x translate-middle position-absolute top-50 ms-3">
|
|
<use href="icons/sprite.svg#search"></use>
|
|
</svg>
|
|
<input type="text" class="form-control form-control-sm" placeholder="Search" style="padding-left:1.7rem">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel-container">
|
|
<div class="panel-content">
|
|
<div class="panel-tag">
|
|
You can add form inputs to <code>.panel-hdr</code> with moderation. Adding too many elements may break the design on mobile viewport
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Panel buttons -->
|
|
<div id="panel-11" class="panel panel-icon">
|
|
<div class="panel-hdr">
|
|
<h2>
|
|
Panel <span class="fw-light"><i>Buttons</i></span>
|
|
</h2>
|
|
<div class="panel-toolbar">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary">Small split button</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
<li>
|
|
<div class="dropdown-divider"></div>
|
|
</li>
|
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel-container">
|
|
<div class="panel-content">
|
|
<div class="panel-tag">
|
|
Add panel buttons to <code>.panel-hdr</code> and footer area. Keep in mind of your panel title size as distortion can occur with too many buttons overflowing.
|
|
</div>
|
|
</div>
|
|
<div class="panel-content py-2 rounded-bottom bg-faded border-faded border-start-0 border-end-0 border-bottom-0 text-muted d-flex">
|
|
<ul class="pagination pagination-sm justify-content-start mb-0">
|
|
<li class="page-item disabled"><a class="page-link">Prev</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="#">Next</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Panel tabs-->
|
|
<div id="panel-12" class="panel panel-icon">
|
|
<div class="panel-hdr border-bottom">
|
|
<h2>
|
|
Panel <span class="fw-light"><i>Tabs</i></span>
|
|
</h2>
|
|
<div class="panel-toolbar pr-3 align-self-end">
|
|
<ul id="demo_panel-tabs" class="nav nav-tabs border-bottom-0 js-demo-panel-tabs" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-bs-toggle="tab" href="#tab_default-1" role="tab">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#tab_default-2" role="tab">Set</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" data-bs-toggle="tab" href="#" role="tab">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="panel-container">
|
|
<div class="panel-content">
|
|
<div class="panel-tag">
|
|
<p>You can easily add <code>.nav-tabs</code> to <code>.panel-hdr</code>, consider adding dropdown panel button if you have a lot of panel tabs. Check out the Tabs & pills page for more details</p>
|
|
</div>
|
|
|
|
<div id="js_change_tab_direction" class="btn-group" role="group" aria-label="Basic radio toggle button group">
|
|
<input type="radio" class="btn-check" checked="" value="nav nav-tabs" name="btnradio" id="btnradio1" autocomplete="off" checked="checked" data-action="toggle-swap" data-toggleclass="nav-tabs-clean" data-target=".js-demo-panel-tabs">
|
|
<label class="btn btn-sm btn-outline-primary" for="btnradio1">Default</label>
|
|
|
|
<input type="radio" class="btn-check" value="nav nav-tabs justify-content-end" name="btnradio" id="btnradio2" autocomplete="off" data-action="toggle-swap" data-toggleclass="nav-tabs-clean" data-target=".js-demo-panel-tabs">
|
|
<label class="btn btn-sm btn-outline-primary" for="btnradio2">Clean</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Panel pills-->
|
|
<div id="panel-13" class="panel panel-icon panel-locked js-example-panel-lock">
|
|
<div class="panel-hdr">
|
|
<h2>
|
|
Panel <span class="fw-light"><i>Locked</i></span>
|
|
</h2>
|
|
</div>
|
|
<div class="panel-container">
|
|
<div class="panel-content">
|
|
|
|
<div class="panel-tag"> This panel is locked from drag and drop. We use the class <code>.panel-locked</code> to lock the panel. Go ahead and try to drag it, it won't budge!</div>
|
|
<button type="button" class="btn btn-outline-secondary me-2" data-action="panel-toggle" data-panel-toggle="panel-locked">
|
|
<span class="panel-locked-text"><i class="sa sa-lock me-1"></i> Unlock panel</span>
|
|
<span class="panel-unlock-text"><i class="sa sa-lock-open me-1"></i> Lock panel</span>
|
|
</button>
|
|
<a href="javascript:void(0);" data-action="panel-reset">Reset panel</a> will also unlock the panel.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Panel progress bars-->
|
|
<div id="panel-14" class="panel panel-icon">
|
|
<div class="panel-hdr">
|
|
<h2>
|
|
<svg class="sa-icon panel-icon">
|
|
<use href="icons/sprite.svg#package"></use>
|
|
</svg>
|
|
Insert <span class="fw-light"><i>Icon</i></span>
|
|
</h2>
|
|
<div class="panel-toolbar">
|
|
<div class="progress bg-warning-200 width-sm">
|
|
<div class="progress-bar bg-info-700 progress-bar-striped progress-bar-animated fw-700" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="panel-toolbar">
|
|
<button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
|
|
<svg class="sa-icon">
|
|
<use class="panel-collapsed-icon" href="img/sprite.svg#minus-circle"></use>
|
|
<use class="panel-expand-icon" href="img/sprite.svg#plus-circle"></use>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="btn btn-panel" data-action="panel-fullscreen"data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
|
|
<svg class="sa-icon">
|
|
|
|
<use href="icons/sprite.svg#stop-circle"></use>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#x-circle"></use>
|
|
</svg>
|
|
</button>
|
|
</div> -->
|
|
</div>
|
|
<div class="panel-container">
|
|
<div class="panel-content">
|
|
<div class="panel-tag">
|
|
Insert sleek icons—with over <a href="systemicons.html" target="_blank">2,500 options</a> to choose from—and dynamic progress bars to bring your panel to life, making data clearer, faster, and more engaging than ever!
|
|
You can also add stylish progress bars to enhance your design.
|
|
</div>
|
|
</div>
|
|
<div class="panel-content py-2 rounded-bottom border-faded border-start-0 border-end-0 border-bottom-0 text-muted">
|
|
<div class="progress progress-sm w-100 shadow-inset-2">
|
|
<div class="progress-bar bg-info-300 bg-info-gradient" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Icon panel-->
|
|
<div id="panel-15" class="panel">
|
|
<div class="panel-hdr">
|
|
<h2>
|
|
Classic <span class="fw-light"><i>Icons</i></span>
|
|
</h2>
|
|
<div class="panel-toolbar">
|
|
<button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,16" data-bs-original-title="Toggle">
|
|
<svg class="sa-icon">
|
|
<use class="panel-collapsed-icon" href="img/sprite.svg#minus-circle"></use>
|
|
<use class="panel-expand-icon" href="img/sprite.svg#plus-circle"></use>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,16" data-bs-original-title="Fullscreen">
|
|
<svg class="sa-icon">
|
|
|
|
<use href="icons/sprite.svg#stop-circle"></use>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,16" data-bs-original-title="Close">
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#x-circle"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-container">
|
|
<div class="panel-content">
|
|
<div class="panel-tag">
|
|
Looking for a less cluttered panel? Add <code>.panel-icon</code> class to your <code>.panel</code> to remove panel buttons and keep only the icons.
|
|
</div>
|
|
<button type="button" class="btn btn-outline-secondary" data-action="panel-toggle" data-panel-toggle="panel-icon">
|
|
Switch Panel Icon Style
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Refresh panel-->
|
|
<div id="panel-16" class="panel">
|
|
<div class="panel-hdr">
|
|
<h2>
|
|
Panel <span class="fw-light"><i>Refresh</i></span>
|
|
</h2>
|
|
<div class="panel-toolbar">
|
|
<button type="button" class="btn btn-xs btn-primary" data-action="panel-refresh" data-refresh-duration="2000" data-refresh-callback="loadRandomGraph">Refresh Panel</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-container">
|
|
<div class="panel-content">
|
|
<div class="panel-tag">
|
|
Refresh panels with a simple button. Use the <code>data-action="panel-refresh"</code> to activate the refresh feature. The <code>data-refresh-duration</code> attribute sets the refresh interval and the <code>data-refresh-callback="functionName"</code> attribute sets the callback function.
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-center">
|
|
<img id="randomGraph" src="#" alt="Random Colorful Bar Graph" style="width:350px; height: 200px;">
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-end">
|
|
<i class="js-last-refresh fs-xs text-muted"></i>
|
|
<button type="button" class="btn btn-outline-secondary" data-action="panel-refresh" data-refresh-duration="2000" data-refresh-callback="loadRandomGraph">Refresh Panel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<footer class="app-footer">
|
|
<div class="app-footer-content flex-grow-1">
|
|
SmartAdmin ©
|
|
|
|
<script>document.write(new Date().getFullYear());</script>.
|
|
|
|
<span class="hidden-mobile"> All rights reserved, </span>
|
|
|
|
<span class="fw-bold">Webora.</span>
|
|
|
|
<a href="#top" class="ms-auto hidden-mobile" aria-label="Back to top">
|
|
<svg class="sa-icon sa-thick sa-icon-primary">
|
|
<use href="icons/sprite.svg#arrow-up"></use>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
|
|
</main>
|
|
|
|
<aside class="app-drawer js-app-drawer">
|
|
<button type="button" class="btn btn-system position-absolute top-0 end-0 z-2 overflow-hidden p-3" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-app-drawer" aria-label="Close">
|
|
<svg class="sa-icon sa-icon-2x">
|
|
<use href="icons/sprite.svg#x"></use>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="custom-scrollbar h-100 p-0">
|
|
<div class="d-flex flex-grow-1 p-0 w-100 h-100">
|
|
<!-- left sidebar -->
|
|
<div class="d-flex flex-column flex-grow-1 flex-0 overflow-x-auto h-100">
|
|
|
|
<div class="flex-wrap align-items-center flex-grow-1 position-relative bg-gray-50">
|
|
<div class="position-absolute top-0 bottom-0 w-100 overflow-hidden d-flex flex-column">
|
|
|
|
<!-- chat container -->
|
|
<div class="w-100 p-4 pb-0 px-lg-3 bg-subtlelight-fade custom-scroll flex-grow-1 d-flex flex-column">
|
|
|
|
<div class="mb-g">
|
|
<h4 class="fw-600">Hi Sunny,</h4>
|
|
<span class="text-muted">how can I help you today?</span>
|
|
</div>
|
|
<div class="mt-auto ms-auto mb-2 btn btn-outline-default px-2 py-1 fw-500 fs-xs text-gradient">
|
|
Analyze my data
|
|
</div>
|
|
<p class="ms-auto mb-2 btn btn-outline-default px-2 py-1 fs-xs fw-500 text-gradient">
|
|
Create a new report
|
|
</p>
|
|
<p class="ms-auto mb-2 btn btn-outline-default px-2 py-1 fs-xs fw-500 text-gradient">
|
|
Summarize my Calendar
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<!-- chat input -->
|
|
<div class="bg-faded m-3 rounded height-auto">
|
|
<textarea rows="2" class="form-control px-2 rounded-top" placeholder="Ask me anything"></textarea>
|
|
<div class="d-flex align-items-center py-2 px-2 border border-top-0 rounded-bottom">
|
|
<div class="d-flex gap-1 flex-row align-items-center flex-wrap flex-shrink-0">
|
|
<button class="btn btn-icon fs-xl flex-shrink-0" aria-label="Attach Files or Photos" type="button" data-bs-toggle="tooltip" data-bs-original-title="Attach Files or Photos" data-bs-placement="top">
|
|
<svg class="sa-icon sa-bold sa-icon-subtlelight">
|
|
<use href="icons/sprite.svg#file"></use>
|
|
</svg>
|
|
</button>
|
|
<button class="btn btn-icon fs-xl width-1 flex-shrink-0" aria-label="Voice" type="button" data-bs-toggle="tooltip" data-bs-original-title="Voice" data-bs-placement="top">
|
|
<svg class="sa-icon sa-bold sa-icon-subtlelight">
|
|
<use href="icons/sprite.svg#mic"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<button class="btn btn-icon fs-xl width-1 flex-shrink-0 ms-auto" aria-label="Send" type="button" data-bs-toggle="tooltip" data-bs-original-title="Send" data-bs-placement="top">
|
|
<svg class="sa-icon sa-bold sa-icon-subtlelight sa-icon-2x">
|
|
<use href="icons/sprite.svg#arrow-up-circle"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="backdrop" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-app-drawer"></div>
|
|
|
|
<aside class="app-drawer js-drawer-settings">
|
|
<div class="app-drawer-header">
|
|
<div class="h4 mb-0">
|
|
App Builder
|
|
</div>
|
|
<button type="button" class="btn btn-system ms-auto" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-drawer-settings" aria-label="Close">
|
|
<svg class="sa-icon sa-icon-2x">
|
|
<use href="icons/sprite.svg#x"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="custom-scrollbar h-100">
|
|
|
|
<div class="info-container">
|
|
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
|
|
<button type="button" class="btn btn-sm btn-outline-secondary ms-1" data-action="playsound" data-soundpath="media/sound/" data-soundfile="settings-voice.mp3" aria-label="Play Settings Voice">
|
|
<svg class="sa-icon">
|
|
<use href="icons/sprite.svg#volume-2"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-spaced w-100 app-fob-showcase-text" data-prefix="Preview">
|
|
<div class="app-fob app-fob-lg app-fob-showcase">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mod-status primary-mod" data-prefix="Primary Settings">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="actionHeaderFixed" data-action="toggle" data-class="set-header-fixed">
|
|
<label class="form-check-label" for="actionHeaderFixed">
|
|
Header position fixed
|
|
</label>
|
|
</div>
|
|
<div class="form-check d-none d-lg-block d-xl-block d-xxl-block">
|
|
<input class="form-check-input" type="checkbox" id="actionNavFull" data-action="toggle" data-class="set-nav-full" data-codependence="set-nav-collapsed">
|
|
<label class="form-check-label" for="actionNavFull">
|
|
Navigation full height
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mod-status d-none d-lg-block d-xl-block d-xxl-block" data-prefix="Addon Settings">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="actionNavFixed" data-action="toggle" data-class="set-nav-fixed">
|
|
<label class="form-check-label" for="actionNavFixed">
|
|
Navigation position fixed
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="actionNavCollapsed" data-action="toggle" data-class="set-nav-collapsed" data-dependency="set-nav-full">
|
|
<label class="form-check-label" for="actionNavCollapsed">
|
|
Navigation collapsed
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mod-status" data-prefix="Misc Settings">
|
|
<div class="form-check d-none d-lg-block d-xl-block d-xxl-block">
|
|
<input class="form-check-input" type="checkbox" id="actionNavMinified" data-action="toggle" data-class="set-nav-minified">
|
|
<label class="form-check-label" for="actionNavMinified">
|
|
Navigation Minified
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="darkNavigation" data-action="toggle" data-class="set-nav-dark">
|
|
<label class="form-check-label" for="darkNavigation">
|
|
Dark Navigation
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mod-status" data-prefix="Aria Settings">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="actionColorblindMode" data-action="toggle" data-class="set-colorblind-mode">
|
|
<label class="form-check-label" for="actionColorblindMode">
|
|
Colorblind Mode
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="actionHighContrastMode" data-action="toggle" data-class="set-high-contrast-mode">
|
|
<label class="form-check-label" for="actionHighContrastMode">
|
|
High Contrast Mode
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mod-status app-themes" data-prefix="Themes">
|
|
<div class="clickable-boxes">
|
|
<!-- Default -->
|
|
<input type="radio" id="option0" name="options" data-action="theme-style" data-theme-style="" checked>
|
|
<label for="option0" data-prefix="Default" style="background: linear-gradient(135deg, #FF6A00, #F6A2D5, #4C91BF, #7A8B92, #AB7C9A);"></label>
|
|
|
|
<!-- Nebula -->
|
|
<input type="radio" id="option1" name="options" data-action="theme-style" data-theme-style="nebula">
|
|
<label for="option1" data-prefix="Nebula" style="background: linear-gradient(135deg, #2a7dbf, #2a9d8f, #766cbc, #f4a261, #e76f51);"></label>
|
|
|
|
<!-- Olive -->
|
|
<input type="radio" id="option2" name="options" data-action="theme-style" data-theme-style="olive">
|
|
<label for="option2" data-prefix="Olive" style="background: linear-gradient(135deg, #556B2F, #6B8E23, #8B9A3D, #A9B83E, #BDB76B);"></label>
|
|
|
|
<!-- Solar -->
|
|
<input type="radio" id="option3" name="options" data-action="theme-style" data-theme-style="solar">
|
|
<label for="option3" data-prefix="Solar" style="background: linear-gradient(135deg, #FF8C00, #FFD700, #FF4500, #F1C40F, #F39C12);"></label>
|
|
|
|
<!-- Lunar -->
|
|
<input type="radio" id="option4" name="options" data-action="theme-style" data-theme-style="lunar">
|
|
<label for="option4" data-prefix="Lunar" style="background: linear-gradient(135deg, #2C3E50, #34495E, #5F6368, #AAB7B8, #E6E6FA, #F1F3F4);"></label>
|
|
|
|
<!-- Night -->
|
|
<input type="radio" id="option5" name="options" data-action="theme-style" data-theme-style="night">
|
|
<label for="option5" data-prefix="Night" style="background: linear-gradient(135deg, #1e2a47, #2b3654, #363d6c, #4f5d79, #717b91, #b6c4d1);"></label>
|
|
|
|
<!-- Aurora -->
|
|
<input type="radio" id="option6" name="options" data-action="theme-style" data-theme-style="aurora">
|
|
<label for="option6" data-prefix="Aurora" style="background: linear-gradient(135deg, #337e7e, #527a4a, #63279b, #7FFF00, #87CEFA, #B0E0E6);"></label>
|
|
|
|
<!-- Earth -->
|
|
<input type="radio" id="option7" name="options" data-action="theme-style" data-theme-style="earth">
|
|
<label for="option7" data-prefix="Earth" style="background: linear-gradient(135deg, #2198f3, #3173a5, #3f6888, #618d48, #52bf11);"></label>
|
|
|
|
<!-- Flare -->
|
|
<input type="radio" id="option8" name="options" data-action="theme-style" data-theme-style="flare">
|
|
<label for="option8" data-prefix="Flare" style="background: linear-gradient(135deg, #FF4500, #FF6347, #F44336, #D32F2F, #B71C1C);"></label>
|
|
|
|
<!-- Storm -->
|
|
<input type="radio" id="option9" name="options" data-action="theme-style" data-theme-style="storm">
|
|
<label for="option9" data-prefix="Storm" style="background: linear-gradient(135deg, #2F4F4F, #3B5360, #4B6A6E, #5A7980, #A9A9A9, #FFD700);"></label>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex" style="gap:10px">
|
|
<button type="button" onclick="appDOM.resetStyle();" class="btn reset-button btn-outline-danger flex-grow-1"> <i class="sa sa-reload align-base me-1"></i> Factory Reset</button>
|
|
<button type="button" onclick="resetPanelState();" class="btn btn-outline-secondary flex-grow-1"><i class="sa sa-reload align-base me-1"></i> Reset Panel</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="backdrop" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-drawer-settings"></div>
|
|
|
|
</div>
|
|
|
|
<!-- Core scripts -->
|
|
<script src="plugins/bootstrap/bootstrap.bundle.min.js"></script>
|
|
<script src="scripts/core/smartNavigation.js"></script>
|
|
<script src="scripts/core/smartFilter.js"></script>
|
|
<script src="scripts/core/smartSlimscroll.js"></script>
|
|
|
|
<!-- Dependable scripts -->
|
|
<script src="plugins/sortablejs/Sortable.min.js"></script>
|
|
<script src="plugins/waves/waves.min.js"></script>
|
|
|
|
<!-- App.js -->
|
|
<script src="scripts/core/smartApp.js"></script>
|
|
|
|
<script src="scripts/pages/refresh-panel.js"></script>
|
|
|
|
</body>
|
|
|
|
|
|
<!-- Mirrored from getwebora.com/smartadmin/demo/ui-panels.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 30 Jun 2026 04:28:22 GMT -->
|
|
</html> |