Compare commits

...

3 Commits

Author SHA1 Message Date
8a1922f932 * Tue Mar 25 2025 Brian Read <brianr@koozali.org> 0.1.4-4.sme
- New version for AdminLTE integration with no class or ids
2025-03-25 17:40:59 +00:00
ceba60c9c2 Update README with specific Bugzilla links 2024-10-27 15:48:02 +00:00
Trevor Batley
7ac519fe65 fix-e-smith-pkg script (#12732) 2024-09-08 17:50:24 +10:00
2234 changed files with 64770 additions and 785527 deletions

View File

@ -6,7 +6,14 @@ SMEServer Koozali developed git repo for smeserver-manager-AdminLTE smecontribs
<br />https://wiki.koozali.org/
## Bugzilla
Show list of outstanding bugs: [here](https://bugs.koozali.org/buglist.cgi?component=smeserver-manager-AdminLTE&product=SME%20Contribs&query_format=advanced&limit=0&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&bug_status=CONFIRMED)
Show list of outstanding bugs:
[All](https://bugs.koozali.org/buglist.cgi?action=wrap&bug_status=UNCONFIRMED&bug_status=CONFIRMED&bug_status=NEEDINFO&bug_status=IN_PROGRESS&bug_status=RESOLVED&bug_status=VERIFIED&classification=Contribs&component=smeserver-manager-AdminLTE&list_id=105781&order=changeddate+DESC%2Ccomponent%2Cpriority%2Cbug_severity&product=SME+Contribs&query_format=advanced)
[Confirmed](https://bugs.koozali.org/buglist.cgi?action=wrap&bug_status=CONFIRMED&classification=Contribs&component=smeserver-manager-AdminLTE&list_id=105781&order=changeddate+DESC%2Ccomponent%2Cpriority%2Cbug_severity&product=SME+Contribs&query_format=advanced)
[Unconfirmed](https://bugs.koozali.org/buglist.cgi?action=wrap&bug_status=UNCONFIRMED&classification=Contribs&component=smeserver-manager-AdminLTE&list_id=105781&order=changeddate+DESC%2Ccomponent%2Cpriority%2Cbug_severity&product=SME+Contribs&query_format=advanced)
[Need Info](https://bugs.koozali.org/buglist.cgi?action=wrap&bug_status=NEEDINFO&classification=Contribs&component=smeserver-manager-AdminLTE&list_id=105781&order=changeddate+DESC%2Ccomponent%2Cpriority%2Cbug_severity&product=SME+Contribs&query_format=advanced)
[In Progress](https://bugs.koozali.org/buglist.cgi?action=wrap&bug_status=IN_PROGRESS&classification=Contribs&component=smeserver-manager-AdminLTE&list_id=105781&order=changeddate+DESC%2Ccomponent%2Cpriority%2Cbug_severity&product=SME+Contribs&query_format=advanced)
[Verified](https://bugs.koozali.org/buglist.cgi?action=wrap&bug_status=VERIFIED&classification=Contribs&component=smeserver-manager-AdminLTE&list_id=105781&order=changeddate+DESC%2Ccomponent%2Cpriority%2Cbug_severity&product=SME+Contribs&query_format=advanced)
[Resolved](https://bugs.koozali.org/buglist.cgi?action=wrap&bug_status=RESOLVED&classification=Contribs&component=smeserver-manager-AdminLTE&list_id=105781&order=changeddate+DESC%2Ccomponent%2Cpriority%2Cbug_severity&product=SME+Contribs&query_format=advanced)
## Description

View File

@ -1,5 +0,0 @@
modules_dir => 'lib/SrvMngr/Controller',
webapp => 'smanager',
mode => 'development',
debug => 0,
\}

View File

@ -1,147 +0,0 @@
.sme-border {
border:0.07em solid lightgrey;
padding:5px;
}
table.sme-border {
margin-top:2.5em;
}
.table-striped>tr:nth-child(odd){
background-color:#c2e8a8;
}
.action {
background-color:#bee6a2;
border-width:1px;
border-radius:11px;
color:black;
}
.label {
display:inline-block;
width:50%;
filter:opacity(70%);
background-color:#bee6a2;
margin-bottom:4px;
}
.data {
display:inline-block;
margin-left:2px;
font-weight:normal!important;
float: left;
width: 49%;
height:80%;
}
.input {
width:auto;
margin-bottom:5px;
max-width:100%;
}
.wrapper {
background:#ecf0f5;
}
h1 {
font-size:2.5em;
}
h2 {
font-size:1.5em;
}
.card-subtitle {
margin-top: 0.625rem;
float:left;
margin-bottom:0.625rem;
}
h3 {
font-size:1.5em;
}
h4,h5 {
font-size:1em;
color:inherit;
}
.success {
color:green;
}
.sme-warning {
color:amber;
}
.sme-error {
color:red;
}
.active {
background-color:#c2e8a8;
color:black;
}
.button {
display: block;
width: 115px;
height: 25px;
background: darkgreen;
padding: 0.1rem;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
line-height: auto;
}
a.button:hover {
color:lightgrey;
}
form p {
padding : 0;
margin : 0;
}
.login-box {
margin: 0 auto;
}
.review-panel td.label{
width:100%;
}
.review-panel p{
margin-bottom:0.3em;
}
.review-panel span.label {
margin-right:1%;
width:52%;
padding-left:0.75rem;
padding-top:0;
}
.review-panel td,th {
border-top:none;
}
.review-panel table {
width:109%
}
.review-panel.table th,td {
width:52.3%;
}
.card-header {
margin-bottom:0.625rem;
}
.module span.label {
margin-right:0.3em;
}
h2,h3,h4,h5 {
margin-top:1.5em;
}
.datetime-panel span.label {
float:none !important;
}
.card.sme-error {
margin-top:1rem;
}
.datetime-set-ntp {
margin-left:1.9rem;
}
.action {
margin-top:1rem;
}
.dark-mode .label {
color:black;
background-color:lightgrey;
}

View File

@ -1,60 +0,0 @@
div#swt_theme select {
width: 55%;
}
.main-header {
position: relative;
padding-right: 7.5px;
padding-left: 7.5px;
}
hr.sme-copyrightbar {
display: none;
}
.layout-boxed {
background: url("/smanager/dist/img/boxed-bg.jpg") repeat fixed;
}
#h2e11 img {
width: 100%;
}
#h2l1, #h2l2 {
margin-left: 2px;
}
#h2l2 {
height: 4px;
}
#swttheme {
padding-left: 0.5rem;
padding-top: 0.3rem;
}
#swtsize {
padding-left: 0.5rem;
padding-top: 0.5rem;
}
#darkmodeswt {
padding-left: 0.5rem;
padding-top: 0.5rem;
}
.sm2-footer {
width:100%;
}
.dark-mode container-fluid {
background-color:lightblue;
}
.dark-mode div .mb-2 {
background-color:#454d55;
}
.dark-mode .navbar-white {
background-image: linear-gradient(to right, lightgrey,#454d55);
}
.dark-mode .active {
background-color:lightgrey;
}
.dark-mode .button {
background:darkgrey;
}

View File

@ -1,98 +0,0 @@
.navbar-white {
background-image: linear-gradient(to right, #edf9e5,#bee6a2);
}
div.section {
color:blue;
}
div.mb-2 {
background-color:#98d36e;
}
.sidebar a.accent {
color: brown;
}
#h2e12 img {
width:100%;
}
#h2e11 img {
display:none;
}
#h2l2 {
height:34px;
}
p.menu-title {
margin-top:0;
margin-bottom:0;
}
.menu-title {
color:green!important;
font-weight:bold;
}
.section-title {
color:blue!important;
}
a#toguser.menu-title {
color:blue!important;
font-weight:normal;
}
.brand-image {
margin-bottom:1.75rem!important;
}
div.menu-cell a {
font-size:inherit!important;
margin-top:0.1em!important;
margin-bottom:0.1em!important;
line-height:1em!important;
padding-top:0.1rem;
padding-bottom:0.1rem;
margin-left:0.2rem;
padding-right:0.05rem;
width: calc(250px - 0.5rem * 3)!important;
}
.nav {
margin-bottom:0.7rem;
}
.brand-link {
margin-bottom:4rem;
}
td a:link, td a:visited {
color:blue;
}
td a:hover {
color:red;
}
.dark-mode .main-sidebar {
background-color:#343a40;
}
.dark-mode [class*="sidebar-light-"] .sidebar a {
color:inherit;
}
.dark-mode .login-page input[type="text"] {
background-color:#343a40;
}
.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:hover,
.dark-mode input:-webkit-autofill:focus,
.dark-mode textarea:-webkit-autofill,
.dark-mode textarea:-webkit-autofill:hover,
.dark-mode textarea:-webkit-autofill:focus,
.dark-mode select:-webkit-autofill,
.dark-mode select:-webkit-autofill:hover,
.dark-mode select:-webkit-autofill:focus {
-webkit-text-fill-color:#343a40;
}
.text-sm .nav-link {
padding: 0;
padding-left:10px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

View File

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

View File

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

View File

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 7.4 KiB

View File

Before

Width:  |  Height:  |  Size: 121 KiB

After

Width:  |  Height:  |  Size: 121 KiB

View File

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

View File

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 647 KiB

After

Width:  |  Height:  |  Size: 647 KiB

View File

Before

Width:  |  Height:  |  Size: 413 KiB

After

Width:  |  Height:  |  Size: 413 KiB

View File

Before

Width:  |  Height:  |  Size: 362 KiB

After

Width:  |  Height:  |  Size: 362 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

View File

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

View File

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View File

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

View File

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

View File

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

View File

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

View File

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,960 +0,0 @@
/*!
* AdminLTE v3.2.0
* Only Pages
* Author: Colorlib
* Website: AdminLTE.io <https://adminlte.io>
* License: Open source - MIT <https://opensource.org/licenses/MIT>
*/
.close, .mailbox-attachment-close {
float: right;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
}
.close:hover, .mailbox-attachment-close:hover {
color: #000;
text-decoration: none;
}
.close:not(:disabled):not(.disabled):hover, .mailbox-attachment-close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus, .mailbox-attachment-close:not(:disabled):not(.disabled):focus {
opacity: .75;
}
button.close, button.mailbox-attachment-close {
padding: 0;
background-color: transparent;
border: 0;
}
a.close.disabled, a.disabled.mailbox-attachment-close {
pointer-events: none;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes shake {
0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
transform: translate(2px, 1px) rotate(0deg);
}
10% {
-webkit-transform: translate(-1px, -2px) rotate(-2deg);
transform: translate(-1px, -2px) rotate(-2deg);
}
20% {
-webkit-transform: translate(-3px, 0) rotate(3deg);
transform: translate(-3px, 0) rotate(3deg);
}
30% {
-webkit-transform: translate(0, 2px) rotate(0deg);
transform: translate(0, 2px) rotate(0deg);
}
40% {
-webkit-transform: translate(1px, -1px) rotate(1deg);
transform: translate(1px, -1px) rotate(1deg);
}
50% {
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
-webkit-transform: translate(-3px, 1px) rotate(0deg);
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
-webkit-transform: translate(2px, 1px) rotate(-2deg);
transform: translate(2px, 1px) rotate(-2deg);
}
80% {
-webkit-transform: translate(-1px, -1px) rotate(4deg);
transform: translate(-1px, -1px) rotate(4deg);
}
90% {
-webkit-transform: translate(2px, 2px) rotate(0deg);
transform: translate(2px, 2px) rotate(0deg);
}
100% {
-webkit-transform: translate(1px, -2px) rotate(-1deg);
transform: translate(1px, -2px) rotate(-1deg);
}
}
@keyframes shake {
0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
transform: translate(2px, 1px) rotate(0deg);
}
10% {
-webkit-transform: translate(-1px, -2px) rotate(-2deg);
transform: translate(-1px, -2px) rotate(-2deg);
}
20% {
-webkit-transform: translate(-3px, 0) rotate(3deg);
transform: translate(-3px, 0) rotate(3deg);
}
30% {
-webkit-transform: translate(0, 2px) rotate(0deg);
transform: translate(0, 2px) rotate(0deg);
}
40% {
-webkit-transform: translate(1px, -1px) rotate(1deg);
transform: translate(1px, -1px) rotate(1deg);
}
50% {
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
-webkit-transform: translate(-3px, 1px) rotate(0deg);
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
-webkit-transform: translate(2px, 1px) rotate(-2deg);
transform: translate(2px, 1px) rotate(-2deg);
}
80% {
-webkit-transform: translate(-1px, -1px) rotate(4deg);
transform: translate(-1px, -1px) rotate(4deg);
}
90% {
-webkit-transform: translate(2px, 2px) rotate(0deg);
transform: translate(2px, 2px) rotate(0deg);
}
100% {
-webkit-transform: translate(1px, -2px) rotate(-1deg);
transform: translate(1px, -2px) rotate(-1deg);
}
}
@-webkit-keyframes wobble {
0% {
-webkit-transform: none;
transform: none;
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes wobble {
0% {
-webkit-transform: none;
transform: none;
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
100% {
-webkit-transform: none;
transform: none;
}
}
.mailbox-messages > .table {
margin: 0;
}
.mailbox-controls {
padding: 5px;
}
.mailbox-controls.with-border {
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.mailbox-read-info {
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
padding: 10px;
}
.mailbox-read-info h3 {
font-size: 20px;
margin: 0;
}
.mailbox-read-info h5 {
margin: 0;
padding: 5px 0 0;
}
.mailbox-read-time {
color: #999;
font-size: 13px;
}
.mailbox-read-message {
padding: 10px;
}
.mailbox-attachments {
padding-left: 0;
list-style: none;
}
.mailbox-attachments li {
border: 1px solid #eee;
float: left;
margin-bottom: 10px;
margin-right: 10px;
width: 200px;
}
.mailbox-attachment-name {
color: #666;
font-weight: 700;
}
.mailbox-attachment-icon,
.mailbox-attachment-info,
.mailbox-attachment-size {
display: block;
}
.mailbox-attachment-info {
background-color: #f8f9fa;
padding: 10px;
}
.mailbox-attachment-size {
color: #999;
font-size: 12px;
}
.mailbox-attachment-size > span {
display: inline-block;
padding-top: .75rem;
}
.mailbox-attachment-icon {
color: #666;
font-size: 65px;
max-height: 132.5px;
padding: 20px 10px;
text-align: center;
}
.mailbox-attachment-icon.has-img {
padding: 0;
}
.mailbox-attachment-icon.has-img > img {
height: auto;
max-width: 100%;
}
.lockscreen {
background-color: #e9ecef;
}
.lockscreen .lockscreen-name {
font-weight: 600;
text-align: center;
}
.lockscreen-logo {
font-size: 35px;
font-weight: 300;
margin-bottom: 25px;
text-align: center;
}
.lockscreen-logo a {
color: #495057;
}
.lockscreen-wrapper {
margin: 0 auto;
margin-top: 10%;
max-width: 400px;
}
.lockscreen-item {
border-radius: 4px;
background-color: #fff;
margin: 10px auto 30px;
padding: 0;
position: relative;
width: 290px;
}
.lockscreen-image {
border-radius: 50%;
background-color: #fff;
left: -10px;
padding: 5px;
position: absolute;
top: -25px;
z-index: 10;
}
.lockscreen-image > img {
border-radius: 50%;
height: 70px;
width: 70px;
}
.lockscreen-credentials {
margin-left: 70px;
}
.lockscreen-credentials .form-control {
border: 0;
}
.lockscreen-credentials .btn {
background-color: #fff;
border: 0;
padding: 0 10px;
}
.lockscreen-footer {
margin-top: 10px;
}
.dark-mode .lockscreen-item {
background-color: #343a40;
}
.dark-mode .lockscreen-logo a {
color: #fff;
}
.dark-mode .lockscreen-credentials .btn {
background-color: #343a40;
}
.dark-mode .lockscreen-image {
background-color: #6c757d;
}
.login-logo,
.register-logo {
font-size: 2.1rem;
font-weight: 300;
margin-bottom: .9rem;
text-align: center;
}
.login-logo a,
.register-logo a {
color: #495057;
}
.login-page,
.register-page {
-ms-flex-align: center;
align-items: center;
background-color: #e9ecef;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
height: 100vh;
-ms-flex-pack: center;
justify-content: center;
}
.login-box,
.register-box {
width: 360px;
}
@media (max-width: 576px) {
.login-box,
.register-box {
margin-top: .5rem;
width: 90%;
}
}
.login-box .card,
.register-box .card {
margin-bottom: 0;
}
.login-card-body,
.register-card-body {
background-color: #fff;
border-top: 0;
color: #666;
padding: 20px;
}
.login-card-body .input-group .form-control,
.register-card-body .input-group .form-control {
border-right: 0;
}
.login-card-body .input-group .form-control:focus,
.register-card-body .input-group .form-control:focus {
box-shadow: none;
}
.login-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
.login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
.register-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
.register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text {
border-color: #80bdff;
}
.login-card-body .input-group .form-control.is-valid:focus,
.register-card-body .input-group .form-control.is-valid:focus {
box-shadow: none;
}
.login-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
.login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text,
.register-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
.register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text {
border-color: #28a745;
}
.login-card-body .input-group .form-control.is-invalid:focus,
.register-card-body .input-group .form-control.is-invalid:focus {
box-shadow: none;
}
.login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text,
.register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text {
border-color: #dc3545;
}
.login-card-body .input-group .input-group-text,
.register-card-body .input-group .input-group-text {
background-color: transparent;
border-bottom-right-radius: 0.25rem;
border-left: 0;
border-top-right-radius: 0.25rem;
color: #777;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.login-box-msg,
.register-box-msg {
margin: 0;
padding: 0 20px 20px;
text-align: center;
}
.social-auth-links {
margin: 10px 0;
}
.dark-mode .login-card-body,
.dark-mode .register-card-body {
background-color: #343a40;
border-color: #6c757d;
color: #fff;
}
.dark-mode .login-logo a,
.dark-mode .register-logo a {
color: #fff;
}
.error-page {
margin: 20px auto 0;
width: 600px;
}
@media (max-width: 767.98px) {
.error-page {
width: 100%;
}
}
.error-page > .headline {
float: left;
font-size: 100px;
font-weight: 300;
}
@media (max-width: 767.98px) {
.error-page > .headline {
float: none;
text-align: center;
}
}
.error-page > .error-content {
display: block;
margin-left: 190px;
}
@media (max-width: 767.98px) {
.error-page > .error-content {
margin-left: 0;
}
}
.error-page > .error-content > h3 {
font-size: 25px;
font-weight: 300;
}
@media (max-width: 767.98px) {
.error-page > .error-content > h3 {
text-align: center;
}
}
.invoice {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.125);
position: relative;
}
.invoice-title {
margin-top: 0;
}
.dark-mode .invoice {
background-color: #343a40;
}
.profile-user-img {
border: 3px solid #adb5bd;
margin: 0 auto;
padding: 3px;
width: 100px;
}
.profile-username {
font-size: 21px;
margin-top: 5px;
}
.post {
border-bottom: 1px solid #adb5bd;
color: #666;
margin-bottom: 15px;
padding-bottom: 15px;
}
.post:last-of-type {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.post .user-block {
margin-bottom: 15px;
width: 100%;
}
.post .row {
width: 100%;
}
.dark-mode .post {
color: #fff;
border-color: #6c757d;
}
.product-image {
max-width: 100%;
height: auto;
width: 100%;
}
.product-image-thumbs {
-ms-flex-align: stretch;
align-items: stretch;
display: -ms-flexbox;
display: flex;
margin-top: 2rem;
}
.product-image-thumb {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
border-radius: 0.25rem;
background-color: #fff;
border: 1px solid #dee2e6;
display: -ms-flexbox;
display: flex;
margin-right: 1rem;
max-width: 7rem;
padding: 0.5rem;
}
.product-image-thumb img {
max-width: 100%;
height: auto;
-ms-flex-item-align: center;
align-self: center;
}
.product-image-thumb:hover {
opacity: .5;
}
.product-share a {
margin-right: .5rem;
}
.projects td {
vertical-align: middle;
}
.projects .list-inline {
margin-bottom: 0;
}
.projects img.table-avatar,
.projects .table-avatar img {
border-radius: 50%;
display: inline;
width: 2.5rem;
}
.projects .project-state {
text-align: center;
}
body.iframe-mode .main-sidebar {
display: none;
}
body.iframe-mode .content-wrapper {
margin-left: 0 !important;
margin-top: 0 !important;
padding-bottom: 0 !important;
}
body.iframe-mode .main-header,
body.iframe-mode .main-footer {
display: none;
}
body.iframe-mode-fullscreen {
overflow: hidden;
}
body.iframe-mode-fullscreen.layout-navbar-fixed .wrapper .content-wrapper {
margin-top: 0 !important;
}
.content-wrapper {
height: 100%;
}
.content-wrapper.iframe-mode .btn-iframe-close {
color: #dc3545;
position: absolute;
line-height: 1;
right: .125rem;
top: .125rem;
z-index: 10;
visibility: hidden;
}
.content-wrapper.iframe-mode .btn-iframe-close:hover, .content-wrapper.iframe-mode .btn-iframe-close:focus {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: visible;
}
@media (hover: none) and (pointer: coarse) {
.content-wrapper.iframe-mode .btn-iframe-close {
visibility: visible;
}
}
.content-wrapper.iframe-mode .navbar-nav {
overflow-y: auto;
width: 100%;
}
.content-wrapper.iframe-mode .navbar-nav .nav-link {
white-space: nowrap;
}
.content-wrapper.iframe-mode .navbar-nav .nav-item {
position: relative;
}
.content-wrapper.iframe-mode .navbar-nav .nav-item:hover .btn-iframe-close, .content-wrapper.iframe-mode .navbar-nav .nav-item:focus .btn-iframe-close {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: visible;
}
@media (hover: none) and (pointer: coarse) {
.content-wrapper.iframe-mode .navbar-nav .nav-item:hover .btn-iframe-close, .content-wrapper.iframe-mode .navbar-nav .nav-item:focus .btn-iframe-close {
visibility: visible;
}
}
.content-wrapper.iframe-mode .tab-content {
position: relative;
}
.content-wrapper.iframe-mode .tab-pane + .tab-empty {
display: none;
}
.content-wrapper.iframe-mode .tab-empty {
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
.content-wrapper.iframe-mode .tab-loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: none;
background-color: #f4f6f9;
}
.content-wrapper.iframe-mode .tab-loading > div {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
}
.content-wrapper.iframe-mode iframe {
border: 0;
width: 100%;
height: 100%;
margin-bottom: -8px;
}
.content-wrapper.iframe-mode iframe .content-wrapper {
padding-bottom: 0 !important;
}
body.iframe-mode-fullscreen .content-wrapper.iframe-mode {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin-left: 0 !important;
height: 100%;
min-height: 100%;
z-index: 1048;
}
.permanent-btn-iframe-close .btn-iframe-close {
-webkit-animation: none !important;
animation: none !important;
visibility: visible !important;
opacity: 1;
}
.dark-mode .content-wrapper.iframe-mode .tab-loading {
background-color: #343a40;
}
.content-wrapper.kanban {
height: 1px;
}
.content-wrapper.kanban .content {
height: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.content-wrapper.kanban .content .container,
.content-wrapper.kanban .content .container-fluid {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
display: -ms-flexbox;
display: flex;
-ms-flex-align: stretch;
align-items: stretch;
}
.content-wrapper.kanban .content-header + .content {
height: calc(100% - ((2 * 15px) + (1.8rem * 1.2)));
}
.content-wrapper.kanban .card .card-body {
padding: .5rem;
}
.content-wrapper.kanban .card.card-row {
width: 340px;
display: inline-block;
margin: 0 .5rem;
}
.content-wrapper.kanban .card.card-row:first-child {
margin-left: 0;
}
.content-wrapper.kanban .card.card-row .card-body {
height: calc(100% - (12px + (1.8rem * 1.2) + .5rem));
overflow-y: auto;
}
.content-wrapper.kanban .card.card-row .card:last-child {
margin-bottom: 0;
border-bottom-width: 1px;
}
.content-wrapper.kanban .card.card-row .card .card-header {
padding: .5rem .75rem;
}
.content-wrapper.kanban .card.card-row .card .card-body {
padding: .75rem;
}
.content-wrapper.kanban .btn-tool.btn-link {
text-decoration: underline;
padding-left: 0;
padding-right: 0;
}
/*# sourceMappingURL=adminlte.pages.css.map */

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,57 +0,0 @@
{
"root": true,
"parserOptions": {
"ecmaVersion": 5,
"sourceType": "script"
},
"env": {
"jquery": true
},
"extends": [
"plugin:unicorn/recommended",
"xo",
"xo/browser"
],
"rules": {
"capitalized-comments": "off",
"comma-dangle": [
"error",
"never"
],
"indent": [
"error",
2,
{
"MemberExpression": "off",
"SwitchCase": 1
}
],
"multiline-ternary": [
"error",
"always-multiline"
],
"no-var": "off",
"object-curly-spacing": [
"error",
"always"
],
"object-shorthand": "off",
"prefer-arrow-callback": "off",
"semi": [
"error",
"never"
],
"strict": "error",
"unicorn/no-array-for-each": "off",
"unicorn/no-for-loop": "off",
"unicorn/no-null": "off",
"unicorn/numeric-separators-style": "off",
"unicorn/prefer-dataset": "off",
"unicorn/prefer-includes": "off",
"unicorn/prefer-module": "off",
"unicorn/prefer-node-append": "off",
"unicorn/prefer-query-selector": "off",
"unicorn/prefer-spread": "off",
"unicorn/prevent-abbreviations": "off"
}
}

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,689 +0,0 @@
/**
* AdminLTE Demo Menu
* ------------------
* You should not use this file in production.
* This file is for demo purposes only.
*/
/* eslint-disable camelcase */
(function ($) {
'use strict'
setTimeout(function () {
if (window.___browserSync___ === undefined && Number(localStorage.getItem('AdminLTE:Demo:MessageShowed')) < Date.now()) {
localStorage.setItem('AdminLTE:Demo:MessageShowed', (Date.now()) + (15 * 60 * 1000))
// eslint-disable-next-line no-alert
alert('You load AdminLTE\'s "demo.js", \nthis file is only created for testing purposes!')
}
}, 1000)
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1)
}
function createSkinBlock(colors, callback, noneSelected) {
var $block = $('<select />', {
class: noneSelected ? 'custom-select mb-3 border-0' : 'custom-select mb-3 text-light border-0 ' + colors[0].replace(/accent-|navbar-/, 'bg-')
})
if (noneSelected) {
var $default = $('<option />', {
text: 'None Selected'
})
$block.append($default)
}
colors.forEach(function (color) {
var $color = $('<option />', {
class: (typeof color === 'object' ? color.join(' ') : color).replace('navbar-', 'bg-').replace('accent-', 'bg-'),
text: capitalizeFirstLetter((typeof color === 'object' ? color.join(' ') : color).replace(/navbar-|accent-|bg-/, '').replace('-', ' '))
})
$block.append($color)
})
if (callback) {
$block.on('change', callback)
}
return $block
}
var $sidebar = $('.control-sidebar')
var $container = $('<div />', {
class: 'p-3 control-sidebar-content'
})
$sidebar.append($container)
// Checkboxes
$container.append(
'<h5>Customize AdminLTE</h5><hr class="mb-2"/>'
)
var $dark_mode_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('dark-mode'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('dark-mode')
} else {
$('body').removeClass('dark-mode')
}
})
var $dark_mode_container = $('<div />', { class: 'mb-4' }).append($dark_mode_checkbox).append('<span>Dark Mode</span>')
$container.append($dark_mode_container)
$container.append('<h6>Header Options</h6>')
var $header_fixed_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('layout-navbar-fixed'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('layout-navbar-fixed')
} else {
$('body').removeClass('layout-navbar-fixed')
}
})
var $header_fixed_container = $('<div />', { class: 'mb-1' }).append($header_fixed_checkbox).append('<span>Fixed</span>')
$container.append($header_fixed_container)
var $dropdown_legacy_offset_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('.main-header').hasClass('dropdown-legacy'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.main-header').addClass('dropdown-legacy')
} else {
$('.main-header').removeClass('dropdown-legacy')
}
})
var $dropdown_legacy_offset_container = $('<div />', { class: 'mb-1' }).append($dropdown_legacy_offset_checkbox).append('<span>Dropdown Legacy Offset</span>')
$container.append($dropdown_legacy_offset_container)
var $no_border_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('.main-header').hasClass('border-bottom-0'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.main-header').addClass('border-bottom-0')
} else {
$('.main-header').removeClass('border-bottom-0')
}
})
var $no_border_container = $('<div />', { class: 'mb-4' }).append($no_border_checkbox).append('<span>No border</span>')
$container.append($no_border_container)
$container.append('<h6>Sidebar Options</h6>')
var $sidebar_collapsed_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('sidebar-collapse'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('sidebar-collapse')
$(window).trigger('resize')
} else {
$('body').removeClass('sidebar-collapse')
$(window).trigger('resize')
}
})
var $sidebar_collapsed_container = $('<div />', { class: 'mb-1' }).append($sidebar_collapsed_checkbox).append('<span>Collapsed</span>')
$container.append($sidebar_collapsed_container)
$(document).on('collapsed.lte.pushmenu', '[data-widget="pushmenu"]', function () {
$sidebar_collapsed_checkbox.prop('checked', true)
})
$(document).on('shown.lte.pushmenu', '[data-widget="pushmenu"]', function () {
$sidebar_collapsed_checkbox.prop('checked', false)
})
var $sidebar_fixed_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('layout-fixed'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('layout-fixed')
$(window).trigger('resize')
} else {
$('body').removeClass('layout-fixed')
$(window).trigger('resize')
}
})
var $sidebar_fixed_container = $('<div />', { class: 'mb-1' }).append($sidebar_fixed_checkbox).append('<span>Fixed</span>')
$container.append($sidebar_fixed_container)
var $sidebar_mini_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('sidebar-mini'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('sidebar-mini')
} else {
$('body').removeClass('sidebar-mini')
}
})
var $sidebar_mini_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_checkbox).append('<span>Sidebar Mini</span>')
$container.append($sidebar_mini_container)
var $sidebar_mini_md_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('sidebar-mini-md'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('sidebar-mini-md')
} else {
$('body').removeClass('sidebar-mini-md')
}
})
var $sidebar_mini_md_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_md_checkbox).append('<span>Sidebar Mini MD</span>')
$container.append($sidebar_mini_md_container)
var $sidebar_mini_xs_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('sidebar-mini-xs'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('sidebar-mini-xs')
} else {
$('body').removeClass('sidebar-mini-xs')
}
})
var $sidebar_mini_xs_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_xs_checkbox).append('<span>Sidebar Mini XS</span>')
$container.append($sidebar_mini_xs_container)
var $flat_sidebar_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('.nav-sidebar').hasClass('nav-flat'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.nav-sidebar').addClass('nav-flat')
} else {
$('.nav-sidebar').removeClass('nav-flat')
}
})
var $flat_sidebar_container = $('<div />', { class: 'mb-1' }).append($flat_sidebar_checkbox).append('<span>Nav Flat Style</span>')
$container.append($flat_sidebar_container)
var $legacy_sidebar_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('.nav-sidebar').hasClass('nav-legacy'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.nav-sidebar').addClass('nav-legacy')
} else {
$('.nav-sidebar').removeClass('nav-legacy')
}
})
var $legacy_sidebar_container = $('<div />', { class: 'mb-1' }).append($legacy_sidebar_checkbox).append('<span>Nav Legacy Style</span>')
$container.append($legacy_sidebar_container)
var $compact_sidebar_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('.nav-sidebar').hasClass('nav-compact'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.nav-sidebar').addClass('nav-compact')
} else {
$('.nav-sidebar').removeClass('nav-compact')
}
})
var $compact_sidebar_container = $('<div />', { class: 'mb-1' }).append($compact_sidebar_checkbox).append('<span>Nav Compact</span>')
$container.append($compact_sidebar_container)
var $child_indent_sidebar_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('.nav-sidebar').hasClass('nav-child-indent'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.nav-sidebar').addClass('nav-child-indent')
} else {
$('.nav-sidebar').removeClass('nav-child-indent')
}
})
var $child_indent_sidebar_container = $('<div />', { class: 'mb-1' }).append($child_indent_sidebar_checkbox).append('<span>Nav Child Indent</span>')
$container.append($child_indent_sidebar_container)
var $child_hide_sidebar_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('.nav-sidebar').hasClass('nav-collapse-hide-child'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.nav-sidebar').addClass('nav-collapse-hide-child')
} else {
$('.nav-sidebar').removeClass('nav-collapse-hide-child')
}
})
var $child_hide_sidebar_container = $('<div />', { class: 'mb-1' }).append($child_hide_sidebar_checkbox).append('<span>Nav Child Hide on Collapse</span>')
$container.append($child_hide_sidebar_container)
var $no_expand_sidebar_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('.main-sidebar').hasClass('sidebar-no-expand'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.main-sidebar').addClass('sidebar-no-expand')
} else {
$('.main-sidebar').removeClass('sidebar-no-expand')
}
})
var $no_expand_sidebar_container = $('<div />', { class: 'mb-4' }).append($no_expand_sidebar_checkbox).append('<span>Disable Hover/Focus Auto-Expand</span>')
$container.append($no_expand_sidebar_container)
$container.append('<h6>Footer Options</h6>')
var $footer_fixed_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('layout-footer-fixed'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('layout-footer-fixed')
} else {
$('body').removeClass('layout-footer-fixed')
}
})
var $footer_fixed_container = $('<div />', { class: 'mb-4' }).append($footer_fixed_checkbox).append('<span>Fixed</span>')
$container.append($footer_fixed_container)
$container.append('<h6>Small Text Options</h6>')
var $text_sm_body_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('text-sm'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('text-sm')
} else {
$('body').removeClass('text-sm')
}
})
var $text_sm_body_container = $('<div />', { class: 'mb-1' }).append($text_sm_body_checkbox).append('<span>Body</span>')
$container.append($text_sm_body_container)
var $text_sm_header_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('.main-header').hasClass('text-sm'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.main-header').addClass('text-sm')
} else {
$('.main-header').removeClass('text-sm')
}
})
var $text_sm_header_container = $('<div />', { class: 'mb-1' }).append($text_sm_header_checkbox).append('<span>Navbar</span>')
$container.append($text_sm_header_container)
var $text_sm_brand_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('.brand-link').hasClass('text-sm'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.brand-link').addClass('text-sm')
} else {
$('.brand-link').removeClass('text-sm')
}
})
var $text_sm_brand_container = $('<div />', { class: 'mb-1' }).append($text_sm_brand_checkbox).append('<span>Brand</span>')
$container.append($text_sm_brand_container)
var $text_sm_sidebar_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('.nav-sidebar').hasClass('text-sm'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.nav-sidebar').addClass('text-sm')
} else {
$('.nav-sidebar').removeClass('text-sm')
}
})
var $text_sm_sidebar_container = $('<div />', { class: 'mb-1' }).append($text_sm_sidebar_checkbox).append('<span>Sidebar Nav</span>')
$container.append($text_sm_sidebar_container)
var $text_sm_footer_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('.main-footer').hasClass('text-sm'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.main-footer').addClass('text-sm')
} else {
$('.main-footer').removeClass('text-sm')
}
})
var $text_sm_footer_container = $('<div />', { class: 'mb-4' }).append($text_sm_footer_checkbox).append('<span>Footer</span>')
$container.append($text_sm_footer_container)
// Color Arrays
var navbar_dark_skins = [
'navbar-primary',
'navbar-secondary',
'navbar-info',
'navbar-success',
'navbar-danger',
'navbar-indigo',
'navbar-purple',
'navbar-pink',
'navbar-navy',
'navbar-lightblue',
'navbar-teal',
'navbar-cyan',
'navbar-dark',
'navbar-gray-dark',
'navbar-gray'
]
var navbar_light_skins = [
'navbar-light',
'navbar-warning',
'navbar-white',
'navbar-orange'
]
var sidebar_colors = [
'bg-primary',
'bg-warning',
'bg-info',
'bg-danger',
'bg-success',
'bg-indigo',
'bg-lightblue',
'bg-navy',
'bg-purple',
'bg-fuchsia',
'bg-pink',
'bg-maroon',
'bg-orange',
'bg-lime',
'bg-teal',
'bg-olive'
]
var accent_colors = [
'accent-primary',
'accent-warning',
'accent-info',
'accent-danger',
'accent-success',
'accent-indigo',
'accent-lightblue',
'accent-navy',
'accent-purple',
'accent-fuchsia',
'accent-pink',
'accent-maroon',
'accent-orange',
'accent-lime',
'accent-teal',
'accent-olive'
]
var sidebar_skins = [
'sidebar-dark-primary',
'sidebar-dark-warning',
'sidebar-dark-info',
'sidebar-dark-danger',
'sidebar-dark-success',
'sidebar-dark-indigo',
'sidebar-dark-lightblue',
'sidebar-dark-navy',
'sidebar-dark-purple',
'sidebar-dark-fuchsia',
'sidebar-dark-pink',
'sidebar-dark-maroon',
'sidebar-dark-orange',
'sidebar-dark-lime',
'sidebar-dark-teal',
'sidebar-dark-olive',
'sidebar-light-primary',
'sidebar-light-warning',
'sidebar-light-info',
'sidebar-light-danger',
'sidebar-light-success',
'sidebar-light-indigo',
'sidebar-light-lightblue',
'sidebar-light-navy',
'sidebar-light-purple',
'sidebar-light-fuchsia',
'sidebar-light-pink',
'sidebar-light-maroon',
'sidebar-light-orange',
'sidebar-light-lime',
'sidebar-light-teal',
'sidebar-light-olive'
]
// Navbar Variants
$container.append('<h6>Navbar Variants</h6>')
var $navbar_variants = $('<div />', {
class: 'd-flex'
})
var navbar_all_colors = navbar_dark_skins.concat(navbar_light_skins)
var $navbar_variants_colors = createSkinBlock(navbar_all_colors, function () {
var color = $(this).find('option:selected').attr('class')
var $main_header = $('.main-header')
$main_header.removeClass('navbar-dark').removeClass('navbar-light')
navbar_all_colors.forEach(function (color) {
$main_header.removeClass(color)
})
$(this).removeClass().addClass('custom-select mb-3 text-light border-0 ')
if (navbar_dark_skins.indexOf(color) > -1) {
$main_header.addClass('navbar-dark')
$(this).addClass(color).addClass('text-light')
} else {
$main_header.addClass('navbar-light')
$(this).addClass(color)
}
$main_header.addClass(color)
})
var active_navbar_color = null
$('.main-header')[0].classList.forEach(function (className) {
if (navbar_all_colors.indexOf(className) > -1 && active_navbar_color === null) {
active_navbar_color = className.replace('navbar-', 'bg-')
}
})
$navbar_variants_colors.find('option.' + active_navbar_color).prop('selected', true)
$navbar_variants_colors.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_navbar_color)
$navbar_variants.append($navbar_variants_colors)
$container.append($navbar_variants)
// Sidebar Colors
$container.append('<h6>Accent Color Variants</h6>')
var $accent_variants = $('<div />', {
class: 'd-flex'
})
$container.append($accent_variants)
$container.append(createSkinBlock(accent_colors, function () {
var color = $(this).find('option:selected').attr('class')
var $body = $('body')
accent_colors.forEach(function (skin) {
$body.removeClass(skin)
})
var accent_color_class = color.replace('bg-', 'accent-')
$body.addClass(accent_color_class)
}, true))
var active_accent_color = null
$('body')[0].classList.forEach(function (className) {
if (accent_colors.indexOf(className) > -1 && active_accent_color === null) {
active_accent_color = className.replace('navbar-', 'bg-')
}
})
// $accent_variants.find('option.' + active_accent_color).prop('selected', true)
// $accent_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_accent_color)
$container.append('<h6>Dark Sidebar Variants</h6>')
var $sidebar_variants_dark = $('<div />', {
class: 'd-flex'
})
$container.append($sidebar_variants_dark)
var $sidebar_dark_variants = createSkinBlock(sidebar_colors, function () {
var color = $(this).find('option:selected').attr('class')
var sidebar_class = 'sidebar-dark-' + color.replace('bg-', '')
var $sidebar = $('.main-sidebar')
sidebar_skins.forEach(function (skin) {
$sidebar.removeClass(skin)
$sidebar_light_variants.removeClass(skin.replace('sidebar-dark-', 'bg-')).removeClass('text-light')
})
$(this).removeClass().addClass('custom-select mb-3 text-light border-0').addClass(color)
$sidebar_light_variants.find('option').prop('selected', false)
$sidebar.addClass(sidebar_class)
$('.sidebar').removeClass('os-theme-dark').addClass('os-theme-light')
}, true)
$container.append($sidebar_dark_variants)
var active_sidebar_dark_color = null
$('.main-sidebar')[0].classList.forEach(function (className) {
var color = className.replace('sidebar-dark-', 'bg-')
if (sidebar_colors.indexOf(color) > -1 && active_sidebar_dark_color === null) {
active_sidebar_dark_color = color
}
})
$sidebar_dark_variants.find('option.' + active_sidebar_dark_color).prop('selected', true)
$sidebar_dark_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_dark_color)
$container.append('<h6>Light Sidebar Variants</h6>')
var $sidebar_variants_light = $('<div />', {
class: 'd-flex'
})
$container.append($sidebar_variants_light)
var $sidebar_light_variants = createSkinBlock(sidebar_colors, function () {
var color = $(this).find('option:selected').attr('class')
var sidebar_class = 'sidebar-light-' + color.replace('bg-', '')
var $sidebar = $('.main-sidebar')
sidebar_skins.forEach(function (skin) {
$sidebar.removeClass(skin)
$sidebar_dark_variants.removeClass(skin.replace('sidebar-light-', 'bg-')).removeClass('text-light')
})
$(this).removeClass().addClass('custom-select mb-3 text-light border-0').addClass(color)
$sidebar_dark_variants.find('option').prop('selected', false)
$sidebar.addClass(sidebar_class)
$('.sidebar').removeClass('os-theme-light').addClass('os-theme-dark')
}, true)
$container.append($sidebar_light_variants)
var active_sidebar_light_color = null
$('.main-sidebar')[0].classList.forEach(function (className) {
var color = className.replace('sidebar-light-', 'bg-')
if (sidebar_colors.indexOf(color) > -1 && active_sidebar_light_color === null) {
active_sidebar_light_color = color
}
})
if (active_sidebar_light_color !== null) {
$sidebar_light_variants.find('option.' + active_sidebar_light_color).prop('selected', true)
$sidebar_light_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_light_color)
}
var logo_skins = navbar_all_colors
$container.append('<h6>Brand Logo Variants</h6>')
var $logo_variants = $('<div />', {
class: 'd-flex'
})
$container.append($logo_variants)
var $clear_btn = $('<a />', {
href: '#'
}).text('clear').on('click', function (e) {
e.preventDefault()
var $logo = $('.brand-link')
logo_skins.forEach(function (skin) {
$logo.removeClass(skin)
})
})
var $brand_variants = createSkinBlock(logo_skins, function () {
var color = $(this).find('option:selected').attr('class')
var $logo = $('.brand-link')
if (color === 'navbar-light' || color === 'navbar-white') {
$logo.addClass('text-black')
} else {
$logo.removeClass('text-black')
}
logo_skins.forEach(function (skin) {
$logo.removeClass(skin)
})
if (color) {
$(this).removeClass().addClass('custom-select mb-3 border-0').addClass(color).addClass(color !== 'navbar-light' && color !== 'navbar-white' ? 'text-light' : '')
} else {
$(this).removeClass().addClass('custom-select mb-3 border-0')
}
$logo.addClass(color)
}, true).append($clear_btn)
$container.append($brand_variants)
var active_brand_color = null
$('.brand-link')[0].classList.forEach(function (className) {
if (logo_skins.indexOf(className) > -1 && active_brand_color === null) {
active_brand_color = className.replace('navbar-', 'bg-')
}
})
if (active_brand_color) {
$brand_variants.find('option.' + active_brand_color).prop('selected', true)
$brand_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_brand_color)
}
})(jQuery)

