🎉 Sync 2026-03-17 01:46:54

luci-theme-design/CHANGELOG.md

@@ -0,0 +1,49 @@
+# 更新日志
+
+## [7.0] - 2025-12-05
+
+### 新增
+- ✨ 支持 OpenWrt 23.x 版本
+- ✨ 支持 OpenWrt 24.x 版本
+- ✨ 新增版本兼容层 (`compat.js`)
+
+### 改进
+- 🔧 优化 LuCI API 调用，兼容新旧版本
+- 🔧 jQuery 依赖改为可选，无 jQuery 环境下自动降级
+- 🔧 改进 ubus 调用方式，支持不同版本
+- 🔧 优化菜单渲染逻辑，增加空值检查
+- 🔧 改进资源加载，添加版本化 URL
+
+### 修复
+- 🐛 修复新版本 LuCI 中 `dispatchpath` 未定义问题
+- 🐛 修复新版本中 `requestpath` 访问错误
+- 🐛 修复无 jQuery 环境下动画失效问题
+- 🐛 修复某些元素可能不存在导致的错误
+
+### 技术改进
+- 📦 更新 Makefile 版本号到 7.0
+- 📦 改进错误处理和边界检查
+- 📦 优化代码结构，提高可维护性
+
+## [6.0] - 2023-02-24
+
+### 之前的更新
+- 修复安装 package 提示信息背景泛白
+- 优化菜单缩放
+- 优化显示网口 down 状态显示图标
+- 优化 logo 显示
+- 新增各设备状态图标显示
+- 更换 logo 显示为字体 "OpenWrt"，支持以主机名显示 logo
+- 修复部分插件显示 bug
+- 修复 vssr 状态 bar
+- 修复诸多 bug
+- 修复兼容部分插件样式
+- 修复 aliyundrive-webdav 样式
+- 修复 vssr 在 iOS/iPadOS WebApp 模式下显示异常
+- 修复 openclash 插件在 iOS/iPadOS WebApp 模式下 env(safe-area-inset-bottom) = 0
+- 优化菜单 hover action 状态分辨
+- 支持 luci-app-wizard 向导菜单
+- Update header box-shadow style
+- Update uci-change overflow
+- Fix nlbw component
+- Added QSDK/QWRT wizard and iStore menu icon fonts

luci-theme-design/COMPATIBILITY.md

@@ -0,0 +1,67 @@
+# 版本兼容性说明
+
+## 支持的 OpenWrt 版本
+
+本主题已针对以下 OpenWrt 版本进行优化和测试：
+
+- ✅ **OpenWrt 21.x** - 完全支持
+- ✅ **OpenWrt 23.x** - 完全支持  
+- ✅ **OpenWrt 24.x** - 完全支持
+
+## 主要兼容性改进
+
+### 1. LuCI API 兼容
+- 兼容新旧版本的 `L.env.dispatchpath` 和 `L.env.requestpath`
+- 支持不同版本的 ubus 调用方式
+- 自动检测并适配 LuCI 版本
+
+### 2. JavaScript 依赖
+- jQuery 可选：在没有 jQuery 的环境下使用原生 JavaScript
+- 动画效果降级：无 jQuery 时使用 CSS 过渡
+- 兼容层自动检测运行环境
+
+### 3. 资源加载
+- 版本化资源 URL，避免缓存问题
+- 兼容不同版本的资源路径结构
+
+## 已知问题
+
+### OpenWrt 23/24 特定问题
+1. 某些第三方插件可能需要单独适配
+2. 如果遇到菜单显示问题，请清除浏览器缓存
+
+## 测试建议
+
+编译安装后，请测试以下功能：
+- [ ] 登录界面显示正常
+- [ ] 主菜单展开/收起
+- [ ] 移动端响应式布局
+- [ ] 深色模式切换
+- [ ] 各插件页面样式
+
+## 反馈问题
+
+如果在特定版本遇到问题，请提供：
+1. OpenWrt 版本号
+2. LuCI 版本号
+3. 浏览器类型和版本
+4. 具体问题截图
+
+## 技术细节
+
+### 兼容层实现
+主题包含 `compat.js` 兼容层，自动检测 LuCI 版本并提供统一接口。
+
+### 版本检测
+```javascript
+// 检测是否为新版本 LuCI (23+)
+if (L.env.luci_version) {
+    var majorVersion = parseInt(L.env.luci_version.split('.')[0]);
+    var isNewVersion = majorVersion >= 23;
+}
+```
+
+### jQuery 降级
+当 jQuery 不可用时，自动使用原生 DOM API：
+- `$(el).slideUp()` → `el.style.display = 'none'`
+- `$(el).css()` → `el.style.property = value`

luci-theme-design/LICENSE

@@ -0,0 +1,201 @@
+                                 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.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. 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.
+
+   8. 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 Contributor 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 Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

luci-theme-design/Makefile

@@ -1,24 +1,17 @@
-#
-# Copyright (C) 2008-2019 Jerrykuku
-#
-# This is free software, licensed under the Apache License, Version 2.0 .
-#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
 
 include $(TOPDIR)/rules.mk
 
-LUCI_TITLE:=Design Theme (Argon Mod)
-LUCI_DEPENDS:=+curl +jsonfilter
-PKG_VERSION:=2.3.3
-PKG_RELEASE:=1
+LUCI_TITLE:=Design Theme
+LUCI_DEPENDS:=
+PKG_VERSION:=7.0
+PKG_RELEASE:=2
 
-define Package/luci-theme-design/postrm
-#!/bin/sh
-[ -n "$${IPKG_INSTROOT}" ] || {
-	uci -q delete luci.themes.Design
-	uci set luci.main.mediaurlbase='/luci-static/bootstrap'
-	uci commit luci
-}
-endef
+LUCI_MINIFY_CSS:=
+CONFIG_LUCI_CSSTIDY:=
 
 include $(TOPDIR)/feeds/luci/luci.mk
 

luci-theme-design/README.md

@@ -0,0 +1,140 @@
+<img src="./preview/light.png"/> 
+
+# luci-theme-design
+
+**luci-theme-design**基于[luci-theme-neobird](https://github.com/thinktip/luci-theme-neobird)二次开发
+
+## 版本支持
+
+- ✅ OpenWrt 21.x
+- ✅ OpenWrt 23.x  
+- ✅ OpenWrt 24.x
+- 适用于官方 [OpenWrt](https://github.com/openwrt/openwrt)
+
+- 修复安装package提示信息背景泛白
+- 优化菜单缩放
+- 优化显示网口down状态显示图标
+- 优化logo显示
+- 新增各设备状态图标显示
+- 更换logo显示为字体"OpenWrt"，支持以主机名显示logo
+- 修复部分插件显示bug
+- 修复vssr状态bar
+- 修复诸多bug
+- 修复兼容部分插件样式
+- 修复aliyundrive-webdav样式
+- 修复vssr在iOS/iPadOS WebApp模式下显示异常
+- 修复openclash插件在iOS/iPadOS WebApp 模式下env(safe-area-inset-bottom) = 0
+- 优化菜单hover action状态分辨
+- 支持luci-app-wizard向导菜单
+- Update header box-shadow style
+- Update uci-change overflow
+- Fix nlbw component
+- Added QSDK/QWRT wizard and iStore menu icon fonts
+- 新增 OpenWrt 23/24 版本兼容支持
+- 优化 LuCI 新旧版本兼容层
+- 修复新版本 API 调用问题
+
+## 主要特点
+
+- 针对移动端优化，特别适合手机端做为webapp使用
+- 修改和优化了很多插件显示，完善的icon图标，尽量视觉统一
+- 简洁的登录界面，底部导航栏，类App的沉浸式体验；
+- 适配深色模式，适配系统自动切换；
+
+## 体验Webapp方法
+
+- 在移动端(iOS/iPadOS)浏览器打开管理界面，添加到主屏幕即可。
+- 想要实现完全的沉浸式（无浏览器导航、无地址栏等）体验，需要使用SSL证书，请自行申请域名、证书、安装并启用。
+- 如果不使用SSL证书，基于安全原因，iOS/iPadOS 在打开新的页面后，将会显示浏览器顶部菜单栏。
+
+## PS
+
+- 资源接口icon未完善，如果有能力画图的欢迎pr，但请确保跟现有icon颜色风格一致
+- 有bug欢迎提issue
+- 主题个人配色可能会不符合大众胃口，欢迎提配色建议
+
+## 自行编译
+
+### OpenWrt 21/23/24 通用方法
+
+```bash
+# 进入 OpenWrt 源码目录
+cd openwrt
+
+# 克隆主题到 package 目录
+git clone https://github.com/gngpp/luci-theme-design.git package/luci-theme-design
+
+# 配置编译选项
+make menuconfig
+# 选择: LuCI -> 3. Themes -> luci-theme-design
+
+# 编译
+make package/luci-theme-design/compile V=s
+```
+
+### 安装后测试
+
+```bash
+# 上传测试脚本到路由器
+scp test-compatibility.sh root@192.168.1.1:/tmp/
+
+# SSH 登录路由器
+ssh root@192.168.1.1
+
+# 运行兼容性测试
+sh /tmp/test-compatibility.sh
+```
+
+### 手动激活主题
+
+如果主题未自动激活，可以手动设置：
+
+```bash
+uci set luci.main.mediaurlbase='/luci-static/design'
+uci commit luci
+/etc/init.d/uhttpd restart
+```
+
+## 版本兼容性
+
+详细的兼容性信息请查看 [COMPATIBILITY.md](COMPATIBILITY.md)
+
+- OpenWrt 21.x - 完全支持 ✅
+- OpenWrt 23.x - 完全支持 ✅  
+- OpenWrt 24.x - 完全支持 ✅
+
+## 故障排除
+
+### 主题显示异常
+1. 清除浏览器缓存（Ctrl+F5 强制刷新）
+2. 检查主题文件是否完整安装
+3. 运行兼容性测试脚本
+
+### 菜单无法展开
+1. 检查浏览器控制台是否有 JavaScript 错误
+2. 确认 LuCI 版本兼容性
+3. 尝试禁用浏览器扩展
+
+### 移动端显示问题
+1. 确保使用 HTTPS（WebApp 模式需要）
+2. 清除浏览器缓存
+3. 重新添加到主屏幕
+
+## 预览(ps: 下面PC端普通字体为苹果浏览器字体，只有移动端是正常显示的)
+
+<details> <summary>iOS</summary>
+<img src="./preview/webapp_home.PNG"/>
+<img src="./preview/webapp_vssr.PNG"/>
+</details>
+
+<details> <summary>iPadOS</summary>
+<img src="./preview/IMG_0328.PNG"/>
+<img src="./preview/IMG_0329.PNG"/>
+</details>
+
+<img src="./preview/login.png"/>
+<img src="./preview/home.png"/>
+<img src="./preview/home1.png"/>
+<img src="./preview/wifi.png"/>
+<img src="./preview/iface.png"/>
+

luci-theme-design/htdocs/luci-static/design/background/README.md

@@ -1,3 +0,0 @@
-登录页面背景图片目录
-
-支持格式：jpg、png、gif、webp、mp4、webm

luci-theme-design/htdocs/luci-static/design/css/compat-openwrt23.css

@@ -0,0 +1,431 @@
+/**
+ * OpenWrt 23/24 兼容性样å¼<EFBFBD>è¡¥ä¸?
+ * 
+ * 这个文件包å<EFBFBD>«é’ˆå¯¹ OpenWrt 23.x å’?24.x çš„æ ·å¼<EFBFBD>ä¿®å¤?
+ * 新版 LuCI 使用了一些新çš?CSS ç±»å<EFBFBD><EFBFBD>和结æž?
+ */
+
+/* ============================================
+   1. 新版 LuCI 视图容器兼容
+   ============================================ */
+
+/* 新版 LuCI 使用 #view 作为主è¦<C3A8>内容容器 */
+#view {
+    padding: 0;
+}
+
+#view > * {
+    margin-bottom: 1rem;
+}
+
+/* 兼容新版 LuCI �.cbi-map 结构 */
+.cbi-map {
+    margin-top: 10px;
+}
+
+/* ============================================
+   2. 新版表å<EFBFBD>•å…ƒç´ æ ·å¼<EFBFBD>
+   ============================================ */
+
+/* 新版 LuCI çš?input æ ·å¼<C3A5>兼容 */
+.cbi-input-text,
+.cbi-input-password,
+.cbi-input-select {
+    color: var(--inputtext_color);
+    padding: 5px 10px;
+    font-size: 0.92rem;
+    border: var(--input_border);
+    background-color: var(--inputbg_color);
+    border-radius: 8px;
+    height: 2.8rem;
+    line-height: 2.8rem;
+    max-width: 550px;
+}
+
+/* 新版 checkbox å’?radio æ ·å¼<C3A5> */
+.cbi-input-checkbox,
+.cbi-input-radio {
+    width: 1.2rem;
+    height: 1.2rem;
+    margin-right: 0.5rem;
+    vertical-align: middle;
+    accent-color: var(--active_color);
+}
+
+/* ============================================
+   3. 新版按钮样å¼<EFBFBD>兼容
+   ============================================ */
+
+/* 新版 LuCI 按钮类å<C2BB><C3A5> */
+.btn.cbi-button,
+button.cbi-button {
+    -webkit-appearance: none;
+    appearance: none;
+    text-transform: uppercase;
+    color: #fff;
+    background-color: #337ab7;
+    transition: all 0.2s ease-in-out;
+    display: inline-block;
+    border: none;
+    cursor: pointer;
+    text-align: center;
+    white-space: nowrap;
+    min-width: 80px;
+    padding: 0 8px;
+    height: 35px;
+    line-height: 35px;
+    border-radius: 8px;
+}
+
+/* 新版 primary/positive 按钮 */
+.cbi-button-positive,
+.cbi-button-action {
+    color: var(--bttext_color) !important;
+    background-color: var(--active_color) !important;
+}
+
+.cbi-button-positive:hover,
+.cbi-button-action:hover {
+    background-color: #4a8a80 !important;
+}
+
+/* 新版 negative 按钮 */
+.cbi-button-negative {
+    color: #fff !important;
+    background-color: #d9534f !important;
+}
+
+.cbi-button-negative:hover {
+    background-color: #c9302c !important;
+}
+
+/* 新版 neutral 按钮 */
+.cbi-button-neutral {
+    color: #fff !important;
+    background-color: #617486 !important;
+}
+
+/* ============================================
+   4. 新版表格样å¼<EFBFBD>兼容
+   ============================================ */
+
+/* 新版 LuCI 表格结构 */
+.table.cbi-section-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.table.cbi-section-table .tr {
+    display: table-row;
+}
+
+.table.cbi-section-table .th,
+.table.cbi-section-table .td {
+    display: table-cell;
+    padding: 12px;
+    vertical-align: middle;
+}
+
+/* 新版表格标题�*/
+.tr.cbi-section-table-titles {
+    background-color: var(--inputbg_color);
+    font-weight: bold;
+}
+
+/* ============================================
+   5. 新版下拉è<EFBFBD>œå<EFBFBD>•å…¼å®¹
+   ============================================ */
+
+/* 新版 cbi-dropdown æ ·å¼<C3A5> */
+.cbi-dropdown {
+    position: relative;
+    display: inline-flex;
+    min-height: 2.8rem;
+    border: var(--input_border);
+    background-color: var(--inputbg_color);
+    border-radius: 8px;
+}
+
+.cbi-dropdown > ul {
+    display: flex;
+    overflow-x: hidden;
+    overflow-y: auto;
+    width: 100%;
+    margin: 0 !important;
+    padding: 0;
+    list-style: none;
+}
+
+.cbi-dropdown > ul > li {
+    display: flex;
+    align-items: center;
+    padding: 0.5em;
+}
+
+.cbi-dropdown[open] > ul.dropdown {
+    position: absolute;
+    z-index: 1100;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--sectionbg_color);
+    border: var(--input_border);
+    border-radius: 0 0 8px 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.cbi-dropdown[open] > ul.dropdown > li {
+    padding: 0.5em 1em;
+    cursor: pointer;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li:hover {
+    background-color: var(--active_color);
+    color: #fff;
+}
+
+/* ============================================
+   6. 新版标签页样å¼<EFBFBD>å…¼å®?
+   ============================================ */
+
+/* 新版 LuCI 标签�*/
+.cbi-tabmenu {
+    display: flex;
+    flex-wrap: wrap;
+    border-bottom: var(--tabmenu_bottom);
+    margin-bottom: 1rem;
+}
+
+.cbi-tabmenu > li {
+    display: inline-block;
+    margin-right: 0.5rem;
+}
+
+.cbi-tabmenu > li > a {
+    display: block;
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+    color: var(--text_color);
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s;
+}
+
+.cbi-tabmenu > li.cbi-tab > a,
+.cbi-tabmenu > li > a:hover {
+    color: var(--active_color);
+    border-bottom-color: var(--active_color);
+}
+
+/* ============================================
+   7. 新版模æ€<EFBFBD>框样å¼<EFBFBD>兼容
+   ============================================ */
+
+/* 新版 modal æ ·å¼<C3A5> */
+.modal {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 90%;
+    max-width: 600px;
+    min-height: 32px;
+    margin: 5em auto;
+    padding: 1em;
+    border-radius: 8px;
+    background: var(--model_background);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.modal > * {
+    flex-basis: 100%;
+    margin-bottom: 0.5em;
+}
+
+.modal > h4 {
+    color: var(--text_color);
+    margin-bottom: 1em;
+}
+
+.modal > .btn,
+.modal > .cbi-button {
+    flex-basis: auto;
+    margin: 0.25em;
+}
+
+/* ============================================
+   8. 新版进度æ<EFBFBD>¡æ ·å¼<EFBFBD>å…¼å®?
+   ============================================ */
+
+/* 新版进度æ<C2A6>?*/
+.cbi-progressbar {
+    position: relative;
+    min-width: 11rem;
+    height: 1.5rem;
+    background-color: var(--progressbar_color);
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.cbi-progressbar > div {
+    height: 100%;
+    background: var(--progressbar);
+    transition: width 0.25s ease-in;
+}
+
+.cbi-progressbar::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    content: attr(title);
+    text-align: center;
+    line-height: 1.5rem;
+    font-size: 0.75rem;
+    color: var(--progressbartxt_color);
+}
+
+/* ============================================
+   9. 新版状æ€<EFBFBD>指示器兼容
+   ============================================ */
+
+/* 新版状æ€<C3A6>å¾½ç«?*/
+.ifacebadge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2rem;
+    padding: 0.3rem 0.6rem;
+    background-color: var(--active_color);
+    color: #fff;
+    border-radius: 8px;
+    font-size: 0.85rem;
+}
+
+.ifacebadge > img,
+.ifacebadge > em {
+    width: 16px;
+    height: 16px;
+}
+
+/* 区域徽章 */
+.zonebadge {
+    display: inline-block;
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+}
+
+/* ============================================
+   10. 新版å“<EFBFBD>应å¼<EFBFBD>布局兼容
+   ============================================ */
+
+@media screen and (max-width: 992px) {
+    /* 新版移动端è<C2AF>œå<C593>?*/
+    .main-left {
+        transform: translateX(-100%);
+        transition: transform 0.3s ease;
+    }
+    
+    .main-left.active,
+    .main-left[style*="width: 17rem"],
+    .main-left:not([style*="width: 0"]) {
+        transform: translateX(0);
+    }
+}
+
+/* ============================================
+   11. 新版 LuCI 特定页é<EFBFBD>¢ä¿®å¤<EFBFBD>
+   ============================================ */
+
+/* 系统概览页é<C2B5>¢ */
+[data-page="admin-status-overview"] .cbi-section {
+    margin-bottom: 1rem;
+}
+
+/* 网络接å<C2A5>£é¡µé<C2B5>¢ */
+[data-page="admin-network-network"] .ifacebox {
+    margin: 0.5rem;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+/* 无线页é<C2B5>¢ */
+[data-page="admin-network-wireless"] .cbi-section-table {
+    overflow-x: auto;
+}
+
+/* 软件包页é<C2B5>?*/
+[data-page="admin-system-opkg"] .controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+[data-page="admin-system-opkg"] .controls input[type="text"] {
+    flex: 1;
+    min-width: 200px;
+}
+
+/* ============================================
+   12. 深色模å¼<EFBFBD>增强
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+    /* 新版深色模å¼<C3A5>下的代ç <C3A7>å<EFBFBD>?*/
+    code, pre {
+        background-color: #2d2d2d;
+        color: #f8f8f2;
+    }
+    
+    /* 新版深色模å¼<C3A5>下的表格 */
+    .table.cbi-section-table .tr:nth-child(even) {
+        background-color: rgba(255, 255, 255, 0.05);
+    }
+    
+    /* 新版深色模å¼<C3A5>下的输入æ¡?*/
+    .cbi-input-text:focus,
+    .cbi-input-password:focus,
+    .cbi-input-select:focus {
+        border-color: var(--active_color);
+        box-shadow: 0 0 6px var(--active_color);
+    }
+}
+
+/* ============================================
+   13. 打å<EFBFBD>°æ ·å¼<EFBFBD>
+   ============================================ */
+
+@media print {
+    .main-left,
+    .navbar,
+    header,
+    .showSide,
+    .darkMask {
+        display: none !important;
+    }
+    
+    .main-right {
+        width: 100% !important;
+        margin: 0 !important;
+    }
+}
+
+/* ============================================
+   14. æ— éšœç¢<EFBFBD>访问增å¼?
+   ============================================ */
+
+/* 焦点å<C2B9>¯è§<C3A8>æ€?*/
+:focus-visible {
+    outline: 2px solid var(--active_color);
+    outline-offset: 2px;
+}
+
+/* å‡<C3A5>少动画 (用户å<C2B7><C3A5>好) */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}

