Ailur-Archives
/
burgernotes-web
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

meow :3

This commit is contained in:
maaa 2024-06-21 17:49:44 +02:00
parent 73628f3b2c
commit e6e6ce6f71
7 changed files with 112 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -36,7 +36,7 @@
<div class="feature black"> <div class="feature black">
<h1>For your device.</h1> <h1>For your device.</h1>
<p>Burgernotes features a simple, yet powerful user interface.</p> <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>
<div class="feature" style="background-color: rgba(0, 0, 0, 0); margin-bottom: 0;"> <div class="feature" style="background-color: rgba(0, 0, 0, 0); margin-bottom: 0;">

13
login/index.html
View File

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

14
signup/index.html
View File

@ -15,15 +15,15 @@
<p class="credit">Image by perga (@pergagreen on discord)</p> <p class="credit">Image by perga (@pergagreen on discord)</p>
<img src="/static/img/background.jpg" class="background" alt=""> <img src="/static/img/background.jpg" class="background" alt="">
<div class="inoutdiv"> <div class="inoutdiv">
<h2 class="w300">Signup</h2> <h2>Create a Burgernotes Account</h2>
<p>Signup for a Burgernotes account</p> <p>Get started by picking a username and password</p>
<p id="statusBox"></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"> <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> <input id="passwordBox" type="password" placeholder="Password"><br>
<button id="signupButton">Signup</button><br><br> <button id="signupButton">Create account</button><button id="opButton" class="nonimportant">Already have an account</button><br><br>
<p>Already have an account? If so, <a href="/login/">Login</a> instead!</p> <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>
<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>
<a href="/privacy/">Privacy &amp; Terms</a> <a href="/privacy/">Privacy &amp; Terms</a>
</div> </div>
<script type="text/javascript" src="/static/js/signup.js"></script> <script type="text/javascript" src="/static/js/signup.js"></script>

82
static/css/style.css
View File

