128 lines
5.6 KiB
Handlebars
128 lines
5.6 KiB
Handlebars
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||
<title>{{title}} - Signage</title>
|
||
<script>
|
||
(function () {
|
||
var storageKey = 'webui-theme';
|
||
var theme = 'light';
|
||
try {
|
||
var storedTheme = window.localStorage.getItem(storageKey);
|
||
if (storedTheme === 'dark' || storedTheme === 'light') {
|
||
theme = storedTheme;
|
||
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||
theme = 'dark';
|
||
}
|
||
} catch (error) {
|
||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||
theme = 'dark';
|
||
}
|
||
}
|
||
|
||
document.documentElement.dataset.theme = theme;
|
||
document.documentElement.style.colorScheme = theme;
|
||
}());
|
||
</script>
|
||
<link rel="stylesheet" href="/assets/css/admin.css" />
|
||
{{#if stylesheets.length}}
|
||
{{#each stylesheets}}
|
||
<link rel="stylesheet" href="/assets/{{this}}" />
|
||
{{/each}}
|
||
{{/if}}
|
||
</head>
|
||
<body class="admin-shell-body {{#if authShell}}auth-shell-body{{/if}} {{bodyClass}}">
|
||
{{#if authShell}}
|
||
<button type="button" class="theme-toggle theme-toggle--floating" data-theme-toggle aria-pressed="false" aria-label="Switch to dark mode">
|
||
<span class="theme-toggle__icon theme-toggle__icon--moon" aria-hidden="true"></span>
|
||
</button>
|
||
<main class="auth-page">
|
||
{{{body}}}
|
||
</main>
|
||
<script src="/assets/js/admin-page.js"></script>
|
||
{{else}}
|
||
{{#if message}}
|
||
<div class="toast" id="app-toast" role="status" aria-live="polite">
|
||
<div class="toast-body">{{message}}</div>
|
||
<button type="button" class="toast-close" id="app-toast-close" aria-label="Dismiss notification">×</button>
|
||
</div>
|
||
{{/if}}
|
||
<div class="app-shell">
|
||
<aside class="sidebar" aria-label="Primary navigation">
|
||
<div class="brand">
|
||
<div class="brand-mark">PS</div>
|
||
<div class="brand-copy">
|
||
<strong>Pulse Signage</strong>
|
||
<span>Admin Panel</span>
|
||
</div>
|
||
</div>
|
||
<div class="sidebar-footer">
|
||
<span class="status-dot status-dot--unknown" id="sidebar-status-dot"></span>
|
||
<div>
|
||
<strong>System status</strong>
|
||
<span id="sidebar-status-text">Checking player service</span>
|
||
</div>
|
||
</div>
|
||
<nav class="nav">
|
||
<span class="nav-label">Manage</span>
|
||
<a class="nav-item {{#if (eq active 'dashboard')}}active{{/if}}" href="/admin">Dashboard</a>
|
||
<a class="nav-item {{#if (eq active 'clients')}}active{{/if}}" href="/admin/clients">Connected clients</a>
|
||
<a class="nav-item {{#if (eq active 'screens')}}active{{/if}}" href="/admin/screens">Screens</a>
|
||
<a class="nav-item {{#if (eq active 'playlists')}}active{{/if}}" href="/admin/playlists">Playlists</a>
|
||
<a class="nav-item {{#if (eq active 'slides')}}active{{/if}}" href="/admin/slides">Slides</a>
|
||
<a class="nav-item {{#if (eq active 'templates')}}active{{/if}}" href="/admin/templates">Slide templates</a>
|
||
<a class="nav-item {{#if (eq active 'canvas-sizes')}}active{{/if}}" href="/admin/canvas-sizes">Canvas sizes</a>
|
||
</nav>
|
||
<div class="sidebar-divider" aria-hidden="true"></div>
|
||
<nav class="nav nav--sidebar-bottom" aria-label="Secondary navigation">
|
||
<a class="nav-item {{#if (eq active 'users')}}active{{/if}}" href="/admin/users">Users</a>
|
||
</nav>
|
||
<div class="sidebar-footer sidebar-footer--account">
|
||
{{#if currentUser}}
|
||
<div class="user-avatar" aria-hidden="true">{{userInitial currentUser.name currentUser.username}}</div>
|
||
{{else}}
|
||
<div class="user-avatar user-avatar--fallback" aria-hidden="true">A</div>
|
||
{{/if}}
|
||
<div>
|
||
<strong class="sidebar-account-name">{{#if currentUser}}{{#if currentUser.name}}{{currentUser.name}}{{else}}{{currentUser.username}}{{/if}}{{else}}Account{{/if}}</strong>
|
||
<span>{{#if currentUser}}{{currentUser.username}}{{else}}Not signed in{{/if}}</span>
|
||
<div class="sidebar-footer-links">
|
||
{{#if currentUser}}
|
||
<a href="/admin/account">Account</a>
|
||
<a href="/logout">Sign out</a>
|
||
{{else}}
|
||
<a href="/login">Sign in</a>
|
||
{{/if}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="theme-toggle theme-toggle--sidebar" data-theme-toggle aria-pressed="false" aria-label="Switch to dark mode">
|
||
<span class="theme-toggle__icon theme-toggle__icon--moon" aria-hidden="true"></span>
|
||
</button>
|
||
</aside>
|
||
|
||
<button type="button" class="sidebar-backdrop" data-sidebar-backdrop aria-label="Close navigation"></button>
|
||
|
||
<div class="shell-main">
|
||
<button type="button" class="sidebar-toggle sidebar-toggle--shell" data-sidebar-toggle aria-label="Toggle navigation" aria-expanded="false">
|
||
<span class="sidebar-toggle-icon" aria-hidden="true"></span>
|
||
</button>
|
||
|
||
<main class="content">
|
||
<div class="page-shell">
|
||
{{{body}}}
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
<script src="/assets/js/admin-page.js"></script>
|
||
{{/if}}
|
||
{{#if scripts.length}}
|
||
{{#each scripts}}
|
||
<script src="/assets/{{this}}"></script>
|
||
{{/each}}
|
||
{{/if}}
|
||
</body>
|
||
</html>
|