luci-theme-design/htdocs/luci-static/design/fonts/design.svg

@@ -1,38 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="argon" horiz-adv-x="1024">
-<font-face units-per-em="1024" ascent="960" descent="-64" />
-<missing-glyph horiz-adv-x="1024" />
-<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
-<glyph unicode="&#xe20b;" glyph-name="expand_more" d="M708 572.667l60-60-256-256-256 256 60 60 196-196z" />
-<glyph unicode="&#xe20e;" glyph-name="menu" d="M128 682.667h768v-86h-768v86zM128 384.667v84h768v-84h-768zM128 170.667v86h768v-86h-768z" />
-<glyph unicode="&#xe291;" glyph-name="favorite" d="M512 28.667l-62 56q-106 96-154 142t-107 114-81 123-22 113q0 98 67 166t167 68q116 0 192-90 76 90 192 90 100 0 167-68t67-166q0-78-52-162t-113-146-199-186z" />
-<glyph unicode="&#xe603;" glyph-name="spinner" d="M512 960c-278.748 0-505.458-222.762-511.848-499.974 5.92 241.864 189.832 435.974 415.848 435.974 229.75 0 416-200.576 416-448 0-53.020 42.98-96 96-96s96 42.98 96 96c0 282.77-229.23 512-512 512zM512-64c278.748 0 505.458 222.762 511.848 499.974-5.92-241.864-189.832-435.974-415.848-435.974-229.75 0-416 200.576-416 448 0 53.020-42.98 96-96 96s-96-42.98-96-96c0-282.77 229.23-512 512-512z" />
-<glyph unicode="&#xe900;" glyph-name="delete" d="M125.458 707.971l32.017-640.746c0-72.474 59.964-131.225 133.93-131.225h442.45c73.965 0 133.936 58.75 133.936 131.225l30.8 640.746h-773.133zM936.022 753.424c0.132 27.023 0.212 28.82 0.212 30.63 0 70.468-41.716 109.142-97.69 109.142l-155.797-0.164c0 36.987-36.126 66.968-73.112 66.968h-193.946c-36.979 0-74.274-29.981-74.274-66.968l-155.958 0.164c-61.826 0-97.69-47.127-97.69-109.142 0-1.817 0.072-3.608 0.212-30.63h848.046zM646.026 539.594c0 20.428 16.556 36.986 36.979 36.986 20.428 0 36.986-16.558 36.986-36.986v-423.683c0-20.43-16.558-36.987-36.986-36.987-20.423 0-36.979 16.558-36.979 36.987v423.683zM475.011 539.594c0 20.428 16.563 36.986 36.987 36.986 20.428 0 36.986-16.558 36.986-36.986v-423.683c0-20.43-16.558-36.987-36.986-36.987-20.423 0-36.987 16.558-36.987 36.987v423.683zM304.113 539.594c0 20.428 16.558 36.986 36.987 36.986 20.422 0 36.986-16.558 36.986-36.986v-423.683c0-20.43-16.563-36.987-36.986-36.987-20.43 0-36.987 16.558-36.987 36.987v423.683z" />
-<glyph unicode="&#xe901;" glyph-name="edit" d="M272.359 84.325c-6.319-1.194-12.678-1.728-18.975-1.728-27.681 0-54.578 10.908-74.5 30.859-24.491 24.471-35.378 59.415-29.143 93.476 61.33 335.066 88.166 361.923 109.776 383.553l285.612 285.592-65.898 65.898h-416.008c-34.925 0-63.223-28.298-63.223-63.222v-878.107c0-34.946 28.299-63.223 63.223-63.223h634.405c34.927 0 63.225 28.276 63.225 63.223v298.383l-104.98-104.98c-21.589-21.568-48.445-48.404-383.512-109.723zM1005.077 783.632l-156.041 156.040c-25.211 25.211-66.104 25.211-91.313-0.021l-423.707-423.685c-25.212-25.232-80.633-328.009-80.633-328.009s302.777 55.423 328.009 80.633l423.685 423.707c25.232 25.212 25.232 66.104 0 91.336zM441.878 297.937l-47.643-16.134c-1.338-0.455-2.779-0.659-4.219-0.681-0.267 0-0.536 0.084-0.803 0.103-1.544 0.063-3.087 0.351-4.549 0.845-0.433 0.144-0.885 0.289-1.296 0.472-1.626 0.701-3.149 1.544-4.281 2.697l-28.462 28.463c-3.539 3.539-5.145 10.042-3.416 15.105l16.155 47.645c1.008 2.984 2.305 5.699 3.684 8.251 0.33 0.639 0.68 1.256 1.050 1.854 1.42 2.386 2.944 4.609 4.59 6.421 0.144 0.164 0.287 0.267 0.432 0.411 1.565 1.646 3.19 2.945 4.817 3.973 0.433 0.268 0.864 0.535 1.275 0.741 1.791 0.907 3.561 1.523 5.29 1.544 0.782 0 1.502-0.207 2.244-0.392 0.473-0.103 0.946-0.103 1.399-0.289 1.194-0.495 2.325-1.235 3.396-2.305l70.569-70.57c8.787-8.788-2.655-22.186-20.231-28.155zM888.078 726.727l-42.845-42.847c-8.233-8.232-21.569-8.232-29.802 0l-66.124 66.124c-8.231 8.233-8.231 21.568 0 29.801l42.849 42.847c8.231 8.232 21.567 8.232 29.8 0l66.122-66.124c8.233-8.233 8.233-21.568 0-29.801z" />
-<glyph unicode="&#xe902;" glyph-name="use" d="M0 426.667l384-384 640 640-170.667 170.667-469.333-469.333-213.333 213.333z" />
-<glyph unicode="&#xe903;" glyph-name="loading" d="M870.623 198.711c0-3.451 2.797-6.248 6.248-6.248s6.248 2.797 6.248 6.248c0 0 0 0.001 0 0.001 0 3.45-2.797 6.247-6.247 6.247 0 0-0.001 0-0.001 0v0c0 0-0.001 0-0.001 0-3.45 0-6.247-2.797-6.247-6.247 0 0 0-0.001 0-0.001v0zM732.694 56.388c0-6.863 5.563-12.427 12.427-12.427s12.427 5.563 12.427 12.427-5.563 12.427-12.427 12.427-12.427-5.563-12.427-12.427zM546.774-16.868c0-10.313 8.361-18.674 18.674-18.674s18.674 8.361 18.674 18.674-8.361 18.674-18.674 18.674-18.674-8.361-18.674-18.674zM346.643-7.050c0-13.726 11.128-24.853 24.853-24.853s24.853 11.128 24.853 24.853-11.128 24.853-24.853 24.853-24.853-11.128-24.853-24.853zM169.099 84.056c0-17.177 13.924-31.101 31.101-31.101s31.101 13.924 31.101 31.101-13.924 31.101-31.101 31.101-31.101-13.924-31.101-31.101zM46.137 238.943c0-20.627 16.722-37.349 37.349-37.349s37.349 16.722 37.349 37.349-16.722 37.349-37.349 37.349-37.349-16.722-37.349-37.349zM0 429.12c0-24.040 19.487-43.528 43.528-43.528s43.528 19.487 43.528 43.528-19.487 43.528-43.528 43.528-43.528-19.487-43.528-43.528zM37.967 618.060c0-27.49 22.285-49.775 49.775-49.775s49.775 22.285 49.775 49.775c0 27.49-22.285 49.775-49.775 49.775s-49.775-22.285-49.775-49.775zM151.866 770.407c0-30.941 25.082-56.023 56.023-56.023s56.023 25.082 56.023 56.023c0 30.941-25.082 56.023-56.023 56.023s-56.023-25.082-56.023-56.023zM319.112 857.669c0-34.354 27.848-62.202 62.202-62.202s62.202 27.848 62.202 62.202-27.848 62.202-62.202 62.202-62.202-27.848-62.202-62.202zM506.954 863.092c0-37.804 30.646-68.45 68.45-68.45s68.45 30.646 68.45 68.45c0 37.804-30.646 68.45-68.45 68.45s-68.45-30.646-68.45-68.45zM678.936 785.717c0-41.216 33.413-74.629 74.629-74.629s74.629 33.413 74.629 74.629-33.413 74.629-74.629 74.629-74.629-33.413-74.629-74.629zM801.144 640.373c0-44.667 36.209-80.876 80.876-80.876s80.876 36.209 80.876 80.876-36.209 80.876-80.876 80.876-80.876-36.209-80.876-80.876zM849.752 452.119c0-48.117 39.007-87.124 87.124-87.124s87.124 39.007 87.124 87.124c0 48.117-39.007 87.124-87.124 87.124s-87.124-39.007-87.124-87.124z" />
-<glyph unicode="&#xe904;" glyph-name="switch" d="M275.2 486.4v-512h121.6v947.2l-396.8-435.2zM748.8 409.6v512h-121.6v-947.2l396.8 435.2z" />
-<glyph unicode="&#xe905;" glyph-name="error" d="M0.001 886.857l73.143 73.143 950.855-950.855-73.142-73.143-950.857 950.855zM73.146-63.998l-73.142 73.143 950.855 950.855 73.142-73.142-950.855-950.857z" />
-<glyph unicode="&#xe906;" glyph-name="dashboard" d="M567.979 960h456.021v-341.333h-456.021v341.333zM567.979-64v567.979h456.021v-567.979h-456.021zM0-64v341.333h456.021v-341.333h-456.021zM0 392.021v567.979h456.021v-567.979h-456.021z" />
-<glyph unicode="&#xe907;" glyph-name="logout" d="M764.839 182.518v164.346h-353.976v202.272h353.976v164.346l265.482-265.482-265.482-265.482zM562.568 953.68c55.624 0 101.136-45.511 101.136-101.136v-202.272h-101.136v202.272h-455.112v-809.088h455.112v202.272h101.136v-202.272c0-55.624-45.511-101.136-101.136-101.136h-455.112c-55.624 0-101.136 45.511-101.136 101.136v809.088c0 55.624 45.511 101.136 101.136 101.136h455.112z" />
-<glyph unicode="&#xe908;" glyph-name="Network" d="M384 192h256v-256h-256zM384 959.999h256v-256h-256zM768 192h256v-256h-256zM0.001 192h256v-256h-256zM480.001 640h64v-160h-64zM480.001 448h64v-192h-64zM928 256h-64v160h-704v-160h-64v224h832z" />
-<glyph unicode="&#xe909;" glyph-name="services" d="M548.901 208.144c2.306 9.225 2.306 20.757 2.306 32.289s0 20.757-2.306 32.289l64.576 46.126c6.919 4.613 9.225 13.838 4.613 20.757l-62.27 106.090c-4.613 6.919-11.532 9.225-18.451 6.919l-71.495-34.595c-16.144 13.838-34.595 23.063-55.351 32.289l-6.919 78.414c0 6.919-6.919 13.838-13.838 13.838h-122.235c-6.919 0-13.838-6.919-13.838-13.838l-9.225-80.721c-20.757-6.919-36.901-18.451-55.351-32.289l-71.495 32.289c-6.919 2.306-16.144 0-18.451-6.919l-62.27-106.090c-4.613-6.919-2.306-16.144 4.613-20.757l64.576-46.126c-2.306-9.225-2.306-20.757-2.306-32.289s0-20.757 2.306-32.289l-64.576-46.126c-6.919-4.613-9.225-13.838-4.613-20.757l62.27-106.090c4.613-6.919 11.532-9.225 18.451-6.919l71.495 32.289c16.144-13.838 34.595-23.063 55.351-32.289l6.919-78.414c0-6.919 6.919-13.838 13.838-13.838h122.235c6.919 0 13.838 6.919 13.838 13.838l6.919 78.414c20.757 6.919 36.901 18.451 55.351 32.289l71.495-32.289c6.919-2.306 16.144 0 18.451 6.919l62.27 106.090c4.613 6.919 2.306 16.144-4.613 20.757l-62.27 50.738zM327.495 125.117c-64.576 0-115.316 50.738-115.316 115.316s50.738 115.316 115.316 115.316 115.316-50.738 115.316-115.316-50.738-115.316-115.316-115.316zM924.829 648.649c2.306 11.532 2.306 20.757 2.306 29.982s0 18.451-2.306 29.982l57.657 41.514c6.919 4.613 6.919 11.532 4.613 18.451l-57.657 99.171c-4.613 6.919-11.532 9.225-18.451 4.613l-66.883-29.982c-16.144 11.532-32.289 20.757-50.738 29.982l-6.919 71.495c2.306 6.919-2.306 11.532-9.225 11.532h-113.009c-6.919 0-13.838-4.613-13.838-11.532l-6.919-71.495c-18.451-6.919-34.595-16.144-50.738-29.982l-66.883 29.982c-6.919 2.306-13.838 0-18.451-4.613l-57.657-99.171c-4.613-6.919-2.306-13.838 4.613-18.451l57.657-41.514v-29.982c0-9.225 0-18.451 2.306-29.982l-57.657-41.514c-6.919-4.613-6.919-11.532-4.613-18.451l57.657-99.171c4.613-6.919 11.532-9.225 18.451-4.613l66.883 29.982c16.144-11.532 32.289-20.757 50.738-29.982l6.919-71.495c0-6.919 6.919-11.532 13.838-11.532h113.009c6.919 0 13.838 4.613 13.838 11.532l6.919 71.495c18.451 6.919 34.595 16.144 50.738 29.982l66.883-29.982c6.919-2.306 13.838 0 18.451 4.613l57.657 99.171c4.613 6.919 2.306 13.838-4.613 18.451l-64.576 41.514zM719.568 563.316c-64.576 0-115.316 50.738-115.316 115.316s50.738 115.316 115.316 115.316 115.316-50.738 115.316-115.316-50.738-115.316-115.316-115.316z" />
-<glyph unicode="&#xe90a;" glyph-name="system" d="M512 191.089c-142.121 0-255.089 112.968-255.089 255.089s112.968 255.089 255.089 255.089 255.089-112.968 255.089-255.089-112.968-255.089-255.089-255.089zM1022.178 362.363v167.63c-32.797 7.288-69.238 14.577-109.324 18.221-10.932 40.085-25.509 76.527-43.73 109.324 25.509 32.797 47.374 61.95 65.594 91.103l-120.256 120.256c-29.153-18.221-58.306-40.085-91.103-61.95-32.797 18.221-69.238 36.441-109.324 43.73-3.644 40.085-10.932 76.527-18.221 109.324h-167.63c-7.288-32.797-14.577-69.238-18.221-109.324-40.085-10.932-76.527-25.509-109.324-43.73-32.797 18.221-61.95 40.085-91.103 58.306l-116.612-116.612c18.221-29.153 40.085-58.306 61.95-91.103-18.221-32.797-36.441-69.238-43.73-109.324-40.085-3.644-76.527-10.932-109.324-18.221v-167.63c32.797-7.288 69.238-14.577 109.324-18.221 10.932-40.085 25.509-76.527 43.73-109.324-25.509-32.797-47.374-61.95-61.95-91.103l120.256-120.256c29.153 18.221 58.306 40.085 91.103 65.594 32.797-18.221 69.238-36.441 109.324-43.73 3.644-40.085 10.932-76.527 18.221-109.324h167.63c7.288 32.797 14.577 69.238 18.221 109.324 40.085 10.932 76.527 25.509 109.324 43.73 32.797-25.509 61.95-47.374 91.103-65.594l120.256 120.256c-18.221 29.153-40.085 58.306-65.594 91.103 18.221 32.797 36.441 69.238 43.73 109.324 36.441 3.644 72.883 10.932 105.68 18.221z" />
-<glyph unicode="&#xe90b;" glyph-name="vpn" d="M977.454 820.363v23.272c0 65.163-51.2 116.364-116.364 116.364s-116.364-51.2-116.364-116.364v-23.272c-27.927 0-46.546-18.619-46.546-46.546v-186.182c0-27.927 18.619-46.546 46.546-46.546h232.727c27.927 0 46.546 18.619 46.546 46.546v186.182c0 27.927-18.619 46.546-46.546 46.546zM940.217 820.363h-158.255v23.272c0 41.891 37.236 79.127 79.127 79.127s79.127-37.236 79.127-79.127v-23.272zM833.163 448c0-13.964 4.655-32.582 4.655-46.546 0-97.745-37.236-186.182-97.745-251.345-13.964 37.236-46.546 65.163-88.437 65.163h-46.546v139.636c0 27.927-18.619 46.546-46.546 46.546h-279.272v93.090h93.090c27.927 0 46.546 18.619 46.546 46.546v93.090h93.090c51.2 0 93.090 41.891 93.090 93.090v116.364c-41.891 13.964-93.090 23.272-139.636 23.272-256 0-465.454-209.454-465.454-465.454s209.454-465.454 465.454-465.454 465.454 209.454 465.454 465.454c0 13.964 0 32.582-4.655 46.546h-93.090zM418.91 33.746c-181.527 23.272-325.818 181.527-325.818 367.709 0 27.927 4.655 55.854 9.309 83.782l223.418-223.418v-46.546c0-51.2 41.891-93.090 93.090-93.090v-88.437z" />
-<glyph unicode="&#xe90c;" glyph-name="storage" d="M512 521.152c90.304 0 174.656 8.192 253.12 24.576s140.416 40.576 185.728 72.576v-97.152c0-26.304-19.648-50.688-58.88-73.152s-92.544-40.32-160-53.44c-67.392-13.12-140.736-19.712-219.968-19.712s-152.576 6.592-220.032 19.712c-67.392 13.184-120.704 30.976-160 53.44-39.232 22.464-58.88 46.848-58.88 73.152v97.152c45.312-32 107.264-56.192 185.728-72.576 78.528-16.384 162.88-24.576 253.184-24.576v0 0zM512 82.304c90.304 0 174.656 8.192 253.12 24.576s140.416 40.576 185.728 72.576v-97.152c0-26.304-19.648-50.688-58.88-73.152s-92.544-40.32-160-53.44c-67.392-13.12-140.736-19.712-219.968-19.712s-152.576 6.592-220.032 19.712c-67.456 13.12-120.768 30.976-160 53.44s-58.88 46.848-58.88 73.152v97.152c45.312-32 107.264-56.192 185.728-72.576 78.528-16.384 162.88-24.576 253.184-24.576v0 0zM512 301.696c90.304 0 174.656 8.192 253.12 24.576s140.416 40.576 185.728 72.576v-97.152c0-26.304-19.648-50.688-58.88-73.152s-92.544-40.256-160-53.44c-67.392-13.12-140.736-19.648-219.968-19.648s-152.576 6.592-220.032 19.712c-67.456 13.12-120.768 30.976-160 53.44s-58.88 46.848-58.88 73.152v97.088c45.312-32 107.264-56.192 185.728-72.576 78.528-16.384 162.88-24.576 253.184-24.576v0 0zM512 960c79.232 0 152.576-6.592 220.032-19.712s120.768-30.976 160-53.44c39.232-22.464 58.88-46.848 58.88-73.152v-73.152c0-26.304-19.648-50.688-58.88-73.152s-92.544-40.256-160-53.44c-67.456-13.12-140.8-19.648-220.032-19.648s-152.576 6.592-220.032 19.712c-67.456 13.12-120.768 30.976-160 53.44s-58.88 46.848-58.88 73.152v73.088c0 26.304 19.648 50.688 58.88 73.152s92.544 40.32 160 53.44c67.456 13.12 140.8 19.712 220.032 19.712v0 0z" />
-<glyph unicode="&#xe90d;" glyph-name="statistics" d="M933.842 916.59h-845.911c-48.973 0-89.044-40.069-89.044-89.044v-623.301c0-48.973 40.069-89.044 89.044-89.044h378.434v-66.783h-175.861c-22.261 0-42.296-15.583-46.748-37.844-4.452-28.939 17.808-51.2 44.521-51.2h442.991c22.261 0 42.296 15.583 46.748 37.844 4.452 28.939-17.808 51.2-44.521 51.2h-178.086v66.783h378.434c48.973 0 89.044 40.069 89.044 89.044v623.301c0 48.973-40.069 89.044-89.044 89.044zM800.277 471.374h-146.921l-51.2-151.373c-4.452-13.356-22.261-15.583-31.165-4.452l-160.278 222.61-20.035-51.2c-2.227-8.904-11.131-13.356-20.035-13.356h-169.182c-22.261 0-42.296 15.583-46.748 37.844-4.452 28.939 17.808 51.2 44.521 51.2h124.661l51.2 129.113c4.452 13.356 22.261 15.583 31.165 4.452l155.826-213.705 22.261 66.783c2.227 8.904 11.131 15.583 20.035 15.583h191.443c22.261 0 42.296-15.583 46.748-37.844 6.679-33.392-13.356-55.652-42.296-55.652z" />
-<glyph unicode="&#xe90e;" glyph-name="hello-world" d="M490 960c14.6 0 29.4 0 44 0 4.2-0.8 8.2-2 12.4-2.6 23-3 46.4-4.4 69-9.2 105-22 194.8-71.8 268.2-149.8 77.6-82.6 123.2-180.4 135.8-293.2 1.4-11.8 3-23.4 4.6-35.2 0-14.6 0-29.4 0-44-0.8-4.2-2-8.2-2.6-12.4-3-23-4.4-46.4-9.2-69-22-105-71.8-194.8-149.8-268.2-82.6-77.6-180.4-123.2-293.2-135.8-11.8-1.4-23.4-3-35.2-4.6-14.6 0-29.4 0-44 0-4.2 0.8-8.2 2-12.4 2.6-23 3-46.4 4.4-69 9.2-105 22-194.8 71.8-268.2 149.8-77.6 82.6-123.2 180.4-135.8 293.2-1.4 11.8-3 23.4-4.6 35.2 0 14.6 0 29.4 0 44 0.8 4.2 2 8.2 2.6 12.4 3 23 4.4 46.4 9.2 69 22 105 71.8 194.8 149.8 268.2 82.6 77.6 180.4 123.2 293.2 135.8 11.8 1.4 23.4 3 35.2 4.6zM337.6 321c6.6-22.4 12.2-41.8 18.2-61.2 3.6-12 11.6-18.4 22-18.4 9.8 0 19 7 23 17.8 2 5.6 3.6 11.4 5.4 17.2 11.2 35.8 22.6 71.6 33.6 107.6 5 16.4-6.4 30.8-21.6 27.8-9.6-2-15.8-7.6-18.6-17.4-6.4-23-13.2-45.8-20.6-71-6.4 22.4-12.2 42.4-18 62.6-3.6 12.6-11.4 19.8-21.8 20.2-10.8 0.4-20.2-7.4-24-20.2-2-6.6-3.8-13.4-5.8-20.2-4.4-15.4-8.6-30.6-13.6-48-7.2 23.8-13.6 45-20.4 66.2-4 13-14 18.4-26 14.8-11.6-3.4-18.2-15.4-14.6-27.6 2.8-9.2 5.8-18.4 8.8-27.6 9.8-30 19.6-60 29.6-90 4-12 11-17.8 21.2-18.2 10.4-0.4 20 6.8 24 17.8 1.2 3.2 1.8 6.4 2.8 9.6 4.8 18.6 10.2 37 16.4 58.2zM880.8 395.6c0 28.4 0 56.6 0 85 0 13-7.8 21.4-19.8 21.4s-21.8-9.2-22-21.2c-0.2-11-0.2-22 0-33 0.2-6.8-1-9-9-7.8-44.6 6.8-80.6-23.6-79.2-66.2 0.4-15.4 0.2-30.6 0.2-46 0.2-25.2 18.2-47.4 42.6-52.4 25.8-5.2 50.2 1.2 73.6 11.6 9.2 4 13.6 12 13.6 22.6 0 28.6 0 57.2 0 86zM184.8 586.4c0 10.2 0 22.4 0 34.6 0 13.2-7.6 21.4-19.6 21.6-11.8 0-22.2-9.4-22.2-21 0-61.6 0-123.4 0-185 0-8.8 4.4-14.4 12.4-17.4 14.2-5.4 29.2 4.8 29.4 20 0.2 29.6 0.4 59.4-0.2 89-0.2 9.8 3.8 14.6 12.2 17.8 21.8 8.4 35 0.2 36.2-23.2 0.2-2.4 0-4.6 0-7 0-23.6 0-47.4 0-71 0-13 7.2-20.8 19-20.6s20.6 8.8 20.6 21c0.2 30.4 0.2 60.6 0 91-0.2 23.2-17.4 46-40 49.8-14.8 2.8-30.4 0.6-47.8 0.4zM330 493.4c7.6 0.6 14.6 1.2 21.4 1.8 15.2 1.4 30.4 2.2 45.6 4.2 10.2 1.4 18 8.2 19 18 1.4 12.8 1.8 26.2-1 38.6-6.6 29.6-28.2 43.6-62.8 42.8-36.2-0.8-65-29.8-65.2-65.8 0-15.6-0.2-31.2 0-47 0.2-25.4 18.8-47.6 43.4-52.8 24.4-5.2 46.8 1 68.2 11.8 11.2 5.6 15.2 18 10 27.8s-15.8 12.4-27.6 7.6c-8-3.2-16-6.4-24.4-8.4-16-4.2-24.8 2.8-26.6 21.4zM687.8 538.8c-0.4 0-0.6 0-1 0 0 8 0.2 16 0 24-1 20.4-9.8 36.6-27.2 47.2-39.2 23.6-95.8 1.4-105.8-43.2-4.2-18.8-2.4-39-2.4-58.6 0-20 9-36 25.8-47 38.4-25 96.2-3.2 107.4 41 2.8 11.8 2.2 24.4 3.2 36.6zM579.8 339.6c-0.6 0-1.2 0-1.8 0 0 11 1.8 22.2-0.4 32.8-6.2 30.6-29.6 46.8-64 46.2-39-0.6-68-29.4-68.4-68.2-0.2-14.6-0.2-29.4 0-44 0.2-14.2 5-26.8 15-37 18.8-19.2 42-21.8 66.4-15.8 25.6 6.4 43.2 22.4 49.6 48.2 3.2 12.4 2.6 25.2 3.6 37.8zM693.2 379c0-30.2 0-60.6 0-90.8 0-14 6.6-21.2 19.2-21.4 13.6-0.2 22.6 8.4 22.6 22.2 0 60.6 0 121.2 0 181.8 0 10.4-5.8 18-14.6 19.8-14 3-27-7.2-27-21.6-0.4-30-0.2-60-0.2-90zM433.2 550c0-30 0-60 0-90 0-12.6 6.8-20.4 17.8-20.8 11.8-0.6 21.8 8 21.8 19.8 0.2 62.4 0.2 124.6 0 187 0 8.8-4.8 14.2-13 16.8-13.4 4.2-26.6-5.6-26.6-19.8-0.2-31 0-62 0-93zM495.2 556c0-30.4 0-60.6 0-91 0-12.8 7.2-21.2 18.4-21.6 11.4-0.4 21.2 9.4 21.2 21.8 0 61.4 0.2 122.6-0.2 184 0 4.8-2.6 10.4-5.8 14-5.6 6.2-13.4 7-21 3.4-7.8-3.6-12.6-9.4-12.6-18.6 0-30.6 0-61.4 0-92zM595.2 329.8c0-17.4-0.6-34.6 0.4-51.8 0.4-5.4 4-13 8.4-15.2 5.4-2.8 13.6-2.6 19.6-0.8 7.8 2.4 11.4 9.6 11.4 18.2-0.2 27.6 0 55.2 0 82.8 0 25.8 0 25.8 25.6 24.4 12-0.6 21.8 7.2 23.4 18.6 1.6 10.4-5.2 19.6-17.4 21.6-7.8 1.4-16 1.4-23.8 0.8-27.6-2-47.6-24.2-47.6-51.8 0-15.6 0-31.2 0-46.8zM839.2 356.2c0 10.6 0.2 21.2-0.2 32 0 2.8-0.6 6.8-2.4 8-8.6 6.4-18.8 6.4-28.6 3.8-8.6-2.4-15-8.2-15.4-17.6-0.6-17.6-1-35 0-52.6 0.8-12.2 9-18 21.2-17 6.2 0.6 12.6 1.4 18.4 3.6 3 1.2 6.2 5.6 6.6 8.8 0.8 10.4 0.4 20.8 0.4 31zM647.8 537.4c-0.8 7.4-1 14.8-2.2 22-2.2 13.8-9.8 20-23.8 20-14.8-0.2-25.6-8.2-27-21.2-1.2-12.8-2-25.8-1.6-38.8 0.4-8.6-0.4-19 9-24 16.6-8.8 42.2-2.6 43.4 19.4 0.4 7.6 1.4 15 2.2 22.6zM539.8 337.6c-0.6 7.2-1 14.6-2 21.8-2.2 13.8-9.8 20.2-23.8 20-14.8-0.2-26.2-8.2-27-21.2-1-16.8-0.8-33.8 0.2-50.6 0.2-4.6 4.8-11 9-13 18.8-8.6 41.4 0.4 41.8 21 0 7.4 1 14.6 1.8 22zM839.2 356.2c0-10.4 0.6-20.6-0.4-31-0.2-3.2-3.6-7.6-6.6-8.8-5.8-2.2-12.2-3.2-18.4-3.6-12.2-1-20.4 4.8-21.2 17-1 17.4-0.6 35 0 52.6 0.4 9.4 6.8 15.2 15.4 17.6 9.8 2.6 20 2.6 28.6-3.8 1.8-1.4 2.4-5.4 2.4-8 0.2-10.6 0.2-21.2 0.2-32zM330.4 533c1 19.4 10.2 27.6 28.2 26.2 8.6-0.8 16.6-8.6 16.2-17.2-0.2-2-3.8-5.2-6-5.4-12.6-1.6-25.2-2.4-38.4-3.6zM647.8 537.4c-0.6-7.6-1.6-15-2-22.6-1.2-22-26.8-28.4-43.4-19.4-9.4 5-8.8 15.4-9 24-0.4 12.8 0.4 25.8 1.6 38.8s12.2 21 27 21.2c14 0.2 21.6-6 23.8-20 1-7.2 1.2-14.6 2-22zM539.8 337.6c-0.6-7.4-1.8-14.6-1.8-21.8-0.4-20.6-23-29.6-41.8-21-4.2 2-8.6 8.4-9 13-1 16.8-1.2 33.8-0.2 50.6 0.8 13 12.2 21 27 21.2 14 0.2 21.6-6.2 23.8-20 1-7.6 1.2-14.8 2-22z" />
-<glyph unicode="&#xe90f;" glyph-name="angle-right" d="M704.6 414l-272-272c-18.8-18.8-49.2-18.8-67.8 0l-45.2 45.2c-18.8 18.8-18.8 49.2 0 67.8l192.8 192.8-192.8 192.8c-18.8 18.8-18.8 49.2 0 67.8l45 45.6c18.8 18.8 49.2 18.8 67.8 0l272-272c19-18.8 19-49.2 0.2-68z" />
-<glyph unicode="&#xe910;" glyph-name="password" d="M196.923 603.569v0zM827.077 507.077h-512v92.554c0 104.369 78.769 196.923 183.138 202.831 96.492 5.908 177.231-55.138 202.831-141.785 1.969-7.877 9.846-15.754 19.692-15.754h80.738c11.815 0 21.662 11.815 19.692 23.631-31.508 149.662-165.415 259.938-324.923 252.062-167.385-7.877-295.385-151.631-299.323-317.046v-96.492c-43.323 0-78.769-35.446-78.769-78.769v-374.154c0-43.323 35.446-78.769 78.769-78.769h630.154c43.323 0 78.769 35.446 78.769 78.769v374.154c0 43.323-35.446 78.769-78.769 78.769zM602.585 119.138c3.938-11.815-5.908-25.6-19.692-25.6h-143.754c-13.785 0-23.631 11.815-19.692 25.6l35.446 118.154c-29.538 19.692-47.262 55.138-39.385 94.523 7.877 37.415 37.415 66.954 76.8 74.831 63.015 11.815 118.154-33.477 118.154-92.554 0-31.508-15.754-61.046-41.354-76.8l33.477-118.154z" />
-<glyph unicode="&#xe911;" glyph-name="docker" d="M537 896l87 2 14-14 1-89-14-13-87-2-14 13-1 90 14 13zM270 756l87 2 14-13 1-90-14-13-87-2-13 14-1 89 13 13zM404 758l88 1 13-14 1-88-13-14-88-1-13 13-1 90 13 13zM538 760l87 1 14-14v-88l-12-14-87-1-14 13-1 89 13 14zM874 675q44-14 102-108 84 2 134-53v-6q-68-104-159-105-199-323-519-327l-74-1q-235-3-311 269l-7 69-1 53 13 15 744 9q34 0 40 21l-1 75q13 89 39 89zM138 618l87 2 14-15v-88l-13-13-87-2-14 13-1 89 14 14zM272 620l86 1 15-14 1-88-14-14-87-1-13 13-1 89 13 14zM405 622l88 1 13-14 1-89-13-13-87-1-13 13-1 89 12 14zM540 624l87 1 13-14 1-89-13-13-87-1-14 13-1 88 14 15zM674 625l86 2 15-14 1-89-14-14-87-1-13 14-1 88 13 14z" />
-<glyph unicode="&#xe912;" glyph-name="control" d="M1024.001-23.040v942.081c0 22.656-18.304 40.96-40.96 40.96h-942.081c-22.656 0-40.96-18.304-40.96-40.96v-942.081c0-22.656 18.304-40.96 40.96-40.96h942.081c22.656 0 40.96 18.304 40.96 40.96zM293.119 586.241h-98.56c-5.632 0-10.24 4.608-10.24 10.24v61.44c0 5.632 4.608 10.24 10.24 10.24h98.56c17.408 53.376 67.584 92.16 126.72 92.16s109.44-38.785 126.72-92.16h282.88c5.632 0 10.24-4.608 10.24-10.24v-61.44c0-5.632-4.608-10.24-10.24-10.24h-282.88c-17.408-53.376-67.584-92.16-126.72-92.16s-109.44 38.785-126.72 92.16zM477.312 228.352c0-0.256 0.128-0.384 0.128-0.512h-282.88c-5.632 0-10.24 4.608-10.24 10.24v61.44c0 5.632 4.608 10.24 10.24 10.24h282.88c0-0.256-0.128-0.384-0.128-0.512 17.152 53.76 67.457 92.672 126.848 92.672s109.696-38.912 126.848-92.672c0 0.256-0.128 0.384-0.128 0.512h98.56c5.632 0 10.24-4.608 10.24-10.24v-61.44c0-5.632-4.608-10.24-10.24-10.24h-98.56c0 0.256 0.128 0.384 0.128 0.512-17.152-53.76-67.457-92.672-126.848-92.672s-109.696 38.912-126.848 92.672zM604.16 314.88c-25.45 0-46.080-20.63-46.080-46.080s20.63-46.080 46.080-46.080v0c25.45 0 46.080 20.63 46.080 46.080s-20.63 46.080-46.080 46.080v0zM442.24 587.008l3.072 1.92c0.128 0 0.128 0.128 0.256 0.128l1.536 1.152c0.128 0.128 0.256 0.256 0.384 0.256 1.664 1.28 3.2 2.56 4.608 4.096l0.256 0.256c0.512 0.512 1.024 1.024 1.408 1.536 1.024 1.024 1.92 2.176 2.688 3.328v0.128l1.152 1.536c0.128 0.128 0.256 0.384 0.384 0.512 1.024 1.536 2.048 3.2 2.816 4.992 0.128 0.256 0.256 0.64 0.512 0.896 0.256 0.512 0.384 0.896 0.64 1.408 0.128 0.384 0.384 0.896 0.512 1.28 0.256 0.64 0.512 1.28 0.64 1.92 0.128 0.512 0.384 1.152 0.512 1.664l0.384 1.152 0.384 1.792c0.128 0.256 0.128 0.64 0.256 0.896 0.128 0.896 0.384 1.792 0.512 2.688 0 0.256 0 0.512 0.128 0.768 0.128 0.768 0.128 1.408 0.256 2.176 0 0.256 0 0.512 0.128 0.896 0 1.024 0.128 1.92 0.128 2.944s0 1.92-0.128 2.944c0 0.256 0 0.512-0.128 0.896 0 0.768-0.128 1.536-0.256 2.176 0 0.256 0 0.512-0.128 0.768-0.128 0.896-0.256 1.792-0.512 2.688-0.128 0.256-0.128 0.64-0.256 0.896l-0.384 1.792-0.384 1.152c-0.128 0.512-0.384 1.152-0.512 1.664-0.256 0.64-0.512 1.28-0.64 1.92-0.128 0.384-0.384 0.896-0.512 1.28-0.256 0.512-0.384 0.896-0.64 1.408-0.128 0.256-0.256 0.64-0.512 0.896-0.896 1.664-1.792 3.328-2.816 4.992-0.128 0.128-0.256 0.384-0.384 0.512l-1.152 1.536v0.128c-0.896 1.152-1.792 2.304-2.688 3.328-0.512 0.512-0.896 1.024-1.408 1.536l-0.256 0.256c-1.425 1.384-2.925 2.724-4.483 3.997l-0.125 0.1c-0.128 0.128-0.256 0.256-0.384 0.256l-1.536 1.152c-0.128 0-0.128 0.128-0.256 0.128l-3.072 1.92c-0.256 0.128-0.384 0.256-0.64 0.384-6.528 3.456-13.952 5.504-21.76 5.504s-15.36-2.048-21.76-5.504c-0.256-0.128-0.384-0.256-0.64-0.384l-3.072-1.92c-0.128 0-0.128-0.128-0.256-0.128l-1.536-1.152c-0.128-0.128-0.256-0.256-0.384-0.256-1.664-1.28-3.2-2.56-4.608-4.096l-0.256-0.256c-0.512-0.512-1.024-1.024-1.408-1.536-1.024-1.024-1.92-2.176-2.688-3.328v-0.128l-1.152-1.536c-0.128-0.128-0.256-0.384-0.384-0.512-1.024-1.536-2.048-3.2-2.816-4.992-0.128-0.256-0.256-0.64-0.512-0.896-0.256-0.512-0.384-0.896-0.64-1.408-0.128-0.384-0.384-0.896-0.512-1.28-0.256-0.64-0.512-1.28-0.64-1.92-0.128-0.512-0.384-1.152-0.512-1.664l-0.384-1.152-0.384-1.792c-0.128-0.256-0.128-0.64-0.256-0.896-0.128-0.896-0.384-1.792-0.512-2.688 0-0.256 0-0.512-0.128-0.768-0.128-0.768-0.128-1.408-0.256-2.176 0-0.256 0-0.512-0.128-0.896 0-1.024-0.128-1.92-0.128-2.944s0-1.92 0.128-2.944c0-0.256 0-0.512 0.128-0.896 0-0.768 0.128-1.536 0.256-2.176 0-0.256 0-0.512 0.128-0.768 0.128-0.896 0.256-1.792 0.512-2.688 0.128-0.256 0.128-0.64 0.256-0.896l0.384-1.792 0.384-1.152c0.128-0.512 0.384-1.152 0.512-1.664 0.256-0.64 0.512-1.28 0.64-1.92 0.128-0.384 0.384-0.896 0.512-1.28 0.256-0.512 0.384-0.896 0.64-1.408 0.128-0.256 0.256-0.64 0.512-0.896 0.896-1.664 1.792-3.328 2.816-4.992 0.128-0.128 0.256-0.384 0.384-0.512l1.152-1.536v-0.128c0.896-1.152 1.792-2.304 2.688-3.328 0.512-0.512 0.896-1.024 1.408-1.536l0.256-0.256c1.408-1.408 3.072-2.816 4.608-4.096 0.128-0.128 0.256-0.256 0.384-0.256l1.536-1.152c0.128 0 0.128-0.128 0.256-0.128l3.072-1.92c0.256-0.128 0.384-0.256 0.64-0.384 6.528-3.456 13.952-5.504 21.76-5.504s15.36 2.048 21.76 5.504c0.256 0.128 0.512 0.256 0.64 0.384z" />
-<glyph unicode="&#xe913;" glyph-name="statistics1" d="M242.692 27.226v606.954c0 24.204-18.621 42.82-40.959 42.82h-122.884c-22.336 0-40.959-20.476-40.959-42.82v-606.954h204.8zM503.346 27.226v867.607c0 24.206-18.617 44.687-40.96 44.687h-122.884c-22.336 0-40.959-20.482-40.959-44.687v-867.607h204.802zM763.999 27.226v383.538c0 24.204-18.615 44.681-40.959 44.681h-122.877c-22.343 0-40.967-20.476-40.967-44.681v-383.538h204.802zM1024.653 27.226v606.954c0 24.204-18.615 42.82-40.959 42.82h-122.877c-22.343 0-40.959-20.476-40.959-42.82v-606.954h204.793z" />
-<glyph unicode="&#xe914;" glyph-name="asterisk" d="M956.42 291.814l-284.42 156.186 284.42 156.186c23.59 12.954 31.922 42.768 18.464 66.074l-38.96 67.482c-13.456 23.306-43.44 30.998-66.454 17.046l-277.47-168.224 6.95 324.408c0.576 26.906-21.076 49.028-47.99 49.028h-77.92c-26.912 0-48.566-22.122-47.988-49.028l6.948-324.408-277.47 168.222c-23.012 13.952-52.998 6.26-66.454-17.046l-38.96-67.482c-13.456-23.306-5.124-53.12 18.466-66.074l284.418-156.184-284.42-156.186c-23.59-12.954-31.922-42.768-18.464-66.074l38.96-67.482c13.456-23.306 43.442-30.998 66.454-17.046l277.47 168.224-6.95-324.408c-0.576-26.906 21.078-49.028 47.99-49.028h77.922c26.912 0 48.566 22.122 47.99 49.028l-6.952 324.408 277.47-168.222c23.012-13.952 52.998-6.26 66.454 17.046l38.96 67.482c13.456 23.306 5.126 53.118-18.464 66.072z" />
-<glyph unicode="&#xe915;" glyph-name="app" d="M417.786-56.315c28.674-16.897 51.203-5.633 51.203 28.674v398.871c0 34.306-23.041 68.612-51.203 85.509l-330.259 205.324c-28.674 11.264-51.203 0-51.203-28.674v-398.871c0-34.306 23.041-68.612 51.203-85.509l330.259-205.324zM138.731 787.511c-28.674-16.897-28.674-39.938 0-56.835l325.139-205.324c28.674-16.897 68.612-16.897 96.774-5.633l325.139 165.386c28.674 16.897 28.674 39.938 0 56.835l-342.547 205.324c-23.041 16.897-68.612 16.897-96.774 0l-307.73-159.753zM560.643-27.642c0-34.306 23.041-45.571 51.203-28.674l325.139 165.386c28.674 16.897 51.203 51.203 51.203 85.509v399.383c0 34.306-23.041 45.571-51.203 28.674l-325.139-165.386c-28.674-16.897-51.203-51.203-51.203-85.509v-399.383z" />
-<glyph unicode="&#xe971;" glyph-name="user" d="M576 253.388v52.78c70.498 39.728 128 138.772 128 237.832 0 159.058 0 288-192 288s-192-128.942-192-288c0-99.060 57.502-198.104 128-237.832v-52.78c-217.102-17.748-384-124.42-384-253.388h896c0 128.968-166.898 235.64-384 253.388z" />
-<glyph unicode="&#xf059;" glyph-name="question" horiz-adv-x="878" d="M512 164.571v109.714q0 8-5.143 13.143t-13.143 5.143h-109.714q-8 0-13.143-5.143t-5.143-13.143v-109.714q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143zM658.286 548.571q0 50.286-31.714 93.143t-79.143 66.286-97.143 23.429q-138.857 0-212-121.714-8.571-13.714 4.571-24l75.429-57.143q4-3.429 10.857-3.429 9.143 0 14.286 6.857 30.286 38.857 49.143 52.571 19.429 13.714 49.143 13.714 27.429 0 48.857-14.857t21.429-33.714q0-21.714-11.429-34.857t-38.857-25.714q-36-16-66-49.429t-30-71.714v-20.571q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143q0 10.857 12.286 28.286t31.143 28.286q18.286 10.286 28 16.286t26.286 20 25.429 27.429 16 34.571 7.143 46.286zM877.714 438.857q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" />
-</font></defs></svg>

