Created
May 22, 2015 05:20
-
-
Save anonymous/6ad01fd335c88d913590 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/xikifutexo
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> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| @font-face { | |
| font-family: 'SilkscreenNormal'; | |
| src: url('/static/down/slkscr-webfont.eot'); | |
| src: url('/static/down/slkscr-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/down/slkscr-webfont.woff') format('woff'), | |
| url('/static/down/slkscr-webfont.ttf') format('truetype'), | |
| url('/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(//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(//www.redditstatic.com/down/reddit_pixel.png) 0 -218px no-repeat; opacity:.25; filter:alpha(opacity=25); z-index:10; } | |
| </style> | |
| </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> | |
| <script id="jsbin-javascript"> | |
| 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="//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="https://github.com/reddit/">see if you can find the bug</a>.', | |
| 'i wonder if you\'ll have a <img src="//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> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </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="//imgur.com/" id="banana" title="draw on a banana! then take a photo and submit it to /r/downtimebananas"></a> | |
| </div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-css" type="text/css">@font-face { | |
| font-family: 'SilkscreenNormal'; | |
| src: url('/static/down/slkscr-webfont.eot'); | |
| src: url('/static/down/slkscr-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/down/slkscr-webfont.woff') format('woff'), | |
| url('/static/down/slkscr-webfont.ttf') format('truetype'), | |
| url('/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(//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(//www.redditstatic.com/down/reddit_pixel.png) 0 -218px no-repeat; opacity:.25; filter:alpha(opacity=25); z-index:10; }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">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="//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="https://github.com/reddit/">see if you can find the bug</a>.', | |
| 'i wonder if you\'ll have a <img src="//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></body> | |
| </html> |
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
| @font-face { | |
| font-family: 'SilkscreenNormal'; | |
| src: url('/static/down/slkscr-webfont.eot'); | |
| src: url('/static/down/slkscr-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/down/slkscr-webfont.woff') format('woff'), | |
| url('/static/down/slkscr-webfont.ttf') format('truetype'), | |
| url('/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(//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(//www.redditstatic.com/down/reddit_pixel.png) 0 -218px no-repeat; opacity:.25; filter:alpha(opacity=25); z-index:10; } |
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
| 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="//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="https://github.com/reddit/">see if you can find the bug</a>.', | |
| 'i wonder if you\'ll have a <img src="//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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment