F diff --git a/css/style.css b/css/style.css --- a/css/style.css +++ b/css/style.css#header {background: white;margin: 0;- padding: 1rem;+ padding: 0;+ height: 3rem;font-size: 2em;+ display: flex;+ align-items: stretch;+ user-select: none;+ -webkit-user-select: none;+ -ms-user-select: none;+ }++ #topmenu {+ font-size: 1.3rem;+ list-style-type: none;+ display: flex;+ margin: 0;+ padding: 0;+ }++ #topmenu > li {+ cursor: pointer;+ padding: 10px;+ }++ #topmenu > li:hover {+ background: #eee;}.logo {font-family: monospace;margin: 0;+ align-self: center;+ padding-left: 2rem;}#hero {#loginform {display: none;}+F diff --git a/index.php b/index.php --- a/index.php +++ b/index.php+ <?php+ session_start();+ ?><!DOCTYPE html><html><head><div class="vert2"><div id="header"><p class="logo">shady_file_upload</p>- </div>- <div id="page">+ <div style="flex: 1 0 0;"></div>+ <ul id="topmenu">+ <?php if (array_key_exists("username", $_SESSION)) { ?>++ <li><?php echo $_SESSION['username'];?></li>+ <li>Sign out</li>- <?php- session_start();- if (array_key_exists("username", $_SESSION)) {- echo "Welcome, $_SESSION[username]";- ?>+ <?php } else {?>++ <li onclick="showLogin(false)">Sign up</li>+ <li onclick="showLogin(true)">Log in</li>++ <?php }?>+ </ul>++ </div>- <a href="/php/logout.php">Log out</a>+ <div id="page"><?php- }- else {- require_once("loginregister.html");+ if (array_key_exists("username", $_SESSION)) {+ require_once("loggedin.php");+ } else {+ require_once("loginregister.php");}?></div><img src="svg/bottom.svg" class="bgbottom"></div>- <script src="main.js"></script></body><html>F diff --git a/loggedin.php b/loggedin.php new file mode 100644 --- /dev/null +++ b/loggedin.php+ <div>+ ALALALLALALLAl+ </div>+++F diff --git a/loginregister.html b/loginregister.html deleted file mode 100644 --- a/loginregister.html +++ /dev/null- <div id="hero" class="overlay">- <div id="arrows">- <img src="svg/arrow.svg" id="protoarrow" style="display: none">- </div>-- <div class="vcenter">- <p>file upload service</p>- <p class="big">that <span class="blue">just about works</span></p>- <p>most of the time</p>- </div>- </div>-- <div class="vcenter" id="signupform">- <form name="register_form" action="/php/register.php" method="post" onsubmit="return validate_hero_form()">- <h2>Get started</h2>- <div class="content">- <p>Username</p>- <input type="text" id="username" name="username">- <p id="username-length-error" class="hero_form_error" hidden>Please specify a username</p>-- <p>Email address</p>- <input type="text" id="email" name="email">- <p id="email-error" class="hero_form_error" hidden>Invalid email address</p>-- <p>Password</p>- <input type="password" id="password" name="password">- <p id="password-length-error" class="hero_form_error" hidden>Please provide a password</p>-- <p>Repeat Password</p>- <input type="password" id="password2" name="password2">- <p id="password-match-error" class="hero_form_error" hidden>Passwords didn't match</p>- <input type="submit" value="Sign up">- <p style="font-size: 1.1em;">Already have an account? <a href="#" onclick="showLogin(true)">Log in</a>- </div>- </form>- </div>-- <div class="vcenter" id="loginform">- <form name="login_form" action="/php/login.php" method="post" onsubmit="return validate_hero_login_form()">- <h2>Login</h2>- <div class="content">- <p>Username</p>- <input type="text" id="username" name="username">- <p id="username-length-error" class="hero_form_error" hidden>Please enter a username</p>- <p>Password</p>- <input type="password" id="password" name="password">- <input type="submit" value="Login">- <p style="font-size: 1.1em;">Don't have an account? <a href="#" onclick="showLogin(false)">Sign up</a>- </div>- </form>- </div>--F diff --git a/loginregister.js b/loginregister.js new file mode 100644 --- /dev/null +++ b/loginregister.js+ arrows = [];++ const minSpeed = 3;+ const maxSpeed = 8;+ const delay = 1500;+ const lifetime = 20000;++ function make_arrow() {+ const svg = document.getElementById("protoarrow").cloneNode();+ svg.style.left = Math.random() * 100 + '%';+ svg.style.display = 'block';+ document.getElementById('arrows').append(svg);+ const ob = {+ y: -800,+ svg: svg,+ speed: Math.random() * (maxSpeed - minSpeed) + minSpeed+ };+ arrows.push(ob);+ setTimeout(make_arrow, delay);+ setTimeout(() => {+ svg.remove();+ arrows.shift();+ }, lifetime);+ }++ function update() {+ for (const arrow of arrows) {+ arrow.y += arrow.speed;+ arrow.svg.style.bottom = arrow.y + 'px';+ }++ window.requestAnimationFrame(update);+ }++ make_arrow();+ update();+++++ function clear_hero_errors()+ {+ var errors = document.getElementsByClassName("hero_form_error");+ var i;+ for (i = 0; i < errors.length; i++)+ {+ errors[i].hidden = true;+ }+ }+ function validate_hero_login_form()+ {+ var username=document.forms["login_form"]["username"].value;+ var flag=true;+ clear_hero_errors();++ if(username.length==0)+ {+ document.getElementById("username-length-error").hidden=false;+ flag=false;+ }+ document.activeElement.blur();+ return flag;+ }+ function validate_hero_form()+ {+ var username=document.forms["register_form"]["username"].value;+ var email=document.forms["register_form"]["email"].value;+ var password=document.forms["register_form"]["password"].value;+ var password2=document.forms["register_form"]["password2"].value;++ var flag=true;+ clear_hero_errors();++ if(username.length==0)+ {+ document.getElementById("username-length-error").hidden=false;+ flag=false;+ }+ if(!email.match(/\S+@\S+/))+ {+ document.getElementById("email-error").hidden=false;+ flag=false;+ }+ if(password.length==0)+ {+ document.getElementById("password-length-error").hidden=false;+ flag=false;+ }+ if(password !== password2)+ {+ document.getElementById("password-match-error").hidden=false;+ flag=false;+ }+ document.activeElement.blur();+ return flag;++ }++ function showLogin(l) {+ document.getElementById("loginform").style.display = l ? "flex" : "none";+ document.getElementById("signupform").style.display = l ? "none" : "flex";+ }F diff --git a/loginregister.php b/loginregister.php new file mode 100644 --- /dev/null +++ b/loginregister.php+ <div id="hero" class="overlay">+ <div id="arrows">+ <img src="svg/arrow.svg" id="protoarrow" style="display: none">+ </div>++ <div class="vcenter">+ <p>file upload service</p>+ <p class="big">that <span class="blue">just about works</span></p>+ <p>most of the time</p>+ </div>+ </div>++ <div class="vcenter" id="signupform">+ <form name="register_form" action="/php/register.php" method="post" onsubmit="return validate_hero_form()">+ <h2>Get started</h2>+ <div class="content">+ <p>Username</p>+ <input type="text" id="username" name="username">+ <p id="username-length-error" class="hero_form_error" hidden>Please specify a username</p>++ <p>Email address</p>+ <input type="text" id="email" name="email">+ <p id="email-error" class="hero_form_error" hidden>Invalid email address</p>++ <p>Password</p>+ <input type="password" id="password" name="password">+ <p id="password-length-error" class="hero_form_error" hidden>Please provide a password</p>++ <p>Repeat Password</p>+ <input type="password" id="password2" name="password2">+ <p id="password-match-error" class="hero_form_error" hidden>Passwords didn't match</p>+ <input type="submit" value="Sign up">+ <p style="font-size: 1.1em;">Already have an account? <a href="#" onclick="showLogin(true)">Log in</a>+ </div>+ </form>+ </div>++ <div class="vcenter" id="loginform">+ <form name="login_form" action="/php/login.php" method="post" onsubmit="return validate_hero_login_form()">+ <h2>Login</h2>+ <div class="content">+ <p>Username</p>+ <input type="text" id="username" name="username">+ <p id="username-length-error" class="hero_form_error" hidden>Please enter a username</p>+ <p>Password</p>+ <input type="password" id="password" name="password">+ <input type="submit" value="Login">+ <p style="font-size: 1.1em;">Don't have an account? <a href="#" onclick="showLogin(false)">Sign up</a>+ </div>+ </form>+ </div>++ <script src="loginregister.js"></script>F diff --git a/main.js b/main.js deleted file mode 100644 --- a/main.js +++ /dev/null- arrows = [];-- const minSpeed = 3;- const maxSpeed = 8;- const delay = 1500;- const lifetime = 20000;-- function make_arrow() {- const svg = document.getElementById("protoarrow").cloneNode();- svg.style.left = Math.random() * 100 + '%';- svg.style.display = 'block';- document.getElementById('arrows').append(svg);- const ob = {- y: -800,- svg: svg,- speed: Math.random() * (maxSpeed - minSpeed) + minSpeed- };- arrows.push(ob);- setTimeout(make_arrow, delay);- setTimeout(() => {- svg.remove();- arrows.shift();- }, lifetime);- }-- function update() {- for (const arrow of arrows) {- arrow.y += arrow.speed;- arrow.svg.style.bottom = arrow.y + 'px';- }-- window.requestAnimationFrame(update);- }-- make_arrow();- update();----- function clear_hero_errors()- {- var errors = document.getElementsByClassName("hero_form_error");- var i;- for (i = 0; i < errors.length; i++)- {- errors[i].hidden = true;- }- }- function validate_hero_login_form()- {- var username=document.forms["login_form"]["username"].value;- var flag=true;- clear_hero_errors();-- if(username.length==0)- {- document.getElementById("username-length-error").hidden=false;- flag=false;- }- document.activeElement.blur();- return flag;- }- function validate_hero_form()- {- var username=document.forms["register_form"]["username"].value;- var email=document.forms["register_form"]["email"].value;- var password=document.forms["register_form"]["password"].value;- var password2=document.forms["register_form"]["password2"].value;-- var flag=true;- clear_hero_errors();-- if(username.length==0)- {- document.getElementById("username-length-error").hidden=false;- flag=false;- }- if(!email.match(/\S+@\S+/))- {- document.getElementById("email-error").hidden=false;- flag=false;- }- if(password.length==0)- {- document.getElementById("password-length-error").hidden=false;- flag=false;- }- if(password !== password2)- {- document.getElementById("password-match-error").hidden=false;- flag=false;- }- document.activeElement.blur();- return flag;-- }-- function showLogin(l) {- document.getElementById("loginform").style.display = l ? "flex" : "none";- document.getElementById("signupform").style.display = l ? "none" : "flex";- }