aboutsummaryrefslogtreecommitdiff
path: root/src/view/index.html
diff options
context:
space:
mode:
authorflu0r1ne <flu0r1ne@flu0r1ne.net>2023-07-13 12:20:29 -0500
committerflu0r1ne <flu0r1ne@flu0r1ne.net>2023-07-13 12:20:29 -0500
commit2cb9b6fdc38a5df00ade737f90a9daf685ab89c3 (patch)
tree0a01a5fff4785520ae1a8d400b36f6bcdf84c532 /src/view/index.html
downloadfreqtimer-web-2cb9b6fdc38a5df00ade737f90a9daf685ab89c3.tar.xz
freqtimer-web-2cb9b6fdc38a5df00ade737f90a9daf685ab89c3.zip
Init commit
Diffstat (limited to 'src/view/index.html')
-rw-r--r--src/view/index.html171
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>