View File

@ -1,267 +0,0 @@
/*
* Author: Abdullah A Almsaeed
* Date: 4 Jan 2014
* Description:
* This is a demo file used only for the main dashboard (index.html)
**/
/* global moment:false, Chart:false, Sparkline:false */
$(function () {
'use strict'
// Make the dashboard widgets sortable Using jquery UI
$('.connectedSortable').sortable({
placeholder: 'sort-highlight',
connectWith: '.connectedSortable',
handle: '.card-header, .nav-tabs',
forcePlaceholderSize: true,
zIndex: 999999
})
$('.connectedSortable .card-header').css('cursor', 'move')
// jQuery UI sortable for the todo list
$('.todo-list').sortable({
placeholder: 'sort-highlight',
handle: '.handle',
forcePlaceholderSize: true,
zIndex: 999999
})
// bootstrap WYSIHTML5 - text editor
$('.textarea').summernote()
$('.daterange').daterangepicker({
ranges: {
Today: [moment(), moment()],
Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
startDate: moment().subtract(29, 'days'),
endDate: moment()
}, function (start, end) {
// eslint-disable-next-line no-alert
alert('You chose: ' + start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
})
/* jQueryKnob */
$('.knob').knob()
// jvectormap data
var visitorsData = {
US: 398, // USA
SA: 400, // Saudi Arabia
CA: 1000, // Canada
DE: 500, // Germany
FR: 760, // France
CN: 300, // China
AU: 700, // Australia
BR: 600, // Brazil
IN: 800, // India
GB: 320, // Great Britain
RU: 3000 // Russia
}
// World map by jvectormap
$('#world-map').vectorMap({
map: 'usa_en',
backgroundColor: 'transparent',
regionStyle: {
initial: {
fill: 'rgba(255, 255, 255, 0.7)',
'fill-opacity': 1,
stroke: 'rgba(0,0,0,.2)',
'stroke-width': 1,
'stroke-opacity': 1
}
},
series: {
regions: [{
values: visitorsData,
scale: ['#ffffff', '#0154ad'],
normalizeFunction: 'polynomial'
}]
},
onRegionLabelShow: function (e, el, code) {
if (typeof visitorsData[code] !== 'undefined') {
el.html(el.html() + ': ' + visitorsData[code] + ' new visitors')
}
}
})
// Sparkline charts
var sparkline1 = new Sparkline($('#sparkline-1')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' })
var sparkline2 = new Sparkline($('#sparkline-2')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' })
var sparkline3 = new Sparkline($('#sparkline-3')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' })
sparkline1.draw([1000, 1200, 920, 927, 931, 1027, 819, 930, 1021])
sparkline2.draw([515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921])
sparkline3.draw([15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21])
// The Calender
$('#calendar').datetimepicker({
format: 'L',
inline: true
})
// SLIMSCROLL FOR CHAT WIDGET
$('#chat-box').overlayScrollbars({
height: '250px'
})
/* Chart.js Charts */
// Sales chart
var salesChartCanvas = document.getElementById('revenue-chart-canvas').getContext('2d')
// $('#revenue-chart').get(0).getContext('2d');
var salesChartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Digital Goods',
backgroundColor: 'rgba(60,141,188,0.9)',
borderColor: 'rgba(60,141,188,0.8)',
pointRadius: false,
pointColor: '#3b8bba',
pointStrokeColor: 'rgba(60,141,188,1)',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(60,141,188,1)',
data: [28, 48, 40, 19, 86, 27, 90]
},
{
label: 'Electronics',
backgroundColor: 'rgba(210, 214, 222, 1)',
borderColor: 'rgba(210, 214, 222, 1)',
pointRadius: false,
pointColor: 'rgba(210, 214, 222, 1)',
pointStrokeColor: '#c1c7d1',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(220,220,220,1)',
data: [65, 59, 80, 81, 56, 55, 40]
}
]
}
var salesChartOptions = {
maintainAspectRatio: false,
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
}
}]
}
}
// This will get the first returned node in the jQuery collection.
// eslint-disable-next-line no-unused-vars
var salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
type: 'line',
data: salesChartData,
options: salesChartOptions
})
// Donut Chart
var pieChartCanvas = $('#sales-chart-canvas').get(0).getContext('2d')
var pieData = {
labels: [
'Instore Sales',
'Download Sales',
'Mail-Order Sales'
],
datasets: [
{
data: [30, 12, 20],
backgroundColor: ['#f56954', '#00a65a', '#f39c12']
}
]
}
var pieOptions = {
legend: {
display: false
},
maintainAspectRatio: false,
responsive: true
}
// Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
// eslint-disable-next-line no-unused-vars
var pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]
type: 'doughnut',
data: pieData,
options: pieOptions
})
// Sales graph chart
var salesGraphChartCanvas = $('#line-chart').get(0).getContext('2d')
// $('#revenue-chart').get(0).getContext('2d');
var salesGraphChartData = {
labels: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4', '2013 Q1', '2013 Q2'],
datasets: [
{
label: 'Digital Goods',
fill: false,
borderWidth: 2,
lineTension: 0,
spanGaps: true,
borderColor: '#efefef',
pointRadius: 3,
pointHoverRadius: 7,
pointColor: '#efefef',
pointBackgroundColor: '#efefef',
data: [2666, 2778, 4912, 3767, 6810, 5670, 4820, 15073, 10687, 8432]
}
]
}
var salesGraphChartOptions = {
maintainAspectRatio: false,
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
fontColor: '#efefef'
},
gridLines: {
display: false,
color: '#efefef',
drawBorder: false
}
}],
yAxes: [{
ticks: {
stepSize: 5000,
fontColor: '#efefef'
},
gridLines: {
display: true,
color: '#efefef',
drawBorder: false
}
}]
}
}
// This will get the first returned node in the jQuery collection.
// eslint-disable-next-line no-unused-vars
var salesGraphChart = new Chart(salesGraphChartCanvas, { // lgtm[js/unused-local-variable]
type: 'line',
data: salesGraphChartData,
options: salesGraphChartOptions
})
})

