DebateTimer/timer.html at main · ASE-128/DebateTimer · 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="Chen Yu" />
    <title>辩论赛计时器 - 计时页</title>
    <link rel="stylesheet" href="styles/variables.css" />
    <link rel="stylesheet" href="styles/timer.css" />
  </head>
  <body>
    <main class="timer-shell">
      <header class="top-band">
        <div class="team affirmative">
          <span class="team-label">正方</span>
          <strong class="team-name" id="affirmativeTeamName">正方队</strong>
          <span class="team-topic" id="affirmativeTopic">正方辩题</span>
        </div>
        <div class="event-title" id="eventTitle">赛事名称</div>
        <div class="team negative">
          <span class="team-label">反方</span>
          <strong class="team-name" id="negativeTeamName">反方队</strong>
          <span class="team-topic" id="negativeTopic">反方辩题</span>
        </div>
      </header>

      <section class="main-area">
        <div class="event-name" id="eventName">赛事名称</div>
        <div class="segment-name" id="segmentName">开场</div>
        <div class="timer-display" id="timerDisplay">
          <div class="single-timer" id="singleTimer">00:00</div>
          <div class="dual-timer" id="dualTimer">
            <div class="dual-side affirmative">
              <span class="dual-label">正方</span>
              <span class="dual-time" id="affirmativeTime">00:00</span>
            </div>
            <div class="dual-side negative">
              <span class="dual-label">反方</span>
              <span class="dual-time" id="negativeTime">00:00</span>
            </div>
          </div>
          <div class="timer-progress" id="timerProgress">
            <div class="timer-progress-bar" id="timerProgressBar" style="width: 100%;"></div>
          </div>
        </div>
        <div class="side-label" id="sideLabel">当前发言方</div>
        <div class="status-pill" id="statusText">状态：已加载配置</div>
      </section>

      <aside class="control-panel">
        <div class="control-group">
          <button id="startBtn">
            <span class="btn-label">启动</span>
            <span class="btn-key">Space</span>
          </button>
        </div>
        <div class="control-group">
          <button id="stopBtn">
            <span class="btn-label">停止</span>
          </button>
          <button id="resetBtn">
            <span class="btn-label">重置</span>
          </button>
        </div>
        <div class="control-group">
          <button id="prevBtn">
            <span class="btn-label">◀</span>
          </button>
          <button id="nextBtn">
            <span class="btn-label">▶</span>
          </button>
        </div>
        <div class="control-group">
          <button id="jumpBtn">
            <span class="btn-label">跳转</span>
          </button>
          <button id="setTimeBtn">
            <span class="btn-label">设时</span>
          </button>
        </div>
        <div class="control-group">
          <button id="test30Btn">
            <span class="btn-label">30s</span>
            <span class="btn-key">Q</span>
          </button>
          <button id="test5Btn">
            <span class="btn-label">5s</span>
            <span class="btn-key">W</span>
          </button>
          <button id="testEndBtn">
            <span class="btn-label">结束</span>
            <span class="btn-key">E</span>
          </button>
        </div>
        <div class="control-group">
          <button id="fullscreenBtn">
            <span class="btn-label">全屏</span>
            <span class="btn-key">F</span>
          </button>
          <button id="backBtn">
            <span class="btn-label">返回</span>
            <span class="btn-key">B</span>
          </button>
        </div>
      </aside>

      <footer class="watermark">辩论计时器</footer>
      <div class="design-by">© Chen Yu 2026<br> All rights reserved.</div>
    </main>
    <div id="jumpModal" class="timer-modal">
      <div class="box">
        <h2>环节跳转</h2>
        <div id="jumpSegmentList" class="segment-list"></div>
        <button id="jumpCancelBtn" class="secondary">取消</button>
      </div>
    </div>
    <div id="setTimeModal" class="timer-modal">
      <div class="box">
        <h2>设置时间</h2>
        <div class="time-inputs">
          <label>分<input id="setTimeMin" type="number" min="0" value="0" /></label>
          <label>秒<input id="setTimeSec" type="number" min="0" max="59" value="0" /></label>
        </div>
        <button id="setTimeConfirmBtn">确认</button>
        <button id="setTimeCancelBtn" class="secondary">取消</button>
      </div>
    </div>
    <div id="standaloneSetup" class="standalone-setup">
      <div class="box">
        <h2>赛前设置</h2>
        <label>正方队伍<input id="ssAffirmativeTeam" type="text" /></label>
        <label>正方辩题<input id="ssAffirmativeTopic" type="text" /></label>
        <label>反方队伍<input id="ssNegativeTeam" type="text" /></label>
        <label>反方辩题<input id="ssNegativeTopic" type="text" /></label>
        <button id="ssStartBtn">开始计时</button>
      </div>
    </div>
    <script src="js/toast.js"></script>
    <script src="js/audio.js"></script>
    <script src="js/timer-core.js"></script>
    <script src="js/timer-app.js"></script>
  </body>
</html>