中科集团HTML托管
返回管理
编辑页面
页面标题
有效期
7天
30天
90天
修改后将从当前时间重新计算过期时间
CSS文件（可选）
JS文件（可选）
HTML内容
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>单词背背 - 英语单词背诵小程序</title> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="pages.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css"> </head> <body> <div class="app-container"> <!-- 页面容器 --> <div class="page-container"> <!-- ==================== 一级页面 ==================== --> <!-- 首页 --> <div class="page active" id="page-home"> <div class="home-header"> <div class="greeting"> <h1>你好，学习者 👋</h1> <p class="date" id="current-date"></p> </div> <div class="user-avatar-small" onclick="goToPage('profile')"> <img src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix" alt="头像"> </div> </div> <div class="stats-cards"> <div class="stat-card"> <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"> <i class="ri-fire-fill"></i> </div> <div class="stat-info"> <span class="stat-value" id="streak-days">7</span> <span class="stat-label">连续打卡</span> </div> </div> <div class="stat-card"> <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);"> <i class="ri-book-open-fill"></i> </div> <div class="stat-info"> <span class="stat-value" id="words-learned">328</span> <span class="stat-label">已学单词</span> </div> </div> </div> <div class="today-plan" onclick="goToPage('plan-detail')"> <div class="plan-header"> <h3>今日学习计划</h3> <span class="plan-progress">12/20</span> </div> <div class="progress-bar"> <div class="progress-fill" style="width: 60%;"></div> </div> <p class="plan-tip">完成今日计划，解锁新单词！</p> </div> <div class="section-title"> <h3>每日英语新闻</h3> <span class="more-link" onclick="goToPage('news')">更多 <i class="ri-arrow-right-s-line"></i></span> </div> <div class="news-scroll"> <div class="news-card" onclick="goToPage('news-detail-1')"> <div class="news-image" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);"> <i class="ri-robot-line"></i> </div> <div class="news-content"> <span class="news-tag">科技</span> <h4>AI Technology Breakthrough</h4> <p>New advances in artificial intelligence are...</p> </div> </div> <div class="news-card" onclick="goToPage('news-detail-2')"> <div class="news-image" style="background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);"> <i class="ri-earth-line"></i> </div> <div class="news-content"> <span class="news-tag">环境</span> <h4>Climate Change Summit</h4> <p>World leaders discuss new environmental...</p> </div> </div> <div class="news-card" onclick="goToPage('news-detail-3')"> <div class="news-image" style="background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);"> <i class="ri-briefcase-line"></i> </div> <div class="news-content"> <span class="news-tag">商业</span> <h4>Global Market Trends</h4> <p>Economic experts analyze current market...</p> </div> </div> </div> <div class="quick-actions"> <div class="action-btn" onclick="goToPage('test')"> <i class="ri-sparkling-fill"></i> <span>单词自检</span> </div> <div class="action-btn" onclick="goToPage('checkin')"> <i class="ri-calendar-check-fill"></i> <span>每日打卡</span> </div> <div class="action-btn" onclick="goToPage('wordbook')"> <i class="ri-bookmark-fill"></i> <span>我的单词本</span> </div> </div> </div> <!--单词页 --> <div class="page" id="page-words"> <div class="page-header"> <h1>单词学习</h1> <button class="search-btn" onclick="goToPage('search')"> <i class="ri-search-line"></i> </button> </div> <div class="word-plan-tabs"> <div class="tab active" data-plan="cet4">四级词汇</div> <div class="tab" data-plan="cet6">六级词汇</div> <div class="tab" data-plan="ielts">雅思词汇</div> <div class="tab" data-plan="toefl">托福词汇</div> </div> <div class="plan-info"> <div class="plan-badge cet4">四级</div> <div class="plan-stats"> <span>进度 45%</span> <span>·</span> <span>已学 1350</span> <span>·</span> <span>剩余 1650</span> </div> </div> <div class="current-word"> <div class="word-card"> <div class="word-content"> <span class="word-number">#1351</span> <h2 class="word-text">paradigm</h2> <div class="word-phonetic"> <span>[ˈpærədaɪm]</span> <button class="play-audio" onclick="playAudio('paradigm')"> <i class="ri-volume-up-line"></i> </button> </div> <div class="word-pos">n. 典范；范式；样板</div> </div> <div class="word-actions"> <button class="action-forgot" onclick="markWord('forgot')"> <i class="ri-close-line"></i> 不认识 </button> <button class="action-known" onclick="markWord('known')"> <i class="ri-check-line"></i> 认识 </button> </div> </div> </div> <div class="word-details" id="word-details"> <div class="detail-section"> <h4><i class="ri-translate-2"></i> 例句</h4> <p class="example">This discovery caused a <strong>paradigm</strong> shift in our understanding of physics.</p> <p class="example-trans">这一发现使我们对物理学的理解发生了范式转变。</p> </div> <div class="detail-section"> <h4><i class="ri-links-line"></i> 同根词</h4> <div class="word-chips"> <span class="chip">paradigmatic</span> <span class="chip">paradigm shift</span> </div> </div> <div class="detail-section"> <h4><i class="ri-lightbulb-line"></i> 记忆技巧</h4> <p class="memory-tip">para-(旁边) + digm(显示) → 在旁边显示 → 示范 → 典范</p> </div> </div> <div class="study-modes"> <h4>学习模式</h4> <div class="mode-cards"> <div class="mode-card" onclick="startStudy('memorize')"> <i class="ri-brain-line"></i> <span>背诵模式</span> </div> <div class="mode-card" onclick="startStudy('test')"> <i class="ri-file-edit-line"></i> <span>测验模式</span> </div> <div class="mode-card" onclick="startStudy('review')"> <i class="ri-history-line"></i> <span>复习模式</span> </div> </div> </div> </div> <!-- 我的页面 --> <div class="page" id="page-profile"> <div class="profile-header"> <div class="profile-bg"></div> <div class="profile-info"> <div class="profile-avatar"> <img src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix" alt="头像"> <button class="avatar-edit" onclick="goToPage('edit-avatar')"><i class="ri-camera-line"></i></button> </div> <h2 class="profile-name">英语学习者</h2> <p class="profile-level"> <i class="ri-vip-diamond-fill"></i> Lv.12 单词达人 </p> </div> </div> <div class="profile-stats"> <div class="profile-stat"> <span class="value">7</span> <span class="label">连续天数</span> </div> <div class="profile-stat"> <span class="value">328</span> <span class="label">已学单词</span> </div> <div class="profile-stat"> <span class="value">89%</span> <span class="label">正确率</span> </div> <div class="profile-stat"> <span class="value">45</span> <span class="label">学习时长(分钟)</span> </div> </div> <div class="menu-section"> <h3>学习管理</h3> <div class="menu-list"> <div class="menu-item" onclick="goToPage('wordbook')"> <i class="ri-bookmark-line"></i> <span>我的单词本</span> <span class="badge">12</span> <i class="ri-arrow-right-s-line"></i> </div> <div class="menu-item" onclick="goToPage('wrong-words')"> <i class="ri-error-warning-line"></i> <span>错题本</span> <span class="badge warning">5</span> <i class="ri-arrow-right-s-line"></i> </div> <div class="menu-item" onclick="goToPage('record')"> <i class="ri-calendar-line"></i> <span>学习记录</span> <i class="ri-arrow-right-s-line"></i> </div> <div class="menu-item" onclick="goToPage('achievement')"> <i class="ri-trophy-line"></i> <span>我的成就</span> <i class="ri-arrow-right-s-line"></i> </div> </div> </div> <div class="menu-section"> <h3>设置</h3> <div class="menu-list"> <div class="menu-item" onclick="goToPage('account')"> <i class="ri-user-settings-line"></i> <span>账号设置</span> <i class="ri-arrow-right-s-line"></i> </div> <div class="menu-item" onclick="goToPage('settings')"> <i class="ri-settings-3-line"></i> <span>学习设置</span> <i class="ri-arrow-right-s-line"></i> </div> <div class="menu-item"> <i class="ri-notification-3-line"></i> <span>每日提醒</span> <label class="switch"> <input type="checkbox" checked> <span class="slider"></span> </label> </div> </div> </div> <button class="logout-btn" onclick="logout()"> <i class="ri-logout-box-r-line"></i> 退出登录 </button> </div> <!-- ==================== 二级页面 ==================== --> <!-- 单词计划详情页 --> <div class="page" id="page-plan-detail"> <div class="page-header with-back"> <div class="back-btn" onclick="goBack()"> <i class="ri-arrow-left-line"></i> </div> <h1>四级词汇计划</h1> <div class="header-right"></div> </div> <div class="plan-overview"> <div class="overview-card"> <div class="overview-circle"> <svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="45" class="bg-circle"/> <circle cx="50" cy="50" r="45" class="progress-circle" style="stroke-dashoffset: 175;"/> </svg> <div class="overview-text"> <span class="percent">45%</span> <span class="label">完成</span> </div> </div> <div class="overview-stats"> <div class="stat-item"> <i class="ri-book-open-line"></i> <div> <span class="value">1350</span> <span class="label">已学</span> </div> </div> <div class="stat-item"> <i class="ri-time-line"></i> <div> <span class="value">30天</span> <span class="label">已用时</span> </div> </div> <div class="stat-item"> <i class="ri-fire-line"></i> <div> <span class="value">7天</span> <span class="label">连续学习</span> </div> </div> </div> </div> </div> <div class="plan-sections"> <h3>计划内容</h3> <div class="section-list"> <div class="section-item completed"> <div class="section-icon"><i class="ri-check-line"></i></div> <div class="section-info"> <h4>第一阶段：基础词汇 (1-500)</h4> <p>已掌握 500 词</p> </div> <span class="section-status">已完成</span> </div> <div class="section-item completed"> <div class="section-icon"><i class="ri-check-line"></i></div> <div class="section-info"> <h4>第二阶段：进阶词汇 (501-1000)</h4> <p>已掌握 500 词</p> </div> <span class="section-status">已完成</span> </div> <div class="section-item active"> <div class="section-icon"><i class="ri-loader-4-line"></i></div> <div class="section-info"> <h4>第三阶段：高阶词汇 (1001-1500)</h4> <p>学习中 350/500</p> </div> <span class="section-status in-progress">进行中</span> </div> <div class="section-item"> <div class="section-icon"><i class="ri-lock-line"></i></div> <div class="section-info"> <h4>第四阶段：核心词汇 (1501-2000)</h4> <p>未开始</p> </div> <span class="section-status locked">未解锁</span> </div> <div class="section-item"> <div class="section-icon"><i class="ri-lock-line"></i></div> <div class="section-info"> <h4>第五阶段：拔高词汇 (2001-2500)</h4> <p>未开始</p> </div> <span class="section-status locked">未解锁</span> </div> </div> </div> <div class="page-action"> <button class="primary-btn" onclick="goToPage('words'); switchTab('words')"> <i class="ri-play-fill"></i> 继续学习 </button> </div> </div> <!-- 新闻列表页 --> <div class="page" id="page-news"> <div class="page-header with-back"> <div class="back-btn" onclick="goBack()"> <i class="ri-arrow-left-line"></i> </div> <h1>每日英语新闻</h1> <div class="header-right"></div> </div> <div class="news-filter"> <span class="filter-tag active">全部</span> <span class="filter-tag">科技</span> <span class="filter-tag">商业</span> <span class="filter-tag">环境</span> <span class="filter-tag">文化</span> <span class="filter-tag">体育</span> </div> <div class="news-list"> <div class="news-list-item" onclick="goToPage('news-detail-1')"> <div class="news-thumb" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);"> <i class="ri-robot-line"></i> </div> <div class="news-list-content"> <h4>AI Technology Breakthrough: New Advances in Artificial Intelligence</h4> <div class="news-meta"> <span class="news-tag">科技</span> <span class="news-date">2026-04-22</span> </div> <p class="news-excerpt">New advances in artificial intelligence are transforming industries worldwide...</p> </div> </div> <div class="news-list-item" onclick="goToPage('news-detail-2')"> <div class="news-thumb" style="background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);"> <i class="ri-earth-line"></i> </div> <div class="news-list-content"> <h4>Climate Change Summit: World Leaders Discuss Environmental Policies</h4> <div class="news-meta"> <span class="news-tag">环境</span> <span class="news-date">2026-04-21</span> </div> <p class="news-excerpt">World leaders gather to discuss new environmental protection measures...</p> </div> </div> <div class="news-list-item" onclick="goToPage('news-detail-3')"> <div class="news-thumb" style="background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);"> <i class="ri-briefcase-line"></i> </div> <div class="news-list-content"> <h4>Global Market Trends: Economic Analysis and Predictions</h4> <div class="news-meta"> <span class="news-tag">商业</span> <span class="news-date">2026-04-20</span> </div> <p class="news-excerpt">Economic experts analyze current market trends and provide predictions...</p> </div> </div> <div class="news-list-item" onclick="goToPage('news-detail-4')"> <div class="news-thumb" style="background: linear-gradient(135deg, #ffd1ff 0%, #ffc3a0 100%);"> <i class="ri-palette-line"></i> </div> <div class="news-list-content"> <h4>Cultural Exchange: International Art Exhibition Opens in Beijing</h4> <div class="news-meta"> <span class="news-tag">文化</span> <span class="news-date">2026-04-19</span> </div> <p class="news-excerpt">A grand international art exhibition featuring works from 50 countries...</p> </div> </div> <div class="news-list-item" onclick="goToPage('news-detail-5')"> <div class="news-thumb" style="background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);"> <i class="ri-medal-line"></i> </div> <div class="news-list-content"> <h4>Sports News: Championship Finals Set for Weekend</h4> <div class="news-meta"> <span class="news-tag">体育</span> <span class="news-date">2026-04-18</span> </div> <p class="news-excerpt">The most anticipated championship finals of the year are scheduled...</p> </div> </div> </div> </div> <!-- 新闻详情页 --> <div class="page" id="page-news-detail-1"> <div class="page-header with-back transparent"> <div class="back-btn white" onclick="goBack()"> <i class="ri-arrow-left-line"></i> </div> <div class="header-right"> <button class="icon-btn"><i class="ri-share-line"></i></button> <button class="icon-btn"><i class="ri-bookmark-line"></i></button> </div> </div> <div class="news-hero" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);"> <i class="ri-robot-line"></i> </div> <div class="news-detail-content"> <span class="news-tag primary">科技</span> <h1 class="news-title">AI Technology Breakthrough: New Advances in Artificial Intelligence</h1> <div class="news-info"> <span><i class="ri-calendar-line"></i> 2026-04-22</span> <span><i class="ri-eye-line"></i> 2,345 阅读</span> </div> <div class="news-body"> <p>New advances in artificial intelligence are transforming industries worldwide. Researchers have developed a new machine learning model that can understand and generate human-like text with unprecedented accuracy.</p> <p>The breakthrough, announced at the International AI Conference, represents a significant leap forward in natural language processing. The new system can understand context, nuance, and even sarcasm better than previous models.</p> <h3>Key Features</h3> <ul> <li>Enhanced natural language understanding</li> <li>Improved context awareness</li> <li>Better emotional intelligence</li> <li>Faster processing speed</li> </ul> <h3>Impact on Industries</h3> <p>Experts predict this technology will revolutionize healthcare, education, and customer service sectors. "This is just the beginning," said Dr. Smith, lead researcher on the project.</p> <blockquote>"Artificial intelligence is not about replacing humans, but augmenting human capabilities."</blockquote> </div> <div class="vocabulary-section"> <h3><i class="ri-translate-2"></i> 本文关键词汇</h3> <div class="vocab-list"> <div class="vocab-item"> <span class="word">artificial intelligence</span> <span class="trans">人工智能</span> </div> <div class="vocab-item"> <span class="word">breakthrough</span> <span class="trans">突破</span> </div> <div class="vocab-item"> <span class="word">machine learning</span> <span class="trans">机器学习</span> </div> <div class="vocab-item"> <span class="word">natural language</span> <span class="trans">自然语言</span> </div> </div> </div> </div> </div> <!-- 单词自检页 --> <div class="page" id="page-test"> <div class="page-header with-back"> <div class="back-btn" onclick="goBack()"> <i class="ri-arrow-left-line"></i> </div> <h1>单词自检</h1> <div class="header-right"></div> </div> <div class="test-mode-selector"> <div class="mode-option active"> <i class="ri-checkbox-circle-line"></i> <span>选择题</span> </div> <div class="mode-option" onclick="showToast('该模式即将上线', 'info')"> <i class="ri-input-cursor-move"></i> <span>拼写题</span> </div> <div class="mode-option" onclick="showToast('该模式即将上线', 'info')"> <i class="ri-mic-line"></i> <span>听力题</span> </div> </div> <div class="test-progress-bar"> <div class="progress-track"> <div class="progress-fill" style="width: 50%;"></div> </div> <span class="progress-text">5/10</span> </div> <div class="test-card"> <div class="test-question-num">第 5 题</div> <div class="test-word-large">eloquent</div> <p class="test-instruction">请选择正确的中文释义</p> <div class="test-options-full"> <button class="test-option" onclick="selectTestOption(this, true)"> <span class="option-letter">A</span> <span class="option-text">雄辩的；有说服力的</span> </button> <button class="test-option" onclick="selectTestOption(this, false)"> <span class="option-letter">B</span> <span class="option-text">沉默的；安静的</span> </button> <button class="test-option" onclick="selectTestOption(this, false)"> <span class="option-letter">C</span> <span class="option-text">模糊的；不明确的</span> </button> <button class="test-option" onclick="selectTestOption(this, false)"> <span class="option-letter">D</span> <span class="option-text">简单的；朴素的</span> </button> </div> </div> <div class="test-feedback" style="display: none;"> <div class="feedback-icon correct"> <i class="ri-check-line"></i> </div> <div class="feedback-content"> <h4>回答正确！</h4> <p><strong>eloquent</strong> /ˈeləkwənt/</p> <p class="meaning">adj. 雄辩的；有说服力的</p> <p class="example">例句：She gave an eloquent speech that moved everyone in the audience.</p> <p class="example-trans">她发表了一篇雄辩的演讲，感动了所有观众。</p> </div> <button class="primary-btn next-question" onclick="nextTestQuestion()"> 下一题 <i class="ri-arrow-right-line"></i> </button> </div> </div> <!-- 每日打卡页 --> <div class="page" id="page-checkin"> <div class="page-header with-back"> <div class="back-btn" onclick="goBack()"> <i class="ri-arrow-left-line"></i> </div> <h1>每日打卡</h1> <div class="header-right"></div> </div> <div class="checkin-main"> <div class="checkin-streak"> <div class="streak-circle"> <span class="streak-num">7</span> <span class="streak-label">连续打卡</span> </div> </div> <div class="checkin-calendar-full"> <div class="calendar-header"> <button class="cal-nav"><i class="ri-arrow-left-s-line"></i></button> <span class="cal-month">2026年4月</span> <button class="cal-nav"><i class="ri-arrow-right-s-line"></i></button> </div> <div class="calendar-grid"> <div class="cal-weekday">一</div> <div class="cal-weekday">二</div> <div class="cal-weekday">三</div> <div class="cal-weekday">四</div> <div class="cal-weekday">五</div> <div class="cal-weekday">六</div> <div class="cal-weekday">日</div> <div class="cal-day empty"></div> <div class="cal-day empty"></div> <div class="cal-day checked past">1</div> <div class="cal-day checked past">2</div> <div class="cal-day checked past">3</div> <div class="cal-day checked past">4</div> <div class="cal-day checked past">5</div> <div class="cal-day checked past">6</div> <div class="cal-day checked past">7</div> <div class="cal-day checked past">8</div> <div class="cal-day checked past">9</div> <div class="cal-day checked past">10</div> <div class="cal-day checked past">11</div> <div class="cal-day checked past">12</div> <div class="cal-day checked past">13</div> <div class="cal-day checked past">14</div> <div class="cal-day checked past">15</div> <div class="cal-day checked past">16</div> <div class="cal-day checked past">17</div> <div class="cal-day checked past">18</div> <div class="cal-day checked past">19</div> <div class="cal-day checked today">20</div> <div class="cal-day">21</div> <div class="cal-day">22</div> <div class="cal-day">23</div> <div class="cal-day">24</div> <div class="cal-day">25</div> <div class="cal-day">26</div> <div class="cal-day">27</div> <div class="cal-day">28</div> <div class="cal-day">29</div> <div class="cal-day">30</div> </div> </div> <div class="checkin-rewards"> <h3>打卡奖励</h3> <div class="reward-cards"> <div class="reward-card earned"> <div class="reward-icon"><i class="ri-fire-fill"></i></div> <span class="reward-name">连续7天</span> <span class="reward-status">已获得</span> </div> <div class="reward-card"> <div class="reward-icon"><i class="ri-star-fill"></i></div> <span class="reward-name">连续30天</span> <span class="reward-status">进行中</span> </div> <div class="reward-card locked"> <div class="reward-icon"><i class="ri-medal-fill"></i></div> <span class="reward-name">连续100天</span> <span class="reward-status">23天后解锁</span> </div> </div> </div> </div> </div> <!-- 单词搜索页 --> <div class="page" id="page-search"> <div class="search-page-header"> <div class="search-input-full"> <i class="ri-search-line"></i> <input type="text" placeholder="输入单词搜索..." id="search-input-full" autofocus> <button class="search-clear" onclick="clearSearch()"><i class="ri-close-circle-line"></i></button> </div> <button class="cancel-search" onclick="goBack()">取消</button> </div> <div class="search-content"> <div class="search-section"> <h4>搜索历史</h4> <div class="history-list"> <span class="history-item" onclick="doSearch('paradigm')">paradigm</span> <span class="history-item" onclick="doSearch('serendipity')">serendipity</span> <span class="history-item" onclick="doSearch('eloquent')">eloquent</span> <span class="history-item" onclick="doSearch('ambiguous')">ambiguous</span> </div> </div> <div class="search-section"> <h4>热门搜索</h4> <div class="history-list"> <span class="history-item hot">ambiguous</span> <span class="history-item hot">comprehensive</span> <span class="history-item hot">sustainable</span> <span class="history-item hot">innovation</span> <span class="history-item hot">paradigm</span> <span class="history-item hot">eloquent</span> </div> </div> </div> <div class="search-result-detail" style="display: none;"> <div class="result-word-card"> <h2 class="result-word">paradigm</h2> <div class="result-phonetic"> <span>[ˈpærədaɪm]</span> <button onclick="playAudio('paradigm')"><i class="ri-volume-up-line"></i></button> </div> <div class="result-pos">n. 典范；范式；样板</div> </div> <div class="result-sections"> <div class="result-section"> <h4><i class="ri-translate-2"></i> 例句</h4> <p class="example">This discovery caused a <strong>paradigm</strong> shift in our understanding.</p> <p class="trans">这一发现使我们对物理学的理解发生了范式转变。</p> </div> <div class="result-section"> <h4><i class="ri-links-line"></i> 同根词</h4> <div class="word-chips"> <span class="chip">paradigmatic</span> <span class="chip">paradigm shift</span> </div> </div> </div> <button class="add-to-bookmark"><i class="ri-bookmark-add-line"></i> 加入单词本</button> </div> </div> <!-- 单词本页面 --> <div class="page" id="page-wordbook"> <div class="page-header with-back"> <div class="back-btn" onclick="goBack()"> <i class="ri-arrow-left-line"></i> </div> <h1>我的单词本</h1> <div class="header-right"> <button class="icon-btn"><i class="ri-add-line"></i></button> </div> </div> <div class="wordbook-tabs-full"> <span class="tab active" onclick="switchWordbookTab(this, 'collected')">收藏的</span> <span class="tab" onclick="switchWordbookTab(this, 'mastered')">已掌握</span> <span class="tab" onclick="switchWordbookTab(this, 'unmastered')">未掌握</span> </div> <div class="wordbook-full-list"> <div class="wordbook-full-item"> <div class="wordbook-word"> <h4>paradigm</h4> <p>[ˈpærədaɪm] n. 典范；范式</p> </div> <div class="wordbook-actions"> <button class="wb-btn" onclick="playAudio('paradigm')"><i class="ri-volume-up-line"></i></button> <button class="wb-btn active"><i class="ri-bookmark-3-fill"></i></button> </div> </div> <div class="wordbook-full-item"> <div class="wordbook-word"> <h4>serendipity</h4> <p>[ˌserənˈdɪpəti] n. 意外发现；机缘巧合</p> </div> <div class="wordbook-actions"> <button class="wb-btn" onclick="playAudio('serendipity')"><i class="ri-volume-up-line"></i></button> <button class="wb-btn active"><i class="ri-bookmark-3-fill"></i></button> </div> </div> <div class="wordbook-full-item"> <div class="wordbook-word"> <h4>eloquent</h4> <p>[ˈeləkwənt] adj. 雄辩的；有说服力的</p> </div> <div class="wordbook-actions"> <button class="wb-btn" onclick="playAudio('eloquent')"><i class="ri-volume-up-line"></i></button> <button class="wb-btn active"><i class="ri-bookmark-3-fill"></i></button> </div> </div> <div class="wordbook-full-item"> <div class="wordbook-word"> <h4>ambiguous</h4> <p>[æmˈbɪɡjuəs] adj. 模糊的；不明确的</p> </div> <div class="wordbook-actions"> <button class="wb-btn" onclick="playAudio('ambiguous')"><i class="ri-volume-up-line"></i></button> <button class="wb-btn active"><i class="ri-bookmark-3-fill"></i></button> </div> </div> </div> </div> <!-- 错题本页面 --> <div class="page" id="page-wrong-words"> <div class="page-header with-back"> <div class="back-btn" onclick="goBack()"> <i class="ri-arrow-left-line"></i> </div> <h1>错题本</h1> <div class="header-right"></div> </div> <div class="wrong-words-stats"> <div class="stat-box"> <span class="stat-num">5</span> <span class="stat-label">待复习</span> </div> <div class="stat-box"> <span class="stat-num">12</span> <span class="stat-label">已掌握</span> </div> <div class="stat-box"> <span class="stat-num">89%</span> <span class="stat-label">正确率</span> </div> </div> <div class="wrong-words-list"> <div class="wrong-word-card"> <div class="wrong-word-header"> <span class="wrong-count">错误 3 次</span> <span class="wrong-date">上次: 2天前</span> </div> <div class="wrong-word-content"> <h4>ubiquitous</h4> <p>你的答案: <span class="wrong-answer">到处存在的</span></p> <p>正确答案: <span class="correct-answer">无处不在的；普遍存在的</span></p> </div> <div class="wrong-word-actions"> <button class="review-btn" onclick="showToast('开始复习', 'info')"> <i class="ri-repeat-line"></i> 复习 </button> <button class="mastered-btn" onclick="showToast('已移至已掌握', 'success')"> <i class="ri-check-line"></i> 已掌握 </button> </div> </div> <div class="wrong-word-card"> <div class="wrong-word-header"> <span class="wrong-count">错误 2 次</span> <span class="wrong-date">上次: 5天前</span> </div> <div class="wrong-word-content"> <h4>ephemeral</h4> <p>你的答案: <span class="wrong-answer">永久的</span></p> <p>正确答案: <span class="correct-answer">短暂的；朝生暮死的</span></p> </div> <div class="wrong-word-actions"> <button class="review-btn" onclick="showToast('开始复习', 'info')"> <i class="ri-repeat-line"></i> 复习 </button> <button class="mastered-btn" onclick="showToast('已移至已掌握', 'success')"> <i class="ri-check-line"></i> 已掌握 </button> </div> </div> <div class="wrong-word-card"> <div class="wrong-word-header"> <span class="wrong-count">错误 1 次</span> <span class="wrong-date">上次: 1天前</span> </div> <div class="wrong-word-content"> <h4>benevolent</h4> <p>你的答案: <span class="wrong-answer">邪恶的</span></p> <p>正确答案: <span class="correct-answer">善良的；仁慈的</span></p> </div> <div class="wrong-word-actions"> <button class="review-btn" onclick="showToast('开始复习', 'info')"> <i class="ri-repeat-line"></i> 复习 </button> <button class="mastered-btn" onclick="showToast('已移至已掌握', 'success')"> <i class="ri-check-line"></i> 已掌握 </button> </div> </div> </div> </div> <!-- 学习记录页面 --> <div class="page" id="page-record"> <div class="page-header with-back"> <div class="back-btn" onclick="goBack()"> <i class="ri-arrow-left-line"></i> </div> <h1>学习记录</h1> <div class="header-right"></div> </div> <div class="record-summary"> <div class="summary-card"> <div class="summary-chart"> <div class="chart-bar" style="height: 40%;"></div> <div class="chart-bar" style="height: 60%;"></div> <div class="chart-bar" style="height: 45%;"></div> <div class="chart-bar" style="height: 80%;"></div> <div class="chart-bar" style="height: 70%;"></div> <div class="chart-bar" style="height: 90%;"></div> <div class="chart-bar active" style="height: 55%;"></div> </div> <span class="chart-label">本周学习时长</span> </div> </div> <div class="record-stats-grid"> <div class="record-stat"> <span class="rstat-value">45</span> <span class="rstat-label">今日学习(分钟)</span> </div> <div class="record-stat"> <span class="rstat-value">20</span> <span class="rstat-label">今日单词</span> </div> <div class="record-stat"> <span class="rstat-value">92%</span> <span class="rstat-label">正确率</span> </div> <div class="record-stat"> <span class="rstat-value">328</span> <span class="rstat-label">总单词</span> </div> </div> <div class="record-list"> <h3>学习历史</h3> <div class="record-item"> <div class="record-date"> <span class="day">22</span> <span class="month">4月</span> </div> <div class="record-content"> <h4>学习四级词汇</h4> <p>学习了 20 个新词，复习 30 个</p> <div class="record-progress"> <div class="progress-bar"> <div class="progress-fill" style="width: 65%;"></div> </div> <span>65% 正确率</span> </div> </div> </div> <div class="record-item"> <div class="record-date"> <span class="day">21</span> <span class="month">4月</span> </div> <div class="record-content"> <h4>单词自检测试</h4> <p>完成了 10 道测试题</p> <div class="record-progress"> <div class="progress-bar"> <div class="progress-fill" style="width: 80%;"></div> </div> <span>80% 正确率</span> </div> </div> </div> <div class="record-item"> <div class="record-date"> <span class="day">20</span> <span class="month">4月</span> </div> <div class="record-content"> <h4>复习错题本</h4> <p>复习了 8 个易错单词</p> <div class="record-progress"> <div class="progress-bar"> <div class="progress-fill" style="width: 75%;"></div> </div> <span>75% 正确率</span> </div> </div> </div> </div> </div> <!-- 成就页面 --> <div class="page" id="page-achievement"> <div class="page-header with-back"> <div class="back-btn" onclick="goBack()"> <i class="ri-arrow-left-line"></i> </div> <h1>我的成就</h1> <div class="header-right"></div> </div> <div class="achievement-progress"> <div class="ach-progress-circle"> <svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="45" class="bg-circle"/> <circle cx="50" cy="50" r="45" class="progress-circle" style="stroke-dashoffset: 120;"/> </svg> <div class="ach-progress-text"> <span class="num">12</span> <span class="label">已获得</span> </div> </div> <p class="ach-tip">再获得 8 个成就即可解锁"单词大师"称号</p> </div> <div class="achievement-list"> <div class="achievement-card earned"> <div class="ach-icon"><i class="ri-fire-fill"></i></div> <div class="ach-info"> <h4>连续7天学习</h4> <p>保持连续学习7天</p> </div> <span class="ach-status">已获得</span> </div> <div class="achievement-card earned"> <div class="ach-icon"><i class="ri-book-open-fill"></i></div> <div class="ach-info"> <h4>单词达人</h4> <p>学习超过300个单词</p> </div> <span class="ach-status">已获得</span> </div> <div class="achievement-card earned"> <div class="ach-icon"><i class="ri-brain-fill"></i></div> <div class="ach-info"> <h4>记忆力大师</h4> <p>正确率达到90%以上</p> </div> <span class="ach-status">已获得</span> </div> <div class="achievement-card"> <div class="ach-icon locked"><i class="ri-medal-fill"></i></div> <div class="ach-info"> <h4>坚持30天</h4> <p>连续学习30天</p> </div> <span class="ach-status locked">23天后再来</span> </div> <div class="achievement-card"> <div class="ach-icon locked"><i class="ri-star-fill"></i></div> <div class="ach-info"> <h4>词汇量500+</h4> <p>学习超过500个单词</p> </div> <span class="ach-status locked">还需172个</span> </div> <div class="achievement-card"> <div class="ach-icon locked"><i class="ri-trophy-fill"></i></div> <div class="ach-info"> <h4>全能学霸</h4> <p>完成所有词汇计划</p> </div> <span class="ach-status locked">0%</span> </div> </div> </div> <!-- 账号设置页面 --> <div class="page" id="page-account"> <div class="page-header with-back"> <div class="back-btn" onclick="goBack()"> <i class="ri-arrow-left-line"></i> </div> <h1>账号设置</h1> <div class="header-right"></div> </div> <div class="account-section"> <div class="account-avatar-edit"> <img src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix" alt="头像"> <button class="change-avatar-btn"> <i class="ri-camera-line"></i> 更换头像 </button> </div> </div> <div class="settings-group"> <div class="setting-item"> <span class="setting-label">昵称</span> <div class="setting-value"> <span>英语学习者</span> <i class="ri-arrow-right-s-line"></i> </div> </div> <div class="setting-item"> <span class="setting-label">手机号</span> <div class="setting-value"> <span>138****8888</span> <i class="ri-arrow-right-s-line"></i> </div> </div> <div class="setting-item"> <span class="setting-label">邮箱</span> <div class="setting-value"> <span>未绑定</span> <i class="ri-arrow-right-s-line"></i> </div> </div> <div class="setting-item"> <span class="setting-label">修改密码</span> <div class="setting-value"> <i class="ri-arrow-right-s-line"></i> </div> </div> </div> <div class="settings-group"> <div class="setting-item"> <span class="setting-label">微信</span> <div class="setting-value"> <span class="connected">已绑定</span> <i class="ri-arrow-right-s-line"></i> </div> </div> <div class="setting-item"> <span class="setting-label">QQ</span> <div class="setting-value"> <span>未绑定</span> <i class="ri-arrow-right-s-line"></i> </div> </div> </div> <div class="settings-group"> <div class="setting-item danger" onclick="showToast('账号已注销', 'warning')"> <span class="setting-label">注销账号</span> <div class="setting-value"> <i class="ri-arrow-right-s-line"></i> </div> </div> </div> </div> <!-- 学习设置页面 --> <div class="page" id="page-settings"> <div class="page-header with-back"> <div class="back-btn" onclick="goBack()"> <i class="ri-arrow-left-line"></i> </div> <h1>学习设置</h1> <div class="header-right"></div> </div> <div class="settings-group"> <h4 class="group-title">每日目标</h4> <div class="setting-item"> <span class="setting-label">每日新词数</span> <div class="setting-value"> <span>20 词</span> <i class="ri-arrow-right-s-line"></i> </div> </div> <div class="setting-item"> <span class="setting-label">每日复习数</span> <div class="setting-value"> <span>50 词</span> <i class="ri-arrow-right-s-line"></i> </div> </div> <div class="setting-item"> <span class="setting-label">学习提醒时间</span> <div class="setting-value"> <span>09:00</span> <i class="ri-arrow-right-s-line"></i> </div> </div> </div> <div class="settings-group"> <h4 class="group-title">学习偏好</h4> <div class="setting-item"> <span class="setting-label">自动播放发音</span> <label class="switch"> <input type="checkbox" checked> <span class="slider"></span> </label> </div> <div class="setting-item"> <span class="setting-label">显示音标</span> <label class="switch"> <input type="checkbox" checked> <span class="slider"></span> </label> </div> <div class="setting-item"> <span class="setting-label">显示例句翻译</span> <label class="switch"> <input type="checkbox" checked> <span class="slider"></span> </label> </div> <div class="setting-item"> <span class="setting-label">记忆技巧提示</span> <label class="switch"> <input type="checkbox" checked> <span class="slider"></span> </label> </div> </div> <div class="settings-group"> <h4 class="group-title">测试设置</h4> <div class="setting-item"> <span class="setting-label">测试题数</span> <div class="setting-value"> <span>10 题</span> <i class="ri-arrow-right-s-line"></i> </div> </div> <div class="setting-item"> <span class="setting-label">错题自动复习</span> <label class="switch"> <input type="checkbox" checked> <span class="slider"></span> </label> </div> </div> <div class="settings-group"> <h4 class="group-title">其他</h4> <div class="setting-item"> <span class="setting-label">清除缓存</span> <div class="setting-value"> <span>12.5 MB</span> <i class="ri-arrow-right-s-line"></i> </div> </div> <div class="setting-item"> <span class="setting-label">关于我们</span> <div class="setting-value"> <i class="ri-arrow-right-s-line"></i> </div> </div> </div> </div> <!-- 修改头像页面 --> <div class="page" id="page-edit-avatar"> <div class="page-header with-back"> <div class="back-btn" onclick="goBack()"> <i class="ri-arrow-left-line"></i> </div> <h1>更换头像</h1> <div class="header-right"> <button class="save-btn" onclick="showToast('头像已保存', 'success'); goBack()">保存</button> </div> </div> <div class="avatar-preview-large"> <img src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix" alt="头像"> </div> <div class="avatar-styles"> <h4>选择风格</h4> <div class="style-grid"> <div class="style-item active"> <img src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix" alt="风格1"> </div> <div class="style-item"> <img src="https://api.dicebear.com/9.x/avataaars/svg?seed=Aneka" alt="风格2"> </div> <div class="style-item"> <img src="https://api.dicebear.com/9.x/avataaars/svg?seed=Bella" alt="风格3"> </div> <div class="style-item"> <img src="https://api.dicebear.com/9.x/avataaars/svg?seed=Charlie" alt="风格4"> </div> <div class="style-item"> <img src="https://api.dicebear.com/9.x/avataaars/svg?seed=Daisy" alt="风格5"> </div> <div class="style-item"> <img src="https://api.dicebear.com/9.x/avataaars/svg?seed=Eva" alt="风格6"> </div> </div> </div> </div> </div> <!-- 底部导航栏 --> <nav class="bottom-nav" id="bottom-nav"> <div class="nav-item active" data-page="home" onclick="goToTab('home')"> <i class="ri-home-5-fill"></i> <span>首页</span> </div> <div class="nav-item" data-page="words" onclick="goToTab('words')"> <i class="ri-book-open-line"></i> <span>单词</span> </div> <div class="nav-item" data-page="profile" onclick="goToTab('profile')"> <i class="ri-user-line"></i> <span>我</span> </div> </nav> </div> <!-- Toast提示 --> <div class="toast" id="toast"> <i class="toast-icon"></i> <span class="toast-text"></span> </div> <script src="script.js"></script> </body> </html>
保存更改
取消
访问码:
qrpj93xk
复制链接
重新生成