Elements with this class are only shown when JS is available, i.e. they are (mostly) the opposite of the noscript element. This replaces the previous implementation to do that, which was itself based on JavaScript. It is now reusable, declarative and easier to grasp at a glance. As the entire site is built on JS this likely won't be used much beyond its single current invocation.
59 lines
1.7 KiB
HTML
59 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="bar-AT" class="_regular">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Watterblock</title>
|
|
|
|
<link rel="stylesheet" href="/vendored/normalize-8.0.1.css">
|
|
<link rel="stylesheet" href="/style.css">
|
|
<link rel="stylesheet" href="/vendored/material-icons.css" />
|
|
<noscript>
|
|
<style>
|
|
._yesscript {
|
|
display: none !important;
|
|
}
|
|
</style>
|
|
</noscript>
|
|
|
|
<script type="module">
|
|
// initialize DB early
|
|
import WbDb from "/data/db.js";
|
|
WbDb.get();
|
|
</script>
|
|
<script src="/vendored/mithril-2.3.8.js" defer></script>
|
|
<script src="/index.js" type="module"></script>
|
|
|
|
<meta name="application-name" content="Watterblock">
|
|
<meta name="author" content="Adrian Wannenmacher">
|
|
<meta name="description" lang="de-AT"
|
|
content="Einfach zu verwendender Watterblock, der die Daten lokal im Browser speichert.">
|
|
<meta name="keywords" content="Watten,Block,Spiel,Mitschrift">
|
|
<meta name="theme-color" content="lch(86 84 71)" media="(prefers-color-scheme: dark)">
|
|
<meta name="theme-color" content="lch(20 87 292)" media="(prefers-color-scheme: light)">
|
|
</head>
|
|
|
|
<body class="wb-layout">
|
|
<div class="wb-splash _yesscript">
|
|
<div class="spinner"></div>
|
|
<h1>Watterblock</h1>
|
|
<p>I lad grad…</p>
|
|
</div>
|
|
|
|
<noscript class="wb-splash">
|
|
<h1>Watterblock</h1>
|
|
<p>Da Watterblock kann nit aufgmacht werdn.</p>
|
|
<p>
|
|
Des ligt daran, dass ea als Programm direkt in deim Browser laft. Daher
|
|
is ea a völlig von <em>JavaScript</em> abhängig. Sonst geht ea nit.
|
|
</p>
|
|
<p>
|
|
<strong>
|
|
Sei doch so guat und schoit <em>JavaScript</em> wieder ein.
|
|
</strong>
|
|
</p>
|
|
</noscript>
|
|
</body>
|
|
|
|
</html> |