add register, login, logout views

2026-02-11 11:53:06 +01:00
parent 160a8bf020
commit 6bce72e866
13 changed files with 402 additions and 3 deletions
--- a/frontend/static/frontend/css/base.css
+++ b/frontend/static/frontend/css/base.css
@@ -2,3 +2,120 @@
    width: 100%;
    height: 100vh;
 }
+
+.auth-shell {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4rem 1.5rem;
+    background: radial-gradient(circle at top, #eef5ff, #f7f0ff 35%, #f7f6ff 65%, #fdf6ef);
+    color: #1f1f1f;
+    font-family: "JetBrains Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace;
+}
+
+.auth-card {
+    width: min(420px, 100%);
+    background: #ffffff;
+    border-radius: 24px;
+    padding: 2.5rem;
+    box-shadow: 0 24px 60px rgba(24, 31, 59, 0.12);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.auth-header {
+    margin-bottom: 2rem;
+}
+
+.auth-kicker {
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    font-size: 0.7rem;
+    color: #57606a;
+    margin-bottom: 0.75rem;
+}
+
+.auth-title {
+    font-size: 1.6rem;
+    margin-bottom: 0.5rem;
+    color: #111827;
+}
+
+.auth-subtitle {
+    font-size: 0.95rem;
+    color: #6b7280;
+}
+
+.auth-messages {
+    margin-bottom: 1.5rem;
+    background: #fff4f4;
+    border: 1px solid #ffccd2;
+    border-radius: 16px;
+    padding: 0.75rem 1rem;
+    color: #b42318;
+}
+
+.auth-message {
+    font-size: 0.85rem;
+    margin: 0.25rem 0;
+}
+
+.auth-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.auth-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+    font-size: 0.85rem;
+    color: #374151;
+}
+
+.auth-field input {
+    padding: 0.7rem 0.9rem;
+    border-radius: 12px;
+    border: 1px solid #d1d5db;
+    font-size: 0.95rem;
+    font-family: inherit;
+}
+
+.auth-field input:focus {
+    outline: 2px solid rgba(76, 110, 245, 0.35);
+    border-color: #6d7bf7;
+}
+
+.auth-submit {
+    margin-top: 0.5rem;
+    padding: 0.8rem 1rem;
+    border-radius: 999px;
+    border: none;
+    background: linear-gradient(130deg, #f97316, #facc15);
+    color: #1f2937;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.auth-submit:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 12px 25px rgba(249, 115, 22, 0.3);
+}
+
+.auth-footer {
+    margin-top: 1.5rem;
+    font-size: 0.85rem;
+    color: #6b7280;
+}
+
+.auth-footer a {
+    color: #111827;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.auth-footer a:hover {
+    text-decoration: underline;
+}