mindjack/colors/index.html

86 lines
2.3 KiB
HTML
Raw Normal View History

2018-11-23 14:51:20 -05:00
<html>
<head>
<style>
body {
2018-12-19 19:30:56 -05:00
background-color: black;
2018-11-23 14:51:20 -05:00
}
#word {
2018-12-19 19:30:56 -05:00
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;
2018-11-23 14:51:20 -05:00
}
</style>
</head>
<body>
2018-12-19 19:30:56 -05:00
<div id="word"><img src="../play.svg"></div>
2018-11-23 14:51:20 -05:00
<script type="text/javascript">
2018-12-19 19:30:56 -05:00
var started = false;
var showControls = false;
2018-11-23 14:51:20 -05:00
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"];
var wordEl = document.getElementById("word");
function randomChoice(a) {
return a[Math.floor(Math.random()*a.length)];
}
var hypnoFrequency = 0;
var hypnoIncrements = 10;
function changeWord() {
var wordList = (Math.random()*hypnoIncrements < hypnoFrequency) ? hypnoWords : colorWords;
var newWord;
do {
newWord = randomChoice(wordList);
} while (newWord === wordEl.innerText);
var newColor;
do {
newColor = randomChoice(colors);
} while (newColor === wordEl.style.color);
wordEl.innerText = newWord;
wordEl.style.color = newColor;
}
2018-12-19 19:30:56 -05:00
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;
}
}
2018-11-23 14:51:20 -05:00
</script>
2018-12-19 19:30:56 -05:00
<div id="controls"><a href=".."><img src="../back.svg"></a> <a href="."><img src="../reload.svg"></a></div>
2018-11-23 14:51:20 -05:00
</body>
</html>