🌴 Sync 2026-03-05 23:51:42

luci-theme-edge/.gitignore

@@ -0,0 +1 @@
+/Screenshots

luci-theme-edge/Makefile

@@ -0,0 +1,16 @@
+#
+# Copyright (C) 2008-2019 GaryPang
+#
+# This is free software, licensed under the Apache License, Version 2.0 .
+#
+
+include $(TOPDIR)/rules.mk
+
+LUCI_TITLE:=Edge Theme
+LUCI_DEPENDS:=+curl
+
+PKG_LICENSE:=Apache-2.0
+
+include $(TOPDIR)/feeds/luci/luci.mk
+
+# call BuildPackage - OpenWrt buildroot signature

luci-theme-edge/README.md

@@ -0,0 +1,36 @@
+# luci-theme-edge
+
+[1]: https://img.shields.io/badge/license-MIT-brightgreen.svg
+[2]: /LICENSE
+[3]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg
+[4]: https://github.com/https://github.com/kiddin9/luci-theme-edge/pulls
+[5]: https://img.shields.io/badge/Issues-welcome-brightgreen.svg
+[6]: https://github.com/https://github.com/kiddin9/luci-theme-edge/issues/new
+[7]: https://img.shields.io/badge/release-v2.1-blue.svg?
+[10]: https://img.shields.io/badge/Contact-telegram-blue
+[11]: https://t.me/openwrt_nginx
+[![license][1]][2]
+[![PRs Welcome][3]][4]
+[![Issue Welcome][5]][6]
+[![Contact Me][10]][11]
+
+<a href="https://t.me/opwrts" target="_blank">Telegram</a>
+
+A new Luci theme for LEDE/OpenWRT  
+Edge is a clean HTML5 theme for LuCI. It is based on luci-theme-argon Template  
+
+Master branch adapt to official mainline snapshot.
+Luci 18.06: https://github.com/kiddin9/luci-theme-edge/tree/18.06
+
+## Thanks to 
+luci-theme-argon: https://github.com/jerrykuku/luci-theme-argon
+
+![](/Screenshots/1.png)
+![](/Screenshots/2.png)
+![](/Screenshots/3.png)
+![](/Screenshots/4.png)
+![](/Screenshots/5.png)
+<br/>
+<br />
+<br />
+<img src="/Screenshots/6.png" width="550" />

luci-theme-edge/htdocs/luci-static/edge/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";
+}

luci-theme-edge/htdocs/luci-static/edge/glare.svg

@@ -0,0 +1,29 @@
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px"  viewBox="0 0 465.3 465.3" enable-background="new 0 0 465.3 465.3"
+	 xml:space="preserve">
+<defs>
+</defs>
+<g>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="120.4726" y1="232.6669" x2="344.8612" y2="232.6669">
+		<stop  offset="0" style="stop-color:#F57E20"/>
+		<stop  offset="0.5018" style="stop-color:#FFFFFF;stop-opacity:0.6"/>
+		<stop  offset="1" style="stop-color:#F57E20"/>
+	</linearGradient>
+	<polygon fill="url(#SVGID_1_)" points="120.5,344.9 228,228 344.9,120.5 237.4,237.4 	"/>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="120.4726" y1="232.6669" x2="344.8612" y2="232.6669">
+		<stop  offset="0" style="stop-color:#F57E20"/>
+		<stop  offset="0.5018" style="stop-color:#FFFFFF;stop-opacity:0.6"/>
+		<stop  offset="1" style="stop-color:#F57E20"/>
+	</linearGradient>
+	<polygon fill="url(#SVGID_2_)" points="120.5,120.5 237.4,228 344.9,344.9 228,237.4 	"/>
+	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="0" y1="232.6669" x2="465.3338" y2="232.6669">
+		<stop  offset="0" style="stop-color:#A22890"/>
+		<stop  offset="0.5018" style="stop-color:#FFFFFF;stop-opacity:0.6"/>
+		<stop  offset="1" style="stop-color:#A22890"/>
+	</linearGradient>
+	<polygon fill="url(#SVGID_3_)" points="0,232.7 232.7,226 465.3,232.7 232.7,239.3 	"/>
+	<polygon fill="none" points="232.7,465.3 226,232.7 232.7,0 239.3,232.7 	"/>
+</g>
+</svg>

