این صفحه را مرتب کن و اشکالات ان را پیدا کن و درست کن
<?php
include 'remember_token.php';

if (!isset($_SESSION['username'])) {
    header("Location: login.php");
    exit;
}

$username = $_SESSION['username'];
?>
<!DOCTYPE html>
<html dir="rtl" lang="fa-IR">
<head>
    <meta charset="UTF-8" />
    <title>ZipChat - دارک تم بنفش</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap -->
    <link href="asset/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="asset/lib/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="asset/font/fontawesome/css/all.min.css" />
    
    <!-- Animate.Css -->
    <link rel="stylesheet" href="asset/lib/animate.css/animate.min.css" />

    <!-- فونت و استایل -->
    <link rel="stylesheet" href="asset/css/font.css" />
    <link rel="stylesheet" href="asset/css/main.css" />

    <script>
        const loggedInUserName = <?= json_encode($username) ?>;
    </script>
</head>
<body>

    <!-- لودر -->
    <div id="spinner">
        <div class="text-center">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">بارگذاری...</span>
            </div>
        </div>
    </div>

    <!-- چیدمان اصلی -->
    <div class="container-fluid">
        <div class="row">

            <!-- اطلاعات کاربر -->
            <div class="col-md-4" id="info-panel">
                <p>نام شما: <strong id="sender-name"><?= htmlspecialchars($username) ?></strong></p>

                <div class="mb-3">
                    <label for="receiver" class="form-label">با چه کسی چت می‌کنید؟</label>
                    <input type="text" id="receiver" class="form-control" value="user2" />
                </div>

                <!-- دکمه تغییر تم -->
                <div>
                    <button id="theme-toggle" class="btn btn-sm btn-light">
                        <i class="fas fa-sun"></i>
                    </button>
                </div>
            </div>

            <!-- پنجره چت -->
            <div class="col-md-8 d-flex flex-column" id="chat-window">
                <div id="chat-box">
                    <!-- پیام‌ها -->
                </div>
                <div class="send" id="sendBtn">
                    <input id="message" class="form-control" placeholder="پیام خود را بنویسید..." />
                    <button onclick="sendMessage()">
                        <i class="fa-solid fa-paper-plane"></i>
                    </button>
                </div>
            </div>

        </div>
    </div>

    <!-- منوی پایین موبایل -->
    <div class="mobile-nav d-md-none">
        <button onclick="showPanel('info')" id="info-btn">
            <i class="fa fa-user"></i>
        </button>
        <button onclick="showPanel('chat')" id="chat-btn" class="active">
            <i class="fas fa-comment"></i>
        </button>
    </div>

    <!-- اسکریپت‌ها -->
    <script src="asset/js/Loader.js"></script>
    <script src="asset/js/Message.js"></script>
    <script src="asset/js/Navbar.js"></script>
    <script src="asset/js/Theme.js"></script>
    <script src="asset/js/Preload.js"></script>

</body>
</html>