meow :3

2024-06-21 17:49:44 +02:00 · 2024-06-21 17:49:44 +02:00 · e6e6ce6f71
parent 73628f3b2c
commit e6e6ce6f71
7 changed files with 112 additions and 32 deletions
--- a/index.html
+++ b/index.html
@ -36,7 +36,7 @@
        <div class="feature black">
            <h1>For your device.</h1>
            <p>Burgernotes features a simple, yet powerful user interface.</p>
-            <p>We support many devices, including Windows, macOS, Linux + iOS and Android.</p>
+            <p>We support many devices, including Windows, macOS, Linux, ChromeOS + iOS and Android.</p>
        </div>

        <div class="feature" style="background-color: rgba(0, 0, 0, 0); margin-bottom: 0;">
--- a/login/index.html
+++ b/login/index.html
@ -2,7 +2,7 @@
 <html lang="en">

 <head>
-    <title>Login - Burgernotes</title>
+    <title>Sign in - Burgernotes</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@ -15,17 +15,16 @@
    <p class="credit"></p>
    <img src="/static/img/background.jpg" class="background" alt="">
    <div class="inoutdiv">
-        <h2>Login</h2>
+        <h2>Sign in</h2>
        <p id="statusBox"></p>
        <span id="inputNameBox" style="margin-right: 10px;color: var(--text-color);"></span>
        <input id="usernameBox" class="hidden" type="text" placeholder="Enter your username">
        <input id="passwordBox" class="hidden" type="password" placeholder="Enter your password">
        <button id="signupButton">Next</button>
-        <button id="backButton" class="hidden">Back</button>
-        <br>
-        <br>
-        <p>Don't have an account? If so, <a href="/signup/">Create one here!</a></p>
-        <div style="display: flex;"><p id="homeserver">Your homeserver is loading... </p><div style="display: flex;flex-direction: column;justify-content: center;"><a href="/homeserver">Change</a></div></div>
+        <button id="backButton" class="hidden nonimportant">Back</button>
+        <button id="opButton" class="nonimportant">Create account</button>
+        <br><br><br><br>
+        <div style="display: flex;"><p class="hidden" id="homeserver">Your homeserver is loading... </p><div style="display: flex;flex-direction: column;justify-content: center;"><a class="hidden" href="/homeserver">Change</a></div></div>
        <a href="/privacy/">Privacy &amp; Terms</a>
    </div>

--- a/signup/index.html
+++ b/signup/index.html
@ -15,15 +15,15 @@
    <p class="credit">Image by perga (@pergagreen on discord)</p>
    <img src="/static/img/background.jpg" class="background" alt="">
    <div class="inoutdiv">
-        <h2 class="w300">Signup</h2>
-        <p>Signup for a Burgernotes account</p>
-        <p id="statusBox"></p>
+        <h2>Create a Burgernotes Account</h2>
+        <p>Get started by picking a username and password</p>
+        <p style="color: #b3261e; font-size: 14px; margin-bottom: 2px; margin-top: 1px;" id="statusBox"></p>
+        <span id="inputNameBox" style="margin-right: 10px;color: var(--text-color);">Username:</span>
        <input id="usernameBox" type="text" placeholder="Username">
+        <span id="inputNameBox" style="margin-right: 13px;color: var(--text-color);">Password: </span>
        <input id="passwordBox" type="password" placeholder="Password"><br>
-        <button id="signupButton">Signup</button><br><br>
-        <p>Already have an account? If so, <a href="/login/">Login</a> instead!</p>
-        <p>Please note that it's impossible to reset your password, do not forget it!</p>
-        <div style="display: flex;"><p id="homeserver">Your homeserver is loading... </p><div style="display: flex;flex-direction: column;justify-content: center;"><a href="/homeserver">Change</a></div></div>
+        <button id="signupButton">Create account</button><button id="opButton" class="nonimportant">Already have an account</button><br><br>
+        <div style="display: flex;"><p class="hidden" id="homeserver">Your homeserver is loading... </p><div style="display: flex;flex-direction: column;justify-content: center;"><a class="hidden" href="/homeserver">Change</a></div></div>
        <a href="/privacy/">Privacy &amp; Terms</a>
    </div>
    <script type="text/javascript" src="/static/js/signup.js"></script>