luci-theme-edge/htdocs/luci-static/edge/icons/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#202124" d="m8,10.033663l-6.898535,-6.013274l-1.060688,0.972974l7.959223,6.986249l7.959223,-6.986249l-1.060688,-0.972974l-6.898535,6.013274z"/></svg>

luci-theme-edge/htdocs/luci-static/edge/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>

luci-theme-edge/htdocs/luci-static/edge/js/jquery.min.js

@@ -0,0 +1,2 @@
+
+!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.5.1",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}S.fn=S.prototype={jquery:f,constructor:S,length:0,toArray:function(){return s.call(this)},get:function(e){return null==e?s.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=S.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return S.each(this,e)},map:function(n){return this.pushStack(S.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(s.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},even:function(){return this.pushStack(S.grep(this,function(e,t){return(t+1)%2}))},odd:function(){return this.pushStack(S.grep(this,function(e,t){return t%2}))},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:u,sort:t.sort,splice:t.splice},S.extend=S.fn.extend=function(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{},s++),"object"==typeof a||m(a)||(a={}),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(S.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||S.isPlainObject(n)?n:{},i=!1,a[t]=S.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},S.extend({expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==o.call(e))&&(!(t=r(e))||"function"==typeof(n=v.call(t,"constructor")&&t.constructor)&&a.call(n)===l)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t,n){b(e,{nonce:t&&t.nonce},n)},each:function(e,t){var n,r=0;if(p(e)){for(n=e.length;r<n;r++)if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},makeArray:function(e,t){var n=t||[];return null!=e&&(p(Object(e))?S.merge(n,"string"==typeof e?[e]:e):u.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:i.call(t,e,n)},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,o=e.length,a=!n;i<o;i++)!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){var r,i,o=0,a=[];if(p(e))for(r=e.length;o<r;o++)null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return g(a)},guid:1,support:y}),"function"==typeof Symbol&&(S.fn[Symbol.iterator]=t[Symbol.iterator]),S.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){n["[object "+t+"]"]=t.toLowerCase()});var d=function(n){var e,d,b,o,i,h,f,g,w,u,l,T,C,a,E,v,s,c,y,S="sizzle"+1*new Date,p=n.document,k=0,r=0,m=ue(),x=ue(),A=ue(),N=ue(),D=function(e,t){return e===t&&(l=!0),0},j={}.hasOwnProperty,t=[],q=t.pop,L=t.push,H=t.push,O=t.slice,P=function(e,t){for(var n=0,r=e.length;n<r;n++)if(e[n]===t)return n;return-1},R="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",M="[\\x20\\t\\r\\n\\f]",I="(?:\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\[^\\r\\n\\f]|[\\w-]|[^\0-\\x7f])+",W="\\["+M+"*("+I+")(?:"+M+"*([*^$|!~]?=)"+M+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+I+"))|)"+M+"*\\]",F=":("+I+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+W+")*)|.*)\\)|)",B=new RegExp(M+"+","g"),$=new RegExp("^"+M+"+|((?:^|[^\\\\])(?:\\\\.)*)"+M+"+$","g"),_=new RegExp("^"+M+"*,"+M+"*"),z=new RegExp("^"+M+"*([>+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-lLine truncated

luci-theme-edge/htdocs/luci-static/edge/js/script.js

@@ -0,0 +1,217 @@
+/**
+ *  Edge is a clean HTML5 theme for LuCI. It is based on luci-theme-Argon
+ *
+ *  luci-theme-edge
+ *      Copyright 2020 Kiddin'
+ *
+ *  Have a bug? Please create an issue here on GitHub!
+ *      https://github.com/kiddin9/luci-theme-edge/issues
+ *
+ *  luci-theme-material: 
+ *      Copyright 2015 Lutty Yang <lutty@wcan.in>
+ *		https://github.com/LuttyYang/luci-theme-material/
+ *
+ *  Agron Theme
+ *	    https://demos.creative-tim.com/argon-dashboard/index.html
+ *
+ *  Login background
+ *      https://unsplash.com/
+ *  Font generate by Icomoon<icomoon.io>
+ *
+ *  Licensed to the public under the Apache License 2.0
+ */
+
+document.addEventListener('luci-loaded', function(ev) {
+(function ($) {
+	$(".main > .loading").fadeOut();
+
+	/**
+	 * 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){
+		var luciLocation;
+		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;
+		}
+
+		return ret;
+	}
+
+	/**
+	 * 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);
+	}
+
+	/**
+	 * Sidebar expand
+	 */
+	var showSide = false;
+	$(".showSide").click(function () {
+		if (showSide) {
+			$(".darkMask").stop(true).fadeOut("fast");
+			$(".main-left").stop(true).animate({
+				width: "0"
+			}, "200");
+			$(".main-right").css("overflow-y", "visible");
+			showSide = false;
+		} else {
+			$(".darkMask").stop(true).fadeIn("fast");
+			$(".main-left").stop(true).animate({
+				width: "13rem"
+			}, "200");
+			$(".main-right").css("overflow-y", "hidden");
+			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", "visible");
+		}
+	});
+
+	$(window).resize(function () {
+		if ($(window).width() > 921) {
+			$(".main-left").css("width", "");
+			$(".darkMask").stop(true);
+			$(".darkMask").css("display", "none");
+			showSide = false;
+		}
+	});
+
+	/**
+	 * fix legend position
+	 */
+	$("legend").each(function () {
+		var that = $(this);
+		that.after("<span class='panel-title'>" + that.text() + "</span>");
+	});
+
+	$(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () {
+		var that = $(this);
+		if (that.text().trim() == ""){
+			that.css("display", "none");
+		}
+	});
+
+	$(".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);
+		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;
+		}
+	}
+	
+   var getaudio = $('#player')[0];
+   /* Get the audio from the player (using the player's ID), the [0] is necessary */
+   var audiostatus = 'off';
+   /* Global variable for the audio's status (off or on). It's a bit crude but it works for determining the status. */
+
+
+   $(document).on('click touchend', '.speaker', function() {
+     /* Touchend is necessary for mobile devices, click alone won't work */
+     if (!$('.speaker').hasClass("speakerplay")) {
+       if (audiostatus == 'off') {
+         $('.speaker').addClass('speakerplay');
+         getaudio.load();
+         getaudio.play();
+         audiostatus = 'on';
+         return false;
+       } else if (audiostatus == 'on') {
+         $('.speaker').addClass('speakerplay');
+         getaudio.play()
+       }
+     } else if ($('.speaker').hasClass("speakerplay")) {
+       getaudio.pause();
+       $('.speaker').removeClass('speakerplay');
+       audiostatus = 'on';
+     }
+   });
+
+   $('#player').on('ended', function() {
+     $('.speaker').removeClass('speakerplay');
+     /*When the audio has finished playing, remove the class speakerplay*/
+     audiostatus = 'off';
+     /*Set the status back to off*/
+   });
+	setTimeout(function(){
+$("input[type='checkbox']").filter(function () {
+  return (!$(this).next("label").length)
+}).show();
+	}, 0);
+
+var options = { attributes: true};
+function callback() {
+$("input[type='checkbox']").filter(function () {
+  return (!$(this).next("label").length)
+}).show();
+}
+var mutationObserver = new MutationObserver(callback);
+ mutationObserver.observe($("body")[0], options);
+ $(".cbi-value").has("textarea").css("background","none");
+if(document.body.scrollHeight > window.innerHeight){
+	$(".cbi-page-actions.control-group").addClass("fixed")
+}
+})(jQuery);
+});

luci-theme-edge/htdocs/luci-static/edge/landscape.css

@@ -0,0 +1,76 @@
+
+#CrossFade {
+  background: #fff;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+#CrossFade img {
+  position: absolute;
+  min-width: 100%;
+  min-height: 100%;
+  width:100%;
+  background: #fff;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  opacity: 0;
+  -webkit-transform: scale(1.4) rotate(12deg);
+          transform: scale(1.4) rotate(12deg);
+  -webkit-animation: CrossFade 12s infinite;
+          animation: CrossFade 12s infinite;
+}
+#CrossFade img:nth-child(3) {
+  -webkit-animation-delay: 8s;
+          animation-delay: 8s;
+}
+#CrossFade img:nth-child(2) {
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+#CrossFade img:nth-child(1) {
+  -webkit-animation-delay: 0s;
+          animation-delay: 0s;
+}
+
+@-webkit-keyframes CrossFade {
+  33.3% {
+    opacity: 1;
+    -webkit-transform: scale(1) rotate(0);
+            transform: scale(1) rotate(0);
+  }
+  45% {
+    opacity: 0;
+  }
+}
+@keyframes CrossFade {
+  33.3% {
+    opacity: 1;
+    -webkit-transform: scale(1) rotate(0);
+            transform: scale(1) rotate(0);
+  }
+  45% {
+    opacity: 0;
+  }
+}
+
+.speaker {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARAAAACACAYAAAG0HAZ0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEFERTNEQzA3QTMxMTFFMzgzNTFFRDRCMzk1MDA0NUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEFERTNEQzE3QTMxMTFFMzgzNTFFRDRCMzk1MDA0NUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowQURFM0RCRTdBMzExMUUzODM1MUVENEIzOTUwMDQ1QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQURFM0RCRjdBMzExMUUzODM1MUVENEIzOTUwMDQ1QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvEtsecAABjVSURBVHjaYvz//z/D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 truncated
+  background-repeat: no-repeat;
+  background-size: 200%;
+  background-position: 100% 0;
+  height: 34px;
+  width: 28px;
+  cursor: pointer;
+  display: block;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: block;
+  z-index:9999;
+  opacity:.5;
+}
+
+.speakerplay {
+  background-position: 0 0;
+}