View File

@ -1,270 +0,0 @@
/* global Chart:false */
$(function () {
'use strict'
/* ChartJS
* -------
* Here we will create a few charts using ChartJS
*/
//-----------------------
// - MONTHLY SALES CHART -
//-----------------------
// Get context with jQuery - using jQuery's .get() method.
var salesChartCanvas = $('#salesChart').get(0).getContext('2d')
var salesChartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Digital Goods',
backgroundColor: 'rgba(60,141,188,0.9)',
borderColor: 'rgba(60,141,188,0.8)',
pointRadius: false,
pointColor: '#3b8bba',
pointStrokeColor: 'rgba(60,141,188,1)',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(60,141,188,1)',
data: [28, 48, 40, 19, 86, 27, 90]
},
{
label: 'Electronics',
backgroundColor: 'rgba(210, 214, 222, 1)',
borderColor: 'rgba(210, 214, 222, 1)',
pointRadius: false,
pointColor: 'rgba(210, 214, 222, 1)',
pointStrokeColor: '#c1c7d1',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(220,220,220,1)',
data: [65, 59, 80, 81, 56, 55, 40]
}
]
}
var salesChartOptions = {
maintainAspectRatio: false,
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
}
}]
}
}
// This will get the first returned node in the jQuery collection.
// eslint-disable-next-line no-unused-vars
var salesChart = new Chart(salesChartCanvas, {
type: 'line',
data: salesChartData,
options: salesChartOptions
}
)
//---------------------------
// - END MONTHLY SALES CHART -
//---------------------------
//-------------
// - PIE CHART -
//-------------
// Get context with jQuery - using jQuery's .get() method.
var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
var pieData = {
labels: [
'Chrome',
'IE',
'FireFox',
'Safari',
'Opera',
'Navigator'
],
datasets: [
{
data: [700, 500, 400, 600, 300, 100],
backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
}
]
}
var pieOptions = {
legend: {
display: false
}
}
// Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
// eslint-disable-next-line no-unused-vars
var pieChart = new Chart(pieChartCanvas, {
type: 'doughnut',
data: pieData,
options: pieOptions
})
//-----------------
// - END PIE CHART -
//-----------------
/* jVector Maps
* ------------
* Create a world map with markers
*/
$('#world-map-markers').mapael({
map: {
name: 'usa_states',
zoom: {
enabled: true,
maxLevel: 10
}
}
})
// $('#world-map-markers').vectorMap({
// map : 'world_en',
// normalizeFunction: 'polynomial',
// hoverOpacity : 0.7,
// hoverColor : false,
// backgroundColor : 'transparent',
// regionStyle : {
// initial : {
// fill : 'rgba(210, 214, 222, 1)',
// 'fill-opacity' : 1,
// stroke : 'none',
// 'stroke-width' : 0,
// 'stroke-opacity': 1
// },
// hover : {
// 'fill-opacity': 0.7,
// cursor : 'pointer'
// },
// selected : {
// fill: 'yellow'
// },
// selectedHover: {}
// },
// markerStyle : {
// initial: {
// fill : '#00a65a',
// stroke: '#111'
// }
// },
// markers : [
// {
// latLng: [41.90, 12.45],
// name : 'Vatican City'
// },
// {
// latLng: [43.73, 7.41],
// name : 'Monaco'
// },
// {
// latLng: [-0.52, 166.93],
// name : 'Nauru'
// },
// {
// latLng: [-8.51, 179.21],
// name : 'Tuvalu'
// },
// {
// latLng: [43.93, 12.46],
// name : 'San Marino'
// },
// {
// latLng: [47.14, 9.52],
// name : 'Liechtenstein'
// },
// {
// latLng: [7.11, 171.06],
// name : 'Marshall Islands'
// },
// {
// latLng: [17.3, -62.73],
// name : 'Saint Kitts and Nevis'
// },
// {
// latLng: [3.2, 73.22],
// name : 'Maldives'
// },
// {
// latLng: [35.88, 14.5],
// name : 'Malta'
// },
// {
// latLng: [12.05, -61.75],
// name : 'Grenada'
// },
// {
// latLng: [13.16, -61.23],
// name : 'Saint Vincent and the Grenadines'
// },
// {
// latLng: [13.16, -59.55],
// name : 'Barbados'
// },
// {
// latLng: [17.11, -61.85],
// name : 'Antigua and Barbuda'
// },
// {
// latLng: [-4.61, 55.45],
// name : 'Seychelles'
// },
// {
// latLng: [7.35, 134.46],
// name : 'Palau'
// },
// {
// latLng: [42.5, 1.51],
// name : 'Andorra'
// },
// {
// latLng: [14.01, -60.98],
// name : 'Saint Lucia'
// },
// {
// latLng: [6.91, 158.18],
// name : 'Federated States of Micronesia'
// },
// {
// latLng: [1.3, 103.8],
// name : 'Singapore'
// },
// {
// latLng: [1.46, 173.03],
// name : 'Kiribati'
// },
// {
// latLng: [-21.13, -175.2],
// name : 'Tonga'
// },
// {
// latLng: [15.3, -61.38],
// name : 'Dominica'
// },
// {
// latLng: [-20.2, 57.5],
// name : 'Mauritius'
// },
// {
// latLng: [26.02, 50.55],
// name : 'Bahrain'
// },
// {
// latLng: [0.33, 6.73],
// name : 'São Tomé and Príncipe'
// }
// ]
// })
})
// lgtm [js/unused-local-variable]

View File

@ -1,147 +0,0 @@
/* global Chart:false */
$(function () {
'use strict'
var ticksStyle = {
fontColor: '#495057',
fontStyle: 'bold'
}
var mode = 'index'
var intersect = true
var $salesChart = $('#sales-chart')
// eslint-disable-next-line no-unused-vars
var salesChart = new Chart($salesChart, {
type: 'bar',
data: {
labels: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
datasets: [
{
backgroundColor: '#007bff',
borderColor: '#007bff',
data: [1000, 2000, 3000, 2500, 2700, 2500, 3000]
},
{
backgroundColor: '#ced4da',
borderColor: '#ced4da',
data: [700, 1700, 2700, 2000, 1800, 1500, 2000]
}
]
},
options: {
maintainAspectRatio: false,
tooltips: {
mode: mode,
intersect: intersect
},
hover: {
mode: mode,
intersect: intersect
},
legend: {
display: false
},
scales: {
yAxes: [{
// display: false,
gridLines: {
display: true,
lineWidth: '4px',
color: 'rgba(0, 0, 0, .2)',
zeroLineColor: 'transparent'
},
ticks: $.extend({
beginAtZero: true,
// Include a dollar sign in the ticks
callback: function (value) {
if (value >= 1000) {
value /= 1000
value += 'k'
}
return '$' + value
}
}, ticksStyle)
}],
xAxes: [{
display: true,
gridLines: {
display: false
},
ticks: ticksStyle
}]
}
}
})
var $visitorsChart = $('#visitors-chart')
// eslint-disable-next-line no-unused-vars
var visitorsChart = new Chart($visitorsChart, {
data: {
labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
datasets: [{
type: 'line',
data: [100, 120, 170, 167, 180, 177, 160],
backgroundColor: 'transparent',
borderColor: '#007bff',
pointBorderColor: '#007bff',
pointBackgroundColor: '#007bff',
fill: false
// pointHoverBackgroundColor: '#007bff',
// pointHoverBorderColor : '#007bff'
},
{
type: 'line',
data: [60, 80, 70, 67, 80, 77, 100],
backgroundColor: 'tansparent',
borderColor: '#ced4da',
pointBorderColor: '#ced4da',
pointBackgroundColor: '#ced4da',
fill: false
// pointHoverBackgroundColor: '#ced4da',
// pointHoverBorderColor : '#ced4da'
}]
},
options: {
maintainAspectRatio: false,
tooltips: {
mode: mode,
intersect: intersect
},
hover: {
mode: mode,
intersect: intersect
},
legend: {
display: false
},
scales: {
yAxes: [{
// display: false,
gridLines: {
display: true,
lineWidth: '4px',
color: 'rgba(0, 0, 0, .2)',
zeroLineColor: 'transparent'
},
ticks: $.extend({
beginAtZero: true,
suggestedMax: 200
}, ticksStyle)
}],
xAxes: [{
display: true,
gridLines: {
display: false
},
ticks: ticksStyle
}]
}
}
})
})
// lgtm [js/unused-local-variable]

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,818 @@
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AdminLTE 4 | Icons</title>
<!--begin::Primary Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="AdminLTE 4 | Icons" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
/>
<meta
name="keywords"
content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="../../../dist/css/adminlte.css" />
<!--end::Required Plugin(AdminLTE)-->
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<!--begin::App Wrapper-->
<div class="app-wrapper">
<!--begin::Header-->
<nav class="app-header navbar navbar-expand bg-body">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Start Navbar Links-->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
<i class="bi bi-list"></i>
</a>
</li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
</ul>
<!--end::Start Navbar Links-->
<!--begin::End Navbar Links-->
<ul class="navbar-nav ms-auto">
<!--begin::Navbar Search-->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="bi bi-search"></i>
</a>
</li>
<!--end::Navbar Search-->
<!--begin::Messages Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-chat-text"></i>
<span class="navbar-badge badge text-bg-danger">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user1-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end fs-7 text-danger"
><i class="bi bi-star-fill"></i
></span>
</h3>
<p class="fs-7">Call me whenever you can...</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user8-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end fs-7 text-secondary">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">I got your message bro</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user3-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end fs-7 text-warning">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">The subject goes here</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!--end::Messages Dropdown Menu-->
<!--begin::Notifications Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-bell-fill"></i>
<span class="navbar-badge badge text-bg-warning">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-envelope me-2"></i> 4 new messages
<span class="float-end text-secondary fs-7">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-people-fill me-2"></i> 8 friend requests
<span class="float-end text-secondary fs-7">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
<span class="float-end text-secondary fs-7">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer"> See All Notifications </a>
</div>
</li>
<!--end::Notifications Dropdown Menu-->
<!--begin::Fullscreen Toggle-->
<li class="nav-item">
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
</a>
</li>
<!--end::Fullscreen Toggle-->
<!--begin::User Menu Dropdown-->
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="user-image rounded-circle shadow"
alt="User Image"
/>
<span class="d-none d-md-inline">Alexander Pierce</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<!--begin::User Image-->
<li class="user-header text-bg-primary">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="rounded-circle shadow"
alt="User Image"
/>
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2023</small>
</p>
</li>
<!--end::User Image-->
<!--begin::Menu Body-->
<li class="user-body">
<!--begin::Row-->
<div class="row">
<div class="col-4 text-center"><a href="#">Followers</a></div>
<div class="col-4 text-center"><a href="#">Sales</a></div>
<div class="col-4 text-center"><a href="#">Friends</a></div>
</div>
<!--end::Row-->
</li>
<!--end::Menu Body-->
<!--begin::Menu Footer-->
<li class="user-footer">
<a href="#" class="btn btn-default btn-flat">Profile</a>
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
</li>
<!--end::Menu Footer-->
</ul>
</li>
<!--end::User Menu Dropdown-->
</ul>
<!--end::End Navbar Links-->
</div>
<!--end::Container-->
</nav>
<!--end::Header-->
<!--begin::Sidebar-->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<!--begin::Sidebar Brand-->
<div class="sidebar-brand">
<!--begin::Brand Link-->
<a href="../index.html" class="brand-link">
<!--begin::Brand Image-->
<img
src="../../../dist/assets/img/AdminLTELogo.png"
alt="AdminLTE Logo"
class="brand-image opacity-75 shadow"
/>
<!--end::Brand Image-->
<!--begin::Brand Text-->
<span class="brand-text fw-light">AdminLTE 4</span>
<!--end::Brand Text-->
</a>
<!--end::Brand Link-->
</div>
<!--end::Sidebar Brand-->
<!--begin::Sidebar Wrapper-->
<div class="sidebar-wrapper">
<nav class="mt-2">
<!--begin::Sidebar Menu-->
<ul
class="nav sidebar-menu flex-column"
data-lte-toggle="treeview"
role="menu"
data-accordion="false"
>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-speedometer"></i>
<p>
Dashboard
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../index.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="../index2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="../index3.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../generate/theme.html" class="nav-link">
<i class="nav-icon bi bi-palette"></i>
<p>Theme Generate</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-seam-fill"></i>
<p>
Widgets
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../widgets/small-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Small Box</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets/info-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>info Box</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets/cards.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Cards</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-clipboard-fill"></i>
<p>
Layout Options
<span class="nav-badge badge text-bg-secondary me-3">6</span>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../layout/unfixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Default Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/fixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Fixed Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/layout-custom-area.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout <small>+ Custom Area </small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/sidebar-mini.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/collapsed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Collapsed</small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/logo-switch.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Logo Switch</small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/layout-rtl.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout RTL</p>
</a>
</li>
</ul>
</li>
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon bi bi-tree-fill"></i>
<p>
UI Elements
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../UI/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/icons.html" class="nav-link active">
<i class="nav-icon bi bi-circle"></i>
<p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/timeline.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Timeline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-pencil-square"></i>
<p>
Forms
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../forms/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General Elements</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-table"></i>
<p>
Tables
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../tables/simple.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Simple Tables</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Auth
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../examples/lockscreen.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Lockscreen</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">DOCUMENTATIONS</li>
<li class="nav-item">
<a href="../docs/introduction.html" class="nav-link">
<i class="nav-icon bi bi-download"></i>
<p>Installation</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/layout.html" class="nav-link">
<i class="nav-icon bi bi-grip-horizontal"></i>
<p>Layout</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/color-mode.html" class="nav-link">
<i class="nav-icon bi bi-star-half"></i>
<p>Color Mode</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-ui-checks-grid"></i>
<p>
Components
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../docs/components/main-header.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Header</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/components/main-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Sidebar</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-filetype-js"></i>
<p>
Javascript
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../docs/javascript/treeview.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Treeview</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../docs/browser-support.html" class="nav-link">
<i class="nav-icon bi bi-browser-edge"></i>
<p>Browser Support</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/how-to-contribute.html" class="nav-link">
<i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
<p>How To Contribute</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/faq.html" class="nav-link">
<i class="nav-icon bi bi-question-circle-fill"></i>
<p>FAQ</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/license.html" class="nav-link">
<i class="nav-icon bi bi-patch-check-fill"></i>
<p>License</p>
</a>
</li>
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>
Level 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>
Level 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-info"></i>
<p>Informational</p>
</a>
</li>
</ul>
<!--end::Sidebar Menu-->
</nav>
</div>
<!--end::Sidebar Wrapper-->
</aside>
<!--end::Sidebar-->
<!--begin::App Main-->
<main class="app-main">
<!--begin::App Content Header-->
<div class="app-content-header">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Row-->
<div class="row">
<div class="col-sm-6"><h3 class="mb-0">Icons</h3></div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Icons</li>
</ol>
</div>
</div>
<!--end::Row-->
</div>
<!--end::Container-->
</div>
<!--end::App Content Header-->
<!--begin::App Content-->
<div class="app-content">
<!--begin::Container-->
<div class="container-fluid">
<!-- Timelime example -->
<div class="row">
<div class="col-12">
<!-- The icons -->
<div class="col-12">
<div class="card card-primary card-outline">
<div class="card-header"><h3 class="card-title">Icons</h3></div>
<div class="card-body">
<p>You can use any font library you like with AdminLTE 4.</p>
<strong>Recommendations</strong>
<ul class="mt-1">
<li><a href="https://fontawesome.com/" target="_blank">Font Awesome</a></li>
<li>
<a href="https://useiconic.com/open/" target="_blank">Iconic Icons</a>
</li>
<li><a href="https://ionicons.com/" target="_blank">Ion Icons</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!--end::Container-->
</div>
<!--end::App Content-->
</main>
<!--end::App Main-->
<!--begin::Footer-->
<footer class="app-footer">
<!--begin::To the end-->
<div class="float-end d-none d-sm-inline">Anything you want</div>
<!--end::To the end-->
<!--begin::Copyright-->
<strong>
Copyright &copy; 2014-2024&nbsp;
<a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
</strong>
All rights reserved.
<!--end::Copyright-->
</footer>
<!--end::Footer-->
</div>
<!--end::App Wrapper-->
<!--begin::Script-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="../../../dist/js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
<!--end::OverlayScrollbars Configure-->
<!--end::Script-->
</body>
<!--end::Body-->
</html>

View File

@ -0,0 +1,896 @@
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AdminLTE 4 | Timeline Elements</title>
<!--begin::Primary Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="AdminLTE 4 | Timeline Elements" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
/>
<meta
name="keywords"
content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="../../../dist/css/adminlte.css" />
<!--end::Required Plugin(AdminLTE)-->
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<!--begin::App Wrapper-->
<div class="app-wrapper">
<!--begin::Header-->
<nav class="app-header navbar navbar-expand bg-body">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Start Navbar Links-->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
<i class="bi bi-list"></i>
</a>
</li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
</ul>
<!--end::Start Navbar Links-->
<!--begin::End Navbar Links-->
<ul class="navbar-nav ms-auto">
<!--begin::Navbar Search-->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="bi bi-search"></i>
</a>
</li>
<!--end::Navbar Search-->
<!--begin::Messages Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-chat-text"></i>
<span class="navbar-badge badge text-bg-danger">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user1-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end fs-7 text-danger"
><i class="bi bi-star-fill"></i
></span>
</h3>
<p class="fs-7">Call me whenever you can...</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user8-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end fs-7 text-secondary">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">I got your message bro</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user3-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end fs-7 text-warning">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">The subject goes here</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!--end::Messages Dropdown Menu-->
<!--begin::Notifications Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-bell-fill"></i>
<span class="navbar-badge badge text-bg-warning">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-envelope me-2"></i> 4 new messages
<span class="float-end text-secondary fs-7">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-people-fill me-2"></i> 8 friend requests
<span class="float-end text-secondary fs-7">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
<span class="float-end text-secondary fs-7">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer"> See All Notifications </a>
</div>
</li>
<!--end::Notifications Dropdown Menu-->
<!--begin::Fullscreen Toggle-->
<li class="nav-item">
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
</a>
</li>
<!--end::Fullscreen Toggle-->
<!--begin::User Menu Dropdown-->
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="user-image rounded-circle shadow"
alt="User Image"
/>
<span class="d-none d-md-inline">Alexander Pierce</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<!--begin::User Image-->
<li class="user-header text-bg-primary">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="rounded-circle shadow"
alt="User Image"
/>
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2023</small>
</p>
</li>
<!--end::User Image-->
<!--begin::Menu Body-->
<li class="user-body">
<!--begin::Row-->
<div class="row">
<div class="col-4 text-center"><a href="#">Followers</a></div>
<div class="col-4 text-center"><a href="#">Sales</a></div>
<div class="col-4 text-center"><a href="#">Friends</a></div>
</div>
<!--end::Row-->
</li>
<!--end::Menu Body-->
<!--begin::Menu Footer-->
<li class="user-footer">
<a href="#" class="btn btn-default btn-flat">Profile</a>
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
</li>
<!--end::Menu Footer-->
</ul>
</li>
<!--end::User Menu Dropdown-->
</ul>
<!--end::End Navbar Links-->
</div>
<!--end::Container-->
</nav>
<!--end::Header-->
<!--begin::Sidebar-->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<!--begin::Sidebar Brand-->
<div class="sidebar-brand">
<!--begin::Brand Link-->
<a href="../index.html" class="brand-link">
<!--begin::Brand Image-->
<img
src="../../../dist/assets/img/AdminLTELogo.png"
alt="AdminLTE Logo"
class="brand-image opacity-75 shadow"
/>
<!--end::Brand Image-->
<!--begin::Brand Text-->
<span class="brand-text fw-light">AdminLTE 4</span>
<!--end::Brand Text-->
</a>
<!--end::Brand Link-->
</div>
<!--end::Sidebar Brand-->
<!--begin::Sidebar Wrapper-->
<div class="sidebar-wrapper">
<nav class="mt-2">
<!--begin::Sidebar Menu-->
<ul
class="nav sidebar-menu flex-column"
data-lte-toggle="treeview"
role="menu"
data-accordion="false"
>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-speedometer"></i>
<p>
Dashboard
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../index.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="../index2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="../index3.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../generate/theme.html" class="nav-link">
<i class="nav-icon bi bi-palette"></i>
<p>Theme Generate</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-seam-fill"></i>
<p>
Widgets
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../widgets/small-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Small Box</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets/info-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>info Box</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets/cards.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Cards</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-clipboard-fill"></i>
<p>
Layout Options
<span class="nav-badge badge text-bg-secondary me-3">6</span>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../layout/unfixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Default Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/fixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Fixed Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/layout-custom-area.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout <small>+ Custom Area </small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/sidebar-mini.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/collapsed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Collapsed</small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/logo-switch.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Logo Switch</small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/layout-rtl.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout RTL</p>
</a>
</li>
</ul>
</li>
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon bi bi-tree-fill"></i>
<p>
UI Elements
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../UI/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/icons.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/timeline.html" class="nav-link active">
<i class="nav-icon bi bi-circle"></i>
<p>Timeline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-pencil-square"></i>
<p>
Forms
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../forms/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General Elements</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-table"></i>
<p>
Tables
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../tables/simple.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Simple Tables</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Auth
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../examples/lockscreen.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Lockscreen</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">DOCUMENTATIONS</li>
<li class="nav-item">
<a href="../docs/introduction.html" class="nav-link">
<i class="nav-icon bi bi-download"></i>
<p>Installation</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/layout.html" class="nav-link">
<i class="nav-icon bi bi-grip-horizontal"></i>
<p>Layout</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/color-mode.html" class="nav-link">
<i class="nav-icon bi bi-star-half"></i>
<p>Color Mode</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-ui-checks-grid"></i>
<p>
Components
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../docs/components/main-header.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Header</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/components/main-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Sidebar</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-filetype-js"></i>
<p>
Javascript
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../docs/javascript/treeview.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Treeview</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../docs/browser-support.html" class="nav-link">
<i class="nav-icon bi bi-browser-edge"></i>
<p>Browser Support</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/how-to-contribute.html" class="nav-link">
<i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
<p>How To Contribute</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/faq.html" class="nav-link">
<i class="nav-icon bi bi-question-circle-fill"></i>
<p>FAQ</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/license.html" class="nav-link">
<i class="nav-icon bi bi-patch-check-fill"></i>
<p>License</p>
</a>
</li>
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>
Level 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>
Level 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-info"></i>
<p>Informational</p>
</a>
</li>
</ul>
<!--end::Sidebar Menu-->
</nav>
</div>
<!--end::Sidebar Wrapper-->
</aside>
<!--end::Sidebar-->
<!--begin::App Main-->
<main class="app-main">
<!--begin::App Content Header-->
<div class="app-content-header">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Row-->
<div class="row">
<div class="col-sm-6"><h3 class="mb-0">Timeline</h3></div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Timeline</li>
</ol>
</div>
</div>
<!--end::Row-->
</div>
<!--end::Container-->
</div>
<!--end::App Content Header-->
<!--begin::App Content-->
<div class="app-content">
<!--begin::Container-->
<div class="container-fluid">
<!-- Timelime example -->
<div class="row">
<div class="col-md-12">
<!-- The time line -->
<div class="timeline">
<!-- timeline time label -->
<div class="time-label"><span class="text-bg-danger">10 Feb. 2023</span></div>
<!-- /.timeline-label -->
<!-- timeline item -->
<div>
<i class="timeline-icon bi bi-envelope text-bg-primary"></i>
<div class="timeline-item">
<span class="time"> <i class="bi bi-clock-fill"></i> 12:05 </span>
<h3 class="timeline-header">
<a href="#">Support Team</a> sent you an email
</h3>
<div class="timeline-body">
Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning
heekya handango imeem plugg dopplr jibjab, movity jajah plickers sifteo
edmodo ifttt zimbra. Babblely odeo kaboodle quora plaxo ideeli hulu weebly
balihoo...
</div>
<div class="timeline-footer">
<a class="btn btn-primary btn-sm">Read more</a>
<a class="btn btn-danger btn-sm">Delete</a>
</div>
</div>
</div>
<!-- END timeline item -->
<!-- timeline item -->
<div>
<i class="timeline-icon bi bi-person text-bg-success"></i>
<div class="timeline-item">
<span class="time"> <i class="bi bi-clock-fill"></i> 5 mins ago </span>
<h3 class="timeline-header no-border">
<a href="#">Sarah Young</a> accepted your friend request
</h3>
</div>
</div>
<!-- END timeline item -->
<!-- timeline item -->
<div>
<i class="timeline-icon bi bi-chat-text-fill text-bg-warning"></i>
<div class="timeline-item">
<span class="time"> <i class="bi bi-clock-fill"></i> 27 mins ago </span>
<h3 class="timeline-header">
<a href="#">Jay White</a> commented on your post
</h3>
<div class="timeline-body">
Take me to your leader! Switzerland is small and neutral! We are more like
Germany, ambitious and misunderstood!
</div>
<div class="timeline-footer">
<a class="btn btn-warning btn-sm">View comment</a>
</div>
</div>
</div>
<!-- END timeline item -->
<!-- timeline time label -->
<div class="time-label"><span class="text-bg-success">3 Jan. 2023</span></div>
<!-- /.timeline-label -->
<!-- timeline item -->
<div>
<i class="timeline-icon bi bi-camera text-bg-primary"></i>
<div class="timeline-item">
<span class="time"> <i class="bi bi-clock-fill"></i> 2 days ago </span>
<h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
<div class="timeline-body">
<img src="../../../dist/assets/img/user1-128x128.jpg" alt="..." />
<img src="../../../dist/assets/img/user1-128x128.jpg" alt="..." />
<img src="../../../dist/assets/img/user1-128x128.jpg" alt="..." />
<img src="../../../dist/assets/img/user1-128x128.jpg" alt="..." />
</div>
</div>
</div>
<!-- END timeline item -->
<!-- timeline item -->
<div>
<i class="timeline-icon bi bi-camera-film text-bg-info"></i>
<div class="timeline-item">
<span class="time"> <i class="bi bi-clock-fill"></i> 5 days ago </span>
<h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3>
<div class="timeline-body">
<div class="ratio ratio-16x9">
<iframe
src="https://www.youtube.com/embed/tMWkeBIohBs"
allowfullscreen
></iframe>
</div>
</div>
<div class="timeline-footer">
<a href="#" class="btn btn-sm text-bg-warning"> See comments </a>
</div>
</div>
</div>
<!-- END timeline item -->
<div><i class="timeline-icon bi bi-clock-fill text-bg-secondary"></i></div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!--end::Container-->
</div>
<!--end::App Content-->
</main>
<!--end::App Main-->
<!--begin::Footer-->
<footer class="app-footer">
<!--begin::To the end-->
<div class="float-end d-none d-sm-inline">Anything you want</div>
<!--end::To the end-->
<!--begin::Copyright-->
<strong>
Copyright &copy; 2014-2024&nbsp;
<a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
</strong>
All rights reserved.
<!--end::Copyright-->
</footer>
<!--end::Footer-->
</div>
<!--end::App Wrapper-->
<!--begin::Script-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="../../../dist/js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
<!--end::OverlayScrollbars Configure-->
<!--end::Script-->
</body>
<!--end::Body-->
</html>

View File

@ -0,0 +1,851 @@
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Browser Support | AdminLTE 4</title>
<!--begin::Primary Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="Browser Support | AdminLTE 4" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
/>
<meta
name="keywords"
content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="../../../dist/css/adminlte.css" />
<!--end::Required Plugin(AdminLTE)-->
<style>
[data-astro-image] {
width: 100%;
height: auto;
object-fit: var(--fit);
object-position: var(--pos);
aspect-ratio: var(--w) / var(--h);
}
[data-astro-image='responsive'] {
max-width: calc(var(--w) * 1px);
max-height: calc(var(--h) * 1px);
}
[data-astro-image='fixed'] {
width: calc(var(--w) * 1px);
height: calc(var(--h) * 1px);
}
</style>
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<!--begin::App Wrapper-->
<div class="app-wrapper">
<!--begin::Header-->
<nav class="app-header navbar navbar-expand bg-body">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Start Navbar Links-->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
<i class="bi bi-list"></i>
</a>
</li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
</ul>
<!--end::Start Navbar Links-->
<!--begin::End Navbar Links-->
<ul class="navbar-nav ms-auto">
<!--begin::Navbar Search-->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="bi bi-search"></i>
</a>
</li>
<!--end::Navbar Search-->
<!--begin::Messages Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-chat-text"></i>
<span class="navbar-badge badge text-bg-danger">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user1-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end fs-7 text-danger"
><i class="bi bi-star-fill"></i
></span>
</h3>
<p class="fs-7">Call me whenever you can...</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user8-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end fs-7 text-secondary">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">I got your message bro</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user3-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end fs-7 text-warning">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">The subject goes here</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!--end::Messages Dropdown Menu-->
<!--begin::Notifications Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-bell-fill"></i>
<span class="navbar-badge badge text-bg-warning">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-envelope me-2"></i> 4 new messages
<span class="float-end text-secondary fs-7">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-people-fill me-2"></i> 8 friend requests
<span class="float-end text-secondary fs-7">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
<span class="float-end text-secondary fs-7">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer"> See All Notifications </a>
</div>
</li>
<!--end::Notifications Dropdown Menu-->
<!--begin::Fullscreen Toggle-->
<li class="nav-item">
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
</a>
</li>
<!--end::Fullscreen Toggle-->
<!--begin::User Menu Dropdown-->
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="user-image rounded-circle shadow"
alt="User Image"
/>
<span class="d-none d-md-inline">Alexander Pierce</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<!--begin::User Image-->
<li class="user-header text-bg-primary">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="rounded-circle shadow"
alt="User Image"
/>
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2023</small>
</p>
</li>
<!--end::User Image-->
<!--begin::Menu Body-->
<li class="user-body">
<!--begin::Row-->
<div class="row">
<div class="col-4 text-center"><a href="#">Followers</a></div>
<div class="col-4 text-center"><a href="#">Sales</a></div>
<div class="col-4 text-center"><a href="#">Friends</a></div>
</div>
<!--end::Row-->
</li>
<!--end::Menu Body-->
<!--begin::Menu Footer-->
<li class="user-footer">
<a href="#" class="btn btn-default btn-flat">Profile</a>
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
</li>
<!--end::Menu Footer-->
</ul>
</li>
<!--end::User Menu Dropdown-->
</ul>
<!--end::End Navbar Links-->
</div>
<!--end::Container-->
</nav>
<!--end::Header-->
<!--begin::Sidebar-->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<!--begin::Sidebar Brand-->
<div class="sidebar-brand">
<!--begin::Brand Link-->
<a href="../index.html" class="brand-link">
<!--begin::Brand Image-->
<img
src="../../../dist/assets/img/AdminLTELogo.png"
alt="AdminLTE Logo"
class="brand-image opacity-75 shadow"
/>
<!--end::Brand Image-->
<!--begin::Brand Text-->
<span class="brand-text fw-light">AdminLTE 4</span>
<!--end::Brand Text-->
</a>
<!--end::Brand Link-->
</div>
<!--end::Sidebar Brand-->
<!--begin::Sidebar Wrapper-->
<div class="sidebar-wrapper">
<nav class="mt-2">
<!--begin::Sidebar Menu-->
<ul
class="nav sidebar-menu flex-column"
data-lte-toggle="treeview"
role="menu"
data-accordion="false"
>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-speedometer"></i>
<p>
Dashboard
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../index.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="../index2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="../index3.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../generate/theme.html" class="nav-link">
<i class="nav-icon bi bi-palette"></i>
<p>Theme Generate</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-seam-fill"></i>
<p>
Widgets
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../widgets/small-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Small Box</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets/info-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>info Box</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets/cards.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Cards</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-clipboard-fill"></i>
<p>
Layout Options
<span class="nav-badge badge text-bg-secondary me-3">6</span>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../layout/unfixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Default Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/fixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Fixed Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/layout-custom-area.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout <small>+ Custom Area </small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/sidebar-mini.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/collapsed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Collapsed</small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/logo-switch.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Logo Switch</small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/layout-rtl.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout RTL</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-tree-fill"></i>
<p>
UI Elements
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../UI/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/icons.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/timeline.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Timeline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-pencil-square"></i>
<p>
Forms
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../forms/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General Elements</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-table"></i>
<p>
Tables
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../tables/simple.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Simple Tables</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Auth
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../examples/lockscreen.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Lockscreen</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">DOCUMENTATIONS</li>
<li class="nav-item">
<a href="../docs/introduction.html" class="nav-link">
<i class="nav-icon bi bi-download"></i>
<p>Installation</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/layout.html" class="nav-link">
<i class="nav-icon bi bi-grip-horizontal"></i>
<p>Layout</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/color-mode.html" class="nav-link">
<i class="nav-icon bi bi-star-half"></i>
<p>Color Mode</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-ui-checks-grid"></i>
<p>
Components
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../docs/components/main-header.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Header</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/components/main-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Sidebar</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-filetype-js"></i>
<p>
Javascript
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../docs/javascript/treeview.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Treeview</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../docs/browser-support.html" class="nav-link active">
<i class="nav-icon bi bi-browser-edge"></i>
<p>Browser Support</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/how-to-contribute.html" class="nav-link">
<i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
<p>How To Contribute</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/faq.html" class="nav-link">
<i class="nav-icon bi bi-question-circle-fill"></i>
<p>FAQ</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/license.html" class="nav-link">
<i class="nav-icon bi bi-patch-check-fill"></i>
<p>License</p>
</a>
</li>
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>
Level 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>
Level 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-info"></i>
<p>Informational</p>
</a>
</li>
</ul>
<!--end::Sidebar Menu-->
</nav>
</div>
<!--end::Sidebar Wrapper-->
</aside>
<!--end::Sidebar-->
<!--begin::App Main-->
<main class="app-main">
<!--begin::App Content Header-->
<div class="app-content-header">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Row-->
<div class="row">
<div class="col-sm-6"><h3 class="mb-0">Browser Support</h3></div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Docs</a></li>
<li class="breadcrumb-item active" aria-current="page">Browser Support</li>
</ol>
</div>
</div>
<!--end::Row-->
</div>
<!--end::Container-->
</div>
<!--end::App Content Header-->
<!--begin::App Content-->
<div class="app-content">
<!--begin::Container-->
<div class="container-fluid">
<p>AdminLTE comes with the same browser support as Bootstrap 5.</p>
<blockquote>
<h5 id="excerpt-from-bootstraps-official-documentation">
Excerpt from Bootstraps official Documentation!
</h5>
<p>
Bootstrap supports the <strong>latest, stable releases</strong> of all major
browsers and platforms.
</p>
<p>
For more details
<a
href="https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#supported-browsers"
>look here</a
>.
</p>
</blockquote>
<p>
You can find our supported range of browsers and their versions in
<a href="https://github.com/ColorlibHQ/AdminLTE/blob/master/.browserslistrc"
>our .browserslistrc file</a
>:
</p>
<pre
class="astro-code dark-plus"
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
tabindex="0"
data-language="plaintext"
><code><span class="line"><span># https://github.com/browserslist/browserslist#readme</span></span>
<span class="line"><span></span></span>
<span class="line"><span>&gt;= 0.5%</span></span>
<span class="line"><span>last 2 major versions</span></span>
<span class="line"><span>not dead</span></span>
<span class="line"><span>Chrome &gt;= 60</span></span>
<span class="line"><span>Firefox &gt;= 60</span></span>
<span class="line"><span>Firefox ESR</span></span>
<span class="line"><span>iOS &gt;= 12</span></span>
<span class="line"><span>Safari &gt;= 12</span></span>
<span class="line"><span>not Explorer &lt;= 11</span></span>
<span class="line"><span></span></span></code></pre>
</div>
<!--end::Container-->
</div>
<!--end::App Content-->
</main>
<!--end::App Main-->
<!--begin::Footer-->
<footer class="app-footer">
<!--begin::To the end-->
<div class="float-end d-none d-sm-inline">Anything you want</div>
<!--end::To the end-->
<!--begin::Copyright-->
<strong>
Copyright &copy; 2014-2024&nbsp;
<a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
</strong>
All rights reserved.
<!--end::Copyright-->
</footer>
<!--end::Footer-->
</div>
<!--end::App Wrapper-->
<!--begin::Script-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="../../../dist/js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
<!--end::OverlayScrollbars Configure-->
<!--end::Script-->
</body>
<!--end::Body-->
</html>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,950 @@
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main Sidebar Component | AdminLTE 4</title>
<!--begin::Primary Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="Main Sidebar Component | AdminLTE 4" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
/>
<meta
name="keywords"
content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="../../../../dist/css/adminlte.css" />
<!--end::Required Plugin(AdminLTE)-->
<style>
[data-astro-image] {
width: 100%;
height: auto;
object-fit: var(--fit);
object-position: var(--pos);
aspect-ratio: var(--w) / var(--h);
}
[data-astro-image='responsive'] {
max-width: calc(var(--w) * 1px);
max-height: calc(var(--h) * 1px);
}
[data-astro-image='fixed'] {
width: calc(var(--w) * 1px);
height: calc(var(--h) * 1px);
}
</style>
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<!--begin::App Wrapper-->
<div class="app-wrapper">
<!--begin::Header-->
<nav class="app-header navbar navbar-expand bg-body">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Start Navbar Links-->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
<i class="bi bi-list"></i>
</a>
</li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
</ul>
<!--end::Start Navbar Links-->
<!--begin::End Navbar Links-->
<ul class="navbar-nav ms-auto">
<!--begin::Navbar Search-->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="bi bi-search"></i>
</a>
</li>
<!--end::Navbar Search-->
<!--begin::Messages Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-chat-text"></i>
<span class="navbar-badge badge text-bg-danger">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../../dist/assets/img/user1-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end fs-7 text-danger"
><i class="bi bi-star-fill"></i
></span>
</h3>
<p class="fs-7">Call me whenever you can...</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../../dist/assets/img/user8-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end fs-7 text-secondary">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">I got your message bro</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../../dist/assets/img/user3-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end fs-7 text-warning">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">The subject goes here</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!--end::Messages Dropdown Menu-->
<!--begin::Notifications Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-bell-fill"></i>
<span class="navbar-badge badge text-bg-warning">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-envelope me-2"></i> 4 new messages
<span class="float-end text-secondary fs-7">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-people-fill me-2"></i> 8 friend requests
<span class="float-end text-secondary fs-7">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
<span class="float-end text-secondary fs-7">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer"> See All Notifications </a>
</div>
</li>
<!--end::Notifications Dropdown Menu-->
<!--begin::Fullscreen Toggle-->
<li class="nav-item">
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
</a>
</li>
<!--end::Fullscreen Toggle-->
<!--begin::User Menu Dropdown-->
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img
src="../../../../dist/assets/img/user2-160x160.jpg"
class="user-image rounded-circle shadow"
alt="User Image"
/>
<span class="d-none d-md-inline">Alexander Pierce</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<!--begin::User Image-->
<li class="user-header text-bg-primary">
<img
src="../../../../dist/assets/img/user2-160x160.jpg"
class="rounded-circle shadow"
alt="User Image"
/>
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2023</small>
</p>
</li>
<!--end::User Image-->
<!--begin::Menu Body-->
<li class="user-body">
<!--begin::Row-->
<div class="row">
<div class="col-4 text-center"><a href="#">Followers</a></div>
<div class="col-4 text-center"><a href="#">Sales</a></div>
<div class="col-4 text-center"><a href="#">Friends</a></div>
</div>
<!--end::Row-->
</li>
<!--end::Menu Body-->
<!--begin::Menu Footer-->
<li class="user-footer">
<a href="#" class="btn btn-default btn-flat">Profile</a>
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
</li>
<!--end::Menu Footer-->
</ul>
</li>
<!--end::User Menu Dropdown-->
</ul>
<!--end::End Navbar Links-->
</div>
<!--end::Container-->
</nav>
<!--end::Header-->
<!--begin::Sidebar-->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<!--begin::Sidebar Brand-->
<div class="sidebar-brand">
<!--begin::Brand Link-->
<a href="../../index.html" class="brand-link">
<!--begin::Brand Image-->
<img
src="../../../../dist/assets/img/AdminLTELogo.png"
alt="AdminLTE Logo"
class="brand-image opacity-75 shadow"
/>
<!--end::Brand Image-->
<!--begin::Brand Text-->
<span class="brand-text fw-light">AdminLTE 4</span>
<!--end::Brand Text-->
</a>
<!--end::Brand Link-->
</div>
<!--end::Sidebar Brand-->
<!--begin::Sidebar Wrapper-->
<div class="sidebar-wrapper">
<nav class="mt-2">
<!--begin::Sidebar Menu-->
<ul
class="nav sidebar-menu flex-column"
data-lte-toggle="treeview"
role="menu"
data-accordion="false"
>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-speedometer"></i>
<p>
Dashboard
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../index.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="../../index2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="../../index3.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../../generate/theme.html" class="nav-link">
<i class="nav-icon bi bi-palette"></i>
<p>Theme Generate</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-seam-fill"></i>
<p>
Widgets
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../widgets/small-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Small Box</p>
</a>
</li>
<li class="nav-item">
<a href="../../widgets/info-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>info Box</p>
</a>
</li>
<li class="nav-item">
<a href="../../widgets/cards.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Cards</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-clipboard-fill"></i>
<p>
Layout Options
<span class="nav-badge badge text-bg-secondary me-3">6</span>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../layout/unfixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Default Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../../layout/fixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Fixed Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../../layout/layout-custom-area.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout <small>+ Custom Area </small></p>
</a>
</li>
<li class="nav-item">
<a href="../../layout/sidebar-mini.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini</p>
</a>
</li>
<li class="nav-item">
<a href="../../layout/collapsed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Collapsed</small></p>
</a>
</li>
<li class="nav-item">
<a href="../../layout/logo-switch.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Logo Switch</small></p>
</a>
</li>
<li class="nav-item">
<a href="../../layout/layout-rtl.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout RTL</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-tree-fill"></i>
<p>
UI Elements
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../UI/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="../../UI/icons.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="../../UI/timeline.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Timeline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-pencil-square"></i>
<p>
Forms
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../forms/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General Elements</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-table"></i>
<p>
Tables
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../tables/simple.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Simple Tables</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Auth
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../examples/login.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../../examples/register.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../examples/login-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../../examples/register-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../../examples/lockscreen.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Lockscreen</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">DOCUMENTATIONS</li>
<li class="nav-item">
<a href="../../docs/introduction.html" class="nav-link">
<i class="nav-icon bi bi-download"></i>
<p>Installation</p>
</a>
</li>
<li class="nav-item">
<a href="../../docs/layout.html" class="nav-link">
<i class="nav-icon bi bi-grip-horizontal"></i>
<p>Layout</p>
</a>
</li>
<li class="nav-item">
<a href="../../docs/color-mode.html" class="nav-link">
<i class="nav-icon bi bi-star-half"></i>
<p>Color Mode</p>
</a>
</li>
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon bi bi-ui-checks-grid"></i>
<p>
Components
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../docs/components/main-header.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Header</p>
</a>
</li>
<li class="nav-item">
<a href="../../docs/components/main-sidebar.html" class="nav-link active">
<i class="nav-icon bi bi-circle"></i>
<p>Main Sidebar</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-filetype-js"></i>
<p>
Javascript
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../docs/javascript/treeview.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Treeview</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../../docs/browser-support.html" class="nav-link">
<i class="nav-icon bi bi-browser-edge"></i>
<p>Browser Support</p>
</a>
</li>
<li class="nav-item">
<a href="../../docs/how-to-contribute.html" class="nav-link">
<i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
<p>How To Contribute</p>
</a>
</li>
<li class="nav-item">
<a href="../../docs/faq.html" class="nav-link">
<i class="nav-icon bi bi-question-circle-fill"></i>
<p>FAQ</p>
</a>
</li>
<li class="nav-item">
<a href="../../docs/license.html" class="nav-link">
<i class="nav-icon bi bi-patch-check-fill"></i>
<p>License</p>
</a>
</li>
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>
Level 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>
Level 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-info"></i>
<p>Informational</p>
</a>
</li>
</ul>
<!--end::Sidebar Menu-->
</nav>
</div>
<!--end::Sidebar Wrapper-->
</aside>
<!--end::Sidebar-->
<!--begin::App Main-->
<main class="app-main">
<!--begin::App Content Header-->
<div class="app-content-header">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Row-->
<div class="row">
<div class="col-sm-6"><h3 class="mb-0">Main Sidebar Component</h3></div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Docs</a></li>
<li class="breadcrumb-item active" aria-current="page">Main Sidebar Component</li>
</ol>
</div>
</div>
<!--end::Row-->
</div>
<!--end::Container-->
</div>
<!--end::App Content Header-->
<!--begin::App Content-->
<div class="app-content">
<!--begin::Container-->
<div class="container-fluid">
<p>
The sidebar used in this page to the left provides an example of what your sidebar
would look like. Construction of a sidebar:
</p>
<pre
class="astro-code dark-plus"
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
tabindex="0"
data-language="html"
><code><span class="line"><span style="color:#6A9955">&lt;!--begin::Sidebar--&gt;</span></span>
<span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">aside</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;app-sidebar bg-body-secondary shadow&quot;</span><span style="color:#9CDCFE"> data-bs-theme</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;dark&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#6A9955"> &lt;!--begin::Sidebar Brand--&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;sidebar-brand&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#6A9955"> &lt;!--begin::Brand Link--&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;./index.html&quot;</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;brand-link&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#6A9955"> &lt;!--begin::Brand Image--&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">img</span></span>
<span class="line"><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;./assets/img/AdminLTELogo.png&quot;</span></span>
<span class="line"><span style="color:#9CDCFE"> alt</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;AdminLTE Logo&quot;</span></span>
<span class="line"><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;brand-image opacity-75 shadow&quot;</span></span>
<span class="line"><span style="color:#808080"> /&gt;</span></span>
<span class="line"><span style="color:#6A9955"> &lt;!--end::Brand Image--&gt;</span></span>
<span class="line"><span style="color:#6A9955"> &lt;!--begin::Brand Text--&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">span</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;brand-text fw-light&quot;</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">AdminLTE 4</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">span</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#6A9955"> &lt;!--end::Brand Text--&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#6A9955"> &lt;!--end::Brand Link--&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#6A9955"> &lt;!--end::Sidebar Brand--&gt;</span></span>
<span class="line"><span style="color:#6A9955"> &lt;!--begin::Sidebar Wrapper--&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;sidebar-wrapper&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">nav</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;mt-2&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#6A9955"> &lt;!--begin::Sidebar Menu--&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">ul</span></span>
<span class="line"><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav sidebar-menu flex-column&quot;</span></span>
<span class="line"><span style="color:#9CDCFE"> data-lte-toggle</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;treeview&quot;</span></span>
<span class="line"><span style="color:#9CDCFE"> role</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;menu&quot;</span></span>
<span class="line"><span style="color:#9CDCFE"> data-accordion</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;false&quot;</span></span>
<span class="line"><span style="color:#808080"> &gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">li</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-header&quot;</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Nav Header</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">li</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">li</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-item&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;./index.html&quot;</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-link&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-icon bi bi-circle-fill&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">i</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">p</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Level 1</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">p</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">li</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">li</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-item&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;#&quot;</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-link&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-icon bi bi-circle-fill&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">i</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">p</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#D4D4D4"> Treeview</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-arrow bi bi-chevron-right&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">i</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">p</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">ul</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav nav-treeview&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">li</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-item&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;./index.html&quot;</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-link&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-icon bi bi-circle&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">i</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">p</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#D4D4D4"> Level 2 (Badge)</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">span</span></span>
<span class="line"><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-badge badge text-bg-secondary me-3&quot;</span></span>
<span class="line"><span style="color:#808080"> &gt;</span></span>
<span class="line"><span style="color:#D4D4D4"> 6</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">span</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">p</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">li</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">li</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-item&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;./index.html&quot;</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-link&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-icon bi bi-circle&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">i</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">p</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Level 2</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">p</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">li</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">ul</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">li</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">li</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-item&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;./index.html&quot;</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-link active&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-icon bi bi-circle-fill&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">i</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">p</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Level 1 Active</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">p</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">li</span><span style="color:#808080">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">li</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-item menu-open&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;#&quot;</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-link active&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-icon bi bi-circle-fill&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">i</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">p</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#D4D4D4"> Treeview Menu Open</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-arrow bi bi-chevron-right&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">i</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">p</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">ul</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav nav-treeview&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">li</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-item&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;./index.html&quot;</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-link active&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-icon bi bi-circle&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">i</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">p</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Level 2 Active</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">p</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">li</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">li</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-item&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;./index.html&quot;</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-link&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-icon bi bi-circle&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">i</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">p</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Level 2</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">p</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">li</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">ul</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">li</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">ul</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#6A9955"> &lt;!--end::Sidebar Menu--&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">nav</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#6A9955"> &lt;!--end::Sidebar Wrapper--&gt;</span></span>
<span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">aside</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#6A9955">&lt;!--end::Sidebar--&gt;</span></span>
<span class="line"></span></code></pre>
<h2 id="alternate-logo">Alternate Logo</h2>
<p>
You can use two logo images instead of logo with text, you only need to change the
markup to this:
</p>
<pre
class="astro-code dark-plus"
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
tabindex="0"
data-language="html"
><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;sidebar-brand&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;./index.html&quot;</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;brand-link logo-switch&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">img</span></span>
<span class="line"><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;./assets/img/AdminLTELogo.png&quot;</span></span>
<span class="line"><span style="color:#9CDCFE"> alt</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;AdminLTE Logo Small&quot;</span></span>
<span class="line"><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;brand-image-xl logo-xs opacity-75 shadow&quot;</span></span>
<span class="line"><span style="color:#808080"> /&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">img</span></span>
<span class="line"><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;./assets/img/AdminLTEFullLogo.png&quot;</span></span>
<span class="line"><span style="color:#9CDCFE"> alt</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;AdminLTE Logo Large&quot;</span></span>
<span class="line"><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;brand-image-xs logo-xl opacity-75&quot;</span></span>
<span class="line"><span style="color:#808080"> /&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span>
<span class="line"></span></code></pre>
</div>
<!--end::Container-->
</div>
<!--end::App Content-->
</main>
<!--end::App Main-->
<!--begin::Footer-->
<footer class="app-footer">
<!--begin::To the end-->
<div class="float-end d-none d-sm-inline">Anything you want</div>
<!--end::To the end-->
<!--begin::Copyright-->
<strong>
Copyright &copy; 2014-2024&nbsp;
<a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
</strong>
All rights reserved.
<!--end::Copyright-->
</footer>
<!--end::Footer-->
</div>
<!--end::App Wrapper-->
<!--begin::Script-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="../../../../dist/js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
<!--end::OverlayScrollbars Configure-->
<!--end::Script-->
</body>
<!--end::Body-->
</html>

