DebateTimer/editor.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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
<!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" />
    <link rel="stylesheet" href="styles/editor.css" />
  </head>
  <body>
    <div id="migrationNotification" class="migration-notification" style="display:none;">
      <div class="migration-notification-content">
        <span class="migration-icon">ℹ</span>
        <span class="migration-text">检测到旧版配置，已自动迁移到 3.0 格式，原配置已备份为 <code id="migrationBackupPath">config.json.v2.bak</code></span>
        <button id="migrationCloseBtn" class="btn">知道了</button>
      </div>
    </div>

    <div id="updateNotification" class="update-notification" style="display:none;">
      <div class="update-notification-content">
        <div class="update-info">
          <span class="update-icon">⬆</span>
          <div class="update-text">
            <strong>发现新版本 <span id="updateVersion"></span></strong>
            <div id="updateChangelog" class="update-changelog">更新日志摘要</div>
          </div>
        </div>
        <div class="update-actions">
          <button id="updateDownloadBtn" class="btn btn-accent">立即更新</button>
          <button id="updateRestartBtn" class="btn btn-accent" style="display:none;">立即重启</button>
          <button id="updateLaterBtn" class="btn">稍后</button>
          <button id="updateSkipBtn" class="btn">跳过此版本</button>
        </div>
      </div>
      <div id="updateErrorText" class="update-error"></div>
    </div>

    <main class="app-shell">
      <header class="topbar">
        <h1>辩论赛计时器 · 编辑配置</h1>
        <div class="actions topbar-actions">
          <div class="theme-switcher" id="themeSwitcher">
            <button id="themePresetBtn" class="btn" type="button" title="主题风格">
              <span id="themePresetLabel">经典</span>
              <span class="theme-arrow">▾</span>
            </button>
            <div class="theme-dropdown" id="themeDropdown" style="display:none;">
              <div class="theme-dropdown-section">
                <div class="theme-dropdown-title">风格方向</div>
                <button class="theme-option active" type="button" data-preset="classic">
                  <span class="theme-option-name">经典</span>
                </button>
                <button class="theme-option" type="button" data-preset="broadcast">
                  <span class="theme-option-name">广播竞技</span>
                </button>
                <button class="theme-option" type="button" data-preset="restrained">
                  <span class="theme-option-name">专业克制</span>
                </button>
                <button class="theme-option" type="button" data-preset="vibrant">
                  <span class="theme-option-name">活力校园</span>
                </button>
              </div>
              <div class="theme-dropdown-divider"></div>
              <div class="theme-dropdown-section">
                <div class="theme-dropdown-title">色彩模式</div>
                <button class="theme-option" type="button" id="themeColorModeBtn">
                  <span class="theme-option-name" id="themeColorModeLabel">暗色模式</span>
                </button>
              </div>
            </div>
          </div>
          <button id="saveBtn" class="btn btn-accent">保存配置</button>
          <button id="resetBtn" class="btn">重置默认</button>
          <button id="importConfigBtn" class="btn">导入配置</button>
          <button id="exportConfigBtn" class="btn">导出配置</button>
          <button id="loadTemplateBtn" class="btn">从模板新建</button>
          <button id="saveTemplateBtn" class="btn">保存为模板</button>
          <button id="exportTimerBtn" class="btn">导出独立计时器</button>
          <button id="openTimerBtn" class="btn btn-accent">进入计时页</button>
          <button id="aboutBtn" class="btn">关于</button>
        </div>
      </header>

      <div class="editor-tabs">
        <button class="editor-tab active" data-panel="editor">编辑界面</button>
        <button class="editor-tab" data-panel="segments">环节管理</button>
        <button class="editor-tab" data-panel="schedule">赛程管理</button>
      </div>

      <div class="editor-body">
        <nav class="editor-sidebar" id="editorSidebar">
          <div class="editor-nav-item active" data-panel="editor">
            <span>编辑界面</span>
          </div>
          <div class="editor-nav-item" data-panel="segments">
            <span>环节管理</span>
          </div>
          <div class="editor-nav-item" data-panel="schedule">
            <span>赛程管理</span>
          </div>
        </nav>

        <div class="editor-content">
          <!-- 编辑界面面板 -->
          <div class="editor-panel active" id="panel-editor">
            <div class="editor-preview-toolbar">
              <button id="editBackgroundBtn" class="btn btn-accent">修改背景相关设置</button>
              <div class="editor-preview-segment">
                <label>预览环节<select id="previewSegmentSelect"></select></label>
              </div>
              <span class="editor-hint">提示：点击文本元素可编辑内容、字体、大小和颜色；拖动可调整位置</span>
            </div>
            <div class="editor-preview-wrapper" id="editorPreviewWrapper">
              <div class="timer-shell" id="timerPreview">
                <div class="bg-layer"></div>
                <header class="top-band" id="previewTopBand">
                  <div class="team affirmative">
                    <span class="team-label">正方</span>
                    <img id="previewAffirmativeLogo" class="team-logo" src="" alt="" />
                    <strong class="team-name" id="previewAffirmativeTeamName" data-editable="text" data-layout-key="affirmativeTeamName">正方队</strong>
                    <span class="team-topic" id="previewAffirmativeTopic" data-editable="text" data-layout-key="affirmativeTopic">正方辩题</span>
                  </div>
                  <div class="team negative">
                    <span class="team-label">反方</span>
                    <img id="previewNegativeLogo" class="team-logo" src="" alt="" />
                    <strong class="team-name" id="previewNegativeTeamName" data-editable="text" data-layout-key="negativeTeamName">反方队</strong>
                    <span class="team-topic" id="previewNegativeTopic" data-editable="text" data-layout-key="negativeTopic">反方辩题</span>
                  </div>
                  <div class="top-band-resize-handle" id="topBandResizeHandle"></div>
                </header>

                <section class="main-area" id="previewMainArea">
                  <div class="event-name" id="previewEventName" data-editable="text" data-layout-key="eventName">赛事名称</div>
                  <div class="segment-name" id="previewSegmentName" data-editable="text" data-layout-key="segmentName">中立计时</div>
                  <div class="timer-display" id="previewTimerDisplay">
                    <div class="single-timer neutral" id="previewSingleTimer">03:00</div>
                    <div class="dual-timer" id="previewDualTimer" style="display: none;">
                      <div class="dual-side affirmative">
                        <span class="dual-label">正方</span>
                        <span class="dual-time" id="previewAffirmativeTime">03:00</span>
                      </div>
                      <div class="dual-side negative">
                        <span class="dual-label">反方</span>
                        <span class="dual-time" id="previewNegativeTime">03:00</span>
                      </div>
                    </div>
                    <div class="timer-progress" id="previewTimerProgress">
                      <div class="timer-progress-bar" id="previewTimerProgressBar" style="width: 60%;"></div>
                    </div>
                  </div>
                  <div class="side-label neutral" id="previewSideLabel" data-editable="text" data-layout-key="sideLabel">中立计时中</div>
                </section>

                <footer class="watermark" id="previewWatermark" data-editable="text" data-layout-key="watermark">辩论计时器</footer>
                <div class="design-by" id="previewDesignBy" data-editable="text" data-layout-key="designBy">© Chen Yu 2026<br> All rights reserved.</div>

                <aside class="control-panel preview-control-panel" id="previewControlPanel">
                  <div class="control-group">
                    <button id="previewStartBtn" type="button">
                      <span class="btn-label">启动</span>
                      <span class="btn-key">Space</span>
                    </button>
                  </div>
                  <div class="control-group duel-side-group" id="previewDuelSideGroup" style="display:none;">
                    <button id="previewDuelSideAffirmativeBtn" type="button">
                      <span class="btn-label">正方</span>
                      <span class="btn-key">,</span>
                    </button>
                    <button id="previewDuelSideNegativeBtn" type="button">
                      <span class="btn-label">反方</span>
                      <span class="btn-key">.</span>
                    </button>
                  </div>
                  <div class="control-group">
                    <button id="previewStopBtn" type="button">
                      <span class="btn-label">停止</span>
                    </button>
                    <button id="previewResetBtn" type="button">
                      <span class="btn-label">重置</span>
                    </button>
                  </div>
                  <div class="control-group">
                    <button id="previewPrevBtn" type="button">
                      <span class="btn-label">◀</span>
                    </button>
                    <button id="previewNextBtn" type="button">
                      <span class="btn-label">▶</span>
                    </button>
                  </div>
                  <div class="control-group">
                    <button id="previewJumpBtn" type="button">
                      <span class="btn-label">跳转</span>
                    </button>
                    <button id="previewSetTimeBtn" type="button">
                      <span class="btn-label">设时</span>
                    </button>
                  </div>
                  <div class="control-group">
                    <button id="previewTest30Btn" type="button">
                      <span class="btn-label">30s</span>
                      <span class="btn-key">Q</span>
                    </button>
                    <button id="previewTest5Btn" type="button">
                      <span class="btn-label">5s</span>
                      <span class="btn-key">W</span>
                    </button>
                    <button id="previewTestEndBtn" type="button">
                      <span class="btn-label">结束</span>
                      <span class="btn-key">E</span>
                    </button>
                  </div>
                  <div class="control-group">
                    <button id="previewFullscreenBtn" type="button">
                      <span class="btn-label">全屏</span>
                      <span class="btn-key">F</span>
                    </button>
                    <button id="previewBackBtn" type="button">
                      <span class="btn-label">返回</span>
                      <span class="btn-key">B</span>
                    </button>
                  </div>
                </aside>
              </div>
            </div>
          </div>

          <!-- 环节管理面板 -->
          <div class="editor-panel" id="panel-segments">
            <div class="segments-layout">
              <div class="segments-sidebar">
                <h2>环节管理</h2>
                <div class="segment-nav-section">
                  <span class="segment-nav-label">导航（拖拽排序）</span>
                  <div class="segment-nav" id="segmentNav"></div>
                </div>
                <div class="segment-action-bar">
                  <button id="addNoneBtn" type="button">+ 无计时</button>
                  <button id="addSpeechBtn" type="button">+ 陈词</button>
                  <button id="addQuestionBtn" type="button">+ 质询</button>
                  <button id="addNeutralBtn" type="button">+ 中立计时</button>
                  <button id="addDebateBtn" type="button">+ 对辩</button>
                  <button id="addFreeDebateBtn" type="button">+ 自由辩论</button>
                </div>
              </div>
              <div class="segments-content">
                <div id="segments"></div>
              </div>
            </div>
          </div>

          <!-- 赛程管理面板 -->
          <div class="editor-panel" id="panel-schedule">
            <div class="schedule-header">
              <h2>赛程管理</h2>
              <button id="addScheduleItemBtn" class="btn btn-accent" type="button">新增赛程</button>
            </div>
            <div id="scheduleList" class="schedule-list"></div>
            <p class="schedule-hint">配置好的赛程会随配置一起导出到独立计时器，供赛前选择调用。</p>
          </div>
        </div>
      </div>

      <div class="design-by">© Chen Yu 2026<br> All rights reserved.</div>

      <!-- 文本编辑浮动工具栏 -->
      <div id="textEditToolbar" class="floating-toolbar" style="display:none;">
        <div class="toolbar-header">
          <span>文本编辑</span>
          <button class="toolbar-close" id="textToolbarClose">×</button>
        </div>
        <div class="toolbar-body">
          <label>内容<input id="toolbarTextContent" type="text" /></label>
          <label>字体<select id="toolbarFontFamily"></select></label>
          <label>字号(px)<input id="toolbarFontSize" type="number" min="8" max="200" /></label>
          <label>颜色<input id="toolbarTextColor" type="color" /></label>
        </div>
      </div>

      <!-- 状态栏编辑浮动工具栏 -->
      <div id="statusBarToolbar" class="floating-toolbar" style="display:none;">
        <div class="toolbar-header">
          <span>状态栏设置</span>
          <button class="toolbar-close" id="statusBarToolbarClose">×</button>
        </div>
        <div class="toolbar-body">
          <label>背景颜色<input id="toolbarStatusBarColor" type="color" /></label>
          <label>背景透明度<input id="toolbarStatusBarOpacity" type="range" min="0" max="100" /></label>
          <label>渐变终点颜色<input id="toolbarStatusBarColor2" type="color" /></label>
          <div class="toolbar-row">
            <label><input id="toolbarStatusBarGradient" type="checkbox" /> 使用渐变</label>
          </div>
        </div>
      </div>

      <!-- 背景编辑浮动工具栏 -->
      <div id="backgroundToolbar" class="floating-toolbar" style="display:none;">
        <div class="toolbar-header">
          <span>背景设置</span>
          <button class="toolbar-close" id="bgToolbarClose">×</button>
        </div>
        <div class="toolbar-body">
          <label>背景类型<select id="toolbarBgType">
            <option value="color">纯色</option>
            <option value="gradient">渐变</option>
            <option value="image">图片</option>
          </select></label>
          <div id="bgColorPanel">
            <label>背景色<input id="toolbarBgColor" type="color" /></label>
          </div>
          <div id="bgGradientPanel" style="display:none;">
            <label>起始颜色<input id="toolbarBgGradientStart" type="color" /></label>
            <label>结束颜色<input id="toolbarBgGradientEnd" type="color" /></label>
            <label>角度<input id="toolbarBgGradientAngle" type="number" min="0" max="360" value="135" /></label>
          </div>
          <div id="bgImagePanel" style="display:none;">
            <label>背景图片<input id="toolbarBgImage" type="file" accept="image/*" /></label>
            <label>透明度<input id="toolbarBgImageOpacity" type="range" min="0" max="100" /></label>
            <label>宽度缩放<input id="toolbarBgImageScaleX" type="range" min="10" max="500" step="10" value="100" /></label>
            <label>高度缩放<input id="toolbarBgImageScaleY" type="range" min="10" max="500" step="10" value="100" /></label>
            <label>X偏移<input id="toolbarBgImageOffsetX" type="range" min="-100" max="100" /></label>
            <label>Y偏移<input id="toolbarBgImageOffsetY" type="range" min="-100" max="100" /></label>
          </div>
        </div>
      </div>
    </main>

    <div id="exportProgressOverlay" class="export-progress-overlay">
      <div class="export-progress-box">
        <h2>正在导出独立计时器</h2>
        <div class="export-progress-bar-wrap">
          <div id="exportProgressBar" class="export-progress-bar"></div>
        </div>
        <p id="exportProgressText" class="export-progress-text">准备中...</p>
      </div>
    </div>

    <div id="aboutOverlay" class="export-progress-overlay">
      <div class="export-progress-box about-box">
        <h2>关于 DebateTimer</h2>
        <p id="aboutVersion" class="about-version">版本号：加载中...</p>
        <p class="about-copyright">© Chen Yu 2026 · All rights reserved.</p>
        <button id="aboutCloseBtn" class="btn btn-accent">关闭</button>
      </div>
    </div>

    <div id="templateModal" class="export-progress-overlay">
      <div class="export-progress-box template-modal-box">
        <div class="template-modal-header">
          <h2>模板管理</h2>
          <button id="templateModalClose" class="toolbar-close" type="button">×</button>
        </div>
        <div id="templateModalBody" class="template-modal-body">
          <div id="templateList" class="template-list"></div>
        </div>
      </div>
    </div>

    <script src="js/toast.js"></script>
    <script src="js/editor-app.js"></script>
  </body>
</html>