47 lines
2.0 KiB
HTML
47 lines
2.0 KiB
HTML
{{template "head" .}}
|
|
{{template "topbar" .}}
|
|
<div class="page">
|
|
<div class="float">
|
|
<div class="settings-head">
|
|
<h1>Settings</h1>
|
|
</div>
|
|
<div class="settings-body">
|
|
<h3>Theme</h3>
|
|
<div class="theme-grid" id="theme-grid"></div>
|
|
<p class="hint" style="margin-top:10px">Applies instantly and is saved in this browser.</p>
|
|
<p class="admin-link-row"><a class="admin-link" href="/admin">Admin</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function () {
|
|
var themes = [
|
|
{ id: 'midnight', name: 'Midnight', colors: ['#241B30', '#2D2340', '#3A2D52', '#7A6A9E', '#C4A8F0'] },
|
|
{ id: 'smooth', name: 'Smooth', colors: ['#F6F5FA', '#DAD7E6', '#B5B1C9', '#7A7796', '#2A2A36'] },
|
|
{ id: 'pastel-lavender', name: 'Pastel Lavender', colors: ['#e6e0f5', '#cbb8e7', '#b29edb', '#9b85cf', '#806bb8'] },
|
|
{ id: 'pastel-peach', name: 'Pastel Peach', colors: ['#ffe0d6', '#ffc4a8', '#ffa78f', '#ff8b76', '#f9826c'] },
|
|
{ id: 'pastel-cloud', name: 'Pastel Cloud', colors: ['#cdb4db', '#ffc8dd', '#ffafcc', '#bde0fe', '#a2d2ff'] }
|
|
];
|
|
var grid = document.getElementById('theme-grid');
|
|
var current = document.documentElement.dataset.preset || 'midnight';
|
|
themes.forEach(function (t) {
|
|
var btn = document.createElement('button');
|
|
btn.type = 'button';
|
|
btn.className = 'theme-card';
|
|
btn.setAttribute('aria-pressed', current === t.id ? 'true' : 'false');
|
|
btn.innerHTML = '<strong>' + t.name + '</strong>' +
|
|
'<span class="swatches">' + t.colors.map(function (c) {
|
|
return '<span class="swatch" style="background:' + c + '"></span>';
|
|
}).join('') + '</span>';
|
|
btn.addEventListener('click', function () {
|
|
document.documentElement.dataset.preset = t.id;
|
|
try { localStorage.setItem('palette-theme', t.id); } catch (e) {}
|
|
grid.querySelectorAll('.theme-card').forEach(function (c) { c.setAttribute('aria-pressed', 'false'); });
|
|
btn.setAttribute('aria-pressed', 'true');
|
|
});
|
|
grid.appendChild(btn);
|
|
});
|
|
})();
|
|
</script>
|
|
{{template "foot" .}}
|