--- a/static/css/style.css
+++ b/static/css/style.css
@ -9,6 +9,11 @@
    --text-color: #000000;
    --border-color: #dadada;
    --theme-color: #1c71d8;
+    --hover-theme-color: #4990e7;
+    --nonimporant-theme-color: #EBEBEB;
+    --hover-nonimportant-theme-color: #dbdbdb; 
+    --nonimportant-text-color: #000;
+    --portal-background-color: #FAFAFA;
    --theme-text-color: #ffffff;
    --exit-color: #e9e9e9;
    --session-color: #f4f4f4;
@ -30,6 +35,11 @@
        --text-color: #ffffff;
        --border-color: #393b3d;
        --theme-color: #3584e4;
+        --hover-theme-color: #4990e7;
+        --nonimporant-theme-color: #4A4A4A;
+        --hover-nonimportant-theme-color: #595959; 
+        --nonimportant-text-color: #fff;
+        --portal-background-color: #242424;
        --theme-text-color: #ffffff;
        --exit-color: #454649;
        --session-color: #2d2f31;
@ -571,11 +581,16 @@ iframe#markdown {
 /* Sign up/log in div */

 .inoutdiv {
-    border-radius: 8px;
-    margin: 10%;
-    padding: 30px;
-    border: solid 1px var(--border-color);
-    background-color: var(--bar);
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    position: fixed;
+    min-width: 585px;
+    height: 270px;
+    max-height: 270px;
+    border-radius: 16px;
+    padding: 35px;
+    background-color: var(--portal-background-color);
 }

 .inoutdiv h2 {
@ -593,8 +608,14 @@ iframe#markdown {
    border: solid;
    border-color: var(--border-color);
    border-width: 1px;
-    border-radius: 25px;
-    min-width: 20px;
+    border-radius: 6px;
+
+    outline: 0.125s
+}
+
+.inoutdiv input:focus {
+    outline: none;
+    border-color: var(--hover-theme-color)
 }

 .inoutdiv button {
@ -609,9 +630,28 @@ iframe#markdown {
    border-radius: 25px;

    font-size: 14px;
-
+    transition: 0.125s;
 }

+.inoutdiv button:hover {
+    background-color: var(--hover-theme-color);
+}
+
+@media (prefers-reduced-motion) {
+    .inoutdiv button {
+        transition: none !important;
+    }
+}  
+
+.inoutdiv .nonimportant {
+    background-color: var(--nonimporant-theme-color);
+    color: var(--nonimportant-text-color)
+}
+.inoutdiv .nonimportant:hover {
+    background-color: var(--hover-nonimportant-theme-color);
+}
+
+
 .inoutdiv a {
    color: grey;
    text-align: center;
@ -744,6 +784,18 @@ iframe#markdown {
    text-decoration: none;
    background-color: var(--theme-color);
    border-radius: 25px;
+    cursor: pointer;
+    transition: 0.125s;
+}
+
+.mainDiv a:hover {
+    background-color: var(--hover-theme-color);
+}
+
+@media (prefers-reduced-motion) {
+    .mainDiv a {
+        transition: none !important;
+    }
 }  

 .mainDiv .burgerText {
@ -768,6 +820,20 @@ iframe#markdown {
    overflow-x: auto;
 }

+@media only screen and (max-width: 750px) {
+    .mainDiv .feature {
+        width: 80%;
+        margin-left: 7.5%;
+    }
+}
+
+@media only screen and (max-width: 750px) {
+    .mainDiv .feature {
+        width: 80%;
+        margin-left: 7.5%;
+    }
+}
+
 .mainDiv .green {
    background-color: #ebffeb;
 }
