余额按钮不可点击 修改图片尺寸

下面给出根据您需求所做的修改示例，请将其中的修改部分替换到您的原始代码中即可。其中主要包括两点：

1. 将导航栏内的「余额按钮」设置为不可点击状态：

   • 添加 pointer-events: none; cursor: not-allowed;，同时去掉其 hover 效果。

2. 将「活动」下方的图片尺寸整体放大 20%：

   • 将 .activity-card 宽高由 240px × 180px 调整为 288px × 216px（即原本的 240 * 1.2 = 288，180 * 1.2 = 216）。

1. 修改 CSS 部分

请在您的 <style> 中找到以下两处并进行替换/修改（只需替换下面示例中标注“修改后”的部分）：

css
/* ============================
Navigation Bar
============================ */
.balance-button {
    padding: 9px 20px;
    background: linear-gradient(45deg, #ffbf00, #ffa500);
    color: #fff;
    border: none;
    border-radius: 20px;

    /* --- 原有 cursor 样式和 hover 效果将被去除或覆盖 --- */
    /* cursor: pointer; */
    /* transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; */

    /* >>> 修改后 <<< */
    pointer-events: none;        /* 禁止点击事件 */
    cursor: not-allowed;         /* 鼠标样式改为不可点击 */
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 15px rgba(255, 191, 0, 0.4);
    position: relative;
    flex-shrink: 0;
}

/* 去除原来的 hover 效果 */
.balance-button:hover {
    /* >>> 修改后，将 hover 效果清空或注释掉 <<<
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 191, 0, 0.6);
    background: linear-gradient(45deg, #ffb300, #ff8c00);
    */
}

css
/* ============================
Chat Container Styles
============================ */
/* 活动窗口 */
.activity-card {
    /* width: 240px;  原注释: 放大20% */
    /* height: 180px; 原注释: 放大20% */

    /* >>> 修改后 <<< */
    width: 288px;   /* 240px * 1.2 = 288px */
    height: 216px;  /* 180px * 1.2 = 216px */

    background-color: #1e1e1e;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
}

.activity-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.activity-card:hover img {
    transform: scale(1.05);
}

完成上述替换后，您的「余额」按钮将无法点击，且「活动」下方图片整体放大 20%。

提示：如果您在某些移动端或特定浏览器上仍然想显示禁止点击样式，可以保留 hover 的 cursor: not-allowed; 之类的写法；也可以在 HTML 中直接用 disabled 属性（对 <button> 标签生效），但由于这里是一个 <div> 容器，所以最直接的办法是添加 pointer-events: none;。

以下是根据您提出的需求，已修复并整合修改后的完整代码。主要改动包括：

1. 导航栏「余额按钮」不可点击：

   • 在 .balance-button 中增加 pointer-events: none; cursor: not-allowed;。
   • 移除其原先的 hover 效果。

2. 「活动」下方图片尺寸整体放大 20%：

   • 将 .activity-card 的宽高从 240px × 180px 改为 288px × 216px。

php
<?php
// ============================
// chat.php - 闲聊页面（修正版本）
// ============================

// 启动会话
session_start();

// 引入数据库配置文件
require_once 'db_config.php';

// 设置统一时区为中国时区
date_default_timezone_set('Asia/Shanghai');

// 启用错误报告（仅在开发环境中使用，生产环境中应禁用）
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// 检查用户是否已登录
if (!isset($_SESSION['user_id'])) {
    // 如果未登录，重定向到登录页面
    header("Location: login.php");
    exit();
}

$user_twitter_id = $_SESSION['user_id']; // 假设 $_SESSION['user_id'] 对应 users 表的 twitter_user_id 字段

// 获取数据库连接
$mysqli = get_db_connection();

// 设置数据库连接时区为中国时区
$mysqli->query("SET time_zone = '+08:00';");

// 设置字符集为 utf8mb4 以防止乱码
if (!$mysqli->set_charset("utf8mb4")) {
    $_SESSION['chat_errors'][] = "设置字符集失败: " . $mysqli->error;
}

// 获取用户信息（包括头像、昵称、余额、角色）
$stmt = $mysqli->prepare("SELECT profile_image_url, screen_name, balance, role FROM users WHERE twitter_user_id = ?");
if ($stmt) {
    $stmt->bind_param("s", $user_twitter_id);
    $stmt->execute();
    $stmt->bind_result($profile_image_url, $screen_name, $balance, $user_role);
    $stmt->fetch();
    $stmt->close();

    // 确保余额不为 null
    if (is_null($balance)) {
        $balance = 0.00;
    }
} else {
    $_SESSION['chat_errors'][] = "准备用户信息查询语句失败: " . $mysqli->error;
    // 设置默认值以防止后续错误
    $profile_image_url = 'default_avatar.png';
    $screen_name = '未知用户';
    $balance = 0.00;
    $user_role = 'user';
}

// 获取活动
$activities = [];
$stmt = $mysqli->prepare("SELECT id, image_path, link FROM activities ORDER BY created_at DESC");
if ($stmt) {
    if ($stmt->execute()) {
        $result = $stmt->get_result();
        while ($row = $result->fetch_assoc()) {
            $activities[] = $row;
        }
    } else {
        $_SESSION['chat_errors'][] = "执行活动查询语句失败: " . $stmt->error;
    }
    $stmt->close();
} else {
    $_SESSION['chat_errors'][] = "准备活动查询语句失败: " . $mysqli->error;
}

// 获取话题（包含发布者的昵称）
$topics = [];
$stmt = $mysqli->prepare("
    SELECT topics.id, topics.title, topics.description, users.screen_name AS created_by, topics.created_at 
    FROM topics 
    JOIN users ON topics.created_by = users.id 
    ORDER BY topics.created_at DESC
");
if ($stmt) {
    if ($stmt->execute()) {
        $result = $stmt->get_result();
        while ($row = $result->fetch_assoc()) {
            $topics[] = $row;
        }
    } else {
        $_SESSION['chat_errors'][] = "执行话题查询语句失败: " . $stmt->error;
    }
    $stmt->close();
} else {
    $_SESSION['chat_errors'][] = "准备话题查询语句失败: " . $mysqli->error;
}

// 关闭数据库连接
$mysqli->close();
?>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- 确保字符集为 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>闲聊 - 任务广场</title>
<!-- 引入科技风格字体和图标库 -->
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<!-- 引入 SweetAlert CSS 和 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
/* ============================
General Styles
============================ */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #121212;
    color: #ffffff;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

h2, h3, h4 {
    color: #00d2ff;
    margin-bottom: 20px;
    font-family: 'Orbitron', sans-serif;
    text-align: center;
}

p {
    text-align: center;
    color: #bbbbbb;
    font-size: 16px;
}

/* ============================
Navigation Bar
============================ */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    background: #1f1f1f;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
}

.left-section {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    cursor: pointer;
}

.avatar img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    transition: transform 0.3s ease;
}

