Compare commits

...

10 commits

17 changed files with 1058 additions and 3396 deletions

38
.gitignore vendored
View file

@ -1,39 +1 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
# development
.vscode/ .vscode/

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 KiB

104
index.html Normal file
View file

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html>
<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>
<section class="centre">
<button id="begin" onclick="begin()">Click to begin</button>
<section class="headphonesOff">
<img class="headphonesOff" id="headphonesImage" src="public/images/headphones.svg" alt="headphones recommended"></img>
<br />
<p class="headphonesOff">Headphones recommended</p>
</section>
<div id="overview">
<h1>Overview</h1>
<p><em>The Myrtle Tree</em>is a narrative game about a young Australian woman reconnecting with the sounds in her life through her memories. The character you play is a young musician named Clara. She has experienced a significant loss of hearing, which has greatly impacted her life. Waiting for her cochlear implants, she relives some of her memories and the sounds that she can still remember, and forms new memories once she has partially restored her hearing.</p>
<br />
<p><em>The Myrtle Tree</em> focuses on listening to sounds in different contexts, and noticing intricate details within those soundscapes to piece together the world around them. The player is taken through a series of environments, including real-world and abstract environments, and are tasked with observing the world around them through sound only. The primary goal is to relive memories and create new ones, using sound as the mode of exploration, as well as learning to cherish their ability to hear and experience the world around them.</p>
</div>
<div id="objectives">
<h1>Objectives</h1>
<p>The objective of the game is to progress through each stage by completing the quests in each area. These stages can be completed in any order, and are mostly optional, though the player is encouraged to explore all the stages. The quests in each stage are simple and easy, and range from identifying small details hidden in a soundscape, to building your own soundscapes. The objective is for players to gain insight into the characters memories and to rebuild the environments in these memories through sound only. For some of these stages, the world is created around them as they pick up on all the sounds.</p>
<br />
<p>Once the bionic ears have been made available, the player unlocks new scenarios to explore. The focus of these stages is to demonstrate the unique benefits and challenges of bionic ears, such as needing to replace batteries in an important situation, or being unable to hear people due to distortion or malfunctioning hardware. The loss of hearing is devastating, and the player is challenged with trying to explore and participate in the world whilst only being able to hear a fraction of it.</p>
</div>
<div id="howtoplay">
<h1>How the game is played</h1>
<p>Using current technology, a VR headset and high-quality headphones would be recommended in order to produce the best user experience. These would not be required, but the ideal experience would fully engage the senses of the player. If more advanced technology were developed and used instead, a full haptic suit would completely immerse the player, similar to the V-Suit described in Cixin Lius <em>The Three-Body Problem</em>, or the OASIS from <em>Ready Player One</em>. Whilst the technology <a href="https://www.digitaltrends.com/gaming/ces-2021-haptic-feedback-vest-vr-virtual-reality-bhaptics/">does exist</a> today, it is only in its infancy, and isn't able to fully cover the body. Being able to fully isolate the player from the outside world would greatly enhance the degree to which the player is able to tune themselves into the soundscapes and environments.</p>
<br />
<p>Additional senses could also be explored through full-body immersion, such as smell. Odour-evoked memories have been studied extensively, and these odours can be used to <a href="https://www.tandfonline.com/doi/abs/10.1080/09658211.2013.876048">evoke nostalgia</a>, and <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5039451/">and improve psychological and physiological health</a>. A possible extension to this game using that advanced technology could be to explore the how the characters memories are linked to smells, as well as allowing the player to explore their own memories in the game through smell and sound.</p>
</div>
<div id="audiovisualstyles">
<h1>Visual and audial styles</h1>
<p>The style of the game will vary depending on the stages selected. When focusing on complex soundscapes to pick out particular sounds, the display would initially be barren and empty a white room similar to what is seen in <em>The Unfinished Swan</em>. Generally, a low poly art style would be used throughout the game in order to shift the focus away from the graphics and towards the audio, though some areas would require a bit more detail.</p>
<br />
<p>A few different level types would be explored. Some are as above, a blank canvas that fills in as the player picks up on new sounds. During the levels that involve memories that are a bit hazy, visual distortions should accompany the audial distortions. Objects should appear out of proportion, discoloured, or misplaced. Some levels would focus on music that Clara has played. During these levels, rather than creating the world around the player, the player is taken through a journey of abstract shapes and objects, following the music as Clara would see it in her mind. These would require little to no interaction from the player, just observation.</p>
<br />
<p>During the second half of the game, when the player has the bionic ears, the level selection area becomes much more immersive. Sounds play as players hover over the stages when selecting a new stage to explore when they previously didnt, and soft ambient music begins to play in the background. This transforms the space into almost a meditative area, where players are free to sit and be still as they become absorbed into the ambiance.</p>
<br />
<p>Finally, after completing any stage, a new entry in the Memories book is written, with the characters thoughts and reflections of those memories written as journal entries.</p>
</div>
<div id="nameinspiration">
<h1>Why is it called <em>The Myrtle Tree</em>?</h1>
<p>Lemon myrtle trees (<em>Backhousia citriodora</em>) are native to Queensland, but do grow in Victoria. The flowers of these trees are beautiful, and a house near a school I went to grew them. I always loved the smell when I walked home from school, and I have fond memories of picking some and giving them to my mother. Whilst the smell is what I remember most, I also loved the rich colour of the leaves.</p>
<br />
<p>Reflecting on memories is at the very core of this game, but I wanted to use sound to explore these memories due to how sound is sometimes lost in memories. Reconnecting with our memories through sound is important as we often remember what things looked like or smelled like. It also provides a more flexible and immersive experience than focusing on sight alone, but sight is used to guide and aid the player throughout the game.</p>
</div>
<div id="references">
<h1>References</h1>
<h3>Icons</h3>
<ul>
<li>Pause by Nawicon from <a href="https://thenounproject.com/browse/icons/term/pause/" target="_blank" title="pause Icons">Noun Project</a></li>
<li>Mute by Nawicon from <a href="https://thenounproject.com/browse/icons/term/mute/" target="_blank" title="Mute Icons">Noun Project</a></li>
<li>Volume up by Nawicon from <a href="https://thenounproject.com/browse/icons/term/volume-up/" target="_blank" title="volume up Icons">Noun Project</a></li>
<li>Menu by Nawicon from <a href="https://thenounproject.com/browse/icons/term/menu/" target="_blank" title="menu Icons">Noun Project</a></li>
<li>Square by Nawicon from <a href="https://thenounproject.com/browse/icons/term/square/" target="_blank" title="square Icons">Noun Project</a></li>
<li>Triangle by Nawicon from <a href="https://thenounproject.com/browse/icons/term/triangle/" target="_blank" title="triangle Icons">Noun Project</a></li>
<li>Headphones by Maxim Kulikov from <a href="https://thenounproject.com/browse/icons/term/headphones/" target="_blank" title="Headphones Icons">Noun Project</a></li>
<li>Arrow by iconcheese from <a href="https://thenounproject.com/browse/icons/term/arrow/" target="_blank" title="Arrow Icons">Noun Project</a></li>
</ul>
<br />
<h3>Articles</h3>
<ul>
<li>Reid, C. A., Green, J., Wildschut, T., & Sedikides, C. (2015). Scent-evoked nostalgia. <em>Memory, 23</em>(2), 157166. <a href="https://doi.org/10.1080/09658211.2013.876048">https://doi.org/10.1080/09658211.2013.876048</a></li>
<li>Herz, R. S. (2016). The Role of Odor-Evoked Memory in Psychological and Physiological Health. <em>Brain Sciences, 6</em>(3), 22. <a href="https://doi.org/10.3390/brainsci6030022">https://doi.org/10.3390/brainsci6030022</a></li>
</ul>
<br />
<h3>Music</h3>
<ul>
<li>Red Means Recording. (2018, April 2). <em>ROLI - Across the Equator</em> [Video]. YouTube. https://www.youtube.com/watch?v=lx3QfNQhAkQ</li>
</ul>
</div>
<section class="navigationOff">
<button class="arrowButton" id="arrowLeft" onclick="previousPage()">
<img class="arrowImage" src="public/images/arrow.svg" style="transform: rotate(180deg);">
</button>
<button class="arrowButton" id="arrowRight" onclick="nextPage()">
<img class="arrowImage" src="public/images/arrow.svg">
</button>
</section>
</section>
</main>
<footer>
<p class="credits" id="title">The Myrtle Tree - A pitch for a game about sound and reliving memories.</p>
<section class="controls">
<button id="playPause" class="controlButtonOff" onclick="playPauseAudio()">
<img class="controlImage" src="public/images/play.svg" alt="play"></img>
</button>
<button id="stop" class="controlButtonOff" 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" loop>
</section>
<p class="credits" id="credits">By Rory Healy.</p>
</footer>
<script src="main.js"></script>
</body>
</html>

23
index.js Normal file
View file

@ -0,0 +1,23 @@
import { createServer } from "http";
import { readFile } from "fs/promises";
const hostname = "127.0.0.1";
const port = 3000;
const server = createServer((req, res) => {
readFile("index.html")
.then((contents) => {
res.setHeader("Content-Type", "text/html");
res.writeHead(200);
res.end(contents);
})
.catch((err) => {
res.writeHead(500);
res.end(err);
return;
});
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});

91
main.js Normal file
View file

