From 14ea8103403cde1a0055ded2dcea9033f2337b76 Mon Sep 17 00:00:00 2001
From: flu0r1ne <flu0r1ne@flu0r1ne.net>
Date: Fri, 14 Jul 2023 14:34:27 -0500
Subject: Change layout 100% read view window, add copyright
+ Added authorship, copyright notice, and link to the code
+ Increased size of the +1 buttons
+ Changed layout so the +1 buttons would be prioritized
+ Adjusted margins to fit content within the iOS window
---
src/view/index.html | 86 ++++++++++++++++++++++++++++++++---------------------
1 file changed, 52 insertions(+), 34 deletions(-)
(limited to 'src/view/index.html')
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>
--
cgit v1.2.3