Skip to content

Commit

Permalink
initial import
Browse files Browse the repository at this point in the history
  • Loading branch information
@bertrandom
bertrandom committed Oct 15, 2010
0 parents commit a278a01
Show file tree
Hide file tree
Showing 4 changed files with 224 additions and 0 deletions.
Binary file added favicon.ico
Binary file not shown.
224 changes: 224 additions & 0 deletions index.xhtml
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ZOMBO</title>
</head>
<body>
<!--
HTML5zombo.com
Bertrand Fan (bertrand@fan.net)
5/19/2010
I wanted zombo.com on my iPad. That is all.
===================================================================
How I did it, for nerds:
===================================================================
Watched the Net tab for zombo.com in Firebug
wget http://www.zombo.com/inrozxa.swf
wget http://www.zombo.com/welcomeclip.swf
Opened them in SWFRIP to extract the MP3 and SVG representations of the logo and spinner.
Opened the SVG files in Adobe Illustrator (ironic, I know), tweaked a bit, exported new SVG files
Copy-pasted the SVG contents into this HTML file, tweaked the attributes a bit
Wrote the JS code to rotate the SVG spinner
Converted the MP3 to OGG using oggenc2 (not really necessary for the iPad, but apparently for Firefox)
Discovered that the iPad does not respect autoplay on HTML5 audio tags, crafted a javascript link for iPads
wget http://www.zombo.com/favicon.ico
===================================================================
References:
===================================================================
http://www.zombo.com/
http://twitter.com/zombocom
http://sourceforge.net/projects/swfrip/
http://developer.apple.com/safari/library/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html
http://html5doctor.com/native-audio-in-the-browser/
http://emacsformacosx.com/
http://www.apple.com/hotnews/thoughts-on-flash/
-->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
style="width: 100%; height: 15%" width="555.85px" height="61.35px" viewBox="0 0 555.85 61.35" xml:space="preserve">
<g id="logo">

<linearGradient id="green_gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0" style="stop-color:#33BB77"/>
<stop offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>