@ -0,0 +1,91 @@
const backgroundAudio = document.getElementById("backgroundAudio");
const playPauseButton = document.getElementById("playPause");
let audioPlaying = false;
let currentPage = 0;
const pages = ["overview", "objectives", "howtoplay", "audiovisualstyles", "nameinspiration", "references"]
const arrowLeft = document.querySelector('#arrowLeft')
const arrowRight = document.querySelector('#arrowRight')
arrowLeft.style.opacity = 0;
arrowLeft.style.cursor = 'auto';
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.currentTime = 0;
audioPlaying = true;
playPauseAudio();
};
const begin = () => {
// Switch credits to media controls
document.querySelector('#begin').id = 'beginOff';
for (let element of document.querySelectorAll('.credits')) {
element.id = 'creditsOff';
}
setTimeout(() => {
for (let element of document.querySelectorAll('.headphonesOff')) {
element.className = 'headphonesOn';
}
}, 500);
setTimeout(() => {
for (let element of document.querySelectorAll('.headphonesOn')) {
element.className = 'headphonesOff';
}
}, 4500);
setTimeout(() => {
for (let element of document.querySelectorAll('.credits')) {
element.style.display = 'none';
}
for (let element of document.querySelectorAll('.controlButtonOff')) {
element.className = 'controlButtonOn';
}
for (let element of document.querySelectorAll('.headphonesOff')) {
element.style.display = 'none';
}
document.querySelector('#beginOff').style.display = 'none';
document.querySelector('.navigationOff').className = 'navigationOn';
document.querySelector(`#${pages[currentPage]}`).style.display = 'block';
document.querySelector('.centre').style.marginTop = '22dvh';
playPauseAudio()
}, 6500);
};
const previousPage = () => {
if (currentPage === 0) {
return;
} else if (currentPage === 1) {
arrowLeft.style.cursor = 'auto';
arrowLeft.style.opacity = 0;
} else if (currentPage <= 5) {
arrowRight.style.opacity = 1;
arrowRight.style.cursor = 'pointer';
}
document.querySelector(`#${pages[currentPage]}`).style.display = 'none';
currentPage -= 1;
document.querySelector(`#${pages[currentPage]}`).style.display = 'block';
}
const nextPage = () => {
if (currentPage === 5) {
return;
} else if (currentPage === 4) {
arrowRight.style.opacity = 0;
arrowRight.style.cursor = 'auto';
} else if (currentPage >= 0) {
arrowLeft.style.opacity = 1;
arrowLeft.style.cursor = 'pointer';
}
document.querySelector(`#${pages[currentPage]}`).style.display = 'none';
currentPage += 1;
document.querySelector(`#${pages[currentPage]}`).style.display = 'block';
}

3338
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,22 +1,9 @@
{ {
"name": "noise", "name": "test",
"version": "0.1.0", "version": "1.0.0",
"private": true, "description": "",
"scripts": { "main": "index.js",
"dev": "next dev", "author": "",
"build": "next build", "license": "ISC",
"start": "next start", "type": "module"
"lint": "next lint"
},
"dependencies": {
"@types/node": "18.15.3",
"@types/react": "18.0.28",
"@types/react-dom": "18.0.11",
"eslint": "8.36.0",
"eslint-config-next": "13.2.4",
"next": "13.2.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "4.9.5"
}
} }

BIN
public/audio/roli.weba Normal file

Binary file not shown.

182
public/images/arrow.svg Normal file
View file