luci-theme-edge/htdocs/luci-static/edge/sun.svg

@@ -0,0 +1,14 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 111.7 111.7" enable-background="new 0 0 111.7 111.7" xml:space="preserve" id="sun">
+<g>
+  <g>
+    <circle opacity="5.000000e-02" fill="#F9A149" cx="55.9" cy="55.9" r="55.9"/>
+    <circle opacity="0.2083" fill="#F9A854" cx="55.9" cy="55.9" r="48.7"/>
+    <circle opacity="0.3667" fill="#FAAE5E" cx="55.9" cy="55.9" r="41.6"/>
+    <circle opacity="0.525" fill="#FAB567" cx="55.9" cy="55.9" r="34.4"/>
+    <circle opacity="0.6833" fill="#FABC71" cx="55.9" cy="55.9" r="27.3"/>
+    <circle opacity="0.8417" fill="#FBC27A" cx="55.9" cy="55.9" r="20.1"/>
+    <circle fill="#FBC984" cx="55.9" cy="55.9" r="13"/>
+  </g>
+  <circle fill="#FFFFFF" cx="55.9" cy="55.9" r="4.6"/>
+</g>
+</svg>

luci-theme-edge/htdocs/luci-static/edge/waves.css

@@ -0,0 +1,135 @@
+/*!
+ * Waves v0.7.6
+ * http://fian.my.id/Waves 
+ * 
+ * Copyright 2014-2018 Alfiana E. Sibuea and other contributors 
+ * Released under the MIT license 
+ * https://github.com/fians/Waves/blob/master/LICENSE */
+.waves-effect {
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.waves-effect .waves-ripple {
+  position: absolute;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+  margin-top: -50px;
+  margin-left: -50px;
+  opacity: 0;
+  background: rgba(0, 0, 0, 0.2);
+  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: -o-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: -moz-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  -webkit-transition: all 0.5s ease-out;
+  -moz-transition: all 0.5s ease-out;
+  -o-transition: all 0.5s ease-out;
+  transition: all 0.5s ease-out;
+  -webkit-transition-property: -webkit-transform, opacity;
+  -moz-transition-property: -moz-transform, opacity;
+  -o-transition-property: -o-transform, opacity;
+  transition-property: transform, opacity;
+  -webkit-transform: scale(0) translate(0, 0);
+  -moz-transform: scale(0) translate(0, 0);
+  -ms-transform: scale(0) translate(0, 0);
+  -o-transform: scale(0) translate(0, 0);
+  transform: scale(0) translate(0, 0);
+  pointer-events: none;
+}
+.waves-effect.waves-light .waves-ripple {
+  background: rgba(255, 255, 255, 0.4);
+  background: -webkit-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: -o-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: -moz-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+}
+.waves-effect.waves-classic .waves-ripple {
+  background: rgba(0, 0, 0, 0.2);
+}
+.waves-effect.waves-classic.waves-light .waves-ripple {
+  background: rgba(255, 255, 255, 0.4);
+}
+.waves-notransition {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
+}
+.waves-button,
+.waves-circle {
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
+}
+.waves-button,
+.waves-button:hover,
+.waves-button:visited,
+.waves-button-input {
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  color: inherit;
+  background-color: rgba(0, 0, 0, 0);
+  font-size: 1em;
+  line-height: 1em;
+  text-align: center;
+  text-decoration: none;
+  z-index: 1;
+}
+.waves-button {
+  padding: 0.85em 1.1em;
+  border-radius: 0.2em;
+}
+.waves-button-input {
+  margin: 0;
+  padding: 0.85em 1.1em;
+}
+.waves-input-wrapper {
+  border-radius: 0.2em;
+  vertical-align: bottom;
+}
+.waves-input-wrapper.waves-button {
+  padding: 0;
+}
+.waves-input-wrapper .waves-button-input {
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+.waves-circle {
+  text-align: center;
+  width: 2.5em;
+  height: 2.5em;
+  line-height: 2.5em;
+  border-radius: 50%;
+}
+.waves-float {
+  -webkit-mask-image: none;
+  -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
+  -webkit-transition: all 300ms;
+  -moz-transition: all 300ms;
+  -o-transition: all 300ms;
+  transition: all 300ms;
+}
+.waves-float:active {
+  -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
+}
+.waves-block {
+  display: block;
+}

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

@@ -0,0 +1,158 @@
+'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 = '',
+			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);
+
+			if (isActive)
+				this.renderMainMenu(children[i], children[i].name);
+		}
+
+		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('a.showSide')
+			.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
+		document.querySelector('.darkMask')
+			.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
+	},
+
+	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' : 'food';
+			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) {
+			document.querySelector('#mainmenu').appendChild(ul);
+			document.querySelector('#mainmenu').style.display = '';
+
+		}
+		return ul;
+	},
+
+	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 showside = document.querySelector('a.showSide'),
+			sidebar = document.querySelector('#mainmenu'),
+			darkmask = document.querySelector('.darkMask'),
+			scrollbar = document.querySelector('.main-right');
+
+		if (showside.classList.contains('active')) {
+			showside.classList.remove('active');
+			sidebar.classList.remove('active');
+			scrollbar.classList.remove('active');
+			darkmask.classList.remove('active');
+		}
+		else {
+			showside.classList.add('active');
+			sidebar.classList.add('active');
+			scrollbar.classList.add('active');
+			darkmask.classList.add('active');
+		}
+	}
+});

