97 lines
3.1 KiB
HTML
97 lines
3.1 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>口语训练视频管理</title>
|
|
<link rel="stylesheet" href="/static/admin.css">
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div>
|
|
<h1>口语训练视频管理</h1>
|
|
<span id="service-state" class="service-state">检查服务</span>
|
|
</div>
|
|
<div class="admin-auth">
|
|
<label for="admin-key">管理密钥</label>
|
|
<input id="admin-key" type="password" autocomplete="current-password">
|
|
<button id="save-key" type="button">保存</button>
|
|
<button id="refresh" type="button">刷新</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="upload-band" aria-labelledby="upload-heading">
|
|
<div class="section-heading">
|
|
<h2 id="upload-heading">上传视频</h2>
|
|
<span id="upload-state"></span>
|
|
</div>
|
|
<form id="upload-form">
|
|
<label class="file-field">
|
|
<span>视频文件</span>
|
|
<input id="video-file" name="file" type="file" accept="video/*" required>
|
|
</label>
|
|
<label>
|
|
<span>标题（自动使用文件名）</span>
|
|
<input id="video-title" name="title" type="text" maxlength="200" placeholder="选择视频后自动填写">
|
|
</label>
|
|
<label>
|
|
<span>语言</span>
|
|
<select id="video-language" name="language">
|
|
<option value="">自动识别</option>
|
|
<option value="en">英语</option>
|
|
<option value="zh">中文</option>
|
|
</select>
|
|
</label>
|
|
<button class="primary" type="submit">上传并处理</button>
|
|
</form>
|
|
<progress id="upload-progress" value="0" max="100" hidden></progress>
|
|
</section>
|
|
|
|
<section class="video-band" aria-labelledby="videos-heading">
|
|
<div class="section-heading">
|
|
<h2 id="videos-heading">视频库</h2>
|
|
<span id="video-count">0 个视频</span>
|
|
</div>
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>标题</th>
|
|
<th>状态</th>
|
|
<th>时长</th>
|
|
<th>句子</th>
|
|
<th>大小</th>
|
|
<th>更新时间</th>
|
|
<th class="actions-column">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="video-rows"></tbody>
|
|
</table>
|
|
</div>
|
|
<div id="empty-state" class="empty-state" hidden>暂无视频</div>
|
|
</section>
|
|
</main>
|
|
|
|
<dialog id="sentence-dialog">
|
|
<div class="dialog-heading">
|
|
<div>
|
|
<h2 id="sentence-title">句子文本</h2>
|
|
<span id="sentence-meta"></span>
|
|
</div>
|
|
<button id="close-dialog" class="icon-button" type="button" aria-label="关闭">X</button>
|
|
</div>
|
|
<div class="sentence-scroll">
|
|
<table>
|
|
<thead>
|
|
<tr><th>#</th><th>时间</th><th>文本</th><th>语言</th><th>操作</th></tr>
|
|
</thead>
|
|
<tbody id="sentence-rows"></tbody>
|
|
</table>
|
|
</div>
|
|
</dialog>
|
|
|
|
<script src="/static/admin.js?v=boundary-adjust-v1" defer></script>
|
|
</body>
|
|
</html>
|