编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>语音社交平台</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        :root {
            --primary: #7c3aed;
            --primary-light: #8b5cf6;
            --bg-dark: #0f0f1a;
            --bg-card: #1a1a2e;
            --bg-card-hover: #252540;
            --text-primary: #ffffff;
            --text-secondary: #a0a0b0;
            --accent: #fbbf24;
            --success: #10b981;
            --danger: #ef4444;
            --border: #2d2d4a;
        }
        html, body {
            font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: var(--bg-dark);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
        }
        /* 手机安全区域 */
        body { padding-bottom: env(safe-area-inset-bottom, 80px); }
        
        /* 状态栏占位 */
        .status-bar {
            height: env(safe-area-inset-top, 20px);
            background: linear-gradient(135deg, var(--primary) 0%, #9333ea 100%);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        /* 顶部导航 */
        .header {
            background: linear-gradient(135deg, var(--primary) 0%, #9333ea 100%);
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 99;
        }
        .header-title {
            font-size: 1.1rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .header-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .header-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255,255,255,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }
        .user-avatar-small {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }
        
        /* 主内容区 */
        .main-content {
            padding: 16px;
            padding-bottom: 100px;
            min-height: calc(100vh - 60px);
        }
        .page { display: none; }
        .page.active { display: block; }
        
        /* 搜索栏 */
        .search-bar {
            display: flex;
            gap: 10px;
            margin-bottom: 16px;
        }
        .search-input-wrap {
            flex: 1;
            position: relative;
        }
        .search-input {
            width: 100%;
            padding: 12px 16px 12px 42px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 25px;
            color: var(--text-primary);
            font-size: 0.95rem;
        }
        .search-input::placeholder { color: var(--text-secondary); }
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.1rem;
        }
        
        /*分类标签 */
        .category-tags {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            overflow-x: auto;
            padding-bottom: 5px;
            -webkit-overflow-scrolling: touch;
        }
        .category-tags::-webkit-scrollbar { display: none; }
        .tag {
            padding: 8px 16px;
            background: var(--bg-card);
            border-radius: 20px;
            font-size: 0.85rem;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid transparent;
        }
        .tag.active {
            background: var(--primary);
            color: white;
        }
        .tag:active { transform: scale(0.95); }
        
        /* 房间卡片 */
        .room-list { display: flex; flex-direction: column; gap: 14px; }
        .room-card {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 16px;
            border: 1px solid var(--border);
            cursor: pointer;
            transition: all 0.2s;
        }
        .room-card:active {
            transform: scale(0.98);
            background: var(--bg-card-hover);
        }
        .room-header {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 12px;
        }
        .room-emoji {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--primary), #c084fc);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            flex-shrink: 0;
        }
        .room-info { flex: 1; min-width: 0; }
        .room-name {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .room-tags { display: flex; gap: 6px; flex-wrap: wrap; }
        .room-tag {
            padding: 3px 8px;
            background: rgba(124, 58, 237, 0.2);
            border-radius: 10px;
            font-size: 0.7rem;
            color: var(--primary-light);
        }
        .room-meta {
            display: flex;
            gap: 16px;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        .room-meta span { display: flex; align-items: center; gap: 4px; }
        
        /* 麦位布局 */
        .mic-section {
            background: var(--bg-card);
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .mic-section-title {
            text-align: center;
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 16px;
        }
        .mic-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            max-width: 320px;
            margin: 0 auto;
        }
        .mic-slot {
            aspect-ratio: 1;
            background: var(--bg-card-hover);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--border);
            position: relative;
        }
        .mic-slot.occupied {
            background: rgba(124, 58, 237, 0.15);
            border-color: var(--primary);
        }
        .mic-slot.speaking {
            border-color: var(--success);
            box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
        }
        .mic-slot.owner {
            background: linear-gradient(135deg, var(--accent), #f59e0b);
        }
        .mic-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }
        .mic-label {
            font-size: 0.65rem;
            color: var(--text-secondary);
            margin-top: 2px;
            max-width: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .mic-lock {
            font-size: 1rem;
            color: var(--danger);
        }
        
        /* 房间动作按钮 */
        .room-actions {
            display: flex;
            justify-content: center;
            gap: 20px;
            padding: 16px 0;
        }
        .action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }
        .action-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--bg-card);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            border: 1px solid var(--border);
            transition: all 0.2s;
        }
        .action-btn:active .action-icon {
            background: var(--primary);
            transform: scale(0.9);
        }
        .action-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }
        
        /* 输入区域 */
        .input-area {
            display: flex;
            gap: 10px;
            padding: 12px 16px;
            background: var(--bg-card);
            border-radius: 25px;
            margin-top: 16px;
        }
        .input-area input {
            flex: 1;
            background: transparent;
            border: none;
            color: var(--text-primary);
            font-size: 0.95rem;
        }
        .input-area input:focus { outline: none; }
        .input-area button {
            background: var(--primary);
            border: none;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1rem;
        }
        
        /* 消息列表 */
        .message-list {
            max-height: 200px;
            overflow-y: auto;
        }
        .message-item {
            display: flex;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid var(--border);
        }
        .message-item:last-child { border-bottom: none; }
        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), #c084fc);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }
        .message-content { flex: 1; }
        .message-name {
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .online-dot {
            width: 8px;
            height: 8px;
            background: var(--success);
            border-radius: 50%;
        }
        .message-text {
            font-size: 0.85rem;
            color: var(--text-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .message-time {
            font-size: 0.7rem;
            color: var(--text-secondary);
            flex-shrink: 0;
        }
        
        /* 用户卡片 */
        .user-card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px;
            background: var(--bg-card);
            border-radius: 14px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .user-card:active {
            background: var(--bg-card-hover);
            transform: scale(0.98);
        }
        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), #c084fc);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            position: relative;
            flex-shrink: 0;
        }
        .user-online-badge {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 12px;
            height: 12px;
            background: var(--success);
            border-radius: 50%;
            border: 2px solid var(--bg-card);
        }
        .user-info { flex: 1; min-width: 0; }
        .user-name {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 5px;
        }
        .user-tags { display: flex; gap: 5px; flex-wrap: wrap; }
        .user-tag {
            padding: 2px 8px;
            background: rgba(124, 58, 237, 0.15);
            border-radius: 8px;
            font-size: 0.7rem;
            color: var(--primary-light);
        }
        .user-meta {
            text-align: right;
            flex-shrink: 0;
        }
        .user-price {
            font-size: 1rem;
            font-weight: 600;
            color: var(--accent);
        }
        .user-rating {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        /* 个人中心 */
        .profile-header {
            background: linear-gradient(135deg, var(--primary) 0%, #9333ea 100%);
            border-radius: 20px;
            padding: 24px;
            margin-bottom: 20px;
            text-align: center;
        }
        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            margin: 0 auto 12px;
            border: 3px solid rgba(255,255,255,0.3);
        }
        .profile-name {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 8px;
        }
        .profile-level {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            background: rgba(255,255,255,0.2);
            border-radius: 20px;
            font-size: 0.9rem;
        }
        .profile-progress {
            margin-top: 16px;
        }
        .progress-bar {
            height: 6px;
            background: rgba(255,255,255,0.2);
            border-radius: 3px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background: #fbbf24;
            border-radius: 3px;
            transition: width 0.3s;
        }
        .progress-text {
            font-size: 0.8rem;
            margin-top: 8px;
            color: rgba(255,255,255,0.8);
        }
        
        /* 钱包 */
        .wallet-card {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 20px;
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }
        .wallet-item { text-align: center; }
        .wallet-amount {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 4px;
        }
        .wallet-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        /* 功能网格 */
        .func-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }
        .func-item {
            background: var(--bg-card);
            border-radius: 14px;
            padding: 16px 8px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        .func-item:active {
            transform: scale(0.95);
            background: var(--bg-card-hover);
        }
        .func-icon {
            font-size: 1.8rem;
            margin-bottom: 8px;
        }
        .func-name {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        /* 充值卡片 */
        .recharge-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }
        .recharge-item {
            background: var(--bg-card);
            border-radius: 14px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.2s;
        }
        .recharge-item.selected {
            border-color: var(--accent);
            background: rgba(251, 191, 36, 0.1);
        }
        .recharge-amount {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--accent);
        }
        .recharge-coins {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-top: 4px;
        }
        .recharge-bonus {
            font-size: 0.75rem;
            color: var(--success);
            margin-top: 6px;
        }
        
        /* VIP卡片 */
        .vip-card {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            border-radius: 20px;
            padding: 24px;
            color: #1a1a1a;
            margin-bottom: 20px;
        }
        .vip-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .vip-title {
            font-size: 1.2rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .vip-price {
            font-size: 0.9rem;
            font-weight: 600;
        }
        .vip-features {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        .vip-feature {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.85rem;
        }
        
        /* 管理后台卡片 */
        .stat-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }
        .stat-card {
            background: var(--bg-card);
            border-radius: 14px;
            padding: 16px;
            text-align: center;
        }
        .stat-value {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--primary);
        }
        .stat-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-top: 4px;
        }
        
        /* 表格 */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
        }
        .data-table th {
            text-align: left;
            padding: 12px 8px;
            color: var(--text-secondary);
            font-weight: 500;
            border-bottom: 1px solid var(--border);
        }
        .data-table td {
            padding: 12px 8px;
            border-bottom: 1px solid var(--border);
        }
        .status-badge {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.75rem;
        }
        .status-badge.active { background: rgba(16, 185, 129, 0.2); color: var(--success); }
        .status-badge.banned { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
        .status-badge.pending { background: rgba(251, 191, 36, 0.2); color: var(--accent); }
        
        /* 按钮 */
        .btn {
            padding: 12px 24px;
            border-radius: 12px;
            border: none;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn:active { transform: scale(0.96); }
        .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, #9333ea 100%);
            color: white;
        }
        .btn-outline {
            background: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
        }
        .btn-small {
            padding: 6px 12px;
            font-size: 0.8rem;
        }
        .btn-success {
            background: rgba(16, 185, 129, 0.2);
            color: var(--success);
        }
        .btn-danger {
            background: rgba(239, 68, 68, 0.2);
            color: var(--danger);
        }
        
        /* 弹窗 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.8);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: 20px;
        }
        .modal-overlay.show { display: flex; }
        .modal {
            background: var(--bg-card);
            border-radius: 20px;
            padding: 24px;
            width: 100%;
            max-width: 360px;
            max-height: 80vh;
            overflow-y: auto;
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .modal-title {
            font-size: 1.1rem;
            font-weight: 600;
        }
        .modal-close {
            font-size: 1.5rem;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 5px;
        }
        
        /* 表单 */
        .form-group { margin-bottom: 16px; }
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 0.9rem;
            color: var(--text-secondary);
        }
        .form-input {
            width: 100%;
            padding: 12px 16px;
            background: var(--bg-dark);
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text-primary);
            font-size: 0.95rem;
        }
        .form-input:focus {
            outline: none;
            border-color: var(--primary);
        }
        .form-select {
            width: 100%;
            padding: 12px 16px;
            background: var(--bg-dark);
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text-primary);
            font-size: 0.95rem;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a0a0b0'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
        }
        
        /* 礼物网格 */
        .gift-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .gift-item {
            background: var(--bg-card-hover);
            border-radius: 12px;
            padding: 12px;
            text-align: center;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.2s;
        }
        .gift-item.selected {
            border-color: var(--primary);
        }
        .gift-icon { font-size: 1.8rem; margin-bottom: 6px; }
        .gift-name { font-size: 0.8rem; margin-bottom: 4px; }
        .gift-price { font-size: 0.75rem; color: var(--accent); }
        
        /* 装扮卡片 */
        .costume-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        .costume-item {
            background: var(--bg-card);
            border-radius: 14px;
            padding: 16px;
            text-align: center;
            cursor: pointer;
            border: 1px solid var(--border);
            transition: all 0.2s;
        }
        .costume-item:active {
            transform: scale(0.96);
            border-color: var(--primary);
        }
        .costume-icon { font-size: 2.5rem; margin-bottom: 10px; }
        .costume-name { font-size: 0.9rem; margin-bottom: 6px; }
        .costume-price { font-size: 0.85rem; color: var(--accent); }
        
        /* 弹幕 */
        .danmaku-container {
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            height: 100px;
            pointer-events: none;
            z-index: 50;
            overflow: hidden;
        }
        .danmaku {
            position: absolute;
            white-space: nowrap;
            font-size: 1rem;
            color: white;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
            animation: danmakuMove 6s linear forwards;
        }
        @keyframes danmakuMove {
            0% { transform: translateX(100vw); opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateX(-100%); opacity: 0; }
        }
        
        /* 礼物动画 */
        .gift-animation {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 4rem;
            animation: giftPop 1.5s forwards;
            pointer-events: none;
            z-index: 2000;
        }
        @keyframes giftPop {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
            50% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
            100% { transform: translate(-50%, -80%) scale(1); opacity: 0; }
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-card);
            border-top: 1px solid var(--border);
            display: flex;
            padding: 8px 0;
            padding-bottom: env(safe-area-inset-bottom, 8px);
            z-index: 100;
        }
        .nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 6px 0;
            cursor: pointer;
            color: var(--text-secondary);
            transition: all 0.2s;
        }
        .nav-item.active { color: var(--primary); }
        .nav-icon { font-size: 1.5rem; }
        .nav-label { font-size: 0.65rem; }
        
        /* 弹窗内容 */
        .info-card {
            background: var(--bg-card-hover);
            border-radius: 14px;
            padding: 16px;
            margin-bottom: 12px;
        }
        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid var(--border);
        }
        .info-row:last-child { border-bottom: none; }
        .info-label { color: var(--text-secondary); font-size: 0.9rem; }
        .info-value { font-weight: 600; }
        
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
        }
        .empty-icon { font-size: 4rem; opacity: 0.5; margin-bottom: 16px; }
        .empty-title { font-size: 1.1rem; margin-bottom: 8px; }
        .empty-desc { color: var(--text-secondary); font-size: 0.9rem; }
        
        /* 返回按钮 */
        .back-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 0;
            margin-bottom: 16px;
            font-size: 0.95rem;
            color: var(--primary);
            cursor: pointer;
        }
        .back-btn:active { opacity: 0.7; }
        
        /* 匹配动画 */
        .match-animation {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-dark);
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }
        .match-animation.show { display: flex; }
        .match-ring {
            width: 120px;
            height: 120px;
            border: 4px solid var(--primary);
            border-radius: 50%;
            animation: matchPulse 1.5s infinite;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
        }
        @keyframes matchPulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.7; }
        }
        .match-text {
            margin-top: 30px;
            font-size: 1.2rem;
            color: var(--text-secondary);
        }
        .match-close {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 2rem;
            color: var(--text-secondary);
            cursor: pointer;
        }
        
        /* 红包动画 */
        .redpacket-modal {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            color: white;
        }
        .redpacket-icon {
            font-size: 5rem;
            margin-bottom: 20px;
            animation: bounce 1s infinite;
        }
        @keyframes bounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        .redpacket-amount {
            font-size: 2.5rem;
            font-weight: 700;
        }
        .redpacket-info {
            font-size: 0.9rem;
            opacity: 0.8;
            margin-top: 10px;
        }
        .redpacket-open {
            margin-top: 20px;
            padding: 12px 40px;
            background: rgba(255,255,255,0.2);
            border-radius: 25px;
            font-size: 1rem;
            cursor: pointer;
            border: none;
            color: white;
        }
    </style>
