From fade87173afbfdd51534646ed49844efa2d0e530 Mon Sep 17 00:00:00 2001
From: Joris
Date: Mon, 4 Jul 2022 11:32:27 +0200
Subject: Play random major and/or minor chords
---
public/fonts/chords.otf | Bin 0 -> 42316 bytes
public/index.html | 10 +++
public/main.css | 157 ++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 167 insertions(+)
create mode 100644 public/fonts/chords.otf
create mode 100644 public/index.html
create mode 100644 public/main.css
(limited to 'public')
diff --git a/public/fonts/chords.otf b/public/fonts/chords.otf
new file mode 100644
index 0000000..fe10d6e
Binary files /dev/null and b/public/fonts/chords.otf differ
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 @@
+
+
+
+
+Chords
+
+
+
+
+
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%);}
+}
--
cgit v1.2.3