Permalink
Browse files

updated this project with the current html files

  • Loading branch information...
1 parent a8c25e8 commit 4e3bedd4de2aa04e9ae03acdb622a7c1e847a673 @chrismatthieu chrismatthieu committed Aug 25, 2012
View
Binary file not shown.
View
@@ -1,5 +1,185 @@
-<html>
- <body>
- <h1>404</h1>
- </body>
+<!doctype html>
+<html class="no-js">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <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; -webkit-user-select: none; }
+ html { background: #333; color: #fff; }
+
+ @-webkit-keyframes rocket {
+ from {
+ -webkit-transform: rotate(30deg);
+ height: 265px;
+ width: 268px;
+ left: 10%;
+ top: 0px;
+ margin-top: -265px;
+ }
+ to {
+ margin-top: -148px;
+ }
+ }
+
+ @-webkit-keyframes text {
+ from {
+ top: 50%;
+ opacity: 0;
+ }
+ 50% {
+ opacity: 1;
+ }
+ to {
+ top: 90%;
+ opacity: 0;
+ }
+ }
+
+ #nebula, #nebulabg {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ }
+
+ .js.canvas #nebulabg {
+ display: none;
+ }
+
+ .js.cssanimations #rocket {
+ display: none;
+ }
+ .js.cssanimations .audio-ready #rocket,
+ .js.cssanimations .audio-timeout #rocket {
+ display: block;
+ -webkit-animation: rocket 2s 1 ease-out;
+ }
+
+ #rocket {
+ position: absolute;
+ height:295px;
+ width:298px;
+ background-image: url('http://nodester.com/images/rocket-down.png');
+ background-size: cover;
+ top: 40%;
+ margin-left: -149px;
+ margin-top: -148px;
+ left: 50%;
+ }
+
+ #rocket img {
+ display: none;
+ }
+
+ #audio {
+ display: none;
+ }
+
+ 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: absolute;
+ text-shadow: 0 0 3px #000;
+ }
+
+ .js.cssanimations p.description {
+ display: block;
+ height: 0;
+ margin: 0;
+ padding: 0;
+ }
+
+ .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 .audio-ready h1, .js.cssanimations .audio-timeout h1 {
+ opacity: 1;
+ -webkit-transform: rotate(-20deg);
+ }
+
+ </style>
+ <script src="modernizr.js"></script>
+ <script>
+ Modernizr.load({
+ 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>
Oops, something went wrong.

0 comments on commit 4e3bedd

Please sign in to comment.