tabindex

1 files changed, 201 insertions, 201 deletions

diff --git a/template/fullscreen.st b/template/fullscreen.st
index cd3a3cf..38c1833 100644
--- a/template/fullscreen.st
+++ b/template/fullscreen.st
@@ -4,8 +4,8 @@
     <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$
+    $if(user_nick)$
+    $else$
     <script src="$domain$/static/js/register.js"></script>
     $endif$
     <script>
@@ -18,145 +18,145 @@
       }
     </script>
  
-		<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;
-		}
+    <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>
+    #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>
@@ -164,74 +164,74 @@
 
       $if(user_nick)$
       $else$
-			<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>
-
-				</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>
+      <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" tabindex="1"></p>
+            <p>password <input id="passwordInput" type="password" tabindex="2"></p>
+            <p>
+              remember me? <input id="remembermeInput" type="checkbox" checked="true" tabindex="4"> <input type="submit" value="LOGIN" tabindex="3"></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>
+        </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" tabindex="5" />
+        </p><p>
+        <label style="text-align:left;margin-bottom:-8px;">password</label>
+        <input type="password" class="field" id="regPasswordInput" tabindex="6" />
+        </p><p>
+        <label style="text-align:left;margin-bottom:-8px;">password2x</label>
+        <input type="password" class="field" id="regPasswordInput2" tabindex="7" />
+        </p><p>
+        <label style="text-align:left;margin-bottom:-8px;">email</label>
+        <input type="text" class="field" id="regEmailInput" tabindex="8" />
+        </p><p>
+        <input type="submit" class="submit" id="submit" value="Register!" tabindex="9" />
+        </p>
+      </div>
       $endif$
 
     <div id="big-image"></div>
     <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()
+      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;
-			});
+      jQuery("#reglink").click(function(e){
+        e.preventDefault();
+        jQuery("#loginbox").hide();
+        jQuery("#registerbox").show().addClass("b");
+        initRegister()
+        return false;
+      });
+      jQuery("#nickInput").focus();
       $if(user_nick)$
       $else$
-			$endif$
-		</script>
+      $endif$
+    </script>
     $google_analytics()$
   </body>
 </html>