Add audio play/stop button

This commit is contained in:
Rory Healy 2023-04-18 03:33:53 +10:00
parent cc760ff19d
commit 287c588ec6
Signed by: roryhealy
GPG key ID: 610ED1098B8F435B
12 changed files with 307 additions and 42 deletions

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 KiB

View file

@ -4,20 +4,26 @@
<head> <head>
<title>The Myrtle Tree</title> <title>The Myrtle Tree</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head> </head>
<body> <body>
<main class="wrapper"> <main class="wrapper">
<button class="centre">Click to begin</button> <section class="centre">
<section class="controls"> <button id="button" onclick="begin()">Click to begin</button>
<button id="play" onclick="playAudio()">Play</button>
<button id="pause" onclick="pauseAudio()">Pause</button>
<button id="stop" onclick="stopAudio()">Stop</button>
<audio id="backgroundAudio" src="public/audio/roli.webm" type="audio/webm">
</section> </section>
<footer> <footer>
<p>The Myrtle Tree - A game about sound and reliving memories.</p> <p id="title">The Myrtle Tree - A game about sound and reliving memories.</p>
<p>By Rory Healy.</p> <section class="controls">
<button id="playPause" class="controlButton" onclick="playPauseAudio()">
<img class="controlImage" src="public/images/play.svg" alt="play"></img>
</button>
<button id="stop" class="controlButton" onclick="stopAudio()">
<img class="controlImage" src="public/images/stop.svg" alt="stop"></img>
</button>
<audio id="backgroundAudio" src="public/audio/roli.weba" type="audio/weba">
</section>
<p id="credits">By Rory Healy.</p>
</footer> </footer>
</main> </main>
<script src="main.js"></script> <script src="main.js"></script>

28
main.js
View file

@ -1,14 +1,30 @@
const backgroundAudio = document.getElementById("backgroundAudio"); const backgroundAudio = document.getElementById("backgroundAudio");
const playPauseButton = document.getElementById("playPause")
let audioPlaying = false
const playAudio = () => { const playPauseAudio = () => {
backgroundAudio.play(); if (audioPlaying === true) {
}; playPauseButton.innerHTML = playPauseButton.innerHTML.replace('pause', 'play');
const pauseAudio = () => {
backgroundAudio.pause(); backgroundAudio.pause();
audioPlaying = false;
} else {
playPauseButton.innerHTML = playPauseButton.innerHTML.replace('play', 'pause');
backgroundAudio.play();
audioPlaying = true;
}
}; };
const stopAudio = () => { const stopAudio = () => {
backgroundAudio.pause();
backgroundAudio.currentTime = 0; backgroundAudio.currentTime = 0;
audioPlaying = true;
playPauseAudio();
};
const begin = () => {
// First pause the audio
playPauseAudio();
// Then fade everything out
// Finally, load in the new content
}; };

Binary file not shown.

View file

