Add luci-theme-design

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

@@ -0,0 +1,15 @@
+# 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
+LUCI_DEPENDS:=
+PKG_VERSION:=6.0
+PKG_RELEASE:=20230224
+
+include $(TOPDIR)/feeds/luci/luci.mk
+
+# call BuildPackage - OpenWrt buildroot signature

luci-theme-design/README.md

@@ -0,0 +1,71 @@
+<img src="./preview/light.png"/> 
+
+# luci-theme-design
+
+**luci-theme-design**基于[luci-theme-neobird](https://github.com/thinktip/luci-theme-neobird)二次开发, 适用于lede For Lean's OpenWRT Only [lede](https://github.com/coolsnowwolf/lede)
+
+- 修复安装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
+
+## 主要特点
+
+- 针对移动端优化，特别适合手机端做为webapp使用
+- 修改和优化了很多插件显示，完善的icon图标，尽量视觉统一
+- 简洁的登录界面，底部导航栏，类App的沉浸式体验；
+- 适配深色模式，适配系统自动切换；
+
+## 体验Webapp方法
+
+- 在移动端(iOS/iPadOS)浏览器打开管理界面，添加到主屏幕即可。
+- 想要实现完全的沉浸式（无浏览器导航、无地址栏等）体验，需要使用SSL证书，请自行申请域名、证书、安装并启用。
+- 如果不使用SSL证书，基于安全原因，iOS/iPadOS 在打开新的页面后，将会显示浏览器顶部菜单栏。
+
+## PS
+
+- 资源接口icon未完善，如果有能力画图的欢迎pr，但请确保跟现有icon颜色风格一致
+- 有bug欢迎提issue
+- 主题个人配色可能会不符合大众胃口，欢迎提配色建议
+
+## 自行编译
+
+```
+git clone https://github.com/gngpp/luci-theme-design.git  package/luci-theme-design
+make menuconfig # choose LUCI->Theme->Luci-theme-design  
+make V=s
+```
+
+## 预览(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/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/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

@@ -0,0 +1,200 @@
+'use strict';
+'require baseclass';
+'require ui';
+
+return baseclass.extend({
+	__init__: function() {
+		ui.menu.load().then(L.bind(this.render, this));
+	},
+
+	render: function(tree) {
+		var node = tree,
+		    url = '';
+
+		this.renderModeMenu(node);
+
+		if (L.env.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];
+			}
+
+			if (node)
+				this.renderTabMenu(node, url);
+		}
+
+		document.querySelector('.showSide')
+			.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
+
+		document.querySelector('.darkMask')
+			.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
+			
+		document.querySelector(".main > .loading").style.opacity = '0';
+		document.querySelector(".main > .loading").style.visibility = 'hidden';
+
+		if (window.innerWidth <= 992)
+			document.querySelector('.main-left').style.width = '0';
+
+		document.querySelector('.main-right').style.overflow = 'auto';
+		window.addEventListener('resize', this.handleSidebarToggle, true);
+	},
+
+	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 () {
+				ul.classList.remove('active');
+				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(){
+				slide_menu.classList.add('active');
+				a.classList.add('active');
+			});
+			a.blur();
+		}
+		ev.preventDefault();
+		ev.stopPropagation();
+	},
+
+	renderMainMenu: function(tree, url, level) {
+		var l = (level || 0) + 1,
+		    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' : null;
+			if (isActive) {
+				ul.classList.add('active');
+				slideClass += " active";
+				menuClass += " active";
+			}
+
+			ul.appendChild(E('li', { 'class': slideClass }, [
+				E('a', {
+					'href': L.url(url, children[i].name),
+					'click': (l == 1) ? ui.createHandlerFn(this, 'handleMenuExpand') : null,
+					'class': menuClass,
+					'data-title': hasChildren ? children[i].title.replace(" ", "_") : children[i].title.replace(" ", "_"),
+				}, [_(children[i].title)]),
+				submenu
+			]));
+		}
+
+		if (l == 1) {
+			var container = document.querySelector('#mainmenu');
+
+			container.appendChild(ul);
+			container.style.display = '';
+		}
+
+		return ul;
+	},
+
+	renderModeMenu: function(tree) {
+		var ul = document.querySelector('#modemenu'),
+		    children = ui.menu.getChildren(tree);
+
+		for (var i = 0; i < children.length; i++) {
+			var isActive = (L.env.requestpath.length ? children[i].name == L.env.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.style.display = '';
+	},
+
+	renderTabMenu: function(tree, url, level) {
+		var container = document.querySelector('#tabmenu'),
+			l = (level || 0) + 1,
+			ul = E('ul', { 'class': 'tabs' }),
+			children = ui.menu.getChildren(tree),
+			activeNode = null;
+
+		if (children.length == 0)
+			return E([]);
+
+		for (var i = 0; i < children.length; i++) {
+			var isActive = (L.env.dispatchpath[l + 2] == children[i].name),
+				activeClass = isActive ? ' active' : '',
+				className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
+
+			ul.appendChild(E('li', { 'class': className }, [
+				E('a', { 'href': L.url(url, children[i].name) }, [_(children[i].title)])
+			]));
+
+			if (isActive)
+				activeNode = children[i];
+		}
+
+		container.appendChild(ul);
+		container.style.display = '';
+
+		if (activeNode)
+			container.appendChild(this.renderTabMenu(activeNode, url + '/' + activeNode.name, l));
+
+		return ul;
+	},
+
+	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 (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';
+
+		if (open) {
+			$("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%)")
+		}
+	},
+});
+

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

