🐶 Sync 2025-11-02 14:26:26

luci-theme-kucat/htdocs/luci-static/kucat/browserconfig.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="/luci-static/kucat/img/logo70.png"/>
+      <square150x150logo src="/luci-static/kucat/img/logo150.png"/>
+      <wide310x150logo src="/luci-static/kucat/img/logow310x150.png"/>    
+      <square310x310logo src="/luci-static/kucat/img/logo310.png"/>  
+      <square512x512logo src="/luci-static/kucat/img/logo512.png"/>  
+      <TileColor>#1a1a1a</TileColor>
+      <TileImage src="logo.png"/>
+    </tile>
+    
+    <notification>
+      <polling-uri src="/live-tile-notifications"/>
+      <frequency>30</frequency> 
+    </notification>
+  </msapplication>
+</browserconfig>

luci-theme-kucat/htdocs/luci-static/kucat/css/theme.css

@@ -0,0 +1,8 @@
+
+@supports (-webkit-touch-callout: none) {
+    body {
+        -webkit-touch-callout: none;
+        padding: env(safe-area-inset-top) env(safe-area-inset-right) 
+                 env(safe-area-inset-bottom) env(safe-area-inset-left);
+    }
+}

luci-theme-kucat/htdocs/luci-static/kucat/js/footend.js

@@ -0,0 +1,42 @@
+
+	// thanks for sirpdboy Wich <herboy2008@gmail.com>  footer差补代码
+    var winHeight = window.innerHeight;
+    
+    function debounce(func, delay) {
+        let timeoutId;
+        return function() {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(func, delay);
+        };
+    }
+
+    function adjustLayout() {
+        var currentHeight = window.innerHeight;
+        var winWidth = window.innerWidth;
+        
+        var footer = document.querySelector('footer');
+        var footerHeight = footer ? footer.offsetHeight : 0;
+        
+        var footerRect = footer ? footer.getBoundingClientRect() : null;
+        var footerBottomPos = footerRect ? footerRect.bottom : 0;
+        var spaceBelowFooter = currentHeight - footerBottomPos;
+        
+        if (winWidth < 768) {
+            var keyboardHeight = currentHeight - winHeight;
+            document.querySelectorAll('.footend').forEach(function(element) {
+                element.style.bottom = (keyboardHeight + 80) + 'px';
+            });
+        }
+        
+        document.querySelectorAll('.footend').forEach(function(element) {
+            if (spaceBelowFooter < 0) {
+                element.style.paddingBottom = '100px';
+            } else {
+                element.style.paddingBottom = '';
+            }
+        });
+    }
+
+    adjustLayout();
+    window.addEventListener('resize', debounce(adjustLayout, 200));
+

luci-theme-kucat/htdocs/luci-static/kucat/js/initMode.js

