3

api.php

@@ -0,0 +1,159 @@
+<?php
+session_start();
+require_once __DIR__ . '/db/config.php';
+
+if (!isset($_SESSION['user_id'])) {
+    http_response_code(401);
+    echo json_encode(['error' => 'User not authenticated']);
+    exit;
+}
+
+$action = $_GET['action'] ?? '';
+
+switch ($action) {
+    case 'search_users':
+        search_users();
+        break;
+    case 'start_conversation':
+        start_conversation();
+        break;
+    case 'get_conversations':
+        get_conversations();
+        break;
+    case 'get_messages':
+        get_messages();
+        break;
+    case 'send_message':
+        send_message();
+        break;
+    default:
+        http_response_code(400);
+        echo json_encode(['error' => 'Invalid action']);
+        exit;
+}
+
+function search_users() {
+    $term = $_GET['term'] ?? '';
+    if (empty($term)) {
+        echo json_encode([]);
+        exit;
+    }
+
+    $pdo = db();
+    $stmt = $pdo->prepare("SELECT id, username FROM users WHERE username LIKE ? AND id != ?");
+    $stmt->execute(['%' . $term . '%', $_SESSION['user_id']]);
+    $users = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+    header('Content-Type: application/json');
+    echo json_encode($users);
+}
+
+function start_conversation() {
+    $recipient_id = $_POST['recipient_id'] ?? '';
+    if (empty($recipient_id)) {
+        http_response_code(400);
+        echo json_encode(['error' => 'Recipient ID is required']);
+        exit;
+    }
+
+    $user_id = $_SESSION['user_id'];
+
+    $pdo = db();
+
+    // Check if a conversation already exists between the two users
+    $stmt = $pdo->prepare("
+        SELECT c.id
+        FROM conversations c
+        JOIN conversation_participants cp1 ON c.id = cp1.conversation_id
+        JOIN conversation_participants cp2 ON c.id = cp2.conversation_id
+        WHERE cp1.user_id = ? AND cp2.user_id = ?
+    ");
+    $stmt->execute([$user_id, $recipient_id]);
+    $conversation = $stmt->fetch(PDO::FETCH_ASSOC);
+
+    if ($conversation) {
+        // Conversation already exists
+        header('Content-Type: application/json');
+        echo json_encode(['conversation_id' => $conversation['id']]);
+        exit;
+    }
+
+    // Create a new conversation
+    $pdo->beginTransaction();
+    try {
+        $stmt = $pdo->prepare("INSERT INTO conversations () VALUES ()");
+        $stmt->execute();
+        $conversation_id = $pdo->lastInsertId();
+
+        $stmt = $pdo->prepare("INSERT INTO conversation_participants (conversation_id, user_id) VALUES (?, ?), (?, ?)");
+        $stmt->execute([$conversation_id, $user_id, $conversation_id, $recipient_id]);
+
+        $pdo->commit();
+
+        header('Content-Type: application/json');
+        echo json_encode(['conversation_id' => $conversation_id]);
+    } catch (Exception $e) {
+        $pdo->rollBack();
+        http_response_code(500);
+        echo json_encode(['error' => 'Failed to create conversation']);
+    }
+}
+
+function get_conversations() {
+    $user_id = $_SESSION['user_id'];
+    $pdo = db();
+
+    $stmt = $pdo->prepare("
+        SELECT c.id, u.username, u.id as user_id
+        FROM conversations c
+        JOIN conversation_participants cp ON c.id = cp.conversation_id
+        JOIN users u ON u.id = cp.user_id
+        WHERE c.id IN (
+            SELECT conversation_id
+            FROM conversation_participants
+            WHERE user_id = ?
+        ) AND cp.user_id != ?
+    ");
+    $stmt->execute([$user_id, $user_id]);
+    $conversations = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+    header('Content-Type: application/json');
+    echo json_encode($conversations);
+}
+
+function get_messages() {
+    $conversation_id = $_GET['conversation_id'] ?? '';
+    if (empty($conversation_id)) {
+        http_response_code(400);
+        echo json_encode(['error' => 'Conversation ID is required']);
+        exit;
+    }
+
+    $pdo = db();
+    $stmt = $pdo->prepare("SELECT * FROM messages WHERE conversation_id = ? ORDER BY created_at ASC");
+    $stmt->execute([$conversation_id]);
+    $messages = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+    header('Content-Type: application/json');
+    echo json_encode($messages);
+}
+
+function send_message() {
+    $conversation_id = $_POST['conversation_id'] ?? '';
+    $message_text = $_POST['message_text'] ?? '';
+
+    if (empty($conversation_id) || empty($message_text)) {
+        http_response_code(400);
+        echo json_encode(['error' => 'Conversation ID and message text are required']);
+        exit;
+    }
+
+    $sender_id = $_SESSION['user_id'];
+
+    $pdo = db();
+    $stmt = $pdo->prepare("INSERT INTO messages (conversation_id, sender_id, message_text) VALUES (?, ?, ?)");
+    $stmt->execute([$conversation_id, $sender_id, $message_text]);
+
+    header('Content-Type: application/json');
+    echo json_encode(['success' => true]);
+}

assets/css/custom.css

@@ -0,0 +1,178 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+body {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    background-color: #f3f4f6;
+    overflow: hidden;
+}
+
+.chat-app {
+    display: flex;
+    height: 100vh;
+}
+
+.sidebar {
+    width: 320px;
+    flex-shrink: 0;
+    background-color: #ffffff;
+    border-right: 1px solid #e5e7eb;
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.sidebar-search {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.conversation-list {
+    flex-grow: 1;
+    overflow-y: auto;
+}
+
+.conversation-item {
+    display: flex;
+    align-items: center;
+    padding: 1rem 1.5rem;
+    cursor: pointer;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.conversation-item:hover {
+    background-color: #f9fafb;
+}
+
+.conversation-item.active {
+    background-color: #eff6ff;
+    border-right: 3px solid #3b82f6;
+}
+
+.avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 9999px;
+    object-fit: cover;
+    margin-right: 1rem;
+}
+
+.avatar-sm {
+    width: 40px;
+    height: 40px;
+}
+
+.conversation-info .name {
+    font-weight: 600;
+    color: #111827;
+}
+
+.conversation-info .last-message {
+    font-size: 0.875rem;
+    color: #6b7280;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 150px;
+}
+
+.chat-view {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-header {
+    display: flex;
+    align-items: center;
+    padding: 1rem 1.5rem;
+    background-color: #ffffff;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.chat-header .name {
+    font-weight: 600;
+}
+
+.chat-header .status {
+    font-size: 0.875rem;
+    color: #6b7280;
+}
+
+.chat-body {
+    flex-grow: 1;
+    padding: 1.5rem;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.message {
+    display: flex;
+    margin-bottom: 1rem;
+    max-width: 75%;
+}
+
+.message-bubble {
+    padding: 0.75rem 1rem;
+    border-radius: 0.75rem;
+    font-size: 0.9rem;
+    line-height: 1.5;
+}
+
+.message.sent {
+    align-self: flex-end;
+    flex-direction: row-reverse;
+}
+
+.message.sent .message-bubble {
+    background-color: #3b82f6;
+    color: #ffffff;
+    border-bottom-right-radius: 0.25rem;
+}
+
+.message.received {
+    align-self: flex-start;
+}
+
+.message.received .message-bubble {
+    background-color: #ffffff;
+    color: #111827;
+    border: 1px solid #e5e7eb;
+    border-bottom-left-radius: 0.25rem;
+}
+
+.message-time {
+    font-size: 0.75rem;
+    color: #9ca3af;
+    align-self: flex-end;
+    margin: 0 0.5rem;
+}
+
+.chat-footer {
+    padding: 1rem 1.5rem;
+    background-color: #ffffff;
+    border-top: 1px solid #e5e7eb;
+}
+
+.avatar-placeholder {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background-color: #e9ecef;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    color: #6c757d;
+}
+
+.avatar-placeholder.avatar-sm {
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+}

assets/js/main.js

@@ -0,0 +1,191 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const chatForm = document.getElementById('chat-form');
+    const messageInput = document.getElementById('message-input');
+    const userSearchForm = document.getElementById('user-search-form');
+    const userSearchInput = document.getElementById('user-search-input');
+    const searchResultsContainer = document.getElementById('search-results');
+    const conversationListContainer = document.getElementById('conversation-list-container');
+    const chatBody = document.querySelector('.chat-body');
+    const chatHeaderName = document.querySelector('.chat-header .name');
+    const chatHeaderStatus = document.querySelector('.chat-header .status');
+
+    let currentConversationId = null;
+
+    if (chatForm) {
+        chatForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const message = messageInput.value.trim();
+            if (message && currentConversationId) {
+                sendMessage(currentConversationId, message);
+            }
+        });
+    }
+
+    if (userSearchForm) {
+        userSearchForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const searchTerm = userSearchInput.value.trim();
+            if (searchTerm) {
+                searchUsers(searchTerm);
+            }
+        });
+    }
+
+    function searchUsers(term) {
+        fetch(`api.php?action=search_users&term=${term}`)
+            .then(response => response.json())
+            .then(users => {
+                displaySearchResults(users);
+            })
+            .catch(error => console.error('Error searching users:', error));
+    }
+
+    function displaySearchResults(users) {
+        searchResultsContainer.innerHTML = '';
+        if (users.length === 0) {
+            searchResultsContainer.innerHTML = '<p class="text-center text-muted p-4">No users found.</p>';
+            return;
+        }
+
+        users.forEach(user => {
+            const userElement = document.createElement('div');
+            userElement.classList.add('conversation-item');
+            userElement.dataset.userId = user.id;
+            userElement.innerHTML = `
+                <div class="avatar-placeholder me-3">
+                    <i class="bi bi-person-fill"></i>
+                </div>
+                <div class="conversation-info">
+                    <h6 class="name mb-0">${user.username}</h6>
+                </div>
+            `;
+            userElement.addEventListener('click', () => {
+                startConversation(user.id);
+            });
+            searchResultsContainer.appendChild(userElement);
+        });
+    }
+
+    function startConversation(recipientId) {
+        const formData = new FormData();
+        formData.append('recipient_id', recipientId);
+
+        fetch('api.php?action=start_conversation', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.conversation_id) {
+                loadMessages(data.conversation_id);
+                userSearchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                loadConversations();
+            } else {
+                console.error('Failed to start conversation:', data.error);
+            }
+        })
+        .catch(error => console.error('Error starting conversation:', error));
+    }
+
+    function loadConversations() {
+        fetch('api.php?action=get_conversations')
+            .then(response => response.json())
+            .then(conversations => {
+                displayConversations(conversations);
+            })
+            .catch(error => console.error('Error loading conversations:', error));
+    }
+
+    function displayConversations(conversations) {
+        conversationListContainer.innerHTML = '';
+        if (conversations.length === 0) {
+            conversationListContainer.innerHTML = '<p class="text-center text-muted p-4">No conversations yet.</p>';
+            return;
+        }
+
+        conversations.forEach(conversation => {
+            const conversationElement = document.createElement('div');
+            conversationElement.classList.add('conversation-item');
+            conversationElement.dataset.conversationId = conversation.id;
+            conversationElement.dataset.recipientId = conversation.user_id;
+            conversationElement.innerHTML = `
+                <div class="avatar-placeholder me-3">
+                    <i class="bi bi-person-fill"></i>
+                </div>
+                <div class="conversation-info">
+                    <h6 class="name mb-0">${conversation.username}</h6>
+                </div>
+            `;
+            conversationElement.addEventListener('click', () => {
+                loadMessages(conversation.id, conversation.username);
+            });
+            conversationListContainer.appendChild(conversationElement);
+        });
+    }
+
+    function loadMessages(conversationId, username) {
+        currentConversationId = conversationId;
+        chatHeaderName.textContent = username;
+        chatHeaderStatus.textContent = 'Online'; // Placeholder
+
+        fetch(`api.php?action=get_messages&conversation_id=${conversationId}`)
+            .then(response => response.json())
+            .then(messages => {
+                displayMessages(messages);
+            })
+            .catch(error => console.error('Error loading messages:', error));
+    }
+
+    function displayMessages(messages) {
+        chatBody.innerHTML = '';
+        if (messages.length === 0) {
+            chatBody.innerHTML = '<div class="text-center text-muted" style="margin-top: auto; margin-bottom: auto;"><p>No messages yet. Say hi!</p></div>';
+            return;
+        }
+
+        messages.forEach(message => {
+            const messageElement = document.createElement('div');
+            const isSent = message.sender_id == window.userId;
+            messageElement.classList.add('message', isSent ? 'sent' : 'received');
+            messageElement.innerHTML = `
+                <div class="message-bubble">${message.message_text}</div>
+                <div class="message-time">${new Date(message.created_at).toLocaleTimeString()}</div>
+            `;
+            chatBody.appendChild(messageElement);
+        });
+        chatBody.scrollTop = chatBody.scrollHeight;
+    }
+
+    function sendMessage(conversationId, messageText) {
+        const formData = new FormData();
+        formData.append('conversation_id', conversationId);
+        formData.append('message_text', messageText);
+
+        fetch('api.php?action=send_message', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                messageInput.value = '';
+                // Add message to UI immediately
+                const messageElement = document.createElement('div');
+                messageElement.classList.add('message', 'sent');
+                messageElement.innerHTML = `
+                    <div class="message-bubble">${messageText}</div>
+                    <div class="message-time">Just now</div>
+                `;
+                chatBody.appendChild(messageElement);
+                chatBody.scrollTop = chatBody.scrollHeight;
+            } else {
+                console.error('Failed to send message:', data.error);
+            }
+        })
+        .catch(error => console.error('Error sending message:', error));
+    }
+
+    // Load conversations on page load
+    loadConversations();
+});

