Created
December 17, 2014 16:43
-
-
Save inxilpro/38044f1c9a96701728ff to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>#000000</title> | |
| <link href="//fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet" type="text/css" /> | |
| <style> | |
| html, body { | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| body { | |
| background: #fff; | |
| font: 200px Oswald, sans-serif; | |
| text-transform: uppercase; | |
| transition: background-color 900ms ease; | |
| } | |
| .time { | |
| position: relative; | |
| text-align: center; | |
| color: #fff; | |
| top: 50%; | |
| -webkit-transform: translateY(-50%); | |
| } | |
| .digits { | |
| display: inline-block; | |
| position: relative; | |
| } | |
| .digit { | |
| display: inline-block; | |
| text-align: center; | |
| width: 113px; | |
| } | |
| .hash, | |
| .separator { | |
| display: inline-block; | |
| text-align: center; | |
| margin-left: -0.15em; | |
| margin-right: -0.15em; | |
| } | |
| .separator { | |
| position: relative; | |
| top: -0.1em; | |
| opacity: 0.5; | |
| } | |
| .blink-off .separator { | |
| opacity: 0; | |
| } | |
| .red::after, | |
| .green::after, | |
| .blue::after { | |
| position: absolute; | |
| border-top: 1px solid #fff; | |
| font-size: 16px; | |
| text-align: center; | |
| color: #fff; | |
| width: 100%; | |
| bottom: 0; | |
| left: 0; | |
| opacity: 0.25; | |
| padding-top: 5px; | |
| } | |
| .red::after { | |
| content: "red"; | |
| color: #faa; | |
| } | |
| .green::after { | |
| content: "green"; | |
| color: #afa; | |
| } | |
| .blue::after { | |
| content: "blue"; | |
| color: #aaf; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="time"> | |
| <span class="hash">#</span> | |
| <span class="digits red hour" id="hour"><span class="first digit">0</span><span class="second digit">0</span></span> | |
| <span class="separator">:</span> | |
| <span class="digits green minute" id="minute"><span class="first digit">0</span><span class="second digit">0</span></span> | |
| <span class="separator">:</span> | |
| <span class="digits blue second" id="second"><span class="first digit">0</span><span class="second digit">0</span></span> | |
| </div> | |
| <script> | |
| var bodyDOM = document.body; | |
| var hourDOM = document.getElementById('hour'); | |
| var minuteDOM = document.getElementById('minute'); | |
| var secondDOM = document.getElementById('second'); | |
| function display(number, DOM) { | |
| var firstDigit, secondDigit; | |
| if (number < 10) { | |
| firstDigit = '0'; | |
| secondDigit = '' + number; | |
| } else { | |
| number = '' + number; | |
| var digits = number.split(''); | |
| firstDigit = digits[0]; | |
| secondDigit = digits[1]; | |
| } | |
| // Get DOM nodes | |
| var firstNode = DOM.getElementsByClassName('first')[0]; | |
| var secondNode = DOM.getElementsByClassName('second')[0]; | |
| // Set | |
| firstNode.innerText = firstDigit; | |
| secondNode.innerText = secondDigit; | |
| return firstDigit + secondDigit | |
| } | |
| var last = Date.now(); | |
| setInterval(function() { | |
| var now = new Date(); | |
| var ts = now.getTime(); | |
| if (ts - last > 1000) { | |
| var hour = now.getHours(); | |
| var minute = now.getMinutes(); | |
| var second = now.getSeconds(); | |
| bodyDOM.className = (second % 2 === 0 ? 'blink-off' : 'blink-on'); | |
| var red = display(hour, hourDOM); | |
| var green = display(minute, minuteDOM); | |
| var blue = display(second, secondDOM); | |
| var hex = '#' + red + green + blue; | |
| bodyDOM.style.backgroundColor = hex; | |
| document.title = hex; | |
| last = ts; | |
| } | |
| }, 100); | |
| </script> | |
| <body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment