Last active
August 29, 2015 14:01
-
-
Save luqmaan/8e74871571ea56c6dfb7 to your computer and use it in GitHub Desktop.
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
| <!-- https://rawgit.com/luqmaan/8e74871571ea56c6dfb7/raw/a1c23d40fcbed88cd095c7fba61177c989c5d00f/reddit_down.html --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <meta charset="utf-8"> | |
| <head> | |
| <title>reddit is down</title> | |
| <style> | |
| @font-face { | |
| font-family: 'SilkscreenNormal'; | |
| src: url('http://www.reddit.com/static/down/slkscr-webfont.eot'); | |
| src: url('http://www.reddit.com/static/down/slkscr-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('http://www.reddit.com/static/down/slkscr-webfont.woff') format('woff'), | |
| url('http://www.reddit.com/static/down/slkscr-webfont.ttf') format('truetype'), | |
| url('http://www.reddit.com/static/down/slkscr-webfont.svg#SilkscreenNormal') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| html { overflow:hidden; } | |
| body { font: 60px 'SilkscreenNormal', Arial, sans-serif; letter-spacing:0; margin:0; overflow:hidden; background:#25d; color:#fff; } | |
| html, body, #container { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| /* Thanks, http://www.colorzilla.com/gradient-editor/ */ | |
| #container { | |
| background: #083a7f; | |
| background: -moz-linear-gradient(top, #083a7f 0%, #242b3d 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#083a7f), color-stop(100%,#242b3d)); | |
| background: -webkit-linear-gradient(top, #083a7f 0%,#242b3d 100%); | |
| background: -o-linear-gradient(top, #083a7f 0%,#242b3d 100%); | |
| background: -ms-linear-gradient(top, #083a7f 0%,#242b3d 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#083a7f', endColorstr='#242b3d', GradientType=0); | |
| background: linear-gradient(top, #083a7f 0%,#242b3d 100%); | |
| } | |
| h1, h2 { margin:0; text-shadow:0 5px 0px rgba(0,0,0,.2); } | |
| h1 { font-size:1em; } | |
| h2 { font-size:.5em; } | |
| a { color:#fff; } | |
| h3 { font-size:.25em; margin:1em 50px; } | |
| h3, h3 a { color:#6b778d; } | |
| h3 img { margin:0 3px; } | |
| #snoo { display:block; height:218px; margin-bottom:10px; background:url(http://www.redditstatic.com/down/reddit_pixel.png) center 0 no-repeat; } | |
| #title { position:absolute; top:50%; width:100%; height:322px; margin-top:-180px; text-align:center; z-index:10; } | |
| .cloud { position:absolute; display:block; } | |
| .puff { position:absolute; display:block; width:15px; height:15px; background:white; opacity:.05; filter:alpha(opacity=5); } | |
| #banana { position:absolute; right:0; bottom:0; display:block; width:52px; height:56px; padding:5px; background:url(http://www.redditstatic.com/down/reddit_pixel.png) 0 -218px no-repeat; opacity:.25; filter:alpha(opacity=25); z-index:10; } | |
| </style> | |
| <script> | |
| function randomInt(min, max) { | |
| return Math.floor(Math.random() * (max - min + 1)) + min | |
| } | |
| function randomChoice(items) { | |
| return items[randomInt(0, items.length-1)] | |
| } | |
| var PIXEL_SIZE = 25 | |
| function makeCloud() { | |
| var w = 8, | |
| h = 5, | |
| maxr = Math.sqrt(w*w + h*h), | |
| density = .4 | |
| var cloud = document.createElement('div') | |
| cloud.className = 'cloud' | |
| for (var x=-w; x<=w; x++) { | |
| for (var y=-h; y<=h; y++) { | |
| r = Math.sqrt(x*x + y*y) | |
| if (r/maxr < Math.pow(Math.random(), density)) { | |
| var puff = document.createElement('div') | |
| puff.className = 'puff' | |
| puff.style.left = (x + w) * PIXEL_SIZE + 'px' | |
| puff.style.top = (y + h) * PIXEL_SIZE + 'px' | |
| cloud.appendChild(puff) | |
| } | |
| } | |
| } | |
| return cloud | |
| } | |
| clouds = [] | |
| function randomPosition(max) { | |
| return Math.round(randomInt(-400, max)/PIXEL_SIZE)*PIXEL_SIZE | |
| } | |
| function addCloud(randomLeft) { | |
| var cloudiness = .3 | |
| if (Math.random() < cloudiness) { | |
| newCloud = { | |
| x: randomLeft ? randomPosition(document.documentElement.clientWidth) : -400, | |
| el: makeCloud() | |
| } | |
| newCloud.el.style.top = randomPosition(document.documentElement.clientHeight) + 'px' | |
| newCloud.el.style.left = newCloud.x + 'px' | |
| document.body.appendChild(newCloud.el) | |
| clouds.push(newCloud) | |
| } | |
| } | |
| function animateClouds() { | |
| var speed = 25 | |
| addCloud() | |
| var newClouds = [] | |
| for (var i=0; i<clouds.length; i++) { | |
| var cloud = clouds[i] | |
| cloud.x += speed | |
| if (cloud.x > document.documentElement.clientWidth) { | |
| document.body.removeChild(cloud.el) | |
| } else { | |
| cloud.el.style.left = cloud.x + 'px' | |
| newClouds.push(cloud) | |
| } | |
| } | |
| clouds = newClouds | |
| } | |
| function changeMessage(msg) { | |
| var msgEl = document.getElementById('message') | |
| msgEl.innerHTML = msg || randomChoice(messages) | |
| } | |
| function startMessages() { | |
| try { | |
| if (window.sessionStorage) { | |
| var times | |
| if (sessionStorage.times) { | |
| times = ++sessionStorage.times | |
| } else { | |
| times = sessionStorage.times = 0 | |
| } | |
| var msg = 'you have refreshed this page '+times+' time'+(times != 1 ? 's' : '')+'.' | |
| messages.push(msg) | |
| } | |
| } catch (e) {} | |
| setInterval(function() { changeMessage() }, 10*1000) | |
| } | |
| messages = [ | |
| 'sorry, europe', | |
| 'you could always go outside or something', | |
| 'time actually is going slower right now', | |
| 'did you see today\'s <a href="http://xkcd.com">xkcd</a>?', | |
| 'go ahead, click refresh again.', | |
| 'there may be more information in <a href="https://twitter.com/#!/redditstatus">@redditstatus</a>', | |
| 'did you know we\'re open source? <a href="http://github.com/reddit/">see if you can find the bug</a>.', | |
| 'i wonder if you\'ll have a <img src="http://www.redditstatic.com/mail.png" alt="orangered"> when reddit\'s back?', | |
| 'in the meantime, go check out what\'s new at <a href="http://redditgifts.com">redditgifts</a>!', | |
| 'it\'s not you, it\'s me.', | |
| 'I wonder what\'s new on reddi-- oh, sorry.', | |
| 'this episode was brought to you by the letter ctrl-Z', | |
| 'don\'t touch that dial!', | |
| 'well, there goes our new years resolutions.', | |
| 'BSOD: blue screen of downtime', | |
| 'reply hazy, try again.', | |
| 'SHUT DOWN EVERYTHING' | |
| ] | |
| function start() { | |
| if (arguments.callee.ran) { return; } | |
| arguments.callee.ran = true | |
| startMessages() | |
| setInterval(animateClouds, 2*1000) | |
| for (n=0; n<50; n++) { | |
| addCloud(true) | |
| } | |
| } | |
| if (document.addEventListener) { | |
| document.addEventListener('DOMContentLoaded', start, false) | |
| } | |
| window.onload = start | |
| </script> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="title"> | |
| <div id="snoo"></div> | |
| <h1>reddit is down</h1> | |
| <h2>for emergency maintenance</h2> | |
| <h3 id="message"></h3> | |
| </div> | |
| <a href="http://imgur.com/" id="banana" title="draw on a banana! then take a photo and submit it to /r/downtimebananas"></a> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://rawgit.com/luqmaan/8e74871571ea56c6dfb7/raw/a1c23d40fcbed88cd095c7fba61177c989c5d00f/reddit_down.html