Feat - Dark & Light

static/css/style.css

@@ -1,94 +1,243 @@
+/* --- CSS Variables --- */
+:root {
+    --body-bg: #f0f0f0; /* Light gray background */
+    --container-bg: #ffffff;
+    --text-color: #333333;
+    --text-color-secondary: #555555;
+    --border-color: #e0e0e0;
+    --input-bg: #ffffff;
+    --input-border: #cccccc;
+    --input-focus-border: #86b7fe; /* Bootstrap focus blue */
+    --button-primary-bg: #0d6efd; /* Bootstrap primary */
+    --button-primary-hover-bg: #0b5ed7;
+    --button-danger-bg: #dc3545; /* Bootstrap danger */
+    --button-danger-hover-bg: #bb2d3b;
+    --button-text-color: #ffffff;
+    --link-color: #0d6efd;
+    --status-error-color: #dc3545;
+    --status-success-color: #198754; /* Bootstrap success */
+    --notification-bg: #f8f9fa; /* Light gray */
+    --notification-border: #dee2e6;
+    --shadow-color: rgba(0, 0, 0, 0.08);
+    --border-radius: 8px; /* Rounded corners */
+}
+
+.dark-mode {
+    --body-bg: #1a1a1a; /* Dark charcoal */
+    --container-bg: #2c2c2c; /* Slightly lighter dark */
+    --text-color: #e0e0e0; /* Light gray text */
+    --text-color-secondary: #aaaaaa;
+    --border-color: #444444; /* Darker border */
+    --input-bg: #333333;
+    --input-border: #555555;
+    --input-focus-border: #0d6efd; /* Keep focus blue */
+    --button-primary-bg: #0d6efd;
+    --button-primary-hover-bg: #0b5ed7;
+    --button-danger-bg: #dc3545;
+    --button-danger-hover-bg: #bb2d3b;
+    --button-text-color: #ffffff;
+    --link-color: #58a6ff; /* Lighter blue for links */
+    --status-error-color: #f86c7c;
+    --status-success-color: #4cd08a;
+    --notification-bg: #333333;
+    --notification-border: #444444;
+    --shadow-color: rgba(255, 255, 255, 0.05);
+}
+
+/* --- Global Styles --- */
+* {
+    box-sizing: border-box;
+}
+
 body {
-    font-family: sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     line-height: 1.6;
-    margin: 20px;
-    background-color: #f4f4f4;
+    margin: 0;
+    padding: 0;
+    background-color: var(--body-bg);
+    color: var(--text-color);
+    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth theme transition */
 }
 
