编辑页面

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>命理大师 - 算命APP</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&display=swap');
        
        * {
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Noto Serif SC', serif, -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            min-height: 100vh;
            margin: 0;
            padding: 0;
        }
        
        .app-container {
            max-width: 430px;
            margin: 0 auto;
            min-height: 100vh;
            background: #0d0d1a;
            position: relative;
            overflow: hidden;
        }
        
        .page {
            display: none;
            min-height: calc(100vh - 70px);
            padding-bottom: 20px;
        }
        
        .page.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        @keyframes shimmer {
            0% { background-position: -200% center; }
            100% { background-position: 200% center; }
        }
        
        .gold-text {
            background: linear-gradient(135deg, #ffd700, #ffb347, #ffd700);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .gold-border {
            border: 2px solid;
            border-image: linear-gradient(135deg, #ffd700, #ffb347, #ffd700) 1;
        }
        
        .btn-gold {
            background: linear-gradient(135deg, #ffd700, #ffb347);
            color: #1a1a2e;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-gold:active {
            transform: scale(0.98);
            box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
        }
        
        .card-glass {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 16px;
        }
        
        .input-field {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 12px;
            color: white;
            transition: all 0.3s ease;
        }
        
        .input-field:focus {
            outline: none;
            border-color: #ffd700;
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
        }
        
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            background: rgba(13, 13, 26, 0.95);
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(255, 215, 0, 0.2);
            padding: 8px 0;
            padding-bottom: env(safe-area-inset-bottom, 8px);
            z-index: 100;
        }
        
        .tab-item {
            color: rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
        }
        
        .tab-item.active {
            color: #ffd700;
        }
        
        .tab-item.active i {
            transform: scale(1.1);
        }
        
        .result-card {
            background: linear-gradient(145deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.05));
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 20px;
            animation: slideUp 0.5s ease;
        }
        
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .constellation-bg {
            position: absolute;
            width: 100%;
            height: 300px;
            background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
            pointer-events: none;
        }
        
        .ba-gua {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            padding: 15px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 12px;
        }
        
        .ba-gua-item {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            background: rgba(255, 215, 0, 0.1);
            border-radius: 8px;
        }
        
        .history-item {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 12px;
            border-left: 3px solid rgba(255, 215, 0, 0.5);
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 200;
            align-items: center;
            justify-content: center;
        }
        
        .modal.show {
            display: flex;
            animation: fadeIn 0.3s ease;
        }
        
        .modal-content {
            background: linear-gradient(145deg, #1a1a2e, #16213e);
            border-radius: 24px;
            padding: 30px;
            max-width: 350px;
            width: 90%;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }
        
        .radio-option {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 12px;
            padding: 12px 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .radio-option.selected {
            background: rgba(255, 215, 0, 0.15);
            border-color: #ffd700;
        }
        
        .price-tag {
            background: linear-gradient(135deg, #ffd700, #ff8c00);
            color: #1a1a2e;
            padding: 8px 20px;
            border-radius: 30px;
            font-weight: bold;
            font-size: 1.2rem;
        }
        
        .balance-card {
            background: linear-gradient(135deg, #ffd700, #ff8c00, #ffd700);
            border-radius: 20px;
            padding: 25px;
            color: #1a1a2e;
            position: relative;
            overflow: hidden;
        }
        
        .balance-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
            animation: shimmer 3s infinite;
        }
        
        ::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid rgba(255, 215, 0, 0.2);
            border-top-color: #ffd700;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 页面1: 首页 -->
        <div id="page-home" class="page active">
            <div class="constellation-bg"></div>
            
            <div class="text-center pt-8 pb-6 relative z-10">
                <div class="inline-block mb-4" style="animation: float 3s ease-in-out infinite;">
                    <svg width="80" height="80" viewBox="0 0 100 100" fill="none">
                        <circle cx="50" cy="50" r="45" stroke="url(#goldGradient)" stroke-width="3" fill="none"/>
                        <text x="50" y="58" text-anchor="middle" fill="url(#goldGradient)" font-size="32" font-weight="bold">易</text>
                        <defs>
                            <linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                                <stop offset="0%" style="stop-color:#ffd700"/>
                                <stop offset="50%" style="stop-color:#ffb347"/>
                                <stop offset="100%" style="stop-color:#ffd700"/>
                            </linearGradient>
                        </defs>
                    </svg>
                </div>
                <h1 class="text-3xl font-bold gold-text mb-2">命理大师</h1>
                <p class="text-gray-400 text-sm">洞察命理，预知未来</p>
            </div>
            
            <div class="px-5 relative z-10">
                <div class="card-glass p-6 mb-6">
                    <h2 class="text-lg font-semibold text-white mb-5 flex items-center">
                        <i class="fas fa-user-astronaut mr-2 text-yellow-500"></i>
                        请填写基本信息
                    </h2>
                    
                    <div class="mb-5">
                        <label class="block text-gray-300 text-sm mb-2">姓名（选填）</label>
                        <input type="text" id="input-name" placeholder="输入您的姓名" 
                            class="input-field w-full px-4 py-3 text-white placeholder-gray-500">
                    </div>
                    
                    <div class="mb-5">
                        <label class="block text-gray-300 text-sm mb-2">性别</label>
                        <div class="flex gap-3">
                            <div class="radio-option flex-1 text-center selected" data-gender="male" onclick="selectGender(this)">
                                <i class="fas fa-mars mr-2"></i>男
                            </div>
                            <div class="radio-option flex-1 text-center" data-gender="female" onclick="selectGender(this)">
                                <i class="fas fa-venus mr-2"></i>女
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-5">
                        <label class="block text-gray-300 text-sm mb-2">出生日期</label>
                        <input type="date" id="input-birthday" 
                            class="input-field w-full px-4 py-3 text-white">
                    </div>
                    
                    <div class="mb-5">
                        <label class="block text-gray-300 text-sm mb-2">出生时辰</label>
                        <select id="input-hour" class="input-field w-full px-4 py-3 text-white">
                            <option value="">选择时辰</option>
                            <option value="23-1">子时 (23:00-01:00)</option>
                            <option value="1-3">丑时 (01:00-03:00)</option>
                            <option value="3-5">寅时 (03:00-05:00)</option>
                            <option value="5-7">卯时 (05:00-07:00)</option>
                            <option value="7-9">辰时 (07:00-09:00)</option>
                            <option value="9-11">巳时 (09:00-11:00)</option>
                            <option value="11-13">午时 (11:00-13:00)</option>
                            <option value="13-15">未时 (13:00-15:00)</option>
                            <option value="15-17">申时 (15:00-17:00)</option>
                            <option value="17-19">酉时 (17:00-19:00)</option>
                            <option value="19-21">戌时 (19:00-21:00)</option>
                            <option value="21-23">亥时 (21:00-23:00)</option>
                        </select>
                    </div>
                </div>
                
                <div class="card-glass p-5 mb-6 text-center">
                    <p class="text-gray-400 text-sm mb-3">大师亲自为您解读命理</p>
                    <div class="price-tag inline-block mb-4">
                        <i class="fas fa-coins mr-2"></i>¥68
                    </div>
                    <p class="text-xs text-gray-500">包含：八字分析、五行解读、运势预测</p>
                </div>
                
                <button onclick="startFortune()" class="btn-gold w-full py-4 rounded-2xl text-lg mb-4 shadow-lg">
                    <i class="fas fa-stars mr-2"></i>开始测算
                </button>
                
                <p class="text-center text-gray-500 text-xs">
                    付费成功后将显示您的专属命理分析
                </p>
            </div>
        </div>
        
        <!-- 页面2: 算命结果 -->
        <div id="page-result" class="page">
            <div class="px-5 py-6">
                <div class="flex items-center justify-between mb-6">
                    <h1 class="text-xl font-bold gold-text">命理分析结果</h1>
                    <button onclick="goHome()" class="text-gray-400 hover:text-white">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                
                <div class="result-card p-5 mb-5">
                    <div class="flex items-center mb-4">
                        <div class="w-14 h-14 rounded-full bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center mr-4">
                            <i class="fas fa-user text-white text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-white font-semibold text-lg" id="result-name">张三</h3>
                            <p class="text-gray-400 text-sm" id="result-info">男 · 1990年5月15日 · 辰时</p>
                        </div>
                    </div>
                    
                    <div class="mb-5">
                        <h4 class="text-yellow-500 text-sm mb-3 flex items-center">
                            <i class="fas fa-yin-yang mr-2"></i>八字命盘
                        </h4>
                        <div class="ba-gua flex justify-center gap-6">
                            <div class="text-center">
                                <p class="text-gray-500 text-xs mb-1">年柱</p>
                                <p class="text-yellow-500 text-2xl font-bold">庚</p>
                                <p class="text-yellow-500 text-2xl font-bold">午</p>
                            </div>
                            <div class="text-center">
                                <p class="text-gray-500 text-xs mb-1">月柱</p>
                                <p class="text-yellow-500 text-2xl font-bold">辛</p>
                                <p class="text-yellow-500 text-2xl font-bold">巳</p>
                            </div>
                            <div class="text-center">
                                <p class="text-gray-500 text-xs mb-1">日柱</p>
                                <p class="text-yellow-500 text-2xl font-bold">壬</p>
                                <p class="text-yellow-500 text-2xl font-bold">辰</p>
                            </div>
                            <div class="text-center">
                                <p class="text-gray-500 text-xs mb-1">时柱</p>
                                <p class="text-yellow-500 text-2xl font-bold">戊</p>
                                <p class="text-yellow-500 text-2xl font-bold">申</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="result-card p-5 mb-5">
                    <h4 class="text-yellow-500 text-sm mb-4 flex items-center">
                        <i class="fas fa-circle-nodes mr-2"></i>五行分析
                    </h4>
                    <div class="mb-4">
                        <div class="space-y-3">
                            <div class="flex items-center">
                                <span class="text-red-400 w-8">火</span>
                                <div class="flex-1 bg-gray-700 rounded-full h-3 mx-3 overflow-hidden">
                                    <div class="bg-gradient-to-r from-red-500 to-orange-500 h-full rounded-full" style="width: 35%"></div>
                                </div>
                                <span class="text-white text-sm w-10 text-right">35%</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-yellow-400 w-8">土</span>
                                <div class="flex-1 bg-gray-700 rounded-full h-3 mx-3 overflow-hidden">
                                    <div class="bg-gradient-to-r from-yellow-500 to-amber-500 h-full rounded-full" style="width: 25%"></div>
                                </div>
                                <span class="text-white text-sm w-10 text-right">25%</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-blue-400 w-8">水</span>
                                <div class="flex-1 bg-gray-700 rounded-full h-3 mx-3 overflow-hidden">
                                    <div class="bg-gradient-to-r from-blue-500 to-cyan-500 h-full rounded-full" style="width: 20%"></div>
                                </div>
                                <span class="text-white text-sm w-10 text-right">20%</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-green-400 w-8">木</span>
                                <div class="flex-1 bg-gray-700 rounded-full h-3 mx-3 overflow-hidden">
                                    <div class="bg-gradient-to-r from-green-500 to-emerald-500 h-full rounded-full" style="width: 12%"></div>
                                </div>
                                <span class="text-white text-sm w-10 text-right">12%</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-gray-300 w-8">金</span>
                                <div class="flex-1 bg-gray-700 rounded-full h-3 mx-3 overflow-hidden">
                                    <div class="bg-gradient-to-r from-gray-400 to-gray-300 h-full rounded-full" style="width: 8%"></div>
                                </div>
                                <span class="text-white text-sm w-10 text-right">8%</span>
                            </div>
                        </div>
</div>
                    <div class="bg-black/30 rounded-xl p-4">
                        <p class="text-gray-300 text-sm leading-relaxed">
                            您的命格火旺土盛，五行偏重于火与土。水为财星，金为印绶，木为食伤。日主壬水生于巳月，火旺水囚，需要补水以调和命局。
                        </p>
                    </div>
                </div>
                
                <div class="result-card p-5 mb-5">
                    <h4 class="text-yellow-500 text-sm mb-4 flex items-center">
                        <i class="fas fa-heart mr-2"></i>性格特点
                    </h4>
                    <div class="space-y-3">
                        <div class="flex items-start">
                            <div class="w-8 h-8 rounded-full bg-yellow-500/20 flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">
                                <i class="fas fa-fire text-yellow-500 text-xs"></i>
                            </div>
                            <p class="text-gray-300 text-sm">性格热情开朗，善于交际，富有感染力</p>
                        </div>
                        <div class="flex items-start">
                            <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">
                                <i class="fas fa-water text-blue-400 text-xs"></i>
                            </div>
                            <p class="text-gray-300 text-sm">思维敏捷，适应能力强，善于随机应变</p>
                        </div>
                        <div class="flex items-start">
                            <div class="w-8 h-8 rounded-full bg-orange-500/20 flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">
                                <i class="fas fa-sun text-orange-400 text-xs"></i>
                            </div>
                            <p class="text-gray-300 text-sm">做事有魄力，敢于冒险，但有时略显急躁</p>
                        </div>
                    </div>
                </div>
                
                <div class="result-card p-5 mb-5">
                    <h4 class="text-yellow-500 text-sm mb-4 flex items-center">
                        <i class="fas fa-chart-line mr-2"></i>2026年运势
                    </h4>
                    <div class="grid grid-cols-4 gap-3 mb-4">
                        <div class="text-center p-3 bg-black/30 rounded-xl">
                            <p class="text-gray-500 text-xs mb-1">事业</p>
                            <p class="text-green-400 font-bold">上吉</p>
                        </div>
                        <div class="text-center p-3 bg-black/30 rounded-xl">
                            <p class="text-gray-500 text-xs mb-1">财运</p>
                            <p class="text-yellow-400 font-bold">大吉</p>
                        </div>
                        <div class="text-center p-3 bg-black/30 rounded-xl">
                            <p class="text-gray-500 text-xs mb-1">感情</p>
                            <p class="text-pink-400 font-bold">小吉</p>
                        </div>
                        <div class="text-center p-3 bg-black/30 rounded-xl">
                            <p class="text-gray-500 text-xs mb-1">健康</p>
                            <p class="text-blue-400 font-bold">中吉</p>
                        </div>
                    </div>
                    <p class="text-gray-300 text-sm leading-relaxed">
                        流年运势较好，特别是在事业和财运方面有望取得突破。青龙化禄，利于事业拓展，正财、偏财皆有收获。
                    </p>
                </div>
                
                <div class="result-card p-5 mb-6">
                    <h4 class="text-yellow-500 text-sm mb-4 flex items-center">
                        <i class="fas fa-lightbulb mr-2"></i>大师建议
                    </h4>
                    <div class="bg-yellow-500/10 border border-yellow-500/30 rounded-xl p-4">
                        <p class="text-gray-300 text-sm leading-relaxed">
                            命中火旺，宜多接触水属性事物。可在办公室摆放鱼缸或山水画，有助于事业顺遂。农历七月后财运上升，正财稳定。
                        </p>
                    </div>
                </div>
                
                <button onclick="goHome()" class="btn-gold w-full py-4 rounded-2xl text-lg">
                    <i class="fas fa-arrow-left mr-2"></i>返回首页
                </button>
            </div>
        </div>
        
        <!-- 页面3: 个人中心 -->
        <div id="page-profile" class="page">
            <div class="px-5 py-6">
                <div class="card-glass p-6 mb-5 text-center">
                    <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center">
                        <i class="fas fa-user text-white text-3xl"></i>
                    </div>
                    <h2 class="text-white text-xl font-semibold mb-1">用户1234</h2>
                    <p class="text-gray-400 text-sm">ID: 88886666</p>
                    <div class="flex justify-center gap-6 mt-4 pt-4 border-t border-gray-700">
                        <div class="text-center">
                            <p class="text-yellow-500 text-lg font-bold" id="history-count">3</p>
                            <p class="text-gray-500 text-xs">测算次数</p>
                        </div>
                        <div class="text-center">
                            <p class="text-yellow-500 text-lg font-bold">VIP</p>
                            <p class="text-gray-500 text-xs">会员等级</p>
                        </div>
                    </div>
                </div>
                
                <div class="balance-card mb-5">
                    <div class="flex justify-between items-start relative z-10">
                        <div>
                            <p class="text-sm opacity-80 mb-1">账户余额</p>
                            <p class="text-3xl font-bold mb-1">¥<span id="balance-amount">368.00</span></p>
                            <p class="text-xs opacity-70">可提现余额</p>
                        </div>
                        <button onclick="showWithdrawModal()" class="bg-black/30 hover:bg-black/40 px-4 py-2 rounded-full text-sm font-semibold transition-all">
                            提现
                        </button>
                    </div>
                </div>
                
                <div class="card-glass p-4 mb-5">
                    <h3 class="text-white font-semibold mb-4 flex items-center">
                        <i class="fas fa-wallet mr-2 text-yellow-500"></i>我的服务
                    </h3>
                    
                    <div class="space-y-1">
                        <div class="flex items-center justify-between py-3 px-2 hover:bg-white/5 rounded-lg cursor-pointer transition-all" onclick="switchTab('home')">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center mr-3">
                                    <i class="fas fa-stars text-purple-400"></i>
                                </div>
                                <span class="text-gray-200">新的测算</span>
                            </div>
                            <i class="fas fa-chevron-right text-gray-500"></i>
                        </div>
                        
                        <div class="flex items-center justify-between py-3 px-2 hover:bg-white/5 rounded-lg cursor-pointer transition-all" onclick="showHistory()">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center mr-3">
                                    <i class="fas fa-history text-blue-400"></i>
                                </div>
                                <span class="text-gray-200">测算记录</span>
                            </div>
                            <i class="fas fa-chevron-right text-gray-500"></i>
                        </div>
                        
                        <div class="flex items-center justify-between py-3 px-2 hover:bg-white/5 rounded-lg cursor-pointer transition-all">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center mr-3">
                                    <i class="fas fa-gift text-green-400"></i>
                                </div>
                                <span class="text-gray-200">邀请好友</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-yellow-500 text-sm mr-2">赚佣金</span>
                                <i class="fas fa-chevron-right text-gray-500"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card-glass p-4 mb-5">
                    <h3 class="text-white font-semibold mb-4 flex items-center">
                        <i class="fas fa-cog mr-2 text-yellow-500"></i>设置
                    </h3>
                    
                    <div class="space-y-1">
                        <div class="flex items-center justify-between py-3 px-2 hover:bg-white/5 rounded-lg cursor-pointer transition-all">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-gray-500/20 flex items-center justify-center mr-3">
                                    <i class="fas fa-bell text-gray-400"></i>
                                </div>
                                <span class="text-gray-200">消息通知</span>
                            </div>
                            <i class="fas fa-chevron-right text-gray-500"></i>
                        </div>
                        
                        <div class="flex items-center justify-between py-3 px-2 hover:bg-white/5 rounded-lg cursor-pointer transition-all">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-gray-500/20 flex items-center justify-center mr-3">
                                    <i class="fas fa-shield-alt text-gray-400"></i>
                                </div>
                                <span class="text-gray-200">隐私政策</span>
                            </div>
                            <i class="fas fa-chevron-right text-gray-500"></i>
                        </div>
                        
                        <div class="flex items-center justify-between py-3 px-2 hover:bg-white/5 rounded-lg cursor-pointer transition-all">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-gray-500/20 flex items-center justify-center mr-3">
                                    <i class="fas fa-headset text-gray-400"></i>
                                </div>
                                <span class="text-gray-200">联系客服</span>
                            </div>
                            <i class="fas fa-chevron-right text-gray-500"></i>
                        </div>
                    </div>
                </div>
                
                <p class="text-center text-gray-600 text-xs mt-4">命理大师 v1.0.0</p>
            </div>
        </div>
        
        <!-- 页面4: 测算记录 -->
        <div id="page-history" class="page">
            <div class="px-5 py-6">
                <div class="flex items-center justify-between mb-6">
                    <h1 class="text-xl font-bold gold-text">测算记录</h1>
                    <button onclick="switchTab('profile')" class="text-gray-400 hover:text-white">
                        <i class="fas fa-arrow-left"></i>
                    </button>
                </div>
                
                <div class="space-y-4">
                    <div class="history-item">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <h4 class="text-white font-medium">八字精批</h4>
                                <p class="text-gray-500 text-xs mt-1">2026年4月8日 15:30</p>
                            </div>
                            <span class="bg-yellow-500/20 text-yellow-500 text-xs px-3 py-1 rounded-full">已完成</span>
                        </div>
                        <div class="bg-black/30 rounded-xl p-3">
                            <p class="text-gray-400 text-sm">命格火旺土盛，适合从事与火土相关的行业...</p>
                        </div>
                    </div>
                    
                    <div class="history-item">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <h4 class="text-white font-medium">姻缘测算</h4>
                                <p class="text-gray-500 text-xs mt-1">2026年3月15日 10:20</p>
                            </div>
                            <span class="bg-yellow-500/20 text-yellow-500 text-xs px-3 py-1 rounded-full">已完成</span>
                        </div>
                        <div class="bg-black/30 rounded-xl p-3">
                            <p class="text-gray-400 text-sm">今年桃花运旺盛，农历五月有正缘出现...</p>
                        </div>
                    </div>
                    
                    <div class="history-item">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <h4 class="text-white font-medium">事业财运</h4>
                                <p class="text-gray-500 text-xs mt-1">2026年2月1日 09:15</p>
                            </div>
                            <span class="bg-yellow-500/20 text-yellow-500 text-xs px-3 py-1 rounded-full">已完成</span>
                        </div>
                        <div class="bg-black/30 rounded-xl p-3">
                            <p class="text-gray-400 text-sm">事业进入上升期，贵人运旺盛，适合创业...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航 -->
        <div class="tab-bar">
            <div class="flex justify-around items-center">
                <div class="tab-item active flex flex-col items-center py-2 px-6 cursor-pointer" onclick="switchTab('home')">
                    <i class="fas fa-yin-yang text-xl mb-1 transition-transform"></i>
                    <span class="text-xs">首页</span>
                </div>
                <div class="tab-item flex flex-col items-center py-2 px-6 cursor-pointer" onclick="switchTab('profile')">
                    <i class="fas fa-user text-xl mb-1 transition-transform"></i>
                    <span class="text-xs">我的</span>
                </div>
            </div>
        </div>
        
        <!-- 支付确认弹窗 -->
        <div id="payModal" class="modal">
            <div class="modal-content text-center">
                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center">
                    <i class="fas fa-stars text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-white mb-2">确认支付</h3>
                <p class="text-gray-400 mb-4">命理八字精批分析</p>
                <div class="text-3xl font-bold gold-text mb-6">¥68.00</div>
                
                <div class="space-y-3 mb-6">
                    <button onclick="confirmPayment()" class="w-full py-3 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-xl font-semibold">
                        <i class="fas fa-check mr-2"></i>确认支付
                    </button>
                    <button onclick="closeModal('payModal')" class="w-full py-3 bg-gray-700 text-gray-300 rounded-xl font-semibold">
                        取消
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 支付成功弹窗 -->
        <div id="successModal" class="modal">
            <div class="modal-content text-center">
                <div class="loading-spinner mx-auto mb-4"></div>
                <h3 class="text-xl font-bold text-white mb-2">支付成功</h3>
                <p class="text-gray-400">大师正在为您解读命理...</p>
            </div>
        </div>
        
        <!-- 提现弹窗 -->
        <div id="withdrawModal" class="modal">
            <div class="modal-content">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-xl font-bold text-white">提现</h3>
                    <button onclick="closeModal('withdrawModal')" class="text-gray-400 hover:text-white">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <div class="mb-5">
                    <p class="text-gray-400 text-sm mb-2">可提现金额</p>
                    <p class="text-2xl font-bold gold-text">¥368.00</p>
                </div>
                
                <div class="mb-5">
                    <label class="block text-gray-300 text-sm mb-2">提现金额</label>
                    <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-xl">¥</span>
                        <input type="number" id="withdraw-amount" placeholder="请输入金额" 
                            class="input-field w-full pl-10 pr-4 py-3 text-white text-xl">
                    </div>
                </div>
                
                <div class="mb-5">
                    <label class="block text-gray-300 text-sm mb-3">提现方式</label>
                    <div class="space-y-2">
                        <div class="radio-option selected flex items-center" onclick="selectWithdrawMethod(this)">
                            <i class="fab fa-weixin text-green-500 mr-3"></i>
                            <span class="text-white flex-1">微信</span>
                            <i class="fas fa-check text-yellow-500"></i>
                        </div>
                        <div class="radio-option flex items-center" onclick="selectWithdrawMethod(this)">
                            <i class="fas fa-university text-blue-500 mr-3"></i>
                            <span class="text-white flex-1">银行卡</span>
                        </div>
                    </div>
                </div>
                
                <button onclick="confirmWithdraw()" class="btn-gold w-full py-4 rounded-2xl text-lg">
                    确认提现
                </button>
                
                <p class="text-center text-gray-500 text-xs mt-4">提现将在1-3个工作日到账</p>
            </div>
        </div>
        
        <!-- 提现成功弹窗 -->
        <div id="withdrawSuccessModal" class="modal">
            <div class="modal-content text-center">
                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-500/20 flex items-center justify-center">
                    <i class="fas fa-check text-green-500 text-3xl"></i>
                </div>
                <h3 class="text-xl font-bold text-white mb-2">提现申请成功</h3>
                <p class="text-gray-400 mb-4">预计1-3个工作日到账</p>
<button onclick="closeModal('withdrawSuccessModal')" class="btn-gold px-8 py-3 rounded-xl">
                    知道了
                </button>
            </div>
        </div>
    </div>
    
    <script>
        let currentTab = 'home';
        let userData = {
            name: '',
            gender: 'male',
            birthday: '',
            hour: ''
        };
        
        function switchTab(tab) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
            document.getElementById('page-' + tab).classList.add('active');
            event.currentTarget.classList.add('active');
            currentTab = tab;
        }
        
        function selectGender(el) {
            document.querySelectorAll('[data-gender]').forEach(e => e.classList.remove('selected'));
            el.classList.add('selected');
            userData.gender = el.dataset.gender;
        }
        
        function startFortune() {
            userData.birthday = document.getElementById('input-birthday').value;
            userData.name = document.getElementById('input-name').value || '访客';
            userData.hour = document.getElementById('input-hour').value;
            
            if (!userData.birthday) {
                alert('请选择出生日期');
                return;
            }
            
            showModal('payModal');
        }
        
        function confirmPayment() {
            closeModal('payModal');
            showModal('successModal');
            
            setTimeout(() => {
                closeModal('successModal');
                showResult();
            }, 2000);
        }
        
        function showResult() {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById('page-result').classList.add('active');
            
            const birthday = new Date(userData.birthday);
            const genderText = userData.gender === 'male' ? '男' : '女';
            const hourText = userData.hour ? ' · ' + userData.hour.split('-')[0] + '时' : '';
            
            document.getElementById('result-name').textContent = userData.name;
            document.getElementById('result-info').textContent = 
                `${genderText} · ${birthday.getFullYear()}年${birthday.getMonth()+1}月${birthday.getDate()}日${hourText}`;
        }
        
        function goHome() {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById('page-home').classList.add('active');
            document.querySelectorAll('.tab-item')[0].classList.add('active');
            document.querySelectorAll('.tab-item')[1].classList.remove('active');
        }
        
        function showHistory() {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById('page-history').classList.add('active');
        }
        
        function showWithdrawModal() {
            showModal('withdrawModal');
        }
        
        function selectWithdrawMethod(el) {
            el.parentElement.querySelectorAll('.radio-option').forEach(e => {
                e.classList.remove('selected');
                const check = e.querySelector('.fa-check');
                if (check) check.remove();
            });
            el.classList.add('selected');
            if (!el.querySelector('.fa-check')) {
                const checkIcon = document.createElement('i');
                checkIcon.className = 'fas fa-check text-yellow-500';
                el.appendChild(checkIcon);
            }
        }
        
        function confirmWithdraw() {
            const amount = document.getElementById('withdraw-amount').value;
            if (!amount || parseFloat(amount) <= 0) {
                alert('请输入正确的提现金额');
                return;
            }
            if (parseFloat(amount) > 368) {
                alert('超过可提现余额');
                return;
            }
            closeModal('withdrawModal');
            showModal('withdrawSuccessModal');
        }
        
        function showModal(id) {
            document.getElementById(id).classList.add('show');
        }
        
        function closeModal(id) {
            document.getElementById(id).classList.remove('show');
        }
        
        document.querySelectorAll('.modal').forEach(modal => {
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    modal.classList.remove('show');
                }
            });
        });
        
        document.getElementById('input-birthday').value = '1990-05-15';
    </script>
</body>
</html>