3 files changed, 167 insertions, 0 deletions
diff --git a/public/fonts/chords.otf b/public/fonts/chords.otf
new file mode 100644
index 0000000..fe10d6e
--- /dev/null
+++ b/public/fonts/chords.otf
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..0982d8e
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="fr">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<title>Chords</title>
+<link rel="stylesheet" href="/main.css">
+
+<body></body>
+
+<script src="main.js"></script>
diff --git a/public/main.css b/public/main.css
new file mode 100644
index 0000000..61d946f
--- /dev/null
+++ b/public/main.css
@@ -0,0 +1,157 @@
+/* Constants */
+
+:root {
+  --color-header: #333333;
+  --color-button: #333333;
+  --color-passed-chord: #AAAAAA;
+
+  --spacing-mouse: 0.25rem;
+  --spacing-cat: 0.5rem;
+  --spacing-dog: 1rem;
+  --spacing-horse: 2rem;
+  --spacing-elephant: 4rem;
+  --spacing-whale: 12.8rem;
+  --spacing-godzilla: 25.6rem;
+
+  --font-size-cat: 0.75rem;
+  --font-size-dog: 1rem;
+  --font-size-lion: 1.25rem;
+  --font-size-bear: 1.5rem;
+  --font-size-cow: 1.75rem;
+  --font-size-horse: 2rem;
+  --font-size-elephant: 4rem;
+  --font-size-whale: 8rem;
+
+  --border-radius-mouse: 0.4rem;
+  --border-radius-cat: 0.8rem;
+
+  --border-width-ant: 0.1rem;
+  --border-width-beetle: 0.2rem;
+  --border-width-mouse: 0.4rem;
+
+  --header-height: var(--spacing-elephant);
+
+  --shift-delay: 0.3s;
+}
+
+/* Reset */
+
+ol {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+input {
+  margin: 0;
+  font-size: inherit;
+  cursor: pointer;
+}
+
+/* Fonts */
+
+@font-face {
+  font-family: chords;
+  src: url(fonts/chords.otf);
+}
+
+/* Common */
+
+body {
+  font-family: sans-serif;
+  margin: 0;
+  font-size: var(--font-size-bear);
+  overflow: hidden;
+  position: relative;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  height: var(--header-height);
+  padding-left: var(--spacing-dog);
+  background-color: var(--color-header);
+  color: white;
+  font-size: var(--font-size-cow);
+  cursor: pointer;
+}
+
+/* Form */
+
+.g-Form {
+  display: flex;
+  margin-top: var(--spacing-elephant);
+  flex-direction: column;
+  row-gap: var(--spacing-horse);
+  align-items: center;
+}
+
+.g-Form label {
+  display: flex;
+  align-items: baseline;
+  cursor: pointer;
+  width: fit-content;
+}
+
+.g-Form input[type="number"] {
+  width: var(--spacing-whale);
+}
+
+.g-Form input[type="checkbox"], .g-Form input[type="number"] {
+  margin-right: var(--spacing-dog);
+}
+
+.g-Form input[type="submit"] {
+  background-color: var(--color-button);
+  color: white;
+  border: none;
+  padding: var(--spacing-cat);
+}
+
+/* Play */
+
+.g-Play {
+  display: flex;
+  align-items: center;
+  height: calc(100vh - var(--header-height));
+  position: relative;
+  font-family: chords;
+  font-size: var(--font-size-whale);
+  overflow: visible;
+}
+
+.g-Play--Shift {
+  animation: Shift var(--shift-delay) ease-in-out;
+}
+
+/* Space between each chord is 35% */
+@keyframes Shift {
+  0%   {transform: translateX(35%);}
+  100% {transform: translateX(0);}
+}
+
+.g-Chord {
+  position: absolute;
+  margin-top: -10px; /* Move a bit higher for a better rendering */
+  transform: translateX(-50%);
+  transition: color var(--shift-delay) ease-in-out;
+}
+
+.g-Chord:nth-child(1) { left:-20%; }
+.g-Chord:nth-child(2) { left:15%; }
+.g-Chord:nth-child(3) { left:50%; }
+.g-Chord:nth-child(4) { left:85%; }
+
+.g-Chord:nth-child(1), .g-Chord:nth-child(2) {
+  color: var(--color-passed-chord);
+}
+
+.g-Chord--Beat {
+  animation: Beat 0.2s linear var(--shift-delay);
+}
+
+@keyframes Beat {
+  0%   {transform: translateX(-50%) scale(100%);}
+  30%  {transform: translateX(-50%) scale(120%);}
+  100% {transform: translateX(-50%) scale(100%);}
+}