@@ -0,0 +1,87 @@
+/* <![CDATA[ */
+
+async function getUci() {
+    try {
+        const response = await fetch("/cgi-bin/luci/api/get");
+        if (!response.ok) throw new Error("Network error");
+        return await response.json();
+    } catch (error) {
+        console.error("Failed to fetch theme config:", error);
+        return {
+            success: false,
+            bgqs: "0",
+            primaryrgbm: "45,102,147",
+            primaryrgbmts: "0",
+            mode: 'light' 
+        };
+    }
+}
+    
+function getTimeTheme() {
+    const hour = new Date().getHours();
+        return (hour < 6 || hour >= 18) ? 'dark' : 'light';
+    }
+
+function getSystemTheme() {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+async function updateTheme(theme) {
+  const root = document.documentElement;
+    const newTheme = theme === 'dark' ? 'dark' : 'light'; 
+    const isDark = newTheme === 'dark';
+  try {
+    const config = await getUci();
+    const primaryRgbbody = isDark ? '33,45,60' : '248,248,248';
+        const bgqsValue = config.bgqs || "0";
+        const rgbmValue = config.primaryrgbm || '45,102,147';
+        const rgbmtsValue = config.primaryrgbmts || '0';
+        const meta = document.querySelector('meta[name="theme-color"]');
+        if (meta) {
+            meta.content = isDark ? '#1a1a1a' : '#ffffff';
+        }
+        const vars = bgqsValue === "0" ? {
+            '--menu-fontcolor': isDark ? '#ddd' : '#f5f5f5',
+            '--primary-rgbbody': primaryRgbbody,
+            '--bgqs-image': '-webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent)',
+            '--menu-bgcolor': `rgba(${rgbmValue}, ${rgbmtsValue})`,
+            '--menu-item-hover-bgcolor': 'rgba(248,248,248, 0.22)',
+            '--menu-item-active-bgcolor': 'rgba(248,248,248, 0.3)',
+        } : {
+            '--menu-fontcolor': isDark ? '#ddd' : '#4d4d5d',
+            '--primary-rgbbody': primaryRgbbody,
+            '--menu-bgcolor': `rgba(${primaryRgbbody},${rgbmtsValue})`,
+        };
+
+        Object.entries(vars).forEach(([key, value]) => {
+            root.style.setProperty(key, value);
+        });
+
+        if (window.LuciForm) LuciForm.refreshVisibility();
+  } catch (error) {
+        console.error('Error updating theme variables:', error);
+  }
+}
+(async function(){
+    const config = await getUci();
+    var initMode = config.mode; 
+    var autoTheme; 
+    function applyTheme(theme) {
+        document.body.setAttribute('data-theme', theme);
+        const meta = document.querySelector('meta[name="theme-color"]');
+        if (meta) {
+            meta.content = theme === 'dark' ? '#1a1a1a' : '#ffffff';
+        }
+    }
+
+    (async function() {
+        if (initMode === 'auto') {
+	    autoTheme = getTimeTheme(); 
+        } else {
+            autoTheme = initMode;
+        } 
+            applyTheme(autoTheme);
+            await updateTheme(autoTheme);
+    })();
+})();
+/* ]]> */

luci-theme-kucat/htdocs/luci-static/kucat/js/style.js

@@ -0,0 +1,60 @@
+/*
+ *  luci-theme-kucat
+ *  Copyright (C) 2019-2024 The Sirpdboy Team <herboy2008@gmail.com> 
+ *
+ *  Have a bug? Please create an issue here on GitHub!
+ *      https://github.com/sirpdboy/luci-theme-kucat/issues
+ *
+ *  Licensed to the public under the Apache License 2.0
+ */
+ 
+ function pdopenbar() {
+    var leftBar = document.getElementById("header-bar-left");
+    var rightBar = document.getElementById("header-bar-right");
+    
+    leftBar.style.cssText = "width:300px;display:block !important";
+    rightBar.style.cssText = "width:0;display:none !important";
+}
+
+function pdclosebar() {
+    var leftBar = document.getElementById("header-bar-left");
+    var rightBar = document.getElementById("header-bar-right");
+    
+    leftBar.style.cssText = "width:0;display:none !important";
+    rightBar.style.cssText = "width:50px;display:block !important";
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('keydown', function(e) {
+        if (e.ctrlKey && e.key === 'ArrowLeft') pdopenbar();
+        if (e.ctrlKey && e.key === 'ArrowRight') pdclosebar();
+    });
+});
+
+function initScrollContainers() {
+    document.querySelectorAll('.cbi-section, .mainmenu').forEach(section => {
+        const content = section.querySelector('.content');
+        if (!content) return;
+
+        const checkOverflow = () => {
+            section.classList.toggle(
+                'auto-scroll-container',
+                content.scrollHeight > section.clientHeight
+            );
+        };
+
+        checkOverflow();
+        new MutationObserver(checkOverflow).observe(content, { childList: true, subtree: true });
+
+        section.addEventListener('touchstart', () => {
+            section.classList.add('touch-active');
+        }, { passive: true });
+
+        section.addEventListener('touchend', () => {
+            setTimeout(() => section.classList.remove('touch-active'), 1000);
+        }, { passive: true });
+    });
+}
+
+
+document.addEventListener('DOMContentLoaded', initScrollContainers);

luci-theme-kucat/htdocs/luci-static/kucat/js/switcher.js

