Rollback

static/css/style.css

@@ -1,243 +1,94 @@
-/* --- 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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-family: sans-serif;
     line-height: 1.6;
-    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 */
-}
-
-/* --- 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;
-}
-
-.header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 25px;
-    padding-bottom: 15px;
-    border-bottom: 1px solid var(--border-color);
+    margin: 20px;
+    background-color: #f4f4f4;
 }
 
-.content-section {
-    margin-bottom: 25px;
-    padding: 20px;
-    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;
-}
-
-
 h1, h2 {
-    color: var(--text-color);
-    margin-top: 0;
-    margin-bottom: 0.75em;
+    color: #333;
 }
-h1 { font-size: 1.8em; }
-h2 { font-size: 1.4em; }
 
-hr {
-    border: none;
-    border-top: 1px solid var(--border-color);
-    margin: 25px 0;
+.auth-section {
+    background-color: #fff;
+    padding: 20px;
+    margin-bottom: 20px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    max-width: 400px;
 }
 
-a {
-    color: var(--link-color);
-    text-decoration: none;
-}
-a:hover {
-    text-decoration: underline;
+#welcome-section {
+     background-color: #e7f3fe;
+     padding: 20px;
+     border: 1px solid #c8e1f8;
+     border-radius: 5px;
 }
 
-/* --- Forms --- */
-.form-group {
-    margin-bottom: 15px;
-}
 
 label {
-    display: block; /* Label on top */
-    margin-bottom: 6px;
-    font-weight: 500;
-    color: var(--text-color-secondary);
+    display: inline-block;
+    margin-bottom: 5px;
 }
 
 input[type="email"],
 input[type="password"] {
-    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);
-}
-
-.form-switch {
-    margin-top: 15px;
-    font-size: 0.9em;
-    color: var(--text-color-secondary);
+    width: calc(100% - 22px); /* Account for padding/border */
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
 }
 
-/* --- Buttons --- */
-.btn {
-    display: inline-block;
-    padding: 10px 18px;
+button {
+    background-color: #5cb85c;
+    color: white;
+    padding: 10px 15px;
     border: none;
-    border-radius: var(--border-radius);
+    border-radius: 4px;
     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 */
 }
 
-.btn-primary {
-    background-color: var(--button-primary-bg);
-}
-.btn-primary:hover {
-    background-color: var(--button-primary-hover-bg);
+button:hover {
+    background-color: #4cae4c;
 }
 
-.btn-danger {
-     background-color: var(--button-danger-bg);
+#logout-button {
+     background-color: #d9534f;
 }
-.btn-danger:hover {
-     background-color: var(--button-danger-hover-bg);
+#logout-button:hover {
+     background-color: #c9302c;
 }
 
-#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;
-    padding: 10px;
-    border-radius: var(--border-radius);
-    font-weight: 500;
-    display: none; /* Hidden by default */
-    border: 1px solid transparent;
+    color: red;
+    font-weight: bold;
 }
 .status-message.success {
-    color: var(--status-success-color);
-    background-color: rgba(25, 135, 84, 0.1); /* Light green background */
-    border-color: rgba(25, 135, 84, 0.2);
-}
-.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);
+    color: green;
 }
 
+hr {
+    margin: 20px 0;
+}
 
-/* --- Notifications --- */
 #notifications {
     margin-top: 15px;
     padding: 15px;
-    border: 1px solid var(--notification-border);
-    border-radius: var(--border-radius);
-    background-color: var(--notification-bg);
+    border: 1px dashed #aaa;
+    background-color: #f9f9f9;
     min-height: 100px;
     max-height: 300px;
     overflow-y: auto;
-    transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 #notifications p {
-    margin: 0 0 8px 0; /* Space below each notification */
-    padding: 8px 0;
-    border-bottom: 1px solid var(--border-color);
-    font-size: 0.95em;
+    margin: 5px 0;
+    padding-bottom: 5px;
+    border-bottom: 1px solid #eee;
 }
 #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,202 +1,241 @@
