-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
125 lines (89 loc) · 3.71 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
120
121
122
123
124
125
<!DOCTYPE html>
<!-- Copied and modified from http://whatcolourisit.scn9a.org/ We all stand on the sholders of giants. -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>What color is it?</title><meta charset="UTF-8"><link href="./clock_files/css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta name="description" content="what color is it?">
<meta property="og:title" content="What color is it?">
<meta property="og:locale" content="en_US">
<meta property="og:description" content="the time....... now in color.">
<meta property="og:type" content="Website">
<meta property="og:site_name" content="Colortime">
<meta property="og:url" content="http://colorti.me">
<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;}
.footer {
position: fixed;
bottom: 0;
width: 100%;
background: rgba(255, 255, 255, 0.5);
line-height: 2;
text-align: center;
color: #000;
font-family: "open sans";
font-weight: 300;
}
</style>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
</head>
<body onload="dotime()" style="transition: all 0.8s; -webkit-transition: all 0.8s; background: rgb(34, 70, 88);">
<table><tbody><tr><td height="100%" width="100%" align="center" valign="middle">
<h2 id="d">0000 / 00 / 00</h2><br />
<h1 id="t">00 : 00 : 00</h1><br />
<h2 id="h">#000000</h2>
</td></tr></tbody></table>
<script src="./clock_files/jquery.min.js"></script>
<script src="./clock_files/jquery-ui.min.js"></script>
<script type="text/javascript">
function dotime(){
var permalink = window.location.hash.substr(1);
$("body").css({"transition": "all 0.8s", "-webkit-transition": "all 0.8s"});
var d;
if (permalink.length > 0) {
d = new Date(permalink);
} else {
d = new Date();
}
var month = d.getMonth() + 1;
var day = d.getDate();
var hours = d.getHours();
var mins = d.getMinutes();
var secs = d.getSeconds();
if (hours % 12 == 0){hours = 12}
else { hours = hours % 12 };
var color = 0;
color = color | (month & 14);
color = color << 4; //only shifting left 4 because we are dropping least
//significant bit.
color = color | day;
color = color << 4;
color = color | hours;
color = color << 6;
color = color | mins;
color = color << 6;
color = color | secs;
var hex = color.toString(16);
hex = (hex.length == 6 ? "#" + hex : "#0" + hex);
if (hours < 10) { hours = "0" + hours };
if (mins < 10) { mins = "0" + mins };
if (secs < 10) { secs = "0" + secs };
$("#t").html(hours + " : " + mins + " : " + secs);
$("#h").html(hex);
$("#d").html(d.getFullYear() + " / " + month + " / " + day);
$("#p").attr("href", "#" + d.toISOString());
document.body.style.background = hex;
}
setInterval(function(){ dotime();}, 1000);
</script>
<div class="footer">
Original page by scn9a. Code available on <a href="https://github.com/joshgordon/colortime">github</a>. More info soon! <a href="#0000-00-00T00:00:00" id="p">Permalink</a>
</div>
</body></html>