diff options
Diffstat (limited to 'src/view/index.html')
| -rw-r--r-- | src/view/index.html | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/src/view/index.html b/src/view/index.html new file mode 100644 index 0000000..9c567af --- /dev/null +++ b/src/view/index.html @@ -0,0 +1,171 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>FreqTimer Web (Beta)</title> + <!-- Bootstrap --> + <link + href="/freqtimer/css/bootstrap.min.css" + rel="stylesheet" + integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" + > + <style> + .container-sm-max { + max-width: 650px; + margin-right: auto; + margin-left: auto; + padding: 0 0 0 0; + } + + .btn-llg { + padding: 0.5rem 1.0rem; + font-size: 1.6rem; + border-radius: 0.3rem; + } + + .btn-plus { + padding: 1rem 1rem; + font-size: 1.4rem; + border-radius: 0.3rem; + } + </style> + <script src="/freqtimer/js/bundle.min.js"></script> + <!-- Controller Bindings --> + <script> + var timer_view = null; + var sound_handle = null; + + var Module = { + onRuntimeInitialized: function() { + timer_view = new Module.TimerView; + } + }; + + function attach_ios_audio() { + if(sound_handle !== null) { + return; + } + + sound_handle = document.getElementById('sound-handle'); + + if (sound_handle.canPlayType("audio/mpeg")) { + sound_handle.setAttribute("src", "/freqtimer/media/alarm_sound.mp3"); + } else if (sound_handle.canPlayType("audio/ogg")) { + sound_handle.setAttribute("src", "/freqtimer/media/alarm_sound.ogg"); + } else { + alert('This browser does not support audio'); + } + + sound_handle.loop = true; + sound_handle.pause(); + } + + setInterval(() => { + if (timer_view !== null) { + timer_view.handle_timer_update(); + } + }, 10); + </script> + <script src="/freqtimer/build/timer_view.js"></script> +</head> +<body class="d-flex flex-column vh-100" style="touch-action: none;"> + <audio id="sound-handle" style="display:none;"></audio> + <div class="container-sm-max"> + <div class="container-fluid p-3 flex-fill d-flex flex-column justify-content-between"> + <div class="my-3"> + <div class="text-center py-1"> + <h1 id="time-display">00 : 00 : 00 . 0</h1> + <p> + Record floor: <span id="record-floor">00.00</span> + </p> + </div> + <div class="row text-center"> + <div class="col"> + <p style="margin-bottom: 0.5rem;" >Counter 1</p> + <h2><span id="counter-0">0</span></h2> + <p><span id="rate-0">00.00</span></p> + </div> + <div class="col"> + <p style="margin-bottom: 0.5rem;" >Counter 2</p> + <h2><span id="counter-1">0</span></h2> + <p><span id="rate-1">00.00</span></p> + </div> + </div> + </div> + + + + <div class="d-flex flex-wrap justify-content-md-center mb-3"> + <div class="col-6 p-1"> + <button + class="btn btn-outline-primary w-100" + onclick="timer_view.handle_inc_time(1);" + >1s</button> + </div> + <div class="col-6 p-1"> + <button + class="btn btn-outline-primary w-100" + onclick="timer_view.handle_inc_time(6);" + >6s</button> + </div> + <div class="col-6 p-1"> + <button + class="btn btn-outline-primary w-100" + onclick="timer_view.handle_inc_time(10);" + >10s</button> + </div> + <div class="col-6 p-1"> + <button + class="btn btn-outline-primary w-100" + onclick="timer_view.handle_inc_time(15);" + >15s</button> + </div> + <div class="col-6 p-1"> + <button + class="btn btn-outline-primary w-100" + onclick="timer_view.handle_inc_time(30);" + >30s</button> + </div> + <div class="col-6 p-1"> + <button + class="btn btn-outline-primary w-100" + onclick="timer_view.handle_inc_time(60);" + >60s</button> + </div> + </div> + + <div class="d-grid gap-2 d-md-flex justify-content-md-center mb-3"> + <button + class="btn btn-danger btn-llg w-100" + id="clear-reset-btn" + onclick="timer_view.handle_clear_reset();" + >Clear</button> + <button + class="btn btn-success btn-llg w-100" + id="start-stop-btn" + onclick="timer_view.handle_start_stop(); attach_ios_audio();" + >Start</button> + </div> + + <div class="d-flex flex-wrap justify-content-md-center mb-3"> + <div class="col-6 p-1"> + <button + class="btn btn-secondary btn-plus w-100" + id="increment-counter-1-btn" + onclick="timer_view.handle_inc_counter(0);" + >+1</button> + </div> + <div class="col-6 p-1"> + <button + class="btn btn-secondary btn-plus w-100" + id="increment-counter-2-btn" + onclick="timer_view.handle_inc_counter(1);" + >+1</button> + </div> + </div> + </div> + </div> + </main> +</body> +</html> |