diff options
Diffstat (limited to 'src/view')
| -rw-r--r-- | src/view/index.html | 86 |
1 files changed, 52 insertions, 34 deletions
diff --git a/src/view/index.html b/src/view/index.html index 32dd74e..0b66bc8 100644 --- a/src/view/index.html +++ b/src/view/index.html @@ -19,16 +19,30 @@ } .btn-llg { - padding: 0.5rem 1.0rem; + padding: 0.7rem 1.0rem; font-size: 1.6rem; border-radius: 0.3rem; } .btn-plus { - padding: 1rem 1rem; - font-size: 1.4rem; + padding: 1.3rem 1rem; + font-size: 1.6rem; border-radius: 0.3rem; } + + a { + text-decoration: none; + } + + .copyright { + text-align: center; + font-size: 0.8rem; + } + + html, body, main { + height: 100%; + touch-action: none; + } </style> <script src="/freqtimer/js/bundle.min.js"></script> <!-- Controller Bindings --> @@ -66,37 +80,40 @@ timer_controller.handle_timer_update(); } }, 10); + + window.addEventListener('load', function () { + const copyrightYearEl = document.getElementById("copyright-year"); + copyrightYearEl.innerText = (new Date()).getUTCFullYear(); + }) </script> <script src="/freqtimer/build/timer_view.js"></script> </head> -<body class="d-flex flex-column vh-100" style="touch-action: none;"> +<body> <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"> + <main class="container-sm-max d-flex flex-column"> + <div class="container-fluid pt-2 pb-1 flex-fill d-flex flex-column justify-content-around"> + <div class="mt-1 mb-1"> <div class="text-center py-1"> - <h1 id="time-display">00 : 00 : 00 . 0</h1> - <p> + <h1 id="time-display">00 : 00 : 00.0</h1> + <p class="mb-1" style="font-size: 0.8rem;"> 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> + <p class="mb-1" style="font-size: 0.8rem;" >Counter 1</p> + <h2 class="mb-1"><span id="counter-0">0</span></h2> + <p class="mb-1"><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> + <p class="mb-1" style="font-size: 0.8rem;" >Counter 2</p> + <h2 class="mb-1"><span id="counter-1">0</span></h2> + <p class="mb-1"><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="d-flex flex-wrap justify-content-md-center mb-1"> <div class="col-6 p-1"> <button class="btn btn-outline-primary w-100" @@ -135,37 +152,38 @@ </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_controller.handle_clear_reset();" - >Reset</button> - <button - class="btn btn-success btn-llg w-100" - id="start-stop-btn" - onclick="timer_controller.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"> + <div class="col-6 p-1 mb-1"> <button class="btn btn-secondary btn-plus w-100" id="increment-counter-1-btn" onclick="timer_controller.handle_inc_counter(0);" >+1</button> </div> - <div class="col-6 p-1"> + <div class="col-6 p-1 mb-1"> <button class="btn btn-secondary btn-plus w-100" id="increment-counter-2-btn" onclick="timer_controller.handle_inc_counter(1);" >+1</button> </div> + <div class="col-12 p-1 mt-2"> + <button + class="btn btn-success btn-llg w-100" + id="start-stop-btn" + onclick="timer_controller.handle_start_stop(); attach_ios_audio();" + >Start</button> + </div> + <div class="col-12 p-1"> + <button + class="btn btn-danger btn-llg w-100" + id="clear-reset-btn" + onclick="timer_controller.handle_clear_reset();" + >Reset</button> + </div> </div> </div> - </div> + <p class="copyright mb-1">Made with ❤️ by <a href="/">Alex</a> • Copyright <span id="copyright-year"></span>-2016 • <a href="https://www.git.flu0r1ne.net/freqtimer-web/">Code</a></p> </main> </body> </html> |