 <%#
    Copyright (C) 2019-2025The Sirpdboy Team <herboy2008@gmail.com>
	luci-theme-material: 
	Copyright 2015 Lutty Yang <lutty@wcan.in>
	luci-theme-bootstrap:
	Copyright 2008 Steven Barth <steven@midlink.org>
	Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
	Copyright 2012 David Menting <david@nut-bolt.nl>

	MUI:
	https://github.com/muicss/mui 

	Licensed to the public under the Apache License 2.0
-%>

<%
local 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 json = require "luci.jsonc"
local fs = require "nixio.fs"
local nutil = require "nixio.util"
local uci = require 'luci.model.uci'.cursor()
local urlencode = luci.http.protocol and luci.http.protocol.urlencode or luci.util.urlencode

local boardinfo = util.ubus("system", "board") or {}
local node = disp.context.dispatched
local path = table.concat(disp.context.path, "-")
local bar = '/cgi-bin/luci/admin/'
local config_exists = false
local kucat = ''

function glob(...)
    local iter, code, msg = fs.glob(...)
    if iter then
        return nutil.consume(iter)
    end
    return nil, code, msg
end

function getExtension(str)
    return urlencode(str:match(".+%.(%w+)$") or "")
end

http.prepare_content("text/html; charset=UTF-8")

if fs.access("/etc/config/advancedplus") then
    kucat = "advancedplus"
    config_exists = true
elseif fs.access("/etc/config/kucat") then
    kucat = "kucat"
    config_exists = true
end

local config = {}
local primary_rgbm, primary_rgbm_ts, primary_opacity, primary_rgbs, primary_rgbs_ts, mode
local gohome, gouser, gossr, bgqs, setbar, dayword
local background, bkuse, bklock, fontd, fontz, fontx

if config_exists then
    config = uci:get_all(kucat, "@basic[0]") or {}
    primary_rgbm = config.primary_rgbm or '45,102,147'
    primary_rgbm_ts = config.primary_rgbm_ts or '0.8'
    primary_opacity = config.primary_opacity or '0'
    primary_rgbs = config.primary_rgbs or '132,188,218'
    primary_rgbs_ts = config.primary_rgbs_ts or '0.1'
    mode = config.mode or 'light'
    gohome = bar .. "status/" .. (config.gohome or "")
    gouser = bar .. "system/" .. (config.gouser or "")
    gossr = bar .. "services/" .. (config.gossr or "")
    bgqs = config.bgqs or '0'
    setbar = config.setbar or '1'
    dayword = config.dayword or '0'
    background = config.background or '0'
    bkuse = config.bkuse or '0'
    bklock = config.bklock or '1'
    fontd = config.font_d or '1.2rem'
    fontz = config.font_z or '0.92rem'
    fontx = config.font_x or '0.875rem'
else
    primary_rgbm = '45,102,147'
    primary_rgbm_ts = '0.8'
    primary_opacity = '0'
    primary_rgbs = '132,188,218'
    primary_rgbs_ts = '0.1'
    mode = 'light'
    gohome = bar .. "status/"
    gouser = bar .. "system/"
    gossr = bar .. "services/"
    bgqs = '1'
    setbar = '1'
    dayword = '0'
    background = '0'
    bkuse = '0'
    bklock = '1'
    fontd = '1.2rem'
    fontz = '0.92rem'
    fontx = '0.875rem'
end