<path fill="url(#green_gradient)" d="M555.875,37.726V-0.175H0.025v37.901H555.875"/>
<path fill="#00FFFF" d="M292.575,29.575c-1.4-3.399-3.45-6.066-6.15-8c-2.733-2.033-5.55-3.05-8.45-3.05
c-2.933,0-5.733,0.983-8.4,2.95c-2.7,1.899-4.75,4.566-6.15,8c-1.433,3.434-2.15,6.899-2.15,10.399c0,3.467,0.717,6.801,2.15,10
c1.367,3.201,3.4,5.717,6.1,7.551c2.667,1.834,5.483,2.75,8.45,2.75c2.934,0,5.767-0.916,8.5-2.75c2.667-1.9,4.7-4.416,6.101-7.551
c1.399-3.266,2.1-6.582,2.1-9.949C294.675,36.359,293.975,32.909,292.575,29.575 M277.975,27.325c3.3,0,5.95,1.601,7.95,4.799
c1.533,2.4,2.3,5.035,2.3,7.9c0,2.768-0.983,5.35-2.95,7.75c-2.033,2.367-4.467,3.566-7.3,3.6c-2.867-0.033-5.3-1.232-7.3-3.6
c-2-2.4-2.983-4.982-2.95-7.75c-0.033-3.365,0.95-6.299,2.95-8.799C272.608,28.625,275.042,27.325,277.975,27.325"/>
<path fill="none" d="M292.575,29.575"/>
<path fill="#FF9900" d="M346.425,37.425l0.5-15.35l-8.95-1.95c-8.533-2.433-14.816,1.351-18.85,11.351
c-4.233,10.6-2.616,18.898,4.85,24.898c6.833,5.568,13.983,6.217,21.45,1.951c2.8-1.734,4.05-4.467,3.75-8.201l-3.55-2.648
c-5.634,5.434-11.4,5.648-17.3,0.648c-6.834-5.965-6.4-11.582,1.3-16.85c5.866-4.167,9.899-2.599,12.1,4.701L346.425,37.425
M176.725,29.575c-1.4-3.399-3.466-6.066-6.2-8c-2.733-2.033-5.55-3.05-8.45-3.05s-5.683,0.983-8.35,2.95
c-2.7,1.899-4.767,4.566-6.2,8c-1.434,3.434-2.15,6.899-2.15,10.399c0,3.467,0.716,6.801,2.15,10c1.4,3.201,3.433,5.717,6.1,7.551
c2.667,1.834,5.483,2.75,8.45,2.75s5.817-0.916,8.55-2.75c2.667-1.9,4.7-4.416,6.1-7.551c1.367-3.266,2.05-6.582,2.05-9.949
C178.775,36.359,178.091,32.909,176.725,29.575 M170.075,32.124c1.5,2.4,2.25,5.035,2.25,7.9c0,2.768-0.983,5.35-2.95,7.75
c-2,2.367-4.434,3.566-7.3,3.6c-2.867-0.033-5.3-1.232-7.3-3.6c-1.967-2.4-2.95-4.982-2.95-7.75c0-3.365,0.983-6.299,2.95-8.799
c1.967-2.601,4.4-3.901,7.3-3.901C165.375,27.325,168.042,28.926,170.075,32.124"/>
<path fill="none" d="M346.425,37.425"/>
<path fill="#00FF00" d="M385.475,30.525c-1.399-3.366-3.466-6.033-6.2-8c-2.732-2.033-5.55-3.033-8.449-3
c-2.9-0.033-5.684,0.934-8.351,2.9c-2.7,1.899-4.767,4.566-6.2,8c-1.434,3.433-2.149,6.9-2.149,10.4s0.716,6.85,2.149,10.049
c1.4,3.168,3.434,5.684,6.101,7.551c2.667,1.834,5.483,2.75,8.45,2.75s5.816-0.916,8.55-2.75c2.667-1.934,4.7-4.449,6.1-7.551
c1.366-3.266,2.05-6.582,2.05-9.949C387.524,37.359,386.841,33.892,385.475,30.525 M363.524,32.175
c1.967-2.567,4.4-3.85,7.301-3.85c3.3,0,5.967,1.601,8,4.799c1.5,2.367,2.266,5,2.3,7.9c-0.034,2.734-1.034,5.301-3,7.701
c-2,2.398-4.434,3.6-7.3,3.6c-2.867,0-5.301-1.201-7.301-3.6c-1.967-2.4-2.949-4.967-2.949-7.701
C360.575,37.624,361.558,34.675,363.524,32.175"/>
<path fill="none" d="M385.475,30.525"/>
<path fill="#0000FF" d="M399.475,20.625c-3.366-0.933-6.433-0.333-9.2,1.801c-1.199,1.1-1.482,2.55-0.85,4.35
c0.7,1.934,1.9,2.816,3.6,2.65v21.55c-3.833,0.766-4.75,3.217-2.75,7.35c0.268,0.467,0.65,0.699,1.15,0.699
c3.4,1.1,6.65,1.168,9.75,0.201c2-0.867,2.617-2.668,1.85-5.4c-0.6-2.1-1.783-3.051-3.55-2.85V33.124l5.45-4.699l1.05,0.75
l0.55,2.75v27.85c3.467,0.9,6.518,0.283,9.15-1.85c1.166-0.9,1.467-2.266,0.9-4.1c-0.667-2.1-1.867-3.051-3.601-2.85V33.124
l6.4-4.049l0.55,2.85v27.85c3.467,0.9,6.533,0.283,9.2-1.85c1.134-0.9,1.417-2.266,0.85-4.1c-0.667-2.1-1.866-3.051-3.6-2.85
V31.175c-0.767-8.534-4.233-12.117-10.4-10.75c-1.966,0.166-3.716,1.116-5.25,2.85l-11.25-0.1V20.625 M182.675,23.775v21.5
c-3.833,0.801-4.75,3.25-2.75,7.35c0.267,0.5,0.65,0.75,1.15,0.75c3.367,1.102,6.6,1.168,9.7,0.201c2-0.867,2.633-2.684,1.9-5.451
c-0.6-2.1-1.783-3.049-3.55-2.85V27.426l5.4-4.7l1.1,0.75l0.55,2.75v27.899c3.467,0.9,6.517,0.285,9.15-1.85
c1.167-0.934,1.467-2.316,0.9-4.15c-0.7-2.1-1.917-3.049-3.65-2.85V27.426l6.45-4.051l0.55,2.851v27.899
c3.467,0.9,6.533,0.285,9.2-1.85c1.133-0.934,1.417-2.316,0.85-4.15c-0.667-2.1-1.867-3.049-3.6-2.85v-19.75
c-0.767-8.533-4.233-12.134-10.4-10.8c-1.967,0.2-3.717,1.149-5.25,2.85l-11.25-0.05v-2.6c-3.367-0.934-6.434-0.317-9.2,1.85
c-1.2,1.1-1.483,2.533-0.85,4.3C179.775,23.042,180.975,23.942,182.675,23.775"/>
<path fill="none" d="M399.475,20.625"/>
<path fill="#3366FF" d="M309.575,58.374l0.3-0.398c0.7-1,1.05-2.168,1.05-3.5c0-1.533-0.45-2.834-1.35-3.9
c-0.867-1.066-1.917-1.6-3.15-1.6s-2.3,0.533-3.2,1.6c-0.866,1.066-1.3,2.367-1.3,3.9c0,1.332,0.334,2.5,1,3.5l0.3,0.398
c0.9,1.068,1.967,1.602,3.2,1.602S308.708,59.443,309.575,58.374"/>
<path fill="none" d="M309.575,58.374"/>
<path fill="#FF0000" d="M116.425,24.575l0.2-9.2h11.85l-19.65,34.601v8.85h29.35l-1.9-21l-4.3,2.949l-0.25,9.201h-14.65
l19.75-34.75v-8.65l-26.7-0.1l2.6,21.149L116.425,24.575"/>
<path fill="none" d="M116.425,24.575"/>
<path fill="#9900FF" d="M220.875,3.725l-0.1,6.399l2.8,1.601l-2.95,45.399l10.55-0.449l2.25,1.6l2.35,1.1l2.5,0.701
c1.967,0,3.933-0.268,5.9-0.801c1.033,0.033,2.067-0.184,3.1-0.65l2.05-1.299l0.9-0.801l2-2.299l1.8-3.051l1.4-3.4l0.7-2.6
l0.4-2.85c0.066-1.033,0.083-2.066,0.05-3.1l-0.25-3.25l-0.55-2.852l-0.95-2.849l-1.55-3.55l-0.45-0.95l-1.9-2.1l-1.2-1.4
l-2.65-1.9l-1.35-0.85l-3.95-0.9h-2.1l-2.4,0.551l-2.45,1.199l-1.2,0.7l-2.45,1.65V2.875L220.875,3.725 M234.375,30.575
c1.8-2.467,3.966-3.7,6.5-3.7c2.533,0,4.7,1.233,6.5,3.7c1.8,2.434,2.7,5.368,2.7,8.799c0,3.434-0.9,6.385-2.7,8.852
c-1.8,2.467-3.967,3.699-6.5,3.699c-2.534,0-4.7-1.232-6.5-3.699c-1.8-2.467-2.7-5.418-2.7-8.852
C231.675,35.943,232.575,33.009,234.375,30.575"/>
<path fill="none" d="M220.875,3.725"/>
</g>
</svg>

