51 lines
4.3 KiB
HTML
51 lines
4.3 KiB
HTML
<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> |