Refactor add ga add lib
This commit is contained in:
parent
f3d3221d75
commit
2ea032c15f
66
app.css
Normal file
66
app.css
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
/*! Google fonts */
|
||||||
|
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
|
||||||
|
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:300);
|
||||||
|
|
||||||
|
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
|
||||||
|
html {
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
|
||||||
|
/* The font looks a little pixelated, hopefully browsers don't suck too bad */
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mono {
|
||||||
|
font-family: 'Source Code Pro', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: #bbb;
|
||||||
|
background: #000;
|
||||||
|
transition: color .8s, background .4s;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active,
|
||||||
|
a:hover {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Our CSS */
|
||||||
|
.vcc {
|
||||||
|
display: table;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc {
|
||||||
|
display: table-cell;
|
||||||
|
width: 320px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc > p {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 3em;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
p.footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
43
app.js
Normal file
43
app.js
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
u$.ldGa("UA-58423761-1");
|
||||||
|
(function(){
|
||||||
|
function getTextColor(color) {
|
||||||
|
/*
|
||||||
|
* Calculates perceived brightness, and returns a good text color
|
||||||
|
* http://stackoverflow.com/a/596243
|
||||||
|
*/
|
||||||
|
return Math.sqrt((color.r * color.r * .299) + (color.g * color.g * .587) + (color.b * color.b * .114)) < 130 ? "#fff" : "#000";
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRgb(colorString) {
|
||||||
|
return {
|
||||||
|
r: parseInt(colorString.substr(0, 2), 16),
|
||||||
|
g: parseInt(colorString.substr(2, 2), 16),
|
||||||
|
b: parseInt(colorString.substr(4, 2), 16)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
u$.r(function() {
|
||||||
|
(function (time, ts, hex, body, max) {
|
||||||
|
function update() {
|
||||||
|
//Calculate the values we will use
|
||||||
|
var now = new Date();
|
||||||
|
var timestamp = Math.floor(now / 1000);
|
||||||
|
var colorTime = timestamp % max;
|
||||||
|
var t = ("000000" + colorTime.toString(16)).slice(-6);
|
||||||
|
|
||||||
|
//Now use them appropriately
|
||||||
|
body.style.color = getTextColor(getRgb(t));
|
||||||
|
time.innerText = now.toLocaleString();
|
||||||
|
ts.innerText = timestamp;
|
||||||
|
body.style.backgroundColor = "#" + t;
|
||||||
|
hex.innerText = t;
|
||||||
|
|
||||||
|
//And continue the animation loop
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
}
|
||||||
|
|
||||||
|
//Run the clock
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
})(document.getElementById("time"), document.getElementById("ts"), document.getElementById("hex"), document.getElementById("body"), 0xffffff);
|
||||||
|
});
|
||||||
|
})();
|
||||||
107
index.html
107
index.html
|
|
@ -1,74 +1,9 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>HexColorTime</title>
|
<title>HexColorTime</title>
|
||||||
<style>
|
<script type="text/javascript" src="https://terribleplan.com/lib/micro.min.js"></script>
|
||||||
/*! Google fonts */
|
<script type="text/javascript" src="app.js"></script>
|
||||||
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
|
<link rel="stylesheet" type="text/css" href="app.css">
|
||||||
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:300);
|
|
||||||
|
|
||||||
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
|
|
||||||
html {
|
|
||||||
font-family: 'Source Sans Pro', sans-serif;
|
|
||||||
-ms-text-size-adjust: 100%;
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
|
|
||||||
/* The font looks a little pixelated, hopefully browsers don't suck too bad */
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mono {
|
|
||||||
font-family: 'Source Code Pro', monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
color: #bbb;
|
|
||||||
background: #000;
|
|
||||||
transition: color .8s, background .4s;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:active,
|
|
||||||
a:hover {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
margin: 0.67em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Our CSS */
|
|
||||||
.vcc {
|
|
||||||
display: table;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vc {
|
|
||||||
display: table-cell;
|
|
||||||
width: 320px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vc > p {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 3em;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
p.footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
margin-left: 1em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body id="body">
|
<body id="body">
|
||||||
<div class="vcc">
|
<div class="vcc">
|
||||||
|
|
@ -83,42 +18,6 @@
|
||||||
<p class="footer">A quick boredom project by <a href="http://terribleplan.com/">terribleplan</a> - 2014</p>
|
<p class="footer">A quick boredom project by <a href="http://terribleplan.com/">terribleplan</a> - 2014</p>
|
||||||
</body>
|
</body>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
function getTextColor(color) {
|
|
||||||
/*
|
|
||||||
* Calculates perceived brightness, and returns a good text color
|
|
||||||
* http://stackoverflow.com/a/596243
|
|
||||||
*/
|
|
||||||
return Math.sqrt((color.r * color.r * .299) + (color.g * color.g * .587) + (color.b * color.b * .114)) < 130 ? "#fff" : "#000";
|
|
||||||
}
|
|
||||||
function getRgb(colorString) {
|
|
||||||
return {
|
|
||||||
r: parseInt(colorString.substr(0, 2), 16),
|
|
||||||
g: parseInt(colorString.substr(2, 2), 16),
|
|
||||||
b: parseInt(colorString.substr(4, 2), 16)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
(function (time, ts, hex, body, max) {
|
|
||||||
function update() {
|
|
||||||
//Calculate the values we will use
|
|
||||||
var now = new Date();
|
|
||||||
var timestamp = Math.floor(now / 1000);
|
|
||||||
var colorTime = timestamp % max;
|
|
||||||
var t = ("000000" + colorTime.toString(16)).slice(-6);
|
|
||||||
|
|
||||||
//Now use them appropriately
|
|
||||||
body.style.color = getTextColor(getRgb(t));
|
|
||||||
time.innerText = now.toLocaleString();
|
|
||||||
ts.innerText = timestamp;
|
|
||||||
body.style.backgroundColor = "#" + t;
|
|
||||||
hex.innerText = t;
|
|
||||||
|
|
||||||
//And continue the animation loop
|
|
||||||
requestAnimationFrame(update);
|
|
||||||
}
|
|
||||||
|
|
||||||
//Run the clock
|
|
||||||
requestAnimationFrame(update);
|
|
||||||
})(document.getElementById("time"), document.getElementById("ts"), document.getElementById("hex"), document.getElementById("body"), 0xffffff);
|
|
||||||
</script>
|
</script>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue