v1 design

3 files changed, 391 insertions, 18 deletions

diff --git a/public/images/okfocus_logo.png b/public/images/okfocus_logo.png
new file mode 100644
index 0000000..1373582
--- /dev/null
+++ b/public/images/okfocus_logo.png
diff --git a/routes/index.js b/routes/index.js
index 0bf1fed..ac696e9 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -4,5 +4,5 @@
  */
 
 exports.index = function(req, res){
-  res.render('index', { title: 'How Long Can You Wait?', currentUser: req.user });
+  res.render('index', { title: 'Wait Site', currentUser: req.user });
 };
diff --git a/views/index.ejs b/views/index.ejs
index 6467aa4..0a46120 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -135,9 +135,305 @@
 						socket.emit('mouse', { x: x, y: y, id: _id });
 				});
 			}
-
+			
     </script>
     <style type="text/css">
+
+
+		@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One);
+
+
+		@-webkit-keyframes a {
+			0% {
+				opacity: 0;
+				-o-transform: translate3d(0, -60px, 0);
+				-ms-transform: translate3d(0, -60px, 0);
+				-moz-transform: translate3d(0, -60px, 0);
+				-webkit-transform: translate3d(0, -60px, 0);
+				transform: translate3d(0, -60px, 0);
+			}
+
+			30% {
+				opacity: 1;
+				-o-transform: translate3d(0, 5px, 0);
+				-ms-transform: translate3d(0, 5px, 0);
+				-moz-transform: translate3d(0, 5px, 0);
+				-webkit-transform: translate3d(0, 5px, 0);
+				transform: translate3d(0, 5px, 0);
+			}
+
+			60% {
+				-o-transform: translate3d(0, -2px, 0);
+				-ms-transform: translate3d(0, -2px, 0);
+				-moz-transform: translate3d(0, -2px, 0);
+				-webkit-transform: translate3d(0, -2px, 0);
+				transform: translate3d(0, -2px, 0);
+			}
+
+			100% {
+				-o-transform: translate3d(0, 0px, 0);
+				-ms-transform: translate3d(0, 0px, 0);
+				-moz-transform: translate3d(0, 0px, 0);
+				-webkit-transform: translate3d(0, 0px, 0);
+				transform: translate3d(0, 0px, 0);
+			}
+
+		}
+		@-webkit-keyframes b {
+			0% {
+				opacity: 0;
+				-o-transform: translate3d(0, -40px, 0);
+				-ms-transform: translate3d(0, -40px, 0);
+				-moz-transform: translate3d(0, -40px, 0);
+				-webkit-transform: translate3d(0, -40px, 0);
+				transform: translate3d(0, -40px, 0);
+			}
+
+			30% {
+				opacity: 1;
+				-o-transform: translate3d(0, 5px, 0);
+				-ms-transform: translate3d(0, 5px, 0);
+				-moz-transform: translate3d(0, 5px, 0);
+				-webkit-transform: translate3d(0, 5px, 0);
+				transform: translate3d(0, 5px, 0);
+			}
+
+			100% {
+				opacity: 1;
+				-o-transform: translate3d(0, 0px, 0);
+				-ms-transform: translate3d(0, 0px, 0);
+				-moz-transform: translate3d(0, 0px, 0);
+				-webkit-transform: translate3d(0, 0px, 0);
+				transform: translate3d(0, 0px, 0);
+			}
+
+		}
+
+		@-webkit-keyframes c {
+			0% {
+				opacity: 0;
+				-o-transform: translate3d(0, 40px, 0);
+				-ms-transform: translate3d(0, 40px, 0);
+				-moz-transform: translate3d(0, 40px, 0);
+				-webkit-transform: translate3d(0, 40px, 0);
+				transform: translate3d(0, 40px, 0);
+			}
+
+			30% {
+				opacity: 1;
+				-o-transform: translate3d(0, 45px, 0);
+				-ms-transform: translate3d(0, 45px, 0);
+				-moz-transform: translate3d(0, 45px, 0);
+				-webkit-transform: translate3d(0, 45px, 0);
+				transform: translate3d(0, 45px, 0);
+			}
+
+			100% {
+				opacity: 1;
+				-o-transform: translate3d(0, 0px, 0);
+				-ms-transform: translate3d(0, 0px, 0);
+				-moz-transform: translate3d(0, 0px, 0);
+				-webkit-transform: translate3d(0, 0px, 0);
+				transform: translate3d(0, 0px, 0);
+			}
+
+		}
+
+
+		@-moz-keyframes a {
+			0% {
+				opacity: 0;
+				-o-transform: translate3d(0, -60px, 0);
+				-ms-transform: translate3d(0, -60px, 0);
+				-moz-transform: translate3d(0, -60px, 0);
+				-webkit-transform: translate3d(0, -60px, 0);
+				transform: translate3d(0, -60px, 0);
+			}
+
+			30% {
+				opacity: 1;
+				-o-transform: translate3d(0, 5px, 0);
+				-ms-transform: translate3d(0, 5px, 0);
+				-moz-transform: translate3d(0, 5px, 0);
+				-webkit-transform: translate3d(0, 5px, 0);
+				transform: translate3d(0, 5px, 0);
+			}
+
+			60% {
+				-o-transform: translate3d(0, -2px, 0);
+				-ms-transform: translate3d(0, -2px, 0);
+				-moz-transform: translate3d(0, -2px, 0);
+				-webkit-transform: translate3d(0, -2px, 0);
+				transform: translate3d(0, -2px, 0);
+			}
+
+			100% {
+				-o-transform: translate3d(0, 0px, 0);
+				-ms-transform: translate3d(0, 0px, 0);
+				-moz-transform: translate3d(0, 0px, 0);
+				-webkit-transform: translate3d(0, 0px, 0);
+				transform: translate3d(0, 0px, 0);
+			}
+
+		}
+		@-moz-keyframes b {
+			0% {
+				opacity: 0;
+				-o-transform: translate3d(0, -40px, 0);
+				-ms-transform: translate3d(0, -40px, 0);
+				-moz-transform: translate3d(0, -40px, 0);
+				-webkit-transform: translate3d(0, -40px, 0);
+				transform: translate3d(0, -40px, 0);
+			}
+
+			30% {
+				opacity: 1;
+				-o-transform: translate3d(0, 5px, 0);
+				-ms-transform: translate3d(0, 5px, 0);
+				-moz-transform: translate3d(0, 5px, 0);
+				-webkit-transform: translate3d(0, 5px, 0);
+				transform: translate3d(0, 5px, 0);
+			}
+
+			100% {
+				opacity: 1;
+				-o-transform: translate3d(0, 0px, 0);
+				-ms-transform: translate3d(0, 0px, 0);
+				-moz-transform: translate3d(0, 0px, 0);
+				-webkit-transform: translate3d(0, 0px, 0);
+				transform: translate3d(0, 0px, 0);
+			}
+
+		}
+
+		@-webkit-keyframes c {
+			0% {
+				opacity: 0;
+
+			}
+
+			60% {
+				opacity: 1;
+
+			}
+
+		}
+				ol li:nth-child(1){
+					-webkit-animation-name: b;
+					-webkit-animation-duration: 2.2s;
+					-webkit-animation-iteration-count: 1;
+					-webkit-animation-delay: 0s;
+				}
+				ol li:nth-child(2){
+					-webkit-animation-name: b;
+					-webkit-animation-duration: 2.4s;
+					-webkit-animation-iteration-count: 1;
+					-webkit-animation-delay: 0s;
+				}
+				ol li:nth-child(3){
+					-webkit-animation-name: b;
+					-webkit-animation-duration: 2.6s;
+					-webkit-animation-iteration-count: 1;
+					-webkit-animation-delay: 0s;
+				}
+				ol li:nth-child(4){
+					-webkit-animation-name: b;
+					-webkit-animation-duration: 2.8s;
+					-webkit-animation-iteration-count: 1;
+					-webkit-animation-delay: 0s;
+				}
+				ol li:nth-child(5){
+					-webkit-animation-name: b;
+					-webkit-animation-duration: 3s;
+					-webkit-animation-iteration-count: 1;
+					-webkit-animation-delay: 0s;
+				}
+				ol li:nth-child(6){
+					-webkit-animation-name: b;
+					-webkit-animation-duration: 3.2s;
+					-webkit-animation-iteration-count: 1;
+					-webkit-animation-delay: 0s;
+				}
+				ol li:nth-child(7){
+					-webkit-animation-name: b;
+					-webkit-animation-duration: 3.4s;
+					-webkit-animation-iteration-count: 1;
+					-webkit-animation-delay: 0s;
+				}
+				ol li:nth-child(8){
+					-webkit-animation-name: b;
+					-webkit-animation-duration: 3.6s;
+					-webkit-animation-iteration-count: 1;
+					-webkit-animation-delay: 0s;
+				}
+				ol li:nth-child(9){
+					-webkit-animation-name: b;
+					-webkit-animation-duration: 3.8s;
+					-webkit-animation-iteration-count: 1;
+					-webkit-animation-delay: 0s;
+				}
+				ol li:nth-child(10){
+					-webkit-animation-name: b;
+					-webkit-animation-duration: 4s;
+					-webkit-animation-iteration-count: 1;
+					-webkit-animation-delay: 0s;
+				}
+
+
+
+		h1 {
+			font-family: 'Julius Sans One', sans-serif;
+			-webkit-animation-name: a;
+			-webkit-animation-duration: 2s;
+			-webkit-animation-iteration-count: 1;
+			-webkit-animation-delay: 0s;
+			-moz-animation-name: a;
+			-moz-animation-duration: 2s;
+			-moz-animation-iteration-count: 1;
+			-moz-animation-delay: 0s;
+			font-weight:500;
+			font-size:50px;
+			margin:20px 0 0 0;
+			letter-spacing: 12px;
+		}
+
+		h2 {
+			font-family: 'Julius Sans One', sans-serif;
+			-webkit-animation-name: a;
+			-webkit-animation-duration: 2s;
+			-webkit-animation-iteration-count: 1;
+			-webkit-animation-delay: 0s;
+			-moz-animation-name: b;
+			-moz-animation-duration: 2s;
+			-moz-animation-iteration-count: 1;
+			-moz-animation-delay: 0s;
+			font-weight:500;
+			margin:7px 0 0 0;
+			letter-spacing: 8px;
+			font-size:18px;
+		}
+			
+			h3 {
+				font-family: 'Julius Sans One', sans-serif;
+				-webkit-animation-name: b;
+				-webkit-animation-duration: 2s;
+				-webkit-animation-iteration-count: 1;
+				-webkit-animation-delay: 0s;
+				-moz-animation-name: b;
+				-moz-animation-duration: 2s;
+				-moz-animation-iteration-count: 1;
+				-moz-animation-delay: 0s;
+				font-weight: 500;
+				margin: 0;
+				font-size: 33px;
+				border-bottom: 1px solid;
+				padding: 7px 0;
+				margin-bottom: 10px;
+				letter-spacing: 12px;
+				display: inline-block;
+				
+			}
+
     	html,body {
     		width: 100%;
     		height: 100%;
@@ -145,10 +441,9 @@
     		padding: 0;
 				overflow: hidden;
 				text-align: center;
-				background-image: url(/images/sanddune2.jpg);
 				background-attachment: fixed;
 				background-size: cover;
-				-webkit-transform: translateZ(0);
+				cursor:url(https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif), default;
     	}
     	.cursor {
     		position: absolute;
@@ -159,41 +454,119 @@
     		margin-bottom: -9999px;
     		margin-right: -9999px;
 				-webkit-transform: translateZ(0);
+				-webkit-touch-callout: none;
+				-webkit-user-select: none;
+				-khtml-user-select: none;
+				-moz-user-select: none;
+				-ms-user-select: none;
+				user-select: none;
+				-webkit-transition: all .1s ease-out;
+				-moz-transition: all .1s ease-out;
+				-ms-transition: all .1s ease-out;
+				-o-transition: all .1s ease-out;
+				transition: all .1s ease-out;
     	}
 			.cursor.idle {
 				background-image: url(/images/cursor-gray.png) !important;
+				text-shadow: 0 0 2px #333;
+				color: transparent;
+				opacity:0.8;
 			}
 			.cursor span {
 				position: relative;
 				left: 25px;
-				top: 6px;
+				top: 0;
 				font-size: 12px;
-				color: teal;
+				color: #333;
+				font-family: 'Julius Sans One', sans-serif;
+			}
+			.cursor span:after {
+				content: "15:33";
+				margin-left: 25px;
+				color: black;
+				display: block;
+				float: left;
 			}
 			.cursor.idle span {
-				color: #888888;
+				color: transparent;
+			}
+			.cursor span:after {
+				content: "15:33";
+				margin-left: 25px;
+				color: transparent;
+				display: block;
+				float: left;
+			}
+			ol{
+				list-style:none;
+				padding:0;
+				
+				margin:0;
+				-webkit-animation-name: b;
+				-webkit-animation-duration: 2s;
+				-webkit-animation-iteration-count: 1;
+				-webkit-animation-delay: 0s;
+			}
+	
+			.fbutton {
+					background: url('https://s3.amazonaws.com/luckyplop/cf8dc6647202296b7c84c906dbf43c6d46e04958.png') no-repeat -2px -53px;
+					display:inline-block;
+					width: 223px;
+					height: 34px;
+					margin:10px 0;
+					-webkit-animation-name: c;
+					-webkit-animation-duration: 4s;
+					-webkit-animation-iteration-count: 1;
+					opacity:1;
+					-webkit-animation-delay: 0s;
+			}
+			
+			.fbutton:hover {
+					background-position: -2px -97px;					
+			}
+			
+			.fbutton:focus {
+					background: url(https://s3.amazonaws.com/luckyplop/cf8dc6647202296b7c84c906dbf43c6d46e04958.png) no-repeat -2px -97px;
+			}
+			.okfocus {
+				text-align:center;
+				position:fixed;
+				bottom:10px;
+				left:0;
+				width:100%;
+			}
+			.okfocus img {
+				width:100px;
 			}
     </style>
   </head>
   <body>
-    <h1><%= title %></h1>
-    <% if (!currentUser) { %>
-      <a href="/auth/facebook">Login with Facebook</a>
-		<% } %>
+    <h1>WAIT SITE</h1>
+		<h2>The Longest Game Ever</h2>
 
-		<div>You've been waiting for <span id="waiting">0 seconds</span><br>
+   <% if (currentUser) { %>
+	<style>
+	body{
+		
+	}
+	</style>
+	<% } %>
+	<!--	<div>You've been waiting for <span id="waiting">0 seconds</span><br>
 		<span id="reset"></span></div>
 		<div><span id="count">0</span> ppl online now!!</div>
 		
 		<div id="really_waiting">FOCUS</div>
-		
-		<h1>currently online!~!</h1>
-		<ol id="users"></ol>
-
-		<h1>high scores!!</h1>
-		<ol id="scores"></ol>
 
+		<p>currently waiting</p>
+		<ol id="users"></ol>
+-->
+		<h3>high scores</h3>
+		<ol id="scores"></ol>		
+		 <% if (!currentUser) { %>
+		<a href="/auth/facebook"class="fbutton"></a><br>
+				<% } %>
 		<div id="cursors"></div>
+		<a target="_blank" href="http://okfoc.us/"class="okfocus"><img src="/images/okfocus_logo.png" alt="OKFocus"></a>
 
   </body>
 </html>