< %#
PrivateRouter Luci Theme
-%>
< %
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") or { }
local node = disp.context.dispatched
local path = table.concat(disp.context.path, "-")
http.prepare_content("text/html; charset=UTF-8")
-%>
<!DOCTYPE html>
< html lang = "<%=luci.i18n.context.lang%>" >
< head >
< meta charset = "utf-8" >
< meta content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name = "viewport" / >
< meta name = "apple-mobile-web-app-capable" content = "yes" >
< meta name = "mobile-web-app-capable" content = "yes" >
< meta name = "theme-color" content = "#09c" >
< meta name = "msapplication-tap-highlight" content = "no" >
< meta name = "msapplication-TileColor" content = "#09c" >
< meta name = "application-name" content = "<%=striptags( (boardinfo.hostname or " ? " ) ) % > - LuCI">
< meta name = "apple-mobile-web-app-title" content = "<%=striptags( (boardinfo.hostname or " ? " ) ) % > - LuCI">
< link rel = "stylesheet" href = "<%=media%>/gaya/gaya.css" >
< link rel = "shortcut icon" href = "<%=media%>/favicon.ico" >
< % if node and node.css then %>
< link rel = "stylesheet" href = "<%=resource%>/<%=node.css%>" >
< % end -%>
< script src = "<%=url('admin/translations', luci.i18n.context.lang)%>?v=git-21.295.66888-fc702bc" > < / script >
< script src = "<%=resource%>/cbi.js?v=git-21.295.66888-fc702bc" > < / script >
< script src = "/www/luci-static/privaterouter/icons/feather.min.js" > < / script >
< title > < %=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI< / title >
< % if css then %>< style title = "text/css" >
< %= css %>
< / style >
< % end -%>
< / 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) %>">
< header >
< div class = "navbar active" >
< div class = "dropdown" >
< a href = "/cgi-bin/luci/admin/status/overview" > < img src = "<%=media%>/images/house-blank.png" / > < / a >
< a href = "/cgi-bin/luci/admin/services/ttyd" > < img src = "<%=media%>/images/terminal.png" / > < / a >
< a href = "/cgi-bin/luci/admin/docker/containers" > < img src = "<%=media%>/images/oc.png" / > < / a >
< a href = "/cgi-bin/luci/admin/apps/shortcutmenu" > < img src = "<%=media%>/images/chart.png" / > < / a >
< a href = "/cgi-bin/luci/admin/nas/fileassistant" > < img src = "<%=media%>/images/file.png" / > < / a >
< a href = "/cgi-bin/luci/admin/vpn/tgwireguard" > < img src = "<%=media%>/images/wg.png" / > < / a >
< a href = "/cgi-bin/luci/admin/network/network" > < img src = "<%=media%>/images/interfaces.png" / > < / a >
< / div >
< label class = "toggler" >
< img src = "<%=media%>/gaya/icons/arrow.svg" alt = "" >
< / label >
< / div >
< script >
{
// Function to run when the DOM is fully loaded
document.addEventListener("DOMContentLoaded", function() {
// Find all checkboxes
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
// Loop over each checkbox
checkboxes.forEach(function(checkbox) {
// Create the switch
var switchElement = document.createElement('label');
switchElement.className = 'switch';
// Create the input for the switch
var input = document.createElement('input');
input.type = 'checkbox';
input.checked = checkbox.checked;
switchElement.appendChild(input);
// Create the slider for the switch
var slider = document.createElement('span');
slider.className = 'slider';
switchElement.appendChild(slider);
// Add the switch to the page
checkbox.parentNode.insertBefore(switchElement, checkbox.nextSibling);
// Hide the original checkbox
checkbox.style.display = 'none';
// When the switch is clicked, update the checkbox
input.addEventListener('change', function() {
checkbox.checked = this.checked;
});
// When the checkbox is updated (e.g. by JavaScript), update the switch
var observer = new MutationObserver(function() {
input.checked = checkbox.checked;
});
observer.observe(checkbox, { attributes: true });
});
});
}
< / script >
< script >
document.addEventListener('DOMContentLoaded', (event) => {
let checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach((checkbox) => {
let label = document.createElement('label');
label.setAttribute('class', 'switch');
let span = document.createElement('span');
span.setAttribute('class', 'slider round');
checkbox.parentNode.insertBefore(label, checkbox);
label.appendChild(checkbox);
label.appendChild(span);
});
});
< / script >
< div class = "fill" >
< div class = "container" >
< a id = "logo" href = "<% if luci.dispatcher.context.authsession then %><%=url('admin/status/overview')%><% else %>#<% end %>" >
< img src = "<%=media%>/brand.png" alt = "OpenWrt" >
< / a >
< div class = "status" id = "indicators" > < / div >
< div class = "logout" >
< a href = "/cgi-bin/luci/admin/logout" data-title = "Logout" > Logout< / a >
< / div >
< div class = "showSide" >
< img src = "<%=media%>/gaya/icons/menu_icon.svg" alt = "" >
< / div >
< / div >
< / div >
< / header >
< div class = "main" >
< div style = "" class = "loading" > < span > < div class = "loading-img" > < / div > < b > < %:Loading%>< / b > < / span > < / div >
< div class = "main-left" id = "mainmenu" style = "display:none" > < / div >
< div class = "main-right" >
< div class = "modemenu-buttons" style = "display:none" >
< ul id = "modemenu" > < / ul >
< / div >
< 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") and path ~= "admin-system-admin-password" then -%>
< %- 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 >
