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
<!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>
    <main class="app-shell">
      <header class="topbar">
        <h1>辩论赛计时器 · 编辑配置</h1>
        <div class="actions topbar-actions">
          <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="exportTimerBtn" class="btn">导出独立计时器</button>
          <button id="openTimerBtn" class="btn btn-accent">进入计时页</button>
        </div>
      </header>

      <div class="editor-tabs">
        <button class="editor-tab active" data-panel="editor">编辑界面</button>
        <button class="editor-tab" data-panel="segments">环节管理</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>
        </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>
              <span class="editor-hint">提示：点击文本元素可编辑内容、字体、大小和颜色；拖动可调整位置</span>
            </div>
            <div class="editor-preview-wrapper" id="editorPreviewWrapper">
              <div class="timer-shell" id="timerPreview">
                <header class="top-band" id="previewTopBand">
                  <div class="team affirmative">
                    <span class="team-label">正方</span>
                    <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="event-title" id="previewEventTitle" data-editable="text" data-layout-key="eventTitle">赛事名称</div>
                  <div class="team negative">
                    <span class="team-label">反方</span>
                    <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="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>
                  <div class="status-pill" id="previewStatusText" data-editable="text" data-layout-key="statusText">状态：预览模式</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>
              </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>
      </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>
    <script src="js/toast.js"></script>
    <script src="js/editor-app.js"></script>
  </body>
</html>