Hugging Face's logo

Spaces:
CatPtain
/
web_ppt
Paused

App Files Community
CatPtain commited on
Commit
dc9487f
·
verified ·
1 Parent(s): a2a8341

Upload public.js

Browse files
Files changed (1) hide show
  1. backend/src/routes/public.js +3 -250
backend/src/routes/public.js CHANGED
@@ -89,60 +89,16 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
89
  height: 100%;
90
  overflow: hidden;
91
  font-family: 'Microsoft YaHei', Arial, sans-serif;
92
- background-color: #1a1a1a;
93
  }
94
 
95
- .fullscreen-container {
96
  width: 100vw;
97
  height: 100vh;
98
- display: flex;
99
- justify-content: center;
100
- align-items: center;
101
- background-color: #1a1a1a;
102
- position: relative;
103
- }
104
-
105
- .slide-container {
106
- width: 100%;
107
- height: 100%;
108
- max-width: 100vw;
109
- max-height: 100vh;
110
  background-color: ${slide.background?.color || theme.backgroundColor || '#ffffff'};
111
  position: relative;
112
- transform-origin: center center;
113
- box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
114
  overflow: hidden;
115
  }
116
 
117
- /* 16:9 宽屏比例优化 */
118
- @media (min-aspect-ratio: 16/9) {
119
- .slide-container {
120
- width: calc(100vh * 16/9);
121
- height: 100vh;
122
- }
123
- }
124
-
125
- @media (max-aspect-ratio: 16/9) {
126
- .slide-container {
127
- width: 100vw;
128
- height: calc(100vw * 9/16);
129
- }
130
- }
131
-
132
- /* 移动设备适配 */
133
- @media (max-width: 768px) {
134
- .slide-container {
135
- width: 100vw;
136
- height: 100vh;
137
- max-width: none;
138
- max-height: none;
139
- }
140
-
141
- .fullscreen-container {
142
- align-items: flex-start;
143
- }
144
- }
145
-
146
  ${slide.background?.type === 'image' ? `
147
  .slide-container::before {
148
  content: '';
@@ -158,215 +114,12 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
158
  z-index: 0;
159
  }
160
  ` : ''}
161
-
162
- /* 控制栏样式 */
163
- .control-bar {
164
- position: fixed;
165
- top: 20px;
166
- right: 20px;
167
- display: flex;
168
- gap: 10px;
169
- z-index: 1000;
170
- opacity: 0.7;
171
- transition: opacity 0.3s ease;
172
- }
173
-
174
- .control-bar:hover {
175
- opacity: 1;
176
- }
177
-
178
- .control-btn {
179
- background: rgba(0, 0, 0, 0.8);
180
- color: white;
181
- border: none;
182
- padding: 10px 15px;
183
- border-radius: 5px;
184
- cursor: pointer;
185
- font-size: 14px;
186
- transition: background 0.3s ease;
187
- }
188
-
189
- .control-btn:hover {
190
- background: rgba(0, 0, 0, 0.9);
191
- }
192
-
193
- /* 全屏时隐藏滚动条 */
194
- .slide-container::-webkit-scrollbar {
195
- display: none;
196
- }
197
-
198
- /* 页面信息显示 */
199
- .slide-info {
200
- position: fixed;
201
- bottom: 20px;
202
- left: 20px;
203
- background: rgba(0, 0, 0, 0.8);
204
- color: white;
205
- padding: 10px 15px;
206
- border-radius: 5px;
207
- font-size: 14px;
208
- z-index: 1000;
209
- opacity: 0.7;
210
- transition: opacity 0.3s ease;
211
- }
212
-
213
- .slide-info:hover {
214
- opacity: 1;
215
- }
216
  </style>
217
  </head>
218
  <body>
219
- <div class="fullscreen-container">
220
- <div class="slide-container">
221
- ${renderElements(slide.elements)}
222
- </div>
223
  </div>