--- a/static/img/background.jpg
+++ b/static/img/background.jpg
--- a/static/js/login.js
+++ b/static/js/login.js
@ -21,6 +21,7 @@ let statusBox = document.getElementById("statusBox")
 let signupButton = document.getElementById("signupButton")
 let inputNameBox = document.getElementById("inputNameBox")
 let backButton = document.getElementById("backButton")
+let opButton = document.getElementById("opButton")

 usernameBox.classList.remove("hidden")
 inputNameBox.innerText = "Username:"
@ -32,13 +33,15 @@ function showInput(inputType) {
        usernameBox.classList.remove("hidden")
        passwordBox.classList.add("hidden")
        backButton.classList.add("hidden")
+        opButton.classList.remove("hidden")
        inputNameBox.innerText = "Username:"
-        statusBox.innerText = "Login to your Burgernotes account!"
+        statusBox.innerText = "Use your Burgernotes account"
        currentInputType = 0
    } else if (inputType === 1) {
        usernameBox.classList.add("hidden")
        passwordBox.classList.remove("hidden")
        backButton.classList.remove("hidden")
+        opButton.classList.add("hidden")
        inputNameBox.innerText = "Password:"
        currentInputType = 1
    } else if (inputType === 2) {
@ -47,6 +50,7 @@ function showInput(inputType) {
        signupButton.classList.add("hidden")
        backButton.classList.add("hidden")
        inputNameBox.classList.add("hidden")
+        opButton.classList.add("hidden")
        inputNameBox.innerText = "Password:"
        currentInputType = 2
    }
@ -71,14 +75,18 @@ function showElements(yesorno) {
    }
 }

-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("homeserver").innerText = "Your homeserver is: " + remote + ". "
 });

+opButton.addEventListener("click", () => {
+    window.location.href = "/signup"
+});
+
 signupButton.addEventListener("click", () => {
    if (passwordBox.classList.contains("hidden")) {
        if (usernameBox.value === "") {
-            statusBox.innerText = "A username is required!"
+            statusBox.innerText = "Username required!"
            return
        } else {
            statusBox.innerText = "Welcome back, " + usernameBox.value + "!"
--- a/static/js/signup.js
+++ b/static/js/signup.js
@ -19,43 +19,50 @@ let usernameBox = document.getElementById("usernameBox")
 let passwordBox = document.getElementById("passwordBox")
 let statusBox = document.getElementById("statusBox")
 let signupButton = document.getElementById("signupButton")
+let opButton = document.getElementById("opButton")

 function showElements(yesorno) {
    if (!yesorno) {
        usernameBox.classList.add("hidden")
        passwordBox.classList.add("hidden")
        signupButton.classList.add("hidden")
+        opButton.classList.add("hidden")
    }
    else {
        usernameBox.classList.remove("hidden")
        passwordBox.classList.remove("hidden")
        signupButton.classList.remove("hidden")
+        opButton.classList.remove("hidden")
    }
 }

-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("homeserver").innerText = "Your homeserver is: " + remote + ". "
 });

+opButton.addEventListener("click", () => {
+    window.location.href = "/login"
+});
+
 signupButton.addEventListener("click", () => {
    async function doStuff() {
        let username = usernameBox.value
        let password = passwordBox.value

        if (username === "") {
-            statusBox.innerText = "A username is required!"
+            statusBox.innerText = "Username required ⚠️"
            return
        }
        if ((username).length > 20) {
-            statusBox.innerText = "Username cannot be more than 20 characters!"
+            statusBox.innerText = "Username cannot be more than 20 characters ⚠️"
            return
        }
        if (password === "") {
-            statusBox.innerText = "A password is required!"
+            statusBox.innerText = "Password required ⚠️"
            return
        }
        if ((password).length < 8) {
-            statusBox.innerText = "8 or more characters are required!"
+            statusBox.innerText = "Password must be at least 8 characters ⚠️"
            return
        }

@ -98,7 +105,7 @@ signupButton.addEventListener("click", () => {
                        showElements(true)
                    }
                    else {
-                        statusBox.innerText = "Something went wrong!"
+                        statusBox.innerText = "Something went wrong! (error code: " + response.status + ")"
                        showElements(true)
                    }
                }