@ -1,4 +1,41 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg"> <svg
<path d="m122.5 105c-4.6875-0.070312-9.207 1.7422-12.547 5.0312-3.3359 3.2891-5.2188 7.7812-5.2188 12.469s1.8828 9.1797 5.2188 12.469c3.3398 3.2891 7.8594 5.1016 12.547 5.0312h455c4.6875 0.070312 9.207-1.7422 12.547-5.0312 3.3359-3.2891 5.2188-7.7812 5.2188-12.469s-1.8828-9.1797-5.2188-12.469c-3.3398-3.2891-7.8594-5.1016-12.547-5.0312zm0 157.5c-4.6875-0.070312-9.207 1.7422-12.547 5.0312-3.3359 3.2891-5.2188 7.7812-5.2188 12.469s1.8828 9.1797 5.2188 12.469c3.3398 3.2891 7.8594 5.1016 12.547 5.0312h455c4.6875 0.070312 9.207-1.7422 12.547-5.0312 3.3359-3.2891 5.2188-7.7812 5.2188-12.469s-1.8828-9.1797-5.2188-12.469c-3.3398-3.2891-7.8594-5.1016-12.547-5.0312zm0 157.5c-4.6875-0.070312-9.207 1.7422-12.547 5.0312-3.3359 3.2891-5.2188 7.7812-5.2188 12.469s1.8828 9.1797 5.2188 12.469c3.3398 3.2891 7.8594 5.1016 12.547 5.0312h455c4.6875 0.070312 9.207-1.7422 12.547-5.0312 3.3359-3.2891 5.2188-7.7812 5.2188-12.469s-1.8828-9.1797-5.2188-12.469c-3.3398-3.2891-7.8594-5.1016-12.547-5.0312z" fill-rule="evenodd"/> width="700pt"
height="700pt"
version="1.1"
viewBox="0 0 700 700"
id="svg4"
sodipodi:docname="menu.svg"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs8" />
<sodipodi:namedview
id="namedview6"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="pt"
showgrid="false"
inkscape:zoom="1.1003571"
inkscape:cx="467.12106"
inkscape:cy="468.93866"
inkscape:window-width="1489"
inkscape:window-height="1090"
inkscape:window-x="2421"
inkscape:window-y="176"
inkscape:window-maximized="0"
inkscape:current-layer="svg4" />
<path
d="m122.5 105c-4.6875-0.070312-9.207 1.7422-12.547 5.0312-3.3359 3.2891-5.2188 7.7812-5.2188 12.469s1.8828 9.1797 5.2188 12.469c3.3398 3.2891 7.8594 5.1016 12.547 5.0312h455c4.6875 0.070312 9.207-1.7422 12.547-5.0312 3.3359-3.2891 5.2188-7.7812 5.2188-12.469s-1.8828-9.1797-5.2188-12.469c-3.3398-3.2891-7.8594-5.1016-12.547-5.0312zm0 157.5c-4.6875-0.070312-9.207 1.7422-12.547 5.0312-3.3359 3.2891-5.2188 7.7812-5.2188 12.469s1.8828 9.1797 5.2188 12.469c3.3398 3.2891 7.8594 5.1016 12.547 5.0312h455c4.6875 0.070312 9.207-1.7422 12.547-5.0312 3.3359-3.2891 5.2188-7.7812 5.2188-12.469s-1.8828-9.1797-5.2188-12.469c-3.3398-3.2891-7.8594-5.1016-12.547-5.0312zm0 157.5c-4.6875-0.070312-9.207 1.7422-12.547 5.0312-3.3359 3.2891-5.2188 7.7812-5.2188 12.469s1.8828 9.1797 5.2188 12.469c3.3398 3.2891 7.8594 5.1016 12.547 5.0312h455c4.6875 0.070312 9.207-1.7422 12.547-5.0312 3.3359-3.2891 5.2188-7.7812 5.2188-12.469s-1.8828-9.1797-5.2188-12.469c-3.3398-3.2891-7.8594-5.1016-12.547-5.0312z"
fill-rule="evenodd"
id="path2"
style="stroke:#ffffff;fill:#ffffff" />
</svg> </svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View file

