diff options
| author | Parker <contact@pkrm.dev> | 2024-06-24 16:24:09 -0500 |
|---|---|---|
| committer | Parker <contact@pkrm.dev> | 2024-06-24 16:24:09 -0500 |
| commit | 5b92454760a8af14bd1031e72024946f868d1de6 (patch) | |
| tree | f8384cbf0d142777d9bff341e13fd5882182908b /app/templates | |
| parent | 80a39d38bf829193c655a7320c86df2a3146db2a (diff) | |
Major overhaul + Bare bones web UI
Diffstat (limited to 'app/templates')
| -rw-r--r-- | app/templates/dashboard.html | 47 | ||||
| -rw-r--r-- | app/templates/login.html | 111 | ||||
| -rw-r--r-- | app/templates/signup.html | 111 |
3 files changed, 269 insertions, 0 deletions
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html new file mode 100644 index 0000000..554ec03 --- /dev/null +++ b/app/templates/dashboard.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>LinkLogger | Login</title> +</head> +<body> + <div> + <!-- Create a small box that will hold the text for the users api key, next to the box should be a regenerate button --> + <p>Your API Key: <span id="api-key">{{ api_key }}</span></p> + <button onclick="window.location.href='logout'">Logout</button> + </div> +</body> +</html> + +<style> + body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background-color: #2c3338; + } + + div { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + font-size: 25px; + color: #ccc; + } + + button { + display: block; + margin: 10px auto; + width: 200px; + border-radius: 5px; + padding: 15px; + color: #ccc; + background-color: #415eac; + border: none; + font-size: 17px; + cursor: pointer; + } +</style>
\ No newline at end of file diff --git a/app/templates/login.html b/app/templates/login.html new file mode 100644 index 0000000..25ce3b6 --- /dev/null +++ b/app/templates/login.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>LinkLogger | Login</title> +</head> +<body> + <div> + <p id="error">Incorrect username/password. Please try again.</p> + <form action="/login" method="POST"> + <input type="text" name="username" placeholder="Username" required> + <input type="password" name="password" placeholder="Password" required> + <button type="submit">Login</button> + </form> + <hr> + <p>Don't have an account? <a href="/signup">Create one now</a></p> + </div> +</body> +</html> + +<style> + body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background-color: #2c3338; + } + + div { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + } + + input { + display: block; + margin: 10px auto; + width: 300px; + border-radius: 5px; + padding: 15px; + color: #ccc; + background-color: #3b4148; + border: none; + font-size: 17px; + } + + button { + display: block; + margin: 10px auto; + width: 100%; + border-radius: 5px; + padding: 15px; + color: #ccc; + background-color: #415eac; + border: none; + font-size: 17px; + cursor: pointer; + } + + hr { + color: #606468; + } + + p { + color: #606468; + } + + #error { + font-size: 15px; + color: #f55757; + display: none; + } + + a { + color: #ccc; + text-decoration: none; + } + + a:hover { + text-decoration: underline; + } +</style> + +<script> + document.querySelector('form').addEventListener('submit', async function(event) { + // Prevent default form submission + event.preventDefault(); + + // Get form data + const formData = new FormData(this); + + console.log(formData) + + // Send POST request to /login containing form data + const response = await fetch('/login', { + method: 'POST', + body: formData + }); + + data = await response.json() + + if (data.status != "success") { + document.getElementById('error').style.display = 'block'; + } else { + window.location.href = '/dashboard'; + } + }); +</script>
\ No newline at end of file diff --git a/app/templates/signup.html b/app/templates/signup.html new file mode 100644 index 0000000..0d2aebd --- /dev/null +++ b/app/templates/signup.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>LinkLogger | Signup</title> +</head> +<body> + <div> + <p id="error">User already exists. Please try again</p> + <form action="/signup" method="POST"> + <input type="text" name="username" placeholder="Username" required> + <input type="password" name="password" placeholder="Password" required> + <button type="submit">Signup</button> + </form> + <hr> + <p>Already have an account? <a href="/login">Log in now</a></p> + </div> +</body> +</html> + +<style> + body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background-color: #2c3338; + } + + div { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + } + + input { + display: block; + margin: 10px auto; + width: 300px; + border-radius: 5px; + padding: 15px; + color: #ccc; + background-color: #3b4148; + border: none; + font-size: 17px; + } + + button { + display: block; + margin: 10px auto; + width: 100%; + border-radius: 5px; + padding: 15px; + color: #ccc; + background-color: #415eac; + border: none; + font-size: 17px; + cursor: pointer; + } + + hr { + color: #606468; + } + + p { + color: #606468; + } + + #error { + font-size: 15px; + color: #f55757; + display: none; + } + + a { + color: #ccc; + text-decoration: none; + } + + a:hover { + text-decoration: underline; + } +</style> + +<script> + document.querySelector('form').addEventListener('submit', async function(event) { + // Prevent default form submission + event.preventDefault(); + + // Get form data + const formData = new FormData(this); + + console.log(formData) + + // Send POST request to /signup containing form data + const response = await fetch('/signup', { + method: 'POST', + body: formData + }); + + data = await response.json() + + if (data.status != "success") { + document.getElementById('error').style.display = 'block'; + } else { + window.location.href = '/dashboard'; + } + }); +</script>
\ No newline at end of file |