Add headphones recommended
This commit is contained in:
parent
4a3a4a4dd1
commit
e616be7c5a
GPG key ID:
610ED1098B8F435B
4 changed files with 271 additions and 4 deletions
|
|
@ -11,6 +11,11 @@
|
||||||
<main>
|
<main>
|
||||||
<section class="centre">
|
<section class="centre">
|
||||||
<button id="begin" onclick="begin()">Click to begin</button>
|
<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>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
|
|
@ -25,7 +30,8 @@
|
||||||
<audio id="backgroundAudio" src="public/audio/roli.weba" type="audio/weba">
|
<audio id="backgroundAudio" src="public/audio/roli.weba" type="audio/weba">
|
||||||
</section>
|
</section>
|
||||||
<p class="credits" id="credits">By Rory Healy.</p>
|
<p class="credits" id="credits">By Rory Healy.</p>
|
||||||
</footer> <script src="main.js"></script>
|
</footer>
|
||||||
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
12
main.js
12
main.js
|
|
@ -26,6 +26,16 @@ const begin = () => {
|
||||||
for (let element of document.querySelectorAll('.credits')) {
|
for (let element of document.querySelectorAll('.credits')) {
|
||||||
element.id = 'creditsOff';
|
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(() => {
|
setTimeout(() => {
|
||||||
for (let element of document.querySelectorAll('.credits')) {
|
for (let element of document.querySelectorAll('.credits')) {
|
||||||
element.style.display = 'none';
|
element.style.display = 'none';
|
||||||
|
|
@ -33,6 +43,6 @@ const begin = () => {
|
||||||
for (let element of document.querySelectorAll('.controlButtonOff')) {
|
for (let element of document.querySelectorAll('.controlButtonOff')) {
|
||||||
element.className = 'controlButtonOn';
|
element.className = 'controlButtonOn';
|
||||||
}
|
}
|
||||||
}, 1000);
|
|
||||||
playPauseAudio()
|
playPauseAudio()
|
||||||
|
}, 7000);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
225
public/images/headphones.svg
Normal file
225
public/images/headphones.svg
Normal 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 |
28
styles.css
28
styles.css
|
|
@ -30,6 +30,8 @@ main {
|
||||||
|
|
||||||
.centre {
|
.centre {
|
||||||
margin: 40vh 0;
|
margin: 40vh 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.centre #begin {
|
.centre #begin {
|
||||||
|
|
@ -43,13 +45,37 @@ main {
|
||||||
.centre #beginOff {
|
.centre #beginOff {
|
||||||
visibility: none;
|
visibility: none;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: visibility 0.3s, opacity 0.3s linear;
|
transition: visibility 0.5s, opacity 0.5s linear;
|
||||||
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);
|
border-radius: var(--border-radius);
|
||||||
padding: 1rem 1.2rem;
|
padding: 1rem 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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 {
|
footer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue