shiyue/CodeLikeDemo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
shiyue
2026-03-27 18:21:29 +08:00
commit 27fd364976
12 changed files with 2619 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
views/screen-game.html Normal file
View File

@@ -0,0 +1,136 @@
<div id="screen-game" class="screen absolute inset-0 hidden z-10">
<!-- 桌面背景网格 -->
<div class="absolute inset-0 bg-desktop-pattern pointer-events-none opacity-50"></div>
<svg id="svg-connections" class="absolute inset-0 w-full h-full pointer-events-none z-[15]"></svg>
<!-- 顶部 HUD (状态栏) -->
<header class="absolute top-0 left-0 w-full h-16 bg-slate-900/80 backdrop-blur-md border-b border-slate-700 flex items-center justify-between px-6 z-50 shadow-lg">
<!-- 左侧：项目信息 -->
<div class="flex items-center gap-4 w-1/3">
<div class="flex items-center gap-2 bg-slate-800/80 px-3 py-1.5 rounded-md border border-slate-600/50">
<span class="text-xs text-slate-400 uppercase font-bold tracking-wider">Sprint</span>
<span id="hud-sprint" class="text-lg font-bold text-white">1</span>
</div>
<div class="hidden xl:flex items-center gap-2 bg-slate-800/80 px-3 py-1.5 rounded-md border border-slate-600/50">
<span class="text-xs text-slate-400 uppercase font-bold tracking-wider">复杂度额度</span>
<span id="hud-capacity" class="text-sm font-mono font-bold text-cyan-300">20 / 20</span>
</div>
<div class="hidden xl:flex items-center gap-2 bg-slate-800/80 px-3 py-1.5 rounded-md border border-slate-600/50">
<span class="text-xs text-slate-400 uppercase font-bold tracking-wider">延期阶段</span>
<span id="hud-overdue-stage" class="text-sm font-bold text-emerald-300">正常</span>
</div>
</div>
<!-- 中侧：挣值管理 (EVM) -->
<div class="flex-1 flex justify-center gap-4">
<div class="bg-slate-950/80 px-6 py-2 rounded-full border border-amber-900/50 shadow-inner flex items-center gap-3">
<span class="text-amber-500">📈</span>
<span class="text-sm text-slate-300 font-bold tracking-wide">挣值(EV):</span>
<span class="text-sm font-mono text-amber-400 font-bold bg-amber-900/30 px-2 py-0.5 rounded" id="hud-ev">$0 / $5000</span>
</div>
<div class="bg-slate-950/80 px-6 py-2 rounded-full border border-blue-900/50 shadow-inner flex items-center gap-3">
<span class="text-blue-500">🛡️</span>
<span class="text-sm text-slate-300 font-bold tracking-wide">应急储备:</span>
<span class="text-sm font-mono text-blue-400 font-bold bg-blue-900/30 px-2 py-0.5 rounded" id="hud-reserve">$10000</span>
</div>
</div>
<!-- 右侧：核心资源与控制 (只留按钮，条移到右侧边栏) -->
<div class="flex items-center gap-6 w-1/3 justify-end">
<div id="hud-negative" class="hidden xl:block text-xs text-rose-200 bg-rose-950/40 px-3 py-1.5 rounded border border-rose-700/40">红卡压力：无</div>
<div id="hud-status" class="hidden lg:block text-xs text-slate-300 bg-slate-800/80 px-3 py-1.5 rounded border border-slate-600/50">动作完成后才扣项目天数</div>
<div class="flex gap-2 border-slate-700">
<button onclick="toggleRecipeModal()" class="w-8 h-8 flex items-center justify-center bg-slate-800 hover:bg-slate-700 rounded text-slate-300 border border-slate-600 transition-colors" title="图鉴/配方手册">📖</button>
<button class="w-8 h-8 flex items-center justify-center bg-slate-800 hover:bg-slate-700 rounded text-slate-300 border border-slate-600 transition-colors" title="暂停/继续" id="btn-pause">⏸</button>
<button class="w-8 h-8 flex items-center justify-center bg-slate-800 hover:bg-slate-700 rounded text-slate-300 border border-slate-600 transition-colors" title="加速 (未启用)" id="btn-fast">▶▶</button>
</div>
</div>
</header>
<!-- 右侧边栏 (竖向进度条区) -->
<div class="absolute right-6 top-24 bottom-10 z-30 flex gap-6 pointer-events-none">
<!-- 资金竖条 -->
<div class="flex flex-col items-center justify-end h-full">
<div class="text-[10px] text-slate-400 font-bold uppercase tracking-wider mb-2 bg-slate-900/80 px-2 py-1 rounded">项目资金</div>
<div class="relative flex-1 w-6 bg-slate-800/80 border border-slate-600 rounded-full overflow-hidden shadow-inner flex flex-col justify-end">
<div id="hud-funds-bar" class="w-full bg-gradient-to-t from-emerald-600 to-emerald-400 transition-all duration-500 ease-out" style="height: 100%;"></div>
</div>
<div class="mt-2 text-center pointer-events-auto bg-slate-900/80 px-3 py-1.5 rounded-lg border border-emerald-900/50 relative">
<span id="hud-funds-delta" class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm font-mono font-bold text-emerald-400 opacity-0 transition-all duration-500"></span>
<span id="hud-funds" class="text-xl font-mono font-bold text-emerald-400 drop-shadow-[0_0_8px_rgba(52,211,153,0.4)] transition-colors duration-300">$15,000</span>
</div>
</div>
<!-- 周期竖条 -->
<div class="flex flex-col items-center justify-end h-full">
<div class="text-[10px] text-slate-400 font-bold uppercase tracking-wider mb-2 bg-slate-900/80 px-2 py-1 rounded">迭代周期(天)</div>
<div class="relative flex-1 w-6 bg-slate-800/80 border border-slate-600 rounded-full overflow-hidden shadow-inner flex flex-col justify-end">
<div id="hud-time-bar" class="w-full bg-gradient-to-t from-rose-600 to-rose-400 transition-all duration-1000 ease-linear" style="height: 100%;"></div>
</div>
<div class="mt-2 text-center pointer-events-auto bg-slate-900/80 px-3 py-1.5 rounded-lg border border-rose-900/50 relative">
<div class="text-xl font-mono font-bold text-rose-400 drop-shadow-[0_0_8px_rgba(244,63,94,0.4)]" id="hud-time">30天</div>
</div>
</div>
</div>
<!-- 桌面固定图标 (Shop & Zones) -->
<div class="absolute inset-0 pt-20 px-6 pointer-events-none z-30 flex flex-col flex-wrap gap-6">
<!-- 基础资源包 -->
<button class="w-24 flex flex-col items-center pointer-events-auto group hover:-translate-y-2 transition-transform" onclick="addFunds(-100); addCard('focus', 150, 100); addCard('focus', 200, 100); renderBoard(); updateHUD();">
<div class="w-16 h-16 bg-slate-800/80 border border-slate-600 rounded-2xl flex items-center justify-center text-4xl shadow-lg group-hover:border-blue-400 group-hover:shadow-blue-500/50">📦</div>
<span class="text-xs font-bold mt-2 text-white drop-shadow-md text-center leading-tight">基础资源包<br><span class="text-emerald-400">$100</span></span>
</button>
<!-- 社招简历包 -->
<button class="w-24 flex flex-col items-center pointer-events-auto group hover:-translate-y-2 transition-transform" onclick="addFunds(-1000); addCard('developer', 150, 220); renderBoard(); updateHUD();">
<div class="w-16 h-16 bg-blue-900/80 border border-blue-700 rounded-2xl flex items-center justify-center text-4xl shadow-lg group-hover:border-blue-400 group-hover:shadow-blue-500/50">💼</div>
<span class="text-xs font-bold mt-2 text-white drop-shadow-md text-center leading-tight">社招简历包<br><span class="text-emerald-400">$1000</span></span>
</button>
<!-- 云服务包 -->
<button class="w-24 flex flex-col items-center pointer-events-auto group hover:-translate-y-2 transition-transform" onclick="addFunds(-500); addCard('qa', 150, 340); renderBoard(); updateHUD();">
<div class="w-16 h-16 bg-purple-900/80 border border-purple-700 rounded-2xl flex items-center justify-center text-4xl shadow-lg group-hover:border-purple-400 group-hover:shadow-purple-500/50">☁️</div>
<span class="text-xs font-bold mt-2 text-white drop-shadow-md text-center leading-tight">云服务包<br><span class="text-emerald-400">$500</span></span>
</button>
<!-- 交付打包区 -->
<div id="delivery-zone" class="w-24 mt-auto flex flex-col items-center pointer-events-auto group">
<div class="w-20 h-20 bg-emerald-900/40 border-2 border-dashed border-emerald-500/50 rounded-2xl flex items-center justify-center text-5xl shadow-lg group-hover:bg-emerald-800/60 group-hover:border-emerald-400 transition-colors">🚀</div>
<span class="text-xs font-bold mt-2 text-emerald-200 drop-shadow-md text-center leading-tight bg-slate-900/80 px-2 py-1 rounded">交付模块</span>
</div>
<!-- 垃圾回收站 -->
<div id="trash-zone" class="w-24 flex flex-col items-center pointer-events-auto group mb-4">
<div class="w-20 h-20 bg-rose-950/40 border-2 border-dashed border-rose-600/50 rounded-2xl flex items-center justify-center text-5xl shadow-lg group-hover:bg-rose-900/60 group-hover:border-rose-400 transition-colors">🗑️</div>
<span class="text-xs font-bold mt-2 text-rose-200 drop-shadow-md text-center leading-tight bg-slate-900/80 px-2 py-1 rounded">回收出售</span>
</div>
</div>
<!-- 桌面交互区 (放置卡牌) -->
<main id="desktop-board" class="w-full h-full pt-16 relative z-20">
<svg id="svg-connections" class="absolute inset-0 w-full h-full pointer-events-none z-[15]"></svg>
<!-- 卡牌将由 JS 动态渲染 -->
</main>
<!-- 卡池图鉴与配方手册 (Recipe Book Modal) -->
<div id="recipe-modal" class="absolute inset-0 z-[100] bg-slate-900/90 backdrop-blur-md hidden flex items-center justify-center">
<div class="bg-slate-800 border border-slate-600 rounded-2xl w-full max-w-4xl h-[600px] flex flex-col shadow-2xl overflow-hidden relative">
<div class="p-4 border-b border-slate-700 flex justify-between items-center bg-slate-900/50">
<h2 class="text-xl font-bold text-white flex items-center gap-2">📖 卡池图鉴与合成说明</h2>
<button onclick="document.getElementById('recipe-modal').classList.add('hidden')" class="w-8 h-8 flex items-center justify-center bg-slate-700 hover:bg-rose-600 rounded text-white transition-colors">✕</button>
</div>
<div class="flex-1 flex overflow-hidden">
<!-- 左侧边栏 -->
<div class="w-48 border-r border-slate-700 bg-slate-900/30 p-4 flex flex-col gap-2">
<button class="text-left px-4 py-2 bg-blue-900/50 text-blue-200 rounded font-bold border border-blue-700">基础合成</button>
<button class="text-left px-4 py-2 bg-slate-800 text-slate-400 hover:text-slate-200 hover:bg-slate-700 rounded font-bold transition-colors">职场摸鱼 (未解锁)</button>
<button class="text-left px-4 py-2 bg-slate-800 text-slate-400 hover:text-slate-200 hover:bg-slate-700 rounded font-bold transition-colors">系统危机 (查看)</button>
</div>
<!-- 右侧内容区 -->
<div class="flex-1 p-6 overflow-y-auto bg-[#1e293b] flex flex-col gap-4" id="recipe-list-container">
<!-- JS 动态渲染配方 -->
</div>
</div>
</div>
</div>
</div>

