同步更新

luci-app-argon-config/Makefile

@@ -0,0 +1,20 @@
+include $(TOPDIR)/rules.mk
+
+PKG_NAME:=luci-app-argon-config
+PKG_VERSION:=1.0
+PKG_RELEASE:=20230608
+
+PKG_MAINTAINER:=jerrykuku <jerrykuku@qq.com>
+
+LUCI_TITLE:=LuCI app for Argon theme configuration
+LUCI_PKGARCH:=all
+LUCI_DEPENDS:=+luci-theme-argon
+
+define Package/$(PKG_NAME)/conffiles
+/etc/config/argon
+/www/luci-static/argon/background
+endef
+
+include $(TOPDIR)/feeds/luci/luci.mk
+
+# call BuildPackage - OpenWrt buildroot signature

luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js

@@ -0,0 +1,244 @@
+'use strict';
+'require form';
+'require fs';
+'require rpc';
+'require uci';
+'require ui';
+'require view';
+
+var callAvailSpace = rpc.declare({
+	object: 'luci.argon',
+	method: 'avail'
+});
+
+var callRemoveArgon = rpc.declare({
+	object: 'luci.argon',
+	method: 'remove',
+	params: ['filename'],
+	expect: { '': {} }
+});
+
+var callRenameArgon = rpc.declare({
+	object: 'luci.argon',
+	method: 'rename',
+	params: ['newname'],
+	expect: { '': {} }
+});
+
+var bg_path = '/www/luci-static/argon/background/';
+
+var trans_set = [0, 0.1, 0.2, 0.3, 0.4,
+	0.5, 0.6, 0.7, 0.8, 0.9, 1 ];
+
+function createColorPicker(textInput) {
+	const colorPicker = document.createElement('input');
+	colorPicker.type = 'color';
+	colorPicker.value = textInput.value;
+	colorPicker.style.width = '24px';
+	colorPicker.style.height = '24px';
+	colorPicker.style.padding = '0px';
+	colorPicker.style.marginLeft = '5px';
+	colorPicker.style.borderRadius = '4px';
+	colorPicker.style.border = '1px solid #d9d9d9';
+	textInput.parentNode.insertBefore(colorPicker, textInput.nextSibling);
+	colorPicker.addEventListener('input', function() {
+		textInput.value = colorPicker.value;
+	});
+	textInput.addEventListener('input', function() {
+		colorPicker.value = textInput.value;
+	});
+}
+
+return view.extend({
+	load: function() {
+		return Promise.all([
+			uci.load('argon'),
+			L.resolveDefault(callAvailSpace(), {}),
+			L.resolveDefault(fs.list(bg_path), {})
+		]);
+	},
+
+	render: function(data) {
+		var m, s, o;
+
+		m = new form.Map('argon', _('Argon theme configuration'),
+			_('Here you can set the blur and transparency of the login page of argon theme, and manage the background pictures and videos. Chrome is recommended.'));
+
+		s = m.section(form.TypedSection, 'global', _('Theme configuration'));
+		s.addremove = false;
+		s.anonymous = true;
+
+		o = s.option(form.ListValue, 'online_wallpaper', _('Wallpaper source'));
+		o.value('none', _('Built-in'));
+		o.value('bing', _('Bing'));
+		o.value('unsplash', _('Unsplash'));
+		o.default = 'bing';
+		o.rmempty = false;
+
+		o = s.option(form.ListValue, 'mode', _('Theme mode'));
+		o.value('normal', _('Follow system'));
+		o.value('light', _('Light mode'));
+		o.value('dark', _('Dark mode'));
+		o.default = 'normal';
+		o.rmempty = false;
+
+		o = s.option(form.ListValue, 'font_weight', _('Font'));
+		o.value('normal', _('Normal'));
+		o.value('600', _('Bold'));
+		o.default = '600';
+		o.rmempty = false;
+
+		o = s.option(form.Value, 'primary', _('[Light mode] Primary Color'), _('A HEX color (default: #5e72e4).'))
+		o.default = '#5e72e4';
+		o.rmempty = false;
+		o.validate = function(section_id, value) {
+			if (section_id)
+				return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value) ||
+					_('Expecting: %s').format(_('valid HEX color value'));
+			return true;
+		};
+		o.render = function(section_id, option_index, cfgvalue) {
+			var el = form.Value.prototype.render.apply(this, arguments);
+			setTimeout(function() {
+				const textInput = document.querySelector('[id^="widget.cbid.argon."][id$=".primary"]');
+				createColorPicker(textInput);
+			}, 0);
+			return el;
+		};
+
+		o = s.option(form.ListValue, 'transparency', _('[Light mode] Transparency'),
+			_('0 transparent - 1 opaque (suggest: transparent: 0 or translucent preset: 0.5).'));
+		for (var i of trans_set)
+			o.value(i);
+		o.default = '0.5';
+		o.rmempty = false;
+
+		o = s.option(form.Value, 'blur', _('[Light mode] Frosted Glass Radius'),
+			_('Larger value will more blurred (suggest: clear: 1 or blur preset: 10).'));
+		o.datatype = 'ufloat';
+		o.default = '10';
+		o.rmempty = false;
+
+		o = s.option(form.Value, 'progressbar_font', _('[Light mode] Progress bar Font Color'), _('A HEX color (default: #2e2b60).'))
+		o.default = '#2e2b60';
+		o.rmempty = false;
+		o.validate = function(section_id, value) {
+			if (section_id)
+				return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value) ||
+					_('Expecting: %s').format(_('valid HEX color value'));
+			return true;
+		};
+		o.render = function(section_id, option_index, cfgvalue) {
+			var el = form.Value.prototype.render.apply(this, arguments);
+			setTimeout(function() {
+				const textInput = document.querySelector('[id^="widget.cbid.argon."][id$=".progressbar_font"]');
+				createColorPicker(textInput);
+			}, 0);
+			return el;
+		};
+
+		o = s.option(form.Value, 'dark_primary', _('[Dark mode] Primary Color'),
+			_('A HEX Color (default: #483d8b).'))
+		o.default = '#483d8b';
+		o.rmempty = false;
+		o.validate = function(section_id, value) {
+			if (section_id)
+				return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value) ||
+					_('Expecting: %s').format(_('valid HEX color value'));
+			return true;
+		};
+		o.render = function(section_id, option_index, cfgvalue) {
+			var el = form.Value.prototype.render.apply(this, arguments);
+			setTimeout(function() {
+				const textInput = document.querySelector('[id^="widget.cbid.argon."][id$=".dark_primary"]');
+				createColorPicker(textInput);
+			}, 0);
+			return el;
+		};
+
+		o = s.option(form.ListValue, 'transparency_dark', _('[Dark mode] Transparency'),
+			_('0 transparent - 1 opaque (suggest: black translucent preset: 0.5).'));
+		for (var i of trans_set)
+			o.value(i);
+		o.default = '0.5';
+		o.rmempty = false;
+
+		o = s.option(form.Value, 'blur_dark', _('[Dark mode] Frosted Glass Radius'),
+			_('Larger value will more blurred (suggest: clear: 1 or blur preset: 10).'))
+		o.datatype = 'ufloat';
+		o.default = '10';
+		o.rmempty = false;
+
+		o = s.option(form.Button, '_save', _('Save settings'));
+		o.inputstyle = 'apply';
+		o.inputtitle = _('Save current settings');
+		o.onclick = function() {
+			ui.changes.apply(true);
+			return this.map.save(null, true);
+		}
+
+		s = m.section(form.TypedSection, null, _('Upload background (available space: %1024.2mB)')
+			.format(data[1].avail * 1024),
+			_('You can upload files such as gif/jpg/mp4/png/webm/webp files, to change the login page background.'));
+		s.addremove = false;
+		s.anonymous = true;
+
+		o = s.option(form.Button, '_upload_bg', _('Upload background'),
+			_('Files will be uploaded to <code>%s</code>.').format(bg_path));
+		o.inputstyle = 'action';
+		o.inputtitle = _('Upload...');
+		o.onclick = function(ev, section_id) {
+			var file = '/tmp/argon_background.tmp';
+			return ui.uploadFile(file, ev.target).then(function(res) {
+				return L.resolveDefault(callRenameArgon(res.name), {}).then(function(ret) {
+					if (ret.result === 0)
+						return location.reload();
+					else {
+						ui.addNotification(null, E('p', _('Failed to upload file: %s.').format(res.name)));
+						return L.resolveDefault(fs.remove(file), {});
+					}
+				});
+			})
+			.catch(function(e) { ui.addNotification(null, E('p', e.message)); });
+		};
+		o.modalonly = true;
+
+		s = m.section(form.TableSection);
+		s.render = function() {
+			var tbl = E('table', { 'class': 'table cbi-section-table' },
+				E('tr', { 'class': 'tr table-titles' }, [
+					E('th', { 'class': 'th' }, [ _('Filename') ]),
+					E('th', { 'class': 'th' }, [ _('Modified date') ]),
+					E('th', { 'class': 'th' }, [ _('Size') ]),
+					E('th', { 'class': 'th' }, [ _('Action') ])
+				])
+			);
+
+			cbi_update_table(tbl, data[2].map(L.bind(function(file) {
+				return [
+					file.name,
+					new Date(file.mtime * 1000).toLocaleString(),
+					String.format('%1024.2mB', file.size),
+					E('button', {
+						'class': 'btn cbi-button cbi-button-remove',
+						'click': ui.createHandlerFn(this, function() {
+							return L.resolveDefault(callRemoveArgon(file.name), {})
+							.then(function() { return location.reload(); });
+						})
+					}, [ _('Delete') ])
+				];
+			}, this)), E('em', _('No files found.')));
+
+			return E('div', { 'class': 'cbi-map', 'id': 'cbi-filelist' }, [
+				E('h3', _('Background file list')),
+				tbl
+			]);
+		};
+
+		return m.render();
+	},
+
+	handleSaveApply: null,
+	handleSave: null,
+	handleReset: null
+});

