reader-app/index.html at main · arkrolin/reader-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📚 冰织的TypeScript阅读器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="reader-container">
        <!-- 顶部控制栏 -->
        <header class="control-bar">
            <h1>📖 冰织的阅读器</h1>
            <div class="control-buttons">
                <button id="settingsBtn" class="btn btn-settings">⚙️ 设置</button>
                <button id="toggleAutoBtn" class="btn btn-auto">▶️ 自动播放</button>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="content-area" id="contentArea">
            <div class="page-content">
                <div id="content" class="text-content"></div>
                <div class="page-info">
                    <span id="pageInfo">1 / 1</span>
                </div>
            </div>
        </main>

        <!-- 底部翻页控制 -->
        <footer class="navigation-bar">
            <button id="prevBtn" class="nav-btn" title="上一页 (←键)">◀️ 上一页</button>
            <div class="page-indicator">
                <span id="currentPage">1</span> / <span id="totalPages">1</span>
            </div>
            <button id="nextBtn" class="nav-btn" title="下一页 (→键)">下一页 ▶️</button>
        </footer>

        <!-- 设置面板 -->
        <div id="settingsPanel" class="settings-panel hidden">
            <div class="settings-content">
                <div class="settings-header">
                    <h3>🎨 阅读设置</h3>
                    <button id="closeSettings" class="close-btn">✖️</button>
                </div>

                <div class="settings-group">
                    <label for="bgColorPicker">🎨 背景颜色:</label>
                    <input type="color" id="bgColorPicker" value="#f5f5dc">
                </div>

                <div class="settings-group">
                    <label for="textColorPicker">✏️ 文字颜色:</label>
                    <input type="color" id="textColorPicker" value="#2c3e50">
                </div>

                <div class="settings-group">
                    <label for="fontSizeSlider">📏 字体大小: <span id="fontSizeValue">18</span>px</label>
                    <input type="range" id="fontSizeSlider" min="12" max="32" value="18">
                </div>

                <div class="settings-group">
                    <label for="fontFamilySelect">🔤 字体类型:</label>
                    <select id="fontFamilySelect">
                        <option value="Serif">衬线体</option>
                        <option value="Sans-serif">无衬线体</option>
                        <option value="Monospace">等宽字体</option>
                        <option value="Cursive">手写体</option>
                    </select>
                </div>

                <div class="settings-group">
                    <label for="speedSlider">⏱️ 自动翻页速度: <span id="speedValue">3</span>秒</label>
                    <input type="range" id="speedSlider" min="1" max="10" value="3">
                </div>

                <div class="settings-status">
                    <span>自动播放状态: <strong id="autoPlayStatus">已暂停</strong></span>
                </div>
            </div>
        </div>

        <!-- 快捷键提示 -->
        <div class="shortcuts-hint">
            <small>
                💡 快捷键: ←→ 翻页 | 空格 下一页 | A 自动播放 | Home/End 首尾页
            </small>
        </div>
    </div>

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