Ross
78 lines
2.6 KiB
HTML
78 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>TopTrumps - Dinosaurs</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
|
<script src="https://unpkg.com/htmx.org@1.9.5"></script>
|
|
<style>
|
|
/* Theme variables */
|
|
:root{
|
|
--bg:#ffffff;
|
|
--text:#0a0a0a;
|
|
--muted:#4a4a4a;
|
|
--card-bg:#ffffff;
|
|
--accent:#00d1b2;
|
|
}
|
|
[data-theme="dark"]{
|
|
--bg:#0b0f13;
|
|
--text:#e6eef3;
|
|
--muted:#9aa8b0;
|
|
--card-bg:#0f1620;
|
|
--accent:#79ffd4;
|
|
}
|
|
|
|
body{background:var(--bg); color:var(--text)}
|
|
.app-container{padding:1.5rem}
|
|
.card-item{min-height:140px; background:var(--card-bg); color:var(--text)}
|
|
.highlight-new{animation: highlight 1.6s ease}
|
|
@keyframes highlight{0%{background:lavenderblush}100%{background:transparent}}
|
|
|
|
/* Theme toggle */
|
|
#theme-toggle{margin-left:0.5rem}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section class="section">
|
|
<div class="container app-container">
|
|
<div class="level">
|
|
<div class="level-left">
|
|
<h1 class="title">TopTrumps — Dinosaurs</h1>
|
|
</div>
|
|
<div class="level-right">
|
|
<div class="level-item">
|
|
<button id="theme-toggle" class="button is-small" aria-pressed="false">Toggle theme</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="messages"></div>
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
</section>
|
|
</body>
|
|
<script>
|
|
(function(){
|
|
const root = document.documentElement;
|
|
const toggle = document.getElementById('theme-toggle');
|
|
function applyTheme(t){
|
|
if(t==='dark') root.setAttribute('data-theme','dark');
|
|
else root.removeAttribute('data-theme');
|
|
if(toggle) toggle.setAttribute('aria-pressed', t==='dark');
|
|
}
|
|
// initial: localStorage -> prefers-color-scheme -> light
|
|
const stored = localStorage.getItem('toptrumps-theme');
|
|
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
applyTheme(stored || (prefersDark ? 'dark' : 'light'));
|
|
if(toggle){
|
|
toggle.addEventListener('click', ()=>{
|
|
const current = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
|
|
const next = current === 'dark' ? 'light' : 'dark';
|
|
applyTheme(next);
|
|
localStorage.setItem('toptrumps-theme', next);
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</html>
|