mirror of
https://github.com/ElmGates/ticiqi.git
synced 2026-01-13 01:24:55 +08:00
88 lines
3.9 KiB
HTML
88 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>PDF提词器</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>PDF提词器</h1>
|
||
<p class="subtitle">上传PDF文件，自动生成镜像提词效果</p>
|
||
</header>
|
||
|
||
<div class="upload-section" id="uploadSection">
|
||
<div class="upload-area" id="uploadArea">
|
||
<svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path>
|
||
<polyline points="7 10 12 15 17 10"></polyline>
|
||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||
</svg>
|
||
<p class="upload-text">点击或拖拽PDF文件到此处</p>
|
||
<input type="file" id="fileInput" accept=".pdf" hidden>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="controls" id="controls" style="display: none;">
|
||
<div class="control-group">
|
||
<label for="speedSlider">滚动速度：</label>
|
||
<input type="range" id="speedSlider" min="0.5" max="5" value="2" step="0.5">
|
||
<span id="speedValue">2</span>
|
||
</div>
|
||
<div class="control-group">
|
||
<button id="fullscreenBtn" class="btn secondary">
|
||
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
|
||
</svg>
|
||
全屏
|
||
</button>
|
||
<button id="playBtn" class="btn primary">开始</button>
|
||
<button id="pauseBtn" class="btn secondary" disabled>暂停</button>
|
||
<button id="resetBtn" class="btn secondary">重置</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="display-area" id="displayArea" style="display: none;">
|
||
<div class="teleprompter-container">
|
||
<div class="scroll-indicator">上下滚动查看内容</div>
|
||
<div class="teleprompter-content" id="teleprompterContent">
|
||
<!-- PDF页面将在这里显示 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="loading" id="loading" style="display: none;">
|
||
<div class="spinner"></div>
|
||
<p>正在处理PDF文件...</p>
|
||
</div>
|
||
|
||
<div class="floating-controls" id="floatingControls" style="display: none;">
|
||
<button id="floatPlayBtn" class="float-btn" title="开始/暂停">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<polygon points="5,3 19,12 5,21"/>
|
||
</svg>
|
||
</button>
|
||
<button id="floatResetBtn" class="float-btn" title="重置">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<polyline points="1,4 1,10 7,10"/>
|
||
<path d="M3.51,15a9,9 0 1,0 2.13,-9.36L1,10"/>
|
||
</svg>
|
||
</button>
|
||
<button id="floatExitBtn" class="float-btn" title="退出全屏">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
|
||
</svg>
|
||
</button>
|
||
<div class="float-speed-control">
|
||
<input type="range" id="floatSpeedSlider" min="0.5" max="5" value="2" step="0.5">
|
||
<span id="floatSpeedValue">2</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html> |