224
-
225
- <div class="control-bar">
226
- <button class="control-btn" onclick="toggleFullscreen()">
227
- <span id="fullscreen-text">全屏</span>
228
- </button>
229
- <button class="control-btn" onclick="fitToWindow()">适应窗口</button>
230
- <button class="control-btn" onclick="resetZoom()">重置大小</button>
231
- </div>
232
-
233
- <div class="slide-info">
234
- <div>${title}</div>
235
- <div>第 ${slideIndex + 1} 页，共 ${pptData.slides.length} 页</div>
236
- </div>
237
-
238
- <script>
239
- let isFullscreen = false;
240
- let currentScale = 1;
241
-
242
- // 全屏切换
243
- function toggleFullscreen() {
244
- const container = document.querySelector('.fullscreen-container');
245
- const text = document.getElementById('fullscreen-text');
246
-
247
- if (!isFullscreen) {
248
- if (container.requestFullscreen) {
249
- container.requestFullscreen();
250
- } else if (container.webkitRequestFullscreen) {
251
- container.webkitRequestFullscreen();
252
- } else if (container.msRequestFullscreen) {
253
- container.msRequestFullscreen();
254
- }
255
- } else {
256
- if (document.exitFullscreen) {
257
- document.exitFullscreen();
258
- } else if (document.webkitExitFullscreen) {
259
- document.webkitExitFullscreen();
260
- } else if (document.msExitFullscreen) {
261
- document.msExitFullscreen();
262
- }
263
- }
264
- }
265
-
266
- // 监听全屏状态变化
267
- document.addEventListener('fullscreenchange', updateFullscreenStatus);
268
- document.addEventListener('webkitfullscreenchange', updateFullscreenStatus);
269
- document.addEventListener('msfullscreenchange', updateFullscreenStatus);
270
-
271
- function updateFullscreenStatus() {
272
- isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
273
- const text = document.getElementById('fullscreen-text');
274
- text.textContent = isFullscreen ? '退出全屏' : '全屏';
275
- }
276
-
277
- // 适应窗口大小
278
- function fitToWindow() {
279
- const slideContainer = document.querySelector('.slide-container');
280
- slideContainer.style.transform = 'scale(1)';
281
- slideContainer.style.width = '100%';
282
- slideContainer.style.height = '100%';
283
- currentScale = 1;
284
- }
285
-
286
- // 重置缩放
287
- function resetZoom() {
288
- const slideContainer = document.querySelector('.slide-container');
289
- slideContainer.style.transform = 'scale(1)';
290
- slideContainer.style.width = '';
291
- slideContainer.style.height = '';
292
- currentScale = 1;
293
- }
294
-
295
- // 键盘快捷键
296
- document.addEventListener('keydown', function(e) {
297
- switch(e.key) {
298
- case 'F11':
299
- e.preventDefault();
300
- toggleFullscreen();
301
- break;
302
- case 'Escape':
303
- if (isFullscreen) {
304
- toggleFullscreen();
305
- }
306
- break;
307
- case '+':
308
- case '=':
309
- e.preventDefault();
310
- currentScale = Math.min(currentScale * 1.1, 3);
311
- updateScale();
312
- break;
313
- case '-':
314
- e.preventDefault();
315
- currentScale = Math.max(currentScale * 0.9, 0.5);
316
- updateScale();
317
- break;
318
- case '0':
319
- e.preventDefault();
320
- resetZoom();
321
- break;
322
- }
323
- });
324
-
325
- function updateScale() {
326
- const slideContainer = document.querySelector('.slide-container');
327
- slideContainer.style.transform = \`scale(\${currentScale})\`;
328
- }
329
-
330
- // 鼠标滚轮缩放
331
- document.addEventListener('wheel', function(e) {
332
- if (e.ctrlKey) {
333
- e.preventDefault();
334
- if (e.deltaY > 0) {
335
- currentScale = Math.max(currentScale * 0.9, 0.5);
336
- } else {
337
- currentScale = Math.min(currentScale * 1.1, 3);
338
- }
339
- updateScale();
340
- }
341
- });
342
-
343
- // 自动隐藏控制栏
344
- let hideControlsTimeout;
345
-
346
- function showControls() {
347
- const controlBar = document.querySelector('.control-bar');
348
- const slideInfo = document.querySelector('.slide-info');
349
- controlBar.style.opacity = '0.7';
350
- slideInfo.style.opacity = '0.7';
351
-
352
- clearTimeout(hideControlsTimeout);
353
- hideControlsTimeout = setTimeout(() => {
354
- if (isFullscreen) {
355
- controlBar.style.opacity = '0';
356
- slideInfo.style.opacity = '0';
357
- }
358
- }, 3000);
359
- }
360
-
361
- document.addEventListener('mousemove', showControls);
362
- document.addEventListener('keydown', showControls);
363
-
364
- // 页面加载完成后的初始化
365
- window.addEventListener('load', function() {
366
- console.log('PPT页面加载完成');
367
- fitToWindow();
368
- });
369
- </script>
370
  </body>
371
  </html>
372
  `;
 
89
  height: 100%;
90
  overflow: hidden;
91
  font-family: 'Microsoft YaHei', Arial, sans-serif;
 
92
  }
93
 
94
+ .slide-container {
95
  width: 100vw;
96
  height: 100vh;
 
 
 
 
 
 
 
 
 
 
 
 
97
  background-color: ${slide.background?.color || theme.backgroundColor || '#ffffff'};
98
  position: relative;
 
 
99
  overflow: hidden;
100
  }
101
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
102
  ${slide.background?.type === 'image' ? `
103
  .slide-container::before {
104
  content: '';
 
114
  z-index: 0;
115
  }
116
  ` : ''}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
117
  </style>
118
  </head>
119
  <body>
120
+ <div class="slide-container">
121
+ ${renderElements(slide.elements)}
 
 
122
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
123
  </body>
124
  </html>
125
  `;