<div style="text-align: center; width: 100%; margin-top: 1%;">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
style="width:30%; height:30%" width="150px" height="150px" viewBox="5.02 -3.954 150 150" enable-background="new 5.02 -3.954 150 150" xml:space="preserve">
<g id="spinner">
<g transform="matrix(1.000,0.000,0.000,1.000,-84.150,-14.450)">
<g>
<path opacity="0.122" fill="#00FF00" d="M152.151,71.151c2.073-0.69,3.888-1.727,5.442-3.107h0.13
c1.556-1.38,2.807-3.063,3.757-5.047c1.988-4.054,2.247-8.196,0.778-12.423c-1.469-4.228-4.19-7.334-8.164-9.318l-12.312-0.647
c-4.321,1.381-7.43,4.099-9.331,8.153c-1.987,3.969-2.247,8.111-0.778,12.424c1.383,4.141,4.104,7.204,8.166,9.188
C143.814,72.358,147.918,72.617,152.151,71.151"/>
</g>
<path fill="none" stroke="#000000" stroke-width="0.05" stroke-linecap="round" stroke-linejoin="round" d="M157.593,68.044h0.13"
/>
<g>
<path opacity="0.122" fill="#1A24E6" d="M175.867,41.386l-5.572,3.235c-1.556,1.38-2.766,3.019-3.63,4.917
c-1.987,3.969-2.247,8.067-0.777,12.294c1.123,3.192,2.98,5.781,5.572,7.765l2.592,1.553c3.974,1.984,8.078,2.242,12.311,0.776
c4.234-1.466,7.344-4.185,9.331-8.153l1.685-5.954l-0.907-6.471c-1.468-4.228-4.19-7.289-8.164-9.188
C184.247,40.177,180.1,39.918,175.867,41.386"/>
</g>
<g>
<path opacity="0.122" fill="#F2FE01" d="M125.194,69.467c-4.233,1.467-7.343,4.229-9.33,8.283
c-1.988,3.969-2.246,8.067-0.778,12.294c1.47,4.228,4.233,7.333,8.295,9.318c3.974,1.898,8.078,2.157,12.311,0.776l0.648-0.259
c3.888-1.552,6.782-4.228,8.683-8.022c1.296-2.676,1.856-5.436,1.685-8.283l-0.907-4.011c-1.296-3.625-3.456-6.385-6.48-8.283
l-1.815-1.035C133.532,68.26,129.428,68.001,125.194,69.467"/>
</g>