@ -0,0 +1,182 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="526pt"
height="239pt"
version="1.1"
viewBox="0 0 526 239"
id="svg142"
sodipodi:docname="arrow.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">
<sodipodi:namedview
id="namedview144"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="pt"
showgrid="false"
showguides="false"
inkscape:zoom="1.1003571"
inkscape:cx="276.72835"
inkscape:cy="428.04286"
inkscape:window-width="2560"
inkscape:window-height="1414"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg142" />
<defs
id="defs62">
<symbol
id="t"
overflow="visible">
<path
d="m 20.844,-1.25 c -1.0742,0.5625 -2.1953,0.98438 -3.3594,1.2656 -1.168,0.28125 -2.3828,0.42188 -3.6406,0.42188 -3.7812,0 -6.7773,-1.0508 -8.9844,-3.1562 -2.2109,-2.1133 -3.3125,-4.9766 -3.3125,-8.5938 0,-3.625 1.1016,-6.4922 3.3125,-8.6094 2.207,-2.1133 5.2031,-3.1719 8.9844,-3.1719 1.2578,0 2.4727,0.14844 3.6406,0.4375 1.1641,0.28125 2.2852,0.69922 3.3594,1.25 v 4.7031 c -1.0859,-0.73828 -2.1523,-1.2812 -3.2031,-1.625 -1.0547,-0.34375 -2.1641,-0.51562 -3.3281,-0.51562 -2.0859,0 -3.7266,0.66797 -4.9219,2 -1.1992,1.3359 -1.7969,3.1797 -1.7969,5.5312 0,2.3359 0.59766,4.1719 1.7969,5.5156 1.1953,1.3359 2.8359,2 4.9219,2 1.1641,0 2.2734,-0.17188 3.3281,-0.51562 1.0508,-0.34375 2.1172,-0.88281 3.2031,-1.625 z"
id="path2" />
</symbol>
<symbol
id="d"
overflow="visible">
<path
d="m 15.25,-12.375 c -0.48047,-0.22656 -0.95312,-0.39453 -1.4219,-0.5 -0.46875,-0.10156 -0.94531,-0.15625 -1.4219,-0.15625 -1.3984,0 -2.4766,0.44922 -3.2344,1.3438 -0.75,0.89844 -1.125,2.1797 -1.125,3.8438 V 1.5e-4 H 2.6093 v -17.016 h 5.4375 v 2.7969 c 0.69531,-1.1133 1.5,-1.9258 2.4062,-2.4375 0.90625,-0.50781 1.9922,-0.76562 3.2656,-0.76562 0.17578,0 0.36719,0.01172 0.57812,0.03125 0.21875,0.01172 0.53125,0.04297 0.9375,0.09375 z"
id="path5" />
</symbol>
<symbol
id="a"
overflow="visible">
<path
d="M 19.594,-8.5469 V -7 H 6.875 c 0.13281,1.2734 0.59766,2.2305 1.3906,2.875 0.78906,0.63672 1.8945,0.95312 3.3125,0.95312 1.1445,0 2.3164,-0.16406 3.5156,-0.5 1.1953,-0.34375 2.4297,-0.85938 3.7031,-1.5469 v 4.1875 c -1.293,0.49219 -2.5859,0.85547 -3.875,1.0938 -1.2812,0.25 -2.5625,0.375 -3.8438,0.375 -3.0859,0 -5.4805,-0.78125 -7.1875,-2.3438 -1.6992,-1.5625 -2.5469,-3.7539 -2.5469,-6.5781 0,-2.7812 0.83203,-4.9609 2.5,-6.5469 1.6758,-1.5938 3.9844,-2.3906 6.9219,-2.3906 2.6758,0 4.8164,0.80859 6.4219,2.4219 1.6016,1.6055 2.4062,3.7578 2.4062,6.4531 z m -5.5938,-1.8125 c 0,-1.0312 -0.30469,-1.8633 -0.90625,-2.5 -0.59375,-0.63281 -1.3828,-0.95312 -2.3594,-0.95312 -1.0547,0 -1.9062,0.29688 -2.5625,0.89062 -0.6563,0.59374 -1.0703,1.4492 -1.2344,2.5625 z"
id="path8" />
</symbol>
<symbol
id="l"
overflow="visible">
<path
d="m 10.234,-7.6562 c -1.1367,0 -1.9922,0.19531 -2.5625,0.57812 -0.5625,0.38672 -0.84375,0.95312 -0.84375,1.7031 0,0.6875 0.22656,1.2305 0.6875,1.625 0.45703,0.38672 1.0977,0.57812 1.9219,0.57812 1.0195,0 1.8789,-0.36328 2.5781,-1.0938 0.69531,-0.73828 1.0469,-1.6602 1.0469,-2.7656 v -0.625 z m 8.3125,-2.0469 V 0 h -5.4844 v -2.5156 c -0.73047,1.0312 -1.5547,1.7812 -2.4688,2.25 -0.90625,0.46875 -2.0117,0.70312 -3.3125,0.70312 -1.7617,0 -3.1953,-0.50781 -4.2969,-1.5312 -1.0938,-1.0312 -1.6406,-2.3672 -1.6406,-4.0156 0,-1.9883 0.67969,-3.4453 2.0469,-4.375 1.375,-0.9375 3.5312,-1.4062 6.4688,-1.4062 h 3.2031 v -0.42188 c 0,-0.86328 -0.33984,-1.4922 -1.0156,-1.8906 -0.67969,-0.40625 -1.7344,-0.60938 -3.1719,-0.60938 -1.168,0 -2.2578,0.12109 -3.2656,0.35938 -1,0.23047 -1.9297,0.57812 -2.7812,1.0469 v -4.1562 c 1.1641,-0.28125 2.332,-0.49219 3.5,-0.64062 1.1758,-0.14453 2.3516,-0.21875 3.5312,-0.21875 3.0703,0 5.2852,0.60547 6.6406,1.8125 1.3633,1.2109 2.0469,3.1797 2.0469,5.9062 z"
id="path11" />
</symbol>
<symbol
id="c"
overflow="visible">
<path
d="m 8.5469,-21.844 v 4.8281 h 5.6094 v 3.8906 H 8.5469 v 7.2188 c 0,0.79297 0.15625,1.3281 0.46875,1.6094 0.32031,0.27344 0.94531,0.40625 1.875,0.40625 h 2.7969 v 3.8906 h -4.6719 c -2.1484,0 -3.668,-0.44531 -4.5625,-1.3438 -0.89844,-0.89453 -1.3438,-2.4141 -1.3438,-4.5625 v -7.2188 h -2.7031 v -3.8906 h 2.7031 v -4.8281 z"
id="path14" />
</symbol>
<symbol
id="k"
overflow="visible">
<path
d="m 14.188,-14.516 v -9.125 h 5.4688 V 0 H 14.188 v -2.4531 c -0.75,1 -1.5781,1.7344 -2.4844,2.2031 -0.89844,0.45703 -1.9375,0.6875 -3.125,0.6875 -2.0938,0 -3.8203,-0.83203 -5.1719,-2.5 -1.3438,-1.6641 -2.0156,-3.8047 -2.0156,-6.4219 0,-2.625 0.67188,-4.7695 2.0156,-6.4375 1.3516,-1.6641 3.0781,-2.5 5.1719,-2.5 1.1758,0 2.2188,0.23438 3.125,0.70312 0.9062,0.46874 1.7344,1.2031 2.4844,2.2031 z m -3.5781,11 c 1.1562,0 2.0391,-0.42188 2.6562,-1.2656 0.61328,-0.85156 0.92188,-2.0859 0.92188,-3.7031 0,-1.625 -0.30859,-2.8594 -0.92188,-3.7031 -0.61719,-0.85156 -1.5,-1.2812 -2.6562,-1.2812 -1.1562,0 -2.043,0.42969 -2.6562,1.2812 -0.61719,0.84375 -0.92188,2.0781 -0.92188,3.7031 0,1.6172 0.30469,2.8516 0.92188,3.7031 0.61328,0.84375 1.5,1.2656 2.6562,1.2656 z"
id="path17" />
</symbol>
<symbol
id="j"
overflow="visible">
<path
d="m 11.672,-3.5156 c 1.1562,0 2.0391,-0.42188 2.6562,-1.2656 0.61328,-0.85156 0.92188,-2.0859 0.92188,-3.7031 0,-1.625 -0.30859,-2.8594 -0.92188,-3.7031 -0.61719,-0.85156 -1.5,-1.2812 -2.6562,-1.2812 -1.168,0 -2.0625,0.42969 -2.6875,1.2812 -0.625,0.85547 -0.9375,2.0898 -0.9375,3.7031 0,1.6055 0.3125,2.8359 0.9375,3.6875 0.625,0.85547 1.5195,1.2812 2.6875,1.2812 z m -3.625,-11 c 0.75,-1 1.5781,-1.7344 2.4844,-2.2031 0.91406,-0.46875 1.9688,-0.70312 3.1562,-0.70312 2.0938,0 3.8125,0.83594 5.1562,2.5 1.3516,1.668 2.0312,3.8125 2.0312,6.4375 0,2.6172 -0.67969,4.7578 -2.0312,6.4219 -1.3438,1.668 -3.0625,2.5 -5.1562,2.5 -1.1875,0 -2.2422,-0.23438 -3.1562,-0.70312 C 9.62515,-0.73429 8.797,-1.46084 8.047,-2.45304 V 6e-5 H 2.6095 v -23.641 H 8.047 Z"
id="path20" />
</symbol>
<symbol
id="i"
overflow="visible">
<path
d="m 0.375,-17.016 h 5.4375 l 4.5781,11.547 3.8906,-11.547 h 5.4375 L 12.5625,1.609 C 11.84375,3.5035 11.0039,4.8278 10.0469,5.5778 9.08596,6.33561 7.8281,6.7184 6.2657,6.7184 H 3.1095 V 3.1403 h 1.7031 c 0.92578,0 1.5977,-0.14844 2.0156,-0.4375 C 7.24226,2.40983 7.57039,1.88249 7.81258,1.1247 L 7.9532,0.65595 Z"
id="path23" />
</symbol>
<symbol
id="h"
overflow="visible">
<path
d="M 2.6094,-17.016 H 8.0469 V 0 H 2.6094 Z m 0,-6.625 h 5.4375 v 4.4375 H 2.6094 Z"
id="path26" />
</symbol>
<symbol
id="e"
overflow="visible">
<path
d="m 16.359,-16.484 v 4.4375 c -0.74219,-0.50781 -1.4844,-0.88281 -2.2344,-1.125 -0.74219,-0.23828 -1.5117,-0.35938 -2.3125,-0.35938 -1.5117,0 -2.6953,0.44531 -3.5469,1.3281 -0.84375,0.88672 -1.2656,2.125 -1.2656,3.7188 0,1.5859 0.42188,2.8203 1.2656,3.7031 0.85156,0.88672 2.0352,1.3281 3.5469,1.3281 0.85156,0 1.6602,-0.125 2.4219,-0.375 0.76953,-0.25 1.4766,-0.625 2.125,-1.125 v 4.4531 c -0.85547,0.3125 -1.7188,0.54688 -2.5938,0.70312 -0.875,0.15624 -1.75,0.23438 -2.625,0.23438 -3.0742,0 -5.4766,-0.78516 -7.2031,-2.3594 -1.7305,-1.5703 -2.5938,-3.7578 -2.5938,-6.5625 0,-2.8125 0.86328,-5.0039 2.5938,-6.5781 1.7266,-1.5703 4.1289,-2.3594 7.2031,-2.3594 0.88281,0 1.7578,0.07813 2.625,0.23438 0.86328,0.15625 1.7266,0.39062 2.5938,0.70312 z"
id="path29" />
</symbol>
<symbol
id="b"
overflow="visible">
<path
d="m 10.703,-13.531 c -1.1992,0 -2.1172,0.43359 -2.75,1.2969 -0.63672,0.86719 -0.95312,2.1172 -0.95312,3.75 0,1.625 0.31641,2.8711 0.95312,3.7344 0.63281,0.86719 1.5508,1.2969 2.75,1.2969 1.1875,0 2.0938,-0.42969 2.7188,-1.2969 0.63281,-0.86328 0.95312,-2.1094 0.95312,-3.7344 0,-1.6328 -0.32031,-2.8828 -0.95312,-3.75 -0.625,-0.86328 -1.5312,-1.2969 -2.7188,-1.2969 z m 0,-3.8906 c 2.9258,0 5.2109,0.79297 6.8594,2.375 1.6445,1.5742 2.4688,3.7617 2.4688,6.5625 0,2.793 -0.82422,4.9805 -2.4688,6.5625 -1.6484,1.5742 -3.9336,2.3594 -6.8594,2.3594 -2.9375,0 -5.2344,-0.78516 -6.8906,-2.3594 -1.6484,-1.582 -2.4688,-3.7695 -2.4688,-6.5625 0,-2.8008 0.82031,-4.9883 2.4688,-6.5625 1.6562,-1.582 3.9531,-2.375 6.8906,-2.375 z"
id="path32" />
</symbol>
<symbol
id="g"
overflow="visible">
<path
d="M 19.719,-10.359 V 0 h -5.4688 v -7.9219 c 0,-1.4688 -0.03906,-2.4766 -0.10938,-3.0312 -0.0625,-0.5625 -0.17188,-0.97656 -0.32812,-1.25 -0.21875,-0.35156 -0.51172,-0.62891 -0.875,-0.82812 -0.36719,-0.19531 -0.77734,-0.29688 -1.2344,-0.29688 -1.1367,0 -2.0312,0.44531 -2.6875,1.3281 -0.64844,0.875 -0.96875,2.0859 -0.96875,3.625 V 0 h -5.4375 v -17.016 h 5.4375 v 2.5 c 0.82031,-1 1.6914,-1.7344 2.6094,-2.2031 0.92578,-0.46875 1.9453,-0.70312 3.0625,-0.70312 1.957,0 3.4453,0.60547 4.4688,1.8125 1.0195,1.1992 1.5312,2.9492 1.5312,5.25 z"
id="path35" />
</symbol>
<symbol
id="f"
overflow="visible">
<path
d="M 19.719,-10.359 V 0 h -5.4688 v -7.9062 c 0,-1.4766 -0.03906,-2.4922 -0.10938,-3.0469 -0.0625,-0.5625 -0.17188,-0.97656 -0.32812,-1.25 -0.21875,-0.35156 -0.51172,-0.62891 -0.875,-0.82812 -0.36719,-0.19531 -0.77734,-0.29688 -1.2344,-0.29688 -1.1367,0 -2.0312,0.44531 -2.6875,1.3281 -0.64844,0.875 -0.96875,2.0859 -0.96875,3.625 V 0 h -5.4375 v -23.641 h 5.4375 v 9.125 c 0.82031,-1 1.6914,-1.7344 2.6094,-2.2031 0.92578,-0.46875 1.9453,-0.70312 3.0625,-0.70312 1.957,0 3.4453,0.60547 4.4688,1.8125 1.0195,1.1992 1.5312,2.9492 1.5312,5.25 z"
id="path38" />
</symbol>
<symbol
id="s"
overflow="visible">
<path
d="m 15.906,-16.484 v 4.1406 c -1.168,-0.48828 -2.293,-0.85156 -3.375,-1.0938 -1.0859,-0.25 -2.1055,-0.375 -3.0625,-0.375 -1.043,0 -1.8125,0.13281 -2.3125,0.39062 -0.5,0.26172 -0.75,0.65625 -0.75,1.1875 0,0.4375 0.1875,0.77734 0.5625,1.0156 0.38281,0.23047 1.0664,0.40234 2.0469,0.51562 l 0.96875,0.125 c 2.7812,0.35547 4.6484,0.9375 5.6094,1.75 0.96875,0.8125 1.4531,2.0859 1.4531,3.8125 0,1.8125 -0.67188,3.1797 -2.0156,4.0938 -1.3359,0.90625 -3.3281,1.3594 -5.9844,1.3594 -1.1172,0 -2.2773,-0.089844 -3.4844,-0.26562 -1.1992,-0.17578 -2.4297,-0.44141 -3.6875,-0.79688 v -4.125 c 1.082,0.52344 2.1914,0.91797 3.3281,1.1875 1.1328,0.26172 2.2891,0.39062 3.4688,0.39062 1.0625,0 1.8594,-0.14453 2.3906,-0.4375 0.53906,-0.30078 0.8125,-0.73828 0.8125,-1.3125 0,-0.48828 -0.1875,-0.84766 -0.5625,-1.0781 -0.36719,-0.23828 -1.1016,-0.42578 -2.2031,-0.5625 l -0.95312,-0.125 c -2.418,-0.30078 -4.1172,-0.85938 -5.0938,-1.6719 -0.96875,-0.82031 -1.4531,-2.0703 -1.4531,-3.75 0,-1.8008 0.61328,-3.1328 1.8438,-4 1.2383,-0.875 3.1328,-1.3125 5.6875,-1.3125 1,0 2.0508,0.07813 3.1562,0.23438 1.1016,0.14844 2.3047,0.38281 3.6094,0.70312 z"
id="path41" />
</symbol>
<symbol
id="r"
overflow="visible">
<path
d="m 13.812,-23.641 v 3.5781 h -3.0156 c -0.77344,0 -1.3086,0.14062 -1.6094,0.42188 -0.30469,0.27344 -0.45312,0.75 -0.45312,1.4375 v 1.1875 h 4.6406 v 3.8906 h -4.6406 v 13.125 h -5.4375 v -13.125 h -2.7031 v -3.8906 h 2.7031 v -1.1875 c 0,-1.8516 0.51562,-3.2227 1.5469,-4.1094 1.0312,-0.88281 2.6289,-1.3281 4.7969,-1.3281 z"
id="path44" />
</symbol>
<symbol
id="q"
overflow="visible">
<path
d="m 18.375,-14.188 c 0.6875,-1.0508 1.5039,-1.8516 2.4531,-2.4062 0.94531,-0.55078 1.9883,-0.82812 3.125,-0.82812 1.957,0 3.4453,0.60547 4.4688,1.8125 1.0195,1.1992 1.5312,2.9492 1.5312,5.25 v 10.359 h -5.4688 v -8.875 c 0.0078,-0.125 0.01563,-0.25781 0.01563,-0.40625 0.0078,-0.14453 0.01563,-0.34766 0.01563,-0.60938 0,-1.207 -0.17969,-2.082 -0.53125,-2.625 -0.35547,-0.53906 -0.92969,-0.8125 -1.7188,-0.8125 -1.0312,0 -1.8281,0.42969 -2.3906,1.2812 -0.5625,0.85547 -0.85547,2.0859 -0.875,3.6875 v 8.3594 h -5.4688 v -8.875 c 0,-1.8828 -0.16406,-3.0977 -0.48438,-3.6406 -0.32422,-0.53906 -0.90234,-0.8125 -1.7344,-0.8125 -1.043,0 -1.8516,0.43359 -2.4219,1.2969 -0.5625,0.85547 -0.84375,2.0742 -0.84375,3.6562 v 8.375 h -5.4688 v -17.016 h 5.4688 v 2.5 c 0.66406,-0.96875 1.4297,-1.6914 2.2969,-2.1719 0.875,-0.48828 1.832,-0.73438 2.875,-0.73438 1.1758,0 2.2109,0.28906 3.1094,0.85938 0.90625,0.5625 1.5859,1.3555 2.0469,2.375 z"
id="path47" />
</symbol>
<symbol
id="p"
overflow="visible">
<path
d="m 2.8594,-22.672 h 6.5312 l 8.25,15.547 v -15.547 h 5.5469 V 0 H 16.6406 L 8.4062,-15.562 V 0 H 2.8593 Z"
id="path50" />
</symbol>
<symbol
id="o"
overflow="visible">
<path
d="m 2.4375,-6.625 v -10.391 h 5.4688 v 1.7031 c 0,0.92969 -0.00781,2.0898 -0.015625,3.4844 -0.011719,1.3867 -0.015625,2.3125 -0.015625,2.7812 0,1.3672 0.03125,2.3516 0.09375,2.9531 0.070312,0.60547 0.19531,1.043 0.375,1.3125 0.21875,0.35547 0.50391,0.63281 0.85938,0.82812 0.36328,0.1875 0.78125,0.28125 1.25,0.28125 1.1328,0 2.0234,-0.42969 2.6719,-1.2969 0.64453,-0.875 0.96875,-2.0859 0.96875,-3.6406 v -8.4062 h 5.4375 V -3e-5 h -5.4375 v -2.4531 c -0.82422,0.99219 -1.6953,1.7188 -2.6094,2.1875 -0.91797,0.46875 -1.9297,0.70312 -3.0312,0.70312 -1.9609,0 -3.4531,-0.59766 -4.4844,-1.7969 -1.0234,-1.207 -1.5312,-2.9609 -1.5312,-5.2656 z"
id="path53" />
</symbol>
<symbol
id="n"
overflow="visible">
<path
d="m 2.8594,-22.672 h 9.7031 c 2.8828,0 5.0977,0.64062 6.6406,1.9219 1.5508,1.2812 2.3281,3.1055 2.3281,5.4688 0,2.375 -0.77734,4.2031 -2.3281,5.4844 -1.543,1.2812 -3.7578,1.9219 -6.6406,1.9219 H 8.7031 V 0 H 2.8593 Z m 5.8438,4.2344 v 6.3281 h 3.2344 c 1.1328,0 2.0078,-0.27344 2.625,-0.82812 0.625,-0.55078 0.9375,-1.332 0.9375,-2.3438 0,-1.0078 -0.3125,-1.7852 -0.9375,-2.3281 -0.61719,-0.55078 -1.4922,-0.82812 -2.625,-0.82812 z"
id="path56" />
</symbol>
<symbol
id="m"
overflow="visible">
<path
d="m 2.6094,-17.016 h 5.4375 v 16.719 c 0,2.2695 -0.54688,4.0039 -1.6406,5.2031 -1.0938,1.207 -2.6797,1.8125 -4.75,1.8125 H -1.0312 V 3.1405 h 0.9375 c 1.0312,0 1.7383,-0.23438 2.125,-0.70312 0.38281,-0.46094 0.57812,-1.3711 0.57812,-2.7344 z m 0,-6.625 h 5.4375 v 4.4375 H 2.6094 Z"
id="path59" />
</symbol>
</defs>
<path
d="M 526,119.5 350.38825,0 V 68.819297 L 0,68.813968 V 170.1807 H 350.37665 V 239 Z M 14.442901,153.60726 V 85.396723 H 364.81955 V 29.09608 l 132.85148,90.40258 -132.85148,90.40793 v -56.30065 z"
id="path64"
style="fill:#ffffff;stroke-width:1.2431" />
</svg>

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -0,0 +1,225 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="500pt"
height="500pt"
version="1.1"
viewBox="0 0 500 500"
id="svg163"
sodipodi:docname="headphones.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">
<sodipodi:namedview
id="namedview165"
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="446.67318"
inkscape:cy="398.0526"
inkscape:window-width="2560"
inkscape:window-height="1414"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg163" />
<defs
id="defs77">
<symbol
id="y"
overflow="visible">
<path
d="m 18.766,-1.125 c -0.96875,0.5 -1.9805,0.875 -3.0312,1.125 -1.043,0.25781 -2.1367,0.39062 -3.2812,0.39062 -3.3984,0 -6.0898,-0.94531 -8.0781,-2.8438 -1.9922,-1.9062 -2.9844,-4.4844 -2.9844,-7.7344 0,-3.2578 0.99219,-5.8359 2.9844,-7.7344 1.9883,-1.9062 4.6797,-2.8594 8.0781,-2.8594 1.1445,0 2.2383,0.13281 3.2812,0.39062 1.0508,0.25 2.0625,0.625 3.0312,1.125 v 4.2188 c -0.98047,-0.65625 -1.9453,-1.1406 -2.8906,-1.4531 -0.94922,-0.3125 -1.9492,-0.46875 -3,-0.46875 -1.875,0 -3.3516,0.60547 -4.4219,1.8125 -1.0742,1.1992 -1.6094,2.8555 -1.6094,4.9688 0,2.1055 0.53516,3.7617 1.6094,4.9688 1.0703,1.1992 2.5469,1.7969 4.4219,1.7969 1.0508,0 2.0508,-0.14844 3,-0.45312 0.94531,-0.3125 1.9102,-0.80078 2.8906,-1.4688 z"
id="path2" />
</symbol>
<symbol
id="d"
overflow="visible">
<path
d="m 13.734,-11.141 c -0.4375,-0.19531 -0.87109,-0.34375 -1.2969,-0.4375 -0.41797,-0.10156 -0.83984,-0.15625 -1.2656,-0.15625 -1.2617,0 -2.2305,0.40625 -2.9062,1.2188 -0.67969,0.80469 -1.0156,1.9531 -1.0156,3.4531 v 7.0625 H 2.3591 v -15.312 h 4.8906 v 2.5156 c 0.625,-1 1.3438,-1.7266 2.1562,-2.1875 0.82031,-0.46875 1.8008,-0.70312 2.9375,-0.70312 0.16406,0 0.34375,0.01172 0.53125,0.03125 0.19531,0.01172 0.47656,0.03906 0.84375,0.07813 z"
id="path5" />
</symbol>
<symbol
id="a"
overflow="visible">
<path
d="m 17.641,-7.7031 v 1.4062 H 6.188 c 0.125,1.1484 0.53906,2.0078 1.25,2.5781 0.70703,0.57422 1.7031,0.85938 2.9844,0.85938 1.0312,0 2.082,-0.14844 3.1562,-0.45312 1.082,-0.3125 2.1914,-0.77344 3.3281,-1.3906 v 3.7656 c -1.1562,0.4375 -2.3125,0.76562 -3.4688,0.98438 -1.1562,0.22656 -2.3125,0.34375 -3.4688,0.34375 -2.7734,0 -4.9297,-0.70312 -6.4688,-2.1094 -1.5312,-1.4062 -2.2969,-3.3789 -2.2969,-5.9219 0,-2.5 0.75391,-4.4609 2.2656,-5.8906 1.5078,-1.4375 3.582,-2.1562 6.2188,-2.1562 2.4062,0 4.332,0.73047 5.7812,2.1875 1.4453,1.4492 2.1719,3.3828 2.1719,5.7969 z m -5.0312,-1.625 c 0,-0.92578 -0.27344,-1.6719 -0.8125,-2.2344 -0.54297,-0.57031 -1.25,-0.85938 -2.125,-0.85938 -0.94922,0 -1.7188,0.26562 -2.3125,0.79688 -0.5937,0.53126 -0.96484,1.2969 -1.1094,2.2969 z"
id="path8" />
</symbol>
<symbol
id="e"
overflow="visible">
<path
d="m 9.2188,-6.8906 c -1.0234,0 -1.793,0.17188 -2.3125,0.51562 -0.51172,0.34375 -0.76562,0.85547 -0.76562,1.5312 0,0.625 0.20703,1.1172 0.625,1.4688 0.41406,0.34375 0.98828,0.51562 1.7188,0.51562 0.92578,0 1.7031,-0.32812 2.3281,-0.98438 0.63281,-0.66406 0.95312,-1.4922 0.95312,-2.4844 v -0.5625 z m 7.4688,-1.8438 V 0 h -4.9219 v -2.2656 c -0.65625,0.92969 -1.3984,1.6055 -2.2188,2.0312 -0.82422,0.41406 -1.8242,0.625 -3,0.625 -1.5859,0 -2.8711,-0.45703 -3.8594,-1.375 -0.99219,-0.92578 -1.4844,-2.1289 -1.4844,-3.6094 0,-1.7891 0.61328,-3.1016 1.8438,-3.9375 1.2383,-0.84375 3.1797,-1.2656 5.8281,-1.2656 h 2.8906 v -0.39062 c 0,-0.76953 -0.30859,-1.332 -0.92188,-1.6875 -0.61719,-0.36328 -1.5703,-0.54688 -2.8594,-0.54688 -1.0547,0 -2.0312,0.10547 -2.9375,0.3125 -0.89844,0.21094 -1.7305,0.52344 -2.5,0.9375 v -3.7344 c 1.0391,-0.25 2.0859,-0.44141 3.1406,-0.57812 1.0625,-0.13281 2.125,-0.20312 3.1875,-0.20312 2.7578,0 4.75,0.54688 5.9688,1.6406 1.2266,1.0859 1.8438,2.8555 1.8438,5.3125 z"
id="path11" />
</symbol>
<symbol
id="c"
overflow="visible">
<path
d="m 7.7031,-19.656 v 4.3438 H 12.75 v 3.5 H 7.7031 v 6.5 c 0,0.71094 0.14062,1.1875 0.42188,1.4375 0.28126,0.25 0.83594,0.375 1.6719,0.375 h 2.5156 v 3.5 h -4.1875 c -1.9375,0 -3.3125,-0.39844 -4.125,-1.2031 -0.80469,-0.8125 -1.2031,-2.1797 -1.2031,-4.1094 v -6.5 h -2.4219 v -3.5 h 2.4219 v -4.3438 z"
id="path14" />
</symbol>
<symbol
id="l"
overflow="visible">
<path
d="m 12.766,-13.078 v -8.2031 h 4.9219 V -1e-4 H 12.766 v -2.2188 c -0.66797,0.90625 -1.4062,1.5703 -2.2188,1.9844 -0.8126,0.4141 -1.7578,0.625 -2.8281,0.625 -1.8867,0 -3.4336,-0.75 -4.6406,-2.25 -1.2109,-1.5 -1.8125,-3.4258 -1.8125,-5.7812 0,-2.3633 0.60156,-4.2969 1.8125,-5.7969 1.207,-1.5 2.7539,-2.25 4.6406,-2.25 1.0625,0 2,0.21484 2.8125,0.64062 0.82031,0.42969 1.5664,1.0859 2.2344,1.9688 z m -3.2188,9.9219 c 1.0391,0 1.8359,-0.37891 2.3906,-1.1406 0.55078,-0.76953 0.82812,-1.8828 0.82812,-3.3438 0,-1.457 -0.27734,-2.5664 -0.82812,-3.3281 -0.55469,-0.76953 -1.3516,-1.1562 -2.3906,-1.1562 -1.043,0 -1.8398,0.38672 -2.3906,1.1562 -0.55469,0.76172 -0.82812,1.8711 -0.82812,3.3281 0,1.4609 0.27344,2.5742 0.82812,3.3438 0.55078,0.76172 1.3477,1.1406 2.3906,1.1406 z"
id="path17" />
</symbol>
<symbol
id="k"
overflow="visible">
<path
d="m 10.5,-3.1562 c 1.0508,0 1.8516,-0.37891 2.4062,-1.1406 0.55078,-0.76953 0.82812,-1.8828 0.82812,-3.3438 0,-1.457 -0.27734,-2.5664 -0.82812,-3.3281 -0.55469,-0.76953 -1.3555,-1.1562 -2.4062,-1.1562 -1.0547,0 -1.8594,0.38672 -2.4219,1.1562 -0.55469,0.77344 -0.82812,1.8828 -0.82812,3.3281 0,1.4492 0.27344,2.5586 0.82812,3.3281 0.5625,0.77344 1.3672,1.1562 2.4219,1.1562 z m -3.25,-9.9219 c 0.67578,-0.88281 1.4219,-1.5391 2.2344,-1.9688 0.82031,-0.42578 1.7656,-0.64062 2.8281,-0.64062 1.8945,0 3.4453,0.75 4.6562,2.25 1.207,1.5 1.8125,3.4336 1.8125,5.7969 0,2.3555 -0.60547,4.2812 -1.8125,5.7812 -1.2109,1.5 -2.7617,2.25 -4.6562,2.25 -1.0625,0 -2.0078,-0.21094 -2.8281,-0.625 C 8.6719,-0.6602 7.9258,-1.32032 7.25,-2.21882 V -2e-5 H 2.3594 v -21.281 H 7.25 Z"
id="path20" />
</symbol>
<symbol
id="j"
overflow="visible">
<path
d="m 0.34375,-15.312 h 4.8906 l 4.125,10.391 3.5,-10.391 h 4.8906 l -6.4375,16.766 c -0.64844,1.6953 -1.4023,2.8828 -2.2656,3.5625 -0.86719,0.6875 -2,1.0312 -3.4062,1.0312 H 2.79685 V 2.8289 h 1.5312 c 0.83203,0 1.4375,-0.13672 1.8125,-0.40625 C 6.52336,2.16093 6.82024,1.69218 7.03117,1.01645 L 7.17179,0.59457 Z"
id="path23" />
</symbol>
<symbol
id="i"
overflow="visible">
<path
d="m 2.5781,-20.406 h 6.6875 l 4.6562,10.922 4.6719,-10.922 h 6.6875 V 0 H 20.2968 V -14.938 L 15.5937,-3.922 H 12.2656 L 7.5625,-14.938 V 0 H 2.5781 Z"
id="path26" />
</symbol>
<symbol
id="x"
overflow="visible">
<path
d="m 6.2188,-7.8281 -5.5156,-7.4844 h 5.1719 l 3.1406,4.5312 3.1719,-4.5312 h 5.1719 L 11.8439,-7.8594 17.6408,0 H 12.4533 L 9.0158,-4.8438 5.6096,0 H 0.4221 Z"
id="path29" />
</symbol>
<symbol
id="h"
overflow="visible">
<path
d="M 2.3594,-15.312 H 7.25 V 0 H 2.3594 Z m 0,-5.9688 H 7.25 v 4 H 2.3594 Z"
id="path32" />
</symbol>
<symbol
id="g"
overflow="visible">
<path
d="m 16.547,-12.766 c 0.61328,-0.94531 1.3477,-1.6719 2.2031,-2.1719 0.85156,-0.5 1.7891,-0.75 2.8125,-0.75 1.7578,0 3.0977,0.54688 4.0156,1.6406 0.92578,1.0859 1.3906,2.6562 1.3906,4.7188 V -4e-4 h -4.9219 v -7.9844 -0.35938 c 0.0078,-0.13281 0.01563,-0.32031 0.01563,-0.5625 0,-1.082 -0.16406,-1.8633 -0.48438,-2.3438 -0.3125,-0.48828 -0.82422,-0.73438 -1.5312,-0.73438 -0.92969,0 -1.6484,0.38672 -2.1562,1.1562 -0.51172,0.76172 -0.77344,1.8672 -0.78125,3.3125 v 7.5156 h -4.9219 v -7.9844 c 0,-1.6953 -0.14844,-2.7852 -0.4375,-3.2656 -0.29297,-0.48828 -0.8125,-0.73438 -1.5625,-0.73438 -0.9375,0 -1.6641,0.38672 -2.1719,1.1562 -0.51172,0.76172 -0.76562,1.8594 -0.76562,3.2969 v 7.5312 h -4.9219 v -15.312 h 4.9219 v 2.2344 c 0.60156,-0.86328 1.2891,-1.5156 2.0625,-1.9531 0.78125,-0.4375 1.6406,-0.65625 2.5781,-0.65625 1.0625,0 2,0.25781 2.8125,0.76562 0.8125,0.51172 1.4258,1.2305 1.8438,2.1562 z"
id="path35" />
</symbol>
<symbol
id="w"
overflow="visible">
<path
d="m 2.5781,-20.406 h 5.25 v 7.4375 l 7.5938,-7.4375 h 6.1094 l -9.8281,9.6562 10.844,10.75 H 15.9534 L 7.8284,-8.0467 V 2e-4 h -5.25 z"
id="path38" />
</symbol>
<symbol
id="f"
overflow="visible">
<path
d="m 2.1875,-5.9688 v -9.3438 h 4.9219 v 1.5312 c 0,0.83594 -0.00781,1.875 -0.015625,3.125 -0.011719,1.25 -0.015625,2.0859 -0.015625,2.5 0,1.2422 0.03125,2.1328 0.09375,2.6719 0.070313,0.54297 0.17969,0.93359 0.32812,1.1719 0.20703,0.32422 0.47266,0.57422 0.79688,0.75 0.32031,0.16797 0.69141,0.25 1.1094,0.25 1.0195,0 1.8203,-0.39062 2.4062,-1.1719 0.58203,-0.78125 0.875,-1.8672 0.875,-3.2656 v -7.5625 h 4.8906 V -6e-4 H 12.6875 V -2.2194 C 11.94531,-1.32096 11.1641,-0.6608 10.3437,-0.235 9.51948,0.17906 8.6093,0.39 7.6093,0.39 5.8476,0.39 4.5038,-0.14906 3.5781,-1.235 2.64841,-2.317 2.1875,-3.8952 2.1875,-5.9694 Z"
id="path41" />
</symbol>
<symbol
id="v"
overflow="visible">
<path
d="M 2.3594,-21.281 H 7.25 V 0 H 2.3594 Z"
id="path44" />
</symbol>
<symbol
id="u"
overflow="visible">
<path
d="M 2.3594,-21.281 H 7.25 v 11.594 l 5.625,-5.625 h 5.6875 L 11.0937,-8.2808 19.1562,4e-4 H 13.2187 L 7.2499,-6.3902 V 4e-4 H 2.3593 Z"
id="path47" />
</symbol>
<symbol
id="b"
overflow="visible">
<path
d="m 9.6406,-12.188 c -1.0859,0 -1.9141,0.39062 -2.4844,1.1719 -0.57422,0.78125 -0.85938,1.9062 -0.85938,3.375 0,1.4688 0.28516,2.5938 0.85938,3.375 0.57031,0.77344 1.3984,1.1562 2.4844,1.1562 1.0625,0 1.875,-0.38281 2.4375,-1.1562 0.57031,-0.78125 0.85938,-1.9062 0.85938,-3.375 0,-1.4688 -0.28906,-2.5938 -0.85938,-3.375 -0.5625,-0.78125 -1.375,-1.1719 -2.4375,-1.1719 z m 0,-3.5 c 2.6328,0 4.6914,0.71484 6.1719,2.1406 1.4766,1.418 2.2188,3.3867 2.2188,5.9062 0,2.5117 -0.74219,4.4805 -2.2188,5.9062 C 14.332,-0.317 12.2734,0.39 9.6406,0.39 6.9922,0.39 4.9258,-0.31703 3.4375,-1.735 1.9453,-3.1608 1.2031,-5.1295 1.2031,-7.6412 c 0,-2.5195 0.74219,-4.4883 2.2344,-5.9062 1.4883,-1.4258 3.5547,-2.1406 6.2031,-2.1406 z"
id="path50" />
</symbol>
<symbol
id="t"
overflow="visible">
<path
d="m 0.42188,-15.312 h 4.8906 l 3.8281,10.578 3.7969,-10.578 h 4.9062 L 11.81248,0 h -5.375 z"
id="path53" />
</symbol>
<symbol
id="s"
overflow="visible">
<path
d="m 12.422,-21.281 v 3.2188 H 9.7189 c -0.6875,0 -1.1719,0.125 -1.4531,0.375 -0.27344,0.25 -0.40625,0.6875 -0.40625,1.3125 v 1.0625 h 4.1875 v 3.5 H 7.85955 V -2e-4 h -4.8906 v -11.812 h -2.4375 v -3.5 h 2.4375 v -1.0625 c 0,-1.6641 0.46094,-2.8984 1.3906,-3.7031 0.92578,-0.80078 2.3672,-1.2031 4.3281,-1.2031 z"
id="path56" />
</symbol>
<symbol
id="r"
overflow="visible">
<path
d="M 17.75,-9.3281 V 0 h -4.9219 v -7.1094 c 0,-1.3438 -0.03125,-2.2656 -0.09375,-2.7656 -0.0625,-0.5 -0.16797,-0.86719 -0.3125,-1.1094 -0.1875,-0.3125 -0.44922,-0.55469 -0.78125,-0.73438 -0.32422,-0.17578 -0.69531,-0.26562 -1.1094,-0.26562 -1.0234,0 -1.8242,0.39844 -2.4062,1.1875 -0.58594,0.78125 -0.875,1.8711 -0.875,3.2656 V -1e-4 H 2.3594 v -21.281 H 7.25 v 8.2031 c 0.73828,-0.88281 1.5195,-1.5391 2.3438,-1.9688 0.83203,-0.42578 1.75,-0.64062 2.75,-0.64062 1.7695,0 3.1133,0.54688 4.0312,1.6406 0.91406,1.0859 1.375,2.6562 1.375,4.7188 z"
id="path59" />
</symbol>
<symbol
id="q"
overflow="visible">
<path
d="m 2.5781,-20.406 h 5.875 l 7.4219,14 v -14 h 4.9844 V 0 h -5.875 L 7.5625,-14 V 0 H 2.5781 Z"
id="path62" />
</symbol>
<symbol
id="p"
overflow="visible">
<path
d="M 17.75,-9.3281 V 0 h -4.9219 v -7.1406 c 0,-1.3203 -0.03125,-2.2344 -0.09375,-2.7344 -0.0625,-0.5 -0.16797,-0.86719 -0.3125,-1.1094 -0.1875,-0.3125 -0.44922,-0.55469 -0.78125,-0.73438 -0.32422,-0.17578 -0.69531,-0.26562 -1.1094,-0.26562 -1.0234,0 -1.8242,0.39844 -2.4062,1.1875 -0.58594,0.78125 -0.875,1.8711 -0.875,3.2656 V -1e-4 H 2.3594 v -15.312 H 7.25 v 2.2344 c 0.73828,-0.88281 1.5195,-1.5391 2.3438,-1.9688 0.83203,-0.42578 1.75,-0.64062 2.75,-0.64062 1.7695,0 3.1133,0.54688 4.0312,1.6406 0.91406,1.0859 1.375,2.6562 1.375,4.7188 z"
id="path65" />
</symbol>
<symbol
id="o"
overflow="visible">
<path
d="m 2.5781,-20.406 h 8.7344 c 2.5938,0 4.582,0.57812 5.9688,1.7344 1.3945,1.1484 2.0938,2.7891 2.0938,4.9219 0,2.1367 -0.69922,3.7812 -2.0938,4.9375 -1.3867,1.1562 -3.375,1.7344 -5.9688,1.7344 H 7.8281 V 3e-4 h -5.25 z m 5.25,3.8125 v 5.7031 H 10.75 c 1.0195,0 1.8047,-0.25 2.3594,-0.75 0.5625,-0.5 0.84375,-1.2031 0.84375,-2.1094 0,-0.91406 -0.28125,-1.6172 -0.84375,-2.1094 -0.55469,-0.48828 -1.3398,-0.73438 -2.3594,-0.73438 z"
id="path68" />
</symbol>
<symbol
id="n"
overflow="visible">
<path
d="M 2.3594,-15.312 H 7.25 v 15.031 c 0,2.0508 -0.49609,3.6172 -1.4844,4.7031 -0.98047,1.082 -2.4062,1.625 -4.2812,1.625 H -0.9375 V 2.8283 h 0.85938 c 0.92578,0 1.5625,-0.21094 1.9062,-0.625 0.35156,-0.41797 0.53125,-1.2461 0.53125,-2.4844 z m 0,-5.9688 H 7.25 v 4 H 2.3594 Z"
id="path71" />
</symbol>
<symbol
id="m"
overflow="visible">
<path
d="m 14.719,-14.828 v 3.9844 c -0.65625,-0.45703 -1.3242,-0.79688 -2,-1.0156 -0.66797,-0.21875 -1.3594,-0.32812 -2.0781,-0.32812 -1.3672,0 -2.4336,0.40234 -3.2031,1.2031 -0.76172,0.79297 -1.1406,1.9062 -1.1406,3.3438 0,1.4297 0.37891,2.543 1.1406,3.3438 0.76953,0.79297 1.8359,1.1875 3.2031,1.1875 0.75781,0 1.4844,-0.10938 2.1719,-0.32812 0.6875,-0.22656 1.3203,-0.56641 1.9062,-1.0156 v 4 c -0.76172,0.28125 -1.5391,0.48828 -2.3281,0.625 -0.78125,0.14453 -1.5742,0.21875 -2.375,0.21875 -2.7617,0 -4.9219,-0.70703 -6.4844,-2.125 -1.5547,-1.4141 -2.3281,-3.3828 -2.3281,-5.9062 0,-2.5312 0.77344,-4.5039 2.3281,-5.9219 1.5625,-1.4141 3.7227,-2.125 6.4844,-2.125 0.80078,0 1.5938,0.07422 2.375,0.21875 0.78125,0.13672 1.5547,0.35156 2.3281,0.64062 z"
id="path74" />
</symbol>
</defs>
<g
id="g161"
transform="matrix(0.99206349,0,0,0.99206349,-97.222222,-27.777778)"
style="fill:#ffffff">
<path
d="M 350,532 C 488.95,532 602,418.95 602,280 602,141.05 488.95,28 350,28 211.05,28 98,141.05 98,280 98,418.95 211.05,532 350,532 Z M 350,39.2 C 482.78,39.2 590.8,147.22 590.8,280 590.8,412.78 482.78,520.8 350,520.8 217.22,520.8 109.2,412.78 109.2,280 109.2,147.22 217.22,39.2 350,39.2 Z"
id="path79"
style="fill:#ffffff" />
<path
d="m 240.13,423.28 c 1.3789,10.707 10.449,19.039 21.527,19.039 12.023,0 21.805,-9.7812 21.805,-21.805 v -129.64 c 0,-12.023 -9.7812,-21.805 -21.805,-21.805 -11.082,0 -20.16,8.3398 -21.527,19.059 -21.43,1.6758 -40.086,13.316 -51.309,30.32 v -50.602 c 0,-89.062 72.301,-161.52 161.17,-161.52 88.869,0 161.17,72.453 161.17,161.52 v 50.992 c -11.195,-17.215 -29.953,-29.023 -51.547,-30.715 -1.3711,-10.711 -10.445,-19.059 -21.527,-19.059 -12.023,0 -21.805,9.7812 -21.805,21.805 v 129.64 c 0,12.023 9.7812,21.805 21.805,21.805 11.078,0 20.148,-8.332 21.527,-19.039 34.914,-2.7344 62.512,-31.977 62.512,-67.602 0,-3.4492 -0.33984,-6.8164 -0.83984,-10.129 0.62891,-0.90625 1.082,-1.9414 1.082,-3.1289 l 0.004,-74.582 c 0,-95.234 -77.332,-172.71 -172.38,-172.71 -95.043,0 -172.38,77.48 -172.38,172.71 v 74.582 c 0,1.0586 0.375,1.9922 0.88672,2.8398 -0.52734,3.4062 -0.88672,6.8672 -0.88672,10.422 0,35.625 27.594,64.867 62.508,67.602 z m 10.922,-132.41 c 0,-5.8477 4.7617,-10.605 10.605,-10.605 5.8477,0 10.605,4.7617 10.605,10.605 v 129.64 c 0,5.8477 -4.7617,10.605 -10.605,10.605 -5.8477,0 -10.605,-4.7617 -10.605,-10.605 z m 197.64,129.64 c 0,5.8477 -4.7617,10.605 -10.605,10.605 -5.8477,0 -10.605,-4.7617 -10.605,-10.605 V 290.87 c 0,-5.8477 4.7617,-10.605 10.605,-10.605 5.8477,0 10.605,4.7617 10.605,10.605 z m 11.199,-8.4453 v -112.74 c 28.605,2.8242 51.031,27.008 51.031,56.348 0.004,29.359 -22.418,53.562 -51.031,56.391 z m -220.04,-112.74 v 112.74 c -28.605,-2.8242 -51.027,-27.031 -51.027,-56.391 0,-29.34 22.422,-53.527 51.027,-56.348 z"
id="path81"
style="fill:#ffffff" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 17 KiB

