From 9f490381073e4165d16c81f3a23299ecb48cabda Mon Sep 17 00:00:00 2001
From: Erik <erik.nihlen@gmail.com>
Date: Fri, 10 Apr 2026 20:04:17 +0200
Subject: [PATCH] Redesign login page: AC logo, side-by-side fields, fading
 Alex time quotes

---
 static/login.html | 229 ++++++++++++++++++++++++++++++++++++----------
 1 file changed, 181 insertions(+), 48 deletions(-)

diff --git a/static/login.html b/static/login.html
index 5930e54f..c39e9ade 100644
--- a/static/login.html
+++ b/static/login.html
@@ -8,73 +8,115 @@
     body {
       min-height: 100vh;
       display: flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
       background: #0a0a0a;
       background-image:
-        radial-gradient(ellipse at 50% 30%, rgba(30, 20, 10, 0.8) 0%, transparent 70%),
+        radial-gradient(ellipse at 50% 35%, rgba(30, 20, 10, 0.9) 0%, transparent 60%),
         linear-gradient(180deg, #0a0806 0%, #12100a 50%, #0a0806 100%);
       font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
       color: #d4c9a8;
     }
-    .login-card {
-      width: 360px;
-      background: linear-gradient(180deg, #1a1610 0%, #0e0c08 100%);
-      border: 2px solid #8a7a44;
-      border-radius: 6px;
-      padding: 32px 28px;
-      box-shadow:
-        inset 0 1px 0 rgba(212, 175, 55, 0.1),
-        0 8px 32px rgba(0, 0, 0, 0.8),
-        0 0 60px rgba(138, 122, 68, 0.08);
+
+    .logo-container {
+      margin-bottom: 28px;
     }
-    .login-title {
+    .logo-container img {
+      display: block;
+      width: 380px;
+      height: auto;
+    }
+
+    .quote-container {
+      height: 44px;
+      margin-bottom: 24px;
       text-align: center;
-      margin-bottom: 6px;
-      font-size: 1.5rem;
-      color: #d4af37;
-      text-shadow: 0 1px 3px rgba(0,0,0,0.6);
+      width: 500px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .quote-text {
+      font-size: 0.8rem;
+      font-style: italic;
+      color: #8a7a5a;
+      line-height: 1.4;
+      opacity: 0;
+      transition: opacity 0.8s ease;
+    }
+    .quote-text.visible { opacity: 1; }
+    .quote-attribution {
+      display: block;
+      font-size: 0.6rem;
+      font-style: normal;
+      color: #5a4a34;
+      margin-top: 4px;
       letter-spacing: 1px;
     }
-    .login-subtitle {
-      text-align: center;
-      font-size: 0.8rem;
-      color: #8a7a5a;
-      margin-bottom: 24px;
+
+    .login-card {
+      width: 440px;
+      background: linear-gradient(180deg, #1a1610 0%, #0e0c08 100%);
+      border: 1px solid #5a4a28;
+      border-radius: 4px;
+      padding: 24px 28px 20px;
+      box-shadow:
+        inset 0 1px 0 rgba(212, 175, 55, 0.08),
+        0 8px 32px rgba(0, 0, 0, 0.8),
+        0 0 60px rgba(138, 122, 68, 0.06);
     }
-    .form-group {
+
+    .login-title {
+      text-align: center;
+      margin-bottom: 20px;
+      font-size: 0.75rem;
+      color: #8a7a5a;
+      text-transform: uppercase;
+      letter-spacing: 3px;
+    }
+
+    .form-row {
+      display: flex;
+      gap: 12px;
       margin-bottom: 16px;
     }
-    .form-group label {
+    .form-field {
+      flex: 1;
+    }
+    .form-field label {
       display: block;
-      font-size: 0.8rem;
-      color: #a09070;
-      margin-bottom: 4px;
+      font-size: 0.7rem;
+      color: #7a6a4a;
+      margin-bottom: 5px;
       text-transform: uppercase;
       letter-spacing: 1px;
     }
-    .form-group input {
+    .form-field input {
       width: 100%;
-      padding: 10px 12px;
-      font-size: 0.95rem;
+      padding: 9px 11px;
+      font-size: 0.9rem;
       font-family: inherit;
-      background: #0e0c08;
+      background: #080704;
       color: #d4c9a8;
-      border: 1px solid #5a4a24;
+      border: 1px solid #3a3018;
       border-radius: 3px;
       outline: none;
       transition: border-color 0.2s;
     }
-    .form-group input:focus {
+    .form-field input:focus {
       border-color: #d4af37;
-      box-shadow: 0 0 6px rgba(212, 175, 55, 0.15);
+      box-shadow: 0 0 6px rgba(212, 175, 55, 0.12);
     }
+    .form-field input::placeholder {
+      color: #3a3220;
+    }
+
     .login-btn {
       width: 100%;
       padding: 10px;
-      margin-top: 8px;
       font-family: inherit;
-      font-size: 1rem;
+      font-size: 0.85rem;
       font-weight: bold;
       color: #1a1610;
       background: linear-gradient(180deg, #d4af37 0%, #a08520 100%);
@@ -92,6 +134,7 @@
     .login-btn:active {
       background: linear-gradient(180deg, #a08520 0%, #8a7a44 100%);
     }
+
     .login-error {
       margin-top: 12px;
       padding: 8px;
@@ -103,36 +146,126 @@
       border-radius: 3px;
       display: none;
     }
+
     .login-footer {
-      margin-top: 20px;
+      margin-top: 16px;
       text-align: center;
-      font-size: 0.65rem;
-      color: #5a4a34;
+      font-size: 0.6rem;
+      color: #3a3220;
+      letter-spacing: 1px;
     }
   </style>
 </head>
 <body>
+  <div class="logo-container">
+    <img src="/icons/06001343.png" alt="Asheron's Call">
+  </div>
+
+  <div class="quote-container">
+    <div class="quote-text" id="quoteText"></div>
+  </div>
+
   <div class="login-card">
-    <h1 class="login-title">Dereth Tracker</h1>
-    <p class="login-subtitle">Mosswart Enjoyers Club</p>
+    <div class="login-title">Dereth Tracker</div>
 
     <form id="loginForm" onsubmit="return handleLogin(event)">
-      <div class="form-group">
-        <label for="username">Username</label>
-        <input type="text" id="username" name="username" autocomplete="username" autofocus required>
-      </div>
-      <div class="form-group">
-        <label for="password">Password</label>
-        <input type="password" id="password" name="password" autocomplete="current-password" required>
+      <div class="form-row">
+        <div class="form-field">
+          <label for="username">Username</label>
+          <input type="text" id="username" name="username" autocomplete="username" autofocus required>
+        </div>
+        <div class="form-field">
+          <label for="password">Password</label>
+          <input type="password" id="password" name="password" autocomplete="current-password" required>
+        </div>
       </div>
       <button type="submit" class="login-btn" id="loginBtn">Enter Dereth</button>
       <div class="login-error" id="loginError"></div>
     </form>
 
-    <div class="login-footer">Authorized personnel only</div>
+    <div class="login-footer">Mosswart Enjoyers Club</div>
   </div>
 
   <script>
+    const alexQuotes = [
+      "I don't run late. I glide fashionably through time.",
+      "Time is a flat circle\u2014and I'm still trying to find the starting point.",
+      "Being on time is like spotting a unicorn: rare, beautiful, and definitely not me.",
+      "Time zones are a social construct. I operate on instinct.",
+      "Every time I try to be early, time responds with traffic.",
+      "Time is an illusion. My ETA is performance art.",
+      "I treat deadlines like speed limits: suggestions.",
+      "I don't set alarms. I set vague intentions.",
+      "If you want me to be on time, lie about when it starts.",
+      "Why stress about time when you can just embrace chaos?",
+      "My to-do list is a historical document.",
+      "Time and I broke up. It was toxic.",
+      "I'm not late. I'm temporally creative.",
+      "'In five minutes' means something different in my language.",
+      "I don't track time. I let it track me\u2014poorly.",
+      "Time management is easy. Just avoid doing anything.",
+      "Time is fleeting. So is my attention span.",
+      "I live in the moment. Just never the right one.",
+      "Time doesn't control me. It just heavily inconveniences me.",
+      "I'm a time optimist: always wrong, always hopeful.",
+      "Punctuality is for people who don't trust spontaneity.",
+      "My life is a series of missed trains and strong coffee.",
+      "If time is a river, I'm definitely upstream without a paddle.",
+      "I don't watch the clock. I avoid eye contact with it.",
+      "'ASAP' means 'as soon as procrastination ends.'",
+      "Early is suspicious. On time is impressive. Late is expected.",
+      "Time management? I prefer time improvisation.",
+      "I like to keep time on its toes. Mostly by ignoring it.",
+      "Alarms are like plot twists. I didn't see it coming, and I still ignore it.",
+      "If being late was a sport, I'd already have missed the medal ceremony.",
+      "I don't lose track of time. I just pretend it doesn't exist.",
+      "Watches are decorative lies.",
+      "Time flies. I miss every flight.",
+      "My planner is just a coloring book for stress.",
+      "I'm not in a hurry. I'm in denial.",
+      "I live in the now, just usually a little bit after everyone else.",
+      "My calendar and I are estranged, but we're working on it.",
+      "The early bird catches the worm. I order food later.",
+      "Time moves fast. I move slower.",
+      "I was going to be on time, but then I remembered who I am.",
+      "I see '9:00 AM' and read it as 'guideline.'",
+      "Every plan is a maybe with extra steps.",
+      "I don't have time blindness\u2014I just have time indifference.",
+      "I'm not late. Reality is early.",
+      "Time and I aren't speaking after what happened last Monday.",
+      "Being on time is impressive. Being consistently late is a brand.",
+      "I'm in sync with the universe\u2014just in a different dimension.",
+      "My sense of time is like my sock drawer: chaotic and mostly missing.",
+      "Some people chase time. I let it wander off.",
+      "I'm not running late. I'm setting the tone for a relaxed experience.",
+    ];
+
+    function shuffle(arr) {
+      for (let i = arr.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [arr[i], arr[j]] = [arr[j], arr[i]];
+      }
+      return arr;
+    }
+
+    const shuffled = shuffle([...alexQuotes]);
+    let idx = 0;
+    const el = document.getElementById('quoteText');
+
+    function showQuote() {
+      el.classList.remove('visible');
+      setTimeout(() => {
+        if (idx >= shuffled.length) { idx = 0; shuffle(shuffled); }
+        el.innerHTML = '\u201C' + shuffled[idx] + '\u201D'
+          + '<span class="quote-attribution">\u2014 Time according to Alex</span>';
+        idx++;
+        el.classList.add('visible');
+      }, 800);
+    }
+
+    showQuote();
+    setInterval(showQuote, 5000);
+
     async function handleLogin(e) {
       e.preventDefault();
       const btn = document.getElementById('loginBtn');