luci-theme-design/htdocs/luci-static/design/fonts/font.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe20a;" glyph-name="expand_less" d="M512 596.667l256-256-60-60-196 196-196-196-60 60z" />
+<glyph unicode="&#xe20b;" glyph-name="expand_more" d="M708 572.667l60-60-256-256-256 256 60 60 196-196z" />
+<glyph unicode="&#xe20e;" glyph-name="menu" d="M128 682.667h768v-86h-768v86zM128 384.667v84h768v-84h-768zM128 170.667v86h768v-86h-768z" />
+<glyph unicode="&#xe291;" glyph-name="favorite" d="M512 28.667l-62 56q-106 96-154 142t-107 114-81 123-22 113q0 98 67 166t167 68q116 0 192-90 76 90 192 90 100 0 167-68t67-166q0-78-52-162t-113-146-199-186z" />
+<glyph unicode="&#xe603;" glyph-name="spinner9" d="M512 960c-278.748 0-505.458-222.762-511.848-499.974 5.92 241.864 189.832 435.974 415.848 435.974 229.75 0 416-200.576 416-448 0-53.020 42.98-96 96-96s96 42.98 96 96c0 282.77-229.23 512-512 512zM512-64c278.748 0 505.458 222.762 511.848 499.974-5.92-241.864-189.832-435.974-415.848-435.974-229.75 0-416 200.576-416 448 0 53.020-42.98 96-96 96s-96-42.98-96-96c0-282.77 229.23-512 512-512z" />
+<glyph unicode="&#xf059;" glyph-name="question-circle" horiz-adv-x="878" d="M512 164.571v109.714q0 8-5.143 13.143t-13.143 5.143h-109.714q-8 0-13.143-5.143t-5.143-13.143v-109.714q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143zM658.286 548.571q0 50.286-31.714 93.143t-79.143 66.286-97.143 23.429q-138.857 0-212-121.714-8.571-13.714 4.571-24l75.429-57.143q4-3.429 10.857-3.429 9.143 0 14.286 6.857 30.286 38.857 49.143 52.571 19.429 13.714 49.143 13.714 27.429 0 48.857-14.857t21.429-33.714q0-21.714-11.429-34.857t-38.857-25.714q-36-16-66-49.429t-30-71.714v-20.571q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143q0 10.857 12.286 28.286t31.143 28.286q18.286 10.286 28 16.286t26.286 20 25.429 27.429 16 34.571 7.143 46.286zM877.714 438.857q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" />
+</font></defs></svg>

luci-theme-design/htdocs/luci-static/design/icon/arrow.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#fff" 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>

luci-theme-design/htdocs/luci-static/design/icon/browserconfig.xml

@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

luci-theme-design/htdocs/luci-static/design/icon/manifest.json

@@ -1,41 +0,0 @@
-{
- "name": "Openwrt",
- "icons": [
-  {
-   "src": "\/android-icon-36x36.png",
-   "sizes": "36x36",
-   "type": "image\/png",
-   "density": "0.75"
-  },
-  {
-   "src": "\/android-icon-48x48.png",
-   "sizes": "48x48",
-   "type": "image\/png",
-   "density": "1.0"
-  },
-  {
-   "src": "\/android-icon-72x72.png",
-   "sizes": "72x72",
-   "type": "image\/png",
-   "density": "1.5"
-  },
-  {
-   "src": "\/android-icon-96x96.png",
-   "sizes": "96x96",
-   "type": "image\/png",
-   "density": "2.0"
-  },
-  {
-   "src": "\/android-icon-144x144.png",
-   "sizes": "144x144",
-   "type": "image\/png",
-   "density": "3.0"
-  },
-  {
-   "src": "\/android-icon-192x192.png",
-   "sizes": "192x192",
-   "type": "image\/png",
-   "density": "4.0"
-  }
- ]
-}

