Permalink
Browse files

updated 404

  • Loading branch information...
chrismatthieu committed Dec 29, 2011
1 parent 2010246 commit 2b52c4db85b50393c9af158f036d4aac28c90da6
Showing with 100 additions and 16 deletions.
  1. +1 −2 package.json
  2. +97 −12 public/404.html
  3. +2 −2 public/modernizr.js
View
@@ -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":{
View
@@ -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>
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 2b52c4d

Please sign in to comment.