Spaces:
Running
Running
Update index.html
Browse files- index.html +8 -83
index.html
CHANGED
@@ -287,7 +287,6 @@
|
|
287 |
<button class="btn glow" onclick="showTool('cardMaker')">Card Maker <i class="fas fa-paint-brush"></i></button>
|
288 |
<button class="btn glow" onclick="showTool('imageVideoToCard')">Image/Video to Card <i class="fas fa-image"></i></button>
|
289 |
<button class="btn glow" onclick="showTool('history')">History <i class="fas fa-history"></i></button>
|
290 |
-
<button class="btn glow" onclick="showTool('videoRecorder')">Video Recorder <i class="fas fa-video"></i></button>
|
291 |
</div>
|
292 |
|
293 |
<!-- Card Maker Section -->
|
@@ -304,12 +303,12 @@
|
|
304 |
<option value="'Courier New', monospace">Courier New</option>
|
305 |
</select>
|
306 |
<button class="btn" onclick="previewCardMaker()">Preview Card <i class="fas fa-eye"></i></button>
|
|
|
|
|
|
|
|
|
307 |
</div>
|
308 |
<div class="card-preview" id="cardMakerPreview"></div>
|
309 |
-
<button class="btn" onclick="saveCardToHistory('cardMakerPreview')">Save to History <i class="fas fa-save"></i></button>
|
310 |
-
<button class="btn" onclick="clearPreview('cardMakerPreview')">Delete this Card <i class="fas fa-trash"></i></button>
|
311 |
-
<button class="btn" onclick="downloadCardMakerImage()">Download Image <i class="fas fa-download"></i></button>
|
312 |
-
<button class="btn" onclick="downloadCardMakerPDF()">Download PDF <i class="fas fa-file-pdf"></i></button>
|
313 |
</div>
|
314 |
|
315 |
<!-- Image/Video to Card Section -->
|
@@ -328,24 +327,12 @@
|
|
328 |
<option value="'Courier New', monospace">Courier New</option>
|
329 |
</select>
|
330 |
<button class="btn" onclick="generateCardFromMedia()">Generate Card <i class="fas fa-magic"></i></button>
|
|
|
|
|
|
|
|
|
331 |
</div>
|
332 |
<div class="card-preview" id="generatedCardPreview"></div>
|
333 |
-
<button class="btn" onclick="saveCardToHistory('generatedCardPreview')">Save to History <i class="fas fa-save"></i></button>
|
334 |
-
<button class="btn" onclick="clearPreview('generatedCardPreview')">Delete this Card <i class="fas fa-trash"></i></button>
|
335 |
-
<button class="btn" onclick="downloadGeneratedImage()">Download Image <i class="fas fa-download"></i></button>
|
336 |
-
<button class="btn" onclick="downloadGeneratedPDF()">Download PDF <i class="fas fa-file-pdf"></i></button>
|
337 |
-
</div>
|
338 |
-
|
339 |
-
<!-- Video Recorder Section -->
|
340 |
-
<div id="videoRecorder" class="container hidden fade-in">
|
341 |
-
<h1>Video Recorder</h1>
|
342 |
-
<div class="card">
|
343 |
-
<video id="videoPreview" autoplay muted style="max-width: 100%; border-radius: 10px;"></video>
|
344 |
-
<div class="card-preview" id="recordedVideoPreview"></div>
|
345 |
-
<button class="btn" id="startRecording" onclick="startRecording()">Start Recording <i class="fas fa-circle"></i></button>
|
346 |
-
<button class="btn" id="stopRecording" onclick="stopRecording()" disabled>Stop Recording <i class="fas fa-stop"></i></button>
|
347 |
-
<button class="btn" onclick="downloadRecordedVideo()" id="downloadRecordedVideo" disabled>Download Video <i class="fas fa-download"></i></button>
|
348 |
-
</div>
|
349 |
</div>
|
350 |
|
351 |
<!-- History Section -->
|
@@ -363,11 +350,6 @@
|
|
363 |
// Массив для хранения истории карточек
|
364 |
let history = [];
|
365 |
|
366 |
-
// Переменные для записи видео
|
367 |
-
let mediaRecorder;
|
368 |
-
let recordedChunks = [];
|
369 |
-
let recordedVideoUrl;
|
370 |
-
|
371 |
// Функция для переключения между инструментами
|
372 |
function showTool(toolId) {
|
373 |
// Скрыть все инструменты
|
@@ -386,63 +368,6 @@
|
|
386 |
if (toolId === 'history') {
|
387 |
updateHistory();
|
388 |
}
|
389 |
-
|
390 |
-
// Если открыт видеорекордер, инициализировать камеру
|
391 |
-
if (toolId === 'videoRecorder') {
|
392 |
-
initVideoRecorder();
|
393 |
-
}
|
394 |
-
}
|
395 |
-
|
396 |
-
// Инициализация видеорекордера
|
397 |
-
async function initVideoRecorder() {
|
398 |
-
try {
|
399 |
-
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
|
400 |
-
const videoPreview = document.getElementById('videoPreview');
|
401 |
-
videoPreview.srcObject = stream;
|
402 |
-
|
403 |
-
mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9' });
|
404 |
-
|
405 |
-
mediaRecorder.ondataavailable = (event) => {
|
406 |
-
if (event.data.size > 0) {
|
407 |
-
recordedChunks.push(event.data);
|
408 |
-
}
|
409 |
-
};
|
410 |
-
|
411 |
-
mediaRecorder.onstop = () => {
|
412 |
-
const blob = new Blob(recordedChunks, { type: 'video/webm' });
|
413 |
-
recordedVideoUrl = URL.createObjectURL(blob);
|
414 |
-
const recordedVideoPreview = document.getElementById('recordedVideoPreview');
|
415 |
-
recordedVideoPreview.innerHTML = `<video controls src="${recordedVideoUrl}" style="max-width: 100%; border-radius: 10px;"></video>`;
|
416 |
-
document.getElementById('downloadRecordedVideo').disabled = false;
|
417 |
-
};
|
418 |
-
} catch (error) {
|
419 |
-
console.error('Error accessing media devices:', error);
|
420 |
-
alert('Error accessing camera or microphone. Please ensure you have granted the necessary permissions.');
|
421 |
-
}
|
422 |
-
}
|
423 |
-
|
424 |
-
// Начать запись
|
425 |
-
function startRecording() {
|
426 |
-
recordedChunks = [];
|
427 |
-
mediaRecorder.start();
|
428 |
-
document.getElementById('startRecording').disabled = true;
|
429 |
-
document.getElementById('stopRecording').disabled = false;
|
430 |
-
document.getElementById('downloadRecordedVideo').disabled = true;
|
431 |
-
}
|
432 |
-
|
433 |
-
// Остановить запись
|
434 |
-
function stopRecording() {
|
435 |
-
mediaRecorder.stop();
|
436 |
-
document.getElementById('startRecording').disabled = false;
|
437 |
-
document.getElementById('stopRecording').disabled = true;
|
438 |
-
}
|
439 |
-
|
440 |
-
// Скачать записанное видео
|
441 |
-
function downloadRecordedVideo() {
|
442 |
-
const link = document.createElement('a');
|
443 |
-
link.href = recordedVideoUrl;
|
444 |
-
link.download = 'recorded-video.mp4';
|
445 |
-
link.click();
|
446 |
}
|
447 |
|
448 |
// Сохранить карточку в историю
|
|
|
287 |
<button class="btn glow" onclick="showTool('cardMaker')">Card Maker <i class="fas fa-paint-brush"></i></button>
|
288 |
<button class="btn glow" onclick="showTool('imageVideoToCard')">Image/Video to Card <i class="fas fa-image"></i></button>
|
289 |
<button class="btn glow" onclick="showTool('history')">History <i class="fas fa-history"></i></button>
|
|
|
290 |
</div>
|
291 |
|
292 |
<!-- Card Maker Section -->
|
|
|
303 |
<option value="'Courier New', monospace">Courier New</option>
|
304 |
</select>
|
305 |
<button class="btn" onclick="previewCardMaker()">Preview Card <i class="fas fa-eye"></i></button>
|
306 |
+
<button class="btn" onclick="saveCardToHistory('cardMakerPreview')">Save to History <i class="fas fa-save"></i></button>
|
307 |
+
<button class="btn" onclick="clearPreview('cardMakerPreview')">Delete this Card <i class="fas fa-trash"></i></button>
|
308 |
+
<button class="btn" onclick="downloadCardMakerImage()">Download Image <i class="fas fa-download"></i></button>
|
309 |
+
<button class="btn" onclick="downloadCardMakerPDF()">Download PDF <i class="fas fa-file-pdf"></i></button>
|
310 |
</div>
|
311 |
<div class="card-preview" id="cardMakerPreview"></div>
|
|
|
|
|
|
|
|
|
312 |
</div>
|
313 |
|
314 |
<!-- Image/Video to Card Section -->
|
|
|
327 |
<option value="'Courier New', monospace">Courier New</option>
|
328 |
</select>
|
329 |
<button class="btn" onclick="generateCardFromMedia()">Generate Card <i class="fas fa-magic"></i></button>
|
330 |
+
<button class="btn" onclick="saveCardToHistory('generatedCardPreview')">Save to History <i class="fas fa-save"></i></button>
|
331 |
+
<button class="btn" onclick="clearPreview('generatedCardPreview')">Delete this Card <i class="fas fa-trash"></i></button>
|
332 |
+
<button class="btn" onclick="downloadGeneratedImage()">Download Image <i class="fas fa-download"></i></button>
|
333 |
+
<button class="btn" onclick="downloadGeneratedPDF()">Download PDF <i class="fas fa-file-pdf"></i></button>
|
334 |
</div>
|
335 |
<div class="card-preview" id="generatedCardPreview"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
336 |
</div>
|
337 |
|
338 |
<!-- History Section -->
|
|
|
350 |
// Массив для хранения истории карточек
|
351 |
let history = [];
|
352 |
|
|
|
|
|
|
|
|
|
|
|
353 |
// Функция для переключения между инструментами
|
354 |
function showTool(toolId) {
|
355 |
// Скрыть все инструменты
|
|
|
368 |
if (toolId === 'history') {
|
369 |
updateHistory();
|
370 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
371 |
}
|
372 |
|
373 |
// Сохранить карточку в историю
|