130 lines
4.3 KiB
HTML
130 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>— 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>
|