28
views/screen-gameover.html Normal file
View File

@@ -0,0 +1,28 @@
<div id="screen-gameover" class="screen absolute inset-0 hidden z-[100] bg-blue-900 flex flex-col items-start justify-center p-20 font-mono text-blue-100">
<!-- 模仿 BSOD 蓝屏风格 -->
<h1 class="text-8xl font-black bg-blue-100 text-blue-900 px-4 py-2 inline-block mb-10">SYS_HALTED</h1>
<p class="text-2xl mb-8">项目资金链断裂 / 公司已启动紧急重组预案。</p>
<div class="mb-10 max-w-3xl">
<p class="mb-4">系统检测到一个不可恢复的商业错误：</p>
<p class="text-lg bg-blue-950 p-4 border border-blue-400/30 font-bold" id="gameover-reason">
*** 致命异常 0x0000DEAD: 因为你无视了“内存泄漏灾难”，导致服务器物理爆炸，公司面临巨额索赔，已申请破产清算。
</p>
</div>
<div class="space-y-2 mb-12 text-sm text-blue-300">
<p>项目遗产检查转储...</p>
<p>> 存活 Sprint 数量: <span class="text-white font-bold" id="gameover-sprints">1</span></p>
<p>> 历史最高资金: <span class="text-emerald-300 font-bold" id="gameover-maxfunds">$ 15,000</span></p>
<p>> 最常使用的实体: <span class="text-white font-bold">👨‍💻 开发人员</span></p>
</div>
<p class="text-sm mb-8 animate-pulse text-white">请按以下按钮重启你的职业生涯...</p>
<div class="flex gap-6">
<button class="border-2 border-white px-6 py-2 hover:bg-white hover:text-blue-900 font-bold uppercase transition-colors" onclick="location.reload()">重新开始项目 (F5)</button>
<button class="border-2 border-blue-400 text-blue-300 px-6 py-2 hover:bg-blue-400 hover:text-blue-900 font-bold uppercase transition-colors" onclick="location.reload()">返回桌面</button>
</div>
</div>
<!-- 引入数据和逻辑 -->

