-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
130 lines (126 loc) · 6.22 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Character Height Calculator</title>
<meta name="description" content="Concept prototype to make workplace services ease-of use for everyone">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Character Height Calculator</h1>
<p>Some nice explanation what this is.</p>
<div class="section">
<fieldset>
<legend>Choose or add a screen</legend>
<div class="input-field-wrapper">
<label for="sel_bildschirm">Screen</label>
<select id="sel_bildschirm"></select>
</div>
<details open>
<summary>Add new Screen</summary>
<div class="details-content-wrapper">
<div class="input-field-wrapper">
<label for="bildschirm_name">Screen name</label>
<input id="bildschirm_name" class="" type="text" required>
</div>
<div class="input-field-wrapper">
<label for="bildschirm_aufloesung_width">Display width<span> in <abbr title="Pixel">px</abbr></span></label>
<input id="bildschirm_aufloesung_width" class="ta_r" type="text" required><span class="unit"><abbr title="Pixel">px</abbr></span>
</div>
<div class="input-field-wrapper">
<label for="bildschirm_aufloesung_height">Display height<span> in <abbr title="Pixel">px</abbr></span></label>
<input id="bildschirm_aufloesung_height" class="ta_r" type="text" required><span class="unit"><abbr title="Pixel">px</abbr></span>
</div>
<div class="input-field-wrapper">
<label for="bildschirm_bildschirmdiagonale">Screen length of diagonal <span> in inch</span></label>
<input id="bildschirm_bildschirmdiagonale" class="ta_r" type="text" required><span class="unit"><abbr title="Inch">"</abbr></span>
</div>
</div>
<button id="save_bildschirm">Save Screen</button>
<p>TODO: consider <output> here. Cause it's an output ;-)</p>
<input id="save_bildschirm_json" type="text" style="display:none;width:100%;" readonly>
</details>
</fieldset>
</div>
<div class="section">
<fieldset>
<legend>Manual entry</legend>
<div class="input-field-wrapper">
<label for="aufloesung_width">Display width<span> in <abbr title="Pixel">px</abbr></span></label>
<input id="aufloesung_width" class="ta_r" type="text" required><span class="unit"><abbr title="Pixel">px</abbr></span>
</div>
<div class="input-field-wrapper">
<label for="aufloesung_height">Display height<span> in <abbr title="Pixel">px</abbr></span></label>
<input id="aufloesung_height" class="ta_r" type="text" required><span class="unit"><abbr title="Pixel">px</abbr></span>
</div>
<div class="input-field-wrapper">
<label for="bildschirmdiagonale">Screen length of diagonal <span> in inch</span></label>
<input id="bildschirmdiagonale" class="ta_r" type="text" required><span class="unit"><abbr title="Inch">"</abbr></span>
</div>
<div class="input-field-wrapper">
<label for="entfernung">Users distance to screen<span> in <abbr title="Centimentre">cm</abbr></span></label>
<input id="entfernung" class="ta_r" type="text" required><span class="unit"><abbr title="Centimentre">cm</abbr></span>
</div>
<div class="input-field-wrapper">
<input type="radio" id="radio_monitor" name="radio_screen_type" value="50" required>
<label for="radio_monitor">Monitor</label>
</div>
<div class="input-field-wrapper">
<input type="radio" id="radio_laptop" name="radio_screen_type" value="40" required>
<label for="radio_laptop">Laptop</label>
</div>
<div class="input-field-wrapper">
<input type="radio" id="radio_tablet" name="radio_screen_type" value="40" required>
<label for="radio_tablet">Tablet</label>
</div>
<div class="input-field-wrapper">
<input type="radio" id="radio_smartphone" name="radio_screen_type" value="30" required>
<label for="radio_smartphone">Phone</label>
</div>
<button id="calc_char_height">Calculate Character Height</button>
</fieldset>
</div>
<div class="section">
<fieldset>
<legend>Minimum character height</legend>
<p>TODO: consider <output> here. Inputs must be at least "read-only"</p>
<div class="input-field-wrapper">
<input id="res_min_height_hochformat16" class="ta_r" aria-describedby="inputhint-01" type="text" disabled><span class="unit"><abbr title="Physical display pixel">dpx</abbr></span>
<div id="inputhint-01" class="input-hint">at 16' angle of vision (minimum character size for secondary / not work task related information)</div>
</div>
<div class="input-field-wrapper">
<input id="res_min_height_hochformat20" class="ta_r" aria-describedby="inputhint-02" type="text" disabled><span class="unit"><abbr title="Physical display pixel">dpx</abbr></span>
<div id="inputhint-02" class="input-hint">at 20' angle of vision (minimum character size)</div>
</div>
<div class="input-field-wrapper">
<input id="res_min_height_hochformat22" class="ta_r" aria-describedby="inputhint-03" type="text" disabled><span class="unit"><abbr title="Physical display pixel">dpx</abbr></span>
<div id="inputhint-03" class="input-hint">at 22' angle of vision (recommended character size)</div>
</div>
</fieldset>
</div>
<div class="section">
<details>
<summary>Instructions</summary>
<div class="details-content-wrapper">
<h2>1. Calculate Character Height</h2>
<ol>
<li>Entweder unter "Screen" einen Bildschirm wählen oder unter "Manual entry" die Werte eingeben.</li>
<li>Click "Calculate Character Height" button.</li>
<li>You'll see the result in the "Minimum character height" section</li>
</ol>
<h2>2. Add a new Screen</h2>
<ol>
<li>Eingabefelder unter "Neuen Bildschirm anlegen" ausfüllen.</li>
<li>Auf den Button "Bildschirm speichern" klicken.</li>
<li>Den Text aus dem eingeblendeten Textfeld kopieren und in .misc/bildschirme.js unter dem richten Bildschirmtyp (1-Monitor, 2-Laptop, 3-Tablet, 4-Smartphone) einfügen.</li>
<li>Datei speichern.</li>
</ol>
</div>
</details>
</div>
<script defer src="screens.js"></script>
<script defer src="screen-management.js"></script>
<script defer src="character-height-calculator.js"></script>
</body>
</html>