feat: initial commit - Band Management application

This commit is contained in:
2026-01-06 03:11:46 +01:00
commit 34e12e00b3
24543 changed files with 3991790 additions and 0 deletions

View File

@@ -0,0 +1,105 @@
/*
* demo.css
* File include item demo only specific css only
******************************************************************************/
.menu .app-brand.demo {
height: 64px;
}
.app-brand-logo.demo svg {
width: 34px;
height: 24px;
}
.app-brand-text.demo {
font-size: 1.375rem;
}
/* ! For .layout-navbar-fixed added fix padding top to .layout-page */
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
padding-top: 64px !important;
}
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
padding-top: 72px !important;
}
/* Navbar page z-index issue solution */
.content-wrapper .navbar {
z-index: auto;
}
/*
* Content
******************************************************************************/
.demo-blocks > * {
display: block !important;
}
.demo-inline-spacing > * {
margin: 1rem 0.375rem 0 0 !important;
}
/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
margin-top: 1rem !important;
margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
margin-top: 0 !important;
}
.demo-vertical-spacing-lg > * {
margin-top: 1.875rem !important;
margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
margin-top: 0 !important;
}
.demo-vertical-spacing-xl > * {
margin-top: 5rem !important;
margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
margin-top: 0 !important;
}
/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
#dropdown-variation-demo .btn-group .text-truncate {
width: 254px;
position: relative;
}
#dropdown-variation-demo .btn-group .text-truncate::after {
position: absolute;
top: 45%;
right: 0.65rem;
}
}
/*
* Layout demo
******************************************************************************/
.layout-demo-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 1rem;
}
.layout-demo-placeholder img {
width: 900px;
}
.layout-demo-info {
text-align: center;
margin-top: 1rem;
}

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="8.8" width="64.7547" y="4.67169" x="19.4209"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87164" x="22.3447"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87164" x="65.5146"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87164" x="71.4014"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87164" x="77.2881"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="40.2264" y="19.6135" x="44.3525"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="19.0455" y="19.6135" x="19.4209"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="65.1591" y="42.4545" x="19.4209"></rect></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="8.8" width="90.6244" y="4.67169" x="6.6875"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="4.90566" y="6.87164" x="10.165"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="4.90566" y="6.87164" x="75.2002"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="4.90566" y="6.87164" x="82.0674"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="4.90566" y="6.87164" x="88.9346"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="55.9476" y="19.6135" x="41.3652"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="26.4888" y="19.6135" x="6.6875"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="90.6244" y="42.4545" x="6.6875"></rect></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="57.5885" width="24.0976" y="4.12146" x="5.20215"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="13.8545" y="16.8697" x="10.3232"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="9.87943" y="25.5618" x="10.3232"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="12.3826" y="34.2538" x="10.3232"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="6.08818" y="42.946" x="10.3232"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="8.09094" y="51.6384" x="10.3232"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="57.5885" width="62.3885" y="4.12134" x="35.5137"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="13.8545" y="14.1833" x="43.7578"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="32.8013" y="22.8753" x="43.7578"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="41.2076" y="31.5674" x="43.7578"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="32.8013" y="40.2593" x="43.7578"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="5.77482" y="48.9517" x="43.7578"></rect></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="57.5885" width="24.0976" y="4.12134" x="73.4756"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="13.8545" y="16.8697" x="78.5986"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="9.87943" y="25.5618" x="82.5713"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="12.3826" y="34.2537" x="80.0693"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="6.08818" y="42.9459" x="86.3633"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="8.09094" y="51.6382" x="84.3613"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="57.5885" width="62.3885" y="4.12146" x="5.20215"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="13.8545" y="14.1833" x="45.709"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="32.8013" y="22.8754" x="26.7617"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="41.2076" y="31.5674" x="18.3555"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="32.8013" y="40.2594" x="26.7617"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="5.77482" y="48.9517" x="53.7881"></rect></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98">
<rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect>
<rect fill-opacity="0.08" fill="currentColor" rx="2" height="8.8" width="64.7547" y="4.67169" x="19.4209"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87164" x="22.3447"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87164" x="65.5146"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87164" x="71.4014"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87164" x="77.2881"></rect>
<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="40.2264" y="19.6135" x="44.3525"></rect>
<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="19.0455" y="19.6135" x="19.4209"></rect>
<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="65.1591" y="42.4545" x="19.4209"></rect>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="46.8212" y="19.6136" x="44.0068"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="22.1679" y="19.6136" x="14.9854"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="75.8413" y="42.4547" x="14.9854"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="9.00999" width="74.1506" y="4.68896" x="14.9248"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="5.38019" width="6.00327" y="6.50403" x="20.0264"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.23064" height="2.46129" width="6.6372" y="7.96356" x="33.877"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.23064" height="2.46129" width="6.6372" y="7.96356" x="48.3652"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.23064" height="2.46129" width="6.6372" y="7.96356" x="62.8506"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.23064" height="2.46129" width="6.6372" y="7.96356" x="77.3379"></rect></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><path fill-opacity="0.04" fill="currentColor" d="M0 4C0 1.79086 1.79086 0 4 0H13.7359V66H4C1.79086 66 0 64.2091 0 62V4Z"></path><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="7.84906" y="23.8839" x="2.94336"></rect><rect fill-opacity="0.3" fill="currentColor" rx="2" height="6.79412" width="6.86793" y="5.88135" x="3.43359"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="7.84906" y="34.4382" x="2.94336"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="7.84906" y="44.9923" x="2.94336"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="7.84906" y="55.5463" x="2.94336"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="8.8" width="75.437" y="4.67169" x="21.4717"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="25.6172"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="78.248"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="84.1348"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="90.0215"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="46.8212" y="19.6134" x="50.4912"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="22.1679" y="19.6134" x="21.4717"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="75.8413" y="42.4545" x="21.4717"></rect></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><path fill-opacity="0.08" fill="currentColor" d="M0 4C0 1.79086 1.79086 0 4 0H27.4717V66H4C1.79086 66 0 64.2091 0 62V4Z"></path><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="23.8839" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="2" height="9.70588" width="9.81132" y="5.88135" x="8.83008"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="34.4381" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="44.9923" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="55.5462" x="4.90625"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="8.8" width="64.7547" y="4.67166" x="34.1152"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="37.0391"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="80.21"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="86.0957"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="91.9824"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="40.2264" y="19.6134" x="58.4844"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="19.0455" y="19.6134" x="34.1152"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="64.7547" y="42.4545" x="34.1152"></rect></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98">
<rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect>
<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="46.8212" y="19.6136" x="44.0068"></rect>
<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="22.1679" y="19.6136" x="14.9854"></rect>
<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="75.8413" y="42.4547" x="14.9854"></rect>
<rect fill-opacity="0.08" fill="currentColor" rx="2" height="9.00999" width="74.1506" y="4.68896" x="14.9248"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1" height="5.38019" width="6.00327" y="6.50403" x="20.0264"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1.23064" height="2.46129" width="6.6372" y="7.96356" x="33.877"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1.23064" height="2.46129" width="6.6372" y="7.96356" x="48.3652"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1.23064" height="2.46129" width="6.6372" y="7.96356" x="62.8506"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1.23064" height="2.46129" width="6.6372" y="7.96356" x="77.3379"></rect>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98">
<rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect>
<path fill-opacity="0.06" fill="currentColor" d="M0 4C0 1.79086 1.79086 0 4 0H13.7359V66H4C1.79086 66 0 64.2091 0 62V4Z"></path>
<rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="7.84906" y="23.8839" x="2.94336"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="2" height="6.79412" width="6.86793" y="5.88135" x="3.43359"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="7.84906" y="34.4382" x="2.94336"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="7.84906" y="44.9923" x="2.94336"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="7.84906" y="55.5463" x="2.94336"></rect>
<rect fill-opacity="0.08" fill="currentColor" rx="2" height="8.8" width="75.437" y="4.67169" x="21.4717"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="25.6172"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="78.248"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="84.1348"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="90.0215"></rect>
<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="46.8212" y="19.6134" x="50.4912"></rect>
<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="22.1679" y="19.6134" x="21.4717"></rect>
<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="75.8413" y="42.4545" x="21.4717"></rect>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98">
<rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect>
<path fill-opacity="0.08" fill="currentColor" d="M0 4C0 1.79086 1.79086 0 4 0H27.4717V66H4C1.79086 66 0 64.2091 0 62V4Z"></path>
<rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="23.8839" x="4.90625"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="2" height="9.70588" width="9.81132" y="5.88135" x="8.83008"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="34.4382" x="4.90625"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="44.9923" x="4.90625"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="55.5463" x="4.90625"></rect>
<rect fill-opacity="0.08" fill="currentColor" rx="2" height="8.8" width="64.7547" y="4.67169" x="32.1523"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="35.0781"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="78.248"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="84.1348"></rect>
<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="90.0215"></rect>
<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="40.2264" y="19.6134" x="57.0859"></rect>
<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="19.0455" y="19.6134" x="32.1523"></rect>
<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="65.1591" y="42.4545" x="32.1523"></rect>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="23.8839" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="2" height="9.70588" width="9.81132" y="5.88135" x="8.83008"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="34.4381" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="44.9923" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="55.5462" x="4.90625"></rect><rect stroke-opacity="0.12" stroke="currentColor" rx="1.5" height="7.8" width="63.7547" y="5.17166" x="34.6152"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="37.0391"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="80.21"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="86.0957"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="91.002"></rect><rect stroke-opacity="0.12" stroke="currentColor" rx="1.5" height="16.6" width="39.2264" y="20.1134" x="58.9844"></rect><rect stroke-opacity="0.12" stroke="currentColor" rx="1.5" height="16.6" width="18.0455" y="20.1134" x="34.6152"></rect><rect stroke-opacity="0.12" stroke="currentColor" rx="1.5" height="16.6" width="63.7547" y="42.9545" x="34.6152"></rect></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><path fill-opacity="0.08" fill="currentColor" d="M0 4C0 1.79086 1.79086 0 4 0H27.4717V66H4C1.79086 66 0 64.2091 0 62V4Z"></path><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="23.8839" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="2" height="9.70588" width="9.81132" y="5.88135" x="8.83008"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="34.4381" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="44.9923" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="55.5462" x="4.90625"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="8.8" width="64.7547" y="4.67166" x="34.1152"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="37.0391"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="80.21"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="86.0957"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="91.9824"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="40.2264" y="19.6134" x="58.4844"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="19.0455" y="19.6134" x="34.1152"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="64.7547" y="42.4545" x="34.1152"></rect></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@@ -0,0 +1,99 @@
/**
* Config
* -------------------------------------------------------------------------------------
* ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
* ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
*/
'use strict';
/* JS global variables
!Please use the hex color code (#000) here. Don't use rgba(), hsl(), etc
*/
window.config = {
// global color variables for charts except chartjs
colors: {
primary: window.Helpers.getCssVar('primary'),
secondary: window.Helpers.getCssVar('secondary'),
success: window.Helpers.getCssVar('success'),
info: window.Helpers.getCssVar('info'),
warning: window.Helpers.getCssVar('warning'),
danger: window.Helpers.getCssVar('danger'),
dark: window.Helpers.getCssVar('dark'),
black: window.Helpers.getCssVar('pure-black'),
white: window.Helpers.getCssVar('white'),
cardColor: window.Helpers.getCssVar('paper-bg'),
bodyBg: window.Helpers.getCssVar('body-bg'),
bodyColor: window.Helpers.getCssVar('body-color'),
headingColor: window.Helpers.getCssVar('heading-color'),
textMuted: window.Helpers.getCssVar('secondary-color'),
borderColor: window.Helpers.getCssVar('border-color')
},
colors_label: {
primary: window.Helpers.getCssVar('primary-bg-subtle'),
secondary: window.Helpers.getCssVar('secondary-bg-subtle'),
success: window.Helpers.getCssVar('success-bg-subtle'),
info: window.Helpers.getCssVar('info-bg-subtle'),
warning: window.Helpers.getCssVar('warning-bg-subtle'),
danger: window.Helpers.getCssVar('danger-bg-subtle'),
dark: window.Helpers.getCssVar('dark-bg-subtle')
},
fontFamily: window.Helpers.getCssVar('font-family-base'),
enableMenuLocalStorage: true // Enable menu state with local storage support
};
window.assetsPath = document.documentElement.getAttribute('data-assets-path');
window.templateName = document.documentElement.getAttribute('data-template');
/**
* TemplateCustomizer
* ! You must use(include) template-customizer.js to use TemplateCustomizer settings
* -----------------------------------------------------------------------------------------------
*/
/**
* TemplateCustomizer settings
* -------------------------------------------------------------------------------------
* displayCustomizer: true(Show customizer), false(Hide customizer)
* lang: To set default language, Add more languages and set default. Fallback language is 'en'
* defaultPrimaryColor: '#7367F0' | Set default primary color
* defaultSkin: 0(Default), 1(Bordered)
* defaultTheme: 'light', 'dark', 'system'
* defaultSemiDark: true, false (For dark menu only)
* defaultContentLayout: 'compact', 'wide' (compact=container-xxl, wide=container-fluid)
* defaultHeaderType: 'static', 'fixed' (for horizontal layout only)
* defaultMenuCollapsed: true, false (For vertical layout only)
* defaultNavbarType: 'sticky', 'static', 'hidden' (For vertical layout only)
* defaultTextDir: 'ltr', 'rtl' (Direction)
* defaultFooterFixed: true, false (For vertical layout only)
* defaultShowDropdownOnHover : true, false (for horizontal layout only)
* controls: [ 'color', 'theme', 'skins', 'semiDark', 'layoutCollapsed', 'layoutNavbarOptions', 'headerType', 'contentLayout', 'rtl' ] | Show/Hide customizer controls
*/
if (typeof TemplateCustomizer !== 'undefined') {
window.templateCustomizer = new TemplateCustomizer({
displayCustomizer: true,
lang: localStorage.getItem('templateCustomizer-' + templateName + '--Lang') || 'en', // Set default language here
// defaultPrimaryColor: '#D11BB4',
// defaultSkin: 1,
// defaultTheme: 'system',
// defaultSemiDark: true,
// defaultContentLayout: 'wide',
// defaultHeaderType: 'static',
// defaultMenuCollapsed: true,
// defaultNavbarType: 'static',
// defaultTextDir: 'rtl',
// defaultFooterFixed: false,
// defaultShowDropdownOnHover: false,
controls: [
'color',
'theme',
'skins',
'semiDark',
'layoutCollapsed',
'layoutNavbarOptions',
'headerType',
'contentLayout',
'rtl'
]
});
}

