From aa763b0f81f3cfd80342ad24b985df1750272fa8 Mon Sep 17 00:00:00 2001 From: Jon Ander Oribe Date: Sun, 18 Jan 2026 09:03:17 +0100 Subject: [PATCH] Redesign login page with improved UI and error display Revamps the login page layout and styles for a more modern, 'hacker' terminal look. Adds animated background effects, updates the login box and input styling, and enhances error messages with a new format. Also removes the tracked intercept.db file and ensures it is ignored in .gitignore. --- .gitignore | 1 + instance/intercept.db | Bin 94208 -> 0 bytes static/css/login.css | 137 ++++++++++++++++++++++++++++++++++-------- templates/login.html | 111 ++++++++++++++++++---------------- 4 files changed, 172 insertions(+), 77 deletions(-) delete mode 100644 instance/intercept.db diff --git a/.gitignore b/.gitignore index 6308bb9..973ec3b 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,4 @@ build/ uv.lock *.db *.sqlite3 +instance/intercept.db \ No newline at end of file diff --git a/instance/intercept.db b/instance/intercept.db deleted file mode 100644 index 6780b06d1d6326b7f8043e766cda32cbb312cb7f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 94208 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 L00JN|ss#QA;DMsl diff --git a/static/css/login.css b/static/css/login.css index 437e803..ca1da91 100644 --- a/static/css/login.css +++ b/static/css/login.css @@ -1,36 +1,123 @@ +/* Container Layout */ +.landing-overlay { + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + background: var(--bg-primary); + display: flex; + flex-direction: column; /* Stack logo, title, box vertically */ + align-items: center; + justify-content: center; + overflow: hidden; +} + +.landing-content { + position: relative; + z-index: 10; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +/* Background Effects */ +.landing-scanline { + position: absolute; + top: 0; left: 0; width: 100%; height: 2px; + background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent); + animation: scanlineMove 5s linear infinite; + opacity: 0.4; + z-index: 1; /* Behind content */ + pointer-events: none; +} + +@keyframes scanlineMove { + 0% { top: 0; } + 100% { top: 100%; } +} + +/* Typography */ +.landing-title { + font-family: 'JetBrains Mono', monospace; + font-size: 2.2rem; + font-weight: 700; + letter-spacing: 0.4em; + color: var(--text-primary); + margin: 20px 0 5px 0; + text-indent: 0.4em; + text-align: center; +} + +.landing-tagline { + font-family: 'JetBrains Mono', monospace; + color: var(--accent-cyan); + font-size: 0.9rem; + letter-spacing: 0.15em; + margin-bottom: 30px; +} + +/* The Login Box */ .login-box { - background: rgba(10, 10, 26, 0.9); - border: 1px solid var(--accent-cyan); + background: var(--bg-secondary); + border: 1px solid var(--border-color); padding: 30px; border-radius: 4px; - box-shadow: 0 0 20px rgba(0, 212, 255, 0.2); - width: 100%; - max-width: 400px; - margin-top: 20px; + width: 380px; + z-index: 20; + box-shadow: 0 0 40px rgba(0, 0, 0, 0.6), inset 0 0 20px var(--accent-cyan-dim); + box-sizing: border-box; /* Ensures padding doesn't hide inputs */ + display: flex; + flex-direction: column; } +/* Hacker Style Error */ +.flash-error { + font-family: 'JetBrains Mono', monospace; + font-size: 10px; + color: var(--accent-red); + background: rgba(239, 68, 68, 0.1); + border-left: 3px solid var(--accent-red); + padding: 10px; + margin-bottom: 20px; + display: flex; + gap: 10px; + text-transform: uppercase; + box-sizing: border-box; +} + +.error-prefix { font-weight: 700; opacity: 0.7; } + +/* Inputs */ .form-input { width: 100%; - background: #050510; - border: 1px solid #1a1a40; + background: var(--bg-primary); + border: 1px solid var(--border-color); color: var(--accent-cyan); padding: 12px; - margin: 10px 0; - font-family: 'JetBrains Mono', monospace; - outline: none; -} - -.form-input:focus { - border-color: var(--accent-green); - box-shadow: 0 0 10px rgba(0, 255, 136, 0.2); -} - -.flash-error { - color: var(--accent-red); - font-size: 11px; margin-bottom: 15px; - text-transform: uppercase; - border: 1px solid var(--accent-red); - padding: 8px; - background: rgba(255, 0, 0, 0.1); + font-family: 'JetBrains Mono', monospace; + font-size: 11px; + outline: none; + box-sizing: border-box; /* Crucial for visibility */ +} + +.landing-enter-btn { + width: 100%; + background: transparent; + border: 2px solid var(--accent-cyan); + color: var(--accent-cyan); + padding: 15px; + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + letter-spacing: 3px; + cursor: pointer; + transition: all 0.3s ease; + box-sizing: border-box; +} + +.landing-version { + margin-top: 25px; + font-family: 'JetBrains Mono', monospace; + font-size: 10px; + color: rgba(255, 255, 255, 0.3); + letter-spacing: 2px; } \ No newline at end of file diff --git a/templates/login.html b/templates/login.html index 1511fa7..2a24e6d 100644 --- a/templates/login.html +++ b/templates/login.html @@ -1,58 +1,65 @@ - - - + + + iNTERCEPT // Restricted Access - - - - -
-
- + + + + +
+
-

SECURE LOGIN

-

// Restricted Terminal Access

- - - -

SYSTEM AUTH v{{ version }}

+
+ -
+ +

SECURE LOGIN

+

// Restricted Terminal Access

+ + + +

SYSTEM AUTH v{{ version }}

- - \ No newline at end of file +
+ +