diff options
Diffstat (limited to 'template/fullscreen.st')
| -rw-r--r-- | template/fullscreen.st | 345 |
1 files changed, 207 insertions, 138 deletions
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> |