-
Notifications
You must be signed in to change notification settings - Fork 33
/
Copy pathdashboard.html
309 lines (309 loc) · 17.2 KB
/
dashboard.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
<!DOCTYPE html>
<html data-background="secondary">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="./../assets/tocas/tocas.css" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet" />
<title>資訊儀表板 - Tocas UI</title>
</head>
<body>
<div class="ts-app-layout is-full is-horizontal">
<div class="cell is-dark" style="width: 240px; color: var(--ts-white)">
<div class="ts-content is-center-aligned">
<div class="ts-wrap is-vertical is-compact is-middle-aligned">
<div class="ts-image is-tiny is-circular">
<img src="./../assets/images/user.png" />
</div>
<div class="ts-header">Yami Odymel</div>
</div>
</div>
<div class="ts-divider"></div>
<div class="ts-content is-dense">
<div class="ts-row">
<div class="column is-fluid">
<div class="ts-text is-bold">使用者管理</div>
</div>
<div class="column">
<span class="ts-icon is-users-icon"></span>
</div>
</div>
</div>
<div class="ts-menu is-dense is-small" style="opacity: 0.8">
<a href="#!" class="item">搜尋</a>
<a href="#!" class="item">新增</a>
<a href="#!" class="item">移除</a>
</div>
<div class="ts-space is-small"></div>
<div class="ts-divider"></div>
<div class="ts-content is-dense">
<div class="ts-row">
<div class="column is-fluid">
<div class="ts-text is-bold">網站管理</div>
</div>
<div class="column">
<span class="ts-icon is-cogs-icon"></span>
</div>
</div>
</div>
<div class="ts-menu is-dense is-small" style="opacity: 0.8">
<a href="#!" class="item">偏好設定</a>
<a href="#!" class="item">系統最佳化</a>
<a href="#!" class="item">安全防護</a>
</div>
<div class="ts-space is-small"></div>
<div class="ts-divider"></div>
<a href="#!" class="ts-content is-interactive is-dense">
<div class="ts-row">
<div class="column is-fluid">
<div class="ts-text is-bold">管理文章</div>
</div>
<div class="column">
<span class="ts-icon is-newspaper-icon"></span>
</div>
</div>
</a>
<div class="ts-divider"></div>
<a href="#!" class="ts-content is-interactive is-dense">
<div class="ts-row">
<div class="column is-fluid">
<div class="ts-text is-bold">回報處理</div>
</div>
<div class="column">
<span class="ts-icon is-flag-icon"></span>
</div>
</div>
</a>
</div>
<div class="cell is-fluid is-secondary">
<div class="ts-space is-large"></div>
<div class="ts-container is-narrow">
<div class="ts-header is-large is-heavy">儀表板</div>
<div class="ts-text is-secondary">從這裡快速檢視您的網站狀態。</div>
<div class="ts-space is-large"></div>
<div class="ts-grid is-relaxed is-3-columns">
<div class="column">
<div class="ts-box">
<div class="ts-content">
<div class="ts-statistic">
<div class="value">42,689</div>
<div class="comparison is-increased">32</div>
</div>
本月拜訪次數
</div>
<div class="symbol">
<span class="ts-icon is-eye-icon"></span>
</div>
</div>
</div>
<div class="column">
<div class="ts-box">
<div class="ts-content">
<div class="ts-statistic">
<div class="value">8,652</div>
<div class="comparison is-increased">351</div>
</div>
總會員數
</div>
<div class="symbol">
<span class="ts-icon is-users-icon"></span>
</div>
</div>
</div>
<div class="column">
<div class="ts-box">
<div class="ts-content">
<div class="ts-statistic">
<div class="value">3</div>
<div class="comparison is-decreased">14</div>
</div>
平均在線分鐘數
</div>
<div class="symbol">
<span class="ts-icon is-clock-icon"></span>
</div>
</div>
</div>
</div>
<div class="ts-space is-large"></div>
<div class="ts-divider is-section"></div>
<div class="ts-space is-large"></div>
<div class="ts-grid is-relaxed">
<div class="column is-10-wide">
<div class="ts-box is-top-indicated">
<div class="ts-content is-dense">
<div class="ts-header is-heavy">會員清單</div>
</div>
<div class="ts-divider"></div>
<table class="ts-table is-basic">
<thead>
<tr>
<th>使用者名稱</th>
<th>電子郵件信箱</th>
<th>啟用日期</th>
</tr>
</thead>
<tbody>
<tr class="is-disabled">
<td>yamiodymel</td>
<td>yamiodymel@example.com</td>
<td>2013/09/14</td>
</tr>
<tr>
<td>karisu</td>
<td>superkari007@example.com</td>
<td>2020/11/03</td>
</tr>
<tr>
<td class="is-disabled">shiroteacat</td>
<td>shiroteacat@example.com</td>
<td>2009/07/15</td>
</tr>
</tbody>
</table>
<div class="ts-divider"></div>
<div class="ts-content">
<div class="ts-pagination">
<a class="item is-back"></a>
<a class="item">1</a>
<a class="item is-active">2</a>
<a class="item">3</a>
<a class="item">4</a>
<a class="item is-next"></a>
</div>
</div>
</div>
<div class="ts-space is-big"></div>
<div class="ts-box is-top-indicated">
<div class="ts-content is-dense">
<div class="ts-header is-heavy">留言板</div>
</div>
<div class="ts-divider"></div>
<div class="ts-content">
<div class="ts-conversation">
<div class="avatar">
<img src="./../assets/images/user.png" />
</div>
<div class="content">
<div class="bubble">
<div class="text">
不要到處亂刪使用者的留言，<br />
你是組刻薄嗎 🥲
</div>
<div class="meta">
<div class="item">下午 11:58</div>
</div>
</div>
</div>
</div>
<div class="ts-conversation is-self">
<div class="avatar">
<img src="./../assets/images/user.png" />
</div>
<div class="content">
<div class="bubble">
<div class="text">好喔 👀👌</div>
<div class="meta">
<div class="item">下午 11:59</div>
</div>
</div>
</div>
</div>
</div>
<div class="ts-divider"></div>
<div class="ts-content">
<div class="ts-input is-fluid">
<textarea placeholder="輸入訊息…"></textarea>
</div>
<div class="ts-space"></div>
<div class="ts-row is-compact">
<div class="column">
<div class="ts-wrap is-compact">
<div class="ts-chip is-circular">早安！</div>
<div class="ts-chip is-circular">知道了。</div>
</div>
</div>
<div class="column is-fluid is-end-aligned">
<button class="ts-button">送出</button>
</div>
</div>
</div>
</div>
</div>
<div class="column is-6-wide">
<div class="ts-box is-top-indicated">
<div class="ts-content is-dense">
<div class="ts-header is-heavy">系統概況</div>
</div>
<div class="ts-divider"></div>
<div class="ts-content">
<div class="ts-text is-bold">剩餘空間</div>
<div class="ts-space is-small"></div>
<div class="ts-progress is-small">
<div class="bar" style="width: 50%">
<div class="text">64 GB</div>
</div>
</div>
<div class="ts-space is-small"></div>
<div class="ts-text is-bold">可用記憶體</div>
<div class="ts-space is-small"></div>
<div class="ts-progress is-small">
<div class="bar" style="width: 80%">
<div class="text">4 GB</div>
</div>
</div>
<div class="ts-space is-small"></div>
<div class="ts-text is-bold">系統負載</div>
<div class="ts-space is-small"></div>
<div class="ts-progress is-small">
<div class="bar" style="width: 30%">
<div class="text">30%</div>
</div>
</div>
</div>
</div>
<div class="ts-space is-big"></div>
<div class="ts-box is-collapsed is-top-indicated">
<div class="ts-content is-dense">
<div class="ts-header is-heavy">其他功能</div>
</div>
<div class="ts-divider"></div>
<div class="ts-menu is-collapsed">
<a class="item">
<div class="ts-iconset is-outlined">
<span class="ts-icon is-bullhorn-icon"></span>
<div class="content">
<div class="title">發送公告</div>
<div class="text">傳送一個所有人都可見的訊息。</div>
</div>
</div>
</a>
<div class="ts-divider"></div>
<a class="item">
<div class="ts-iconset is-outlined">
<span class="ts-icon is-ticket-icon"></span>
<div class="content">
<div class="title">建立優惠券</div>
<div class="text">向目前登入的使用者發送折價優惠代碼。</div>
</div>
</div>
</a>
<div class="ts-divider"></div>
<a class="item">
<div class="ts-iconset is-outlined">
<span class="ts-icon is-hand-icon"></span>
<div class="content">
<div class="title">強制停機</div>
<div class="text">讓網站進入關機程序並逐一踢出已登入的使用者。</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>