-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
367 lines (334 loc) · 13.7 KB
/
demo.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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/DTD/strict.dtd">
<html>
<head>
<title>Framework Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link type="text/css" rel="stylesheet" href="/latest/" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
body {background:#eee;}
#container {background:#fff;}
</style>
</head>
<body class="med sans-serif use-code mla">
<div id="container">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr />
<p>Some of the simple tags. Sometimes it's great to <acronym title="laugh out loud">LOL</acronym>. <b>A bold tag</b>. <em>An emphasis tag</em>. <strong>A strong tag</strong>. <i>An italic tag</i>. Aenean id tellus condimentum leo mattis condimentum. <small>Maecenas pretium tempor neque.</small> Donec non erat lacinia nibh pretium lobortis. Sed eget ligula a turpis venenatis laoreet. Quisque eget leo sit amet risus blandit consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id tellus condimentum leo mattis condimentum. Maecenas pretium tempor neque. Donec non erat lacinia nibh pretium lobortis. Sed eget ligula a turpis venenatis laoreet. Quisque eget leo sit amet risus blandit consequat.</p>
<hr />
<h2>Some grid stuff</h2>
<div class="g4">
<p>This is a paragraph in the first column Columns are pretty neat!</p>
</div>
<div class="g4">
<p>This is a paragraph in the second column. I really happen to like this column, being in the middle and all.</p>
</div>
<div class="g4">
<p>This is a paragraph in the third and final column</p>
</div>
<hr />
<ol>
<li>A standard list item.</li>
<li>Another standard list item.</li>
<li>
A two-line list item.<br />
This is the second line.
</li>
<li>
<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
</li>
<li>
<ol>
<li>A standard list item.</li>
<li>
<p>Nesting is fun, but also sometimes necessary. To include text adjacent to a nested list, it must be encapsulated in a paragraph tag or other block-level element.</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
<li>
A two-line list item.<br />
The second line.
</li>
<li>
<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
</li>
</ol>
</li>
</ol>
<p>Just an arbitrary paragraph for some separation.</p>
<ul>
<li>A standard list item.</li>
<li>Another standard list item.</li>
<li>
A two-line list item.<br />
This is the second line.
</li>
<li>
<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
</li>
<li>
<ul>
<li>A standard list item.</li>
<li>
<p>Nesting is fun, but also sometimes necessary. To include text adjacent to a nested list, it must be encapsulated in a paragraph tag or other block-level element.</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
<li>
A two-line list item.<br />
The second line.
</li>
<li>
<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
</li>
<li>
<ul>
<li>First</li>
<li>Second</li>
</ul>
</li>
</ul>
</li>
</ul>
<hr />
<p class="sampledata">Aenean commodo tellus in turpis. Phasellus auctor justo. Pellentesque dignissim velit vitae tellus. Quisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi fringilla mi cursus est. Etiam quis justo. Pellentesque at lectus. Morbi pharetra.</p>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id tellus condimentum leo mattis condimentum. Aenean commodo tellus in turpis. Phasellus auctor justo. Pellentesque dignissim velit vitae tellus. Quisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi fringilla mi cursus est. Etiam quis justo. Pellentesque at lectus. Morbi pharetra.
<cite>Matt Basta</cite>
</blockquote>
<p>This is a paragraph right after.</p>
<table>
<caption>This is the form caption</caption>
<tr>
<th>This is a header</th>
<th>Another</th>
</tr>
<tr>
<td>Item One</td>
<td>Something else that's useful</td>
</tr>
<tr>
<td>Item Two</td>
<td>Something else that's useful</td>
</tr>
<tr>
<td>Item Three</td>
<td>Something else that's useful</td>
</tr>
<tr>
<td>Item Four</td>
<td>Something else that's useful</td>
</tr>
</table>
<p>Here is a clump of sample code-ish stuff. Make sure you have the <code>use-code</code> flag set on your body tag when you declare a page. If you don't, code will not look pretty! We make changes to spacing around <code>code</code> and <code>pre</code> elements, as well as apply nice native font families by default.</p>
<pre>
Twinkle twinkle little star
How I wonder what you are
Up above the world so high
Like a diamond in the sky
Twinkle twinkle little star
How I wonder what you are
</pre>
<p>And also, this is a code block:</p>
<code><span class="cm">// This is a comment.</span>
<span class="cs">function</span> foo(<span class="v">$bar</span>) {
<span class="cs">echo</span> <span class="v">$bar</span>, <span class="l">" is a pretty cool guy that "</span>;
}
</code>
<hr />
<h2>Interface Controls</h2>
<h3>Tabs</h3>
<ul class="tabs">
<li class="current"><a href="#">Selected Tab</a></li><li><a href="#">Tab</a></li><li><a href="#">Tab</a></li><li><a href="#">Tab</a></li><li><a href="#">A Really Really Really Really Long Tab</a></li><li><a href="#">Tab</a></li>
</ul>
<h3>Inline Dialogs</h3>
<h4>Login</h4>
<form class="login" method="post" action="">
<strong>Login</strong>
<label id="username_context" for="username">Username</label>
<input type="text" value="" name="username"/>
<label id="password_context" for="password">Password</label>
<input type="password" value="" name="password"/>
<p class="buttons">
<input type="submit" class="submit" value="Login"/>
</p>
</form>
<form class="login" method="post" action="">
<strong>Login</strong>
<p class="inliner">
<label id="username_context" for="username">Username</label>
<input type="text" value="" name="username" />
</p>
<p class="inliner">
<label id="password_context" for="password">Password</label>
<input type="password" value="" name="password" />
</p>
<p class="buttons">
<input type="submit" class="submit" value="Login"/>
</p>
</form>
<h4>Warning</h4>
<h5>Form Style</h5>
<form class="warning_box" method="post" action="">
<strong>Warning!</strong>
<p>By clicking "Delete" you will permananently deleting the entry <tt>Blueprint CSS</tt>.</p>
<label>
<input type="checkbox" class="checkbox" value="sure" name="sure" />
<span>I am sure I wish to do this.</span>
<small>This action cannot be un-done.</small>
</label>
<p class="buttons">
<input type="submit" value="Delete" class="submit" name="submit" /><input type="submit" value="Cancel" class="submit" name="cancel" />
</p>
</form>
<h5>Message Style</h5>
<div class="warning_box">
<strong>Warning!</strong>
<p>Changes that are made on this page may affect other users of the system. To ensure that you do not disrupt the system's stability or the workflow of another user, make sure that you create a restore snapshot before continuing.</p>
<p>As an extra layer of protection, it would be a good idea to create a full system backup.</p>
</div>
<h4>Notification</h4>
<div class="notice_box">
<strong>Notice</strong>
<p>The system is currently performing maintenance. Some operations may take longer than they otherwise would.</p>
<p>Thank you for your patience.</p>
</div>
<h4>Success</h4>
<div class="success_box">
<strong>Completed Successfully</strong>
<p>The system maintenance operation has completed successfully. Thank you for your patience. All system functionality has been restored to normal.</p>
</div>
<hr />
<h2>Form Test</h2>
<h3>Standard Elements</h3>
<form action="#" method="get">
<label for="text1">Textbox</label>
<input type="text" value="" name="text1" />
<small>This is a textbox.</small>
<div class="radiogroup">
<label for="radio1">Radio Buttons</label>
<label><input class="radio" type="radio" value="r1" name="radio1" /> <span>Option 1</span></label>
<label><input class="radio" type="radio" value="r2" name="radio1" /> <span>Option 2</span></label>
<label><input class="radio" type="radio" value="r3" name="radio1" /> <span>Option 3</span></label>
<label><input class="radio" type="radio" value="r4" name="radio1" /> <span>Option 4</span></label>
<label><input class="radio" type="radio" value="r5" name="radio1" /> <span>Option 5</span></label>
</div>
<label for="dropdown1">Dropdown</label>
<select name="dropdown1">
<option>Value</option>
<option>Value</option>
<option>Value</option>
<option>Value</option>
<option>Value</option>
</select>
<small>This is a dropdown.</small>
<div class="checkgroup">
<label>
<input type="checkbox" class="checkbox" value="c1" name="check1" />
<span>Check 1</span>
<small>This is a checkbox.</small>
</label>
<label>
<input type="checkbox" class="checkbox" value="c2" name="check2" />
<span>Check 2</span>
<small>Sometimes you need explanations for each one.</small>
</label>
<label><input type="checkbox" class="checkbox" value="c3" name="check3" /> <span>Check 3</span></label>
<label><input type="checkbox" class="checkbox" value="c4" name="check4" /> <span>Check 4</span></label>
<label><input type="checkbox" class="checkbox" value="c5" name="check5" /> <span>Check 5</span></label>
<label><input type="checkbox" class="checkbox" value="c6" name="check6" /> <span>Check 6</span></label>
</div>
</form>
<h3>Custom Layouts</h3>
<form action="#" method="get">
<p class="inliner">
<label for="horiz_textbox">Horizontal Textbox</label>
<input type="text" name="horiz_textbox" />
</p>
<p class="inliner">
<label for="horiz_search">Search</label>
<input type="text" name="horiz_search" />
<label>
<span class="hidden">Search Type</span>
<select name="horiz_search_type">
<option value="web">Web</option>
<option value="images">Images</option>
<option value="video">Video</option>
</select>
</label>
</p>
<p class="buttons">
<input type="submit" value="Submit" class="submit" /><button onclick="alert('You clicked me!');">Action Button</button>
</p>
</form>
<h3>Custom Elements</h3>
<form action="#" method="get">
<label for="money1">Dollar</label>
<p class="money">
<span>
<span>$</span>
<input type="text" value="" name="money1" />
</span>
</p>
<hr />
<label for="money2">Euro</label>
<p class="money">
<span>
<span>€</span>
<input type="text" value="" name="money2" />
</span>
</p>
<label for="unit1">Meters</label>
<p class="unit">
<span>
<input type="text" value="" name="unit1" />
<span>meters</span>
</span>
</p>
<fieldset>
<legend>Fieldset</legend>
<label for="text2">Textbox</label>
<input type="text" value="" name="text2" />
<small>This is an explanation in a fieldset</small>
<label for="text3">Textbox</label>
<input type="text" value="" name="text3" />
<hr />
<label for="dropdown2">Dropdown</label>
<select name="dropdown2">
<option>Value</option>
<option>Value</option>
<option>Value</option>
<option>Value</option>
<option>Value</option>
</select>
</fieldset>
<p class="upload">
<label for="file1">File Upload</label>
<input type="file" name="file1" />
<small>Choose a file from your desktop.</small>
<span>Note: Do not upload files to locations that you do not trust.</span>
</p>
<div class="buttons">
<input type="submit" value="Submit" class="submit" />
</div>
</form>
<div class="clear"> </div>
</div>
</body>
</html>