diff --git a/app.css b/app.css
new file mode 100644
index 0000000..54a40b5
--- /dev/null
+++ b/app.css
@@ -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;
+}
\ No newline at end of file
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..505c587
--- /dev/null
+++ b/app.js
@@ -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);
+ });
+})();
diff --git a/index.html b/index.html
index c437ff9..31f2aeb 100644
--- a/index.html
+++ b/index.html
@@ -1,74 +1,9 @@
HexColorTime
-
+
+
+
@@ -83,42 +18,6 @@