zhangl
Refactor index.html, README.md, and style.css for interactive English learning app. Updated HTML structure, added navigation and control features, enhanced styling, and improved documentation in README.
c7e7ea8 | <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="style.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- 顶部导航栏 --> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <h1 class="app-title"> | |
| <i class="fas fa-book-open"></i> | |
| 交互式英语学习 | |
| </h1> | |
| <div class="controls"> | |
| <button class="control-btn" id="translationToggle" title="切换翻译显示"> | |
| <i class="fas fa-language"></i> | |
| <span>翻译</span> | |
| </button> | |
| <button class="control-btn" id="interactiveToggle" title="显示/隐藏交互区域"> | |
| <i class="fas fa-eye"></i> | |
| <span>交互</span> | |
| </button> | |
| <button class="control-btn" id="playAllBtn" title="播放整页"> | |
| <i class="fas fa-play-circle"></i> | |
| <span>播放</span> | |
| </button> | |
| <button class="control-btn" id="bookmarkBtn" title="书签"> | |
| <i class="fas fa-bookmark"></i> | |
| </button> | |
| <button class="control-btn" id="searchBtn" title="搜索"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="control-btn" id="settingsBtn" title="设置"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- 主要内容区域 --> | |
| <main class="main-content"> | |
| <!-- 页面导航 --> | |
| <nav class="page-navigation"> | |
| <button class="nav-btn" id="prevBtn" title="上一页"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <div class="page-info"> | |
| <span id="currentPage">1</span> / <span id="totalPages">63</span> | |
| </div> | |
| <button class="nav-btn" id="nextBtn" title="下一页"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill"></div> | |
| </div> | |
| </nav> | |
| <!-- 页面内容显示区域 --> | |
| <div class="page-container" id="pageContainer"> | |
| <div class="loading" id="loading"> | |
| <i class="fas fa-spinner fa-spin"></i> | |
| <p>加载中...</p> | |
| </div> | |
| <!-- 页面内容将动态插入这里 --> | |
| <div class="page-content" id="pageContent" style="display: none;"> | |
| <div class="page-image-container"> | |
| <img id="pageImage" class="page-image" alt="页面图片"> | |
| <div class="text-overlays" id="textOverlays"> | |
| <!-- 文本片段覆盖层将在这里动态生成 --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 底部控制面板 --> | |
| <div class="bottom-panel"> | |
| <div class="audio-player" id="audioPlayer" style="display: none;"> | |
| <audio id="audio" preload="none"></audio> | |
| <div class="audio-info"> | |
| <div class="audio-text" id="audioText">点击文本片段开始学习</div> | |
| <div class="audio-controls"> | |
| <button class="audio-btn" id="playPauseBtn"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <div class="audio-progress"> | |
| <div class="audio-timeline" id="audioTimeline"> | |
| <div class="audio-progress-bar" id="audioProgressBar"></div> | |
| </div> | |
| <div class="audio-time"> | |
| <span id="currentTime">0:00</span> / <span id="totalTime">0:00</span> | |
| </div> | |
| </div> | |
| <button class="audio-btn" id="repeatBtn" title="重复播放"> | |
| <i class="fas fa-redo"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- 搜索面板 --> | |
| <div class="search-panel" id="searchPanel" style="display: none;"> | |
| <div class="search-content"> | |
| <div class="search-header"> | |
| <h3>搜索内容</h3> | |
| <button class="close-btn" id="closeSearch"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="search-body"> | |
| <div class="search-input-container"> | |
| <input type="text" id="searchInput" placeholder="搜索文本内容..." autocomplete="off"> | |
| <button class="search-btn" id="doSearch"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="search-results" id="searchResults"> | |
| <div class="search-empty">输入关键词开始搜索</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 书签面板 --> | |
| <div class="bookmark-panel" id="bookmarkPanel" style="display: none;"> | |
| <div class="bookmark-content"> | |
| <div class="bookmark-header"> | |
| <h3>我的书签</h3> | |
| <button class="close-btn" id="closeBookmark"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="bookmark-body"> | |
| <div class="bookmark-list" id="bookmarkList"> | |
| <div class="bookmark-empty">还没有添加任何书签</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 设置面板 --> | |
| <div class="settings-panel" id="settingsPanel" style="display: none;"> | |
| <div class="settings-content"> | |
| <div class="settings-header"> | |
| <h3>设置</h3> | |
| <button class="close-btn" id="closeSettings"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="settings-body"> | |
| <div class="setting-item"> | |
| <label>自动显示翻译</label> | |
| <input type="checkbox" id="autoTranslation"> | |
| </div> | |
| <div class="setting-item"> | |
| <label>播放速度</label> | |
| <select id="playbackSpeed"> | |
| <option value="0.5">0.5x</option> | |
| <option value="0.75">0.75x</option> | |
| <option value="1" selected>1x</option> | |
| <option value="1.25">1.25x</option> | |
| <option value="1.5">1.5x</option> | |
| </select> | |
| </div> | |
| <div class="setting-item"> | |
| <label>自动播放下一个</label> | |
| <input type="checkbox" id="autoPlayNext"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 消息提示 --> | |
| <div class="toast" id="toast"></div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |