Add dark theme and secret key creation script

2026-09-18 23:03:05 +03:00
parent d1d594674f
commit d048ef82b7
8 changed files with 252 additions and 10 deletions
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Eternity Theme — Starter Template</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="eternity-theme.css">
+  <script>(function(){if(localStorage.getItem('ep-theme')==='dark'){document.documentElement.setAttribute('data-theme','dark');}})();</script>
+</head>
+<body>
+  <header class="site-header">
+    <strong style="font-family:'DM Mono',monospace;letter-spacing:1px;">YOUR BRAND</strong>
+    <nav>
+      <a href="#">Home</a>
+      <a href="#">About</a>
+      <a class="button compact" href="#">Get started</a>
+      <button type="button" class="theme-toggle" id="theme-toggle">WASTELAND</button>
+    </nav>
+  </header>
+
+  <main>
+    <section class="hero">
+      <span class="signal-label">/// STARTER TEMPLATE</span>
+      <h1>Reusable <em>post-apocalyptic</em> theme.</h1>
+      <p>Drop <code>eternity-theme.css</code> into any site, wire up the toggle script, and switch between the daylight and wasteland palettes with a single <code>data-theme</code> attribute.</p>
+      <button class="button">Primary action</button>
+    </section>
+
+    <section style="padding:40px max(5vw,24px);">
+      <div class="card-grid">
+        <div class="card"><h2>Card one</h2><p>Short description of a feature or article.</p></div>
+        <div class="card"><h2>Card two</h2><p>Short description of a feature or article.</p></div>
+        <div class="card"><h2>Card three</h2><p>Short description of a feature or article.</p></div>
+      </div>
+    </section>
+
+    <section style="padding:0 max(5vw,24px) 40px;max-width:600px;">
+      <form class="panel">
+        <label>Name<input type="text" placeholder="Jane Doe"></label>
+        <label>Message<textarea rows="4" placeholder="Say something..."></textarea></label>
+        <button class="button" type="submit">Send</button>
+      </form>
+      <div class="flash success" style="margin-top:16px;">This is a success message.</div>
+      <div class="flash error">This is an error message.</div>
+    </section>
+
+    <section style="padding:0 max(5vw,24px) 60px;max-width:700px;">
+      <div class="code-block">
+        <div class="code-block-head"><span>example.js</span><span>copy</span></div>
+        <pre><code>console.log("themed code block");</code></pre>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <span>YOUR BRAND</span>
+    <span>MADE WITH ETERNITY THEME</span>
+  </footer>
+
+  <script>
+    (function(){
+      var root=document.documentElement,btn=document.getElementById('theme-toggle');
+      function label(){btn.textContent=root.getAttribute('data-theme')==='dark'?'DAYLIGHT':'WASTELAND';}
+      label();
+      btn.addEventListener('click', function(){
+        var dark=root.getAttribute('data-theme')==='dark';
+        if (dark) { root.removeAttribute('data-theme'); localStorage.setItem('ep-theme','light'); }
+        else { root.setAttribute('data-theme','dark'); localStorage.setItem('ep-theme','dark'); }
+        label();
+      });
+    })();
+  </script>
+</body>
+</html>