luci-theme-design/htdocs/luci-static/design/icon/spinner.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#888" d="M8,0c-4.355,0-7.898,3.481-7.998,7.812,0.092-3.779,2.966-6.812,6.498-6.812,3.59,0,6.5,3.134,6.5,7,0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5c0-4.418-3.582-8-8-8zM8,16c4.355,0,7.898-3.481,7.998-7.812-0.092,3.779-2.966,6.812-6.498,6.812-3.59,0-6.5-3.134-6.5-7,0-0.828-0.672-1.5-1.5-1.5s-1.5,0.672-1.5,1.5c0,4.418,3.582,8,8,8z"/></svg>

luci-theme-design/htdocs/luci-static/design/img/design.svg

@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="图层_1" xmlns:svg="http://www.w3.org/2000/svg"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256"
-	 style="enable-background:new 0 0 256 256;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#svg_2_00000009581766544743910510000007087157279682564742_);}
-	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:url(#svg_3_00000013155245276689480680000010334395393893521599_);}
-	.st2{fill:#FFFFFF;}
-</style>
-<g>
-	<g id="svg_1">
-		
-			<linearGradient id="svg_2_00000043442590260727270070000016472210641679865270_" gradientUnits="userSpaceOnUse" x1="11.1563" y1="247.3437" x2="245.4437" y2="13.0563" gradientTransform="matrix(1 0 0 -1 0 258)">
-			<stop  offset="0" style="stop-color:#5E72E4"/>
-			<stop  offset="1" style="stop-color:#778AFF"/>
-		</linearGradient>
-		
-			<path id="svg_2" style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#svg_2_00000043442590260727270070000016472210641679865270_);" d="
-			M36.4,0.2h183.8c19.7,0,35.7,16,35.7,35.7v183.8c0,19.7-16,35.7-35.7,35.7H36.4c-19.7,0-35.7-16-35.7-35.7V35.9
-			C0.7,16.2,16.7,0.2,36.4,0.2z"/>
-		
-			<linearGradient id="svg_3_00000010280352489557108120000000938545297310085033_" gradientUnits="userSpaceOnUse" x1="0.7" y1="257.8" x2="0.7" y2="257.8" gradientTransform="matrix(1 0 0 -1 0 258)">
-			<stop  offset="0" style="stop-color:#5E72E4"/>
-			<stop  offset="1" style="stop-color:#778AFF"/>
-		</linearGradient>
-		
-			<path id="svg_3" style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#svg_3_00000010280352489557108120000000938545297310085033_);" d="
-			M0.7,0.2"/>
-	</g>
-	<path id="svg_4" class="st2" d="M128.3,45.4c-46.7,0-84.4,37.8-84.4,84.4c0,32.2,18.1,60.2,44.6,74.4c6.8,3.7,15.3-0.2,17.2-7.7
-		l4.3-17.6c1.5-6.2-1-12.6-6.1-16.4c-10-7.4-16.4-19.3-16.4-32.7c0-22.5,18.3-40.7,40.7-40.7c22.5,0,40.7,18.3,40.7,40.7
-		c0,13.4-6.4,25.2-16.4,32.7c-5.1,3.8-7.6,10.2-6.1,16.5l4.4,17.6c1.9,7.5,10.3,11.4,17.2,7.7c26.6-14.2,44.6-42.2,44.6-74.5
-		C212.8,83.3,174.9,45.4,128.3,45.4L128.3,45.4z"/>
-</g>
-<circle class="st2" cx="128.3" cy="131.6" r="18.3"/>
-</svg>

luci-theme-design/htdocs/luci-static/design/img/volume_high.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024">
-	<path fill="#fff" d="M484.430769 51.2 236.307692 354.461538H118.153846c-43.323077 0-78.769231 35.446154-78.769231 78.769231v157.538462c0 43.323077 35.446154 78.769231 78.769231 78.769231h118.153846L484.430769 972.8c25.6 25.6 66.953846 7.876923 66.953846-27.569231V78.769231c0-35.446154-43.323077-53.169231-66.953846-27.569231zm354.461539 120.123077c-7.876923-7.876923-19.692308-7.876923-27.569231 0l-27.569231 27.569231c-7.876923 7.876923-7.876923 21.661538 0 27.56923C858.584615 299.323077 905.846154 399.753846 905.846154 512c0 112.246154-47.261538 212.676923-122.092308 285.538462-7.876923 7.876923-7.876923 19.692308 0 27.56923l27.569231 27.569231c7.876923 7.876923 19.692308 7.876923 27.569231 0C927.507692 768 984.615385 645.907692 984.615385 512s-55.138462-256-145.723077-340.676923zM714.830769 297.353846c-7.876923-7.876923-19.692308-7.876923-27.569231 0l-27.56923 27.569231c-7.876923 7.876923-7.876923 19.692308 0 27.569231C703.015385 391.876923 728.615385 448.984616 728.615385 512c0 63.015385-27.569231 120.123077-70.892308 159.507692-7.876923 7.876923-7.876923 19.692308 0 27.569231l27.569231 27.569231c7.876923 7.876923 19.692308 7.876923 27.56923 0 57.107692-53.169231 94.523077-129.969231 94.523077-216.615385 0-82.707692-35.446154-159.507692-92.553846-212.676923z"/>
-</svg>

luci-theme-design/htdocs/luci-static/design/img/volume_off.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024">
-	<path fill="#fff" d="M484.430769 51.2 236.307692 354.461538H118.153846c-43.323077 0-78.769231 35.446154-78.769231 78.769231v157.538462c0 43.323077 35.446154 78.769231 78.769231 78.769231h118.153846L484.430769 972.8c25.6 25.6 66.953846 7.876923 66.953846-27.569231V78.769231c0-35.446154-43.323077-53.169231-66.953846-27.569231zM882.215385 512l96.492307-96.492308c7.876923-7.876923 7.876923-19.692308 0-27.56923l-27.56923-27.569231c-7.876923-7.876923-19.692308-7.876923-27.569231 0l-96.492308 96.492307-96.492308-96.492307c-7.876923-7.876923-19.692308-7.876923-27.56923 0l-27.569231 27.569231c-7.876923 7.876923-7.876923 19.692308 0 27.56923L771.938462 512l-96.492308 96.492308c-7.876923 7.876923-7.876923 19.692308 0 27.56923l27.569231 27.569231c7.876923 7.876923 19.692308 7.876923 27.56923 0l96.492308-96.492307 96.492308 96.492307c7.876923 7.876923 19.692308 7.876923 27.569231 0l27.56923-27.569231c7.876923-7.876923 7.876923-19.692308 0-27.56923L882.215385 512z"/>
-</svg>

luci-theme-design/htdocs/luci-static/design/js/compat.js

@@ -0,0 +1,54 @@
+/**
+ * LuCI 版本兼容层
+ * 支持 OpenWrt 21/23/24
+ */
+(function() {
+	'use strict';
+
+	// 检测 LuCI 版本
+	window.LuciCompat = {
+		version: null,
+		isLegacy: false,
+
+		init: function() {
+			if (typeof L !== 'undefined' && L.env) {
+				// 尝试获取版本信息
+				if (L.env.luci_version) {
+					this.version = L.env.luci_version;
+					var majorVersion = parseInt(this.version.split('.')[0]);
+					this.isLegacy = majorVersion < 23;
+				} else {
+					// 旧版本可能没有 luci_version
+					this.isLegacy = true;
+				}
+			}
+			return this;
+		},
+
+		// 兼容 DOM 选择器
+		querySelector: function(selector) {
+			return document.querySelector(selector);
+		},
+
+		// 兼容事件处理
+		addEvent: function(element, event, handler) {
+			if (element && element.addEventListener) {
+				element.addEventListener(event, handler);
+			}
+		},
+
+		// 兼容 jQuery 检测
+		hasJQuery: function() {
+			return typeof jQuery !== 'undefined' || typeof $ !== 'undefined';
+		}
+	};
+
+	// 初始化兼容层
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', function() {
+			window.LuciCompat.init();
+		});
+	} else {
+		window.LuciCompat.init();
+	}
+})();

