diff options
| author | Joris | 2022-07-04 11:32:27 +0200 |
|---|---|---|
| committer | Joris | 2022-07-04 19:36:37 +0200 |
| commit | fade87173afbfdd51534646ed49844efa2d0e530 (patch) | |
| tree | 54e8d5d81233fa5f3d1ba60fd8c3085252ebccc4 /public | |
| parent | ce7722c901776ae8f6a64882e902e8ba851411e0 (diff) | |
Play random major and/or minor chords
Diffstat (limited to 'public')
| -rw-r--r-- | public/fonts/chords.otf | bin | 0 -> 42316 bytes | |||
| -rw-r--r-- | public/index.html | 10 | ||||
| -rw-r--r-- | public/main.css | 157 |
3 files changed, 167 insertions, 0 deletions
diff --git a/public/fonts/chords.otf b/public/fonts/chords.otf Binary files differnew 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%);} +} |