From 8ba2c35a306719932307ec5f99701101637e1fd2 Mon Sep 17 00:00:00 2001 From: Alex Vitkov Date: Fri, 29 Jan 2021 14:45:52 +0200 Subject: Menu bar, different .php pages for logged in/not logged in --- css/style.css | 28 ++++++++++++++- index.php | 35 +++++++++++------- loggedin.php | 6 ++++ loginregister.html | 53 ---------------------------- loginregister.js | 102 +++++++++++++++++++++++++++++++++++++++++++++++++++++ loginregister.php | 53 ++++++++++++++++++++++++++++ main.js | 102 ----------------------------------------------------- 7 files changed, 211 insertions(+), 168 deletions(-) create mode 100644 loggedin.php delete mode 100644 loginregister.html create mode 100644 loginregister.js create mode 100644 loginregister.php delete mode 100644 main.js diff --git a/css/style.css b/css/style.css index 18d4817..9296e87 100644 --- a/css/style.css +++ b/css/style.css @@ -23,13 +23,38 @@ body { #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 { @@ -199,3 +224,4 @@ input[type=submit]:hover { #loginform { display: none; } + diff --git a/index.php b/index.php index b42c5f2..21d56f0 100644 --- a/index.php +++ b/index.php @@ -1,3 +1,6 @@ + @@ -10,23 +13,32 @@
-
+
+
    + + +
    • +
  • Sign out
    • - + + +
  • Sign up
    • +
  • Log in
    • + + +
+ +
-Log out +
@@ -34,6 +46,5 @@
- diff --git a/loggedin.php b/loggedin.php new file mode 100644 index 0000000..884f4b9 --- /dev/null +++ b/loggedin.php @@ -0,0 +1,6 @@ +
+ ALALALLALALLAl +
+ + + diff --git a/loginregister.html b/loginregister.html deleted file mode 100644 index 2d87daf..0000000 --- a/loginregister.html +++ /dev/null @@ -1,53 +0,0 @@ -
-
- -
- -
-

file upload service

-

that just about works

-

most of the time

-
-
- -
-
-

Get started

-
-

Username

- - - -

Email address

- - - -

Password

- - - -

Repeat Password

- - - -

Already have an account? Log in -

-
-
- -
-
-

Login

-
-

Username

- - -

Password

- - -

Don't have an account? Sign up -

-
-
- - diff --git a/loginregister.js b/loginregister.js new file mode 100644 index 0000000..f3b6f9a --- /dev/null +++ b/loginregister.js @@ -0,0 +1,102 @@ +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"; +} diff --git a/loginregister.php b/loginregister.php new file mode 100644 index 0000000..8068b35 --- /dev/null +++ b/loginregister.php @@ -0,0 +1,53 @@ +
+
+ +
+ +
+

file upload service

+

that just about works

+

most of the time

+
+
+ +
+
+

Get started

+
+

Username

+ + + +

Email address

+ + + +

Password

+ + + +

Repeat Password

+ + + +

Already have an account? Log in +

+
+
+ +
+
+

Login

+
+

Username

+ + +

Password

+ + +

Don't have an account? Sign up +

+
+
+ + diff --git a/main.js b/main.js deleted file mode 100644 index f3b6f9a..0000000 --- a/main.js +++ /dev/null @@ -1,102 +0,0 @@ -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"; -} -- cgit v1.2.3