-h1, h2 {
-    color: #333;
+/* --- Layout --- */
+.container {
+    max-width: 800px; /* Max width for content */
+    margin: 30px auto; /* Center container */
+    padding: 25px;
+    background-color: var(--container-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 12px var(--shadow-color);
+    transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
-.auth-section {
-    background-color: #fff;
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 25px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.content-section {
+    margin-bottom: 25px;
     padding: 20px;
-    margin-bottom: 20px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    max-width: 400px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    background-color: var(--container-bg); /* Same as main container or slightly different */
+}
+/* Remove extra padding/border if nested inside container with padding */
+.container > .content-section {
+     padding: 0;
+     border: none;
+     background: none;
+     margin-bottom: 20px;
 }
 
-#welcome-section {
-     background-color: #e7f3fe;
-     padding: 20px;
-     border: 1px solid #c8e1f8;
-     border-radius: 5px;
+
+h1, h2 {
+    color: var(--text-color);
+    margin-top: 0;
+    margin-bottom: 0.75em;
+}
+h1 { font-size: 1.8em; }
+h2 { font-size: 1.4em; }
+
+hr {
+    border: none;
+    border-top: 1px solid var(--border-color);
+    margin: 25px 0;
 }
 
+a {
+    color: var(--link-color);
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+
+/* --- Forms --- */
+.form-group {
+    margin-bottom: 15px;
+}
 
 label {
-    display: inline-block;
-    margin-bottom: 5px;
+    display: block; /* Label on top */
+    margin-bottom: 6px;
+    font-weight: 500;
+    color: var(--text-color-secondary);
 }
 
 input[type="email"],
 input[type="password"] {
-    width: calc(100% - 22px); /* Account for padding/border */
-    padding: 10px;
-    margin-bottom: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid var(--input-border);
+    border-radius: var(--border-radius);
+    background-color: var(--input-bg);
+    color: var(--text-color);
+    font-size: 1em;
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+input[type="email"]:focus,
+input[type="password"]:focus {
+    outline: none;
+    border-color: var(--input-focus-border);
+    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
 }
 
-button {
-    background-color: #5cb85c;
-    color: white;
-    padding: 10px 15px;
+.form-switch {
+    margin-top: 15px;
+    font-size: 0.9em;
+    color: var(--text-color-secondary);
+}
+
+/* --- Buttons --- */
+.btn {
+    display: inline-block;
+    padding: 10px 18px;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     font-size: 1em;
+    font-weight: 500;
+    text-align: center;
+    transition: background-color 0.2s ease;
+    color: var(--button-text-color); /* Common text color */
 }
 
-button:hover {
-    background-color: #4cae4c;
+.btn-primary {
+    background-color: var(--button-primary-bg);
+}
+.btn-primary:hover {
+    background-color: var(--button-primary-hover-bg);
 }
 
-#logout-button {
-     background-color: #d9534f;
+.btn-danger {
+     background-color: var(--button-danger-bg);
 }
-#logout-button:hover {
-     background-color: #c9302c;
+.btn-danger:hover {
+     background-color: var(--button-danger-hover-bg);
 }
 
+#theme-toggle {
+    padding: 8px 12px;
+    font-size: 0.9em;
+    background-color: #6c757d; /* Secondary button color */
+}
+#theme-toggle:hover {
+    background-color: #5c636a;
+}
+
+
+/* --- Status Messages --- */
 .status-message {
     margin-top: 15px;
-    color: red;
-    font-weight: bold;
+    padding: 10px;
+    border-radius: var(--border-radius);
+    font-weight: 500;
+    display: none; /* Hidden by default */
+    border: 1px solid transparent;
 }
 .status-message.success {
-    color: green;
+    color: var(--status-success-color);
+    background-color: rgba(25, 135, 84, 0.1); /* Light green background */
+    border-color: rgba(25, 135, 84, 0.2);
 }
-
-hr {
-    margin: 20px 0;
+.status-message:not(.success) { /* Default to error style */
+    color: var(--status-error-color);
+    background-color: rgba(220, 53, 69, 0.1); /* Light red background */
+    border-color: rgba(220, 53, 69, 0.2);
 }
 
+
+/* --- Notifications --- */
 #notifications {
     margin-top: 15px;
     padding: 15px;
-    border: 1px dashed #aaa;
-    background-color: #f9f9f9;
+    border: 1px solid var(--notification-border);
+    border-radius: var(--border-radius);
+    background-color: var(--notification-bg);
     min-height: 100px;
     max-height: 300px;
     overflow-y: auto;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 #notifications p {
-    margin: 5px 0;
-    padding-bottom: 5px;
-    border-bottom: 1px solid #eee;
+    margin: 0 0 8px 0; /* Space below each notification */
+    padding: 8px 0;
+    border-bottom: 1px solid var(--border-color);
+    font-size: 0.95em;
 }
 #notifications p:last-child {
     border-bottom: none;
+    margin-bottom: 0;
+}
+#notifications p em { /* Style the placeholder */
+    color: var(--text-color-secondary);
+    font-style: italic;
 }

static/js/script.js

@@ -1,226 +1,164 @@
+// --- Existing Constants (keep) ---
 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');
-const registerStatus = document.getElementById('register-status');
-const loginStatus = document.getElementById('login-status');
-const welcomeMessage = document.getElementById('welcome-message');
-const logoutButton = document.getElementById('logout-button');
+// ... other element constants ...
 const notificationsDiv = document.getElementById('notifications');
-
 const API_URL = '/api'; // Use relative path
+const themeToggleButton = document.getElementById('theme-toggle'); // Get toggle button
 
+// --- Existing State Variables (keep) ---
 let webSocket = null;
 let authToken = localStorage.getItem('authToken'); // Load token on script start
 
-// --- UI Control ---
+// --- UI Control (showSection, setStatus - keep) ---
 function showSection(sectionId) {
     registerSection.style.display = 'none';
     loginSection.style.display = 'none';
     welcomeSection.style.display = 'none';
-
     const sectionToShow = document.getElementById(sectionId);
-    if (sectionToShow) {
-        sectionToShow.style.display = 'block';
-    } else {
-        loginSection.style.display = 'block'; // Default to login
-    }
+    if (sectionToShow) { sectionToShow.style.display = 'block'; }
+    else { loginSection.style.display = 'block'; }
 }
-
 function setStatus(element, message, isSuccess = false) {
     element.textContent = message;
     element.className = isSuccess ? 'status-message success' : 'status-message';
     element.style.display = message ? 'block' : 'none';
 }
 
-// --- API Calls ---
+// --- API Calls (apiRequest - keep) ---
 async function apiRequest(endpoint, method = 'GET', body = null, token = null) {
     const headers = { 'Content-Type': 'application/json' };
-    if (token) {
-        headers['Authorization'] = `Bearer ${token}`;
-    }
-
-    const options = {
-        method: method,
-        headers: headers,
-    };
-
-    if (body && method !== 'GET') {
-        options.body = JSON.stringify(body);
-    }
-
+    if (token) { headers['Authorization'] = `Bearer ${token}`; }
+    const options = { method: method, headers: headers };
+    if (body && method !== 'GET') { options.body = JSON.stringify(body); }
     try {
         const response = await fetch(`${API_URL}${endpoint}`, options);
-        const data = await response.json(); // Try to parse JSON regardless of status
-
+        const data = await response.json();
         if (!response.ok) {
-            // Use detail from JSON if available, otherwise status text
             const errorMessage = data?.detail || response.statusText || `HTTP error ${response.status}`;
-            console.error("API Error:", errorMessage);
-            throw new Error(errorMessage);
-        }
-        return data;
-    } catch (error) {
-        console.error(`Error during API request to ${endpoint}:`, error);
-        throw error; // Re-throw to be caught by caller
-    }
+            console.error("API Error:", errorMessage); throw new Error(errorMessage);
+        } return data;
+    } catch (error) { console.error(`API Error to ${endpoint}:`, error); throw error; }
 }
 
 
-// --- WebSocket Handling ---
+// --- WebSocket Handling (connect/disconnectWebSocket - keep) ---
 function connectWebSocket(token) {
-    if (!token) {
-        console.error("No token available for WebSocket connection.");
-        return;
-    }
-    if (webSocket && webSocket.readyState === WebSocket.OPEN) {
-        console.log("WebSocket already connected.");
-        return;
-    }
-
-    // Construct WebSocket URL dynamically (replace http/https with ws/wss)
+    if (!token) { console.error("No token for WebSocket."); return; }
+    if (webSocket && webSocket.readyState === WebSocket.OPEN) { console.log("WS already open."); return; }
     const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const wsUrl = `${wsProtocol}//${window.location.host}${API_URL}/ws/${token}`;
-    console.log("Attempting to connect WebSocket:", wsUrl);
-
-
+    console.log("Connecting WebSocket:", wsUrl);
     webSocket = new WebSocket(wsUrl);
-
     webSocket.onopen = (event) => {
-        console.log("WebSocket connection opened:", event);
-        // Clear placeholder message on successful connect
-        if (notificationsDiv.querySelector('p em')) {
-            notificationsDiv.innerHTML = '';
-        }
+        console.log("WS opened:", event);
+        if (notificationsDiv.querySelector('p em')) { notificationsDiv.innerHTML = ''; }
     };
-
     webSocket.onmessage = (event) => {
-        console.log("WebSocket message received:", event.data);
+        console.log("WS message received:", event.data);
         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);
-                }
-
+                while (notificationsDiv.children.length > 10) { notificationsDiv.removeChild(notificationsDiv.lastChild); }
             }
-        } catch (error) {
-            console.error("Error parsing WebSocket message:", error);
-        }
-    };
-
-    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);
+        } catch (error) { console.error("WS message parse error:", error); }
     };
