-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
201 lines (172 loc) · 13.3 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
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
<!DOCTYPE html>
<html lang="tw">
<head>
<meta http-equiv="Content-Language" content="zh-tw" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />
<title>首頁 - OA-material</title>
<meta name="robots" content="index,follow" />
<meta name="author" content="吳政賢(OA Wu)" />
<meta name="keywords" content="OA-material | Material | Design | jQuery | javascript | compass | scss | sass | html | css" />
<meta name="description" content="Material 風格的 UI 設計。 這是一個藉由 Compass、HTML 以及 jQuery.. 工具實作的 Material UI Design for Web。 開發者可使用 scss 或者 css 來套用，並且選擇使用 jQuery 來達到更多 UI 回饋效果。" />
<meta property="og:site_name" content="OA-material" />
<meta property="og:title" content="首頁 - OA-material" />
<meta property="og:description" content="Material 風格的 UI 設計。 這是一個藉由 Compass、HTML 以及 jQuery.. 工具實作的 Material UI Design for Web。 開發者可使用 scss 或者 css 來套用，並且選擇使用 jQuery 來達到更多 UI 回饋效果。" />
<meta property="og:url" content="https://works.ioa.tw/OA-material/index.html" />
<meta property="fb:admins" content="100000100541088" />
<meta property="fb:app_id" content="640377126095413" />
<meta property="og:locale" content="zh_TW" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://works.ioa.tw/OA-material/img/og/index.png" alt="OA-material" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<link href="http://fonts.googleapis.com/css?family=Gafata" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" type="text/css" />
<link href="css/public.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/oa.material.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery_v1.10.2/jquery-1.10.2.min.js" language="javascript" type="text/javascript" ></script>
<script src="js/public.js" language="javascript" type="text/javascript" ></script>
<script src="js/index.js" language="javascript" type="text/javascript" ></script>
</head>
<body lang="zh-tw">
<div id='container'>
<div class='area'>
<h2>Button</h2>
<h3>General</h3>
<div class='buttons'>
<button class='oa-btn'>Pure</button>
<button class='oa-btn red'>Red</button>
<button class='oa-btn orange'>Orange</button>
<button class='oa-btn yellow'>Yellow</button>
<button class='oa-btn green'>Green</button>
<button class='oa-btn blue'>Blue</button>
<button class='oa-btn cyan'>Cyan</button>
<button class='oa-btn purple'>Purple</button>
</div>
<h3>Jelly</h3>
<div class='jelly-buttons'>
<button class='oa-btn jelly'>Pure</button>
<button class='oa-btn red jelly'>Red</button>
<button class='oa-btn orange jelly'>Orange</button>
<button class='oa-btn yellow jelly'>Yellow</button>
<button class='oa-btn green jelly'>Green</button>
<button class='oa-btn blue jelly'>Blue</button>
<button class='oa-btn cyan jelly'>Cyan</button>
<button class='oa-btn purple jelly'>Purple</button>
</div>
<h3>Disable</h3>
<div class='disable-buttons'>
<button disabled class='oa-btn'>Pure</button>
<button disabled class='oa-btn red'>Red</button>
<button disabled class='oa-btn orange'>Orange</button>
<button disabled class='oa-btn yellow'>Yellow</button>
<button disabled class='oa-btn green'>Green</button>
<button disabled class='oa-btn blue'>Blue</button>
<button disabled class='oa-btn cyan'>Cyan</button>
<button disabled class='oa-btn purple'>Purple</button>
</div>
</div>
<div class='area'>
<h2>Radio</h2>
<h3>General</h3>
<div class='radios'>
<div class="oa-rdo"><input type="radio" id="radio1" name="radio"><span></span><label for="radio1">Item 1</label></div>
<div class="oa-rdo red"><input type="radio" id="radio2" name="radio"><span></span><label for="radio2">Item 2</label></div>
<div class="oa-rdo orange"><input type="radio" id="radio3" name="radio"><span></span><label for="radio3">Item 3</label></div>
<div class="oa-rdo yellow"><input type="radio" id="radio4" name="radio"><span></span><label for="radio4">Item 4</label></div>
<div class="oa-rdo green"><input type="radio" id="radio5" name="radio"><span></span><label for="radio5">Item 5</label></div>
<div class="oa-rdo blue"><input type="radio" id="radio6" name="radio"><span></span><label for="radio6">Item 6</label></div>
<div class="oa-rdo cyan"><input type="radio" id="radio7" name="radio"><span></span><label for="radio7">Item 7</label></div>
<div class="oa-rdo purple"><input type="radio" id="radio8" name="radio"><span></span><label for="radio8">Item 8</label></div>
</div>
<h3>Disable</h3>
<div class='disable-radios'>
<div class="oa-rdo"><input type="radio" disabled id="radio1-disable" name="radio-disable"><span></span><label for="radio1-disable">Item 1</label></div>
<div class="oa-rdo red"><input type="radio" disabled id="radio2-disable" name="radio-disable"><span></span><label for="radio2-disable">Item 2</label></div>
<div class="oa-rdo orange"><input type="radio" disabled id="radio3-disable" name="radio-disable"><span></span><label for="radio3-disable">Item 3</label></div>
<div class="oa-rdo yellow"><input type="radio" disabled id="radio4-disable" name="radio-disable"><span></span><label for="radio4-disable">Item 4</label></div>
<div class="oa-rdo green"><input type="radio" disabled id="radio5-disable" name="radio-disable"><span></span><label for="radio5-disable">Item 5</label></div>
<div class="oa-rdo blue"><input type="radio" disabled id="radio6-disable" name="radio-disable"><span></span><label for="radio6-disable">Item 6</label></div>
<div class="oa-rdo cyan"><input type="radio" disabled id="radio7-disable" name="radio-disable"><span></span><label for="radio7-disable">Item 7</label></div>
<div class="oa-rdo purple"><input type="radio" disabled id="radio8-disable" name="radio-disable"><span></span><label for="radio8-disable">Item 8</label></div>
</div>
</div>
<div class='area'>
<h2>Checkbox</h2>
<h3>General</h3>
<div class='checkboxs'>
<div class="oa-ckb"><input type="checkbox" id="checkbox1"><span></span><label for="checkbox1">Item 1</label></div>
<div class="oa-ckb red"><input type="checkbox" id="checkbox2"><span></span><label for="checkbox2">Item 2</label></div>
<div class="oa-ckb orange"><input type="checkbox" id="checkbox3"><span></span><label for="checkbox3">Item 3</label></div>
<div class="oa-ckb yellow"><input type="checkbox" id="checkbox4"><span></span><label for="checkbox4">Item 4</label></div>
<div class="oa-ckb green"><input type="checkbox" id="checkbox5"><span></span><label for="checkbox5">Item 5</label></div>
<div class="oa-ckb blue"><input type="checkbox" id="checkbox6"><span></span><label for="checkbox6">Item 6</label></div>
<div class="oa-ckb cyan"><input type="checkbox" id="checkbox7"><span></span><label for="checkbox7">Item 7</label></div>
<div class="oa-ckb purple"><input type="checkbox" id="checkbox8"><span></span><label for="checkbox8">Item 8</label></div>
</div>
<h3>Disable</h3>
<div class='disable-checkboxs'>
<div class="oa-ckb"><input type="checkbox" disabled id="checkbox1-disable"><span></span><label for="checkbox1-disable">Item 1</label></div>
<div class="oa-ckb red"><input type="checkbox" disabled id="checkbox2-disable"><span></span><label for="checkbox2-disable">Item 2</label></div>
<div class="oa-ckb orange"><input type="checkbox" disabled id="checkbox3-disable"><span></span><label for="checkbox3-disable">Item 3</label></div>
<div class="oa-ckb yellow"><input type="checkbox" disabled id="checkbox4-disable"><span></span><label for="checkbox4-disable">Item 4</label></div>
<div class="oa-ckb green"><input type="checkbox" disabled id="checkbox5-disable"><span></span><label for="checkbox5-disable">Item 5</label></div>
<div class="oa-ckb blue"><input type="checkbox" disabled id="checkbox6-disable"><span></span><label for="checkbox6-disable">Item 6</label></div>
<div class="oa-ckb cyan"><input type="checkbox" disabled id="checkbox7-disable"><span></span><label for="checkbox7-disable">Item 7</label></div>
<div class="oa-ckb purple"><input type="checkbox" disabled id="checkbox8-disable"><span></span><label for="checkbox8-disable">Item 8</label></div>
</div>
</div>
<div class='area'>
<h2>Switch</h2>
<h3>General</h3>
<div class='switches'>
<div class="oa-swh"><input type="checkbox" id="switch1"><span></span><label for="switch1">Item 1</label></div>
<div class="oa-swh red"><input type="checkbox" id="switch2"><span></span><label for="switch2">Item 2</label></div>
<div class="oa-swh orange"><input type="checkbox" id="switch3"><span></span><label for="switch3">Item 3</label></div>
<div class="oa-swh yellow"><input type="checkbox" id="switch4"><span></span><label for="switch4">Item 4</label></div>
<div class="oa-swh green"><input type="checkbox" id="switch5"><span></span><label for="switch5">Item 5</label></div>
<div class="oa-swh blue"><input type="checkbox" id="switch6"><span></span><label for="switch6">Item 6</label></div>
<div class="oa-swh cyan"><input type="checkbox" id="switch7"><span></span><label for="switch7">Item 7</label></div>
<div class="oa-swh purple"><input type="checkbox" id="switch8"><span></span><label for="switch8">Item 8</label></div>
</div>
<h3>Full</h3>
<div class='full-switches'>
<div class="oa-swh full"><input type="checkbox" id="switch1-full"><span></span><label for="switch1-full">Item 1</label></div>
<div class="oa-swh full red"><input type="checkbox" id="switch2-full"><span></span><label for="switch2-full">Item 2</label></div>
<div class="oa-swh full orange"><input type="checkbox" id="switch3-full"><span></span><label for="switch3-full">Item 3</label></div>
<div class="oa-swh full yellow"><input type="checkbox" id="switch4-full"><span></span><label for="switch4-full">Item 4</label></div>
<div class="oa-swh full green"><input type="checkbox" id="switch5-full"><span></span><label for="switch5-full">Item 5</label></div>
<div class="oa-swh full blue"><input type="checkbox" id="switch6-full"><span></span><label for="switch6-full">Item 6</label></div>
<div class="oa-swh full cyan"><input type="checkbox" id="switch7-full"><span></span><label for="switch7-full">Item 7</label></div>
<div class="oa-swh full purple"><input type="checkbox" id="switch8-full"><span></span><label for="switch8-full">Item 8</label></div>
</div>
<h3>Disable</h3>
<div class='disable-switches'>
<div class="oa-swh"><input type="checkbox" disabled id="switch1-disable"><span></span><label for="switch1-disable">Item 1</label></div>
<div class="oa-swh red"><input type="checkbox" disabled id="switch2-disable"><span></span><label for="switch2-disable">Item 2</label></div>
<div class="oa-swh orange"><input type="checkbox" disabled id="switch3-disable"><span></span><label for="switch3-disable">Item 3</label></div>
<div class="oa-swh yellow"><input type="checkbox" disabled id="switch4-disable"><span></span><label for="switch4-disable">Item 4</label></div>
<div class="oa-swh green"><input type="checkbox" disabled id="switch5-disable"><span></span><label for="switch5-disable">Item 5</label></div>
<div class="oa-swh blue"><input type="checkbox" disabled id="switch6-disable"><span></span><label for="switch6-disable">Item 6</label></div>
<div class="oa-swh cyan"><input type="checkbox" disabled id="switch7-disable"><span></span><label for="switch7-disable">Item 7</label></div>
<div class="oa-swh purple"><input type="checkbox" disabled id="switch8-disable"><span></span><label for="switch8-disable">Item 8</label></div>
</div>
</div>
<div class='area'>
<h2>Paper</h2>
<h3>General</h3>
<div class='papers'>
<div class='oa-paper'>pure</div>
<div class='oa-paper shadow'>shadow</div>
<div class='oa-paper corner'>corner</div>
<div class='oa-paper convex'>convex</div>
<div class='oa-paper horizontal-convex'>horizontal-convex</div>
<div class='oa-paper vertical-convex'>vertical-convex</div>
</div>
</div>
</div>
</body>
</html>