tieptk/admin_hura_8
2
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Tieptk
2025-11-27 12:55:33 +07:00
parent 6876ab2bd3
commit 8c42d57fcd
12 changed files with 62085 additions and 1055 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61168
assets/script/daisyui.css Normal file
View File

File diff suppressed because it is too large Load Diff

8
assets/script/daisyui.js Normal file
View File

File diff suppressed because one or more lines are too long

179
assets/script/main.js
View File

@@ -1,179 +0,0 @@
class LayoutCustomizer {
constructor() {
this.defaultConfig = {
theme: "system",
direction: "ltr",
fontFamily: "default",
sidebarTheme: "light",
fullscreen: false,
}
const configCache = localStorage.getItem("__NEXUS_CONFIG_v3.0__")
if (configCache) {
this.config = JSON.parse(configCache)
} else {
this.config = { ...this.defaultConfig }
}
this.html = document.documentElement
this.sidebar = document.getElementById("layout-sidebar")
window.config = this.config
}
updateTheme = () => {
localStorage.setItem("__NEXUS_CONFIG_v3.0__", JSON.stringify(this.config))
if (this.config.theme === "system") {
this.html.removeAttribute("data-theme")
} else {
this.html.setAttribute("data-theme", this.config.theme)
}
if (this.sidebar) {
if (
this.config.sidebarTheme === "dark" &&
["light", "contrast"].includes(this.config.theme)
) {
this.sidebar.setAttribute("data-theme", this.config.sidebarTheme)
} else {
this.sidebar.removeAttribute("data-theme")
}
}
this.html.setAttribute("data-sidebar-theme", this.config.sidebarTheme)
this.html.dir = this.config.direction
if (this.config.fullscreen) {
this.html.setAttribute("data-fullscreen", "")
} else {
this.html.removeAttribute("data-fullscreen")
}
if (this.config.fontFamily !== "default") {
this.html.setAttribute("data-font-family", config.fontFamily)
} else {
this.html.removeAttribute("data-font-family")
}
}
initEventListener = () => {
const themeControls = document.querySelectorAll("[data-theme-control]")
themeControls.forEach((control) => {
control.addEventListener("click", () => {
let theme = control.getAttribute("data-theme-control") ?? "light"
if (theme === "toggle") {
theme = this.config.theme === "light" ? "dark" : "light"
}
this.config.theme = theme
this.updateTheme()
})
})
const sidebarThemeControls = document.querySelectorAll("[data-sidebar-theme-control]")
sidebarThemeControls.forEach((control) => {
control.addEventListener("click", () => {
this.config.sidebarTheme =
control.getAttribute("data-sidebar-theme-control") ?? "light"
this.updateTheme()
})
})
const fontFamilyControls = document.querySelectorAll("[data-font-family-control]")
fontFamilyControls.forEach((control) => {
control.addEventListener("click", () => {
this.config.fontFamily =
control.getAttribute("data-font-family-control") ?? "default"
this.updateTheme()
})
})
const dirControls = document.querySelectorAll("[data-dir-control]")
dirControls.forEach((control) => {
control.addEventListener("click", () => {
this.config.direction = control.getAttribute("data-dir-control") ?? "ltr"
this.updateTheme()
})
})
const fullscreenControls = document.querySelectorAll("[data-fullscreen-control]")
fullscreenControls.forEach((control) => {
control.addEventListener("click", () => {
if (document.fullscreenElement != null) {
this.config.fullscreen = false
document.exitFullscreen()
} else {
this.config.fullscreen = true
this.html.requestFullscreen()
}
this.updateTheme()
})
})
const resetControls = document.querySelectorAll("[data-reset-control]")
resetControls.forEach((control) => {
control.addEventListener("click", () => {
this.config = { ...this.defaultConfig }
if (document.fullscreenElement != null) {
document.exitFullscreen()
}
this.updateTheme()
})
})
const fullscreenMedia = window.matchMedia("(display-mode: fullscreen)")
const fullscreenListener = () => {
this.config.fullscreen = fullscreenMedia.matches
this.updateTheme()
}
fullscreenMedia.addEventListener("change", fullscreenListener)
fullscreenListener()
}
initLeftmenu = () => {
const initMenuActivation = () => {
const menuItems = document.querySelectorAll(".sidebar-menu-activation a")
let currentURL = window.location.href
if (window.location.pathname === "/") {
currentURL += "dashboards-ecommerce.html"
}
menuItems.forEach((item) => {
if (item.href === currentURL) {
item.classList.add("active")
const parentElement1 = item.parentElement.parentElement
if (parentElement1.classList.contains("collapse-content")) {
const inputElement1 = parentElement1.parentElement.querySelector("input")
if (inputElement1) {
inputElement1.checked = true
}
}
}
})
}
const scrollToActiveMenu = () => {
const simplebarEl = document.querySelector("#layout-sidebar [data-simplebar]")
const activatedItem = document.querySelector("#layout-sidebar .menu a.active")
if (simplebarEl && activatedItem) {
const simplebar = new SimpleBar(simplebarEl)
const top = activatedItem?.getBoundingClientRect().top
if (top && top !== 0) {
simplebar.getScrollElement().scrollTo({ top: top - 300, behavior: "smooth" })
}
}
}
initMenuActivation()
scrollToActiveMenu()
}
afterInit = () => {
this.initEventListener()
this.initLeftmenu()
}
init = () => {
this.updateTheme()
window.addEventListener("DOMContentLoaded", this.afterInit)
}
}
new LayoutCustomizer().init()

