-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
127 lines (122 loc) · 6.15 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>声笔飞单部首肌肉记忆训练</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css" />
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
<link rel="icon" type="image/ico" href="/favicon.ico" />
<link rel="manifest" href="/site.webmanifest" />
<script src="scripts/sm.js"></script>
</head>
<body>
<main>
<div class="card visiable">
<span class="card-front"></span>
<span class="card-back"></span>
<span class="card-number"></span>
<span class="answer"></span>
<input type="text"/>
</div>
<!-- <span class="card-front"><i class="icon"></i></span> -->
<div id="shortcut-content" class="content">
<h3>按键说明:</h3>
<ul>
<li><kbd>F1</kbd>: 关于</li>
<li><kbd>F2</kbd>: 设置</li>
<li><kbd>F3</kbd>: 快速切换主题颜色</li>
<li><kbd>F8</kbd>: 加载进度,从浏览器本地存储中加载之前保存的进度,该操作会导致当前进度丢失。在进入训练页面时会自动尝试加载进度。</li>
<li><kbd>F9</kbd>: 重新开始,将部首乱序后放到训练队列,如果已经开始训练,则会覆盖之前的训练</li>
<li><kbd>F10</kbd>: 保存进度,将当前进度保存到浏览器本地存储,以便下次继续进行。在离开训练页面时会自动保存进度。</li>
<li><kbd>Delete</kbd>/<kbd>Backspace</kbd>/<kbd>Esc</kbd>: 从训练队列中移除该卡片,在重新开始前不会再遇到这个部首</li>
<li><kbd>?</kbd>: 查看快捷键列表</li>
</ul>
</div>
<div id="setup-content" class="content">
<div class="form-item">
<label for="dark-mode">深色主题</label>
<input id="dark-mode" type="radio" name="theme-mode" value="dark">
</div>
<div class="form-item">
<label for="light-mode">浅色主题</label>
<input id="light-mode" type="radio" name="theme-mode" value="light">
</div>
<div class="form-item">
<label for="system-mode">跟随系统</label>
<input id="system-mode" type="radio" name="theme-mode" value="system" checked>
</div>
<hr/>
<div class="form-item">
<label for="system-mode">偏旁部首</label>
<input id="system-mode" type="checkbox" name="content" value="part">
</div>
<div class="form-item">
<label for="system-mode">一简字</label>
<input id="system-mode" type="checkbox" name="content" value="single">
</div>
<div class="form-item">
<label for="system-mode">声笔字</label>
<input id="system-mode" type="checkbox" name="content" value="stroke">
</div>
<div class="form-item">
<label for="system-mode">声声词</label>
<input id="system-mode" type="checkbox" name="content" value="double">
</div>
<hr />
<div class="form-item">
<label for="show-hint">按键提示</label>
<input type="checkbox" id="show-hint" />
</div>
</div>
<div id="about-content" class="content">
<h2>
声笔飞系部首键位记忆练习(1.1.0)
</h2>
<h3>快速入门:</h3>
<p>
<ul>
<li>跟据卡牌中显示的部首,按下对应的按键</li>
<li>一简字、声笔字无须按空格,声声词无须按分号</li>
<li>持续进行训练,直到达到满意的速度</li>
<li>输入错误时按<kbd>Esc</kbd>取消</li>
</ul>
</p>
<h3>程序说明:</h3>
<p>
程序集成了著名的 <a target="_blank" href="https://supermemo.guru/wiki/SuperMemo">SuperMemo</a>
记忆算法,能够有效的帮助用户快速且牢固的记忆声笔飞系的部首所在按键。
</p>
<p>
在(重新)开始训练时程序会将一个个的部首和对应的按键制作成一张张的卡牌,顺序是随机的。卡牌的正面是部首,背面是你需要输入的对应按键。
在卡牌显示后,你要以最快的速度按下键盘上相应的按键。如果按键正确,则会自动显示下一张卡牌,且程序会根据你的响应时间来为你的记忆评级。
程序会根据这个评级来安排该卡牌下次出现的时间,以便巩固你的记忆。
</p>
<p>
如果按键错误时程序不会自动显示下一张卡牌,如果你发现错了,不要着急,仔细回忆一下再次尝试。如果错误达到 3 次时程序会显示该部首对应的按键,你需要按下该按键才能继续训练。
当然在一开始时可以在设置中打开按键提示,方便记忆,熟练之后再盲打。
</p>
<p>
程序会在退出(关闭页面、刷新页面、关闭浏览器等)时自动将当前进度记录到浏览器的本地存储当中;当下载再次打开时,会自动尝试从本地存储中加载进度。**这个存储是存储在本地的,所以换了浏览器之后就需要重来了**
</p>
</div>
</main>
<div id="menu">
<i id="home" class="icon" title="主页">
<a href="/">
<svg viewBox="0 0 428.24 428.24">
<path d="M375.82,147.37,248.15,366.28c-15.09,25.86-52.45,25.86-67.53,0L53,147.37c-15.2-26.06,3.6-58.78,33.76-58.78H342.05C372.22,88.59,391,121.31,375.82,147.37ZM214.38,390.18l-.44-301.59m0,0L113.42,251.06m199.71,3.79L213.94,88.59" />
</svg>
</a>
</i>
<i id="restart" class="icon icon-arrows-cw" title="重新开始(F9)"></i>
<i id="discard" class="icon icon-eye-off" title="不再显示该卡片(Delete/Backspace)"></i>
<i id="theme" class="icon icon-theme" title="切换主题颜色(F3)"></i>
<i id="setup" class="icon icon-cog" title="设置(F2)"></i>
<i id="shortcut" class="icon icon-keyboard" title="快捷键(?)"></i>
<i id="about" class="icon icon-info" title="关于(F1)"></i>
</div>
</body>
<script src="scripts/main.js"></script>
</html>