41
public/images/menu.svg Normal file
View file

@ -0,0 +1,41 @@
<?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="0.77806997"
inkscape:cx="453.04409"
inkscape:cy="318.7374"
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="M 26.133829,0.84660089 C 19.460762,0.70634114 13.026859,4.3225687 8.2720761,10.88465 3.5231302,17.446931 0.84265724,26.40939 0.84265724,35.762301 c 0,9.352911 2.68033066,18.31497 7.42941886,24.87765 4.7544979,6.56228 11.1885439,10.178507 17.8617529,10.038048 H 673.86617 c 6.67307,0.14026 13.10697,-3.475968 17.86175,-10.038048 4.74895,-6.562282 7.42942,-15.524739 7.42942,-24.87765 0,-9.352911 -2.68032,-18.314971 -7.42942,-24.877651 C 686.97343,4.3223691 680.53938,0.70614162 673.86617,0.84660089 Z m 0,314.23770911 C 19.460762,314.94405 13.026859,318.56028 8.2720761,325.12236 3.5231302,331.68463 0.84265724,340.64709 0.84265724,350 c 0,9.35291 2.68033066,18.31498 7.42941886,24.87765 4.7544979,6.56229 11.1885439,10.17851 17.8617529,10.03806 H 673.86617 c 6.67307,0.14025 13.10697,-3.47598 17.86175,-10.03806 4.74895,-6.56228 7.42942,-15.52474 7.42942,-24.87765 0,-9.35291 -2.68032,-18.31496 -7.42942,-24.87764 -4.75449,-6.56229 -11.18854,-10.17851 -17.86175,-10.03805 z m 0,314.23769 c -6.673067,-0.14025 -13.10697,3.47597 -17.8617529,10.03805 -4.7489459,6.56229 -7.42941886,15.52475 -7.42941886,24.87766 0,9.35291 2.68033066,18.31496 7.42941886,24.87764 4.7544979,6.56228 11.1885439,10.17851 17.8617529,10.03805 H 673.86617 c 6.67307,0.14026 13.10697,-3.47597 17.86175,-10.03805 4.74895,-6.56227 7.42942,-15.52473 7.42942,-24.87764 0,-9.35291 -2.68032,-18.31498 -7.42942,-24.87766 -4.75449,-6.56228 -11.18854,-10.17851 -17.86175,-10.03805 z"
fill-rule="evenodd"
id="path2"
style="fill:#ffffff;stroke:#ffffff;stroke-width:1.68531" />
</svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

