Spaces:

samirerty
/

anycoder-c8605d5f

Running

App Files Files Community

samirerty commited on Feb 1

Commit

5074056

verified ·

1 Parent(s): c9c664a

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +1317 -19

index.html CHANGED Viewed

@@ -1,19 +1,1317 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+The user wants to convert the provided HTML/CSS/JavaScript chat room demo into a real working application using HTML, CSS, PHP, and a database (implied by "real" and "host").
+Key requirements:
+1. Convert the frontend demo to a real backend application
+2. Use PHP for backend
+3. Use MySQL/MariaDB for database (implied by "real")
+4. Keep the Persian (Farsi) language and RTL layout
+5. Maintain the modern UI design from the original code
+6. Make it functional (real login/register, real chat messages stored in DB)
+7. Should be deployable on a web host
+Since I need to provide a single HTML file as per system instructions, but the user is asking for PHP/MySQL backend, I need to provide:
+1. The complete PHP code structure
+2. SQL schema
+3. Instructions on how to set it up
+4. But since I can only provide one file, I should provide a comprehensive solution that includes all PHP files concatenated or clearly separated with comments, plus the SQL setup.
+Wait, the system says "ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE" but the user is asking for PHP. This is a conflict. However, looking at the instructions carefully: "Generate complete, working HTML code that can be run immediately."
+But PHP cannot run in a single HTML file in the browser. I need to interpret this as: provide the complete source code for the application, which happens to be PHP files. Since I must output a single file, I'll provide a comprehensive solution with clear file separators (like comments indicating different files) containing all the PHP, SQL, and frontend code needed.
+Actually, looking at the system prompt again: "Generate complete, working HTML code that can be run immediately." This suggests the user wants code that works immediately. But PHP requires a server.
+Given the constraints, I should:
+1. Provide the complete PHP application code with multiple files indicated
+2. Provide the SQL schema
+3. Provide instructions
+4. But keep it as one text block/file with clear separators
+Or, I could create a single-file PHP solution that handles everything (routing, database setup, frontend) in one index.php file. This would technically be a single file that can run on a PHP host.
+Yes, that's the best approach for this constraint. I'll create a single PHP file (index.php) that:
+- Sets up the database on first run
+- Handles all backend logic (auth, chat CRUD)
+- Serves the frontend HTML/CSS/JS
+- Uses AJAX/Fetch for real-time-like updates (polling)
+Features to implement:
+1. User registration/login with PHP sessions
+2. MySQL database for users, rooms, messages
+3. Real chat functionality (messages stored in DB)
+4. Multiple rooms support
+5. Online status tracking
+6. Responsive design (maintain the original beautiful UI)
+7. Security: Prepared statements, password hashing, XSS protection
+Database schema:
+- users (id, username, phone, password, avatar, status, last_active)
+- rooms (id, name, type, created_by)
+- messages (id, room_id, user_id, message, created_at)
+- room_members (id, room_id, user_id, joined_at)
+Since it's one file, I'll use a "setup mode" - if tables don't exist, create them.
+For real-time feel without WebSockets (which require separate server), I'll use polling every 3 seconds.
+Structure of the single PHP file:
+1. PHP Backend Logic (session start, db connection, request handlers)
+2. Database setup (create tables if not exist)
+3. API endpoints (handled via GET/POST parameters)
+4. HTML/CSS/JS Frontend (the beautiful UI from original, adapted for real backend)
+Security considerations:
+- Use PDO with prepared statements
+- Password_hash() for passwords
+- htmlspecialchars() for output
+- CSRF tokens
+- Input validation
+Let's build this step by step:
+Database connection config (at top):
+- Define DB credentials (user will change these)
+- Try to connect, if fail show setup instructions
+Routing:
+- If $_GET['action'] exists, handle API call
+- Else show the app interface
+API Endpoints:
+- login
+- register
+- get_messages
+- send_message
+- get_rooms
+- create_room
+- logout
+Frontend:
+- Same beautiful Persian UI as original
+- But now AJAX calls to the same file with ?action=...
+- Poll for new messages
+- Show real user data from session
+I'll maintain the exact styling from the user's provided code but adapt the JavaScript to work with the PHP backend.
+Since it's one file, I need to be careful about output buffering and headers.
+Let me write the code:
+File: index.php (all-in-one)
+Sections:
+1. PHP Logic (top)
+   - Session start
+   - DB config
+   - Helper functions
+   - Request routing
+2. Database Setup
+   - Create tables if not exist
+3. API Handlers
+   - JSON responses for AJAX
+4. HTML Output (if not API call)
+   - Same structure as original but with PHP session integration
+The UI should look almost identical to what the user provided, but functional.
+Key adaptations:
+- Login form submits to ?action=login via fetch
+- Register form submits to ?action=register
+- Messages load from ?action=get_messages
+- Send message to ?action=send_message
+- Auto-refresh messages every 2-3 seconds
+I'll include the "Built with anycoder" link as required.
+Let's code this comprehensive solution. </think> Here is the complete **real chat application** in a single PHP file (`index.php`). This includes the database setup, backend API, and the beautiful Persian UI you provided.
+**Instructions:**
+1. Save this as `index.php`
+2. Update the database credentials at the top (host, dbname, user, pass)
+3. Upload to your PHP host (PHP 7.4+ with MySQL/MariaDB)
+4. Visit the page - it will auto-create the database tables on first run
+```php
+<?php
+// ============================================
+// چت روم واقعی - Real Chat Room
+// Built with anycoder: https://huggingface.co/spaces/akhaliq/anycoder
+// ============================================
+session_start();
+// Database Configuration - تنظیمات دیتابیس
+define('DB_HOST', 'localhost');
+define('DB_NAME', 'chatroom_db');
+define('DB_USER', 'root');
+define('DB_PASS', '');
+// Connect to Database
+try {
+    $pdo = new PDO("mysql:host=".DB_HOST.";dbname=".DB_NAME.";charset=utf8mb4", DB_USER, DB_PASS);
+    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+    $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
+} catch(PDOException $e) {
+    die("Connection failed: " . $e->getMessage());
+}
+// Initialize Database Tables (Auto-setup on first run)
+function initDB($pdo) {
+    $pdo->exec("CREATE TABLE IF NOT EXISTS users (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        username VARCHAR(100) NOT NULL,
+        phone VARCHAR(20) UNIQUE NOT NULL,
+        password VARCHAR(255) NOT NULL,
+        avatar VARCHAR(10) DEFAULT '👤',
+        status ENUM('online', 'offline') DEFAULT 'offline',
+        last_active TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_persian_ci");
+    $pdo->exec("CREATE TABLE IF NOT EXISTS rooms (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        name VARCHAR(100) NOT NULL,
+        type ENUM('public', 'private') DEFAULT 'public',
+        created_by INT,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (created_by) REFERENCES users(id) ON DELETE SET NULL
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_persian_ci");
+    $pdo->exec("CREATE TABLE IF NOT EXISTS messages (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        room_id INT NOT NULL,
+        user_id INT NOT NULL,
+        message TEXT NOT NULL,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (room_id) REFERENCES rooms(id) ON DELETE CASCADE,
+        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_persian_ci");
+    $pdo->exec("CREATE TABLE IF NOT EXISTS room_members (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        room_id INT NOT NULL,
+        user_id INT NOT NULL,
+        joined_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        UNIQUE KEY unique_membership (room_id, user_id),
+        FOREIGN KEY (room_id) REFERENCES rooms(id) ON DELETE CASCADE,
+        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_persian_ci");
+    // Insert default public room if empty
+    $stmt = $pdo->query("SELECT COUNT(*) FROM rooms");
+    if ($stmt->fetchColumn() == 0) {
+        $pdo->prepare("INSERT INTO rooms (name, type) VALUES (?, ?)")
+            ->execute(['عمومی', 'public']);
+        $pdo->prepare("INSERT INTO rooms (name, type) VALUES (?, ?)")
+            ->execute(['خصوصی', 'private']);
+    }
+}
+// Initialize on first run
+initDB($pdo);
+// API Handler
+if (isset($_GET['action'])) {
+    header('Content-Type: application/json; charset=utf-8');
+    $action = $_GET['action'];
+    switch($action) {
+        case 'register':
+            handleRegister($pdo);
+            break;
+        case 'login':
+            handleLogin($pdo);
+            break;
+        case 'logout':
+            handleLogout();
+            break;
+        case 'get_rooms':
+            getRooms($pdo);
+            break;
+        case 'get_messages':
+            getMessages($pdo);
+            break;
+        case 'send_message':
+            sendMessage($pdo);
+            break;
+        case 'create_room':
+            createRoom($pdo);
+            break;
+        case 'get_online_users':
+            getOnlineUsers($pdo);
+            break;
+    }
+    exit;
+}
+// Backend Functions
+function handleRegister($pdo) {
+    $data = json_decode(file_get_contents('php://input'), true);
+    $username = trim($data['username'] ?? '');
+    $phone = trim($data['phone'] ?? '');
+    $password = $data['password'] ?? '';
+    if (empty($username) || empty($phone) || empty($password)) {
+        echo json_encode(['success' => false, 'error' => 'تمام فیلدها الزامی است']);
+        return;
+    }
+    if (!preg_match('/^09[0-9]{9}$/', $phone)) {
+        echo json_encode(['success' => false, 'error' => 'شماره موبایل نامعتبر است']);
+        return;
+    }
+    $hash = password_hash($password, PASSWORD_BCRYPT);
+    $avatar = mb_substr($username, 0, 1);
+    try {
+        $stmt = $pdo->prepare("INSERT INTO users (username, phone, password, avatar) VALUES (?, ?, ?, ?)");
+        $stmt->execute([$username, $phone, $hash, $avatar]);
+        $userId = $pdo->lastInsertId();
+        // Auto-join public rooms
+        $rooms = $pdo->query("SELECT id FROM rooms WHERE type = 'public'")->fetchAll();
+        $stmt = $pdo->prepare("INSERT INTO room_members (room_id, user_id) VALUES (?, ?)");
+        foreach ($rooms as $room) {
+            $stmt->execute([$room['id'], $userId]);
+        }
+        $_SESSION['user_id'] = $userId;
+        $_SESSION['username'] = $username;
+        $_SESSION['avatar'] = $avatar;
+        echo json_encode(['success' => true, 'user' => ['id' => $userId, 'username' => $username, 'avatar' => $avatar]]);
+    } catch (PDOException $e) {
+        if ($e->getCode() == 23000) {
+            echo json_encode(['success' => false, 'error' => 'این شماره موبایل قبلاً ثبت شده است']);
+        } else {
+            echo json_encode(['success' => false, 'error' => 'خطا در ثبت‌نام']);
+        }
+    }
+}
+function handleLogin($pdo) {
+    $data = json_decode(file_get_contents('php://input'), true);
+    $phone = trim($data['phone'] ?? '');
+    $password = $data['password'] ?? '';
+    $stmt = $pdo->prepare("SELECT * FROM users WHERE phone = ?");
+    $stmt->execute([$phone]);
+    $user = $stmt->fetch();
+    if ($user && password_verify($password, $user['password'])) {
+        $_SESSION['user_id'] = $user['id'];
+        $_SESSION['username'] = $user['username'];
+        $_SESSION['avatar'] = $user['avatar'];
+        // Update status
+        $pdo->prepare("UPDATE users SET status = 'online' WHERE id = ?")->execute([$user['id']]);
+        echo json_encode(['success' => true, 'user' => ['id' => $user['id'], 'username' => $user['username'], 'avatar' => $user['avatar']]]);
+    } else {
+        echo json_encode(['success' => false, 'error' => 'شماره موبایل یا رمز عبور اشتباه است']);
+    }
+}
+function handleLogout() {
+    if (isset($_SESSION['user_id'])) {
+        global $pdo;
+        $pdo->prepare("UPDATE users SET status = 'offline' WHERE id = ?")->execute([$_SESSION['user_id']]);
+    }
+    session_destroy();
+    echo json_encode(['success' => true]);
+}
+function getRooms($pdo) {
+    if (!isset($_SESSION['user_id'])) {
+        echo json_encode(['success' => false]);
+        return;
+    }
+    $stmt = $pdo->prepare("
+        SELECT r.*,
+               (SELECT COUNT(*) FROM room_members WHERE room_id = r.id) as member_count,
+               (SELECT COUNT(*) FROM users u
+                JOIN room_members rm ON u.id = rm.user_id
+                WHERE rm.room_id = r.id AND u.status = 'online') as online_count
+        FROM rooms r
+        JOIN room_members rm ON r.id = rm.room_id
+        WHERE rm.user_id = ?
+        ORDER BY r.id ASC
+    ");
+    $stmt->execute([$_SESSION['user_id']]);
+    $rooms = $stmt->fetchAll();
+    echo json_encode(['success' => true, 'rooms' => $rooms]);
+}
+function getMessages($pdo) {
+    if (!isset($_SESSION['user_id'])) {
+        echo json_encode(['success' => false]);
+        return;
+    }
+    $roomId = intval($_GET['room_id'] ?? 0);
+    $lastId = intval($_GET['last_id'] ?? 0);
+    // Verify membership
+    $check = $pdo->prepare("SELECT id FROM room_members WHERE room_id = ? AND user_id = ?");
+    $check->execute([$roomId, $_SESSION['user_id']]);
+    if (!$check->fetch()) {
+        echo json_encode(['success' => false, 'error' => 'Access denied']);
+        return;
+    }
+    $stmt = $pdo->prepare("
+        SELECT m.*, u.username, u.avatar
+        FROM messages m
+        JOIN users u ON m.user_id = u.id
+        WHERE m.room_id = ? AND m.id > ?
+        ORDER BY m.id ASC
+        LIMIT 50
+    ");
+    $stmt->execute([$roomId, $lastId]);
+    $messages = $stmt->fetchAll();
+    // Update last active
+    $pdo->prepare("UPDATE users SET last_active = NOW() WHERE id = ?")->execute([$_SESSION['user_id']]);
+    echo json_encode(['success' => true, 'messages' => $messages]);
+}
+function sendMessage($pdo) {
+    if (!isset($_SESSION['user_id'])) {
+        echo json_encode(['success' => false]);
+        return;
+    }
+    $data = json_decode(file_get_contents('php://input'), true);
+    $roomId = intval($data['room_id'] ?? 0);
+    $message = trim($data['message'] ?? '');
+    if (empty($message)) {
+        echo json_encode(['success' => false]);
+        return;
+    }
+    // Verify membership
+    $check = $pdo->prepare("SELECT id FROM room_members WHERE room_id = ? AND user_id = ?");
+    $check->execute([$roomId, $_SESSION['user_id']]);
+    if (!$check->fetch()) {
+        echo json_encode(['success' => false, 'error' => 'Access denied']);
+        return;
+    }
+    $stmt = $pdo->prepare("INSERT INTO messages (room_id, user_id, message) VALUES (?, ?, ?)");
+    $stmt->execute([$roomId, $_SESSION['user_id'], $message]);
+    echo json_encode(['success' => true, 'id' => $pdo->lastInsertId()]);
+}
+function createRoom($pdo) {
+    if (!isset($_SESSION['user_id'])) {
+        echo json_encode(['success' => false]);
+        return;
+    }
+    $data = json_decode(file_get_contents('php://input'), true);
+    $name = trim($data['name'] ?? '');
+    $type = $data['type'] ?? 'public';
+    if (empty($name)) {
+        echo json_encode(['success' => false, 'error' => 'نام اتاق الزامی است']);
+        return;
+    }
+    // Check room limit (max 3 per user)
+    $stmt = $pdo->prepare("SELECT COUNT(*) FROM rooms WHERE created_by = ?");
+    $stmt->execute([$_SESSION['user_id']]);
+    if ($stmt->fetchColumn() >= 3) {
+        echo json_encode(['success' => false, 'error' => 'حداکثر ۳ اتاق می‌توانید بسازید']);
+        return;
+    }
+    $stmt = $pdo->prepare("INSERT INTO rooms (name, type, created_by) VALUES (?, ?, ?)");
+    $stmt->execute([$name, $type, $_SESSION['user_id']]);
+    $roomId = $pdo->lastInsertId();
+    // Creator joins automatically
+    $pdo->prepare("INSERT INTO room_members (room_id, user_id) VALUES (?, ?)")
+        ->execute([$roomId, $_SESSION['user_id']]);
+    echo json_encode(['success' => true, 'room' => ['id' => $roomId, 'name' => $name, 'type' => $type]]);
+}
+function getOnlineUsers($pdo) {
+    $roomId = intval($_GET['room_id'] ?? 0);
+    $stmt = $pdo->prepare("
+        SELECT COUNT(*) as count
+        FROM users u
+        JOIN room_members rm ON u.id = rm.user_id
+        WHERE rm.room_id = ? AND u.status = 'online'
+        AND u.last_active > DATE_SUB(NOW(), INTERVAL 5 MINUTE)
+    ");
+    $stmt->execute([$roomId]);
+    $result = $stmt->fetch();
+    echo json_encode(['success' => true, 'count' => $result['count']]);
+}
+// Check if user is logged in
+$isLoggedIn = isset($_SESSION['user_id']);
+$currentUser = $isLoggedIn ? [
+    'id' => $_SESSION['user_id'],
+    'username' => $_SESSION['username'],
+    'avatar' => $_SESSION['avatar']
+] : null;
+?>
+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>چت روم واقعی | گفتگوی آنلاین</title>
+    <!-- Persian Font: Vazirmatn -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+    <!-- Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary: #6366f1;
+            --primary-dark: #4f46e5;
+            --secondary: #ec4899;
+            --background: #0f172a;
+            --surface: rgba(30, 41, 59, 0.7);
+            --text: #f8fafc;
+            --text-muted: #94a3b8;
+            --border: rgba(148, 163, 184, 0.1);
+            --success: #10b981;
+            --warning: #f59e0b;
+            --glass: rgba(255, 255, 255, 0.05);
+            --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+        }
+        [data-theme="light"] {
+            --background: #f1f5f9;
+            --surface: rgba(255, 255, 255, 0.8);
+            --text: #1e293b;
+            --text-muted: #64748b;
+            --border: rgba(148, 163, 184, 0.2);
+            --glass: rgba(255, 255, 255, 0.6);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        html {
+            scroll-behavior: smooth;
+        }
+        body {
+            font-family: 'Vazirmatn', sans-serif;
+            background: var(--background);
+            color: var(--text);
+            min-height: 100vh;
+            overflow-x: hidden;
+            transition: background 0.3s ease, color 0.3s ease;
+        }
+        /* Animated Background */
+        .bg-animation {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            overflow: hidden;
+        }
+        .bg-animation .circle {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(80px);
+            opacity: 0.4;
+            animation: float 20s infinite ease-in-out;
+        }
+        .circle:nth-child(1) {
+            width: 400px;
+            height: 400px;
+            background: var(--primary);
+            top: -100px;
+            right: -100px;
+            animation-delay: 0s;
+        }
+        .circle:nth-child(2) {
+            width: 300px;
+            height: 300px;
+            background: var(--secondary);
+            bottom: -50px;
+            left: -50px;
+            animation-delay: 5s;
+        }
+        .circle:nth-child(3) {
+            width: 250px;
+            height: 250px;
+            background: var(--success);
+            top: 50%;
+            left: 50%;
+            animation-delay: 10s;
+        }
+        @keyframes float {
+            0%, 100% { transform: translate(0, 0) scale(1); }
+            33% { transform: translate(30px, -50px) scale(1.1); }
+            66% { transform: translate(-20px, 20px) scale(0.9); }
+        }
+        /* Header */
+        header {
+            position: fixed;
+            top: 0;
+            width: 100%;
+            padding: 1rem 2rem;
+            background: var(--glass);
+            backdrop-filter: blur(12px);
+            border-bottom: 1px solid var(--border);
+            z-index: 1000;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 900;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .header-actions {
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+        }
+        .built-with {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            text-decoration: none;
+            padding: 0.5rem 1rem;
+            border-radius: 2rem;
+            background: var(--glass);
+            border: 1px solid var(--border);
+            transition: all 0.3s ease;
+        }
+        .built-with:hover {
+            background: var(--primary);
+            color: white;
+            transform: translateY(-2px);
+        }
+        .theme-toggle {
+            background: var(--glass);
+            border: 1px solid var(--border);
+            color: var(--text);
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+        .theme-toggle:hover {
+            transform: rotate(180deg);
+            background: var(--primary);
+        }
+        /* Main Container */
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 6rem 2rem 2rem;
+        }
+        /* Hero Section */
+        .hero {
+            text-align: center;
+            padding: 4rem 0;
+            animation: fadeInUp 1s ease;
+        }
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(30px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .hero h1 {
+            font-size: clamp(2rem, 5vw, 4rem);
+            font-weight: 900;
+            margin-bottom: 1rem;
+            line-height: 1.2;
+        }
+        .hero h1 .emoji {
+            display: inline-block;
+            animation: bounce 2s infinite;
+        }
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+        .subtitle {
+            font-size: 1.25rem;
+            color: var(--text-muted);
+            margin-bottom: 2rem;
+            font-weight: 300;
+        }
+        /* Features Grid */
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 2rem;
+            margin: 4rem 0;
+            perspective: 1000px;
+        }
+        .feature {
+            background: var(--surface);
+            backdrop-filter: blur(10px);
+            border: 1px solid var(--border);
+            border-radius: 1.5rem;
+            padding: 2rem;
+            text-align: center;
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            position: relative;
+            overflow: hidden;
+            cursor: pointer;
+        }
+        .feature::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.05));
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .feature:hover {
+            transform: translateY(-10px) rotateX(5deg);
+            box-shadow: var(--shadow);
+            border-color: var(--primary);
+        }
+        .feature:hover::before {
+            opacity: 1;
+        }
+        .icon {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            display: inline-block;
+            transition: transform 0.3s;
+        }
+        .feature:hover .icon {
+            transform: scale(1.2) rotate(10deg);
+        }
+        .feature h3 {
+            font-size: 1.25rem;
+            margin-bottom: 0.5rem;
+            color: var(--text);
+        }
+        .feature p {
+            color: var(--text-muted);
+            font-size: 0.95rem;
+            line-height: 1.6;
+        }
+        /* CTA Section */
+        .cta {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            flex-wrap: wrap;
+            margin: 3rem 0;
+        }
+        .btn {
+            padding: 1rem 2.5rem;
+            border-radius: 2rem;
+            font-family: inherit;
+            font-size: 1rem;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            border: none;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+            color: white;
+            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
+        }
+        .btn-secondary {
+            background: var(--glass);
+            color: var(--text);
+            border: 2px solid var(--border);
+            backdrop-filter: blur(10px);
+        }
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+        }
+        .btn:active {
+            transform: translateY(-1px);
+        }
+        /* Modal Styles */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(5px);
+            z-index: 2000;
+            justify-content: center;
+            align-items: center;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .modal.active {
+            display: flex;
+            opacity: 1;
+        }
+        .modal-content {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 2rem;
+            padding: 2.5rem;
+            width: 90%;
+            max-width: 450px;
+            position: relative;
+            transform: scale(0.9);
+            transition: transform 0.3s;
+            box-shadow: var(--shadow);
+        }
+        .modal.active .modal-content {
+            transform: scale(1);
+        }
+        .close-modal {
+            position: absolute;
+            top: 1rem;
+            left: 1rem;
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            font-size: 1.5rem;
+            cursor: pointer;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+        }
+        .close-modal:hover {
+            background: var(--glass);
+            color: var(--text);
+            transform: rotate(90deg);
+        }
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            color: var(--text);
+            font-weight: 500;
+        }
+        .form-group input, .form-group select {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 2px solid var(--border);
+            border-radius: 1rem;
+            background: var(--glass);
+            color: var(--text);
+            font-family: inherit;
+            font-size: 1rem;
+            transition: all 0.3s;
+        }
+        .form-group input:focus, .form-group select:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+        .form-submit {
+            width: 100%;
+            margin-top: 1rem;
+        }
+        .error-msg {
+            color: var(--secondary);
+            font-size: 0.875rem;
+            margin-top: 0.5rem;
+            display: none;
+        }
+        /* Chat Application Interface */
+        #chat-app {
+            display: none;
+            height: calc(100vh - 80px);
+            margin-top: 80px;
+        }
+        .chat-container {
+            display: grid;
+            grid-template-columns: 300px 1fr;
+            height: 100%;
+            gap: 1rem;
+            padding: 1rem;
+        }
+        .sidebar {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 1.5rem;
+            padding: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            backdrop-filter: blur(10px);
+            overflow-y: auto;
+        }
+        .user-profile {
+            text-align: center;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid var(--border);
+        }
+        .avatar {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            margin: 0 auto 0.5rem;
+            border: 3px solid var(--border);
+            cursor: pointer;
+            transition: transform 0.3s;
+        }
+        .avatar:hover {
+            transform: scale(1.1);
+        }
+        .rooms-list {
+            flex: 1;
+            overflow-y: auto;
+        }
+        .room-item {
+            padding: 1rem;
+            margin-bottom: 0.5rem;
+            border-radius: 1rem;
+            cursor: pointer;
+            transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            border: 1px solid transparent;
+        }
+        .room-item:hover, .room-item.active {
+            background: var(--glass);
+            border-color: var(--primary);
+        }
+        .room-item.active {
+            background: rgba(99, 102, 241, 0.1);
+        }
+        .chat-area {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            backdrop-filter: blur(10px);
+        }
+        .chat-header {
+            padding: 1.5rem;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+        .message {
+            max-width: 70%;
+            padding: 1rem 1.25rem;
+            border-radius: 1.25rem;
+            position: relative;
+            animation: messageSlide 0.3s ease;
+            word-wrap: break-word;
+        }
+        @keyframes messageSlide {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .message.sent {
+            align-self: flex-start;
+            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+            color: white;
+            border-bottom-right-radius: 0.25rem;
+        }
+        .message.received {
+            align-self: flex-end;
+            background: var(--glass);
+            border: 1px solid var(--border);
+            border-bottom-left-radius: 0.25rem;
+        }
+        .message-author {
+            font-size: 0.75rem;
+            opacity: 0.8;
+            margin-bottom: 0.25rem;
+            font-weight: 700;
+        }
+        .message-time {
+            font-size: 0.7rem;
+            opacity: 0.6;
+            margin-top: 0.5rem;
+            display: block;
+            text-align: left;
+        }
+        .chat-input {
+            padding: 1.5rem;
+            border-top: 1px solid var(--border);
+            display: flex;
+            gap: 1rem;
+        }
+        .chat-input input {
+            flex: 1;
+            padding: 0.75rem 1.25rem;
+            border: 2px solid var(--border);
+            border-radius: 2rem;
+            background: var(--glass);
+            color: var(--text);
+            font-family: inherit;
+            font-size: 1rem;
+        }
+        .chat-input input:focus {
+            outline: none;
+            border-color: var(--primary);
+        }
+        .send-btn {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: var(--primary);
+            color: white;
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+            font-size: 1.25rem;
+        }
+        .send-btn:hover {
+            background: var(--primary-dark);
+            transform: scale(1.1);
+        }
+        .send-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            .chat-container {
+                grid-template-columns: 1fr;
+                position: relative;
+            }
+            .sidebar {
+                position: absolute;
+                right: -100%;
+                top: 0;
+                height: 100%;
+                width: 280px;
+                z-index: 100;
+                transition: right 0.3s;
+                box-shadow: var(--shadow);
+            }
+            .sidebar.open {
+                right: 0;
+            }
+            .mobile-menu-btn {
+                display: block !important;
+            }
+            .features {
+                grid-template-columns: 1fr;
+            }
+        }
+        .mobile-menu-btn {
+            display: none;
+            background: var(--glass);
+            border: 1px solid var(--border);
+            color: var(--text);
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            cursor: pointer;
+        }
+        /* Scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: var(--border);
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--primary);
+        }
+        /* Loading Animation */
+        .typing-indicator {
+            display: none;
+            align-self: flex-start;
+            background: var(--glass);
+            padding: 1rem 1.5rem;
+            border-radius: 1.25rem;
+            border-bottom-right-radius: 0.25rem;
+            margin-bottom: 1rem;
+        }
+        .typing-indicator.active {
+            display: flex;
+            gap: 0.25rem;
+        }
+        .typing-dot {
+            width: 8px;
+            height: 8px;
+            background: var(--text-muted);
+            border-radius: 50%;
+            animation: typing 1.4s infinite;
+        }
+        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
+        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes typing {
+            0%, 60%, 100% { transform: translateY(0); }
+            30% { transform: translateY(-10px); }
+        }
+        .toast {
+            position: fixed;
+            bottom: 2rem;
+            left: 50%;
+            transform: translateX(-50%) translateY(100px);
+            background: var(--surface);
+            color: var(--text);
+            padding: 1rem 2rem;
+            border-radius: 1rem;
+            border: 1px solid var(--border);
+            box-shadow: var(--shadow);
+            z-index: 3000;
+            opacity: 0;
+            transition: all 0.3s;
+        }
+        .toast.show {
+            transform: translateX(-50%) translateY(0);
+            opacity: 1;
+        }
+        .toast.error {
+            border-color: var(--secondary);
+            background: rgba(236, 72, 153, 0.1);
+        }
+        .toast.success {
+            border-color: var(--success);
+            background: rgba(16, 185, 129, 0.1);
+        }
+    </style>
+</head>
+<body>
+    <!-- Animated Background -->
+    <div class="bg-animation">
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+    </div>
+    <!-- Header -->
+    <header>
+        <div class="logo">
+            <i class="fas fa-comments"></i>
+            <span>چت روم</span>
+        </div>
+        <div class="header-actions">
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
+                <i class="fas fa-code"></i> Built with anycoder
+            </a>
+            <button class="theme-toggle" onclick="toggleTheme()" title="تغییر تم">
+                <i class="fas fa-moon"></i>
+            </button>
+        </div>
+    </header>
+    <?php if (!$isLoggedIn): ?>
+    <!-- Landing Page -->
+    <div id="landing" class="container">
+        <div class="hero">
+            <h1><span class="emoji">💬</span> چت روم واقعی</h1>
+            <p class="subtitle">محلی امن و سریع برای گفتگو با دوستان و همکاران</p>
+        </div>
+        <div class="features">
+            <div class="feature" onclick="showRegister()">
+                <div class="icon">🔐</div>
+                <h3>ثبت‌نام واقعی</h3>
+                <p>با شماره موبایل و رمز عبور امن ثبت‌نام کنید. اطلاعات در دیتابیس ذخیره می‌شود</p>
+            </div>
+            <div class="feature" onclick="showRegister()">
+                <div class="icon">👥</div>
+                <h3>اتاق‌های چند نفره</h3>
+                <p>تا ۳ اتاق بسازید و با کاربران واقعی چت کنید. پیام‌ها لحظه‌ای ذخیره و نمایش داده می‌شوند</p>
+            </div>
+            <div class="feature" onclick="showRegister()">
+                <div class="icon">⚡</div>
+                <h3>چت زنده</h3>
+                <p>بروزرسانی خودکار هر ۳ ثانیه. مشاهده وضعیت آنلاین بودن کاربران</p>
+            </div>
+        </div>
+        <div class="cta">
+            <button onclick="showRegister()" class="btn btn-primary">
+                <i class="fas fa-rocket"></i>
+                شروع کنید
+            </button>
+            <button onclick="showLogin()" class="btn btn-secondary">
+                <i class="fas fa-sign-in-alt"></i>
+                ورود
+            </button>
+        </div>
+    </div>
+    <!-- Auth Modals -->
+    <div id="login-modal" class="modal">
+        <div class="modal-content">
+            <button class="close-modal" onclick="closeModals()">
+                <i class="fas fa-times"></i>
+            </button>
+            <h2 style="margin-bottom: 1.5rem; text-align: center;">
+                <i class="fas fa-sign-in-alt" style="color: var(--primary);"></i>
+                ورود به حساب
+            </h2>
+            <form id="login-form" onsubmit="handleLogin(event)">
+                <div class="form-group">
+                    <label>شماره موبایل</label>
+                    <input type="tel" name="phone" placeholder="09*********" required pattern="09[0-9]{9}">
+                </div>
+                <div class="form-group">
+                    <label>رمز عبور</label>
+                    <input type="password" name="password" placeholder="••••••••" required>
+                </div>
+                <div class="error-msg" id="login-error"></div>
+                <button type="submit" class="btn btn-primary form-submit">