From ab3c66a6db7c4c2dbc3795c3b11132a535a3aeb3 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Sun, 30 Dec 2012 20:03:59 -0500
Subject: new fullscreen page

---
 template/fullscreen.st | 345 +++++++++++++++++++++++++++++--------------------
 1 file changed, 207 insertions(+), 138 deletions(-)

(limited to 'template/fullscreen.st')

diff --git a/template/fullscreen.st b/template/fullscreen.st
index 9556bf2..cd3a3cf 100644
--- a/template/fullscreen.st
+++ b/template/fullscreen.st
@@ -4,6 +4,10 @@
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script src="$domain$/static/js/pichat.js"></script>
     <script src="$domain$/static/js/fullscreen.js"></script>
+		$if(user_nick)$
+		$else$
+    <script src="$domain$/static/js/register.js"></script>
+    $endif$
     <script>
       var LoggedIn = $if(user_nick)$true$else$false$endif$;
       var Timestamp = $timestamp$;
@@ -12,157 +16,222 @@
       newwindow=window.open(url,'name','height=50,width=400,left=20,top=20,location=0,status=0,scrollbar=0,resizable=0');
       if (window.focus) {newwindow.focus()}
       }
-      jQuery(startChatUpdater);
     </script>
-    <style>
-      html, body, div, img { margin: 0; padding: 0; border: 0; overflow: hidden; font-family: Monaco, "Courier New", Courier, monospace; }
-      input {
-          font-family: Monaco, "Courier New", Courier, monospace;
-      }
-      #big-image img {
-          width: 100%; height: 100%;
-          cursor: pointer;
-          box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
-      }
-      #loginbox {
-background: white;
-z-index: 999;
-position: absolute;
-font-size: 20%;
-width: 335px;
-height: 220px;
-margin-left: -170px;
-left: 50%;
-border: 1px solid;
-padding: 2%;
-top: 20%;
-text-align: justify;
--moz-box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000,-4px 4px #000,-5px 5px #000,-6px 6px #000;
--webkit-box-shadow: -1px 1px black,-2px 2px black,-3px 3px black,-4px 4px black,-5px 5px black,-6px 6px black;
-box-shadow: -1px 1px black,-2px 2px black,-3px 3px black,-4px 4px black,-5px 5px black,-6px 6px black;
-}
-      #logininner {
-          width: 30em;
-          height: 20em;
-          position: relative;
-      }
-      #infocol {
-          width: 50%;
-          float: left;
-          position: relative;
-      }
-      #formcontainer {
-          padding: 0;
-          width: 80%;
-          position: relative;
-      }
-      #piccol {
-          width: 50%;
-          float: right;
-          position: relative;
-      }
-      #loginimg {
-          width: 75%;
-          margin-top: 20%;
-      }
-      #spinner { display: none; }
-      #forgetpw {
-          left: 5px;
-          bottom: 5px;
-          font-size: 80%;
-      }
-      #fav-indicator {
-          display: none;
-          position: fixed;
-          z-index: 999;
-          height: 50px;
-          width: 50px; 
-          right: 20px;
-          top: 20px;
-      }
-      #errormsg {
-          position: relative;
-          color: red;
-          text-align: center;
-          margin-top: 250px;
-      }
-      input {max-width: 100px;
--moz-box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000,-4px 4px #000,-5px 5px #000,-6px 6px #000;
--webkit-box-shadow: -1px 1px black,-2px 2px black,-3px 3px black,-4px 4px black,-5px 5px black,-6px 6px black;
-box-shadow: -1px 1px black,-2px 2px black,-3px 3px black,-4px 4px black,-5px 5px black,-6px 6px black;
-border: 1px solid;}
-input:hover {
-	-moz-box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000;
-	-webkit-box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000;
-	box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000,inset -2px 2px 2px #333;
-	margin-top: 2px;
-	margin-left: -2px;}
-	input:active {
-	-moz-box-shadow: 0px 0px white;
-	-webkit-box-shadow: 0px 0px white;
-	box-shadow: -1px 1px #000,0px 0px white;
-	margin-top: 2px;
-	margin-left: -4px;
-	box-shadow: inset -3px 3px 4px #333;
-	cursor: pointer;}
-#remembermeInput {
-	margin-top: 0; margin-left: 0;
-}
-      #big-image{font-size:20px;text-align: left; text-justify: newspaper;    color:#000}
-      #memelogo { position: fixed; z-index: 999; bottom: 30px; right: 80px; }
-      .sublogo { font-family: Monaco, "Courier New", Courier, monospace; }
-      a { color:#000 }
-      #toplogo{position: fixed;display:none;
-top: 0;
-left: 0;}
-#big-image {cursor:url('http://dump.fm/static/img/thumbs/heartfaved.gif'), pointer}
-    </style>
+ 
+		<style>
+		@-webkit-keyframes b {
+			from {-webkit-transform:rotatey(-360deg) rotateX(-360deg) scale(7);}
+			to   {-webkit-transform:rotatey(360deg) rotateX(0deg) scale(1);}
+		}
+		@-webkit-keyframes z {
+			from {-webkit-transform:rotatey(360deg) rotateX(0deg) scale(1);}
+			to   {-webkit-transform:rotatey(-360deg) rotateX(-360deg) scale(7);}
+		}
+		html, body, div, img { margin: 0; padding: 0; border: 0; overflow: hidden; font-family: helvetica, arial, sans-serif; line-height: 1.5em; }
+		input {
+			font-family: Monaco, "Courier New", Courier, monospace;
+		}
+		a {
+			color: black;
+			text-decoration: none;
+		}
+		#big-image img {
+			width: 100%; height: 100%;
+			cursor: pointer;
+			box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
+		}
+		.box {
+			background: rgba(255,255,255,0.8);
+			z-index: 999;
+			position: absolute;
+			width: 400px;
+			margin-left: -200px;
+			left: 50%;
+			padding: 10px 10px 20px 10px;
+			top: 20%;
+			text-align: justify;
+			font-size:12px;
+		}
+		.box.b {
+			-webkit-animation: b 1s ease-out;
+		}
+		.box.z {
+			-webkit-animation z 1s ease-out;
+		}
+		#registerbox {
+			display: none;
+		}
+		#loginbox img{
+			max-width:100%;
+		}
+		#logininner {
+			width: 30em;
+			height: 20em;
+			position: relative;
+		}
+		#infocol {
+			width: 50%;
+			float: left;
+			position: relative;
+		}
+		#formcontainer {
+			padding: 0;
+			width: 80%;
+			position: relative;
+		}
+		#piccol {
+			width: 50%;
+			float: right;
+			position: relative;
+		}
+		#loginimg {
+			width: 75%;
+			margin-top: 20%;
+		}
+		#spinner { display: none; }
+		#forgetpw a{
+			font-size: 9px;
+			margin-top: -20px;
+			position: absolute;
+		}
+		#forgetpw a:hover {
+			color: #00f;
+		}
+		#fav-indicator {
+			display: none;
+			position: fixed;
+			z-index: 999;
+			height: 50px;
+			width: 50px; 
+			right: 20px;
+			top: 20px;
+		}
+		#loginbox a.bluelink{
+			color:#00F;
+			cursor: pointer;
+		}
+		#loginbox p.block1{
+			margin:7px 0;
+			width:347px;
+		}
+		#errormsg {
+			position: relative;
+			color: red;
+			text-align: center;
+		}
+		input {
+			max-width: 100px;
+			-moz-box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000,-4px 4px #000,-5px 5px #000,-6px 6px #000;
+			-webkit-box-shadow: -1px 1px black,-2px 2px black,-3px 3px black,-4px 4px black,-5px 5px black,-6px 6px black;
+			box-shadow: -1px 1px black,-2px 2px black,-3px 3px black,-4px 4px black,-5px 5px black,-6px 6px black;
+			border: 1px solid;
+			margin-left:10px;
+		}
+		#regEmailInput {
+			max-width: 200px;
+			width: 200px;
+		}
+		label {
+			width: 90px;
+			display: inline-block;
+		}
+		#remembermeInput {
+			margin-top: 0; margin-left: 0;
+		}
+		#loginbox form p{
+			margin-top:0;
+			margin-bottom:5px;
+		}
+		#loginbox form p:nth-child(2){
+			margin-top:5px;
+		}
+		#loginbox .close {
+			float:right;
+		}
+
+		#big-image{font-size:20px;text-align: left; text-justify: newspaper;    color:#000}
+		#memelogo { position: fixed; z-index: 999; bottom: 30px; right: 80px; }
+		.sublogo { font-family: Monaco, "Courier New", Courier, monospace; }
+		#toplogo{position: fixed;display:none;
+			top: 0;
+			left: 0;}
+			#big-image {cursor:url('http://dump.fm/static/img/thumbs/heartfaved.gif'), pointer}
+			</style>
     <script>jQuery(initLogin)</script>
   </head>
   <body>
 
 
       $if(user_nick)$
