-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (90 loc) · 3.73 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
<!DOCTYPE html>
<html lang="en"><!--It always works but not on time, So I did this --><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<title>Hex clock</title>
<link rel="shortcut icon" href="https://github.com/CoDeRgAnEsh/coderganesh.github.io/blob/master/assets/images/favicon-96x96.png?raw=true" type="image/x-icon">
<meta name="Keywords" content="tkganesh, ganesh kumar, hex, clock, hexadecimal, colors">
<meta name="description" content="A precise hexadecimal color clock that goes the whole 24 hours color range, from #000000 to #235959.">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lato:100,300' rel='stylesheet' type='text/css'>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta property="og:image" content="https://github.com/CoDeRgAnEsh/coderganesh.github.io/blob/master/assets/images/favicon-96x96.png?raw=true">
<style>
html body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.background {
width: 100%;
height: 100%;
position: absolute;
vertical-align: middle;
}
#hex {
color: white;
font-family: 'Lato', Helvetiva, Arial, sans-serif;
text-align: center;
font-size: 4.5em;
display: block;
min-width: 200px;
font-weight: 100;
}
#what {
color: rgba(255, 255, 255, 0.90);
font-family: 'Lato', Helvetica, Arial, sans-serif;
display: block;
font-size: 0.9em;
position: absolute;
bottom: 0px;
left: 10px;
padding-right: 10px;
font-weight: 300;
}
#what a {
color: inherit;
}
#question {
text-decoration: none;
}
.absolute-center {
/*width: 50%;*/
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</style>
</head><style type="text/css">embed[type*="application/x-shockwave-flash"],embed[src*=".swf"],object[type*="application/x-shockwave-flash"],object[codetype*="application/x-shockwave-flash"],object[src*=".swf"],object[codebase*="swflash.cab"],object[classid*="D27CDB6E-AE6D-11cf-96B8-444553540000"],object[classid*="d27cdb6e-ae6d-11cf-96b8-444553540000"],object[classid*="D27CDB6E-AE6D-11cf-96B8-444553540000"]{ display: none !important;}</style>
<body>
<div class="background" style="background-color: rgb(19, 7, 24);">
<div class="absolute-center">
<p id="hex">#130718</p>
</div>
<p id="what"><a id="question" href="#" onclick="$('#explanation').fadeIn();">What is this?</a><span id="explanation" style="display: none;"> A precise <a href="http://en.wikipedia.org/wiki/Web_colors#Hex_triplet" target="_blank">hexadecimal color</a> clock. It goes the whole 24 hours color range, from #000000 to #235959. Yes, it's always very dark. For a more beautiful color clock, visit <a href="http://thecolourclock.com/" target= "_blank">the colour clock</a>.</span> / <a id="tweet" href="http://twitter.com/home?status=Hex clock, a clock that tells both what time and color it is https://www.tkganesh.me/crazy-eureka">Tweet this?
</a>
</p>
</div>
<!-- Here itself i write script :P -->
<script>
function refreshData()
{
x = 1; // x = seconds
var d = new Date()
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
if (h<=9) {h = '0'+h};
if (m<=9) {m = '0'+m};
if (s<=9) {s = '0'+s};
var color = '#'+h+m+s;
$("div.background").css("background-color", color );
$("p#hex").text(color);
setTimeout(refreshData, x*1000);
}
refreshData(); // execute function
</script>
<iframe id="rdbIndicator" width="100%" height="270" border="0" src="./Hex clock_files/indicator.html" style="display: none; border: 0; position: fixed; left: 0; top: 0; z-index: 2147483647"></iframe></body></html>