aiweb3.dev-ppt/index.html at main · hackathonweekly/aiweb3.dev-ppt · 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML PPT 模板 - 使用教程</title>
    <meta name="description" content="一个纯HTML的PPT演示模板，支持AI生成内容，响应式设计">

    <!-- 样式文件 -->
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <link rel="stylesheet" href="assets/css/editor.css">

    <!-- 字体和图标 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- FontAwesome 本地 -->
    <link rel="stylesheet" href="assets/vendor/fontawesome/css/all.min.css">
</head>
<body>
    <!-- 欢迎提示 -->
    <div id="welcome-overlay" class="welcome-overlay">
        <div class="welcome-content">
            <h1>🎉 欢迎使用 HTML PPT 模板</h1>
            <p>这是一个纯HTML的PPT演示模板，无需安装任何软件即可使用</p>
            <div class="welcome-buttons">
                <button class="btn-primary" onclick="startTutorial()">
                    <i class="fas fa-play"></i> 开始教程
                </button>
                <button class="btn-secondary" onclick="closeWelcome()">
                    <i class="fas fa-times"></i> 直接使用
                </button>
            </div>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="ppt-container">
        <!-- 侧边栏导航 -->
        <nav class="sidebar open" id="sidebar">
            <div class="sidebar-header">
                <h3>PPT 控制面板</h3>
                <button class="sidebar-toggle" onclick="toggleSidebar()">
                    <i class="fas fa-times"></i>
                </button>
            </div>


            <!-- 功能按钮区域 -->
            <div class="sidebar-functions">
                <div class="sidebar-section-header" onclick="toggleSidebarSection('functions')">
                    <h4>功能面板</h4>
                    <i class="fas fa-chevron-down sidebar-section-arrow"></i>
                </div>
                <div class="sidebar-section-content" id="functions-section">
                    <div class="function-buttons">
                        <button class="sidebar-function-btn" onclick="showFolderSelector()" title="选择PPT文件夹">
                            <i class="fas fa-folder-open"></i>
                            <span>切换项目</span>
                        </button>
                        <button class="sidebar-function-btn" onclick="showHelp()" title="帮助中心">
                            <i class="fas fa-question-circle"></i>
                            <span>帮助中心</span>
                        </button>
                        <button class="sidebar-function-btn" onclick="showPresentationTimer()" title="演示计时器 (Alt+T)">
                            <i class="fas fa-clock"></i>
                            <span>计时器</span>
                        </button>
                        <button class="sidebar-function-btn" onclick="toggleFullscreen()" title="全屏 (F11)">
                            <i class="fas fa-expand"></i>
                            <span>全屏</span>
                        </button>
                        <button class="sidebar-function-btn" onclick="exportToPDF()" title="导出PDF">
                            <i class="fas fa-file-pdf"></i>
                            <span>导出PDF</span>
                        </button>
                        <button class="sidebar-function-btn" onclick="showHackathonInfo()" title="黑客松信息">
                            <i class="fas fa-info-circle"></i>
                            <span>黑客松信息</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 幻灯片导航区域 -->
            <div class="sidebar-navigation">
                <h4>幻灯片导航</h4>
                <div class="sidebar-controls">
                    <button class="sidebar-control-btn custom-tooltip" onclick="resetSlideOrder()" data-tooltip="恢复默认顺序">
                        <i class="fas fa-undo"></i>
                        <span>重置顺序</span>
                    </button>
                </div>
                <div class="slide-navigation" id="slide-navigation">
                    <!-- 导航项将由JavaScript动态生成 -->
                </div>
            </div>

            <!-- 缩放控制区域 -->
            <div class="sidebar-zoom">
                <div class="zoom-controls">
                    <button id="sidebar-zoom-out" class="zoom-btn" title="缩小">
                        <i class="fas fa-minus"></i>
                    </button>
                    <span id="sidebar-zoom-display" class="zoom-display">100%</span>
                    <button id="sidebar-zoom-in" class="zoom-btn" title="放大">
                        <i class="fas fa-plus"></i>
                    </button>
                    <button id="sidebar-zoom-reset" class="zoom-btn" title="重置缩放">
                        <i class="fas fa-home"></i>
                    </button>
                </div>
            </div>

            <!-- 底部幻灯片控制区域 -->
            <div class="sidebar-slide-controls">
                <div class="slide-navigation-controls">
                    <button class="nav-control-btn" onclick="prevSlide()" title="上一张 (←)">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <div class="slide-counter">
                        <span id="current-slide">1</span>
                        <span>/</span>
                        <span id="total-slides">-</span>
                    </div>
                    <button class="nav-control-btn" onclick="nextSlide()" title="下一张 (→)">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </nav>

        <!-- 主演示区域 -->
        <main class="main-content">
            <!-- 浮动的sidebar打开按钮 -->
            <button class="sidebar-open-btn" id="sidebar-open-btn" onclick="toggleSidebar()" title="打开控制面板">
                <i class="fas fa-bars"></i>
            </button>

            <!-- 幻灯片展示区域 -->
            <div class="slide-container">
                <div class="slide-viewport" id="slide-viewport">
                    <iframe id="slide-frame" src="ppt/default/01-cover.html" frameborder="0"></iframe>
                </div>

                <!-- 幻灯片计数器覆盖层 -->
                <div class="slide-counter-overlay">
                    <div class="slide-counter-badge">
                        <span id="current-slide-overlay">1</span>
                        <span class="counter-separator">/</span>
                        <span id="total-slides-overlay">-</span>
                    </div>
                </div>
            </div>

            <!-- 进度条 -->
            <div class="progress-bar">
                <div class="progress-fill" id="progress-fill"></div>
            </div>
        </main>
    </div>

    <!-- 帮助弹窗 -->
    <div id="help-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>键盘快捷键</h3>
                <button class="modal-close" onclick="closeHelp()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="shortcut-list">
                    <div class="shortcut-item">
                        <kbd>←</kbd> <kbd>→</kbd>
                        <span>切换幻灯片</span>
                    </div>
                    <div class="shortcut-item">
                        <kbd>Home</kbd> <kbd>End</kbd>
                        <span>首页/末页</span>
                    </div>
                    <div class="shortcut-item">
                        <kbd>Space</kbd>
                        <span>下一张</span>
                    </div>
                    <div class="shortcut-item">
                        <kbd>F11</kbd>
                        <span>全屏</span>
                    </div>
                    <div class="shortcut-item">
                        <kbd>Esc</kbd>
                        <span>退出全屏</span>
                    </div>
                </div>
                <!-- 快速使用指南 -->
                <div class="usage-guide">
                    <h4>快速使用指南</h4>
                    <ol>
                        <li>下载或克隆项目后，直接双击 <code>index.html</code> 即可打开。</li>
                        <li>在 <code>ppt/</code> 文件夹中新建子文件夹，并添加 <code>01-cover.html</code>、<code>02-content.html</code> 等幻灯片文件。</li>
                        <li>刷新浏览器，点击侧边栏顶部的文件夹按钮即可切换到你的演示文稿。</li>
                        <li>使用 <kbd>F11</kbd> 进入全屏模式，<kbd>Esc</kbd> 退出全屏。</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <!-- PPT画廊选择弹窗 -->
    <div id="folder-selector-modal" class="modal">
        <div class="modal-content ppt-gallery">
            <div class="modal-header">
                <h3>选择PPT演示文稿</h3>
                <button class="modal-close" onclick="closeFolderSelector()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <p class="gallery-intro">浏览所有可用的PPT演示文稿：</p>

                <!-- PPT画廊网格 -->
                <div class="ppt-gallery-grid" id="ppt-gallery-grid">
                    <!-- 内容将通过JavaScript动态生成 -->
                </div>

                <!-- 自定义文件夹输入 -->
                <div class="custom-folder-section">
                    <div class="custom-folder-input">
                        <label>或输入自定义PPT文件夹路径：</label>
                        <input type="text" id="custom-folder-path" placeholder="例如：ppt/my-presentation">
                        <button onclick="selectCustomFolder()">打开</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 黑客松信息弹窗 -->
    <div id="hackathon-info-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>🚀 AI³ 黑客松信息</h3>
                <button class="modal-close" onclick="closeHackathonInfo()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="hackathon-info-content">
                    <div class="info-section">
                        <h4><i class="fas fa-globe"></i> 线上演示地址</h4>
                        <p>深圳场黑客松PPT在线版本：</p>
                        <a href="https://aiweb3-ppt.netlify.app/" target="_blank" class="info-link">
                            <i class="fas fa-external-link-alt"></i>
                            https://aiweb3-ppt.netlify.app/
                        </a>
                    </div>

                    <div class="info-section">
                        <h4><i class="fab fa-github"></i> 源代码仓库</h4>
                        <p>获取完整源代码和最新更新：</p>
                        <a href="https://github.com/hackathonweekly/aiweb3.dev-ppt" target="_blank" class="info-link">
                            <i class="fab fa-github"></i>
                            https://github.com/hackathonweekly/aiweb3.dev-ppt
                        </a>
                    </div>

                    <div class="info-section">
                        <h4><i class="fas fa-book"></i> 制作教程</h4>
                        <p>学习如何用AI工具制作专业PPT：</p>
                        <a href="https://hackathonweekly.feishu.cn/wiki/EgC4wn9e5i3BxUkaDIOcm3g8nAh" target="_blank" class="info-link">
                            <i class="fas fa-external-link-alt"></i>
                            十分钟用 Cursor 打造高颜值的类 PPT 网站
                        </a>
                    </div>

                    <div class="info-section">
                        <h4><i class="fas fa-lightbulb"></i> 使用提示</h4>
                        <ul class="tips-list">
                            <li>本地使用：直接打开 index.html 文件即可</li>
                            <li>支持AI生成：使用Cursor、Trae等AI编辑器快速创建PPT</li>
                            <li>响应式设计：完美适配桌面、平板和手机设备</li>
                            <li>零依赖：无需安装任何软件或工具</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 移动端底部导航 -->
    <div class="mobile-nav">
        <button class="mobile-nav-btn" onclick="prevSlide()">
            <i class="fas fa-chevron-left"></i>
        </button>
        <button class="mobile-nav-btn" onclick="toggleSidebar()">
            <i class="fas fa-list"></i>
        </button>
        <button class="mobile-nav-btn" onclick="nextSlide()">
            <i class="fas fa-chevron-right"></i>
        </button>
    </div>

    <!-- 缩放控制器和功能面板入口已移至侧边栏 -->


    <!-- JavaScript 文件 -->
    <script src="ppt-list.js"></script>
    <script src="config.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/keyboard.js"></script>
    <script src="assets/js/code-highlight.js"></script>
    <script src="assets/js/presentation-timer.js"></script>
    <script src="assets/js/sidebar-thumbnails.js"></script>
    <script src="assets/js/layout-templates.js"></script>
    <script src="assets/js/pdf-export.js"></script>

    <!-- 初始化脚本 -->
    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 检查是否首次访问
            if (!localStorage.getItem('visited')) {
                document.getElementById('welcome-overlay').style.display = 'flex';
                localStorage.setItem('visited', 'true');
            }

            // 初始化PPT
            initializePPT();

            // 确保缩放控制器被初始化
            setTimeout(() => {
                if (typeof initializeZoomController === 'function') {
                    initializeZoomController();
                }
            }, 200);
        });
    </script>
</body>
</html>