Reciter/index.html at main · AFObject/Reciter · 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reciter - 背诵助手</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <div class="container">
        <!-- 侧边栏：设置与输入 -->
        <aside class="sidebar">
            <div>
                <h1>Reciter - 背诵助手</h1>
                <p style="color: var(--text-sub); font-size: 0.9rem;">高考语文必备篇目辅助</p>
            </div>

            <div>
                <h2>内容源</h2>
                <div class="control-group">
                    <select id="presetSelect" onchange="loadPreset()">
                        <!-- <option value="" disabled selected>-- 快速加载必背篇目 --</option> -->
                    </select>
                </div>
                <div class="control-group">
                    <input type="text" id="customTitle" placeholder="在此输入标题 (可选)"
                        style="display: none; width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px;">
                    <textarea id="customInput" placeholder="在此输入文本..." style="display: none;"></textarea>
                </div>
                <button class="primary-btn" style="display: none" onclick="applyTextAndReset()">重置 / 应用文本</button>
            </div>

            <div>
                <h2>记忆模式</h2>
                <div class="radio-group">
                    <label class="radio-label">
                        <input type="radio" name="mode" value="show" checked onchange="updateView()">
                        展示原文
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="mode" value="all" onchange="updateView()">
                        全部遮盖
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="mode" value="head1" onchange="updateView()">
                        提示首字
                    </label>
                    <!-- <label class="radio-label">
                        <input type="radio" name="mode" value="headTail" onchange="updateView()">
                        提示首尾字
                    </label> -->
                    <label class="radio-label">
                        <input type="radio" name="mode" value="random" onchange="updateView()">
                        随机挖空
                    </label>
                    <!-- 随机比例滑块 -->
                    <div class="slider-wrapper" id="randomConfig" style="display:none; padding: 0 12px 8px 34px;">
                        <div class="slider-header">
                            <span>挖空比例</span>
                            <span id="ratioDisplay" style="color:var(--primary); font-weight:bold;">50%</span>
                        </div>
                        <input type="range" id="randomRatio" min="0" max="100" value="50"
                            oninput="updateRatioDisplay(); updateView()">
                    </div>

                    <!-- 新功能：QA测试 -->
                    <label class="radio-label highlight">
                        <input type="radio" name="mode" value="qa" onchange="updateView()">
                        ⚡️ 上下句随机测试
                    </label>
                </div>

                <!-- QA模式下的专属按钮 -->
                <div id="qaControls" style="display:none;">
                    <button class="outline-btn" onclick="nextQuestion()">🔄 换一题</button>
                    <button class="outline-btn" style="border-color: #10b981; color: #10b981; margin-top: 8px;"
                        onclick="showQaAnswer()">👁️ 显示答案</button>

                </div>
            </div>

            <div>
                <h2>视觉与显示</h2>
                <div class="control-group">
                    <select id="styleSelect" onchange="updateStyle()">
                        <option value="style-box" selected>遮盖样式：方框</option>
                        <option value="style-underline">遮盖样式：下划线</option>
                        <!-- <option value="style-symbol">遮盖样式：符号 (□)</option> -->
                        <option value="style-invisible">遮盖样式：隐形</option>
                    </select>
                </div>
                <div class="control-group">
                    <label class="radio-label">
                        <input type="checkbox" id="toggleMarks" checked onchange="document.body.classList.toggle('hide-marks', !this.checked)">
                        显示颜色与标记
                    </label>
                    <button class="outline-btn" onclick="toggleDarkMode()">切换深色模式</button>
                </div>
                <!-- 字体大小滑块 -->
                <div class="slider-wrapper">
                    <div class="slider-header">
                        <span>字体大小</span>
                        <span id="fontSizeDisplay">24px</span>
                    </div>
                    <input type="range" id="fontSizeSlider" min="14" max="48" value="24" oninput="updateFontSize()">
                </div>
                <!-- 【新增】导出按钮 -->
                <div class="control-group" style="margin-top: 20px; padding-top: 20px; border-top: 1px dashed #e2e8f0;">
                    <button class="primary-btn" style="background-color: #475569;" onclick="window.print()">导出为默写纸 /
                        PDF</button>
                </div>

            </div>

            <div class="footer-note">
                👀 鼠标悬停遮盖处可偷看答案
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content" id="outputContainer">
            <!-- 普通模式输出区 -->
            <div id="output" class="output-area style-box"></div>

            <!-- QA模式输出区 (默认隐藏) -->
            <div id="qaOutput" class="qa-container" style="display: none;">
                <div class="qa-hint">请补全缺失的句子</div>
                <div id="qaCardContent" class="qa-card style-box"></div>
            </div>
        </main>
    </div>
    <div id="selectionPopup"
        style="position: absolute; display: none; background: #333; padding: 0px 6px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; transform: translateY(-120%);">
        <!-- 使用 flex 布局，小图标风格 -->
        <div style="display: flex; gap: 6px;">
            <button onclick="applyMark('c', 'r')"
                style="background:none; border:none; color:#ef4444; font-weight:bold; cursor:pointer; font-size:16px;"
                title="红字">R</button>
            <button onclick="applyMark('c', 'g')"
                style="background:none; border:none; color:#10b981; font-weight:bold; cursor:pointer; font-size:16px;"
                title="绿字">G</button>
            <button onclick="applyMark('c', 'b')"
                style="background:none; border:none; color:#3b82f6; font-weight:bold; cursor:pointer; font-size:16px;"
                title="蓝字">B</button>
            <div style="width:1px; background:#555; margin:0 2px;"></div>
            <button onclick="applyMark('s', 'u')"
                style="background:none; border:none; color:#fff; text-decoration:underline; cursor:pointer; font-size:16px;"
                title="下划线">U</button>
            <button onclick="applyMark('s', 'w')"
                style="background:none; border:none; color:orange; text-decoration:underline wavy; cursor:pointer; font-size:16px;"
                title="波浪线">W</button>
            <button onclick="applyMark('s', 'h')"
                style="background:none; border:none; color:#fde047; font-weight:bold; cursor:pointer; font-size:16px;"
                title="高亮">H</button>
            <div style="width:1px; background:#555; margin:0 2px;"></div>
            <button onclick="applyMark('clean')"
                style="background:none; border:none; color:#999; cursor:pointer; font-size:16px;" title="清除">×</button>
        </div>
        <!-- 小箭头装饰 -->
        <div
            style="position:absolute; bottom:-6px; left:50%; margin-left:-6px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid #333;">
        </div>
    </div>

    <script src="js/script.js"></script>
    <script src="js/qa.js"></script>
    <script src="js/edit.js"></script>

</body>

</html>