-// --- Existing Constants (remove theme button) ---
 const registerSection = document.getElementById('register-section');
 const loginSection = document.getElementById('login-section');
 const welcomeSection = document.getElementById('welcome-section');
-// ... other element constants ...
+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');
 const notificationsDiv = document.getElementById('notifications');
-const API_URL = '/api';
-// const themeToggleButton = document.getElementById('theme-toggle'); // REMOVE
 
-// --- Existing State Variables ---
+const API_URL = '/api'; // Use relative path
+
 let webSocket = null;
-let authToken = localStorage.getItem('authToken');
+let authToken = localStorage.getItem('authToken'); // Load token on script start
 
-// --- UI Control (showSection, setStatus - keep) ---
-// ... showSection and setStatus functions remain the same ...
+// --- UI Control ---
 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'; }
+    if (sectionToShow) {
+        sectionToShow.style.display = 'block';
+    } else {
+        loginSection.style.display = 'block'; // Default to login
+    }
 }
+
 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 (apiRequest - keep) ---
-// ... apiRequest function remains the same ...
+// --- API Calls ---
 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();
+        const data = await response.json(); // Try to parse JSON regardless of status
+
         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(`API Error to ${endpoint}:`, error); throw error; }
+            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
+    }
 }
 
 
-// --- WebSocket Handling (connect/disconnectWebSocket, displayNotificationError - keep) ---
-// ... connectWebSocket, disconnectWebSocket, displayNotificationError functions remain the same ...
+// --- WebSocket Handling ---
 function connectWebSocket(token) {
-    if (!token) { console.error("No token for WebSocket."); return; }
-    if (webSocket && webSocket.readyState === WebSocket.OPEN) { console.log("WS already open."); return; }
+    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)
     const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const wsUrl = `${wsProtocol}//${window.location.host}${API_URL}/ws/${token}`;
-    console.log("Connecting WebSocket:", wsUrl);
+    console.log("Attempting to connect WebSocket:", wsUrl);
+
+
     webSocket = new WebSocket(wsUrl);
+
     webSocket.onopen = (event) => {
-        console.log("WS opened:", event);
-        if (notificationsDiv.querySelector('p em')) { notificationsDiv.innerHTML = ''; }
+        console.log("WebSocket connection opened:", event);
+        // Clear placeholder message on successful connect
+        if (notificationsDiv.querySelector('p em')) {
+            notificationsDiv.innerHTML = '';
+        }
     };
+
     webSocket.onmessage = (event) => {
-        console.log("WS message received:", event.data);
+        console.log("WebSocket 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);
-                while (notificationsDiv.children.length > 10) { notificationsDiv.removeChild(notificationsDiv.lastChild); }
+                 // Limit number of messages shown (optional)
+                while (notificationsDiv.children.length > 10) {
+                    notificationsDiv.removeChild(notificationsDiv.lastChild);
+                }
+
             }
-        } catch (error) { console.error("WS message parse error:", error); }
+        } 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);
     };
-    webSocket.onerror = (event) => { console.error("WS error:", event); displayNotificationError("WebSocket error occurred."); };
+
     webSocket.onclose = (event) => {
-        console.log("WS closed:", event);
-        if (!event.wasClean) { displayNotificationError(`WebSocket disconnected (Code: ${event.code}). Refresh maybe needed.`); }
-        webSocket = null;
+        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);
+        }
     };
 }
+
 function disconnectWebSocket() {
-    if (webSocket) { console.log("Closing WS."); webSocket.close(); webSocket = null; }
-}
-function displayNotificationError(message) {
-    const p = document.createElement('p');
-    p.textContent = message;
-    p.style.color = 'orange';
-    p.style.fontWeight = 'bold';
-    notificationsDiv.insertBefore(p, notificationsDiv.firstChild);
+    if (webSocket) {
+        console.log("Closing WebSocket connection.");
+        webSocket.close();
+        webSocket = null;
+    }
 }
 
