weircon-front: SSO-portal til weircon.dk (Authentik-login, app-dashboard, admin, favoritter, tema, palette)
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,15 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Weircon — admin{% endblock %}
|
||||
{% block body %}
|
||||
<h1>Admin-panel</h1>
|
||||
<p class="lead">Indstillinger for homelab'et. Tilføj nye moduler i <code>ADMIN_MODULES</code>.</p>
|
||||
<div class="grid" style="margin-top:1.6rem">
|
||||
{% for m in modules %}
|
||||
<a class="card" href="/admin/{{ m.key }}">
|
||||
<div class="head"><span class="ico">{{ m.icon }}</span><span class="name">{{ m.title }}</span></div>
|
||||
<div class="sub">{{ m.desc }}</div>
|
||||
<div class="go">Åbn →</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,25 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Admin — app-beskrivelser{% endblock %}
|
||||
{% block body %}
|
||||
<h1>App-beskrivelser & grupper</h1>
|
||||
<p class="lead">Beskrivelsen og gruppen kommer fra hver apps felter i Authentik. Rediger her — det gemmes tilbage i Authentik og slår igennem på både portalen og Authentiks egen side.</p>
|
||||
{% if saved %}<div class="flash">{{ saved }}</div>{% endif %}
|
||||
<form method="post" action="/admin/apps">
|
||||
<table style="margin-top:1rem">
|
||||
<thead><tr><th style="width:24%">App</th><th style="width:18%">Gruppe</th><th>Beskrivelse</th></tr></thead>
|
||||
<tbody>
|
||||
{% for r in rows %}
|
||||
<tr>
|
||||
<td>{{ r.name }}<input type="hidden" name="slug" value="{{ r.slug }}"></td>
|
||||
<td><input name="group" value="{{ r.group }}" placeholder="fx Home" list="groups"></td>
|
||||
<td><input name="desc" value="{{ r.desc }}" placeholder="kort beskrivelse"></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<datalist id="groups">
|
||||
{% for g in rows|map(attribute='group')|reject('equalto','')|unique %}<option value="{{ g }}">{% endfor %}
|
||||
</datalist>
|
||||
<p style="margin-top:1.1rem"><button class="btn" type="submit">Gem alle</button></p>
|
||||
</form>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,14 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Admin — cookies{% endblock %}
|
||||
{% block body %}
|
||||
<h1>Cookie-tekster</h1>
|
||||
<p class="lead">Teksterne der vises i cookie-banneret og på /cookies. (Frontend kan læse dem fra <code>/api/settings</code>.)</p>
|
||||
{% if saved %}<div class="flash">{{ saved }}</div>{% endif %}
|
||||
<form method="post" action="/admin/cookies">
|
||||
<h2>Banner-tekst</h2>
|
||||
<textarea name="cookie_banner">{{ banner }}</textarea>
|
||||
<h2>Tekst på /cookies</h2>
|
||||
<textarea name="cookie_page">{{ page }}</textarea>
|
||||
<p style="margin-top:1rem"><button class="btn" type="submit">Gem</button></p>
|
||||
</form>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,25 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Admin — IP-labels{% endblock %}
|
||||
{% block body %}
|
||||
<h1>IP → label & land</h1>
|
||||
<p class="lead">Mærk kendte IP-adresser. Nøgle = præcis IP eller præfiks (fx <code>192.168.</code>). Land = ISO-kode (fx <code>dk</code>) der overstyrer geolokation. Gemmes live til NPMplus.</p>
|
||||
{% if saved %}<div class="flash">{{ saved }}</div>{% endif %}
|
||||
<form method="post" action="/admin/ip-labels">
|
||||
<table id="tbl" style="margin-top:1rem">
|
||||
<thead><tr><th style="width:40%">IP / præfiks</th><th>Label</th><th style="width:90px">Land</th><th style="width:40px"></th></tr></thead>
|
||||
<tbody>
|
||||
{% for r in rows %}
|
||||
<tr><td><input name="ip" value="{{ r.ip }}"></td><td><input name="label" value="{{ r.label }}"></td><td><input name="country" value="{{ r.country }}"></td><td><button type="button" class="btn secondary" onclick="this.closest('tr').remove()">✕</button></td></tr>
|
||||
{% endfor %}
|
||||
<tr><td><input name="ip" placeholder="fx 192.168."></td><td><input name="label" placeholder="Hjemme"></td><td><input name="country" placeholder="dk"></td><td><button type="button" class="btn secondary" onclick="this.closest('tr').remove()">✕</button></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p style="margin-top:1rem;display:flex;gap:.6rem">
|
||||
<button type="button" class="btn secondary" onclick="addRow()">+ Tilføj række</button>
|
||||
<button type="submit" class="btn">Gem</button>
|
||||
</p>
|
||||
</form>
|
||||
<script>
|
||||
function addRow(){var t=document.querySelector('#tbl tbody');var tr=document.createElement('tr');tr.innerHTML='<td><input name="ip"></td><td><input name="label"></td><td><input name="country"></td><td><button type="button" class="btn secondary" onclick="this.closest(\'tr\').remove()">✕</button></td>';t.appendChild(tr);}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,15 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Admin — statistik{% endblock %}
|
||||
{% block body %}
|
||||
<h1>Statistik</h1>
|
||||
<p class="lead">Hurtigt overblik fra Matomo (sidste 7 dage).</p>
|
||||
{% if stats %}
|
||||
<div class="grid" style="margin-top:1.5rem">
|
||||
<div class="stat"><div class="n">{{ stats.visits_7d }}</div><div class="muted">besøg (7 dage)</div></div>
|
||||
<div class="stat"><div class="n">{{ stats.actions_7d }}</div><div class="muted">handlinger (7 dage)</div></div>
|
||||
</div>
|
||||
<p style="margin-top:1.5rem"><a class="btn secondary" href="{{ matomo }}">Åbn Matomo →</a></p>
|
||||
{% else %}
|
||||
<div class="err">Kunne ikke hente data fra Matomo (mangler token eller forbindelse).</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,253 @@
|
||||
<!doctype html>
|
||||
<html lang="da" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#0b0f17" media="(prefers-color-scheme: dark)" />
|
||||
<meta name="theme-color" content="#f6f8fb" media="(prefers-color-scheme: light)" />
|
||||
<link rel="icon" href="/static/icons/icon.svg" type="image/svg+xml" />
|
||||
<title>{% block title %}Weircon{% endblock %}</title>
|
||||
<script>
|
||||
(function () {
|
||||
var t = localStorage.getItem('theme') ||
|
||||
(window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
|
||||
document.documentElement.dataset.theme = t;
|
||||
document.addEventListener('click', function (e) {
|
||||
var b = e.target.closest('[data-theme-toggle]');
|
||||
if (!b) return;
|
||||
var next = document.documentElement.dataset.theme === 'light' ? 'dark' : 'light';
|
||||
document.documentElement.dataset.theme = next;
|
||||
localStorage.setItem('theme', next);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Inter Variable"; font-style: normal; font-weight: 100 900;
|
||||
font-display: swap; src: url("/static/fonts/inter.woff2") format("woff2");
|
||||
}
|
||||
:root, html[data-theme="dark"] {
|
||||
--bg:#0b0f17; --surface:#121a27; --surface2:#182232; --border:#243044;
|
||||
--text:#e6e9ef; --muted:#97a3b6; --accent:#38bdf8; --accent2:#818cf8;
|
||||
}
|
||||
html[data-theme="light"] {
|
||||
--bg:#f6f8fb; --surface:#ffffff; --surface2:#eef2f8; --border:#dde4ee;
|
||||
--text:#0f1729; --muted:#54617a; --accent:#0284c7; --accent2:#4f46e5;
|
||||
}
|
||||
* { box-sizing:border-box; }
|
||||
html { scroll-behavior:smooth; color-scheme:dark; }
|
||||
html[data-theme="light"] { color-scheme:light; }
|
||||
body {
|
||||
margin:0; min-height:100vh; display:flex; flex-direction:column;
|
||||
background:var(--bg); color:var(--text);
|
||||
font:16px/1.7 "Inter Variable", ui-sans-serif, system-ui, -apple-system, sans-serif;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
body, a, span, div, p, h1, h2, .card, input, button, nav { transition: background-color .35s ease, border-color .35s ease, color .35s ease; }
|
||||
body::before {
|
||||
content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
|
||||
background:
|
||||
radial-gradient(60rem 30rem at 70% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
|
||||
radial-gradient(50rem 30rem at 10% 0%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 70%);
|
||||
}
|
||||
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
|
||||
a { color:inherit; }
|
||||
.wrap { width:100%; max-width:960px; margin:0 auto; padding:2.5rem 1.25rem 4rem; flex:1; }
|
||||
/* nav */
|
||||
nav { display:flex; align-items:center; gap:1.1rem; width:100%; max-width:960px; margin:0 auto; padding:1.1rem 1.25rem; }
|
||||
nav .brand { font-weight:800; font-size:1.15rem; letter-spacing:-.02em; }
|
||||
nav .brand .dot { color:var(--accent); }
|
||||
nav .links { display:flex; gap:1.1rem; }
|
||||
nav a { text-decoration:none; color:var(--muted); font-size:.95rem; font-weight:500; }
|
||||
nav a:hover { color:var(--text); }
|
||||
nav .spacer { flex:1; }
|
||||
nav .who { color:var(--muted); font-size:.9rem; }
|
||||
/* typografi */
|
||||
h1 { font-size:2.2rem; letter-spacing:-.025em; margin:.6rem 0 .35rem; font-weight:800; }
|
||||
h2 { font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin:2.6rem 0 1rem; font-weight:600; }
|
||||
.lead { color:var(--muted); font-size:1.05rem; max-width:46rem; }
|
||||
/* filter */
|
||||
.filter { margin:1.4rem 0 .2rem; position:relative; max-width:22rem; }
|
||||
.filter input { padding-left:2.2rem; }
|
||||
.filter .mag { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--muted); }
|
||||
/* card-grid med ENS størrelser */
|
||||
.grid { display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); margin-top:1rem; }
|
||||
.card {
|
||||
display:flex; flex-direction:column; min-height:7.25rem; height:100%;
|
||||
background:color-mix(in srgb, var(--surface) 70%, transparent);
|
||||
border:1px solid var(--border); border-radius:1rem; padding:1.1rem 1.15rem;
|
||||
text-decoration:none; color:inherit;
|
||||
transition:border-color .18s ease, transform .18s ease, background .18s ease;
|
||||
}
|
||||
a.card:hover { border-color:var(--accent); transform:translateY(-3px);
|
||||
background:color-mix(in srgb, var(--surface) 92%, transparent); }
|
||||
.card.hidden { display:none; }
|
||||
.card .head { display:flex; align-items:center; gap:.65rem; }
|
||||
.card .ico {
|
||||
flex:0 0 auto; width:2.1rem; height:2.1rem; border-radius:.6rem;
|
||||
display:grid; place-items:center; font-weight:700; font-size:1rem;
|
||||
background:color-mix(in srgb, var(--accent) 16%, transparent);
|
||||
color:var(--accent); overflow:hidden;
|
||||
}
|
||||
.card .ico img { width:100%; height:100%; object-fit:contain; }
|
||||
.card .name { font-weight:600; letter-spacing:-.01em; line-height:1.25; }
|
||||
.card .sub { color:var(--muted); font-size:.86rem; margin-top:.6rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
.card .go { color:var(--accent); font-size:.8rem; margin-top:.7rem; opacity:.85; }
|
||||
/* knapper / forms */
|
||||
.btn { display:inline-block; background:var(--accent); color:#06101f; font-weight:600;
|
||||
text-decoration:none; padding:.6rem 1.15rem; border-radius:.7rem; border:0; cursor:pointer; font:inherit; font-size:.95rem; }
|
||||
.btn:hover { filter:brightness(1.08); }
|
||||
.btn.secondary { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
|
||||
table { width:100%; border-collapse:collapse; }
|
||||
th, td { border:1px solid var(--border); padding:.45rem .55rem; text-align:left; }
|
||||
th { color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; }
|
||||
input, textarea { width:100%; background:var(--surface2); border:1px solid var(--border); color:var(--text);
|
||||
border-radius:.55rem; padding:.5rem .65rem; font:inherit; }
|
||||
input:focus, textarea:focus { outline:none; border-color:var(--accent); }
|
||||
textarea { min-height:5rem; resize:vertical; }
|
||||
.flash { background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid var(--accent);
|
||||
color:var(--accent); border-radius:.7rem; padding:.65rem .95rem; margin:1rem 0; font-size:.9rem; }
|
||||
.err { background:color-mix(in srgb, #f5a623 14%, transparent); border:1px solid #f5a623;
|
||||
color:#f5a623; border-radius:.7rem; padding:.65rem .95rem; margin:1rem 0; font-size:.9rem; }
|
||||
.muted { color:var(--muted); }
|
||||
code { background:var(--surface2); padding:.12em .42em; border-radius:.35rem; font-size:.85em; }
|
||||
.stat { background:color-mix(in srgb, var(--surface) 70%, transparent); border:1px solid var(--border); border-radius:1rem; padding:1.3rem; }
|
||||
.stat .n { font-size:2.1rem; font-weight:800; letter-spacing:-.02em; }
|
||||
/* footer */
|
||||
.foot { width:100%; max-width:960px; margin:0 auto; padding:1.6rem 1.25rem 2.5rem; color:var(--muted); font-size:.85rem; border-top:1px solid var(--border); }
|
||||
.foot a { color:var(--accent); text-decoration:none; }
|
||||
/* tema-toggle (sol/måne) — ført videre fra asger.weirsøe.dk */
|
||||
.theme-toggle { display:inline-grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:.75rem;
|
||||
color:var(--muted); background:transparent; cursor:pointer; border:1px solid transparent; }
|
||||
.theme-toggle:hover { color:var(--text); background:var(--surface2); }
|
||||
.theme-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
|
||||
.sun-and-moon > :is(.moon, .sun, .sun-beams) { transform-origin:center; }
|
||||
.sun-and-moon > :is(.moon, .sun) { fill:currentColor; }
|
||||
.sun-and-moon > .sun-beams { stroke:currentColor; stroke-width:2px; }
|
||||
.sun-and-moon > .sun { transition:transform .5s cubic-bezier(.5,1.25,.75,1.25); }
|
||||
.sun-and-moon > .sun-beams { transition:transform .5s cubic-bezier(.5,1.5,.75,1.25), opacity .5s cubic-bezier(.25,0,.3,1); }
|
||||
.sun-and-moon .moon > circle { transition:transform .25s cubic-bezier(0,0,0,1); }
|
||||
@supports (cx:1) { .sun-and-moon .moon > circle { transition:cx .25s cubic-bezier(0,0,0,1); } }
|
||||
[data-theme="dark"] .sun-and-moon > .sun { transform:scale(1.75); transition-timing-function:cubic-bezier(.25,0,.3,1); transition-duration:.25s; }
|
||||
[data-theme="dark"] .sun-and-moon > .sun-beams { opacity:0; transform:rotateZ(-25deg); transition-duration:.15s; }
|
||||
[data-theme="dark"] .sun-and-moon > .moon > circle { transform:translateX(-7px); transition-delay:.25s; transition-duration:.5s; }
|
||||
@supports (cx:1) { [data-theme="dark"] .sun-and-moon > .moon > circle { cx:17; transform:translateX(0); } }
|
||||
@media (prefers-reduced-motion: reduce) { .sun-and-moon *, body, .card { transition:none !important; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<span class="brand">weircon<span class="dot">.</span></span>
|
||||
<div class="links">
|
||||
<a href="/">Forside</a>
|
||||
{% if is_admin %}<a href="/admin">Admin</a>{% endif %}
|
||||
</div>
|
||||
<span class="spacer"></span>
|
||||
{% if user %}<span class="who">{{ user.name }}</span> <a href="/auth/logout">Log ud</a>{% endif %}
|
||||
<button type="button" data-theme-toggle class="theme-toggle" title="Skift mellem lyst og mørkt tema" aria-label="Skift tema">
|
||||
<svg class="sun-and-moon" aria-hidden="true" width="22" height="22" viewBox="0 0 24 24">
|
||||
<mask class="moon" id="moon-mask"><rect x="0" y="0" width="100%" height="100%" fill="white" /><circle cx="24" cy="10" r="6" fill="black" /></mask>
|
||||
<circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor" />
|
||||
<g class="sun-beams" stroke="currentColor">
|
||||
<line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
|
||||
<line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
<div class="wrap">
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
<footer class="foot">
|
||||
Driftet af Asger Weirsøe · self-hosted på Proxmox · <a href="mailto:asger@weirsoe.dk">asger@weirsoe.dk</a>
|
||||
</footer>
|
||||
|
||||
<!-- ⌘K / Ctrl+K kommandopalette — ført videre fra asger.weirsøe.dk, tilpasset portalens apps -->
|
||||
<div id="palette" class="palette-overlay" hidden>
|
||||
<div class="palette-box" role="dialog" aria-modal="true" aria-label="Kommandopalette">
|
||||
<input id="palette-input" class="palette-input" type="text" placeholder="Søg tjenester, sider eller kommandoer…" autocomplete="off" spellcheck="false" />
|
||||
<ul id="palette-list" class="palette-list" role="listbox"></ul>
|
||||
<div class="palette-hint">↑↓ navigér · ↵ vælg · esc luk · ⌘/Ctrl K åbn</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.palette-overlay { position:fixed; inset:0; z-index:100;
|
||||
background:color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter:blur(4px);
|
||||
display:flex; align-items:flex-start; justify-content:center; padding-top:15vh; }
|
||||
.palette-overlay[hidden] { display:none; }
|
||||
.palette-box { width:min(36rem, calc(100vw - 2rem)); border:1px solid var(--border); border-radius:1rem;
|
||||
background:var(--surface); box-shadow:0 24px 64px rgb(0 0 0 / .45); overflow:hidden; }
|
||||
.palette-input { width:100%; padding:.9rem 1.1rem; font-size:1rem; background:transparent; color:var(--text);
|
||||
border:0; outline:none; border-bottom:1px solid var(--border); }
|
||||
.palette-list { max-height:50vh; overflow-y:auto; padding:.35rem; margin:0; list-style:none; }
|
||||
.palette-item { display:flex; justify-content:space-between; align-items:center; gap:1rem;
|
||||
padding:.55rem .8rem; border-radius:.6rem; cursor:pointer; font-size:.925rem; }
|
||||
.palette-item.is-selected, .palette-item:hover:not(.palette-empty) { background:var(--surface2); }
|
||||
.palette-empty { color:var(--muted); cursor:default; }
|
||||
.palette-badge { font-size:.7rem; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:.05rem .5rem; }
|
||||
.palette-hint { padding:.5rem 1.1rem; font-size:.72rem; color:var(--muted); border-top:1px solid var(--border); }
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
if (window.__palette) return; window.__palette = true;
|
||||
var index = null, items = [], sel = 0;
|
||||
var staticActions = [
|
||||
{ type:'action', title:'Tema: mørkt', run:function(){ setTheme('dark'); } },
|
||||
{ type:'action', title:'Tema: lyst', run:function(){ setTheme('light'); } },
|
||||
{ type:'action', title:'Log ud', url:'/auth/logout' },
|
||||
];
|
||||
function setTheme(t){ document.documentElement.dataset.theme = t; localStorage.setItem('theme', t); }
|
||||
function el(id){ return document.getElementById(id); }
|
||||
function ensureIndex(){
|
||||
if (index) return Promise.resolve();
|
||||
return fetch('/api/search-index').then(function(r){ return r.json(); })
|
||||
.then(function(j){ index = j; }).catch(function(){ index = []; });
|
||||
}
|
||||
function score(q, it){
|
||||
var hay = (it.title + ' ' + (it.extra || '')).toLowerCase();
|
||||
if (!q) return (it.type === 'page' || it.type === 'action') ? 1 : 0.5;
|
||||
if (hay.indexOf(q) === 0) return 3;
|
||||
if (hay.indexOf(q) > -1) return 2;
|
||||
var i = 0; for (var k = 0; k < hay.length; k++) if (hay[k] === q[i]) i++;
|
||||
return i === q.length ? 1 : 0;
|
||||
}
|
||||
function refresh(){
|
||||
var q = el('palette-input').value.trim().toLowerCase();
|
||||
items = (index || []).concat(staticActions)
|
||||
.map(function(it){ return { it: it, s: score(q, it) }; })
|
||||
.filter(function(x){ return x.s > 0; })
|
||||
.sort(function(a, b){ return b.s - a.s; })
|
||||
.slice(0, 9).map(function(x){ return x.it; });
|
||||
sel = 0;
|
||||
el('palette-list').innerHTML = items.map(function(it, i){
|
||||
var badge = it.type === 'app' ? 'app' : it.type === 'action' ? 'kommando' : it.ext ? 'link' : 'side';
|
||||
return '<li class="palette-item' + (i === sel ? ' is-selected' : '') + '" data-i="' + i + '" role="option">' +
|
||||
'<span>' + String(it.title).replace(/</g, '<') + '</span><span class="palette-badge">' + badge + '</span></li>';
|
||||
}).join('') || '<li class="palette-item palette-empty">Ingen resultater</li>';
|
||||
}
|
||||
function paint(){ var ls = el('palette-list').querySelectorAll('.palette-item');
|
||||
for (var i = 0; i < ls.length; i++) ls[i].classList.toggle('is-selected', i === sel); }
|
||||
function choose(i){ var it = items[i]; if (!it) return; close();
|
||||
if (it.run) it.run(); else if (it.ext) window.open(it.url, '_blank', 'noopener'); else window.location.href = it.url; }
|
||||
function open(){ ensureIndex().then(function(){ el('palette').hidden = false; el('palette-input').value = ''; refresh(); el('palette-input').focus(); }); }
|
||||
function close(){ var p = el('palette'); if (p) p.hidden = true; }
|
||||
document.addEventListener('keydown', function(e){
|
||||
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k'){ e.preventDefault(); el('palette').hidden ? open() : close(); return; }
|
||||
var p = el('palette'); if (!p || p.hidden) return;
|
||||
if (e.key === 'Escape') close();
|
||||
else if (e.key === 'ArrowDown'){ e.preventDefault(); sel = Math.min(sel + 1, items.length - 1); paint(); }
|
||||
else if (e.key === 'ArrowUp'){ e.preventDefault(); sel = Math.max(sel - 1, 0); paint(); }
|
||||
else if (e.key === 'Enter'){ e.preventDefault(); choose(sel); }
|
||||
});
|
||||
document.addEventListener('input', function(e){ if (e.target && e.target.id === 'palette-input') refresh(); });
|
||||
document.addEventListener('click', function(e){
|
||||
if (e.target === el('palette')) close();
|
||||
var li = e.target.closest && e.target.closest('.palette-item[data-i]');
|
||||
if (li) choose(+li.dataset.i);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,133 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Weircon — forside{% endblock %}
|
||||
|
||||
{% macro card(a) %}
|
||||
<div class="card" data-slug="{{ a.slug }}" data-search="{{ (a.name ~ ' ' ~ a.desc ~ ' ' ~ a.host ~ ' ' ~ a.group)|lower }}">
|
||||
<a class="card-link" href="{{ a.url }}" aria-label="{{ a.name }}"></a>
|
||||
<button type="button" class="fav{% if a.slug in favorites %} on{% endif %}" data-slug="{{ a.slug }}"
|
||||
aria-pressed="{{ 'true' if a.slug in favorites else 'false' }}" title="Markér som favorit" aria-label="Favorit">★</button>
|
||||
<div class="head">
|
||||
<span class="ico">{% if a.icon and a.icon.startswith('http') %}<img src="{{ a.icon }}" alt="">{% else %}{{ (a.name or '?')[0]|upper }}{% endif %}</span>
|
||||
<span class="name">{{ a.name }}</span>
|
||||
</div>
|
||||
<div class="sub" title="{{ a.desc if a.desc else a.host }}">{{ a.desc if a.desc else a.host }}</div>
|
||||
<div class="go">Åbn →</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% block body %}
|
||||
<h1>Hej, {{ user.name }}</h1>
|
||||
<p class="lead">Tjenester du har adgang til.</p>
|
||||
{% if error %}<div class="err">{{ error }}</div>{% endif %}
|
||||
{% if groups %}
|
||||
<div class="toolbar">
|
||||
<div class="filter">
|
||||
<span class="mag">⌕</span>
|
||||
<input id="appfilter" type="search" placeholder="Filtrér…" autocomplete="off" aria-label="Filtrér tjenester" />
|
||||
</div>
|
||||
<div class="viewtoggle" role="group" aria-label="Visning">
|
||||
<button type="button" data-view="grouped" class="{{ 'on' if view != 'alpha' }}">Grupperet</button>
|
||||
<button type="button" data-view="alpha" class="{{ 'on' if view == 'alpha' }}">Alfabetisk</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="favsec" class="appgroup"{% if not fav_apps %} style="display:none"{% endif %}>
|
||||
<h2>★ Favoritter</h2>
|
||||
<div class="grid" id="favgrid">{% for a in fav_apps %}{{ card(a) }}{% endfor %}</div>
|
||||
</section>
|
||||
|
||||
<div id="view-grouped"{% if view == 'alpha' %} hidden{% endif %}>
|
||||
{% for g in groups %}
|
||||
<section class="appgroup"><h2>{{ g.name }}</h2><div class="grid">{% for a in g.apps %}{{ card(a) }}{% endfor %}</div></section>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div id="view-alpha"{% if view != 'alpha' %} hidden{% endif %}>
|
||||
<section class="appgroup"><h2>Alle tjenester</h2><div class="grid">{% for a in apps_sorted %}{{ card(a) }}{% endfor %}</div></section>
|
||||
</div>
|
||||
<p id="nomatch" class="muted" style="display:none;margin-top:1rem">Ingen tjenester matcher.</p>
|
||||
{% elif not error %}
|
||||
<p class="muted" style="margin-top:1.6rem">Ingen apps fundet for din konto endnu.</p>
|
||||
{% endif %}
|
||||
{% if is_admin %}
|
||||
<section class="appgroup">
|
||||
<h2>Administration</h2>
|
||||
<div class="grid">
|
||||
<a class="card" href="/admin" style="position:relative">
|
||||
<div class="head"><span class="ico">⚙️</span><span class="name">Admin-panel</span></div>
|
||||
<div class="sub">IP-labels, cookies, statistik, app-beskrivelser m.m.</div>
|
||||
<div class="go">Åbn →</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.toolbar { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin:1.4rem 0 .2rem; }
|
||||
.toolbar .filter { margin:0; flex:1; min-width:12rem; }
|
||||
.viewtoggle { display:inline-flex; border:1px solid var(--border); border-radius:.7rem; overflow:hidden; }
|
||||
.viewtoggle button { background:transparent; color:var(--muted); border:0; padding:.5rem .9rem; cursor:pointer; font:inherit; font-size:.88rem; }
|
||||
.viewtoggle button.on { background:var(--surface2); color:var(--text); }
|
||||
.card { position:relative; }
|
||||
.card:hover { border-color:var(--accent); transform:translateY(-3px); background:color-mix(in srgb, var(--surface) 92%, transparent); }
|
||||
.card-link { position:absolute; inset:0; z-index:1; border-radius:inherit; }
|
||||
.fav { position:absolute; top:.55rem; right:.6rem; z-index:2; width:1.7rem; height:1.7rem; border-radius:.5rem;
|
||||
border:0; background:transparent; color:var(--border); cursor:pointer; font-size:1.05rem; line-height:1; padding:0; transition:color .15s, transform .15s; }
|
||||
.fav:hover { color:var(--muted); transform:scale(1.15); }
|
||||
.fav.on { color:#f5c518; }
|
||||
[hidden] { display:none !important; }
|
||||
</style>
|
||||
<script>
|
||||
(function(){
|
||||
function setView(v){
|
||||
var g=document.getElementById('view-grouped'), a=document.getElementById('view-alpha');
|
||||
if(!g||!a) return;
|
||||
g.hidden=(v==='alpha'); a.hidden=(v!=='alpha');
|
||||
document.querySelectorAll('.viewtoggle button').forEach(function(b){ b.classList.toggle('on', b.getAttribute('data-view')===v); });
|
||||
}
|
||||
function setFav(slug,on){
|
||||
document.querySelectorAll('.fav[data-slug="'+CSS.escape(slug)+'"]').forEach(function(b){
|
||||
b.classList.toggle('on',on); b.setAttribute('aria-pressed', on?'true':'false');
|
||||
});
|
||||
var favgrid=document.getElementById('favgrid'), favsec=document.getElementById('favsec');
|
||||
var has=favgrid.querySelector('.card[data-slug="'+CSS.escape(slug)+'"]');
|
||||
if(on && !has){
|
||||
var src=document.querySelector('#view-grouped .card[data-slug="'+CSS.escape(slug)+'"]') || document.querySelector('.card[data-slug="'+CSS.escape(slug)+'"]');
|
||||
if(src){ var c=src.cloneNode(true); favgrid.appendChild(c); }
|
||||
} else if(!on && has){ has.remove(); }
|
||||
favsec.style.display = favgrid.children.length ? '' : 'none';
|
||||
}
|
||||
document.addEventListener('click',function(e){
|
||||
var fav=e.target.closest && e.target.closest('.fav');
|
||||
if(fav){ e.preventDefault(); e.stopPropagation();
|
||||
var slug=fav.getAttribute('data-slug'), on=!fav.classList.contains('on');
|
||||
setFav(slug,on);
|
||||
fetch('/api/favorite',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({slug:slug,on:on})});
|
||||
return;
|
||||
}
|
||||
var vb=e.target.closest && e.target.closest('.viewtoggle button');
|
||||
if(vb){ var v=vb.getAttribute('data-view'); setView(v);
|
||||
fetch('/api/view',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({view:v})});
|
||||
}
|
||||
});
|
||||
// filter på tværs af synlige kort
|
||||
var inp=document.getElementById('appfilter');
|
||||
if(inp){
|
||||
inp.addEventListener('input',function(){
|
||||
var q=inp.value.trim().toLowerCase(), shown=0;
|
||||
document.querySelectorAll('.card[data-search]').forEach(function(c){
|
||||
var hit=!q || c.getAttribute('data-search').indexOf(q)>-1;
|
||||
c.classList.toggle('hidden',!hit); if(hit && c.offsetParent!==null) shown++;
|
||||
});
|
||||
document.querySelectorAll('.appgroup').forEach(function(s){
|
||||
if(s.id==='favsec') return;
|
||||
var any=s.querySelector('.card:not(.hidden)'); s.style.display=any?'':'none';
|
||||
});
|
||||
var nm=document.getElementById('nomatch'); if(nm) nm.style.display=shown?'none':'block';
|
||||
});
|
||||
document.addEventListener('keydown',function(e){
|
||||
if(e.key==='/' && document.activeElement!==inp && !/input|textarea/i.test(document.activeElement.tagName)){ e.preventDefault(); inp.focus(); }
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,9 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Weircon — log ind{% endblock %}
|
||||
{% block body %}
|
||||
<div style="max-width:32rem;margin:10vh auto;text-align:center">
|
||||
<h1 style="font-size:3rem">weircon<span style="color:var(--accent)">.</span></h1>
|
||||
<p class="lead" style="margin:1rem auto 0">Selv-hostet homelab. Log ind med din konto for at se de tjenester du har adgang til.</p>
|
||||
<p style="margin-top:2.2rem"><a class="btn" href="/auth/login">Log ind med Authentik →</a></p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user