<!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="css/style.css">
    <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <!-- 动态视频背景 -->
    <video class="video-background" autoplay muted loop playsinline preload="metadata" disablepictureinpicture>
        <source src="assets/video/wallpaper.mp4" type="video/mp4">
        您的浏览器不支持视频标签。
    </video>

    <!-- 登录界面 -->
    <div class="login-overlay" id="login-overlay">
        <div class="login-container">
            <div class="login-header">
                <iconify-icon icon="mdi:book-open-outline" width="48" height="48"></iconify-icon>
                <h1>单词背诵助手</h1>
                <p>请登录以继续</p>
            </div>
            <div class="login-form">
                <div class="login-field">
                    <label for="login-username">
                        <iconify-icon icon="mdi:account-outline"></iconify-icon>
                        用户名
                    </label>
                    <input type="text" id="login-username" placeholder="请输入用户名" autocomplete="username">
                </div>
                <div class="login-field">
                    <label for="login-password">
                        <iconify-icon icon="mdi:lock-outline"></iconify-icon>
                        密码
                    </label>
                    <input type="password" id="login-password" placeholder="请输入密码" autocomplete="current-password">
                </div>
                <div class="login-error hidden" id="login-error"></div>
                <button id="login-btn" class="btn btn-primary login-btn">
                    <iconify-icon icon="mdi:login"></iconify-icon>
                    登 录
                </button>
                <button id="guest-btn" class="btn btn-secondary login-btn" style="margin-top:8px;">
                    <iconify-icon icon="mdi:account-outline"></iconify-icon>
                    游客登录
                </button>
            </div>
        </div>
    </div>

    <!-- 透明度控制面板 -->
    <div id="opacity-control">
        <div class="control-header">
            <iconify-icon icon="mdi:opacity" width="20" height="20"></iconify-icon>
            <span>透明度</span>
        </div>
        <div class="control-slider">
            <input type="range" id="opacity-slider" min="0" max="100" value="30">
            <div class="control-value" id="opacity-value">30%</div>
        </div>
    </div>

    <div class="container hidden" id="main-container">
        <header class="header">
            <h1><iconify-icon icon="mdi:book-open-outline"></iconify-icon> 单词背诵助手</h1>
            <p class="subtitle">高效记忆英语单词，提升词汇量</p>
            <div class="user-bar">
                <span class="user-info">
                    <iconify-icon icon="mdi:account-circle"></iconify-icon>
                    <span id="current-username">ETM</span>
                </span>
                <button id="logout-btn" class="btn-logout">
                    <iconify-icon icon="mdi:logout"></iconify-icon>
                    退出
                </button>
            </div>
        </header>

        <div class="main-content">
            <!-- 左侧控制面板 -->
            <aside class="sidebar">
                <div class="panel">
                    <h2><iconify-icon icon="mdi:cog-outline"></iconify-icon> 练习设置</h2>
                    <div class="form-group">
                        <label for="word-input"><iconify-icon icon="mdi:content-paste"></iconify-icon> 输入单词文本</label>
                        <textarea id="word-input" placeholder="每行一个单词，格式：英文=中文&#10;例如：apple=苹果&#10;banana=香蕉&#10;computer=计算机"></textarea>
                        <button id="confirm-btn" class="btn btn-confirm">
                            <iconify-icon icon="mdi:check-circle-outline"></iconify-icon> 确定
                        </button>
                        <p class="help-text">提示：使用 "英文=中文" 格式，每行一个单词</p>
                    </div>
                    <div class="form-group">
                        <label><iconify-icon icon="mdi:swap-horizontal"></iconify-icon> 练习模式</label>
                        <div class="radio-group">
                            <label class="radio">
                                <input type="radio" name="mode" value="en-to-cn" checked>
                                <span>看英语写中文</span>
                            </label>
                            <label class="radio">
                                <input type="radio" name="mode" value="cn-to-en">
                                <span>看中文写英语</span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="word-count"><iconify-icon icon="mdi:format-list-numbered"></iconify-icon> 出题数量</label>
                        <select id="word-count">
                            <option value="5">5个单词</option>
                            <option value="10" selected>10个单词</option>
                            <option value="20">20个单词</option>
                            <option value="50">50个单词</option>
                            <option value="100">100个单词</option>
                        </select>
                    </div>
                    <button id="start-btn" class="btn btn-primary">
                        <iconify-icon icon="mdi:play-circle-outline"></iconify-icon> 开始练习
                    </button>
                    <div class="practice-date-controls" style="position: relative; margin-top: 10px;">
                        <button id="practice-date-btn" class="btn btn-secondary">
                            <iconify-icon icon="mdi:calendar-clock"></iconify-icon> 按日期练习
                        </button>
                        <div id="practice-calendar-container" class="calendar-container hidden">
                            <!-- 日历组件将动态生成 -->
                        </div>
                    </div>
                    <hr>
                    <div class="stats">
                        <h3><iconify-icon icon="mdi:chart-line"></iconify-icon> 今日统计</h3>
                        <div class="stat-item">
                            <span>练习次数:</span>
                            <strong id="today-sessions">0</strong>
                        </div>
                        <div class="stat-item">
                            <span>总单词数:</span>
                            <strong id="today-words">0</strong>
                        </div>
                        <div class="stat-item">
                            <span>正确率:</span>
                            <strong id="today-accuracy">0%</strong>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- 中间练习区域 -->
            <main class="practice-area">
                <div class="panel">
                    <h2><iconify-icon icon="mdi:pencil-outline"></iconify-icon> 单词练习</h2>
                    <div class="practice-container" id="practice-container">
                        <div class="initial-state" id="initial-state">
                            <div class="welcome">
                                <iconify-icon icon="mdi:translate" width="60" height="60"></iconify-icon>
                                <h3>欢迎使用单词背诵助手</h3>
                                <p>请在左侧输入单词文本，选择练习模式，然后点击"开始练习"按钮。</p>
                            </div>
                        </div>
                        <div class="practice-state hidden" id="practice-state">
                            <div class="question-header">
                                <div class="progress">
                                    <div class="progress-bar" id="progress-bar"></div>
                                </div>
                                <div class="progress-text">
                                    进度: <span id="current-progress">0</span>/<span id="total-questions">0</span>
                                </div>
                            </div>
                            <div class="question-card">
                                <div class="question-type" id="question-type">
                                    <iconify-icon icon="mdi:earth"></iconify-icon> 看英语写中文
                                </div>
                                <div class="question-text" id="question-text">
                                    请准备开始...
                                </div>
                                <div class="answer-input">
                                    <input type="text" id="answer-input" placeholder="请输入您的答案...">
                                    <button id="hint-btn" class="btn btn-small btn-hint">
                                        <iconify-icon icon="mdi:lightbulb-outline"></iconify-icon> 提示
                                    </button>
                                </div>
                                <div class="hint-area hidden" id="hint-area">
                                    <p><strong>提示:</strong> <span id="hint-text"></span></p>
                                </div>
                                <div class="actions">
                                    <button id="check-btn" class="btn btn-primary">
                                        <iconify-icon icon="mdi:check-circle-outline"></iconify-icon> 验证答案
                                    </button>
                                    <button id="show-answer-btn" class="btn btn-secondary">
                                        <iconify-icon icon="mdi:eye-outline"></iconify-icon> 查看答案
                                    </button>
                                    <button id="skip-btn" class="btn btn-warning">
                                        <iconify-icon icon="mdi:skip-forward-outline"></iconify-icon> 跳过
                                    </button>
                                    <button id="next-btn" class="btn btn-success hidden">
                                        <iconify-icon icon="mdi:arrow-right-circle-outline"></iconify-icon> 下一题
                                    </button>
                                </div>
                            </div>
                            <div class="result-feedback hidden" id="result-feedback">
                                <div class="feedback correct hidden" id="feedback-correct">
                                    <iconify-icon icon="mdi:check-circle" width="48" height="48"></iconify-icon>
                                    <h3>答对了！</h3>
                                    <p>正确答案: <span id="correct-answer"></span></p>
                                    <p class="click-hint">点击任意位置继续</p>
                                </div>
                                <div class="feedback wrong hidden" id="feedback-wrong">
                                    <iconify-icon icon="mdi:close-circle" width="48" height="48"></iconify-icon>
                                    <h3>答错了！</h3>
                                    <p>正确答案: <span id="wrong-answer"></span></p>
                                    <p>请再试一次</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>

            <!-- 右侧图表区域 -->
            <aside class="chart-area">
                <div class="panel">
                    <h2><iconify-icon icon="mdi:chart-bar"></iconify-icon> 学习统计</h2>
                    <div class="tabs">
                        <button class="tab active" data-tab="history"><iconify-icon icon="mdi:plus-circle"></iconify-icon> 单词输入记录</button>
                        <button class="tab" data-tab="log"><iconify-icon icon="mdi:calendar-check"></iconify-icon> 学习打卡</button>
                        <button class="tab" data-tab="plan"><iconify-icon icon="mdi:clipboard-text"></iconify-icon> 计划任务</button>
                    </div>
                    <div class="tab-content">
                        <!-- 历史记录标签页 -->
                        <div class="tab-pane active" id="history-tab">
                            <div class="history-header">
                                <h3><iconify-icon icon="mdi:plus-circle"></iconify-icon> 单词输入记录</h3>
                                <div class="history-controls" style="position: relative;">
                                    <button id="calendar-toggle-btn" class="btn btn-secondary">
                                        <iconify-icon icon="mdi:calendar-clock"></iconify-icon>
                                        选择日期
                                    </button>
                                    <div id="calendar-container" class="calendar-container hidden">
                                        <!-- 日历组件将动态生成 -->
                                    </div>
                                </div>
                            </div>
                            <div class="history-list-container">
                                <div class="table-container">
                                    <table id="history-table">
                                        <thead>
                                            <tr>
                                                <th>时间</th>
                                                <th>单词</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="history-table-body">
                                            <tr class="empty-row">
                                                <td colspan="3">暂无单词输入记录</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="pagination" id="history-pagination">
                                    <button class="btn btn-small" id="history-prev">上一页</button>
                                    <span id="history-page-info">第 1 页</span>
                                    <button class="btn btn-small" id="history-next">下一页</button>
                                </div>
                                <div class="add-word-section" style="margin-top: 20px;">
                                    <h4><iconify-icon icon="mdi:plus"></iconify-icon> 添加新单词记录</h4>
                                    <div class="add-word-form">
                                        <textarea id="add-word-input" placeholder="输入单词，格式：英文=中文&#10;例如：apple=苹果" rows="2" style="width: 100%; margin-bottom: 10px;"></textarea>
                                        <button id="add-word-btn" class="btn btn-confirm">
                                            <iconify-icon icon="mdi:check-circle-outline"></iconify-icon> 添加单词
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 学习打卡标签页 -->
                        <div class="tab-pane hidden" id="log-tab">
                            <div class="log-header">
                                <h3><iconify-icon icon="mdi:calendar-check"></iconify-icon> 学习打卡记录</h3>
                                <div class="log-stats">
                                    <span>总打卡: <strong id="log-total-days">0</strong> 天</span>
                                    <span>总单词: <strong id="log-total-words">0</strong></span>
                                </div>
                            </div>
                            <div class="log-list-container">
                                <div class="table-container">
                                    <table id="log-table">
                                        <thead>
                                            <tr>
                                                <th>日期</th>
                                                <th>时间</th>
                                                <th>模式</th>
                                                <th>题数</th>
                                                <th>正确</th>
                                                <th>正确率</th>
                                            </tr>
                                        </thead>
                                        <tbody id="log-table-body">
                                            <tr class="empty-row">
                                                <td colspan="6">暂无学习记录</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- 计划任务标签页 -->
                        <div class="tab-pane hidden" id="plan-tab">
                            <div class="plan-header">
                                <h3><iconify-icon icon="mdi:clipboard-text"></iconify-icon> 计划任务</h3>
                                <button id="plan-add-btn" class="btn btn-primary btn-small">
                                    <iconify-icon icon="mdi:plus"></iconify-icon>
                                    添加计划
                                </button>
                            </div>
                            <div class="plan-add-form hidden" id="plan-add-form">
                                <textarea id="plan-input" placeholder="输入计划内容..." rows="3"></textarea>
                                <div class="plan-form-actions">
                                    <button id="plan-save-btn" class="btn btn-confirm btn-small">
                                        <iconify-icon icon="mdi:check"></iconify-icon> 保存
                                    </button>
                                    <button id="plan-cancel-btn" class="btn btn-secondary btn-small">
                                        <iconify-icon icon="mdi:close"></iconify-icon> 取消
                                    </button>
                                </div>
                            </div>
                            <div class="plan-list-container">
                                <ul id="plan-list">
                                    <li class="empty">暂无计划任务</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>
        </div>

        <footer class="footer">
            <p>单词背诵助手 &copy; 2026 - 专注于英语单词记忆</p>
            <p class="footer-links">
                <a href="#"><iconify-icon icon="mdi:help-circle-outline"></iconify-icon> 帮助</a> |
                <a href="#"><iconify-icon icon="mdi:cog-outline"></iconify-icon> 设置</a> |
                <a href="#"><iconify-icon icon="mdi:email-outline"></iconify-icon> 反馈</a>
            </p>
        </footer>
    </div>

    <!-- 弹窗遮罩 -->
    <div class="modal-overlay hidden" id="modal-overlay"></div>
    <div class="modal correct-modal hidden" id="correct-modal">
        <div class="modal-content">
            <iconify-icon icon="mdi:check-circle" class="success-icon" width="64" height="64"></iconify-icon>
            <h2>答对了！</h2>
            <p class="modal-answer">正确答案: <strong id="modal-correct-answer"></strong></p>
            <p class="modal-hint">点击任意位置继续下一题</p>
        </div>
    </div>

    <script src="js/script.js"></script>
</body>
</html>