-
Notifications
You must be signed in to change notification settings - Fork 25
/
demo-kk-dark.html
66 lines (62 loc) · 2.91 KB
/
demo-kk-dark.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
<!DOCTYPE html>
<html>
<head>
<title>KitKat Dark - Holo Web</title>
<link rel="stylesheet" type="text/css" href="holo-base-elements.css" />
<link rel="stylesheet" type="text/css" href="holo-kk-dark-elements.css" />
<link rel="stylesheet" type="text/css" href="holo-base-widgets.css" />
<link rel="stylesheet" type="text/css" href="holo-kk-dark-widgets.css" />
<script type="text/javascript" src="holo-touch.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="shortcut icon" sizes="128x128" href="icon_128.png" />
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="icon_128.png" />
</head>
<body>
<header class="holo-actionBar">
<button class="holo-title holo-up" onclick="window.open('index.html', '_self');">
<img src="icon_48.png" />
KitKat Dark
</button>
<button style="float:right;">Button</button>
</header>
<p>This is a demo of the KitKat Holo Dark theme:</p>
<button>Button</button>
<button disabled>Disabled</button>
<br />
<input type="radio" name="radioset1" />
<input type="radio" name="radioset1" checked />
<input type="radio" name="radioset2" disabled />
<input type="radio" name="radioset2" checked disabled />
<br />
<input type="checkbox" />
<input type="checkbox" checked />
<input type="checkbox" disabled />
<input type="checkbox" checked disabled />
<br />
<select>
<option>Bacon</option>
<option>Ipsum</option>
<option>Dolor</option>
<option>Sit</option>
<option>Amet</option>
</select>
<br /><br />
<input type="range" min="0" max="10" value="5" />
<br /><br />
<input type="range" min="0" max="10" value="5" disabled />
<br /><br />
<progress value="0.5"></progress>
<br /><br />
<ul class="holo-list">
<li>Item 1</li>
<li>Item 2</li>
<li><button style="width: 100%; width: calc(100% + 32px);">Button 1</button></li>
<li><button style="width: 100%; width: calc(100% + 32px);">Button 2</button></li>
</ul>
<p>Bacon ipsum dolor sit amet incididunt cillum consectetur, prosciutto venison esse voluptate. Tenderloin pariatur elit, meatball bresaola in ad ullamco aute biltong bacon. <a href="demo-kk-light.html">This is a link to the Holo Light demo.</a> Dolor ground round boudin cow. Biltong minim esse, ground round veniam anim filet mignon mollit short loin tri-tip ad. Ham hock cupidatat irure, pastrami occaecat flank deserunt beef ribeye ex ad. Dolore cillum sirloin, pork tri-tip excepteur quis tenderloin ham.</p>
<footer class="holo-actionBar"><button onclick="window.open('demo-kk-light.html', '_self');" style="width: 100%; padding-left: 0; padding-right: 0;">Switch to light theme</button></footer>
</body>
</html>