43 lines
1.3 KiB
HTML
43 lines
1.3 KiB
HTML
---
|
|
title: the zone without time
|
|
---
|
|
<h1><span id="rgbClock"></span> - <span id="hueClock"></span>deg</h1>
|
|
<h2>click on the page if <a href="http://listen.hatnote.com/#en">music</a> is not playing!</h2>
|
|
<iframe id="mus" src="http://listen.hatnote.com/#en"
|
|
style="visibility: hidden"
|
|
sandbox="allow-scripts" samesite=none></iframe>
|
|
|
|
<style>
|
|
#psych::before {
|
|
content: ' ';
|
|
display: block;
|
|
position: absolute;
|
|
left: 0; top: 0;
|
|
width: 100%; height: 100%;
|
|
opacity: 0.9;
|
|
background-image: url("/assets/images/decor/shiny.jpg");
|
|
mix-blend-mode: hard-light;
|
|
}
|
|
</style>
|
|
<div class="background" id="psych" style="background-color: purple">
|
|
</div>
|
|
|
|
<script src="https://melonking.net/scripts/dayColour.js"></script>
|
|
<script src="/assets/js/hexclock.js"></script>
|
|
<script>
|
|
function colorUpdate() {
|
|
let bg = document.getElementById('psych');
|
|
//bg.style.backgroundColor = ttHex();
|
|
bg.style.backgroundColor = "hsl(" + hueSwatch() + " 80% 60%)"
|
|
document.getElementById('hueClock').innerHTML = hueSwatch();
|
|
|
|
let heads = document.querySelectorAll("h1, .main-content, .left-sidebar, .right-sidebar");
|
|
heads.forEach((head) => {
|
|
head.style.backgroundColor = getRGBeatNow();
|
|
});
|
|
|
|
document.getElementById('rgbClock').innerHTML = getRGBeatNow();
|
|
}
|
|
setInterval(colorUpdate, 500);
|
|
</script>
|