-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
119 lines (86 loc) · 4.03 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html><html><head><title>NebCorp ColorTime Service, a NebCorp Service brought to you by NebCorp</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://wwn.nebcorp.com/images/logo/corplogo-bigearth.gif">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta name="description" content="NebCorp ColorTime Service, a NebCorp Service brought to you by NebCorp"/>
<meta property="og:title" content="NebCorp ColorTime Service, a NebCorp Service brought to you by NebCorp" />
<meta property='og:locale' content="en_US"/>
<meta property='og:description' content="NebCorp ColorTime Service, a NebCorp Service brought to you by NebCorp"/>
<meta property="og:type" content="Website" />
<meta property='og:site_name' content="colortime.nebcorp.com"/>
<meta property="og:url" content="http://colortime.nebcorp.com/" />
<meta property="og:image" content="http://wwn.nebcorp.com/images/buttons/navlogo.gif" />
<!-- Source code originally from http://whatcolourisit.scn9a.org/ -->
<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="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">
var hourvals = [0, 23];
var minutevals = [0, 59];
var secondvals = minutevals;
var colorvals = [0, 255];
var light = "#ffffff";
var dark = "#202020";
// http://stackoverflow.com/a/13397771
function rgb2hex(r,g,b) {
if (g !== undefined)
return Number(0x1000000 + r*0x10000 + g*0x100 + b).toString(16).substring(1).toUpperCase();
else
return Number(0x1000000 + r[0]*0x10000 + r[1]*0x100 + r[2]).toString(16).substring(1).toUpperCase();
}
// taken from http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx
function getBrightness(r, g, b) {
return Math.sqrt( (0.241 * (r * r)) + (0.691 * (g * g)) + (0.068 * (b * b)) );
}
// http://rosettacode.org/wiki/Map_range#JavaScript
function mapRange(from, to, s) {
return Math.ceil(to[0] + (s - from[0]) * (to[1] - to[0]) / (from[1] - from[0]));
};
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 red = mapRange(hourvals, colorvals, hours);
var green = mapRange(minutevals, colorvals, mins);
var blue = mapRange(secondvals, colorvals, secs);
var rgbhex = rgb2hex(red, green, blue);
if (hours < 10){hours = "0" + hours};
if (mins < 10){mins = "0" + mins};
if (secs < 10){secs = "0" + secs};
hours.toString();
mins.toString();
secs.toString();
var hex = "#" + rgbhex;
if (getBrightness(red, green, blue) < 135) {
$("#t").css('color', 'white');
$("#h").css('color', 'white');
} else {
$("#t").css('color', dark);
$("#h").css('color', dark);
}
$("#t").html(hours +" : "+ mins +" : "+ secs);
$("#h").html(hex);
document.body.style.background = hex;
setTimeout(function(){ dotime();}, 1000);
}
</script>
</html>