@ -1,4 +1,41 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg"> <svg
<path d="m401.86 70.004c-2.7266 0.078125-5.3945 0.78906-7.793 2.082l-188.6 101.58h-83.094c-4.6406 0-9.0938 1.8438-12.375 5.125-3.2812 3.2852-5.125 7.7344-5.125 12.375v175c0 4.6445 1.8438 9.0938 5.125 12.375s7.7344 5.125 12.375 5.125h82.988l188.54 104.14v0.003906c5.4219 3 12.023 2.9102 17.363-0.23828 5.3359-3.1445 8.6133-8.8789 8.6133-15.074v-385c0-4.7305-1.9141-9.2617-5.3086-12.559-3.3906-3.2969-7.9766-5.082-12.703-4.9414zm-16.988 46.793v326.04l-166.52-92.012c-2.5977-1.4258-5.5156-2.168-8.4766-2.1562h-70v-140h70c2.8984-0.007813 5.7539-0.73438 8.3047-2.1172zm87.328 75.539v-0.003907c-4.668 0-9.1445 1.8672-12.43 5.1836-3.2852 3.3164-5.1094 7.8086-5.0664 12.477 0.042969 4.668 1.9492 9.1289 5.293 12.383l40.129 40.125-40.129 40.125v0.003906c-3.3906 3.2578-5.3281 7.7422-5.375 12.445-0.050781 4.7031 1.7969 9.2266 5.125 12.555 3.3242 3.3242 7.8477 5.1719 12.551 5.125s9.1875-1.9844 12.445-5.3789l40.129-40.125 40.129 40.125h-0.003906c3.2578 3.3945 7.7461 5.332 12.449 5.3789 4.6992 0.046875 9.2266-1.8008 12.551-5.125 3.3242-3.3281 5.1719-7.8516 5.125-12.555s-1.9844-9.1875-5.3789-12.445l-40.129-40.125 40.129-40.125v-0.003906c3.3945-3.2969 5.3047-7.8242 5.3047-12.555-0.003906-4.7305-1.918-9.2578-5.3125-12.555-3.3945-3.293-7.9766-5.0742-12.707-4.9336-4.5469 0.13672-8.8594 2.0352-12.031 5.2969l-40.125 40.129-40.129-40.129c-3.293-3.3867-7.8164-5.2969-12.543-5.2969z" fill-rule="evenodd"/> width="700pt"
height="700pt"
version="1.1"
viewBox="0 0 700 700"
id="svg4"
sodipodi:docname="mute.svg"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs8" />
<sodipodi:namedview
id="namedview6"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="pt"
showgrid="false"
inkscape:zoom="1.1003571"
inkscape:cx="466.66667"
inkscape:cy="466.21227"
inkscape:window-width="2560"
inkscape:window-height="1414"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg4" />
<path
d="m401.86 70.004c-2.7266 0.078125-5.3945 0.78906-7.793 2.082l-188.6 101.58h-83.094c-4.6406 0-9.0938 1.8438-12.375 5.125-3.2812 3.2852-5.125 7.7344-5.125 12.375v175c0 4.6445 1.8438 9.0938 5.125 12.375s7.7344 5.125 12.375 5.125h82.988l188.54 104.14v0.003906c5.4219 3 12.023 2.9102 17.363-0.23828 5.3359-3.1445 8.6133-8.8789 8.6133-15.074v-385c0-4.7305-1.9141-9.2617-5.3086-12.559-3.3906-3.2969-7.9766-5.082-12.703-4.9414zm-16.988 46.793v326.04l-166.52-92.012c-2.5977-1.4258-5.5156-2.168-8.4766-2.1562h-70v-140h70c2.8984-0.007813 5.7539-0.73438 8.3047-2.1172zm87.328 75.539v-0.003907c-4.668 0-9.1445 1.8672-12.43 5.1836-3.2852 3.3164-5.1094 7.8086-5.0664 12.477 0.042969 4.668 1.9492 9.1289 5.293 12.383l40.129 40.125-40.129 40.125v0.003906c-3.3906 3.2578-5.3281 7.7422-5.375 12.445-0.050781 4.7031 1.7969 9.2266 5.125 12.555 3.3242 3.3242 7.8477 5.1719 12.551 5.125s9.1875-1.9844 12.445-5.3789l40.129-40.125 40.129 40.125h-0.003906c3.2578 3.3945 7.7461 5.332 12.449 5.3789 4.6992 0.046875 9.2266-1.8008 12.551-5.125 3.3242-3.3281 5.1719-7.8516 5.125-12.555s-1.9844-9.1875-5.3789-12.445l-40.129-40.125 40.129-40.125v-0.003906c3.3945-3.2969 5.3047-7.8242 5.3047-12.555-0.003906-4.7305-1.918-9.2578-5.3125-12.555-3.3945-3.293-7.9766-5.0742-12.707-4.9336-4.5469 0.13672-8.8594 2.0352-12.031 5.2969l-40.125 40.129-40.129-40.129c-3.293-3.3867-7.8164-5.2969-12.543-5.2969z"
fill-rule="evenodd"
id="path2"
style="fill:#ffffff" />
</svg> </svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

View file

