New Code For OpenWRT 19.07 for test.

README.md

@@ -1,10 +1,13 @@
 # luci-theme-argon
 A new Luci theme for LEDE/OpenWRT  
 Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template  
-Suitable for Openwrt 18.06.4 (for test) And Lean Luci (stable)  
+
 
 The old version is still in another branch call old. If you need that you can checkout that branch.
 
+## Notice
+The Current Branch Support 19.07, But it is only for test.
+You can checkout branch 18.06 for  OpenWRT 18.06
 
 ## How to use
 
@@ -20,21 +23,14 @@ make -j1 V=s
 opkg install https://github.com/jerrykuku/luci-theme-argon/releases/download/V1.3/luci-theme-argon_1.3-01-20191111_all.ipk
 ```
 
-## Update log 20191109
+## Update log 20200131
-1. Minimal background file size.
+1. New Code For OpenWRT 19.07 for test.
-2. Automatically detect the number of background images.
-3. Delete unused image and file.
 
 ## Screenshots
-![](/Screenshots/pc/screenshot1.png)
+![](/Screenshots/pc/pc1.jpg)
-![](/Screenshots/pc/screenshot2.png)
+![](/Screenshots/pc/pc2.jpg)
-
+![](/Screenshots/pc/pc3.jpg)
-<img src="/Screenshots/phone/Screenshot_1.jpg" width="375" height="792">
+![](/Screenshots/pc/phone.jpg)
-<img src="/Screenshots/phone/Screenshot_2.jpg" width="375" height="792">
-<img src="/Screenshots/phone/Screenshot_3.jpg" width="375" height="792">
-
-
-
 
 ## Thanks to 
 luci-theme-material: https://github.com/LuttyYang/luci-theme-material/

htdocs/luci-static/argon/css/purecss.css

@@ -1,7 +0,0 @@
-/*!
-Pure v1.0.1
-Copyright 2013 Yahoo!
-Licensed under the BSD License.
-https://github.com/pure-css/pure/blob/master/LICENSE.md
-*/
-.pure-g{letter-spacing:-.31em;text-rendering:optimizespeed;font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}}.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}.pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-g [class*=pure-u]{font-family:sans-serif}.pure-u-1-24{width:4.1667%}.pure-u-1-12,.pure-u-2-24{width:8.3333%}.pure-u-1-8,.pure-u-3-24{width:12.5%}.pure-u-1-6,.pure-u-4-24{width:16.6667%}.pure-u-1-5{width:20%}.pure-u-5-24{width:20.8333%}.pure-u-1-4,.pure-u-6-24{width:25%}.pure-u-7-24{width:29.1667%}.pure-u-1-3,.pure-u-8-24{width:33.3333%}.pure-u-3-8,.pure-u-9-24{width:37.5%}.pure-u-2-5{width:40%}.pure-u-10-24,.pure-u-5-12{width:41.6667%}.pure-u-11-24{width:45.8333%}.pure-u-1-2,.pure-u-12-24{width:50%}.pure-u-13-24{width:54.1667%}.pure-u-14-24,.pure-u-7-12{width:58.3333%}.pure-u-3-5{width:60%}.pure-u-15-24,.pure-u-5-8{width:62.5%}.pure-u-16-24,.pure-u-2-3{width:66.6667%}.pure-u-17-24{width:70.8333%}.pure-u-18-24,.pure-u-3-4{width:75%}.pure-u-19-24{width:79.1667%}.pure-u-4-5{width:80%}.pure-u-20-24,.pure-u-5-6{width:83.3333%}.pure-u-21-24,.pure-u-7-8{width:87.5%}.pure-u-11-12,.pure-u-22-24{width:91.6667%}.pure-u-23-24{width:95.8333%}.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%} 

htdocs/luci-static/argon/custom.css

@@ -0,0 +1,46 @@
+:root {
+    --main-color: #09c;
+    --header-bg: #09c;
+    --header-color: #fff;
+    --bar-bg: #5e72e4;
+    --menu-bg-color: #fff;
+    --menu-color: #5f6368;
+    --menu-color-hover: #202124;
+    --main-menu-color: #202124;
+    --submenu-bg-hover: #d4d4d4;
+    --submenu-bg-hover-active: #09c;
+
+    --blue: #5e72e4;
+    --indigo: #5603ad;
+    --purple: #8965e0;
+    --pink: #f3a4b5;
+    --red: #f5365c;
+    --orange: #fb6340;
+    --yellow: #ffd600;
+    --green: #2dce89;
+    --teal: #11cdef;
+    --cyan: #2bffc6;
+    --white: #fff;
+    --gray: #8898aa;
+    --gray-dark: #32325d;
+    --light: #96999c;
+    --lighter: #e9ecef;
+    --primary: #5e72e4;
+    --secondary: #f7fafc;
+    --success: #2dce89;
+    --info: #11cdef;
+    --warning: #fb6340;
+    --danger: #f5365c;
+    --dark: #212529;
+    --default: #172b4d;
+    --white: #fff;
+    --neutral: #fff;
+    --darker: black;
+    --breakpoint-xs: 0;
+    --breakpoint-sm: 576px;
+    --breakpoint-md: 768px;
+    --breakpoint-lg: 992px;
+    --breakpoint-xl: 1200px;
+
+    --font-body: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
+}

htdocs/luci-static/argon/fonts/font.svg

@@ -1,16 +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="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>

htdocs/luci-static/argon/fonts/icomoon.svg

@@ -1,12 +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="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="&#xe900;" 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="&#xe901;" glyph-name="password_unlock" 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" />
-</font></defs></svg>

htdocs/luci-static/argon/icons/spinner.svg

@@ -0,0 +1 @@
+<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>

htdocs/luci-static/argon/js/script.js

@@ -1,11 +1,11 @@
 /**
- *  Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
+ *	Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
  *
- *  luci-theme-argon
+ *	luci-theme-material
- *      Copyright 2019 Jerrykuku <jerrykuku@qq.com>
+ *		Copyright 2015 Lutty Yang <lutty@wcan.in>
  *
  *	Have a bug? Please create an issue here on GitHub!
- *      https://github.com/jerrykuku/luci-theme-argon/issues
+ *		https://github.com/LuttyYang/luci-theme-material/issues
  *
  *	luci-theme-bootstrap:
  *		Copyright 2008 Steven Barth <steven@midlink.org>
@@ -15,21 +15,10 @@
  *	MUI:
  *		https://github.com/muicss/mui
  *
- *  luci-theme-material:
- *      https://github.com/LuttyYang/luci-theme-material/
- *
- *  Agron Theme
- *	    https://demos.creative-tim.com/argon-dashboard/index.html
- *
- *  Login background
- *      https://unsplash.com/
- *
  *	Licensed to the public under the Apache License 2.0
  */
 
-/*
+document.addEventListener('luci-loaded', function(ev) {
- *  Font generate by Icomoon<icomoon.io>
- */
 (function ($) {
 	$(".main > .loading").fadeOut();
 
@@ -42,21 +31,21 @@
 		return text.replace(/[ \t\n\r]+/g, " ");
 	}
 
-
 	var lastNode = undefined;
 	var mainNodeName = undefined;
 
 	var nodeUrl = "";
-    (function (node) {
+	(function(node){
-        if (node[0] == "admin") {
+		var luciLocation;
+		if (node[0] == "admin"){
 			luciLocation = [node[1], node[2]];
-        } else {
+		}else{
 			luciLocation = node;
 		}
 
-        for (var i in luciLocation) {
+		for(var i in luciLocation){
 			nodeUrl += luciLocation[i];
-            if (i != luciLocation.length - 1) {
+			if (i != luciLocation.length - 1){
 				nodeUrl += "/";
 			}
 		}
@@ -72,11 +61,9 @@
 			luciLocation = ["Main", "Login"];
 			return true;
 		}
-        $(".main > .main-left > .nav > .slide > .active").next(".slide-menu").stop(true).slideUp("fast");
+
-        $(".main > .main-left > .nav > .slide > .menu").removeClass("active");
 		$(".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");
@@ -100,9 +87,6 @@
 	$(".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");
@@ -113,30 +97,14 @@
 				ul.removeClass("active");
 			});
 		}
-
 		return false;
-        }
-
 	});
 
-
-
-
-// define what element should be observed by the observer
-// and what types of mutations trigger the callback
-    if ($("#cbi-dhcp-lan-ignore").length > 0) {
-        observer.observe(document.getElementById("cbi-dhcp-lan-ignore"), {
-            subtree: true,
-            attributes: true
-        });
-    }
-
 	/**
 	 * hook menu click and add the hash
 	 */
 	$(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () {
-        if (lastNode != undefined)
+		if (lastNode != undefined) lastNode.removeClass("active");
-            lastNode.removeClass("active");
 		$(this).parent().addClass("active");
 		$(".main > .loading").fadeIn("fast");
 		return true;
@@ -146,23 +114,13 @@
 	 * fix menu click
 	 */
 	$(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () {
-        if (lastNode != undefined)
+		if (lastNode != undefined) lastNode.removeClass("active");
-            lastNode.removeClass("active");
 		$(this).addClass("active");
 		$(".main > .loading").fadeIn("fast");
 		window.location = $($(this).find("a")[0]).attr("href");
 		return false;
 	});
 
-    /**
-     * fix submenu click
-     */
-    $("#maincontent > .container > .tabs > li").click(function () {
-        $(".main > .loading").fadeIn("fast");
-        window.location = $($(this).find("a")[0]).attr("href");
-        return false;
-    });
-
 	/**
 	 * get current node and open it
 	 */
@@ -171,26 +129,6 @@
 		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
@@ -201,20 +139,19 @@
 			$(".darkMask").stop(true).fadeOut("fast");
 			$(".main-left").stop(true).animate({
 				width: "0"
-            }, "fast");
+			}, "200");
-            $(".main-right").css("overflow-y", "auto");
+			$(".main-right").css("overflow-y", "visible");
 			showSide = false;
 		} else {
 			$(".darkMask").stop(true).fadeIn("fast");
 			$(".main-left").stop(true).animate({
-                width: "15rem"
+				width: "13rem"
-            }, "fast");
+			}, "200");
 			$(".main-right").css("overflow-y", "hidden");
 			showSide = true;
 		}
 	});
 
-
 	$(".darkMask").click(function () {
 		if (showSide) {
 			showSide = false;
@@ -222,7 +159,7 @@
 			$(".main-left").stop(true).animate({
 				width: "0"
 			}, "fast");
-            $(".main-right").css("overflow-y", "auto");
+			$(".main-right").css("overflow-y", "visible");
 		}
 	});
 
@@ -245,22 +182,17 @@
 
 	$(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () {
 		var that = $(this);
-        if (that.text().trim() == "") {
+		if (that.text().trim() == ""){
 			that.css("display", "none");
 		}
 	});
 
-    $(".node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text").focus(function () {
-        //$(".node-main-login > .main > .main-right > .login-bg").addClass("blur");
-    });
-    $(".node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text").blur(function () {
-        //$(".node-main-login > .main > .main-right > .login-bg").removeClass("blur");
-    });
-
-
 	$(".main-right").focus();
 	$(".main-right").blur();
 	$("input").attr("size", "0");
+	$(".cbi-button-up").val("__");
+	$(".cbi-button-down").val("__");
+	$(".slide > a").removeAttr("href");
 
 	if (mainNodeName != undefined) {
 		console.log(mainNodeName);
@@ -285,3 +217,4 @@
 	}
 
 })(jQuery);
+});

luasrc/view/themes/argon/footer.htm

@@ -1,5 +1,5 @@
 <%#
-	Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
+	Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material Argon Template
 
 	luci-theme-argon
 	Copyright 2019 Jerrykuku <jerrykuku@qq.com>
@@ -7,26 +7,12 @@
 	Have a bug? Please create an issue here on GitHub!
 	https://github.com/jerrykuku/luci-theme-argon/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
-
 	luci-theme-material: 
-	https://github.com/LuttyYang/luci-theme-material/
+	Copyright 2015 Lutty Yang <lutty@wcan.in>
 	
 	Agron Theme
 	https://demos.creative-tim.com/argon-dashboard/index.html 
 
-	Login background
-	https://unsplash.com/
-
-	Font generate by Icomoon
-	https://icomoon.io/
-
 	Licensed to the public under the Apache License 2.0 
 -%>
 
@@ -40,24 +26,26 @@
 %>
 	</div>
 	<footer class="mobile-hide">
-                    <a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> /
+	<a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %>
-                    <%= ver.distversion %>
 	<% 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>
+		<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>
+</div>
-
+<script>
-    <script>
 	// thanks for Jo-Philipp Wich <jow@openwrt.org>
 	var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
-    </script>
+</script>
-    
+<script src="<%=media%>/js/jquery.min.js?v=git-20.029.45734-adbbd5c"></script>
-    <script src="<%=media%>/js/script.js?v=<%=math.random(1,100000)%>"></script>
+<script src="<%=media%>/js/script.js?v=git-20.029.45734-adbbd5c"></script>
 </body>
 </html>
+

luasrc/view/themes/argon/header.htm

@@ -1,5 +1,5 @@
 <%#
-	Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argon Template
+	Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material Argon Template
 
 	luci-theme-argon
 	Copyright 2019 Jerrykuku <jerrykuku@qq.com>
@@ -7,13 +7,8 @@
 	Have a bug? Please create an issue here on GitHub!
 	https://github.com/jerrykuku/luci-theme-argon/issues 
 
-	luci-theme-bootstrap:
+	luci-theme-material: 
-	Copyright 2008 Steven Barth <steven@midlink.org>
+	Copyright 2015 Lutty Yang <lutty@wcan.in>
-	Copyright 2008-2016 Jo-Philipp Wich <jow@openwrt.org>
-	Copyright 2012 David Menting <david@nut-bolt.nl>
-
-	MUI:
-	https://github.com/muicss/mui
 	
 	Agron Theme
 	https://demos.creative-tim.com/argon-dashboard/index.html 
@@ -47,15 +42,6 @@
 	local c = tree
 	local i, r
 
-	function glob(...)
-		local iter, code, msg = fs.glob(...)
-		if iter then
-			return nutil.consume(iter)
-		else
-			return nil, code, msg
-		end
-	end
-	
 	-- tag all nodes leading to this page
 	for i, r in ipairs(request) do
 		if c.nodes and c.nodes[r] then
@@ -123,7 +109,7 @@
 
 			for i, r in ipairs(childs) do
 				local nnode = node.nodes[r]
-				local title = pcdata(striptags(translate(nnode.title)))
+				local title = striptags(translate(nnode.title))
 
 				write('<li><a data-title="%s" href="%s">%s</a></li>' %{
 					title,
@@ -146,7 +132,7 @@
 				local grandchildren = disp.node_childs(nnode)
 
 				if #grandchildren > 0 then
-					local title = pcdata(striptags(translate(nnode.title)))
+					local title = striptags(translate(nnode.title))
 					local en_title = pcdata(striptags(string.gsub(nnode.title," ","_")))
 					write('<li class="slide"><a class="menu" data-title="%s" href="#">%s</a>' %{
 						en_title,
@@ -156,9 +142,9 @@
 					render_submenu(category .. "/" .. r, nnode)
 					write('</li>')
 				else
-					local title = pcdata(striptags(translate(nnode.title)))
+					local title = striptags(translate(nnode.title))
 					local en_title = pcdata(striptags(nnode.title))
-					write('<li  class="slide"><a  class="menu exit" data-title="%s" href="%s">%s</a></li>' %{
+					write('<li class="lg"><a class="logout" data-title="%s" href="%s">%s</a></li>' %{
 						en_title,
 						nodeurl(category, r, nnode.query),
 						title
@@ -170,37 +156,20 @@
 		end
 	end
 
-	local function render_changes()
-		-- 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
-				write('<a class="uci_change_indicator label notice" href="%s?redir=%s">%s: %d</a>' %{
-					url(category, 'uci/changes'),
-					http.urlencode(http.formvalue('redir') or table.concat(disp.context.request, "/")),
-					translate('Unsaved Changes'),
-					ucichanges
-				})
-			end
-		end
-	end
-	
 	math.randomseed(os.time())
+	function glob(...)
+		local iter, code, msg = fs.glob(...)
+		if iter then
+			return nutil.consume(iter)
+		else
+			return nil, code, msg
+		end
+	end
 
 	local bgcount = 0
-	for f in ipairs(glob("/www/luci-static/argon/img/*")) do
+	for f in ipairs(glob("/www/luci-static/material/img/*")) do
 		bgcount = bgcount + 1
 	end
-	
-	
 -%>
 <!DOCTYPE html>
 <html lang="<%=luci.i18n.context.lang%>">
@@ -208,24 +177,17 @@
 	<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="theme-color" content="#09c">
-        <meta name="full-screen" content="yes">
-        <meta name="x5-page-mode" content="app">
-        <meta name="browsermode" content="application">
-        <meta name="theme-color" content="#5e72e4">
 	<meta name="msapplication-tap-highlight" content="no">
-        <meta name="msapplication-TileColor" content="#5e72e4">
+	<meta name="msapplication-TileColor" content="#09c">
-
 	<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
 	<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
 	<meta name="msapplication-TileImage" content="<%=media%>/logo.png"/>
     <link rel="icon" href="<%=media%>/logo.png" sizes="144x144">
     <link rel="apple-touch-icon-precomposed" href="<%=media%>/logo.png" sizes="144x144">
-	<link rel="stylesheet" href="<%=media%>/css/purecss.css">  
+	<link rel="stylesheet" href="<%=media%>/cascade.css?v=<%=math.random(1,100000)%>">
-	<link rel="stylesheet" href="<%=media%>/css/style.css?v=<%=math.random(1,100000)%>"> 
 	<link rel="shortcut icon" href="<%=media%>/favicon.ico">
 	<% if node and node.css then %>
 		<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
@@ -233,11 +195,11 @@
 	<% if css then %>
 		<style title="text/css"><%= css %></style>
 	<% end -%>
-	<script src="<%=resource%>/cbi.js?v=git-19.190.55614-35357e4"></script>
+	<script src="<%=url('admin/translations', luci.i18n.context.lang)%>?v=git-20.029.45734-adbbd5c"></script>
-	<script src="<%=resource%>/xhr.js?v=git-19.190.55614-35357e4"></script>
+	<script src="<%=resource%>/cbi.js?v=git-20.029.45734-adbbd5c"></script>
-	<script src="<%=media%>/js/jquery.min.js?v=git-19.190.55614-35357e4"></script>
+	<script src="<%=resource%>/xhr.js?v=git-20.029.45734-adbbd5c"></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 %>">
+<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="<%= table.concat(disp.context.requestpath, "-") %>">
 
 <div class="main">
 	<div style="" class="loading">
@@ -271,7 +233,6 @@
                     <a class="showSide"></a>
                     <a class="brand" href="#"><%=boardinfo.hostname or "?"%> ™</a>
                     <div class="pull-right">
-                            <% render_changes() %>
                         <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 class="mobile-hide"><%:Auto Refresh%></span> <%:on%></span>
 						<span class="label" id="xhr_poll_status_off" style="display:none"><span class="mobile-hide"><%:Auto Refresh%></span> <%:off%></span>
@@ -288,7 +249,9 @@
 					<div class="alert-message warning">
 						<h4><%:No password set!%></h4>
 						<p><%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%></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 -%>