updated 404

package.json

@@ -4,7 +4,7 @@
    "version":"0.0.1",
    "homepage":"http://github.com/nodester/nodester",
    "repository":"git://github.com/nodester/nodester.git",
-   "author":"Nodester <contact@nodester.com> (http://nodester.com/)",
+   "author":"Nodester <chris@nodester.com> (http://nodester.com/)",
 
    "dependencies":{
       "coffee-script":"*",
@@ -18,7 +18,6 @@
       "cradle":"*",
       "nodeinfo":"*",
       "socket.io":"*",
-      "bouncy":"*",
       "daemon":"*"
    },
    "engines":{

public/404.html

@@ -7,8 +7,8 @@
 	<title>404 - File not found</title>
     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
 	<style>
-	html, body { width: 100%; height: 100%; margin: 0px; text-align: center }
-	html { background: #333; color: #fff }
+	html, body { width: 100%; height: 100%; margin: 0px; text-align: center; -webkit-user-select: none; }
+	html { background: #333; color: #fff; }
 
 	@-webkit-keyframes rocket {
 	   from {
@@ -23,6 +23,20 @@
 	       margin-top: -148px;
 	   }
 	}
+
+    @-webkit-keyframes text {
+        from {
+            top: 50%;
+            opacity: 0;
+        }
+        50% {
+            opacity: 1;
+        }
+        to {
+            top: 90%;
+            opacity: 0;
+        }
+    }
 
 	#nebula, #nebulabg {
 	   position: absolute;
@@ -40,7 +54,8 @@
 	.js.cssanimations #rocket {
 	    display: none;
 	}
-	.js.cssanimations .nebula-ready #rocket {
+	.js.cssanimations .audio-ready #rocket,
+    .js.cssanimations .audio-timeout #rocket  {
 	    display: block;
 	    -webkit-animation: rocket 2s 1 ease-out;
 	}
@@ -58,29 +73,65 @@
 	}
 
 	#rocket img {
-	   display: none;
+        display: none;
 	}
+
+    #audio {
+        display: none;
+    }
 
-	h1 {
+	h1, .js.cssanimations p.description span {
 	   font-family:sans-serif;
 	   font-size:38px;
 	   font-weight:bold;
 	   padding:0 0 5px;
 	   margin:0;
 	   text-align: center;
 	   top: 70%;
-	   position: relative;
+	   position: absolute;
 	   text-shadow: 0 0 3px #000;
 	}
+
+    .js.cssanimations p.description {
+        display: block;
+        height: 0;
+        margin: 0;
+        padding: 0;
+    }
 
-	.js.csstransitions h1 {
-	   opacity: 0;
-	   -webkit-transition: opacity 1s ease-in;
-	   -webkit-transition-delay: 2s;
+    .js.cssanimations .audio-ready p.description span,
+    .js.cssanimations .audio-timeout p.description span {
+        -webkit-animation: text 5s infinite ease-in;
+    }
+
+    .js.cssanimations p.description span {
+        position: absolute;
+        opacity: 0; 
+        display: block;
+        width: 100%;
+    }
+
+    .js.cssanimations p.description span:nth-child(2) {
+        -webkit-animation-delay: 1s;
+    }
+    .js.cssanimations p.description span:nth-child(3) {
+        -webkit-animation-delay: 2s;
+    }
+
+	.js.cssanimations h1 {
+        top: 40%;
+        margin-left: 128px;
+        margin-top: 132px;
+    	left: 50%;
+        opacity: 0; 
+        -webkit-transform: scale(0.5);
+        -webkit-transition: opacity 200ms, -webkit-transform 200ms linear;
+        -webkit-transition-delay: 1.8s;
 	}
 
-	.js.cssanimations .nebula-ready h1 {
-	   opacity: 1;
+	.js.cssanimations .audio-ready h1, .js.cssanimations .audio-timeout h1 {
+        opacity: 1;
+        -webkit-transform: rotate(-20deg);
 	}
 
 	</style>
@@ -90,11 +141,45 @@
         test: Modernizr.canvas,
         yep: 'nebula.js'
     });
+    Modernizr.load({
+        test: Modernizr.postmessage, 
+        yep: 'http://www.youtube.com/player_api'
+    });
+    document.addEventListener("DOMContentLoaded", function() {
+        document.getElementById("rocket").title = "Click to Mute";
+        document.getElementById("rocket").addEventListener("click", function() {
+            document.body.removeChild(document.getElementById("audio"));
+        });
+    });
+
+    var player;
+      function onYouTubePlayerAPIReady() {
+        player = new YT.Player('audio', {
+
+          videoId: '75V4ClJZME4',
+          events: {
+            'onReady': function(e) {
+                e.target.playVideo();
+            },
+            'onStateChange': function(e) {
+                if (e.data == YT.PlayerState.PLAYING) {
+                    document.body.className += " audio-ready";
+                }
+            },
+          }
+        });
+      }
+      setTimeout(function() {
+        document.body.className += " audio-timeout";
+      }, 2000);
 	</script>
 </head>
 <body>
+    <div id="audio">
+    </div>
 	<img src="http://nodester.com/images/nebula.jpg" id="nebulabg" />
 	<div id="rocket"><img src="http://nodester.com/images/rocket-down.png" alt="Nodester" /></div>
 	<h1>404</h1>
+    <p class="description"><span>File</span> <span>Not</span> <span>Found</span></p>
 </body>
 </html>