luci-app-argon-config/po/templates/argon-config.pot

@@ -0,0 +1,179 @@
+msgid ""
+msgstr "Content-Type: text/plain; charset=UTF-8"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:102
+msgid "0 transparent - 1 opaque (suggest: black translucent preset: 0.5)."
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:78
+msgid ""
+"0 transparent - 1 opaque (suggest: transparent: 0 or translucent preset: "
+"0.5)."
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:91
+msgid "A HEX Color (default: #483d8b)."
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:67
+msgid "A HEX color (default: #5e72e4)."
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:155
+msgid "Action"
+msgstr ""
+
+#: applications/luci-app-argon-config/root/usr/share/luci/menu.d/luci-app-argon-config.json:3
+msgid "Argon Config"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:45
+msgid "Argon theme configuration"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:175
+msgid "Background file list"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:54
+msgid "Bing"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:53
+msgid "Built-in"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:63
+msgid "Dark mode"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:170
+msgid "Delete"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:73
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:97
+msgid "Expecting: %s"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:139
+msgid "Failed to upload file: %s."
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:152
+msgid "Filename"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:129
+msgid "Files will be uploaded to <code>%s</code>."
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:61
+msgid "Follow system"
+msgstr ""
+
+#: applications/luci-app-argon-config/root/usr/share/rpcd/acl.d/luci-app-argon-config.json:3
+msgid "Grant UCI access for luci-app-argon-config"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:46
+msgid ""
+"Here you can set the blur and transparency of the login page of argon theme, "
+"and manage the background pictures and videos. Chrome is recommended."
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:85
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:109
+msgid "Larger value will more blurred (suggest: clear: 1 or blur preset: 10)."
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:62
+msgid "Light mode"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:153
+msgid "Modified date"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:172
+msgid "No files found."
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:116
+msgid "Save current settings"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:114
+msgid "Save settings"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:154
+msgid "Size"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:48
+msgid "Theme configuration"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:60
+msgid "Theme mode"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:55
+msgid "Unsplash"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:128
+msgid "Upload background"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:122
+msgid "Upload background (available space: %1024.2mB)"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:131
+msgid "Upload..."
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:56
+msgid "Wallhaven"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:52
+msgid "Wallpaper source"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:124
+msgid ""
+"You can upload files such as gif/jpg/mp4/png/webm/webp files, to change the "
+"login page background."
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:108
+msgid "[Dark mode] Frosted Glass Radius"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:90
+msgid "[Dark mode] Primary Color"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:101
+msgid "[Dark mode] Transparency"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:84
+msgid "[Light mode] Frosted Glass Radius"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:67
+msgid "[Light mode] Primary Color"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:77
+msgid "[Light mode] Transparency"
+msgstr ""
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:73
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:97
+msgid "valid HEX color value"
+msgstr ""

