From 7fe57ccb6d9ab6f21bcf44370ade7701b64a385c Mon Sep 17 00:00:00 2001
From: HotSwapp <47397945+HotSwapp@users.noreply.github.com>
Date: Tue, 7 Oct 2025 21:33:12 -0500
Subject: [PATCH] Improve login screen design and functionality

- Increased logo size from 60x60 to 120x120px with proper styling
- Enhanced card layout with better padding and rounded corners
- Added modern gradient background and improved visual hierarchy
- Improved form styling with larger inputs and better spacing
- Enhanced password visibility toggle with better UX
- Improved error message styling with icons and rounded corners
- Added responsive design improvements for better mobile experience
- Updated color scheme with modern gradients and improved contrast
---
 app/__pycache__/main.cpython-313.pyc | Bin 127354 -> 127354 bytes
 app/templates/login.html             |  92 ++++++++++++++++-----------
 static/css/custom.css                |  67 ++++++++++++++++++-
 3 files changed, 121 insertions(+), 38 deletions(-)

diff --git a/app/__pycache__/main.cpython-313.pyc b/app/__pycache__/main.cpython-313.pyc
index 3874ad4fa724471ed883504eabf967c5225732d7..83fa6047b73c4bee9df0182671697da0ffe6d87f 100644
GIT binary patch
delta 24
ecmezMi2c_icCOF7yj%=Gpfj_PYbzIH!AAgfu?SfJ

delta 24
ecmezMi2c_icCOF7yj%=G5Im!iYbzIH!AAgh2nc@w

diff --git a/app/templates/login.html b/app/templates/login.html
index ee85c9c..d1e33b7 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -5,66 +5,75 @@
 {% block content %}
 <div class="container">
     <div class="row justify-content-center">
-        <div class="col-md-6 col-lg-4">
-            <div class="card shadow-sm">
-                <div class="card-body">
+        <div class="col-md-8 col-lg-5">
+            <div class="card shadow-lg" style="border: none; border-radius: 15px;">
+                <div class="card-body p-5">
                     <div class="text-center mb-4">
-                        <img src="{{ url_for('static', path='/logo/delphi-logo.webp') }}" alt="Delphi Logo" class="mb-3" style="width: 60px; height: 60px;">
-                        <h2 class="card-title">Welcome Back</h2>
+                        <img src="{{ url_for('static', path='/logo/delphi-logo.webp') }}" alt="Delphi Logo" class="mb-4" style="width: 120px; height: 120px; object-fit: contain;">
+                        <h2 class="card-title mb-2">Welcome Back</h2>
                         <p class="text-muted">Sign in to access Delphi Database</p>
                     </div>
 
                     {% if error %}
-                    <div class="alert alert-danger" role="alert">
-                        <i class="bi bi-exclamation-triangle-fill me-2"></i>{{ error }}
+                    <div class="alert alert-danger d-flex align-items-center" role="alert" style="border-radius: 8px;">
+                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
+                        <div>{{ error }}</div>
                     </div>
                     {% endif %}
 
                     <form method="post" action="/login">
-                        <div class="mb-3">
-                            <label for="username" class="form-label">Username</label>
-                            <div class="input-group">
-                                <span class="input-group-text"><i class="bi bi-person"></i></span>
-                                <input type="text" class="form-control" id="username" name="username" required
-                                       placeholder="Enter your username" autocomplete="username">
+                        <div class="mb-4">
+                            <label for="username" class="form-label fw-semibold">Username</label>
+                            <div class="input-group input-group-lg">
+                                <span class="input-group-text bg-light border-end-0">
+                                    <i class="bi bi-person text-muted"></i>
+                                </span>
+                                <input type="text" class="form-control border-start-0 bg-light"
+                                       id="username" name="username" required
+                                       placeholder="Enter your username" autocomplete="username"
+                                       style="border-left: none;">
                             </div>
                         </div>
 
-                        <div class="mb-3">
-                            <label for="password" class="form-label">Password</label>
-                            <div class="input-group">
-                                <span class="input-group-text"><i class="bi bi-key"></i></span>
-                                <input type="password" class="form-control" id="password" name="password" required
-                                       placeholder="Enter your password" autocomplete="current-password">
+                        <div class="mb-4">
+                            <label for="password" class="form-label fw-semibold">Password</label>
+                            <div class="input-group input-group-lg">
+                                <span class="input-group-text bg-light border-end-0">
+                                    <i class="bi bi-key text-muted"></i>
+                                </span>
+                                <input type="password" class="form-control border-start-0 bg-light"
+                                       id="password" name="password" required
+                                       placeholder="Enter your password" autocomplete="current-password"
+                                       style="border-left: none;">
                             </div>
                         </div>
 
