-
-
-
+
+
+
+
Privacy & Terms
diff --git a/signup/index.html b/signup/index.html
index f896d63..91e6d58 100644
--- a/signup/index.html
+++ b/signup/index.html
@@ -15,15 +15,15 @@
Login
+Sign in
- --
-
Don't have an account? If so, Create one here!
-Your homeserver is loading...
+
Your homeserver is loading...
Image by perga (@pergagreen on discord)
-
-
-
+
+
Privacy & Terms
diff --git a/static/css/style.css b/static/css/style.css
index 66f72c3..30e97c6 100644
--- 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,8 +784,20 @@ 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 {
width: 75%;
margin-left: 12.5%;
@@ -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;
}
diff --git a/static/img/background.jpg b/static/img/background.jpg
index 8e39fed..8c48ed4 100644
Binary files a/static/img/background.jpg and b/static/img/background.jpg differ
diff --git a/static/js/login.js b/static/js/login.js
index 9703f1b..f63d137 100644
--- 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 + "!"
diff --git a/static/js/signup.js b/static/js/signup.js
index 2474ffb..1d9842d 100644
--- 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)
}
}
Signup
-Signup for a Burgernotes account
- +Create a Burgernotes Account
+Get started by picking a username and password
+ + Username: + Password:-
-
Already have an account? If so, Login instead!
-Please note that it's impossible to reset your password, do not forget it!
-Your homeserver is loading...
+
Your homeserver is loading...