From 221b6451fb4f8559a10e7fefebd13ce125ef29d0 Mon Sep 17 00:00:00 2001
From: Joris
Date: Thu, 13 May 2021 14:50:51 +0200
Subject: Rewrite in TypeScript
BuckleScript is no longer maintained. Choose a widely used techno that
will still be maintained in the following years.
---
public/index.html | 42 +++++++++-------
public/main.css | 114 +++++++++++++++++++++++++++++-------------
public/sound/end-tabata.mp3 | Bin 0 -> 34516 bytes
public/sound/end-training.mp3 | Bin 0 -> 54090 bytes
public/sound/start.mp3 | Bin 0 -> 36013 bytes
public/sound/stop.mp3 | Bin 0 -> 37958 bytes
public/sounds/c3.mp3 | Bin 47469 -> 0 bytes
public/sounds/c4.mp3 | Bin 57357 -> 0 bytes
public/sounds/c5.mp3 | Bin 65742 -> 0 bytes
9 files changed, 103 insertions(+), 53 deletions(-)
create mode 100644 public/sound/end-tabata.mp3
create mode 100644 public/sound/end-training.mp3
create mode 100644 public/sound/start.mp3
create mode 100644 public/sound/stop.mp3
delete mode 100644 public/sounds/c3.mp3
delete mode 100644 public/sounds/c4.mp3
delete mode 100644 public/sounds/c5.mp3
(limited to 'public')
diff --git a/public/index.html b/public/index.html
index 6cf6562..a57c5c2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,21 +1,27 @@
-
+
+
+
+Tabata Timer
+
+
-
-
-
- Tabata timer
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
+
+
diff --git a/public/main.css b/public/main.css
index f1efc26..5df74af 100644
--- a/public/main.css
+++ b/public/main.css
@@ -10,15 +10,17 @@ html {
/* Constants */
:root {
+ --color-active: #F3E87F;
--color-header: #333333;
- --color-action: #993333;
- --color-action-darker: #773333;
- --color-timer-arc-total: #EEEEEE;
- --color-timer-arc-progress: #71b571;
+ --color-action: #333333;
+ --color-action-darker: #222222;
+ --color-prepare: #3B6EDC;
+ --color-pause: #888888;
+ --color-work: #71b571;
+ --color-rest: #B15B5B;
+ --color-timer-arc-total: #222222;
--color-timer-hover: #DDEEDD;
- --dial-width: 20rem;
-
--base-font-size: 18px;
}
@@ -38,6 +40,11 @@ body {
margin: 0;
}
+.g-Layout__Page {
+ height: 100vh;
+ overflow-y: auto;
+}
+
.g-Layout__Header {
background-color: var(--color-header);
color: white;
@@ -113,26 +120,42 @@ body {
/* Timer */
.g-Timer {
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- background-color: var(--color-header);
+ display: grid;
+ grid-template-columns: 10% auto 10%;
+ grid-template-rows: 10% auto 10% 10% 10%;
color: white;
}
+.g-Timer--Work {
+ background-color: var(--color-work);
+}
+
+.g-Timer--Rest {
+ background-color: var(--color-rest);
+}
+
+.g-Timer--Prepare {
+ background-color: var(--color-prepare);
+}
+
+.g-Timer__Pause {
+ background-color: var(--color-pause);
+}
+
.g-Timer__Dial {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
- width: var(--dial-width);
- height: var(--dial-width);
- cursor: pointer;
+
+ width: 100%;
+ height: 100%;
+ grid-row: 2;
+ grid-column: 2;
+
background-color: transparent;
color: inherit;
font-size: 3rem;
- margin: 2rem 0;
position: relative;
border: none;
}
@@ -148,45 +171,66 @@ body {
.g-Timer__ArcTotal {
stroke: var(--color-timer-arc-total);
fill: none;
- stroke-width: 10;
+ stroke-width: 20;
}
-.g-Timer__ArcProgress {
- stroke: var(--color-timer-arc-progress);
+.g-Timer__ArcPrepare {
+ stroke: var(--color-prepare);
fill: none;
- stroke-width: 10;
+ stroke-width: 18;
}
-.g-Timer__Step {
- margin-bottom: 0.5rem;
+.g-Timer__ArcWork {
+ stroke: var(--color-work);
+ fill: none;
+ stroke-width: 18;
}
-.g-Timer__Duration:hover {
- background-color: var(--color-timer-hover);
- color: initial;
+.g-Timer__ArcRest {
+ stroke: var(--color-rest);
+ fill: none;
+ stroke-width: 18;
}
-.g-Timer__TabataAndCycle {
- display: flex;
- justify-content: space-around;
- font-size: 1.5rem;
- width: var(--dial-width);
+.g-Timer__ArcProgress {
+ stroke: var(--color-active);
+ fill: none;
+ stroke-width: 18;
}
-.g-Timer__Tabata,
-.g-Timer__Cycle {
- text-align: center;
- margin-bottom: 1rem;
+.g-Timer__Step {
+ margin-bottom: 2rem;
}
-.g-Timer__Stop {
+.g-Timer__Buttons {
+ display: flex;
+ justify-content: space-around;
+ grid-row: 4;
+ grid-column: 2;
+ width: 100%;
+ height: 100%;
+}
+
+.g-Timer__Button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
font-size: 1.5rem;
background-color: var(--color-action);
border: 3px solid var(--color-action-darker);
color: white;
padding: 0.5rem 0.8rem;
width: 10rem;
- margin-top: 2rem;
cursor: pointer;
text-align: center;
+ text-decoration: none;
+}
+
+.g-Timer__Button:not(:last-child) {
+ margin-right: 2rem;
+}
+
+.g-Timer__Button--Active {
+ background-color: var(--color-active);
+ color: black;
}
diff --git a/public/sound/end-tabata.mp3 b/public/sound/end-tabata.mp3
new file mode 100644
index 0000000..860c703
Binary files /dev/null and b/public/sound/end-tabata.mp3 differ
diff --git a/public/sound/end-training.mp3 b/public/sound/end-training.mp3
new file mode 100644
index 0000000..8af4c27
Binary files /dev/null and b/public/sound/end-training.mp3 differ
diff --git a/public/sound/start.mp3 b/public/sound/start.mp3
new file mode 100644
index 0000000..05aee23
Binary files /dev/null and b/public/sound/start.mp3 differ
diff --git a/public/sound/stop.mp3 b/public/sound/stop.mp3
new file mode 100644
index 0000000..c618f28
Binary files /dev/null and b/public/sound/stop.mp3 differ
diff --git a/public/sounds/c3.mp3 b/public/sounds/c3.mp3
deleted file mode 100644
index 13e661a..0000000
Binary files a/public/sounds/c3.mp3 and /dev/null differ
diff --git a/public/sounds/c4.mp3 b/public/sounds/c4.mp3
deleted file mode 100644
index 0266119..0000000
Binary files a/public/sounds/c4.mp3 and /dev/null differ
diff --git a/public/sounds/c5.mp3 b/public/sounds/c5.mp3
deleted file mode 100644
index 8ff926e..0000000
Binary files a/public/sounds/c5.mp3 and /dev/null differ
--
cgit v1.2.3