-
-// --- Authentication Logic (handleLogin, handleRegister, showWelcomePage, handleLogout - keep) ---
-// ... handleLogin, handleRegister, showWelcomePage, handleLogout functions remain the same ...
+// --- Authentication Logic ---
 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);
-            setStatus(loginStatus, "");
-            await showWelcomePage();
-        } else { throw new Error("No token received."); }
-    } catch (error) { setStatus(loginStatus, `Login failed: ${error.message}`); }
+            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}`);
+    }
 }
+
 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();
-        showSection('login-section');
-     } catch (error) { setStatus(registerStatus, `Registration failed: ${error.message}`); }
+        registerForm.reset(); // Clear form
+        showSection('login-section'); // Switch to login
+     } 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);
-    } catch (error) { console.error("Failed to fetch user:", error); handleLogout(); }
+        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();
+    }
 }
+
 function handleLogout() {
     authToken = null;
     localStorage.removeItem('authToken');
     disconnectWebSocket();
-    setStatus(loginStatus, "");
-    notificationsDiv.innerHTML = '<p><em>Notifications will appear here...</em></p>';
+    setStatus(loginStatus, ""); // Clear any previous login errors
     showSection('login-section');
 }
 
-// --- Theme Handling ---
-function applyTheme(isDarkMode) {
-    if (isDarkMode) {
-        document.body.classList.add('dark-mode');
-        console.log("Applied dark theme.");
-    } else {
-        document.body.classList.remove('dark-mode');
-        console.log("Applied light theme.");
-    }
-}
 
-// --- Event Listeners (Forms & Logout) ---
+// --- 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 >= 8 characters."); return; }
+    if (password !== confirmPassword) {
+        setStatus(registerStatus, "Passwords do not match.");
+        return;
+    }
+    if (password.length < 8) {
+         setStatus(registerStatus, "Password must be at least 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);
 });
+
 logoutButton.addEventListener('click', handleLogout);
-// themeToggleButton.addEventListener('click', toggleTheme); // REMOVE
 
 
 // --- Initial Page Load Logic ---
 document.addEventListener('DOMContentLoaded', () => {
-    // System Theme Detection
-    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
-
-    // Apply theme based on current system preference
-    applyTheme(prefersDarkScheme.matches);
-
-    // Listen for changes in system theme preference
-    try {
-        // Newer browsers
-        prefersDarkScheme.addEventListener('change', (e) => {
-            console.log("System theme preference changed.");
-            applyTheme(e.matches);
-        });
-    } catch (e1) {
-        try {
-            // Older browsers (legacy method)
-            prefersDarkScheme.addListener((e) => {
-                 console.log("System theme preference changed (legacy listener).");
-                 applyTheme(e.matches);
-            });
-        } catch (e2) {
-            console.error("Browser doesn't support dynamic theme changes via matchMedia listeners.");
-        }
-    }
-
-    // Check auth token after setting theme
     if (authToken) {
-        console.log("Token found, showing welcome page.");
-        showWelcomePage();
+        console.log("Token found, attempting to show welcome page.");
+        showWelcomePage(); // Try to fetch user info and show welcome
     } else {
         console.log("No token found, showing login page.");
-        showSection('login-section');
+        showSection('login-section'); // Show login if no token
     }
 });

templates/index.html

@@ -7,65 +7,49 @@
     <link rel="stylesheet" href="/static/css/style.css">
 </head>
 <body>
-    <div class="container">
-        <div class="header">
-            <h1>Auth & Notification App</h1>
-            <!-- REMOVE THE BUTTON HERE -->
-            <!-- <button id="theme-toggle">Toggle Theme</button> -->
-        </div>
+    <h1>Auth & Notification App</h1>
 
-        <!-- 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>
+    <!-- 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>
 
-        <!-- 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>
+    <!-- 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>
 
-        <!-- 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>
+    <!-- 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>
         </div>
-    </div><!-- end container -->
+    </div>
 
     <script src="/static/js/script.js"></script>
 </body>