2015-10-02 16:34:55 +02:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>What color is it?</title>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta name="viewport" content="user-scalable=yes,initial-scale=1" />
|
2018-06-06 20:36:32 +02:00
|
|
|
<link rel="shortcut icon" href="favicon.ico" />
|
2015-10-02 16:34:55 +02:00
|
|
|
<style>
|
|
|
|
|
* { color: #fff; }
|
2015-10-02 16:35:46 +02:00
|
|
|
html, body, body > div { margin: 0; height: 100%; }
|
2015-10-02 16:34:55 +02:00
|
|
|
|
|
|
|
|
div { text-align: center; }
|
|
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
|
font-family: Verdana, Arial, sans-serif;
|
|
|
|
|
font-size: 4em;
|
|
|
|
|
}
|
|
|
|
|
h2 { font-family: courier; }
|
2015-10-02 16:35:46 +02:00
|
|
|
|
2018-06-06 20:36:32 +02:00
|
|
|
#whatcolorisit {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#whatcolorisit > div {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2015-10-02 16:35:46 +02:00
|
|
|
.spectrum {
|
|
|
|
|
height: 50px;
|
|
|
|
|
background-color: #000;
|
|
|
|
|
overflow: hidden;
|
2018-06-06 20:36:32 +02:00
|
|
|
align-self: flex-end;
|
2015-10-02 16:35:46 +02:00
|
|
|
}
|
2018-06-06 20:36:32 +02:00
|
|
|
|
2015-10-02 16:35:46 +02:00
|
|
|
.spectrum > div {
|
|
|
|
|
width: 1px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
2015-10-02 16:34:55 +02:00
|
|
|
</style>
|
|
|
|
|
<script type="text/javascript">
|
2015-10-02 16:35:46 +02:00
|
|
|
Date.today = function() {
|
|
|
|
|
now = new Date();
|
|
|
|
|
now.setHours(0);
|
|
|
|
|
now.setMinutes(0);
|
|
|
|
|
now.setSeconds(0);
|
|
|
|
|
now.setMilliseconds(0);
|
|
|
|
|
|
|
|
|
|
return now.getTime();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
Date.prototype.toHexColor = function() {
|
2015-10-02 16:34:55 +02:00
|
|
|
var hours, minutes, seconds;
|
|
|
|
|
|
|
|
|
|
total_seconds = this.getHours() * 3600 + this.getMinutes() * 60 + this.getSeconds();
|
|
|
|
|
|
|
|
|
|
var hex = Math.floor(total_seconds * 0xFFFFFF / 86400)
|
|
|
|
|
return "#" + ("000000" + hex.toString(16)).substr(-6)
|
|
|
|
|
};
|
|
|
|
|
|
2015-10-02 16:35:46 +02:00
|
|
|
Date.prototype.toRgbColor = function() {
|
|
|
|
|
return "rgb(" + Math.round(this.getHours() * 255 / 24) + ", " + Math.round(this.getMinutes() * 255 / 60) + ", " + Math.round(this.getSeconds() * 255 / 60) + ")";
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
Date.prototype.toHslColor = function() {
|
|
|
|
|
return "hsl(" + Math.round(this.getHours() * 360 / 24) + ", " + Math.round(this.getMinutes() + 20) + "%, " + Math.round(this.getSeconds() + 20) + "%)";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function WhatColorIsIt(mainDiv, toColor) {
|
|
|
|
|
this.mainDiv = mainDiv
|
|
|
|
|
this.toColor = toColor;
|
|
|
|
|
this.running = false;
|
|
|
|
|
|
|
|
|
|
this.mainDiv.style.transition = 'all 0.8s';
|
|
|
|
|
|
|
|
|
|
this.spectrumDiv = document.createElement('div');
|
|
|
|
|
this.spectrumDiv.className = 'spectrum';
|
|
|
|
|
|
|
|
|
|
this.controlsDiv = document.createElement('div');
|
|
|
|
|
this.controlsDiv.className = 'controls';
|
|
|
|
|
this.controlsDiv.style.cursor = 'pointer';
|
|
|
|
|
this.controlsDiv.textContent = '>';
|
|
|
|
|
this.controlsDiv.addEventListener('click', this.toggle.bind(this));
|
|
|
|
|
|
|
|
|
|
this.timeDiv = document.createElement('div');
|
|
|
|
|
this.timeDiv.className = 'time';
|
|
|
|
|
this.timeDiv.innerHTML = '<h1><time></time></h1><h2></h2>';
|
|
|
|
|
|
|
|
|
|
this.mainDiv.appendChild(this.timeDiv);
|
|
|
|
|
this.mainDiv.appendChild(this.controlsDiv);
|
2018-06-06 20:36:32 +02:00
|
|
|
this.mainDiv.appendChild(this.spectrumDiv);
|
2015-10-02 16:34:55 +02:00
|
|
|
|
2015-10-02 16:35:46 +02:00
|
|
|
this.current();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
WhatColorIsIt.prototype.spectrum = function(today) {
|
|
|
|
|
var tomorrow = today + 86400000;
|
|
|
|
|
var increment = (tomorrow - today) / this.spectrumDiv.offsetWidth;
|
2015-10-02 16:34:55 +02:00
|
|
|
|
2015-10-02 16:42:24 +02:00
|
|
|
this.spectrumDiv.innerHTML = '';
|
|
|
|
|
|
2015-10-02 16:35:46 +02:00
|
|
|
for(var i = today; i < tomorrow; i += increment) {
|
|
|
|
|
color = document.createElement('div');
|
|
|
|
|
color.style.background = this.toColor(new Date(i));
|
|
|
|
|
color.dataset.timestamp = i;
|
2015-10-02 16:34:55 +02:00
|
|
|
|
2015-10-02 16:35:46 +02:00
|
|
|
color.addEventListener('mouseenter', function(e) {
|
|
|
|
|
this.process(new Date(parseInt(e.target.dataset.timestamp)))
|
|
|
|
|
}.bind(this));
|
|
|
|
|
|
|
|
|
|
this.spectrumDiv.appendChild(color);
|
2015-10-02 16:34:55 +02:00
|
|
|
}
|
|
|
|
|
|
2015-10-02 16:35:46 +02:00
|
|
|
this.spectrumDiv.addEventListener('mouseenter', this.stop.bind(this));
|
|
|
|
|
this.spectrumDiv.addEventListener('mouseleave', this.start.bind(this));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
WhatColorIsIt.prototype.current = function() {
|
|
|
|
|
this.process(new Date());
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
WhatColorIsIt.prototype.process = function(d) {
|
|
|
|
|
color = this.toColor(d);
|
|
|
|
|
|
|
|
|
|
this.timeDiv.querySelector('time').textContent = d.toLocaleTimeString();
|
|
|
|
|
this.timeDiv.querySelector('h2').textContent = color;
|
|
|
|
|
|
|
|
|
|
this.mainDiv.style.background = color;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
WhatColorIsIt.prototype.run = function() {
|
|
|
|
|
this.spectrum(Date.today());
|
2015-10-02 16:42:24 +02:00
|
|
|
window.addEventListener('resize', function() {
|
|
|
|
|
if(typeof resizewait != 'undefined') {
|
|
|
|
|
clearTimeout(resizewait);
|
|
|
|
|
}
|
|
|
|
|
resizewait = setTimeout(function() { this.spectrum(Date.today()); }.bind(this), 200);
|
|
|
|
|
}.bind(this));
|
|
|
|
|
|
2015-10-02 16:35:46 +02:00
|
|
|
this.start();
|
|
|
|
|
};
|
|
|
|
|
WhatColorIsIt.prototype.start = function() {
|
|
|
|
|
this.running = true;
|
|
|
|
|
this.controlsDiv.textContent = '||';
|
|
|
|
|
this.current();
|
|
|
|
|
this.interval = setInterval(this.current.bind(this), 1000);
|
|
|
|
|
};
|
|
|
|
|
WhatColorIsIt.prototype.stop = function() {
|
|
|
|
|
this.running = false;
|
|
|
|
|
this.controlsDiv.textContent = '>';
|
|
|
|
|
clearInterval(this.interval);
|
|
|
|
|
};
|
|
|
|
|
WhatColorIsIt.prototype.toggle = function() { this.running ? this.stop() : this.start() }
|
|
|
|
|
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
|
|
|
new WhatColorIsIt(document.getElementById('whatcolorisit'),
|
|
|
|
|
function(d) { return d.toHslColor(); }).run();
|
2015-10-02 16:34:55 +02:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2015-10-02 16:35:46 +02:00
|
|
|
<div id="whatcolorisit"></div>
|
2015-10-02 16:34:55 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