luci-theme-edge/luasrc/view/header_login.htm

@@ -0,0 +1,38 @@
+<%#
+ 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.
+-%>
+
+<%
+	if not luci.dispatcher.context.template_header_sent then
+		include("themes/" .. theme .. "/header_login")
+		luci.dispatcher.context.template_header_sent = true
+	end
+
+	local applyconf = luci.config and luci.config.apply
+%>
+
+<script type="text/javascript" src="<%=resource%>/promis.min.js?v=git-20.186.82389-282dbf8"></script>
+<script type="text/javascript" src="<%=resource%>/luci.js?v=git-20.186.82389-282dbf8"></script>
+<script type="text/javascript">
+	L = new LuCI(<%= luci.http.write_json({
+		token          = token,
+		media          = media,
+		resource       = resource,
+		scriptname     = luci.http.getenv("SCRIPT_NAME"),
+		pathinfo       = luci.http.getenv("PATH_INFO"),
+		documentroot   = luci.http.getenv("DOCUMENT_ROOT"),
+		requestpath    = luci.dispatcher.context.requestpath,
+		dispatchpath   = luci.dispatcher.context.path,
+		pollinterval   = luci.config.main.pollinterval or 5,
+		ubuspath       = luci.config.main.ubuspath or '/ubus/',
+		sessionid      = luci.dispatcher.context.authsession,
+		nodespec       = luci.dispatcher.context.dispatched,
+		apply_rollback = math.max(applyconf and applyconf.rollback or 30, 30),
+		apply_holdoff  = math.max(applyconf and applyconf.holdoff or 4, 1),
+		apply_timeout  = math.max(applyconf and applyconf.timeout or 5, 1),
+		apply_display  = math.max(applyconf and applyconf.display or 1.5, 1),
+		rollback_token = rollback_token
+	}) %>);
+</script>

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

