-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
87 lines (79 loc) · 2.85 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
<!DOCTYPE html>
<html>
<head>
<title>Zenit UI</title>
<link rel="icon" type="image/png" href="https://dahliaos.io/images/favicon/favicon-32x32.png"/>
<link rel="stylesheet" href="zenitUI.css">
</head>
<body>
<style>:root {--accent-color: var(--blood_red);}</style>
<h1>Zenit UI</h1>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<div style="display: flex; flex-direction: column; row-gap: 15px;">
<button class="primary bg_sky_blue">Primary</button>
<button class="secondary">Secondary</button>
<button disabled>Disabled</button>
<button class="primary pill bg_sky_blue">Primary</button>
<button class="secondary pill bg_sky_blue">Secondary</button>
<button class="pill" disabled>Disabled</button>
<button class="icon-text"><i class="material-icons">cloud</i>Cloud</button>
<button class="icon"><i class="material-icons">visibility</i></button>
<button class="icon"><i class="material-icons">add</i></button>
<button class="icon"><i class="material-icons">close</i></button>
<input type="text" class="input" placeholder="Enter your Email address here"></input>
<input type="text" class="input" placeholder="Enter your Email address here" autofocus></input>
<input type="text" class="input" placeholder="Enter your Email address here" disabled></input>
<select>
<option>Select</option>
<option>zenitUI CSS</option>
</select>
<select disabled>
<option>Select</option>
<option>zenitUI CSS</option>
</select>
<input type="checkbox">
<input type="checkbox" checked>
<input type="radio">
<input type="radio" checked>
<input type="checkbox" class="toggle" id="toggle" /><label class="toggle" for="toggle"></label>
<input type="checkbox" class="toggle" id="toggle1" checked/><label class="toggle" for="toggle1"></label>
<div class="card">
<p>Card</p>
</div>
<div class="list">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<div class="tabs">
<input type="radio" name="tabs" id="tab1" checked>
<label for="tab1"><i class="material-icons">spa</i> Tab 1</label>
<div>Tab with text and icon</div>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">Tab 2</label>
<div>Tab with text only</div>
<input type="radio" name="tabs" id="tab3">
<label for="tab3"><i class="material-icons">spa</i></label>
<div>Tab with icon only</div>
</div>
</div>
<ul class="zenit_carousel">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="zenit_theme_toggle">
<input type="radio" name="options" id="toggle_system">
<input type="radio" name="options" id="toggle_light" checked>
<input type="radio" name="options" id="toggle_dark">
<label for="toggle_dark"><i class="material-icons">dark_mode</i></label>
<label for="toggle_light"><i class="material-icons">light_mode</i></label>
<label for="toggle_system"><i class="material-icons">devices</i></label>
</div>
</body>
</html>