@ -9,6 +9,11 @@
--text-color: #000000; --text-color: #000000;
--border-color: #dadada; --border-color: #dadada;
--theme-color: #1c71d8; --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; --theme-text-color: #ffffff;
--exit-color: #e9e9e9; --exit-color: #e9e9e9;
--session-color: #f4f4f4; --session-color: #f4f4f4;
@ -30,6 +35,11 @@
--text-color: #ffffff; --text-color: #ffffff;
--border-color: #393b3d; --border-color: #393b3d;
--theme-color: #3584e4; --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; --theme-text-color: #ffffff;
--exit-color: #454649; --exit-color: #454649;
--session-color: #2d2f31; --session-color: #2d2f31;
@ -571,11 +581,16 @@ iframe#markdown {
/* Sign up/log in div */ /* Sign up/log in div */
.inoutdiv { .inoutdiv {
border-radius: 8px; left: 50%;
margin: 10%; top: 50%;
padding: 30px; transform: translate(-50%, -50%);
border: solid 1px var(--border-color); position: fixed;
background-color: var(--bar); min-width: 585px;
height: 270px;
max-height: 270px;
border-radius: 16px;
padding: 35px;
background-color: var(--portal-background-color);
} }
.inoutdiv h2 { .inoutdiv h2 {
@ -593,8 +608,14 @@ iframe#markdown {
border: solid; border: solid;
border-color: var(--border-color); border-color: var(--border-color);
border-width: 1px; border-width: 1px;
border-radius: 25px; border-radius: 6px;
min-width: 20px;
outline: 0.125s
}
.inoutdiv input:focus {
outline: none;
border-color: var(--hover-theme-color)
} }
.inoutdiv button { .inoutdiv button {
@ -609,9 +630,28 @@ iframe#markdown {
border-radius: 25px; border-radius: 25px;
font-size: 14px; 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 { .inoutdiv a {
color: grey; color: grey;
text-align: center; text-align: center;
@ -744,6 +784,18 @@ iframe#markdown {
text-decoration: none; text-decoration: none;
background-color: var(--theme-color); background-color: var(--theme-color);
border-radius: 25px; 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 { .mainDiv .burgerText {
@ -768,6 +820,20 @@ iframe#markdown {
overflow-x: auto; 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 { .mainDiv .green {
background-color: #ebffeb; background-color: #ebffeb;
} }

BIN
static/img/background.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 MiB

After

Width:  |  Height:  |  Size: 182 KiB

14
static/js/login.js
View File

@ -21,6 +21,7 @@ let statusBox = document.getElementById("statusBox")
let signupButton = document.getElementById("signupButton") let signupButton = document.getElementById("signupButton")
let inputNameBox = document.getElementById("inputNameBox") let inputNameBox = document.getElementById("inputNameBox")
let backButton = document.getElementById("backButton") let backButton = document.getElementById("backButton")
let opButton = document.getElementById("opButton")
usernameBox.classList.remove("hidden") usernameBox.classList.remove("hidden")
inputNameBox.innerText = "Username:" inputNameBox.innerText = "Username:"
@ -32,13 +33,15 @@ function showInput(inputType) {
usernameBox.classList.remove("hidden") usernameBox.classList.remove("hidden")
passwordBox.classList.add("hidden") passwordBox.classList.add("hidden")
backButton.classList.add("hidden") backButton.classList.add("hidden")
opButton.classList.remove("hidden")
inputNameBox.innerText = "Username:" inputNameBox.innerText = "Username:"
statusBox.innerText = "Login to your Burgernotes account!" statusBox.innerText = "Use your Burgernotes account"
currentInputType = 0 currentInputType = 0
} else if (inputType === 1) { } else if (inputType === 1) {
usernameBox.classList.add("hidden") usernameBox.classList.add("hidden")
passwordBox.classList.remove("hidden") passwordBox.classList.remove("hidden")
backButton.classList.remove("hidden") backButton.classList.remove("hidden")
opButton.classList.add("hidden")
inputNameBox.innerText = "Password:" inputNameBox.innerText = "Password:"
currentInputType = 1 currentInputType = 1
} else if (inputType === 2) { } else if (inputType === 2) {
@ -47,6 +50,7 @@ function showInput(inputType) {
signupButton.classList.add("hidden") signupButton.classList.add("hidden")
backButton.classList.add("hidden") backButton.classList.add("hidden")
inputNameBox.classList.add("hidden") inputNameBox.classList.add("hidden")
opButton.classList.add("hidden")
inputNameBox.innerText = "Password:" inputNameBox.innerText = "Password:"
currentInputType = 2 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 + ". " document.getElementById("homeserver").innerText = "Your homeserver is: " + remote + ". "
}); });
opButton.addEventListener("click", () => {
window.location.href = "/signup"
});
signupButton.addEventListener("click", () => { signupButton.addEventListener("click", () => {
if (passwordBox.classList.contains("hidden")) { if (passwordBox.classList.contains("hidden")) {
if (usernameBox.value === "") { if (usernameBox.value === "") {
statusBox.innerText = "A username is required!" statusBox.innerText = "Username required!"
return return
} else { } else {
statusBox.innerText = "Welcome back, " + usernameBox.value + "!" statusBox.innerText = "Welcome back, " + usernameBox.value + "!"

19
static/js/signup.js
View File

@ -19,43 +19,50 @@ let usernameBox = document.getElementById("usernameBox")
let passwordBox = document.getElementById("passwordBox") let passwordBox = document.getElementById("passwordBox")
let statusBox = document.getElementById("statusBox") let statusBox = document.getElementById("statusBox")
let signupButton = document.getElementById("signupButton") let signupButton = document.getElementById("signupButton")
let opButton = document.getElementById("opButton")
function showElements(yesorno) { function showElements(yesorno) {
if (!yesorno) { if (!yesorno) {
usernameBox.classList.add("hidden") usernameBox.classList.add("hidden")
passwordBox.classList.add("hidden") passwordBox.classList.add("hidden")
signupButton.classList.add("hidden") signupButton.classList.add("hidden")
opButton.classList.add("hidden")
} }
else { else {
usernameBox.classList.remove("hidden") usernameBox.classList.remove("hidden")
passwordBox.classList.remove("hidden") passwordBox.classList.remove("hidden")
signupButton.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 + ". " document.getElementById("homeserver").innerText = "Your homeserver is: " + remote + ". "
}); });
opButton.addEventListener("click", () => {
window.location.href = "/login"
});
signupButton.addEventListener("click", () => { signupButton.addEventListener("click", () => {
async function doStuff() { async function doStuff() {
let username = usernameBox.value let username = usernameBox.value
let password = passwordBox.value let password = passwordBox.value
if (username === "") { if (username === "") {
statusBox.innerText = "A username is required!" statusBox.innerText = "Username required ⚠️"
return return
} }
if ((username).length > 20) { if ((username).length > 20) {
statusBox.innerText = "Username cannot be more than 20 characters!" statusBox.innerText = "Username cannot be more than 20 characters ⚠️"
return return
} }
if (password === "") { if (password === "") {
statusBox.innerText = "A password is required!" statusBox.innerText = "Password required ⚠️"
return return
} }
if ((password).length < 8) { if ((password).length < 8) {
statusBox.innerText = "8 or more characters are required!" statusBox.innerText = "Password must be at least 8 characters ⚠️"
return return
} }
@ -98,7 +105,7 @@ signupButton.addEventListener("click", () => {
showElements(true) showElements(true)
} }
else { else {
statusBox.innerText = "Something went wrong!" statusBox.innerText = "Something went wrong! (error code: " + response.status + ")"
showElements(true) showElements(true)
} }
} }