@@ -0,0 +1,36 @@
+<%#
+	edge is a clean HTML5 theme for LuCI. It is based on luci-theme-material edge Template
+
+	luci-theme-edge
+	Copyright 2019 Jerrykuku <jerrykuku@qq.com>
+
+	Have a bug? Please create an issue here on GitHub!
+	https://github.com/jerrykuku/luci-theme-edge/issues
+
+	luci-theme-material: 
+	Copyright 2015 Lutty Yang <lutty@wcan.in>
+	
+	Agron Theme
+	https://demos.creative-tim.com/edge-dashboard/index.html 
+
+	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 %>
+	<ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul>
+	</footer>
+	</div>
+</div>
+<script>
+	// thanks for Jo-Philipp Wich <jow@openwrt.org>
+	var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
+</script>
+<script type="text/javascript">L.require('menu-edge')</script>
+<script src="<%=media%>/js/script.js?v=2.1"></script>
+     
+</body>
+</html>
+

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

@@ -0,0 +1,139 @@
+<%#
+	edge is a clean HTML5 theme for LuCI. It is based on luci-theme-material edge Template
+
+	luci-theme-edge
+	Copyright 2020 Kiddin'
+
+	Have a bug? Please create an issue here on GitHub!
+	https://github.com/jerrykuku/luci-theme-edge/issues 
+
+	luci-theme-material: 
+	Copyright 2015 Lutty Yang <lutty@wcan.in>
+	
+	Agron Theme
+	https://demos.creative-tim.com/edge-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 boardinfo = util.ubus("system", "board")
+
+	local node = disp.context.dispatched
+    
+    local fs	= require "nixio.fs"
+	local nutil = require "nixio.util"
+    
+    
+    
+	-- send as HTML5
+	http.prepare_content("text/html")
+    
+    math.randomseed(os.time())
+
+-%>
+<!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="apple-mobile-web-app-capable" content="yes">
+	<meta name="mobile-web-app-capable" content="yes">
+	<meta name="theme-color" content="#09c">
+	<meta name="msapplication-tap-highlight" content="no">
+	<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%>/cascade.css">
+	<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="<%=url('admin/translations', luci.i18n.context.lang)%>"></script>
+	<script src="<%=resource%>/cbi.js"></script>
+	<script src="<%=resource%>/luci.js"></script>
+	<script src="<%=media%>/js/jquery.min.js"></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="<%= table.concat(disp.context.requestpath, "-") %>">
+
+	<div class="main">
+		<div style="" class="loading">
+			<div class="sk-folding-cube">
+				<div class="sk-cube1 sk-cube"></div>
+				<div class="sk-cube2 sk-cube"></div>
+				<div class="sk-cube4 sk-cube"></div>
+				<div class="sk-cube3 sk-cube"></div>
+			</div>
+		</div>
+		<div class="main-left" id="mainmenu" style="display:none">
+			<div class="sidenav-header d-flex align-items-center">
+				<a class="brand" href="#"><img src="<%=media%>/logo.png"></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>
+		</div>
+		<div class="main-right">
+		<hr/>
+		<div id="indicators" class="pull-right"></div>
+			<header class="bg-primary">
+				<div class="fill">
+					<div class="container">
+						<a class="showSide"></a>
+						<a class="brand" href="#"><img src="<%=media%>/logo.png"></a>
+
+					</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 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 -%>
+
+					<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 id="tabmenu" style="display:none"></div>

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