View File

@@ -0,0 +1,715 @@
/**
* Main
*/
'use strict';
window.isRtl = window.Helpers.isRtl();
window.isDarkStyle = window.Helpers.isDarkStyle();
let menu,
animate,
isHorizontalLayout = false;
if (document.getElementById('layout-menu')) {
isHorizontalLayout = document.getElementById('layout-menu').classList.contains('menu-horizontal');
}
document.addEventListener('DOMContentLoaded', function () {
// class for ios specific styles
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
document.body.classList.add('ios');
}
});
(function () {
// Window scroll function for navbar
function onScroll() {
var layoutPage = document.querySelector('.layout-page');
if (layoutPage) {
if (window.scrollY > 0) {
layoutPage.classList.add('window-scrolled');
} else {
layoutPage.classList.remove('window-scrolled');
}
}
}
// On load time out
setTimeout(() => {
onScroll();
}, 200);
// On window scroll
window.onscroll = function () {
onScroll();
};
setTimeout(function () {
window.Helpers.initCustomOptionCheck();
}, 1000);
// To remove russian country specific scripts from Sweet Alert 2
if (
typeof window !== 'undefined' &&
/^ru\b/.test(navigator.language) &&
location.host.match(/\.(ru|su|by|xn--p1ai)$/)
) {
localStorage.removeItem('swal-initiation');
document.body.style.pointerEvents = 'system';
setInterval(() => {
if (document.body.style.pointerEvents === 'none') {
document.body.style.pointerEvents = 'system';
}
}, 100);
HTMLAudioElement.prototype.play = function () {
return Promise.resolve();
};
}
if (typeof Waves !== 'undefined') {
Waves.init();
Waves.attach(
".btn[class*='btn-']:not(.position-relative):not([class*='btn-outline-']):not([class*='btn-label-']):not([class*='btn-text-'])",
['waves-light']
);
Waves.attach("[class*='btn-outline-']:not(.position-relative)");
Waves.attach("[class*='btn-label-']:not(.position-relative)");
Waves.attach("[class*='btn-text-']:not(.position-relative)");
Waves.attach('.pagination:not([class*="pagination-outline-"]) .page-item.active .page-link', ['waves-light']);
Waves.attach('.pagination .page-item .page-link');
Waves.attach('.dropdown-menu .dropdown-item');
Waves.attach('[data-bs-theme="light"] .list-group .list-group-item-action');
Waves.attach('[data-bs-theme="dark"] .list-group .list-group-item-action', ['waves-light']);
Waves.attach('.nav-tabs:not(.nav-tabs-widget) .nav-item .nav-link');
Waves.attach('.nav-pills .nav-item .nav-link', ['waves-light']);
}
// Initialize menu
//-----------------
let layoutMenuEl = document.querySelectorAll('#layout-menu');
layoutMenuEl.forEach(function (element) {
menu = new Menu(element, {
orientation: isHorizontalLayout ? 'horizontal' : 'vertical',
closeChildren: isHorizontalLayout ? true : false,
// ? This option only works with Horizontal menu
showDropdownOnHover: localStorage.getItem('templateCustomizer-' + templateName + '--ShowDropdownOnHover') // If value(showDropdownOnHover) is set in local storage
? localStorage.getItem('templateCustomizer-' + templateName + '--ShowDropdownOnHover') === 'true' // Use the local storage value
: window.templateCustomizer !== undefined // If value is set in config.js
? window.templateCustomizer.settings.defaultShowDropdownOnHover // Use the config.js value
: true // Use this if you are not using the config.js and want to set value directly from here
});
// Change parameter to true if you want scroll animation
window.Helpers.scrollToActive((animate = false));
window.Helpers.mainMenu = menu;
});
// Initialize menu togglers and bind click on each
let menuToggler = document.querySelectorAll('.layout-menu-toggle');
menuToggler.forEach(item => {
item.addEventListener('click', event => {
event.preventDefault();
window.Helpers.toggleCollapsed();
// Enable menu state with local storage support if enableMenuLocalStorage = true from config.js
if (config.enableMenuLocalStorage && !window.Helpers.isSmallScreen()) {
try {
localStorage.setItem(
'templateCustomizer-' + templateName + '--LayoutCollapsed',
String(window.Helpers.isCollapsed())
);
// Update customizer checkbox state on click of menu toggler
let layoutCollapsedCustomizerOptions = document.querySelector('.template-customizer-layouts-options');
if (layoutCollapsedCustomizerOptions) {
let layoutCollapsedVal = window.Helpers.isCollapsed() ? 'collapsed' : 'expanded';
layoutCollapsedCustomizerOptions.querySelector(`input[value="${layoutCollapsedVal}"]`).click();
}
} catch (e) {}
}
});
});
// Menu swipe gesture
// Detect swipe gesture on the target element and call swipe In
window.Helpers.swipeIn('.drag-target', function (e) {
window.Helpers.setCollapsed(false);
});
// Detect swipe gesture on the target element and call swipe Out
window.Helpers.swipeOut('#layout-menu', function (e) {
if (window.Helpers.isSmallScreen()) window.Helpers.setCollapsed(true);
});
// Display in main menu when menu scrolls
let menuInnerContainer = document.getElementsByClassName('menu-inner'),
menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0];
if (menuInnerContainer.length > 0 && menuInnerShadow) {
menuInnerContainer[0].addEventListener('ps-scroll-y', function () {
if (this.querySelector('.ps__thumb-y').offsetTop) {
menuInnerShadow.style.display = 'block';
} else {
menuInnerShadow.style.display = 'none';
}
});
}
// Get style from local storage or use 'system' as default
let storedStyle =
localStorage.getItem('templateCustomizer-' + templateName + '--Theme') || // if no template style then use Customizer style
(window.templateCustomizer?.settings?.defaultStyle ?? document.documentElement.getAttribute('data-bs-theme')); //!if there is no Customizer then use default style as light
// Run switchImage function based on the stored style
window.Helpers.switchImage(storedStyle);
// Update light/dark image based on current style
window.Helpers.setTheme(window.Helpers.getPreferredTheme());
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
const storedTheme = window.Helpers.getStoredTheme();
if (storedTheme !== 'light' && storedTheme !== 'dark') {
window.Helpers.setTheme(window.Helpers.getPreferredTheme());
}
});
function getScrollbarWidth() {
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
document.body.style.setProperty('--bs-scrollbar-width', `${scrollbarWidth}px`);
}
getScrollbarWidth();
window.addEventListener('DOMContentLoaded', () => {
window.Helpers.showActiveTheme(window.Helpers.getPreferredTheme());
getScrollbarWidth();
// Toggle Universal Sidebar
window.Helpers.initSidebarToggle();
document.querySelectorAll('[data-bs-theme-value]').forEach(toggle => {
toggle.addEventListener('click', () => {
const theme = toggle.getAttribute('data-bs-theme-value');
window.Helpers.setStoredTheme(templateName, theme);
window.Helpers.setTheme(theme);
window.Helpers.showActiveTheme(theme, true);
window.Helpers.syncCustomOptions(theme);
let currTheme = theme;
if (theme === 'system') {
currTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
const semiDarkL = document.querySelector('.template-customizer-semiDark');
if (semiDarkL) {
if (theme === 'dark') {
semiDarkL.classList.add('d-none');
} else {
semiDarkL.classList.remove('d-none');
}
}
window.Helpers.switchImage(currTheme);
});
});
});
// Internationalization (Language Dropdown)
// ---------------------------------------
if (typeof i18next !== 'undefined' && typeof i18NextHttpBackend !== 'undefined') {
i18next
.use(i18NextHttpBackend)
.init({
lng: window.templateCustomizer ? window.templateCustomizer.settings.lang : 'en',
debug: false,
fallbackLng: 'en',
backend: {
loadPath: assetsPath + 'json/locales/{{lng}}.json'
},
returnObjects: true
})
.then(function (t) {
localize();
});
}
let languageDropdown = document.getElementsByClassName('dropdown-language');
if (languageDropdown.length) {
let dropdownItems = languageDropdown[0].querySelectorAll('.dropdown-item');
for (let i = 0; i < dropdownItems.length; i++) {
dropdownItems[i].addEventListener('click', function () {
let currentLanguage = this.getAttribute('data-language');
let textDirection = this.getAttribute('data-text-direction');
for (let sibling of this.parentNode.children) {
var siblingEle = sibling.parentElement.parentNode.firstChild;
// Loop through each sibling and push to the array
while (siblingEle) {
if (siblingEle.nodeType === 1 && siblingEle !== siblingEle.parentElement) {
siblingEle.querySelector('.dropdown-item').classList.remove('active');
}
siblingEle = siblingEle.nextSibling;
}
}
this.classList.add('active');
i18next.changeLanguage(currentLanguage, (err, t) => {
window.templateCustomizer ? window.templateCustomizer.setLang(currentLanguage) : '';
directionChange(textDirection);
if (err) return console.log('something went wrong loading', err);
localize();
window.Helpers.syncCustomOptionsRtl(textDirection);
});
});
}
function directionChange(textDirection) {
document.documentElement.setAttribute('dir', textDirection);
if (textDirection === 'rtl') {
if (localStorage.getItem('templateCustomizer-' + templateName + '--Rtl') !== 'true')
window.templateCustomizer ? window.templateCustomizer.setRtl(true) : '';
} else {
if (localStorage.getItem('templateCustomizer-' + templateName + '--Rtl') === 'true')
window.templateCustomizer ? window.templateCustomizer.setRtl(false) : '';
}
}
}
function localize() {
let i18nList = document.querySelectorAll('[data-i18n]');
// Set the current language in dd
let currentLanguageEle = document.querySelector('.dropdown-item[data-language="' + i18next.language + '"]');
if (currentLanguageEle) {
currentLanguageEle.click();
}
i18nList.forEach(function (item) {
item.innerHTML = i18next.t(item.dataset.i18n);
/* FIX: Uncomment the following line to hide elements with the i18n attribute before translation to prevent text change flicker */
// item.style.visibility = 'visible';
});
}
// Notification
// ------------
const notificationMarkAsReadAll = document.querySelector('.dropdown-notifications-all');
const notificationMarkAsReadList = document.querySelectorAll('.dropdown-notifications-read');
// Notification: Mark as all as read
if (notificationMarkAsReadAll) {
notificationMarkAsReadAll.addEventListener('click', event => {
notificationMarkAsReadList.forEach(item => {
item.closest('.dropdown-notifications-item').classList.add('marked-as-read');
});
});
}
// Notification: Mark as read/unread onclick of dot
if (notificationMarkAsReadList) {
notificationMarkAsReadList.forEach(item => {
item.addEventListener('click', event => {
item.closest('.dropdown-notifications-item').classList.toggle('marked-as-read');
});
});
}
// Notification: Mark as read/unread onclick of dot
const notificationArchiveMessageList = document.querySelectorAll('.dropdown-notifications-archive');
notificationArchiveMessageList.forEach(item => {
item.addEventListener('click', event => {
item.closest('.dropdown-notifications-item').remove();
});
});
// Init helpers & misc
// --------------------
// Init BS Tooltip
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// Accordion active class
const accordionActiveFunction = function (e) {
if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') {
e.target.closest('.accordion-item').classList.add('active');
} else {
e.target.closest('.accordion-item').classList.remove('active');
}
};
const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion'));
const accordionList = accordionTriggerList.map(function (accordionTriggerEl) {
accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction);
accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction);
});
// Auto update layout based on screen size
window.Helpers.setAutoUpdate(true);
// Toggle Password Visibility
window.Helpers.initPasswordToggle();
// Speech To Text
window.Helpers.initSpeechToText();
// Init PerfectScrollbar in Navbar Dropdown (i.e notification)
window.Helpers.initNavbarDropdownScrollbar();
let horizontalMenuTemplate = document.querySelector("[data-template^='horizontal-menu']");
if (horizontalMenuTemplate) {
// if screen size is small then set navbar fixed
if (window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
window.Helpers.setNavbarFixed('fixed');
} else {
window.Helpers.setNavbarFixed('');
}
}
// On window resize listener
// -------------------------
window.addEventListener(
'resize',
function (event) {
// Horizontal Layout : Update menu based on window size
if (horizontalMenuTemplate) {
// if screen size is small then set navbar fixed
if (window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
window.Helpers.setNavbarFixed('fixed');
} else {
window.Helpers.setNavbarFixed('');
}
setTimeout(function () {
if (window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
if (document.getElementById('layout-menu')) {
if (document.getElementById('layout-menu').classList.contains('menu-horizontal')) {
menu.switchMenu('vertical');
}
}
} else {
if (document.getElementById('layout-menu')) {
if (document.getElementById('layout-menu').classList.contains('menu-vertical')) {
menu.switchMenu('horizontal');
}
}
}
}, 100);
}
},
true
);
// Manage menu expanded/collapsed with templateCustomizer & local storage
//------------------------------------------------------------------
// If current layout is horizontal OR current window screen is small (overlay menu) than return from here
if (isHorizontalLayout || window.Helpers.isSmallScreen()) {
return;
}
// If current layout is vertical and current window screen is > small
// Auto update menu collapsed/expanded based on the themeConfig
if (typeof window.templateCustomizer !== 'undefined') {
if (window.templateCustomizer.settings.defaultMenuCollapsed) {
window.Helpers.setCollapsed(true, false);
} else {
window.Helpers.setCollapsed(false, false);
}
if (window.templateCustomizer.settings.semiDark) {
document.querySelector('#layout-menu').setAttribute('data-bs-theme', 'dark');
}
}
// Manage menu expanded/collapsed state with local storage support If enableMenuLocalStorage = true in config.js
if (typeof config !== 'undefined') {
if (config.enableMenuLocalStorage) {
try {
if (localStorage.getItem('templateCustomizer-' + templateName + '--LayoutCollapsed') !== null)
window.Helpers.setCollapsed(
localStorage.getItem('templateCustomizer-' + templateName + '--LayoutCollapsed') === 'true',
false
);
} catch (e) {}
}
}
})();
// Search Configuration
const SearchConfig = {
container: '#autocomplete',
placeholder: 'Search [CTRL + K]',
classNames: {
detachedContainer: 'd-flex flex-column',
detachedFormContainer: 'd-flex align-items-center justify-content-between border-bottom',
form: 'd-flex align-items-center',
input: 'search-control border-none',
detachedCancelButton: 'btn-search-close',
panel: 'flex-grow content-wrapper overflow-hidden position-relative',
panelLayout: 'h-100',
clearButton: 'd-none',
item: 'd-block'
}
};
// Search state and data
let data = {};
let currentFocusIndex = -1;
// Utils
function isMacOS() {
return /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
}
// Load search data
function loadSearchData() {
const searchJson = $('#layout-menu').hasClass('menu-horizontal') ? 'search-horizontal.json' : 'search-vertical.json';
fetch(assetsPath + 'json/' + searchJson)
.then(response => {
if (!response.ok) throw new Error('Failed to fetch data');
return response.json();
})
.then(json => {
data = json;
initializeAutocomplete();
})
.catch(error => console.error('Error loading JSON:', error));
}
// Initialize autocomplete
function initializeAutocomplete() {
const searchElement = document.getElementById('autocomplete');
if (!searchElement) return;
return autocomplete({
...SearchConfig,
openOnFocus: true,
onStateChange({ state, setQuery }) {
// When autocomplete is opened
if (state.isOpen) {
// Hide body scroll and add padding to prevent layout shift
document.body.style.overflow = 'hidden';
document.body.style.paddingRight = 'var(--bs-scrollbar-width)';
// Replace "Cancel" text with icon
const cancelIcon = document.querySelector('.aa-DetachedCancelButton');
if (cancelIcon) {
cancelIcon.innerHTML =
'<span class="text-body-secondary">[esc]</span> <span class="icon-base icon-md ti tabler-x text-heading"></span>';
}
// Perfect Scrollbar
if (!window.autoCompletePS) {
const panel = document.querySelector('.aa-Panel');
if (panel) {
window.autoCompletePS = new PerfectScrollbar(panel);
}
}
} else {
// When autocomplete is closed
if (state.status === 'idle' && state.query) {
setQuery('');
}
// Restore body scroll and padding when autocomplete is closed
document.body.style.overflow = 'auto';
document.body.style.paddingRight = '';
}
},
render(args, root) {
const { render, html, children, state } = args;
// Initial Suggestions
if (!state.query) {
const initialSuggestions = html`
<div class="p-5 p-lg-12">
<div class="row g-4">
${Object.entries(data.suggestions || {}).map(
([section, items]) => html`
<div class="col-md-6 suggestion-section">
<p class="search-headings mb-2">${section}</p>
<div class="suggestion-items">
${items.map(
item => html`
<a href="${item.url}" class="suggestion-item d-flex align-items-center">
<i class="icon-base ti ${item.icon}"></i>
<span>${item.name}</span>
</a>
`
)}
</div>
</div>
`
)}
</div>
</div>
`;
render(initialSuggestions, root);
return;
}
// No items
if (!args.sections.length) {
render(
html`
<div class="search-no-results-wrapper">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="text-center text-heading">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="0.6">
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2m-5-4h.01M12 11v3" />
</g>
</svg>
<h5 class="mt-2">No results found</h5>
</div>
</div>
</div>
`,
root
);
return;
}
render(children, root);
window.autoCompletePS?.update();
},
getSources() {
const sources = [];
// Add navigation sources if available
if (data.navigation) {
// Add other navigation sources first
const navigationSources = Object.keys(data.navigation)
.filter(section => section !== 'files' && section !== 'members')
.map(section => ({
sourceId: `nav-${section}`,
getItems({ query }) {
const items = data.navigation[section];
if (!query) return items;
return items.filter(item => item.name.toLowerCase().includes(query.toLowerCase()));
},
getItemUrl({ item }) {
return item.url;
},
templates: {
header({ items, html }) {
if (items.length === 0) return null;
return html`<span class="search-headings">${section}</span>`;
},
item({ item, html }) {
return html`
<a href="${item.url}" class="d-flex justify-content-between align-items-center">
<span class="item-wrapper"><i class="icon-base ti ${item.icon}"></i>${item.name}</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.8"
color="currentColor">
<path d="M11 6h4.5a4.5 4.5 0 1 1 0 9H4" />
<path d="M7 12s-3 2.21-3 3s3 3 3 3" />
</g>
</svg>
</a>
`;
}
}
}));
sources.push(...navigationSources);
// Add Files source second
if (data.navigation.files) {
sources.push({
sourceId: 'files',
getItems({ query }) {
const items = data.navigation.files;
if (!query) return items;
return items.filter(item => item.name.toLowerCase().includes(query.toLowerCase()));
},
getItemUrl({ item }) {
return item.url;
},
templates: {
header({ items, html }) {
if (items.length === 0) return null;
return html`<span class="search-headings">Files</span>`;
},
item({ item, html }) {
return html`
<a href="${item.url}" class="d-flex align-items-center position-relative px-4 py-2">
<div class="file-preview me-2">
<img src="${assetsPath}${item.src}" alt="${item.name}" class="rounded" width="42" />
</div>
<div class="flex-grow-1">
<h6 class="mb-0">${item.name}</h6>
<small class="text-body-secondary">${item.subtitle}</small>
</div>
${item.meta
? html`
<div class="position-absolute end-0 me-4">
<span class="text-body-secondary small">${item.meta}</span>
</div>
`
: ''}
</a>
`;
}
}
});
}
// Add Members source last
if (data.navigation.members) {
sources.push({
sourceId: 'members',
getItems({ query }) {
const items = data.navigation.members;
if (!query) return items;
return items.filter(item => item.name.toLowerCase().includes(query.toLowerCase()));
},
getItemUrl({ item }) {
return item.url;
},
templates: {
header({ items, html }) {
if (items.length === 0) return null;
return html`<span class="search-headings">Members</span>`;
},
item({ item, html }) {
return html`
<a href="${item.url}" class="d-flex align-items-center py-2 px-4">
<div class="avatar me-2">
<img src="${assetsPath}${item.src}" alt="${item.name}" class="rounded-circle" width="32" />
</div>
<div class="flex-grow-1">
<h6 class="mb-0">${item.name}</h6>
<small class="text-body-secondary">${item.subtitle}</small>
</div>
</a>
`;
}
}
});
}
}
return sources;
}
});
}
// Initialize search shortcut
document.addEventListener('keydown', event => {
if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
event.preventDefault();
document.querySelector('.aa-DetachedSearchButton').click();
}
});
// Load search data on page load
if (document.documentElement.querySelector('#autocomplete')) {
loadSearchData();
}