feat

static/css/style.css

@@ -1,284 +1,315 @@
-/* Default variables for light mode */
+/* Modern UI styling for Auth App */
 :root {
-    --background-color: #f4f4f4;
-    --text-color: #333333;
-    --card-background: #ffffff;
-    --input-background: #f0f2f5;
-    --input-border: #e0e3e9;
-    --input-text: #333333;
-    --button-primary-bg: #5cb85c;
-    --button-primary-text: white;
-    --button-secondary-bg: #e0e3e9;
-    --button-secondary-text: #4a5568;
-    --border-color: #ddd;
-    --separator-color: #e0e3e9;
-    --error-color: #d9534f;
-    --success-color: #5cb85c;
-    --link-color: #3182ce;
-    --header-color: #333;
-    --hero-bg: #e7f3fe;
-    --hero-color: #333;
-    --welcome-bg: #e7f3fe;
-    --logout-button-bg: #d9534f;
-    --logout-button-hover: #c9302c;
-}
-
-/* Dark mode variables */
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background-color: #1a202c;
-        --text-color: #e2e8f0;
-        --card-background: #2d3748;
-        --input-background: #4a5568;
-        --input-border: #4a5568;
-        --input-text: #e2e8f0;
-        --button-primary-bg: #6cb46c;
-        --button-primary-text: white;
-        --button-secondary-bg: #4a5568;
-        --button-secondary-text: #e2e8f0;
-        --border-color: #4a5568;
-        --separator-color: #4a5568;
-        --error-color: #fc8181;
-        --success-color: #68d391;
-        --link-color: #63b3ed;
-        --header-color: #e2e8f0;
-        --hero-bg: #2d3748;
-        --hero-color: #e2e8f0;
-        --welcome-bg: #2d3748;
-        --logout-button-bg: #e53e3e;
-        --logout-button-hover: #c53030;
-    }
-}
-
-/* Base styles */
-* {
+    --primary: #4361ee;
+    --primary-light: #4cc9f0;
+    --primary-dark: #3a0ca3;
+    --success: #4ade80;
+    --danger: #f87171;
+    --text: #1f2937;
+    --text-light: #6b7280;
+    --bg-light: #f9fafb;
+    --bg-dark: #f3f4f6;
+    --card-bg: #ffffff;
+    --card-border: #e5e7eb;
+    --shadow: rgba(0, 0, 0, 0.1);
+    --radius: 8px;
+    --transition: all 0.3s ease;
+  }
+  
+  * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-}
-
-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    background-color: var(--background-color);
-    color: var(--text-color);
+  }
+  
+  body {
+    font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
     line-height: 1.6;
-    transition: background-color 0.3s ease, color 0.3s ease;
-    margin: 0;
-    padding: 0;
-}
-
-h1, h2 {
-    color: var(--header-color);
-}
-
-.container {
-    width: 100%;
-    max-width: 1000px;
-    margin: 20px auto;
-    padding: 20px;
-}
-
-.logo {
+    color: var(--text);
+    background: linear-gradient(135deg, var(--bg-light), var(--bg-dark));
+    min-height: 100vh;
+    padding: 2rem;
+  }
+  
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+  }
+  
+  .app-header {
     text-align: center;
-    margin-bottom: 30px;
-}
-
-.logo h1 {
-    font-size: 2rem;
-    margin-bottom: 10px;
-}
-
-.logo p {
+    margin-bottom: 2rem;
+    animation: fadeIn 0.8s ease;
+  }
+  
+  .app-title {
+    font-size: 2.5rem;
+    color: var(--primary-dark);
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+  }
+  
+  .app-subtitle {
+    color: var(--text-light);
     font-size: 1.1rem;
-    opacity: 0.8;
-}
-
-/* Auth container styles */
-.auth-container {
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    overflow: hidden;
-    background-color: var(--card-background);
-    transition: box-shadow 0.3s ease, background-color 0.3s ease;
-    margin-bottom: 30px;
-}
-
-@media (min-width: 768px) {
-    .auth-container {
-        flex-direction: row;
-        height: 500px;
-    }
-}
-
-.tabs {
-    display: flex;
-    border-bottom: 1px solid var(--separator-color);
-}
-
-.tab {
-    padding: 15px 0;
-    flex: 1;
-    text-align: center;
-    cursor: pointer;
+    font-weight: 400;
+  }
+  
+  .auth-section {
+    background-color: var(--card-bg);
+    border-radius: var(--radius);
+    box-shadow: 0 4px 16px var(--shadow);
+    padding: 2rem;
+    margin: 0 auto 2rem;
+    max-width: 480px;
+    transition: var(--transition);
+    animation: slideUp 0.5s ease;
+  }
+  
+  .auth-section:hover {
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
+  }
+  
+  .section-title {
+    font-size: 1.8rem;
+    color: var(--primary);
+    margin-bottom: 1.5rem;
     font-weight: 600;
-    transition: background-color 0.3s ease;
-}
-
-.tab.active {
-    border-bottom: 3px solid var(--button-primary-bg);
-    color: var(--button-primary-bg);
-}
-
-.auth-forms {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    padding: 30px;
-}
-
-.auth-form {
-    display: none;
-}
-
-.auth-form.active {
+    position: relative;
+    padding-bottom: 0.75rem;
+  }
+  
+  .section-title::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 3px;
+    width: 60px;
+    background: linear-gradient(to right, var(--primary), var(--primary-light));
+    border-radius: 1.5px;
+  }
+  
+  .form-group {
+    margin-bottom: 1.5rem;
+  }
+  
+  label {
     display: block;
-}
-
-.hero {
-    display: none;
-    flex: 1;
-    background-color: var(--hero-bg);
-    color: var(--hero-color);
-    padding: 40px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-@media (min-width: 768px) {
-    .hero {
-        display: flex;
-    }
-}
-
-.hero h2 {
-    margin-bottom: 20px;
-    color: var(--hero-color);
-}
-
-/* Form styles */
-.form-group {
-    margin-bottom: 20px;
-}
-
-label {
-    display: block;
-    margin-bottom: 7px;
+    margin-bottom: 0.5rem;
     font-weight: 500;
-}
-
-input[type="email"],
-input[type="password"] {
+    color: var(--text);
+  }
+  
+  input[type="email"],
+  input[type="password"] {
     width: 100%;
-    padding: 12px 15px;
-    border-radius: 6px;
-    border: 1px solid var(--input-border);
-    background-color: var(--input-background);
-    color: var(--input-text);
-    font-size: 16px;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-input:focus {
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--card-border);
+    border-radius: var(--radius);
+    font-size: 1rem;
+    transition: var(--transition);
     outline: none;
-    border-color: var(--button-primary-bg);
-    box-shadow: 0 0 0 3px rgba(92, 184, 92, 0.25);
-}
-
-.button {
+  }
+  
+  input[type="email"]:focus,
+  input[type="password"]:focus {
+    border-color: var(--primary-light);
+    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
+  }
+  
+  .btn {
     display: inline-block;
-    padding: 12px 20px;
-    background-color: var(--button-primary-bg);
-    color: var(--button-primary-text);
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 500;
+    text-align: center;
     border: none;
-    border-radius: 6px;
-    font-size: 16px;
-    font-weight: 600;
+    border-radius: var(--radius);
     cursor: pointer;
-    transition: opacity 0.3s ease, transform 0.1s ease;
+    transition: var(--transition);
+    background-color: var(--primary);
+    color: white;
+  }
+  
+  .btn:hover {
+    background-color: var(--primary-dark);
+    transform: translateY(-2px);
+  }
+  
+  .btn:active {
+    transform: translateY(0);
+  }
+  
+  .btn-full {
     width: 100%;
-    text-align: center;
-}
-
-.button:hover {
-    opacity: 0.9;
-}
-
-.button:active {
-    transform: translateY(1px);
-}
-
-/* Status messages */
-.status-message {
-    margin-top: 15px;
-    color: var(--error-color);
-    font-weight: bold;
-    display: none;
-}
-
-.status-message.success {
-    color: var(--success-color);
-}
-
-.error-message {
-    color: var(--error-color);
-    font-size: 14px;
-    margin-top: 5px;
+  }
+  
+  .btn-success {
+    background-color: var(--success);
+  }
+  
+  .btn-success:hover {
+    background-color: #3eb76a;
+  }
+  
+  .btn-danger {
+    background-color: var(--danger);
+  }
+  
+  .btn-danger:hover {
+    background-color: #e05252;
+  }
+  
+  .status-message {
+    margin-top: 1rem;
+    padding: 0.75rem 1rem;
+    border-radius: var(--radius);
+    font-weight: 500;
     display: none;
-}
-
-/* Welcome section */
-#welcome-section {
-    background-color: var(--welcome-bg);
-    padding: 20px;
-    border: 1px solid var(--border-color);
-    border-radius: 5px;
-}
-
-#logout-button {
-    background-color: var(--logout-button-bg);
-    margin-top: 15px;
-    width: auto;
-}
-
-#logout-button:hover {
-    background-color: var(--logout-button-hover);
-}
-
-hr {
-    margin: 20px 0;
-    border-color: var(--separator-color);
-}
-
-/* Notifications */
-#notifications {
-    margin-top: 15px;
-    padding: 15px;
-    border: 1px dashed var(--border-color);
-    background-color: var(--card-background);
+    background-color: rgba(248, 113, 113, 0.1);
+    color: var(--danger);
+    border-left: 4px solid var(--danger);
+  }
+  
+  .status-message.success {
+    background-color: rgba(74, 222, 128, 0.1);
+    color: #16a34a;
+    border-color: var(--success);
+  }
+  
+  .switch-auth {
+    margin-top: 1.5rem;
+    text-align: center;
+    color: var(--text-light);
+  }
+  
+  .switch-auth a {
+    color: var(--primary);
+    text-decoration: none;
+    font-weight: 500;
+    transition: var(--transition);
+  }
+  
+  .switch-auth a:hover {
+    color: var(--primary-dark);
+    text-decoration: underline;
+  }
+  
+  #welcome-section {
+    background-color: var(--card-bg);
+    border-radius: var(--radius);
+    box-shadow: 0 4px 16px var(--shadow);
+    padding: 2rem;
+    margin: 0 auto;
+    max-width: 800px;
+    animation: fadeIn 0.8s ease;
+  }
+  
+  .welcome-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+  }
+  
+  #welcome-message {
+    font-size: 1.3rem;
+    font-weight: 500;
+    color: var(--primary-dark);
+    margin-bottom: 1rem;
+  }
+  
+  .divider {
+    margin: 2rem 0;
+    height: 1px;
+    background-color: var(--card-border);
+  }
+  
+  .notifications-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+  
+  #notifications {
+    background-color: var(--bg-light);
+    border-radius: var(--radius);
+    padding: 1rem;
     min-height: 100px;