-
+    webSocket.onerror = (event) => { console.error("WS error:", event); displayNotificationError("WebSocket error occurred."); };
     webSocket.onclose = (event) => {
-        console.log("WebSocket connection closed:", event);
-        webSocket = null; // Reset WebSocket variable
-        // Optionally try to reconnect or inform user
-        // Do not clear notifications on close, user might want to see history
-        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);
-        }
+        console.log("WS closed:", event);
+        if (!event.wasClean) { displayNotificationError(`WebSocket disconnected (Code: ${event.code}). Refresh maybe needed.`); }
+        webSocket = null;
     };
 }
-
 function disconnectWebSocket() {
-    if (webSocket) {
-        console.log("Closing WebSocket connection.");
-        webSocket.close();
-        webSocket = null;
-    }
+    if (webSocket) { console.log("Closing WS."); webSocket.close(); webSocket = null; }
 }
+function displayNotificationError(message) { // Helper for WS errors
+    const p = document.createElement('p');
+    p.textContent = message;
+    p.style.color = 'orange';
+    p.style.fontWeight = 'bold';
+    notificationsDiv.insertBefore(p, notificationsDiv.firstChild);
+}
+
 
-// --- Authentication Logic ---
+// --- Authentication Logic (handleLogin, handleRegister, showWelcomePage, handleLogout - keep) ---
 async function handleLogin(email, password) {
     setStatus(loginStatus, "Logging in...");
     try {
         const data = await apiRequest('/login', 'POST', { email, password });
         if (data.access_token) {
             authToken = data.access_token;
-            localStorage.setItem('authToken', authToken); // Store token
-            setStatus(loginStatus, ""); // Clear status
-            await showWelcomePage(); // Fetch user info and show welcome
-        } else {
-            throw new Error("Login failed: No token received.");
-        }
-    } catch (error) {
-        setStatus(loginStatus, `Login failed: ${error.message}`);
-    }
+            localStorage.setItem('authToken', authToken);
+            setStatus(loginStatus, "");
+            await showWelcomePage();
+        } else { throw new Error("No token received."); }
+    } catch (error) { setStatus(loginStatus, `Login failed: ${error.message}`); }
 }