luci-app-argon-config/po/zh_Hans/argon-config.po

@@ -0,0 +1,213 @@
+msgid ""
+msgstr ""
+"Content-Type: text/plain; charset=UTF-8\n"
+"Project-Id-Version: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: dingpengyu <jerrykuku@gmail.com>\n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Language: zh_CN\n"
+"X-Generator: Poedit 2.3.1\n"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:102
+msgid "0 transparent - 1 opaque (suggest: black translucent preset: 0.5)."
+msgstr "0 最透明 - 1 不透明（建议：黑色半透明 0.5）"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:78
+msgid ""
+"0 transparent - 1 opaque (suggest: transparent: 0 or translucent preset: "
+"0.5)."
+msgstr "0 最透明 - 1 不透明（建议: 透明 0 或 半透明预设 0.5）。"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:91
+msgid "A HEX Color (default: #483d8b)."
+msgstr "十六进制颜色值（预设为：#483d8b）。"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:67
+msgid "A HEX color (default: #5e72e4)."
+msgstr "十六进制颜色值（预设为：#5e72e4）。"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:155
+msgid "Action"
+msgstr "操作"
+
+#: applications/luci-app-argon-config/root/usr/share/luci/menu.d/luci-app-argon-config.json:3
+msgid "Argon Config"
+msgstr "主题设置"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:45
+msgid "Argon theme configuration"
+msgstr "Argon 主题设置"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:175
+msgid "Background file list"
+msgstr "背景文件列表"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:54
+msgid "Bing"
+msgstr "Bing"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:53
+msgid "Built-in"
+msgstr "内建"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:63
+msgid "Dark mode"
+msgstr "暗黑模式"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:170
+msgid "Delete"
+msgstr "删除"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:73
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:97
+msgid "Expecting: %s"
+msgstr "请输入：%s"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:139
+msgid "Failed to upload file: %s."
+msgstr "上传文件失败：%s。"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:152
+msgid "Filename"
+msgstr "文件名"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:129
+msgid "Files will be uploaded to <code>%s</code>."
+msgstr "文件将被上传至<code>%s</code>。"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:61
+msgid "Follow system"
+msgstr "跟随系统"
+
+#: applications/luci-app-argon-config/root/usr/share/rpcd/acl.d/luci-app-argon-config.json:3
+msgid "Grant UCI access for luci-app-argon-config"
+msgstr "授予 luci-app-argon-config 访问 UCI 配置的权限"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:46
+msgid ""
+"Here you can set the blur and transparency of the login page of argon theme, "
+"and manage the background pictures and videos. Chrome is recommended."
+msgstr ""
+"在这里你可以设置argon 主题的登录页面的模糊和透明度，并管理背景图片与视频。推"
+"荐使用 Chrome。"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:85
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:109
+msgid "Larger value will more blurred (suggest: clear: 1 or blur preset: 10)."
+msgstr "值越大越模糊（建议：清透 1 或 模糊预设 10）"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:62
+msgid "Light mode"
+msgstr "亮色模式"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:153
+msgid "Modified date"
+msgstr "修改时间"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:172
+msgid "No files found."
+msgstr "没有找到文件。"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:116
+msgid "Save current settings"
+msgstr "保存当前设置"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:114
+msgid "Save settings"
+msgstr "保存设置"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:154
+msgid "Size"
+msgstr "大小"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:48
+msgid "Theme configuration"
+msgstr "主题配置"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:60
+msgid "Theme mode"
+msgstr "主题模式"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:55
+msgid "Unsplash"
+msgstr "Unsplash"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:128
+msgid "Upload background"
+msgstr "上传背景"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:122
+msgid "Upload background (available space: %1024.2mB)"
+msgstr "上传背景（可用空间：%1024.2mB）"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:131
+msgid "Upload..."
+msgstr "上传..."
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:56
+msgid "Wallhaven"
+msgstr "Wallhaven"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:52
+msgid "Wallpaper source"
+msgstr "壁纸来源"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:124
+msgid ""
+"You can upload files such as gif/jpg/mp4/png/webm/webp files, to change the "
+"login page background."
+msgstr ""
+"你可以上传 gif/jpg/mp4/png/webm/webp 等格式的文件，以创建自己喜欢的登录界面。"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:108
+msgid "[Dark mode] Frosted Glass Radius"
+msgstr "[暗色模式] 毛玻璃模糊半径"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:90
+msgid "[Dark mode] Primary Color"
+msgstr "[暗色模式] 主色调"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:101
+msgid "[Dark mode] Transparency"
+msgstr "[暗色模式] 透明度"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:84
+msgid "[Light mode] Frosted Glass Radius"
+msgstr "[亮色模式] 毛玻璃模糊半径"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:67
+msgid "[Light mode] Primary Color"
+msgstr "[亮色模式] 主色调"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:77
+msgid "[Light mode] Transparency"
+msgstr "[亮色模式] 透明度"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:73
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:97
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:166
+msgid "valid HEX color value"
+msgstr "有效十六进制颜色值"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:160
+msgid "[Light mode] Progress bar Font Color"
+msgstr "[亮色模式] 进度条字体颜色"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:160
+msgid "A HEX color (default: #2e2b60)."
+msgstr "十六进制颜色值（预设为：#2e2b60）。"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:86
+msgid "Font"
+msgstr "字体"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:87
+msgid "Normal"
+msgstr "正常"
+
+#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:88
+msgid "Bold"
+msgstr "粗体"

luci-app-argon-config/root/etc/config/argon

@@ -0,0 +1,12 @@
+config global
+	option primary '#31a1a1'
+	option dark_primary '#31a1a1'
+	option progressbar_font '#2e2b60'
+	option font_weight '600'
+	option blur '10'
+	option blur_dark '10'
+	option transparency '0.5'
+	option transparency_dark '0.5'
+	option mode 'normal'
+	option online_wallpaper 'none'
+

