Skip to content

Instantly share code, notes, and snippets.

@madprog

madprog/gist:62428f92f17c3b9bc2cd

Created May 26, 2015 15:30
Show Gist options
  • Save madprog/62428f92f17c3b9bc2cd to your computer and use it in GitHub Desktop.
Save madprog/62428f92f17c3b9bc2cd to your computer and use it in GitHub Desktop.
Download ZIP
WhatColourIsIt (http://whatcolourisit.scn9a.org/) with a larger color space
Raw
gistfile1.html
<!DOCTYPE html><html><head><title>What colour is it?</title><meta charset="UTF-8" ><link href='http://fonts.googleapis.com/css?family=Open+Sans:800,400,300' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="http://scn9a.org/whatcolourisit/2.png">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta name="description" content="what colour is it?"/>
<meta property="og:title" content="What colour is it?" />
<meta property='og:locale' content="en_GB"/>
<meta property='og:description' content="the time....... now in colour."/>
<meta property="og:type" content="Website" />
<meta property='og:site_name' content="SCN9A"/>
<meta property="og:url" content="http://whatcolourisit.scn9a.org/" />
<meta property="og:image" content="http://scn9a.org/whatcolourisit/1.jpg" />
<style>
@media all and (max-width: 1024px) {
h1 { font-family:"open sans"; font-size:40px; font-weight:300; color:white; transition:all 0.6s; -webkit-transition:all 0.6s;}
h2 { font-family:"open sans"; font-size:20px; font-weight:300; color:white; transition:all 0.6s; -webkit-transition:all 0.6s;}
iframe { display:none;}
}
@media all and (min-width: 1024px) {
h1 { font-family:"open sans"; font-size:120px; font-weight:300; color:white; transition:all 0.6s; -webkit-transition:all 0.6s;}
h2 { font-family:"open sans"; font-size:30px; font-weight:300; color:white; transition:all 0.6s; -webkit-transition:all 0.6s;}
iframe { position:absolute; bottom:-30px; left:50%; margin-left:-25px; opacity:0.1; transition:all 0.4s; -webkit-transition:all 0.4s; width:50px;}
iframe:hover {opacity:1;}
}
table { position:absolute; width:100%; height:100%; top:0px; left:0px;}
</style>
</head>
<body onLoad="dotime()">
<table><td height="100%" width="100%" align="center" valign="middle">
<h1 id="t"></h1><br>
<h2 id="h"></h2>
</td></table>
<iframe src="http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fscn9a&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;share=false&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:65px;" allowTransparency="true"></iframe>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function dotime() {
$("body").css({"transition": "all 0.8s", "-webkit-transition": "all 0.8s"});
var d = new Date();
var hours = d.getHours();
var mins = d.getMinutes();
var secs = d.getSeconds();
var hhours = (parseInt(255 * hours / 24)).toString(16);
var hmins = (parseInt(255 * mins / 60)).toString(16);
var hsecs = (parseInt(255 * secs / 60)).toString(16);
if (hours < 10){hours = "0" + hours};
if (mins < 10){mins = "0" + mins};
if (secs < 10){secs = "0" + secs};
if (hhours.length < 2){hhours = "0" + hhours};
if (hmins.length < 2){hmins = "0" + hmins};
if (hsecs.length < 2){hsecs = "0" + hsecs};
var hex = "#" + hhours + hmins + hsecs;
$("#t").html(hours +" : "+ mins +" : "+ secs);
$("#h").html(hex);
document.body.style.background = hex;
setTimeout(function(){ dotime();}, 1000);
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment