summaryrefslogtreecommitdiff
path: root/views/index.ejs
diff options
context:
space:
mode:
Diffstat (limited to 'views/index.ejs')
-rw-r--r--views/index.ejs407
1 files changed, 390 insertions, 17 deletions
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>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 09:17:28 +0000