|
|
<!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="icon" type="image/x-icon" href="images/favicon.ico">
|
|
|
<link rel="stylesheet" href="styles/main.css">
|
|
|
<link rel="stylesheet" href="styles/theme.css">
|
|
|
<link rel="stylesheet" href="styles/sidebar.css">
|
|
|
<link rel="stylesheet" href="styles/editor.css">
|
|
|
<link rel="stylesheet" href="styles/audio-player.css">
|
|
|
</head>
|
|
|
<body class="dark-theme">
|
|
|
<!-- Logo区域 - 居中圆角控件 -->
|
|
|
<div class="logo-widget">
|
|
|
<img src="images/logo.svg" alt="Logo" class="logo">
|
|
|
<span class="project-name">智能提词器</span>
|
|
|
</div>
|
|
|
|
|
|
<!-- 计时器 - 右上角圆角控件 -->
|
|
|
<div class="time-widget" id="timeDisplay"></div>
|
|
|
|
|
|
<!-- 红色定位线 -->
|
|
|
<div class="reading-line" id="readingLine"></div>
|
|
|
|
|
|
<!-- 左侧悬浮工具栏 -->
|
|
|
<aside class="sidebar" id="sidebar">
|
|
|
<button class="sidebar-btn" id="fullscreenBtn" title="全屏">
|
|
|
<img src="images/fullscreen.svg" alt="全屏">
|
|
|
</button>
|
|
|
|
|
|
<button class="sidebar-btn" id="themeBtn" title="主题切换">
|
|
|
<img src="images/theme.svg" alt="主题">
|
|
|
</button>
|
|
|
|
|
|
<button class="sidebar-btn" id="playBtn" title="播放/暂停">
|
|
|
<img src="images/play.svg" alt="播放">
|
|
|
</button>
|
|
|
|
|
|
<button class="sidebar-btn" id="scrollBtn" title="滚动设置">
|
|
|
<img src="images/scroll.svg" alt="滚动">
|
|
|
</button>
|
|
|
|
|
|
<button class="sidebar-btn" id="fontBtn" title="字体设置">
|
|
|
<img src="images/font.svg" alt="字体">
|
|
|
</button>
|
|
|
|
|
|
<button class="sidebar-btn" id="flipBtn" title="翻转设置">
|
|
|
<img src="images/flip.svg" alt="翻转">
|
|
|
</button>
|
|
|
|
|
|
<button class="sidebar-btn" id="watermarkBtn" title="水印设置">
|
|
|
<img src="images/watermark.svg" alt="水印">
|
|
|
</button>
|
|
|
|
|
|
<button class="sidebar-btn" id="importBtn" title="导入文件">
|
|
|
<img src="images/import.svg" alt="导入">
|
|
|
</button>
|
|
|
|
|
|
<button class="sidebar-btn" id="lockBtn" title="锁定文本">
|
|
|
<img src="images/unlock.svg" alt="锁定" id="lockIcon">
|
|
|
</button>
|
|
|
|
|
|
<button class="sidebar-btn" id="recordBtn" title="录音">
|
|
|
<img src="images/record.svg" alt="录音">
|
|
|
</button>
|
|
|
|
|
|
<!-- <button class="sidebar-btn" id="languageBtn" title="切换语言">
|
|
|
<img src="images/language.svg" alt="语言">
|
|
|
</button> -->
|
|
|
</aside>
|
|
|
|
|
|
<!-- 侧边栏切换按钮 - 独立于侧边栏右侧 -->
|
|
|
<div class="sidebar-toggle-container" id="sidebarToggleContainer">
|
|
|
<button class="sidebar-btn sidebar-toggle" id="sidebarToggle" title="隐藏功能区">
|
|
|
<img src="images/chevron-left.svg" alt="隐藏">
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
<!-- 左侧边缘触发区域 -->
|
|
|
<div class="sidebar-trigger" id="sidebarTrigger"></div>
|
|
|
|
|
|
<!-- 主文本编辑区域 -->
|
|
|
<main class="main-content">
|
|
|
<div class="text-editor-container">
|
|
|
<div class="text-editor" id="textEditor" contenteditable="true"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 水印层 -->
|
|
|
<div class="watermark-layer" id="watermarkLayer"></div>
|
|
|
</main>
|
|
|
|
|
|
<!-- 右侧滚动条 -->
|
|
|
<div class="custom-scrollbar" id="customScrollbar">
|
|
|
<div class="scrollbar-thumb" id="scrollbarThumb"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 设置面板模板 -->
|
|
|
<div class="settings-panel" id="scrollSettings" style="display: none;">
|
|
|
<h3>滚动设置</h3>
|
|
|
<div class="setting-group">
|
|
|
<label>
|
|
|
<input type="checkbox" id="autoScroll" checked> 自动滚动
|
|
|
</label>
|
|
|
</div>
|
|
|
<div class="setting-group" id="autoScrollOptions">
|
|
|
<label>滚动类型：
|
|
|
<select id="scrollType">
|
|
|
<option value="line">按行滚动</option>
|
|
|
<option value="char">按字滚动</option>
|
|
|
</select>
|
|
|
</label>
|
|
|
<label>滚动速度：
|
|
|
<input type="range" id="scrollSpeed" min="1" max="100" value="10">
|
|
|
<span id="scrollSpeedValue">10</span>
|
|
|
</label>
|
|
|
<label>
|
|
|
<input type="checkbox" id="autoDuration"> 根据全文时长自动计算
|
|
|
</label>
|
|
|
<div id="durationSettings" style="display: none;">
|
|
|
<label>全文时长（分钟）：
|
|
|
<input type="number" id="totalDuration" min="1" max="120" value="10">
|
|
|
</label>
|
|
|
</div>
|
|
|
<label>倒计时时长（秒）：
|
|
|
<input type="number" id="countdownDuration" min="0" max="10" value="0">
|
|
|
</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="settings-panel" id="fontSettings" style="display: none;">
|
|
|
<h3>字体设置</h3>
|
|
|
<div class="setting-group">
|
|
|
<label>字体：
|
|
|
<select id="fontFamily">
|
|
|
<option value="SimSun, serif">宋体</option>
|
|
|
<option value="Microsoft YaHei, sans-serif">微软雅黑</option>
|
|
|
<option value="SimHei, sans-serif">黑体</option>
|
|
|
<option value="KaiTi, serif">楷体</option>
|
|
|
</select>
|
|
|
</label>
|
|
|
<label>字号：
|
|
|
<input type="range" id="fontSize" min="12" max="100" value="40">
|
|
|
<span id="fontSizeValue">40px</span>
|
|
|
</label>
|
|
|
<label>颜色：
|
|
|
<input type="color" id="fontColor" value="#333333">
|
|
|
</label>
|
|
|
<label>左边距：
|
|
|
<input type="range" id="marginLeft" min="0" max="400" value="100">
|
|
|
<span id="marginLeftValue">100px</span>
|
|
|
</label>
|
|
|
<label>右边距：
|
|
|
<input type="range" id="marginRight" min="0" max="400" value="50">
|
|
|
<span id="marginRightValue">50px</span>
|
|
|
</label>
|
|
|
<label>字间距：
|
|
|
<input type="range" id="letterSpacing" min="0" max="10" value="1">
|
|
|
<span id="letterSpacingValue">1px</span>
|
|
|
</label>
|
|
|
<label>行距：
|
|
|
<input type="range" id="lineHeight" min="1" max="3" step="0.1" value="1.6">
|
|
|
<span id="lineHeightValue">1.6</span>
|
|
|
</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="settings-panel" id="flipSettings" style="display: none;">
|
|
|
<h3>翻转设置</h3>
|
|
|
<div class="setting-group">
|
|
|
<label>
|
|
|
<input type="checkbox" id="horizontalFlip"> 水平翻转
|
|
|
</label>
|
|
|
<label>
|
|
|
<input type="checkbox" id="verticalFlip"> 垂直翻转
|
|
|
</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="settings-panel" id="watermarkSettings" style="display: none;">
|
|
|
<h3>水印设置</h3>
|
|
|
<div class="setting-group">
|
|
|
<label>
|
|
|
<input type="checkbox" id="watermarkEnabled"> 启用水印
|
|
|
</label>
|
|
|
<div id="watermarkOptions" style="display: none;">
|
|
|
<label>水印内容：
|
|
|
<input type="text" id="watermarkText" placeholder="输入水印文字">
|
|
|
</label>
|
|
|
<label>水印类型：
|
|
|
<select id="watermarkType">
|
|
|
<option value="center">大字居中背景</option>
|
|
|
<option value="diagonal">斜向暗纹</option>
|
|
|
</select>
|
|
|
</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="settings-panel" id="recordSettings" style="display: none;">
|
|
|
<h3>录音设置</h3>
|
|
|
<div class="setting-group">
|
|
|
<button id="startRecord" class="record-control-btn">开始录音</button>
|
|
|
<button id="stopRecord" class="record-control-btn" disabled>停止录音</button>
|
|
|
<button id="playRecord" class="record-control-btn" disabled>试听</button>
|
|
|
<label>
|
|
|
<input type="checkbox" id="audioSync"> 音频智能识别滚动
|
|
|
</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 倒计时显示 -->
|
|
|
<div class="countdown-display" id="countdownDisplay" style="display: none;">
|
|
|
<span id="countdownText">3</span>
|
|
|
</div>
|
|
|
|
|
|
<!-- 音频播放弹窗 -->
|
|
|
<div class="audio-player-modal" id="audioPlayerModal" style="display: none;">
|
|
|
<div class="audio-player-content">
|
|
|
<div class="audio-player-header">
|
|
|
<h3>录音试听</h3>
|
|
|
<button class="close-btn" id="closeAudioPlayer">×</button>
|
|
|
</div>
|
|
|
<div class="audio-player-body">
|
|
|
<audio id="audioPlayer" controls>
|
|
|
您的浏览器不支持音频播放。
|
|
|
</audio>
|
|
|
<div class="audio-info">
|
|
|
<span id="audioFileName">录音文件</span>
|
|
|
<span id="audioDuration">--:--</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="audio-player-footer">
|
|
|
<button id="replayAudio" class="audio-control-btn">重新播放</button>
|
|
|
<button id="downloadAudio" class="audio-control-btn">下载录音</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 隐藏的文件输入 -->
|
|
|
<input type="file" id="fileInput" accept=".txt" style="display: none;">
|
|
|
|
|
|
<script src="js/main.js" type="module"></script>
|
|
|
</body>
|
|
|
</html> |
