mirror of
https://github.com/ElmGates/ticiqi.git
synced 2026-01-12 09:04:55 +08:00
Add files via upload
This commit is contained in:
ElmGates
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;
|
||||
}
|
||||
}
|
||||
130
文本提词器/index.html
Normal file
130
文本提词器/index.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<!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>
|
||||
772
文本提词器/script.js
Normal file
772
文本提词器/script.js
Normal file
@@ -0,0 +1,772 @@
|
||||
class Teleprompter {
|
||||
constructor() {
|
||||
console.log('开始初始化提词器...');
|
||||
|
||||
this.isScrolling = false;
|
||||
this.isPaused = false;
|
||||
this.scrollInterval = null;
|
||||
this.currentPosition = 0;
|
||||
this.formattedText = [];
|
||||
this.currentLine = 0;
|
||||
this.totalLines = 0;
|
||||
this.lineHeights = []; // 存储每行高度
|
||||
|
||||
this.initializeElements();
|
||||
this.bindEvents();
|
||||
this.loadSettings();
|
||||
this.initializeTextPosition();
|
||||
|
||||
console.log('提词器初始化完成');
|
||||
}
|
||||
|
||||
initializeElements() {
|
||||
console.log('正在初始化元素...');
|
||||
|
||||
// 文本输入
|
||||
this.textInput = document.getElementById('textInput');
|
||||
this.formatTextBtn = document.getElementById('formatText');
|
||||
|
||||
// 滚动控制
|
||||
this.scrollSpeed = document.getElementById('scrollSpeed');
|
||||
this.speedValue = document.getElementById('speedValue');
|
||||
this.startScrollBtn = document.getElementById('startScroll');
|
||||
this.pauseScrollBtn = document.getElementById('pauseScroll');
|
||||
this.resetScrollBtn = document.getElementById('resetScroll');
|
||||
|
||||
// 显示设置
|
||||
this.fontSize = document.getElementById('fontSize');
|
||||
this.fontSizeValue = document.getElementById('fontSizeValue');
|
||||
this.lineHeight = document.getElementById('lineHeight');
|
||||
this.lineHeightValue = document.getElementById('lineHeightValue');
|
||||
this.textColor = document.getElementById('textColor');
|
||||
this.bgColor = document.getElementById('bgColor');
|
||||
this.mirrorText = document.getElementById('mirrorText');
|
||||
|
||||
// 高级功能
|
||||
this.advancedToggle = document.getElementById('advancedToggle');
|
||||
this.advancedContent = document.getElementById('advancedContent');
|
||||
this.maxWordsPerParagraph = document.getElementById('maxWordsPerParagraph');
|
||||
this.maxWordsValue = document.getElementById('maxWordsValue');
|
||||
this.forceParagraphBreak = document.getElementById('forceParagraphBreak');
|
||||
this.formatTextBtn = document.getElementById('formatTextBtn');
|
||||
this.undoFormatBtn = document.getElementById('undoFormatBtn');
|
||||
this.mainFormatBtn = document.getElementById('formatText'); // 主显示按钮
|
||||
|
||||
// 显示区域
|
||||
this.textDisplay = document.getElementById('textDisplay');
|
||||
this.teleprompterContent = document.getElementById('teleprompterContent');
|
||||
this.readingGuide = document.getElementById('readingGuide');
|
||||
|
||||
// 控制面板
|
||||
this.controlPanel = document.getElementById('controlPanel');
|
||||
this.togglePanelBtn = document.getElementById('togglePanel');
|
||||
this.toggleFullscreenBtn = document.getElementById('toggleFullscreen');
|
||||
this.showPanelBtn = document.getElementById('showPanelBtn');
|
||||
|
||||
// 进度显示
|
||||
this.progressFill = document.getElementById('progressFill');
|
||||
this.currentLineSpan = document.getElementById('currentLine');
|
||||
this.totalLinesSpan = document.getElementById('totalLines');
|
||||
this.jumpToLineInput = document.getElementById('jumpToLine');
|
||||
this.jumpButton = document.getElementById('jumpButton');
|
||||
|
||||
// 容器
|
||||
this.container = document.querySelector('.container');
|
||||
this.teleprompterContainer = document.getElementById('teleprompterContainer');
|
||||
|
||||
console.log('元素初始化完成');
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
// 文本格式化
|
||||
this.formatTextBtn.addEventListener('click', () => this.smartFormatText()); // 高级功能中的格式化按钮
|
||||
this.undoFormatBtn.addEventListener('click', () => this.undoFormat());
|
||||
this.mainFormatBtn.addEventListener('click', () => this.formatText()); // 主显示按钮（简单显示）
|
||||
|
||||
// 滚动控制
|
||||
this.scrollSpeed.addEventListener('input', () => {
|
||||
this.speedValue.textContent = parseFloat(this.scrollSpeed.value).toFixed(1);
|
||||
this.saveSettings();
|
||||
});
|
||||
|
||||
this.startScrollBtn.addEventListener('click', () => this.startScrolling());
|
||||
this.pauseScrollBtn.addEventListener('click', () => this.pauseScrolling());
|
||||
this.resetScrollBtn.addEventListener('click', () => this.resetScrolling());
|
||||
|
||||
// 显示设置
|
||||
this.fontSize.addEventListener('input', () => this.updateFontSize());
|
||||
this.lineHeight.addEventListener('input', () => this.updateLineHeight());
|
||||
this.textColor.addEventListener('input', () => this.updateTextColor());
|
||||
this.bgColor.addEventListener('input', () => this.updateBgColor());
|
||||
this.mirrorText.addEventListener('change', () => this.updateMirrorText());
|
||||
|
||||
// 高级功能
|
||||
this.advancedToggle.addEventListener('click', () => this.toggleAdvancedMenu());
|
||||
this.maxWordsPerParagraph.addEventListener('input', () => this.updateMaxWordsPerParagraph());
|
||||
this.forceParagraphBreak.addEventListener('change', () => this.updateForceParagraphBreak());
|
||||
|
||||
// 全屏和面板控制
|
||||
this.toggleFullscreenBtn.addEventListener('click', () => this.toggleFullscreen());
|
||||
this.togglePanelBtn.addEventListener('click', () => this.togglePanel());
|
||||
this.showPanelBtn.addEventListener('click', () => this.togglePanel());
|
||||
|
||||
// 快速定位
|
||||
this.jumpButton.addEventListener('click', () => this.jumpToLine());
|
||||
this.jumpToLineInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') this.jumpToLine();
|
||||
});
|
||||
|
||||
// 键盘快捷键
|
||||
document.addEventListener('keydown', (e) => this.handleKeyboard(e));
|
||||
|
||||
// 窗口大小变化
|
||||
window.addEventListener('resize', () => this.handleResize());
|
||||
|
||||
// 全屏状态变化
|
||||
document.addEventListener('fullscreenchange', () => this.handleFullscreenChange());
|
||||
}
|
||||
|
||||
initializeTextPosition() {
|
||||
// 确保文本显示区域有正确的初始位置
|
||||
setTimeout(() => {
|
||||
if (this.formattedText.length === 0) {
|
||||
// 如果没有格式化文本，显示默认提示并定位到中间位置
|
||||
const containerHeight = this.teleprompterContent.clientHeight;
|
||||
const lineHeight = this.getCurrentLineHeight();
|
||||
const startPosition = (containerHeight / 2) - lineHeight;
|
||||
this.textDisplay.style.transform = `translateY(${startPosition}px)`;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// 显示文本功能（简单显示，不格式化）
|
||||
formatText() {
|
||||
const text = this.textInput.value.trim();
|
||||
if (!text) {
|
||||
alert('请先输入文本内容！');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('开始显示文本，输入长度：', text.length);
|
||||
|
||||
// 简单按换行符分段，不进行智能格式化
|
||||
const lines = text.split('\n').map(line => line.trim()).filter(line => line !== '');
|
||||
console.log('简单分段结果：', lines);
|
||||
|
||||
this.formattedText = lines;
|
||||
this.totalLines = lines.length;
|
||||
this.currentLine = 0;
|
||||
this.currentPosition = 0;
|
||||
this.lineHeights = []; // 重置行高数组
|
||||
|
||||
// 更新跳转输入框的最大值
|
||||
this.jumpToLineInput.max = this.totalLines;
|
||||
this.jumpToLineInput.value = 1;
|
||||
|
||||
// 显示文本
|
||||
this.displayFormattedText();
|
||||
this.updateProgress();
|
||||
|
||||
// 保存到本地存储
|
||||
localStorage.setItem('teleprompterText', text);
|
||||
|
||||
alert('文本显示完成！共' + lines.length + '行');
|
||||
}
|
||||
|
||||
// 智能格式化功能
|
||||
smartFormatText() {
|
||||
const text = this.textInput.value.trim();
|
||||
if (!text) {
|
||||
alert('请先输入文本内容！');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('开始智能格式化文本，输入长度：', text.length);
|
||||
|
||||
// 进行智能格式化
|
||||
const sentences = this.splitByPunctuation(text);
|
||||
console.log('智能格式化结果：', sentences);
|
||||
|
||||
this.formattedText = sentences;
|
||||
this.totalLines = sentences.length;
|
||||
this.currentLine = 0;
|
||||
this.currentPosition = 0;
|
||||
this.lineHeights = []; // 重置行高数组
|
||||
|
||||
// 更新跳转输入框的最大值
|
||||
this.jumpToLineInput.max = this.totalLines;
|
||||
this.jumpToLineInput.value = 1;
|
||||
|
||||
// 显示格式化后的文本
|
||||
this.displayFormattedText();
|
||||
this.updateProgress();
|
||||
|
||||
// 保存到本地存储
|
||||
localStorage.setItem('teleprompterText', text);
|
||||
|
||||
alert('智能格式化完成！共' + sentences.length + '行');
|
||||
}
|
||||
|
||||
// 撤销格式化功能
|
||||
undoFormat() {
|
||||
const text = this.textInput.value.trim();
|
||||
if (!text) {
|
||||
alert('请先输入文本内容！');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('开始撤销格式化，恢复原始段落');
|
||||
|
||||
// 简单按换行符分段，恢复原始段落结构
|
||||
const lines = text.split('\n').map(line => line.trim()).filter(line => line !== '');
|
||||
console.log('撤销格式化结果：', lines);
|
||||
|
||||
this.formattedText = lines;
|
||||
this.totalLines = lines.length;
|
||||
this.currentLine = 0;
|
||||
this.currentPosition = 0;
|
||||
this.lineHeights = []; // 重置行高数组
|
||||
|
||||
// 更新跳转输入框的最大值
|
||||
this.jumpToLineInput.max = this.totalLines;
|
||||
this.jumpToLineInput.value = 1;
|
||||
|
||||
// 显示格式化后的文本
|
||||
this.displayFormattedText();
|
||||
this.updateProgress();
|
||||
|
||||
// 保存到本地存储
|
||||
localStorage.setItem('teleprompterText', text);
|
||||
|
||||
alert('格式化已撤销！共' + lines.length + '行');
|
||||
}
|
||||
|
||||
splitByPunctuation(text) {
|
||||
// 获取最大段落字数设置
|
||||
const maxWords = parseInt(this.maxWordsPerParagraph.value) || 50;
|
||||
const forceBreak = this.forceParagraphBreak.checked;
|
||||
|
||||
// 定义中文和英文的标点符号
|
||||
const punctuation = /[。！？；：.!?;:\n]/;
|
||||
const sentences = [];
|
||||
let current = '';
|
||||
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
const char = text[i];
|
||||
current += char;
|
||||
|
||||
// 如果遇到标点符号，或者文本长度超过限制
|
||||
if (punctuation.test(char) || current.length > maxWords) {
|
||||
// 查找下一个非空白字符
|
||||
let j = i + 1;
|
||||
while (j < text.length && /\s/.test(text[j])) {
|
||||
j++;
|
||||
}
|
||||
|
||||
// 如果当前句子长度合理，或者已经累积了较多字符
|
||||
if (current.trim().length > 10 || sentences.length === 0) {
|
||||
sentences.push(current.trim());
|
||||
current = '';
|
||||
i = j - 1; // 跳过空白字符
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理剩余的文本
|
||||
if (current.trim()) {
|
||||
// 如果剩余文本较长且启用了强制分段，进一步分割
|
||||
if (forceBreak && current.length > maxWords * 1.5) {
|
||||
const remainingSentences = this.forceSplitLongText(current, maxWords);
|
||||
sentences.push(...remainingSentences);
|
||||
} else {
|
||||
sentences.push(current.trim());
|
||||
}
|
||||
}
|
||||
|
||||
return sentences;
|
||||
}
|
||||
|
||||
forceSplitLongText(text, maxWords) {
|
||||
const sentences = [];
|
||||
let current = '';
|
||||
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
const char = text[i];
|
||||
current += char;
|
||||
|
||||
// 强制在最大字数处分割，优先在标点符号处
|
||||
if (current.length >= maxWords) {
|
||||
// 向前查找最近的标点符号
|
||||
let breakPoint = current.length;
|
||||
for (let j = current.length - 1; j >= Math.max(0, current.length - 20); j--) {
|
||||
if (/[，。！？；：,\.!?;:]/.test(current[j])) {
|
||||
breakPoint = j + 1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const segment = current.substring(0, breakPoint).trim();
|
||||
if (segment.length > 10) {
|
||||
sentences.push(segment);
|
||||
}
|
||||
|
||||
current = current.substring(breakPoint);
|
||||
}
|
||||
}
|
||||
|
||||
if (current.trim()) {
|
||||
sentences.push(current.trim());
|
||||
}
|
||||
|
||||
return sentences;
|
||||
}
|
||||
|
||||
displayFormattedText() {
|
||||
let html = '';
|
||||
this.lineHeights = []; // 重置行高数组
|
||||
|
||||
this.formattedText.forEach((sentence, index) => {
|
||||
html += `<p data-line="${index}">${sentence}</p>`;
|
||||
});
|
||||
|
||||
if (html === '') {
|
||||
html = '<p>请输入您的提词内容，然后点击"格式化文本"按钮开始使用...</p>';
|
||||
}
|
||||
|
||||
this.textDisplay.innerHTML = html;
|
||||
this.totalLinesSpan.textContent = this.totalLines;
|
||||
|
||||
// 应用当前的行间距设置
|
||||
const currentLineHeight = this.lineHeight.value;
|
||||
const paragraphs = this.textDisplay.querySelectorAll('p');
|
||||
paragraphs.forEach(p => {
|
||||
p.style.lineHeight = currentLineHeight;
|
||||
});
|
||||
|
||||
// 计算每行的高度并存储
|
||||
paragraphs.forEach((p, index) => {
|
||||
const height = p.offsetHeight + parseFloat(getComputedStyle(p).marginBottom);
|
||||
this.lineHeights[index] = height;
|
||||
});
|
||||
|
||||
// 计算初始位置，将第一行文本对齐到中间位置
|
||||
const containerHeight = this.teleprompterContent.clientHeight;
|
||||
const firstLineHeight = this.lineHeights[0] || this.getCurrentLineHeight();
|
||||
const totalContentHeight = this.lineHeights.reduce((sum, height) => sum + height, 0);
|
||||
|
||||
// 如果内容高度小于容器高度，将第一行放在中间位置
|
||||
// 如果内容高度大于容器高度，确保第一行不会被遮挡
|
||||
let startPosition = (containerHeight / 2) - firstLineHeight;
|
||||
|
||||
// 确保起始位置不会导致文本显示在容器底部之外
|
||||
if (startPosition < 0) {
|
||||
startPosition = Math.min(50, containerHeight / 4); // 给一个合理的顶部边距
|
||||
}
|
||||
|
||||
// 重置滚动位置
|
||||
this.currentPosition = 0;
|
||||
const isMirror = this.mirrorText.checked;
|
||||
const mirrorScale = isMirror ? ' scaleX(-1)' : ' scaleX(1)';
|
||||
this.textDisplay.style.transform = `translateY(${startPosition}px)${mirrorScale}`;
|
||||
}
|
||||
|
||||
// 滚动功能
|
||||
startScrolling() {
|
||||
if (this.formattedText.length === 0) {
|
||||
alert('请先格式化文本！');
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isPaused) {
|
||||
this.resumeScrolling();
|
||||
return;
|
||||
}
|
||||
|
||||
this.isScrolling = true;
|
||||
this.isPaused = false;
|
||||
this.startScrollBtn.textContent = '滚动中...';
|
||||
this.startScrollBtn.disabled = true;
|
||||
this.readingGuide.classList.add('visible');
|
||||
|
||||
const speed = parseFloat(this.scrollSpeed.value);
|
||||
const interval = Math.max(20, 210 - speed); // 扩大速度转换范围，最低20ms，最高190ms
|
||||
|
||||
this.scrollInterval = setInterval(() => {
|
||||
this.scrollStep();
|
||||
}, interval);
|
||||
}
|
||||
|
||||
scrollStep() {
|
||||
if (this.formattedText.length === 0) {
|
||||
this.stopScrolling();
|
||||
alert('请先格式化文本！');
|
||||
return;
|
||||
}
|
||||
|
||||
const lineHeight = this.getCurrentLineHeight();
|
||||
this.currentPosition += 1;
|
||||
|
||||
// 更新当前行
|
||||
let accumulatedHeight = 0;
|
||||
let newLine = 0;
|
||||
for (let i = 0; i < this.lineHeights.length; i++) {
|
||||
accumulatedHeight += this.lineHeights[i];
|
||||
if (accumulatedHeight > this.currentPosition) {
|
||||
newLine = i;
|
||||
break;
|
||||
}
|
||||
newLine = i;
|
||||
}
|
||||
|
||||
if (newLine !== this.currentLine && newLine < this.totalLines) {
|
||||
this.currentLine = newLine;
|
||||
this.updateProgress();
|
||||
}
|
||||
|
||||
// 应用滚动
|
||||
const isMirror = this.mirrorText.checked;
|
||||
const mirrorScale = isMirror ? ' scaleX(-1)' : ' scaleX(1)';
|
||||
this.textDisplay.style.transform = `translateY(-${this.currentPosition}px)${mirrorScale}`;
|
||||
|
||||
// 检查是否滚动到底部
|
||||
const containerHeight = this.teleprompterContent.clientHeight;
|
||||
const contentHeight = this.textDisplay.scrollHeight;
|
||||
|
||||
if (this.currentPosition + containerHeight >= contentHeight) {
|
||||
this.stopScrolling();
|
||||
alert('已滚动到文本末尾！');
|
||||
}
|
||||
}
|
||||
|
||||
pauseScrolling() {
|
||||
if (this.isScrolling && !this.isPaused) {
|
||||
this.isPaused = true;
|
||||
clearInterval(this.scrollInterval);
|
||||
this.pauseScrollBtn.textContent = '继续';
|
||||
this.startScrollBtn.textContent = '继续';
|
||||
this.startScrollBtn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
resumeScrolling() {
|
||||
if (this.isPaused) {
|
||||
this.isPaused = false;
|
||||
this.startScrolling();
|
||||
this.pauseScrollBtn.textContent = '暂停';
|
||||
}
|
||||
}
|
||||
|
||||
resetScrolling() {
|
||||
this.stopScrolling();
|
||||
this.currentPosition = 0;
|
||||
this.currentLine = 0;
|
||||
|
||||
// 重置到初始中间位置
|
||||
const containerHeight = this.teleprompterContent.clientHeight;
|
||||
const firstLineHeight = this.lineHeights[0] || this.getCurrentLineHeight();
|
||||
let startPosition = (containerHeight / 2) - firstLineHeight;
|
||||
|
||||
// 确保起始位置不会导致文本显示在容器底部之外
|
||||
if (startPosition < 0) {
|
||||
startPosition = Math.min(50, containerHeight / 4); // 给一个合理的顶部边距
|
||||
}
|
||||
|
||||
const isMirror = this.mirrorText.checked;
|
||||
const mirrorScale = isMirror ? ' scaleX(-1)' : ' scaleX(1)';
|
||||
this.textDisplay.style.transform = `translateY(${startPosition}px)${mirrorScale}`;
|
||||
|
||||
this.updateProgress();
|
||||
this.readingGuide.classList.remove('visible');
|
||||
}
|
||||
|
||||
stopScrolling() {
|
||||
this.isScrolling = false;
|
||||
this.isPaused = false;
|
||||
clearInterval(this.scrollInterval);
|
||||
this.startScrollBtn.textContent = '开始';
|
||||
this.startScrollBtn.disabled = false;
|
||||
this.pauseScrollBtn.textContent = '暂停';
|
||||
}
|
||||
|
||||
// 显示设置
|
||||
updateFontSize() {
|
||||
const size = this.fontSize.value;
|
||||
this.fontSizeValue.textContent = size + 'px';
|
||||
this.textDisplay.style.fontSize = size + 'px';
|
||||
|
||||
// 重新计算行高
|
||||
if (this.formattedText.length > 0) {
|
||||
setTimeout(() => this.displayFormattedText(), 50);
|
||||
}
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
updateLineHeight() {
|
||||
const height = this.lineHeight.value;
|
||||
this.lineHeightValue.textContent = height;
|
||||
|
||||
// 应用到所有段落，让每一行都有这个行间距
|
||||
const paragraphs = this.textDisplay.querySelectorAll('p');
|
||||
paragraphs.forEach(p => {
|
||||
p.style.lineHeight = height;
|
||||
});
|
||||
|
||||
// 重新计算行高
|
||||
if (this.formattedText.length > 0) {
|
||||
setTimeout(() => this.displayFormattedText(), 50);
|
||||
}
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
updateTextColor() {
|
||||
const color = this.textColor.value;
|
||||
this.textDisplay.style.color = color;
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
updateBgColor() {
|
||||
const color = this.bgColor.value;
|
||||
this.teleprompterContainer.style.backgroundColor = color;
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
updateMirrorText() {
|
||||
const text = this.textInput.value.trim();
|
||||
if (text === '') {
|
||||
this.textDisplay.innerHTML = '';
|
||||
this.formattedText = [];
|
||||
return;
|
||||
}
|
||||
|
||||
// 简单按换行符分段，保持原始段落结构
|
||||
const lines = text.split('\n').map(line => line.trim()).filter(line => line !== '');
|
||||
this.formattedText = lines;
|
||||
this.totalLines = lines.length;
|
||||
const formattedText = lines.map(line => `<p>${line}</p>`).join('');
|
||||
|
||||
this.textDisplay.innerHTML = formattedText;
|
||||
|
||||
// 应用当前设置
|
||||
this.updateFontSize();
|
||||
this.updateLineHeight();
|
||||
this.updateTextColor();
|
||||
this.updateBgColor();
|
||||
|
||||
// 更新镜像状态
|
||||
const isMirror = this.mirrorText.checked;
|
||||
if (isMirror) {
|
||||
this.textDisplay.style.transform = `translateY(-${this.currentPosition}px) scaleX(-1)`;
|
||||
} else {
|
||||
this.textDisplay.style.transform = `translateY(-${this.currentPosition}px) scaleX(1)`;
|
||||
}
|
||||
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
// 高级功能
|
||||
toggleAdvancedMenu() {
|
||||
const isVisible = this.advancedContent.style.display === 'block';
|
||||
this.advancedContent.style.display = isVisible ? 'none' : 'block';
|
||||
this.advancedToggle.style.transform = isVisible ? 'rotate(0deg)' : 'rotate(180deg)';
|
||||
}
|
||||
|
||||
updateMaxWordsPerParagraph() {
|
||||
const value = this.maxWordsPerParagraph.value;
|
||||
this.maxWordsValue.textContent = value;
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
updateForceParagraphBreak() {
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 全屏功能
|
||||
toggleFullscreen() {
|
||||
if (!document.fullscreenElement) {
|
||||
this.container.requestFullscreen().then(() => {
|
||||
this.container.classList.add('fullscreen');
|
||||
this.toggleFullscreenBtn.textContent = '退出全屏';
|
||||
}).catch(err => {
|
||||
alert(`无法进入全屏模式: ${err.message}`);
|
||||
});
|
||||
} else {
|
||||
document.exitFullscreen().then(() => {
|
||||
this.container.classList.remove('fullscreen');
|
||||
this.toggleFullscreenBtn.textContent = '全屏显示';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
togglePanel() {
|
||||
this.controlPanel.classList.toggle('hidden');
|
||||
const isHidden = this.controlPanel.classList.contains('hidden');
|
||||
this.togglePanelBtn.textContent = isHidden ? '显示控制面板' : '隐藏控制面板';
|
||||
this.showPanelBtn.style.display = isHidden ? 'block' : 'none';
|
||||
|
||||
// 同时切换容器的panel-hidden类，用于扩展文本显示区域
|
||||
this.container.classList.toggle('panel-hidden', isHidden);
|
||||
|
||||
// 切换body的背景样式，隐藏蓝色渐变背景
|
||||
document.body.classList.toggle('panel-hidden-bg', isHidden);
|
||||
}
|
||||
|
||||
// 键盘快捷键
|
||||
handleKeyboard(e) {
|
||||
if (e.target.tagName === 'TEXTAREA') return;
|
||||
|
||||
switch(e.key) {
|
||||
case ' ':
|
||||
e.preventDefault();
|
||||
if (this.isScrolling && !this.isPaused) {
|
||||
this.pauseScrolling();
|
||||
} else {
|
||||
this.startScrolling();
|
||||
}
|
||||
break;
|
||||
case 'r':
|
||||
case 'R':
|
||||
this.resetScrolling();
|
||||
break;
|
||||
case 'f':
|
||||
case 'F':
|
||||
this.toggleFullscreen();
|
||||
break;
|
||||
case 'Escape':
|
||||
if (document.fullscreenElement) {
|
||||
this.toggleFullscreen();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 快速定位功能
|
||||
jumpToLine() {
|
||||
if (!this.formattedText || this.formattedText.length === 0) {
|
||||
alert('请先格式化文本');
|
||||
return;
|
||||
}
|
||||
|
||||
const targetLine = parseInt(this.jumpToLineInput.value);
|
||||
if (isNaN(targetLine) || targetLine < 1 || targetLine > this.formattedText.length) {
|
||||
alert(`请输入有效的行号 (1-${this.formattedText.length})`);
|
||||
return;
|
||||
}
|
||||
|
||||
this.stopScrolling();
|
||||
this.currentLine = targetLine - 1; // 转换为0基索引
|
||||
this.currentPosition = this.calculatePositionForLine(this.currentLine);
|
||||
const isMirror = this.mirrorText.checked;
|
||||
const mirrorScale = isMirror ? ' scaleX(-1)' : ' scaleX(1)';
|
||||
this.textDisplay.style.transform = `translateY(-${this.currentPosition}px)${mirrorScale}`;
|
||||
this.updateProgress();
|
||||
}
|
||||
|
||||
calculatePositionForLine(lineIndex) {
|
||||
let position = 0;
|
||||
for (let i = 0; i < lineIndex && i < this.lineHeights.length; i++) {
|
||||
position += this.lineHeights[i] || this.getCurrentLineHeight();
|
||||
}
|
||||
return position;
|
||||
}
|
||||
|
||||
// 进度更新
|
||||
updateProgress() {
|
||||
const progress = this.totalLines > 0 ? (this.currentLine / this.totalLines) * 100 : 0;
|
||||
this.progressFill.style.width = progress + '%';
|
||||
this.currentLineSpan.textContent = this.currentLine + 1;
|
||||
}
|
||||
|
||||
// 工具方法
|
||||
getCurrentLineHeight() {
|
||||
const firstParagraph = this.textDisplay.querySelector('p');
|
||||
if (firstParagraph) {
|
||||
return firstParagraph.offsetHeight +
|
||||
parseFloat(getComputedStyle(firstParagraph).marginBottom);
|
||||
}
|
||||
return 50; // 默认值
|
||||
}
|
||||
|
||||
handleResize() {
|
||||
// 重新计算行高和位置
|
||||
if (this.formattedText.length > 0) {
|
||||
this.displayFormattedText();
|
||||
} else {
|
||||
// 如果没有格式化文本，重新初始化位置
|
||||
this.initializeTextPosition();
|
||||
}
|
||||
}
|
||||
|
||||
handleFullscreenChange() {
|
||||
if (!document.fullscreenElement) {
|
||||
this.container.classList.remove('fullscreen');
|
||||
this.toggleFullscreenBtn.textContent = '全屏显示';
|
||||
}
|
||||
}
|
||||
|
||||
// 设置保存和加载
|
||||
saveSettings() {
|
||||
const settings = {
|
||||
scrollSpeed: this.scrollSpeed.value,
|
||||
fontSize: this.fontSize.value,
|
||||
lineHeight: this.lineHeight.value,
|
||||
textColor: this.textColor.value,
|
||||
bgColor: this.bgColor.value,
|
||||
mirrorText: this.mirrorText.checked,
|
||||
maxWordsPerParagraph: this.maxWordsPerParagraph.value,
|
||||
forceParagraphBreak: this.forceParagraphBreak.checked
|
||||
};
|
||||
localStorage.setItem('teleprompterSettings', JSON.stringify(settings));
|
||||
}
|
||||
|
||||
loadSettings() {
|
||||
// 加载设置
|
||||
const settings = localStorage.getItem('teleprompterSettings');
|
||||
if (settings) {
|
||||
const parsed = JSON.parse(settings);
|
||||
this.scrollSpeed.value = parsed.scrollSpeed || 50;
|
||||
this.fontSize.value = parsed.fontSize || 32;
|
||||
this.lineHeight.value = parsed.lineHeight || 1.8;
|
||||
this.textColor.value = parsed.textColor || '#ffffff';
|
||||
this.bgColor.value = parsed.bgColor || '#000000';
|
||||
this.mirrorText.checked = parsed.mirrorText || false;
|
||||
this.maxWordsPerParagraph.value = parsed.maxWordsPerParagraph || 50;
|
||||
this.forceParagraphBreak.checked = parsed.forceParagraphBreak !== undefined ? parsed.forceParagraphBreak : true;
|
||||
|
||||
// 应用设置
|
||||
this.speedValue.textContent = parseFloat(this.scrollSpeed.value).toFixed(1);
|
||||
this.updateFontSize();
|
||||
this.updateLineHeight();
|
||||
this.updateTextColor();
|
||||
this.updateBgColor();
|
||||
this.updateMirrorText();
|
||||
this.updateMaxWordsPerParagraph();
|
||||
this.updateForceParagraphBreak();
|
||||
}
|
||||
|
||||
// 加载文本
|
||||
const savedText = localStorage.getItem('teleprompterText');
|
||||
if (savedText) {
|
||||
this.textInput.value = savedText;
|
||||
setTimeout(() => this.formatText(), 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化应用
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new Teleprompter();
|
||||
});
|
||||
|
||||
// 添加一些提示信息
|
||||
window.addEventListener('load', () => {
|
||||
setTimeout(() => {
|
||||
console.log('提词器应用已加载完成！');
|
||||
console.log('快捷键说明：');
|
||||
console.log('- 空格键：开始/暂停滚动');
|
||||
console.log('- R键：重置滚动');
|
||||
console.log('- F键：切换全屏');
|
||||
console.log('- ESC键：退出全屏');
|
||||
}, 1000);
|
||||
});
|
||||
472
文本提词器/styles.css
Normal file
472
文本提词器/styles.css
Normal file
@@ -0,0 +1,472 @@
|
||||
* {
|
||||
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;
|
||||
}
|
||||
|
||||
#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; }
|
||||
Reference in New Issue
Block a user