-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
201 lines (201 loc) · 6.92 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
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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Keyboard Symbols</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="https://kaiyuan.github.io/jquery.footnotes.js/footnotes.css" media="screen, print">
<link rel="stylesheet" href="style.css" media="screen, print">
<script src="https://kaiyuan.github.io/jquery.footnotes.js/footnotes.js"></script>
</head>
<body>
<article id="key-box" class="center">
<section>
<ul class="list left">
<li>
<div class="sup" data-text="EN: tilde<br>ZH: 波浪号<br>JP: チルダ、波ダッシュ<BR>">~</div>
<div class="sup" data-text="EN: grave accent, backquote, backtick<br>ZH: 反引号<br>JP: バッククォート、グレイヴ・アクセント">`</div>
</li>
<li>
<div class="sup" data-text="EN: exclamation mark, bang<br>ZH: 感叹号<br>JP: 感嘆符、ビックリマーク、エクスクラメーションマーク">!</div>
<span>1</span>
</li>
<li>
<div class="sup" data-text="EN: at<br>JP: アットマーク">@</div>
<span>2</span>
</li>
<li>
<div class="sup" data-text="EN: hash, hash tag, pound, octothorpe<br>ZH: 井号<br>JP: ハッシュマーク、ハッシュタグ">#</div>
<span>3</span>
</li>
<li>
<div class="sup" data-text="EN: dollar sign<br>ZH: 美元符号<br>JP: ドル">$</div>
<span>4</span>
</li>
<li>
<div class="sup" data-text="EN: percent, mod<br>ZH: 百分号<br>JP: パーセント">%</div>
<span>5</span>
</li>
<li>
<div class="sup" data-text="EN: caret, hat<br>ZH: 脱字符<br>JP: ハット">^</div>
<span>6</span>
</li>
<li>
<div class="sup" data-text="EN: ampersand, and <br>JP: アンド、アンパサンド">&</div>
<span>7</span>
</li>
<li>
<div class="sup" data-text="EN: star, wildcard, asterisk<br>ZH: 星号<br>JP: スター、アスタリスク">*</div>
<span>8</span>
</li>
<li>
<div class="sup" data-text="EN: parentheses, brackets<br>ZH: 左括号<br>JP: 丸括弧、括弧">(</div>
<span>9</span>
</li>
<li>
<div class="sup" data-text="EN: parentheses, brackets<br>ZH: 右括号<br>JP: 丸括弧、括弧">)</div>
<span>0</span>
</li>
<li>
<div class="sup" data-text="EN: underscore<br>ZH: 下划线<br>JP: アンダースコア">_</div>
<div class="sup" data-text="EN: dash, hyphen, minus<br>ZH: 连字符<br>JP: ハイフン、マイナス">-</div>
</li>
<li>
<div class="sup" data-text="EN: plus, addition<br>ZH: 加号<br>JP: プラス">+</div>
<div class="sup" data-text="EN: equal<br>ZH: 等于号<br>JP: イコール">=</div>
</li>
<li class="textR" style="width:56px;">
<span></span>
<span>delete</span>
</li>
</ul>
<ul class="left list">
<li class="textL" style="width:56px;">
<span></span>
<span>tab</span>
</li>
<li>
Q
</li>
<li>W</li>
<li>E</li>
<li>R</li>
<li>T</li>
<li>Y</li>
<li>U</li>
<li>I</li>
<li>O</li>
<li>P</li>
<li>
<div class="sup" data-text="EN: curly brackets, braces<br>ZH: 大括号<br>JP: 中括弧">{</div>
<div class="sup" data-text="EN: square brackets<br>ZH: 中括号<br>JP: 角括弧">[</div>
</li>
<li>
<div class="sup" data-text="EN: curly brackets, braces<br>ZH: 大括号<br>JP: 中括弧">}</div>
<div class="sup" data-text="EN: square brackets<br>ZH: 中括号<br>JP: 角括弧">]</div>
</li>
<li>
<div class="sup" data-text="EN: pipe, vertical bar<br>ZH: 管道符，竖杠<br>JP: パイプ">|</div>
<div class="sup" data-text="EN: backslash<br>ZH: 反斜杠<br>JP: バックスラッシュ">\</div>
</li>
</ul>
<ul class="left list">
<li id="capslock" class="textL" style="width:71px;">
<span class="led"></span>
<span>caps lock</span>
</li>
<li>A</li>
<li>S</li>
<li>D</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>
<div class="sup" data-text="EN: colon<br>ZH: 冒号<br>JP: コロン">:</div>
<div class="sup" data-text="EN: semicolon<br>ZH: 分号<br>JP: セミコロン">;</div>
</li>
<li>
<div class="sup" data-text="EN: quotation mark, quotes<br>ZH: 双引号<br>JP: ダブルクォート、ダブルクォーテーション、引用符">"</div>
<div class="sup" data-text="EN: single quotes, apostrophe<br>ZH: 单引号<br>JP: シングルクォート">'</div>
</li>
<li class="textR" style="width:71px;">
<span>enter</span>
<span>return</span>
</li>
</ul>
<ul class="list">
<li class="textL" style="width:97px;">
<span></span>
<span>shift</span>
</li>
<li>Z</li>
<li>X</li>
<li>C</li>
<li>V</li>
<li>B</li>
<li>N</li>
<li>M</li>
<li>
<div class="sup" data-text="EN: angle bracket, less than<br>ZH: 尖括号<br>JP: 不等号(より小)、始め山括弧、左アングルブラケット"><</div>
<div class="sup" data-text="EN: comma<br>ZH: 逗号<BR>JP: カンマ、コンマ">,</div>
</li>
<li>
<div class="sup" data-text="EN: angle bracket, more than, greater than<br>ZH: 尖括号<br>JP: 不等号(より大)、終わり山括弧、右アングルブラケット">></div>
<div class="sup" data-text="EN: period, dot, full stop<br>ZH: 点，句号<br>JP: ピリオド、ドット">.</div>
<li>
<div class="sup" data-text="EN: question mark<br>ZH: 问号<br>JP: クエスチョンマーク、はてなマーク、疑問符">?</div>
<div class="sup" data-text="EN: slash<br>ZH: 正斜杠<br>JP: スラッシュ">/</div>
<li class="textR" style="width:97px;">
<span></span>
<span>shift</span>
</li>
</ul>
<ul class="left list">
<li class="textL">
<span></span>
<span>fn</span>
</li>
<li style="width:38px;" class="textL">
<span></span>
<span>control</span>
</li>
<li style="width:48px;" class="textL">
<span>alt</span>
<span>option</span>
</li>
<li style="width:65px;" class="textR">
<span>⌘</span>
<span>command</span>
</li>
<li style="width:170px;"></li>
<li style="width:65px;" class="textL">
<span>⌘</span>
<span>command</span>
</li>
<li style="width:48px;" class="textR">
<span>alt</span>
<span>option</span>
</li>
<li id="Arrow-left">
<span></span>
<span class="Arrow-button">◄</span>
</li>
<li id="Arrow_top-bottom">
<span>▲</span>
<span>▼</span>
</li>
<li id="Arrow-right">
<span></span>
<span class="Arrow-button">►</span>
</li>
</ul>
</section>
</article>
<footer class="center">
Designer: <a href="https://github.com/Kaiyuan/keyboard-symbols">Kaiyuan</a> via: <a href="http://weih.github.io/symbolinenglish/">http://weih.github.io/symbolinenglish/</a>
</footer>
</body>
</html>