@ -1,4 +1,40 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg"> <svg
<path d="m192.5 35c-4.6406 0-9.0938 1.8438-12.375 5.125s-5.125 7.7344-5.125 12.375v455c0 4.6406 1.8438 9.0938 5.125 12.375s7.7344 5.125 12.375 5.125h105c4.6406 0 9.0938-1.8438 12.375-5.125s5.125-7.7344 5.125-12.375v-455c0-4.6406-1.8438-9.0938-5.125-12.375s-7.7344-5.125-12.375-5.125zm210 0c-4.6406 0-9.0938 1.8438-12.375 5.125s-5.125 7.7344-5.125 12.375v455c0 4.6406 1.8438 9.0938 5.125 12.375s7.7344 5.125 12.375 5.125h105c4.6406 0 9.0938-1.8438 12.375-5.125s5.125-7.7344 5.125-12.375v-455c0-4.6406-1.8438-9.0938-5.125-12.375s-7.7344-5.125-12.375-5.125zm-192.5 35h70v420h-70zm210 0h70v420h-70z"/> width="700pt"
height="700pt"
version="1.1"
viewBox="0 0 700 700"
id="svg4"
sodipodi:docname="pause.svg"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs8" />
<sodipodi:namedview
id="namedview6"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="pt"
showgrid="false"
inkscape:zoom="1.1003571"
inkscape:cx="466.66667"
inkscape:cy="466.21227"
inkscape:window-width="2560"
inkscape:window-height="1414"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg4" />
<path
d="m192.5 35c-4.6406 0-9.0938 1.8438-12.375 5.125s-5.125 7.7344-5.125 12.375v455c0 4.6406 1.8438 9.0938 5.125 12.375s7.7344 5.125 12.375 5.125h105c4.6406 0 9.0938-1.8438 12.375-5.125s5.125-7.7344 5.125-12.375v-455c0-4.6406-1.8438-9.0938-5.125-12.375s-7.7344-5.125-12.375-5.125zm210 0c-4.6406 0-9.0938 1.8438-12.375 5.125s-5.125 7.7344-5.125 12.375v455c0 4.6406 1.8438 9.0938 5.125 12.375s7.7344 5.125 12.375 5.125h105c4.6406 0 9.0938-1.8438 12.375-5.125s5.125-7.7344 5.125-12.375v-455c0-4.6406-1.8438-9.0938-5.125-12.375s-7.7344-5.125-12.375-5.125zm-192.5 35h70v420h-70zm210 0h70v420h-70z"
id="path2"
style="fill:#ffffff" />
</svg> </svg>

Before

Width:  |  Height:  |  Size: 751 B

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -1,4 +1,41 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg"> <svg
<path d="m158.09 35.004c-4.7422-0.15625-9.3438 1.6172-12.754 4.918-3.4062 3.3008-5.332 7.8398-5.3281 12.586v455c0 4.1289 1.4648 8.1289 4.1289 11.285 2.668 3.1562 6.3633 5.2695 10.438 5.9609 4.0742 0.69141 8.2578-0.078125 11.82-2.1758l385-227.5c5.332-3.1484 8.6055-8.8789 8.6055-15.074 0-6.1914-3.2734-11.922-8.6055-15.07l-385-227.5c-2.5234-1.4922-5.3789-2.3281-8.3047-2.4297zm16.918 48.16 333.12 196.84-333.12 196.84z" fill-rule="evenodd"/> width="700pt"
height="700pt"
version="1.1"
viewBox="0 0 700 700"
id="svg4"
sodipodi:docname="play.svg"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs8" />
<sodipodi:namedview
id="namedview6"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="pt"
showgrid="false"
inkscape:zoom="1.1003571"
inkscape:cx="466.66667"
inkscape:cy="466.21227"
inkscape:window-width="2560"
inkscape:window-height="1414"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg4" />
<path
d="m158.09 35.004c-4.7422-0.15625-9.3438 1.6172-12.754 4.918-3.4062 3.3008-5.332 7.8398-5.3281 12.586v455c0 4.1289 1.4648 8.1289 4.1289 11.285 2.668 3.1562 6.3633 5.2695 10.438 5.9609 4.0742 0.69141 8.2578-0.078125 11.82-2.1758l385-227.5c5.332-3.1484 8.6055-8.8789 8.6055-15.074 0-6.1914-3.2734-11.922-8.6055-15.07l-385-227.5c-2.5234-1.4922-5.3789-2.3281-8.3047-2.4297zm16.918 48.16 333.12 196.84-333.12 196.84z"
fill-rule="evenodd"
id="path2"
style="fill:#ffffff" />
</svg> </svg>

Before