luci-theme-design/htdocs/luci-static/design/js/polyfill.min.js

@@ -1,3 +0,0 @@
-/* Disable minification (remove `.min` from URL path) for more info */
-
-(function(undefined) {}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});

luci-theme-design/htdocs/luci-static/design/js/style.js

@@ -0,0 +1,28 @@
+(function ($) {
+
+    // 修复某些插件导致在https下env(safe-area-inset-bottom)为0的情况
+    var url = self.location.href; 
+    if ((/(iPhone|iPad|iPod|iOS|Mac|Macintosh)/i.test(navigator.userAgent)) && url.indexOf("openclash") != -1 ) {
+        var oMeta = document.createElement('meta');
+        oMeta.content = 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover';
+        oMeta.name = 'viewport';
+        document.getElementsByTagName('head')[0].appendChild(oMeta);
+    }
+
+		// 设置indicators图标，(放在menu script执行之前passwall某些代码错误中断导致失败)
+		document.getElementById("indicators").addEventListener('DOMSubtreeModified', function () {
+			var child = document.getElementById("indicators");
+			if (child.firstElementChild.getAttribute("data-indicator") != "uci-changes") {
+				child.firstElementChild.textContent = eval("'\ue6b9'")
+			}
+		}, false);
+
+		// 监听窗口大小，动态设置header box阴影长度
+        $(window).resize( function  () {
+			if (window.innerWidth <= 992) {
+				$("header").css("box-shadow",   "0 2px 4px rgb(0 0 0 / 8%)")
+			} else {
+				$("header").css("box-shadow",   "17rem 2px 4px rgb(0 0 0 / 8%)")
+			}
+        });
+})(jQuery);

luci-theme-design/htdocs/luci-static/design/manifest.json

@@ -0,0 +1,25 @@
+{
+"name":"Design",
+"short_name":"Design",
+"description":"Design for OpenWRT by 2smile.",
+"start_url":"/",
+"scope": "/",
+"orientation":"portrait",
+"display":"standalone",
+"prompt_message":"在主屏幕添加图标，以便快速访问 Design",
+"icons":[
+{
+"src":"images/icon.png",
+"sizes":"144x144",
+"type":"image/png"
+},
+{
+"src":"images/icon.png",
+"sizes":"192x192",
+"type":"image/png"
+}
+],
+"gcm_sender_id":"524223308106",
+"gcm_user_visible_only":true,
+"status":"ok"
+}

luci-theme-design/htdocs/luci-static/resources/menu-design.js

@@ -2,83 +2,124 @@
 'require baseclass';
 'require ui';
 
