Refactor add ga add lib

This commit is contained in:
Kegan Myers 2015-01-10 05:15:25 -06:00
parent f3d3221d75
commit 2ea032c15f
3 changed files with 112 additions and 104 deletions

66
app.css Normal file
View 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
View 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);
});
})();

View file

@ -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>