2026-05-29 09:17:08 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="ru">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Транскрибация совещаний</title>
|
2026-05-29 09:27:40 +00:00
|
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎙️</text></svg>">
|
2026-05-29 09:17:08 +00:00
|
|
|
<link rel="stylesheet" href="/static/styles.css">
|
|
|
|
|
<!-- Markdown renderer -->
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<header>
|
|
|
|
|
<h1>🎙️ Транскрибация совещаний</h1>
|
|
|
|
|
<p class="subtitle">Загрузите аудио или видео файл для получения протокола</p>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<main>
|
|
|
|
|
<!-- Upload Section -->
|
|
|
|
|
<section class="upload-section" id="uploadSection">
|
|
|
|
|
<div class="drop-zone" id="dropZone">
|
|
|
|
|
<div class="drop-zone-content">
|
|
|
|
|
<svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
|
|
|
|
<polyline points="17 8 12 3 7 8"/>
|
|
|
|
|
<line x1="12" y1="3" x2="12" y2="15"/>
|
|
|
|
|
</svg>
|
|
|
|
|
<p>Перетащите файлы сюда или <span class="browse-link">выберите</span></p>
|
2026-05-29 15:56:13 +00:00
|
|
|
<p class="hint">Поддерживаются: MP4, WEBM, AVI, MKV, MOV, WAV, MP3, M4A, OGG, FLAC</p>
|
2026-05-29 09:17:08 +00:00
|
|
|
</div>
|
2026-05-29 15:56:13 +00:00
|
|
|
<input type="file" id="fileInput" multiple accept=".mp4,.webm,.avi,.mkv,.mov,.wav,.mp3,.m4a,.ogg,.flac" hidden>
|
2026-05-29 09:17:08 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Queue Status -->
|
|
|
|
|
<div class="queue-status" id="queueStatus">
|
|
|
|
|
<h3>Очередь обработки</h3>
|
|
|
|
|
<div class="tasks-list" id="tasksList">
|
|
|
|
|
<p class="empty-state">Нет активных задач</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Results Section -->
|
|
|
|
|
<section class="results-section">
|
|
|
|
|
<div class="panel-left">
|
|
|
|
|
<h2>📁 Файлы</h2>
|
|
|
|
|
<div class="file-tree" id="fileTree">
|
|
|
|
|
<p class="empty-state">Нет обработанных файлов</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="panel-right">
|
|
|
|
|
<h2>📝 Просмотр</h2>
|
|
|
|
|
<div class="viewer" id="viewer">
|
|
|
|
|
<div class="empty-viewer">
|
|
|
|
|
<p>Выберите файл для просмотра</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Toast notifications -->
|
|
|
|
|
<div class="toast-container" id="toastContainer"></div>
|
|
|
|
|
|
|
|
|
|
<script src="/static/app.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