Width:  |  Height:  |  Size: 594 B

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -1,4 +1,40 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg"> <svg
<path d="m122.5 35c-4.6406 0-9.0938 1.8438-12.375 5.125s-5.125 7.7344-5.125 12.375v455c0 4.6406 1.8438 9.0898 5.125 12.375 3.2812 3.2812 7.7344 5.125 12.375 5.125h455c4.6406 0 9.0898-1.8438 12.375-5.125 3.2812-3.2812 5.125-7.7344 5.125-12.375v-455c0-4.6406-1.8438-9.0938-5.125-12.375s-7.7344-5.125-12.375-5.125zm17.5 35h420v420h-420z"/> width="700pt"
height="700pt"
version="1.1"
viewBox="0 0 700 700"
id="svg4"
sodipodi:docname="stop.svg"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs8" />
<sodipodi:namedview
id="namedview6"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="pt"
showgrid="false"
inkscape:zoom="1.1003571"
inkscape:cx="466.66667"
inkscape:cy="466.21227"
inkscape:window-width="2560"
inkscape:window-height="1414"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg4" />
<path
d="m122.5 35c-4.6406 0-9.0938 1.8438-12.375 5.125s-5.125 7.7344-5.125 12.375v455c0 4.6406 1.8438 9.0898 5.125 12.375 3.2812 3.2812 7.7344 5.125 12.375 5.125h455c4.6406 0 9.0898-1.8438 12.375-5.125 3.2812-3.2812 5.125-7.7344 5.125-12.375v-455c0-4.6406-1.8438-9.0938-5.125-12.375s-7.7344-5.125-12.375-5.125zm17.5 35h420v420h-420z"
id="path2"
style="fill:#ffffff" />
</svg> </svg>

Before

Width:  |  Height:  |  Size: 490 B

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -1,4 +1,41 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg"> <svg
<path d="m401.99 70.004c-2.7266 0.078125-5.3945 0.78906-7.793 2.082l-188.6 101.55h-83.094c-4.6406 0-9.0938 1.8438-12.375 5.1289-3.2812 3.2812-5.125 7.7305-5.125 12.375v175c0 4.6406 1.8438 9.0898 5.125 12.371s7.7344 5.1289 12.375 5.1289h82.988l188.54 104.18c5.4258 3.0039 12.039 2.9102 17.379-0.24609s8.6094-8.8984 8.5977-15.102v-385c-0.007812-4.7266-1.9258-9.2461-5.3203-12.535-3.3906-3.2891-7.9688-5.0703-12.691-4.9297zm69.555 42.59v-0.003906c-5.4883 0.23438-10.551 3.0352-13.664 7.5625-3.1172 4.5234-3.9258 10.25-2.1875 15.461 1.7383 5.2148 5.8242 9.3047 11.031 11.055 55.965 19.816 93.277 72.602 93.277 131.97 0 59.375-37.305 112.16-93.277 131.97v-0.003907c-4.3906 1.5391-7.9883 4.7578-10 8.9531-2.0117 4.1914-2.2734 9.0156-0.72656 13.402 1.5508 4.3828 4.7812 7.9727 8.9805 9.9766 4.1992 2 9.0195 2.2461 13.402 0.6875 69.832-24.715 116.62-90.906 116.62-164.98 0-74.07-46.766-140.23-116.59-164.95v-0.003906c-2.1953-0.82031-4.5312-1.1914-6.8711-1.0898zm-86.543 4.207v326.01l-166.52-91.98v-0.003906c-2.5938-1.4375-5.5117-2.1914-8.4766-2.1914h-70v-140h70v0.003907c2.8984 0.003906 5.7539-0.71484 8.3047-2.0859zm86.645 74.273v-0.003907c-4.8633 0.21094-9.418 2.4336-12.57 6.1406-3.1562 3.707-4.625 8.5586-4.0547 13.391 0.57031 4.8359 3.125 9.2148 7.0547 12.086 17.602 13.23 27.926 33.93 27.926 55.953s-10.352 42.723-27.961 55.953v-0.003906c-3.7148 2.793-6.168 6.9453-6.8203 11.547-0.65234 4.5977 0.55078 9.2695 3.3438 12.984 2.793 3.7109 6.9492 6.1641 11.551 6.8125 4.6016 0.65234 9.2695-0.55469 12.984-3.3516 26.383-19.828 41.902-50.949 41.902-83.949 0-32.996-15.531-64.121-41.902-83.945v0.003906c-3.2734-2.5234-7.3281-3.8047-11.453-3.625z" fill-rule="evenodd"/> width="700pt"
height="700pt"
version="1.1"
viewBox="0 0 700 700"
id="svg4"
sodipodi:docname="volume.svg"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs8" />
<sodipodi:namedview
id="namedview6"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="pt"
showgrid="false"
inkscape:zoom="1.1003571"
inkscape:cx="466.66667"
inkscape:cy="466.21227"
inkscape:window-width="2560"
inkscape:window-height="1414"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg4" />
<path
d="m401.99 70.004c-2.7266 0.078125-5.3945 0.78906-7.793 2.082l-188.6 101.55h-83.094c-4.6406 0-9.0938 1.8438-12.375 5.1289-3.2812 3.2812-5.125 7.7305-5.125 12.375v175c0 4.6406 1.8438 9.0898 5.125 12.371s7.7344 5.1289 12.375 5.1289h82.988l188.54 104.18c5.4258 3.0039 12.039 2.9102 17.379-0.24609s8.6094-8.8984 8.5977-15.102v-385c-0.007812-4.7266-1.9258-9.2461-5.3203-12.535-3.3906-3.2891-7.9688-5.0703-12.691-4.9297zm69.555 42.59v-0.003906c-5.4883 0.23438-10.551 3.0352-13.664 7.5625-3.1172 4.5234-3.9258 10.25-2.1875 15.461 1.7383 5.2148 5.8242 9.3047 11.031 11.055 55.965 19.816 93.277 72.602 93.277 131.97 0 59.375-37.305 112.16-93.277 131.97v-0.003907c-4.3906 1.5391-7.9883 4.7578-10 8.9531-2.0117 4.1914-2.2734 9.0156-0.72656 13.402 1.5508 4.3828 4.7812 7.9727 8.9805 9.9766 4.1992 2 9.0195 2.2461 13.402 0.6875 69.832-24.715 116.62-90.906 116.62-164.98 0-74.07-46.766-140.23-116.59-164.95v-0.003906c-2.1953-0.82031-4.5312-1.1914-6.8711-1.0898zm-86.543 4.207v326.01l-166.52-91.98v-0.003906c-2.5938-1.4375-5.5117-2.1914-8.4766-2.1914h-70v-140h70v0.003907c2.8984 0.003906 5.7539-0.71484 8.3047-2.0859zm86.645 74.273v-0.003907c-4.8633 0.21094-9.418 2.4336-12.57 6.1406-3.1562 3.707-4.625 8.5586-4.0547 13.391 0.57031 4.8359 3.125 9.2148 7.0547 12.086 17.602 13.23 27.926 33.93 27.926 55.953s-10.352 42.723-27.961 55.953v-0.003906c-3.7148 2.793-6.168 6.9453-6.8203 11.547-0.65234 4.5977 0.55078 9.2695 3.3438 12.984 2.793 3.7109 6.9492 6.1641 11.551 6.8125 4.6016 0.65234 9.2695-0.55469 12.984-3.3516 26.383-19.828 41.902-50.949 41.902-83.949 0-32.996-15.531-64.121-41.902-83.945v0.003906c-3.2734-2.5234-7.3281-3.8047-11.453-3.625z"
fill-rule="evenodd"
id="path2"
style="fill:#ffffff" />
</svg> </svg>

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

