Snapshot: full project state

templates/bg-demo.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Cosmic Backgrounds — theme gallery</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; min-height: 100vh; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; color: #e8eaf6; background: #050510; }
+    .overlay {
+      position: relative; z-index: 2;
+      max-width: 900px; margin: 0 auto; padding: 60px 24px;
+    }
+    h1 { font-size: 2rem; margin: 0 0 6px; }
+    .sub { color: #9aa0c0; margin: 0 0 28px; }
+    .picker { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
+    .picker a {
+      text-decoration: none; color: #cfc4ff; font-weight: 600; font-size: 0.92rem;
+      padding: 10px 18px; border-radius: 999px;
+      border: 1px solid rgba(130,110,255,0.3);
+      background: rgba(20,18,48,0.55);
+      transition: all .2s ease;
+    }
+    .picker a.active, .picker a:hover {
+      background: linear-gradient(135deg, #7b2ff7, #2b6cff);
+      color: #fff; border-color: transparent;
+      box-shadow: 0 4px 20px rgba(123,47,247,0.4);
+    }
+    .card {
+      background: rgba(20,18,48,0.6);
+      border: 1px solid rgba(130,110,255,0.2);
+      border-radius: 18px; padding: 28px;
+      backdrop-filter: blur(8px);
+      margin-bottom: 16px;
+    }
+    .card h2 { margin: 0 0 10px; font-size: 1.2rem; }
+    .card p { color: #9aa0c0; line-height: 1.7; margin: 0; }
+    code {
+      display: block; margin-top: 40px; padding: 14px 18px;
+      background: rgba(10,10,30,0.7); border: 1px solid rgba(130,110,255,0.2);
+      border-radius: 10px; font-size: 0.85rem; color: #7cffb0;
+      overflow-x: auto; white-space: nowrap;
+    }
+  </style>
+</head>
+<body>
+  <script src="{{ url_for('static', filename='cosmic-bg.js') }}" data-theme="{{ theme }}"></script>
+
+  <div class="overlay">
+    <h1>✨ Cosmic Backgrounds</h1>
+    <p class="sub">Current theme: <strong>{{ theme }}</strong> — click any to preview. Drop into any site with one script tag.</p>
+
+    <div class="picker">
+      {% for t in themes %}
+      <a href="{{ url_for('bg_demo') }}?theme={{ t }}" class="{{ 'active' if t == theme else '' }}">{{ t }}</a>
+      {% endfor %}
+    </div>
+
+    <div class="card">
+      <h2>This is how your content sits over it</h2>
+      <p>The background is a fixed, pointer-events-none canvas layered behind everything — your existing site, nav, cards and text all render on top unchanged. Every theme is slow + smooth, and pauses automatically when the tab is in the background (zero wasted CPU).</p>
+    </div>
+
+    <div class="card">
+      <h2>Add it to any site</h2>
+      <p>One line in the <code>&lt;head&gt;</code> — swap <code>data-theme</code> to taste:</p>
+    </div>
+
+    <code>&lt;script src="https://supernova.thetempleofdoom.com/static/cosmic-bg.js" data-theme="{{ theme }}"&gt;&lt;/script&gt;</code>
+  </div>
+</body>
+</html>