demo/index.html

129 lines
4.3 KiB
HTML

<!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>