View File

@ -0,0 +1,832 @@
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FAQ | AdminLTE 4</title>
<!--begin::Primary Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="FAQ | AdminLTE 4" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
/>
<meta
name="keywords"
content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="../../../dist/css/adminlte.css" />
<!--end::Required Plugin(AdminLTE)-->
<style>
[data-astro-image] {
width: 100%;
height: auto;
object-fit: var(--fit);
object-position: var(--pos);
aspect-ratio: var(--w) / var(--h);
}
[data-astro-image='responsive'] {
max-width: calc(var(--w) * 1px);
max-height: calc(var(--h) * 1px);
}
[data-astro-image='fixed'] {
width: calc(var(--w) * 1px);
height: calc(var(--h) * 1px);
}
</style>
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<!--begin::App Wrapper-->
<div class="app-wrapper">
<!--begin::Header-->
<nav class="app-header navbar navbar-expand bg-body">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Start Navbar Links-->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
<i class="bi bi-list"></i>
</a>
</li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
</ul>
<!--end::Start Navbar Links-->
<!--begin::End Navbar Links-->
<ul class="navbar-nav ms-auto">
<!--begin::Navbar Search-->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="bi bi-search"></i>
</a>
</li>
<!--end::Navbar Search-->
<!--begin::Messages Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-chat-text"></i>
<span class="navbar-badge badge text-bg-danger">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user1-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end fs-7 text-danger"
><i class="bi bi-star-fill"></i
></span>
</h3>
<p class="fs-7">Call me whenever you can...</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user8-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end fs-7 text-secondary">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">I got your message bro</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user3-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end fs-7 text-warning">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">The subject goes here</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!--end::Messages Dropdown Menu-->
<!--begin::Notifications Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-bell-fill"></i>
<span class="navbar-badge badge text-bg-warning">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-envelope me-2"></i> 4 new messages
<span class="float-end text-secondary fs-7">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-people-fill me-2"></i> 8 friend requests
<span class="float-end text-secondary fs-7">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
<span class="float-end text-secondary fs-7">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer"> See All Notifications </a>
</div>
</li>
<!--end::Notifications Dropdown Menu-->
<!--begin::Fullscreen Toggle-->
<li class="nav-item">
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
</a>
</li>
<!--end::Fullscreen Toggle-->
<!--begin::User Menu Dropdown-->
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="user-image rounded-circle shadow"
alt="User Image"
/>
<span class="d-none d-md-inline">Alexander Pierce</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<!--begin::User Image-->
<li class="user-header text-bg-primary">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="rounded-circle shadow"
alt="User Image"
/>
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2023</small>
</p>
</li>
<!--end::User Image-->
<!--begin::Menu Body-->
<li class="user-body">
<!--begin::Row-->
<div class="row">
<div class="col-4 text-center"><a href="#">Followers</a></div>
<div class="col-4 text-center"><a href="#">Sales</a></div>
<div class="col-4 text-center"><a href="#">Friends</a></div>
</div>
<!--end::Row-->
</li>
<!--end::Menu Body-->
<!--begin::Menu Footer-->
<li class="user-footer">
<a href="#" class="btn btn-default btn-flat">Profile</a>
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
</li>
<!--end::Menu Footer-->
</ul>
</li>
<!--end::User Menu Dropdown-->
</ul>
<!--end::End Navbar Links-->
</div>
<!--end::Container-->
</nav>
<!--end::Header-->
<!--begin::Sidebar-->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<!--begin::Sidebar Brand-->
<div class="sidebar-brand">
<!--begin::Brand Link-->
<a href="../index.html" class="brand-link">
<!--begin::Brand Image-->
<img
src="../../../dist/assets/img/AdminLTELogo.png"
alt="AdminLTE Logo"
class="brand-image opacity-75 shadow"
/>
<!--end::Brand Image-->
<!--begin::Brand Text-->
<span class="brand-text fw-light">AdminLTE 4</span>
<!--end::Brand Text-->
</a>
<!--end::Brand Link-->
</div>
<!--end::Sidebar Brand-->
<!--begin::Sidebar Wrapper-->
<div class="sidebar-wrapper">
<nav class="mt-2">
<!--begin::Sidebar Menu-->
<ul
class="nav sidebar-menu flex-column"
data-lte-toggle="treeview"
role="menu"
data-accordion="false"
>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-speedometer"></i>
<p>
Dashboard
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../index.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="../index2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="../index3.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../generate/theme.html" class="nav-link">
<i class="nav-icon bi bi-palette"></i>
<p>Theme Generate</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-seam-fill"></i>
<p>
Widgets
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../widgets/small-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Small Box</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets/info-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>info Box</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets/cards.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Cards</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-clipboard-fill"></i>
<p>
Layout Options
<span class="nav-badge badge text-bg-secondary me-3">6</span>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../layout/unfixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Default Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/fixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Fixed Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/layout-custom-area.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout <small>+ Custom Area </small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/sidebar-mini.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/collapsed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Collapsed</small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/logo-switch.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Logo Switch</small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/layout-rtl.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout RTL</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-tree-fill"></i>
<p>
UI Elements
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../UI/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/icons.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/timeline.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Timeline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-pencil-square"></i>
<p>
Forms
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../forms/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General Elements</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-table"></i>
<p>
Tables
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../tables/simple.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Simple Tables</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Auth
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../examples/lockscreen.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Lockscreen</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">DOCUMENTATIONS</li>
<li class="nav-item">
<a href="../docs/introduction.html" class="nav-link">
<i class="nav-icon bi bi-download"></i>
<p>Installation</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/layout.html" class="nav-link">
<i class="nav-icon bi bi-grip-horizontal"></i>
<p>Layout</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/color-mode.html" class="nav-link">
<i class="nav-icon bi bi-star-half"></i>
<p>Color Mode</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-ui-checks-grid"></i>
<p>
Components
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../docs/components/main-header.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Header</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/components/main-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Sidebar</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-filetype-js"></i>
<p>
Javascript
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../docs/javascript/treeview.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Treeview</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../docs/browser-support.html" class="nav-link">
<i class="nav-icon bi bi-browser-edge"></i>
<p>Browser Support</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/how-to-contribute.html" class="nav-link">
<i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
<p>How To Contribute</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/faq.html" class="nav-link active">
<i class="nav-icon bi bi-question-circle-fill"></i>
<p>FAQ</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/license.html" class="nav-link">
<i class="nav-icon bi bi-patch-check-fill"></i>
<p>License</p>
</a>
</li>
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>
Level 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>
Level 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-info"></i>
<p>Informational</p>
</a>
</li>
</ul>
<!--end::Sidebar Menu-->
</nav>
</div>
<!--end::Sidebar Wrapper-->
</aside>
<!--end::Sidebar-->
<!--begin::App Main-->
<main class="app-main">
<!--begin::App Content Header-->
<div class="app-content-header">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Row-->
<div class="row">
<div class="col-sm-6"><h3 class="mb-0">FAQ</h3></div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Docs</a></li>
<li class="breadcrumb-item active" aria-current="page">FAQ</li>
</ol>
</div>
</div>
<!--end::Row-->
</div>
<!--end::Container-->
</div>
<!--end::App Content Header-->
<!--begin::App Content-->
<div class="app-content">
<!--begin::Container-->
<div class="container-fluid">
<h4 id="can-adminlte-be-used-with-wordpress">Can AdminLTE be used with WordPress?</h4>
<p>
AdminLTE is an HTML template that can be used for any purpose. However, it is not made
to be easily installed on WordPress. It will require some effort and enough knowledge
of the WordPress script to do so.
</p>
<h4 id="is-there-an-integration-guide-for-php-frameworks-such-as-yii-or-symfony">
Is there an integration guide for PHP frameworks such as Yii or Symfony?
</h4>
<p>
Short answer, no. However, there are forks and tutorials around the web that provide
info on how to integrate with many different frameworks. There are even versions of
AdminLTE that are integrated with jQuery ajax, AngularJS and/or MVC5 ASP .NET.
</p>
<h4 id="how-do-i-get-notified-of-new-adminlte-versions">
How do I get notified of new AdminLTE versions?
</h4>
<p>
You may watch the
<a href="https://github.com/ColorlibHQ/AdminLTE">releases on GitHub</a>.
</p>
</div>
<!--end::Container-->
</div>
<!--end::App Content-->
</main>
<!--end::App Main-->
<!--begin::Footer-->
<footer class="app-footer">
<!--begin::To the end-->
<div class="float-end d-none d-sm-inline">Anything you want</div>
<!--end::To the end-->
<!--begin::Copyright-->
<strong>
Copyright &copy; 2014-2024&nbsp;
<a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
</strong>
All rights reserved.
<!--end::Copyright-->
</footer>
<!--end::Footer-->
</div>
<!--end::App Wrapper-->
<!--begin::Script-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="../../../dist/js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
<!--end::OverlayScrollbars Configure-->
<!--end::Script-->
</body>
<!--end::Body-->
</html>

View File