</head>
<body>
    <!-- 状态栏占位 -->
    <div class="status-bar"></div>
    
    <!-- 顶部导航 -->
    <div class="header">
        <div class="header-title">
            <span>🎙️</span>
            <span>语音社交</span>
        </div>
        <div class="header-right">
            <div class="header-icon">🔍</div>
            <div class="user-avatar-small">👩</div>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <!-- 首页 - 发现房间 -->
        <div id="page-home" class="page active">
            <div class="search-bar">
                <div class="search-input-wrap">
                    <span class="search-icon">🔍</span>
                    <input type="text" class="search-input" placeholder="搜索房间...">
                </div>
            </div>
            
            <div class="category-tags">
                <span class="tag active">推荐</span>
                <span class="tag">情感</span>
                <span class="tag">游戏</span>
                <span class="tag">音乐</span>
                <span class="tag">二次元</span>
                <span class="tag">职场</span>
            </div>
            
            <div class="room-list" id="room-list"></div>
        </div>
        
        <!-- 房间详情页 -->
        <div id="page-room" class="page">
            <div class="back-btn" onclick="showPage('home')">← 返回</div>
            <div id="room-detail"></div>
        </div>
        
        <!-- 语音匹配 -->
        <div id="page-match" class="page">
            <h2 style="font-size:1.2rem;margin-bottom:20px;">📞 语音匹配</h2>
            
            <div style="background:var(--bg-card);border-radius:20px;padding:40px;text-align:center;margin-bottom:20px;">
                <div style="font-size:5rem;margin-bottom:20px;">🎯</div>
                <p style="color:var(--text-secondary);margin-bottom:20px;">根据兴趣标签匹配志同道合的用户</p>
                <button class="btn btn-primary" style="margin-bottom:10px;" onclick="startMatch()">🎙️ 开始匹配</button>
                <br>
                <button class="btn btn-outline" onclick="showModal('filter-modal')">🏷️ 高级筛选</button>
            </div>
            
            <h3 style="font-size:1rem;margin-bottom:12px;">📜 匹配历史</h3>
            <div id="match-history"></div>
        </div>
        
        <!-- 陪聊互动 -->
        <div id="page-chat" class="page">
            <h2 style="font-size:1.2rem;margin-bottom:16px;">💬 陪聊互动</h2>
            
            <div class="search-bar">
                <div class="search-input-wrap">
                    <span class="search-icon">🔍</span>
                    <input type="text" class="search-input" placeholder="搜索陪聊师...">
                </div>
            </div>
            
            <div class="category-tags">
                <span class="tag active">全部</span>
                <span class="tag">情感咨询</span>
                <span class="tag">游戏陪玩</span>
                <span class="tag">唱歌聊天</span>
            </div>
            
            <div id="chat-list"></div>
        </div>
        
        <!-- 装扮商城 -->
        <div id="page-costume" class="page">
            <h2 style="font-size:1.2rem;margin-bottom:16px;">👑 装扮商城</h2>
            
            <div class="category-tags">
                <span class="tag active">全部</span>
                <span class="tag">进场特效</span>
                <span class="tag">头像框</span>
                <span class="tag">座驾</span>
                <span class="tag">昵称特效</span>
            </div>
            
            <div class="costume-grid" id="costume-grid"></div>
        </div>
        
        <!-- 消息中心 -->
        <div id="page-message" class="page">
            <h2 style="font-size:1.2rem;margin-bottom:16px;">💌 消息</h2>
            
            <h3 style="font-size:1rem;margin-bottom:12px;">📢 系统通知</h3>
            <div class="info-card" style="margin-bottom:20px;">
                <div style="display:flex;justify-content:space-between;margin-bottom:8px;">
                    <strong>🎉 新用户专属福利</strong>
                    <span style="font-size:0.75rem;color:var(--text-secondary);">2024-01-15</span>
                </div>
                <p style="font-size:0.85rem;color:var(--text-secondary);">新用户首次充值享受双倍金币，快来领取吧！</p>
            </div>
            
            <h3 style="font-size:1rem;margin-bottom:12px;">💬 私信</h3>
            <div class="message-list" id="message-list"></div>
        </div>
        
        <!-- 个人中心 -->
        <div id="page-profile" class="page">
            <div class="profile-header">
                <div class="profile-avatar">👩</div>
                <div class="profile-name">小美</div>
                <div class="profile-level">⭐ Lv.15</div>
                <div class="profile-progress">
                    <div class="progress-bar"><div class="progress-fill" style="width:65%;"></div></div>
                    <div class="progress-text">经验值 6500/10000</div>
                </div>
            </div>
            
            <div class="wallet-card">
                <div class="wallet-item">
                    <div class="wallet-amount" style="color:var(--accent);">888</div>
                    <div class="wallet-label">金币</div>
                </div>
                <div class="wallet-item">
                    <div class="wallet-amount" style="color:var(--primary);">66</div>
                    <div class="wallet-label">钻石</div>
                </div>
            </div>
            
            <div class="func-grid">
                <div class="func-item" onclick="showPage('profile')">
                    <div class="func-icon">👗</div>
                    <div class="func-name">我的装扮</div>
                </div>
                <div class="func-item" onclick="alert('我的关注')">
                    <div class="func-icon">❤️</div>
                    <div class="func-name">我的关注</div>
                </div>
                <div class="func-item" onclick="alert('我的等级')">
                    <div class="func-icon">🏆</div>
                    <div class="func-name">我的等级</div>
                </div>
                <div class="func-item" onclick="alert('系统设置')">
                    <div class="func-icon">⚙️</div>
                    <div class="func-name">设置</div>
                </div>
            </div>
            
            <button class="btn btn-primary" style="width:100%;" onclick="showPage('recharge')">立即充值 💰</button>
        </div>
        
        <!-- 充值中心 -->
        <div id="page-recharge" class="page">
            <div class="back-btn" onclick="showPage('profile')">← 返回</div>
            
            <div class="vip-card">
                <div class="vip-header">
                    <div class="vip-title">👑 VIP会员</div>
                    <div class="vip-price">¥30/月</div>
                </div>
                <div class="vip-features">
                    <div class="vip-feature">✓ 专属进场特效</div>
                    <div class="vip-feature">✓ 专属头像框</div>
                    <div class="vip-feature">✓ 8折装扮折扣</div>
                    <div class="vip-feature">✓ 专属尊贵称号</div>
                </div>
                <button class="btn" style="background:#1a1a1a;color:#fbbf24;width:100%;margin-top:16px;" onclick="alert('VIP开通成功！')">立即开通</button>
            </div>
            
            <h3 style="font-size:1rem;margin-bottom:12px;">💎 金币充值</h3>
            <div class="recharge-grid" id="recharge-grid"></div>
            
            <button class="btn btn-primary" style="width:100%;margin-top:16px;" onclick="recharge()">立即充值</button>
            
            <h3 style="font-size:1rem;margin:20px 0 12px;">📋 充值记录</h3>
            <div class="info-card">
                <div class="info-row">
                    <span class="info-label">¥30 充值</span>
                    <span class="info-value" style="color:var(--success);">+310金币</span>
                </div>
                <div class="info-row">
                    <span class="info-label">¥68 充值</span>
                    <span class="info-value" style="color:var(--success);">+720金币</span>
                </div>
            </div>
        </div>
        
        <!-- 管理后台 - 用户管理 -->
        <div id="page-admin-user" class="page">
            <h2 style="font-size:1.2rem;margin-bottom:16px;">👥 用户管理</h2>
            
            <div class="stat-grid">
                <div class="stat-card">
                    <div class="stat-value">12,856</div>
                    <div class="stat-label">总用户数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">3,421</div>
                    <div class="stat-label">今日新增</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">89</div>
                    <div class="stat-label">在线用户</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">12</div>
                    <div class="stat-label">封禁用户</div>
                </div>
            </div>
            
            <div class="info-card">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>昵称</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>10001</td>
                            <td>小美</td>
                            <td><span class="status-badge active">正常</span></td>
                            <td><button class="btn btn-small btn-outline">详情</button></td>
                        </tr>
                        <tr>
                            <td>10002</td>
                            <td>张三</td>
                            <td><span class="status-badge active">正常</span></td>
                            <td><button class="btn btn-small btn-outline">详情</button></td>
                        </tr>
                        <tr>
                            <td>10003</td>
                            <td>违规用户</td>
                            <td><span class="status-badge banned">封禁</span></td>
                            <td><button class="btn btn-small btn-success">解封</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 管理后台 - 内容管理 -->
        <div id="page-admin-content" class="page">
            <h2 style="font-size:1.2rem;margin-bottom:16px;">📋 内容管理</h2>
            
            <div class="stat-grid">
                <div class="stat-card">
                    <div class="stat-value" style="color:var(--accent);">156</div>
                    <div class="stat-label">待审核房间</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" style="color:var(--danger);">23</div>
                    <div class="stat-label">待处理举报</div>
                </div>
            </div>
            
            <div class="info-card">
                <h4 style="margin-bottom:12px;">📝 待审核房间</h4>
                <table class="data-table">
                    <tbody>
                        <tr>
                            <td>R001</td>
                            <td>深夜情感电台</td>
                            <td><span class="status-badge pending">待审</span></td>
                            <td>
                                <button class="btn btn-small btn-success">通过</button>
                                <button class="btn btn-small btn-danger">拒绝</button>
                            </td>
                        </tr>
                        <tr>
                            <td>R002</td>
                            <td>游戏开黑群</td>
                            <td><span class="status-badge pending">待审</span></td>
                            <td>
                                <button class="btn btn-small btn-success">通过</button>
                                <button class="btn btn-small btn-danger">拒绝</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 管理后台 - 财务管理 -->
        <div id="page-admin-finance" class="page">
            <h2 style="font-size:1.2rem;margin-bottom:16px;">💳 财务管理</h2>
            
            <div class="stat-grid">
                <div class="stat-card">
                    <div class="stat-value">¥128K</div>
                    <div class="stat-label">今日充值</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">¥89K</div>
                    <div class="stat-label">今日消费</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">¥12K</div>
                    <div class="stat-label">待提现</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">¥15.8</div>
                    <div class="stat-label">ARPU值</div>
                </div>
            </div>
            
            <h3 style="font-size:1rem;margin-bottom:12px;">💰 提现申请</h3>
            <div class="info-card">
                <table class="data-table">
                    <tbody>
                        <tr>
                            <td>小雪</td>
                            <td>¥1,280</td>
                            <td><span class="status-badge pending">待处理</span></td>
                            <td>
                                <button class="btn btn-small btn-success">通过</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 管理后台 - 数据统计 -->
        <div id="page-admin-stats" class="page">
            <h2 style="font-size:1.2rem;margin-bottom:16px;">📊 数据统计</h2>
            
            <div class="stat-grid">
                <div class="stat-card">
                    <div class="stat-value">12,856</div>
                    <div class="stat-label">总注册</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">3,421</div>
                    <div class="stat-label">日活(DAU)</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">8,956</div>
                    <div class="stat-label">月活(MAU)</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">68.5%</div>
                    <div class="stat-label">次日留存</div>
                </div>
            </div>
            
            <div class="info-card">
                <h4 style="margin-bottom:12px;">🎤 房间数据</h4>
                <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px;">
                    <div>
                        <div style="font-size:0.8rem;color:var(--text-secondary);">总房间数</div>
                        <div style="font-size:1.2rem;font-weight:600;">1,256</div>
                    </div>
                    <div>
                        <div style="font-size:0.8rem;color:var(--text-secondary);">当前在线</div>
                        <div style="font-size:1.2rem;font-weight:600;color:var(--success);">89</div>
                    </div>
                </div>
            </div>
            
            <div class="info-card">
                <h4 style="margin-bottom:12px;">💬 陪聊数据</h4>
                <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px;">
                    <div>
                        <div style="font-size:0.8rem;color:var(--text-secondary);">接单量</div>
                        <div style="font-size:1.2rem;font-weight:600;">8,234</div>
                    </div>
                    <div>
                        <div style="font-size:0.8rem;color:var(--text-secondary);">完成率</div>
                        <div style="font-size:1.2rem;font-weight:600;color:var(--success);">95.8%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 弹幕容器 -->
    <div class="danmaku-container" id="danmaku-container"></div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item active" onclick="showPage('home')">
            <span class="nav-icon">🏠</span>
            <span class="nav-label">首页</span>
        </div>
        <div class="nav-item" onclick="showPage('match')">
            <span class="nav-icon">📞</span>
            <span class="nav-label">匹配</span>
        </div>
        <div class="nav-item" onclick="showPage('chat')">
            <span class="nav-icon">💬</span>
            <span class="nav-label">陪聊</span>
        </div>
        <div class="nav-item" onclick="showPage('message')">
            <span class="nav-icon">💌</span>
            <span class="nav-label">消息</span>
        </div>
        <div class="nav-item" onclick="showPage('profile')">
            <span class="nav-icon">👤</span>
            <span class="nav-label">我的</span>
        </div>
    </div>

    <!-- 匹配动画 -->
    <div class="match-animation" id="match-animation">
        <div class="match-close" onclick="cancelMatch()">×</div>
        <div class="match-ring">🎙️</div>
        <div class="match-text">正在为您匹配...</div>
    </div>

    <!-- 创建房间弹窗 -->
    <div class="modal-overlay" id="create-room-modal">
        <div class="modal">
            <div class="modal-header">
                <div class="modal-title">🎙️ 创建房间</div>
                <span class="modal-close" onclick="closeModal()">×</span>
            </div>
            <div class="form-group">
                <label class="form-label">房间名称</label>
                <input type="text" class="form-input" placeholder="输入房间名称">
            </div>
            <div class="form-group">
                <label class="form-label">房间类型</label>
                <select class="form-select">
                    <option>公开</option>
                    <option>私密（需要密码）</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">房间分类</label>
                <select class="form-select">
                    <option>情感</option>
                    <option>游戏</option>
                    <option>音乐</option>
                    <option>二次元</option>
                </select>
            </div>
            <button class="btn btn-primary" style="width:100%;" onclick="createRoom()">创建房间</button>
        </div>
    </div>

    <!-- 礼物弹窗 -->
    <div class="modal-overlay" id="gift-modal">
        <div class="modal">
            <div class="modal-header">
                <div class="modal-title">🎁 发送礼物</div>
                <span class="modal-close" onclick="closeModal()">×</span>
            </div>
            <div class="gift-grid">
                <div class="gift-item selected" onclick="selectGift(this)">
                    <div class="gift-icon">❤️</div>
                    <div class="gift-name">小心心</div>
                    <div class="gift-price">💎 10</div>
                </div>
                <div class="gift-item" onclick="selectGift(this)">
                    <div class="gift-icon">🌹</div>
                    <div class="gift-name">玫瑰花</div>
                    <div class="gift-price">💎 50</div>
                </div>
                <div class="gift-item" onclick="selectGift(this)">
                    <div class="gift-icon">🎂</div>
                    <div class="gift-name">蛋糕</div>
                    <div class="gift-price">💎 100</div>
                </div>
                <div class="gift-item" onclick="selectGift(this)">
                    <div class="gift-icon">🚗</div>
                    <div class="gift-name">跑车</div>
                    <div class="gift-price">💎 500</div>
                </div>
                <div class="gift-item" onclick="selectGift(this)">
                    <div class="gift-icon">💎</div>
                    <div class="gift-name">钻石</div>
                    <div class="gift-price">💎 1000</div>
                </div>
                <div class="gift-item" onclick="selectGift(this)">
                    <div class="gift-icon">🎆</div>
                    <div class="gift-name">烟花</div>
                    <div class="gift-price">💎 2000</div>
                </div>
            </div>
            <button class="btn btn-primary" style="width:100%;margin-top:16px;" onclick="sendGift()">发送 💎 10</button>
        </div>
    </div>

    <!-- 筛选弹窗 -->
    <div class="modal-overlay" id="filter-modal">
        <div class="modal">
            <div class="modal-header">
                <div class="modal-title">🏷️ 匹配筛选</div>
                <span class="modal-close" onclick="closeModal()">×</span>
            </div>
            <div class="form-group">
                <label class="form-label">兴趣标签</label>
                <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;">
                    <span class="tag">🎮 游戏</span>
                    <span class="tag">🎵 音乐</span>
                    <span class="tag">💭 情感</span>
                    <span class="tag">🎬 影视</span>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">性别偏好</label>
                <select class="form-select">
                    <option>不限</option>
                    <option>仅男生</option>
                    <option>仅女生</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">地区</label>
                <select class="form-select">
                    <option>不限</option>
                    <option>同省</option>
                    <option>同城</option>
                </select>
            </div>
            <button class="btn btn-primary" style="width:100%;" onclick="closeModal();startMatch();">开始匹配</button>
        </div>
    </div>

    <!-- 红包弹窗 -->
    <div class="modal-overlay" id="redpacket-modal">
        <div class="modal">
            <div class="modal-header">
                <div class="modal-title">🧧 红包</div>
                <span class="modal-close" onclick="closeModal()">×</span>
            </div>
            <div class="redpacket-modal" onclick="openRedpacket()">
                <div class="redpacket-icon">🧧</div>
                <div class="redpacket-amount">¥88.00</div>
                <div class="redpacket-info">来自"深夜电台"房主发送</div>
                <div class="redpacket-open">点击领取</div>
            </div>
        </div>
    </div>

    <!-- 抽奖弹窗 -->
    <div class="modal-overlay" id="lottery-modal">
        <div class="modal">
            <div class="modal-header">
                <div class="modal-title">🎰 趣味抽奖</div>
                <span class="modal-close" onclick="closeModal()">×</span>
            </div>
            <div style="text-align:center;">
                <div style="font-size:4rem;margin-bottom:16px;">🎰</div>
                <p style="color:var(--text-secondary);margin-bottom:16px;">消耗 100 金币抽奖一次</p>
                <div style="display:flex;gap:10px;justify-content:center;margin-bottom:16px;">
                    <button class="btn btn-outline btn-small" onclick="lottery(1)">单抽</button>
                    <button class="btn btn-primary btn-small" onclick="lottery(10)">十连</button>
                </div>
                <div style="padding:12px;background:var(--bg-card-hover);border-radius:10px;font-size:0.85rem;">
