First simple version

2015-10-02 16:34:55 +02:00 · 2015-10-02 16:34:55 +02:00 · c4fdbbf13c
commit c4fdbbf13c
2 changed files with 54 additions and 0 deletions
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.html
+++ b/index.html
@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+  <head>
+    <title>What color is it?</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="user-scalable=yes,initial-scale=1" />
+    <style>
+* { color: #fff; }
+body { transition: all 0.8s; }
+
+div { text-align: center; }
+
+h1 {
+  font-family: Verdana, Arial, sans-serif;
+  font-size: 4em;
+}
+h2 { font-family: courier; }
+    </style>
+    <script type="text/javascript">
+Date.prototype.toColor = function() {
+  var hours, minutes, seconds;
+
+  total_seconds = this.getHours() * 3600 + this.getMinutes() * 60 + this.getSeconds();
+
+  var hex = Math.floor(total_seconds * 0xFFFFFF / 86400)
+  return "#" + ("000000" + hex.toString(16)).substr(-6)
+};
+
+document.addEventListener("DOMContentLoaded", function() {
+  var time = document.querySelector('time')
+  var h2 = document.querySelector('h2')
+
+  function process() {
+    var d = new Date();
+    color = d.toColor();
+
+    time.textContent = d.toLocaleTimeString();
+    h2.textContent = color;
+
+    document.body.style.background = color;
+  }
+
+  process();
+  setInterval(process, 1000);
+});
+    </script>
+  </head>
+  <body>
+    <div>
+      <h1><time></time></h1>
+      <h2></h2>
+    </div>
+  </body>
+</html>