-    max-height: 300px;
+    max-height: 350px;
     overflow-y: auto;
-}
-
-#notifications p {
-    margin: 5px 0;
-    padding-bottom: 5px;
-    border-bottom: 1px solid var(--separator-color);
-}
-
-#notifications p:last-child {
-    border-bottom: none;
-}
+    border: 1px solid var(--card-border);
+  }
+  
+  #notifications p {
+    padding: 0.75rem;
+    margin-bottom: 0.75rem;
+    border-radius: var(--radius);
+    background-color: white;
+    border-left: 3px solid var(--primary-light);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    animation: fadeIn 0.3s ease;
+  }
+  
+  #notifications p:last-child {
+    margin-bottom: 0;
+  }
+  
+  #notifications p em {
+    color: var(--text-light);
+    font-style: italic;
+  }
+  
+  /* Animation keyframes */
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  
+  @keyframes slideUp {
+    from { 
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to { 
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  /* Responsive styles */
+  @media (max-width: 768px) {
+    body {
+      padding: 1rem;
+    }
+    
+    .app-title {
+      font-size: 2rem;
+    }
+    
+    .auth-section {
+      padding: 1.5rem;
+      margin-bottom: 1.5rem;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    .app-title {
+      font-size: 1.8rem;
+    }
+    
+    .section-title {
+      font-size: 1.5rem;
+    }
+    
+    .auth-section {
+      padding: 1.25rem;
+    }
+    
+    .btn {
+      padding: 0.7rem 1.25rem;
+    }
+  }

static/js/script.js

@@ -1,7 +1,6 @@
-const loginTab = document.getElementById('login-tab');
-const registerTab = document.getElementById('register-tab');
-const loginSection = document.getElementById('login-section');
+// DOM Elements
 const registerSection = document.getElementById('register-section');
+const loginSection = document.getElementById('login-section');
 const welcomeSection = document.getElementById('welcome-section');
 const registerForm = document.getElementById('register-form');
 const loginForm = document.getElementById('login-form');
@@ -16,43 +15,67 @@ const API_URL = '/api'; // Use relative path
 let webSocket = null;
 let authToken = localStorage.getItem('authToken'); // Load token on script start
 
-// --- UI Control & Tab Switching ---
+// --- UI Control ---
 function showSection(sectionId) {
-    loginSection.style.display = 'none';
-    registerSection.style.display = 'none';
-    welcomeSection.style.display = 'none';
+    // Hide all sections first with a fade effect
+    fadeOut(registerSection);
+    fadeOut(loginSection);
+    fadeOut(welcomeSection);
 
-    const sectionToShow = document.getElementById(sectionId);
-    if (sectionToShow) {
-        sectionToShow.style.display = 'block';
-    } else {
-        loginSection.style.display = 'block'; // Default to login
-    }
-}
+    // Show the requested section with a fade-in effect
+    setTimeout(() => {
+        registerSection.style.display = 'none';
+        loginSection.style.display = 'none';
+        welcomeSection.style.display = 'none';
 
-// Tab switching logic
-loginTab.addEventListener('click', () => {
-    loginTab.classList.add('active');
-    registerTab.classList.remove('active');
-    loginSection.classList.add('active');
-    registerSection.classList.remove('active');
-});
+        const sectionToShow = document.getElementById(sectionId);
+        if (sectionToShow) {
+            sectionToShow.style.display = 'block';
+            fadeIn(sectionToShow);
+        } else {
+            loginSection.style.display = 'block';
+            fadeIn(loginSection);
+        }
+    }, 300); // Wait for fade out to complete
+}
 
-registerTab.addEventListener('click', () => {
-    registerTab.classList.add('active');
-    loginTab.classList.remove('active');
-    registerSection.classList.add('active');
-    loginSection.classList.remove('active');
-});
+function fadeOut(element) {
+    if (element && element.style.display !== 'none') {
+        element.style.opacity = '1';
+        element.style.transition = 'opacity 300ms';
+        element.style.opacity = '0';
+    }
+}
 
-// Initialize first tab as active
-loginTab.classList.add('active');
-loginSection.classList.add('active');
+function fadeIn(element) {
+    if (element) {
+        element.style.opacity = '0';
+        element.style.transition = 'opacity 300ms';
+        setTimeout(() => {
+            element.style.opacity = '1';
+        }, 50);
+    }
+}
 
 function setStatus(element, message, isSuccess = false) {
+    if (!message) {
+        element.style.display = 'none';
+        return;
+    }
+    
     element.textContent = message;
     element.className = isSuccess ? 'status-message success' : 'status-message';
-    element.style.display = message ? 'block' : 'none';
+    
+    // Show with animation
+    element.style.display = 'block';
+    element.style.opacity = '0';
+    element.style.transform = 'translateY(-10px)';
+    element.style.transition = 'opacity 300ms, transform 300ms';
+    
+    setTimeout(() => {
+        element.style.opacity = '1';
+        element.style.transform = 'translateY(0)';
+    }, 10);
 }
 
 // --- API Calls ---
@@ -119,14 +142,7 @@ function connectWebSocket(token) {
         try {
             const messageData = JSON.parse(event.data);
             if (messageData.type === 'new_user' && messageData.message) {
-                const p = document.createElement('p');
-                p.textContent = messageData.message;
-                // Add message to the top
-                notificationsDiv.insertBefore(p, notificationsDiv.firstChild);
-                // Limit number of messages shown (optional)
-                while (notificationsDiv.children.length > 10) {
-                    notificationsDiv.removeChild(notificationsDiv.lastChild);
-                }
+                addNotification(messageData.message);
             }
         } catch (error) {
             console.error("Error parsing WebSocket message:", error);
@@ -135,25 +151,48 @@ function connectWebSocket(token) {
 
     webSocket.onerror = (event) => {
         console.error("WebSocket error:", event);
-        const p = document.createElement('p');
-        p.textContent = `WebSocket error occurred. Notifications may stop.`;
-        p.style.color = 'red';
-        notificationsDiv.insertBefore(p, notificationsDiv.firstChild);
+        addNotification(`WebSocket error occurred. Notifications may stop.`, 'error');
     };
 
     webSocket.onclose = (event) => {
         console.log("WebSocket connection closed:", event);
         webSocket = null; // Reset WebSocket variable
-        // Optionally try to reconnect or inform user
         if (!event.wasClean) {
-            const p = document.createElement('p');
-            p.textContent = `WebSocket disconnected unexpectedly (Code: ${event.code}). Please refresh or log out/in.`;
-            p.style.color = 'orange';
-            notificationsDiv.insertBefore(p, notificationsDiv.firstChild);
+            addNotification(`WebSocket disconnected unexpectedly (Code: ${event.code}). Please refresh or log out/in.`, 'warning');
         }
     };
 }
 
+function addNotification(message, type = 'info') {
+    const p = document.createElement('p');
+    p.classList.add(type);
+    
+    // Add icon based on notification type
+    let icon = 'bell';
+    if (type === 'error') icon = 'exclamation-circle';
+    if (type === 'warning') icon = 'exclamation-triangle';
+    if (type === 'success') icon = 'check-circle';
+    
+    p.innerHTML = `<i class="fas fa-${icon}"></i> ${message}`;
+    
+    // Add message to the top with animation
+    p.style.opacity = '0';
+    p.style.transform = 'translateY(-10px)';
+    notificationsDiv.insertBefore(p, notificationsDiv.firstChild);
+    
+    // Trigger animation
+    setTimeout(() => {
+        p.style.transition = 'opacity 300ms, transform 300ms';
+        p.style.opacity = '1';
+        p.style.transform = 'translateY(0)';
+    }, 10);
+    
+    // Limit number of messages shown (optional)
+    while (notificationsDiv.children.length > 10) {
+        notificationsDiv.removeChild(notificationsDiv.lastChild);
+    }
+}
+
 function disconnectWebSocket() {
     if (webSocket) {
         console.log("Closing WebSocket connection.");
@@ -181,30 +220,31 @@ async function handleLogin(email, password) {
 }
 
 async function handleRegister(email, password) {
-    setStatus(registerStatus, "Registering...");
-    try {
+     setStatus(registerStatus, "Registering...");
+     try {
         const data = await apiRequest('/register', 'POST', { email, password });
         setStatus(registerStatus, `Registration successful for ${data.email}! Please log in.`, true);
         registerForm.reset(); // Clear form
-        // Switch to login tab
-        loginTab.click();
-    } catch (error) {
+        showSection('login-section'); // Switch to login
+     } catch (error) {
         setStatus(registerStatus, `Registration failed: ${error.message}`);
-    }
+     }
 }
 
 async function showWelcomePage() {
     if (!authToken) {
         showSection('login-section');
-        loginTab.click();
         return;
     }
     try {
         // Fetch user details using the token
         const user = await apiRequest('/users/me', 'GET', null, authToken);
-        welcomeMessage.textContent = `Welcome, ${user.email}!`;
+        welcomeMessage.innerHTML = `<i class="fas fa-user-circle"></i> Welcome back, <strong>${user.email}</strong>!`;
         showSection('welcome-section');
         connectWebSocket(authToken); // Connect WS after successful login and user fetch
+        
+        // Add a welcome notification
+        addNotification(`You are now logged in as ${user.email}`, 'success');
     } catch (error) {
         // If fetching user fails (e.g., invalid/expired token), logout
         console.error("Failed to fetch user details:", error);
@@ -218,13 +258,19 @@ function handleLogout() {
     disconnectWebSocket();
     setStatus(loginStatus, ""); // Clear any previous login errors
     showSection('login-section');
-    loginTab.click();
 }
 
 // --- Form Validation ---
-function validateEmail(email) {
-    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-    return re.test(String(email).toLowerCase());
+function validatePassword(password, confirmPassword) {
+    if (password.length < 8) {
+        return "Password must be at least 8 characters.";
+    }
+    
+    if (password !== confirmPassword) {
+        return "Passwords do not match.";
+    }
+    
+    return null; // No error
 }
 
 // --- Event Listeners ---
@@ -234,73 +280,28 @@ registerForm.addEventListener('submit', (e) => {
     const password = document.getElementById('reg-password').value;
     const confirmPassword = document.getElementById('reg-confirm-password').value;
     
-    const emailError = document.getElementById('register-email-error');
-    const passwordError = document.getElementById('register-password-error');
-    const confirmError = document.getElementById('register-confirm-error');
-    
-    let isValid = true;
-    
-    // Email validation
-    if (!validateEmail(email)) {
-        emailError.style.display = 'block';
-        isValid = false;
-    } else {
-        emailError.style.display = 'none';
-    }
-    
-    // Password validation
-    if (password.length < 8) {
-        passwordError.style.display = 'block';
-        isValid = false;
-    } else {
-        passwordError.style.display = 'none';
-    }
-    
-    // Confirm password
-    if (password !== confirmPassword) {
-        confirmError.style.display = 'block';
-        isValid = false;
-    } else {
-        confirmError.style.display = 'none';
+    const passwordError = validatePassword(password, confirmPassword);
+    if (passwordError) {
+        setStatus(registerStatus, passwordError);
+        return;
     }
     
-    if (isValid) {
-        handleRegister(email, password);
-    }
+    handleRegister(email, password);
 });
 
 loginForm.addEventListener('submit', (e) => {
     e.preventDefault();
     const email = document.getElementById('login-email').value;
     const password = document.getElementById('login-password').value;
-    
-    const emailError = document.getElementById('login-email-error');
-    const passwordError = document.getElementById('login-password-error');
-    
-    let isValid = true;
-    
-    // Email validation
-    if (!validateEmail(email)) {
-        emailError.style.display = 'block';
-        isValid = false;
-    } else {
-        emailError.style.display = 'none';
-    }
-    
-    // Simple password validation
-    if (password.length < 1) {
-        passwordError.style.display = 'block';
-        isValid = false;
-    } else {
-        passwordError.style.display = 'none';
-    }
-    
-    if (isValid) {
-        handleLogin(email, password);
-    }
+    handleLogin(email, password);
 });
 
-logoutButton.addEventListener('click', handleLogout);
+logoutButton.addEventListener('click', () => {
+    // Add a confirmation dialog
+    if (confirm('Are you sure you want to log out?')) {
+        handleLogout();
+    }
+});
 
 // --- Initial Page Load Logic ---
 document.addEventListener('DOMContentLoaded', () => {
@@ -309,6 +310,6 @@ document.addEventListener('DOMContentLoaded', () => {
         showWelcomePage(); // Try to fetch user info and show welcome
     } else {
         console.log("No token found, showing login page.");
-        loginTab.click(); // Activate login tab
+        showSection('login-section'); // Show login if no token
     }
 });

templates/index.html

@@ -4,86 +4,86 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Auth App</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="stylesheet" href="/static/css/style.css">
 </head>
 <body>
     <div class="container">
-        <div class="logo">
-            <h1>Auth & Notification App</h1>
-            <p>Welcome! Please login to your account or create a new one.</p>
-        </div>
-
-        <div class="auth-container">
-            <div class="hero">
-                <h2>Welcome</h2>
-                <p>Please sign in or create a new account to continue.</p>
-            </div>
+        <header class="app-header">
+            <h1 class="app-title">Auth & Notification App</h1>
+            <p class="app-subtitle">Secure login and real-time notifications</p>
+        </header>
 
-            <div class="auth-forms">
-                <div class="tabs">
-                    <div class="tab" id="login-tab">Login</div>
-                    <div class="tab" id="register-tab">Register</div>
+        <!-- Registration Section -->
+        <div id="register-section" class="auth-section">
+            <h2 class="section-title">Create Account</h2>
+            <form id="register-form">
+                <div class="form-group">
+                    <label for="reg-email"><i class="fas fa-envelope"></i> Email Address</label>
+                    <input type="email" id="reg-email" name="email" placeholder="[email protected]" required>
                 </div>
-
-                <!-- Login Form -->
-                <div class="auth-form" id="login-section">
-                    <h2>Login to your account</h2>
-                    <form id="login-form">
-                        <div class="form-group">
-                            <label for="login-email">Email Address</label>
-                            <input type="email" id="login-email" name="email" placeholder="[email protected]" required>
-                            <div class="error-message" id="login-email-error">Please enter a valid email address</div>
-                        </div>
-                        
-                        <div class="form-group">
-                            <label for="login-password">Password</label>
-                            <input type="password" id="login-password" name="password" placeholder="Enter your password" required>
-                            <div class="error-message" id="login-password-error">Password must be at least 8 characters</div>
-                        </div>
-                        
-                        <button type="submit" class="button">Login Now</button>
-                        <p id="login-status" class="status-message"></p>
-                    </form>
+                
+                <div class="form-group">
+                    <label for="reg-password"><i class="fas fa-lock"></i> Password</label>
+                    <input type="password" id="reg-password" name="password" placeholder="Minimum 8 characters" required minlength="8">
+                </div>
+                
+                <div class="form-group">
+                    <label for="reg-confirm-password"><i class="fas fa-lock"></i> Confirm Password</label>
+                    <input type="password" id="reg-confirm-password" name="confirm_password" placeholder="Confirm your password" required minlength="8">
                 </div>
+                
+                <button type="submit" class="btn btn-full"><i class="fas fa-user-plus"></i> Register</button>
+            </form>
+            
+            <div id="register-status" class="status-message"></div>
+            
+            <div class="switch-auth">
+                Already have an account? <a href="#" onclick="showSection('login-section')">Sign in</a>
+            </div>
+        </div>
 
-                <!-- Registration Form -->
-                <div class="auth-form" id="register-section">
-                    <h2>Create your account</h2>
-                    <form id="register-form">
-                        <div class="form-group">
-                            <label for="reg-email">Email Address</label>
-                            <input type="email" id="reg-email" name="email" placeholder="youremail@example.com" required>
-                            <div class="error-message" id="register-email-error">Please enter a valid email address</div>
-                        </div>
-                        
-                        <div class="form-group">
-                            <label for="reg-password">Password</label>
-                            <input type="password" id="reg-password" name="password" placeholder="Create a password" required minlength="8">
-                            <div class="error-message" id="register-password-error">Password must be at least 8 characters</div>
-                        </div>
-                        
-                        <div class="form-group">
-                            <label for="reg-confirm-password">Confirm Password</label>
-                            <input type="password" id="reg-confirm-password" name="confirm_password" placeholder="Confirm your password" required minlength="8">
-                            <div class="error-message" id="register-confirm-error">Passwords do not match</div>
-                        </div>
-                        
-                        <button type="submit" class="button">Create Account</button>
-                        <p id="register-status" class="status-message"></p>
-                    </form>
+        <!-- Login Section -->
+        <div id="login-section" class="auth-section" style="display: none;">
+            <h2 class="section-title">Welcome Back</h2>
+            <form id="login-form">
+                <div class="form-group">
+                    <label for="login-email"><i class="fas fa-envelope"></i> Email Address</label>
+                    <input type="email" id="login-email" name="email" placeholder="you@example.com" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="login-password"><i class="fas fa-lock"></i> Password</label>
+                    <input type="password" id="login-password" name="password" placeholder="Your password" required>
                 </div>
+                
+                <button type="submit" class="btn btn-full"><i class="fas fa-sign-in-alt"></i> Login</button>
+            </form>
+            
+            <div id="login-status" class="status-message"></div>
+            
+            <div class="switch-auth">
+                Don't have an account? <a href="#" onclick="showSection('register-section')">Create one now</a>
             </div>
         </div>
 
         <!-- Welcome Section (shown after login) -->
         <div id="welcome-section" style="display: none;">
-            <h2>Welcome!</h2>
-            <p id="welcome-message">Welcome, user!</p>
-            <button id="logout-button" class="button">Logout</button>
-            <hr>
-            <h2>Real-time Notifications</h2>
+            <div class="welcome-header">
+                <h2 class="section-title">Dashboard</h2>
+                <button id="logout-button" class="btn btn-danger"><i class="fas fa-sign-out-alt"></i> Logout</button>
+            </div>
+            
+            <div id="welcome-message">Welcome back, user!</div>
+            
+            <div class="divider"></div>
+            
+            <div class="notifications-header">
+                <h2 class="section-title">Real-time Notifications</h2>
+            </div>
+            
             <div id="notifications">
-                <p><em>Notifications will appear here...</em></p>
+                <p><em><i class="fas fa-bell"></i> Notifications will appear here...</em></p>
             </div>
         </div>
     </div>