41
public/images/mute.svg Normal file
View file

@ -0,0 +1,41 @@
<?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="445.76438"
inkscape:cy="450.76276"
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="m 424.05125,0.0241552 c -3.89316,0.13021398 -7.70251,1.3150728 -11.12719,3.4699283 L 143.63259,172.79058 H 24.987278 c -6.626055,0 -12.984532,3.07294 -17.6695751,8.54149 C 2.6326596,186.80729 0,194.22247 0,201.95665 v 291.66064 c 0,7.74068 2.6326596,15.15602 7.3177029,20.62458 4.6850431,5.46855 11.0435201,8.54149 17.6695751,8.54149 H 143.48124 l 269.20579,173.56308 v 0.007 c 7.74163,4.99989 17.16698,4.85023 24.79167,-0.39713 7.61883,-5.24072 12.29845,-14.79786 12.29845,-25.12281 V 29.179596 c 0,-7.884004 -2.73304,-15.435847 -7.57986,-20.931234 -4.84124,-5.4947199 -11.38934,-8.46982506 -18.1379,-8.23549657 z M 399.79503,78.010878 V 621.39965 L 162.03036,468.04949 c -3.70911,-2.37629 -7.87542,-3.61326 -12.10326,-3.5936 H 49.977984 V 231.12738 H 149.9271 c 4.13846,-0.0133 8.21567,-1.22394 11.85782,-3.5286 z m 124.6908,125.895732 v -0.007 c -6.66518,0 -13.05693,3.11194 -17.74811,8.63916 -4.69075,5.52721 -7.29543,13.01406 -7.23403,20.79457 0.0614,7.77984 2.78315,15.21452 7.55758,20.6379 l 57.29797,66.87362 -57.29797,66.87362 v 0.007 c -4.84125,5.42955 -7.6077,12.9034 -7.67466,20.74124 -0.0725,7.83834 2.56569,15.37735 7.3177,20.92456 4.74644,5.54022 11.20529,8.61966 17.92088,8.5415 6.71558,-0.0782 13.11832,-3.30727 17.76952,-8.96465 l 57.29797,-66.87362 57.29797,66.87362 h -0.006 c 4.65163,5.65738 11.06023,8.88648 17.77524,8.96465 6.70972,0.0782 13.17415,-3.00128 17.92087,-8.5415 4.74644,-5.54671 7.38467,-13.08572 7.31771,-20.92456 -0.067,-7.83884 -2.83342,-15.31219 -7.68024,-20.74124 l -57.29797,-66.87362 57.29797,-66.87362 v -0.007 c 4.84682,-5.49472 7.57429,-13.04006 7.57429,-20.92456 -0.006,-7.88401 -2.73861,-15.42935 -7.58542,-20.92457 -4.84682,-5.48822 -11.38935,-8.45683 -18.14362,-8.2225 -6.49227,0.22786 -12.64985,3.39193 -17.1784,8.82798 l -57.29226,66.88029 -57.29797,-66.88029 c -4.70189,-5.64438 -11.16061,-8.82798 -17.90945,-8.82798 z"
fill-rule="evenodd"
id="path2"
style="fill:#ffffff;stroke-width:1.54262" />
</svg>

