-
Notifications
You must be signed in to change notification settings - Fork 1
/
clockEN.html
112 lines (86 loc) · 3.33 KB
/
clockEN.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
<!DOCTYPE html>
<html>
<head>
<!-- link to main stylesheet -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/skeleton.css">
<link rel="stylesheet" type="text/css" href="css/main2.css">
<link href="https://fonts.googleapis.com/css?family=Lusitana" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Meta tags. Responsiveness courtesy of Bahk Dohmalak on Slack -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta property="og:image" content="assets/ethvisuallogo.PNG">
<meta name="theme-color" content="#0E5F99">
</head>
<body>
<style>/* Single-direction drop shadow */
h4, hr {
margin-top:0;
margin-bottom:15px;
}
</style>
<div class="container" style="text-align:center">
<div class="row">
<hr style="margin-top:10%">
<h1 id="fuzzyclock" style="color: #ccc; margin-top:3%"></h1>
<hr style="margin-top:3%">
</div>
<div class="row" style="margin-top: 10%; text-align:center">
<div class="twelve columns">
<h4 id="y2" style="color: #ccc">...</h4>
<hr id="y">
<h4 id="mn2" style="color: #b3b3b3">...</h4>
<hr id="mn">
<h4 id="dt2" style="color: #999">...</h4>
<hr id="dt">
<h4 id="h2" style="color: #808080">...</h4>
<hr id="h">
<h4 id="m2" style="color: #666">...</h4>
<hr id="m">
<h4 id="s2" style="color: #4d4d4d">...</h4>
<hr id="s">
</div>
</div>
</div>
<script>
/*Get fuzzy text: http://snipplr.com/view/23974/fuzzy-clock/ */
function fuzz(d) {
d = (d) ? d : new Date();
var t = [, "it's", "right after", "about", "o'clock", "quarter", "to", "past", "half", "sharp", "a"],
h=["twelve", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven"],
m = [0, d.getMinutes(), d.getHours()], s = []; m[0] = m[1] % 7.5; s[0] = t[1];
s.push((m[0] == 0) ? t[0] : (m[0] == parseInt(m[0])) ? t[2] : t[3]);
s.push((m[1] > 53) ? [h[(m[2] + 1) % 12], t[4]] :
(m[1] > 37) ? [t[10], t[5], t[6], h[(m[2] + 1) % 12]] :
(m[1] > 23) ? [t[8], h[m[2] % 12]] :
(m[1] > 7) ? [t[10], t[5], t[7], h[m[2] % 12]] :
(m[1] > 0) ? [h[m[2] % 12], t[4]] :
[h[m[2] % 12], t[4], t[9]]);
return s.toString().replace(/,/gi, " ");
}
/*Time bars*/
function balkies(d) {
d = (d) ? d : new Date();
var s = d.getSeconds(),
m = d.getMinutes(),
h = d.getHours(),
dt = d.getDate(),
mn = d.getMonth(),
y = (d.getYear()-110);
$('#s').width((s*1.667)+'%');
$('#s2').text(s);
$('#m').width((m*1.667)+'%');
$('#m2').text(m);
$('#h').width((h*4.167)+'%');
$('#h2').text(h);
$('#dt').width((dt*3.225)+'%');
$('#dt2').text(dt);
$('#mn').width((mn*8.334)+'%');
$('#mn2').text(1+mn);
$('#y').width((y*10)+'%');
$('#y2').text(2010+(y));
if (h>20) {$("body").css("background-color","#333")};
}
window.setInterval(balkies, 1000)
$("#fuzzyclock").text(fuzz())
</script>