diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..660ba0b Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html index a3ef6fc..dda0300 100644 --- a/index.html +++ b/index.html @@ -4,20 +4,26 @@ The Myrtle Tree +
- -
- - - -
diff --git a/main.js b/main.js index 27df6d9..5a3db45 100644 --- a/main.js +++ b/main.js @@ -1,14 +1,30 @@ const backgroundAudio = document.getElementById("backgroundAudio"); +const playPauseButton = document.getElementById("playPause") +let audioPlaying = false -const playAudio = () => { - backgroundAudio.play(); -}; - -const pauseAudio = () => { - backgroundAudio.pause(); +const playPauseAudio = () => { + if (audioPlaying === true) { + playPauseButton.innerHTML = playPauseButton.innerHTML.replace('pause', 'play'); + backgroundAudio.pause(); + audioPlaying = false; + } else { + playPauseButton.innerHTML = playPauseButton.innerHTML.replace('play', 'pause'); + backgroundAudio.play(); + audioPlaying = true; + } }; const stopAudio = () => { - backgroundAudio.pause(); backgroundAudio.currentTime = 0; + audioPlaying = true; + playPauseAudio(); +}; + +const begin = () => { + // First pause the audio + playPauseAudio(); + + // Then fade everything out + + // Finally, load in the new content }; diff --git a/public/audio/1.ogg b/public/audio/1.ogg deleted file mode 100644 index ba17a5a..0000000 Binary files a/public/audio/1.ogg and /dev/null differ diff --git a/public/audio/roli.webm b/public/audio/roli.weba similarity index 100% rename from public/audio/roli.webm rename to public/audio/roli.weba diff --git a/public/images/menu.svg b/public/images/menu.svg index 33c224e..cb00e26 100644 --- a/public/images/menu.svg +++ b/public/images/menu.svg @@ -1,4 +1,41 @@ - - - + + + + + diff --git a/public/images/mute.svg b/public/images/mute.svg index 4bfc579..f9cef89 100644 --- a/public/images/mute.svg +++ b/public/images/mute.svg @@ -1,4 +1,41 @@ - - - + + + + + diff --git a/public/images/pause.svg b/public/images/pause.svg index 490ab2c..b5e8d79 100644 --- a/public/images/pause.svg +++ b/public/images/pause.svg @@ -1,4 +1,40 @@ - - - + + + + + diff --git a/public/images/play.svg b/public/images/play.svg index 1c0448c..1f399c2 100644 --- a/public/images/play.svg +++ b/public/images/play.svg @@ -1,4 +1,41 @@ - - - + + + + + diff --git a/public/images/stop.svg b/public/images/stop.svg index 2006a3c..3305e4a 100644 --- a/public/images/stop.svg +++ b/public/images/stop.svg @@ -1,4 +1,40 @@ - - - + + + + + diff --git a/public/images/volume.svg b/public/images/volume.svg index a3a10d4..9e75b91 100644 --- a/public/images/volume.svg +++ b/public/images/volume.svg @@ -1,4 +1,41 @@ - - - + + + + + diff --git a/styles.css b/styles.css index 5de78dc..f3bcaf6 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,6 @@ :root { --border-radius: 12px; - --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --foreground-rgb: 255, 255, 255; @@ -22,35 +22,58 @@ body { flex-direction: column; justify-content: space-around; align-items: center; - margin: 10vh 10vw; + margin: 10dvh 10dvw; } .centre { margin: 25vh 0; - padding: 1rem 1.2rem; - border-radius: var(--border-radius); +} + +.centre #button { background: rgb(var(--card-rgb)); border: 1px solid rgb(var(--card-border-rgb)); + border-radius: var(--border-radius); + padding: 1rem 1.2rem; transition: background 200ms, border 200ms; } footer { + display: grid; width: 100%; - display: flex; - justify-content: space-between; - font-family: var(--font-sans); + grid-template-columns: repeat(3, 1fr); + align-items: center; +} + +footer section { + justify-self: center; +} + +footer #credits { + text-align: right; +} + +.controlButton { + border-radius: var(--border-radius); + background: none; + border: none; + cursor: pointer; +} + +.controlImage { + height: 50px; + width: 50px; } /* Enable hover only on non-touch devices */ @media (hover: hover) and (pointer: fine) { - .centre:hover { + .centre #button:hover { background: rgba(var(--card-rgb), 0.7); border: 1px solid rgba(var(--card-border-rgb), 0.7); } } @media (prefers-reduced-motion) { - .centre:hover { + .centre #button:hover { transform: none; } }