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> | |
<head> | |
<title></title> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> | |
<style type='text/css'> | |
body { | |
background:#000; | |
color:#fff; | |
font-family:'Georgia'; | |
-webkit-transform:rotate(-4deg) scale(0.9); | |
} | |
h1, h2, h3, p { | |
margin:0; | |
} | |
@-webkit-keyframes blinker { | |
from { opacity: 1.0; } | |
to { opacity: 0.0; } | |
} | |
em { | |
-webkit-animation-name: blinker; | |
-webkit-animation-iteration-count: infinite; | |
-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0); | |
-webkit-animation-duration: 800ms; | |
} | |
a { | |
background: #34d0e7; | |
color:#000; | |
text-decoration:none; | |
} | |
img { | |
max-width:75%; | |
max-height:75%; | |
} | |
div { | |
cursor:pointer; | |
cursor:hand; | |
vertical-align:middle; | |
position:absolute; | |
top:0; | |
left:0; | |
} | |
</style> | |
<script type='text/javascript'> | |
window.onload = function() { | |
var s = document.getElementsByTagName('div'), cur = 0; | |
if (!s) return; | |
function go(n) { | |
cur = n; | |
var i = 1e3, e = s[n]; | |
for (var k = 0; k < s.length; k++) s[k].style.display = 'none'; | |
e.style.display = 'inline'; | |
e.style.fontSize = i + 'px'; | |
if (e.firstChild.nodeName === 'IMG') { | |
document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')'; | |
e.firstChild.style.display = 'none'; | |
} else { | |
document.body.style.backgroundImage = ''; | |
document.body.style.backgroundColor = e.style.backgroundColor; | |
} | |
while ( | |
e.offsetWidth > window.innerWidth || | |
e.offsetHeight > window.innerHeight) { | |
e.style.fontSize = (i -= 10) + 'px'; | |
if (i < 0) break; | |
} | |
e.style.marginTop = ((window.innerHeight - e.offsetHeight) / 2) + 'px'; | |
if (window.location.hash !== n) window.location.hash = n; | |
document.title = e.textContent || e.innerText; | |
} | |
document.onclick = function() { | |
go(++cur % (s.length)); | |
}; | |
document.onkeydown = function(e) { | |
(e.which === 39) && go(Math.min(s.length - 1, ++cur)); | |
(e.which === 37) && go(Math.max(0, --cur)); | |
}; | |
function parse_hash() { | |
return Math.max(Math.min( | |
s.length - 1, | |
parseInt(window.location.hash.substring(1), 10)), 0); | |
} | |
if (window.location.hash) cur = parse_hash() || cur; | |
window.onhashchange = function() { | |
var c = parse_hash(); | |
if (c !== cur) go(c); | |
}; | |
setInterval(function() { | |
var e = document.createEvent("Events"); | |
e.initEvent("click"); | |
document.dispatchEvent(e) }, 15000) | |
go(cur); | |
}; | |
</script> | |
</head> | |
<body> | |
<div>Open as in <em>Goatse</em></div> | |
<div><img src="./img/coolface-trollface-trolls-faces.png"><em>Trollin'</em></div> | |
<div>gratis vs libre<p> | |
<img src='./img/freebeer.jpeg' width="400" height="300"/> vs <img src='./img/alex_jones_nerds.png' width="400" height="300"/> | |
</div> | |
<div>open ...source ...data ...systems ...standards ...knowledge ...content ...access ...government </div> | |
<div>characteristics of open</div> | |
<div>no <img src="./img/audi_goatse.jpg"> restrictions on use</div> | |
<div>you can see if it works<br> | |
<img src="./img/reaction.jpeg" vertical-align="middle";> | |
</div> | |
<div>redistribute <img src="./img/2012_olympics.jpg">it in any manner</div> | |
<div>you can <img src="./img/find-the-hero-inside-of-you-photo-u1.jpg">improve it</div> | |
<div> <img src="./img/anil.184.jpg">opportune</div> | |
<div>processable by machine<p><p> <img src="./img/comparison.jpg"></div> | |
<div>fundamental<br><p> <img src="./img/goetzche.jpg" style="float:center"></div> | |
<div>no owner<br> <img src="./img/security.png"></div> | |
<div>complete<p> <img src="./img/goatse-cookies.jpg"></div> | |
<div>accessible <img src="./img/the-goatse-carousel-photo-u1.jpg"></div> | |
<div>not discriminatory<p> <img src="./img/career.jpg"></div> | |
<div>no licenses<p><img src="./img/the-disney-goatse-camera-photo-u1.jpg"> <img src="./img/the-disney-goatse-clock-photo-u1.jpg"></div> | |
<div> <img src="./img/the-breville-sandwich-maker-goatse-photo-u1.jpg"> » <img src="./img/brevilleman.png"></div> | |
<div>Goatse is a durable meme that exhibits characteristics of openess.</div> | |
<div>Walking the walk.<p> | |
Tom Macwright: <a href="https://github.com/tmcw/big">big</a>. <em>@tmwcv</em><p> | |
Max Ogden: js timer snippet. <em>@maxogdon</em> | |
</div> | |
<body> | |
</html> |