@@ -0,0 +1,120 @@
+<%#
+	Edge is a clean HTML5 theme for LuCI. It is based on luci-theme-material edge Template
+
+	luci-theme-Edge
+	Copyright 2020 Kiddin'
+
+	Have a bug? Please create an issue here on GitHub!
+	https://github.com/kiddin9/luci-theme-edge/issues 
+
+	luci-theme-Argon: 
+	Copyright 2019 Jerrykuku <jerrykuku@qq.com>
+	
+	Edge Theme
+	https://demos.creative-tim.com/edge-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 boardinfo = util.ubus("system", "board")
+
+	local node = disp.context.dispatched
+    
+    local fs	= require "nixio.fs"
+	local nutil = require "nixio.util"
+    
+    
+    
+	-- send as HTML5
+	http.prepare_content("text/html")
+    
+    math.randomseed(os.time())
+    
+
+-%>
+<!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="apple-mobile-web-app-capable" content="yes">
+	<meta name="mobile-web-app-capable" content="yes">
+	<meta name="theme-color" content="#09c">
+	<meta name="msapplication-tap-highlight" content="no">
+	<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%>/landscape.css">
+	<link rel="stylesheet" href="<%=media%>/cascade.css">
+	<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="<%=url('admin/translations', luci.i18n.context.lang)%>"></script>
+	<script src="<%=resource%>/cbi.js"></script>
+	<script src="<%=resource%>/luci.js"></script>
+	<script src="<%=media%>/js/jquery.min.js"></script>
+	<script type="text/javascript">//<![CDATA[
+		(function () {
+			function get_children(node) {
+				var children = [];
+
+				for (var k in node.children) {
+					if (!node.children.hasOwnProperty(k))
+						continue;
+
+					if (!node.children[k].satisfied)
+						continue;
+
+					if (!node.children[k].hasOwnProperty('title'))
+						continue;
+
+					children.push(Object.assign(node.children[k], { name: k }));
+				}
+
+				return children.sort(function (a, b) {
+					return ((a.order || 1000) - (b.order || 1000));
+				});
+			}
+
+		document.addEventListener('luci-loaded', function (ev) {
+			var tree = <%= luci.http.write_json(luci.dispatcher.menu_json() or { }) %>,
+			node = tree,
+			url = '';
+
+		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];
+			}
+
+		}
+		});
+		}) ();
+	//]]></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="<%= table.concat(disp.context.requestpath, "-") %>">
+
+<p class="chromeframe">您使用的浏览器过于老旧,
+请使用<a href="https://www.microsoft.com/zh-cn/edge"> Edge </a>, <a href="https://www.mozilla.org/zh-CN/firefox/new/"> Firefox </a>等高级浏览器.</a></p>

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