152
assets/script/style.css
View File

@@ -461,7 +461,7 @@ strong {
--color-base-200: oklch(98% 0 0);
--color-base-300: oklch(95% 0 0);
--color-base-content: oklch(21% 0.006 285.885);
--color-primary: oklch(45% 0.24 277.023);
--color-primary: #0041e8;
--color-primary-content: oklch(93% 0.034 272.788);
--color-secondary: oklch(65% 0.241 354.308);
--color-secondary-content: oklch(94% 0.028 342.258);
@@ -493,7 +493,7 @@ strong {
--color-base-200: oklch(23.26% 0.014 253.1);
--color-base-300: oklch(21.15% 0.012 254.09);
--color-base-content: oklch(97.807% 0.029 256.847);
--color-primary: oklch(58% 0.233 277.117);
--color-primary: #0041e8;
--color-primary-content: oklch(96% 0.018 272.314);
--color-secondary: oklch(65% 0.241 354.308);
--color-secondary-content: oklch(94% 0.028 342.258);
@@ -526,7 +526,7 @@ strong {
--color-base-200: oklch(98% 0 0);
--color-base-300: oklch(95% 0 0);
--color-base-content: oklch(21% 0.006 285.885);
--color-primary: oklch(45% 0.24 277.023);
--color-primary: #0041e8;
--color-primary-content: oklch(93% 0.034 272.788);
--color-secondary: oklch(65% 0.241 354.308);
--color-secondary-content: oklch(94% 0.028 342.258);
@@ -558,7 +558,7 @@ strong {
--color-base-200: oklch(23.26% 0.014 253.1);
--color-base-300: oklch(21.15% 0.012 254.09);
--color-base-content: oklch(97.807% 0.029 256.847);
--color-primary: oklch(58% 0.233 277.117);
--color-primary: #0041e8;
--color-primary-content: oklch(96% 0.018 272.314);
--color-secondary: oklch(65% 0.241 354.308);
--color-secondary-content: oklch(94% 0.028 342.258);
@@ -620,7 +620,7 @@ strong {
--color-base-200: #22262a;
--color-base-300: #2c3034;
--color-base-content: #f0f4f8;
--color-primary: #378dff;
--color-primary: #0041e8;
--color-primary-content: #fff;
--color-secondary: #b071ff;
--color-secondary-content: #fff;
@@ -659,7 +659,7 @@ strong {
--color-base-200: #22262a;
--color-base-300: #2c3034;
--color-base-content: #f0f4f8;
--color-primary: #378dff;
--color-primary: #0041e8;
--color-primary-content: #fff;
--color-secondary: #b071ff;
--color-secondary-content: #fff;
@@ -698,7 +698,7 @@ strong {
--color-base-200: #eef0f2;
--color-base-300: #dcdee0;
--color-base-content: #1e2328;
--color-primary: #167bff;
--color-primary: #0041e8;
--color-primary-content: #fff;
--color-secondary: #9c5de8;
--color-secondary-content: #fff;
@@ -739,7 +739,7 @@ strong {
--color-base-200: #eef0f2;
--color-base-300: #dcdee0;
--color-base-content: #1e2328;
--color-primary: #167bff;
--color-primary: #0041e8;
--color-primary-content: #fff;
--color-secondary: #9c5de8;
--color-secondary-content: #fff;
@@ -777,7 +777,7 @@ strong {
--color-base-200: #eaecfa;
--color-base-300: #e0e2f8;
--color-base-content: #191e28;
--color-primary: #167bff;
--color-primary: #0041e8;
--color-primary-content: #fff;
--color-secondary: #9c5de8;
--color-secondary-content: #fff;
@@ -811,7 +811,7 @@ strong {
--color-base-200: #343842;
--color-base-300: #3c404a;
--color-base-content: #f0f4f8;
--color-primary: #378dff;
--color-primary: #0041e8;
--color-primary-content: #fff;
--color-secondary: #b071ff;
--color-secondary-content: #fff;
@@ -2450,13 +2450,14 @@ strong {
@media (hover: hover) {
.btn:hover {
--btn-bg: var(--btn-color, var(--color-base-200));
color: #fff;
}
@supports (color: color-mix(in lab, red, red)) {
.btn:hover {
--btn-bg: color-mix(
in oklab,
var(--btn-color, var(--color-base-200)),
#000 7%
var(--btn-color, var(--color-primary)),
#0041e8 7%
);
}
}
@@ -2468,9 +2469,22 @@ strong {
outline-style: solid;
}
.btn:active:not(.btn-active) {
--btn-bg: var(--btn-color, var(--color-base-200));
--btn-bg: var(--btn-color, var(--color-primary));
translate: 0 0.5px;
}
.btn-view {
border: 1px solid #0041e8;
background: #f5f7ff;
color: #0041e8 !important;
font-weight: 500;
}
.btn-view:hover {
background: #0041e8;
color: #fff !important;
}
@supports (color: color-mix(in lab, red, red)) {
.btn:active:not(.btn-active) {
--btn-bg: color-mix(
@@ -2481,13 +2495,13 @@ strong {
}
}
.btn:active:not(.btn-active) {
--btn-border: var(--btn-color, var(--color-base-200));
--btn-border: var(--btn-color, var(--color-primary));
}
@supports (color: color-mix(in lab, red, red)) {
.btn:active:not(.btn-active) {
--btn-border: color-mix(
in oklab,
var(--btn-color, var(--color-base-200)),
var(--btn-color, var(--color-primary)),
#000 7%
);
}
@@ -4045,7 +4059,7 @@ strong {
.menu-horizontal li .submenu {
display: none;
position: absolute;
top: 150%;
top: 125%;
left: 0;
background: #fff;
z-index: 999;
@@ -4075,6 +4089,10 @@ strong {
color: #fff;
}
.group:hover .text-white {
color: #000;
}
:where(.menu-horizontal > li:not(.menu-title) > details > ul) {
border-radius: var(--radius-box);
background-color: var(--color-base-100);
@@ -4858,20 +4876,21 @@ strong {
cursor: not-allowed;
}
.btn-active {
--btn-bg: var(--btn-color, var(--color-base-200));
--btn-bg: var(--btn-color, var(--color-primary));
}
@supports (color: color-mix(in lab, red, red)) {
.btn-active {
--btn-bg: color-mix(
in oklab,
var(--btn-color, var(--color-base-200)),
#000 7%
var(--btn-color, var(--color-primary)),
#fff 7%
);
}
}
.btn-active {
--btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
isolation: isolate;
color: #fff;
}
.isolate {
isolation: isolate;
@@ -4920,6 +4939,12 @@ strong {
.col-span-3 {
grid-column: span 3 / span 3;
}
.col-span-4 {
grid-column: span 4 / span 4;
}
.col-span-8 {
grid-column: span 8 / span 8;
}
.col-span-12 {
grid-column: span 12 / span 12;
}
@@ -5833,24 +5858,7 @@ strong {
border-radius: 3.40282e38px;
overflow: hidden;
}
.line-clamp-1 {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
.line-clamp-2 {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
.line-clamp-3 {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
.mask {
vertical-align: middle;
display: inline-block;
@@ -5891,6 +5899,7 @@ strong {
.table {
display: table;
}
.aspect-square {
aspect-ratio: 1;
}
@@ -6170,6 +6179,9 @@ strong {
.h-screen {
height: 100vh;
}
.h-\[40px\] {
height: 40px;
}
.max-h-0 {
max-height: calc(var(--spacing) * 0);
}
@@ -14974,6 +14986,33 @@ strong {
html {
scroll-behavior: smooth;
}
.line-clamp-1 {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
.line-clamp-2 {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
.line-clamp-3 {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
.line-clamp-4 {
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
.animated-text {
animation: var(--animate-text-color);
color: #0000;
@@ -16539,3 +16578,42 @@ html:not([data-theme="material"], [data-theme="material-dark"]) #layout-topbar {
.bg-menu {
background: #004e99;
}
.line-clamp-1 {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
.line-clamp-2 {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
.line-clamp-3 {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
.line-clamp-4 {
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
.btn-dash {
border-style: dashed;
border-color: gray;
}
.btn-dash:hover {
border-color: var(--color-primary);
color: #fff;
background: var(--color-primary);
}
.todo-list td {
padding: 5px;
}