luci-app-argon-config/root/etc/uci-defaults/luci-argon-config

@@ -0,0 +1,14 @@
+#!/bin/sh
+
+bing_background="$(uci -q get "argon.@global[0].bing_background")"
+[ -n "$bing_background" ] || exit 0
+
+if [ "$bing_background" = "1" ]; then
+	uci -q set "argon.@global[0].online_wallpaper"="bing"
+else
+	uci -q set "argon.@global[0].online_wallpaper"="none"
+fi
+uci -q delete "argon.@global[0].bing_background"
+uci -q commit "argon"
+
+exit 0

luci-app-argon-config/root/usr/libexec/rpcd/luci.argon

@@ -0,0 +1,65 @@
+#!/bin/sh
+
+. /lib/functions.sh
+. /usr/share/libubox/jshn.sh
+
+readonly bg_path="/www/luci-static/argon/background"
+readonly tmp_path="/tmp/argon_background.tmp"
+
+case "$1" in
+"list")
+	json_init
+	json_add_object "avail"
+	json_close_object
+	json_add_object "remove"
+		json_add_string "filename" "filename"
+	json_close_object
+	json_add_object "rename"
+		json_add_string "newname" "filename"
+	json_close_object
+	json_dump
+	json_cleanup
+	;;
+"call")
+	case "$2" in
+	"avail")
+		json_init
+		json_add_int "avail" "$(df | grep -E '/$' | awk '{print $4}')"
+		json_dump
+		json_cleanup
+		;;
+	"remove")
+		read -r input
+		json_load "$input"
+		json_get_var filename "filename"
+		json_cleanup
+
+		if dirname "$filename" | grep -q ".."; then
+			echo '{ "result": 255 }'
+			exit 255
+		fi
+
+		rm -f "$bg_path/$filename"
+		echo '{ "result": 0 }'
+		;;
+	"rename")
+		read -r input
+		json_load "$input"
+		json_get_var newname "newname"
+		json_cleanup
+
+		if dirname "$newname" | grep -q ".."; then
+			echo '{ "result": 255 }'
+			exit 255
+		fi
+
+		if mv "$tmp_path" "$bg_path/$newname" 2>"/dev/null"; then
+			chmod 0644 "$bg_path/$newname"
+			echo '{ "result": 0 }'
+		else
+			echo '{ "result": 1 }'
+		fi
+		;;
+	esac
+	;;
+esac

luci-app-argon-config/root/usr/share/luci/menu.d/luci-app-argon-config.json

@@ -0,0 +1,14 @@
+{
+	"admin/system/argon-config": {
+		"title": "Argon Config",
+		"order": 90,
+		"action": {
+			"type": "view",
+			"path": "argon-config"
+		},
+		"depends": {
+			"acl": [ "luci-app-argon-config" ],
+			"uci": { "argon": true }
+		}
+	}
+}

luci-app-argon-config/root/usr/share/rpcd/acl.d/luci-app-argon-config.json

@@ -0,0 +1,20 @@
+{
+	"luci-app-argon-config": {
+		"description": "Grant UCI access for luci-app-argon-config",
+		"read": {
+			"file": {
+				"/www/luci-static/argon/background/*": [ "list" ]
+			},
+			"ubus": {
+				"luci.argon": [ "avail", "remove", "rename" ]
+			},
+			"uci": [ "argon" ]
+		},
+		"write": {
+			"file": {
+				"/tmp/argon_background.tmp": [ "write" ]
+			},
+			"uci": [ "argon" ]
+		}
+	}
+}

luci-theme-argon/Makefile

@@ -0,0 +1,25 @@
+#
+# Copyright (C) 2008-2019 Jerrykuku
+#
+# This is free software, licensed under the Apache License, Version 2.0 .
+#
+
+include $(TOPDIR)/rules.mk
+
+LUCI_TITLE:=Argon Theme
+LUCI_DEPENDS:=+curl +jsonfilter
+PKG_VERSION:=2.4.2
+PKG_RELEASE:=20250207
+
+define Package/luci-theme-argon/postrm
+#!/bin/sh
+[ -n "$${IPKG_INSTROOT}" ] || {
+	uci -q delete luci.themes.Argon
+	uci set luci.main.mediaurlbase='/luci-static/bootstrap'
+	uci commit luci
+}
+endef
+
+include $(TOPDIR)/feeds/luci/luci.mk
+
+# call BuildPackage - OpenWrt buildroot signature

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

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

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

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

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

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

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

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

luci-theme-argon/htdocs/luci-static/argon/icon/loading-dark.svg

@@ -0,0 +1,2 @@
+<svg width="48" height="48" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="#cccccc"><rect x="11" y="1" width="2" height="5" opacity=".14"/><rect x="11" y="1" width="2" height="5" transform="rotate(30 12 12)" opacity=".29"/><rect x="11" y="1" width="2" height="5" transform="rotate(60 12 12)" opacity=".43"/><rect x="11" y="1" width="2" height="5" transform="rotate(90 12 12)" opacity=".57"/><rect x="11" y="1" width="2" height="5" transform="rotate(120 12 12)" opacity=".71"/><rect x="11" y="1" width="2" height="5" transform="rotate(150 12 12)" opacity=".86"/><rect x="11" y="1" width="2" height="5" transform="rotate(180 12 12)"/><animateTransform attributeName="transform" type="rotate" calcMode="discrete" dur="0.75s" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" repeatCount="indefinite"/></g></svg>
+<!-- https://github.com/n3r4zzurr0/svg-spinners MIT License -->

luci-theme-argon/htdocs/luci-static/argon/icon/loading.svg

