nicer-looking controls
This commit is contained in:
parent
e615061555
commit
351d85c69c
17
back.svg
Normal file
17
back.svg
Normal file
|
@ -0,0 +1,17 @@
|
|||
<?xml version='1.0' encoding='UTF-8'?>
|
||||
<!-- This file was generated by dvisvgm 1.15.1 -->
|
||||
<svg height='245.918pt' version='1.1' viewBox='56.6209 54.0603 165.618 245.918' width='165.618pt' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
|
||||
<g id='page1'>
|
||||
<g transform='matrix(0.996264 0 0 0.996264 113.909 191.358)'>
|
||||
<path d='M 0 100.375C 55.4356 100.375 100.375 55.4356 100.375 0C 100.375 -55.4356 55.4356 -100.375 3.34316e-14 -100.375' fill='none' stroke='#ff0000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='15.0562'/>
|
||||
</g>
|
||||
<g transform='matrix(0.996264 0 0 0.996264 113.909 191.358)'>
|
||||
<path d='M 0 -100.375L -50.1875 -100.375' fill='none' stroke='#ff0000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='15.0562'/>
|
||||
</g>
|
||||
<g transform='matrix(0.996264 0 0 0.996264 113.909 191.358)'>
|
||||
<path d='M -50.1875 -100.375L -20.075 -130.487' fill='none' stroke='#ff0000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='15.0562'/>
|
||||
</g>
|
||||
<g transform='matrix(0.996264 0 0 0.996264 113.909 191.358)'>
|
||||
<path d='M -50.1875 -100.375L -20.075 -70.2625' fill='none' stroke='#ff0000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='15.0562'/>
|
||||
</g></g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.3 KiB |
|
@ -2,23 +2,42 @@
|
|||
<head>
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
background-color: black;
|
||||
}
|
||||
#word {
|
||||
font-size: 80px;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 80px;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: red;
|
||||
}
|
||||
|
||||
#word img {
|
||||
height: 100px;
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
#controls img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="word"></div>
|
||||
<div id="word"><img src="../play.svg"></div>
|
||||
<script type="text/javascript">
|
||||
var started = false;
|
||||
var showControls = false;
|
||||
|
||||
var colorWords = ["red", "orange", "yellow", "green", "blue", "purple", "white"];
|
||||
var hypnoWords = ["sleep", "relax", "fall", "deeper", "trance"];
|
||||
var colors = ["red", "orange", "yellow", "green", "blue", "purple", "white"];
|
||||
|
@ -45,8 +64,22 @@
|
|||
wordEl.innerText = newWord;
|
||||
wordEl.style.color = newColor;
|
||||
}
|
||||
setInterval(changeWord, 1000);
|
||||
setInterval(function() { if (hypnoFrequency < hypnoIncrements) { hypnoFrequency++; } }, 5000);
|
||||
|
||||
window.onclick = function () {
|
||||
if (!started) {
|
||||
started = true;
|
||||
document.getElementById("controls").style.display = "none";
|
||||
changeWord();
|
||||
setInterval(changeWord, 1000);
|
||||
setInterval(function() { if (hypnoFrequency < hypnoIncrements) { hypnoFrequency++; } }, 5000);
|
||||
} else {
|
||||
document.getElementById("controls").style.display = showControls ? "none" : "block";
|
||||
showControls = !showControls;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="controls"><a href=".."><img src="../back.svg"></a> <a href="."><img src="../reload.svg"></a></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -51,6 +51,10 @@
|
|||
bottom: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
#controls img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
input[type=checkbox]:checked ~ #controls {
|
||||
display: block;
|
||||
}
|
||||
|
@ -75,6 +79,6 @@
|
|||
</svg>
|
||||
</div>
|
||||
<input type="checkbox">
|
||||
<div id="controls"><a href="..">back</a></div>
|
||||
<div id="controls"><a href=".."><img src="../back.svg"></a></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
8
play.svg
Normal file
8
play.svg
Normal file
|
@ -0,0 +1,8 @@
|
|||
<?xml version='1.0' encoding='UTF-8'?>
|
||||
<!-- This file was generated by dvisvgm 1.15.1 -->
|
||||
<svg height='100.375pt' version='1.1' viewBox='56.6209 54.0603 75.2808 100.375' width='75.2808pt' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
|
||||
<g id='page1'>
|
||||
<g transform='matrix(0.996264 0 0 0.996264 56.4094 103.858)'>
|
||||
<path d='M 0 50.1875L 0 -50.1875L 75.2812 0L 0 50.1875Z' fill='#ff0000'/>
|
||||
</g></g>
|
||||
</svg>
|
After Width: | Height: | Size: 434 B |
14
reload.svg
Normal file
14
reload.svg
Normal file
|
@ -0,0 +1,14 @@
|
|||
<?xml version='1.0' encoding='UTF-8'?>
|
||||
<!-- This file was generated by dvisvgm 1.15.1 -->
|
||||
<svg height='245.918pt' version='1.1' viewBox='56.6209 54.0603 215.806 245.918' width='215.806pt' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
|
||||
<g id='page1'>
|
||||
<g transform='matrix(0.996264 0 0 0.996264 163.909 191.358)'>
|
||||
<path d='M 0 -100.375C -55.4356 -100.375 -100.375 -55.4356 -100.375 -0C -100.375 55.4356 -55.4356 100.375 0 100.375C 55.4356 100.375 100.375 55.4356 100.375 0C 100.375 -43.3739 72.864 -80.3222 34.3396 -94.3473' fill='none' stroke='#ff0000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='15.0562'/>
|
||||
</g>
|
||||
<g transform='matrix(0.996264 0 0 0.996264 163.909 191.358)'>
|
||||
<path d='M 0 -100.375L -30.1125 -130.487' fill='none' stroke='#ff0000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='15.0562'/>
|
||||
</g>
|
||||
<g transform='matrix(0.996264 0 0 0.996264 163.909 191.358)'>
|
||||
<path d='M 0 -100.375L -30.1125 -70.2625' fill='none' stroke='#ff0000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='15.0562'/>
|
||||
</g></g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in a new issue