.avatar img:hover {
    transform: scale(1.1);
}

/* 余额按钮：禁止点击，移除悬停效果 */
.balance-button {
    padding: 9px 20px;
    background: linear-gradient(45deg, #ffbf00, #ffa500);
    color: #fff;
    border: none;
    border-radius: 20px;
    /* 原先可点击、hover 的特性去除/覆盖 */
    /* cursor: pointer; */
    pointer-events: none; /* 不可点击 */
    cursor: not-allowed;  /* 鼠标样式 */
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 15px rgba(255, 191, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    position: relative;
    flex-shrink: 0;
}

.balance-button:hover {
    /* 移除原有 hover 效果 */
}

/* 去除余额按钮 Dropdown 的点击事件影响 */
.balance-button i {
    font-size: 16px;
}

.nav-center {
    font-size: 25px;
    font-weight: 700;
    color: #ffffff;
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    flex-grow: 1;
    text-align: center;
}

.nav-buttons {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-shrink: 0;
}

.nav-button {
    padding: 8px 20px;
    background: linear-gradient(45deg, #00d2ff, #928dab);
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 210, 255, 0.4);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.nav-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 210, 255, 0.6);
    background: linear-gradient(45deg, #00aaff, #7a69a9);
}

.nav-button i {
    font-size: 16px;
}

/* ============================
Balance Dropdown
============================ */
.balance-dropdown {
    display: none;
    position: absolute;
    top: 45px;
    right: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    z-index: 1001;
    width: 160px;
    flex-direction: column;
}

.balance-dropdown button {
    background: none;
    border: none;
    padding: 10px 20px;
    text-align: left;
    width: 100%;
    cursor: pointer;
    font-size: 14px;
    color: #333333;
    transition: background-color 0.3s ease;
}

.balance-dropdown button:hover {
    background-color: rgba(0, 210, 255, 0.1);
}

/* ============================
Chat Container Styles
============================ */
.chat-container {
    max-width: 1200px;
    margin: 100px auto 50px auto;
    padding: 20px;
    color: #ffffff;
}

/* 活动窗口：图片尺寸放大 20% */
.activities-section {
    margin-bottom: 40px;
}

.activities-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.activity-card {
    width: 288px;   /* 240px * 1.2 = 288 */
    height: 216px; /* 180px * 1.2 = 216 */
    background-color: #1e1e1e;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
}

.activity-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.activity-card:hover img {
    transform: scale(1.05);
}

.activity-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 210, 255, 0.8);
    color: #000;
    text-align: center;
    padding: 5px 0;
    font-weight: bold;
    display: none;
}