-                        <div class="mb-3 form-check">
+                        <div class="mb-4 form-check">
                             <input type="checkbox" class="form-check-input" id="rememberMe">
-                            <label class="form-check-label" for="rememberMe">
+                            <label class="form-check-label text-muted" for="rememberMe">
                                 Remember me
                             </label>
                         </div>
 
-                        <div class="d-grid">
-                            <button type="submit" class="btn btn-primary">
+                        <div class="d-grid mb-3">
+                            <button type="submit" class="btn btn-primary btn-lg fw-semibold">
                                 <i class="bi bi-box-arrow-in-right me-2"></i>Sign In
                             </button>
                         </div>
                     </form>
 
-                    <div class="text-center mt-4">
+                    <div class="text-center mt-4 p-3" style="background-color: #f8f9fa; border-radius: 8px;">
                         <small class="text-muted">
                             <i class="bi bi-info-circle me-1"></i>
-                            Default credentials: admin / admin123
+                            <strong>Default credentials:</strong> admin / admin123
                         </small>
                     </div>
                 </div>
             </div>
 
-            <div class="text-center mt-3">
+            <div class="text-center mt-4">
                 <small class="text-muted">
-                    Don't have an account? Contact your administrator.
+                    Don't have an account? <a href="mailto:admin@delphi.com" class="text-decoration-none">Contact your administrator</a>.
                 </small>
             </div>
         </div>
@@ -79,32 +88,41 @@ document.addEventListener('DOMContentLoaded', function() {
     document.getElementById('username').focus();
 });
 
-// Show/hide password toggle (optional enhancement)
+// Show/hide password toggle functionality
 document.addEventListener('DOMContentLoaded', function() {
     const passwordField = document.getElementById('password');
     const toggleBtn = document.createElement('button');
     toggleBtn.type = 'button';
-    toggleBtn.className = 'btn btn-outline-secondary';
-    toggleBtn.innerHTML = '<i class="bi bi-eye"></i>';
-    toggleBtn.style.border = 'none';
-    toggleBtn.style.background = 'transparent';
+    toggleBtn.className = 'btn btn-light border-start-0';
+    toggleBtn.innerHTML = '<i class="bi bi-eye text-muted"></i>';
+    toggleBtn.style.border = '2px solid #e9ecef';
+    toggleBtn.style.borderLeft = 'none';
+    toggleBtn.style.background = '#f8f9fa';
+    toggleBtn.style.borderRadius = '0 8px 8px 0';
 
-    // Add toggle functionality
+    // Add toggle functionality with better UX
     toggleBtn.addEventListener('click', function() {
         if (passwordField.type === 'password') {
             passwordField.type = 'text';
-            this.innerHTML = '<i class="bi bi-eye-slash"></i>';
+            this.innerHTML = '<i class="bi bi-eye-slash text-muted"></i>';
+            this.classList.remove('btn-light');
+            this.classList.add('btn-outline-primary');
         } else {
             passwordField.type = 'password';
-            this.innerHTML = '<i class="bi bi-eye"></i>';
+            this.innerHTML = '<i class="bi bi-eye text-muted"></i>';
+            this.classList.remove('btn-outline-primary');
+            this.classList.add('btn-light');
         }
     });
 
     // Insert toggle button into password input group
     const passwordInputGroup = passwordField.closest('.input-group');
     if (passwordInputGroup) {
-        const span = passwordInputGroup.querySelector('.input-group-text');
-        passwordInputGroup.insertBefore(toggleBtn, span.nextSibling);
+        passwordInputGroup.appendChild(toggleBtn);
+
+        // Adjust the input field border radius
+        passwordField.style.borderRadius = '8px 0 0 8px';
+        passwordField.style.borderRight = 'none';
     }
 });
 </script>
diff --git a/static/css/custom.css b/static/css/custom.css
index 5850552..46bc5e9 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -2,7 +2,72 @@
 
 /* Additional styles can be added here */
 body {
-    background-color: #f8f9fa;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Login page specific styles */
+.container {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+/* Enhanced card styling for login */
+.card {
+    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Logo styling */
+.card .card-body .text-center img {
+    border-radius: 50%;
+    background: white;
+    padding: 10px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* Input group styling */
+.input-group-lg .form-control {
+    border-radius: 8px !important;
+    border: 2px solid #e9ecef;
+    transition: all 0.3s ease;
+}
+
+.input-group-lg .form-control:focus {
+    border-color: #667eea;
+    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
+    background: white;
+}
+
+.input-group-text {
+    border-radius: 8px 0 0 8px !important;
+    border: 2px solid #e9ecef;
+    border-right: none;
+    background: #f8f9fa;
+}
+
+/* Button styling */
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    border-radius: 8px;
+    padding: 12px 24px;
+    font-size: 16px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.btn-primary:hover {
+    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
 }
 
 /* Custom navbar styles */