@@ -0,0 +1,2 @@
+<svg width="48" height="48" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><rect x="11" y="1" width="2" height="5" opacity=".14"/><rect x="11" y="1" width="2" height="5" transform="rotate(30 12 12)" opacity=".29"/><rect x="11" y="1" width="2" height="5" transform="rotate(60 12 12)" opacity=".43"/><rect x="11" y="1" width="2" height="5" transform="rotate(90 12 12)" opacity=".57"/><rect x="11" y="1" width="2" height="5" transform="rotate(120 12 12)" opacity=".71"/><rect x="11" y="1" width="2" height="5" transform="rotate(150 12 12)" opacity=".86"/><rect x="11" y="1" width="2" height="5" transform="rotate(180 12 12)"/><animateTransform attributeName="transform" type="rotate" calcMode="discrete" dur="0.75s" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" repeatCount="indefinite"/></g></svg>
+<!-- https://github.com/n3r4zzurr0/svg-spinners MIT License -->

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,448 @@
+'use strict';
+'require baseclass';
+'require ui';
+
+/**
+ * Native JavaScript slide animation utilities
+ * Replaces jQuery slideUp/slideDown functionality with better performance
+ */
+const SlideAnimations = {
+	/**
+	 * Animation durations in milliseconds
+	 */
+	durations: {
+		fast: 200,
+		normal: 400,
+		slow: 600
+	},
+
+	/**
+	 * Map to track running animations and their cleanup functions
+	 */
+	runningAnimations: new WeakMap(),
+
+	/**
+	 * Slide element down (show) with animation
+	 * @param {Element} element - DOM element to animate
+	 * @param {string|number} duration - Animation duration ('fast', 'normal', 'slow' or milliseconds)
+	 * @param {function} callback - Optional callback function when animation completes
+	 */
+	slideDown: function(element, duration, callback) {
+		if (!element) {
+			console.warn('SlideAnimations.slideDown: No element provided');
+			return;
+		}
+		
+		// Stop any existing animation on this element
+		this.stop(element);
+		
+		// Convert duration string to milliseconds
+		const animDuration = typeof duration === 'string' ? 
+			this.durations[duration] || this.durations.normal : 
+			(duration || this.durations.normal);
+		
+		// Store original styles
+		const originalStyles = {
+			display: element.style.display,
+			overflow: element.style.overflow,
+			height: element.style.height,
+			transition: element.style.transition
+		};
+		
+		// Set initial state for animation
+		element.style.display = 'block';
+		element.style.overflow = 'hidden';
+		element.style.height = '0px';
+		element.style.transition = `height ${animDuration}ms ease-out`;
+		
+		// Force reflow to ensure initial state is applied
+		element.offsetHeight;
+		
+		// Get the target height
+		const targetHeight = element.scrollHeight;
+		
+		// Animate to full height
+		element.style.height = targetHeight + 'px';
+		
+		// Set up cleanup function
+		const cleanup = () => {
+			element.style.height = originalStyles.height || '';
+			element.style.overflow = originalStyles.overflow || '';
+			element.style.transition = originalStyles.transition || '';
+			
+			// Remove from running animations map
+			this.runningAnimations.delete(element);
+			
+			if (callback && typeof callback === 'function') {
+				try {
+					callback.call(element);
+				} catch (e) {
+					console.error('SlideAnimations callback error:', e);
+				}
+			}
+		};
+		
+		// Store cleanup function for potential cancellation
+		const timeoutId = setTimeout(cleanup, animDuration);
+		this.runningAnimations.set(element, { timeoutId, cleanup });
+	},
+
+	/**
+	 * Slide element up (hide) with animation
+	 * @param {Element} element - DOM element to animate
+	 * @param {string|number} duration - Animation duration ('fast', 'normal', 'slow' or milliseconds)
+	 * @param {function} callback - Optional callback function when animation completes
+	 */
+	slideUp: function(element, duration, callback) {
+		if (!element) {
+			console.warn('SlideAnimations.slideUp: No element provided');
+			return;
+		}
+		
+		// Stop any existing animation on this element
+		this.stop(element);
+		
+		// Convert duration string to milliseconds
+		const animDuration = typeof duration === 'string' ? 
+			this.durations[duration] || this.durations.normal : 
+			(duration || this.durations.normal);
+		
+		// Store original styles
+		const originalStyles = {
+			display: element.style.display,
+			overflow: element.style.overflow,
+			height: element.style.height,
+			transition: element.style.transition
+		};
+		
+		// Get current height before hiding
+		const currentHeight = element.scrollHeight;
+		
+		// Set initial state for animation
+		element.style.overflow = 'hidden';
+		element.style.height = currentHeight + 'px';
+		element.style.transition = `height ${animDuration}ms ease-out`;
+		
+		// Force reflow to ensure initial state is applied
+		element.offsetHeight;
+		
+		// Animate to zero height
+		element.style.height = '0px';
+		
+		// Set up cleanup function
+		const cleanup = () => {
+			element.style.display = 'none';
+			element.style.height = originalStyles.height || '';
+			element.style.overflow = originalStyles.overflow || '';
+			element.style.transition = originalStyles.transition || '';
+			
+			// Remove from running animations map
+			this.runningAnimations.delete(element);
+			
+			if (callback && typeof callback === 'function') {
+				try {
+					callback.call(element);
+				} catch (e) {
+					console.error('SlideAnimations callback error:', e);
+				}
+			}
+		};
+		
+		// Store cleanup function for potential cancellation
+		const timeoutId = setTimeout(cleanup, animDuration);
+		this.runningAnimations.set(element, { timeoutId, cleanup });
+	},
+
+	/**
+	 * Stop all running animations on an element
+	 * @param {Element} element - DOM element to stop animations on
+	 */
+	stop: function(element) {
+		if (!element) return;
+		
+		const animationData = this.runningAnimations.get(element);
+		if (animationData) {
+			// Clear the timeout
+			clearTimeout(animationData.timeoutId);
+			
+			// Run cleanup immediately
+			animationData.cleanup();
+		}
+		
+		// Clear transition to immediately stop any CSS animation
+		element.style.transition = '';
+		
+		// Force reflow to apply changes immediately
+		element.offsetHeight;
+	},
+
+	/**
+	 * Check if element has running animation
+	 * @param {Element} element - DOM element to check
+	 * @returns {boolean} - True if element has running animation
+	 */
+	isAnimating: function(element) {
+		return this.runningAnimations.has(element);
+	}
+};
+
+/**
+ * Argon Theme Menu Module
+ * Handles rendering and interaction of the main navigation menu and sidebar
+ */
+return baseclass.extend({
+	/**
+	 * Initialize the menu module
+	 * Load menu data and trigger rendering
+	 */
+	__init__: function () {
+		ui.menu.load().then(L.bind(this.render, this));
+	},
+
+	/**
+	 * Main render function for the menu system
+	 * @param {Object} tree - Menu tree structure from LuCI
+	 */
+	render: function (tree) {
+		var node = tree,
+			url = '',
+			children = ui.menu.getChildren(tree);
+
+		// Find and render the active main menu item
+		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);
+			}
+		}
+
+		// Render tab menu if we're deep enough in the navigation hierarchy
+		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);
+			}
+		}
+
+		// Attach event listeners for sidebar toggle functionality
+		var sidebarToggle = document.querySelector('a.showSide');
+		var darkMask = document.querySelector('.darkMask');
+		
+		if (sidebarToggle) {
+			sidebarToggle.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
+		}
+		if (darkMask) {
+			darkMask.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
+		}
+	},
+
+	/**
+	 * Handle menu expand/collapse functionality
+	 * Manages the sliding animation and active states of menu items
+	 * @param {Event} ev - Click event from menu item
+	 */
+	handleMenuExpand: function (ev) {
+		var target = ev.target;
+		var slide = target.parentNode;
+		var slideMenu = target.nextElementSibling;
+		var shouldCollapse = false;
+
+		// Close all currently active submenus
+		var activeMenus = document.querySelectorAll('.main .main-left .nav > li > ul.active');
+		activeMenus.forEach(function (ul) {
+			// Stop any running animations and slide up
+			SlideAnimations.stop(ul);
+			// Remove active classes immediately when starting slideUp animation
+			ul.classList.remove('active');
+			ul.previousElementSibling.classList.remove('active');
+			SlideAnimations.slideUp(ul, 'fast');
+			
+			// Check if we're clicking on an already open menu (should collapse it)
+			if (!shouldCollapse && ul === slideMenu) {
+				shouldCollapse = true;
+			}
+		});
+
+		// Exit if there's no submenu to show
+		if (!slideMenu) {
+			return;
+		}
+
+		// Open the submenu if it's not already open
+		if (!shouldCollapse) {
+			// Find the slide menu within the slide element
+			var slideMenuElement = slide.querySelector(".slide-menu");
+			if (slideMenuElement) {
+				// Add active classes immediately when starting slideDown animation
+				slideMenu.classList.add('active');
+				target.classList.add('active');
+				SlideAnimations.slideDown(slideMenuElement, 'fast');
+			}
+			target.blur(); // Remove focus from the clicked element
+		}
+		
+		// Prevent default link behavior and event bubbling
+		ev.preventDefault();
+		ev.stopPropagation();
+	},
+
+	/**
+	 * Render the main navigation menu
+	 * Creates hierarchical menu structure with active states and click handlers
+	 * @param {Object} tree - Menu tree node to render
+	 * @param {string} url - Base URL for menu items
+	 * @param {number} level - Current nesting level (0-based)
+	 * @returns {Element} - Generated menu element
+	 */
+	renderMainMenu: function (tree, url, level) {
+		var currentLevel = (level || 0) + 1;
+		var menuContainer = E('ul', { 'class': level ? 'slide-menu' : 'nav' });
+		var children = ui.menu.getChildren(tree);
+
+		// Don't render empty menus or menus deeper than 2 levels
+		if (children.length === 0 || currentLevel > 2) {
+			return E([]);
+		}
+
+		// Generate menu items for each child
+		for (var i = 0; i < children.length; i++) {
+			var child = children[i];
+			var isActive = (
+				(L.env.dispatchpath[currentLevel] === child.name) && 
+				(L.env.dispatchpath[currentLevel - 1] === tree.name)
+			);
+			
+			// Recursively render submenu
+			var submenu = this.renderMainMenu(child, url + '/' + child.name, currentLevel);
+			var hasChildren = submenu.children.length > 0;
+			
+			// Determine CSS classes based on state
+			var slideClass = hasChildren ? 'slide' : null;
+			var menuClass = hasChildren ? 'menu' : 'food';
+			
+			if (isActive) {
+				menuContainer.classList.add('active');
+				slideClass += " active";
+				menuClass += " active";
+			}
+
+			// Create menu item with link and submenu
+			var menuItem = E('li', { 'class': slideClass }, [
+				E('a', {
+					'href': L.url(url, child.name),
+					'click': (currentLevel === 1) ? ui.createHandlerFn(this, 'handleMenuExpand') : null,
+					'class': menuClass,
+					'data-title': child.title.replace(/ /g, "_"), // More robust space replacement
+				}, [_(child.title)]),
+				submenu
+			]);
+			
+			menuContainer.appendChild(menuItem);
+		}
+
+		// Append to main menu container if this is the top level
+		if (currentLevel === 1) {
+			var mainMenuElement = document.querySelector('#mainmenu');
+			if (mainMenuElement) {
+				mainMenuElement.appendChild(menuContainer);
+				mainMenuElement.style.display = '';
+			}
+		}
+		
+		return menuContainer;
+	},
+
+	/**
+	 * Render tab navigation menu
+	 * Creates horizontal tab menu for deeper navigation levels
+	 * @param {Object} tree - Menu tree node to render
+	 * @param {string} url - Base URL for tab items
+	 * @param {number} level - Current nesting level (0-based)
+	 * @returns {Element} - Generated tab menu element
+	 */
+	renderTabMenu: function (tree, url, level) {
+		var container = document.querySelector('#tabmenu');
+		var currentLevel = (level || 0) + 1;
+		var tabContainer = E('ul', { 'class': 'tabs' });
+		var children = ui.menu.getChildren(tree);
+		var activeNode = null;
+
+		// Don't render empty tab menus
+		if (children.length === 0) {
+			return E([]);
+		}
+
+		// Generate tab items for each child
+		for (var i = 0; i < children.length; i++) {
+			var child = children[i];
+			var isActive = (L.env.dispatchpath[currentLevel + 2] === child.name);
+			var activeClass = isActive ? ' active' : '';
+			var className = 'tabmenu-item-%s %s'.format(child.name, activeClass);
+
+			var tabItem = E('li', { 'class': className }, [
+				E('a', { 'href': L.url(url, child.name) }, [_(child.title)])
+			]);
+			
+			tabContainer.appendChild(tabItem);
+
+			// Store reference to active node for recursive rendering
+			if (isActive) {
+				activeNode = child;
+			}
+		}
+
+		// Append tab container to main tab menu element
+		if (container) {
+			container.appendChild(tabContainer);
+			container.style.display = '';
+
+			// Recursively render nested tab menus if there's an active node
+			if (activeNode) {
+				var nestedTabs = this.renderTabMenu(activeNode, url + '/' + activeNode.name, currentLevel);
+				if (nestedTabs.children.length > 0) {
+					container.appendChild(nestedTabs);
+				}
+			}
+		}
+
+		return tabContainer;
+	},
+
+	/**
+	 * Handle sidebar toggle functionality
+	 * Toggles the mobile/responsive sidebar menu visibility
+	 * @param {Event} ev - Click event from sidebar toggle button or dark mask
+	 */
+	handleSidebarToggle: function (ev) {
+		var showSideButton = document.querySelector('a.showSide');
+		var sidebar = document.querySelector('#mainmenu');
+		var darkMask = document.querySelector('.darkMask');
+		var scrollbarArea = document.querySelector('.main-right');
+
+		// Check if any required elements are missing
+		if (!showSideButton || !sidebar || !darkMask || !scrollbarArea) {
+			console.warn('Sidebar toggle elements not found');
+			return;
+		}
+
+		// Toggle sidebar visibility and related states
+		if (showSideButton.classList.contains('active')) {
+			// Close sidebar
+			showSideButton.classList.remove('active');
+			sidebar.classList.remove('active');
+			scrollbarArea.classList.remove('active');
+			darkMask.classList.remove('active');
+		} else {
+			// Open sidebar
+			showSideButton.classList.add('active');
+			sidebar.classList.add('active');
+			scrollbarArea.classList.add('active');
+			darkMask.classList.add('active');
+		}
+	}
+});

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

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

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

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

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

@@ -0,0 +1,204 @@
+<%#
+	Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material Argon Template
+
+	luci-theme-argon
+	Copyright 2020 Jerrykuku <jerrykuku@qq.com>
+
+	Have a bug? Please create an issue here on GitHub!
+	https://github.com/jerrykuku/luci-theme-argon/issues
+
+	luci-theme-material:
+	Copyright 2015 Lutty Yang <lutty@wcan.in>
+
+	Argon Theme
+	https://demos.creative-tim.com/argon-dashboard/index.html
+
+	Licensed to the public under the Apache License 2.0
+-%>
+
+<%
+	local sys = require "luci.sys"
+	local util = require "luci.util"
+	local http = require "luci.http"
+	local disp = require "luci.dispatcher"
+	local ver = require "luci.version"
+
+	local boardinfo = util.ubus("system", "board")
+
+	local node = disp.context.dispatched
+
+	local fs = require "nixio.fs"
+	local nutil = require "nixio.util"
+	local uci = require 'luci.model.uci'.cursor()
+
+	-- send as HTML5
+	http.prepare_content("text/html")
+
+	math.randomseed(os.time())
+
+	-- Custom settings
+	local mode = 'normal'
+	local font_weight = '600'
+	local dark_css = fs.readfile('/www/luci-static/argon/css/dark.css')
+	local bar_color = '#5e72e4'
+	local primary, dark_primary, blur_radius, blur_radius_dark, blur_opacity
+	if fs.access('/etc/config/argon') then
+		primary = uci:get_first('argon', 'global', 'primary')
+		dark_primary = uci:get_first('argon', 'global', 'dark_primary')
+		font_weight = uci:get_first('argon', 'global', 'font_weight')
+		blur_radius = uci:get_first('argon', 'global', 'blur')
+		blur_radius_dark = uci:get_first('argon', 'global', 'blur_dark')
+		blur_opacity = uci:get_first('argon', 'global', 'transparency')
+		blur_opacity_dark = uci:get_first('argon', 'global', 'transparency_dark')
+		mode = uci:get_first('argon', 'global', 'mode')
+		progressbar_font = uci:get_first('argon', 'global', 'progressbar_font')
+		bar_color = mode == 'dark' and dark_primary or primary
+		if not progressbar_font then
+			progressbar_font = "#2e2b60"
+		end
+		if font_weight == "normal" then
+			main_left_font_color = "#5f6368"
+		else
+			main_left_font_color = "#69758c"
+		end
+	end
+
+	-- Brand name
+	local brand_name = boardinfo.hostname or "?"
+-%>
+<!DOCTYPE html>
+<html lang="<%=luci.i18n.context.lang%>">
+
+<head>
+	<meta charset="utf-8">
+	<title>
+		<%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %>
+		- LuCI</title>
+	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+	<meta name="format-detection" content="telephone=no, email=no" />
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="mobile-web-app-capable" content="yes">
+	<meta name="x5-fullscreen" content="true">
+	<meta name="full-screen" content="yes">
+	<meta name="x5-page-mode" content="app">
+	<meta name="browsermode" content="application">
+	<meta name="msapplication-tap-highlight" content="no">
+	<meta name="msapplication-TileColor" content="<%=bar_color%>">
+	<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
+	<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
+	<link rel="apple-touch-icon" sizes="144x144" href="<%=media%>/icon/apple-icon-144x144.png">
+	<link rel="apple-touch-icon" sizes="192x192" href="<%=media%>/icon/apple-icon-192x192.png">
+	<link rel="icon" type="image/png" sizes="192x192" href="<%=media%>/icon/android-icon-192x192.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="<%=media%>/icon/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="96x96" href="<%=media%>/icon/favicon-96x96.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="<%=media%>/icon/favicon-16x16.png">
+	<link rel="manifest" href="<%=media%>/icon/manifest.json"  crossorigin="use-credentials">
+	<meta name="msapplication-TileColor" content="<%=bar_color%>">
+	<meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png">
+    <% if mode == 'normal' then %>
+    <meta name="theme-color" content="<%=bar_color%>">
+    <script type="text/javascript">
+        let prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        if (prefersDarkMode) {
+            viewport = document.querySelector("meta[name=theme-color]");
+            viewport.setAttribute('content', '#444950');
+        }
+    </script>
+    <% elseif mode == 'dark' then %>
+    <meta name="theme-color" content="#444950">
+    <% elseif mode == 'light' then %>
+    <meta name="theme-color" content="<%=bar_color%>">
+    <% end -%>
+    <link rel="stylesheet" href="<%=media%>/css/cascade.css<%# ?v=PKG_VERSION %>">
+    <style title="text/css">
+        <% if mode == 'normal' then %>
+            @media (prefers-color-scheme: dark) {
+                <%=dark_css%>
+            }
+        <% elseif mode == 'dark' then %>
+            <%=dark_css%>
+        <% end -%>
+        <% if fs.access('/etc/config/argon') then %>
+        :root {
+            --primary: <%=primary%>;
+            --dark-primary: <%=dark_primary%>;
+            --font-weight: <%=font_weight%>;
+            --progressbar-font-color: <%=progressbar_font%>;
+            --blur-radius:<%=blur_radius%>px;
+            --blur-opacity:<%=blur_opacity%>;
+            --blur-radius-dark:<%=blur_radius_dark%>px;
+            --blur-opacity-dark:<%=blur_opacity_dark%>;
+            --main-left-font-color:<%=main_left_font_color%>;
+        }
+        <% end -%>
+    </style>
+	<link rel="shortcut icon" type="image/ico" 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)%>?v=<%=ver.luciversion%>"></script>
+	<script src="<%=resource%>/cbi.js?v=<%=ver.luciversion%>"></script>
+	<script src="<%=resource%>/luci.js?v=<%=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 %>"
+	data-page="<%= pcdata(table.concat(disp.context.requestpath, "-")) %>">
+
+	<div class="main">
+		<div class="main-left" id="mainmenu" style="display:none">
+			<div class="sidenav-header d-flex align-items-center">
+				<a class="brand" href="/"><%=brand_name%></a>
+				<div class="ml-auto">
+					<!-- Sidenav toggler -->
+					<div class="sidenav-toggler d-none d-xl-block active" data-action="sidenav-unpin"
+						data-target="#sidenav-main">
+						<div class="sidenav-toggler-inner">
+							<i class="sidenav-toggler-line"></i>
+							<i class="sidenav-toggler-line"></i>
+							<i class="sidenav-toggler-line"></i>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="main-right">
+			<header class="bg-primary">
+				<div class="fill">
+					<div class="container">
+						<div class="flex1">
+							<a class="showSide"></a>
+							<a class="brand" href="/"><%=brand_name%></a>
+						</div>
+						<div class="status" id="indicators"></div>
+					</div>
+				</div>
+			</header>
+			<div class="darkMask"></div>
+			<div id="maincontent">
+				<div class="container">
+					<%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>
+					<div class="alert-message error">
+						<h4><%:No password set!%></h4>
+						<p><%:There is no password set on this router. Please configure a root password to protect the web interface.%>
+						</p>
+						<% if disp.lookup("admin/system/admin") then %>
+						<div class="right"><a class="btn"
+								href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div>
+						<% end %>
+					</div>
+					<%- end -%>
+
+					<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-argon/luasrc/view/themes/argon/header_login.htm

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+#!/bin/sh
+
+if [ "$PKG_UPGRADE" != 1 ]; then
+	uci get luci.themes.Argon >/dev/null 2>&1 || \
+	uci batch <<-EOF
+		set luci.themes.Argon=/luci-static/argon
+		set luci.main.mediaurlbase=/luci-static/argon
+		commit luci
+	EOF
+fi
+
+exit 0

