从github迁移过来
This commit is contained in:
+139
@@ -0,0 +1,139 @@
|
||||
<!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}}
|
||||
|
||||
/* ── 调试条（开发用） ── */
|
||||
#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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="hint">· 轻触屏幕开始 ·</div>
|
||||
<div class="tip">
|
||||
建议关灯 · 戴上耳机<br>
|
||||
全程约 60 分钟
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="caption"></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>
|
||||
Reference in New Issue
Block a user