View file

@ -1,6 +1,6 @@
:root { :root {
--border-radius: 12px; --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; Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
--foreground-rgb: 255, 255, 255; --foreground-rgb: 255, 255, 255;
@ -22,35 +22,58 @@ body {
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
margin: 10vh 10vw; margin: 10dvh 10dvw;
} }
.centre { .centre {
margin: 25vh 0; margin: 25vh 0;
padding: 1rem 1.2rem; }
border-radius: var(--border-radius);
.centre #button {
background: rgb(var(--card-rgb)); background: rgb(var(--card-rgb));
border: 1px solid rgb(var(--card-border-rgb)); border: 1px solid rgb(var(--card-border-rgb));
border-radius: var(--border-radius);
padding: 1rem 1.2rem;
transition: background 200ms, border 200ms; transition: background 200ms, border 200ms;
} }
footer { footer {
display: grid;
width: 100%; width: 100%;
display: flex; grid-template-columns: repeat(3, 1fr);
justify-content: space-between; align-items: center;
font-family: var(--font-sans); }
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 */ /* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
.centre:hover { .centre #button:hover {
background: rgba(var(--card-rgb), 0.7); background: rgba(var(--card-rgb), 0.7);
border: 1px solid rgba(var(--card-border-rgb), 0.7); border: 1px solid rgba(var(--card-border-rgb), 0.7);
} }
} }
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {
.centre:hover { .centre #button:hover {
transform: none; transform: none;
} }
} }