Add audio play/stop button
This commit is contained in:
parent
cc760ff19d
commit
287c588ec6
GPG key ID:
610ED1098B8F435B
12 changed files with 307 additions and 42 deletions
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
22
index.html
22
index.html
|
|
@ -4,20 +4,26 @@
|
|||
<head>
|
||||
<title>The Myrtle Tree</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main class="wrapper">
|
||||
<button class="centre">Click to begin</button>
|
||||
<section class="controls">
|
||||
<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 class="centre">
|
||||
<button id="button" onclick="begin()">Click to begin</button>
|
||||
</section>
|
||||
<footer>
|
||||
<p>The Myrtle Tree - A game about sound and reliving memories.</p>
|
||||
<p>By Rory Healy.</p>
|
||||
<p id="title">The Myrtle Tree - A game about sound and reliving memories.</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>
|
||||
</main>
|
||||
<script src="main.js"></script>
|
||||
|
|
|
|||
28
main.js
28
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 = () => {
|
||||
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
|
||||
};
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,4 +1,41 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/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"/>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
|
@ -1,4 +1,41 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/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"/>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
|
@ -1,4 +1,40 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/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"/>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 751 B After Width: | Height: | Size: 1.7 KiB |
|
|
@ -1,4 +1,41 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/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"/>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 594 B After Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,4 +1,40 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/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"/>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 490 B After Width: | Height: | Size: 1.4 KiB |
|
|
@ -1,4 +1,41 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/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"/>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 2.7 KiB |
41
styles.css
41
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue