Add BackgroundImage model and enhance card templates with dynamic backgrounds

2025-12-04 22:16:33 +00:00
parent 33fbae9426
commit d299f7ffd3
12 changed files with 253 additions and 16 deletions
@@ -7,19 +7,71 @@
    <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}
+      .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">
-        <h1 class="title">TopTrumps — Dinosaurs</h1>
+        <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>