Repository navigation
Expand file tree
/
Copy pathtimer.html
More file actions
159 lines (156 loc) · 6.21 KB
/
Copy pathtimer.html
File metadata and controls
159 lines (156 loc) · 6.21 KB
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!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">
<div class="bg-layer"></div>
<header class="top-band">
<div class="team affirmative">
<span class="team-label" id="affirmativeLabel">正方</span>
<img id="affirmativeLogo" class="team-logo" src="" alt="" />
<strong class="team-name" id="affirmativeTeamName">正方队</strong>
<span class="team-topic" id="affirmativeTopic">正方辩题</span>
</div>
<div class="team negative">
<span class="team-label" id="negativeLabel">反方</span>
<img id="negativeLogo" class="team-logo" src="" alt="" />
<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>
</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 duel-side-group" id="duelSideGroup" style="display:none;">
<button id="duelSideAffirmativeBtn" type="button">
<span class="btn-label">正方</span>
<span class="btn-key">,</span>
</button>
<button id="duelSideNegativeBtn" type="button">
<span class="btn-label">反方</span>
<span class="btn-key">.</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" id="watermark">辩论计时器</footer>
<div class="design-by" id="designBy">© 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>
<div id="ssScheduleSection" class="ss-schedule-section" style="display:none;">
<h3>选择预设赛程</h3>
<div id="ssScheduleList" class="ss-schedule-list"></div>
<p class="ss-schedule-or">或手动输入下方信息</p>
</div>
<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>