-
 async function handleRegister(email, password) {
      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
-        showSection('login-section'); // Switch to login
-     } catch (error) {
-        setStatus(registerStatus, `Registration failed: ${error.message}`);
-     }
+        registerForm.reset();
+        showSection('login-section');
+     } catch (error) { setStatus(registerStatus, `Registration failed: ${error.message}`); }
 }
-
 async function showWelcomePage() {
-    if (!authToken) {
-        showSection('login-section');
-        return;
-    }
+    if (!authToken) { showSection('login-section'); return; }
     try {
-        // Fetch user details using the token
         const user = await apiRequest('/users/me', 'GET', null, authToken);
         welcomeMessage.textContent = `Welcome, ${user.email}!`;
         showSection('welcome-section');
-        connectWebSocket(authToken); // Connect WS after successful login and user fetch
-    } catch (error) {
-        // If fetching user fails (e.g., invalid/expired token), logout
-        console.error("Failed to fetch user details:", error);
-        handleLogout();
-    }
+        connectWebSocket(authToken);
+    } catch (error) { console.error("Failed to fetch user:", error); handleLogout(); }
 }
-
 function handleLogout() {
     authToken = null;
     localStorage.removeItem('authToken');
     disconnectWebSocket();
-    setStatus(loginStatus, ""); // Clear any previous login errors
+    setStatus(loginStatus, "");
+    // Reset notification display on logout
+    notificationsDiv.innerHTML = '<p><em>Notifications will appear here...</em></p>';
     showSection('login-section');
 }
 