.activity-card:hover .activity-overlay {
    display: block;
}

/* 话题发布表单 */
.add-topic-form {
    display: none; /* 初始隐藏 */
    margin-bottom: 20px;
    background-color: #2a2a2a;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    max-width: 240px; /* 与话题框等宽 */
    margin: 0 auto 20px auto;
    box-sizing: border-box;
}

.add-topic-form input[type="text"],
.add-topic-form textarea {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 14px;
    background-color: #3a3a3a;
    color: #ffffff;
    box-sizing: border-box;
}

.add-topic-form textarea {
    resize: vertical;
    height: 80px;
}

.add-topic-form button {
    padding: 8px 16px;
    background-color: #00d2ff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.add-topic-form button:hover {
    background-color: #00aaff;
}

/* 话题列表 */
.topics-section {
    margin-top: 40px;
}

.topics-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.topic {
    width: 240px; /* 同为展示时的宽度，可根据需要调整 */
    background-color: #1e1e1e;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.topic-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.topic-title {
    font-size: 18px;
    font-weight: bold;
    color: #00d2ff;
    word-wrap: break-word;
}

.topic-description {
    font-size: 14px;
    color: #bbbbbb;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;
}

.topic-meta {
    font-size: 12px;
    color: #888888;
}

.chat-box {
    max-height: 150px;
    overflow-y: auto;
    background-color: #2a2a2a;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.message {
    margin-bottom: 10px;
}

.message .user {
    font-weight: bold;
    color: #00d2ff;
}

.message .text {
    margin-left: 10px;
    display: inline-block;
    background-color: #3a3a3a;
    padding: 5px 10px;
    border-radius: 10px;
}

.message .time {
    font-size: 12px;
    color: #888888;
    margin-left: 5px;
}

.send-message-form {
    display: flex;
    gap: 10px;
}

.send-message-form input[type="text"] {
    flex-grow: 1;
    padding: 8px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    background-color: #3a3a3a;
    color: #ffffff;
}

.send-message-form button {
    padding: 8px 12px;
    background-color: #00d2ff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.send-message-form button:hover {
    background-color: #00aaff;
}

/* 发布活动 */
.add-activity-form {
    display: none; /* 初始隐藏 */
    margin-bottom: 40px;
    background-color: #2a2a2a;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    max-width: 240px; /* 与话题框一致 */
    margin: 0 auto 40px auto;
    box-sizing: border-box;
}

.add-activity-form input[type="url"],
.add-activity-form input[type="file"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    background-color: #3a3a3a;
    color: #ffffff;
    box-sizing: border-box;
}