@ -0,0 +1,906 @@
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How To Contribute | AdminLTE 4</title>
<!--begin::Primary Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="How To Contribute | AdminLTE 4" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
/>
<meta
name="keywords"
content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="../../../dist/css/adminlte.css" />
<!--end::Required Plugin(AdminLTE)-->
<style>
[data-astro-image] {
width: 100%;
height: auto;
object-fit: var(--fit);
object-position: var(--pos);
aspect-ratio: var(--w) / var(--h);
}
[data-astro-image='responsive'] {
max-width: calc(var(--w) * 1px);
max-height: calc(var(--h) * 1px);
}
[data-astro-image='fixed'] {
width: calc(var(--w) * 1px);
height: calc(var(--h) * 1px);
}
</style>
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<!--begin::App Wrapper-->
<div class="app-wrapper">
<!--begin::Header-->
<nav class="app-header navbar navbar-expand bg-body">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Start Navbar Links-->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
<i class="bi bi-list"></i>
</a>
</li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
</ul>
<!--end::Start Navbar Links-->
<!--begin::End Navbar Links-->
<ul class="navbar-nav ms-auto">
<!--begin::Navbar Search-->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="bi bi-search"></i>
</a>
</li>
<!--end::Navbar Search-->
<!--begin::Messages Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-chat-text"></i>
<span class="navbar-badge badge text-bg-danger">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user1-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end fs-7 text-danger"
><i class="bi bi-star-fill"></i
></span>
</h3>
<p class="fs-7">Call me whenever you can...</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user8-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end fs-7 text-secondary">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">I got your message bro</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user3-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end fs-7 text-warning">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">The subject goes here</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!--end::Messages Dropdown Menu-->
<!--begin::Notifications Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-bell-fill"></i>
<span class="navbar-badge badge text-bg-warning">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-envelope me-2"></i> 4 new messages
<span class="float-end text-secondary fs-7">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-people-fill me-2"></i> 8 friend requests
<span class="float-end text-secondary fs-7">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
<span class="float-end text-secondary fs-7">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer"> See All Notifications </a>
</div>
</li>
<!--end::Notifications Dropdown Menu-->
<!--begin::Fullscreen Toggle-->
<li class="nav-item">
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
</a>
</li>
<!--end::Fullscreen Toggle-->
<!--begin::User Menu Dropdown-->
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="user-image rounded-circle shadow"
alt="User Image"
/>
<span class="d-none d-md-inline">Alexander Pierce</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<!--begin::User Image-->
<li class="user-header text-bg-primary">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="rounded-circle shadow"
alt="User Image"
/>
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2023</small>
</p>
</li>
<!--end::User Image-->
<!--begin::Menu Body-->
<li class="user-body">
<!--begin::Row-->
<div class="row">
<div class="col-4 text-center"><a href="#">Followers</a></div>
<div class="col-4 text-center"><a href="#">Sales</a></div>
<div class="col-4 text-center"><a href="#">Friends</a></div>
</div>
<!--end::Row-->
</li>
<!--end::Menu Body-->
<!--begin::Menu Footer-->
<li class="user-footer">
<a href="#" class="btn btn-default btn-flat">Profile</a>
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
</li>
<!--end::Menu Footer-->
</ul>
</li>
<!--end::User Menu Dropdown-->
</ul>
<!--end::End Navbar Links-->
</div>
<!--end::Container-->
</nav>
<!--end::Header-->
<!--begin::Sidebar-->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<!--begin::Sidebar Brand-->
<div class="sidebar-brand">
<!--begin::Brand Link-->
<a href="../index.html" class="brand-link">
<!--begin::Brand Image-->
<img
src="../../../dist/assets/img/AdminLTELogo.png"
alt="AdminLTE Logo"
class="brand-image opacity-75 shadow"
/>
<!--end::Brand Image-->
<!--begin::Brand Text-->
<span class="brand-text fw-light">AdminLTE 4</span>
<!--end::Brand Text-->
</a>
<!--end::Brand Link-->
</div>
<!--end::Sidebar Brand-->
<!--begin::Sidebar Wrapper-->
<div class="sidebar-wrapper">
<nav class="mt-2">
<!--begin::Sidebar Menu-->
<ul
class="nav sidebar-menu flex-column"
data-lte-toggle="treeview"
role="menu"
data-accordion="false"
>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-speedometer"></i>
<p>
Dashboard
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../index.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="../index2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="../index3.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../generate/theme.html" class="nav-link">
<i class="nav-icon bi bi-palette"></i>
<p>Theme Generate</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-seam-fill"></i>
<p>
Widgets
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../widgets/small-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Small Box</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets/info-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>info Box</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets/cards.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Cards</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-clipboard-fill"></i>
<p>
Layout Options
<span class="nav-badge badge text-bg-secondary me-3">6</span>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../layout/unfixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Default Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/fixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Fixed Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/layout-custom-area.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout <small>+ Custom Area </small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/sidebar-mini.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/collapsed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Collapsed</small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/logo-switch.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Logo Switch</small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/layout-rtl.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout RTL</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-tree-fill"></i>
<p>
UI Elements
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../UI/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/icons.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/timeline.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Timeline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-pencil-square"></i>
<p>
Forms
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../forms/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General Elements</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-table"></i>
<p>
Tables
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../tables/simple.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Simple Tables</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Auth
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../examples/lockscreen.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Lockscreen</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">DOCUMENTATIONS</li>
<li class="nav-item">
<a href="../docs/introduction.html" class="nav-link">
<i class="nav-icon bi bi-download"></i>
<p>Installation</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/layout.html" class="nav-link">
<i class="nav-icon bi bi-grip-horizontal"></i>
<p>Layout</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/color-mode.html" class="nav-link">
<i class="nav-icon bi bi-star-half"></i>
<p>Color Mode</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-ui-checks-grid"></i>
<p>
Components
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../docs/components/main-header.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Header</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/components/main-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Sidebar</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-filetype-js"></i>
<p>
Javascript
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../docs/javascript/treeview.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Treeview</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../docs/browser-support.html" class="nav-link">
<i class="nav-icon bi bi-browser-edge"></i>
<p>Browser Support</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/how-to-contribute.html" class="nav-link active">
<i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
<p>How To Contribute</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/faq.html" class="nav-link">
<i class="nav-icon bi bi-question-circle-fill"></i>
<p>FAQ</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/license.html" class="nav-link">
<i class="nav-icon bi bi-patch-check-fill"></i>
<p>License</p>
</a>
</li>
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>
Level 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>
Level 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-info"></i>
<p>Informational</p>
</a>
</li>
</ul>
<!--end::Sidebar Menu-->
</nav>
</div>
<!--end::Sidebar Wrapper-->
</aside>
<!--end::Sidebar-->
<!--begin::App Main-->
<main class="app-main">
<!--begin::App Content Header-->
<div class="app-content-header">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Row-->
<div class="row">
<div class="col-sm-6"><h3 class="mb-0">How To Contribute</h3></div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Docs</a></li>
<li class="breadcrumb-item active" aria-current="page">How To Contribute</li>
</ol>
</div>
</div>
<!--end::Row-->
</div>
<!--end::Container-->
</div>
<!--end::App Content Header-->
<!--begin::App Content-->
<div class="app-content">
<!--begin::Container-->
<div class="container-fluid">
<h1 id="contributing-to-adminlte">Contributing to AdminLTE</h1>
<p>
Contributions are always <strong>welcome and recommended</strong>! Here is how for
beginners:
<a href="https://youtu.be/GbqSvJs-6W4">Get started with open source click here</a>
</p>
<ol>
<li>
<p>Contribution Requirements :</p>
<ul>
<li>
When you contribute, you agree to give a non-exclusive license to AdminLTE.io to
use that contribution in any context as we (AdminLTE.io) see appropriate.
</li>
<li>
If you use content provided by another party, it must be appropriately licensed
using an <a href="https://opensource.org/licenses">open source</a> license.
</li>
<li>Contributions are only accepted through GitHub pull requests.</li>
<li>
Finally, contributed code must work in all supported browsers (see above for
browser support).
</li>
</ul>
</li>
<li>
<p>Installation :</p>
<ul>
<li>
Fork the repository (<a href="https://help.github.com/articles/fork-a-repo/"
>here is the guide</a
>).
</li>
<li>Clone to your machine</li>
</ul>
<pre
class="astro-code dark-plus"
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
tabindex="0"
data-language="bash"
><code><span class="line"><span style="color:#DCDCAA">git</span><span style="color:#CE9178"> clone</span><span style="color:#CE9178"> https://github.com/YOUR_USERNAME/AdminLTE.git</span></span>
<span class="line"></span></code></pre>
<ul>
<li>Create a new branch from <code>master</code></li>
</ul>
</li>
<li>
<p>Compile dist files (Development) :</p>
<ul>
<li>
To compile the dist files you need Node.js 18 or higher/npm (node package
manager)
</li>
<li><code>npm install</code> (install npm deps)</li>
<li>
<code>npm run dev</code> (developer mode, autocompile with browsersync support
for live demo)
</li>
<li>
Make your changes only in <code>./src</code> Folder OR
<code>package.json</code> in any files which are necessary for contribution
</li>
<li>
Do not make changes in <code>./dist/**</code> Because it contains compiled files
and do not include in PR (Pull Request)
</li>
<li>
<code>npm run production</code> (compile css/js files and test all pages are
perfectly working fine, before creating a pull request)
</li>
</ul>
</li>
<li>
<p>Create a pull request to <code>master</code> branch</p>
</li>
</ol>
<h2 id="online-one-click-setup-for-contributing">
Online one-click setup for contributing
</h2>
<p>
You can use <a href="https://docs.github.com/en/codespaces">Codespace</a> an online
IDE which is free for Open Source for working on issues or making PRs (Pull Requests).
With a single click it will launch a workspace and automatically:
</p>
<ul>
<li>clone the <code>AdminLTE</code> repo.</li>
<li>
Open with <a href="https://docs.github.com/en/codespaces">Codespace</a> or
<a href="https://gitpod.io/from-referrer/"
><img src="https://gitpod.io/button/open-in-gitpod.svg" alt="Open in Gitpod"
/></a>
</li>
<li>install the dependencies.</li>
<li>run <code>npm run dev</code> to start the server.</li>
</ul>
</div>
<!--end::Container-->
</div>
<!--end::App Content-->
</main>
<!--end::App Main-->
<!--begin::Footer-->
<footer class="app-footer">
<!--begin::To the end-->
<div class="float-end d-none d-sm-inline">Anything you want</div>
<!--end::To the end-->
<!--begin::Copyright-->
<strong>
Copyright &copy; 2014-2024&nbsp;
<a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
</strong>
All rights reserved.
<!--end::Copyright-->
</footer>
<!--end::Footer-->
</div>
<!--end::App Wrapper-->
<!--begin::Script-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="../../../dist/js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
<!--end::OverlayScrollbars Configure-->
<!--end::Script-->
</body>
<!--end::Body-->
</html>

View File

@ -0,0 +1,895 @@
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Introduction | AdminLTE 4</title>
<!--begin::Primary Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="Introduction | AdminLTE 4" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
/>
<meta
name="keywords"
content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="../../../dist/css/adminlte.css" />
<!--end::Required Plugin(AdminLTE)-->
<style>
[data-astro-image] {
width: 100%;
height: auto;
object-fit: var(--fit);
object-position: var(--pos);
aspect-ratio: var(--w) / var(--h);
}
[data-astro-image='responsive'] {
max-width: calc(var(--w) * 1px);
max-height: calc(var(--h) * 1px);
}
[data-astro-image='fixed'] {
width: calc(var(--w) * 1px);
height: calc(var(--h) * 1px);
}
</style>
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<!--begin::App Wrapper-->
<div class="app-wrapper">
<!--begin::Header-->
<nav class="app-header navbar navbar-expand bg-body">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Start Navbar Links-->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
<i class="bi bi-list"></i>
</a>
</li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
</ul>
<!--end::Start Navbar Links-->
<!--begin::End Navbar Links-->
<ul class="navbar-nav ms-auto">
<!--begin::Navbar Search-->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="bi bi-search"></i>
</a>
</li>
<!--end::Navbar Search-->
<!--begin::Messages Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-chat-text"></i>
<span class="navbar-badge badge text-bg-danger">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user1-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end fs-7 text-danger"
><i class="bi bi-star-fill"></i
></span>
</h3>
<p class="fs-7">Call me whenever you can...</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user8-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end fs-7 text-secondary">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">I got your message bro</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user3-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end fs-7 text-warning">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">The subject goes here</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!--end::Messages Dropdown Menu-->
<!--begin::Notifications Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-bell-fill"></i>
<span class="navbar-badge badge text-bg-warning">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-envelope me-2"></i> 4 new messages
<span class="float-end text-secondary fs-7">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-people-fill me-2"></i> 8 friend requests
<span class="float-end text-secondary fs-7">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
<span class="float-end text-secondary fs-7">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer"> See All Notifications </a>
</div>
</li>
<!--end::Notifications Dropdown Menu-->
<!--begin::Fullscreen Toggle-->
<li class="nav-item">
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
</a>
</li>
<!--end::Fullscreen Toggle-->
<!--begin::User Menu Dropdown-->
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="user-image rounded-circle shadow"
alt="User Image"
/>
<span class="d-none d-md-inline">Alexander Pierce</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<!--begin::User Image-->
<li class="user-header text-bg-primary">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="rounded-circle shadow"
alt="User Image"
/>
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2023</small>
</p>
</li>
<!--end::User Image-->
<!--begin::Menu Body-->
<li class="user-body">
<!--begin::Row-->
<div class="row">
<div class="col-4 text-center"><a href="#">Followers</a></div>
<div class="col-4 text-center"><a href="#">Sales</a></div>
<div class="col-4 text-center"><a href="#">Friends</a></div>
</div>
<!--end::Row-->
</li>
<!--end::Menu Body-->
<!--begin::Menu Footer-->
<li class="user-footer">
<a href="#" class="btn btn-default btn-flat">Profile</a>
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
</li>
<!--end::Menu Footer-->
</ul>
</li>
<!--end::User Menu Dropdown-->
</ul>
<!--end::End Navbar Links-->
</div>
<!--end::Container-->
</nav>
<!--end::Header-->
<!--begin::Sidebar-->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<!--begin::Sidebar Brand-->
<div class="sidebar-brand">
<!--begin::Brand Link-->
<a href="../index.html" class="brand-link">
<!--begin::Brand Image-->
<img
src="../../../dist/assets/img/AdminLTELogo.png"
alt="AdminLTE Logo"
class="brand-image opacity-75 shadow"
/>
<!--end::Brand Image-->
<!--begin::Brand Text-->
<span class="brand-text fw-light">AdminLTE 4</span>
<!--end::Brand Text-->
</a>
<!--end::Brand Link-->
</div>
<!--end::Sidebar Brand-->
<!--begin::Sidebar Wrapper-->
<div class="sidebar-wrapper">
<nav class="mt-2">
<!--begin::Sidebar Menu-->
<ul
class="nav sidebar-menu flex-column"
data-lte-toggle="treeview"
role="menu"
data-accordion="false"
>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-speedometer"></i>
<p>
Dashboard
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../index.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="../index2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="../index3.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../generate/theme.html" class="nav-link">
<i class="nav-icon bi bi-palette"></i>
<p>Theme Generate</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-seam-fill"></i>
<p>
Widgets
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../widgets/small-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Small Box</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets/info-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>info Box</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets/cards.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Cards</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-clipboard-fill"></i>
<p>
Layout Options
<span class="nav-badge badge text-bg-secondary me-3">6</span>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../layout/unfixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Default Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/fixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Fixed Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/layout-custom-area.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout <small>+ Custom Area </small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/sidebar-mini.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/collapsed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Collapsed</small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/logo-switch.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Logo Switch</small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/layout-rtl.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout RTL</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-tree-fill"></i>
<p>
UI Elements
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../UI/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/icons.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/timeline.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Timeline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-pencil-square"></i>
<p>
Forms
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../forms/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General Elements</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-table"></i>
<p>
Tables
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../tables/simple.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Simple Tables</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Auth
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../examples/lockscreen.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Lockscreen</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">DOCUMENTATIONS</li>
<li class="nav-item">
<a href="../docs/introduction.html" class="nav-link active">
<i class="nav-icon bi bi-download"></i>
<p>Installation</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/layout.html" class="nav-link">
<i class="nav-icon bi bi-grip-horizontal"></i>
<p>Layout</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/color-mode.html" class="nav-link">
<i class="nav-icon bi bi-star-half"></i>
<p>Color Mode</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-ui-checks-grid"></i>
<p>
Components
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../docs/components/main-header.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Header</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/components/main-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Sidebar</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-filetype-js"></i>
<p>
Javascript
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../docs/javascript/treeview.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Treeview</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../docs/browser-support.html" class="nav-link">
<i class="nav-icon bi bi-browser-edge"></i>
<p>Browser Support</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/how-to-contribute.html" class="nav-link">
<i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
<p>How To Contribute</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/faq.html" class="nav-link">
<i class="nav-icon bi bi-question-circle-fill"></i>
<p>FAQ</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/license.html" class="nav-link">
<i class="nav-icon bi bi-patch-check-fill"></i>
<p>License</p>
</a>
</li>
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>
Level 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>
Level 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-info"></i>
<p>Informational</p>
</a>
</li>
</ul>
<!--end::Sidebar Menu-->
</nav>
</div>
<!--end::Sidebar Wrapper-->
</aside>
<!--end::Sidebar-->
<!--begin::App Main-->
<main class="app-main">
<!--begin::App Content Header-->
<div class="app-content-header">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Row-->
<div class="row">
<div class="col-sm-6"><h3 class="mb-0">Introduction</h3></div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Docs</a></li>
<li class="breadcrumb-item active" aria-current="page">Introduction</li>
</ol>
</div>
</div>
<!--end::Row-->
</div>
<!--end::Container-->
</div>
<!--end::App Content Header-->
<!--begin::App Content-->
<div class="app-content">
<!--begin::Container-->
<div class="container-fluid">
<h2 id="quick-start">Quick start</h2>
<p>There are multiple ways to install AdminLTE.</p>
<h3 id="download--changelog">Download &amp; Changelog:</h3>
<p>
Always Recommended to download from GitHub latest release
<a href="https://github.com/ColorlibHQ/AdminLTE/releases/latest">AdminLTE 4</a> for
bug free and latest features.<br />
Visit the <a href="https://github.com/ColorlibHQ/AdminLTE/releases">releases</a> page
to view the changelog.<br />
Legacy Releases are
<a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0">AdminLTE 3</a> /
<a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18">AdminLTE 2</a> /
<a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1">AdminLTE 1</a>.
</p>
<h2 id="stable-release">Stable release</h2>
<h3 id="grab-from-jsdelivr-cdn">
Grab from <a href="https://www.jsdelivr.com/package/npm/admin-lte">jsdelivr</a> CDN:
</h3>
<p>
<em
><strong>Important Note</strong>: You needed to add separately cdn links for plugins
in your project.</em
>
</p>
<pre
class="astro-code dark-plus"
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
tabindex="0"
data-language="html"
><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">script</span></span>
<span class="line"><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta3/dist/js/adminlte.min.js&quot;</span></span>
<span class="line"><span style="color:#9CDCFE"> crossorigin</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;anonymous&quot;</span></span>
<span class="line"><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">script</span><span style="color:#808080">&gt;</span></span>
<span class="line"></span></code></pre>
<pre
class="astro-code dark-plus"
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
tabindex="0"
data-language="html"
><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">link</span></span>
<span class="line"><span style="color:#9CDCFE"> rel</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;stylesheet&quot;</span></span>
<span class="line"><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta3/dist/css/adminlte.min.css&quot;</span></span>
<span class="line"><span style="color:#9CDCFE"> crossorigin</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;anonymous&quot;</span></span>
<span class="line"><span style="color:#808080">/&gt;</span></span>
<span class="line"></span></code></pre>
<h3 id="using-the-command-line">Using The Command Line:</h3>
<p>
<em
><strong>Important Note</strong>: To install it via npm/Yarn, you need at least
Node.js 14 or higher.</em
>
</p>
<h4 id="via-npm">Via npm</h4>
<pre
class="astro-code dark-plus"
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
tabindex="0"
data-language="bash"
><code><span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> install</span><span style="color:#CE9178"> admin-lte@4.0.0-beta3</span><span style="color:#569CD6"> --save</span></span>
<span class="line"></span></code></pre>
<h4 id="via-yarn">Via Yarn</h4>
<pre
class="astro-code dark-plus"
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
tabindex="0"
data-language="bash"
><code><span class="line"><span style="color:#DCDCAA">yarn</span><span style="color:#CE9178"> add</span><span style="color:#CE9178"> admin-lte@4.0.0-beta3</span></span>
<span class="line"></span></code></pre>
<h4 id="via-composer">Via Composer</h4>
<pre
class="astro-code dark-plus"
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
tabindex="0"
data-language="bash"
><code><span class="line"><span style="color:#DCDCAA">composer</span><span style="color:#CE9178"> require</span><span style="color:#CE9178"> &quot;almasaeed2010/adminlte=4.0.0-beta3&quot;</span></span>
<span class="line"></span></code></pre>
<h4 id="via-git">Via Git</h4>
<pre
class="astro-code dark-plus"
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
tabindex="0"
data-language="bash"
><code><span class="line"><span style="color:#DCDCAA">git</span><span style="color:#CE9178"> clone</span><span style="color:#CE9178"> https://github.com/ColorlibHQ/AdminLTE.git</span></span>
<span class="line"></span></code></pre>
</div>
<!--end::Container-->
</div>
<!--end::App Content-->
</main>
<!--end::App Main-->
<!--begin::Footer-->
<footer class="app-footer">
<!--begin::To the end-->
<div class="float-end d-none d-sm-inline">Anything you want</div>
<!--end::To the end-->
<!--begin::Copyright-->
<strong>
Copyright &copy; 2014-2024&nbsp;
<a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
</strong>
All rights reserved.
<!--end::Copyright-->
</footer>
<!--end::Footer-->
</div>
<!--end::App Wrapper-->
<!--begin::Script-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="../../../dist/js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
<!--end::OverlayScrollbars Configure-->
<!--end::Script-->
</body>
<!--end::Body-->
</html>

View File

@ -0,0 +1,847 @@
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Treeview Plugin | AdminLTE 4</title>
<!--begin::Primary Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="Treeview Plugin | AdminLTE 4" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
/>
<meta
name="keywords"
content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="../../../../dist/css/adminlte.css" />
<!--end::Required Plugin(AdminLTE)-->
<style>
[data-astro-image] {
width: 100%;
height: auto;
object-fit: var(--fit);
object-position: var(--pos);
aspect-ratio: var(--w) / var(--h);
}
[data-astro-image='responsive'] {
max-width: calc(var(--w) * 1px);
max-height: calc(var(--h) * 1px);
}
[data-astro-image='fixed'] {
width: calc(var(--w) * 1px);
height: calc(var(--h) * 1px);
}
</style>
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<!--begin::App Wrapper-->
<div class="app-wrapper">
<!--begin::Header-->
<nav class="app-header navbar navbar-expand bg-body">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Start Navbar Links-->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
<i class="bi bi-list"></i>
</a>
</li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
</ul>
<!--end::Start Navbar Links-->
<!--begin::End Navbar Links-->
<ul class="navbar-nav ms-auto">
<!--begin::Navbar Search-->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="bi bi-search"></i>
</a>
</li>
<!--end::Navbar Search-->
<!--begin::Messages Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-chat-text"></i>
<span class="navbar-badge badge text-bg-danger">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../../dist/assets/img/user1-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end fs-7 text-danger"
><i class="bi bi-star-fill"></i
></span>
</h3>
<p class="fs-7">Call me whenever you can...</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../../dist/assets/img/user8-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end fs-7 text-secondary">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">I got your message bro</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../../dist/assets/img/user3-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end fs-7 text-warning">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">The subject goes here</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!--end::Messages Dropdown Menu-->
<!--begin::Notifications Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-bell-fill"></i>
<span class="navbar-badge badge text-bg-warning">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-envelope me-2"></i> 4 new messages
<span class="float-end text-secondary fs-7">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-people-fill me-2"></i> 8 friend requests
<span class="float-end text-secondary fs-7">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
<span class="float-end text-secondary fs-7">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer"> See All Notifications </a>
</div>
</li>
<!--end::Notifications Dropdown Menu-->
<!--begin::Fullscreen Toggle-->
<li class="nav-item">
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
</a>
</li>
<!--end::Fullscreen Toggle-->
<!--begin::User Menu Dropdown-->
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img
src="../../../../dist/assets/img/user2-160x160.jpg"
class="user-image rounded-circle shadow"
alt="User Image"
/>
<span class="d-none d-md-inline">Alexander Pierce</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<!--begin::User Image-->
<li class="user-header text-bg-primary">
<img
src="../../../../dist/assets/img/user2-160x160.jpg"
class="rounded-circle shadow"
alt="User Image"
/>
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2023</small>
</p>
</li>
<!--end::User Image-->
<!--begin::Menu Body-->
<li class="user-body">
<!--begin::Row-->
<div class="row">
<div class="col-4 text-center"><a href="#">Followers</a></div>
<div class="col-4 text-center"><a href="#">Sales</a></div>
<div class="col-4 text-center"><a href="#">Friends</a></div>
</div>
<!--end::Row-->
</li>
<!--end::Menu Body-->
<!--begin::Menu Footer-->
<li class="user-footer">
<a href="#" class="btn btn-default btn-flat">Profile</a>
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
</li>
<!--end::Menu Footer-->
</ul>
</li>
<!--end::User Menu Dropdown-->
</ul>
<!--end::End Navbar Links-->
</div>
<!--end::Container-->
</nav>
<!--end::Header-->
<!--begin::Sidebar-->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<!--begin::Sidebar Brand-->
<div class="sidebar-brand">
<!--begin::Brand Link-->
<a href="../../index.html" class="brand-link">
<!--begin::Brand Image-->
<img
src="../../../../dist/assets/img/AdminLTELogo.png"
alt="AdminLTE Logo"
class="brand-image opacity-75 shadow"
/>
<!--end::Brand Image-->
<!--begin::Brand Text-->
<span class="brand-text fw-light">AdminLTE 4</span>
<!--end::Brand Text-->
</a>
<!--end::Brand Link-->
</div>
<!--end::Sidebar Brand-->
<!--begin::Sidebar Wrapper-->
<div class="sidebar-wrapper">
<nav class="mt-2">
<!--begin::Sidebar Menu-->
<ul
class="nav sidebar-menu flex-column"
data-lte-toggle="treeview"
role="menu"
data-accordion="false"
>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-speedometer"></i>
<p>
Dashboard
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../index.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="../../index2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="../../index3.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../../generate/theme.html" class="nav-link">
<i class="nav-icon bi bi-palette"></i>
<p>Theme Generate</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-seam-fill"></i>
<p>
Widgets
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../widgets/small-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Small Box</p>
</a>
</li>
<li class="nav-item">
<a href="../../widgets/info-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>info Box</p>
</a>
</li>
<li class="nav-item">
<a href="../../widgets/cards.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Cards</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-clipboard-fill"></i>
<p>
Layout Options
<span class="nav-badge badge text-bg-secondary me-3">6</span>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../layout/unfixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Default Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../../layout/fixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Fixed Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../../layout/layout-custom-area.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout <small>+ Custom Area </small></p>
</a>
</li>
<li class="nav-item">
<a href="../../layout/sidebar-mini.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini</p>
</a>
</li>
<li class="nav-item">
<a href="../../layout/collapsed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Collapsed</small></p>
</a>
</li>
<li class="nav-item">
<a href="../../layout/logo-switch.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Logo Switch</small></p>
</a>
</li>
<li class="nav-item">
<a href="../../layout/layout-rtl.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout RTL</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-tree-fill"></i>
<p>
UI Elements
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../UI/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="../../UI/icons.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="../../UI/timeline.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Timeline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-pencil-square"></i>
<p>
Forms
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../forms/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General Elements</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-table"></i>
<p>
Tables
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../tables/simple.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Simple Tables</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Auth
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../examples/login.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../../examples/register.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../examples/login-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../../examples/register-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../../examples/lockscreen.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Lockscreen</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">DOCUMENTATIONS</li>
<li class="nav-item">
<a href="../../docs/introduction.html" class="nav-link">
<i class="nav-icon bi bi-download"></i>
<p>Installation</p>
</a>
</li>
<li class="nav-item">
<a href="../../docs/layout.html" class="nav-link">
<i class="nav-icon bi bi-grip-horizontal"></i>
<p>Layout</p>
</a>
</li>
<li class="nav-item">
<a href="../../docs/color-mode.html" class="nav-link">
<i class="nav-icon bi bi-star-half"></i>
<p>Color Mode</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-ui-checks-grid"></i>
<p>
Components
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../docs/components/main-header.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Header</p>
</a>
</li>
<li class="nav-item">
<a href="../../docs/components/main-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Sidebar</p>
</a>
</li>
</ul>
</li>
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon bi bi-filetype-js"></i>
<p>
Javascript
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../docs/javascript/treeview.html" class="nav-link active">
<i class="nav-icon bi bi-circle"></i>
<p>Treeview</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../../docs/browser-support.html" class="nav-link">
<i class="nav-icon bi bi-browser-edge"></i>
<p>Browser Support</p>
</a>
</li>
<li class="nav-item">
<a href="../../docs/how-to-contribute.html" class="nav-link">
<i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
<p>How To Contribute</p>
</a>
</li>
<li class="nav-item">
<a href="../../docs/faq.html" class="nav-link">
<i class="nav-icon bi bi-question-circle-fill"></i>
<p>FAQ</p>
</a>
</li>
<li class="nav-item">
<a href="../../docs/license.html" class="nav-link">
<i class="nav-icon bi bi-patch-check-fill"></i>
<p>License</p>
</a>
</li>
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>
Level 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>
Level 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-info"></i>
<p>Informational</p>
</a>
</li>
</ul>
<!--end::Sidebar Menu-->
</nav>
</div>
<!--end::Sidebar Wrapper-->
</aside>
<!--end::Sidebar-->
<!--begin::App Main-->
<main class="app-main">
<!--begin::App Content Header-->
<div class="app-content-header">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Row-->
<div class="row">
<div class="col-sm-6"><h3 class="mb-0">Treeview Plugin</h3></div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Docs</a></li>
<li class="breadcrumb-item active" aria-current="page">Treeview Plugin</li>
</ol>
</div>
</div>
<!--end::Row-->
</div>
<!--end::Container-->
</div>
<!--end::App Content Header-->
<!--begin::App Content-->
<div class="app-content">
<!--begin::Container-->
<div class="container-fluid">
<p>
The Treeview plugin converts a nested list into a tree view where sub menus can be
expanded.
</p>
<h5 id="usage">Usage</h5>
<p>This plugin can be used as the data api.</p>
<p><strong>Data API</strong></p>
<p>
Add <code>data-lte-toggle=&quot;treeview&quot;</code> to any ul or ol element to
activate the plugin.
</p>
<pre
class="astro-code dark-plus"
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
tabindex="0"
data-language="html"
><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">ul</span><span style="color:#9CDCFE"> data-lte-toggle</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;treeview&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">li</span><span style="color:#808080">&gt;&lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;#&quot;</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">One Level</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">li</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">li</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-item menu-open&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-link&quot;</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;#&quot;</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Multilevel</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">ul</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-treeview&quot;</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">li</span><span style="color:#808080">&gt;&lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;#&quot;</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Level 2</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">li</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">ul</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">li</span><span style="color:#808080">&gt;</span></span>
<span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">ul</span><span style="color:#808080">&gt;</span></span>
<span class="line"></span></code></pre>
<h5 id="example">Example</h5>
<ul data-lte-toggle="treeview">
<li><a href="#">One Level</a></li>
<li class="nav-item menu-open">
<a class="nav-link" href="#"><p>Multilevel</p></a>
<ul class="nav-treeview">
<li><a href="#">Level 2</a></li>
</ul>
</li>
</ul>
</div>
<!--end::Container-->
</div>
<!--end::App Content-->
</main>
<!--end::App Main-->
<!--begin::Footer-->
<footer class="app-footer">
<!--begin::To the end-->
<div class="float-end d-none d-sm-inline">Anything you want</div>
<!--end::To the end-->
<!--begin::Copyright-->
<strong>
Copyright &copy; 2014-2024&nbsp;
<a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
</strong>
All rights reserved.
<!--end::Copyright-->
</footer>
<!--end::Footer-->
</div>
<!--end::App Wrapper-->
<!--begin::Script-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="../../../../dist/js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
<!--end::OverlayScrollbars Configure-->
<!--end::Script-->
</body>
<!--end::Body-->
</html>

View File

@ -0,0 +1,839 @@
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout | AdminLTE 4</title>
<!--begin::Primary Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="Layout | AdminLTE 4" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
/>
<meta
name="keywords"
content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="../../../dist/css/adminlte.css" />
<!--end::Required Plugin(AdminLTE)-->
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<!--begin::App Wrapper-->
<div class="app-wrapper">
<!--begin::Header-->
<nav class="app-header navbar navbar-expand bg-body">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Start Navbar Links-->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
<i class="bi bi-list"></i>
</a>
</li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
</ul>
<!--end::Start Navbar Links-->
<!--begin::End Navbar Links-->
<ul class="navbar-nav ms-auto">
<!--begin::Navbar Search-->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="bi bi-search"></i>
</a>
</li>
<!--end::Navbar Search-->
<!--begin::Messages Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-chat-text"></i>
<span class="navbar-badge badge text-bg-danger">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user1-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end fs-7 text-danger"
><i class="bi bi-star-fill"></i
></span>
</h3>
<p class="fs-7">Call me whenever you can...</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user8-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end fs-7 text-secondary">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">I got your message bro</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user3-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end fs-7 text-warning">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">The subject goes here</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!--end::Messages Dropdown Menu-->
<!--begin::Notifications Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-bell-fill"></i>
<span class="navbar-badge badge text-bg-warning">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-envelope me-2"></i> 4 new messages
<span class="float-end text-secondary fs-7">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-people-fill me-2"></i> 8 friend requests
<span class="float-end text-secondary fs-7">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
<span class="float-end text-secondary fs-7">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer"> See All Notifications </a>
</div>
</li>
<!--end::Notifications Dropdown Menu-->
<!--begin::Fullscreen Toggle-->
<li class="nav-item">
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
</a>
</li>
<!--end::Fullscreen Toggle-->
<!--begin::User Menu Dropdown-->
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="user-image rounded-circle shadow"
alt="User Image"
/>
<span class="d-none d-md-inline">Alexander Pierce</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<!--begin::User Image-->
<li class="user-header text-bg-primary">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="rounded-circle shadow"
alt="User Image"
/>
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2023</small>
</p>
</li>
<!--end::User Image-->
<!--begin::Menu Body-->
<li class="user-body">
<!--begin::Row-->
<div class="row">
<div class="col-4 text-center"><a href="#">Followers</a></div>
<div class="col-4 text-center"><a href="#">Sales</a></div>
<div class="col-4 text-center"><a href="#">Friends</a></div>
</div>
<!--end::Row-->
</li>
<!--end::Menu Body-->
<!--begin::Menu Footer-->
<li class="user-footer">
<a href="#" class="btn btn-default btn-flat">Profile</a>
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
</li>
<!--end::Menu Footer-->
</ul>
</li>
<!--end::User Menu Dropdown-->
</ul>
<!--end::End Navbar Links-->
</div>
<!--end::Container-->
</nav>
<!--end::Header-->
<!--begin::Sidebar-->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<!--begin::Sidebar Brand-->
<div class="sidebar-brand">
<!--begin::Brand Link-->
<a href="../index.html" class="brand-link">
<!--begin::Brand Image-->
<img
src="../../../dist/assets/img/AdminLTELogo.png"
alt="AdminLTE Logo"
class="brand-image opacity-75 shadow"
/>
<!--end::Brand Image-->
<!--begin::Brand Text-->
<span class="brand-text fw-light">AdminLTE 4</span>
<!--end::Brand Text-->
</a>
<!--end::Brand Link-->
</div>
<!--end::Sidebar Brand-->
<!--begin::Sidebar Wrapper-->
<div class="sidebar-wrapper">
<nav class="mt-2">
<!--begin::Sidebar Menu-->
<ul
class="nav sidebar-menu flex-column"
data-lte-toggle="treeview"
role="menu"
data-accordion="false"
>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-speedometer"></i>
<p>
Dashboard
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../index.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="../index2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="../index3.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../generate/theme.html" class="nav-link">
<i class="nav-icon bi bi-palette"></i>
<p>Theme Generate</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-seam-fill"></i>
<p>
Widgets
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../widgets/small-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Small Box</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets/info-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>info Box</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets/cards.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Cards</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-clipboard-fill"></i>
<p>
Layout Options
<span class="nav-badge badge text-bg-secondary me-3">6</span>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../layout/unfixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Default Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/fixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Fixed Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/layout-custom-area.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout <small>+ Custom Area </small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/sidebar-mini.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/collapsed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Collapsed</small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/logo-switch.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Logo Switch</small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/layout-rtl.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout RTL</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-tree-fill"></i>
<p>
UI Elements
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../UI/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/icons.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/timeline.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Timeline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-pencil-square"></i>
<p>
Forms
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../forms/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General Elements</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-table"></i>
<p>
Tables
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../tables/simple.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Simple Tables</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Auth
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../examples/lockscreen.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Lockscreen</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">DOCUMENTATIONS</li>
<li class="nav-item">
<a href="../docs/introduction.html" class="nav-link">
<i class="nav-icon bi bi-download"></i>
<p>Installation</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/layout.html" class="nav-link active">
<i class="nav-icon bi bi-grip-horizontal"></i>
<p>Layout</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/color-mode.html" class="nav-link">
<i class="nav-icon bi bi-star-half"></i>
<p>Color Mode</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-ui-checks-grid"></i>
<p>
Components
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../docs/components/main-header.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Header</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/components/main-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Sidebar</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-filetype-js"></i>
<p>
Javascript
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../docs/javascript/treeview.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Treeview</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../docs/browser-support.html" class="nav-link">
<i class="nav-icon bi bi-browser-edge"></i>
<p>Browser Support</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/how-to-contribute.html" class="nav-link">
<i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
<p>How To Contribute</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/faq.html" class="nav-link">
<i class="nav-icon bi bi-question-circle-fill"></i>
<p>FAQ</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/license.html" class="nav-link">
<i class="nav-icon bi bi-patch-check-fill"></i>
<p>License</p>
</a>
</li>
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>
Level 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>
Level 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-info"></i>
<p>Informational</p>
</a>
</li>
</ul>
<!--end::Sidebar Menu-->
</nav>
</div>
<!--end::Sidebar Wrapper-->
</aside>
<!--end::Sidebar-->
<!--begin::App Main-->
<main class="app-main">
<!--begin::App Content Header-->
<div class="app-content-header">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Row-->
<div class="row">
<div class="col-sm-6"><h3 class="mb-0">Layout</h3></div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Docs</a></li>
<li class="breadcrumb-item active" aria-current="page">Layout</li>
</ol>
</div>
</div>
<!--end::Row-->
</div>
<!--end::Container-->
</div>
<!--end::App Content Header-->
<!--begin::App Content-->
<div class="app-content">
<div class="container-fluid">
<div class="callout callout-info mb-4">
<h5 class="fw-bold">Tips</h5>
<p>
The
<a
href="/starter.html"
target="_blank"
rel="noopener noreferrer"
class="callout-link"
>
starter page
</a>
is a good place to start building your app if youd like to start from scratch.
</p>
</div>
<p>The layout consists of five major parts:</p>
<ul>
<li>Wrapper <code>.app-wrapper</code> . A div that wraps the whole site.</li>
<li>Main Header <code>.app-header</code> . Contains the logo and navbar.</li>
<li>
Main Sidebar <code>.app-sidebar</code> . Contains the sidebar user panel and menu.
</li>
<li>Content <code>.app-main</code> . Contains the page header and content.</li>
<li>Main Footer <code>.app-footer</code> . Contains the footer.</li>
</ul>
<h4>Layout Options</h4>
<p>
AdminLTE v4 provides a set of options to apply to your main layout. Each one of these
classes can be added to the
<code>body</code> tag to get the desired goal.
</p>
<ul>
<li>
Fixed Sidebar: use the class <code>.layout-fixed</code> to get a fixed sidebar.
</li>
<li>
Mini Sidebar on Toggle: use the class
<code>.sidebar-expand-* .sidebar-mini</code>
to have a collapsed sidebar upon loading.
</li>
<li>
Collapsed Sidebar: use the class
<code>.sidebar-expand-* .sidebar-mini .sidebar-collapse</code> to have a collapsed
sidebar upon loading.
</li>
</ul>
</div>
<!-- /.container-fluid -->
</div>
<!--end::App Content-->
</main>
<!--end::App Main-->
<!--begin::Footer-->
<footer class="app-footer">
<!--begin::To the end-->
<div class="float-end d-none d-sm-inline">Anything you want</div>
<!--end::To the end-->
<!--begin::Copyright-->
<strong>
Copyright &copy; 2014-2024&nbsp;
<a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
</strong>
All rights reserved.
<!--end::Copyright-->
</footer>
<!--end::Footer-->
</div>
<!--end::App Wrapper-->
<!--begin::Script-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="../../../dist/js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
<!--end::OverlayScrollbars Configure-->
<!--end::Script-->
</body>
<!--end::Body-->
</html>

View File

@ -0,0 +1,830 @@
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>License | AdminLTE 4</title>
<!--begin::Primary Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="License | AdminLTE 4" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
/>
<meta
name="keywords"
content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="../../../dist/css/adminlte.css" />
<!--end::Required Plugin(AdminLTE)-->
<style>
[data-astro-image] {
width: 100%;
height: auto;
object-fit: var(--fit);
object-position: var(--pos);
aspect-ratio: var(--w) / var(--h);
}
[data-astro-image='responsive'] {
max-width: calc(var(--w) * 1px);
max-height: calc(var(--h) * 1px);
}
[data-astro-image='fixed'] {
width: calc(var(--w) * 1px);
height: calc(var(--h) * 1px);
}
</style>
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<!--begin::App Wrapper-->
<div class="app-wrapper">
<!--begin::Header-->
<nav class="app-header navbar navbar-expand bg-body">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Start Navbar Links-->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
<i class="bi bi-list"></i>
</a>
</li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
</ul>
<!--end::Start Navbar Links-->
<!--begin::End Navbar Links-->
<ul class="navbar-nav ms-auto">
<!--begin::Navbar Search-->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="bi bi-search"></i>
</a>
</li>
<!--end::Navbar Search-->
<!--begin::Messages Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-chat-text"></i>
<span class="navbar-badge badge text-bg-danger">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user1-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end fs-7 text-danger"
><i class="bi bi-star-fill"></i
></span>
</h3>
<p class="fs-7">Call me whenever you can...</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user8-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end fs-7 text-secondary">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">I got your message bro</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user3-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end fs-7 text-warning">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">The subject goes here</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!--end::Messages Dropdown Menu-->
<!--begin::Notifications Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-bell-fill"></i>
<span class="navbar-badge badge text-bg-warning">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-envelope me-2"></i> 4 new messages
<span class="float-end text-secondary fs-7">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-people-fill me-2"></i> 8 friend requests
<span class="float-end text-secondary fs-7">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
<span class="float-end text-secondary fs-7">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer"> See All Notifications </a>
</div>
</li>
<!--end::Notifications Dropdown Menu-->
<!--begin::Fullscreen Toggle-->
<li class="nav-item">
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
</a>
</li>
<!--end::Fullscreen Toggle-->
<!--begin::User Menu Dropdown-->
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="user-image rounded-circle shadow"
alt="User Image"
/>
<span class="d-none d-md-inline">Alexander Pierce</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<!--begin::User Image-->
<li class="user-header text-bg-primary">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="rounded-circle shadow"
alt="User Image"
/>
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2023</small>
</p>
</li>
<!--end::User Image-->
<!--begin::Menu Body-->
<li class="user-body">
<!--begin::Row-->
<div class="row">
<div class="col-4 text-center"><a href="#">Followers</a></div>
<div class="col-4 text-center"><a href="#">Sales</a></div>
<div class="col-4 text-center"><a href="#">Friends</a></div>
</div>
<!--end::Row-->
</li>
<!--end::Menu Body-->
<!--begin::Menu Footer-->
<li class="user-footer">
<a href="#" class="btn btn-default btn-flat">Profile</a>
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
</li>
<!--end::Menu Footer-->
</ul>
</li>
<!--end::User Menu Dropdown-->
</ul>
<!--end::End Navbar Links-->
</div>
<!--end::Container-->
</nav>
<!--end::Header-->
<!--begin::Sidebar-->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<!--begin::Sidebar Brand-->
<div class="sidebar-brand">
<!--begin::Brand Link-->
<a href="../index.html" class="brand-link">
<!--begin::Brand Image-->
<img
src="../../../dist/assets/img/AdminLTELogo.png"
alt="AdminLTE Logo"
class="brand-image opacity-75 shadow"
/>
<!--end::Brand Image-->
<!--begin::Brand Text-->
<span class="brand-text fw-light">AdminLTE 4</span>
<!--end::Brand Text-->
</a>
<!--end::Brand Link-->
</div>
<!--end::Sidebar Brand-->
<!--begin::Sidebar Wrapper-->
<div class="sidebar-wrapper">
<nav class="mt-2">
<!--begin::Sidebar Menu-->
<ul
class="nav sidebar-menu flex-column"
data-lte-toggle="treeview"
role="menu"
data-accordion="false"
>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-speedometer"></i>
<p>
Dashboard
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../index.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="../index2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="../index3.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../generate/theme.html" class="nav-link">
<i class="nav-icon bi bi-palette"></i>
<p>Theme Generate</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-seam-fill"></i>
<p>
Widgets
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../widgets/small-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Small Box</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets/info-box.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>info Box</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets/cards.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Cards</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-clipboard-fill"></i>
<p>
Layout Options
<span class="nav-badge badge text-bg-secondary me-3">6</span>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../layout/unfixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Default Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/fixed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Fixed Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/layout-custom-area.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout <small>+ Custom Area </small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/sidebar-mini.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/collapsed-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Collapsed</small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/logo-switch.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Sidebar Mini <small>+ Logo Switch</small></p>
</a>
</li>
<li class="nav-item">
<a href="../layout/layout-rtl.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Layout RTL</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-tree-fill"></i>
<p>
UI Elements
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../UI/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/icons.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/timeline.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Timeline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-pencil-square"></i>
<p>
Forms
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../forms/general.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>General Elements</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-table"></i>
<p>
Tables
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../tables/simple.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Simple Tables</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Auth
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register-v2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../examples/lockscreen.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Lockscreen</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">DOCUMENTATIONS</li>
<li class="nav-item">
<a href="../docs/introduction.html" class="nav-link">
<i class="nav-icon bi bi-download"></i>
<p>Installation</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/layout.html" class="nav-link">
<i class="nav-icon bi bi-grip-horizontal"></i>
<p>Layout</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/color-mode.html" class="nav-link">
<i class="nav-icon bi bi-star-half"></i>
<p>Color Mode</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-ui-checks-grid"></i>
<p>
Components
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../docs/components/main-header.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Header</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/components/main-sidebar.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Main Sidebar</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-filetype-js"></i>
<p>
Javascript
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../docs/javascript/treeview.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Treeview</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../docs/browser-support.html" class="nav-link">
<i class="nav-icon bi bi-browser-edge"></i>
<p>Browser Support</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/how-to-contribute.html" class="nav-link">
<i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
<p>How To Contribute</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/faq.html" class="nav-link">
<i class="nav-icon bi bi-question-circle-fill"></i>
<p>FAQ</p>
</a>
</li>
<li class="nav-item">
<a href="../docs/license.html" class="nav-link active">
<i class="nav-icon bi bi-patch-check-fill"></i>
<p>License</p>
</a>
</li>
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>
Level 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>
Level 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle text-info"></i>
<p>Informational</p>
</a>
</li>
</ul>
<!--end::Sidebar Menu-->
</nav>
</div>
<!--end::Sidebar Wrapper-->
</aside>
<!--end::Sidebar-->
<!--begin::App Main-->
<main class="app-main">
<!--begin::App Content Header-->
<div class="app-content-header">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Row-->
<div class="row">
<div class="col-sm-6"><h3 class="mb-0">License</h3></div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Docs</a></li>
<li class="breadcrumb-item active" aria-current="page">License</li>
</ol>
</div>
</div>
<!--end::Row-->
</div>
<!--end::Container-->
</div>
<!--end::App Content Header-->
<!--begin::App Content-->
<div class="app-content">
<!--begin::Container-->
<div class="container-fluid">
<p>
AdminLTE is an open source project that is licensed under the
<a href="https://opensource.org/licenses/MIT">MIT license</a>. This allows you to do
pretty much anything you want as long as you include the copyright in “all copies or
substantial portions of the Software.” Attribution is not required (though very much
appreciated).
</p>
<h5 class="text-bold text-dark mt-3">
What You Are <span class="text-success">Allowed</span> To Do With AdminLTE
</h5>
<ul>
<li>Use in commercial projects.</li>
<li>Use in personal/private projects.</li>
<li>Modify and change the work.</li>
<li>Distribute the code.</li>
<li>
Sublicense: incorporate the work into something that has a more restrictive license.
</li>
</ul>
</div>
<!--end::Container-->
</div>
<!--end::App Content-->
</main>
<!--end::App Main-->
<!--begin::Footer-->
<footer class="app-footer">
<!--begin::To the end-->
<div class="float-end d-none d-sm-inline">Anything you want</div>
<!--end::To the end-->
<!--begin::Copyright-->
<strong>
Copyright &copy; 2014-2024&nbsp;
<a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
</strong>
All rights reserved.
<!--end::Copyright-->
</footer>
<!--end::Footer-->
</div>
<!--end::App Wrapper-->
<!--begin::Script-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="../../../dist/js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
<!--end::OverlayScrollbars Configure-->
<!--end::Script-->
</body>
<!--end::Body-->
</html>

View File

@ -0,0 +1,132 @@
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AdminLTE 4 | Lockscreen</title>
<!--begin::Primary Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="AdminLTE 4 | Lockscreen" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
/>
<meta
name="keywords"
content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="../../../dist/css/adminlte.css" />
<!--end::Required Plugin(AdminLTE)-->
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="lockscreen bg-body-secondary">
<div class="lockscreen-wrapper">
<div class="lockscreen-logo">
<a href="../index2.html"><b>Admin</b>LTE</a>
</div>
<div class="lockscreen-name">John Doe</div>
<div class="lockscreen-item">
<div class="lockscreen-image">
<img src="../../../dist/assets/img/user1-128x128.jpg" alt="User Image" />
</div>
<form class="lockscreen-credentials">
<div class="input-group">
<input type="password" class="form-control shadow-none" placeholder="password" />
<div class="input-group-text border-0 bg-transparent px-1">
<button type="button" class="btn shadow-none">
<i class="bi bi-box-arrow-right text-body-secondary"></i>
</button>
</div>
</div>
</form>
</div>
<div class="help-block text-center">Enter your password to retrieve your session</div>
<div class="text-center">
<a href="login.html" class="text-decoration-none">Or sign in as a different user</a>
</div>
<div class="lockscreen-footer text-center">
Copyright © 2014-2024 &nbsp;
<b
><a
href="https://adminlte.io"
class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover"
>AdminLTE.io</a
></b
>
<br />
All rights reserved
</div>
</div>
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="undefined/js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
<!--end::OverlayScrollbars Configure-->
</body>
<!--end::Body-->
</html>

View File

@ -0,0 +1,160 @@
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AdminLTE 4 | Login Page v2</title>
<!--begin::Primary Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="AdminLTE 4 | Login Page v2" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
/>
<meta
name="keywords"
content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="../../../dist/css/adminlte.css" />
<!--end::Required Plugin(AdminLTE)-->
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="login-page bg-body-secondary">
<div class="login-box">
<div class="card card-outline card-primary">
<div class="card-header">
<a
href="../index2.html"
class="link-dark text-center link-offset-2 link-opacity-100 link-opacity-50-hover"
>
<h1 class="mb-0"><b>Admin</b>LTE</h1>
</a>
</div>
<div class="card-body login-card-body">
<p class="login-box-msg">Sign in to start your session</p>
<form action="../index3.html" method="post">
<div class="input-group mb-1">
<div class="form-floating">
<input id="loginEmail" type="email" class="form-control" value="" placeholder="" />
<label for="loginEmail">Email</label>
</div>
<div class="input-group-text"><span class="bi bi-envelope"></span></div>
</div>
<div class="input-group mb-1">
<div class="form-floating">
<input id="loginPassword" type="password" class="form-control" placeholder="" />
<label for="loginPassword">Password</label>
</div>
<div class="input-group-text"><span class="bi bi-lock-fill"></span></div>
</div>
<!--begin::Row-->
<div class="row">
<div class="col-8 d-inline-flex align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
<label class="form-check-label" for="flexCheckDefault"> Remember Me </label>
</div>
</div>
<!-- /.col -->
<div class="col-4">
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">Sign In</button>
</div>
</div>
<!-- /.col -->
</div>
<!--end::Row-->
</form>
<div class="social-auth-links text-center mb-3 d-grid gap-2">
<p>- OR -</p>
<a href="#" class="btn btn-primary">
<i class="bi bi-facebook me-2"></i> Sign in using Facebook
</a>
<a href="#" class="btn btn-danger">
<i class="bi bi-google me-2"></i> Sign in using Google+
</a>
</div>
<!-- /.social-auth-links -->
<p class="mb-1"><a href="forgot-password.html">I forgot my password</a></p>
<p class="mb-0">
<a href="register.html" class="text-center"> Register a new membership </a>
</p>
</div>
<!-- /.login-card-body -->
</div>
</div>
<!-- /.login-box -->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="../../../dist/js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
<!--end::OverlayScrollbars Configure-->
<!--end::Script-->
</body>
<!--end::Body-->
</html>

View File

@ -0,0 +1,150 @@
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AdminLTE 4 | Login Page</title>
<!--begin::Primary Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="AdminLTE 4 | Login Page" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
/>
<meta
name="keywords"
content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="../../../dist/css/adminlte.css" />
<!--end::Required Plugin(AdminLTE)-->
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="login-page bg-body-secondary">
<div class="login-box">
<div class="login-logo">
<a href="../index2.html"><b>Admin</b>LTE</a>
</div>
<!-- /.login-logo -->
<div class="card">
<div class="card-body login-card-body">
<p class="login-box-msg">Sign in to start your session</p>
<form action="../index3.html" method="post">
<div class="input-group mb-3">
<input type="email" class="form-control" placeholder="Email" />
<div class="input-group-text"><span class="bi bi-envelope"></span></div>
</div>
<div class="input-group mb-3">
<input type="password" class="form-control" placeholder="Password" />
<div class="input-group-text"><span class="bi bi-lock-fill"></span></div>
</div>
<!--begin::Row-->
<div class="row">
<div class="col-8">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
<label class="form-check-label" for="flexCheckDefault"> Remember Me </label>
</div>
</div>
<!-- /.col -->
<div class="col-4">
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">Sign In</button>
</div>
</div>
<!-- /.col -->
</div>
<!--end::Row-->
</form>
<div class="social-auth-links text-center mb-3 d-grid gap-2">
<p>- OR -</p>
<a href="#" class="btn btn-primary">
<i class="bi bi-facebook me-2"></i> Sign in using Facebook
</a>
<a href="#" class="btn btn-danger">
<i class="bi bi-google me-2"></i> Sign in using Google+
</a>
</div>
<!-- /.social-auth-links -->
<p class="mb-1"><a href="forgot-password.html">I forgot my password</a></p>
<p class="mb-0">
<a href="register.html" class="text-center"> Register a new membership </a>
</p>
</div>
<!-- /.login-card-body -->
</div>
</div>
<!-- /.login-box -->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="../../../dist/js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
<!--end::OverlayScrollbars Configure-->
<!--end::Script-->
</body>
<!--end::Body-->
</html>

View File

@ -0,0 +1,169 @@
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AdminLTE 4 | Register Page v2</title>
<!--begin::Primary Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="AdminLTE 4 | Register Page v2" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
/>
<meta
name="keywords"
content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="../../../dist/css/adminlte.css" />
<!--end::Required Plugin(AdminLTE)-->
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="register-page bg-body-secondary">
<div class="register-box">
<!-- /.register-logo -->
<div class="card card-outline card-primary">
<div class="card-header">
<a
href="../index2.html"
class="link-dark text-center link-offset-2 link-opacity-100 link-opacity-50-hover"
>
<h1 class="mb-0"><b>Admin</b>LTE</h1>
</a>
</div>
<div class="card-body register-card-body">
<p class="register-box-msg">Register a new membership</p>
<form action="../index3.html" method="post">
<div class="input-group mb-1">
<div class="form-floating">
<input id="registerFullName" type="text" class="form-control" placeholder="" />
<label for="registerFullName">Full Name</label>
</div>
<div class="input-group-text"><span class="bi bi-person"></span></div>
</div>
<div class="input-group mb-1">
<div class="form-floating">
<input id="registerEmail" type="email" class="form-control" placeholder="" />
<label for="registerEmail">Email</label>
</div>
<div class="input-group-text"><span class="bi bi-envelope"></span></div>
</div>
<div class="input-group mb-1">
<div class="form-floating">
<input id="registerPassword" type="password" class="form-control" placeholder="" />
<label for="registerPassword">Password</label>
</div>
<div class="input-group-text"><span class="bi bi-lock-fill"></span></div>
</div>
<!--begin::Row-->
<div class="row">
<div class="col-8 d-inline-flex align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
<label class="form-check-label" for="flexCheckDefault">
I agree to the <a href="#">terms</a>
</label>
</div>
</div>
<!-- /.col -->
<div class="col-4">
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">Sign In</button>
</div>
</div>
<!-- /.col -->
</div>
<!--end::Row-->
</form>
<div class="social-auth-links text-center mb-3 d-grid gap-2">
<p>- OR -</p>
<a href="#" class="btn btn-primary">
<i class="bi bi-facebook me-2"></i> Sign in using Facebook
</a>
<a href="#" class="btn btn-danger">
<i class="bi bi-google me-2"></i> Sign in using Google+
</a>
</div>
<!-- /.social-auth-links -->
<p class="mb-0">
<a href="login.html" class="link-primary text-center"> I already have a membership </a>
</p>
</div>
<!-- /.register-card-body -->
</div>
</div>
<!-- /.register-box -->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="../../../dist/js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
<!--end::OverlayScrollbars Configure-->
<!--end::Script-->
</body>
<!--end::Body-->
</html>

View File

@ -0,0 +1,155 @@
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AdminLTE 4 | Register Page</title>
<!--begin::Primary Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="AdminLTE 4 | Register Page" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
/>
<meta
name="keywords"
content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="../../../dist/css/adminlte.css" />
<!--end::Required Plugin(AdminLTE)-->
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="register-page bg-body-secondary">
<div class="register-box">
<div class="register-logo">
<a href="../index2.html"><b>Admin</b>LTE</a>
</div>
<!-- /.register-logo -->
<div class="card">
<div class="card-body register-card-body">
<p class="register-box-msg">Register a new membership</p>
<form action="../index3.html" method="post">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Full Name" />
<div class="input-group-text"><span class="bi bi-person"></span></div>
</div>
<div class="input-group mb-3">
<input type="email" class="form-control" placeholder="Email" />
<div class="input-group-text"><span class="bi bi-envelope"></span></div>
</div>
<div class="input-group mb-3">
<input type="password" class="form-control" placeholder="Password" />
<div class="input-group-text"><span class="bi bi-lock-fill"></span></div>
</div>
<!--begin::Row-->
<div class="row">
<div class="col-8">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
<label class="form-check-label" for="flexCheckDefault">
I agree to the <a href="#">terms</a>
</label>
</div>
</div>
<!-- /.col -->
<div class="col-4">
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">Sign In</button>
</div>
</div>
<!-- /.col -->
</div>
<!--end::Row-->
</form>
<div class="social-auth-links text-center mb-3 d-grid gap-2">
<p>- OR -</p>
<a href="#" class="btn btn-primary">
<i class="bi bi-facebook me-2"></i> Sign in using Facebook
</a>
<a href="#" class="btn btn-danger">
<i class="bi bi-google me-2"></i> Sign in using Google+
</a>
</div>
<!-- /.social-auth-links -->
<p class="mb-0">
<a href="login.html" class="text-center"> I already have a membership </a>
</p>
</div>
<!-- /.register-card-body -->
</div>
</div>
<!-- /.register-box -->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="../../../dist/js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
<!--end::OverlayScrollbars Configure-->
<!--end::Script-->
</body>
<!--end::Body-->
</html>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,737 @@
<!doctype html>
<html lang="en">
<!--begin::Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AdminLTE 4 | Theme Customize</title>
<!--begin::Primary Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="AdminLTE 4 | Theme Customize" />
<meta name="author" content="ColorlibHQ" />
<meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
/>
<meta
name="keywords"
content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
/>
<!--end::Primary Meta Tags-->
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href="../../../dist/css/adminlte.css" />
<!--end::Required Plugin(AdminLTE)-->
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="sidebar-expand-lg bg-body-tertiary">
<!--begin::App Wrapper-->
<div class="app-wrapper">
<!--begin::Header-->
<nav class="app-header navbar navbar-expand bg-body">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Start Navbar Links-->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
<i class="bi bi-list"></i>
</a>
</li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
</ul>
<!--end::Start Navbar Links-->
<!--begin::End Navbar Links-->
<ul class="navbar-nav ms-auto">
<!--begin::Navbar Search-->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="bi bi-search"></i>
</a>
</li>
<!--end::Navbar Search-->
<!--begin::Messages Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-chat-text"></i>
<span class="navbar-badge badge text-bg-danger">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user1-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end fs-7 text-danger"
><i class="bi bi-star-fill"></i
></span>
</h3>
<p class="fs-7">Call me whenever you can...</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user8-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end fs-7 text-secondary">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">I got your message bro</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!--begin::Message-->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user3-128x128.jpg"
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end fs-7 text-warning">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">The subject goes here</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
</p>
</div>
</div>
<!--end::Message-->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!--end::Messages Dropdown Menu-->
<!--begin::Notifications Dropdown Menu-->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-bell-fill"></i>
<span class="navbar-badge badge text-bg-warning">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-envelope me-2"></i> 4 new messages
<span class="float-end text-secondary fs-7">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-people-fill me-2"></i> 8 friend requests
<span class="float-end text-secondary fs-7">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
<span class="float-end text-secondary fs-7">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer"> See All Notifications </a>
</div>
</li>
<!--end::Notifications Dropdown Menu-->
<!--begin::Fullscreen Toggle-->
<li class="nav-item">
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
</a>
</li>
<!--end::Fullscreen Toggle-->
<!--begin::User Menu Dropdown-->
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="user-image rounded-circle shadow"
alt="User Image"
/>
<span class="d-none d-md-inline">Alexander Pierce</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<!--begin::User Image-->
<li class="user-header text-bg-primary">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="rounded-circle shadow"
alt="User Image"
/>
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2023</small>
</p>
</li>
<!--end::User Image-->
<!--begin::Menu Body-->
<li class="user-body">
<!--begin::Row-->
<div class="row">
<div class="col-4 text-center"><a href="#">Followers</a></div>
<div class="col-4 text-center"><a href="#">Sales</a></div>
<div class="col-4 text-center"><a href="#">Friends</a></div>
</div>
<!--end::Row-->
</li>
<!--end::Menu Body-->
<!--begin::Menu Footer-->
<li class="user-footer">
<a href="#" class="btn btn-default btn-flat">Profile</a>
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
</li>
<!--end::Menu Footer-->
</ul>
</li>
<!--end::User Menu Dropdown-->
</ul>
<!--end::End Navbar Links-->
</div>
<!--end::Container-->
</nav>
<!--end::Header-->
<!--begin::Sidebar-->
<aside class="app-sidebar bg-primary shadow" data-bs-theme="dark">
<!--begin::Sidebar Brand-->
<div class="sidebar-brand">
<!--begin::Brand Link-->
<a href="../index.html" class="brand-link">
<!--begin::Brand Image-->
<img
src="../../../dist/assets/img/AdminLTELogo.png"
alt="AdminLTE Logo"
class="brand-image opacity-75 shadow"
/>
<!--end::Brand Image-->
<!--begin::Brand Text-->
<span class="brand-text fw-light">AdminLTE 4</span>
<!--end::Brand Text-->
</a>
<!--end::Brand Link-->
</div>
<!--end::Sidebar Brand-->
<!--begin::Sidebar Wrapper-->
<div class="sidebar-wrapper">
<nav class="mt-2">
<!--begin::Sidebar Menu-->
<ul
class="nav sidebar-menu flex-column"
data-lte-toggle="treeview"
role="menu"
data-accordion="false"
>
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>
Level 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>
Level 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-record-circle-fill"></i>
<p>Level 3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Level 2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>Level 1</p>
</a>
</li>
</ul>
<!--end::Sidebar Menu-->
</nav>
</div>
<!--end::Sidebar Wrapper-->
</aside>
<!--end::Sidebar-->
<!--begin::App Main-->
<main class="app-main">
<!--begin::App Content Header-->
<div class="app-content-header">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Row-->
<div class="row">
<!--begin::Col-->
<div class="col-sm-6"><h3 class="mb-0">Theme Customize</h3></div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Theme Customize</li>
</ol>
</div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Container-->
</div>
<!--end::App Content Header-->
<!--begin::App Content-->
<div class="app-content">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Row-->
<div class="row">
<!--begin::Col-->
<div class="col-12">
<!--begin::Card-->
<div class="card">
<!--begin::Card Header-->
<div class="card-header">
<!--begin::Card Title-->
<h3 class="card-title">Sidebar Theme</h3>
<!--end::Card Title-->
<!--begin::Card Toolbar-->
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
<button
type="button"
class="btn btn-tool"
data-lte-toggle="card-remove"
title="Remove"
>
<i class="bi bi-x-lg"></i>
</button>
</div>
<!--end::Card Toolbar-->
</div>
<!--end::Card Header-->
<!--begin::Card Body-->
<div class="card-body">
<!--begin::Row-->
<div class="row">
<!--begin::Col-->
<div class="col-md-3">
<select
id="sidebar-color-modes"
class="form-select form-select-lg"
aria-label="Sidebar Color Mode Select"
>
<option value="">---Select---</option>
<option value="dark">Dark</option>
<option value="light">Light</option>
</select>
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-md-3">
<select
id="sidebar-color"
class="form-select form-select-lg"
aria-label="Sidebar Color Select"
>
<option value="">---Select---</option>
</select>
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-md-6"><div id="sidebar-color-code" class="w-100"></div></div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Card Body-->
<!--begin::Card Footer-->
<div class="card-footer">
Check more color in
<a
href="https://getbootstrap.com/docs/5.3/utilities/background/"
target="_blank"
class="link-primary"
>Bootstrap Background Colors</a
>
</div>
<!--end::Card Footer-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card mt-4">
<!--begin::Card Header-->
<div class="card-header">
<!--begin::Card Title-->
<h3 class="card-title">Navbar Theme</h3>
<!--end::Card Title-->
<!--begin::Card Toolbar-->
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
</button>
<button
type="button"
class="btn btn-tool"
data-lte-toggle="card-remove"
title="Remove"
>
<i class="bi bi-x-lg"></i>
</button>
</div>
<!--end::Card Toolbar-->
</div>
<!--end::Card Header-->
<!--begin::Card Body-->
<div class="card-body">
<!--begin::Row-->
<div class="row">
<!--begin::Col-->
<div class="col-md-3">
<select
id="navbar-color-modes"
class="form-select form-select-lg"
aria-label="Navbar Color Mode Select"
>
<option value="">---Select---</option>
<option value="dark">Dark</option>
<option value="light">Light</option>
</select>
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-md-3">
<select
id="navbar-color"
class="form-select form-select-lg"
aria-label="Navbar Color Select"
>
<option value="">---Select---</option>
</select>
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-md-6"><div id="navbar-color-code" class="w-100"></div></div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Card Body-->
<!--begin::Card Footer-->
<div class="card-footer">
Check more color in
<a
href="https://getbootstrap.com/docs/5.3/utilities/background/"
target="_blank"
class="link-primary"
>Bootstrap Background Colors</a
>
</div>
<!--end::Card Footer-->
</div>
<!--end::Card-->
</div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Container-->
</div>
<!--end::App Content-->
</main>
<!--end::App Main-->
<!--begin::Footer-->
<footer class="app-footer">
<!--begin::To the end-->
<div class="float-end d-none d-sm-inline">Anything you want</div>
<!--end::To the end-->
<!--begin::Copyright-->
<strong>
Copyright &copy; 2014-2024&nbsp;
<a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
</strong>
All rights reserved.
<!--end::Copyright-->
</footer>
<!--end::Footer-->
</div>
<!--end::App Wrapper-->
<!--begin::Script-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="../../../dist/js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
</script>
<!--end::OverlayScrollbars Configure-->
<script>
document.addEventListener('DOMContentLoaded', () => {
const appSidebar = document.querySelector('.app-sidebar');
const sidebarColorModes = document.querySelector('#sidebar-color-modes');
const sidebarColor = document.querySelector('#sidebar-color');
const sidebarColorCode = document.querySelector('#sidebar-color-code');
const themeBg = [
'bg-primary',
'bg-primary-subtle',
'bg-secondary',
'bg-secondary-subtle',
'bg-success',
'bg-success-subtle',
'bg-danger',
'bg-danger-subtle',
'bg-warning',
'bg-warning-subtle',
'bg-info',
'bg-info-subtle',
'bg-light',
'bg-light-subtle',
'bg-dark',
'bg-dark-subtle',
'bg-body-secondary',
'bg-body-tertiary',
'bg-body',
'bg-black',
'bg-white',
'bg-transparent',
];
// loop through each option themeBg array
document.querySelector('#sidebar-color').innerHTML = themeBg.map((bg) => {
// return option element with value and text
return `<option value="${bg}" class="text-${bg}">${bg}</option>`;
});
let sidebarColorMode = '';
let sidebarBg = '';
function updateSidebar() {
appSidebar.setAttribute('data-bs-theme', sidebarColorMode);
sidebarColorCode.innerHTML = `<pre><code class="language-html">&lt;aside class="app-sidebar ${sidebarBg}" data-bs-theme="${sidebarColorMode}"&gt;...&lt;/aside&gt;</code></pre>`;
}
sidebarColorModes.addEventListener('input', (event) => {
sidebarColorMode = event.target.value;
updateSidebar();
});
sidebarColor.addEventListener('input', (event) => {
sidebarBg = event.target.value;
themeBg.forEach((className) => {
appSidebar.classList.remove(className);
});
if (themeBg.includes(sidebarBg)) {
appSidebar.classList.add(sidebarBg);
}
updateSidebar();
});
});
document.addEventListener('DOMContentLoaded', () => {
const appNavbar = document.querySelector('.app-header');
const navbarColorModes = document.querySelector('#navbar-color-modes');
const navbarColor = document.querySelector('#navbar-color');
const navbarColorCode = document.querySelector('#navbar-color-code');
const themeBg = [
'bg-primary',
'bg-primary-subtle',
'bg-secondary',
'bg-secondary-subtle',
'bg-success',
'bg-success-subtle',
'bg-danger',
'bg-danger-subtle',
'bg-warning',
'bg-warning-subtle',
'bg-info',
'bg-info-subtle',
'bg-light',
'bg-light-subtle',
'bg-dark',
'bg-dark-subtle',
'bg-body-secondary',
'bg-body-tertiary',
'bg-body',
'bg-black',
'bg-white',
'bg-transparent',
];
// loop through each option themeBg array
document.querySelector('#navbar-color').innerHTML = themeBg.map((bg) => {
// return option element with value and text
return `<option value="${bg}" class="text-${bg}">${bg}</option>`;
});
let navbarColorMode = '';
let navbarBg = '';
function updateNavbar() {
appNavbar.setAttribute('data-bs-theme', navbarColorMode);
navbarColorCode.innerHTML = `<pre><code class="language-html">&lt;nav class="app-header navbar navbar-expand ${navbarBg}" data-bs-theme="${navbarColorMode}"&gt;...&lt;/nav&gt;</code></pre>`;
}
navbarColorModes.addEventListener('input', (event) => {
navbarColorMode = event.target.value;
updateNavbar();
});
navbarColor.addEventListener('input', (event) => {
navbarBg = event.target.value;
themeBg.forEach((className) => {
appNavbar.classList.remove(className);
});
if (themeBg.includes(navbarBg)) {
appNavbar.classList.add(navbarBg);
}
updateNavbar();
});
});
</script>
<!--end::Script-->
</body>
<!--end::Body-->
</html>

Some files were not shown because too many files have changed in this diff Show More