@@ -0,0 +1,120 @@
+/* <![CDATA[ */
+
+function syncToUci(theme) {
+    fetch('/cgi-bin/luci/api/set', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: 'theme=' + encodeURIComponent(theme)
+    }).catch(console.error);
+}
+
+async function syncgetUci() {
+    try {
+        const response = await fetch("/cgi-bin/luci/api/get");
+        if (!response.ok) throw new Error("Network error");
+        return await response.json();
+    } catch (error) {
+        console.error("Fetch config failed, using default:", error);
+        return {
+            success: false,
+            bgqs: "1",
+            primaryrgbm: "45,102,147",
+            primaryrgbmts: "0",
+            mode: "light"
+        };
+    }
+}
+// Theme Detection
+function getTimeBasedTheme() {
+    const hour = new Date().getHours();
+    // console.debug('hour:', hour);
+    return (hour < 6 || hour >= 18) ? 'dark' : 'light';
+}
+
+// Theme Application
+async function updateThemeVariables(theme) {
+  const root = document.documentElement;
+  const isDark = theme === 'dark';
+  try {
+    const config = await syncgetUci();
+        const primaryRgbbody = isDark ? '33,45,60' : '248,248,248';
+        const bgqsValue = config.bgqs || "1"; 
+        const rgbmValue = config.primaryrgbm || '45,102,147';
+        const rgbmtsValue = config.primaryrgbmts || '0';
+        const vars = bgqsValue === "0" ? {
+            '--menu-fontcolor': isDark ? '#ddd' : '#f5f5f5',
+            '--primary-rgbbody': primaryRgbbody,
+            '--bgqs-image': '-webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent)',
+            '--menu-bgcolor': `rgba(${rgbmValue}, ${rgbmtsValue})`,
+            '--menu-item-hover-bgcolor': 'rgba(248,248,248, 0.22)',
+            '--menu-item-active-bgcolor': 'rgba(248,248,248, 0.3)',
+        } : {
+            '--menu-fontcolor': isDark ? '#ddd' : '#4d4d5d',
+            '--primary-rgbbody': primaryRgbbody,
+            '--menu-bgcolor': `rgba(${primaryRgbbody},${rgbmtsValue})`,
+        };
+    
+
+        Object.entries(vars).forEach(([key, value]) => {
+        root.style.setProperty(key, value);
+      });
+
+        if (window.LuciForm) {
+            LuciForm.refreshVisibility();
+        }
+  } catch (error) {
+        console.error('Error updating theme variables:', error);
+  }
+}
+
+document.getElementById('themeToggle').addEventListener('click', function() {
+    const switcher = this;
+    const isDark = switcher.dataset.theme === 'dark';
+    const newTheme = isDark ? 'light' : 'dark';
+    
+    switcher.dataset.theme = newTheme;
+    
+    document.querySelectorAll('.theme-switcher span').forEach(span => {
+        span.classList.toggle('active');
+    });
+
+    document.body.setAttribute('data-theme', newTheme);
+    
+     // console.debug('switcher:', switcher.dataset.theme,newTheme);
+    syncToUci(newTheme);
+    updateThemeVariables(newTheme);
+});
+
+window.addEventListener('DOMContentLoaded', async function() {
+
+    const config = await syncgetUci();
+    
+    function applyTheme(theme) {
+        document.body.setAttribute('data-theme', theme);
+        const meta = document.querySelector('meta[name="theme-color"]');
+        const switcher = document.getElementById('themeToggle');
+        switcher.dataset.theme = theme;
+        if (theme === 'dark') {
+        switcher.querySelector('.pdboy-dark').classList.add('active');
+        switcher.querySelector('.pdboy-light').classList.remove('active');
+    } else {
+        switcher.querySelector('.pdboy-light').classList.add('active');
+        switcher.querySelector('.pdboy-dark').classList.remove('active');
+    }
+        if (meta) {
+            meta.content = theme === 'dark' ? '#1a1a1a' : '#ffffff';
+        }
+    }
+        const themeToApply = config.mode === 'auto' 
+            ? getTimeBasedTheme() 
+            : (config.mode || 'light');
+
+
+    // console.debug('switcher:', config.mode,themeToApply);
+    applyTheme(themeToApply);
+    await updateThemeVariables(themeToApply);
+});
+
+/* ]]> */

luci-theme-kucat/htdocs/luci-static/kucat/manifest.json