@@ -0,0 +1,32 @@
+<%#
+	Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
+
+	luci-theme-material
+	Copyright 2015 Lutty Yang <lutty@wcan.in>
+
+	Have a bug? Please create an issue here on GitHub!
+	https://github.com/LuttyYang/luci-theme-material/issues
+
+	luci-theme-bootstrap:
+	Copyright 2008 Steven Barth <steven@midlink.org>
+	Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
+	Copyright 2012 David Menting <david@nut-bolt.nl>
+
+	MUI:
+	https://github.com/muicss/mui
+
+	Licensed to the public under the Apache License 2.0
+-%>
+
+<% local ver = require "luci.version" %>
+	</div>
+	<footer class="mobile-hide">
+	<a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %>
+	</footer>
+	</div>
+</div>
+
+<script type="text/javascript">L.require('menu-design')</script>
+
+</body>
+</html>

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

@@ -0,0 +1,116 @@
+<%#
+	Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
+
+	luci-theme-material
+	Copyright 2015-2017 Lutty Yang <lutty@wcan.in>
+
+	Have a bug? Please create an issue here on GitHub!
+	https://github.com/LuttyYang/luci-theme-material/issues
+
+	luci-theme-bootstrap:
+	Copyright 2008 Steven Barth <steven@midlink.org>
+	Copyright 2008-2016 Jo-Philipp Wich <jow@openwrt.org>
+	Copyright 2012 David Menting <david@nut-bolt.nl>
+
+	MUI:
+	https://github.com/muicss/mui
+
+	Licensed to the public under the Apache License 2.0
+-%>
+
+<%
+	local sys  = require "luci.sys"
+	local util = require "luci.util"
+	local http = require "luci.http"
+	local disp = require "luci.dispatcher"
+	local ver  = require "luci.version"
+
+	local boardinfo = util.ubus("system", "board") or { }
+
+	local node = disp.context.dispatched
+	local path = table.concat(disp.context.path, "-")
+
+	http.prepare_content("text/html; charset=UTF-8")
+-%>
+<!DOCTYPE html>
+<html lang="<%=luci.i18n.context.lang%>">
+<head>
+<meta charset="utf-8">
+<meta 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="apple-touch-fullscreen" content="yes" /> 
+	<meta name="msapplication-TileColor" content="#09c">
+	<link rel="stylesheet" href="<%=media%>/css/style.css?v=<%= ver.luciversion %>">
+	<script src="<%=media%>/js/jquery.min.js?v=3.5.1"></script>
+	<link rel="shortcut icon" href="<%=media%>/favicon.png">
+	<% 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"></script>
+	<script src="<%=resource%>/luci.js?v=<%=ver.luciversion%>"></script>
+	<% if css then %>
+	<style title="text/css">
+		<%= css %>
+	</style>
+	<% end -%>
+</head>
+	<body class="lang_<%=luci.i18n.context.lang%> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> <% if 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>
+</header>
+
+<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 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>