.add-activity-form button {
    padding: 8px 16px;
    background-color: #4caf50;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.add-activity-form button:hover {
    background-color: #43a047;
}

/* ============================
Success and Error Messages
============================ */
.messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.messages .error {
    background-color: #ff4d4d;
    color: #ffffff;
    padding: 15px 20px;
    border: 1px solid #ff1a1a;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.messages .success {
    background-color: #4dff88;
    color: #ffffff;
    padding: 15px 20px;
    border: 1px solid #1aff66;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.messages i {
    font-size: 20px;
}

/* ============================
Floating Action Button Styles
============================ */
.fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #00d2ff;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1002;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.fab:hover {
    background-color: #00aaff;
    transform: scale(1.1);
}

.fab-options {
    position: fixed;
    bottom: 100px;
    right: 30px;
    display: none;
    flex-direction: column;
    gap: 15px;
    z-index: 1001;
}

.fab-option {
    background-color: #1f1f1f;
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease;
}

.fab-option:hover {
    background-color: #333333;
}

.fab-option i {
    font-size: 18px;
}

/* ============================
Responsive Design
============================ */
@media (max-width: 768px) {
    .navbar {
        padding: 10px 20px;
    }

    .nav-center {
        font-size: 20px;
    }

    .nav-button {
        padding: 6px 15px;
        font-size: 12px;
    }

    .fab {
        width: 50px;
        height: 50px;
    }

    .fab-option {
        padding: 8px 12px;
        font-size: 14px;
    }

    /* 小屏下自适应 */
    .topic, .activity-card, .add-topic-form, .add-activity-form {
        width: 100%;
        height: auto;
        margin: 0 auto 20px auto;
    }

    .send-message-form button {
        padding: 6px 10px;
        font-size: 12px;
    }
}
</style>
</head>
<body>

<!-- ============================
Navigation Bar
============================ -->
<header>
    <div class="navbar">
        <div class="left-section" id="avatar-click">
            <!-- 左侧用户头像 -->
            <div class="avatar">
                <img src="<?php echo htmlspecialchars($profile_image_url ?? 'default_avatar.png', ENT_QUOTES, 'UTF-8'); ?>" alt="用户头像">
            </div>
            <!-- 余额显示按钮（已禁用点击） -->
            <div class="balance-button" id="balance-button" title="余额">
                <i class="fas fa-wallet"></i>
                <?php
                echo '<img src="usdt.png" alt="USDT" class="usdt-icon" style="height:1em; vertical-align:middle;">';
                echo number_format($balance, 2);
                ?>
                <!-- Dropdown Menu -->
                <div class="balance-dropdown" id="balance-dropdown">
                    <button id="recharge-button"><i class="fas fa-plus-circle"></i> 充值</button>
                    <button id="withdraw-button"><i class="fas fa-minus-circle"></i> 提现</button>
                </div>
            </div>
        </div>
        <!-- 中央导航 -->
        <div class="nav-center">
            任务广场
        </div>
        <!-- 右侧按钮 -->
        <div class="nav-buttons">
            <button class="nav-button" onclick="location.href='index.php'"><i class="fas fa-th-large"></i> 任务广场</button>
            <button class="nav-button" onclick="location.href='publish.php'"><i class="fas fa-plus-circle"></i> 发布</button>
            <button class="nav-button" onclick="location.href='chat.php'"><i class="fas fa-comments"></i> 闲聊</button>
            <button class="nav-button" onclick="location.href='profile.php'"><i class="fas fa-user-circle"></i> 个人中心</button>
        </div>
    </div>
</header>

