initial commit: 1/3 of demo page is done

2024-07-05 14:15:45 +04:00 · 2024-07-05 14:15:45 +04:00 · 8ce585747e
commit 8ce585747e
1 changed files with 129 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html>
+  <head>
+  	<meta charset="UTF-8">
+  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+  	<title>Themes Demo</title>
+    <style>
+      main > div:not(:target) { display: none; }
+    </style>
+    <script>
+      addEventListener('DOMContentLoaded', () => {
+        const buildCssLink = () => {
+          return
+            '/' +
+            (localStorage.getItem('theme') || 'purple') +
+            '/dist/main-' +
+            (localStorage.getItem('dark') ? 'dark' : 'light') +
+            '.css'
+        }
+
+        const css = document.createElement('link')
+        css.rel = 'stylesheet'
+        css.href = buildCssLink()
+        document.head.append(css)
+
+        document.getElementById('theme-name').addEventListener('input', ev => {
+          localStorage.setItem('theme', ev.target.value)
+          css.href = buildCssLink()
+        })
+
+        document.getElementById('theme-dark').addEventListener('input', ev => {
+          localStorage.setItem('dark', ev.target.checked)
+          css.href = buildCssLink()
+        })
+      })
+    </script>
+    <link rel="stylesheet" href="/hljs/styles/default.min.css">
+    <script src="/hljs/highlight.min.js" onload="hljs.highlightAll()"></script>
+  </head>
+  <body class="centered">
+    <nav class="top-menu">
+      <ul>
+        <li><a href="#page1">Text + media</a></li>
+        <li><a href="#page2">Blocks</a></li>
+        <li><a href="#page3">Inputs + buttons</a></li>
+      </ul>
+      <ul>
+        <li><a href="#theme">Theme</a></li>
+        <li><a href="https://dc09.ru">dc09.ru</a></li>
+      </ul>
+    </nav>
+    <main>
+      <p>Hello World!</p>
+      <div id="page1">
+        <hgroup>
+          <h1>Title: hgroup > h1</h1>
+          <h2>Description: hgroup > *:nth-child(2)</h2>
+        </hgroup>
+        <p>
+          Lorem ipsum <b><i>dolor</i> sit amet <s>consectetur</s>, adipisicing <u>elit</u>.</b>
+          Enim vel ab, <a href="javascript:alert('a link')">quos <b>optio <u>accusantium</u></b> <i>non</i></a><i>!</i>
+          Pariatur a, obcaecati, veniam natus magnam <abbr title="nothing">nihil</abbr>,
+          ad unde fuga expedita cum nesciunt error <i><u>quas</u></i>.
+        </p>
+        <p>
+          <kbd>SysRq</kbd> + <kbd>B</kbd> = re<b>b</b>oot
+        </p>
+        <table>
+          <thead><th>Album name</th><th>Released</th><th>Track count</th></thead>
+          <tbody>
+            <tr><td>Hybrid Theory</td><td>Oct 24, 2000</td><td>12</td></tr>
+            <tr><td><b>Meteora</b></td><td>Mar 25, 2003</td><td>13</td></tr>
+            <tr><td>Minutes to Midnight</td><td>May 14, 2007</td><td>12</td></tr>
+            <tr>
+              <td><a href="https://en.wikipedia.org/wiki/A_Thousand_Suns">A Thousand Suns</a></td>
+              <td>Sep 13, 2010</td>
+              <td>15</td>
+            </tr>
+          </tbody>
+        </table>
+        <figure>
+          <img
+            src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg"
+            alt="Elephant at sunset"
+            loading="lazy">
+          <figcaption>Caption</figcaption>
+        </figure>
+        <blockquote>
+          <p>
+            On each landing, opposite the lift-shaft, the poster with the enormous face gazed from the wall.
+            It was one of those pictures which are so contrived that the eyes follow you about when you move.
+            'BIG BROTHER IS WATCHING YOU' the caption beneath it ran.
+          </p>
+          <footer>&mdash; George Orwell, <cite>Nineteen Eighty-Four</cite></footer>
+        </blockquote>
+        <p>
+          <pre><code class="language-go">package main
+
+import "github.com/gofiber/fiber/v3"
+
+func main() {
+  app := fiber.New()
+
+  app.Get("/", func(c fiber.Ctx) error {
+    return c.SendString("Hello Fiber")
+  })
+
+  app.Listen("127.0.0.1:8080", fiber.ListenConfig{
+    EnablePrefork: true,
+  })
+}</code></pre>
+        </p>
+      </div>
+      <div id="theme">
+        <div class="input">
+          <label for="theme-name">Theme name</label>
+          <select id="theme-name">
+            <option value="purple" selected>purple</option>
+            <option value="monospace">monospace</option>
+          </select>
+        </div>
+        <div class="input">
+          <label for="theme-dark">Dark variant</label>
+          <input type="checkbox" id="theme-dark">
+        </div>
+      </div>
+    </main>
+  </body>
+</html>