💋 Sync 2026-10-04 04:16:09

2026-11-01 08:33:56 +08:00 · 2026-10-04 04:16:09 +08:00
1 parent f6b2df73ec
commit f62992fd80
@@ -0,0 +1,41 @@
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+   "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+   "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
+   "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+   "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
+   "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
+   "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
+   "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
+   "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
+
+2. License Grant.
+   Subject to the terms and conditions of this License, each Licensor hereby grants to You a worldwide, royalty-free, non-exclusive license to use, reproduce, modify, distribute, and publicly display the Work and Derivative Works thereof, and to sublicense the foregoing rights to third parties, provided that You include a copy of this License with every copy or substantial portion of the Work.
+
+3. Attribution.
+   You must give appropriate credit, provide a link to the License, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the Licensor endorses you or your use.
+
+4. Disclaimer of Warranty.
+   Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
+
+5. Limitation of Liability.
+   In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Licensor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Licensor has been advised of the possibility of such damages.
+
+6. Accepting the License.
+   You accept the License if you copy, modify, or distribute the Work in any way.
+
+7. Termination.
+   This License and the rights granted hereunder will terminate automatically if You fail to comply with any term of this License. You do not have the right to continue using the Work after termination. However, if You have not previously violated this License and have not received a notice of termination, you may continue to use the Work in accordance with this License.
+
+8. Other Terms.
+   You may not impose any further restrictions on the exercise of the rights granted or affirmed under this License. You may not use the Work in a manner that suggests that the Licensor endorses you or your use of the Work.
+
+9. Interpretation.
+   If any provision of this License is held to be unenforceable, such provision shall be interpreted to be enforceable to the maximum extent permissible, and the remaining provisions of this License shall remain in full force and effect.
+
+END OF TERMS AND CONDITIONS
@@ -0,0 +1,56 @@
+# LuCI Luxe Theme
+# Copyright (C) 2008-2014 The LuCI Team <luci@lists.subsignal.org>
+#
+# This is free software, licensed under the Apache License, Version 2.0 .
+#
+
+include $(TOPDIR)/rules.mk
+
+THEME_NAME:=luxe
+THEME_TITLE:=LuxeOs
+PKG_NAME:=luci-theme-$(THEME_NAME)
+PKG_VERSION:=2.6.0
+PKG_RELEASE:=1
+PKG_MAINTAINER:=xidz_x
+
+include $(INCLUDE_DIR)/package.mk
+
+define Package/luci-theme-$(THEME_NAME)
+	SECTION:=luci
+	CATEGORY:=LuCI
+	SUBMENU:=9. Themes
+	DEPENDS:=+libc +luci-base
+	TITLE:=LuCI Theme For OpenWrt - $(THEME_TITLE)
+	URL:=https://github.com/de-quenx/luci-theme-luxe
+	PKGARCH:=all
+endef
+
+define Build/Configure
+endef
+
+define Build/Compile
+endef
+
+define Package/luci-theme-$(THEME_NAME)/install
+	$(INSTALL_DIR) $(1)/etc
+	$(CP) -a ./root/etc/* $(1)/etc/ 2>/dev/null || true
+	$(INSTALL_DIR) $(1)/www/luci-static/$(THEME_NAME)
+	$(CP) -a ./htdocs/luci-static/$(THEME_NAME)/* $(1)/www/luci-static/$(THEME_NAME)/ 2>/dev/null || true
+	$(INSTALL_DIR) $(1)/www/luci-static/resources
+	$(CP) -a ./htdocs/luci-static/resources/* $(1)/www/luci-static/resources/ 2>/dev/null || true
+	$(INSTALL_DIR) $(1)/usr/share/ucode/luci/template/themes/$(THEME_NAME)
+	$(CP) -a ./template/* $(1)/usr/share/ucode/luci/template/themes/$(THEME_NAME)/ 2>/dev/null || true
+endef
+
+define Package/luci-theme-$(THEME_NAME)/postinst
+#!/bin/sh
+if [ -z "$${IPKG_INSTROOT}" ]; then
+	if [ -f /etc/uci-defaults/33_luci-theme-$(THEME_NAME) ]; then
+		. /etc/uci-defaults/33_luci-theme-$(THEME_NAME)
+		rm -f /etc/uci-defaults/33_luci-theme-$(THEME_NAME)
+	fi
+fi
+exit 0
+endef
+
+$(eval $(call BuildPackage,luci-theme-$(THEME_NAME)))
@@ -0,0 +1,247 @@
+# Luci-Theme-LuxeOs
+
+<p align="center">
+    <img src="https://img.shields.io/github/downloads/de-quenx/luci-theme-luxe/total?style=for-the-badge&logo=openwrt&labelColor=blue">
+</p>
+
+[English](README_EN.md) | [Indonesia](README.md) | [China](README_CN.md)
+
+**Luci-Theme-LuxeOs** adalah tema modern untuk OpenWrt yang mendukung **Auto Light & Dark Mode**. Tema ini menyediakan berbagai gaya / style tema: mewah, elegan, soft, simple, dengan customisasi.
+
+---
+
+## **FITUR UTAMA / GAYA THEMES**
+
+- **Neumorphism**: Tombol & card lembut dan elegan.  
+- **Glassmorphism**: Panel transparan dengan blur ringan, tampil smooth.  
+- **Glass 3D**: Efek kedalaman 3D pada card & panel, modern.  
+- **Glass Dark**: Versi gelap Glassmorphism, nyaman di mode malam.  
+- **Neo-Brutalism**: Tipografi tebal & warna solid, menonjolkan elemen penting.  
+- **Simple UI**: Layout minimalis, fokus pada konten, mudah dinavigasi.  
+- **Neon UI**: Elemen interaktif dengan glow lembut.  
+- **Crystal Glass**: Efek kaca kristal transparan dengan pantulan cahaya lembut.  
+- **RGB Accent**: Aksen warna RGB halus untuk highlight interaktif dan modern.
+
+---
+
+## Preview Tema
+
+Berikut beberapa cuplikan tampilan tema **Luci-Theme-LuxeOs**. Klik untuk melihat detail:
+
+<details>
+<summary>Tampilkan Preview Login</summary>
+
+<table cellspacing="0" cellpadding="1">
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/light.png" alt="Light">
+      <div align="center"><small>Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/glass-crystall.png" alt="Glass Crystall">
+      <div align="center"><small>Glass Crystall</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/glass-matte.png" alt="Glass Matte">
+      <div align="center"><small>Glass Matte</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/gradient.png" alt="Gradient">
+      <div align="center"><small>Gradient</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/dark.png" alt="Dark">
+      <div align="center"><small>Dark</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/neon.png" alt="Neon">
+      <div align="center"><small>Neon</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/ocean.png" alt="Ocean">
+      <div align="center"><small>Ocean</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/curve.png" alt="Curve">
+      <div align="center"><small>Curve</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/matrix.png" alt="Matrix">
+      <div align="center"><small>Matrix</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/neo-brutalism.png" alt="Neo-Brutalism">
+      <div align="center"><small>Neo-Brutalism</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/liquid-metal.png" alt="Liquid Metal">
+      <div align="center"><small>Liquid Metal</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/liquid-flow.png" alt="Liquid Flow">
+      <div align="center"><small>Liquid Flow</small></div>
+    </td>
+  </tr>
+</table>
+
+</details>
+
+<details>
+<summary>Tampilkan Preview Dashboard</summary>
+
+<table cellspacing="0" cellpadding="1">
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/luxe-light.png" alt="Luxe Light">
+      <div align="center"><small>Luxe Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/luxe-dark.png" alt="Luxe Dark">
+      <div align="center"><small>Luxe Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glass-liquid.png" alt="Glass Liquid">
+      <div align="center"><small>Glass Liquid</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glass-luxe.png" alt="Glass Luxe">
+      <div align="center"><small>Glass Luxe</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glass-crystall.png" alt="Glass Crystall">
+      <div align="center"><small>Glass Crystall</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glass-dark.png" alt="Glass Dark">
+      <div align="center"><small>Glass Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/neobrutalism-light.png" alt="Neobrutalism Light">
+      <div align="center"><small>Neobrutalism Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/neobrutalism-dark.png" alt="Neobrutalism Dark">
+      <div align="center"><small>Neobrutalism Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/neomorphism-light.png" alt="Neomorphism Light">
+      <div align="center"><small>Neomorphism Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/neomorphism-dark.png" alt="Neomorphism Dark">
+      <div align="center"><small>Neomorphism Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/neon.png" alt="Neon">
+      <div align="center"><small>Neon</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/rgb.png" alt="RGB">
+      <div align="center"><small>RGB</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glaze-light.png" alt="Glaze Light">
+      <div align="center"><small>Glaze Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glaze-dark.png" alt="Glaze Dark">
+      <div align="center"><small>Glaze Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/onyx-light.png" alt="Onyx Light">
+      <div align="center"><small>Onyx Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/onyx-dark.png" alt="Onyx Dark">
+      <div align="center"><small>Onyx Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/liquid-neo.png" alt="Liquid Neo">
+      <div align="center"><small>Liquid Neo</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/sample-interface.png" alt="Sample Interface">
+      <div align="center"><small>Sample Interface</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/sample-wireless.png" alt="Sample Wireless">
+      <div align="center"><small>Sample Wireless</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/sample-config.png" alt="Sample Config">
+      <div align="center"><small>Sample Config</small></div>
+    </td>
+  </tr>
+</table>
+
+</details>
+
+---
+
+## Instalasi
+
+1. **Unduh Paket**:
+
+   - OpenWrt (IPK):
+     ```bash
+     opkg install luci-theme-luxe*.ipk
+     ```
+   - SNAPSHOT (APK):
+     ```bash
+     apk add luci-theme-luxe*.apk
+     ```
+
+2. **Aktifkan Tema**:
+
+   - Buka LuCI → System → System → Language and Style.  
+   - Pilih **luxe** dari dropdown Design Theme.
+
+3. Selesai! Tema sudah aktif.
+
+---
+
+## Berkontribusi
+
+1. Laporkan bug melalui [GitHub Issues](https://github.com/de-quenx/luci-theme-luxe/issues).  
+2. Kirim Pull Request: fork repositori, buat perubahan, dan kirim PR.  
+3. Berikan saran atau masukan untuk pengembangan tema.
+
+---
+
+## Lisensi
+
+**Luci-Theme-LuxeOs** dilisensikan di bawah **Apache License 2.0**.
+
+---
+
+## Credit
+
+- [Theme Material](https://github.com/LuttyYang/luci-theme-material)
@@ -0,0 +1,247 @@
+# Luci-Theme-LuxeOs
+
+<p align="center">
+    <img src="https://img.shields.io/github/downloads/de-quenx/luci-theme-luxe/total?style=for-the-badge&logo=openwrt&labelColor=blue">
+</p>
+
+[英文](README_EN.md) | [印尼文](README.md)
+
+**Luci-Theme-LuxeOs** 是一款适用于 OpenWrt 的现代 HTML5 主题，支持 **自动亮/暗模式 (Auto Light & Dark Mode)**。它提供多种风格选项：优雅、奢华、柔和，并集合了一系列实用功能，带来流畅直观的用户体验。
+
+---
+
+## **主要功能 / 主题风格**
+
+- **新拟态 (Neumorphism)**：柔和且优雅的按钮与卡片。  
+- **玻璃拟态 (Glassmorphism)**：带有轻度模糊效果的透明面板，外观平滑。  
+- **3D 玻璃 (Glass 3D)**：为卡片与面板增加景深，呈现现代感。  
+- **暗黑玻璃 (Glass Dark)**：玻璃拟态的暗色版本，观感舒适护眼。  
+- **新粗野主义 (Neo-Brutalism)**：粗体排版与纯色填充，突出关键元素。  
+- **极简 UI (Simple UI)**：极简布局，专注于内容，易于导航。  
+- **霓虹 UI (Neon UI)**：带有柔和发光效果的交互元素。  
+- **水晶玻璃 (Crystal Glass)**：透明的水晶状面板，带有柔和的光线反射。  
+- **RGB 强调色 (RGB Accent)**：细腻的 RGB 强调色，突出交互元素。
+
+---
+
+## 主题预览
+
+以下是 **Luci-Theme-LuxeOs** 的一些截图。点击展开查看：
+
+<details>
+<summary>显示登录页面预览</summary>
+
+<table cellspacing="0" cellpadding="1">
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/light.png" alt="Light">
+      <div align="center"><small>Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/glass-crystall.png" alt="Glass Crystall">
+      <div align="center"><small>Glass Crystall</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/glass-matte.png" alt="Glass Matte">
+      <div align="center"><small>Glass Matte</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/gradient.png" alt="Gradient">
+      <div align="center"><small>Gradient</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/dark.png" alt="Dark">
+      <div align="center"><small>Dark</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/neon.png" alt="Neon">
+      <div align="center"><small>Neon</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/ocean.png" alt="Ocean">
+      <div align="center"><small>Ocean</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/curve.png" alt="Curve">
+      <div align="center"><small>Curve</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/matrix.png" alt="Matrix">
+      <div align="center"><small>Matrix</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/neo-brutalism.png" alt="Neo-Brutalism">
+      <div align="center"><small>Neo-Brutalism</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/liquid-metal.png" alt="Liquid Metal">
+      <div align="center"><small>Liquid Metal</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/liquid-flow.png" alt="Liquid Flow">
+      <div align="center"><small>Liquid Flow</small></div>
+    </td>
+  </tr>
+</table>
+
+</details>
+
+<details>
+<summary>显示仪表盘预览</summary>
+
+<table cellspacing="0" cellpadding="1">
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/luxe-light.png" alt="Luxe Light">
+      <div align="center"><small>Luxe Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/luxe-dark.png" alt="Luxe Dark">
+      <div align="center"><small>Luxe Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glass-liquid.png" alt="Glass Liquid">
+      <div align="center"><small>Glass Liquid</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glass-luxe.png" alt="Glass Luxe">
+      <div align="center"><small>Glass Luxe</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glass-crystall.png" alt="Glass Crystall">
+      <div align="center"><small>Glass Crystall</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glass-dark.png" alt="Glass Dark">
+      <div align="center"><small>Glass Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/neobrutalism-light.png" alt="Neobrutalism Light">
+      <div align="center"><small>Neobrutalism Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/neobrutalism-dark.png" alt="Neobrutalism Dark">
+      <div align="center"><small>Neobrutalism Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/neomorphism-light.png" alt="Neomorphism Light">
+      <div align="center"><small>Neomorphism Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/neomorphism-dark.png" alt="Neomorphism Dark">
+      <div align="center"><small>Neomorphism Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/neon.png" alt="Neon">
+      <div align="center"><small>Neon</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/rgb.png" alt="RGB">
+      <div align="center"><small>RGB</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glaze-light.png" alt="Glaze Light">
+      <div align="center"><small>Glaze Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glaze-dark.png" alt="Glaze Dark">
+      <div align="center"><small>Glaze Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/onyx-light.png" alt="Onyx Light">
+      <div align="center"><small>Onyx Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/onyx-dark.png" alt="Onyx Dark">
+      <div align="center"><small>Onyx Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/liquid-neo.png" alt="Liquid Neo">
+      <div align="center"><small>Liquid Neo</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/sample-interface.png" alt="Sample Interface">
+      <div align="center"><small>Sample Interface</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/sample-wireless.png" alt="Sample Wireless">
+      <div align="center"><small>Sample Wireless</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/sample-config.png" alt="Sample Config">
+      <div align="center"><small>Sample Config</small></div>
+    </td>
+  </tr>
+</table>
+
+</details>
+
+---
+
+## 安装
+
+1. **下载软件包**：
+
+   - OpenWrt (IPK):
+     ```bash
+     opkg install luci-theme-luxe*.ipk
+     ```
+   - SNAPSHOT (APK):
+     ```bash
+     apk add luci-theme-luxe*.apk
+     ```
+
+2. **启用主题**：
+
+   - 前往 LuCI → System → System → Language and Style。  
+   - 从 Design Theme 下拉菜单中选择 **Luxe**。
+
+3. 完成！主题现已激活。
+
+---
+
+## 贡献
+
+1. 通过 [GitHub Issues](https://github.com/de-quenx/luci-theme-luxe/issues) 报告漏洞 (bug)。  
+2. 提交 Pull Request：复刻 (fork) 本仓库，进行修改，然后提交 PR。  
+3. 分享您的建议以帮助改进主题。
+
+---
+
+## 许可证
+
+**Luci-Theme-LuxeOs** 采用 **Apache License 2.0** 许可证。
+
+---
+
+## 鸣谢
+
+- [Theme Material](https://github.com/LuttyYang/luci-theme-material)
@@ -0,0 +1,247 @@
+# Luci-Theme-LuxeOs
+
+<p align="center">
+    <img src="https://img.shields.io/github/downloads/de-quenx/luci-theme-luxe/total?style=for-the-badge&logo=openwrt&labelColor=blue">
+</p>
+
+[English](README_EN.md) | [Indonesia](README.md)
+
+**Luci-Theme-LuxeOs** is a modern HTML5 theme for OpenWrt that supports **Auto Light & Dark Mode**. It offers various style options: elegant, luxurious, soft, with a collection of useful features for a smooth and intuitive user experience.
+
+---
+
+## **MAIN FEATURES / THEME STYLES**
+
+- **Neumorphism**: Soft and elegant buttons and cards.  
+- **Glassmorphism**: Transparent panels with light blur, smooth appearance.  
+- **Glass 3D**: Adds depth to cards and panels for a modern look.  
+- **Glass Dark**: Dark mode version of Glassmorphism, easy on the eyes.  
+- **Neo-Brutalism**: Bold typography and solid colors to highlight key elements.  
+- **Simple UI**: Minimalist layout, focused on content, easy to navigate.  
+- **Neon UI**: Interactive elements with subtle glowing highlights.  
+- **Crystal Glass**: Transparent crystal-like panels with soft light reflections.  
+- **RGB Accent**: Subtle RGB color accents to highlight interactive elements.
+
+---
+
+## Theme Preview
+
+Here are some screenshots of **Luci-Theme-LuxeOs**. Click to expand:
+
+<details>
+<summary>Show Login Preview</summary>
+
+<table cellspacing="0" cellpadding="1">
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/light.png" alt="Light">
+      <div align="center"><small>Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/glass-crystall.png" alt="Glass Crystall">
+      <div align="center"><small>Glass Crystall</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/glass-matte.png" alt="Glass Matte">
+      <div align="center"><small>Glass Matte</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/gradient.png" alt="Gradient">
+      <div align="center"><small>Gradient</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/dark.png" alt="Dark">
+      <div align="center"><small>Dark</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/neon.png" alt="Neon">
+      <div align="center"><small>Neon</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/ocean.png" alt="Ocean">
+      <div align="center"><small>Ocean</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/curve.png" alt="Curve">
+      <div align="center"><small>Curve</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/matrix.png" alt="Matrix">
+      <div align="center"><small>Matrix</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/neo-brutalism.png" alt="Neo-Brutalism">
+      <div align="center"><small>Neo-Brutalism</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/liquid-metal.png" alt="Liquid Metal">
+      <div align="center"><small>Liquid Metal</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-login/liquid-flow.png" alt="Liquid Flow">
+      <div align="center"><small>Liquid Flow</small></div>
+    </td>
+  </tr>
+</table>
+
+</details>
+
+<details>
+<summary>Show Dashboard Preview</summary>
+
+<table cellspacing="0" cellpadding="1">
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/luxe-light.png" alt="Luxe Light">
+      <div align="center"><small>Luxe Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/luxe-dark.png" alt="Luxe Dark">
+      <div align="center"><small>Luxe Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glass-liquid.png" alt="Glass Liquid">
+      <div align="center"><small>Glass Liquid</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glass-luxe.png" alt="Glass Luxe">
+      <div align="center"><small>Glass Luxe</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glass-crystall.png" alt="Glass Crystall">
+      <div align="center"><small>Glass Crystall</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glass-dark.png" alt="Glass Dark">
+      <div align="center"><small>Glass Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/neobrutalism-light.png" alt="Neobrutalism Light">
+      <div align="center"><small>Neobrutalism Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/neobrutalism-dark.png" alt="Neobrutalism Dark">
+      <div align="center"><small>Neobrutalism Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/neomorphism-light.png" alt="Neomorphism Light">
+      <div align="center"><small>Neomorphism Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/neomorphism-dark.png" alt="Neomorphism Dark">
+      <div align="center"><small>Neomorphism Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/neon.png" alt="Neon">
+      <div align="center"><small>Neon</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/rgb.png" alt="RGB">
+      <div align="center"><small>RGB</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glaze-light.png" alt="Glaze Light">
+      <div align="center"><small>Glaze Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/glaze-dark.png" alt="Glaze Dark">
+      <div align="center"><small>Glaze Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/onyx-light.png" alt="Onyx Light">
+      <div align="center"><small>Onyx Light</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/onyx-dark.png" alt="Onyx Dark">
+      <div align="center"><small>Onyx Dark</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/liquid-neo.png" alt="Liquid Neo">
+      <div align="center"><small>Liquid Neo</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/sample-interface.png" alt="Sample Interface">
+      <div align="center"><small>Sample Interface</small></div>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/sample-wireless.png" alt="Sample Wireless">
+      <div align="center"><small>Sample Wireless</small></div>
+    </td>
+    <td width="50%" align="center">
+      <img src="./previews/luxe-home/sample-config.png" alt="Sample Config">
+      <div align="center"><small>Sample Config</small></div>
+    </td>
+  </tr>
+</table>
+
+</details>
+
+---
+
+## Installation
+
+1. **Download Package**:
+
+   - OpenWrt (IPK):
+     ```bash
+     opkg install luci-theme-luxe*.ipk
+     ```
+   - SNAPSHOT (APK):
+     ```bash
+     apk add luci-theme-luxe*.apk
+     ```
+
+2. **Activate Theme**:
+
+   - Go to LuCI → System → System → Language and Style.  
+   - Select **Luxe** from the Design Theme dropdown.
+
+3. Done! The theme is now active.
+
+---
+
+## Contributing
+
+1. Report bugs via [GitHub Issues](https://github.com/de-quenx/luci-theme-luxe/issues).  
+2. Submit Pull Requests: fork the repository, make changes, and send a PR.  
+3. Share suggestions to improve the theme.
+
+---
+
+## License
+
+**Luci-Theme-LuxeOs** is licensed under **Apache License 2.0**.
+
+---
+
+## Credit
+
+- [Theme Material](https://github.com/LuttyYang/luci-theme-material)
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#202124" d="m8,10.033663l-6.898535,-6.013274l-1.060688,0.972974l7.959223,6.986249l7.959223,-6.986249l-1.060688,-0.972974l-6.898535,6.013274z"/></svg>
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 16.5V19C15 20.1046 14.1046 21 13 21H6C4.89543 21 4 20.1046 4 19V5C4 3.89543 4.89543 3 6 3H13C14.1046 3 15 3.89543 15 5V8.0625M11 12H21M21 12L18.5 9.5M21 12L18.5 14.5" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",function(){document.addEventListener('wheel',e=>e.ctrlKey&&e.preventDefault(),{passive:false});document.addEventListener('keydown',e=>(e.ctrlKey&&(e.key==='+'||e.key==='-'||e.key==='0'))&&e.preventDefault());document.addEventListener('touchstart',e=>e.touches.length>1&&e.preventDefault(),{passive:false});document.addEventListener('touchmove',e=>e.touches.length>1&&e.preventDefault(),{passive:false});document.addEventListener('gesturestart',e=>e.preventDefault());document.addEventListener('gesturechange',e=>e.preventDefault());document.addEventListener('gestureend',e=>e.preventDefault());let lastTouchEnd=0;document.addEventListener('touchend',e=>{const now=Date.now();if(now-lastTouchEnd<=300)e.preventDefault();lastTouchEnd=now;});document.addEventListener('dblclick',e=>e.preventDefault());document.body.style.cssText+='-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:pan-y;';const A=document.getElementById('a');if(A){setTimeout(()=>{A.classList.add('fade-out');setTimeout(()=>A.remove(),400);},3500);}const pI=document.getElementById('p_in');const tE=document.getElementById('t_eye');const uI=document.getElementById('u_in');const uE=document.getElementById('u_eye');const sS='✦';const sH='✧';if(pI&&tE){tE.innerHTML=sH;tE.onclick=()=>{if(pI.type==='password'){pI.type='text';tE.innerHTML=sS;}else{pI.type='password';tE.innerHTML=sH;}};}if(uI&&uE){uE.innerHTML=sS;uE.onclick=()=>{if(uI.type==='text'){uI.type='password';uE.innerHTML=sH;}else{uI.type='text';uE.innerHTML=sS;}};}const themeBtn=document.getElementById('b');if(themeBtn){const T=['light','glass','glass-matte','gradien','dark','neon','ocean','curve','matrix','pulse','brutal','metal-glass','liquid-flow'];const D=document.body;let C=localStorage.theme||'light';if(!T.includes(C))C='light';D.className=`luxe-login ${C}`;themeBtn.textContent=C.toUpperCase();function toggleLiquidState(isPaused){const container=document.querySelector('.login_form_container');const form=document.querySelector('.login_form');if(container)container.classList.toggle('liquid-flow-paused',isPaused);if(form)form.classList.toggle('liquid-flow-paused',isPaused);}themeBtn.onclick=()=>{if(D.classList.contains('liquid-flow'))toggleLiquidState(true);C=T[(T.indexOf(C)+1)%T.length];D.className=`luxe-login ${C}`;themeBtn.textContent=C.toUpperCase();localStorage.theme=C;if(C==='liquid-flow')setTimeout(()=>toggleLiquidState(false),500);else toggleLiquidState(false);};if(C==='liquid-flow')setTimeout(()=>toggleLiquidState(false),1000);}const timeEl=document.getElementById('t');const dEl=document.getElementById('d');if(timeEl||dEl){function toHijri(date){const d=new Date(date.getTime()+86400000);const gYear=d.getFullYear(),gMonth=d.getMonth()+1,gDay=d.getDate();let a=Math.floor((14-gMonth)/12);let y=gYear+4800-a;let m=gMonth+12*a-3;let jdn=gDay+Math.floor((153*m+2)/5)+365*y+Math.floor(y/4)-Math.floor(y/100)+Math.floor(y/400)-32045;let l=jdn-1948440+10632;let n=Math.floor((l-1)/10631);l=l-10631*n+354;let j=(Math.floor((10985-l)/5316))*(Math.floor((50*l)/17719))+(Math.floor(l/5670))*(Math.floor((43*l)/15238));l=l-(Math.floor((30-j)/15))*(Math.floor((17719*j)/50))-(Math.floor(j/16))*(Math.floor((15238*j)/43))+29;let hijriMonth=Math.floor((24*l)/709);let hijriDay=l-Math.floor((709*hijriMonth)/24);let hijriYear=30*n+j-30;return{year:hijriYear,month:hijriMonth,day:hijriDay};}const hijriMonths=['Muharram','Safar','Rabiul Awal','Rabiul Akhir','Jumadil Awal','Jumadil Akhir','Rajab','Syaban','Ramadan','Syawal','Dzulqadah','Dzulhijjah'];const updateClock=()=>{const N=new Date();const isHijri=Math.floor(N.getTime()/60000)%2;if(timeEl)timeEl.textContent=N.toLocaleTimeString('id-ID',{hour:'2-digit',minute:'2-digit',second:'2-digit'});if(dEl){if(isHijri){const h=toHijri(N);const weekday=N.toLocaleDateString('id-ID',{weekday:'long'});dEl.textContent=`${weekday}, ${h.day} ${hijriMonths[h.month-1]} ${h.year} H`;}else{dEl.textContent=N.toLocaleDateString('id-ID',{weekday:'long',day:'numeric',month:'short',year:'numeric'});}}};updateClock();setInterval(updateClock,1000);}let isDeleting=false;let currentIndex=0;let currentTextIndex=0;let typeSpeed=180;let deleteSpeed=120;let texts=[];function typewriter(){const h=document.getElementById('hostname');if(!h)return;const hostnameText=h.getAttribute('data-text')||'';texts=['WELCOME',hostnameText];const type=()=>{const currentText=texts[currentTextIndex];if(!isDeleting&&currentIndex<currentText.length){h.innerHTML=currentText.substring(0,currentIndex+1);currentIndex++;setTimeout(type,typeSpeed);}else if(!isDeleting&&currentIndex===currentText.length){setTimeout(()=>{isDeleting=true;type();},3000);}else if(isDeleting&&currentIndex>0){currentIndex--;h.innerHTML=currentText.substring(0,currentIndex);setTimeout(type,deleteSpeed);}else if(isDeleting&&currentIndex===0){isDeleting=false;currentTextInLine truncated
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="96" height="96">
+<path d="M0 0 C1.36567846 -0.0020242 2.73135586 -0.00493851 4.09703064 -0.00869751 C6.9489885 -0.01310316 9.80066313 -0.00674615 12.65258789 0.00732422 C16.29640476 0.02443182 19.93955936 0.01455448 23.58335209 -0.00339317 C26.39990678 -0.01426509 29.21630599 -0.01076945 32.03286552 -0.0030098 C34.0258261 -0.00005438 36.01879288 -0.00911567 38.01173401 -0.0184021 C39.2299736 -0.00894562 40.4482132 0.00051086 41.70336914 0.01025391 C43.3038485 0.01383408 43.3038485 0.01383408 44.93666077 0.01748657 C49.75451938 0.62358195 52.99690288 2.35201494 56.27734375 5.8984375 C58.99581017 9.92579516 59.10157374 13.02272674 59.1418457 17.77832031 C59.16109856 19.75617523 59.16109856 19.75617523 59.18074036 21.77398682 C59.18890895 23.21650821 59.19635245 24.65903387 59.203125 26.1015625 C59.20720053 26.82925591 59.21127605 27.55694931 59.21547508 28.30669403 C59.23632204 32.15970067 59.25062867 36.01267185 59.26000977 39.86572266 C59.27106082 43.83467173 59.30544884 47.8030581 59.34518147 51.77180862 C59.37139697 54.83285525 59.37970601 57.89376891 59.38329124 60.95491791 C59.38814589 62.41728254 59.39972789 63.87964168 59.41832924 65.34189606 C59.59153295 79.86202547 59.59153295 79.86202547 54.96484375 85.3984375 C51.04644433 88.2871218 48.24512056 88.77657018 43.41796875 88.78662109 C42.11311523 88.79607758 40.80826172 88.80553406 39.46386719 88.8152771 C38.04752294 88.80990709 36.63118147 88.80375406 35.21484375 88.796875 C33.75423029 88.79889742 32.29361782 88.80181026 30.83300781 88.80557251 C27.7765946 88.80998799 24.72044499 88.80359012 21.6640625 88.78955078 C17.75330624 88.77245903 13.8431677 88.78230442 9.93243408 88.80026817 C6.91775895 88.8111272 3.90322941 88.80765003 0.8885498 88.7998848 C-0.55310134 88.79788863 -1.99476585 88.80032153 -3.43640137 88.80732346 C-5.45369197 88.81497193 -7.47102913 88.80124044 -9.48828125 88.78662109 C-10.63458008 88.78423431 -11.78087891 88.78184753 -12.96191406 88.77938843 C-17.6118613 88.20299334 -21.0501287 85.98047056 -24.03515625 82.3984375 C-25.17327586 78.98407866 -25.18306954 76.32867933 -25.2121582 72.72729492 C-25.2187294 72.05374466 -25.2253006 71.3801944 -25.23207092 70.68623352 C-25.25176964 68.45878991 -25.26345875 66.23141361 -25.2734375 64.00390625 C-25.27751303 63.24186701 -25.28158855 62.47982777 -25.28578758 61.69469643 C-25.30663364 57.66129453 -25.32094171 53.62792651 -25.33032227 49.59448242 C-25.34138424 45.43487655 -25.37578531 41.275806 -25.41549397 37.11638927 C-25.44167469 33.91212489 -25.45001535 30.7079878 -25.45360374 27.50362587 C-25.45846591 25.97065935 -25.47006948 24.43769838 -25.48864174 22.90483665 C-25.5130661 20.75538406 -25.5120632 18.60731338 -25.50512695 16.45776367 C-25.51099319 15.23659348 -25.51685944 14.01542328 -25.52290344 12.75724792 C-24.93490038 8.7080379 -23.58183737 6.56603864 -21.03515625 3.3984375 C-14.59884852 -0.74657312 -7.43847443 -0.0347147 0 0 Z " fill="#B8B9B9" transform="translate(32.03515625,3.6015625)"/>
+<path d="M0 0 C1.36567846 -0.0020242 2.73135586 -0.00493851 4.09703064 -0.00869751 C6.9489885 -0.01310316 9.80066313 -0.00674615 12.65258789 0.00732422 C16.29640476 0.02443182 19.93955936 0.01455448 23.58335209 -0.00339317 C26.39990678 -0.01426509 29.21630599 -0.01076945 32.03286552 -0.0030098 C34.0258261 -0.00005438 36.01879288 -0.00911567 38.01173401 -0.0184021 C39.2299736 -0.00894562 40.4482132 0.00051086 41.70336914 0.01025391 C43.3038485 0.01383408 43.3038485 0.01383408 44.93666077 0.01748657 C49.75451938 0.62358195 52.99690288 2.35201494 56.27734375 5.8984375 C58.99581017 9.92579516 59.10157374 13.02272674 59.1418457 17.77832031 C59.16109856 19.75617523 59.16109856 19.75617523 59.18074036 21.77398682 C59.18890895 23.21650821 59.19635245 24.65903387 59.203125 26.1015625 C59.20720053 26.82925591 59.21127605 27.55694931 59.21547508 28.30669403 C59.23632204 32.15970067 59.25062867 36.01267185 59.26000977 39.86572266 C59.27106082 43.83467173 59.30544884 47.8030581 59.34518147 51.77180862 C59.37139697 54.83285525 59.37970601 57.89376891 59.38329124 60.95491791 C59.38814589 62.41728254 59.39972789 63.87964168 59.41832924 65.34189606 C59.59153295 79.86202547 59.59153295 79.86202547 54.96484375 85.3984375 C51.04644433 88.2871218 48.24512056 88.77657018 43.41796875 88.78662109 C42.11311523 88.79607758 40.80826172 88.80553406 39.46386719 88.8152771 C38.04752294 88.80990709 36.63118147 88.80375406 35.21484375 88.796875 C33.75423029 88.79889742 32.29361782 88.80181026 30.83300781 88.80557251 C27.7765946 88.80998799 24.72044499 88.80359012 21.6640625 88.78955078 C17.75330624 88.77245903 13.8431677 88.78230442 9.93243408 88.80026817 C6.91775895 88.8111272 3.90322941 88.80765003 0.8885498 88.7998848 C-0.55310134 88.79788863 -1.99476585 88.80032153 -3.43640137 88.80732346 C-5.45369197 88.81497193 -7.47102913 88.80124044 -9.48828125 88.78662109 C-10.63458008 88.78423431 -11.78087891 88.78184753 -12.96191406 88.77938843 C-17.6118613 88.20299334 -21.0501287 85.98047056 -24.03515625 82.3984375 C-25.17327586 78.98407866 -25.18306954 76.32867933 -25.2121582 72.72729492 C-25.2187294 72.05374466 -25.2253006 71.3801944 -25.23207092 70.68623352 C-25.25176964 68.45878991 -25.26345875 66.23141361 -25.2734375 64.00390625 C-25.27751303 63.24186701 -25.28158855 62.47982777 -25.28578758 61.69469643 C-25.30663364 57.66129453 -25.32094171 53.62792651 -25.33032227 49.59448242 C-25.34138424 45.43487655 -25.37578531 41.275806 -25.41549397 37.11638927 C-25.44167469 33.91212489 -25.45001535 30.7079878 -25.45360374 27.50362587 C-25.45846591 25.97065935 -25.47006948 24.43769838 -25.48864174 22.90483665 C-25.5130661 20.75538406 -25.5120632 18.60731338 -25.50512695 16.45776367 C-25.51099319 15.23659348 -25.51685944 14.01542328 -25.52290344 12.75724792 C-24.93490038 8.7080379 -23.58183737 6.56603864 -21.03515625 3.3984375 C-14.59884852 -0.74657312 -7.43847443 -0.0347147 0 0 Z M-10.03515625 22.3984375 C-16.32855401 30.69091454 -18.7164208 39.43773508 -17.82421875 49.86328125 C-16.31525069 57.9633079 -12.27394281 65.0301793 -6.03515625 70.3984375 C-5.46023437 70.90246094 -4.8853125 71.40648437 -4.29296875 71.92578125 C3.02710789 77.93765142 10.82168672 79.99831164 20.234375 79.6796875 C31.39513012 78.53008182 39.35936581 73.19388448 46.421875 64.64453125 C52.13017102 56.33498641 53.03273907 47.24555646 51.96484375 37.3984375 C50.23332974 28.63766462 45.74436329 22.13495404 38.96484375 16.3984375 C21.88091903 5.73182461 3.74309348 7.02747266 -10.03515625 22.3984375 Z " fill="#1036A4" transform="translate(32.03515625,3.6015625)"/>
+<path d="M0 0 C0.5775 0.226875 1.155 0.45375 1.75 0.6875 C2.245 2.6675 2.245 2.6675 2.75 4.6875 C2.04653442 5.34552612 2.04653442 5.34552612 1.32885742 6.0168457 C-0.8020892 8.0107031 -2.93230171 10.00534313 -5.0625 12 C-6.16948242 13.03543945 -6.16948242 13.03543945 -7.29882812 14.09179688 C-8.01103516 14.75888672 -8.72324219 15.42597656 -9.45703125 16.11328125 C-10.1116333 16.72598877 -10.76623535 17.33869629 -11.44067383 17.9699707 C-13.07094802 19.51753229 -14.66921514 21.08960245 -16.25 22.6875 C-15.69948975 23.21182617 -15.14897949 23.73615234 -14.58178711 24.27636719 C-12.10411522 26.65035432 -9.64579582 29.04346135 -7.1875 31.4375 C-6.32060547 32.2625 -5.45371094 33.0875 -4.56054688 33.9375 C-3.74521484 34.73671875 -2.92988281 35.5359375 -2.08984375 36.359375 C-0.95083618 37.45910645 -0.95083618 37.45910645 0.21118164 38.58105469 C1.75 40.6875 1.75 40.6875 1.48999023 42.95800781 C0.75 44.6875 0.75 44.6875 -0.97949219 45.42749023 C-3.25 45.6875 -3.25 45.6875 -5.35644531 44.14868164 C-6.08959961 43.38934326 -6.82275391 42.63000488 -7.578125 41.84765625 C-8.37734375 41.03232422 -9.1765625 40.21699219 -10 39.37695312 C-10.825 38.51005859 -11.65 37.64316406 -12.5 36.75 C-13.34046875 35.88697266 -14.1809375 35.02394531 -15.046875 34.13476562 C-17.12617282 31.99639685 -19.19296615 29.84725911 -21.25 27.6875 C-25.59011439 30.4734031 -25.59011439 30.4734031 -29.3125 34 C-29.951875 34.556875 -30.59125 35.11375 -31.25 35.6875 C-34 35.4375 -34 35.4375 -36.25 34.6875 C-36.745 33.2025 -36.745 33.2025 -37.25 31.6875 C-34.25 28.6875 -31.25 25.6875 -28.25 22.6875 C-29.69910679 18.91982234 -32.11757012 16.82505081 -35.10546875 14.25 C-36.25 12.6875 -36.25 12.6875 -35.92578125 10.5 C-35.70277344 9.901875 -35.47976562 9.30375 -35.25 8.6875 C-33.546875 7.91015625 -33.546875 7.91015625 -31.25 7.6875 C-28.890625 9.55859375 -28.890625 9.55859375 -26.5 12.125 C-25.30117188 13.39150391 -25.30117188 13.39150391 -24.078125 14.68359375 C-23.47484375 15.34488281 -22.8715625 16.00617187 -22.25 16.6875 C-17.05104039 13.03716666 -12.49721155 9.1158807 -8.109375 4.51953125 C-3.0872093 -0.42877907 -3.0872093 -0.42877907 0 0 Z " fill="#0E35A4" transform="translate(72.25,25.3125)"/>
+<path d="M0 0 C1.73828125 1.60546875 1.73828125 1.60546875 3 3 C1.9375 4.5625 1.9375 4.5625 0 6 C-3.57443924 5.74468291 -6.60365077 5.13211641 -10 4 C-17.60757093 3.22785054 -24.42021362 3.91074433 -31 8 C-37.63235181 13.95467432 -41.11634594 19.71680817 -41.9765625 28.5859375 C-42.02532704 33.60868493 -40.57517688 38.27446937 -39 43 C-40.375 44.5 -40.375 44.5 -42 46 C-42.66 46 -43.32 46 -44 46 C-48.16978864 36.54351506 -50.00584702 27.71194582 -46.375 17.75 C-42.02651397 8.29545197 -35.91345856 1.77105795 -26.14453125 -2.14453125 C-17.85501633 -4.39969121 -7.69702586 -4.12886817 0 0 Z " fill="#0F36A4" transform="translate(65,19)"/>
+<path d="M0 0 C0.85658203 0.433125 0.85658203 0.433125 1.73046875 0.875 C10.14956573 4.72984886 18.97926603 5.76751487 27.8125 2.5 C28.864375 2.005 29.91625 1.51 31 1 C31.99 1.99 32.98 2.98 34 4 C33 7 33 7 29.75 8.625 C20.10394961 12.16188514 11.55782345 11.6965798 2 8 C-1.125 6.3125 -1.125 6.3125 -3 5 C-1.125 1.125 -1.125 1.125 0 0 Z " fill="#0E35A4" transform="translate(33,70)"/>
+</svg>
@@ -0,0 +1 @@
+'use strict';'require baseclass';'require ui';return baseclass.extend({__init__(){ui.menu.load().then(L.bind(this.render,this))},render(e){let t=e,s='';if(this.renderModeMenu(t),L.env.dispatchpath.length>=3){for(let a=0;a<3&&t;a++)t=t.children[L.env.dispatchpath[a]],s=s+(s?'/':'')+L.env.dispatchpath[a];t&&this.renderTabMenu(t,s)}this.bindSettings(),this.initSidebarState(),this.loadLuxeSettings(),this.initNavbarSlider(),this.setActiveIcon(),this.initIdleTimer(),window.addEventListener('resize',L.bind(this.initSidebarState,this));const a=document.querySelector('.main > .loading');a&&(a.style.opacity='0',a.style.visibility='hidden',a.style.pointerEvents='none'),this.initTypingEffect()},initIdleTimer(){const e=document.getElementById('floating-navbar');if(!e)return;let t;const s=()=>{e.classList.remove('navbar-hidden'),clearTimeout(t),'1'===document.body.getAttribute('data-autohide')&&(t=setTimeout(()=>e.classList.add('navbar-hidden'),3e3))};['touchstart','mousemove','scroll','click','keydown'].forEach(e=>document.addEventListener(e,s,{passive:!0})),s()},bindSettings(){const e=document.querySelector('.showSide'),t=document.querySelector('.darkMask'),s=document.getElementById('settings-toggle'),a=document.getElementById('luxe-settings-menu'),n=document.getElementById('mode-selection-container'),r=['normal','neo','neox','glaze','onyx'];e&&e.addEventListener('click',ui.createHandlerFn(this,'handleSidebarToggle')),t&&t.addEventListener('click',ui.createHandlerFn(this,'handleSidebarToggle')),s&&a&&(s.addEventListener('click',e=>{a.style.display='none'===a.style.display?'block':'none',e.stopPropagation()}),document.querySelectorAll('.style-card').forEach(e=>{e.addEventListener('click',e=>{document.querySelectorAll('.style-card').forEach(e=>e.classList.remove('active')),e.currentTarget.classList.add('active'),n&&(n.style.display=r.includes(e.currentTarget.getAttribute('data-style'))?'block':'none'),this.autoSave(),e.stopPropagation()})}),document.querySelectorAll('.mode-card, .icon-card').forEach(e=>{e.addEventListener('click',e=>{const t=e.currentTarget.classList.contains('mode-card')?'.mode-card':'.icon-card';document.querySelectorAll(t).forEach(e=>e.classList.remove('active')),e.currentTarget.classList.add('active'),this.autoSave(),e.stopPropagation()})}),['set-floating','set-slider-navbar','set-autohide-navbar','set-hostname'].forEach(e=>{const t=document.getElementById(e);t&&t.addEventListener('change',()=>this.autoSave())}),a.addEventListener('click',e=>e.stopPropagation()),document.addEventListener('click',()=>{'block'===a.style.display&&(a.style.display='none')}))},initTypingEffect(){const e=document.querySelector(".brand");if(e&&!e.hasAttribute("data-typed")){e.setAttribute("data-typed","true");const t=e.textContent.trim(),s=`Hello...! ${t}`;e.textContent="",e.classList.add("typing");let a=0;const n=()=>{a<s.length&&(e.textContent+=s.charAt(a),a++,requestAnimationFrame(()=>setTimeout(n,90)))};setTimeout(n,400)}},setActiveIcon(){const e=window.location.pathname,t=document.querySelectorAll('#iconWrapper a');t&&t.forEach(t=>{const s=t.getAttribute('href');s&&e.includes(s)&&t.classList.add('active')})},initNavbarSlider(){const e=document.getElementById('prevArrow'),t=document.getElementById('nextArrow'),s=document.getElementById('iconWrapper');e&&t&&s&&!e.hasAttribute('data-bound')&&(e.setAttribute('data-bound','true'),e.addEventListener('click',()=>s.scrollBy({left:-120,behavior:'smooth'})),t.addEventListener('click',()=>s.scrollBy({left:120,behavior:'smooth'})))},loadLuxeSettings(){const e=document.body,t=document.getElementById('floating-navbar'),s=localStorage.getItem('luxe-theme')||'normal',a=localStorage.getItem('luxe-mode')||'normal',n=localStorage.getItem('luxe-floating')||'0',r=localStorage.getItem('luxe-slider'),i=localStorage.getItem('luxe-icon')||'5',l=localStorage.getItem('luxe-autohide')||'0',hv=localStorage.getItem('luxe-hostname')||'0';document.querySelectorAll('.style-card').forEach(e=>e.classList.remove('active'));const c=document.querySelector(`.style-card[data-style="${s}"]`);c&&c.classList.add('active'),e.setAttribute('data-theme',s);document.querySelectorAll('.mode-card').forEach(e=>e.classList.remove('active'));const o=document.querySelector(`.mode-card[data-mode="${a}"]`);o&&o.classList.add('active'),'normal'!==a?e.setAttribute('data-force-scheme',a):e.removeAttribute('data-force-scheme');document.querySelectorAll('.icon-card').forEach(e=>e.classList.remove('active'));const d=document.querySelector(`.icon-card[data-icon="${i}"]`);d&&d.classList.add('active');const m=document.getElementById('set-floating');'1'===n?(m&&(m.checked=!0),e.setAttribute('data-enable-navbar','1'),e.setAttribute('data-navbar-enabled','1')):(m&&(m.checked=!1),e.setAttribute('data-enable-navbar','0'),e.setAttribute('data-navbar-enabled','0'));if('1'===r){const s=document.getElementById('set-slider-navbar');s&&(s.checked=!0),e.setAttribute('data-slider','true'),t&&t.classList.add('nav-slider-active')}else{const s=docLine truncated
@@ -0,0 +1,12 @@
+#!/bin/sh
+
+if [ "$PKG_UPGRADE" != 1 ]; then
+	uci get luci.themes.luxe >/dev/null 2>&1 || \
+	uci batch <<-EOF
+		set luci.themes.luxe=/luci-static/luxe
+		set luci.main.mediaurlbase=/luci-static/luxe
+		commit luci
+	EOF
+fi
+
+exit 0
@@ -0,0 +1,36 @@
+<%#
+	Luxe is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
+
+	luci-theme-material
+	Copyright 2015 Lutty Yang <lutty@wcan.in>
+	
+	luci-theme-luxe
+	Copyright 2026 de-quenx | xidz_x
+
+	Have a bug? Please create an issue here on GitHub!
+	https://github.com/de-quenx/luci-theme-luxe/issues
+
+	luci-theme-bootstrap:
+	Copyright 2008 Steven Barth <steven@midlink.org>
+	Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
+	Copyright 2012 David Menting <david@nut-bolt.nl>
+
+	MUI:
+	https://github.com/muicss/mui
+
+	Licensed to the public under the Apache License 2.0
+-%>
+<% local ver = require "luci.version" %>
+			</div>
+			<footer class="mobile-hide">
+				<a href="https://github.com/openwrt/luci" target="_blank" rel="noreferrer">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> /
+				<%= ver.distname %> <%= ver.distversion %> (<%= ver.distrevision %>)
+			</footer>
+		</div>
+	</div>
+
+	<script>L.require('menu-luxe')</script>
+	<div id="tempcpu"></div>
+	<div id="cpuusage"></div>
+</body>
+</html>
@@ -0,0 +1,35 @@
+{#
+    Luxe is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
+
+    luci-theme-material
+    Copyright 2015 Lutty Yang <lutty@wcan.in>
+    
+    luci-theme-luxe
+    Copyright 2026 de-quenx | xidz_x
+
+    Have a bug? Please create an issue here on GitHub!
+    https://github.com/de-quenx/luci-theme-luxe/issues
+
+    luci-theme-bootstrap:
+    Copyright 2008 Steven Barth <steven@midlink.org>
+    Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
+    Copyright 2012 David Menting <david@nut-bolt.nl>
+
+    MUI:
+    https://github.com/muicss/mui
+
+    Licensed to the public under the Apache License 2.0
+-#}
+            </div>
+            <footer class="mobile-hide">
+                <a href="https://github.com/openwrt/luci" target="_blank" rel="noreferrer">Powered by {{ version.luciname }} ({{ version.luciversion }})</a> /
+                {{ version.distname }} {{ version.distversion }} ({{ version.distrevision }})
+            </footer>
+        </div>
+    </div>
+
+    <script>L.require('menu-luxe')</script>
+    <div id="tempcpu"></div>
+    <div id="cpuusage"></div>
+</body>
+</html>
@@ -0,0 +1,193 @@
+<%#
+	Luxe is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
+
+	luci-theme-material
+	Copyright 2015-2017 Lutty Yang <lutty@wcan.in>
+	
+	luci-theme-luxe
+	Copyright 2026 de-quenx | xidz_x
+	
+	Have a bug? Please create an issue here on GitHub!
+	https://github.com/de-quenx/luci-theme-luxe/issues
+
+	luci-theme-bootstrap:
+	Copyright 2008 Steven Barth <steven@midlink.org>
+	Copyright 2008-2016 Jo-Philipp Wich <jow@openwrt.org>
+	Copyright 2012 David Menting <david@nut-bolt.nl>
+
+	MUI:
+	https://github.com/muicss/mui
+
+	Licensed to the public under the Apache License 2.0
+-%>
+
+<%
+	local sys  = require "luci.sys"
+	local util = require "luci.util"
+	local http = require "luci.http"
+	local disp = require "luci.dispatcher"
+	local ver  = require "luci.version"
+
+	local boardinfo = util.ubus("system", "board") or { }
+	local hostname = striptags(boardinfo.hostname or "?")
+	
+	local node = disp.context.dispatched
+	local path = table.concat(disp.context.path, "-")
+	
+	http.prepare_content("text/html; charset=UTF-8")
+-%>
+<!DOCTYPE html>
+<html lang="<%=luci.i18n.context.lang%>">
+<head>
+<meta charset="utf-8">
+<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="theme-color" content="#24315e">
+<meta name="msapplication-tap-highlight" content="no">
+<meta name="msapplication-TileColor" content="#24315e">
+<meta name="application-name" content="<%= hostname %> - LuCI">
+<meta name="apple-mobile-web-app-title" content="<%= hostname %> - LuCI">
+<link rel="stylesheet" href="<%=media%>/css/cascade.css?v=26.167.08541~ffc779e">
+<link rel="icon" href="<%=media%>/luxe.png" sizes="64x64">
+<link rel="icon" href="<%=media%>/luxe.svg" sizes="any">
+<% if node and node.css then %>
+<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
+<% end %>
+<script src="<%=url('admin/translations', luci.i18n.context.lang)%>"></script>
+<script src="<%=resource%>/cbi.js?v=26.167.08541~ffc779e"></script>
+<title><%=hostname%><% if node and node.title then %> - <%=striptags(node.title)%><% end %> - LuCI</title>
+<% if css then %>
+<style title="text/css">
+	<%= css %>
+</style>
+<% end %>
+</head>
+<body class="lang_<%=luci.i18n.context.lang%> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> <% if path ~= "" then %>node-<%= path %><% else %>node-main-login<% end %>" data-page="<%= pcdata(path) %>">
+<script>
+	document.body.setAttribute('data-theme', localStorage.getItem('luxe-theme') || 'normal');
+	let mMode = localStorage.getItem('luxe-mode') || 'normal';
+	if(mMode !== 'normal') document.body.setAttribute('data-force-scheme', mMode);
+	let flt = localStorage.getItem('luxe-floating') || '0';
+	document.body.setAttribute('data-enable-navbar', flt);
+	document.body.setAttribute('data-navbar-enabled', flt);
+	if(localStorage.getItem('luxe-slider') === '1') document.body.setAttribute('data-slider', 'true');
+	document.body.setAttribute('data-icon', localStorage.getItem('luxe-icon') || '5');
+	document.body.setAttribute('data-autohide', localStorage.getItem('luxe-autohide') || '0');
+	document.body.setAttribute('data-show-hostname', localStorage.getItem('luxe-hostname') || '0');
+</script>
+<header>
+	<div class="fill">
+		<div class="container" style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
+			<div style="display:flex;align-items:center;">
+				<span class="showSide"></span>
+				<a class="brand hostname" href="#"><%= hostname %></a>
+			</div>
+			<div id="luxe-settings-wrapper" class="cfg-wrap">
+				<span id="settings-toggle" class="cfg-tgl">
+					<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+				</span>
+				<div id="luxe-settings-menu" class="cfg-menu">
+					<div class="cfg-row" id="row-hostname">
+						<span class="cfg-lbl">Tampilkan Hostname</span>
+						<label class="luxe-switch"><input type="checkbox" id="set-hostname"><span class="luxe-slider"></span></label>
+					</div>
+					<div class="cfg-row">
+						<span class="cfg-lbl">Floating Navbar</span>
+						<label class="luxe-switch"><input type="checkbox" id="set-floating"><span class="luxe-slider"></span></label>
+					</div>
+					<div class="cfg-row" id="row-autohide-navbar">
+						<span class="cfg-lbl">Sembunyi Otomatis Navbar</span>
+						<label class="luxe-switch"><input type="checkbox" id="set-autohide-navbar"><span class="luxe-slider"></span></label>
+					</div>
+					<div class="cfg-row" id="row-slider-navbar">
+						<span class="cfg-lbl">Slider Navbar</span>
+						<label class="luxe-switch"><input type="checkbox" id="set-slider-navbar"><span class="luxe-slider"></span></label>
+					</div>
+					<div class="cfg-blk" id="row-icon-count">
+						<span class="cfg-lbl-blk">Jumlah Icon</span>
+						<div class="style-scroll" style="justify-content: center;">
+							<div class="icon-card" data-icon="4">4</div><div class="icon-card active" data-icon="5">5</div><div class="icon-card" data-icon="6">6</div><div class="icon-card" data-icon="7">7</div><div class="icon-card" data-icon="8">8</div>
+						</div>
+					</div>
+					<div class="cfg-blk">
+						<span class="cfg-lbl-blk">Gaya / Style</span>
+						<div class="style-scroll">
+							<div class="style-card active" data-style="normal">LuxeOs</div><div class="style-card" data-style="glass-liquid">Glass Liquid</div><div class="style-card" data-style="glass-luxe">Glass Luxe</div><div class="style-card" data-style="glass-crystal">Glass Crystal</div><div class="style-card" data-style="glass-dark">Glass Dark</div><div class="style-card" data-style="neo">Neobrutalism</div><div class="style-card" data-style="neox">Neomorphism</div><div class="style-card" data-style="neon">Neon</div><div class="style-card" data-style="rgb">Rgb</div><div class="style-card" data-style="glaze">Glaze</div><div class="style-card" data-style="onyx">Onyx</div><div class="style-card" data-style="liquid-metal">Liquid Neo</div>
+						</div>
+					</div>
+					<div id="mode-selection-container" style="display:none; margin-bottom:4px;">
+						<span class="cfg-lbl-blk">Mode Tema</span>
+						<div style="display:flex; gap:8px;">
+							<div class="mode-card active" data-mode="normal">Auto</div><div class="mode-card" data-mode="light">Light</div><div class="mode-card" data-mode="dark">Dark</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div style="display:flex;align-items:center; justify-content:flex-end;">
+				<span class="status" id="indicators"></span>
+			</div>
+		</div>
+	</div>
+</header>
+
+<div id="floating-navbar" class="navbar">
+	<div class="nav-arrow" id="prevArrow">&#10094;</div>
+	<div class="floating-icons-wrapper" id="iconWrapper">
+		<a href='/cgi-bin/luci/admin/status/overview'><img src="<%=media%>/navbar/home.png"></a>
+		<a href='/cgi-bin/luci/admin/network/network'><img src="<%=media%>/navbar/interface.png"></a>
+		<a href='/cgi-bin/luci/admin/system/tinyfm'><img src="<%=media%>/navbar/tinyfm.png"></a>
+		<a href='/cgi-bin/luci/admin/services/ttyd'><img src="<%=media%>/navbar/terminal.png"></a>
+		<a href='/cgi-bin/luci/admin/services/openclash'><img src="<%=media%>/navbar/openclash.png"></a>
+		<a href='/cgi-bin/luci/admin/status/netmonitor'><img src="<%=media%>/navbar/netmon.png"></a>
+		<a href='/cgi-bin/luci/admin/services/nikki'><img src="<%=media%>/navbar/nikki.png"></a>
+		<a href='/cgi-bin/luci/admin/modem/andromodem'><img src="<%=media%>/navbar/droidnet.png"></a>
+		<a href='/cgi-bin/luci/admin/services/fusiontunx'><img src="<%=media%>/navbar/insomclash.png"></a>
+		<a href='/cgi-bin/luci/admin/modem/3ginfo-lite'><img src="<%=media%>/navbar/modem.png"></a>
+		<a href='/cgi-bin/luci/admin/services/passwall'><img src="<%=media%>/navbar/passwall.png"></a>
+		<a href='/cgi-bin/luci/admin/modem/modemdata'><img src="<%=media%>/navbar/mikhom.png"></a>
+		<a href='/cgi-bin/luci/admin/services/AdGuardHome'><img src="<%=media%>/navbar/adguard.png"></a>
+		<a href='/cgi-bin/luci/admin/vpn/tailscale'><img src="<%=media%>/navbar/tailscale.png"></a>
+		<a href='/cgi-bin/luci/admin/services/neko'><img src="<%=media%>/navbar/neko.png"></a>
+		<a href='/cgi-bin/luci/admin/modem/rakitanmanager'><img src="<%=media%>/navbar/rakitanmanager.png"></a>
+		<a href='/cgi-bin/luci/admin/modem/luci-app-sms-tool-js/sendat'><img src="<%=media%>/navbar/at.png"></a>
+	</div>
+	<div class="nav-arrow" id="nextArrow">&#10095;</div>
+</div>
+
+<div class="main">
+	<div style="" class="loading"><span><div class="loader"></div><%:Collecting data...%></span></div>
+	<div class="main-left" id="mainmenu" style="display:none"></div>
+	<div class="main-right">
+		<div class="modemenu-buttons" style="display:none"><ul id="modemenu"></ul></div>
+		<div class="darkMask"></div>
+		<div id="maincontent">
+			<div class="container">
+				<%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") and path ~= "admin-system-admin-password" then -%>
+					<div class="alert-message warning">
+						<h4><%:No password set!%></h4>
+						<p><%:There is no password set on this router. Please configure a root password to protect the web interface.%></p>
+						<% if disp.lookup("admin/system/admin") then %>
+							<div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div>
+						<% end %>
+					</div>
+				<%- end -%>
+				
+				<% if boardinfo and boardinfo.rootfs_type == "initramfs" then %>
+					<div class="alert-message warning">
+						<h4><%:System running in recovery (initramfs) mode.%></h4>
+						<p><%:No changes to settings will be stored and are lost after rebooting. This mode should only be used to install a firmware upgrade%></p>
+						<% if disp.lookup("admin/system/flash") then %>
+							<div class="right"><a class="btn" href="<%=url("admin/system/flash")%>"><%:Go to firmware upgrade...%></a></div>
+						<% end %>
+					</div>
+				<% end %>
+				
+				<noscript>
+					<div class="alert-message warning">
+						<h4><%:JavaScript required!%></h4>
+						<p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p>
+					</div>
+				</noscript>
+				
+				<div id="tabmenu" style="display:none"></div>
@@ -0,0 +1,186 @@
+{#
+	Luxe is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
+
+	luci-theme-material
+	Copyright 2015-2017 Lutty Yang <lutty@wcan.in>
+	
+	luci-theme-luxe
+	Copyright 2026 de-quenx | xidz_x
+	
+	Have a bug? Please create an issue here on GitHub!
+	https://github.com/de-quenx/luci-theme-luxe/issues
+
+	luci-theme-bootstrap:
+	Copyright 2008 Steven Barth <steven@midlink.org>
+	Copyright 2008-2016 Jo-Philipp Wich <jow@openwrt.org>
+	Copyright 2012 David Menting <david@nut-bolt.nl>
+
+	MUI:
+	https://github.com/muicss/mui
+
+	Licensed to the public under the Apache License 2.0
+-#}
+
+{%
+	import { getuid, getspnam } from 'luci.core';
+	
+	const boardinfo = ubus.call('system', 'board');
+	const hostname = (boardinfo && boardinfo.hostname) ? striptags(boardinfo.hostname) : '?';
+	
+	http.prepare_content('text/html; charset=UTF-8');
+-%}
+<!DOCTYPE html>
+<html lang="{{ dispatcher.lang }}">
+<head>
+<meta charset="utf-8">
+<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="theme-color" content="#24315e">
+<meta name="msapplication-tap-highlight" content="no">
+<meta name="msapplication-TileColor" content="#24315e">
+<meta name="application-name" content="{{ hostname }} - LuCI">
+<meta name="apple-mobile-web-app-title" content="{{ hostname }} - LuCI">
+<link rel="stylesheet" href="{{ media }}/css/cascade.css?v=26.167.08541~ffc779e">
+<link rel="icon" href="{{ media }}/luxe.png" sizes="64x64">
+<link rel="icon" href="{{ media }}/luxe.svg" sizes="any">
+{% if (node && node.css): %}
+<link rel="stylesheet" href="{{ resource }}/{{ node.css }}">
+{% endif %}
+<script src="{{ dispatcher.build_url('admin/translations', dispatcher.lang) }}"></script>
+<script src="{{ resource }}/cbi.js?v=26.167.08541~ffc779e"></script>
+<title>{{ hostname }}{{ (node && node.title) ? ' - ' + striptags(node.title) : '' }} - LuCI</title>
+{% if (css): %}
+<style title="text/css">
+	{{ css }}
+</style>
+{% endif %}
+</head>
+<body class="lang_{{ dispatcher.lang }} {{ ctx.authsession ? 'logged-in' : '' }} {{ length(ctx.path) ? 'node-' + join('-', ctx.path) : 'node-main-login' }}" data-page="{{ entityencode(join('-', ctx.path), true) }}">
+<script>
+	document.body.setAttribute('data-theme', localStorage.getItem('luxe-theme') || 'normal');
+	let mMode = localStorage.getItem('luxe-mode') || 'normal';
+	if(mMode !== 'normal') document.body.setAttribute('data-force-scheme', mMode);
+	let flt = localStorage.getItem('luxe-floating') || '0';
+	document.body.setAttribute('data-enable-navbar', flt);
+	document.body.setAttribute('data-navbar-enabled', flt);
+	if(localStorage.getItem('luxe-slider') === '1') document.body.setAttribute('data-slider', 'true');
+	document.body.setAttribute('data-icon', localStorage.getItem('luxe-icon') || '5');
+	document.body.setAttribute('data-autohide', localStorage.getItem('luxe-autohide') || '0');
+	document.body.setAttribute('data-show-hostname', localStorage.getItem('luxe-hostname') || '0');
+</script>
+<header>
+	<div class="fill">
+		<div class="container" style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
+			<div style="display:flex;align-items:center;">
+				<span class="showSide"></span>
+				<a class="brand hostname" href="#">{{ hostname }}</a>
+			</div>
+			<div id="luxe-settings-wrapper" class="cfg-wrap">
+				<span id="settings-toggle" class="cfg-tgl">
+					<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+				</span>
+				<div id="luxe-settings-menu" class="cfg-menu">
+					<div class="cfg-row" id="row-hostname">
+						<span class="cfg-lbl">Tampilkan Hostname</span>
+						<label class="luxe-switch"><input type="checkbox" id="set-hostname"><span class="luxe-slider"></span></label>
+					</div>
+					<div class="cfg-row">
+						<span class="cfg-lbl">Floating Navbar</span>
+						<label class="luxe-switch"><input type="checkbox" id="set-floating"><span class="luxe-slider"></span></label>
+					</div>
+					<div class="cfg-row" id="row-autohide-navbar">
+						<span class="cfg-lbl">Sembunyi Otomatis Navbar</span>
+						<label class="luxe-switch"><input type="checkbox" id="set-autohide-navbar"><span class="luxe-slider"></span></label>
+					</div>
+					<div class="cfg-row" id="row-slider-navbar">
+						<span class="cfg-lbl">Slider Navbar</span>
+						<label class="luxe-switch"><input type="checkbox" id="set-slider-navbar"><span class="luxe-slider"></span></label>
+					</div>
+					<div class="cfg-blk" id="row-icon-count">
+						<span class="cfg-lbl-blk">Jumlah Icon</span>
+						<div class="style-scroll" style="justify-content: center;">
+							<div class="icon-card" data-icon="4">4</div><div class="icon-card active" data-icon="5">5</div><div class="icon-card" data-icon="6">6</div><div class="icon-card" data-icon="7">7</div><div class="icon-card" data-icon="8">8</div>
+						</div>
+					</div>
+					<div class="cfg-blk">
+						<span class="cfg-lbl-blk">Gaya / Style</span>
+						<div class="style-scroll">
+							<div class="style-card active" data-style="normal">LuxeOs</div><div class="style-card" data-style="glass-liquid">Glass Liquid</div><div class="style-card" data-style="glass-luxe">Glass Luxe</div><div class="style-card" data-style="glass-crystal">Glass Crystal</div><div class="style-card" data-style="glass-dark">Glass Dark</div><div class="style-card" data-style="neo">Neobrutalism</div><div class="style-card" data-style="neox">Neomorphism</div><div class="style-card" data-style="neon">Neon</div><div class="style-card" data-style="rgb">Rgb</div><div class="style-card" data-style="glaze">Glaze</div><div class="style-card" data-style="onyx">Onyx</div><div class="style-card" data-style="liquid-metal">Liquid Neo</div>
+						</div>
+					</div>
+					<div id="mode-selection-container" style="display:none; margin-bottom:4px;">
+						<span class="cfg-lbl-blk">Mode Tema</span>
+						<div style="display:flex; gap:8px;">
+							<div class="mode-card active" data-mode="normal">Auto</div><div class="mode-card" data-mode="light">Light</div><div class="mode-card" data-mode="dark">Dark</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div style="display:flex;align-items:center; justify-content:flex-end;">
+				<span class="status" id="indicators"></span>
+			</div>
+		</div>
+	</div>
+</header>
+
+<div id="floating-navbar" class="navbar">
+	<div class="nav-arrow" id="prevArrow">&#10094;</div>
+	<div class="floating-icons-wrapper" id="iconWrapper">
+		<a href='/cgi-bin/luci/admin/status/overview'><img src="{{ media }}/navbar/home.png"></a>
+		<a href='/cgi-bin/luci/admin/network/network'><img src="{{ media }}/navbar/interface.png"></a>
+		<a href='/cgi-bin/luci/admin/system/tinyfm'><img src="{{ media }}/navbar/tinyfm.png"></a>
+		<a href='/cgi-bin/luci/admin/services/ttyd'><img src="{{ media }}/navbar/terminal.png"></a>
+		<a href='/cgi-bin/luci/admin/services/openclash'><img src="{{ media }}/navbar/openclash.png"></a>
+		<a href='/cgi-bin/luci/admin/status/netmonitor'><img src="{{ media }}/navbar/netmon.png"></a>
+		<a href='/cgi-bin/luci/admin/services/nikki'><img src="{{ media }}/navbar/nikki.png"></a>
+		<a href='/cgi-bin/luci/admin/modem/andromodem'><img src="{{ media }}/navbar/droidnet.png"></a>
+		<a href='/cgi-bin/luci/admin/services/fusiontunx'><img src="{{ media }}/navbar/insomclash.png"></a>
+		<a href='/cgi-bin/luci/admin/modem/3ginfo-lite'><img src="{{ media }}/navbar/modem.png"></a>
+		<a href='/cgi-bin/luci/admin/services/passwall'><img src="{{ media }}/navbar/passwall.png"></a>
+		<a href='/cgi-bin/luci/admin/modem/modemdata'><img src="{{ media }}/navbar/mikhom.png"></a>
+		<a href='/cgi-bin/luci/admin/services/AdGuardHome'><img src="{{ media }}/navbar/adguard.png"></a>
+		<a href='/cgi-bin/luci/admin/vpn/tailscale'><img src="{{ media }}/navbar/tailscale.png"></a>
+		<a href='/cgi-bin/luci/admin/services/neko'><img src="{{ media }}/navbar/neko.png"></a>
+		<a href='/cgi-bin/luci/admin/modem/rakitanmanager'><img src="{{ media }}/navbar/rakitanmanager.png"></a>
+		<a href='/cgi-bin/luci/admin/modem/luci-app-sms-tool-js/sendat'><img src="{{ media }}/navbar/at.png"></a>
+	</div>
+	<div class="nav-arrow" id="nextArrow">&#10095;</div>
+</div>
+
+<div class="main">
+	<div style="" class="loading"><span><div class="loader"></div>{{ _('Collecting data...') }}</span></div>
+	<div class="main-left" id="mainmenu" style="display:none"></div>
+	<div class="main-right">
+		<div class="modemenu-buttons" style="display:none"><ul id="modemenu"></ul></div>
+		<div class="darkMask"></div>
+		<div id="maincontent">
+			<div class="container">
+				{% if (getuid() == 0 && getspnam('root') && getspnam('root').pwdp === '' && ctx.authsession): %}
+					<div class="alert-message warning">
+						<h4>{{ _('No password set!') }}</h4>
+						<p>{{ _('There is no password set on this router. Please configure a root password to protect the web interface.') }}</p>
+						{% if (dispatcher.lookup("admin/system/admin")): %}
+							<div class="right"><a class="btn" href="{{ dispatcher.build_url("admin/system/admin") }}">{{ _('Go to password configuration...') }}</a></div>
+						{% endif %}
+					</div>
+				{% endif %}
+				
+				{% if (boardinfo && boardinfo.rootfs_type == "initramfs"): %}
+					<div class="alert-message warning">
+						<h4>{{ _('System running in recovery (initramfs) mode.') }}</h4>
+						<p>{{ _('No changes to settings will be stored and are lost after rebooting. This mode should only be used to install a firmware upgrade') }}</p>
+						{% if (dispatcher.lookup("admin/system/flash")): %}
+							<div class="right"><a class="btn" href="{{ dispatcher.build_url("admin/system/flash") }}">{{ _('Go to firmware upgrade...') }}</a></div>
+						{% endif %}
+					</div>
+				{% endif %}
+				
+				<noscript>
+					<div class="alert-message warning">
+						<h4>{{ _('JavaScript required!') }}</h4>
+						<p>{{ _('You must enable JavaScript in your browser or LuCI will not work properly.') }}</p>
+					</div>
+				</noscript>
+				
+				<div id="tabmenu" style="display:none"></div>
@@ -0,0 +1,71 @@
+<%#
+	Luxe is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
+
+	luci-theme-material
+	Copyright 2015-2017 Lutty Yang <lutty@wcan.in>
+	
+	luci-theme-luxe
+	Copyright 2026 de-quenx | xidz_x
+	
+	Have a bug? Please create an issue here on GitHub!
+	https://github.com/de-quenx/luci-theme-luxe/issues
+
+	luci-theme-bootstrap:
+	Copyright 2008 Steven Barth <steven@midlink.org>
+	Copyright 2008-2016 Jo-Philipp Wich <jow@openwrt.org>
+	Copyright 2012 David Menting <david@nut-bolt.nl>
+
+	MUI:
+	https://github.com/muicss/mui
+
+	Licensed to the public under the Apache License 2.0
+-%>
+<%
+	local util = require "luci.util"
+	local fs = require "nixio.fs"
+	
+	local boardinfo = util.ubus("system", "board") or { }
+	local hn_file = fs.readfile("/proc/sys/kernel/hostname")
+	local hostname = (hn_file and hn_file ~= "") and hn_file:gsub("\n", "") or (boardinfo.hostname or "OpenWrt")
+-%>
+<!DOCTYPE html>
+<html lang="en" class="luxe-login-auth">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title><%= hostname %></title>
+	<link rel="stylesheet" href="<%=media%>/css/cascade.css?v=1.0.1">
+	<link rel="shortcut icon" href="<%=media%>/luxe.ico">
+</head>
+<body class="luxe-login light">
+	<div class="theme-pages-toggle">
+		<button class="theme-pages-btn" id="b" type="button">LIGHT</button>
+	</div>
+	<form method="post" action="<%=luci.http.getenv('REQUEST_URI')%>">
+		<% if fuser then %>
+		<div class="alert-message" id="a">
+			Invalid username / password! Please try again.
+		</div>
+		<% end %>
+		<div class="login_form_container">
+			<div class="login_form">
+				<h2 id="hostname" data-text="<%= hostname %>"><%= hostname %></h2>
+				<div class="date-time">
+					<span id="d"></span> | <span id="t"></span>
+				</div>
+				<div class="input_group">
+					<input class="input_text pwd_input" id="u_in" type="text" name="luci_username" placeholder="Username" value="<%= duser or '' %>" required autofocus>
+					<div class="t_eye" id="u_eye"></div>
+				</div>
+				<div class="input_group">
+					<input class="input_text pwd_input" id="p_in" type="password" name="luci_password" placeholder="Password">
+					<div class="t_eye" id="t_eye"></div>
+				</div>
+				<input type="submit" value="LOGIN">
+				<div class="footer"></div>
+			</div>
+		</div>
+	</form>
+	<script src="<%=media%>/js/luxe.js?v=1.0.1"></script>
+</body>
+</html>
@@ -0,0 +1,75 @@
+{#
+	Luxe is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
+
+	luci-theme-material
+	Copyright 2015-2017 Lutty Yang <lutty@wcan.in>
+	
+	luci-theme-luxe
+	Copyright 2026 de-quenx | xidz_x
+	
+	Have a bug? Please create an issue here on GitHub!
+	https://github.com/de-quenx/luci-theme-luxe/issues
+
+	luci-theme-bootstrap:
+	Copyright 2008 Steven Barth <steven@midlink.org>
+	Copyright 2008-2016 Jo-Philipp Wich <jow@openwrt.org>
+	Copyright 2012 David Menting <david@nut-bolt.nl>
+
+	MUI:
+	https://github.com/muicss/mui
+
+	Licensed to the public under the Apache License 2.0
+-#}
+
+{%
+    let fs = require("fs");
+    let binfo = (type(boardinfo) == 'object') ? boardinfo : {};
+    let hn_file = fs.readfile("/proc/sys/kernel/hostname");
+    let hostname = (type(hn_file) == 'string' && length(hn_file) > 0) ? replace(hn_file, "\n", "") : (binfo.hostname || "OpenWrt");
+    let e = (type(env) == 'object') ? env : {};
+    let req_uri = e.REQUEST_URI || '';
+    let user = (type(duser) == 'string') ? duser : '';
+    let is_failed = (type(fuser) != 'undefined' && fuser) ? true : false;
+    let m = (type(media) == 'string') ? media : '';
+-%}
+<!DOCTYPE html>
+<html lang="en" class="luxe-login-auth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>{{ hostname }}</title>
+    <link rel="stylesheet" href="{{ m }}/css/cascade.css?v=1.0.1">
+    <link rel="shortcut icon" href="{{ m }}/luxe.ico">
+</head>
+<body class="luxe-login light">
+    <div class="theme-pages-toggle">
+        <button class="theme-pages-btn" id="b" type="button">LIGHT</button>
+    </div>
+    <form method="post" action="{{ req_uri }}">
+        {% if (is_failed): %}
+        <div class="alert-message" id="a">
+            Invalid username / password! Please try again.
+        </div>
+        {% endif %}
+        <div class="login_form_container">
+            <div class="login_form">
+                <h2 id="hostname" data-text="{{ hostname }}">{{ hostname }}</h2>
+                <div class="date-time">
+                    <span id="d"></span> | <span id="t"></span>
+                </div>
+                <div class="input_group">
+                    <input class="input_text pwd_input" id="u_in" type="text" name="luci_username" placeholder="Username" value="{{ user }}" required autofocus>
+                    <div class="t_eye" id="u_eye"></div>
+                </div>
+                <div class="input_group">
+                    <input class="input_text pwd_input" id="p_in" type="password" name="luci_password" placeholder="Password">
+                    <div class="t_eye" id="t_eye"></div>
+                </div>
+                <input type="submit" value="LOGIN">
+                <div class="footer"></div>
+            </div>
+        </div>
+    </form>
+    <script src="{{ m }}/js/luxe.js?v=1.0.1"></script>
+</body>
+</html>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#202124" d="m8,10.033663l-6.898535,-6.013274l-1.060688,0.972974l7.959223,6.986249l7.959223,-6.986249l-1.060688,-0.972974l-6.898535,6.013274z"/></svg>`
				`@@ -0,0 +1 @@`
				document.addEventListener("DOMContentLoaded",function(){document.addEventListener('wheel',e=>e.ctrlKey&&e.preventDefault(),{passive:false});document.addEventListener('keydown',e=>(e.ctrlKey&&(e.key==='+'\|\|e.key==='-'\|\|e.key==='0'))&&e.preventDefault());document.addEventListener('touchstart',e=>e.touches.length>1&&e.preventDefault(),{passive:false});document.addEventListener('touchmove',e=>e.touches.length>1&&e.preventDefault(),{passive:false});document.addEventListener('gesturestart',e=>e.preventDefault());document.addEventListener('gesturechange',e=>e.preventDefault());document.addEventListener('gestureend',e=>e.preventDefault());let lastTouchEnd=0;document.addEventListener('touchend',e=>{const now=Date.now();if(now-lastTouchEnd<=300)e.preventDefault();lastTouchEnd=now;});document.addEventListener('dblclick',e=>e.preventDefault());document.body.style.cssText+='-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:pan-y;';const A=document.getElementById('a');if(A){setTimeout(()=>{A.classList.add('fade-out');setTimeout(()=>A.remove(),400);},3500);}const pI=document.getElementById('p_in');const tE=document.getElementById('t_eye');const uI=document.getElementById('u_in');const uE=document.getElementById('u_eye');const sS='✦';const sH='✧';if(pI&&tE){tE.innerHTML=sH;tE.onclick=()=>{if(pI.type==='password'){pI.type='text';tE.innerHTML=sS;}else{pI.type='password';tE.innerHTML=sH;}};}if(uI&&uE){uE.innerHTML=sS;uE.onclick=()=>{if(uI.type==='text'){uI.type='password';uE.innerHTML=sH;}else{uI.type='text';uE.innerHTML=sS;}};}const themeBtn=document.getElementById('b');if(themeBtn){const T=['light','glass','glass-matte','gradien','dark','neon','ocean','curve','matrix','pulse','brutal','metal-glass','liquid-flow'];const D=document.body;let C=localStorage.theme\|\|'light';if(!T.includes(C))C='light';D.className=`luxe-login ${C}`;themeBtn.textContent=C.toUpperCase();function toggleLiquidState(isPaused){const container=document.querySelector('.login_form_container');const form=document.querySelector('.login_form');if(container)container.classList.toggle('liquid-flow-paused',isPaused);if(form)form.classList.toggle('liquid-flow-paused',isPaused);}themeBtn.onclick=()=>{if(D.classList.contains('liquid-flow'))toggleLiquidState(true);C=T[(T.indexOf(C)+1)%T.length];D.className=`luxe-login ${C}`;themeBtn.textContent=C.toUpperCase();localStorage.theme=C;if(C==='liquid-flow')setTimeout(()=>toggleLiquidState(false),500);else toggleLiquidState(false);};if(C==='liquid-flow')setTimeout(()=>toggleLiquidState(false),1000);}const timeEl=document.getElementById('t');const dEl=document.getElementById('d');if(timeEl\|\|dEl){function toHijri(date){const d=new Date(date.getTime()+86400000);const gYear=d.getFullYear(),gMonth=d.getMonth()+1,gDay=d.getDate();let a=Math.floor((14-gMonth)/12);let y=gYear+4800-a;let m=gMonth+12a-3;let jdn=gDay+Math.floor((153m+2)/5)+365y+Math.floor(y/4)-Math.floor(y/100)+Math.floor(y/400)-32045;let l=jdn-1948440+10632;let n=Math.floor((l-1)/10631);l=l-10631n+354;let j=(Math.floor((10985-l)/5316))(Math.floor((50l)/17719))+(Math.floor(l/5670))(Math.floor((43l)/15238));l=l-(Math.floor((30-j)/15))(Math.floor((17719j)/50))-(Math.floor(j/16))(Math.floor((15238j)/43))+29;let hijriMonth=Math.floor((24l)/709);let hijriDay=l-Math.floor((709hijriMonth)/24);let hijriYear=30*n+j-30;return{year:hijriYear,month:hijriMonth,day:hijriDay};}const hijriMonths=['Muharram','Safar','Rabiul Awal','Rabiul Akhir','Jumadil Awal','Jumadil Akhir','Rajab','Syaban','Ramadan','Syawal','Dzulqadah','Dzulhijjah'];const updateClock=()=>{const N=new Date();const isHijri=Math.floor(N.getTime()/60000)%2;if(timeEl)timeEl.textContent=N.toLocaleTimeString('id-ID',{hour:'2-digit',minute:'2-digit',second:'2-digit'});if(dEl){if(isHijri){const h=toHijri(N);const weekday=N.toLocaleDateString('id-ID',{weekday:'long'});dEl.textContent=`${weekday}, ${h.day} ${hijriMonths[h.month-1]} ${h.year} H`;}else{dEl.textContent=N.toLocaleDateString('id-ID',{weekday:'long',day:'numeric',month:'short',year:'numeric'});}}};updateClock();setInterval(updateClock,1000);}let isDeleting=false;let currentIndex=0;let currentTextIndex=0;let typeSpeed=180;let deleteSpeed=120;let texts=[];function typewriter(){const h=document.getElementById('hostname');if(!h)return;const hostnameText=h.getAttribute('data-text')\|\|'';texts=['WELCOME',hostnameText];const type=()=>{const currentText=texts[currentTextIndex];if(!isDeleting&&currentIndex<currentText.length){h.innerHTML=currentText.substring(0,currentIndex+1);currentIndex++;setTimeout(type,typeSpeed);}else if(!isDeleting&&currentIndex===currentText.length){setTimeout(()=>{isDeleting=true;type();},3000);}else if(isDeleting&&currentIndex>0){currentIndex--;h.innerHTML=currentText.substring(0,currentIndex);setTimeout(type,deleteSpeed);}else if(isDeleting&&currentIndex===0){isDeleting=false;currentTextInLine truncated
				`@@ -0,0 +1 @@`
				'use strict';'require baseclass';'require ui';return baseclass.extend({__init__(){ui.menu.load().then(L.bind(this.render,this))},render(e){let t=e,s='';if(this.renderModeMenu(t),L.env.dispatchpath.length>=3){for(let a=0;a<3&&t;a++)t=t.children[L.env.dispatchpath[a]],s=s+(s?'/':'')+L.env.dispatchpath[a];t&&this.renderTabMenu(t,s)}this.bindSettings(),this.initSidebarState(),this.loadLuxeSettings(),this.initNavbarSlider(),this.setActiveIcon(),this.initIdleTimer(),window.addEventListener('resize',L.bind(this.initSidebarState,this));const a=document.querySelector('.main > .loading');a&&(a.style.opacity='0',a.style.visibility='hidden',a.style.pointerEvents='none'),this.initTypingEffect()},initIdleTimer(){const e=document.getElementById('floating-navbar');if(!e)return;let t;const s=()=>{e.classList.remove('navbar-hidden'),clearTimeout(t),'1'===document.body.getAttribute('data-autohide')&&(t=setTimeout(()=>e.classList.add('navbar-hidden'),3e3))};['touchstart','mousemove','scroll','click','keydown'].forEach(e=>document.addEventListener(e,s,{passive:!0})),s()},bindSettings(){const e=document.querySelector('.showSide'),t=document.querySelector('.darkMask'),s=document.getElementById('settings-toggle'),a=document.getElementById('luxe-settings-menu'),n=document.getElementById('mode-selection-container'),r=['normal','neo','neox','glaze','onyx'];e&&e.addEventListener('click',ui.createHandlerFn(this,'handleSidebarToggle')),t&&t.addEventListener('click',ui.createHandlerFn(this,'handleSidebarToggle')),s&&a&&(s.addEventListener('click',e=>{a.style.display='none'===a.style.display?'block':'none',e.stopPropagation()}),document.querySelectorAll('.style-card').forEach(e=>{e.addEventListener('click',e=>{document.querySelectorAll('.style-card').forEach(e=>e.classList.remove('active')),e.currentTarget.classList.add('active'),n&&(n.style.display=r.includes(e.currentTarget.getAttribute('data-style'))?'block':'none'),this.autoSave(),e.stopPropagation()})}),document.querySelectorAll('.mode-card, .icon-card').forEach(e=>{e.addEventListener('click',e=>{const t=e.currentTarget.classList.contains('mode-card')?'.mode-card':'.icon-card';document.querySelectorAll(t).forEach(e=>e.classList.remove('active')),e.currentTarget.classList.add('active'),this.autoSave(),e.stopPropagation()})}),['set-floating','set-slider-navbar','set-autohide-navbar','set-hostname'].forEach(e=>{const t=document.getElementById(e);t&&t.addEventListener('change',()=>this.autoSave())}),a.addEventListener('click',e=>e.stopPropagation()),document.addEventListener('click',()=>{'block'===a.style.display&&(a.style.display='none')}))},initTypingEffect(){const e=document.querySelector(".brand");if(e&&!e.hasAttribute("data-typed")){e.setAttribute("data-typed","true");const t=e.textContent.trim(),s=`Hello...! ${t}`;e.textContent="",e.classList.add("typing");let a=0;const n=()=>{a<s.length&&(e.textContent+=s.charAt(a),a++,requestAnimationFrame(()=>setTimeout(n,90)))};setTimeout(n,400)}},setActiveIcon(){const e=window.location.pathname,t=document.querySelectorAll('#iconWrapper a');t&&t.forEach(t=>{const s=t.getAttribute('href');s&&e.includes(s)&&t.classList.add('active')})},initNavbarSlider(){const e=document.getElementById('prevArrow'),t=document.getElementById('nextArrow'),s=document.getElementById('iconWrapper');e&&t&&s&&!e.hasAttribute('data-bound')&&(e.setAttribute('data-bound','true'),e.addEventListener('click',()=>s.scrollBy({left:-120,behavior:'smooth'})),t.addEventListener('click',()=>s.scrollBy({left:120,behavior:'smooth'})))},loadLuxeSettings(){const e=document.body,t=document.getElementById('floating-navbar'),s=localStorage.getItem('luxe-theme')\|\|'normal',a=localStorage.getItem('luxe-mode')\|\|'normal',n=localStorage.getItem('luxe-floating')\|\|'0',r=localStorage.getItem('luxe-slider'),i=localStorage.getItem('luxe-icon')\|\|'5',l=localStorage.getItem('luxe-autohide')\|\|'0',hv=localStorage.getItem('luxe-hostname')\|\|'0';document.querySelectorAll('.style-card').forEach(e=>e.classList.remove('active'));const c=document.querySelector(`.style-card[data-style="${s}"]`);c&&c.classList.add('active'),e.setAttribute('data-theme',s);document.querySelectorAll('.mode-card').forEach(e=>e.classList.remove('active'));const o=document.querySelector(`.mode-card[data-mode="${a}"]`);o&&o.classList.add('active'),'normal'!==a?e.setAttribute('data-force-scheme',a):e.removeAttribute('data-force-scheme');document.querySelectorAll('.icon-card').forEach(e=>e.classList.remove('active'));const d=document.querySelector(`.icon-card[data-icon="${i}"]`);d&&d.classList.add('active');const m=document.getElementById('set-floating');'1'===n?(m&&(m.checked=!0),e.setAttribute('data-enable-navbar','1'),e.setAttribute('data-navbar-enabled','1')):(m&&(m.checked=!1),e.setAttribute('data-enable-navbar','0'),e.setAttribute('data-navbar-enabled','0'));if('1'===r){const s=document.getElementById('set-slider-navbar');s&&(s.checked=!0),e.setAttribute('data-slider','true'),t&&t.classList.add('nav-slider-active')}else{const s=docLine truncated