db/migrate.php

@@ -0,0 +1,38 @@
+<?php
+require_once __DIR__ . '/config.php';
+
+function run_migrations() {
+    try {
+        $pdo = db();
+        
+        // Create migrations table if it doesn't exist
+        $pdo->exec("CREATE TABLE IF NOT EXISTS migrations (id INT AUTO_INCREMENT PRIMARY KEY, migration_name VARCHAR(255) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP)");
+
+        // Get all migration files
+        $migration_files = glob(__DIR__ . '/migrations/*.sql');
+        sort($migration_files);
+
+        // Get already run migrations
+        $stmt = $pdo->query("SELECT migration_name FROM migrations");
+        $run_migrations = $stmt->fetchAll(PDO::FETCH_COLUMN);
+
+        foreach ($migration_files as $migration_file) {
+            $migration_name = basename($migration_file);
+
+            if (!in_array($migration_name, $run_migrations)) {
+                $sql = file_get_contents($migration_file);
+                $pdo->exec($sql);
+
+                $stmt = $pdo->prepare("INSERT INTO migrations (migration_name) VALUES (?)");
+                $stmt->execute([$migration_name]);
+
+                echo "Migration '" . $migration_name . "' applied successfully.\n";
+            }
+        }
+
+    } catch (PDOException $e) {
+        die("Migration failed: " . $e->getMessage() . "\n");
+    }
+}
+
+run_migrations();

