-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
132 lines (107 loc) · 5.23 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
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Steno Font Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="steno.css" />
</head>
<body>
<div class="top-bar pastelred">
<div class="top-bar-left">
<ul class="menu show-for-small-only">
<li class="menu-text">Steno Font Demo</li>
</ul>
<ul class="menu show-for-medium">
<li class="menu-text">Steno Font Demo</li>
</ul>
</div>
</div><br />
<div class="column row" id="content">
<label for="user-field">Text Input</label>
<p class="help-text db-help" id="user-help">Input Steno Here!</p>
<input type="text" id="user-field" value="T*ES" aria-describedby="user-help" required>
<h3>Classic</h3>
<label>Stenodisplay Classic</label>
<p class="help-text db-help" id="syntax-help">Constant width keys, regular labels.</p>
<div class="callout secondary exp">
<pre class="steno-classic" id="steno-classic">T*ES</pre>
</div>
<label>Stenodisplay Classic Medium</label>
<p class="help-text db-help" id="syntax-help">Constant width keys, medium labels.</p>
<div class="callout secondary exp">
<pre class="steno-classicmedium" id="steno-classicmedium">T*ES</pre>
</div>
<label>Stenodisplay Classic Large</label>
<p class="help-text db-help" id="syntax-help">Constant width keys, large labels.</p>
<div class="callout secondary exp">
<pre class="steno-classiclarge" id="steno-classiclarge">T*ES</pre>
</div>
<label>Stenodisplay Classic Blank</label>
<p class="help-text db-help" id="syntax-help">Constant width keys, no labels.</p>
<div class="callout secondary exp">
<pre class="steno-classicblank" id="steno-classicblank">T*ES</pre>
</div>
<h3>Wide</h3>
<label>Stenodisplay Wide</label>
<p class="help-text db-help" id="syntax-help">Wide *DZ keys, regular labels.</p>
<div class="callout secondary exp">
<pre class="steno-wide" id="steno-wide">T*ES</pre>
</div>
<label>Stenodisplay Wide Medium</label>
<p class="help-text db-help" id="syntax-help">Wide *DZ keys, medium labels.</p>
<div class="callout secondary exp">
<pre class="steno-widemedium" id="steno-widemedium">T*ES</pre>
</div>
<label>Stenodisplay Wide Large</label>
<p class="help-text db-help" id="syntax-help">Wide *DZ keys, large labels.</p>
<div class="callout secondary exp">
<pre class="steno-widelarge" id="steno-widelarge">T*ES</pre>
</div>
<label>Stenodisplay Wide Blank</label>
<p class="help-text db-help" id="syntax-help">Wide *DZ keys, no labels.</p>
<div class="callout secondary exp">
<pre class="steno-wideblank" id="steno-wideblank">T*ES</pre>
</div>
<h3>Square</h3>
<label>Stenodisplay Square</label>
<p class="help-text db-help" id="syntax-help">Square keys, regular labels.</p>
<div class="callout secondary exp">
<pre class="steno-square" id="steno-square">T*ES</pre>
</div>
<label>Stenodisplay Square Medium</label>
<p class="help-text db-help" id="syntax-help">Square keys, medium labels.</p>
<div class="callout secondary exp">
<pre class="steno-squaremedium" id="steno-squaremedium">T*ES</pre>
</div>
<label>Stenodisplay Square Large</label>
<p class="help-text db-help" id="syntax-help">Square keys, large labels.</p>
<div class="callout secondary exp">
<pre class="steno-squarelarge" id="steno-squarelarge">T*ES</pre>
</div>
<label>Stenodisplay Square Blank</label>
<p class="help-text db-help" id="syntax-help">Square keys, no labels.</p>
<div class="callout secondary exp">
<pre class="steno-squareblank" id="steno-squareblank">T*ES</pre>
</div>
<h3>Palandisplay</h3>
<label for="palan-field">Text Input</label>
<p class="help-text db-help" id="user-help">Input Palan Here!</p>
<input type="text" id="palan-field" value="PA/LAN/TAIP" aria-describedby="user-help" required>
<label>Palandisplay</label>
<p class="help-text db-help" id="syntax-help">Palantype display font</p>
<div class="callout secondary exp">
<pre class="palan" id="palan">PA/LAN/TAIP</pre>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js" integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous"></script>
<script src="steno.js"></script>
<script>
$(document).foundation();
$(document).ready(pageLoad('create'));
</script>
</body>
</html>