metanohi-misc-subsites/projects/snowman/index.htm

116 lines
4.2 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>The life of a snowman</title>
<style type='text/css'>
body {
background:#00ff00;
}
img {
position:absolute;
bottom:0;
right:0;
max-height:100%;
max-width:100%;
margin:0 auto;
display:none;
filter:alpha(opacity=0);
-moz-opacity:0;
}
#m {
width:270px;
position:absolute;
z-index:10;
top:0;
left:15px;
padding:10px;
font:16px 'trebuchet ms';
background:url('img/m.png') no-repeat bottom left;
}
#m div {
font:12px arial;
float:right;
cursor:default;
}
</style>
<script type='text/javascript'>
f=0
fn=1
function fadein(num) {
if (f==0) {
bn=document.body.childNodes[num]
bn.style.display="block"
bn.style.zIndex=fn
}
if (f<100) {
f+=4
bn.style.MozOpacity=f/100
if (navigator.appName=="Microsoft Internet Explorer")
bn.filters.alpha.opacity=f
//document.title=f
ft=setTimeout("fadein()",1)
}
else {
f=0
fn+=1
}
}
n=0
function story() {
if (n<9 && f==0) {
n+=1
if (n<9)
ctc="<div>Click to continue&nbsp;</div>"
else
ctc="<div>The End&nbsp;</div>"
mdiv.innerHTML=msgs[n-1]+ctc
fadein(n)
}
}
r=0
g=255
b=0
function bgc() {
document.body.style.backgroundColor="rgb("+r+","+g+","+b+")"
if (r==255 && g<255 && b==0)
g=g+1
else if (r>0 && g==255 && b==0)
r=r-1
else if (r==0 && g==255 & b<255)
b=b+1
else if (r==0 && g>0 && b==255)
g=g-1
else if (r<255 && g==0 && b==255)
r=r+1
else if (r==255 && g==0 && b>0)
b=b-1
t=setTimeout("bgc()",1)
}
window.onload=function() {
bgc()
mdiv=document.getElementById("m")
msgs=new Array()
msgs[0]="At first, nothing was wrong. The snowman Icy lived peacefully on the planet Xryxon, a member of the interplanetary organisation WHAT (Worldwide Headmost Abnormal Treaty) where he used to eat a lot of ice cream and never had to eat hot food. Until one day..."
msgs[1]="It was saturday. Icy didn't want to get up. Outside it was more than -50 celsius degrees hot. He wasn't sure if he was going to make it through. When he finally got up, he noticed that his mouth had turned red. \"Why?\" he wondered. However, he soon understood that he was going to die. It was the work of Lavos, the living volcano."
msgs[2]="A few minutes later his right eye turned green. Icy knew this was bad, so he hurried to the doctor. The doctor was terrified. Icy's eye was rotting."
msgs[3]="The same thing happened to his left eye. Icy was barely able to see anymore, and he decided to defeat Lavos once and for all. He packed his stuff, took the train and drank a bottle of ice tea. He was ready."
msgs[4]="Already before arriving at Central Station in Kneqxy, Icy's hat had turned light brown. \"At least it's not yellow yet,\" Icy thought. He was fully aware of his upcoming fight with Lavos, but Lavos wasn't. Icy then thought of a clever plan to surprise attack Lavos."
msgs[5]="He dyed his skin (yes, snowmen can do the most amazing things) and was sure no one would recognize him. He was wrong. By a coincidence his aunt Coldie showed up at the station and knew it was Icy the moment she saw him. Luckily Icy escaped. Aunt Coldie was known to talk a lot."
msgs[6]="Icy hadn't given up on dying his skin. He was sure that he just had to do it more thoroughly. This time he chose a brighter color. After he had dyed his skin, he set off for Lavos."
msgs[7]="Icy <b>did</b> surprise Lavos, but Lavos was hiding somewhere hot, so Icy began to melt. Fortunately for Icy's family, his aunt Coldie had been following him and took a picture just before he died of melting. His last words were: \"Why am I sweating this much?\""
msgs[8]="This is what Icy looked like after having been trapped in Lavos' cave for several minutes. He's dead.<br />(Picture taken by our reporter)<br />"
story()
}
document.onclick=story
</script>
</head>
<body><div id='m'>Loading story... (please wait.. it takes a looong time to load)</div><img src='img/1.png' alt='' /><img src='img/2.png' alt='' /><img src='img/3.png' alt='' /><img src='img/4.png' alt='' /><img src='img/5.png' alt='' /><img src='img/6.png' alt='' /><img src='img/7.png' alt='' /><img src='img/8.png' alt='' /><img src='img/9.png' alt='' /></body></html>