小草剧本杀_H5/index.html · 约 3955 字符
1<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>小草剧本杀</title><link rel="stylesheet" href="style.css"></head><body>
2<div class="banner">
3 <div>
4 <div class="bn-title">🃏 小草剧本杀</div>
5 <div class="bn-sub">今夜 · 谁是凶手？</div>
6 <span class="bn-badge">🎁 新客首本立减20元 · 拼车免费</span>
7 </div>
8 <div class="bn-emoji">🕵️</div>
9</div>
10<div class="quick-grid">
11 <a href="scripts.html"><span class="qicon">🃏</span>剧本库</a>
12 <a href="join.html"><span class="qicon">🚗</span>拼车大厅</a>
13 <a href="scripts.html"><span class="qicon">🎭</span>DM天团</a>
14 <a href="mine.html"><span class="qicon">🎫</span>我的场次</a>
15</div>
16<div class="section-title">热门剧本 <span>今日推荐</span></div>
17<div id="hot-scripts"></div>
18<div class="section-title">拼车大厅 <span>缺人上车</span></div>
19<div id="join-list"></div>
20<div class="section-title">金牌DM <span>开本稳定</span></div>
21<div class="card" id="dm-list"></div>
22<div class="section-title">玩家测评 <span>优质测评置顶</span></div>
23<div class="card" style="font-size:12px;color:#c9a6a0;line-height:2">
24 ⭐ "《雾都迷案》反转绝了！DM阿凯节奏太稳了"<br>💗 "《父亲的散文诗》玩到后半场全桌泪崩，必玩"<br>👻 "《瞳灵人》单线任务吓到腿软，胆小别来"
25</div>
26<div style="height:80px"></div>
27<div class="tabbar">
28 <a class="active" href="index.html"><span class="icon">🏠</span>首页</a>
29 <a href="scripts.html"><span class="icon">🃏</span>剧本</a>
30 <a href="join.html"><span class="icon">🚗</span>拼车</a>
31 <a href="orders.html"><span class="icon">📋</span>场次</a>
32 <a href="mine.html"><span class="icon">👤</span>我的</a>
33</div>
34<script src="data.js"></script><script src="app.js"></script>
35<script>
36$('#hot-scripts').innerHTML=SCRIPTS.slice(0,3).map(s=>`
37 <div class="script-card" onclick="location.href='detail.html?id=${s.id}'">
38 <div class="sc-img">${s.emoji}</div>
39 <div class="sc-body">
40 <div class="sc-name">${s.name} <span class="badge badge-hot">热卖</span></div>
41 <div class="sc-tags">${s.tags.map(t=>'<span class="tag">'+t+'</span>').join('')}</div>
42 <div class="sc-meta">${s.players}人 · ${s.time} · ${s.diff}</div>
43 <div class="sc-foot"><span class="sc-price"><em>¥</em>${s.price}<small style="font-size:10px;color:#8b6a70">/人</small></span><span class="sc-book">去预约</span></div>
44 </div>
45 </div>`).join('');
46$('#join-list').innerHTML=JOINS.map(j=>`
47 <div class="join-card">
48 <div class="jc-head"><span>${j.time} · 发起人 ${j.leader}</span><span class="jc-status">● ${j.status}</span></div>
49 <div class="jc-body"><span style="font-size:26px">${j.script==='雾都迷案'?'🕵️':j.script==='瞳灵人'?'👻':'🏗️'}</span>
50 <div><div class="jc-name">${j.name}</div><div class="jc-meta">${j.script} · ${j.total}人场</div></div>
51 </div>
52 <div class="jc-foot">
53 <div class="avatar-stack"><span>😎</span><span>😄</span><span>🤩</span><span>😏</span></div>
54 <span class="jc-num">已<b>${j.now}</b>/${j.total}人</span>
55 <span class="jc-btn" onclick="joinCar('${j.script}')">上车</span>
56 </div>
57 </div>`).join('');
58$('#dm-list').innerHTML=DMS.map(d=>`<div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed #3a1a24"><span style="font-size:28px">${d.emoji}</span><div style="flex:1;font-size:13px"><b>${d.name}</b> <span style="color:var(--gold)">★${d.score}</span><br><small style="color:#8b6a70">${d.skill.join(' · ')} · 开本${d.play}场</small></div><span class="tag" style="background:rgba(52,211,153,.15);color:var(--green)">可约</span></div>`).join('');
59</script>
60</body></html>