161 lines
6.4 KiB
HTML
161 lines
6.4 KiB
HTML
<!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,viewport-fit=cover">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<meta name="theme-color" content="#000000">
|
|
<title>林夏</title>
|
|
<style>
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
html,body{
|
|
width:100%;height:100%;background:#000;
|
|
overflow:hidden;touch-action:none;
|
|
-webkit-tap-highlight-color:transparent;
|
|
user-select:none;-webkit-user-select:none;
|
|
font-family:-apple-system,'PingFang SC','Hiragino Sans GB',sans-serif;
|
|
}
|
|
#game{position:fixed;inset:0;background:#000;}
|
|
|
|
/* ── 开始界面 ── */
|
|
#start{
|
|
position:fixed;inset:0;background:#000;z-index:80;
|
|
display:flex;flex-direction:column;align-items:center;
|
|
color:#fff;text-align:center;padding:40px 32px 48px;
|
|
overflow-y:auto;-webkit-overflow-scrolling:touch;
|
|
}
|
|
#start h1{font-size:38px;font-weight:200;letter-spacing:14px;margin-top:48px;margin-bottom:28px}
|
|
#start .sub{font-size:14px;color:#777;line-height:2.4}
|
|
#start .hint{margin-top:40px;font-size:12px;color:#444;animation:pulse 2.5s ease-in-out infinite}
|
|
#start .tip{margin-top:16px;font-size:11px;color:#2a2a2a;line-height:1.9}
|
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
|
|
|
|
/* ── 操作说明 ── */
|
|
#controls{
|
|
margin-top:44px;width:100%;max-width:320px;text-align:left;
|
|
}
|
|
#controls .ctrl-title{
|
|
font-size:10px;letter-spacing:4px;color:#333;text-align:center;margin-bottom:20px;
|
|
}
|
|
#controls .ctrl-group{
|
|
margin-bottom:20px;
|
|
}
|
|
#controls .ctrl-scene{
|
|
font-size:10px;letter-spacing:2px;color:#3a3a3a;margin-bottom:8px;padding-bottom:6px;
|
|
border-bottom:1px solid #1a1a1a;
|
|
}
|
|
#controls .ctrl-row{
|
|
display:flex;justify-content:space-between;align-items:baseline;
|
|
padding:5px 0;border-bottom:1px solid #111;
|
|
}
|
|
#controls .ctrl-row:last-child{border-bottom:none;}
|
|
#controls .ctrl-gesture{font-size:11px;color:#555;white-space:nowrap;flex-shrink:0;}
|
|
#controls .ctrl-action{font-size:11px;color:#2e2e2e;text-align:right;margin-left:12px;}
|
|
|
|
/* ── 字幕层（结局文字）── */
|
|
#caption{
|
|
position:fixed;inset:0;z-index:60;
|
|
display:none;align-items:center;justify-content:center;
|
|
color:#fff;font-size:18px;font-weight:300;letter-spacing:4px;
|
|
text-align:center;line-height:2;padding:40px;
|
|
animation:fadein .8s ease-out;
|
|
}
|
|
@keyframes fadein{from{opacity:0}to{opacity:1}}
|
|
|
|
/* ── 操作提示栏 ── */
|
|
#hint{
|
|
position:fixed;bottom:0;left:0;right:0;z-index:70;
|
|
padding:12px 24px 20px;
|
|
text-align:center;
|
|
font-size:11px;letter-spacing:1.5px;color:#444;
|
|
background:linear-gradient(transparent,rgba(0,0,0,0.85));
|
|
pointer-events:none;
|
|
min-height:52px;
|
|
display:flex;align-items:flex-end;justify-content:center;
|
|
transition:opacity 0.4s;
|
|
}
|
|
|
|
/* ── 调试条 ── */
|
|
#dbg{
|
|
display:none;
|
|
position:fixed;bottom:30px;left:0;right:0;text-align:center;
|
|
font-size:11px;color:#333;z-index:200;pointer-events:none;font-family:monospace;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="game"></div>
|
|
|
|
<div id="start">
|
|
<h1>林夏</h1>
|
|
<div class="sub">
|
|
今晚 16 条消息<br>
|
|
你接谁，不接谁<br>
|
|
决定明天的自己
|
|
</div>
|
|
<div id="controls">
|
|
<div class="ctrl-title">操 作 说 明</div>
|
|
|
|
<div class="ctrl-group">
|
|
<div class="ctrl-scene">来电时</div>
|
|
<div class="ctrl-row"><span class="ctrl-gesture">单击 / 右滑</span><span class="ctrl-action">接听</span></div>
|
|
<div class="ctrl-row"><span class="ctrl-gesture">左滑 / 双击</span><span class="ctrl-action">拒接</span></div>
|
|
</div>
|
|
|
|
<div class="ctrl-group">
|
|
<div class="ctrl-scene">收到消息</div>
|
|
<div class="ctrl-row"><span class="ctrl-gesture">单击</span><span class="ctrl-action">播放</span></div>
|
|
<div class="ctrl-row"><span class="ctrl-gesture">双击 / 左滑</span><span class="ctrl-action">跳过</span></div>
|
|
</div>
|
|
|
|
<div class="ctrl-group">
|
|
<div class="ctrl-scene">选择回复</div>
|
|
<div class="ctrl-row"><span class="ctrl-gesture">单击</span><span class="ctrl-action">简单回应</span></div>
|
|
<div class="ctrl-row"><span class="ctrl-gesture">右滑</span><span class="ctrl-action">温暖回应</span></div>
|
|
<div class="ctrl-row"><span class="ctrl-gesture">左滑</span><span class="ctrl-action">冷淡回应</span></div>
|
|
<div class="ctrl-row"><span class="ctrl-gesture">上滑</span><span class="ctrl-action">追问</span></div>
|
|
<div class="ctrl-row"><span class="ctrl-gesture">下滑</span><span class="ctrl-action">沉默</span></div>
|
|
<div class="ctrl-row"><span class="ctrl-gesture">双击</span><span class="ctrl-action">不回复</span></div>
|
|
</div>
|
|
|
|
<div class="ctrl-group">
|
|
<div class="ctrl-scene">播放中</div>
|
|
<div class="ctrl-row"><span class="ctrl-gesture">双击</span><span class="ctrl-action">跳过</span></div>
|
|
<div class="ctrl-row"><span class="ctrl-gesture">长按</span><span class="ctrl-action">重播</span></div>
|
|
</div>
|
|
|
|
<div class="ctrl-group">
|
|
<div class="ctrl-scene">随时可用</div>
|
|
<div class="ctrl-row"><span class="ctrl-gesture">两指长按</span><span class="ctrl-action">暂停</span></div>
|
|
<div class="ctrl-row"><span class="ctrl-gesture">三指点击</span><span class="ctrl-action">退出（暂停后）</span></div>
|
|
<div class="ctrl-row"><span class="ctrl-gesture">长按</span><span class="ctrl-action">播报未读数</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hint">· 轻触屏幕开始 ·</div>
|
|
<div class="tip">
|
|
建议关灯 · 戴上耳机<br>
|
|
按你的节奏来
|
|
</div>
|
|
<div class="tip" style="margin-top:20px;color:#333;">
|
|
本游戏涉及孤独、家庭关系等情感话题<br>
|
|
请在舒适的状态下体验
|
|
</div>
|
|
</div>
|
|
|
|
<div id="caption"></div>
|
|
<div id="hint"></div>
|
|
<div id="dbg"></div>
|
|
|
|
<script src="js/utils.js"></script>
|
|
<script src="js/haptics.js"></script>
|
|
<script src="js/audio.js"></script>
|
|
<script src="js/gestures.js"></script>
|
|
<script src="js/profile.js"></script>
|
|
<script src="js/story.js"></script>
|
|
<script src="js/engine.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|