db/migrations/000_create_migrations_table.sql

@@ -0,0 +1,5 @@
+CREATE TABLE IF NOT EXISTS migrations (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    migration_name VARCHAR(255) NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);

db/migrations/001_create_users_table.sql

@@ -0,0 +1,6 @@
+CREATE TABLE IF NOT EXISTS users (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    username VARCHAR(50) NOT NULL UNIQUE,
+    password_hash VARCHAR(255) NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);

db/migrations/002_create_conversations_table.sql

@@ -0,0 +1,4 @@
+CREATE TABLE IF NOT EXISTS conversations (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);

db/migrations/003_create_conversation_participants_table.sql

@@ -0,0 +1,7 @@
+CREATE TABLE IF NOT EXISTS conversation_participants (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    conversation_id INT NOT NULL,
+    user_id INT NOT NULL,
+    FOREIGN KEY (conversation_id) REFERENCES conversations(id),
+    FOREIGN KEY (user_id) REFERENCES users(id)
+);

db/migrations/004_create_messages_table.sql

@@ -0,0 +1,9 @@
+CREATE TABLE IF NOT EXISTS messages (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    conversation_id INT NOT NULL,
+    sender_id INT NOT NULL,
+    message_text TEXT NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (conversation_id) REFERENCES conversations(id),
+    FOREIGN KEY (sender_id) REFERENCES users(id)
+);

