mirror of
https://github.com/ElmGates/ticiqi.git
synced 2026-01-12 00:34:56 +08:00
169 lines
8.8 KiB
HTML
169 lines
8.8 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 class="control-buttons" style="margin-top: 10px;">
|
||
<button id="prevLineBtn">上一行</button>
|
||
<button id="nextLineBtn">下一行</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 class="remote-control-section" style="margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px;">
|
||
<h4 style="margin-bottom: 10px;">远程协作 (beta)</h4>
|
||
<div id="connectionStatus" style="font-size: 12px; color: #666; margin-bottom: 10px;">状态: 未连接</div>
|
||
|
||
<div class="control-group">
|
||
<button id="createRoomBtn" style="width: 100%;">创建房间</button>
|
||
</div>
|
||
|
||
<div id="roomInfo" style="display: none; margin-top: 10px; background: #f5f5f5; padding: 10px; border-radius: 4px;">
|
||
<div style="font-size: 12px; margin-bottom: 5px;">房间 ID:</div>
|
||
<div style="display: flex; align-items: center; justify-content: space-between;">
|
||
<span id="roomIdDisplay" style="font-weight: bold; font-size: 18px; color: #007bff;"></span>
|
||
<button id="copyRoomIdBtn" style="padding: 2px 8px; font-size: 12px;">复制</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group" style="margin-top: 15px;">
|
||
<input type="text" id="joinRoomInput" placeholder="输入房间ID" style="flex: 1; padding: 8px;">
|
||
<button id="joinRoomBtn" style="width: 80px; margin-left: 10px;">加入</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-section">
|
||
<button id="toggleFullscreen">全屏显示</button>
|
||
<button id="togglePanel">隐藏控制面板</button>
|
||
<button onclick="window.location.href='pdf/index.html'" style="margin-top: 10px; background-color: #6c757d;">前往 PDF 提词器</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.5, 发布于2025-12
|
||
</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>
|
||
|
||
<!-- 手机端提示框 -->
|
||
<div id="mobileAlert" class="modal-overlay" style="display: none;">
|
||
<div class="modal-content">
|
||
<h3>温馨提示</h3>
|
||
<p>手机屏幕较小，可能不能获得最佳体验。</p>
|
||
<p style="font-size: 12px; color: #666; margin-top: 5px;">建议使用平板或电脑访问，或尝试横屏使用。</p>
|
||
<button id="closeMobileAlert">我知道了</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
|
||
<script src="https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js"></script>
|
||
<script src="script.js" defer></script>
|
||
</body>
|
||
</html> |