diff options
| author | Joris | 2022-06-11 16:42:33 +0200 |
|---|---|---|
| committer | Joris | 2022-06-11 16:42:33 +0200 |
| commit | 03197b1ab992540b951fcbc6f841cfcd42a757f3 (patch) | |
| tree | 2eb5277462b8dfef41e901a945f251725fb7ad8f /public | |
| parent | 70c672535f36edaeaf1d63d4637830b564271c34 (diff) | |
Add kick sequencer
Diffstat (limited to 'public')
| -rw-r--r-- | public/index.html | 10 | ||||
| -rw-r--r-- | public/main.css | 67 | ||||
| -rw-r--r-- | public/sounds/kick.opus | bin | 0 -> 1743 bytes |
3 files changed, 77 insertions, 0 deletions
diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..5facb9e --- /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>Metronome</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..fbc37c4 --- /dev/null +++ b/public/main.css @@ -0,0 +1,67 @@ +:root { + --color-block: lightgray; + --color-block-checked: lightgreen; + + --spacing-mouse: 0.25rem; + --spacing-cat: 0.5rem; + --spacing-dog: 1rem; + --spacing-horse: 2rem; + --spacing-elephant: 4rem; +} + +body { + margin: var(--spacing-dog); +} + +.g-Bpm { + display: block; + margin-bottom: var(--spacing-dog); +} + +.g-Input { + margin-left: var(--spacing-dog); +} + +.g-PlayStop { + margin-bottom: var(--spacing-dog); +} + +.g-Sequencer { + margin-top: var(--spacing-dog); +} + +.g-Sequencer__Buttons { + margin-bottom: var(--spacing-dog); + display: flex; + gap: var(--spacing-dog); +} + +.g-Sequencer__Blocks { + display: flex; + gap: var(--spacing-cat); +} + +.g-Sequencer__Block { + width: var(--spacing-horse); + height: var(--spacing-horse); + background-color: lightgray; + cursor: pointer; +} + +.g-Sequencer__Block:hover { + filter: brightness(110%); +} + +.g-Sequencer__Block--Checked { + background-color: lightgreen; +} + +.g-Sequencer__Block--Beat { + animation: beat 0.2s linear; +} + +@keyframes beat { + 0% {transform: scale(100%);} + 30% {transform: scale(105%);} + 100% {transform: scale(100%);} +} diff --git a/public/sounds/kick.opus b/public/sounds/kick.opus Binary files differnew file mode 100644 index 0000000..40a8d60 --- /dev/null +++ b/public/sounds/kick.opus |