-<!--          
-               <div id="loginbox">
-       <img src="http://wiki.bennington.edu/mediawiki/images/9/9e/Dumplogo.gif"><br>
-          <p> this is dump.fm, the first ever real-time image sharing website. behind me is a fullscreen feed of whats currently going on. 
-           if you're a member of the club, sign in below. if not feel free to <a href="#" onclick="jQuery('#loginbox').hide(); return false;">close this window</a> and enjoy the sick pix.</p>
-             <form onsubmit="login(); return false;">
-             <p>username : <input id="nickInput"></p>
-             <p>password : <input id="passwordInput" type="password"></p>
-           <p>
-                remember me? <input id="remembermeInput" type="checkbox" checked="true"> <input type="submit" value="LOGIN"></p>
-
-               <img id="spinner" src="/static/img/spinner.gif">
-             </form>
-         <div id="errormsg"></div>
-         <div id="forgetpw"><a href="$domain$/reset">forgot password?</a></div>
-          <a href="/chat"id="toplogo"><img src="http://wiki.bennington.edu/mediawiki/images/9/9e/Dumplogo.gif"></a> <img src="http://dump.fm/static/img/thumbs/heartfaved.gif" id="fav-indicator">
-	</div>
--->
       $else$
-         <div id="loginbox">
-       <img src="http://wiki.bennington.edu/mediawiki/images/9/9e/Dumplogo.gif"><br>
-          <p> this is dump.fm, the first ever real-time image sharing website. behind me is a fullscreen feed of whats currently going on. 
-           if you're a member of the club, sign in bellow. if not feel free to <a href="#" onclick="jQuery('#loginbox').hide(); return false;">close this window</a> and enjoy the sick pix.</p>
-             <form onsubmit="login(); return false;">
-             <p>username : <input id="nickInput"></p>
-             <p>password : <input id="passwordInput" type="password"></p>
-           <p>
-                remember me? <input id="remembermeInput" type="checkbox" checked="true"> <input type="submit" value="LOGIN"></p>
+			<div id="loginbox" class="box b"> <a href="#" class="close"onclick="jQuery('#loginbox').fadeOut(); return false;">x</a>
+				<img src="http://dump.fm/static/dumplogo.png"><br>
+				<p class="block1">
+					this is dump.fm, the first ever real-time image sharing website.
+					behind this is a fullscreen feed of whats currently being posted.
+					<a href="/register" class="bluelink" id="reglink">Register</a> to join the club.
+					<form onsubmit="login(); return false;" class="log-in">
+						<p>username <input id="nickInput"></p>
+						<p>password <input id="passwordInput" type="password"></p>
+						<p>
+							remember me? <input id="remembermeInput" type="checkbox" checked="true"> <input type="submit" value="LOGIN"></p>
+							<img id="spinner" src="/static/img/spinner.gif">
+						</form>
+						<div id="errormsg"></div>
+						<div id="forgetpw"><a href="$domain$/reset">forgot password?</a></div>
+					</div>
 