local bk_use = 'background: rgba(var(--primary-rgbbody),1)'
local loginbk_use = 'background: linear-gradient(0deg, rgba(var(--primary-rgbm), 1) 0%, rgba(var(--primary-rgbbody), 1) 100%);display: block;'

	local ufilter = string.format("blur(%dpx)", tonumber(primary_opacity))
	if primary_opacity == '0' then
	    ufilter = 'none'
	end

	local bg_url = media..'/img/bg1.jpg'
    local bg_lock = bg_url
	if background == '0' then
		math.randomseed(os.time())

		local theme_dir = resource .. '/background/'
		if not fs.access('/www' .. resource .. '/background/') then
			local theme_dir = media .. '/background/'
		end
		local bgcount = 0
		local currentBg = {}
		local bgs,attr = {}
		for i, f in ipairs(glob("/www" .. theme_dir .. "*")) do
					attr = fs.stat(f)
					if attr then
						local ext = getExtension(fs.basename(f))
						if ext == "jfif" or ext == "pjp" or ext == "pjpeg" or ext == "jpeg" or ext == "jpg" or ext == "png" or ext == "gif"  then
								local bg = {}
								bg.type = ext
								bg.url = theme_dir .. fs.basename(f)
								table.insert(bgs,bg)
								bgcount = bgcount + 1
						end
					end
		end
		if bgcount > 0 then
		    currentBg = bgs[math.random(1,bgcount)]
		    picurl = currentBg.url
		end
	else
		picurl = sys.exec("/usr/libexec/kucat/kucat_wallpaper")
	end
	if (picurl and picurl ~= '') then
	 		  bg_url = picurl
	end
	if bklock == '0' then
		math.randomseed(os.time())
		local bk_dir = media .. "/bg/"
		local bkcount = 0
		local currentbk = {}
		local bgs,attr = {}
		for i, f in ipairs(glob("/www" .. bk_dir .. "*")) do
					attr = fs.stat(f)
					if attr then
						local ext = getExtension(fs.basename(f))
						if ext == "jfif" or ext == "pjp" or ext == "pjpeg" or ext == "jpeg" or ext == "jpg" or ext == "png" or ext == "gif"  then
								local bg = {}
								bg.type = ext
								bg.url = bk_dir .. fs.basename(f)
								table.insert(bgs,bg)
								bkcount = bkcount + 1
						end
					end
		end
		if bkcount > 0 then
		    currentbk = bgs[math.random(1,bkcount)]
		    bg_lock = currentbk.url
		end
	end
	if dayword == '1' then
  	   showword = sys.exec("/usr/libexec/kucat/kucat_word")
	end
	if bkuse == '1'  then
		if bklock == '0' then
	             bk_use = "background-image:url(" .. bg_lock .. ")"
	             loginbk_use = "background-image:url(" .. bg_url .. ")"
		else
	             bk_use="background-image:url("..bg_url..")"
	             loginbk_use = "background-image:url(" .. bg_url .. ")"
		end
	else
		if bklock == '0' then
	             loginbk_use = "background-image:url(" .. bg_url .. ")"
	    end
	end
-%>

<!DOCTYPE html>
<html lang="<%=luci.i18n.context.lang%>">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.5, viewport-fit=cover">

    <meta name="theme-color" content="#ffffff">
    <meta name="color-scheme" content="light dark">
    <meta name="msapplication-TileColor" content="<%=(mode == 'dark' and '#1a1a1a' or '#ffffff')%>">

    <link rel="preload" href="<%=media%>/css/style.css?v=<%= ver.luciversion %>" as="style">
    <link rel="preload" href="<%=media%>/css/theme.css?v=<%= ver.luciversion %>" as="style">

    <meta name="x5-fullscreen" content="true">
    <meta name="full-screen" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no, email=no, address=no">
    
    <link rel="manifest" href="<%=media%>/manifest.json" crossorigin="use-credentials">
    <link rel="shortcut icon" href="<%=media%>/favicon.ico" type="image/x-icon">
    <link rel="icon" href="<%=media%>/logo.png" type="image/png">
    <link rel="mask-icon" href="<%=media%>/logo.png" color="#ffffff">
    
    <link rel="apple-touch-icon" href="<%=media%>/img/logo180.png">
    <link rel="apple-touch-icon" sizes="150x150" href="<%=media%>/img/logo150.png">
    <meta name="apple-touch-fullscreen" content="yes">
    
    <meta name="msapplication-config" content="<%=media%>/browserconfig.xml">
    <meta name="msapplication-TileImage" content="<%=media%>/logo.png">
    
    <title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
    
    <link rel="stylesheet" href="<%=media%>/css/style.css?v=<%= ver.luciversion %>" media="print" onload="this.media='all'">
    <link rel="stylesheet" href="<%=media%>/css/theme.css?v=<%= ver.luciversion %>" media="print" onload="this.media='all'">
    
    <noscript>
        <link rel="stylesheet" href="<%=media%>/css/style.css?v=<%= ver.luciversion %>">
        <link rel="stylesheet" href="<%=media%>/css/theme.css?v=<%= ver.luciversion %>">
    </noscript>