index.php

@@ -1,150 +1,118 @@
 <?php
-declare(strict_types=1);
+session_start();
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
 
-$phpVersion = PHP_VERSION;
+// If the user is not logged in, redirect to the login page
-$now = date('Y-m-d H:i:s');
+if (!isset($_SESSION['user_id'])) {
+    header('Location: login.php');
+    exit;
+}
 ?>
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
+    <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>New Style</title>
+    
-<?php
+    <!-- SEO & Meta Tags -->
-// Read project preview data from environment
+    <title>Message NOW</title>
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
+    <meta name="description" content="A modern messaging app built with Flatlogic Generator.">
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
+    <meta name="keywords" content="messaging app, chat, real-time communication, direct message, group chat, secure messaging, instant messenger, flatlogic">
-?>
+    
-<?php if ($projectDescription): ?>
+    <!-- Open Graph / Facebook -->
-  <!-- Meta description -->
+    <meta property="og:type" content="website">
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
+    <meta property="og:title" content="Message NOW">
-  <!-- Open Graph meta tags -->
+    <meta property="og:description" content="A modern messaging app built with Flatlogic Generator.">
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
+    <meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
-  <!-- Twitter meta tags -->
+
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
+    <!-- Twitter -->
-<?php endif; ?>
+    <meta property="twitter:card" content="summary_large_image">
-<?php if ($projectImageUrl): ?>
+    <meta property="twitter:title" content="Message NOW">
-  <!-- Open Graph image -->
+    <meta property="twitter:description" content="A modern messaging app built with Flatlogic Generator.">
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
+    <meta property="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
-  <!-- Twitter image -->
+
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
+    <!-- Favicon -->
-<?php endif; ?>
+    <link rel="icon" href="https://flatlogic.com/favicon.ico" type="image/x-icon">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
+
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <script>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
+        window.userId = <?php echo $_SESSION['user_id']; ?>;
-  <style>
+    </script>
-    :root {
+
-      --bg-color-start: #6a11cb;
+    <!-- Styles -->
-      --bg-color-end: #2575fc;
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-      --text-color: #ffffff;
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
-      --card-bg-color: rgba(255, 255, 255, 0.01);
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
 </head>
 <body>
-  <main>
+
-    <div class="card">
+    <div class="chat-app">
-      <h1>Analyzing your requirements and generating your website…</h1>
+        <!-- Sidebar -->
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
+        <aside class="sidebar">
-        <span class="sr-only">Loading…</span>
+            <div class="sidebar-header d-flex align-items-center">
-      </div>
+                <div class="avatar-placeholder me-3">
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
+                    <i class="bi bi-person-fill"></i>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
+                </div>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+                <div>
+                    <h5 class="mb-0 fw-bold">You</h5>
+                    <p class="text-muted mb-0 small">My status message...</p>
+                </div>
+            </div>
+            <div class="sidebar-search">
+                <form id="user-search-form">
+                    <input type="text" id="user-search-input" class="form-control rounded-pill" placeholder="Search for users...">
+                </form>
+            </div>
+            <div id="search-results" class="conversation-list">
+                <!-- Search results will be injected here -->
+            </div>
+            <div class="conversation-list" id="conversation-list-container">
+                <div class="text-center text-muted p-4">
+                    <i class="bi bi-chat-dots fs-2"></i>
+                    <p class="mt-2">No conversations yet.</p>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Main Chat View -->
+        <main class="chat-view">
+            <!-- Chat Header -->
+            <header class="chat-header">
+                <div class="d-flex align-items-center">
+                    <div class="avatar-placeholder avatar-sm me-3">
+                        <i class="bi bi-person-fill"></i>
+                    </div>
+                    <div>
+                        <h5 class="mb-0 name">Select a Conversation</h5>
+                        <p class="mb-0 status text-muted">Offline</p>
+                    </div>
+                </div>
+                <div class="ms-auto">
+                    <button class="btn btn-light rounded-circle" disabled><i class="bi bi-telephone"></i></button>
+                    <button class="btn btn-light rounded-circle mx-2" disabled><i class="bi bi-camera-video"></i></button>
+                    <button class="btn btn-light rounded-circle" disabled><i class="bi bi-three-dots-vertical"></i></button>
+                </div>
+            </header>
+
+            <!-- Chat Body -->
+            <div class="chat-body">
+                <div class="text-center text-muted" style="margin-top: auto; margin-bottom: auto;">
+                    <i class="bi bi-wechat fs-1"></i>
+                    <h4 class="mt-3">Welcome to Message NOW</h4>
+                    <p>Select a conversation to start messaging.</p>
+                </div>
+            </div>
+
+            <!-- Chat Footer -->
+            <footer class="chat-footer">
+                <form id="chat-form" class="d-flex align-items-center">
+                    <button class="btn btn-light rounded-circle me-3" type="button"><i class="bi bi-paperclip"></i></button>
+                    <input type="text" id="message-input" class="form-control form-control-lg border-0" placeholder="Type a message..." autocomplete="off">
+                    <button class="btn btn-primary rounded-circle ms-3" type="submit" style="width: 48px; height: 48px;"><i class="bi bi-send-fill"></i></button>
+                </form>
+            </footer>
+        </main>
     </div>
-  </main>
+
-  <footer>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
-  </footer>
 </body>
-</html>
+</html>

login.php

@@ -0,0 +1,69 @@
+<?php
+session_start();
+require_once 'db/config.php';
+
+$error = '';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $username = trim($_POST['username']);
+    $password = $_POST['password'];
+
+    if (empty($username) || empty($password)) {
+        $error = 'Please enter both username and password.';
+    } else {
+        try {
+            $pdo = db();
+            $stmt = $pdo->prepare('SELECT id, username, password_hash FROM users WHERE username = ?');
+            $stmt->execute([$username]);
+            $user = $stmt->fetch();
+
+            if ($user && password_verify($password, $user['password_hash'])) {
+                $_SESSION['user_id'] = $user['id'];
+                $_SESSION['username'] = $user['username'];
+                header('Location: index.php');
+                exit;
+            } else {
+                $error = 'Invalid username or password.';
+            }
+        } catch (PDOException $e) {
+            $error = 'Database error: ' . $e->getMessage();
+        }
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css">
+</head>
+<body>
+    <div class="container d-flex justify-content-center align-items-center vh-100">
+        <div class="card" style="width: 24rem;">
+            <div class="card-body">
+                <h1 class="card-title text-center mb-4">Login</h1>
+                <?php if ($error): ?>
+                    <div class="alert alert-danger"><?php echo htmlspecialchars($error); ?></div>
+                <?php endif; ?>
+                <form action="login.php" method="POST">
+                    <div class="mb-3">
+                        <label for="username" class="form-label">Username</label>
+                        <input type="text" class="form-control" id="username" name="username" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="password" class="form-label">Password</label>
+                        <input type="password" class="form-control" id="password" name="password" required>
+                    </div>
+                    <button type="submit" class="btn btn-primary w-100">Log In</button>
+                </form>
+                <div class="text-center mt-3">
+                    <p>Don't have an account? <a href="signup.php">Sign Up</a></p>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

signup.php

@@ -0,0 +1,74 @@
+<?php
+session_start();
+require_once 'db/config.php';
+
+$error = '';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $username = trim($_POST['username']);
+    $password = $_POST['password'];
+
+    if (empty($username) || empty($password)) {
+        $error = 'Please enter both username and password.';
+    } else {
+        try {
+            $pdo = db();
+            // Check if username already exists
+            $stmt = $pdo->prepare('SELECT id FROM users WHERE username = ?');
+            $stmt->execute([$username]);
+            if ($stmt->fetch()) {
+                $error = 'This username is already taken.';
+            } else {
+                // Hash password and insert user
+                $password_hash = password_hash($password, PASSWORD_DEFAULT);
+                $stmt = $pdo->prepare('INSERT INTO users (username, password_hash) VALUES (?, ?)');
+                $stmt->execute([$username, $password_hash]);
+
+                // Log the user in and redirect
+                $_SESSION['user_id'] = $pdo->lastInsertId();
+                $_SESSION['username'] = $username;
+                header('Location: index.php');
+                exit;
+            }
+        } catch (PDOException $e) {
+            $error = 'Database error: ' . $e->getMessage();
+        }
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign Up</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css">
+</head>
+<body>
+    <div class="container d-flex justify-content-center align-items-center vh-100">
+        <div class="card" style="width: 24rem;">
+            <div class="card-body">
+                <h1 class="card-title text-center mb-4">Create Account</h1>
+                <?php if ($error): ?>
+                    <div class="alert alert-danger"><?php echo htmlspecialchars($error); ?></div>
+                <?php endif; ?>
+                <form action="signup.php" method="POST">
+                    <div class="mb-3">
+                        <label for="username" class="form-label">Username</label>
+                        <input type="text" class="form-control" id="username" name="username" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="password" class="form-label">Password</label>
+                        <input type="password" class="form-control" id="password" name="password" required>
+                    </div>
+                    <button type="submit" class="btn btn-primary w-100">Sign Up</button>
+                </form>
+                <div class="text-center mt-3">
+                    <p>Already have an account? <a href="login.php">Log In</a></p>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>