mirror of
https://github.com/ElmGates/ticiqi.git
synced 2026-01-12 00:34:56 +08:00
upload
This commit is contained in:
ElmGates
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.DS_Store
|
||||
169
index.html
Normal file
169
index.html
Normal file
@@ -0,0 +1,169 @@
|
||||
<!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>
|
||||
88
pdf/index.html
Normal file
88
pdf/index.html
Normal file
@@ -0,0 +1,88 @@
|
||||
<!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>
|
||||
408
pdf/script.js
Normal file
408
pdf/script.js
Normal file
@@ -0,0 +1,408 @@
|
||||
class PDFTeleprompter {
|
||||
constructor() {
|
||||
this.pdfDoc = null;
|
||||
this.pages = [];
|
||||
this.isPlaying = false;
|
||||
this.animationId = null;
|
||||
this.scrollPosition = 0;
|
||||
this.scrollSpeed = 2;
|
||||
|
||||
this.initializeElements();
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
initializeElements() {
|
||||
this.uploadArea = document.getElementById('uploadArea');
|
||||
this.fileInput = document.getElementById('fileInput');
|
||||
this.controls = document.getElementById('controls');
|
||||
this.displayArea = document.getElementById('displayArea');
|
||||
this.teleprompterContent = document.getElementById('teleprompterContent');
|
||||
this.loading = document.getElementById('loading');
|
||||
this.speedSlider = document.getElementById('speedSlider');
|
||||
this.speedValue = document.getElementById('speedValue');
|
||||
this.playBtn = document.getElementById('playBtn');
|
||||
this.pauseBtn = document.getElementById('pauseBtn');
|
||||
this.resetBtn = document.getElementById('resetBtn');
|
||||
this.fullscreenBtn = document.getElementById('fullscreenBtn');
|
||||
|
||||
// 悬浮控制面板元素
|
||||
this.floatingControls = document.getElementById('floatingControls');
|
||||
this.floatPlayBtn = document.getElementById('floatPlayBtn');
|
||||
this.floatResetBtn = document.getElementById('floatResetBtn');
|
||||
this.floatExitBtn = document.getElementById('floatExitBtn');
|
||||
this.floatSpeedSlider = document.getElementById('floatSpeedSlider');
|
||||
this.floatSpeedValue = document.getElementById('floatSpeedValue');
|
||||
|
||||
// 滚动容器
|
||||
this.teleprompterContainer = document.querySelector('.teleprompter-container');
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
this.uploadArea.addEventListener('click', () => this.fileInput.click());
|
||||
this.fileInput.addEventListener('change', (e) => this.handleFileUpload(e));
|
||||
this.uploadArea.addEventListener('dragover', (e) => this.handleDragOver(e));
|
||||
this.uploadArea.addEventListener('drop', (e) => this.handleDrop(e));
|
||||
|
||||
this.speedSlider.addEventListener('input', (e) => {
|
||||
this.scrollSpeed = parseFloat(e.target.value);
|
||||
this.speedValue.textContent = this.scrollSpeed;
|
||||
if (this.floatSpeedSlider) {
|
||||
this.floatSpeedSlider.value = this.scrollSpeed;
|
||||
this.floatSpeedValue.textContent = this.scrollSpeed;
|
||||
}
|
||||
});
|
||||
|
||||
this.playBtn.addEventListener('click', () => this.play());
|
||||
this.pauseBtn.addEventListener('click', () => this.pause());
|
||||
this.resetBtn.addEventListener('click', () => this.reset());
|
||||
this.fullscreenBtn.addEventListener('click', () => this.toggleFullscreen());
|
||||
|
||||
// 悬浮控制面板事件
|
||||
if (this.floatPlayBtn) {
|
||||
this.floatPlayBtn.addEventListener('click', () => this.togglePlayPause());
|
||||
this.floatResetBtn.addEventListener('click', () => this.reset());
|
||||
this.floatExitBtn.addEventListener('click', () => this.exitFullscreen());
|
||||
|
||||
this.floatSpeedSlider.addEventListener('input', (e) => {
|
||||
this.scrollSpeed = parseFloat(e.target.value);
|
||||
this.floatSpeedValue.textContent = this.scrollSpeed;
|
||||
this.speedSlider.value = this.scrollSpeed;
|
||||
this.speedValue.textContent = this.scrollSpeed;
|
||||
});
|
||||
}
|
||||
|
||||
// 全屏状态变化监听
|
||||
['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'].forEach(event => {
|
||||
document.addEventListener(event, () => this.handleFullscreenChange());
|
||||
});
|
||||
|
||||
// 手动滚动监听
|
||||
this.teleprompterContainer.addEventListener('scroll', () => {
|
||||
if (!this.isPlaying) {
|
||||
this.scrollPosition = this.teleprompterContainer.scrollTop;
|
||||
}
|
||||
});
|
||||
|
||||
// 防止滚动时自动播放
|
||||
this.teleprompterContainer.addEventListener('mousedown', () => {
|
||||
if (this.isPlaying) {
|
||||
this.pause();
|
||||
}
|
||||
});
|
||||
|
||||
// 键盘快捷键
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === ' ' || e.key === 'Spacebar') {
|
||||
e.preventDefault();
|
||||
this.togglePlayPause();
|
||||
} else if (e.key === 'f' || e.key === 'F') {
|
||||
e.preventDefault();
|
||||
this.toggleFullscreen();
|
||||
} else if (e.key === 'Escape') {
|
||||
if (document.fullscreenElement) {
|
||||
this.exitFullscreen();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 触摸手势支持
|
||||
let touchStartY = 0;
|
||||
this.teleprompterContainer.addEventListener('touchstart', (e) => {
|
||||
touchStartY = e.touches[0].clientY;
|
||||
if (this.isPlaying) {
|
||||
this.pause();
|
||||
}
|
||||
});
|
||||
|
||||
this.teleprompterContainer.addEventListener('touchmove', (e) => {
|
||||
e.preventDefault();
|
||||
const touchY = e.touches[0].clientY;
|
||||
const deltaY = touchStartY - touchY;
|
||||
this.teleprompterContainer.scrollTop += deltaY;
|
||||
touchStartY = touchY;
|
||||
this.scrollPosition = this.teleprompterContainer.scrollTop;
|
||||
});
|
||||
}
|
||||
|
||||
async handleFileUpload(event) {
|
||||
const file = event.target.files[0];
|
||||
if (file && file.type === 'application/pdf') {
|
||||
await this.processPDF(file);
|
||||
}
|
||||
}
|
||||
|
||||
async processPDF(file) {
|
||||
this.showLoading(true);
|
||||
|
||||
try {
|
||||
const arrayBuffer = await file.arrayBuffer();
|
||||
this.pdfDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
|
||||
|
||||
await this.renderAllPages();
|
||||
this.showControls();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error processing PDF:', error);
|
||||
alert('处理PDF文件时出错，请重试');
|
||||
} finally {
|
||||
this.showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async renderAllPages() {
|
||||
this.pages = [];
|
||||
this.teleprompterContent.innerHTML = '';
|
||||
|
||||
const totalPages = this.pdfDoc.numPages;
|
||||
|
||||
for (let pageNum = 1; pageNum <= totalPages; pageNum++) {
|
||||
const page = await this.pdfDoc.getPage(pageNum);
|
||||
const canvas = await this.renderPageToCanvas(page);
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.src = canvas.toDataURL('image/png');
|
||||
img.style.width = '100%';
|
||||
img.style.height = 'auto';
|
||||
img.style.marginBottom = '20px';
|
||||
|
||||
this.teleprompterContent.appendChild(img);
|
||||
this.pages.push(img);
|
||||
}
|
||||
}
|
||||
|
||||
async renderPageToCanvas(page) {
|
||||
const viewport = page.getViewport({ scale: 1.5 });
|
||||
const canvas = document.createElement('canvas');
|
||||
const context = canvas.getContext('2d');
|
||||
|
||||
canvas.width = viewport.width;
|
||||
canvas.height = viewport.height;
|
||||
|
||||
const renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: viewport
|
||||
};
|
||||
|
||||
await page.render(renderContext).promise;
|
||||
return canvas;
|
||||
}
|
||||
|
||||
showLoading(show) {
|
||||
this.loading.style.display = show ? 'block' : 'none';
|
||||
}
|
||||
|
||||
showControls() {
|
||||
this.uploadArea.parentElement.style.display = 'none';
|
||||
this.controls.style.display = 'flex';
|
||||
this.displayArea.style.display = 'block';
|
||||
}
|
||||
|
||||
play() {
|
||||
if (!this.isPlaying) {
|
||||
this.isPlaying = true;
|
||||
this.playBtn.disabled = true;
|
||||
this.pauseBtn.disabled = false;
|
||||
this.animateScroll();
|
||||
}
|
||||
}
|
||||
|
||||
pause() {
|
||||
this.isPlaying = false;
|
||||
this.playBtn.disabled = false;
|
||||
this.pauseBtn.disabled = true;
|
||||
if (this.animationId) {
|
||||
cancelAnimationFrame(this.animationId);
|
||||
}
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.pause();
|
||||
this.scrollPosition = 0;
|
||||
this.teleprompterContainer.scrollTop = 0;
|
||||
}
|
||||
|
||||
animateScroll() {
|
||||
if (!this.isPlaying) return;
|
||||
|
||||
const contentHeight = this.teleprompterContent.scrollHeight;
|
||||
const containerHeight = this.teleprompterContainer.offsetHeight;
|
||||
|
||||
this.scrollPosition += this.scrollSpeed;
|
||||
|
||||
if (this.scrollPosition > contentHeight) {
|
||||
this.scrollPosition = 0;
|
||||
}
|
||||
|
||||
this.teleprompterContainer.scrollTop = this.scrollPosition;
|
||||
|
||||
this.animationId = requestAnimationFrame(() => this.animateScroll());
|
||||
}
|
||||
|
||||
toggleFullscreen() {
|
||||
if (!document.fullscreenElement) {
|
||||
this.enterFullscreen();
|
||||
} else {
|
||||
this.exitFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
enterFullscreen() {
|
||||
const element = this.displayArea;
|
||||
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen();
|
||||
} else if (element.webkitRequestFullscreen) {
|
||||
element.webkitRequestFullscreen();
|
||||
} else if (element.msRequestFullscreen) {
|
||||
element.msRequestFullscreen();
|
||||
} else if (element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen();
|
||||
}
|
||||
}
|
||||
|
||||
exitFullscreen() {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
}
|
||||
}
|
||||
|
||||
handleFullscreenChange() {
|
||||
const isFullscreen = !!(
|
||||
document.fullscreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.msFullscreenElement
|
||||
);
|
||||
|
||||
if (isFullscreen) {
|
||||
this.displayArea.classList.add('fullscreen');
|
||||
document.body.classList.add('fullscreen');
|
||||
this.floatingControls.style.display = 'flex';
|
||||
this.fullscreenBtn.innerHTML = `
|
||||
<svg class="btn-icon" 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>
|
||||
退出全屏
|
||||
`;
|
||||
} else {
|
||||
this.displayArea.classList.remove('fullscreen');
|
||||
document.body.classList.remove('fullscreen');
|
||||
this.floatingControls.style.display = 'none';
|
||||
this.fullscreenBtn.innerHTML = `
|
||||
<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>
|
||||
全屏
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
togglePlayPause() {
|
||||
if (this.isPlaying) {
|
||||
this.pause();
|
||||
this.updatePlayButtons(false);
|
||||
} else {
|
||||
this.play();
|
||||
this.updatePlayButtons(true);
|
||||
}
|
||||
}
|
||||
|
||||
updatePlayButtons(isPlaying) {
|
||||
const playIcon = `
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<polygon points="5,3 19,12 5,21"/>
|
||||
</svg>
|
||||
`;
|
||||
const pauseIcon = `
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<rect x="6" y="4" width="4" height="16"/>
|
||||
<rect x="14" y="4" width="4" height="16"/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
if (isPlaying) {
|
||||
this.floatPlayBtn.innerHTML = pauseIcon;
|
||||
} else {
|
||||
this.floatPlayBtn.innerHTML = playIcon;
|
||||
}
|
||||
}
|
||||
|
||||
play() {
|
||||
if (!this.isPlaying) {
|
||||
this.isPlaying = true;
|
||||
this.playBtn.disabled = true;
|
||||
this.pauseBtn.disabled = false;
|
||||
this.updatePlayButtons(true);
|
||||
this.animateScroll();
|
||||
}
|
||||
}
|
||||
|
||||
pause() {
|
||||
this.isPlaying = false;
|
||||
this.playBtn.disabled = false;
|
||||
this.pauseBtn.disabled = true;
|
||||
this.updatePlayButtons(false);
|
||||
if (this.animationId) {
|
||||
cancelAnimationFrame(this.animationId);
|
||||
}
|
||||
}
|
||||
|
||||
// 键盘快捷键
|
||||
setupKeyboardShortcuts() {
|
||||
document.addEventListener('keydown', (e) => {
|
||||
switch(e.code) {
|
||||
case 'Space':
|
||||
e.preventDefault();
|
||||
if (this.isPlaying) {
|
||||
this.pause();
|
||||
} else {
|
||||
this.play();
|
||||
}
|
||||
break;
|
||||
case 'KeyR':
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
e.preventDefault();
|
||||
this.reset();
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化应用
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const teleprompter = new PDFTeleprompter();
|
||||
teleprompter.setupKeyboardShortcuts();
|
||||
});
|
||||
|
||||
// 添加触摸手势支持
|
||||
let touchStartY = 0;
|
||||
document.addEventListener('touchstart', (e) => {
|
||||
touchStartY = e.touches[0].clientY;
|
||||
});
|
||||
|
||||
document.addEventListener('touchend', (e) => {
|
||||
const touchEndY = e.changedTouches[0].clientY;
|
||||
const diff = touchStartY - touchEndY;
|
||||
|
||||
if (Math.abs(diff) > 50) {
|
||||
// 滑动控制滚动速度
|
||||
const speedSlider = document.getElementById('speedSlider');
|
||||
const currentSpeed = parseInt(speedSlider.value);
|
||||
|
||||
if (diff > 0 && currentSpeed < 10) {
|
||||
speedSlider.value = currentSpeed + 1;
|
||||
} else if (diff < 0 && currentSpeed > 1) {
|
||||
speedSlider.value = currentSpeed - 1;
|
||||
}
|
||||
|
||||
speedSlider.dispatchEvent(new Event('input'));
|
||||
}
|
||||
});
|
||||
407
pdf/styles.css
Normal file
407
pdf/styles.css
Normal file
@@ -0,0 +1,407 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.upload-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
border: 2px dashed rgba(255, 255, 255, 0.5);
|
||||
border-radius: 15px;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.upload-area:hover {
|
||||
border-color: rgba(255, 255, 255, 0.8);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.upload-area.dragover {
|
||||
border-color: white;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
color: white;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.controls {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 150px;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: #ddd;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: #667eea;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#speedValue {
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.primary:hover {
|
||||
background: #5a6fd8;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn.secondary {
|
||||
background: #f1f3f4;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn.secondary:hover:not(:disabled) {
|
||||
background: #e8eaed;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.display-area {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
margin: 20px;
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
||||
.teleprompter-container {
|
||||
height: 500px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
background: #000;
|
||||
cursor: grab;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #666 #222;
|
||||
}
|
||||
|
||||
.teleprompter-container::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.teleprompter-container::-webkit-scrollbar-track {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.teleprompter-container::-webkit-scrollbar-thumb {
|
||||
background: #666;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.teleprompter-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #888;
|
||||
}
|
||||
|
||||
.teleprompter-container:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.teleprompter-content {
|
||||
padding: 20px;
|
||||
transform: scaleX(-1);
|
||||
transition: transform 0.3s ease;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.teleprompter-content img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 全屏模式无边框 */
|
||||
.display-area.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 999;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.display-area.fullscreen .teleprompter-container {
|
||||
height: 100vh;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.display-area.fullscreen .teleprompter-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.display-area.fullscreen .teleprompter-content img {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 滚动提示 */
|
||||
.scroll-indicator {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.teleprompter-container:hover .scroll-indicator {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: white;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||
border-top: 4px solid white;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.floating-controls {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.floating-controls:hover {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.float-btn {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.float-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.float-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.float-speed-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.float-speed-control input[type="range"] {
|
||||
width: 100px;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.float-speed-control input[type="range"]::-webkit-slider-thumb {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#floatSpeedValue {
|
||||
color: white;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
min-width: 25px;
|
||||
}
|
||||
|
||||
/* 全屏模式样式 */
|
||||
.display-area.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 999;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.display-area.fullscreen .teleprompter-container {
|
||||
height: 100vh;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* 全屏时隐藏原控制面板 */
|
||||
body.fullscreen .controls {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.teleprompter-container {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
573
styles.css
Normal file
573
styles.css
Normal file
@@ -0,0 +1,573 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 控制面板样式 */
|
||||
.control-panel {
|
||||
width: 320px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
transition: transform 0.3s ease;
|
||||
box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.control-panel.hidden {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.control-panel.hidden + .teleprompter-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.teleprompter-container {
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
.panel-section {
|
||||
margin-bottom: 25px;
|
||||
padding: 15px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 版权信息样式 */
|
||||
.copyright-section {
|
||||
margin-top: 20px;
|
||||
padding: 15px 0 5px 0;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 8px;
|
||||
border-top: 2px solid rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.copyright-section p {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.panel-section h3 {
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #667eea;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/* 文本输入区域 */
|
||||
#textInput {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #e1e5e9;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
#textInput:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
/* 控制组 */
|
||||
.control-group {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: nowrap; /* 防止换行 */
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
min-width: 60px;
|
||||
font-size: 13px;
|
||||
flex-shrink: 0; /* 防止标签收缩 */
|
||||
}
|
||||
|
||||
.control-group input[type="range"] {
|
||||
flex: 1;
|
||||
min-width: 0; /* 允许滑块收缩 */
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: #ddd;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.control-group input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: #667eea;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.control-group input[type="range"]::-webkit-slider-thumb:hover {
|
||||
background: #5a6fd8;
|
||||
}
|
||||
|
||||
.control-group input[type="color"] {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.control-group input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
accent-color: #667eea;
|
||||
}
|
||||
|
||||
.control-group span {
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
min-width: 35px;
|
||||
max-width: 40px; /* 限制最大宽度 */
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0; /* 防止数字显示收缩 */
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
button {
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
#formatText {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#formatText:hover {
|
||||
background: #218838;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#startScroll {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#startScroll:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
|
||||
#pauseScroll {
|
||||
background: #ffc107;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
#pauseScroll:hover {
|
||||
background: #e0a800;
|
||||
}
|
||||
|
||||
#resetScroll {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#resetScroll:hover {
|
||||
background: #c82333;
|
||||
}
|
||||
|
||||
#prevLineBtn, #nextLineBtn {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#prevLineBtn:hover, #nextLineBtn:hover {
|
||||
background: #5a6268;
|
||||
}
|
||||
|
||||
#createRoomBtn {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
}
|
||||
#createRoomBtn:hover {
|
||||
background: #218838;
|
||||
}
|
||||
|
||||
#joinRoomBtn {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
}
|
||||
#joinRoomBtn:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
|
||||
#copyRoomIdBtn {
|
||||
background: #e9ecef;
|
||||
color: #333;
|
||||
border: 1px solid #ced4da;
|
||||
padding: 2px 8px;
|
||||
margin: 0;
|
||||
}
|
||||
#copyRoomIdBtn:hover {
|
||||
background: #dae0e5;
|
||||
}
|
||||
|
||||
#toggleFullscreen {
|
||||
background: #6f42c1;
|
||||
color: white;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#toggleFullscreen:hover {
|
||||
background: #5a32a3;
|
||||
}
|
||||
|
||||
#togglePanel {
|
||||
background: #17a2b8;
|
||||
color: white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#togglePanel:hover {
|
||||
background: #138496;
|
||||
}
|
||||
|
||||
/* 进度条 */
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #e9ecef;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #667eea, #764ba2);
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 提词器显示区域 */
|
||||
.teleprompter-container {
|
||||
flex: 1;
|
||||
background: #000;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: margin-left 0.3s ease;
|
||||
min-height: 0; /* 修复flex项目的高度问题 */
|
||||
}
|
||||
|
||||
/* 悬浮恢复按钮 */
|
||||
.show-panel-btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background: rgba(23, 162, 184, 0.9);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
z-index: 1001;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.show-panel-btn:hover {
|
||||
background: rgba(23, 162, 184, 1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.teleprompter-content {
|
||||
width: 98%;
|
||||
max-width: 1400px;
|
||||
height: 85vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: width 0.3s ease, max-width 0.3s ease; /* 添加过渡效果 */
|
||||
}
|
||||
|
||||
/* 控制面板隐藏时扩展文本内容区域 */
|
||||
.container.panel-hidden .teleprompter-content {
|
||||
width: 100%; /* 占满整个可用宽度 */
|
||||
max-width: none; /* 移除最大宽度限制 */
|
||||
height: 100vh; /* 占满整个视口高度 */
|
||||
margin: 0; /* 移除边距 */
|
||||
padding: 0 40px; /* 添加一些内边距，让文本不会太靠边 */
|
||||
}
|
||||
|
||||
.text-display {
|
||||
padding: 50px 20px;
|
||||
transition: transform 0.1s linear;
|
||||
will-change: transform;
|
||||
color: #ffffff; /* 确保文本颜色为白色 */
|
||||
font-size: 32px; /* 默认字体大小 */
|
||||
line-height: 1.8; /* 默认行高 */
|
||||
font-weight: 500;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* 控制面板隐藏时调整文本显示的内边距 */
|
||||
.container.panel-hidden .text-display {
|
||||
padding: 50px 60px; /* 增加左右内边距，充分利用屏幕宽度 */
|
||||
}
|
||||
|
||||
/* 全屏模式下的文本显示内边距 */
|
||||
.container.fullscreen .text-display {
|
||||
padding: 50px 60px; /* 增加左右内边距，充分利用屏幕宽度 */
|
||||
}
|
||||
|
||||
.text-display p {
|
||||
margin-bottom: 0.5em; /* 减少段间距 */
|
||||
line-height: 1.8; /* 应用到每一行 */
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.5px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 阅读指导线 */
|
||||
.reading-guide {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
display: none; /* 隐藏阅读指导线 */
|
||||
}
|
||||
|
||||
.reading-guide::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 20px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.3) 20%,
|
||||
rgba(255, 255, 255, 0.8) 50%,
|
||||
rgba(255, 255, 255, 0.3) 80%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
.reading-guide.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 全屏模式 */
|
||||
.container.fullscreen .control-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container.fullscreen .teleprompter-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.container.fullscreen .teleprompter-content {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: 100vh;
|
||||
padding: 0 40px; /* 添加一些内边距，让文本不会太靠边 */
|
||||
}
|
||||
|
||||
/* 控制面板隐藏时的全屏扩展 */
|
||||
.container.panel-hidden .teleprompter-container {
|
||||
margin-left: 0;
|
||||
width: 100vw; /* 使用视口宽度，占满整个屏幕 */
|
||||
border-radius: 0;
|
||||
position: absolute; /* 使用绝对定位占满空间 */
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh; /* 占满整个视口高度 */
|
||||
}
|
||||
|
||||
.container.panel-hidden {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
overflow: hidden; /* 防止出现滚动条 */
|
||||
}
|
||||
|
||||
/* 当控制面板隐藏时，移除body的渐变背景 */
|
||||
body.panel-hidden-bg {
|
||||
background: #000000; /* 纯黑色背景 */
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.control-panel {
|
||||
width: 280px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.teleprompter-content {
|
||||
width: 98%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.text-display {
|
||||
padding: 30px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.teleprompter-content {
|
||||
width: 95%;
|
||||
max-width: 1600px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-section {
|
||||
animation: fadeIn 0.5s ease forwards;
|
||||
}
|
||||
|
||||
.panel-section:nth-child(1) { animation-delay: 0.1s; }
|
||||
.panel-section:nth-child(2) { animation-delay: 0.2s; }
|
||||
.panel-section:nth-child(3) { animation-delay: 0.3s; }
|
||||
.panel-section:nth-child(4) { animation-delay: 0.4s; }
|
||||
.panel-section:nth-child(5) { animation-delay: 0.5s; }
|
||||
|
||||
/* 模态框样式 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2000;
|
||||
backdrop-filter: blur(5px);
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
width: 85%;
|
||||
max-width: 320px;
|
||||
text-align: center;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(0);
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-content h3 {
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.modal-content p {
|
||||
color: #555;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.modal-content button {
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
padding: 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.modal-content button:hover {
|
||||
background: #5a6fd8;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user