After

Width:  |  Height:  |  Size: 3 KiB

40
public/images/pause.svg Normal file
View file

@ -0,0 +1,40 @@
<?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="445.76438"
inkscape:cy="466.21229"
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="M 35,0 C 25.7188,0 16.8124,2.634 10.25,7.3214286 3.6876,12.008857 0,18.370571 0,25 v 650 c 0,6.62943 3.6876,12.99114 10.25,17.67857 C 16.8124,697.366 25.7188,700 35,700 h 210 c 9.2812,0 18.1876,-2.634 24.75,-7.32143 C 276.3124,687.99114 280,681.62943 280,675 V 25 C 280,18.370571 276.3124,12.008857 269.75,7.3214286 263.1876,2.634 254.2812,0 245,0 Z M 455,0 C 445.7188,0 436.8124,2.634 430.25,7.3214286 423.6876,12.008857 420,18.370571 420,25 v 650 c 0,6.62943 3.6876,12.99114 10.25,17.67857 C 436.8124,697.366 445.7188,700 455,700 h 210 c 9.2812,0 18.1876,-2.634 24.75,-7.32143 C 696.3124,687.99114 700,681.62943 700,675 V 25 C 700,18.370571 696.3124,12.008857 689.75,7.3214286 683.1876,2.634 674.2812,0 665,0 Z M 70,50 H 210 V 650 H 70 Z m 420,0 H 630 V 650 H 490 Z"
id="path2"
style="fill:#ffffff;stroke-width:1.6903" />
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

41
public/images/play.svg Normal file
View file

@ -0,0 +1,41 @@
<?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="445.76438"
inkscape:cy="466.21229"
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="M 30.137388,0.01359364 C 22.233578,-0.20961762 14.564106,2.3238481 8.880337,7.039213 3.2032344,11.754578 -0.00649027,18.238776 9.8535228e-6,25.01897 v 649.99122 c 0,5.89835 2.4413774464772,11.61255 6.8816243464772,16.12121 4.4467468,4.50879 10.6056918,7.52775 17.3969808,8.51545 6.790456,0.98772 13.763249,-0.11157 19.700356,-3.10824 L 685.65724,371.543 C 694.54407,367.04535 700,358.85903 700,350.00901 c 0,-8.84474 -5.45577,-17.0312 -14.34276,-21.52828 L 43.978971,3.4851182 C 39.773229,1.3534327 35.013976,0.15930596 30.137555,0.01416506 Z M 58.334564,68.812664 613.5446,350.00887 58.334564,631.20507 Z"
fill-rule="evenodd"
id="path2"
style="fill:#ffffff;stroke-width:1.54304" />
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

40
public/images/stop.svg Normal file
View file

@ -0,0 +1,40 @@
<?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="445.76438"
inkscape:cy="505.29051"
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="M 25,0 C 18.370572,0 12.008857,2.634 7.3214285,7.3214285 2.634,12.008857 0,18.370572 0,25 v 650 c 0,6.62942 2.634,12.98542 7.3214285,17.67857 C 12.008857,697.366 18.370572,700 25,700 h 650 c 6.62942,0 12.98542,-2.634 17.67857,-7.32143 C 697.366,687.99114 700,681.62942 700,675 V 25 C 700,18.370572 697.366,12.008857 692.67857,7.3214285 687.99114,2.634 681.62942,0 675,0 Z M 49.999999,49.999999 H 650 V 650 H 49.999999 Z"
id="path2"
style="fill:#ffffff;stroke-width:1.42857" />
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

