xenofem/mindjack
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

nicer-looking controls

Browse source
This commit is contained in:
Xenofem 2018-12-19 19:30:56 -05:00
parent e615061555
commit 351d85c69c
5 changed files with 89 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
back.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

57
colors/index.html
View file

@ -2,23 +2,42 @@
<head> <head>
<style> <style>
body { body {
background-color: black; background-color: black;
} }
#word { #word {
font-size: 80px; font-size: 80px;
font-family: sans-serif; font-family: sans-serif;
font-weight: bold; font-weight: bold;
width: 100%; width: 100%;
text-align: center; text-align: center;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-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> </style>
</head> </head>
<body> <body>
<div id="word"></div> <div id="word"><img src="../play.svg"></div>
<script type="text/javascript"> <script type="text/javascript">
var started = false;
var showControls = false;
var colorWords = ["red", "orange", "yellow", "green", "blue", "purple", "white"]; var colorWords = ["red", "orange", "yellow", "green", "blue", "purple", "white"];
var hypnoWords = ["sleep", "relax", "fall", "deeper", "trance"]; var hypnoWords = ["sleep", "relax", "fall", "deeper", "trance"];
var colors = ["red", "orange", "yellow", "green", "blue", "purple", "white"]; var colors = ["red", "orange", "yellow", "green", "blue", "purple", "white"];
@ -45,8 +64,22 @@
wordEl.innerText = newWord; wordEl.innerText = newWord;
wordEl.style.color = newColor; 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> </script>
<div id="controls"><a href=".."><img src="../back.svg"></a> <a href="."><img src="../reload.svg"></a></div>
</body> </body>
</html> </html>

6
follow/index.html
View file

@ -51,6 +51,10 @@
bottom: 10px; bottom: 10px;
left: 10px; left: 10px;
} }
#controls img {
width: 40px;
height: 40px;
}
input[type=checkbox]:checked ~ #controls { input[type=checkbox]:checked ~ #controls {
display: block; display: block;
} }
@ -75,6 +79,6 @@
</svg> </svg>
</div> </div>
<input type="checkbox"> <input type="checkbox">
<div id="controls"><a href="..">back</a></div> <div id="controls"><a href=".."><img src="../back.svg"></a></div>
</body> </body>
</html> </html>

8
play.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 434 B

14
reload.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB