// 所有原型界面数据
const prototypeScreens = [
    {
        id: "welcome",
        title: "欢迎页",
        content: `
            <div class="h-full flex flex-col">
                <div class="status-bar">
                    <div>9:41</div>
                    <div>
                        <i class="fas fa-signal"></i>
                        <i class="fas fa-wifi ml-2"></i>
                        <i class="fas fa-battery-full ml-2"></i>
                    </div>
                </div>
                
                <div class="flex-grow flex flex-col items-center justify-center px-8">
                    <div class="w-28 h-28 rounded-full bg-purple-600 flex items-center justify-center mb-8">
                        <i class="fas fa-graduation-cap text-5xl text-white"></i>
                    </div>
                    <h1 class="text-3xl font-bold text-center mb-4">AI智能填报志愿</h1>
                    <p class="text-gray-600 text-center mb-12">让选择大学与专业更智能、更精准</p>
                    
                    <div class="progress-dots">
                        <div class="dot active"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>
                    
                    <button class="primary-button mb-4" onclick="showScreen('login')">开始使用</button>
                    <button class="ghost-button" onclick="showScreen('home')">了解更多</button>
                </div>
            </div>
        `
    },
    {
        id: "login",
        title: "登录/注册",
        content: `
            <div class="h-full flex flex-col">
                <div class="status-bar">
                    <div>9:41</div>
                    <div>
                        <i class="fas fa-signal"></i>
                        <i class="fas fa-wifi ml-2"></i>
                        <i class="fas fa-battery-full ml-2"></i>
                    </div>
                </div>
                
                <div class="p-6 flex-grow">
                    <div class="flex items-center mb-8">
                        <i class="fas fa-arrow-left text-lg" onclick="showScreen('welcome')"></i>
                        <h1 class="text-xl font-bold ml-4">登录/注册</h1>
                    </div>
                    
                    <h2 class="text-2xl font-bold mb-2">欢迎回来</h2>
                    <p class="text-gray-600 mb-8">请登录您的账号以继续</p>
                    
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2">手机号码</label>
                        <input type="tel" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600" placeholder="请输入手机号码">
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-gray-700 text-sm font-bold mb-2">验证码</label>
                        <div class="flex">
                            <input type="text" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600" placeholder="请输入验证码">
                            <button class="ml-2 px-4 py-3 bg-gray-100 text-purple-800 font-medium rounded-lg whitespace-nowrap">获取验证码</button>
                        </div>
                    </div>
                    
                    <button class="primary-button mb-4" onclick="showScreen('home')">登录/注册</button>
                    
                    <div class="flex items-center my-6">
                        <div class="flex-grow border-t border-gray-300"></div>
                        <span class="px-4 text-gray-500 text-sm">其他登录方式</span>
                        <div class="flex-grow border-t border-gray-300"></div>
                    </div>
                    
                    <div class="flex justify-center space-x-8 mb-8">
                        <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center">
                            <i class="fab fa-weixin text-2xl text-green-600"></i>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center">
                            <i class="fab fa-qq text-2xl text-blue-600"></i>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center">
                            <i class="fas fa-mobile-alt text-2xl text-red-600"></i>
                        </div>
                    </div>
                    
                    <p class="text-center text-xs text-gray-500">登录即表示您同意我们的<span class="text-purple-600">服务条款</span>和<span class="text-purple-600">隐私政策</span></p>
                </div>
            </div>
        `
    },
    {
        id: "home",
        title: "首页",
        content: `
            <div class="h-full flex flex-col">
                <div class="status-bar">
                    <div>9:41</div>
                    <div>
                        <i class="fas fa-signal"></i>
                        <i class="fas fa-wifi ml-2"></i>
                        <i class="fas fa-battery-full ml-2"></i>
                    </div>
                </div>
                
                <div class="flex-grow overflow-y-auto pb-20">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-6">
                            <div>
                                <h1 class="text-2xl font-bold">Hi, 小明</h1>
                                <p class="text-gray-600">让AI助你规划未来</p>
                            </div>
                            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" class="avatar">
                        </div>
                        
                        <div class="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-2xl p-4 text-white mb-6">
                            <div class="flex justify-between items-center">
                                <div>
                                    <p class="mb-1">你尚未完成测评</p>
                                    <h3 class="text-lg font-bold mb-3">完成测评，获取AI志愿推荐</h3>
                                    <button class="bg-white text-purple-700 px-4 py-2 rounded-lg text-sm font-medium" onclick="showScreen('assessment')">开始测评</button>
                                </div>
                                <div class="text-right">
                                    <i class="fas fa-clipboard-list text-5xl opacity-80"></i>
                                </div>
                            </div>
                        </div>
                        
                        <h2 class="text-lg font-bold mb-4">功能导航</h2>
                        <div class="grid grid-cols-4 gap-4 mb-6">
                            <div class="flex flex-col items-center" onclick="showScreen('collegeFinder')">
                                <div class="w-14 h-14 bg-blue-100 rounded-xl flex items-center justify-center mb-2">
                                    <i class="fas fa-university text-blue-600"></i>
                                </div>
                                <span class="text-xs text-center">院校查询</span>
                            </div>
                            <div class="flex flex-col items-center" onclick="showScreen('majorExplorer')">
                                <div class="w-14 h-14 bg-green-100 rounded-xl flex items-center justify-center mb-2">
                                    <i class="fas fa-book text-green-600"></i>
                                </div>
                                <span class="text-xs text-center">专业探索</span>
                            </div>
                            <div class="flex flex-col items-center" onclick="showScreen('aiAdvisor')">
                                <div class="w-14 h-14 bg-purple-100 rounded-xl flex items-center justify-center mb-2">
                                    <i class="fas fa-robot text-purple-600"></i>
                                </div>
                                <span class="text-xs text-center">AI顾问</span>
                            </div>
                            <div class="flex flex-col items-center" onclick="showScreen('applicationPlan')">
                                <div class="w-14 h-14 bg-yellow-100 rounded-xl flex items-center justify-center mb-2">
                                    <i class="fas fa-clipboard-check text-yellow-600"></i>
                                </div>
                                <span class="text-xs text-center">志愿方案</span>
                            </div>
                        </div>
                        
                        <h2 class="text-lg font-bold mb-4">高考资讯</h2>
                        <div class="section-card mb-4">
                            <div class="flex items-center mb-3">
                                <div class="bg-red-100 text-red-600 px-2 py-1 rounded text-xs mr-2">重要</div>
                                <div class="text-sm font-medium">最新高考政策解读</div>
                            </div>
                            <p class="text-gray-600 text-sm">2023年高考政策有重大调整，点击了解详情...</p>
                            <div class="flex justify-between text-xs text-gray-500 mt-2">
                                <span>教育部</span>
                                <span>2023-05-10</span>
                            </div>
                        </div>
                        
                        <div class="section-card mb-4">
                            <div class="flex items-center mb-3">
                                <div class="bg-blue-100 text-blue-600 px-2 py-1 rounded text-xs mr-2">热门</div>
                                <div class="text-sm font-medium">2023高校招生计划公布</div>
                            </div>
                            <p class="text-gray-600 text-sm">各高校2023年招生计划已公布，热门专业名额紧张...</p>
                            <div class="flex justify-between text-xs text-gray-500 mt-2">
                                <span>招生办</span>
                                <span>2023-05-05</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="tab-bar">
                    <div class="tab-item active">
                        <i class="fas fa-home"></i>
                        <span>首页</span>
                    </div>
                    <div class="tab-item" onclick="showScreen('explore')">
                        <i class="fas fa-compass"></i>
                        <span>发现</span>
                    </div>
                    <div class="tab-item" onclick="showScreen('aiAdvisor')">
                        <i class="fas fa-robot"></i>
                        <span>AI顾问</span>
                    </div>
                    <div class="tab-item" onclick="showScreen('applicationPlan')">
                        <i class="fas fa-clipboard-list"></i>
                        <span>志愿</span>
                    </div>
                    <div class="tab-item" onclick="showScreen('profile')">
                        <i class="fas fa-user"></i>
                        <span>我的</span>
                    </div>
                </div>
            </div>
        `
    },
    {
        id: "assessment",
        title: "测评中心",
        content: `
            <div class="h-full flex flex-col">
                <div class="status-bar">
                    <div>9:41</div>
                    <div>
                        <i class="fas fa-signal"></i>
                        <i class="fas fa-wifi ml-2"></i>
                        <i class="fas fa-battery-full ml-2"></i>
                    </div>
                </div>
                
                <div class="p-6 flex-grow overflow-y-auto">
                    <div class="flex items-center mb-6">
                        <i class="fas fa-arrow-left text-lg" onclick="showScreen('home')"></i>
                        <h1 class="text-xl font-bold ml-4">测评中心</h1>
                    </div>
                    
                    <div class="bg-purple-50 rounded-xl p-4 mb-6">
                        <h2 class="text-lg font-bold mb-2">个人测评进度</h2>
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                            <div class="bg-purple-600 h-2.5 rounded-full" style="width: 25%"></div>
                        </div>
                        <div class="flex justify-between mt-2 text-sm">
                            <span>完成1/4</span>
                            <span class="text-purple-600">继续测评</span>
                        </div>
                    </div>
                    
                    <h2 class="text-lg font-bold mb-4">测评项目</h2>
                    
                    <div class="section-card mb-4 border-l-4 border-green-500">
                        <div class="flex justify-between items-center">
                            <div>
                                <h3 class="font-medium mb-1">基础信息填写</h3>
                                <p class="text-sm text-gray-600">学业信息、成绩录入</p>
                            </div>
                            <div class="bg-green-100 text-green-600 px-2 py-1 rounded text-xs">已完成</div>
                        </div>
                    </div>
                    
                    <div class="section-card mb-4 border-l-4 border-yellow-500" onclick="showScreen('interestAssessment')">
                        <div class="flex justify-between items-center">
                            <div>
                                <h3 class="font-medium mb-1">兴趣倾向测评</h3>
                                <p class="text-sm text-gray-600">了解你的职业兴趣类型</p>
                            </div>
                            <div class="bg-yellow-100 text-yellow-600 px-2 py-1 rounded text-xs">进行中</div>
                        </div>
                    </div>
                    
                    <div class="section-card mb-4 border-l-4 border-gray-300" onclick="showScreen('personalityAssessment')">
                        <div class="flex justify-between items-center">
                            <div>
                                <h3 class="font-medium mb-1">性格特质测评</h3>
                                <p class="text-sm text-gray-600">了解适合你的学习与工作环境</p>
                            </div>
                            <div class="bg-gray-100 text-gray-600 px-2 py-1 rounded text-xs">未开始</div>
                        </div>
                    </div>
                    
                    <div class="section-card mb-4 border-l-4 border-gray-300" onclick="showScreen('abilityAssessment')">
                        <div class="flex justify-between items-center">
                            <div>
                                <h3 class="font-medium mb-1">能力潜质测评</h3>
                                <p class="text-sm text-gray-600">探索你的能力优势</p>
                            </div>
                            <div class="bg-gray-100 text-gray-600 px-2 py-1 rounded text-xs">未开始</div>
                        </div>
                    </div>
                    
                    <h2 class="text-lg font-bold mb-4 mt-8">测评说明</h2>
                    <div class="section-card mb-4">
                        <p class="text-sm text-gray-600 mb-4">
                            我们的测评基于霍兰德职业兴趣理论、大五人格特质模型以及多元智能理论，通过科学的评估帮助你更好地了解自己的特点和潜力。
                        </p>
                        <p class="text-sm text-gray-600">
                            完成全部测评后，AI将根据你的测评结果、学业表现和高考政策为你推荐最适合的院校和专业方案。
                        </p>
                    </div>
                </div>
            </div>
        `
    },
    {
        id: "interestAssessment",
        title: "兴趣测评",
        content: `
            <div class="h-full flex flex-col">
                <div class="status-bar">
                    <div>9:41</div>
                    <div>
                        <i class="fas fa-signal"></i>
                        <i class="fas fa-wifi ml-2"></i>
                        <i class="fas fa-battery-full ml-2"></i>
                    </div>
                </div>
                
                <div class="p-6 flex-grow overflow-y-auto">
                    <div class="flex items-center mb-6">
                        <i class="fas fa-arrow-left text-lg" onclick="showScreen('assessment')"></i>
                        <h1 class="text-xl font-bold ml-4">兴趣倾向测评</h1>
                    </div>
                    
                    <div class="bg-purple-50 rounded-xl p-4 mb-6">
                        <div class="flex justify-between items-center mb-2">
                            <h3 class="font-bold">进度</h3>
                            <span class="text-sm text-purple-700">8/42</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                            <div class="bg-purple-600 h-2.5 rounded-full" style="width: 19%"></div>
                        </div>
                    </div>
                    
                    <div class="section-card mb-6">
                        <h2 class="text-lg font-bold mb-4">我喜欢这项活动：</h2>
                        <p class="text-xl text-center my-6 font-medium">分析和解决复杂数学问题</p>
                        
                        <div class="flex flex-col space-y-3 mt-8">
                            <button class="py-3 px-4 rounded-xl bg-purple-600 text-white font-medium">非常喜欢</button>
                            <button class="py-3 px-4 rounded-xl bg-purple-100 text-purple-700 font-medium">比较喜欢</button>
                            <button class="py-3 px-4 rounded-xl bg-gray-100 text-gray-700 font-medium">一般</button>
                            <button class="py-3 px-4 rounded-xl bg-gray-100 text-gray-700 font-medium">不太喜欢</button>
                            <button class="py-3 px-4 rounded-xl bg-gray-100 text-gray-700 font-medium">非常不喜欢</button>
                        </div>
                    </div>
                    
                    <div class="flex justify-between">
                        <button class="px-6 py-3 rounded-xl bg-gray-100 text-gray-700 font-medium">
                            <i class="fas fa-chevron-left mr-2"></i>上一题
                        </button>
                        <button class="px-6 py-3 rounded-xl bg-purple-600 text-white font-medium" onclick="showScreen('interestResult')">
                            下一题<i class="fas fa-chevron-right ml-2"></i>
                        </button>
                    </div>
                </div>
            </div>
        `
    },
    {
        id: "interestResult",
        title: "兴趣测评结果",
        content: `
            <div class="h-full flex flex-col">
                <div class="status-bar">
                    <div>9:41</div>
                    <div>
                        <i class="fas fa-signal"></i>
                        <i class="fas fa-wifi ml-2"></i>
                        <i class="fas fa-battery-full ml-2"></i>
                    </div>
                </div>
                
                <div class="p-6 flex-grow overflow-y-auto">
                    <div class="flex items-center mb-6">
                        <i class="fas fa-arrow-left text-lg" onclick="showScreen('assessment')"></i>
                        <h1 class="text-xl font-bold ml-4">测评结果</h1>
                    </div>
                    
                    <div class="bg-purple-50 rounded-xl p-6 mb-6">
                        <h2 class="text-lg font-bold mb-2">您的兴趣类型</h2>
                        <div class="flex items-center justify-center space-x-2 mb-4">
                            <span class="text-purple-700 text-3xl font-bold">I</span>
                            <span class="text-green-600 text-2xl font-bold">A</span>
                            <span class="text-blue-600 text-xl font-bold">S</span>
                        </div>
                        <p class="text-center font-medium mb-2">调查型-艺术型-社会型</p>
                        <p class="text-sm text-gray-600 text-center">您喜欢分析、探索与创造</p>
                    </div>
                    
                    <div class="section-card mb-6">
                        <h3 class="font-bold mb-4">详细分析</h3>
                        <div class="mb-4">
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-sm">调查型(I)</span>
                                <span class="text-sm font-bold">85%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-purple-600 h-2.5 rounded-full" style="width: 85%"></div>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-sm">艺术型(A)</span>
                                <span class="text-sm font-bold">65%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-green-500 h-2.5 rounded-full" style="width: 65%"></div>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-sm">社会型(S)</span>
                                <span class="text-sm font-bold">50%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-blue-500 h-2.5 rounded-full" style="width: 50%"></div>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-sm">实用型(R)</span>
                                <span class="text-sm font-bold">35%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 35%"></div>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-sm">企业型(E)</span>
                                <span class="text-sm font-bold">30%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-red-500 h-2.5 rounded-full" style="width: 30%"></div>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-sm">常规型(C)</span>
                                <span class="text-sm font-bold">25%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-gray-500 h-2.5 rounded-full" style="width: 25%"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="section-card mb-6">
                        <h3 class="font-bold mb-3">适合您的专业方向</h3>
                        <div class="flex flex-wrap mb-4">
                            <span class="tag active">计算机科学</span>
                            <span class="tag active">数据科学</span>
                            <span class="tag active">物理学</span>
                            <span class="tag active">数学</span>
                            <span class="tag">生物科技</span>
                            <span class="tag">建筑设计</span>
                            <span class="tag">软件工程</span>
                            <span class="tag">人工智能</span>
                        </div>
                        <button class="text-purple-600 text-sm font-medium">查看更多推荐专业</button>
                    </div>
                    
                    <div class="section-card mb-6">
                        <h3 class="font-bold mb-3">职业兴趣特点</h3>
                        <p class="text-sm text-gray-600 mb-3">
                            您属于典型的调查型人格，喜欢研究工作，有很强的分析能力和逻辑思维，乐于探索未知领域，解决复杂问题。
                        </p>
                        <p class="text-sm text-gray-600">
                            同时，您具有一定的艺术气质，有创意思维，喜欢在研究中加入创新元素，并对帮助他人也有一定的兴趣。
                        </p>
                    </div>
                    
                    <button class="primary-button mb-4" onclick="showScreen('assessment')">继续下一项测评</button>
                    <button class="secondary-button" onclick="showScreen('aiRecommendation')">查看AI专业推荐</button>
                </div>
            </div>
        `
    },
    {
        id: "aiRecommendation",
        title: "AI专业推荐",
        content: `
            <div class="h-full flex flex-col">
                <div class="status-bar">
                    <div>9:41</div>
                    <div>
                        <i class="fas fa-signal"></i>
                        <i class="fas fa-wifi ml-2"></i>
                        <i class="fas fa-battery-full ml-2"></i>
                    </div>
                </div>
                
                <div class="p-6 flex-grow overflow-y-auto">
                    <div class="flex items-center mb-6">
                        <i class="fas fa-arrow-left text-lg" onclick="showScreen('interestResult')"></i>
                        <h1 class="text-xl font-bold ml-4">AI推荐方案</h1>
                    </div>
                    
                    <div class="bg-gradient-to-r from-purple-600 to-indigo-700 rounded-xl p-6 text-white mb-6">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-robot text-purple-600 text-xl"></i>
                            </div>
                            <div>
                                <h2 class="font-bold text-lg">AI分析完成</h2>
                                <p class="text-sm opacity-80">以下方案基于您的测评结果和高考分数</p>
                            </div>
                        </div>
                        <div class="flex justify-between items-center text-sm">
                            <div>
                                <p>预估分数</p>
                                <p class="font-bold text-xl">635</p>
                            </div>
                            <div>
                                <p>测评完成</p>
                                <p class="font-bold text-xl">1/4</p>
                            </div>
                            <div>
                                <p>匹配度</p>
                                <p class="font-bold text-xl">78%</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex overflow-x-auto space-x-3 mb-6 py-2">
                        <div class="px-4 py-2 bg-purple-600 text-white rounded-full text-sm whitespace-nowrap">全部推荐</div>
                        <div class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap">计算机科学</div>
                        <div class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap">数据科学</div>
                        <div class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap">物理学</div>
                        <div class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap">数学</div>
                    </div>
                    
                    <div class="section-card mb-4">
                        <div class="flex items-center mb-2">
                            <img src="https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=60&q=80" class="w-10 h-10 rounded-md mr-3">
                            <div>
                                <h3 class="font-bold">北京大学</h3>
                                <p class="text-xs text-gray-500">计算机科学与技术</p>
                            </div>
                            <div class="ml-auto bg-green-100 text-green-600 px-2 py-1 rounded-md text-xs">
                                匹配度 95%
                            </div>
                        </div>
                        <div class="flex justify-between text-sm mt-3">
                            <div>
                                <p class="text-gray-500">往年分数线</p>
                                <p class="font-medium">639</p>
                            </div>
                            <div>
                                <p class="text-gray-500">预测概率</p>
                                <p class="font-medium text-orange-500">偏冲</p>
                            </div>
                            <button class="px-3 py-1 bg-purple-100 text-purple-600 rounded-md text-sm" onclick="showScreen('collegeDetail')">查看详情</button>
                        </div>
                    </div>
                    
                    <div class="section-card mb-4">
                        <div class="flex items-center mb-2">
                            <img src="https://images.unsplash.com/photo-1592494804071-1404ae3abb17?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=60&q=80" class="w-10 h-10 rounded-md mr-3">
                            <div>
                                <h3 class="font-bold">浙江大学</h3>
                                <p class="text-xs text-gray-500">数据科学与大数据技术</p>
                            </div>
                            <div class="ml-auto bg-green-100 text-green-600 px-2 py-1 rounded-md text-xs">
                                匹配度 90%
                            </div>
                        </div>
                        <div class="flex justify-between text-sm mt-3">
                            <div>
                                <p class="text-gray-500">往年分数线</p>
                                <p class="font-medium">625</p>
                            </div>
                            <div>
                                <p class="text-gray-500">预测概率</p>
                                <p class="font-medium text-green-500">较稳</p>
                            </div>
                            <button class="px-3 py-1 bg-purple-100 text-purple-600 rounded-md text-sm">查看详情</button>
                        </div>
                    </div>
                    
                    <div class="section-card mb-4">
                        <div class="flex items-center mb-2">
                            <img src="https://images.unsplash.com/photo-1627556592933-ffe99c1cd9eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=60&q=80" class="w-10 h-10 rounded-md mr-3">
                            <div>
                                <h3 class="font-bold">复旦大学</h3>
                                <p class="text-xs text-gray-500">人工智能</p>
                            </div>
                            <div class="ml-auto bg-green-100 text-green-600 px-2 py-1 rounded-md text-xs">
                                匹配度 88%
                            </div>
                        </div>
                        <div class="flex justify-between text-sm mt-3">
                            <div>
                                <p class="text-gray-500">往年分数线</p>
                                <p class="font-medium">630</p>
                            </div>
                            <div>
                                <p class="text-gray-500">预测概率</p>
                                <p class="font-medium text-orange-500">偏冲</p>
                            </div>
                            <button class="px-3 py-1 bg-purple-100 text-purple-600 rounded-md text-sm">查看详情</button>
                        </div>
                    </div>
                    
                    <div class="section-card mb-4">
                        <div class="flex items-center mb-2">
                            <img src="https://images.unsplash.com/photo-1607237138185-eedd9c632b0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=60&q=80" class="w-10 h-10 rounded-md mr-3">
                            <div>
                                <h3 class="font-bold">上海交通大学</h3>
                                <p class="text-xs text-gray-500">软件工程</p>
                            </div>
                            <div class="ml-auto bg-green-100 text-green-600 px-2 py-1 rounded-md text-xs">
                                匹配度 85%
                            </div>
                        </div>
                        <div class="flex justify-between text-sm mt-3">
                            <div>
                                <p class="text-gray-500">往年分数线</p>
                                <p class="font-medium">628</p>
                            </div>
                            <div>
                                <p class="text-gray-500">预测概率</p>
                                <p class="font-medium text-orange-500">偏冲</p>
                            </div>
                            <button class="px-3 py-1 bg-purple-100 text-purple-600 rounded-md text-sm">查看详情</button>
                        </div>
                    </div>
                    
                    <div class="text-center text-gray-500 text-sm mb-6">
                        <p>显示 4/20 个推荐结果</p>
                        <button class="text-purple-600 font-medium mt-2">加载更多</button>
                    </div>
                    
                    <div class="flex space-x-4 mb-6">
                        <button class="flex-1 py-3 bg-purple-600 text-white rounded-xl font-medium" onclick="showScreen('applicationPlan')">保存方案</button>
                        <button class="flex-1 py-3 bg-gray-100 text-gray-700 rounded-xl font-medium" onclick="showScreen('aiAdvisor')">咨询AI顾问</button>
                    </div>
                </div>
            </div>
        `
    },
    {
        id: "collegeDetail",
        title: "院校详情",
        content: `
            <div class="h-full flex flex-col">
                <div class="status-bar">
                    <div>9:41</div>
                    <div>
                        <i class="fas fa-signal"></i>
                        <i class="fas fa-wifi ml-2"></i>
                        <i class="fas fa-battery-full ml-2"></i>
                    </div>
                </div>
                
                <div class="flex-grow overflow-y-auto">
                    <div class="relative h-60">
                        <img src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" class="w-full h-full object-cover">
                        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-70"></div>
                        <div class="absolute top-6 left-6">
                            <i class="fas fa-arrow-left text-white text-lg" onclick="showScreen('aiRecommendation')"></i>
                        </div>
                        <div class="absolute bottom-6 left-6 text-white">
                            <h1 class="text-2xl font-bold">北京大学</h1>
                            <p class="text-sm opacity-80">985 | 211 | 世界一流大学</p>
                        </div>
                    </div>
                    
                    <div class="px-6 py-4">
                        <div class="flex space-x-4 mb-6">
                            <div class="flex-1 bg-blue-50 rounded-xl p-3 text-center">
                                <p class="text-xs text-gray-500 mb-1">全国排名</p>
                                <p class="font-bold text-blue-600">2</p>
                            </div>
                            <div class="flex-1 bg-green-50 rounded-xl p-3 text-center">
                                <p class="text-xs text-gray-500 mb-1">录取分数</p>
                                <p class="font-bold text-green-600">639</p>
                            </div>
                            <div class="flex-1 bg-purple-50 rounded-xl p-3 text-center">
                                <p class="text-xs text-gray-500 mb-1">录取概率</p>
                                <p class="font-bold text-purple-600">偏冲</p>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <h2 class="text-lg font-bold mb-3">专业详情</h2>
                            <div class="bg-white rounded-xl p-4 shadow-sm">
                                <div class="flex justify-between items-center mb-3">
                                    <h3 class="font-bold">计算机科学与技术</h3>
                                    <div class="bg-green-100 text-green-600 px-2 py-1 rounded text-xs">
                                        匹配度 95%
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600 mb-3">
                                    计算机科学与技术专业是北京大学的王牌专业之一，师资力量雄厚，注重理论与实践相结合，为学生提供国际一流的学习环境。
                                </p>
                                <div class="grid grid-cols-2 gap-2 text-sm">
                                    <div>
                                        <p class="text-gray-500">学制</p>
                                        <p class="font-medium">4年</p>
                                    </div>
                                    <div>
                                        <p class="text-gray-500">学位</p>
                                        <p class="font-medium">工学学士</p>
                                    </div>
                                    <div>
                                        <p class="text-gray-500">招生人数</p>
                                        <p class="font-medium">120人</p>
                                    </div>
                                    <div>
                                        <p class="text-gray-500">男女比例</p>
                                        <p class="font-medium">7:3</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <h2 class="text-lg font-bold mb-3">分数走势</h2>
                            <div class="bg-white rounded-xl p-4 shadow-sm">
                                <!-- 这里应该有图表，使用div模拟 -->
                                <div class="h-40 bg-gray-50 rounded flex items-center justify-center">
                                    <div class="w-full px-4">
                                        <div class="h-32 relative">
                                            <div class="absolute bottom-0 left-0 w-1/5 h-24 bg-purple-500 rounded-t"></div>
                                            <div class="absolute bottom-0 left-1/5 w-1/5 h-28 bg-purple-500 rounded-t"></div>
                                            <div class="absolute bottom-0 left-2/5 w-1/5 h-26 bg-purple-500 rounded-t"></div>
                                            <div class="absolute bottom-0 left-3/5 w-1/5 h-30 bg-purple-500 rounded-t"></div>
                                            <div class="absolute bottom-0 left-4/5 w-1/5 h-32 bg-purple-500 rounded-t"></div>
                                        </div>
                                        <div class="flex justify-between text-xs text-gray-500 mt-2">
                                            <span>2018</span>
                                            <span>2019</span>
                                            <span>2020</span>
                                            <span>2021</span>
                                            <span>2022</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex justify-between mt-3 text-sm">
                                    <div>
                                        <p class="text-gray-500">最高分</p>
                                        <p class="font-medium">678</p>
                                    </div>
                                    <div>
                                        <p class="text-gray-500">最低分</p>
                                        <p class="font-medium">639</p>
                                    </div>
                                    <div>
                                        <p class="text-gray-500">平均分</p>
                                        <p class="font-medium">650</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <h2 class="text-lg font-bold mb-3">院校优势</h2>
                            <div class="bg-white rounded-xl p-4 shadow-sm">
                                <div class="flex items-center mb-3">
                                    <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                        <i class="fas fa-medal text-blue-600"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-medium">学科实力</h3>
                                        <p class="text-xs text-gray-500">计算机学科全国排名第2</p>
                                    </div>
                                </div>
                                
                                <div class="flex items-center mb-3">
                                    <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                        <i class="fas fa-users text-green-600"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-medium">师资力量</h3>
                                        <p class="text-xs text-gray-500">院士8人，长江学者15人</p>
                                    </div>
                                </div>
                                
                                <div class="flex items-center mb-3">
                                    <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                                        <i class="fas fa-globe text-purple-600"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-medium">国际化程度</h3>
                                        <p class="text-xs text-gray-500">多项国际交流项目，出国率高</p>
                                    </div>
                                </div>
                                
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
                                        <i class="fas fa-briefcase text-yellow-600"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-medium">就业前景</h3>
                                        <p class="text-xs text-gray-500">就业率99.2%，平均起薪25K+</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <h2 class="text-lg font-bold mb-3">AI评估</h2>
                            <div class="bg-white rounded-xl p-4 shadow-sm">
                                <div class="flex items-start mb-4">
                                    <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3 mt-1">
                                        <i class="fas fa-robot text-purple-600"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">
                                            根据您的兴趣偏好(调查型-艺术型-社会型)，北京大学计算机科学与技术专业与您的兴趣高度匹配。您喜欢分析问题和创新思考，这与该专业的学习特点非常吻合。
                                        </p>
                                    </div>
                                </div>
                                
                                <div class="flex items-start">
                                    <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3 mt-1">
                                        <i class="fas fa-robot text-purple-600"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">
                                            以您预估的635分来看，北大计算机专业(去年分数线639)属于"偏冲"志愿，建议作为冲刺志愿填报。您可以配合填报把握性更大的浙江大学数据科学专业作为保底选择。
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="sticky bottom-0 flex space-x-4 p-4 bg-white border-t">
                        <button class="flex-1 py-3 bg-gray-100 text-gray-700 rounded-xl font-medium">
                            <i class="far fa-heart mr-2"></i>收藏
                        </button>
                        <button class="flex-1 py-3 bg-purple-600 text-white rounded-xl font-medium" onclick="showScreen('applicationPlan')">添加到志愿方案</button>
                    </div>
                </div>
            </div>
        `
    },
    {
        id: "aiAdvisor",
        title: "AI顾问",
        content: `
            <div class="h-full flex flex-col">
                <div class="status-bar">
                    <div>9:41</div>
                    <div>
                        <i class="fas fa-signal"></i>
                        <i class="fas fa-wifi ml-2"></i>
                        <i class="fas fa-battery-full ml-2"></i>
                    </div>
                </div>
                
                <div class="flex items-center p-4 border-b">
                    <i class="fas fa-arrow-left text-lg mr-4" onclick="showScreen('home')"></i>
                    <h1 class="text-xl font-bold">AI顾问</h1>
                </div>
                
                <div class="flex-grow overflow-y-auto p-4" id="chat-container">
                    <!-- 日期分隔线 -->
                    <div class="flex justify-center mb-4">
                        <span class="text-xs bg-gray-100 text-gray-500 px-3 py-1 rounded-full">今天 14:30</span>
                    </div>
                    
                    <!-- AI消息 -->
                    <div class="flex mb-4">
                        <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center text-white mr-2">
                            <i class="fas fa-robot"></i>
                        </div>
                        <div class="max-w-[70%]">
                            <div class="bg-gray-100 rounded-2xl rounded-tl-none p-3 mb-1">
                                <p class="text-gray-800">你好，我是你的AI志愿顾问小智！我可以帮你解答关于高考志愿填报的任何问题。</p>
                            </div>
                            <div class="bg-gray-100 rounded-2xl rounded-tl-none p-3">
                                <p class="text-gray-800">根据你的测评结果，你对计算机和数据科学比较感兴趣。有什么具体问题想了解的吗？</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 用户消息 -->
                    <div class="flex justify-end mb-4">
                        <div class="max-w-[70%]">
                            <div class="bg-purple-600 text-white rounded-2xl rounded-tr-none p-3">
                                <p>北京大学和清华大学的计算机专业有什么区别？哪个更适合我？</p>
                            </div>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-gray-200 ml-2 overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" class="w-full h-full object-cover">
                        </div>
                    </div>
                    
                    <!-- AI消息 -->
                    <div class="flex mb-4">
                        <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center text-white mr-2">
                            <i class="fas fa-robot"></i>
                        </div>
                        <div class="max-w-[70%]">
                            <div class="bg-gray-100 rounded-2xl rounded-tl-none p-3">
                                <p class="text-gray-800">北大和清华的计算机专业各有特色：</p>
                                <p class="text-gray-800 mt-2">1. <strong>北大计算机</strong>：更注重理论基础和学术研究，数学和算法要求高，适合有深厚理论兴趣的学生。</p>
                                <p class="text-gray-800 mt-2">2. <strong>清华计算机</strong>：更注重工程实践和系统开发，产学研结合紧密，适合喜欢动手实践的学生。</p>
                                <p class="text-gray-800 mt-2">根据你的兴趣测评结果(调查型-艺术型-社会型)，你偏好分析和创造，北大的理论特色可能更适合你。但两校都是顶尖学府，选择任一都很出色。</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 用户消息 -->
                    <div class="flex justify-end mb-4">
                        <div class="max-w-[70%]">
                            <div class="bg-purple-600 text-white rounded-2xl rounded-tr-none p-3">
                                <p>我的预估分数是635分，两所学校都很难考吗？</p>
                            </div>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-gray-200 ml-2 overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" class="w-full h-full object-cover">
                        </div>
                    </div>
                    
                    <!-- AI消息 -->
                    <div class="flex mb-4">
                        <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center text-white mr-2">
                            <i class="fas fa-robot"></i>
                        </div>
                        <div class="max-w-[70%]">
                            <div class="bg-gray-100 rounded-2xl rounded-tl-none p-3">
                                <p class="text-gray-800">以635分来看，确实两所学校的计算机专业都属于偏冲志愿：</p>
                                <p class="text-gray-800 mt-2">- 北大计算机2022年分数线：639分</p>
                                <p class="text-gray-800 mt-2">- 清华计算机2022年分数线：642分</p>
                                <p class="text-gray-800 mt-2">建议你可以把这两所学校作为冲刺志愿，同时选择一些把握更大的学校作为稳妥志愿，比如浙江大学(625分)、复旦大学(630分)的相关专业。</p>
                                <p class="text-gray-800 mt-2">我可以帮你制定一个梯度合理的志愿方案，你希望偏重于哪个城市发展呢？</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="p-3 border-t">
                    <div class="flex">
                        <div class="flex space-x-2 mr-2">
                            <button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500">
                                <i class="fas fa-image"></i>
                            </button>
                            <button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500">
                                <i class="fas fa-microphone"></i>
                            </button>
                        </div>
                        <div class="flex-grow relative">
                            <input type="text" class="w-full px-4 py-2 pr-12 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600" placeholder="输入你的问题...">
                            <button class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center text-white">
                                <i class="fas fa-paper-plane text-sm"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="flex justify-between mt-3 px-2">
                        <button class="px-3 py-1 rounded-full bg-gray-100 text-sm text-gray-700">适合我的专业</button>
                        <button class="px-3 py-1 rounded-full bg-gray-100 text-sm text-gray-700">志愿填报技巧</button>
                        <button class="px-3 py-1 rounded-full bg-gray-100 text-sm text-gray-700">今年高考形势</button>
                    </div>
                </div>
            </div>
        `
    },
    {
        id: "applicationPlan",
        title: "志愿方案",
        content: `
            <div class="h-full flex flex-col">
                <div class="status-bar">
                    <div>9:41</div>
                    <div>
                        <i class="fas fa-signal"></i>
                        <i class="fas fa-wifi ml-2"></i>
                        <i class="fas fa-battery-full ml-2"></i>
                    </div>
                </div>
                
                <div class="p-4 border-b flex items-center">
                    <h1 class="text-xl font-bold flex-grow">我的志愿方案</h1>
                    <button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-700">
                        <i class="fas fa-share-alt"></i>
                    </button>
                </div>
                
                <div class="flex overflow-x-auto space-x-3 p-4 border-b">
                    <div class="px-4 py-2 bg-purple-600 text-white rounded-full text-sm whitespace-nowrap">方案一</div>
                    <div class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap">方案二</div>
                    <div class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap">方案三</div>
                    <div class="px-4 py-2 border border-dashed border-gray-300 text-gray-500 rounded-full text-sm whitespace-nowrap">
                        <i class="fas fa-plus mr-1"></i>新方案
                    </div>
                </div>
                
                <div class="flex-grow overflow-y-auto p-4">
                    <div class="bg-purple-50 rounded-xl p-4 mb-6">
                        <div class="flex justify-between items-center mb-3">
                            <h2 class="font-bold">方案一：计算机与数据科学</h2>
                            <div class="bg-green-100 text-green-600 px-2 py-1 rounded text-xs">
                                匹配度 92%
                            </div>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">
                            适合喜欢计算机科学、数据分析和算法设计的学生。此方案按冲稳保策略排列，保证录取概率的同时兼顾院校和专业质量。
                        </p>
                        <div class="flex justify-between text-sm">
                            <div>
                                <p class="text-gray-500">预估分数</p>
                                <p class="font-medium">635</p>
                            </div>
                            <div>
                                <p class="text-gray-500">创建时间</p>
                                <p class="font-medium">2023-06-15</p>
                            </div>
                            <div>
                                <p class="text-gray-500">冲稳保比例</p>
                                <p class="font-medium">3:3:2</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="text-lg font-bold">填报院校</h2>
                            <button class="text-purple-600 text-sm font-medium">
                                <i class="fas fa-edit mr-1"></i>编辑
                            </button>
                        </div>
                        
                        <div class="space-y-3">
                            <!-- 冲刺院校 -->
                            <div class="bg-white rounded-xl p-4 shadow-sm border-l-4 border-red-500">
                                <div class="flex items-center mb-2">
                                    <div class="bg-red-100 text-red-600 px-2 py-1 rounded text-xs mr-2">冲刺</div>
                                    <span class="text-sm text-gray-500">第1志愿</span>
                                </div>
                                <div class="flex items-center">
                                    <img src="https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=60&q=80" class="w-10 h-10 rounded-md mr-3">
                                    <div class="flex-grow">
                                        <h3 class="font-bold">北京大学</h3>
                                        <p class="text-xs text-gray-500">计算机科学与技术</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-xs text-gray-500">往年分数线</p>
                                        <p class="font-medium">639</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl p-4 shadow-sm border-l-4 border-red-500">
                                <div class="flex items-center mb-2">
                                    <div class="bg-red-100 text-red-600 px-2 py-1 rounded text-xs mr-2">冲刺</div>
                                    <span class="text-sm text-gray-500">第2志愿</span>
                                </div>
                                <div class="flex items-center">
                                    <img src="https://images.unsplash.com/photo-1607237138185-eedd9c632b0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=60&q=80" class="w-10 h-10 rounded-md mr-3">
                                    <div class="flex-grow">
                                        <h3 class="font-bold">上海交通大学</h3>
                                        <p class="text-xs text-gray-500">人工智能</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-xs text-gray-500">往年分数线</p>
                                        <p class="font-medium">638</p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 稳妥院校 -->
                            <div class="bg-white rounded-xl p-4 shadow-sm border-l-4 border-green-500">
                                <div class="flex items-center mb-2">
                                    <div class="bg-green-100 text-green-600 px-2 py-1 rounded text-xs mr-2">稳妥</div>
                                    <span class="text-sm text-gray-500">第3志愿</span>
                                </div>
                                <div class="flex items-center">
                                    <img src="https://images.unsplash.com/photo-1592494804071-1404ae3abb17?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=60&q=80" class="w-10 h-10 rounded-md mr-3">
                                    <div class="flex-grow">
                                        <h3 class="font-bold">浙江大学</h3>
                                        <p class="text-xs text-gray-500">数据科学与大数据技术</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-xs text-gray-500">往年分数线</p>
                                        <p class="font-medium">625</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl p-4 shadow-sm border-l-4 border-green-500">
                                <div class="flex items-center mb-2">
                                    <div class="bg-green-100 text-green-600 px-2 py-1 rounded text-xs mr-2">稳妥</div>
                                    <span class="text-sm text-gray-500">第4志愿</span>
                                </div>
                                <div class="flex items-center">
                                    <img src="https://images.unsplash.com/photo-1627556592933-ffe99c1cd9eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=60&q=80" class="w-10 h-10 rounded-md mr-3">
                                    <div class="flex-grow">
                                        <h3 class="font-bold">复旦大学</h3>
                                        <p class="text-xs text-gray-500">软件工程</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-xs text-gray-500">往年分数线</p>
                                        <p class="font-medium">630</p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 保底院校 -->
                            <div class="bg-white rounded-xl p-4 shadow-sm border-l-4 border-blue-500">
                                <div class="flex items-center mb-2">
                                    <div class="bg-blue-100 text-blue-600 px-2 py-1 rounded text-xs mr-2">保底</div>
                                    <span class="text-sm text-gray-500">第5志愿</span>
                                </div>
                                <div class="flex items-center">
                                    <img src="https://images.unsplash.com/photo-1611095772760-5b1e6f75dd9f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=60&q=80" class="w-10 h-10 rounded-md mr-3">
                                    <div class="flex-grow">
                                        <h3 class="font-bold">同济大学</h3>
                                        <p class="text-xs text-gray-500">计算机科学与技术</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-xs text-gray-500">往年分数线</p>
                                        <p class="font-medium">620</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <h2 class="text-lg font-bold mb-4">AI方案分析</h2>
                        <div class="bg-white rounded-xl p-4 shadow-sm">
                            <div class="flex items-start mb-4">
                                <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3 mt-1">
                                    <i class="fas fa-robot text-purple-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">
                                        你的志愿方案整体匹配度高达92%，兼顾了冲刺与保底策略。北京大学和上海交通大学作为冲刺院校，给你提供了冲击顶尖高校的机会；浙江大学和复旦大学作为稳妥选择，录取可能性较大；同济大学作为保底院校，几乎可以确保录取。
                                    </p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3 mt-1">
                                    <i class="fas fa-chart-pie text-purple-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">
                                        录取概率分析：北京大学(40%)、上海交通大学(45%)、浙江大学(75%)、复旦大学(65%)、同济大学(95%)。根据历年数据，该方案至少有92%的概率能被前三志愿中的一所录取。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex space-x-4 mb-6">
                        <button class="flex-1 py-3 bg-purple-600 text-white rounded-xl font-medium">导出PDF</button>
                        <button class="flex-1 py-3 bg-gray-100 text-gray-700 rounded-xl font-medium" onclick="showScreen('aiAdvisor')">咨询顾问</button>
                    </div>
                </div>
                
                <div class="tab-bar">
                    <div class="tab-item" onclick="showScreen('home')">
                        <i class="fas fa-home"></i>
                        <span>首页</span>
                    </div>
                    <div class="tab-item" onclick="showScreen('explore')">
                        <i class="fas fa-compass"></i>
                        <span>发现</span>
                    </div>
                    <div class="tab-item" onclick="showScreen('aiAdvisor')">
                        <i class="fas fa-robot"></i>
                        <span>AI顾问</span>
                    </div>
                    <div class="tab-item active">
                        <i class="fas fa-clipboard-list"></i>
                        <span>志愿</span>
                    </div>
                    <div class="tab-item" onclick="showScreen('profile')">
                        <i class="fas fa-user"></i>
                        <span>我的</span>
                    </div>
                </div>
            </div>
        `
    },
    {
        id: "majorExplorer",
        title: "专业探索",
        content: `
            <div class="h-full flex flex-col">
                <div class="status-bar">
                    <div>9:41</div>
                    <div>
                        <i class="fas fa-signal"></i>
                        <i class="fas fa-wifi ml-2"></i>
                        <i class="fas fa-battery-full ml-2"></i>
                    </div>
                </div>
                
                <div class="p-4 border-b flex items-center">
                    <i class="fas fa-arrow-left text-lg mr-4" onclick="showScreen('home')"></i>
                    <h1 class="text-xl font-bold">专业探索</h1>
                </div>
                
                <div class="p-4 border-b">
                    <div class="relative">
                        <input type="text" class="w-full px-4 py-2 pl-10 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600" placeholder="搜索专业名称、关键词">
                        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                </div>
                
                <div class="overflow-x-auto flex space-x-3 p-4 border-b">
                    <div class="px-3 py-2 bg-purple-600 text-white rounded-full text-sm whitespace-nowrap">全部</div>
                    <div class="px-3 py-2 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap">理学</div>
                    <div class="px-3 py-2 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap">工学</div>
                    <div class="px-3 py-2 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap">经济学</div>
                    <div class="px-3 py-2 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap">文学</div>
                    <div class="px-3 py-2 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap">医学</div>
                    <div class="px-3 py-2 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap">艺术学</div>
                </div>
                
                <div class="flex-grow overflow-y-auto p-4">
                    <h2 class="text-lg font-bold mb-4">AI推荐专业</h2>
                    
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-4" onclick="showScreen('majorDetail')">
                        <div class="h-32 bg-blue-500 relative">
                            <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="w-full h-full object-cover">
                            <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-50"></div>
                            <div class="absolute top-2 right-2 bg-green-100 text-green-600 px-2 py-1 rounded text-xs">
                                匹配度 95%
                            </div>
                            <div class="absolute bottom-3 left-4 text-white">
                                <h3 class="font-bold text-lg">计算机科学与技术</h3>
                                <p class="text-xs opacity-90">工学 | 全国共2361所院校开设</p>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex space-x-2 mb-3">
                                <span class="tag">算法</span>
                                <span class="tag">编程</span>
                                <span class="tag">软件开发</span>
                                <span class="tag">人工智能</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-3">
                                计算机科学与技术专业培养具备计算机系统的设计、开发与应用能力的高级人才。主要课程包括程序设计、数据结构、算法分析、操作系统、计算机网络等。
                            </p>
                            <div class="flex justify-between text-sm">
                                <div>
                                    <p class="text-gray-500">就业率</p>
                                    <p class="font-medium text-green-600">98.2%</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">平均薪资</p>
                                    <p class="font-medium">12K+</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">就业满意度</p>
                                    <p class="font-medium">4.5/5</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-4">
                        <div class="h-32 bg-green-500 relative">
                            <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="w-full h-full object-cover">
                            <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-50"></div>
                            <div class="absolute top-2 right-2 bg-green-100 text-green-600 px-2 py-1 rounded text-xs">
                                匹配度 90%
                            </div>
                            <div class="absolute bottom-3 left-4 text-white">
                                <h3 class="font-bold text-lg">数据科学与大数据技术</h3>
                                <p class="text-xs opacity-90">理学 | 全国共1246所院校开设</p>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex space-x-2 mb-3">
                                <span class="tag">数据分析</span>
                                <span class="tag">机器学习</span>
                                <span class="tag">统计学</span>
                                <span class="tag">商业智能</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-3">
                                数据科学与大数据技术专业培养能够从海量数据中挖掘有价值信息的专业人才。主要课程包括数据挖掘、统计学、机器学习、数据可视化等。
                            </p>
                            <div class="flex justify-between text-sm">
                                <div>
                                    <p class="text-gray-500">就业率</p>
                                    <p class="font-medium text-green-600">96.8%</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">平均薪资</p>
                                    <p class="font-medium">15K+</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">就业满意度</p>
                                    <p class="font-medium">4.3/5</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-4">
                        <div class="h-32 bg-purple-500 relative">
                            <img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="w-full h-full object-cover">
                            <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-50"></div>
                            <div class="absolute top-2 right-2 bg-green-100 text-green-600 px-2 py-1 rounded text-xs">
                                匹配度 85%
                            </div>
                            <div class="absolute bottom-3 left-4 text-white">
                                <h3 class="font-bold text-lg">人工智能</h3>
                                <p class="text-xs opacity-90">工学 | 全国共985所院校开设</p>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex space-x-2 mb-3">
                                <span class="tag">深度学习</span>
                                <span class="tag">自然语言处理</span>
                                <span class="tag">计算机视觉</span>
                                <span class="tag">智能系统</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-3">
                                人工智能专业培养掌握人工智能理论与应用的高级技术人才。主要课程包括机器学习、深度学习、自然语言处理、计算机视觉等。
                            </p>
                            <div class="flex justify-between text-sm">
                                <div>
                                    <p class="text-gray-500">就业率</p>
                                    <p class="font-medium text-green-600">97.5%</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">平均薪资</p>
                                    <p class="font-medium">18K+</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">就业满意度</p>
                                    <p class="font-medium">4.7/5</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <h2 class="text-lg font-bold mb-4 mt-6">热门专业</h2>
                    
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                            <div class="h-24 relative">
                                <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" class="w-full h-full object-cover">
                                <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-50"></div>
                                <div class="absolute bottom-2 left-3 text-white">
                                    <h3 class="font-bold">软件工程</h3>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                            <div class="h-24 relative">
                                <img src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" class="w-full h-full object-cover">
                                <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-50"></div>
                                <div class="absolute bottom-2 left-3 text-white">
                                    <h3 class="font-bold">金融学</h3>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                            <div class="h-24 relative">
                                <img src="https://images.unsplash.com/photo-1532094349884-543019a69b2f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" class="w-full h-full object-cover">
                                <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-50"></div>
                                <div class="absolute bottom-2 left-3 text-white">
                                    <h3 class="font-bold">临床医学</h3>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                            <div class="h-24 relative">
                                <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" class="w-full h-full object-cover">
                                <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-50"></div>
                                <div class="absolute bottom-2 left-3 text-white">
                                    <h3 class="font-bold">法学</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `
    },
    {
        id: "majorDetail",
        title: "专业详情",
        content: `
            <div class="h-full flex flex-col">
                <div class="status-bar">
                    <div>9:41</div>
                    <div>
                        <i class="fas fa-signal"></i>
                        <i class="fas fa-wifi ml-2"></i>
                        <i class="fas fa-battery-full ml-2"></i>
                    </div>
                </div>
                
                <div class="flex-grow overflow-y-auto">
                    <div class="relative h-60">
                        <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" class="w-full h-full object-cover">
                        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-70"></div>
                        <div class="absolute top-6 left-6">
                            <i class="fas fa-arrow-left text-white text-lg" onclick="showScreen('majorExplorer')"></i>
                        </div>
                        <div class="absolute bottom-6 left-6 text-white">
                            <h1 class="text-2xl font-bold">计算机科学与技术</h1>
                            <p class="text-sm opacity-80">工学 | 国家一流本科专业</p>
                        </div>
                    </div>
                    
                    <div class="px-6 py-4">
                        <div class="flex space-x-2 mb-4">
                            <span class="tag">算法</span>
                            <span class="tag">编程</span>
                            <span class="tag">软件开发</span>
                            <span class="tag">人工智能</span>
                            <span class="tag">数据结构</span>
                        </div>
                        
                        <div class="bg-green-50 rounded-xl p-4 mb-6">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                    <i class="fas fa-chart-line text-green-600"></i>
                                </div>
                                <div>
                                    <h3 class="font-bold">与你的匹配度</h3>
                                    <p class="text-xs text-gray-600">根据你的兴趣测评结果，该专业是最适合你的选择之一</p>
                                </div>
                                <div class="ml-auto">
                                    <span class="text-xl font-bold text-green-600">95%</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <h2 class="text-lg font-bold mb-3">专业介绍</h2>
                            <p class="text-gray-600 text-sm mb-3">
                                计算机科学与技术是研究计算机及其应用的一门学科，它主要研究计算机系统结构、程序设计、人工智能、网络通信等领域。该专业培养具备计算机系统的设计、开发与应用能力的高级专门人才。
                            </p>
                            <p class="text-gray-600 text-sm">
                                随着人工智能、大数据、云计算、物联网等技术的发展，该专业正迎来前所未有的发展机遇，就业前景广阔，是当前最热门的专业之一。
                            </p>
                        </div>
                        
                        <div class="mb-6">
                            <h2 class="text-lg font-bold mb-3">主要课程</h2>
                            <div class="grid grid-cols-2 gap-3">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                                        <i class="fas fa-code text-blue-600 text-sm"></i>
                                    </div>
                                    <span class="text-sm">程序设计基础</span>
                                </div>
                                
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2">
                                        <i class="fas fa-project-diagram text-purple-600 text-sm"></i>
                                    </div>
                                    <span class="text-sm">数据结构</span>
                                </div>
                                
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
                                        <i class="fas fa-microchip text-green-600 text-sm"></i>
                                    </div>
                                    <span class="text-sm">计算机组成原理</span>
                                </div>
                                
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-2">
                                        <i class="fas fa-server text-red-600 text-sm"></i>
                                    </div>
                                    <span class="text-sm">操作系统</span>
                                </div>
                                
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-2">
                                        <i class="fas fa-network-wired text-yellow-600 text-sm"></i>
                                    </div>
                                    <span class="text-sm">计算机网络</span>
                                </div>
                                
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
                                        <i class="fas fa-database text-indigo-600 text-sm"></i>
                                    </div>
                                    <span class="text-sm">数据库系统</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <h2 class="text-lg font-bold mb-3">就业前景</h2>
                            <div class="bg-white rounded-xl p-4 shadow-sm">
                                <div class="flex justify-between mb-4">
                                    <div class="text-center">
                                        <p class="text-sm text-gray-500">平均薪资</p>
                                        <p class="font-bold text-xl text-purple-600">12K+</p>
                                    </div>
                                    <div class="text-center">
                                        <p class="text-sm text-gray-500">就业率</p>
                                        <p class="font-bold text-xl text-green-600">98.2%</p>
                                    </div>
                                    <div class="text-center">
                                        <p class="text-sm text-gray-500">就业满意度</p>
                                        <p class="font-bold text-xl text-blue-600">4.5/5</p>
                                    </div>
                                </div>
                                
                                <h3 class="font-bold mb-2">主要就业方向</h3>
                                <div class="flex flex-wrap">
                                    <span class="tag">软件工程师</span>
                                    <span class="tag">Web开发工程师</span>
                                    <span class="tag">算法工程师</span>
                                    <span class="tag">数据分析师</span>
                                    <span class="tag">产品经理</span>
                                    <span class="tag">技术主管</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <h2 class="text-lg font-bold mb-3">热门院校</h2>
                            <div class="space-y-3">
                                <div class="flex items-center bg-white rounded-xl p-3 shadow-sm">
                                    <img src="https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=60&q=80" class="w-10 h-10 rounded-md mr-3">
                                    <div class="flex-grow">
                                        <h3 class="font-bold">北京大学</h3>
                                        <p class="text-xs text-gray-500">全国排名：1</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-xs text-gray-500">往年分数线</p>
                                        <p class="font-medium">639</p>
                                    </div>
                                </div>
                                
                                <div class="flex items-center bg-white rounded-xl p-3 shadow-sm">
                                    <img src="https://images.unsplash.com/photo-1592494804071-1404ae3abb17?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=60&q=80" class="w-10 h-10 rounded-md mr-3">
                                    <div class="flex-grow">
                                        <h3 class="font-bold">浙江大学</h3>
                                        <p class="text-xs text-gray-500">全国排名：3</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-xs text-gray-500">往年分数线</p>
                                        <p class="font-medium">625</p>
                                    </div>
                                </div>
                                
                                <div class="flex items-center bg-white rounded-xl p-3 shadow-sm">
                                    <img src="https://images.unsplash.com/photo-1627556592933-ffe99c1cd9eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=60&q=80" class="w-10 h-10 rounded-md mr-3">
                                    <div class="flex-grow">
                                        <h3 class="font-bold">上海交通大学</h3>
                                        <p class="text-xs text-gray-500">全国排名：4</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-xs text-gray-500">往年分数线</p>
                                        <p class="font-medium">628</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <h2 class="text-lg font-bold mb-3">AI分析与建议</h2>
                            <div class="bg-white rounded-xl p-4 shadow-sm">
                                <div class="flex items-start mb-4">
                                    <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3 mt-1">
                                        <i class="fas fa-robot text-purple-600"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">
                                            根据你的兴趣测评结果，你在调查型(I)和艺术型(A)方面的得分较高，这与计算机科学与技术专业的特性高度匹配。你喜欢分析问题并寻找创新解决方案，这正是该专业所需的核心能力。
                                        </p>
                                    </div>
                                </div>
                                
                                <div class="flex items-start">
                                    <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3 mt-1">
                                        <i class="fas fa-lightbulb text-purple-600"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">
                                            建议：选择该专业时，可以关注具有强大实验室和产学研合作的院校，这将有助于你获得更多实践机会。同时，该专业对数学基础要求较高，建议在入学前加强数学和逻辑思维能力的训练。
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="flex space-x-4 mb-6">
                            <button class="flex-1 py-3 bg-purple-600 text-white rounded-xl font-medium" onclick="showScreen('aiRecommendation')">查看推荐院校</button>
                            <button class="flex-1 py-3 bg-gray-100 text-gray-700 rounded-xl font-medium" onclick="showScreen('aiAdvisor')">咨询AI顾问</button>
                        </div>
                    </div>
                </div>
            </div>
        `
    },
    {
        id: "profile",
        title: "个人中心",
        content: `
            <div class="h-full flex flex-col">
                <div class="status-bar">
                    <div>9:41</div>
                    <div>
                        <i class="fas fa-signal"></i>
                        <i class="fas fa-wifi ml-2"></i>
                        <i class="fas fa-battery-full ml-2"></i>
                    </div>
                </div>
                
                <div class="bg-gradient-to-r from-purple-600 to-indigo-700 p-6">
                    <div class="flex items-center mb-4">
                        <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" class="w-16 h-16 rounded-full border-2 border-white mr-4">
                        <div class="text-white">
                            <h1 class="text-xl font-bold">小明</h1>
                            <p class="text-sm opacity-80">高三 · 理科</p>
                        </div>
                        <button class="ml-auto bg-white/20 text-white px-3 py-1 rounded-full text-sm">
                            编辑资料
                        </button>
                    </div>
                    
                    <div class="flex justify-between text-white">
                        <div class="text-center">
                            <p class="text-2xl font-bold">635</p>
                            <p class="text-xs opacity-80">预估分数</p>
                        </div>
                        <div class="text-center">
                            <p class="text-2xl font-bold">1/4</p>
                            <p class="text-xs opacity-80">测评完成</p>
                        </div>
                        <div class="text-center">
                            <p class="text-2xl font-bold">5</p>
                            <p class="text-xs opacity-80">志愿方案</p>
                        </div>
                    </div>
                </div>
                
                <div class="flex-grow overflow-y-auto p-4 pb-20">
                    <div class="section-card mb-6">
                        <h2 class="font-bold mb-4">我的测评</h2>
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                    <i class="fas fa-check text-green-600"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium">兴趣倾向测评</h3>
                                    <p class="text-xs text-gray-500">调查型-艺术型-社会型</p>
                                </div>
                            </div>
                            <button class="text-sm text-purple-600" onclick="showScreen('interestResult')">查看结果</button>
                        </div>
                        
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                                    <i class="fas fa-hourglass-half text-gray-500"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium">性格特质测评</h3>
                                    <p class="text-xs text-gray-500">了解适合你的学习与工作环境</p>
                                </div>
                            </div>
                            <button class="text-sm text-purple-600" onclick="showScreen('personalityAssessment')">去测评</button>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                                    <i class="fas fa-hourglass-half text-gray-500"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium">能力潜质测评</h3>
                                    <p class="text-xs text-gray-500">探索你的能力优势</p>
                                </div>
                            </div>
                            <button class="text-sm text-purple-600" onclick="showScreen('abilityAssessment')">去测评</button>
                        </div>
                    </div>
                    
                    <div class="section-card mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="font-bold">我的志愿方案</h2>
                            <button class="text-sm text-purple-600" onclick="showScreen('applicationPlan')">查看全部</button>
                        </div>
                        
                        <div class="space-y-3">
                            <div class="bg-white rounded-xl p-3 shadow-sm border border-gray-100">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="font-medium">方案一：计算机与数据科学</h3>
                                    <div class="bg-green-100 text-green-600 px-2 py-1 rounded text-xs">
                                        匹配度 92%
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mb-2">北京大学、上海交通大学、浙江大学、复旦大学、同济大学</p>
                                <div class="flex justify-between text-xs">
                                    <span class="text-gray-500">创建时间：2023-06-15</span>
                                    <span class="text-purple-600">查看详情</span>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl p-3 shadow-sm border border-gray-100">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="font-medium">方案二：人工智能与软件工程</h3>
                                    <div class="bg-green-100 text-green-600 px-2 py-1 rounded text-xs">
                                        匹配度 88%
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mb-2">清华大学、浙江大学、上海交通大学、南京大学、华东师范大学</p>
                                <div class="flex justify-between text-xs">
                                    <span class="text-gray-500">创建时间：2023-06-10</span>
                                    <span class="text-purple-600">查看详情</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="section-card mb-6">
                        <h2 class="font-bold mb-4">辅助功能</h2>
                        <div class="grid grid-cols-4 gap-4">
                            <div class="flex flex-col items-center" onclick="showScreen('collegeFinder')">
                                <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-2">
                                    <i class="fas fa-university text-blue-600"></i>
                                </div>
                                <span class="text-xs text-center">院校查询</span>
                            </div>
                            
                            <div class="flex flex-col items-center" onclick="showScreen('majorExplorer')">
                                <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-2">
                                    <i class="fas fa-book text-green-600"></i>
                                </div>
                                <span class="text-xs text-center">专业探索</span>
                            </div>
                            
                            <div class="flex flex-col items-center" onclick="showScreen('scorePrediction')">
                                <div class="w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center mb-2">
                                    <i class="fas fa-calculator text-yellow-600"></i>
                                </div>
                                <span class="text-xs text-center">分数预测</span>
                            </div>
                            
                            <div class="flex flex-col items-center" onclick="showScreen('policyInfo')">
                                <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center mb-2">
                                    <i class="fas fa-info-circle text-red-600"></i>
                                </div>
                                <span class="text-xs text-center">政策解读</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="section-card mb-6">
                        <h2 class="font-bold mb-4">设置</h2>
                        <div class="space-y-4">
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                                        <i class="fas fa-bell text-gray-500"></i>
                                    </div>
                                    <span>消息通知</span>
                                </div>
                                <div class="w-12 h-6 bg-purple-600 rounded-full relative">
                                    <div class="w-5 h-5 bg-white rounded-full absolute right-0.5 top-0.5"></div>
                                </div>
                            </div>
                            
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                                        <i class="fas fa-shield-alt text-gray-500"></i>
                                    </div>
                                    <span>隐私设置</span>
                                </div>
                                <i class="fas fa-chevron-right text-gray-400"></i>
                            </div>
                            
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                                        <i class="fas fa-question-circle text-gray-500"></i>
                                    </div>
                                    <span>帮助与反馈</span>
                                </div>
                                <i class="fas fa-chevron-right text-gray-400"></i>
                            </div>
                            
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                                        <i class="fas fa-info-circle text-gray-500"></i>
                                    </div>
                                    <span>关于我们</span>
                                </div>
                                <i class="fas fa-chevron-right text-gray-400"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="tab-bar">
                    <div class="tab-item" onclick="showScreen('home')">
                        <i class="fas fa-home"></i>
                        <span>首页</span>
                    </div>
                    <div class="tab-item" onclick="showScreen('explore')">
                        <i class="fas fa-compass"></i>
                        <span>发现</span>
                    </div>
                    <div class="tab-item" onclick="showScreen('aiAdvisor')">
                        <i class="fas fa-robot"></i>
                        <span>AI顾问</span>
                    </div>
                    <div class="tab-item" onclick="showScreen('applicationPlan')">
                        <i class="fas fa-clipboard-list"></i>
                        <span>志愿</span>
                    </div>
                    <div class="tab-item active">
                        <i class="fas fa-user"></i>
                        <span>我的</span>
                    </div>
                </div>
            </div>
        `
    }
];

