Created
December 24, 2018 21:22
-
-
Save BytewaveMLP/be6af28a8206ee0efa2ed3fd3d7d3cb7 to your computer and use it in GitHub Desktop.
Pony Town Death Timer
This file contains 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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Time since Pony Town died</title> | |
| <meta name="robots" content="index, follow"> | |
| <meta name="author" content="Bytewave"> | |
| <meta name="description" content="A countup timer totalling the amount of time Pony Town has been down since the outage on Dec 23, 2018."> | |
| <meta name="pubdate" content="2018-12-23"> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:title" content="Time since Pony Town went down"> | |
| <meta property="og:site_name" content="code.horse"> | |
| <meta property="og:url" content="https://code.horse"> | |
| <meta property="og:image" content="https://code.horse/img/bytewave-cm.png"> | |
| <meta property="og:description" content="A countup timer totalling the amount of time Pony Town has been down since the outage on Dec 23, 2018."> | |
| <meta property="article:published_time" content="2018-12-23"> | |
| <meta property="article:author" content="https://code.horse"> | |
| <meta name="twitter:card" content="summary"> | |
| <meta name="twitter:site" content="@BytewaveMLP"> | |
| <meta name="twitter:title" content="Time since Pony Town went down"> | |
| <meta name="twitter:description" content="A countup timer totalling the amount of time Pony Town has been down since the outage on Dec 23, 2018."> | |
| <meta name="twitter:image" content="https://code.horse/img/bytewave-cm.png"> | |
| <meta name="twitter:image:alt" content="Byte's cutiemark"> | |
| <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=PY4kp4omXP"> | |
| <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=PY4kp4omXP"> | |
| <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=PY4kp4omXP"> | |
| <link rel="manifest" href="/manifest.json?v=PY4kp4omXP"> | |
| <link rel="mask-icon" href="/safari-pinned-tab.svg?v=PY4kp4omXP" color="#00cc32"> | |
| <link rel="shortcut icon" href="/favicon.ico?v=PY4kp4omXP"> | |
| <meta name="msapplication-TileColor" content="#00a300"> | |
| <meta name="msapplication-TileImage" content="/mstile-144x144.png?v=PY4kp4omXP"> | |
| <meta name="theme-color" content="#00cc32"> | |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"> | |
| <style> | |
| body, html { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| font-family: 'Open Sans', sans-serif; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: black; | |
| color: white; | |
| } | |
| h1 { | |
| font-size: 36pt; | |
| } | |
| small { | |
| font-size: 14pt; | |
| color: #cccccc; | |
| } | |
| p { | |
| font-size: 20pt; | |
| } | |
| .container { | |
| text-align: center; | |
| padding-left: 5%; | |
| padding-right: 5%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Time since Pony Town went down</h1> | |
| <p> | |
| <small>(since <time id="start" datetime="2018-12-23T03:47:00-0600">December 23<sup>rd</sup>, 2018 3:47 AM CST</time>)</small> | |
| </p> | |
| <p> | |
| <span id="days"><b>??</b> days</span>, <span id="hours"><b>??</b> hours</span>, <span id="mins"><b>??</b> minutes</span>, and <span id="secs"><b>??</b> seconds</span> | |
| </p> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script> | |
| <script> | |
| window.onload = function() { | |
| var time = document.getElementById('start').getAttribute('datetime'); | |
| setInterval(function() { | |
| countUp(time); | |
| }, 1000); | |
| } | |
| function countUp(date) { | |
| var cur = new Date(); | |
| var start = Date.parse(date); | |
| var difference = cur - start; | |
| var days = Math.floor(difference / (1000 * 60 * 60 * 24)); | |
| var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| var mins = Math.floor((difference % (1000 * 60 * 60 * 24) % (1000 * 60 * 60)) / (1000 * 60)); | |
| var secs = Math.floor((difference % (1000 * 60 * 60 * 24) % (1000 * 60 * 60) % (1000 * 60)) / 1000); | |
| document.getElementById('days').innerHTML = `<b>${days}</b> day${days != 1 ? 's' : ''}`; | |
| document.getElementById('hours').innerHTML = `<b>${hours}</b> hour${hours != 1 ? 's' : ''}`; | |
| document.getElementById('mins').innerHTML = `<b>${mins}</b> minute${mins != 1 ? 's' : ''}`; | |
| document.getElementById('secs').innerHTML = `<b>${secs}</b> second${secs != 1 ? 's' : ''}`; | |
| } | |
| </script> | |
| </body> | |
| </html> |
@zaandre What do you think this would be useful for? This page is just simple count-up timer from a hard-coded date. You can change the date on line 83, I guess, but there's nothing super complicated going on here; it's just a counter.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
how do you use this