ok-ready-go/index.html

48 lines
No EOL
1.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script src="https://unpkg.com/crypto-js@4.1.1/crypto-js.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css" />
<link rel="stylesheet" href="index.css" />
<audio id="sound-0" src="sound/0.mp3" preload="auto"></audio>
<audio id="sound-1" src="sound/1.mp3" preload="auto"></audio>
<audio id="sound-2" src="sound/2.mp3" preload="auto"></audio>
<audio id="sound-3" src="sound/3.mp3" preload="auto"></audio>
<audio id="sound-4" src="sound/4.mp3" preload="auto"></audio>
<audio id="sound-5" src="sound/5.mp3" preload="auto"></audio>
<audio id="sound-6" src="sound/6.mp3" preload="auto"></audio>
<audio id="sound-7" src="sound/7.mp3" preload="auto"></audio>
<audio id="sound-8" src="sound/8.mp3" preload="auto"></audio>
<audio id="sound-9" src="sound/9.mp3" preload="auto"></audio>
<audio id="sound-ok-ready-go" src="sound/ok-ready-go.mp3" preload="auto"></audio>
<audio id="sound-silence" src="sound/silence.mp3" preload="auto"></audio>
</head>
<body>
<main class="container">
<div x-data>
<div @click="$store.localState.next()">
<hgroup>
<h1>OK! .. READY! ... GO!</h1>
<h2 x-text="$store.localState.stateHint"></h2>
</hgroup>
<div x-data="Timer">
<p :class="'timer' + (over ? ' over':'')"
x-text="time + 's'"></p>
</div>
</div>
</div>
</main>
</body>