我的金币: <span style="color:var(--accent);">888</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 模拟数据
        const rooms = [
            { id: 1, name: '深夜情感电台', tags: ['情感', '治愈'], hosts: 3, online: 128, emoji: '🌙' },
            { id: 2, name: '王者开黑群', tags: ['游戏', '电竞'], hosts: 5, online: 256, emoji: '🎮' },
            { id: 3, name: '音乐分享会', tags: ['音乐', '文艺'], hosts: 2, online: 89, emoji: '🎵' },
            { id: 4, name: '二次元茶话会', tags: ['二次元', 'ACG'], hosts: 4, online: 167, emoji: '🌸' },
            { id: 5, name: '职场交流圈', tags: ['职场', '成长'], hosts: 2, online: 56, emoji: '💼' },
            { id: 6, name: '脱口秀剧场', tags: ['娱乐', '搞笑'], hosts: 3, online: 198, emoji: '🎭' }
        ];

        const chatList = [
            { name: '小雪', avatar: '👩', tags: ['情感咨询', '温柔'], price: '8', rating: 4.9, online: true },
            { name: '阿杰', avatar: '👨', tags: ['游戏陪玩', '高操作'], price: '12', rating: 4.8, online: true },
            { name: '奶茶', avatar: '👧', tags: ['唱歌', '聊天'], price: '6', rating: 4.7, online: false },
            { name: '小狼', avatar: '🧑', tags: ['深夜陪聊', '倾听'], price: '10', rating: 4.9, online: true }
        ];

        const costumes = [
            { name: '璀璨烟花', icon: '🎆', price: '200' },
            { name: '星光闪耀', icon: '🌟', price: '150' },
            { name: '炫酷跑车', icon: '🚗', price: '500' },
            { name: '飞龙在天', icon: '🐉', price: '800' },
            { name: '皇冠头像框', icon: '👑', price: '300' },
            { name: '彩虹昵称', icon: '💫', price: '100' }
        ];

        const rechargeData = [
            { amount: 6, coins: 60, bonus: 0 },
            { amount: 30, coins: 300, bonus: 10 },
            { amount: 68, coins: 680, bonus: 40 },
            { amount: 128, coins: 1280, bonus: 100 },
            { amount: 328, coins: 3280, bonus: 500 },
            { amount: 648, coins: 6480, bonus: 1500 }
        ];

        const messages = [
            { name: '张三', avatar: '👨', text: '今晚有空一起玩游戏吗？', time: '刚刚', online: true },
            { name: '李四', avatar: '👩', text: '谢谢你的礼物，很喜欢！', time: '10分钟前', online: false },
            { name: '系统通知', avatar: '📢', text: '您的充值已到账', time: '昨天', online: false }
        ];

        // 初始化
        function init() {
            renderRooms();
            renderChatList();
            renderCostumes();
            renderRecharge();
            renderMessages();
        }

        // 渲染房间列表
        function renderRooms() {
            const list = document.getElementById('room-list');
            list.innerHTML = rooms.map(room => `
                <div class="room-card" onclick="enterRoom(${room.id})">
                    <div class="room-header">
                        <div class="room-emoji">${room.emoji}</div>
                        <div class="room-info">
                            <div class="room-name">${room.name}</div>
                            <div class="room-tags">
                                ${room.tags.map(t => `<span class="room-tag">${t}</span>`).join('')}
                            </div>
                        </div>
                    </div>
                    <div class="room-meta">
                        <span>🎤 ${room.hosts}主持</span>
                        <span>👥 ${room.online}人在听</span>
                    </div>
                </div>
            `).join('');
        }

        // 渲染陪聊列表
        function renderChatList() {
            const list = document.getElementById('chat-list');
            list.innerHTML = chatList.map(user => `
                <div class="user-card" onclick="alert('预约陪聊：${user.name}')">
                    <div class="user-avatar">
                        ${user.avatar}
                        ${user.online ? '<div class="user-online-badge"></div>' : ''}
                    </div>
                    <div class="user-info">
                        <div class="user-name">${user.name}</div>
                        <div class="user-tags">
                            ${user.tags.map(t => `<span class="user-tag">${t}</span>`).join('')}
                        </div>
                    </div>
                    <div class="user-meta">
                        <div class="user-price">¥${user.price}/分</div>
                        <div class="user-rating">⭐ ${user.rating}</div>
                    </div>
                </div>
            `).join('');
        }

        // 渲染装扮
        function renderCostumes() {
            const grid = document.getElementById('costume-grid');
            grid.innerHTML = costumes.map(item => `
                <div class="costume-item" onclick="showModal('gift-modal')">
                    <div class="costume-icon">${item.icon}</div>
                    <div class="costume-name">${item.name}</div>
                    <div class="costume-price">💎 ${item.price}</div>
                </div>
            `).join('');
        }

        // 渲染充值
        function renderRecharge() {
            const grid = document.getElementById('recharge-grid');
            grid.innerHTML = rechargeData.map((item, idx) => `
                <div class="recharge-item ${idx === 1 ? 'selected' : ''}" onclick="selectRecharge(this)">
                    <div class="recharge-amount">¥${item.amount}</div>
                    <div class="recharge-coins">${item.coins}金币</div>
                    ${item.bonus > 0 ? `<div class="recharge-bonus">+${item.bonus}金币</div>` : ''}
                </div>
            `).join('');
        }

        // 渲染消息
        function renderMessages() {
            const list = document.getElementById('message-list');
            list.innerHTML = messages.map(msg => `
                <div class="user-card" onclick="alert('打开与${msg.name}的对话')">
                    <div class="user-avatar">${msg.avatar}</div>
                    <div class="user-info" style="flex:1;">
                        <div class="user-name">${msg.name}</div>
                        <div style="font-size:0.85rem;color:var(--text-secondary);">${msg.text}</div>
                    </div>
                    <span style="font-size:0.75rem;color:var(--text-secondary);">${msg.time}</span>
                </div>
            `).join('');
        }

        // 进入房间
        function enterRoom(id) {
            const room = rooms.find(r => r.id === id);
            const detail = document.getElementById('room-detail');
            
            detail.innerHTML = `
                <div class="info-card">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
                        <h2 style="font-size:1.2rem;">🎙️ ${room.name}</h2>
                        <span class="status-badge active">直播中</span>
                    </div>
                    
                    <div style="text-align:center;padding:20px;background:var(--bg-dark);border-radius:14px;margin-bottom:16px;">
                        <div style="font-size:3rem;margin-bottom:8px;">${room.emoji}</div>
                        <div style="font-size:0.85rem;color:var(--text-secondary);">欢迎来到${room.name}，请遵守社区规范</div>
                    </div>
                    
                    <div class="mic-section">
                        <div class="mic-section-title">🎤 麦上用户 (${room.hosts})</div>
                        <div class="mic-grid">
                            <div class="mic-slot owner">
                                <div class="mic-avatar">👨</div>
                                <div class="mic-label">房主</div>
                            </div>
                            <div class="mic-slot occupied speaking">
                                <div class="mic-avatar">👩</div>
                                <div class="mic-label">小美</div>
                            </div>
                            <div class="mic-slot occupied speaking">
                                <div class="mic-avatar">🧑</div>
                                <div class="mic-label">张三</div>
                            </div>
                            <div class="mic-slot" style="background:var(--bg-dark);border-color:var(--danger);">
                                <div class="mic-lock">🔒</div>
                                <div class="mic-label">已锁定</div>
                            </div>
                            <div class="mic-slot" style="background:var(--bg-dark);"></div>
                            <div class="mic-slot" style="background:var(--bg-dark);"></div>
                            <div class="mic-slot" style="background:var(--bg-dark);"></div>
                            <div class="mic-slot" style="background:var(--bg-dark);"></div>
                        </div>
                    </div>
                    
                    <div class="room-actions">
                        <div class="action-btn" onclick="showModal('create-room-modal')">
                            <div class="action-icon">🎙️</div>
                            <span class="action-label">上麦</span>
                        </div>
                        <div class="action-btn" onclick="showModal('gift-modal')">
                            <div class="action-icon">🎁</div>
                            <span class="action-label">送礼</span>
                        </div>
                        <div class="action-btn" onclick="showModal('lottery-modal')">
                            <div class="action-icon">🎰</div>
                            <span class="action-label">抽奖</span>
                        </div>
                        <div class="action-btn" onclick="showModal('redpacket-modal')">
                            <div class="action-icon">🧧</div>
                            <span class="action-label">红包</span>
                        </div>
                    </div>
                    
                    <div class="input-area">
                        <input type="text" placeholder="发送弹幕..." id="danmaku-input" onkeypress="if(event.key==='Enter')sendDanmaku()">
                        <button onclick="sendDanmaku()">➤</button>
                    </div>
                </div>
                
                <div class="info-card">
                    <h4 style="margin-bottom:12px;">💬 房间消息</h4>
                    <div class="message-list" style="max-height:150px;">
                        <div class="message-item">
                            <div class="message-avatar">👩</div>
                            <div class="message-content">
                                <div class="message-name">小美 <span style="font-size:0.7rem;color:var(--primary-light);">房主</span></div>
                                <div class="message-text">欢迎大家来到深夜电台~</div>
                            </div>
                        </div>
                        <div class="message-item">
                            <div class="message-avatar">🧑</div>
                            <div class="message-content">
                                <div class="message-name">张三</div>
                                <div class="message-text">主播声音好好听</div>
                            </div>
                        </div>
                        <div class="message-item">
                            <div class="message-avatar">👴</div>
                            <div class="message-content">
                                <div class="message-name">李四</div>
                                <div class="message-text">今天好累，来放松一下</div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            showPage('room');
        }

        // 页面切换
        function showPage(pageId) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById('page-' + pageId).classList.add('active');
            
            document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
            document.querySelector(`.nav-item[onclick*="showPage('${pageId}')"]`)?.classList.add('active');
            
            // 滚动到顶部
            window.scrollTo(0, 0);
        }

        // 弹窗控制
        function showModal(modalId) {
            document.getElementById(modalId).classList.add('show');
        }

        function closeModal() {
            document.querySelectorAll('.modal-overlay').forEach(m => m.classList.remove('show'));
        }

        // 发送弹幕
        function sendDanmaku() {
            const input = document.getElementById('danmaku-input');
            if (!input || !input.value.trim()) return;
            
            const container = document.getElementById('danmaku-container');
            const danmaku = document.createElement('div');
            danmaku.className = 'danmaku';
            danmaku.textContent = '小美: ' + input.value.trim();
            danmaku.style.top = (Math.random() * 60 + 10) + 'px';
            container.appendChild(danmaku);
            
            input.value = '';
            setTimeout(() => danmaku.remove(), 6000);
        }

        // 开始匹配
        function startMatch() {
            document.getElementById('match-animation').classList.add('show');
            setTimeout(() => {
                document.getElementById('match-animation').classList.remove('show');
                alert('匹配成功！正在连接...');
            }, 3000);
        }

        function cancelMatch() {
            document.getElementById('match-animation').classList.remove('show');
        }

        // 发送礼物
        function sendGift() {
            const giftDiv = document.createElement('div');
            giftDiv.className = 'gift-animation';
            giftDiv.textContent = '❤️';
            document.body.appendChild(giftDiv);
            setTimeout(() => giftDiv.remove(), 1500);
            closeModal();
            alert('礼物发送成功！');
        }

        function selectGift(el) {
            document.querySelectorAll('.gift-item').forEach(item => item.classList.remove('selected'));
            el.classList.add('selected');
        }

        // 选择充值
        function selectRecharge(el) {
            document.querySelectorAll('.recharge-item').forEach(item => item.classList.remove('selected'));
            el.classList.add('selected');
        }

        function recharge() {
            alert('充值成功！');
            showPage('profile');
        }

        // 打开红包
        function openRedpacket() {
            alert('恭喜获得 ¥8.88 金币！');
            closeModal();
        }

        // 抽奖
        function lottery(type) {
            const msgs = ['🎉 恭喜获得金币 x100！', '🎊 获得稀有道具！', '✨ 再接再厉！'];
            alert(msgs[Math.floor(Math.random() * msgs.length)]);
            closeModal();
        }

        // 创建房间
        function createRoom() {
            alert('房间创建成功！');
            closeModal();
        }

        // 点击弹窗外部关闭
        document.querySelectorAll('.modal-overlay').forEach(overlay => {
            overlay.addEventListener('click', function(e) {
                if (e.target === this) closeModal();
            });
        });

        // 标签点击
        document.querySelectorAll('.tag').forEach(tag => {
            tag.addEventListener('click', function() {
                document.querySelectorAll('.tag').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });

        // 初始化
        init();
    </script>
</body>
</html>