41
public/images/volume.svg Normal file
View file

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="653pt"
height="560pt"
version="1.1"
viewBox="0 0 653 560"
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="372.15191"
inkscape:cy="363.51835"
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="M 395.78271,0.00630007 C 392.14908,0.11046443 388.59367,1.0583564 385.39729,2.7822383 L 134.05761,138.17924 H 23.32155 c -6.184342,0 -12.118943,2.45835 -16.4916673,6.83838 C 2.4571586,149.39246 0,155.32474 0,161.51726 v 233.32815 c 0,6.18734 2.4571586,12.11947 6.8298827,16.4943 4.3727243,4.37484 10.3073253,6.83839 16.4916673,6.83839 h 110.5948 l 251.25971,138.90359 c 7.23075,4.00511 16.0439,3.88018 23.1603,-0.32812 7.1164,-4.20829 11.4734,-11.86426 11.45782,-20.13554 V 23.296063 C 419.78348,16.99407 417.22774,10.968204 412.70402,6.5831007 408.18551,2.1977313 402.08432,-0.17714919 395.79124,0.01031332 Z M 488.47587,56.791707 v -0.0052 c -7.31403,0.3125 -14.06089,4.046844 -18.20946,10.083111 -4.15417,6.031065 -5.23176,13.666363 -2.9152,20.614209 2.31656,6.952912 7.76168,12.405991 14.70058,14.739673 74.58231,26.42075 124.30653,96.80053 124.30653,175.9561 0,79.16491 -49.71489,149.54336 -124.30653,175.95611 v -0.005 c -5.85118,2.05208 -10.64569,6.34359 -13.3266,11.93719 -2.68092,5.58841 -3.02967,12.02053 -0.96827,17.86894 2.0667,5.84361 6.37172,10.63004 11.96796,13.30183 5.5961,2.66661 12.01993,2.99475 17.86031,0.91666 C 590.64751,465.20266 653,376.94996 653,278.18681 653,179.429 590.67682,91.217606 497.62517,58.258338 v -0.0052 c -2.92559,-1.093723 -6.03855,-1.588498 -9.15684,-1.453034 z m -115.3324,5.609209 V 497.07127 L 151.22893,374.434 v -0.005 c -3.45666,-1.91661 -7.34523,-2.92179 -11.29643,-2.92179 H 46.646299 V 184.84434 H 139.9325 v 0.005 c 3.86259,0.005 7.66799,-0.9531 11.06735,-2.78114 z m 115.46834,99.028474 v -0.005 c -6.48113,0.28126 -12.551,3.24474 -16.75155,8.18729 -4.20613,4.94255 -6.16354,11.41121 -5.40353,17.85427 0.76003,6.44772 4.16457,12.28612 9.40151,16.11431 23.45749,17.63961 37.21587,45.239 37.21587,74.60235 0,29.36335 -13.79569,56.96274 -37.26251,74.60234 v -0.005 c -4.95056,3.72392 -8.21984,9.26019 -9.08914,15.39566 -0.86934,6.13013 0.73401,12.35906 4.45615,17.31162 3.72212,4.94776 9.26092,8.21861 15.39356,9.08313 6.13237,0.86977 12.35309,-0.73957 17.30326,-4.4687 35.15956,-26.43675 55.84112,-67.9305 55.84112,-111.92952 0,-43.99368 -20.69755,-85.49277 -55.84112,-111.92418 v 0.005 c -4.36233,-3.36447 -9.76587,-5.07283 -15.26296,-4.83324 z"
fill-rule="evenodd"
id="path2"
style="fill:#ffffff;stroke-width:1.33299" />
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

182
styles.css Normal file
View file

@ -0,0 +1,182 @@
:root {
--border-radius: 12px;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
--foreground-rgb: 255, 255, 255;
--background-rgb: 10, 10, 10;
--shadow-rgb: 20, 20, 20;
--callout-rgb: 238, 240, 241;
--callout-border-rgb: 172, 175, 176;
--card-rgb: 180, 185, 188;
--card-border-rgb: 131, 134, 135;
}
* {
margin: 0;
padding: 0;
}
body {
color: rgb(var(--foreground-rgb));
background: rgb(var(--background-rgb));
}
main {
display: flex;
flex-direction: column;
align-items: center;
}
.centre {
margin: 40vh 0;
display: flex;
flex-direction: column;
align-items: center;
max-width: 70%;
}
.centre #begin {
background-color: 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;
width: 75%;
cursor: pointer;
}
.centre #beginOff {
visibility: none;
opacity: 0;
transition: visibility 0.5s, opacity 0.5s linear;
background: rgb(var(--card-rgb));
border: 1px solid rgb(var(--card-border-rgb));
border-radius: var(--border-radius);
padding: 1rem 1.2rem;
width: 75%;
}
.headphonesOff {
visibility: visible;
opacity: 0;
transition: display 2s, opacity 2s linear;
display: inherit;
flex-direction: inherit;
align-items: center;
}
.headphonesOn {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
display: inherit;
flex-direction: inherit;
align-items: center;
}
#headphonesImage {
height: 100px;
width: 100px;
margin-bottom: 10px;
}
footer {
position: fixed;
width: 100%;
bottom: 5dvh;
display: flex;
justify-content: space-evenly;
align-items: center;
}
footer section {
justify-self: center;
}
#credits {
text-align: right;
}
#creditsOff {
visibility: none;
opacity: 0;
transition: visibility 0.3s, opacity 0.3s linear;
}
.controlButtonOff {
visibility: none;
opacity: 0;
}
.controlButtonOn {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
border-radius: var(--border-radius);
background: none;
border: none;
cursor: pointer;
height: 60px;
width: 60px;
justify-content: center;
align-items: center;
}
.controlButtonOn:hover {
background-color: rgb(var(--shadow-rgb));
}
.controlImage {
height: 40px;
width: 40px;
}
.arrowButton {
background-color: rgb(var(--background-rgb));
border: 1px solid rgb(var(--background-rgb));
border-radius: var(--border-radius);
padding: 1rem 1.2rem;
cursor: pointer;
}
.arrowButton:hover {
border: 1px solid rgb(var(--shadow-rgb));
background-color: rgb(var(--shadow-rgb));
}
.arrowImage {
width: 75px;
}
.navigationOff {
display: none;
}
.navigationOn {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-content: center;
width: 30dvw;
position: fixed;
bottom: 12.5dvh;
}
#overview, #objectives, #howtoplay, #audiovisualstyles, #nameinspiration, #references {
display: none;
}
/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
.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 #button:hover {
transform: none;
}
}