CodeLikeDemo/views/screen-start.html

<div id="screen-start" class="screen active absolute inset-0 bg-[#0f172a] flex flex-col items-center justify-center z-50 overflow-auto">
        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjEiIGZpbGw9IiMzMzQxNTUiLz48L3N2Zz4=')] opacity-20 pointer-events-none"></div>
        
        <div class="text-center mb-12 relative z-10">
            <h1 class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400 tracking-tighter drop-shadow-2xl mb-4">
                Project Vibe: <span class="text-white">Ship It!</span>
            </h1>
            <p class="text-xl text-slate-400 font-mono tracking-widest">>> 员工入职登记系统_ v1.0.4</p>
        </div>

        <div class="flex flex-wrap gap-6 relative z-10 w-full max-w-7xl px-4 lg:px-8 justify-center items-stretch min-h-[400px]">
            <!-- 职业 1: 开发 -->
            <div class="class-card group w-full md:w-[30%] lg:w-[30%] bg-slate-800/80 border border-slate-600 rounded-2xl p-5 cursor-pointer hover:bg-blue-900/40 hover:border-blue-500 transition-all flex flex-col relative overflow-hidden" onclick="selectClass('developer')">
                <div class="absolute -right-10 -top-10 text-9xl opacity-10 group-hover:text-blue-500 group-hover:scale-110 transition-all">👨‍💻</div>
                <h2 class="text-2xl font-bold text-white mb-1 flex items-center gap-2">👨‍💻 开发人员</h2>
                <p class="text-xs text-slate-400 mb-4 italic">"一行代码，十个 Bug"</p>
                <div class="space-y-3 flex-1">
                    <div class="bg-slate-950/50 p-2 rounded-lg border border-slate-700/50">
                        <span class="text-[10px] text-slate-500 uppercase tracking-wider block">资金</span>
                        <span class="text-emerald-400 font-mono font-bold text-base">$ 10,000</span>
                    </div>
                    <div class="bg-slate-950/50 p-2 rounded-lg border border-slate-700/50 flex-1">
                        <span class="text-[10px] text-slate-500 uppercase tracking-wider block mb-1">初始牌组</span>
                        <div class="flex gap-1 flex-wrap mt-1">
                            <span class="text-[10px] bg-blue-900/50 text-blue-200 px-1.5 py-0.5 rounded border border-blue-800">开发人员</span>
                            <span class="text-[10px] bg-emerald-900/50 text-emerald-200 px-1.5 py-0.5 rounded border border-emerald-800">专注力 x2</span>
                            <span class="text-[10px] bg-amber-900/50 text-amber-200 px-1.5 py-0.5 rounded border border-amber-800">冰美式</span>
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex justify-center"><button class="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-1.5 px-4 rounded-full text-sm shadow-[0_0_15px_rgba(37,99,235,0.5)]">接受 Offer</button></div>
            </div>

            <!-- 职业 2: 产品 -->
            <div class="class-card group w-full md:w-[30%] lg:w-[30%] bg-slate-800/80 border border-slate-600 rounded-2xl p-5 cursor-pointer hover:bg-amber-900/40 hover:border-amber-500 transition-all flex flex-col relative overflow-hidden" onclick="selectClass('pm')">
                <div class="absolute -right-10 -top-10 text-9xl opacity-10 group-hover:text-amber-500 group-hover:scale-110 transition-all">📊</div>
                <h2 class="text-2xl font-bold text-white mb-1 flex items-center gap-2">📊 产品经理</h2>
                <p class="text-xs text-slate-400 mb-4 italic">"这个需求很简单，怎么实现我不管"</p>
                <div class="space-y-3 flex-1">
                    <div class="bg-slate-950/50 p-2 rounded-lg border border-slate-700/50">
                        <span class="text-[10px] text-slate-500 uppercase tracking-wider block">资金</span>
                        <span class="text-emerald-400 font-mono font-bold text-base">$ 25,000</span>
                    </div>
                    <div class="bg-slate-950/50 p-2 rounded-lg border border-slate-700/50 flex-1">
                        <span class="text-[10px] text-slate-500 uppercase tracking-wider block mb-1">初始牌组</span>
                        <div class="flex gap-1 flex-wrap mt-1">
                            <span class="text-[10px] bg-amber-900/50 text-amber-200 px-1.5 py-0.5 rounded border border-amber-800">产品经理</span>
                            <span class="text-[10px] bg-slate-700/50 text-slate-300 px-1.5 py-0.5 rounded border border-slate-600">白板</span>
                            <span class="text-[10px] bg-rose-900/50 text-rose-200 px-1.5 py-0.5 rounded border border-rose-800">无意义会议</span>
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex justify-center"><button class="w-full bg-amber-600 hover:bg-amber-500 text-white font-bold py-1.5 px-4 rounded-full text-sm shadow-[0_0_15px_rgba(217,119,6,0.5)]">拉个群聊</button></div>
            </div>

            <!-- 职业 3: 测试 -->
            <div class="class-card group w-full md:w-[30%] lg:w-[30%] bg-slate-800/80 border border-slate-600 rounded-2xl p-5 cursor-pointer hover:bg-emerald-900/40 hover:border-emerald-500 transition-all flex flex-col relative overflow-hidden" onclick="selectClass('qa')">
                <div class="absolute -right-10 -top-10 text-9xl opacity-10 group-hover:text-emerald-500 group-hover:scale-110 transition-all">🕵️</div>
                <h2 class="text-2xl font-bold text-white mb-1 flex items-center gap-2">🕵️ 测试(QA)</h2>
                <p class="text-xs text-slate-400 mb-4 italic">"又重现不了了？这绝不是我的问题"</p>
                <div class="space-y-3 flex-1">
                    <div class="bg-slate-950/50 p-2 rounded-lg border border-slate-700/50">
                        <span class="text-[10px] text-slate-500 uppercase tracking-wider block">资金</span>
                        <span class="text-emerald-400 font-mono font-bold text-base">$ 12,000</span>
                    </div>
                    <div class="bg-slate-950/50 p-2 rounded-lg border border-slate-700/50 flex-1">
                        <span class="text-[10px] text-slate-500 uppercase tracking-wider block mb-1">初始牌组</span>
                        <div class="flex gap-1 flex-wrap mt-1">
                            <span class="text-[10px] bg-emerald-900/50 text-emerald-200 px-1.5 py-0.5 rounded border border-emerald-800">测试工程师</span>
                            <span class="text-[10px] bg-emerald-900/50 text-emerald-200 px-1.5 py-0.5 rounded border border-emerald-800">单元测试</span>
                            <span class="text-[10px] bg-rose-900/50 text-rose-200 px-1.5 py-0.5 rounded border border-rose-800">系统 Bug</span>
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex justify-center"><button class="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold py-1.5 px-4 rounded-full text-sm shadow-[0_0_15px_rgba(16,185,129,0.5)]">提 Bug 单</button></div>
            </div>

            <!-- 职业 4: 运维 -->
            <div class="class-card group w-full md:w-[30%] lg:w-[30%] bg-slate-800/80 border border-slate-600 rounded-2xl p-5 cursor-pointer hover:bg-purple-900/40 hover:border-purple-500 transition-all flex flex-col relative overflow-hidden" onclick="selectClass('ops')">
                <div class="absolute -right-10 -top-10 text-9xl opacity-10 group-hover:text-purple-500 group-hover:scale-110 transition-all">🛠️</div>
                <h2 class="text-2xl font-bold text-white mb-1 flex items-center gap-2">🛠️ 运维(Ops)</h2>
                <p class="text-xs text-slate-400 mb-4 italic">"删库跑路？拔网线最快"</p>
                <div class="space-y-3 flex-1">
                    <div class="bg-slate-950/50 p-2 rounded-lg border border-slate-700/50">
                        <span class="text-[10px] text-slate-500 uppercase tracking-wider block">资金</span>
                        <span class="text-emerald-400 font-mono font-bold text-base">$ 20,000</span>
                    </div>
                    <div class="bg-slate-950/50 p-2 rounded-lg border border-slate-700/50 flex-1">
                        <span class="text-[10px] text-slate-500 uppercase tracking-wider block mb-1">初始牌组</span>
                        <div class="flex gap-1 flex-wrap mt-1">
                            <span class="text-[10px] bg-purple-900/50 text-purple-200 px-1.5 py-0.5 rounded border border-purple-800">运维工程师</span>
                            <span class="text-[10px] bg-purple-900/50 text-purple-200 px-1.5 py-0.5 rounded border border-purple-800">云服务器</span>
                            <span class="text-[10px] bg-purple-900/50 text-purple-200 px-1.5 py-0.5 rounded border border-purple-800">安全补丁</span>
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex justify-center"><button class="w-full bg-purple-600 hover:bg-purple-500 text-white font-bold py-1.5 px-4 rounded-full text-sm shadow-[0_0_15px_rgba(168,85,247,0.5)]">获取 root</button></div>
            </div>

            <!-- 职业 5: 路人 -->
            <div class="class-card group w-full md:w-[30%] lg:w-[30%] bg-slate-800/80 border border-slate-600 rounded-2xl p-5 cursor-pointer hover:bg-slate-700/40 hover:border-slate-400 transition-all flex flex-col relative overflow-hidden" onclick="selectClass('bystander')">
                <div class="absolute -right-10 -top-10 text-9xl opacity-10 group-hover:text-slate-400 group-hover:scale-110 transition-all">👶</div>
                <h2 class="text-2xl font-bold text-white mb-1 flex items-center gap-2">👶 实习生(路人)</h2>
                <p class="text-xs text-slate-400 mb-4 italic">"大佬，我电脑蓝屏了..."</p>
                <div class="space-y-3 flex-1">
                    <div class="bg-slate-950/50 p-2 rounded-lg border border-slate-700/50">
                        <span class="text-[10px] text-slate-500 uppercase tracking-wider block">资金</span>
                        <span class="text-emerald-400 font-mono font-bold text-base">$ 2,000 (真穷)</span>
                    </div>
                    <div class="bg-slate-950/50 p-2 rounded-lg border border-slate-700/50 flex-1">
                        <span class="text-[10px] text-slate-500 uppercase tracking-wider block mb-1">初始牌组</span>
                        <div class="flex gap-1 flex-wrap mt-1">
                            <span class="text-[10px] bg-slate-700 text-slate-300 px-1.5 py-0.5 rounded border border-slate-600">实习生</span>
                            <span class="text-[10px] bg-rose-900/50 text-rose-200 px-1.5 py-0.5 rounded border border-rose-800">技术债</span>
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex justify-center"><button class="w-full bg-slate-600 hover:bg-slate-500 text-white font-bold py-1.5 px-4 rounded-full text-sm shadow-[0_0_15px_rgba(71,85,105,0.5)]">找坑位</button></div>
            </div>
        </div>
    </div>