Web-based hypnosis widgets
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

86 lines
2.4 KiB

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
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%);
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"><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"];
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;
}
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>