Initial commit

2014-06-27 00:20:27 -05:00 · 2014-06-27 00:20:27 -05:00 · ad9b981e21
commit ad9b981e21
2 changed files with 114 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+.idea
--- a/index.html
+++ b/index.html
@ -0,0 +1,113 @@
+<html>
+<head>
+    <title>HexColorTime</title>
+    <style>
+        /*! Google fonts */
+        @import url(http://fonts.googleapis.com/css?family=Source+Sans+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%;
+        }
+
+        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;
+        }
+    </style>
+</head>
+<body id="body">
+<div class="vcc">
+    <div class="vc">
+        <p><span id="time"></span></p>
+
+        <p><span id="ts">0</span></p>
+
+        <p>#<span id="hex">000000</span></p>
+    </div>
+</div>
+<p class="footer">A quick boredom project by <a href="http://terribleplan.com/">terribleplan</a> - 2014</p>
+</body>
+<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>
+</html>