-
Notifications
You must be signed in to change notification settings - Fork 3
/
_ui.html
151 lines (151 loc) · 6.71 KB
/
_ui.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>UI Demo</title>
</head>
<body>
<header>
Header
</header>
<div>
<div class="container">
<div class="annotated">
<div class="annotated__controls">
<form>
<fieldset>
<legend>Form legend</legend>
<label for="input1">Text Input</label>
<input type="text" id="input1" name="input1">
<label for="input2">Number Input</label>
<input type="number" id="input2" name="input2" value="123456.789">
<label for="input3">Search Input</label>
<input type="search" id="input3" name="input3" value="Synthetic Availability">
<label for="input4">Input 4</label>
<select id="input4" name="input4">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label for="input5">Input 5</label>
<textarea id="input5" name="input5">Some longer text that may span across multiple rows.This is a text area after all.</textarea>
<div>
<label>
<input type="checkbox">
Checkbox
</label>
<label>
<input type="checkbox" checked>
Checkbox
</label>
</div>
<div>
<label>
<input type="radio" name="input7"> Radio 1
</label>
<label>
<input type="radio" name="input7" checked> Radio 2
</label>
<label>
<input type="radio" name="input7"> Radio 3
</label>
</div>
<label for="input8">Rnage Input</label>
<input type="range" id="input8" name="input8">
<label for="input9">Number Input</label>
<input type="number" id="input9" name="input9">
<button type="submit">Submit</button>
</fieldset>
</form>
<div class="button-bar">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button disabled>Disabled</button>
</div>
<div class="button-bar">
<button class="danger">Button 1 Danger</button>
<button class="danger">Button 2 Danger</button>
<button class="danger">Button 3 Danger</button>
<button class="danger" disabled>Disabled Danger</button>
</div>
</div>
<div class="annotated__help">
<p>
This page primarily exists to check the look and feel of various UI aspects and visually inspect the CSS.
</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>
This is a paragraph of text.
<a href="#">This is a link</a>.
<strong>This is bold text</strong>.
<em>This is italic text</em>.
<small>This is small text</small>.
<mark>This is marked text</mark>.
<del>This is deleted text</del>.
<ins>This is inserted text</ins>.
<sub>This is subscript text</sub>.
<sup>This is superscript text</sup>.
Yeah, that's about it.
</p>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>
<hr>
<table>
<caption>Table caption</caption>
<thead>
<tr>
<th colspan="3">Master header</th>
</tr>
<tr>
<th></th>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row 1</th>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<th>Row 2</th>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<tr>
<th>Row 3</th>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<footer>
Footer
</footer>
</body>
</html>