@@ -0,0 +1,115 @@
+<%#
+ Copyright 2008 Steven Barth <steven@midlink.org>
+ Copyright 2008-2012 Jo-Philipp Wich <jow@openwrt.org>
+ Licensed to the public under the Apache License 2.0.
+-%>
+
+<%+header_login%>
+
+<div id="CrossFade"><img src="<%=media%>/background/1.jpg" alt="img"/><img src="<%=media%>/background/2.jpg" alt="img"/><img src="<%=media%>/background/3.jpg" alt="img"/>
+</div>
+
+<div class="speaker"></div>
+<audio loop id="player" autoplay type="audio/mpeg"></audio>
+<script>
+setTimeout(function(){
+var sound = document.getElementById("player");
+sound.setAttribute('src','https://cdn.jsdelivr.net/gh/kkkidding/custom2@master/audio.ogg');
+},0);
+     setTimeout(function(){
+   if (!$('#player')[0].paused) {
+         $('.speaker').addClass('speakerplay');
+       }
+}, 1200); 
+if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
+	$("audio").prop("autoplay", false);
+	$("audio")[0].load();
+};
+</script>
+
+<!-- partial -->
+<div class="main">
+		<div style="" class="loading">
+			<div class="sk-folding-cube">
+				<div class="sk-cube1 sk-cube"></div>
+				<div class="sk-cube2 sk-cube"></div>
+				<div class="sk-cube4 sk-cube"></div>
+				<div class="sk-cube3 sk-cube"></div>
+			</div>
+		</div>
+	
+<div class="main-right">
+	<div class="darkMask"></div>
+			<div id="maincontent">
+					<%- 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 and enable SSH.%>
+						</p>
+					</div>
+						<%- end -%>
+							<%- if fuser then %>
+		<div class="alert-message warning">
+			<p><%:Invalid username and/or password! Please try again.%></p>
+		</div>
+	<% end -%>
+						<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="container">
+		
+
+
+<form method="post" action="<%=pcdata(FULL_REQUEST_URI)%>">
+
+
+	<div class="cbi-map">
+		<h2 name="content"><img src="<%=media%>/logo.png" width="200"></h2>
+		<div class="cbi-map-descr">
+			<%:Have a nice day. ✨%>
+		</div>
+		<div class="cbi-section"><div class="cbi-section-node">
+			<div class="cbi-value">
+				<label class="cbi-value-title"><%:Username%></label>
+				<div class="cbi-value-field">
+					<input class="cbi-input-text" type="text" name="luci_username" placeholder="User name" value="<%=duser%>" />
+				</div>
+			</div>
+			<div class="cbi-value cbi-value-last">
+				<label class="cbi-value-title"><%:Password%></label>
+				<div class="cbi-value-field">
+					<input class="cbi-input-text" type="password" placeholder="Password" name="luci_password" />
+				</div>
+			</div>
+		</div></div>
+	</div>
+
+	<div class="cbi-page-actions">
+		<input type="submit" value="<%:Login%>" class="btn cbi-button cbi-button-apply" />
+		<input type="reset" value="<%:Reset%>" class="btn cbi-button cbi-button-reset" />
+	</div>
+</form>
+
+<script>
+ if (!!window.ActiveXObject || "ActiveXObject" in window){
+  $('.chromeframe').show();
+  $('.landscape').hide();
+  $('.main').hide();
+  }
+</script>
+
+			<script type="text/javascript">//<![CDATA[
+				var input = document.getElementsByName('luci_password')[0];
+				if (input)
+					input.focus();
+			//]]></script>
+
+<%+footer%>
+<%
+io.popen("(curl -k -L \"$(curl -s https://instant.unsplash.com | grep -oE '\"raw\":\".*?\",\"full\"'| grep -o 'https://.*,' | sed 's/\",//g')q=80\&w=1680\" -o /www/luci-static/edge/background/1.jpg >/dev/null 2>&1) &")
+io.popen("(curl -k -L \"$(curl -s https://instant.unsplash.com | grep -oE '\"raw\":\".*?\",\"full\"'| grep -o 'https://.*,' | sed 's/\",//g')q=80\&w=1680\" -o /www/luci-static/edge/background/2.jpg >/dev/null 2>&1) &")
+io.popen("(curl -k -L \"$(curl -s https://instant.unsplash.com | grep -oE '\"raw\":\".*?\",\"full\"'| grep -o 'https://.*,' | sed 's/\",//g')q=80\&w=1680\" -o /www/luci-static/edge/background/3.jpg >/dev/null 2>&1) &")
+%>

luci-theme-edge/root/etc/uci-defaults/30_luci-theme-edge

@@ -0,0 +1,7 @@
+#!/bin/sh
+uci batch <<-EOF
+	set luci.themes.Edge=/luci-static/edge
+	set luci.main.mediaurlbase=/luci-static/edge
+	commit luci
+EOF
+exit 0