104 lines
4.9 KiB
HTML
104 lines
4.9 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="lib/crypto_helper.js"></script>
|
|
<script src="js/index.js"></script>
|
|
<script src="js/localState.js"></script>
|
|
<script src="js/mqtt.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>
|
|
<div class="timer-container-div hide-after-init">
|
|
<h1 class="loading" aria-busy="true">Initializing...</h1>
|
|
</div>
|
|
<main class="container hide-before-init" x-data>
|
|
<div class="timer-container-div" x-show="$store.localState._state !== 5">
|
|
<div @click="$store.localState.next()" class="tap-area" x-show="$store.localState._state === 2"></div>
|
|
<div @click="$store.localState.next()" class="timer-div">
|
|
<hgroup>
|
|
<h1>OK! .. READY! ... GO!</h1>
|
|
<h2><span x-text="$store.localState.stateHint"></span> <b x-show="$store.mqtt.connected">(connected)</b></h2>
|
|
</hgroup>
|
|
|
|
<div x-data="Timer">
|
|
<p :class="'timer' + (over ? ($store.localState._state === 3 ? ' sending':' over'):'')"
|
|
x-text="time + 's'"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div x-show="$store.localState._state === 0" class="remote-connection-card">
|
|
<div class="container">
|
|
<details>
|
|
<div class="container">
|
|
<p>If you want to automatically transfer the time to a computer, follow these steps:</p>
|
|
|
|
<div x-show="!$store.mqtt.connected">
|
|
<ul>
|
|
<li>Enter a password and press tap connect</li>
|
|
|
|
<li>
|
|
<form x-data="PasswordForm()" @submit.prevent="submitForm">
|
|
<label for="passwordForm_password">Password:</label>
|
|
<input id="passwordForm_password" type="text" x-model="formData.password"
|
|
placeholder="Password" />
|
|
<small>Make sure, this is exactly the same on your computer!</small>
|
|
<button type="submit">Connect</button>
|
|
</form>
|
|
</li>
|
|
<li>Download the receiver tool from <a
|
|
href="https://itsblue.dev/dorian/ok-ready-go/releases/latest">here</a> to your computer
|
|
</li>
|
|
<li>Start the receiver tool on your computer</li>
|
|
<li>Enter the same password on the receiver tool and click connect</li>
|
|
<li>Done!</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div x-show="$store.mqtt.connected">
|
|
<ul>
|
|
<li>Download the receiver tool from <a
|
|
href="https://itsblue.dev/dorian/ok-ready-go/releases/latest">here</a> to your computer
|
|
</li>
|
|
<li>Start the receiver tool on your computer</li>
|
|
<li>Enter the password '<b x-text="$store.localState.password"></b>' on the receiver tool and click connect</li>
|
|
<li>Done!</li>
|
|
<li>
|
|
<p>If you no longer want to send the time, tap Disconnect</p>
|
|
<button @click="$store.localState.password = ''">Disconnect</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<summary role="button">Remote connection</summary>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timer-container-div" x-show="$store.localState._state === 5">
|
|
<h1 class="loading" aria-busy="true">Connecting...</h1>
|
|
</div>
|
|
</main>
|
|
</body> |