wxlj/index.html at main · Ming825/wxlj · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>亮剑 · 平安县城 —— 甬电青年说 第七组</title>
<link rel="stylesheet" href="src/style.css">
</head>
<body>

<!-- ============ 开场遮罩：必须点击一次才能解锁音频播放 ============ -->
<div id="splash" class="splash">
  <div class="splash-inner">
    <div class="splash-kicker">甬电青年说 · 第七组</div>
    <h1 class="splash-title">亮　剑</h1>
    <div class="splash-sub">平安县城攻坚战</div>
    <button id="startBtn" class="start-btn">开 始 演 出</button>
    <div class="splash-tip">
      <kbd>空格</kbd> / <kbd>→</kbd> / <kbd>翻页笔</kbd> 下一条
      <kbd>←</kbd> 回退
      <kbd>H</kbd> 操作提示条
      <kbd>B</kbd> 黑屏
      <kbd>F</kbd> 全屏
    </div>
  </div>
</div>

<!-- ============ 舞台 ============ -->
<div id="stage" class="stage">

  <!-- 背景层（图片 / 内置渐变 + 暗色遮罩） -->
  <div id="bgLayer" class="bg-layer"></div>
  <div id="bgDim" class="bg-dim"></div>

  <!-- 群聊主体 -->
  <div class="chat-frame">
    <header class="chat-header">
      <span id="groupName" class="group-name"></span>
      <span id="sceneName" class="scene-name"></span>
    </header>

    <main id="chatFlow" class="chat-flow"></main>
  </div>

  <!-- 整屏字幕（开场 / 致敬 / 剧终） -->
  <div id="fullscreen" class="fullscreen">
    <div id="fullscreenBody" class="fullscreen-body"></div>
  </div>

  <!-- 操作员提示条：默认隐藏，按 H 切换 -->
  <div id="hud" class="hud">
    <span id="hudPos" class="hud-pos"></span>
    <span id="hudNote" class="hud-note"></span>
    <span id="hudNext" class="hud-next"></span>
  </div>

  <!-- 进度指示 -->
  <div class="progress"><div id="progressBar" class="progress-bar"></div></div>
</div>

<!-- 黑屏遮罩 -->
<div id="blackout" class="blackout"></div>

<script src="src/config.js"></script>
<script src="src/script.js"></script>
<script src="src/player.js"></script>
</body>
</html>