-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (64 loc) · 3.05 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!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;}
}
@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;}
}
table { position:absolute; width:100%; height:100%; top:0px; left:0px;}
.fb-like {position:static; width:100px;}
</style>
</head>
<body onLoad="dotime()">
<table><td height="100%" width="100%" align="center" valign="middle">
<h1 id="t"></h1><br>
<h2 id="rgb"></h2>
<h2 id="h"></h2>
</td></table>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
<!-- http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb -->
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
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();
if (hours < 10){hours = "0" + hours};
if (mins < 10){mins = "0" + mins};
if (secs < 10){secs = "0" + secs};
var hoursRed = Math.floor(hours / 23 * 255);
var minutesGreen = Math.floor(mins / 59 * 255);
var secondsBlue = Math.floor(secs / 59 * 255);
hours.toString();
mins.toString();
secs.toString();
var hex = "#" + componentToHex(hoursRed) + componentToHex(minutesGreen) + componentToHex(secondsBlue);
var rgb = "RGB: "+ hoursRed + ','+minutesGreen + ','+secondsBlue;
$("#t").html(hours +" : "+ mins +" : "+ secs);
$("#rgb").html(rgb);
$("#h").html(hex);
jQuery('body').css('background-color', 'rgb('+hoursRed+','+minutesGreen+','+secondsBlue+')');
setTimeout(function(){ dotime();}, 1000);
}
</script>
</html>