mirror of
https://github.com/ElmGates/ticiqi.git
synced 2026-01-12 09:04:55 +08:00
130 lines
6.3 KiB
HTML
130 lines
6.3 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>网页版提词器</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 控制面板 -->
|
||
<div class="control-panel" id="controlPanel">
|
||
<div class="panel-section">
|
||
<h3>文本输入</h3>
|
||
<textarea id="textInput" placeholder="请输入您的提词内容..." rows="6">欢迎使用网页版提词器！这是一个专业的提词工具，可以帮助您更流畅地进行演讲和视频录制。
|
||
|
||
点击"格式化文本"按钮开始使用，然后点击"开始"按钮启动自动滚动。您可以使用空格键暂停/继续，R键重置，F键切换全屏模式。
|
||
|
||
祝您使用愉快！</textarea>
|
||
<button id="formatText">显示文本</button>
|
||
</div>
|
||
|
||
<div class="panel-section">
|
||
<h3>滚动控制</h3>
|
||
<div class="control-group">
|
||
<label for="scrollSpeed">滚动速度:</label>
|
||
<input type="range" id="scrollSpeed" min="0.1" max="200" step="0.1" value="50">
|
||
<span id="speedValue">50</span>
|
||
</div>
|
||
<div class="control-buttons">
|
||
<button id="startScroll">开始</button>
|
||
<button id="pauseScroll">暂停</button>
|
||
<button id="resetScroll">重置</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-section">
|
||
<h3>显示设置</h3>
|
||
<div class="control-group">
|
||
<label for="fontSize">字体大小:</label>
|
||
<input type="range" id="fontSize" min="16" max="72" value="32">
|
||
<span id="fontSizeValue">32px</span>
|
||
</div>
|
||
<div class="control-group">
|
||
<label for="lineHeight">行间距：</label>
|
||
<input type="range" id="lineHeight" min="1" max="3" step="0.1" value="1.8">
|
||
<span id="lineHeightValue">1.8</span>
|
||
</div>
|
||
<div class="control-group">
|
||
<label for="textColor">文字颜色:</label>
|
||
<input type="color" id="textColor" value="#ffffff">
|
||
</div>
|
||
<div class="control-group">
|
||
<label for="bgColor">背景颜色:</label>
|
||
<input type="color" id="bgColor" value="#000000">
|
||
</div>
|
||
<div class="control-group">
|
||
<label for="mirrorText">横向镜像:</label>
|
||
<input type="checkbox" id="mirrorText">
|
||
<span style="min-width: auto; font-size: 12px;">镜像</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-section">
|
||
<div class="advanced-header" style="display: flex; justify-content: space-between; align-items: center; cursor: pointer;">
|
||
<h3>高级功能</h3>
|
||
<span id="advancedToggle" style="font-size: 18px; transition: transform 0.3s ease;">▼</span>
|
||
</div>
|
||
<div id="advancedContent" class="advanced-content" style="display: none; margin-top: 15px;">
|
||
<div class="control-group">
|
||
<label for="maxWordsPerParagraph">最大段落字数:</label>
|
||
<input type="range" id="maxWordsPerParagraph" min="30" max="200" step="10" value="50">
|
||
<span id="maxWordsValue">50</span>
|
||
</div>
|
||
<div class="control-group">
|
||
<label for="forceParagraphBreak">强制分段：</label>
|
||
<input type="checkbox" id="forceParagraphBreak" checked>
|
||
<span style="min-width: auto; font-size: 12px;">启用</span>
|
||
</div>
|
||
<div class="control-group">
|
||
<button id="formatTextBtn" style="width: 100px;">格式化文本</button>
|
||
<button id="undoFormatBtn" style="width: 100px; margin-left: 10px;">撤销格式化</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-section">
|
||
<button id="toggleFullscreen">全屏显示</button>
|
||
<button id="togglePanel">隐藏控制面板</button>
|
||
</div>
|
||
|
||
<div class="panel-section">
|
||
<h3>进度显示</h3>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="progressFill"></div>
|
||
</div>
|
||
<div class="progress-text">
|
||
<span id="currentLine">1</span> / <span id="totalLines">1</span>
|
||
</div>
|
||
<div class="control-group" style="margin-top: 10px;">
|
||
<label for="jumpToLine">跳转到:</label>
|
||
<input type="number" id="jumpToLine" min="1" max="1" value="1" style="width: 60px;">
|
||
<button id="jumpButton" style="margin: 0; padding: 6px 12px; font-size: 12px;">跳转</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 版权信息 -->
|
||
<div class="copyright-section">
|
||
<p style="margin: 0; padding: 10px 0; text-align: center; font-size: 12px; color: #666; border-top: 1px solid #eee;">
|
||
© 2025-Now SuperJia<br> All Rights Reserved<br>版本 v1.2, 发布于2025-09
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提词器显示区域 -->
|
||
<div class="teleprompter-container" id="teleprompterContainer">
|
||
<div class="teleprompter-content" id="teleprompterContent">
|
||
<div class="text-display" id="textDisplay">
|
||
<p>请输入您的提词内容，然后点击"格式化文本"按钮开始使用...</p>
|
||
</div>
|
||
</div>
|
||
<div class="reading-guide" id="readingGuide"></div>
|
||
<!-- 悬浮恢复按钮 -->
|
||
<button id="showPanelBtn" class="show-panel-btn" style="display: none;">显示面板</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html> |