+// --- Theme Toggling ---
+function applyTheme(theme) {
+    if (theme === 'dark') {
+        document.body.classList.add('dark-mode');
+    } else {
+        document.body.classList.remove('dark-mode');
+    }
+}
+
+function toggleTheme() {
+    const isDarkMode = document.body.classList.toggle('dark-mode');
+    const newTheme = isDarkMode ? 'dark' : 'light';
+    localStorage.setItem('theme', newTheme); // Save preference
+    console.log("Theme toggled to:", newTheme);
+}
+
 
 // --- Event Listeners ---
 registerForm.addEventListener('submit', (e) => {
     e.preventDefault();
+    // ... (validation and call handleRegister - keep) ...
     const email = document.getElementById('reg-email').value;
     const password = document.getElementById('reg-password').value;
     const confirmPassword = document.getElementById('reg-confirm-password').value;
-    if (password !== confirmPassword) {
-        setStatus(registerStatus, "Passwords do not match.");
-        return;
-    }
-    if (password.length < 8) {
-         setStatus(registerStatus, "Password must be at least 8 characters.");
-         return;
-    }
+    if (password !== confirmPassword) { setStatus(registerStatus, "Passwords do not match."); return; }
+    if (password.length < 8) { setStatus(registerStatus, "Password must be >= 8 characters."); return; }
     handleRegister(email, password);
 });
 
 loginForm.addEventListener('submit', (e) => {
     e.preventDefault();
+    // ... (call handleLogin - keep) ...
     const email = document.getElementById('login-email').value;
     const password = document.getElementById('login-password').value;
     handleLogin(email, password);
@@ -228,14 +166,32 @@ loginForm.addEventListener('submit', (e) => {
 
 logoutButton.addEventListener('click', handleLogout);
 
+themeToggleButton.addEventListener('click', toggleTheme); // Add listener
+
 
 // --- Initial Page Load Logic ---
 document.addEventListener('DOMContentLoaded', () => {
+    // Apply stored theme preference first
+    const storedTheme = localStorage.getItem('theme');
+    if (storedTheme) {
+        applyTheme(storedTheme);
+        console.log("Applied stored theme:", storedTheme);
+    } else {
+        // Optional: Detect system preference if no theme stored
+        // const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        // applyTheme(prefersDark ? 'dark' : 'light');
+        // console.log("Applied system theme preference.");
+        applyTheme('light'); // Default to light if nothing else
+        console.log("Applied default light theme.");
+    }
+
+
+    // Then check auth token
     if (authToken) {
-        console.log("Token found, attempting to show welcome page.");
-        showWelcomePage(); // Try to fetch user info and show welcome
+        console.log("Token found, showing welcome page.");
+        showWelcomePage();
     } else {
         console.log("No token found, showing login page.");
-        showSection('login-section'); // Show login if no token
+        showSection('login-section');
     }
 });

templates/index.html

@@ -7,49 +7,64 @@
     <link rel="stylesheet" href="/static/css/style.css">
 </head>
 <body>
-    <h1>Auth & Notification App</h1>
+    <div class="container">
+        <div class="header">
+            <h1>Auth & Notification App</h1>
+            <button id="theme-toggle">Toggle Theme</button>
+        </div>
 
-    <!-- Registration Section -->
-    <div id="register-section" class="auth-section">
-        <h2>Register</h2>
-        <form id="register-form">
-            <label for="reg-email">Email:</label>
-            <input type="email" id="reg-email" name="email" required><br><br>
-            <label for="reg-password">Password:</label>
-            <input type="password" id="reg-password" name="password" required minlength="8"><br><br>
-            <label for="reg-confirm-password">Confirm Password:</label>
-            <input type="password" id="reg-confirm-password" name="confirm_password" required minlength="8"><br><br>
-            <button type="submit">Register</button>
-        </form>
-        <p id="register-status" class="status-message"></p>
-        <p>Already have an account? <a href="#" onclick="showSection('login-section')">Login here</a></p>
-    </div>
+        <!-- Registration Section -->
+        <div id="register-section" class="content-section auth-section">
+            <h2>Register</h2>
+            <form id="register-form">
+                <div class="form-group">
+                    <label for="reg-email">Email:</label>
+                    <input type="email" id="reg-email" name="email" required>
+                </div>
+                <div class="form-group">
+                    <label for="reg-password">Password:</label>
+                    <input type="password" id="reg-password" name="password" required minlength="8">
+                </div>
+                 <div class="form-group">
+                    <label for="reg-confirm-password">Confirm Password:</label>
+                    <input type="password" id="reg-confirm-password" name="confirm_password" required minlength="8">
+                 </div>
+                <button type="submit" class="btn btn-primary">Register</button>
+            </form>
+            <p id="register-status" class="status-message"></p>
+            <p class="form-switch">Already have an account? <a href="#" onclick="showSection('login-section')">Login here</a></p>
+        </div>
 
-    <!-- Login Section -->
-    <div id="login-section" class="auth-section" style="display: none;">
-        <h2>Login</h2>
-        <form id="login-form">
-            <label for="login-email">Email:</label>
-            <input type="email" id="login-email" name="email" required><br><br>
-            <label for="login-password">Password:</label>
-            <input type="password" id="login-password" name="password" required><br><br>
-            <button type="submit">Login</button>
-        </form>
-        <p id="login-status" class="status-message"></p>
-        <p>Don't have an account? <a href="#" onclick="showSection('register-section')">Register here</a></p>
-    </div>
+        <!-- Login Section -->
+        <div id="login-section" class="content-section auth-section" style="display: none;">
+            <h2>Login</h2>
+            <form id="login-form">
+                <div class="form-group">
+                    <label for="login-email">Email:</label>
+                    <input type="email" id="login-email" name="email" required>
+                 </div>
+                 <div class="form-group">
+                    <label for="login-password">Password:</label>
+                    <input type="password" id="login-password" name="password" required>
+                 </div>
+                <button type="submit" class="btn btn-primary">Login</button>
+            </form>
+            <p id="login-status" class="status-message"></p>
+            <p class="form-switch">Don't have an account? <a href="#" onclick="showSection('register-section')">Register here</a></p>
+        </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">Logout</button>
-        <hr>
-        <h2>Real-time Notifications</h2>
-        <div id="notifications">
-            <p><em>Notifications will appear here...</em></p>
+        <!-- Welcome Section (shown after login) -->
+        <div id="welcome-section" class="content-section" style="display: none;">
+            <h2>Welcome!</h2>
+            <p id="welcome-message">Welcome, user!</p>
+            <button id="logout-button" class="btn btn-danger">Logout</button>
+            <hr>
+            <h2>Real-time Notifications</h2>
+            <div id="notifications">
+                <p><em>Notifications will appear here...</em></p>
+            </div>
         </div>
-    </div>
+    </div><!-- end container -->
 
     <script src="/static/js/script.js"></script>
 </body>