<radialGradient id="SVGID_1_" cx="69.1842" cy="587.5672" r="2.5933" fx="67.8876" fy="586.2706" gradientTransform="matrix(12.5645 0 0 -12.5182 -705.0267 7439.6914)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#CCCCCC"/>
</radialGradient>
<path fill="url(#SVGID_1_)" d="M149.688,77.232c-1.037,1.984-1.598,4.056-1.684,6.213v0.129c-0.174,1.984,0.129,4.012,0.907,6.083
c1.208,3.623,3.369,6.428,6.479,8.412l1.685,0.906c4.06,1.898,8.207,2.156,12.44,0.776c4.233-1.554,7.301-4.313,9.202-8.283
c1.037-2.156,1.641-4.313,1.813-6.471l-0.907-5.824c-1.468-4.313-4.233-7.418-8.293-9.316c-3.974-1.984-8.078-2.243-12.312-0.777
l-0.648,0.259C154.397,70.804,151.503,73.437,149.688,77.232"/>
<path fill="none" stroke="#000000" stroke-width="0.05" stroke-linecap="round" stroke-linejoin="round" d="M148.004,83.445v0.129
"/>
<g>
<path opacity="0.122" fill="#E75303" d="M162.388,120.456c0.95-2.07,1.469-4.098,1.555-6.083v-0.128
c0.086-2.071-0.216-4.142-0.907-6.212c-1.468-4.228-4.19-7.291-8.164-9.189c-3.974-1.984-8.079-2.243-12.312-0.776l-5.572,3.105
c-1.556,1.382-2.809,3.063-3.759,5.048c-1.987,3.968-2.247,8.067-0.777,12.294c1.468,4.228,4.233,7.334,8.293,9.318
c3.975,1.984,8.078,2.243,12.312,0.776C157.291,127.143,160.401,124.425,162.388,120.456"/>
</g>
<path fill="none" stroke="#000000" stroke-width="0.05" stroke-linecap="round" stroke-linejoin="round" d="M163.943,114.373
v-0.128"/>
<g>
<path opacity="0.122" fill="#E90101" d="M175.996,98.844c-4.319,1.382-7.473,4.099-9.46,8.153
c-1.123,2.331-1.685,4.703-1.685,7.118c0,1.726,0.345,3.494,1.036,5.307c1.382,4.228,4.104,7.334,8.165,9.318
c3.974,1.984,8.078,2.242,12.311,0.776c4.234-1.466,7.344-4.228,9.331-8.283c1.987-4.054,2.247-8.196,0.777-12.423
c-1.209-3.364-3.196-5.995-5.961-7.894l-2.203-1.294C184.247,97.637,180.143,97.378,175.996,98.844"/>
</g>
<g>
<path opacity="0.122" fill="#1B02FD" d="M183.383,78.656c-1.037,1.984-1.599,4.011-1.685,6.083v0.129
c-0.173,1.984,0.129,4.054,0.907,6.211c1.468,4.227,4.233,7.334,8.293,9.318c3.974,1.898,8.078,2.158,12.312,0.776
c4.233-1.466,7.344-4.227,9.331-8.281c1.901-3.97,2.117-8.067,0.648-12.295c-1.47-4.227-4.19-7.333-8.165-9.318
c-4.061-1.984-8.208-2.243-12.441-0.775C188.35,71.97,185.284,74.687,183.383,78.656"/>
</g>
<path fill="none" stroke="#000000" stroke-width="0.05" stroke-linecap="round" stroke-linejoin="round" d="M181.698,84.739v0.129
"/>
</g>
</g>
</svg>
</div>

<audio autoplay="autoplay" playcount="999" id="looper" loop="true">
<source src="zombo.ogg"></source>
<source src="zombo.mp3"></source>
</audio>

<div style="text-align: center; width: 100%; display:none;" id="start_container">
<a href="javascript:ipad_start();" style="font-family: Helvetica; font-size: 44px;">Start</a>
</div>

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8093261-3']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

spinner = document.getElementById('spinner');
angle = 0;

function spin() {
angle = angle + 80;
if (angle > 360) angle = angle - 360;
spinner.setAttribute("transform","rotate(" + angle + ", 81, 69)");
setTimeout("spin()", 100);
}

function ipad_start() {
document.getElementById('looper').play();
document.getElementById('start_container').style.display = 'none';
spin();
}

if (navigator.userAgent.indexOf('iPad') != -1) {
document.getElementById('start_container').style.display = 'block';
} else {
spin();
}

</script>
</body>
</html>
Binary file added zombo.mp3
Binary file not shown.
Binary file added zombo.ogg
Binary file not shown.

0 comments on commit a278a01

Please sign in to comment.