luci-theme-argon/root/usr/libexec/argon/online_wallpaper

@@ -0,0 +1,72 @@
+#!/bin/sh
+# author jjm2473
+
+# the script will be excuted when `argon.@global[0].bing_background == '1'`
+# defaults to 'bing' to be compatible with old config
+WEB_PIC_SRC=$(uci -q get argon.@global[0].online_wallpaper || echo 'bing')
+CACHE=/var/run/argon_${WEB_PIC_SRC}.url
+WRLOCK=/var/lock/argon_${WEB_PIC_SRC}.lock
+
+fetch_pic_url() {
+    case $WEB_PIC_SRC in
+    bing)
+        local picpath=$(curl -fks --max-time 3 \
+            "https://www.bing.com/HPImageArchive.aspx?format=js&n=1" |
+            jsonfilter -qe '@.images[0].url')
+        [ -n "${picpath}" ] && echo "//www.bing.com${picpath}"
+        ;;
+    unsplash)
+        curl -fks --max-time 3 \
+            --header "Authorization: Client-ID kmFIroj2ELqXJPtC0XUoyww-Tr_lDU8Ho8uxjptIrCo" \
+            "https://api.unsplash.com/photos/random?count=1&orientation=landscape" |
+            jsonfilter -e "@[0]['urls']['regular']"
+        ;;
+    unsplash_*)
+        local collection_id=${WEB_PIC_SRC#unsplash_}
+        curl -fks --max-time 3 \
+            --header "Authorization: Client-ID kmFIroj2ELqXJPtC0XUoyww-Tr_lDU8Ho8uxjptIrCo" \
+            "https://api.unsplash.com/photos/random?count=1&orientation=landscape" |
+            jsonfilter -e "@[0]['urls']['regular']"
+        ;;
+    esac
+}
+
+try_update() {
+    local lock="$WRLOCK"
+    exec 200>$lock
+
+    if flock -n 200 >/dev/null 2>&1; then
+        local picurl=$(fetch_pic_url)
+        if [ -n "$picurl" ]; then
+            echo "${picurl}" | tee "$CACHE"
+        else
+            if [ -s "$CACHE" ]; then
+                cat "$CACHE"
+            else
+                touch "$CACHE"
+            fi
+        fi
+        flock -u 200 >/dev/null 2>&1
+    elif [ -s "$CACHE" ]; then
+        cat "$CACHE"
+    fi
+}
+
+get_url() {
+    if [ -f "$CACHE" ]; then
+        local idle_t=$(($(date '+%s') - $(date -r "$CACHE" '+%s' 2>/dev/null || echo '0')))
+        if [ -s "$CACHE" ]; then
+            if [ $idle_t -le 43200 ]; then
+                cat "$CACHE"
+                return
+            fi
+        else
+            if [ $idle_t -le 120 ]; then
+                return
+            fi
+        fi
+    fi
+    try_update
+}
+
+get_url