+// 兼容新旧版本 LuCI
+var LuciCompat = {
+	isNewVersion: function() {
+		return L.env.luci_version && parseFloat(L.env.luci_version.split('.')[0]) >= 23;
+	}
+};
+
 return baseclass.extend({
-	__init__: function () {
+	__init__: function() {
 		ui.menu.load().then(L.bind(this.render, this));
 	},
 
-	render: function (tree) {
+	render: function(tree) {
 		var node = tree,
-			url = '',
-			children = ui.menu.getChildren(tree);
+		    url = '';
 
-		for (var i = 0; i < children.length; i++) {
-			var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
+		this.renderModeMenu(node);
 
-			if (isActive)
-				this.renderMainMenu(children[i], children[i].name);
-		}
-
-		if (L.env.dispatchpath.length >= 3) {
+		// 兼容新旧版本的 dispatchpath
+		var dispatchpath = L.env.dispatchpath || [];
+		if (dispatchpath.length >= 3) {
 			for (var i = 0; i < 3 && node; i++) {
-				node = node.children[L.env.dispatchpath[i]];
-				url = url + (url ? '/' : '') + L.env.dispatchpath[i];
+				node = node.children[dispatchpath[i]];
+				url = url + (url ? '/' : '') + dispatchpath[i];
 			}
 
 			if (node)
 				this.renderTabMenu(node, url);
 		}
 
-		document.querySelector('a.showSide')
-			.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
-		document.querySelector('.darkMask')
-			.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
+		var showSideBtn = document.querySelector('.showSide');
+		var darkMask = document.querySelector('.darkMask');
+		
+		if (showSideBtn)
+			showSideBtn.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
+
+		if (darkMask)
+			darkMask.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
+		
+		var loadingEl = document.querySelector(".main > .loading");
+		if (loadingEl) {
+			loadingEl.style.opacity = '0';
+			loadingEl.style.visibility = 'hidden';
+		}
+
+		if (window.innerWidth <= 992) {
+			var mainLeft = document.querySelector('.main-left');
+			if (mainLeft)
+				mainLeft.style.width = '0';
+		}
+
+		var mainRight = document.querySelector('.main-right');
+		if (mainRight)
+			mainRight.style.overflow = 'auto';
+			
+		window.addEventListener('resize', this.handleSidebarToggle, true);
 	},
 
-	handleMenuExpand: function (ev) {
+	handleMenuExpand: function(ev) {
 		var a = ev.target, slide = a.parentNode, slide_menu = a.nextElementSibling;
 		var collapse = false;
 
 		document.querySelectorAll('.main .main-left .nav > li >ul.active').forEach(function (ul) {
-			$(ul).stop(true).slideUp("fast", function () {
+			// 兼容无 jQuery 环境
+			if (typeof $ !== 'undefined' && $.fn && $.fn.slideUp) {
+				$(ul).stop(true).slideUp("fast", function () {
+					ul.classList.remove('active');
+					if (ul.previousElementSibling)
+						ul.previousElementSibling.classList.remove('active');
+				});
+			} else {
+				ul.style.display = 'none';
 				ul.classList.remove('active');
-				ul.previousElementSibling.classList.remove('active');
-			});
+				if (ul.previousElementSibling)
+					ul.previousElementSibling.classList.remove('active');
+			}
+			
 			if (!collapse && ul === slide_menu) {
 				collapse = true;
 			}
-
 		});
 
 		if (!slide_menu)
 			return;
 		
-		
 		if (!collapse) {
-			$(slide).find(".slide-menu").slideDown("fast",function(){
+			if (typeof $ !== 'undefined' && $.fn && $.fn.slideDown) {
+				$(slide).find(".slide-menu").slideDown("fast", function(){
+					slide_menu.classList.add('active');
+					a.classList.add('active');
+				});
+			} else {
+				var slideMenus = slide.querySelectorAll('.slide-menu');
+				slideMenus.forEach(function(menu) {
+					menu.style.display = 'block';
+				});
 				slide_menu.classList.add('active');
 				a.classList.add('active');
-			});
+			}
 			a.blur();
 		}
 		ev.preventDefault();
 		ev.stopPropagation();
 	},
 
-	renderMainMenu: function (tree, url, level) {
+	renderMainMenu: function(tree, url, level) {
 		var l = (level || 0) + 1,
-			ul = E('ul', { 'class': level ? 'slide-menu' : 'nav' }),
-			children = ui.menu.getChildren(tree);
+		    ul = E('ul', { 'class': level ? 'slide-menu' : 'nav' }),
+		    children = ui.menu.getChildren(tree);
 
 		if (children.length == 0 || l > 2)
 			return E([]);
-
 		for (var i = 0; i < children.length; i++) {
 			var isActive = ((L.env.dispatchpath[l] == children[i].name) && (L.env.dispatchpath[l - 1] == tree.name)),
 				submenu = this.renderMainMenu(children[i], url + '/' + children[i].name, l),
 				hasChildren = submenu.children.length,
 				slideClass = hasChildren ? 'slide' : null,
-				menuClass = hasChildren ? 'menu' : 'food';
+				menuClass = hasChildren ? 'menu' : null;
 			if (isActive) {
 				ul.classList.add('active');
 				slideClass += " active";
@@ -97,14 +138,46 @@ return baseclass.extend({
 		}
 
 		if (l == 1) {
-			document.querySelector('#mainmenu').appendChild(ul);
-			document.querySelector('#mainmenu').style.display = '';
+			var container = document.querySelector('#mainmenu');
 
+			container.appendChild(ul);
+			container.style.display = '';
 		}
+
 		return ul;
 	},
 
-	renderTabMenu: function (tree, url, level) {
+	renderModeMenu: function(tree) {
+		var ul = document.querySelector('#modemenu');
+		if (!ul) return;
+		
+		var children = ui.menu.getChildren(tree);
+
+		// 兼容新旧版本的 requestpath
+		var requestpath = L.env.requestpath || [];
+		
+		for (var i = 0; i < children.length; i++) {
+			var isActive = (requestpath.length ? children[i].name == requestpath[0] : i == 0);
+
+			ul.appendChild(E('li', {}, [
+				E('a', {
+					'href': L.url(children[i].name),
+					'class': isActive ? 'active' : null
+				}, [ _(children[i].title) ])
+			]));
+
+			if (isActive)
+				this.renderMainMenu(children[i], children[i].name);
+
+			if (i > 0 && i < children.length)
+				ul.appendChild(E('li', {'class': 'divider'}, [E('span')]))
+		}
+
+		if (children.length > 1 && ul.parentElement)
+			ul.parentElement.style.display = '';
+	},
+
+	renderTabMenu: function(tree, url, level) {
 		var container = document.querySelector('#tabmenu'),
 			l = (level || 0) + 1,
 			ul = E('ul', { 'class': 'tabs' }),
@@ -136,23 +209,38 @@ return baseclass.extend({
 		return ul;
 	},
 
-	handleSidebarToggle: function (ev) {
-		var showside = document.querySelector('a.showSide'),
-			sidebar = document.querySelector('#mainmenu'),
-			darkmask = document.querySelector('.darkMask'),
-			scrollbar = document.querySelector('.main-right');
+	handleSidebarToggle: function(ev) {
+		var width = window.innerWidth,
+		    darkMask = document.querySelector('.darkMask'),
+		    mainRight = document.querySelector('.main-right'),
+		    mainLeft = document.querySelector('.main-left'),
+		    open = mainLeft.style.width == '';
 
-		if (showside.classList.contains('active')) {
-			showside.classList.remove('active');
-			sidebar.classList.remove('active');
-			scrollbar.classList.remove('active');
-			darkmask.classList.remove('active');
+			if (width > 992 || ev.type == 'resize')
+				open = true;
+				
+		darkMask.style.visibility = open ? '' : 'visible';
+		darkMask.style.opacity = open ? '': 1;
+
+		if (width <= 992)
+			mainLeft.style.width = open ? '0' : '';
+		else
+			mainLeft.style.width = ''
+
+		// 初始化设置，css后置设置导致刷新会闪现。
+		mainLeft.style.transition = 'visibility 2000ms, width 200ms';
+		mainLeft.style.visibility = open ? '' : 'visible';
+
+		mainRight.style['overflow-y'] = open ? 'auto' : 'visible';
+
+		var header = document.querySelector("header");
+		if (header) {
+			if (typeof $ !== 'undefined' && $.fn && $.fn.css) {
+				$("header").css("box-shadow", open ? "0 2px 4px rgb(0 0 0 / 8%)" : "17rem 2px 4px rgb(0 0 0 / 8%)");
+			} else {
+				header.style.boxShadow = open ? "0 2px 4px rgb(0 0 0 / 8%)" : "17rem 2px 4px rgb(0 0 0 / 8%)";
+			}
 		}
-		else {
-			showside.classList.add('active');
-			sidebar.classList.add('active');
-			scrollbar.classList.add('active');
-			darkmask.classList.add('active');
-		}
-	}
+	},
 });
+

luci-theme-design/luasrc/view/themes/design/footer.htm

@@ -1,45 +1,32 @@
 <%#
-	Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material Argon Template
+	Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
 
-	luci-theme-design
-	Copyright 2020 Jerrykuku <jerrykuku@qq.com>
+	luci-theme-material
+	Copyright 2015 Lutty Yang <lutty@wcan.in>
 
 	Have a bug? Please create an issue here on GitHub!
-	https://github.com/jerrykuku/luci-theme-design/issues
+	https://github.com/LuttyYang/luci-theme-material/issues
 
-	luci-theme-material: 
-	Copyright 2015 Lutty Yang <lutty@wcan.in>
-	
-	Agron Theme
-	https://demos.creative-tim.com/design-dashboard/index.html 
+	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>
 
-	Licensed to the public under the Apache License 2.0 
+	MUI:
+	https://github.com/muicss/mui
+
+	Licensed to the public under the Apache License 2.0
 -%>
 
 <% local ver = require "luci.version" %>
-</div>
-<footer>
-	<div class="mobile-hide">
-		<a class="luci-link" href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> /
-						<%= ver.distversion %>
-		<ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul>
 	</div>
-</footer>
+	<footer class="mobile-hide">
+	<a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %>
+	</footer>
+	</div>
 </div>
-</div>
-<script>
-	// thanks for Jo-Philipp Wich <jow@openwrt.org>
-	var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
-	var winHeight = $(window).height();
-	$(window).resize(function () {
-		var winWidth = $(window).width()
-		if(winWidth < 600){
-			var newHeight = $(this).height();
-			var keyboradHeight = newHeight - winHeight;
-			$(".ftc").css("bottom", keyboradHeight + 30);
-		}
-	})
-</script>
+
 <script type="text/javascript">L.require('menu-design')</script>
+
 </body>
 </html>

luci-theme-design/luasrc/view/themes/design/footer_login.htm

@@ -1,44 +0,0 @@
-<%#
-	Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material Argon Template
-
-	luci-theme-design
-	Copyright 2020 Jerrykuku <jerrykuku@qq.com>
-
-	Have a bug? Please create an issue here on GitHub!
-	https://github.com/jerrykuku/luci-theme-design/issues
-
-	luci-theme-material:
-	Copyright 2015 Lutty Yang <lutty@wcan.in>
-
-	Agron Theme
-	https://demos.creative-tim.com/design-dashboard/index.html
-
-	Licensed to the public under the Apache License 2.0
--%>
-
-<% local ver = require "luci.version" %>
-</div>
-<footer class="mobile-hide">
-	<div>
-		<a class="luci-link" href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> /
-						<%= ver.distversion %>
-		<ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul>
-	</div>
-</footer>
-</div>
-</div>
-<script>
-	// thanks for Jo-Philipp Wich <jow@openwrt.org>
-	var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
-	var winHeight = $(window).height();
-	$(window).resize(function () {
-		var winWidth = $(window).width()
-		if(winWidth < 600){
-			var newHeight = $(this).height();
-			var keyboradHeight = newHeight - winHeight;
-			$(".ftc").css("bottom", keyboradHeight + 30);
-		}
-	})
-</script>
-</body>
-</html>

luci-theme-design/luasrc/view/themes/design/header.htm

@@ -1,207 +1,130 @@
 <%#
-	Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material Argon Template
+	Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
 
-	luci-theme-design
-	Copyright 2020 Jerrykuku <jerrykuku@qq.com>
+	luci-theme-material
+	Copyright 2015-2017 Lutty Yang <lutty@wcan.in>
 
 	Have a bug? Please create an issue here on GitHub!
-	https://github.com/jerrykuku/luci-theme-design/issues
+	https://github.com/LuttyYang/luci-theme-material/issues
 
-	luci-theme-material:
-	Copyright 2015 Lutty Yang <lutty@wcan.in>
+	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>
 
-	Argon Theme
-	https://demos.creative-tim.com/design-dashboard/index.html
+	MUI:
+	https://github.com/muicss/mui
 
 	Licensed to the public under the Apache License 2.0
 -%>
 
 <%
-	local sys = require "luci.sys"
+	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 ver  = require "luci.version"
 
-	local boardinfo = util.ubus("system", "board")
-
-	local node = disp.context.dispatched
-
-	local fs = require "nixio.fs"
-	local nutil = require "nixio.util"
-	local uci = require 'luci.model.uci'.cursor()
-
-	-- send as HTML5
-	http.prepare_content("text/html")
-
-	math.randomseed(os.time())
-
-	-- Custom settings
-	local mode = 'normal'
-	local font_weight = '600'
-	local dark_css = fs.readfile('/www/luci-static/design/css/dark.css')
-	local bar_color = '#5ea69b'
-	local primary, dark_primary, blur_radius, blur_radius_dark, blur_opacity
-	if fs.access('/etc/config/design') then
-		primary = uci:get_first('design', 'global', 'primary')
-		dark_primary = uci:get_first('design', 'global', 'dark_primary')
-		font_weight = uci:get_first('design', 'global', 'font_weight')
-		blur_radius = uci:get_first('design', 'global', 'blur')
-		blur_radius_dark = uci:get_first('design', 'global', 'blur_dark')
-		blur_opacity = uci:get_first('design', 'global', 'transparency')
-		blur_opacity_dark = uci:get_first('design', 'global', 'transparency_dark')
-		mode = uci:get_first('design', 'global', 'mode')
-		progressbar_font = uci:get_first('design', 'global', 'progressbar_font')
-		bar_color = mode == 'dark' and dark_primary or primary
-		if not progressbar_font then
-			progressbar_font = "#050505"
-		end
-		if font_weight == "normal" then
-			main_left_font_color = "#5f6368"
-		else
-			main_left_font_color = "#69758c"
+	-- 兼容新旧版本的 ubus 调用
+	local boardinfo = {}
+	if util.ubus then
+		boardinfo = util.ubus("system", "board") or {}
+	else
+		-- OpenWrt 23+ 可能使用不同的方式
+		local ubus = require "ubus"
+		local conn = ubus.connect()
+		if conn then
+			boardinfo = conn:call("system", "board", {}) or {}
+			conn:close()
 		end
 	end
 
-	-- Brand name
-	local brand_name = 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">
-	<title>
-		<%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %>
-		- LuCI</title>
-	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
-	<meta name="format-detection" content="telephone=no, email=no" />
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover" />
+<link rel="manifest" href="<%=media%>/manifest.json">
+<title><%=striptags( (boardinfo.hostname or "OpenWrt") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
+    <meta name="format-detection" content="telephone=no, email=no"/>
+	<meta name="x5-fullscreen" content="true">
+    <meta name="full-screen" content="yes">
+	<meta name="x5-page-mode" content="app">
+    <meta name="browsermode" content="application">
+    <meta name="msapplication-tap-highlight" content="no">
+	<meta name="apple-mobile-web-app-status-bar-style" content="default" />
+	<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
+	<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
+	<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "OpenWrt") ) %> - LuCI">
+	<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "OpenWrt") ) %> - LuCI">
+	<meta name="msapplication-TileImage" content="<%=media%>/images/icon.png"/>
+    <link rel="icon" href="<%=media%>/images/icon.png" sizes="192x192">
+	<link rel="apple-touch-icon" sizes="192x192" href="<%=media%>/images/icon.png">
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<meta name="mobile-web-app-capable" content="yes">
-	<meta name="x5-fullscreen" content="true">
-	<meta name="full-screen" content="yes">
-	<meta name="x5-page-mode" content="app">
-	<meta name="browsermode" content="application">
-	<meta name="msapplication-tap-highlight" content="no">
-	<meta name="msapplication-TileColor" content="<%=bar_color%>">
-	<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
-	<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
-	<link rel="apple-touch-icon" sizes="60x60" href="<%=media%>/icon/apple-icon-60x60.png">
-	<link rel="apple-touch-icon" sizes="72x72" href="<%=media%>/icon/apple-icon-72x72.png">
-	<link rel="apple-touch-icon" sizes="144x144" href="<%=media%>/icon/apple-icon-144x144.png">
-	<link rel="icon" type="image/png" sizes="192x192" href="<%=media%>/icon/android-icon-192x192.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="<%=media%>/icon/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="96x96" href="<%=media%>/icon/favicon-96x96.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="<%=media%>/icon/favicon-16x16.png">
-	<link rel="manifest" href="<%=media%>/icon/manifest.json"  crossorigin="use-credentials">
-	<meta name="msapplication-TileColor" content="<%=bar_color%>">
-	<meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png">
-    <% if mode == 'normal' then %>
-    <meta name="theme-color" content="<%=bar_color%>">
-    <script type="text/javascript">
-        let prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        if (prefersDarkMode) {
-            viewport = document.querySelector("meta[name=theme-color]");
-            viewport.setAttribute('content', '#444950');
-        }
-    </script>
-    <% elseif mode == 'dark' then %>
-    <meta name="theme-color" content="#444950">
-    <% elseif mode == 'light' then %>
-    <meta name="theme-color" content="<%=bar_color%>">
-    <% end -%>
-    <link rel="stylesheet" href="<%=media%>/css/cascade.css<%# ?v=PKG_VERSION %>">
-    <style title="text/css">
-        <% if mode == 'normal' then %>
-            @media (prefers-color-scheme: dark) {
-                <%=dark_css%>
-            }
-        <% elseif mode == 'dark' then %>
-            <%=dark_css%>
-        <% end -%>
-        <% if fs.access('/etc/config/design') then %>
-        :root {
-            --primary: <%=primary%>;
-            --dark-primary: <%=dark_primary%>;
-            --font-weight: <%=font_weight%>;
-            --progressbar-font-color: <%=progressbar_font%>;
-            --blur-radius:<%=blur_radius%>px;
-            --blur-opacity:<%=blur_opacity%>;
-            --blur-radius-dark:<%=blur_radius_dark%>px;
-            --blur-opacity-dark:<%=blur_opacity_dark%>;
-            --main-left-font-color:<%=main_left_font_color%>;
-        }
-        <% end -%>
-    </style>
+    <meta name="apple-touch-fullscreen" content="yes" /> 
+	<meta name="msapplication-TileColor" content="#09c">
+	<link rel="stylesheet" href="<%=media%>/css/style.css?v=<%= ver.luciversion %>">
+	<link rel="stylesheet" href="<%=media%>/css/compat-openwrt23.css?v=<%= ver.luciversion %>">
+	<script src="<%=media%>/js/jquery.min.js?v=3.5.1"></script>
+	<script src="<%=media%>/js/compat.js?v=<%= ver.luciversion %>"></script>
 	<link rel="shortcut icon" href="<%=media%>/favicon.ico">
 	<% if node and node.css then %>
 	<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
 	<% end -%>
+
+	<script src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script>
+	<script src="<%=resource%>/cbi.js<%= ver.luciversion and ('?v=' .. ver.luciversion) or '' %>"></script>
+	<script src="<%=resource%>/luci.js<%= ver.luciversion and ('?v=' .. ver.luciversion) or '' %>"></script>
 	<% if css then %>
 	<style title="text/css">
-		<%=css %>
+		<%= css %>
 	</style>
 	<% end -%>
-	<script src="<%=media%>/js/polyfill.min.js"></script>
-	<script src="<%=url('admin/translations', luci.i18n.context.lang)%>?v=<%=ver.luciversion%>"></script>
-	<script src="<%=resource%>/cbi.js?v=<%=ver.luciversion%>"></script>
-	<script src="<%=resource%>/luci.js?v=<%=ver.luciversion%>"></script>
-	<script src="<%=media%>/js/jquery.min.js?v=3.5.1"></script>
 </head>
-
-<body
-	class="lang_<%=luci.i18n.context.lang%> <% if node then %><%= striptags( node.title ) %><% end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %>"
-	data-page="<%= pcdata(table.concat(disp.context.requestpath, "-")) %>">
-
-	<div class="main">
-		<div class="main-left" id="mainmenu" style="display:none">
-			<div class="sidenav-header d-flex align-items-center">
-				<a class="brand" href="/"><%=brand_name%></a>
-				<div class="ml-auto">
-					<!-- Sidenav toggler -->
-					<div class="sidenav-toggler d-none d-xl-block active" data-action="sidenav-unpin"
-						data-target="#sidenav-main">
-						<div class="sidenav-toggler-inner">
-							<i class="sidenav-toggler-line"></i>
-							<i class="sidenav-toggler-line"></i>
-							<i class="sidenav-toggler-line"></i>
-						</div>
-					</div>
-				</div>
-			</div>
+	<body class="lang_<%=luci.i18n.context.lang%> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> <% if not (path == "") then %>node-<%= path %><% else %>node-main-login<% end %>" data-page="<%= pcdata(path) %>">
+<header>
+	<div class="fill">
+		<div class="container">
+			<span class="showSide"></span>
+			<a class="brand" href="#"><%=striptags(boardinfo.hostname or "OpenWrt")%></a>
+			<div class="status" id="indicators"></div>
 		</div>
-		<div class="main-right">
-			<header class="bg-primary">
-				<div class="fill">
-					<div class="container">
-						<div class="flex1">
-							<a class="showSide"></a>
-							<a class="brand" href="/"><%=brand_name%></a>
-						</div>
-						<div class="status" id="indicators"></div>
-					</div>
-				</div>
-			</header>
-			<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") then -%>
-					<div class="alert-message error">
-						<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 -%>
+	</div>
+</header>
 
-					<noscript>
-						<div class="alert-message error">
-							<h4><%:JavaScript required!%></h4>
-							<p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p>
-						</div>
-					</noscript>
+<div class="navbar">
+  <a href="/cgi-bin/luci/admin/status/overview"><img src="<%=media%>/images/home.png" /></a>
+  <a href="/cgi-bin/luci/admin/services/openclash"><img src="<%=media%>/images/openclash.png" /></a>
+  <a href="/cgi-bin/luci/admin/network/network"><img src="<%=media%>/images/link.png" /></a>
+  <a href="/cgi-bin/luci/admin/status/realtime"><img src="<%=media%>/images/rank.png" /></a>
+  <a href="/cgi-bin/luci/admin/system/admin"><img src="<%=media%>/images/user.png" /></a>
+</div>
 
-					<div id="tabmenu" style="display:none"></div>
+<div class="main">
+	<div style="" class="loading"><span><div class="loading-img"></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 -%>
+				<%- 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>
+	<script src="<%=media%>/js/style.js?v=<%=ver.luciversion%>"></script>

luci-theme-design/luasrc/view/themes/design/header_login.htm

@@ -1,132 +0,0 @@
-<%#
-	Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material Argon Template
-
-	luci-theme-design
-	Copyright 2020 Jerrykuku <jerrykuku@qq.com>
-
-	Have a bug? Please create an issue here on GitHub!
-	https://github.com/jerrykuku/luci-theme-design/issues
-
-	luci-theme-material:
-	Copyright 2015 Lutty Yang <lutty@wcan.in>
-
-	Argon Theme
-	https://demos.creative-tim.com/design-dashboard/index.html
-
-	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")
-
-	local node = disp.context.dispatched
-
-	local fs = require "nixio.fs"
-	local nutil = require "nixio.util"
-	local uci = require 'luci.model.uci'.cursor()
-
-	-- send as HTML5
-	http.prepare_content("text/html")
-
-	math.randomseed(tonumber(tostring(os.time()):reverse():sub(1, 9)))
-
-	-- Custom settings
-	local mode = 'normal'
-	local dark_css = fs.readfile('/www/luci-static/design/css/dark.css')
-	local bar_color = '#5e72e4'
-	local primary, dark_primary, blur_radius, blur_radius_dark, blur_opacity
-	if fs.access('/etc/config/design') then
-		primary = uci:get_first('design', 'global', 'primary')
-		dark_primary = uci:get_first('design', 'global', 'dark_primary')
-		blur_radius = uci:get_first('design', 'global', 'blur')
-		blur_radius_dark = uci:get_first('design', 'global', 'blur_dark')
-		blur_opacity = uci:get_first('design', 'global', 'transparency')
-		blur_opacity_dark = uci:get_first('design', 'global', 'transparency_dark')
-		mode = uci:get_first('design', 'global', 'mode')
-		bar_color = mode == 'dark' and dark_primary or primary
-	end
--%>
-<!DOCTYPE html>
-<html lang="<%=luci.i18n.context.lang%>">
-
-<head>
-	<meta charset="utf-8">
-	<title>
-		<%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %>
-		- LuCI</title>
-	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
-	<meta name="format-detection" content="telephone=no, email=no" />
-	<meta name="apple-mobile-web-app-capable" content="yes">
-	<meta name="mobile-web-app-capable" content="yes">
-	<meta name="x5-fullscreen" content="true">
-	<meta name="full-screen" content="yes">
-	<meta name="x5-page-mode" content="app">
-	<meta name="browsermode" content="application">
-	<meta name="msapplication-tap-highlight" content="no">
-	<meta name="msapplication-TileColor" content="<%=bar_color%>">
-	<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
-	<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
-	<link rel="apple-touch-icon" sizes="60x60" href="<%=media%>/icon/apple-icon-60x60.png">
-	<link rel="apple-touch-icon" sizes="72x72" href="<%=media%>/icon/apple-icon-72x72.png">
-	<link rel="apple-touch-icon" sizes="144x144" href="<%=media%>/icon/apple-icon-144x144.png">
-	<link rel="icon" type="image/png" sizes="192x192" href="<%=media%>/icon/android-icon-192x192.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="<%=media%>/icon/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="96x96" href="<%=media%>/icon/favicon-96x96.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="<%=media%>/icon/favicon-16x16.png">
-	<link rel="manifest" href="<%=media%>/icon/manifest.json" crossorigin="use-credentials">
-	<meta name="msapplication-TileColor" content="<%=bar_color%>">
-	<meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png">
-    <% if mode == 'normal' then %>
-    <meta name="theme-color" content="<%=bar_color%>">
-    <script type="text/javascript">
-        let prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        if (prefersDarkMode) {
-            viewport = document.querySelector("meta[name=theme-color]");
-            viewport.setAttribute('content', '#444950');
-        }
-    </script>
-    <% elseif mode == 'dark' then %>
-    <meta name="theme-color" content="#444950">
-    <% elseif mode == 'light' then %>
-    <meta name="theme-color" content="<%=bar_color%>">
-    <% end -%>
-	<link rel="stylesheet" href="<%=media%>/css/cascade.css<%# ?v=PKG_VERSION %>">
-	<style title="text/css">
-		<% if mode == 'normal' then %>
-			@media (prefers-color-scheme: dark) {
-				<%=dark_css%>
-			}
-		<% elseif mode == 'dark' then %>
-			<%=dark_css%>
-		<% end -%>
-		<% if fs.access('/etc/config/design') then %>
-		:root {
-			--primary: <%=primary%>;
-			--dark-primary: <%=dark_primary%>;
-			--blur-radius:<%=blur_radius%>px;
-			--blur-opacity:<%=blur_opacity%>;
-			--blur-radius-dark:<%=blur_radius_dark%>px;
-			--blur-opacity-dark:<%=blur_opacity_dark%>;
-		}
-		<% end -%>
-	</style>
-	<link rel="shortcut icon" href="<%=media%>/favicon.ico">
-	<% if node and node.css then %>
-	<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
-	<% end -%>
-	<% if css then %>
-	<style title="text/css">
-		<%=css %>
-	</style>
-	<% end -%>
-	<script src="<%=media%>/js/jquery.min.js?v=3.5.1"></script>
-
-</head>
-
-<body>

luci-theme-design/luasrc/view/themes/design/out_header_login.htm

@@ -1,14 +0,0 @@
-<%#
- Copyright 2008 Steven Barth <steven@midlink.org>
- Copyright 2008-2019 Jo-Philipp Wich <jo@mein.io>
- Licensed to the public under the Apache License 2.0.
--%>
-
-<%
-	local ver = require "luci.version"
-
-	if not luci.dispatcher.context.template_header_sent then
-		include("themes/" .. theme .. "/header_login")
-		luci.dispatcher.context.template_header_sent = true
-	end
-%>

luci-theme-design/luasrc/view/themes/design/sysauth.htm

@@ -1,187 +0,0 @@
-<%#
-	Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argon Template
-
-	luci-theme-design
-	Copyright 2020 Jerryk <jerrykuku@gmail.com>
-
-	Have a bug? Please create an issue here on GitHub!
-	https://github.com/jerrykuku/luci-theme-design/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
-
-	Argon Theme
-	https://demos.creative-tim.com/design-dashboard/index.html
-
-	Licensed to the public under the Apache License 2.0
--%>
-
-<%+themes/design/out_header_login%>
-<%
-	local util		= require "luci.util"
-	local fs		= require "nixio.fs"
-	local nutil		= require "nixio.util"
-	local json		= require "luci.jsonc"
-	local sys		= require "luci.sys"
-	local uci		= require 'luci.model.uci'.cursor()
-
-	-- Fetch Local Background Media
-
-	local function glob(...)
-		local iter, code, msg = fs.glob(...)
-		if iter then
-			return nutil.consume(iter)
-		else
-			return nil, code, msg
-		end
-	end
-
-
-	local imageTypes = " jpg png gif webp "
-	local videoTypes = " mp4 webm "
-	local allTypes = imageTypes .. videoTypes
-	local function fetchMedia(path, themeDir)
-		local backgroundTable = {}
-		local backgroundCount = 0
-		for i, f in ipairs(glob(path)) do
-			attr = fs.stat(f)
-			if attr then
-				local ext = fs.basename(f):match(".+%.(%w+)$")
-				if ext ~= nil then
-					ext = ext:lower()
-				end
-				if ext ~= nil and string.match(allTypes, " "..ext.." ") ~= nil then
-					local bg = {}
-					bg.type = ext
-					bg.url = themeDir .. fs.basename(f)
-					table.insert(backgroundTable, bg)
-					backgroundCount = backgroundCount + 1
-				end
-			end
-		end
-		return backgroundTable, backgroundCount
-	end
-	local function selectBackground(themeDir)
-		local bgUrl			= media .. "/img/blank.png"
-		local backgroundType	= "Image"
-		local mimeType			= ""
-
-		if fs.access("/etc/config/design") then
-			local online_wallpaper = uci:get_first('design', 'global', 'online_wallpaper') or (uci:get_first('design', 'global', 'bing_background') == '1' and 'bing')
-			if (online_wallpaper and online_wallpaper ~= "none") then
-				local picurl = sys.exec("/usr/libexec/design/online_wallpaper")
-				if (picurl and picurl ~= '') then
-					return picurl, "Image", ""
-				end
-			end
-		end
-
-		local backgroundTable, backgroundCount = fetchMedia("/www" .. themeDir .. "*", themeDir)
-		if ( backgroundCount > 0 ) then
-			local currentBg = backgroundTable[math.random(1, backgroundCount)]
-			bgUrl			= currentBg.url
-			if (string.match(videoTypes, " "..currentBg.type.." ") ~= nil) then
-				backgroundType	= "Video"
-				mimeType		= "video/" .. currentBg.type
-			end
-		end
-
-		return bgUrl, backgroundType, mimeType
-	end
-
-	local boardinfo			= util.ubus("system", "board")
-	local themeDir			= media .. "/background/"
-	local bgUrl, backgroundType, mimeType = selectBackground(themeDir)
-%>
-<!-- Login Page Start -->
-<div class="login-page">
-	<% if ( backgroundType == "Video" ) then %>
-	<!-- Video Player Start -->
-	<div class="video">
-		<video autoplay loop muted id="video">
-			<source src="<%=bgUrl%>" type="<%=mimeType%>">
-		</video>
-	</div>
-	<div class="volume-control mute"></div>
-	<script>
-		$(".volume-control").click(function(){
-			if($(this).hasClass("mute")){
-				$(this).removeClass("mute")
-				$("#video").prop('muted', false);
-			}else{
-				$(this).addClass("mute")
-				$("#video").prop('muted', true);
-			}
-		})
-	</script>
-	<!-- Video Player End -->
-	<% else %>
-	<!-- Image Background Start -->
-	<div class="main-bg" id="main-bg" style="background-image:url(<%=bgUrl%>)"></div>
-	<!-- Image Background End -->
-	<% end %>
-	<!-- Login Container Start -->
-	<div class="login-container">
-		<div class="login-form">
-			<!-- Logo Start -->
-				<div class="brand"><%:Authorization Required%></div>
-				<div class="brand-text"><%:Please enter your username and password.%></div>
-			</a>
-			<!-- Logo End -->
-			<!-- Login Form Start -->
-			<form class="form-login" method="post" action="<%=pcdata(luci.http.getenv("REQUEST_URI"))%>">
-
-				<%- if fuser then %>
-				<div class="errorbox"><%:Invalid username and/or password! Please try again.%></div>
-				<% end -%>
-
-				<div class="input-container">
-					<div class="input-group user-icon">
-						<input class="cbi-input-user" id="cbi-input-user" type="text" name="luci_username" value="<%=duser%>" />
-						<label class="border" for="cbi-input-user"></label>
-					</div>
-					<div class="input-group pass-icon">
-						<input class="cbi-input-password" id="cbi-input-password" type="password" name="luci_password" />
-						<label class="border" for="cbi-input-password"></label>
-					</div>
-				</div>
-				<div>
-					<input type="submit" value="<%:Login%>" class="cbi-button cbi-button-apply" />
-				</div>
-			</form>
-			<!-- Login Form End -->
-			<script type="text/javascript">//<![CDATA[
-				var input = document.getElementsByName('luci_password')[0];
-				if (input)
-					input.focus();
-			//]]></script>
-			<%
-			local uci  = require "luci.model.uci".cursor()
-			local fs  = require "nixio.fs"
-			local https_key = uci:get("uhttpd", "main", "key")
-			local https_port = uci:get("uhttpd", "main", "listen_https")
-			if type(https_port) == "table" then
-				https_port = https_port[1]
-			end
-
-			if https_port and fs.access(https_key) then
-				https_port = https_port:match("(%d+)$")
-			%>
-			<script type="text/javascript">//<![CDATA[
-				if (document.location.protocol != 'https:') {
-					var url = 'https://' + window.location.hostname + ':' + '<%=https_port%>' + window.location.pathname;
-					var img = new Image;
-					img.onload = function () { window.location = url };
-					img.src = 'https://' + window.location.hostname + ':' + '<%=https_port%>' + '<%=resource%>/cbi/up.gif?' + Math.random();;
-					setTimeout(function () {
-						img.src = ''
-					}, 5000);
-				}
-			//]]></script>
-			<% end %>
-