-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathexample-page.html
178 lines (165 loc) · 6.89 KB
/
example-page.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
<!DOCTYPE html>
<!--
Copyright (c) 2025 Nadav Tasher
https://github.com/NadavTasher/Webhood
-->
<html class="row stretch" lang="en">
<head>
<!-- Charset -->
<meta charset="UTF-8" />
<!-- App Description -->
<meta name="description" content="Webhood Test Page" />
<!-- Viewport -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=5, user-scalable=yes, minimal-ui" />
<!-- Mobile -->
<meta name="color-scheme" content="light dark" />
<meta name="mobile-web-app-capable" content="yes" />
<!-- Mobile Safari -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Test Page" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- Icons -->
<link rel="icon" href="/resources/icon.png" />
<link rel="apple-touch-icon" href="/resources/icon-apple.png" />
<!-- Template stylesheets -->
<link rel="stylesheet" href="/stylesheets/theme.css" />
<link rel="stylesheet" href="/stylesheets/colors.css" />
<link rel="stylesheet" href="/stylesheets/modals.css" />
<link rel="stylesheet" href="/stylesheets/layout.css" />
<!-- Template scripts -->
<script type="text/javascript" src="/scripts/api.js"></script>
<script type="text/javascript" src="/scripts/modals.js"></script>
<script type="text/javascript" src="/scripts/utilities.js"></script>
<!-- Application stylesheets -->
<link rel="stylesheet" href="/application/application.css" />
<!-- Application scripts -->
<script type="text/javascript" src="/application/application.js"></script>
<!-- App Title -->
<title>Test Page</title>
<!-- No Script -->
<noscript></noscript>
<!-- Additional -->
</head>
<body class="column">
<!-- Generic titles -->
<p class="large left">Webhood // Test Page</p>
<p class="small left">Choose a body width:</p>
<select class="small center" oninput="document.body.style.maxWidth = this.value">
<option value="800px">Default</option>
<option value="500px">Mobile</option>
<option value="100px">Narrow</option>
<option value="1000px">Extra-Wide</option>
</select>
<!-- Coaster test -->
<p class="small left">This is a coasted div.</p>
<div class="coasted">
<button class="small left">Option 1</button>
<button class="small left">Option 2</button>
<button class="small left">Option 3</button>
</div>
<p class="small left">This is a coasted div with coasted divs inside.</p>
<div class="coasted">
<p class="small left">I am a coasted div.</p>
<div class="coasted">
<p class="small left">I am also coasted.</p>
<button class="small center">Option 1</button>
<button class="small center">Option 2</button>
</div>
<div class="coasted">
<p class="small left">I am also coasted.</p>
<button class="small center">Option 3</button>
<button class="small center">Option 4</button>
</div>
</div>
<!-- Borderless test -->
<p class="small left">This is a coasted div with borderless buttons.</p>
<div class="coasted">
<button class="small left borderless">Option 1</button>
<button class="small left borderless">Option 2</button>
<button class="small left borderless">Option 3</button>
</div>
<!-- Text alignments -->
<p class="small left">This is a coasted div with texts inside.</p>
<div class="coasted">
<p class="tiny left">This is a tiny text aligned to the left</p>
<p class="small center">This is a small text aligned to the center</p>
<p class="medium right">This is a medium text aligned to the right</p>
<p class="large center">This is a large text aligned to the center</p>
<p class="huge left">This is a huge text aligned to the right</p>
</div>
<!-- Row test -->
<p class="small left">This is a row div without any special child treatment.</p>
<div class="row">
<button class="small left">Option 1</button>
<button class="small right">Option 2</button>
</div>
<p class="small left">This is a row div with personally aligned children.</p>
<div class="row stretch">
<p class="small left">I'm on the left</p>
<button class="large center">Centered</button>
<p class="small right">I'm on the right</p>
</div>
<!-- Left test -->
<p class="small left">This is a row div with a left alignment.</p>
<div class="row left">
<button class="small left">Option 1</button>
<button class="small right">Option 2</button>
</div>
<!-- Center test -->
<p class="small left">This is a row div with a center alignment.</p>
<div class="row center">
<button class="small left">Option 1</button>
<button class="small right">Option 2</button>
</div>
<!-- Right test -->
<p class="small left">This is a row div with a right alignment.</p>
<div class="row right">
<button class="small left">Option 1</button>
<button class="small right">Option 2</button>
</div>
<!-- Stretch row test -->
<p class="small left">This is a row div where all children are stretched.</p>
<div class="row stretch">
<button class="small left">Option 1</button>
<button class="small right">Option 2</button>
</div>
<!-- Stretched test -->
<p class="small left">This is a row div where only one child is stretched.</p>
<div class="row">
<input class="small left stretched" placeholder="This is a placeholder">
<button class="small right">Option 1</button>
</div>
<!-- Stubborn test -->
<p class="small left">This is a row div where only one child is stretched & stubborn.</p>
<div class="row">
<input class="small left stretched stubborn" placeholder="This is a placeholder">
<button class="small right">Option 1</button>
</div>
<!-- Select test -->
<p class="small left">This is a select input.</p>
<select class="small left">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
<!-- Textarea test -->
<p class="small left">This is a textarea input.</p>
<textarea class="small left" placeholder="This is a placeholder">This is some text</textarea>
<!-- Spinning spinner -->
<p class="small left">This is a spinning spinner.</p>
<div class="row coasted">
<p class="huge left stretched" style="height: 10vh;">Loading...</p>
<span class="spinner spinning"></span>
</div>
<!-- Modal tests -->
<p class="small left">Here are some buttons to set the modals.</p>
<div class="row stretch">
<button class="small left" onclick="alertDialog('This is an alert dialog')">Spawn alert dialog</button>
<button class="small left" onclick="promptDialog('This is a prompt dialog', { placeholder: 'This is a custom hint' })">Spawn prompt dialog</button>
<button class="small left" onclick="confirmDialog('This is a confirm dialog', { approveText: 'Confirm' })">Spawn confirm dialog</button>
<button class="small left" onclick="progressScreen('Sleeping for 10 seconds', sleep(10))">Spawn loading screen</button>
</div>
</body>
</html>