@@ -0,0 +1,50 @@
+{
+    "name": "EzOpWRT Admin",
+    "short_name": "LuCI",
+    "description":"Kucat for OpenWRT by sirpdboy.",
+    "start_url": ".",
+    "scope": "/",
+    "orientation":"any",
+    "splash_pages": null,
+    "background_color": "#f8f8f8", 
+    "theme_color": "#2d3a4b", 
+    "theme_color_light": "#ffffff",
+    "theme_color_dark": "#1a1a1a",
+    "prompt_message":"fast read Kucat",
+  "icons": [
+    {
+      "src": "/luci-static/kucat/logo.svg",
+      "sizes": "any", 
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+
+    {
+      "src": "/luci-static/kucat/logo.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/luci-static/kucat/img/logo70.png",
+      "sizes": "70x70",
+      "type": "image/png"
+    },
+    {
+      "src": "/luci-static/kucat/img/logo150.png",
+      "sizes": "150x150",
+      "type": "image/png"
+    },
+    {
+      "src": "/luci-static/kucat/img/logo310.png",
+      "sizes": "310x310",
+      "type": "image/png"
+    },
+    {
+      "src": "/luci-static/kucat/img/logo512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+],
+"display":"standalone"
+}

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

@@ -0,0 +1,217 @@
+/*
+ *  luci-theme-kucat
+ *  Copyright (C) 2019-2024 The Sirpdboy Team <herboy2008@gmail.com> 
+ *
+ *  Have a bug? Please create an issue here on GitHub!
+ *      https://github.com/sirpdboy/luci-theme-kucat/issues
+ *
+ *  luci-theme-bootstrap:
+ *      Copyright 2008 Steven Barth <steven@midlink.org>
+ *      Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
+ *      Copyright 2012 David Menting <david@nut-bolt.nl>
+ *
+ *  luci-theme-material:
+ *      https://github.com/LuttyYang/luci-theme-material/
+ *  luci-theme-opentopd:
+ *      https://github.com/sirpdboy/luci-theme-opentopd
+ *
+ *  Licensed to the public under the Apache License 2.0
+ */
+
+'use strict';
+'require baseclass';
+'require ui';
+return baseclass.extend({
+	__init__: function() {
+		ui.menu.load().then(L.bind(this.render, this));
+	},
+
+	render: function(tree) {
+		var node = tree,
+		    url = '';
+
+		this.renderModeMenu(node);
+
+		if (L.env.dispatchpath.length >= 3) {
+			for (var i = 0; i < 3 && node; i++) {
+				node = node.children[L.env.dispatchpath[i]];
+				url = url + (url ? '/' : '') + L.env.dispatchpath[i];
+			}
+
+			if (node)
+				this.renderTabMenu(node, url);
+		}
+
+		document.querySelector('.showSide')
+			.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
+
+		document.querySelector('.darkMask')
+			.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
+			
+		document.querySelector(".main > .loading").style.opacity = '0';
+		document.querySelector(".main > .loading").style.visibility = 'hidden';
+
+		if (window.innerWidth <= 1152)
+			document.querySelector('.main-left').style.width = '0';
+
+		document.querySelector('.main-right').style.overflow = 'auto';
+		window.addEventListener('resize', this.handleSidebarToggle, true);
+		
+	},
+
+	handleMenuExpand: function(ev) {
+		var a = ev.target, ul1 = a.parentNode, ul2 = a.nextElementSibling;
+		var collapse = false;
+
+		document.querySelectorAll('li.slide.active').forEach(function(li) {
+			if (li !== a.parentNode || li == ul1) {
+				li.classList.remove('active');
+				li.childNodes[0].classList.remove('active');
+			}
+			if (!collapse && li == ul1) {
+				collapse = true;
+			}
+		});
+
+		if (!ul2)
+			return;
+
+		if (ul2.parentNode.offsetLeft + ul2.offsetWidth <= ul1.offsetLeft + ul1.offsetWidth)
+			ul2.classList.add('align-left');
+		if (!collapse) {
+			ul1.classList.add('active');
+			a.classList.add('active');
+
+		}
+		else
+		{
+			ul1.classList.remove('active');
+			a.classList.remove('active');
+		}
+		
+		a.blur();
+		ev.preventDefault();
+		ev.stopPropagation();
+	},
+
+	renderMainMenu: function(tree, url, level) {
+		var l = (level || 0) + 1,
+		    ul = E('ul', { 'class': level ? 'slide-menu' : 'nav' }),
+		    children = ui.menu.getChildren(tree);
+
+		if (children.length == 0 || l > 2)
+			return E([]);
+
+		for (var i = 0; i < children.length; i++) {
+			var isActive = ((L.env.dispatchpath[l] == children[i].name) && (L.env.dispatchpath[l - 1] == tree.name)),
+				submenu = this.renderMainMenu(children[i], url + '/' + children[i].name, l),
+				hasChildren = submenu.children.length,
+				slideClass = hasChildren ? 'slide' : null,
+				menuClass = hasChildren ? 'menu' : null;
+			if (isActive) {
+				ul.classList.add('active');
+				slideClass += " active";
+				menuClass += " active";
+			}
+
+			ul.appendChild(E('li', { 'class': slideClass }, [
+				E('a', {
+					'href': L.url(url, children[i].name),
+					'click': (l == 1) ? ui.createHandlerFn(this, 'handleMenuExpand') : null,
+					'class': menuClass,
+					'data-title': hasChildren ? children[i].title.replace(" ", "_") : children[i].title.replace(" ", "_"),
+				}, [_(children[i].title)]),
+				submenu
+			]));
+		}
+
+		if (l == 1) {
+			var container = document.querySelector('#mainmenu');
+
+			container.appendChild(ul);
+			container.style.display = '';
+		}
+
+		return ul;
+	},
+
+	renderModeMenu: function(tree) {
+		var ul = document.querySelector('#modemenu'),
+		    children = ui.menu.getChildren(tree);
+
+		for (var i = 0; i < children.length; i++) {
+			var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
+
+			ul.appendChild(E('li', {}, [
+				E('a', {
+					'href': L.url(children[i].name),
+					'class': isActive ? 'active' : null
+				}, [ _(children[i].title) ])
+			]));
+
+			if (isActive)
+				this.renderMainMenu(children[i], children[i].name);
+
+			if (i > 0 && i < children.length)
+				ul.appendChild(E('li', {'class': 'divider'}, [E('span')]))
+		}
+
+		if (children.length > 1)
+			ul.parentElement.style.display = '';
+	},
+
+	renderTabMenu: function(tree, url, level) {
+		var container = document.querySelector('#tabmenu'),
+			    l = (level || 0) + 1,
+			    ul = E('ul', { 'class': 'tabs' }),
+			    children = ui.menu.getChildren(tree),
+			    activeNode = null;
+
+		if (children.length == 0)
+			return E([]);
+
+		for (var i = 0; i < children.length; i++) {
+			var isActive = (L.env.dispatchpath[l + 2] == children[i].name),
+				activeClass = isActive ? ' active' : '',
+				className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
+
+			ul.appendChild(E('li', { 'class': className }, [
+				E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )
+			]));
+
+			if (isActive)
+				activeNode = children[i];
+		}
+
+		container.appendChild(ul);
+		container.style.display = '';
+
+		if (activeNode)
+			container.appendChild(this.renderTabMenu(activeNode, url + '/' + activeNode.name, l));
+
+		return ul;
+	},
+
+	handleSidebarToggle: function(ev) {
+		var width = window.innerWidth,
+		    darkMask = document.querySelector('.darkMask'),
+		    mainRight = document.querySelector('.main-right'),
+		    mainLeft = document.querySelector('.main-left'),
+		    open = mainLeft.style.width == '';
+
+			if (width > 1152 || ev.type == 'resize')
+				open = true;
+				
+		darkMask.style.visibility = open ? '' : 'visible';
+		darkMask.style.opacity = open ? '': 1;
+
+		if (width <= 1152)
+			mainLeft.style.width = open ? '0' : '';
+		else
+			mainLeft.style.width = ''
+
+		mainLeft.style.visibility = open ? '' : 'visible';
+
+		mainRight.style['overflow-y'] = open ? 'visible' : 'hidden';
+	}
+});