xref: /webtrees/resources/views/modals/on-screen-keyboard.phtml (revision 54452b04856df5056fa76d9764beb95110c35d02) 
1<?php use Fisharebest\Webtrees\FontAwesome; ?>
2<?php use Fisharebest\Webtrees\I18N; ?>
3<div class="card wt-osk">
4    <div class="card-header">
5        <div class="card-title">
6            <button type="button" class="btn btn-primary wt-osk-close">&times;</button>
7
8            <button type="button" class="btn btn-secondary wt-osk-pin-button" data-toggle="button" aria-pressed="false"><?= FontAwesome::semanticIcon('pin', I18N::translate('Keep open')) ?></button>
9
10            <button type="button" class="btn btn-secondary wt-osk-shift-button" data-toggle="button" aria-pressed="false">a &harr; A</button>
11
12            <div class="btn-group" role="group" data-toggle="buttons">
13                <button class="btn btn-secondary active" dir="ltr">
14                    <input type="radio" class="wt-osk-script-button" checked autocomplete="off" data-script="latn" name="osk-script"> Abcd
15                </button>
16                <button class="btn btn-secondary" dir="ltr">
17                    <input type="radio" class="wt-osk-script-button" autocomplete="off" data-script="cyrl" name="osk-script"> &Acy;&bcy;&gcy;&dcy;
18                </button>
19                <button class="btn btn-secondary" dir="ltr">
20                    <input type="radio" class="wt-osk-script-button" autocomplete="off" data-script="grek" name="osk-script"> &Alpha;&beta;&gamma;&delta;
21                </button>
22                <button class="btn btn-secondary" dir="rtl">
23                    <input type="radio" class="wt-osk-script-button" autocomplete="off" data-script="arab" name="osk-script"> &#x627;&#x628;&#x629;&#x62a;
24                </button>
25                <button class="btn btn-secondary" dir="rtl">
26                    <input type="radio" class="wt-osk-script-button" autocomplete="off" data-script="hebr" name="osk-script"> &#x5d0;&#x5d1;&#x5d2;&#x5d3;
27                </button>
28            </div>
29        </div>
30    </div>
31    <div class="card-body wt-osk-keys">
32        <!-- Quotation marks -->
33        <div class="wt-osk-group">
34            <span class="wt-osk-key">&lsquo;<sup class="wt-osk-key-shift">&ldquo;</sup></span>
35            <span class="wt-osk-key">&rsquo;<sup class="wt-osk-key-shift">&rdquo;</sup></span>
36            <span class="wt-osk-key">&lsaquo;<sup class="wt-osk-key-shift">&ldquo;</sup></span>
37            <span class="wt-osk-key">&rsaquo;<sup class="wt-osk-key-shift">&raquo;</sup></span>
38            <span class="wt-osk-key">&sbquo;<sup class="wt-osk-key-shift">&bdquo;</sup></span>
39            <span class="wt-osk-key">&prime;<sup class="wt-osk-key-shift">&Prime;</sup></span>
40        </div>
41        <!-- Symbols and punctuation -->
42        <div class="wt-osk-group">
43            <span class="wt-osk-key">&copy;</span>
44            <span class="wt-osk-key">&deg;</span>
45            <span class="wt-osk-key">&hellip;</span>
46            <span class="wt-osk-key">&middot;<sup class="wt-osk-key-shift">&bullet;</sup></span>
47            <span class="wt-osk-key">&ndash;<sup class="wt-osk-key-shift">&mdash;</sup></span>
48            <span class="wt-osk-key">&dagger;<sup class="wt-osk-key-shift">&ddagger;</sup></span>
49            <span class="wt-osk-key">&sect;<sup class="wt-osk-key-shift">&para;</sup></span>
50            <span class="wt-osk-key">&iquest;<sup class="wt-osk-key-shift">&iexcl;</sup></span>
51        </div>
52        <!-- Letter A with diacritic -->
53        <div class="wt-osk-group wt-osk-script wt-osk-script-latn" dir="ltr">
54            <span class="wt-osk-key">&agrave;<sup class="wt-osk-key-shift">&Agrave;</sup></span>
55            <span class="wt-osk-key">&aacute;<sup class="wt-osk-key-shift">&Aacute;</sup></span>
56            <span class="wt-osk-key">&acirc;<sup class="wt-osk-key-shift">&Acirc;</sup></span>
57            <span class="wt-osk-key">&atilde;<sup class="wt-osk-key-shift">&Atilde;</sup></span>
58            <span class="wt-osk-key">&aring;<sup class="wt-osk-key-shift">&Aring;</sup></span>
59            <span class="wt-osk-key">&aogon;<sup class="wt-osk-key-shift">&Aogon;</sup></span>
60            <span class="wt-osk-key">&aelig;<sup class="wt-osk-key-shift">&AElig;</sup></span>
61            <span class="wt-osk-key">&ordf;</span>
62        </div>
63        <!-- Letter C with diacritic -->
64        <div class="wt-osk-group wt-osk-script wt-osk-script-latn" dir="ltr">
65            <span class="wt-osk-key">&ccedil;<sup class="wt-osk-key-shift">&Ccedil;</sup></span>
66            <span class="wt-osk-key">&ccaron;<sup class="wt-osk-key-shift">&Ccaron;</sup></span>
67        </div>
68        <!-- Letter D with diacritic -->
69        <div class="wt-osk-group wt-osk-script wt-osk-script-latn" dir="ltr">
70            <span class="wt-osk-key">&Dcaron;<sup class="wt-osk-key-shift">&Dcaron;</sup></span>
71        </div>
72        <!-- Letter E with diacritic -->
73        <div class="wt-osk-group wt-osk-script wt-osk-script-latn" dir="ltr">
74            <span class="wt-osk-key">&egrave;<sup class="wt-osk-key-shift">&Egrave;</sup></span>
75            <span class="wt-osk-key">&eacute;<sup class="wt-osk-key-shift">&Eacute;</sup></span>
76            <span class="wt-osk-key">&ecirc;<sup class="wt-osk-key-shift">&Ecirc;</sup></span>
77            <span class="wt-osk-key">&euml;<sup class="wt-osk-key-shift">&Euml;</sup></span>
78            <span class="wt-osk-key">&eogon;<sup class="wt-osk-key-shift">&Eogon;</sup></span>
79        </div>
80        <!-- Letter G with diacritic -->
81        <div class="wt-osk-group wt-osk-script wt-osk-script-latn" dir="ltr">
82            <span class="wt-osk-key">&gbreve;<sup class="wt-osk-key-shift">&Gbreve;</sup></span>
83        </div>
84        <!-- Letter I with diacritic -->
85        <div class="wt-osk-group wt-osk-script wt-osk-script-latn" dir="ltr">
86            <span class="wt-osk-key">&igrave;<sup class="wt-osk-key-shift">&Igrave;</sup></span>
87            <span class="wt-osk-key">&iacute;<sup class="wt-osk-key-shift">&Iacute;</sup></span>
88            <span class="wt-osk-key">&icirc;<sup class="wt-osk-key-shift">&Icirc;</sup></span>
89            <span class="wt-osk-key">&iuml;<sup class="wt-osk-key-shift">&Iuml;</sup></span>
90            <span class="wt-osk-key">&iogon;<sup class="wt-osk-key-shift">&Iogon;</sup></span>
91            <span class="wt-osk-key">&inodot;<sup class="wt-osk-key-shift">&Idot;</sup></span>
92            <span class="wt-osk-key">&ijlig;<sup class="wt-osk-key-shift">&IJlig;</sup></span>
93        </div>
94        <!-- Letter L with diacritic -->
95        <div class="wt-osk-group wt-osk-script wt-osk-script-latn" dir="ltr">
96            <span class="wt-osk-key">&lcaron;<sup class="wt-osk-key-shift">&Lcaron;</sup></span>
97            <span class="wt-osk-key">&lacute;<sup class="wt-osk-key-shift">&Lacute;</sup></span>
98            <span class="wt-osk-key">&lstrok;<sup class="wt-osk-key-shift">&Lstrok;</sup></span>
99        </div>
100        <!-- Letter N with diacritic -->
101        <div class="wt-osk-group wt-osk-script wt-osk-script-latn" dir="ltr">
102            <span class="wt-osk-key">&napos;</span>
103            <span class="wt-osk-key">&ntilde;<sup class="wt-osk-key-shift">&Ntilde;</sup></span>
104            <span class="wt-osk-key">&ncaron;<sup class="wt-osk-key-shift">&Ncaron;</sup></span>
105        </div>
106        <!-- Letter O with diacritic -->
107        <div class="wt-osk-group wt-osk-script wt-osk-script-latn" dir="ltr">
108            <span class="wt-osk-key">&ograve;<sup class="wt-osk-key-shift">&Ograve;</sup></span>
109            <span class="wt-osk-key">&oacute;<sup class="wt-osk-key-shift">&Oacute;</sup></span>
110            <span class="wt-osk-key">&ocirc;<sup class="wt-osk-key-shift">&Ocirc;</sup></span>
111            <span class="wt-osk-key">&otilde;<sup class="wt-osk-key-shift">&Otilde;</sup></span>
112            <span class="wt-osk-key">&ouml;<sup class="wt-osk-key-shift">&Ouml;</sup></span>
113            <span class="wt-osk-key">&oslash;<sup class="wt-osk-key-shift">&Oslash;</sup></span>
114            <span class="wt-osk-key">&oelig;<sup class="wt-osk-key-shift">&OElig;</sup></span>
115            <span class="wt-osk-key">&ordm;</span>
116        </div>
117        <!-- Letter T with diacritic -->
118        <div class="wt-osk-group wt-osk-script wt-osk-script-latn" dir="ltr">
119            <span class="wt-osk-key">&tcaron;<sup class="wt-osk-key-shift">&Tcaron;</sup></span>
120        </div>
121        <!-- Letter R with diacritic -->
122        <div class="wt-osk-group wt-osk-script wt-osk-script-latn" dir="ltr">
123            <span class="wt-osk-key">&racute;<sup class="wt-osk-key-shift">&Racute;</sup></span>
124            <span class="wt-osk-key">&rcaron;<sup class="wt-osk-key-shift">&Rcaron;</sup></span>
125        </div>
126        <!-- Letter S with diacritic -->
127        <div class="wt-osk-group wt-osk-script wt-osk-script-latn" dir="ltr">
128            <span class="wt-osk-key">&scaron;<sup class="wt-osk-key-shift">&Scaron;</sup></span>
129            <span class="wt-osk-key">&scedil;<sup class="wt-osk-key-shift">&Scedil;</sup></span>
130            <span class="wt-osk-key">&#x17F;</sup></span>
131        </div>
132        <!-- Letter U with diacritic -->
133        <div class="wt-osk-group wt-osk-script wt-osk-script-latn" dir="ltr">
134            <span class="wt-osk-key">&ugrave;<sup class="wt-osk-key-shift">&Ugrave;</sup></span>
135            <span class="wt-osk-key">&uacute;<sup class="wt-osk-key-shift">&Uacute;</sup></span>
136            <span class="wt-osk-key">&ucirc;<sup class="wt-osk-key-shift">&Ucirc;</sup></span>
137            <span class="wt-osk-key">&utilde;<sup class="wt-osk-key-shift">&Utilde;</sup></span>
138            <span class="wt-osk-key">&umacr;<sup class="wt-osk-key-shift">&Umacr;</sup></span>
139            <span class="wt-osk-key">&uogon;<sup class="wt-osk-key-shift">&Uogon;</sup></span>
140        </div>
141        <!-- Letter Y with diacritic -->
142        <div class="wt-osk-group wt-osk-script wt-osk-script-latn" dir="ltr">
143            <span class="wt-osk-key">&yacute;<sup class="wt-osk-key-shift">&Yacute;</sup></span>
144        </div>
145        <!-- Letter Z with diacritic -->
146        <div class="wt-osk-group wt-osk-script wt-osk-script-latn" dir="ltr">
147            <span class="wt-osk-key">&zdot;<sup class="wt-osk-key-shift">&Zdot;</sup></span>
148            <span class="wt-osk-key">&zcaron;<sup class="wt-osk-key-shift">&Zcaron;</sup></span>
149        </div>
150        <!-- Esszet, Eth and Thorn -->
151        <div class="wt-osk-group wt-osk-script wt-osk-script-latn" dir="ltr">
152            <span class="wt-osk-key">&szlig;<sup class="wt-osk-key-shift">&#7838;</sup></span>
153            <span class="wt-osk-key">&eth;<sup class="wt-osk-key-shift">&ETH;</sup></span>
154            <span class="wt-osk-key">&thorn;<sup class="wt-osk-key-shift">&THORN;</sup></span>
155        </div>
156        <!-- Extra Cyrillic characters -->
157        <div class="wt-osk-group wt-osk-script wt-osk-script-cyrl" dir="ltr" hidden>
158            <span class="wt-osk-key">&iocy;<sup class="wt-osk-key-shift">&IOcy;</sup></span>
159            <span class="wt-osk-key">&djcy;<sup class="wt-osk-key-shift">&DJcy;</sup></span>
160            <span class="wt-osk-key">&gjcy;<sup class="wt-osk-key-shift">&GJcy;</sup></span>
161            <span class="wt-osk-key">&jukcy;<sup class="wt-osk-key-shift">&Jukcy;</sup></span>
162            <span class="wt-osk-key">&dscy;<sup class="wt-osk-key-shift">&DScy;</sup></span>
163            <span class="wt-osk-key">&iukcy;<sup class="wt-osk-key-shift">&Iukcy;</sup></span>
164            <span class="wt-osk-key">&yicy;<sup class="wt-osk-key-shift">&YIcy;</sup></span>
165            <span class="wt-osk-key">&jsercy;<sup class="wt-osk-key-shift">&Jsercy;</sup></span>
166            <span class="wt-osk-key">&ljcy;<sup class="wt-osk-key-shift">&LJcy;</sup></span>
167            <span class="wt-osk-key">&njcy;<sup class="wt-osk-key-shift">&NJcy;</sup></span>
168            <span class="wt-osk-key">&tshcy;<sup class="wt-osk-key-shift">&TSHcy;</sup></span>
169            <span class="wt-osk-key">&kjcy;<sup class="wt-osk-key-shift">&KJcy;</sup></span>
170            <span class="wt-osk-key">&ubrcy;<sup class="wt-osk-key-shift">&Ubrcy;</sup></span>
171            <span class="wt-osk-key">&dzcy;<sup class="wt-osk-key-shift">&DZcy;</sup></span>
172        </div>
173        <!-- Cyrillic alphabet -->
174        <div class="wt-osk-group wt-osk-script wt-osk-script-cyrl" dir="ltr" hidden>
175            <span class="wt-osk-key">&acy;<sup class="wt-osk-key-shift">&Acy;</sup></span>
176            <span class="wt-osk-key">&bcy;<sup class="wt-osk-key-shift">&Bcy;</sup></span>
177            <span class="wt-osk-key">&gcy;<sup class="wt-osk-key-shift">&Gcy;</sup></span>
178            <span class="wt-osk-key">&dcy;<sup class="wt-osk-key-shift">&Dcy;</sup></span>
179            <span class="wt-osk-key">&iecy;<sup class="wt-osk-key-shift">&IEcy;</sup></span>
180            <span class="wt-osk-key">&zhcy;<sup class="wt-osk-key-shift">&ZHcy;</sup></span>
181            <span class="wt-osk-key">&zcy;<sup class="wt-osk-key-shift">&Zcy;</sup></span>
182            <span class="wt-osk-key">&icy;<sup class="wt-osk-key-shift">&Icy;</sup></span>
183            <span class="wt-osk-key">&jcy;<sup class="wt-osk-key-shift">&Jcy;</sup></span>
184            <span class="wt-osk-key">&kcy;<sup class="wt-osk-key-shift">&Kcy;</sup></span>
185            <span class="wt-osk-key">&lcy;<sup class="wt-osk-key-shift">&Lcy;</sup></span>
186            <span class="wt-osk-key">&mcy;<sup class="wt-osk-key-shift">&Mcy;</sup></span>
187            <span class="wt-osk-key">&ncy;<sup class="wt-osk-key-shift">&Ncy;</sup></span>
188            <span class="wt-osk-key">&ocy;<sup class="wt-osk-key-shift">&Ocy;</sup></span>
189            <span class="wt-osk-key">&pcy;<sup class="wt-osk-key-shift">&Pcy;</sup></span>
190            <span class="wt-osk-key">&scy;<sup class="wt-osk-key-shift">&Scy;</sup></span>
191            <span class="wt-osk-key">&tcy;<sup class="wt-osk-key-shift">&Tcy;</sup></span>
192            <span class="wt-osk-key">&ucy;<sup class="wt-osk-key-shift">&Ucy;</sup></span>
193            <span class="wt-osk-key">&ucy;<sup class="wt-osk-key-shift">&Ucy;</sup></span>
194            <span class="wt-osk-key">&fcy;<sup class="wt-osk-key-shift">&Fcy;</sup></span>
195            <span class="wt-osk-key">&khcy;<sup class="wt-osk-key-shift">&KHcy;</sup></span>
196            <span class="wt-osk-key">&tscy;<sup class="wt-osk-key-shift">&TScy;</sup></span>
197            <span class="wt-osk-key">&chcy;<sup class="wt-osk-key-shift">&CHcy;</sup></span>
198            <span class="wt-osk-key">&shcy;<sup class="wt-osk-key-shift">&SHcy;</sup></span>
199            <span class="wt-osk-key">&shchcy;<sup class="wt-osk-key-shift">&SHCHcy;</sup></span>
200            <span class="wt-osk-key">&hardcy;<sup class="wt-osk-key-shift">&HARDcy;</sup></span>
201            <span class="wt-osk-key">&ycy;<sup class="wt-osk-key-shift">&Ycy;</sup></span>
202            <span class="wt-osk-key">&softcy;<sup class="wt-osk-key-shift">&SOFTcy;</sup></span>
203            <span class="wt-osk-key">&ecy;<sup class="wt-osk-key-shift">&Ecy;</sup></span>
204            <span class="wt-osk-key">&yucy;<sup class="wt-osk-key-shift">&YUcy;</sup></span>
205            <span class="wt-osk-key">&yacy;<sup class="wt-osk-key-shift">&YAcy;</sup></span>
206        </div>
207        <!-- Greek alphabet -->
208        <div class="wt-osk-group wt-osk-script wt-osk-script-grek" dir="ltr" hidden>
209            <span class="wt-osk-key">&alpha;<sup class="wt-osk-key-shift">&Alpha;</sup></span>
210            <span class="wt-osk-key">&beta;<sup class="wt-osk-key-shift">&Beta;</sup></span>
211            <span class="wt-osk-key">&gamma;<sup class="wt-osk-key-shift">&Gamma;</sup></span>
212            <span class="wt-osk-key">&delta;<sup class="wt-osk-key-shift">&Delta;</sup></span>
213            <span class="wt-osk-key">&epsilon;<sup class="wt-osk-key-shift">&Epsilon;</sup></span>
214            <span class="wt-osk-key">&zeta;<sup class="wt-osk-key-shift">&Zeta;</sup></span>
215            <span class="wt-osk-key">&eta;<sup class="wt-osk-key-shift">&eta;</sup></span>
216            <span class="wt-osk-key">&theta;<sup class="wt-osk-key-shift">&Theta;</sup></span>
217            <span class="wt-osk-key">&iota;<sup class="wt-osk-key-shift">&Iota;</sup></span>
218            <span class="wt-osk-key">&kappa;<sup class="wt-osk-key-shift">&Kappa;</sup></span>
219            <span class="wt-osk-key">&lambda;<sup class="wt-osk-key-shift">&Lambda;</sup></span>
220            <span class="wt-osk-key">&mu;<sup class="wt-osk-key-shift">&Mu;</sup></span>
221            <span class="wt-osk-key">&nu;<sup class="wt-osk-key-shift">&Nu;</sup></span>
222            <span class="wt-osk-key">&xi;<sup class="wt-osk-key-shift">&Xi;</sup></span>
223            <span class="wt-osk-key">&omicron;<sup class="wt-osk-key-shift">&Omicron;</sup></span>
224            <span class="wt-osk-key">&pi;<sup class="wt-osk-key-shift">&Pi;</sup></span>
225            <span class="wt-osk-key">&rho;<sup class="wt-osk-key-shift">&Rho;</sup></span>
226            <span class="wt-osk-key">&sigma;<sup class="wt-osk-key-shift">&Sigma;</sup></span>
227            <span class="wt-osk-key">&tau;<sup class="wt-osk-key-shift">&Tau;</sup></span>
228            <span class="wt-osk-key">&upsilon;<sup class="wt-osk-key-shift">&Upsilon;</sup></span>
229            <span class="wt-osk-key">&phi;<sup class="wt-osk-key-shift">&Phi;</sup></span>
230            <span class="wt-osk-key">&chi;<sup class="wt-osk-key-shift">&chi;</sup></span>
231            <span class="wt-osk-key">&psi;<sup class="wt-osk-key-shift">&Psi;</sup></span>
232            <span class="wt-osk-key">&omega;<sup class="wt-osk-key-shift">&Omega;</sup></span>
233        </div>
234        <!-- Arabic alphabet -->
235        <div class="wt-osk-group wt-osk-script wt-osk-script-arab" dir="rtl" hidden>
236            <span class="wt-osk-key">ا</span>
237            <span class="wt-osk-key">ب</span>
238            <span class="wt-osk-key">ت</span>
239            <span class="wt-osk-key">ثج</span>
240            <span class="wt-osk-key">ح</span>
241            <span class="wt-osk-key">خ</span>
242            <span class="wt-osk-key">د</span>
243            <span class="wt-osk-key">ذ</span>
244            <span class="wt-osk-key">ر</span>
245            <span class="wt-osk-key">ز</span>
246            <span class="wt-osk-key">س</span>
247            <span class="wt-osk-key">ش</span>
248            <span class="wt-osk-key">ص</span>
249            <span class="wt-osk-key">ض</span>
250            <span class="wt-osk-key">ط</span>
251            <span class="wt-osk-key">ظ</span>
252            <span class="wt-osk-key">ع</span>
253            <span class="wt-osk-key">غ</span>
254            <span class="wt-osk-key">ف</span>
255            <span class="wt-osk-key">ق</span>
256            <span class="wt-osk-key">ك</span>
257            <span class="wt-osk-key">ل</span>
258            <span class="wt-osk-key">من</span>
259            <span class="wt-osk-key">ه</span>
260            <span class="wt-osk-key">و</span>
261            <span class="wt-osk-key">ي</span>
262            <span class="wt-osk-key">آ</span>
263            <span class="wt-osk-key">ة</span>
264            <span class="wt-osk-key">ى</span>
265            <span class="wt-osk-key">ی</span>
266        </div>
267        <!-- Hebrew alphabet -->
268        <div class="wt-osk-group wt-osk-script wt-osk-script-hebr" dir="rtl" hidden>
269            <span class="wt-osk-key">&#x5d0;</span>
270            <span class="wt-osk-key">&#x5d1;</span>
271            <span class="wt-osk-key">&#x5d2;</span>
272            <span class="wt-osk-key">&#x5d3;</span>
273            <span class="wt-osk-key">&#x5d4;</span>
274            <span class="wt-osk-key">&#x5d5;</span>
275            <span class="wt-osk-key">&#x5d6;</span>
276            <span class="wt-osk-key">&#x5d7;</span>
277            <span class="wt-osk-key">&#x5d8;</span>
278            <span class="wt-osk-key">&#x5d9;</span>
279            <span class="wt-osk-key">&#x5da;</span>
280            <span class="wt-osk-key">&#x5db;</span>
281            <span class="wt-osk-key">&#x5dc;</span>
282            <span class="wt-osk-key">&#x5dd;</span>
283            <span class="wt-osk-key">&#x5de;</span>
284            <span class="wt-osk-key">&#x5df;</span>
285            <span class="wt-osk-key">&#x5e0;</span>
286            <span class="wt-osk-key">&#x5e1;</span>
287            <span class="wt-osk-key">&#x5e2;</span>
288            <span class="wt-osk-key">&#x5e3;</span>
289            <span class="wt-osk-key">&#x5e4;</span>
290            <span class="wt-osk-key">&#x5e5;</span>
291            <span class="wt-osk-key">&#x5e6;</span>
292            <span class="wt-osk-key">&#x5e7;</span>
293            <span class="wt-osk-key">&#x5e8;</span>
294            <span class="wt-osk-key">&#x5e9;</span>
295            <span class="wt-osk-key">&#x5ea;</span>
296            <span class="wt-osk-key">&#x5f0;</span>
297            <span class="wt-osk-key">&#x5f1;</span>
298            <span class="wt-osk-key">&#x5f2;</span>
299            <span class="wt-osk-key">&#x5f3;</span>
300            <span class="wt-osk-key">&#x5f4;</span>
301        </div>
302    </div>
303</div>
304