84 lines
3.9 KiB
HTML
84 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html lang="en-GB">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<meta name="referrer" content="no-referrer" />
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; base-uri 'none'; connect-src 'self'; font-src 'self'; form-action 'none'; frame-src 'none'; img-src 'self' data:; media-src 'none'; object-src 'none'; script-src 'self'; style-src 'self'; worker-src 'none'" />
|
|
<link rel="preload" href="./fonts/font.otf" as="font" type="font/otf" crossorigin />
|
|
<title>Mode 7. A horror story.</title>
|
|
<link rel="stylesheet" href="./css/style.css" />
|
|
</head>
|
|
<body>
|
|
<main class="wrap">
|
|
<div class="crt-shell" aria-label="Teletext CRT">
|
|
<!-- tabindex allows focus; also helps on some browsers for key capture -->
|
|
<canvas id="crt" tabindex="0"></canvas>
|
|
|
|
<!-- purely visual overlays (scanlines/noise/glow) -->
|
|
<div class="crt-overlay scanlines" aria-hidden="true"></div>
|
|
<div class="crt-overlay vignette" aria-hidden="true"></div>
|
|
<div class="crt-overlay glass" aria-hidden="true"></div>
|
|
</div>
|
|
|
|
<footer class="hint" aria-hidden="true">
|
|
</footer>
|
|
</main>
|
|
|
|
<!-- Mobile on-screen keyboard (only shown on touch devices) -->
|
|
<div id="mobile-keyboard" class="mobile-keyboard">
|
|
<div class="keyboard-row">
|
|
<button class="keyboard-key" data-key="1">1</button>
|
|
<button class="keyboard-key" data-key="2">2</button>
|
|
<button class="keyboard-key" data-key="3">3</button>
|
|
<button class="keyboard-key" data-key="4">4</button>
|
|
<button class="keyboard-key" data-key="5">5</button>
|
|
<button class="keyboard-key" data-key="6">6</button>
|
|
<button class="keyboard-key" data-key="7">7</button>
|
|
<button class="keyboard-key" data-key="8">8</button>
|
|
<button class="keyboard-key" data-key="9">9</button>
|
|
<button class="keyboard-key" data-key="0">0</button>
|
|
</div>
|
|
<div class="keyboard-row">
|
|
<button class="keyboard-key" data-key="q">Q</button>
|
|
<button class="keyboard-key" data-key="w">W</button>
|
|
<button class="keyboard-key" data-key="e">E</button>
|
|
<button class="keyboard-key" data-key="r">R</button>
|
|
<button class="keyboard-key" data-key="t">T</button>
|
|
<button class="keyboard-key" data-key="y">Y</button>
|
|
<button class="keyboard-key" data-key="u">U</button>
|
|
<button class="keyboard-key" data-key="i">I</button>
|
|
<button class="keyboard-key" data-key="o">O</button>
|
|
<button class="keyboard-key" data-key="p">P</button>
|
|
</div>
|
|
<div class="keyboard-row">
|
|
<button class="keyboard-key" data-key="a">A</button>
|
|
<button class="keyboard-key" data-key="s">S</button>
|
|
<button class="keyboard-key" data-key="d">D</button>
|
|
<button class="keyboard-key" data-key="f">F</button>
|
|
<button class="keyboard-key" data-key="g">G</button>
|
|
<button class="keyboard-key" data-key="h">H</button>
|
|
<button class="keyboard-key" data-key="j">J</button>
|
|
<button class="keyboard-key" data-key="k">K</button>
|
|
<button class="keyboard-key" data-key="l">L</button>
|
|
</div>
|
|
<div class="keyboard-row">
|
|
<button class="keyboard-key" data-key="z">Z</button>
|
|
<button class="keyboard-key" data-key="x">X</button>
|
|
<button class="keyboard-key" data-key="c">C</button>
|
|
<button class="keyboard-key" data-key="v">V</button>
|
|
<button class="keyboard-key" data-key="b">B</button>
|
|
<button class="keyboard-key" data-key="n">N</button>
|
|
<button class="keyboard-key" data-key="m">M</button>
|
|
<button class="keyboard-key backspace wide" data-key="backspace">←</button>
|
|
</div>
|
|
<div class="keyboard-row">
|
|
<button class="keyboard-key space" data-key=" ">SPACE</button>
|
|
<button class="keyboard-key enter wide" data-key="enter">ENTER</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="./js/main.js"></script>
|
|
</body>
|
|
</html>
|