Update static/login.html
Browse files- static/login.html +24 -18
static/login.html
CHANGED
|
@@ -5,22 +5,34 @@
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Login / Signup</title>
|
| 7 |
<style>
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 13 |
input { width: 100%; padding: .5rem; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; }
|
| 14 |
-
button { width: 100%; padding: .7rem; border: none; border-radius: 4px; color: white; background-color:
|
| 15 |
-
button:hover { background-color:
|
| 16 |
-
#signupBtn {
|
| 17 |
-
#
|
| 18 |
-
#message { margin-top: 1rem; font-weight: bold; }
|
| 19 |
</style>
|
| 20 |
</head>
|
| 21 |
<body>
|
| 22 |
<div class="container">
|
| 23 |
-
<h2>
|
| 24 |
<form id="loginForm">
|
| 25 |
<div class="form-group">
|
| 26 |
<label for="username">Username</label>
|
|
@@ -62,17 +74,13 @@
|
|
| 62 |
const data = await response.json();
|
| 63 |
localStorage.setItem('accessToken', data.access_token);
|
| 64 |
messageEl.style.color = 'green';
|
| 65 |
-
messageEl.textContent = 'Login successful!
|
| 66 |
-
// We no longer redirect, as the file is not on the server.
|
| 67 |
-
// The user will open it manually.
|
| 68 |
} else {
|
| 69 |
const errorData = await response.json();
|
| 70 |
-
messageEl.style.color = 'red';
|
| 71 |
messageEl.textContent = errorData.detail || 'Login failed.';
|
| 72 |
}
|
| 73 |
} catch (error) {
|
| 74 |
console.error('Login error:', error);
|
| 75 |
-
messageEl.style.color = 'red';
|
| 76 |
messageEl.textContent = 'An error occurred. Check console.';
|
| 77 |
}
|
| 78 |
});
|
|
@@ -99,12 +107,10 @@
|
|
| 99 |
messageEl.textContent = 'Signup successful! Please log in now.';
|
| 100 |
} else {
|
| 101 |
const errorData = await response.json();
|
| 102 |
-
messageEl.style.color = 'red';
|
| 103 |
messageEl.textContent = errorData.detail || 'Signup failed.';
|
| 104 |
}
|
| 105 |
} catch (error) {
|
| 106 |
console.error('Signup error:', error);
|
| 107 |
-
messageEl.style.color = 'red';
|
| 108 |
messageEl.textContent = 'An error occurred. Check console.';
|
| 109 |
}
|
| 110 |
});
|
|
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Login / Signup</title>
|
| 7 |
<style>
|
| 8 |
+
:root {
|
| 9 |
+
--bg-dark: #1C1C1E;
|
| 10 |
+
/* For the gradient, assuming --bg-dark is rgb(28, 28, 30) */
|
| 11 |
+
--bg-dark-rgb: 28, 28, 30;
|
| 12 |
+
--bg-content-area: #2C2C2E;
|
| 13 |
+
--bg-content-elements: #3A3A3C;
|
| 14 |
+
--text-primary: #FFFFFF;
|
| 15 |
+
--text-secondary: #EBEBF599;
|
| 16 |
+
--text-tertiary: #8A8A8E;
|
| 17 |
+
--accent-color-active: #FF9500; /* Or your specific orange like #E7753B */
|
| 18 |
+
--border-color: #38383A;
|
| 19 |
+
--button-bg: #4A4A4F;
|
| 20 |
+
}
|
| 21 |
+
body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #1C1C1E; }
|
| 22 |
+
.container { background: #2C2C2E; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 300px; }
|
| 23 |
+
h2 { text-align: center; color: var(--accent-color-active); }
|
| 24 |
+
.form-group { margin-bottom: 1rem; }
|
| 25 |
+
label { display: block; margin-bottom: .5rem; color: var(--text-primary); }
|
| 26 |
input { width: 100%; padding: .5rem; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; }
|
| 27 |
+
button { width: 100%; padding: .7rem; border: none; border-radius: 4px; color: white; background-color: var(--bg-content-elements); cursor: pointer; font-size: 1rem; }
|
| 28 |
+
button:hover { background-color: var(--accent-color-active); }
|
| 29 |
+
#signupBtn { margin-top: .5rem; }
|
| 30 |
+
#message { margin-top: 1rem; text-align: center; color: red; font-weight: bold; }
|
|
|
|
| 31 |
</style>
|
| 32 |
</head>
|
| 33 |
<body>
|
| 34 |
<div class="container">
|
| 35 |
+
<h2>Animex</h2>
|
| 36 |
<form id="loginForm">
|
| 37 |
<div class="form-group">
|
| 38 |
<label for="username">Username</label>
|
|
|
|
| 74 |
const data = await response.json();
|
| 75 |
localStorage.setItem('accessToken', data.access_token);
|
| 76 |
messageEl.style.color = 'green';
|
| 77 |
+
messageEl.textContent = 'Login successful! Redirecting...';
|
|
|
|
|
|
|
| 78 |
} else {
|
| 79 |
const errorData = await response.json();
|
|
|
|
| 80 |
messageEl.textContent = errorData.detail || 'Login failed.';
|
| 81 |
}
|
| 82 |
} catch (error) {
|
| 83 |
console.error('Login error:', error);
|
|
|
|
| 84 |
messageEl.textContent = 'An error occurred. Check console.';
|
| 85 |
}
|
| 86 |
});
|
|
|
|
| 107 |
messageEl.textContent = 'Signup successful! Please log in now.';
|
| 108 |
} else {
|
| 109 |
const errorData = await response.json();
|
|
|
|
| 110 |
messageEl.textContent = errorData.detail || 'Signup failed.';
|
| 111 |
}
|
| 112 |
} catch (error) {
|
| 113 |
console.error('Signup error:', error);
|
|
|
|
| 114 |
messageEl.textContent = 'An error occurred. Check console.';
|
| 115 |
}
|
| 116 |
});
|