Add luci-theme-design (#192)

* Add luci-theme-design

* luci-theme-design: Fix node-status-routes overflow style

* Fix node-servces-ddns input style

* Fix node-services-aliyundrive-webdav mask-box background style

---------

Co-authored-by: relife <verticle@foxmail.com>

themes/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:=5.2
+PKG_RELEASE:=20230216
+
+include $(TOPDIR)/feeds/luci/luci.mk
+
+# call BuildPackage - OpenWrt buildroot signature

themes/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>

themes/luci-theme-design/htdocs/luci-static/design/js/script.js

@@ -0,0 +1,266 @@
+/**
+ *  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
+ */
+(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);
+    }
+
+    // .node-status-realtime embed[src="/luci-static/resources/bandwidth.svg"] + div + br + table
+    // .node-status-realtime embed[src="/luci-static/resources/wifirate.svg"] + div + br + table
+    // .node-status-realtime embed[src="/luci-static/resources/wireless.svg"] + div + br + table
+    $(document).ready(function(){
+        ["bandwidth", "wifirate", "wireless"].forEach(function (value) {
+            let target = $(".node-status-realtime embed[src=\"\/luci-static\/resources\/" + value + ".svg\"] + div + br + table");
+            if (target.length != 0) {
+                let div =  document.createElement("div");
+                div.style = "overflow-x: auto;"
+                target.before(div);
+                newTarget = target.clone();
+                target.remove();
+                div.append(newTarget.get(0))
+            }
+        })
+   });
+
+    /**
+     * trim text, Remove spaces, wrap
+     * @param text
+     * @returns {string}
+     */
+    function trimText(text) {
+        return text.replace(/[ \t\n\r]+/g, " ");
+    }
+
+
+    var lastNode = undefined;
+    var mainNodeName = undefined;
+
+    var nodeUrl = "";
+    (function(node){
+        if (node[0] == "admin"){
+            luciLocation = [node[1], node[2]];
+        }else{
+            luciLocation = node;
+        }
+
+        for(var i in luciLocation){
+            nodeUrl += luciLocation[i];
+            if (i != luciLocation.length - 1){
+                nodeUrl += "/";
+            }
+        }
+    })(luciLocation);
+
+    /**
+     * get the current node by Burl (primary)
+     * @returns {boolean} success?
+     */
+    function getCurrentNodeByUrl() {
+        var ret = false;
+        if (!$('body').hasClass('logged-in')) {
+            luciLocation = ["Main", "Login"];
+            return true;
+        }
+
+        $(".main > .main-left > .nav > .slide > .menu").each(function () {
+            var ulNode = $(this);
+            ulNode.next().find("a").each(function () {
+                var that = $(this);
+                var href = that.attr("href");
+
+                if (href.indexOf(nodeUrl) != -1) {
+                    ulNode.click();
+                    ulNode.next(".slide-menu").stop(true, true);
+                    lastNode = that.parent();
+                    lastNode.addClass("active");
+                    ret = true;
+                    return true;
+                }
+            });
+        });
+        return ret;
+    }
+
+    /**
+     * menu click
+     */
+    $(".main > .main-left > .nav > .slide > .menu").click(function () {
+        var ul = $(this).next(".slide-menu");
+        var menu = $(this);
+        if (!menu.hasClass("exit")) {
+            $(".main > .main-left > .nav > .slide > .active").next(".slide-menu").stop(true).slideUp("fast");
+            $(".main > .main-left > .nav > .slide > .menu").removeClass("active");
+            if (!ul.is(":visible")) {
+                menu.addClass("active");
+                ul.addClass("active");
+                ul.stop(true).slideDown("fast");
+            } else {
+                ul.stop(true).slideUp("fast", function () {
+                    menu.removeClass("active");
+                    ul.removeClass("active");
+                });
+            }
+
+            return false;
+        }
+    });
+
+    /**
+     * hook menu click and add the hash
+     */
+    $(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () {
+        if (lastNode != undefined) lastNode.removeClass("active");
+        $(this).parent().addClass("active");
+        $(".main > .loading").fadeIn("fast");
+        return true;
+    });
+
+    /**
+     * fix menu click
+     */
+    $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () {
+        if (lastNode != undefined) lastNode.removeClass("active");
+        $(this).addClass("active");
+        $(".main > .loading").fadeIn("fast");
+        window.location = $($(this).find("a")[0]).attr("href");
+        return false;
+    });
+
+    /**
+     * get current node and open it
+     */
+    if (getCurrentNodeByUrl()) {
+        mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1];
+        mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase();
+        $("body").addClass(mainNodeName);
+    }
+    $(".cbi-button-up").val("");
+    $(".cbi-button-down").val("");
+
+
+    /**
+     * hook other "A Label" and add hash to it.
+     */
+    $("#maincontent > .container").find("a").each(function () {
+        var that = $(this);
+        var onclick = that.attr("onclick");
+        if (onclick == undefined || onclick == "") {
+            that.click(function () {
+                var href = that.attr("href");
+                if (href.indexOf("#") == -1) {
+                    $(".main > .loading").fadeIn("fast");
+                    return true;
+                }
+            });
+        }
+    });
+
+    /**
+     * Sidebar expand
+     */
+    var showSide = false;
+    $(".showSide").click(function () {
+        if (showSide) {
+            $(".darkMask").stop(true).fadeOut("fast");
+            $(".main-left").stop(true).animate({
+                width: "0"
+            }, "fast");
+            $(".main-right").css("overflow-y", "auto");
+            showSide = false;
+        } else {
+            $(".darkMask").stop(true).fadeIn("fast");
+            $(".main-left").stop(true).animate({
+                width: "17rem"
+            }, "fast");
+            $(".main-right").css("overflow-y", "hidden");
+            $(".showSide").css("display", "none");
+            $("header").css("box-shadow",   "17rem 2px 4px rgb(0 0 0 / 8%)")
+            showSide = true;
+        }
+    });
+
+
+    $(".darkMask").click(function () {
+        if (showSide) {
+            showSide = false;
+            $(".darkMask").stop(true).fadeOut("fast");
+            $(".main-left").stop(true).animate({
+                width: "0"
+            }, "fast");
+            $(".main-right").css("overflow-y", "auto");
+            $(".showSide").css("display", "");
+            $("header").css("box-shadow",   "0 2px 4px rgb(0 0 0 / 8%)")
+        }
+    });
+
+    $(window).resize(function () {
+        if ($(window).width() > 992) {
+            $(".showSide").css("display", "");
+            $(".main-left").css("width", "");
+            $(".darkMask").stop(true);
+            $(".darkMask").css("display", "none");
+            showSide = false;
+            $("header").css("box-shadow",   "17rem 2px 4px rgb(0 0 0 / 8%)")
+        } else {
+            $("header").css("box-shadow",   "0 2px 4px rgb(0 0 0 / 8%)")
+        }
+    });
+
+    /**
+     * fix legend position
+     */
+    $("legend").each(function () {
+        var that = $(this);
+        that.after("<span class='panel-title'>" + that.text() + "</span>");
+    });
+
+    $(".main-right").focus();
+    $(".main-right").blur();
+    $("input").attr("size", "0");
+
+    if (mainNodeName != undefined) {
+        console.log(mainNodeName);
+        switch (mainNodeName) {
+            case "node-status-system_log":
+            case "node-status-kernel_log":
+                $("#syslog").focus(function () {
+                    $("#syslog").blur();
+                    $(".main-right").focus();
+                    $(".main-right").blur();
+                });
+                break;
+            case "node-status-firewall":
+                var button = $(".node-status-firewall > .main fieldset li > a");
+                button.addClass("cbi-button cbi-button-reset a-to-btn");
+                break;
+            case "node-system-reboot":
+                var button = $(".node-system-reboot > .main > .main-right p > a");
+                button.addClass("cbi-button cbi-input-reset a-to-btn");
+                break;
+        }
+    }
+
+})(jQuery);

themes/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"
+}

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

@@ -0,0 +1,56 @@
+<%#
+    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>
+            
+    luci-theme-neobird
+    Copyright 2021 2smile <thinktip@gmail.com>
+
+    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"
+	local disp = require "luci.dispatcher"
+	local request  = disp.context.path
+	local category = request[1]
+	local tree = disp.node()
+	local categories = disp.node_childs(tree)
+%>
+                </div>
+                <footer class="footer" style="text-align:center">
+                    <a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %></a> |
+                    <a href="https://www.lede-project.org/"><%= ver.distversion %></a>
+                    <br />
+                    © 2021-2022 2smile. All Rights Reserved.
+                    <% if #categories > 1 then %>
+                    <ul class="breadcrumb pull-right" id="modemenu">
+                        <% for i, r in ipairs(categories) do %>
+                        <li<% if request[1] == r then %> class="active"<%end%>><a href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a> <span class="divider">|</span></li>
+                        <% end %>
+                    </ul>
+                    <% end %>
+                </footer>
+            </div>
+        </div>
+
+    <script>
+        // thanks for Jo-Philipp Wich <jow@openwrt.org>
+        var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
+    </script>
+    <script src="<%=media%>/js/jquery.min.js?v=<%= ver.luciversion %>"></script>
+    <script src="<%=media%>/js/script.js?v=<%= ver.luciversion %>"></script>
+</body>
+</html>

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

@@ -0,0 +1,264 @@
+<%#
+	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>
+
+	luci-theme-neobird
+	Copyright 2021 2smile <thinktip@gmail.com>
+	
+	luci-theme-design
+	Copyright 2023 2smile <gngppz@gmail.com>
+
+	Have a bug? Please create an issue here on GitHub!
+	https://github.com/gngpp/luci-theme-design
+
+	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>
+
+	luci-theme-neobird:
+	Copyright 2021 2smile <thinktip@gmail.com>
+
+	MUI:
+	https://github.com/muicss/mui
+
+	Licensed to the public under the Apache License 2.0
+-%>
+
+<%
+	local ver = require "luci.version"
+	local sys  = require "luci.sys"
+	local util = require "luci.util"
+	local http = require "luci.http"
+	local disp = require "luci.dispatcher"
+
+	local boardinfo = util.ubus("system", "board")
+	local boardinfo={}
+	boardinfo.hostname=sys.hostname()
+	
+	local request  = disp.context.path
+	local request2 = disp.context.request
+
+	local category = request[1]
+	local cattree  = category and disp.node(category)
+
+	local leaf = request2[#request2]
+
+	local tree = disp.node()
+	local node = disp.context.dispatched
+
+	local categories = disp.node_childs(tree)
+
+	local c = tree
+	local i, r
+
+	-- tag all nodes leading to this page
+	for i, r in ipairs(request) do
+		if c.nodes and c.nodes[r] then
+			c = c.nodes[r]
+			c._menu_selected = true
+		end
+	end
+
+    -- send as HTML5
+	http.prepare_content("text/html")
+
+	local function nodeurl(prefix, name, query)
+		local url = controller .. prefix .. name .. "/"
+		if query then
+			url = url .. http.build_querystring(query)
+		end
+		return pcdata(url)
+	end
+
+	local function subtree(prefix, node, level)
+		if not level then
+			level = 1
+		end
+
+		local childs = disp.node_childs(node)
+		if #childs > 0 then
+
+            if level > 2 then
+%>
+	<ul class="tabs">
+		<%
+            end
+
+			local selected_node
+			local selected_name
+			local i, v
+
+			for i, v in ipairs(childs) do
+				local nnode = node.nodes[v]
+				if nnode._menu_selected then
+					selected_node = nnode
+					selected_name = v
+				end
+                if level > 2 then
+		%>
+			<li class="tabmenu-item-<%=v%><%- if nnode._menu_selected or (node.leaf and v == leaf) then %> active<% end %>">
+			    <a href="<%=nodeurl(prefix, v, nnode.query)%>"><%=striptags(translate(nnode.title))%></a>
+			</li>
+		<%      end
+			end
+
+            if level > 2 then
+		%>
+	</ul>
+<%          end
+
+			if selected_node then
+				subtree(prefix .. selected_name .. "/", selected_node, level + 1)
+			end
+		end
+	end
+-%>
+<!DOCTYPE html>
+<html lang="<%=luci.i18n.context.lang%>">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" />
+    <link rel="manifest" href="<%=media%>/manifest.json">
+    <title><%=striptags( (boardinfo.hostname or "?") .. ( (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 "?") ) %>">
+    <meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %>">
+    <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" /> 
+
+    <link rel="stylesheet" href="<%=media%>/css/style.css?v=<%= ver.luciversion %>">
+    <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="<%=resource%>/xhr.js?<%= ver.luciversion %>"></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 %>">
+
+<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="container">
+	<span class="showSide"></span>
+	<a class="brand" href="#"><%=boardinfo.hostname or "OpenWrt"%></a>
+		<div class="pull-right">
+		<%
+		-- calculate the number of unsaved changes
+		if tree.nodes[category] and tree.nodes[category].ucidata then
+			local ucichanges = 0
+			for i, j in pairs(require("luci.model.uci").cursor():changes()) do
+				for k, l in pairs(j) do
+					for m, n in pairs(l) do
+						ucichanges = ucichanges + 1;
+					end
+				end
+			end
+			%>
+			<% if ucichanges > 0 then %>
+			<a class="label notice" href="<%=url(category, 'uci/changes')%>?redir=<%=http.urlencode(http.formvalue('redir') or table.concat(disp.context.request, "/"))%>"><%=translate('Unsaved Changes')%>: <%=ucichanges%></a>
+			<% end %>
+			<span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
+				<span class="label success" id="xhr_poll_status_on"><span id="refresh_on" class="mobile-hide"></span></span>
+				<span class="label" id="xhr_poll_status_off" style="display:none"><span id="refresh_off" class="mobile-hide"></span></span>
+			</span>
+		<% end %>
+		</div>
+
+
+
+        
+ 	
+		</div>
+</header>
+
+ <div class="main">
+	 <div class="main-left">
+		 <ul class="nav">
+			 <%-
+			 local function submenu(prefix, node)
+			 local childs = disp.node_childs(node)
+			 if #childs > 0 then
+			 %>
+			 <ul class="slide-menu">
+				 <%-
+				 for i, r in ipairs(childs) do
+				 local nnode = node.nodes[r]
+				 local href  = controller .. "" .. prefix .. r ..
+				 (nnode.query and http.build_querystring(nnode.query) or "")
+				 %>
+				 <li><a data-title="<%=pcdata(striptags(nnode.title))%>" href="<%=pcdata(href)%>"><%=pcdata(striptags(translate(nnode.title)))%></a></li>
+				 <%-
+				 end
+				 %>
+			 </ul>
+			 <%-
+			 end
+			 end
+
+			 childs = disp.node_childs(cattree)
+
+			 if #childs > 0 then
+			 for i, r in ipairs(childs) do
+			 local nnode = cattree.nodes[r]
+			 local href  = controller .. "/" .. category .. "/" .. r ..
+			 (nnode.query and http.build_querystring(k.query) or "")
+			 local grandchildren = disp.node_childs(nnode)
+
+			 if #grandchildren > 0 then
+			 %>
+			 <li class="slide">
+				 <a class="menu" data-title="<%=pcdata(striptags(nnode.title))%>" href="#"><%=pcdata(striptags(translate(nnode.title)))%></a>
+				 <%- submenu("" .. category .. "/" .. r .. "/", nnode) %>
+			 </li>
+			 <%          else %>
+			 <li class="slide">
+				 <a class="menu2" data-title="<%=pcdata(striptags(nnode.title))%>" href="<%=pcdata(href)%>"><%=pcdata(striptags(translate(nnode.title)))%></a>
+			 </li>
+			 <%
+			 end
+			 end
+			 end
+			 %>
+		 </ul>
+	 </div>
+	 <div class="main-right">
+		 <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 warning">
+						 <h4><%:No password set!%></h4>
+						 <%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%><br>
+						 <a href="<%=pcdata(luci.dispatcher.build_url("admin/system/admin"))%>"><%:Go to password configuration...%></a>
+					 </div>
+				 <%- end -%>
+				 <% if category then subtree("/" .. category .. "/", cattree) end %>
+

themes/luci-theme-design/root/etc/uci-defaults/30_luci-theme-design

@@ -0,0 +1,11 @@
+#!/bin/sh
+sed -i ":a;$!N;s/tmpl.render.*sysauth_template.*return/local scope = { duser = default_user, fuser = user }\nlocal ok, res = luci.util.copcall\(luci.template.render_string, [[<% include\(\"themes\/\" .. theme .. \"\/sysauth\"\) %>]], scope\)\nif ok then\nreturn res\nend\nreturn luci.template.render\(\"sysauth\", scope\)/;ba" /usr/lib/lua/luci/dispatcher.lua
+sed -i ":a;$!N;s/t.render.*sysauth_template.*return/local scope = { duser = h, fuser = a }\nlocal ok, res = luci.util.copcall\(luci.template.render_string, [[<% include\(\"themes\/\" .. theme .. \"\/sysauth\"\) %>]], scope\)\nif ok then\nreturn res\nend\nreturn luci.template.render\(\"sysauth\", scope\)/;ba" /usr/lib/lua/luci/dispatcher.lua
+rm -Rf /var/luci-modulecache
+rm -Rf /var/luci-indexcache
+uci batch <<-EOF
+	set luci.themes.Design=/luci-static/design
+	set luci.main.mediaurlbase=/luci-static/design
+	commit luci
+EOF
+exit 0