Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
93 lines (77 sloc) 2.75 KB
<!DOCTYPE html>
<html>
<head>
<title>ColourClock - What time / color is it?</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/*custom font - Exo*/
@import url("https://fonts.googleapis.com/css?family=Exo:100");
/*basic reset*/
* {margin: 0; padding: 0;}
/*make the body occupy full height*/
html, body {height: 100%;background-color:white;}
#hex {
color: white; font: 64px/64px Exo;
/*Vertical centering*/
position: relative; top: 50%; margin-top: -80px;
/*Horizontal centering*/
text-align: center;
}
#welcome {
color: white; font: 24px Exo;
/*Vertical centering*/
padding-top:20px;
/*Horizontal centering*/
text-align: center;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<a href="https://github.com/kxrz/apps/blob/master/clock.html"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/c6286ade715e9bea433b4705870de482a654f78a/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_white_ffffff.png"></a>
<div id="welcome">What time / color is it?</div>
<div id="hex"></div>
<div id="footer"><iframe src="https://open.spotify.com/embed?uri=spotify:user:kixxerize:playlist:4dR2mQQ0WiCoajPfCtf1Iy" width="300" height="80" frameborder="0" allowtransparency="true"></iframe></div>
<script>
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
//lets display the current time, ok?
var d, h, m, s, color, colorTime;
var r,g,b;
function displayTime() {
d = new Date();
h = d.getHours();
m = d.getMinutes();
s = d.getSeconds();
//magic is here
r = Math.round((h * 255)/24);
g = Math.round((m * 255)/60);
b = Math.round((s * 255)/60);
color = rgbToHex(r,g,b);
if(h <= 9) h = '0'+h;
if(m <= 9) m = '0'+m;
if(s <= 9) s = '0'+s;
colorTime = h+":"+m+":"+s;
//set background color, yes.
document.body.style.background = color;
//set time, yes.
document.getElementById("hex").innerHTML = colorTime + "<br/>"+ color;
//retrigger the function every second, of course.
setTimeout(displayTime, 1000);
}
//call the function
displayTime();
</script>
</body>
</html>