9 files changed, 103 insertions, 53 deletions
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 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="fr">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<title>Tabata Timer</title>
+<link rel="stylesheet" href="/main.css">
+<link rel="icon" href="/icon.png">
 
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Tabata timer</title>
-    <link rel="stylesheet" href="main.css" />
-    <link rel="icon" href="/icon.png">
-  </head>
+<body>
+  <script>
+    // https://github.com/al6x/stupid&#45;simple&#45;typescript&#45;web&#45;starter
+    window.define = function(name, required, moduleFn) {
+      var require = function() { throw new Error("AMD require not supported!")}
+      var exports = window.define.modules[name] = {}
+      var resolved = [require, exports]
+      for (var i = 2; i < required.length; i++) {
+        var m = window.define.modules[required[i]]
+        if (!m) throw new Error("AMD module `" + required[i] + "` not found!")
+        resolved.push(m)
+      }
+      moduleFn.apply(null, resolved)
+    }
+    window.define.modules = {}
+  </script>
 
-  <body>
-
-    <main id="g-Layout__Main">
-    </main>
-
-    <script src="main.js"></script>
-
-  </body>
-
-</html>
+  <script src="main.js"></script>
+</body>
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
--- /dev/null
+++ b/public/sound/end-tabata.mp3
diff --git a/public/sound/end-training.mp3 b/public/sound/end-training.mp3
new file mode 100644
index 0000000..8af4c27
--- /dev/null
+++ b/public/sound/end-training.mp3
diff --git a/public/sound/start.mp3 b/public/sound/start.mp3
new file mode 100644
index 0000000..05aee23
--- /dev/null
+++ b/public/sound/start.mp3
diff --git a/public/sound/stop.mp3 b/public/sound/stop.mp3
new file mode 100644
index 0000000..c618f28
--- /dev/null
+++ b/public/sound/stop.mp3
diff --git a/public/sounds/c3.mp3 b/public/sounds/c3.mp3
deleted file mode 100644
index 13e661a..0000000
--- a/public/sounds/c3.mp3
+++ /dev/null
diff --git a/public/sounds/c4.mp3 b/public/sounds/c4.mp3
deleted file mode 100644
index 0266119..0000000
--- a/public/sounds/c4.mp3
+++ /dev/null
diff --git a/public/sounds/c5.mp3 b/public/sounds/c5.mp3
deleted file mode 100644
index 8ff926e..0000000
--- a/public/sounds/c5.mp3
+++ /dev/null