<!-- ============================
Chat Container
============================ -->
<div class="chat-container">
    <!-- 显示错误和成功消息 -->
    <?php if (!empty($_SESSION['chat_errors']) || !empty($_SESSION['chat_success'])): ?>
    <div class="messages">
        <?php
        if (!empty($_SESSION['chat_errors'])) {
            foreach ($_SESSION['chat_errors'] as $error): ?>
                <div class="error"><i class="fas fa-exclamation-circle"></i> <?php echo htmlspecialchars($error, ENT_QUOTES, 'UTF-8'); ?></div>
            <?php endforeach;
            unset($_SESSION['chat_errors']);
        }
        if (!empty($_SESSION['chat_success'])): ?>
            <div class="success"><i class="fas fa-check-circle"></i> <?php echo htmlspecialchars($_SESSION['chat_success'], ENT_QUOTES, 'UTF-8'); ?></div>
        <?php
            unset($_SESSION['chat_success']);
        endif;
        ?>
    </div>
    <?php endif; ?>

    <!-- 发布活动的表单（默认隐藏，通过FAB点击事件显示） -->
    <div class="add-activity-form" id="activity-form-container">
        <h3>发布活动</h3>
        <form id="add-activity-form" enctype="multipart/form-data">
            <input type="file" name="activity_image" accept="image/*" required>
            <input type="url" name="activity_link" placeholder="请输入活动链接 (例如：https://example.com)" required>
            <button type="submit">发布活动</button>
        </form>
    </div>

    <!-- 活动窗口 -->
    <div class="activities-section">
        <h3>活动</h3>
        <?php if (!empty($activities)): ?>
            <div class="activities-grid">
                <?php foreach ($activities as $activity): ?>
                    <div class="activity-card" onclick="window.open('<?php echo htmlspecialchars($activity['link'], ENT_QUOTES, 'UTF-8'); ?>', '_blank')">
                        <img src="<?php echo htmlspecialchars($activity['image_path'], ENT_QUOTES, 'UTF-8'); ?>" alt="活动图片">
                        <div class="activity-overlay">点击进入</div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php else: ?>
            <p>暂无活动发布。</p>
        <?php endif; ?>
    </div>

    <!-- 发布话题的表单（默认隐藏，通过FAB点击事件显示） -->
    <div class="add-topic-form" id="topic-form-container">
        <h4>发布新话题</h4>
        <form id="add-topic-form">
            <input type="text" name="topic_title" placeholder="请输入话题标题" required>
            <textarea name="topic_description" placeholder="请输入话题描述" required></textarea>
            <button type="submit">发布话题</button>
        </form>
    </div>

    <!-- 话题列表 -->
    <div class="topics-section">
        <h3>话题</h3>
        <?php if (!empty($topics)): ?>
            <div class="topics-grid">
                <?php foreach ($topics as $topic): ?>
                    <div class="topic" data-topic-id="<?php echo htmlspecialchars($topic['id'], ENT_QUOTES, 'UTF-8'); ?>">
                        <div class="topic-header">
                            <div class="topic-title"><?php echo htmlspecialchars($topic['title'], ENT_QUOTES, 'UTF-8'); ?></div>
                            <div class="topic-meta">
                                发布者: <?php echo htmlspecialchars($topic['created_by'], ENT_QUOTES, 'UTF-8'); ?> |
                                <?php
                                $created_time = new DateTime($topic['created_at'], new DateTimeZone('UTC'));
                                $created_time->setTimezone(new DateTimeZone('Asia/Shanghai'));
                                echo $created_time->format('Y-m-d H:i:s');
                                ?>
                            </div>
                        </div>
                        <div class="topic-description">
                            <?php echo nl2br(htmlspecialchars($topic['description'], ENT_QUOTES, 'UTF-8')); ?>
                        </div>
                        <div class="chat-box" id="chat-box-<?php echo htmlspecialchars($topic['id'], ENT_QUOTES, 'UTF-8'); ?>">
                            <!-- 聊天消息将通过 JavaScript 动态加载 -->
                        </div>
                        <form class="send-message-form" data-topic-id="<?php echo htmlspecialchars($topic['id'], ENT_QUOTES, 'UTF-8'); ?>">
                            <input type="text" name="message" placeholder="输入您的消息..." required>
                            <button type="submit"><i class="fas fa-paper-plane"></i></button>
                        </form>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php else: ?>
            <p>暂无话题发布。</p>
        <?php endif; ?>
    </div>