</head>

    <% if node and node.css then %>
        <link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
    <% end -%>
	<style title="text/css">
	<% if css then %>
		<%= css %>
	<% end %> 
	:root {
		<% if mode == 'dark'  then %>
		--primary-rgbbody: 33,45,60;--menu-hover-color: #f5f5f5f5;--menu-fontcolor: #ddd;--primarytextcolor: #bbb;--primary-title-color: #ccc;--menu-color: #ddd;--title-color: #ddd;--body-color: #bbb;--menu-item-titlebg-color: rgba(var(--primary-rgbm),0.5);--body-hover-bgcolor: rgba(255,255,255,0.05);
		<% else %>
		--menu-item-titlebg-color: rgba(var(--primary-rgbm),0.22);--body-hover-bgcolor: rgba(50,50,50,0.05);--primary-rgbbody: 248,248,248;	--menu-hover-color: #fff;--menu-fontcolor: #f5f5f5f5;--primarytextcolor: #677087;--primary-title-color: #4d4d5d;--menu-color: #eee;	--title-color: #65656b;	--body-color: #65656b;
		<% end -%>
		--primary-rgbm: <%=primary_rgbm%>;--primary-rgbm-ts: <%=primary_rgbm_ts%>;--primary-rgbs: <%=primary_rgbs%>;--primary-rgbs-ts: <%=primary_rgbs_ts%>;--font-d: <%=fontd%>;--font-z: <%=fontz%>;--font-x: <%=fontx%>;	--ufilter: <%=ufilter%>;
	<%if bgqs == '0' then %>
		--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(var(--primary-rgbm), var(--primary-rgbm-ts));	--menu-item-hover-bgcolor: rgba(248,248,248, 0.22);	--menu-item-active-bgcolor: rgba(248,248,248, 0.3);
	<% else %>
			--bgqs-image: none;	--menu-bgcolor: rgba(var(--primary-rgbbody), var(--primary-rgbm-ts));--menu-item-hover-bgcolor: rgba(var(--primary-rgbm), 0.8);	--menu-item-active-bgcolor:  rgba(var(--primary-rgbm), var(--primary-rgbm-ts));
		<% if mode == 'dark'  then %>
		--menu-fontcolor: #ddd;
		<% else %>
		--menu-fontcolor: #4d4d5d;
		<% end -%>
	}
     @media screen and (max-width: 1152px) { .main .main-left {background-color:rgba(var(--primary-rgbbody), 1);}}

	<% end -%>
	<% if setbar == "1" then %>
	header.bar-primary .container-bar-left {width: 300px;display: block;}
	header.bar-primary .container-bar-right { width: 0; display: none;	}
	<% else %>
	header.bar-primary .container-bar-left { width: 0;display: none;}
	header.bar-primary .container-bar-right {width: 50px;display: block;}
	<% end -%>

 </style>
	<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>
	<script src="<%=media%>/js/style.js"></script>
</head>
<body class="lang_<%=luci.i18n.context.lang%> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> <% if not (path == "") then %>node-<%= path %><% else %>node-main-login<% end %>" data-page="<%= pcdata(path) %>" style="<%=bk_use%>; "
	<% if mode ~= 'auto' then %>
	data-theme = "<%= mode %>"
	<% end -%>
>
    <header class="bar-primary">
		<div id="header-bar-left" class="container-bar-left">
			<a class="labelbar pdboy-closebar" href="javascript:void(0)" onclick="pdclosebar()" title="Close" ></a>
  			<a class="labelbar pdboy-gohome" href="<%=gohome%>" title="<%:Status%>"></a>
  		    <a class="labelbar pdboy-goadvanced" href="<%=gouser%>" title="<%:System%>"></a>
  			<a class="labelbar pdboy-gossr" href="<%=gossr%>" title="<%:Services%>"></a>
  		    <a class="labelbar pdboy-gonet" href="<%=url("admin/network/network")%>" title="<%:Network%>"></a>
  		    <a class="labelbar pdboy-gopoweroff" href="<%=url("admin/system/reboot")%>" title="<%:Reboot%>"></a>
		</div>
		<div id="header-bar-right" class="container-bar-right">
		    <a class="labelbar pdboy-openbar" href="javascript:void(0)" title="Open" onclick="pdopenbar()"></a>
		</div>
    </header>
    <div class="main">
	    <div style="" class="loading">
	    </div>
        <div class="main-left">
            <div class="sidenav-header d-flex align-items-center">
                <a class="brand" href="/"><%=boardinfo.hostname or "?"%></a>
            </div>
        	<div class="mainmenu" id="mainmenu" style="display:none"></div>
    	</div>
    	<div class="main-right">
            <header class="pd-primary">
    	        <div class="fill">
	        	    <div class="container">
						<div class="flex1">
							<a class="showSide"  title="<%:Menu%>" ></a>
							<a class="brand" href="/"><%=striptags(boardinfo.hostname or "OpenWrt")%></a>
							<% if dayword == '1' then %>
							<a class="showWord" href="#"><%=showword%></a>
							<% end -%>
						</div>
						<div class="status" id="indicators"></div>
						<div class="theme-switcher" id="themeToggle" data-theme="<%= mode %>">
 						   <span class="pdboy-light active"></span>
 						   <span class="pdboy-dark"></span>
						</div>
						<script src="<%=media%>/js/switcher.js"></script>
                        <span > <a class="pdboy-qlogout" href="<%=url("admin/logout")%>" title="<%:Log_out%>" > </a></span>
                	</div>
               </div>
            </header>
            <div class="modemenu-buttons" style="display:none">
            	<ul id="modemenu"></ul>
            </div>
            <div class="darkMask"></div>
            <div class="login-bg" style="<%=loginbk_use%>"></div>
            <div id="maincontent">
			  <div class="container">
				<%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>
					<div class="alert-message warning">
						<h4><%:No password set!%></h4>
						<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 warning">
						<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>