121
views/screen-start.html Normal file
View File

@@ -0,0 +1,121 @@
<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>

51
views/screen-win.html Normal file
View File

@@ -0,0 +1,51 @@
<div id="screen-win" class="screen absolute inset-0 hidden z-[100] bg-slate-900/90 backdrop-blur-xl flex flex-col items-center justify-center">
<div class="absolute inset-0 pointer-events-none overflow-hidden" id="confetti-container"></div>
<h1 class="text-5xl font-black text-white mb-2 drop-shadow-lg">Sprint 成功结算！🎉</h1>
<p class="text-slate-400 mb-8 text-lg">大家辛苦了，这个迭代我们没有挂掉服务器！</p>
<!-- 数据统计 -->
<div class="bg-slate-800/80 border border-slate-600 rounded-xl p-6 mb-8 w-full max-w-2xl flex justify-around shadow-2xl">
<div class="text-center">
<div class="text-xs text-slate-400 uppercase tracking-widest mb-1">剩余时间奖励</div>
<div class="text-2xl font-mono font-bold text-emerald-400">+$ 4,500</div>
</div>
<div class="w-px bg-slate-700"></div>
<div class="text-center">
<div class="text-xs text-slate-400 uppercase tracking-widest mb-1">解决 Bug</div>
<div class="text-2xl font-mono font-bold text-blue-400">12 个</div>
</div>
<div class="w-px bg-slate-700"></div>
<div class="text-center">
<div class="text-xs text-slate-400 uppercase tracking-widest mb-1">结余总资金</div>
<div class="text-2xl font-mono font-bold text-yellow-400" id="win-total-funds">$ 25,000</div>
</div>
</div>
<h2 class="text-xl font-bold text-white mb-6">Roguelike 奖励：请选择一项带入下个 Sprint</h2>
<!-- 3选1 -->
<div class="flex gap-6 w-full max-w-4xl px-4 justify-center">
<!-- 选项1：永久实体卡 -->
<div class="reward-card group flex-1 bg-gradient-to-br from-blue-900/50 to-slate-900 border-2 border-slate-600 rounded-xl p-6 cursor-pointer hover:border-blue-400 hover:-translate-y-2 transition-all text-center relative overflow-hidden" onclick="selectReward(1)">
<div class="text-6xl mb-4 drop-shadow-lg group-hover:scale-110 transition-transform">🤖</div>
<div class="text-xs font-bold bg-blue-900/80 text-blue-200 px-2 py-1 rounded inline-block mb-2 uppercase tracking-wide">永久建筑</div>
<h3 class="text-xl font-bold text-white mb-2">自动化测试脚本</h3>
<p class="text-xs text-slate-300 leading-relaxed">放入桌面上长期生效。当你把 Bug 拖给它时，可以瞬间将其秒杀，无需读条。</p>
</div>
<!-- 选项2：遗物 -->
<div class="reward-card group flex-1 bg-gradient-to-br from-purple-900/50 to-slate-900 border-2 border-slate-600 rounded-xl p-6 cursor-pointer hover:border-purple-400 hover:-translate-y-2 transition-all text-center relative overflow-hidden" onclick="selectReward(2)">
<div class="text-6xl mb-4 drop-shadow-lg group-hover:scale-110 transition-transform">🏆</div>
<div class="text-xs font-bold bg-purple-900/80 text-purple-200 px-2 py-1 rounded inline-block mb-2 uppercase tracking-wide">全局遗物 (Relic)</div>
<h3 class="text-xl font-bold text-white mb-2">敏捷教练的鞭策</h3>
<p class="text-xs text-slate-300 leading-relaxed">所有人合成速度加快 20%。但如果 Sprint 结束时没有产出目标，扣除 50% 奖金。</p>
</div>
<!-- 选项3：清理 -->
<div class="reward-card group flex-1 bg-gradient-to-br from-red-900/50 to-slate-900 border-2 border-slate-600 rounded-xl p-6 cursor-pointer hover:border-red-400 hover:-translate-y-2 transition-all text-center relative overflow-hidden" onclick="selectReward(3)">
<div class="text-6xl mb-4 drop-shadow-lg group-hover:scale-110 transition-transform">🧹</div>
<div class="text-xs font-bold bg-red-900/80 text-red-200 px-2 py-1 rounded inline-block mb-2 uppercase tracking-wide">一次性服务</div>
<h3 class="text-xl font-bold text-white mb-2">保洁阿姨的凝视</h3>
<p class="text-xs text-slate-300 leading-relaxed">立即销毁桌面上所有的“技术债”和“无意义的会议”卡牌。环境瞬间清爽！</p>
</div>
</div>
</div>