// 初始化
document.addEventListener('DOMContentLoaded', function() {
    // 生成导航按钮
    const navContainer = document.getElementById('prototype-nav');
    prototypeScreens.forEach(screen => {
        const button = document.createElement('button');
        button.className = 'nav-button';
        button.textContent = screen.title;
        button.setAttribute('data-screen', screen.id);
        button.onclick = function() {
            showScreen(screen.id);
        };
        navContainer.appendChild(button);
    });
    
    // 显示第一个屏幕
    showScreen('welcome');
    
    // 设置上一个/下一个按钮事件
    document.getElementById('prev-screen').addEventListener('click', showPrevScreen);
    document.getElementById('next-screen').addEventListener('click', showNextScreen);
});

// 当前显示的屏幕索引
let currentScreenIndex = 0;

// 显示特定屏幕
function showScreen(screenId) {
    const screenIndex = prototypeScreens.findIndex(screen => screen.id === screenId);
    if (screenIndex !== -1) {
        currentScreenIndex = screenIndex;
        updateScreen();
    }
}

// 显示上一个屏幕
function showPrevScreen() {
    if (currentScreenIndex > 0) {
        currentScreenIndex--;
        updateScreen();
    }
}

// 显示下一个屏幕
function showNextScreen() {
    if (currentScreenIndex < prototypeScreens.length - 1) {
        currentScreenIndex++;
        updateScreen();
    }
}

// 更新屏幕内容
function updateScreen() {
    const screen = prototypeScreens[currentScreenIndex];
    
    // 更新屏幕内容
    document.getElementById('screen').innerHTML = screen.content;
    
    // 更新导航按钮状态
    document.querySelectorAll('.nav-button').forEach(button => {
        if (button.getAttribute('data-screen') === screen.id) {
            button.classList.add('active');
        } else {
            button.classList.remove('active');
        }
    });
    
    // 更新上一个/下一个按钮状态
    document.getElementById('prev-screen').style.opacity = currentScreenIndex > 0 ? '1' : '0.3';
    document.getElementById('next-screen').style.opacity = currentScreenIndex < prototypeScreens.length - 1 ? '1' : '0.3';
}