</div>

<!-- ============================
Floating Action Button
============================ -->
<div class="fab" id="fab">
    <i class="fas fa-plus"></i>
</div>
<div class="fab-options" id="fab-options">
    <div class="fab-option" id="fab-publish-activity">
        <i class="fas fa-bullhorn"></i> 发布活动
    </div>
    <div class="fab-option" id="fab-publish-topic">
        <i class="fas fa-edit"></i> 发布话题
    </div>
</div>

<!-- ============================
JavaScript
============================ -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 点击头像事件
    const avatarClick = document.getElementById('avatar-click');
    avatarClick.addEventListener('click', function(event){
        event.preventDefault();
        window.location.href = 'profile.php';
    });

    // Balance Dropdown
    const balanceButton = document.getElementById('balance-button');
    const balanceDropdown = document.getElementById('balance-dropdown');
    const rechargeButton = document.getElementById('recharge-button');
    const withdrawButton = document.getElementById('withdraw-button');

    // 因为按钮被禁用点击(pointer-events: none)，这里可以保持原逻辑(或注释)，实际已无法点击
    balanceButton.addEventListener('click', function(event) {
        event.stopPropagation();
        balanceDropdown.style.display = balanceDropdown.style.display === 'flex' ? 'none' : 'flex';
        balanceDropdown.style.flexDirection = 'column';
    });

    // Hide dropdown when clicking outside
    document.addEventListener('click', function() {
        balanceDropdown.style.display = 'none';
    });

    // Recharge Button Click
    rechargeButton.addEventListener('click', function() {
        Swal.fire({
            icon: 'info',
            title: '充值功能尚未实现',
            showConfirmButton: false,
            timer: 1500
        });
    });

    // Withdraw Button Click
    withdrawButton.addEventListener('click', function() {
        Swal.fire({
            title: '提现',
            input: 'text',
            inputLabel: '请输入提现的钱包地址',
            inputPlaceholder: '钱包地址',
            showCancelButton: true,
            confirmButtonText: '提交',
            cancelButtonText: '取消',
            inputValidator: (value) => {
                if (!value) {
                    return '您需要输入钱包地址！'
                }
                return null;
            }
        }).then((result) => {
            if (result.isConfirmed) {
                const walletAddress = result.value;
                fetch('withdraw.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ wallet_address: walletAddress })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: '提现成功',
                            html: '当前余额: <?php echo '<img src="usdt.png" alt="USDT" style="height:1em; vertical-align:middle;">'; ?>' + Number(data.balance).toFixed(2),
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            location.reload();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: '提现失败',
                            text: data.message || '发生未知错误。',
                        });
                    }
                })
                .catch(() => {
                    Swal.fire({
                        icon: 'error',
                        title: '提现失败',
                        text: '无法连接到服务器，请稍后再试。',
                    });
                });
            }
        });
    });

    // FAB 按钮
    const fab = document.getElementById('fab');
    const fabOptions = document.getElementById('fab-options');
    const activityFormContainer = document.getElementById('activity-form-container');
    const topicFormContainer = document.getElementById('topic-form-container');

    fab.addEventListener('click', function(event) {
        event.stopPropagation();
        fabOptions.style.display = fabOptions.style.display === 'flex' ? 'none' : 'flex';
    });

    // Hide FAB options when clicking outside
    document.addEventListener('click', function() {
        fabOptions.style.display = 'none';
    });

    // Prevent FAB options click from hiding them
    fabOptions.addEventListener('click', function(event) {
        event.stopPropagation();
    });

    // 点击「发布活动」
    const fabPublishActivity = document.getElementById('fab-publish-activity');
    if (fabPublishActivity) {
        fabPublishActivity.addEventListener('click', function() {
            // 显示发布活动表单
            activityFormContainer.style.display = 'block';
            topicFormContainer.style.display = 'none';
            // 滚动到表单位置
            activityFormContainer.scrollIntoView({ behavior: 'smooth' });
        });
    }

    // 点击「发布话题」
    const fabPublishTopic = document.getElementById('fab-publish-topic');
    if (fabPublishTopic) {
        fabPublishTopic.addEventListener('click', function() {
            // 显示发布话题表单
            topicFormContainer.style.display = 'block';
            activityFormContainer.style.display = 'none';
            // 滚动到表单位置
            topicFormContainer.scrollIntoView({ behavior: 'smooth' });
        });
    }

    // 发布活动表单提交
    const addActivityForm = document.getElementById('add-activity-form');
    if (addActivityForm) {
        addActivityForm.addEventListener('submit', function(event) {
            event.preventDefault();
            const formData = new FormData(addActivityForm);

            fetch('add_activity.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: '活动已发布',
                        text: data.message,
                        showConfirmButton: false,
                        timer: 2000
                    }).then(() => {
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: '发布失败',
                        text: data.message || '发生未知错误。',
                    });
                }
            })
            .catch((error) => {
                console.error('Fetch error:', error);
                Swal.fire({
                    icon: 'error',
                    title: '发布失败',
                    text: '无法连接到服务器，请稍后再试。',
                });
            });
        });
    }

    // 发布话题表单提交
    const addTopicForm = document.getElementById('add-topic-form');
    if (addTopicForm) {
        addTopicForm.addEventListener('submit', function(event) {
            event.preventDefault();
            const formData = new FormData(addTopicForm);

            fetch('add_topic.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: '话题已发布',
                        text: data.message,
                        showConfirmButton: false,
                        timer: 2000
                    }).then(() => {
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: '发布失败',
                        text: data.message || '发生未知错误。',
                    });
                }
            })
            .catch((error) => {
                console.error('Fetch error:', error);
                Swal.fire({
                    icon: 'error',
                    title: '发布失败',
                    text: '无法连接到服务器，请稍后再试。',
                });
            });
        });
    }

    // 发送消息
    const sendMessageForms = document.querySelectorAll('.send-message-form');
    sendMessageForms.forEach(form => {
        form.addEventListener('submit', function(event) {
            event.preventDefault();
            const topicId = this.getAttribute('data-topic-id');
            const messageInput = this.querySelector('input[name="message"]');
            const message = messageInput.value.trim();

            if (message === '') {
                Swal.fire({
                    icon: 'warning',
                    title: '消息不能为空',
                    showConfirmButton: false,
                    timer: 1500
                });
                return;
            }

            fetch('post_message.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ topic_id: topicId, message: message })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    messageInput.value = '';
                    loadMessages(topicId);
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: '发送失败',
                        text: data.message || '发生未知错误。',
                    });
                }
            })
            .catch((error) => {
                console.error('Fetch error:', error);
                Swal.fire({
                    icon: 'error',
                    title: '发送失败',
                    text: '无法连接到服务器，请稍后再试。',
                });
            });
        });
    });

    // 加载消息函数
    function loadMessages(topicId) {
        fetch(`get_messages.php?topic_id=${topicId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const chatBox = document.getElementById(`chat-box-${topicId}`);
                chatBox.innerHTML = '';
                data.messages.forEach(msg => {
                    const messageDiv = document.createElement('div');
                    messageDiv.classList.add('message');
                    messageDiv.innerHTML = `
                        <span class="user">${msg.screen_name}</span>
                        <span class="text">${msg.message}</span>
                        <span class="time">${msg.created_at}</span>
                    `;
                    chatBox.appendChild(messageDiv);
                });
                // 滚动到底部
                chatBox.scrollTop = chatBox.scrollHeight;
            } else {
                console.error('获取消息失败:', data.message);
            }
        })
        .catch(error => {
            console.error('Error fetching messages:', error);
        });
    }

    // 初始化消息加载
    const topics = <?php echo json_encode($topics); ?>;
    topics.forEach(topic => {
        loadMessages(topic.id);
    });

    // 定时刷新消息
    setInterval(() => {
        topics.forEach(topic => {
            loadMessages(topic.id);
        });
    }, 5000); // 每5秒刷新一次
});
</script>
</body>
</html>