-               <img id="spinner" src="/static/img/spinner.gif">
-             </form>
-         <div id="errormsg"></div>
-         <div id="forgetpw"><a href="$domain$/reset">forgot password?</a></div>
-	</div>
+				</div>
+			<div id="registerbox" class="box">
+				<a href="/"><img src="/static/img/dumppixellarge3.png"></a>
+				<p>
+				<label style="text-align:left;margin-bottom:-8px;">username</label>
+				<input type="text" class="field" id="regNickInput" />
+				</p><p>
+				<label style="text-align:left;margin-bottom:-8px;">password</label>
+				<input type="password" class="field" id="regPasswordInput" />
+				</p><p>
+				<label style="text-align:left;margin-bottom:-8px;">password2x</label>
+				<input type="password" class="field" id="regPasswordInput2" />
+				</p><p>
+				<label style="text-align:left;margin-bottom:-8px;">email</label>
+				<input type="text" class="field" id="regEmailInput" />
+				</p><p>
+				<input type="submit" class="submit" id="submit" value="Register!" />
+				</p>
+			</div>
       $endif$
 
     <div id="big-image"></div>
     <script>
-      initFullscreen()
-    </script>
+			function choice(a) { return a[Math.floor(Math.random()*a.length)] }
+			var urls = [
+				"http://dumpfm.s3.amazonaws.com/images/20100601/1275428508049-dumpfm-foot-oie_oie_overlay-1.gif",
+				"http://dumpfm.s3.amazonaws.com/images/20100928/1285728674225-dumpfm-timb-running.unicorn.gif",
+				"http://dumpfm.s3.amazonaws.com/images/20100726/1280119193796-dumpfm-enso-human-condition.gif",
+				"http://dumpfm.s3.amazonaws.com/images/20100521/1274415795577-dumpfm-ucnv-mx.gif",
+				"http://dump.fm/images/replaced/20100912/crabmonster.gif",
+				"http://dump.fm/images/20110927/1317105622918-dumpfm-peachfist-test8scam.gif",
+				"http://dump.fm/images/20110323/1300915179773-dumpfm-blingscience-fishtank.gif",
+				"http://dump.fm/images/20110418/1303108538834-dumpfm-LAVARLAMAR-lettuce_lavarlamar.gif",
+				"http://i.asdf.us/im/84/gradient_horse_1318306378_1322355741_ryz_1337322355_ryz.gif",
+				"http://dumpfm.s3.amazonaws.com/images/20110724/1311552093462-dumpfm-hologrampa-1291586335941-dumpfm-jeeeelings-cat_face_wink_hologrampa-lettuce.gif",
+				"http://i.asdf.us/im/be/tt7620731fltt_1315431978.gif"
+			]
+    	document.getElementById("big-image").innerHTML = "<img src='" + choice(urls) + "'>"
+			initFullscreen()
+      jQuery(startChatUpdater)
+			jQuery("#reglink").click(function(e){
+				e.preventDefault();
+				jQuery("#loginbox").hide();
+				jQuery("#registerbox").show().addClass("b");
+				initRegister()
+				return false;
+			});
+      $if(user_nick)$
+      $else$
+			$endif$
+		</script>
     $google_analytics()$
   </body>
 </html>
-- 
cgit v1.2.3-70-g09d2