Like 0
Fork 0

Last active 17 hours ago

anduin's Avatar anduin revised this gist 17 hours ago. Go to revision

1 file changed, 10 insertions, 4 deletions

Prompt Frontend.md

@@ -2,6 +2,7 @@
2 2
3 3 所以，在开始之前，我们先学习一下这个模板。它的仪表板页面长这样：
4 4
5 + ```html
5 6 <main class="content">
6 7 <div class="container-fluid p-0">
7 8
@@ -564,12 +565,13 @@
564 565 </div>
565 566 </div>
566 567 </main>
568 + ```
567 569
568 570 看得出来，上面是一个仪表板页面，展示了基本的控件。
569 571
570 572 它的个人资料页面长这样：
571 573
572 -
574 + ```html
573 575 <main class="content">
574 576 <div class="container-fluid p-0">
575 577
@@ -826,11 +828,13 @@
826 828 </div>
827 829 </div>
828 830 </div>
829 -
831 + ```
832 +
830 833 看得出来是个标准的登录页面。
831 834
832 835 它还示范了文件管理器的做法：
833 836
837 + ```
834 838 <main class="content">
835 839 <div class="container-fluid p-0">
836 840
@@ -1266,10 +1270,11 @@
1266 1270 </div>
1267 1271 </div>
1268 1272 </main>
1269 -
1273 + ```
1270 1274
1271 1275 也给出了基础的设置页面：
1272 1276
1277 + ```html
1273 1278 <main class="content">
1274 1279 <div class="container-fluid p-0">
1275 1280
@@ -1459,7 +1464,8 @@
1459 1464
1460 1465 </div>
1461 1466 </main>
1462 -
1467 + ```
1468 +
1463 1469 这些页面，只要按照它的标准，就写出来都非常漂亮。我想你已经能想象出这些页面布局多么漂亮合理。
1464 1470
1465 1471 我们现在一起来学习一下它的使用范式。虽然我知道它是标准的bootstrap，但我们要理解它是如何建设审美以构建这么漂亮的仪表板的。

anduin's Avatar anduin revised this gist 17 hours ago. Go to revision

1 file changed, 1725 insertions

Prompt Frontend.md (file created)

@@ -0,0 +1,1725 @@
1 + 我最近购买了一个 HTML 模板，打算用来优化一下我 ASP.NET Core 项目的前端。我写的 html 都是原生的 ASP.NET Core 的，都太丑了。
2 +
3 + 所以，在开始之前，我们先学习一下这个模板。它的仪表板页面长这样：
4 +
5 + <main class="content">
6 + <div class="container-fluid p-0">
7 +
8 + <div class="row mb-2 mb-xl-3">
9 + <div class="col-auto d-none d-sm-block">
10 + <h3>Dashboard</h3>
11 + </div>
12 +
13 + <div class="col-auto ms-auto text-end mt-n1">
14 +
15 + <div class="dropdown me-2 d-inline-block position-relative">
16 + <a class="btn btn-light bg-white shadow-sm dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-display="static">
17 +         <i class="align-middle mt-n1" data-lucide="calendar"></i> Today
18 +       </a>
19 +
20 + <div class="dropdown-menu dropdown-menu-end">
21 + <h6 class="dropdown-header">Settings</h6>
22 + <a class="dropdown-item" href="#">Action</a>
23 + <a class="dropdown-item" href="#">Another action</a>
24 + <a class="dropdown-item" href="#">Something else here</a>
25 + <div class="dropdown-divider"></div>
26 + <a class="dropdown-item" href="#">Separated link</a>
27 + </div>
28 + </div>
29 +
30 + <button class="btn btn-primary shadow-sm">
31 +       <i class="align-middle" data-lucide="filter">&nbsp;</i>
32 +     </button>
33 + <button class="btn btn-primary shadow-sm">
34 +       <i class="align-middle" data-lucide="refresh-cw">&nbsp;</i>
35 +     </button>
36 + </div>
37 + </div>
38 + <div class="row">
39 + <div class="col-12 col-sm-6 col-xxl-3 d-flex">
40 + <div class="card illustration flex-fill">
41 + <div class="card-body p-0 d-flex flex-fill">
42 + <div class="row g-0 w-100">
43 + <div class="col-6">
44 + <div class="illustration-text p-3 m-1">
45 + <h4 class="illustration-text">Welcome Back, Chris!</h4>
46 + <p class="mb-0">AppStack Dashboard</p>
47 + </div>
48 + </div>
49 + <div class="col-6 align-self-end text-end">
50 + <img src="img/illustrations/customer-support.png" alt="Customer Support" class="img-fluid illustration-img">
51 + </div>
52 + </div>
53 + </div>
54 + </div>
55 + </div>
56 + <div class="col-12 col-sm-6 col-xxl-3 d-flex">
57 + <div class="card flex-fill">
58 + <div class="card-body py-4">
59 + <div class="d-flex align-items-start">
60 + <div class="flex-grow-1">
61 + <h3 class="mb-2">$ 24.300</h3>
62 + <p class="mb-2">Total Earnings</p>
63 + <div class="mb-0">
64 + <span class="badge badge-subtle-success me-2"> +5.35% </span>
65 + <span class="text-muted">Since last week</span>
66 + </div>
67 + </div>
68 + <div class="d-inline-block ms-3">
69 + <div class="stat">
70 + <i class="align-middle text-success" data-lucide="dollar-sign"></i>
71 + </div>
72 + </div>
73 + </div>
74 + </div>
75 + </div>
76 + </div>
77 + <div class="col-12 col-sm-6 col-xxl-3 d-flex">
78 + <div class="card flex-fill">
79 + <div class="card-body py-4">
80 + <div class="d-flex align-items-start">
81 + <div class="flex-grow-1">
82 + <h3 class="mb-2">43</h3>
83 + <p class="mb-2">Pending Orders</p>
84 + <div class="mb-0">
85 + <span class="badge badge-subtle-danger me-2"> -4.25% </span>
86 + <span class="text-muted">Since last week</span>
87 + </div>
88 + </div>
89 + <div class="d-inline-block ms-3">
90 + <div class="stat">
91 + <i class="align-middle text-danger" data-lucide="shopping-bag"></i>
92 + </div>
93 + </div>
94 + </div>
95 + </div>
96 + </div>
97 + </div>
98 + <div class="col-12 col-sm-6 col-xxl-3 d-flex">
99 + <div class="card flex-fill">
100 + <div class="card-body py-4">
101 + <div class="d-flex align-items-start">
102 + <div class="flex-grow-1">
103 + <h3 class="mb-2">$ 18.700</h3>
104 + <p class="mb-2">Total Revenue</p>
105 + <div class="mb-0">
106 + <span class="badge badge-subtle-success me-2"> +8.65% </span>
107 + <span class="text-muted">Since last week</span>
108 + </div>
109 + </div>
110 + <div class="d-inline-block ms-3">
111 + <div class="stat">
112 + <i class="align-middle text-info" data-lucide="dollar-sign"></i>
113 + </div>
114 + </div>
115 + </div>
116 + </div>
117 + </div>
118 + </div>
119 + </div>
120 +
121 + <div class="row">
122 + <div class="col-12 col-lg-8 d-flex">
123 + <div class="card flex-fill w-100">
124 + <div class="card-header">
125 + <div class="card-actions float-end">
126 + <div class="dropdown position-relative">
127 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
128 +               <i class="align-middle" data-lucide="more-horizontal"></i>
129 +             </a>
130 +
131 + <div class="dropdown-menu dropdown-menu-end">
132 + <a class="dropdown-item" href="#">Action</a>
133 + <a class="dropdown-item" href="#">Another action</a>
134 + <a class="dropdown-item" href="#">Something else here</a>
135 + </div>
136 + </div>
137 + </div>
138 + <h5 class="card-title mb-0">Sales / Revenue</h5>
139 + </div>
140 + <div class="card-body d-flex w-100">
141 + <div class="align-self-center chart chart-lg">
142 + <canvas id="chartjs-dashboard-bar"></canvas>
143 + </div>
144 + </div>
145 + </div>
146 + </div>
147 + <div class="col-12 col-lg-4 d-flex">
148 + <div class="card flex-fill w-100">
149 + <div class="card-header">
150 + <span class="badge bg-info float-end">Today</span>
151 + <h5 class="card-title mb-0">Daily feed</h5>
152 + </div>
153 + <div class="card-body">
154 + <div class="d-flex align-items-start">
155 + <img src="img/avatars/avatar-5.jpg" width="36" height="36" class="rounded-circle me-2" alt="Ashley Briggs">
156 + <div class="flex-grow-1">
157 + <small class="float-end">5m ago</small>
158 + <strong>Ashley Briggs</strong> started following <strong>Stacie Hall</strong><br />
159 + <small class="text-muted">Today 7:51 pm</small><br />
160 +
161 + </div>
162 + </div>
163 +
164 + <hr />
165 + <div class="d-flex align-items-start">
166 + <img src="img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Chris Wood">
167 + <div class="flex-grow-1">
168 + <small class="float-end">30m ago</small>
169 + <strong>Chris Wood</strong> posted something on <strong>Stacie Hall</strong>'s timeline<br />
170 + <small class="text-muted">Today 7:21 pm</small>
171 +
172 + <div class="border text-sm text-muted p-2 mt-1">
173 + Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing...
174 + </div>
175 + </div>
176 + </div>
177 +
178 + <hr />
179 + <div class="d-flex align-items-start">
180 + <img src="img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Stacie Hall">
181 + <div class="flex-grow-1">
182 + <small class="float-end">1h ago</small>
183 + <strong>Stacie Hall</strong> posted a new blog<br />
184 +
185 + <small class="text-muted">Today 6:35 pm</small>
186 + </div>
187 + </div>
188 +
189 + <hr />
190 + <div class="d-grid">
191 + <a href="#" class="btn btn-primary">Load more</a>
192 + </div>
193 + </div>
194 + </div>
195 + </div>
196 + </div>
197 +
198 + <div class="row">
199 + <div class="col-12 col-lg-6 col-xl-4 d-flex">
200 + <div class="card flex-fill">
201 + <div class="card-header">
202 + <div class="card-actions float-end">
203 + <div class="dropdown position-relative">
204 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
205 +               <i class="align-middle" data-lucide="more-horizontal"></i>
206 +             </a>
207 +
208 + <div class="dropdown-menu dropdown-menu-end">
209 + <a class="dropdown-item" href="#">Action</a>
210 + <a class="dropdown-item" href="#">Another action</a>
211 + <a class="dropdown-item" href="#">Something else here</a>
212 + </div>
213 + </div>
214 + </div>
215 + <h5 class="card-title mb-0">Calendar</h5>
216 + </div>
217 + <div class="card-body d-flex">
218 + <div class="align-self-center w-100">
219 + <div class="chart">
220 + <div id="calendar-dashboard"></div>
221 + </div>
222 + </div>
223 + </div>
224 + </div>
225 + </div>
226 + <div class="col-12 col-xl-4 d-none d-xl-flex">
227 + <div class="card flex-fill w-100">
228 + <div class="card-header">
229 + <div class="card-actions float-end">
230 + <div class="dropdown position-relative">
231 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
232 +               <i class="align-middle" data-lucide="more-horizontal"></i>
233 +             </a>
234 +
235 + <div class="dropdown-menu dropdown-menu-end">
236 + <a class="dropdown-item" href="#">Action</a>
237 + <a class="dropdown-item" href="#">Another action</a>
238 + <a class="dropdown-item" href="#">Something else here</a>
239 + </div>
240 + </div>
241 + </div>
242 + <h5 class="card-title mb-0">Weekly sales</h5>
243 + </div>
244 + <div class="card-body d-flex">
245 + <div class="align-self-center w-100">
246 + <div class="py-3">
247 + <div class="chart chart-xs">
248 + <canvas id="chartjs-dashboard-pie"></canvas>
249 + </div>
250 + </div>
251 +
252 + <table class="table mb-0">
253 + <thead>
254 + <tr>
255 + <th>Source</th>
256 + <th class="text-end">Revenue</th>
257 + <th class="text-end">Value</th>
258 + </tr>
259 + </thead>
260 + <tbody>
261 + <tr>
262 + <td><i class="fas fa-square-full text-primary"></i> Direct</td>
263 + <td class="text-end">$ 2602</td>
264 + <td class="text-end text-success">+43%</td>
265 + </tr>
266 + <tr>
267 + <td><i class="fas fa-square-full text-warning"></i> Affiliate</td>
268 + <td class="text-end">$ 1253</td>
269 + <td class="text-end text-success">+13%</td>
270 + </tr>
271 + <tr>
272 + <td><i class="fas fa-square-full text-danger"></i> E-mail</td>
273 + <td class="text-end">$ 541</td>
274 + <td class="text-end text-success">+24%</td>
275 + </tr>
276 + <tr>
277 + <td><i class="fas fa-square-full text-dark"></i> Other</td>
278 + <td class="text-end">$ 1465</td>
279 + <td class="text-end text-success">+11%</td>
280 + </tr>
281 + </tbody>
282 + </table>
283 + </div>
284 + </div>
285 + </div>
286 + </div>
287 + <div class="col-12 col-lg-6 col-xl-4 d-flex">
288 + <div class="card flex-fill w-100">
289 + <div class="card-header">
290 + <div class="card-actions float-end">
291 + <div class="dropdown position-relative">
292 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
293 +               <i class="align-middle" data-lucide="more-horizontal"></i>
294 +             </a>
295 +
296 + <div class="dropdown-menu dropdown-menu-end">
297 + <a class="dropdown-item" href="#">Action</a>
298 + <a class="dropdown-item" href="#">Another action</a>
299 + <a class="dropdown-item" href="#">Something else here</a>
300 + </div>
301 + </div>
302 + </div>
303 + <h5 class="card-title mb-0">Appointments</h5>
304 + </div>
305 + <div class="card-body">
306 + <ul class="timeline">
307 + <li class="timeline-item">
308 + <strong>Chat with Carl and Ashley</strong>
309 + <span class="float-end text-muted text-sm">30m ago</span>
310 + <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris...</p>
311 + </li>
312 + <li class="timeline-item">
313 + <strong>The big launch</strong>
314 + <span class="float-end text-muted text-sm">2h ago</span>
315 + <p>Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum
316 + nunc...</p>
317 + </li>
318 + <li class="timeline-item">
319 + <strong>Coffee break</strong>
320 + <span class="float-end text-muted text-sm">3h ago</span>
321 + <p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada...</p>
322 + </li>
323 + <li class="timeline-item">
324 + <strong>Chat with team</strong>
325 + <span class="float-end text-muted text-sm">30m ago</span>
326 + <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum...</p>
327 + </li>
328 + </ul>
329 + </div>
330 + </div>
331 + </div>
332 + </div>
333 +
334 + <div class="card flex-fill">
335 + <div class="card-header">
336 + <div class="card-actions float-end">
337 + <div class="dropdown position-relative">
338 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
339 +           <i class="align-middle" data-lucide="more-horizontal"></i>
340 +         </a>
341 +
342 + <div class="dropdown-menu dropdown-menu-end">
343 + <a class="dropdown-item" href="#">Action</a>
344 + <a class="dropdown-item" href="#">Another action</a>
345 + <a class="dropdown-item" href="#">Something else here</a>
346 + </div>
347 + </div>
348 + </div>
349 + <h5 class="card-title mb-0">Latest Projects</h5>
350 + </div>
351 + <table class="table table-borderless my-0">
352 + <thead>
353 + <tr>
354 + <th>Name</th>
355 + <th class="d-none d-xxl-table-cell">Company</th>
356 + <th class="d-none d-xl-table-cell">Author</th>
357 + <th>Status</th>
358 + <th class="d-none d-xl-table-cell text-end">Action</th>
359 + </tr>
360 + </thead>
361 + <tbody>
362 + <tr>
363 + <td>
364 + <div class="d-flex">
365 + <div class="flex-shrink-0">
366 + <div class="bg-body-tertiary rounded-2">
367 + <img class="p-2" src="img/brands/brand-1.svg">
368 + </div>
369 + </div>
370 + <div class="flex-grow-1 ms-3">
371 + <strong>Project Apollo</strong>
372 + <div class="text-muted">
373 + Web, UI/UX Design
374 + </div>
375 + </div>
376 + </div>
377 + </td>
378 + <td class="d-none d-xxl-table-cell">
379 + <strong>Gantos</strong>
380 + <div class="text-muted">
381 + Real Estate
382 + </div>
383 + </td>
384 + <td class="d-none d-xl-table-cell">
385 + <strong>Carl Jenkins</strong>
386 + <div class="text-muted">
387 + HTML, JS, React
388 + </div>
389 + </td>
390 + <td>
391 + <div class="d-flex flex-column w-100">
392 + <span class="me-2 mb-1 text-muted">65%</span>
393 + <div class="progress progress-sm w-100">
394 + <div class="progress-bar bg-success" role="progressbar" style="width: 65%;"></div>
395 + </div>
396 + </div>
397 + </td>
398 + <td class="d-none d-xl-table-cell text-end">
399 + <a href="#" class="btn btn-light">View</a>
400 + </td>
401 + </tr>
402 + <tr>
403 + <td>
404 + <div class="d-flex">
405 + <div class="flex-shrink-0">
406 + <div class="bg-body-tertiary rounded-2">
407 + <img class="p-2" src="img/brands/brand-2.svg">
408 + </div>
409 + </div>
410 + <div class="flex-grow-1 ms-3">
411 + <strong>Project Bongo</strong>
412 + <div class="text-muted">
413 + Web
414 + </div>
415 + </div>
416 + </div>
417 + </td>
418 + <td class="d-none d-xxl-table-cell">
419 + <strong>Adray Transportation</strong>
420 + <div class="text-muted">
421 + Transportation
422 + </div>
423 + </td>
424 + <td class="d-none d-xl-table-cell">
425 + <strong>Bertha Martin</strong>
426 + <div class="text-muted">
427 + HTML, JS, Vue
428 + </div>
429 + </td>
430 + <td>
431 + <div class="d-flex flex-column w-100">
432 + <span class="me-2 mb-1 text-muted">33%</span>
433 + <div class="progress progress-sm w-100">
434 + <div class="progress-bar bg-danger" role="progressbar" style="width: 33%;"></div>
435 + </div>
436 + </div>
437 + </td>
438 + <td class="d-none d-xl-table-cell text-end">
439 + <a href="#" class="btn btn-light">View</a>
440 + </td>
441 + </tr>
442 + <tr>
443 + <td>
444 + <div class="d-flex">
445 + <div class="flex-shrink-0">
446 + <div class="bg-body-tertiary rounded-2">
447 + <img class="p-2" src="img/brands/brand-3.svg">
448 + </div>
449 + </div>
450 + <div class="flex-grow-1 ms-3">
451 + <strong>Project Canary</strong>
452 + <div class="text-muted">
453 + Web, UI/UX Design
454 + </div>
455 + </div>
456 + </div>
457 + </td>
458 + <td class="d-none d-xxl-table-cell">
459 + <strong>Evans</strong>
460 + <div class="text-muted">
461 + Insurance
462 + </div>
463 + </td>
464 + <td class="d-none d-xl-table-cell">
465 + <strong>Stacie Hall</strong>
466 + <div class="text-muted">
467 + HTML, JS, Laravel
468 + </div>
469 + </td>
470 + <td>
471 + <div class="d-flex flex-column w-100">
472 + <span class="me-2 mb-1 text-muted">50%</span>
473 + <div class="progress progress-sm w-100">
474 + <div class="progress-bar bg-warning" role="progressbar" style="width: 50%;"></div>
475 + </div>
476 + </div>
477 + </td>
478 + <td class="d-none d-xl-table-cell text-end">
479 + <a href="#" class="btn btn-light">View</a>
480 + </td>
481 + </tr>
482 + <tr>
483 + <td>
484 + <div class="d-flex">
485 + <div class="flex-shrink-0">
486 + <div class="bg-body-tertiary rounded-2">
487 + <img class="p-2" src="img/brands/brand-4.svg">
488 + </div>
489 + </div>
490 + <div class="flex-grow-1 ms-3">
491 + <strong>Project Edison</strong>
492 + <div class="text-muted">
493 + UI/UX Design
494 + </div>
495 + </div>
496 + </div>
497 + </td>
498 + <td class="d-none d-xxl-table-cell">
499 + <strong>Monsource Investment Group</strong>
500 + <div class="text-muted">
501 + Finance
502 + </div>
503 + </td>
504 + <td class="d-none d-xl-table-cell">
505 + <strong>Carl Jenkins</strong>
506 + <div class="text-muted">
507 + HTML, JS, React
508 + </div>
509 + </td>
510 + <td>
511 + <div class="d-flex flex-column w-100">
512 + <span class="me-2 mb-1 text-muted">80%</span>
513 + <div class="progress progress-sm w-100">
514 + <div class="progress-bar bg-success" role="progressbar" style="width: 80%;"></div>
515 + </div>
516 + </div>
517 + </td>
518 + <td class="d-none d-xl-table-cell text-end">
519 + <a href="#" class="btn btn-light">View</a>
520 + </td>
521 + </tr>
522 + <tr>
523 + <td>
524 + <div class="d-flex">
525 + <div class="flex-shrink-0">
526 + <div class="bg-body-tertiary rounded-2">
527 + <img class="p-2" src="img/brands/brand-5.svg">
528 + </div>
529 + </div>
530 + <div class="flex-grow-1 ms-3">
531 + <strong>Project Indigo</strong>
532 + <div class="text-muted">
533 + Web, UI/UX Design
534 + </div>
535 + </div>
536 + </div>
537 + </td>
538 + <td class="d-none d-xxl-table-cell">
539 + <strong>Edwards</strong>
540 + <div class="text-muted">
541 + Retail
542 + </div>
543 + </td>
544 + <td class="d-none d-xl-table-cell">
545 + <strong>Ashley Briggs</strong>
546 + <div class="text-muted">
547 + HTML, JS, Vue
548 + </div>
549 + </td>
550 + <td>
551 + <div class="d-flex flex-column w-100">
552 + <span class="me-2 mb-1 text-muted">78%</span>
553 + <div class="progress progress-sm w-100">
554 + <div class="progress-bar bg-primary" role="progressbar" style="width: 78%;"></div>
555 + </div>
556 + </div>
557 + </td>
558 + <td class="d-none d-xl-table-cell text-end">
559 + <a href="#" class="btn btn-light">View</a>
560 + </td>
561 + </tr>
562 + </tbody>
563 + </table>
564 + </div>
565 + </div>
566 + </main>
567 +
568 + 看得出来，上面是一个仪表板页面，展示了基本的控件。
569 +
570 + 它的个人资料页面长这样：
571 +
572 +
573 + <main class="content">
574 + <div class="container-fluid p-0">
575 +
576 + <h1 class="h3 mb-3">Profile</h1>
577 +
578 + <div class="row">
579 + <div class="col-md-4 col-xl-3">
580 + <div class="card mb-3">
581 + <div class="card-header">
582 + <h5 class="card-title mb-0">Profile Details</h5>
583 + </div>
584 + <div class="card-body text-center">
585 + <img src="img/avatars/avatar-4.jpg" alt="Stacie Hall" class="img-fluid rounded-circle mb-2" width="128" height="128" />
586 + <h5 class="card-title mb-0">Stacie Hall</h5>
587 + <div class="text-muted mb-2">Lead Developer</div>
588 +
589 + <div>
590 + <a class="btn btn-primary btn-sm" href="#">Follow</a>
591 + <a class="btn btn-primary btn-sm" href="#"><span data-lucide="message-square"></span> Message</a>
592 + </div>
593 + </div>
594 + <hr class="my-0" />
595 + <div class="card-body">
596 + <h5 class="h6 card-title">Skills</h5>
597 + <a href="#" class="badge badge-subtle-primary me-1 my-1">HTML</a>
598 + <a href="#" class="badge badge-subtle-primary me-1 my-1">JavaScript</a>
599 + <a href="#" class="badge badge-subtle-primary me-1 my-1">Sass</a>
600 + <a href="#" class="badge badge-subtle-primary me-1 my-1">Angular</a>
601 + <a href="#" class="badge badge-subtle-primary me-1 my-1">Vue</a>
602 + <a href="#" class="badge badge-subtle-primary me-1 my-1">React</a>
603 + <a href="#" class="badge badge-subtle-primary me-1 my-1">Redux</a>
604 + <a href="#" class="badge badge-subtle-primary me-1 my-1">UI</a>
605 + <a href="#" class="badge badge-subtle-primary me-1 my-1">UX</a>
606 + </div>
607 + <hr class="my-0" />
608 + <div class="card-body">
609 + <h5 class="h6 card-title">About</h5>
610 + <ul class="list-unstyled mb-0">
611 + <li class="mb-1"><span data-lucide="home" class="lucide-sm me-1"></span> Lives in <a href="#">San Francisco, SA</a></li>
612 +
613 + <li class="mb-1"><span data-lucide="briefcase" class="lucide-sm me-1"></span> Works at <a href="#">GitHub</a></li>
614 + <li class="mb-1"><span data-lucide="map-pin" class="lucide-sm me-1"></span> From <a href="#">Boston</a></li>
615 + </ul>
616 + </div>
617 + <hr class="my-0" />
618 + <div class="card-body">
619 + <h5 class="h6 card-title">Elsewhere</h5>
620 + <ul class="list-unstyled mb-0">
621 + <li class="mb-1"><span class="fas fa-globe fa-fw me-1"></span> <a href="#">staciehall.co</a></li>
622 + <li class="mb-1"><span class="fab fa-twitter fa-fw me-1"></span> <a href="#">Twitter</a></li>
623 + <li class="mb-1"><span class="fab fa-facebook fa-fw me-1"></span> <a href="#">Facebook</a></li>
624 + <li class="mb-1"><span class="fab fa-instagram fa-fw me-1"></span> <a href="#">Instagram</a></li>
625 + <li class="mb-1"><span class="fab fa-linkedin fa-fw me-1"></span> <a href="#">LinkedIn</a></li>
626 + </ul>
627 + </div>
628 + </div>
629 + </div>
630 +
631 + <div class="col-md-8 col-xl-9">
632 + <div class="card">
633 + <div class="card-header">
634 + <div class="card-actions float-end">
635 + <div class="dropdown position-relative">
636 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
637 +               <i class="align-middle" data-lucide="more-horizontal"></i>
638 +             </a>
639 +
640 + <div class="dropdown-menu dropdown-menu-end">
641 + <a class="dropdown-item" href="#">Action</a>
642 + <a class="dropdown-item" href="#">Another action</a>
643 + <a class="dropdown-item" href="#">Something else here</a>
644 + </div>
645 + </div>
646 + </div>
647 + <h5 class="card-title mb-0">Activities</h5>
648 + </div>
649 + <div class="card-body h-100">
650 +
651 + <div class="d-flex align-items-start">
652 + <img src="img/avatars/avatar-5.jpg" width="36" height="36" class="rounded-circle me-2" alt="Ashley Briggs">
653 + <div class="flex-grow-1">
654 + <small class="float-end">5m ago</small>
655 + <strong>Ashley Briggs</strong> started following <strong>Stacie Hall</strong><br />
656 + <small class="text-muted">Today 7:51 pm</small><br />
657 +
658 + </div>
659 + </div>
660 +
661 + <hr />
662 + <div class="d-flex align-items-start">
663 + <img src="img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Chris Wood">
664 + <div class="flex-grow-1">
665 + <small class="float-end">30m ago</small>
666 + <strong>Chris Wood</strong> posted something on <strong>Stacie Hall</strong>'s timeline<br />
667 + <small class="text-muted">Today 7:21 pm</small>
668 +
669 + <div class="border text-sm text-muted p-2 mt-1">
670 + Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus
671 + pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
672 + </div>
673 +
674 + <a href="#" class="btn btn-sm btn-danger mt-1"><i class="lucide-sm" data-lucide="heart"></i> Like</a>
675 + </div>
676 + </div>
677 +
678 + <hr />
679 + <div class="d-flex align-items-start">
680 + <img src="img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Stacie Hall">
681 + <div class="flex-grow-1">
682 + <small class="float-end">1h ago</small>
683 + <strong>Stacie Hall</strong> posted a new blog<br />
684 +
685 + <small class="text-muted">Today 6:35 pm</small>
686 + </div>
687 + </div>
688 +
689 + <hr />
690 + <div class="d-flex align-items-start">
691 + <img src="img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="Carl Jenkins">
692 + <div class="flex-grow-1">
693 + <small class="float-end">3h ago</small>
694 + <strong>Carl Jenkins</strong> posted two photos on <strong>Stacie Hall</strong>'s timeline<br />
695 + <small class="text-muted">Today 5:12 pm</small>
696 +
697 + <div class="row g-0 mt-1">
698 + <div class="col-6 col-md-4 col-lg-4 col-xl-3">
699 + <img src="img/photos/unsplash-1.jpg" class="img-fluid pe-2" alt="Unsplash">
700 + </div>
701 + <div class="col-6 col-md-4 col-lg-4 col-xl-3">
702 + <img src="img/photos/unsplash-2.jpg" class="img-fluid pe-2" alt="Unsplash">
703 + </div>
704 + </div>
705 +
706 + <a href="#" class="btn btn-sm btn-danger mt-1"><i class="lucide-sm" data-lucide="heart"></i> Like</a>
707 + </div>
708 + </div>
709 +
710 + <hr />
711 + <div class="d-flex align-items-start">
712 + <img src="img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="Carl Jenkins">
713 + <div class="flex-grow-1">
714 + <small class="float-end">1d ago</small>
715 + <strong>Carl Jenkins</strong> started following <strong>Stacie Hall</strong><br />
716 + <small class="text-muted">Yesterday 3:12 pm</small>
717 +
718 + <div class="d-flex align-items-start mt-1">
719 + <a class="pe-3" href="#">
720 +                 <img src="img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Stacie Hall">
721 +               </a>
722 + <div class="flex-grow-1">
723 + <div class="border text-sm text-muted p-2 mt-1">
724 + Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
725 + </div>
726 + </div>
727 + </div>
728 + </div>
729 + </div>
730 +
731 + <hr />
732 + <div class="d-flex align-items-start">
733 + <img src="img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Stacie Hall">
734 + <div class="flex-grow-1">
735 + <small class="float-end">1d ago</small>
736 + <strong>Stacie Hall</strong> posted a new blog<br />
737 + <small class="text-muted">Yesterday 2:43 pm</small>
738 + </div>
739 + </div>
740 +
741 + <hr />
742 + <div class="d-flex align-items-start">
743 + <img src="img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Chris Wood">
744 + <div class="flex-grow-1">
745 + <small class="float-end">1d ago</small>
746 + <strong>Chris Wood</strong> started following <strong>Stacie Hall</strong><br />
747 + <small class="text-muted">Yesterdag 1:51 pm</small>
748 + </div>
749 + </div>
750 +
751 + <hr />
752 + <div class="d-grid">
753 + <a href="#" class="btn btn-primary">Load more</a>
754 + </div>
755 + </div>
756 + </div>
757 + </div>
758 + </div>
759 +
760 + </div>
761 + </main>
762 +
763 + 看得出来这是一个漂亮的个人资料页面。
764 +
765 + 它的登录页面长这样：
766 +
767 + <div class="auth-full-page d-flex">
768 + <div class="auth-form p-3">
769 +
770 + <div class="text-center">
771 + <h1 class="h2">Welcome back!</h1>
772 + <p class="lead">
773 + Sign in to your account to continue
774 + </p>
775 + </div>
776 +
777 + <div class="mb-3">
778 + <div class="d-grid gap-2 mb-3">
779 + <a class="btn btn-facebook btn-lg position-relative shadow" href="dashboard-default.html">
780 +       <i class="fab fa-fw fa-facebook fs-3 float-start"></i>
781 +       <span class="position-absolute mx-auto w-100 left-0">Continue with Facebook</span>
782 +     </a>
783 + <a class="btn btn-google btn-lg position-relative shadow" href="dashboard-default.html">
784 +       <i class="fab fa-fw fa-google fa-google-colored fs-3  float-start"></i>
785 +       <span class="position-absolute mx-auto w-100 left-0">Continue with Google</span>
786 +     </a>
787 + <a class="btn btn-apple btn-lg position-relative shadow" href="dashboard-default.html">
788 +       <i class="fab fa-fw fa-apple fs-3 float-start"></i>
789 +       <span class="position-absolute mx-auto w-100 left-0">Continue with Apple</span>
790 +     </a> </div>
791 + <div class="row">
792 + <div class="col">
793 + <hr>
794 + </div>
795 + <div class="col-auto text-uppercase d-flex align-items-center">Or</div>
796 + <div class="col">
797 + <hr>
798 + </div>
799 + </div>
800 + <form>
801 + <div class="mb-3">
802 + <label class="form-label">Email</label>
803 + <input class="form-control form-control-lg" type="email" name="email" placeholder="Enter your email" />
804 + </div>
805 + <div class="mb-3">
806 + <label class="form-label">Password</label>
807 + <input class="form-control form-control-lg" type="password" name="password" placeholder="Enter your password" />
808 + <small>
809 +         <a href="auth-reset-password.html">Forgot password?</a>
810 +       </small>
811 + </div>
812 + <div>
813 + <div class="form-check align-items-center">
814 + <input id="customControlInline" type="checkbox" class="form-check-input" value="remember-me" name="remember-me" checked>
815 + <label class="form-check-label text-small" for="customControlInline">Remember me</label>
816 + </div>
817 + </div>
818 + <div class="d-grid gap-2 mt-3">
819 + <a href="dashboard-default.html" class="btn btn-lg btn-primary">Sign in</a>
820 + </div>
821 + </form>
822 + </div>
823 +
824 + <div class="text-center">
825 + Don't have an account? <a href="auth-sign-up.html">Sign up</a>
826 + </div>
827 + </div>
828 + </div>
829 +
830 + 看得出来是个标准的登录页面。
831 +
832 + 它还示范了文件管理器的做法：
833 +
834 + <main class="content">
835 + <div class="container-fluid p-0">
836 +
837 + <h1 class="h3 mb-3">File Manager</h1>
838 +
839 + <div class="row">
840 + <div class="col-sm-5 col-xl-3">
841 + <div class="card">
842 + <div class="card-body">
843 + <div class="d-grid mb-3">
844 + <button class="btn btn-primary btn-lg"><i data-lucide="upload"></i> Upload File</button>
845 + </div>
846 +
847 + <ul class="list-group list-group-flush mb-3">
848 + <li class="list-group-item px-2">
849 + <a href="#" class="text-reset">
850 +               <i data-lucide="upload" class="me-2"></i>My Files
851 +             </a>
852 + </li>
853 + <li class="list-group-item px-2">
854 + <a href="#" class="text-reset">
855 +               <i data-lucide="folder" class="me-2"></i>My Drive
856 +             </a>
857 + </li>
858 + <li class="list-group-item px-2">
859 + <a href="#" class="text-reset">
860 +               <i data-lucide="Computer" class="me-2"></i>Computer
861 +             </a>
862 + </li>
863 + <li class="list-group-item px-2">
864 + <a href="#" class="text-reset">
865 +               <i data-lucide="share" class="me-2"></i>Shared with me
866 +             </a>
867 + </li>
868 + <li class="list-group-item px-2">
869 + <a href="#" class="text-reset">
870 +               <i data-lucide="clock" class="me-2"></i>Recent
871 +             </a>
872 + </li>
873 + <li class="list-group-item px-2">
874 + <a href="#" class="text-reset">
875 +               <i data-lucide="star" class="me-2"></i>Starred
876 +             </a>
877 + </li>
878 + </ul>
879 + <ul class="list-group list-group-flush mb-5">
880 + <li class="list-group-item px-2">
881 + <a href="#" class="text-reset">
882 +               <i data-lucide="inbox" class="me-2"></i>Spam
883 +             </a>
884 + </li>
885 + <li class="list-group-item px-2">
886 + <a href="#" class="text-reset">
887 +               <i data-lucide="archive" class="me-2"></i>Archive
888 +             </a>
889 + </li>
890 + <li class="list-group-item px-2">
891 + <a href="#" class="text-reset">
892 +               <i data-lucide="trash" class="me-2"></i>Bin
893 +             </a>
894 + </li>
895 + <li class="list-group-item px-2">
896 + <a href="#" class="text-reset">
897 +               <i data-lucide="database" class="me-2"></i>Storage
898 +             </a>
899 + </li>
900 + </ul>
901 +
902 + <h6 class="text-uppercase">Storage</h6>
903 + <div class="progress progress-sm mb-2">
904 + <div class="progress-bar progress-lg bg-danger" role="progressbar" style="width: 73%" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100"></div>
905 + </div>
906 + <p class="text-muted font-12 mb-0">72.6 GB (73%) of 100 GB used</p>
907 + </div>
908 + </div>
909 + </div>
910 + <div class="col-sm-7 col-xl-9">
911 + <div class="card">
912 + <div class="card-header pb-0">
913 + <div class="float-end fs-5 mt-2">
914 + <div class="dropdown position-relative">
915 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
916 +               <i class="align-middle" data-lucide="more-horizontal"></i>
917 +             </a>
918 +
919 + <div class="dropdown-menu dropdown-menu-end">
920 + <a class="dropdown-item" href="#">Share</a>
921 + <a class="dropdown-item" href="#">Organise</a>
922 + <a class="dropdown-item" href="#">Details</a>
923 + </div>
924 + </div>
925 + </div>
926 + <h5 class="card-title mt-2">
927 + My Files
928 + </h5>
929 + </div>
930 + <div class="card-body pb-0">
931 + <div class="row">
932 + <div class="col-6 col-xxl-3">
933 + <div class="card shadow-none border">
934 + <div class="card-body p-3">
935 + <div class="float-end">
936 + <div class="dropdown position-relative">
937 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
938 +                       <i class="align-middle" data-lucide="more-horizontal"></i>
939 +                     </a>
940 +
941 + <div class="dropdown-menu dropdown-menu-end">
942 + <a class="dropdown-item" href="#">Open</a>
943 + <a class="dropdown-item" href="#">Edit</a>
944 + <a class="dropdown-item" href="#">Delete</a>
945 + </div>
946 + </div>
947 + </div>
948 + <i class="align-middle fs-1 mb-3 text-warning" data-lucide="paintbrush-2"></i>
949 + <div class="d-flex w-100">
950 + <div class="overflow-hidden me-auto">
951 + <h5 class="mb-1">
952 + <a href="#" class="text-body text-truncate">Design</a>
953 + </h5>
954 + <p class="text-muted mb-0 text-truncate">12 Files</p>
955 + </div>
956 + <div class="align-self-end ms-2">
957 + <p class="text-muted mb-0">8GB</p>
958 + </div>
959 + </div>
960 + </div>
961 + </div>
962 + </div>
963 + <div class="col-6 col-xxl-3">
964 + <div class="card shadow-none border">
965 + <div class="card-body p-3">
966 + <div class="float-end">
967 + <div class="dropdown position-relative">
968 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
969 +                       <i class="align-middle" data-lucide="more-horizontal"></i>
970 +                     </a>
971 +
972 + <div class="dropdown-menu dropdown-menu-end">
973 + <a class="dropdown-item" href="#">Open</a>
974 + <a class="dropdown-item" href="#">Edit</a>
975 + <a class="dropdown-item" href="#">Delete</a>
976 + </div>
977 + </div>
978 + </div>
979 + <i class="align-middle fs-1 mb-3 text-success" data-lucide="code"></i>
980 + <div class="d-flex w-100">
981 + <div class="overflow-hidden me-auto">
982 + <h5 class="mb-1">
983 + <a href="#" class="text-body text-truncate">Development</a>
984 + </h5>
985 + <p class="text-muted mb-0 text-truncate">108 Files</p>
986 + </div>
987 + <div class="align-self-end ms-2">
988 + <p class="text-muted mb-0">12GB</p>
989 + </div>
990 + </div>
991 + </div>
992 + </div>
993 + </div>
994 + <div class="col-6 col-xxl-3">
995 + <div class="card shadow-none border">
996 + <div class="card-body p-3">
997 + <div class="float-end">
998 + <div class="dropdown position-relative">
999 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
1000 +                       <i class="align-middle" data-lucide="more-horizontal"></i>
1001 +                     </a>
1002 +
1003 + <div class="dropdown-menu dropdown-menu-end">
1004 + <a class="dropdown-item" href="#">Open</a>
1005 + <a class="dropdown-item" href="#">Edit</a>
1006 + <a class="dropdown-item" href="#">Delete</a>
1007 + </div>
1008 + </div>
1009 + </div>
1010 + <i class="align-middle fs-1 mb-3 text-primary" data-lucide="hexagon"></i>
1011 + <div class="d-flex w-100">
1012 + <div class="overflow-hidden me-auto">
1013 + <h5 class="mb-1">
1014 + <a href="#" class="text-body text-truncate">Branding</a>
1015 + </h5>
1016 + <p class="text-muted mb-0 text-truncate">34 Files</p>
1017 + </div>
1018 + <div class="align-self-end ms-2">
1019 + <p class="text-muted mb-0">2GB</p>
1020 + </div>
1021 + </div>
1022 + </div>
1023 + </div>
1024 + </div>
1025 + <div class="col-6 col-xxl-3">
1026 + <div class="card shadow-none border">
1027 + <div class="card-body p-3">
1028 + <div class="float-end">
1029 + <div class="dropdown position-relative">
1030 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
1031 +                       <i class="align-middle" data-lucide="more-horizontal"></i>
1032 +                     </a>
1033 +
1034 + <div class="dropdown-menu dropdown-menu-end">
1035 + <a class="dropdown-item" href="#">Open</a>
1036 + <a class="dropdown-item" href="#">Edit</a>
1037 + <a class="dropdown-item" href="#">Delete</a>
1038 + </div>
1039 + </div>
1040 + </div>
1041 + <i class="align-middle fs-1 mb-3 text-danger" data-lucide="layout-grid"></i>
1042 + <div class="d-flex w-100">
1043 + <div class="overflow-hidden me-auto">
1044 + <h5 class="mb-1">
1045 + <a href="#" class="text-body text-truncate">Applications</a>
1046 + </h5>
1047 + <p class="text-muted mb-0 text-truncate">8 Files</p>
1048 + </div>
1049 + <div class="align-self-end ms-2">
1050 + <p class="text-muted mb-0">26GB</p>
1051 + </div>
1052 + </div>
1053 + </div>
1054 + </div>
1055 + </div>
1056 + <div class="col-6 col-xxl-3">
1057 + <div class="card shadow-none border">
1058 + <div class="card-body p-3">
1059 + <div class="float-end">
1060 + <div class="dropdown position-relative">
1061 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
1062 +                       <i class="align-middle" data-lucide="more-horizontal"></i>
1063 +                     </a>
1064 +
1065 + <div class="dropdown-menu dropdown-menu-end">
1066 + <a class="dropdown-item" href="#">Open</a>
1067 + <a class="dropdown-item" href="#">Edit</a>
1068 + <a class="dropdown-item" href="#">Delete</a>
1069 + </div>
1070 + </div>
1071 + </div>
1072 + <i class="align-middle fs-1 mb-3 text-info" data-lucide="circle-dollar-sign"></i>
1073 + <div class="d-flex w-100">
1074 + <div class="overflow-hidden me-auto">
1075 + <h5 class="mb-1">
1076 + <a href="#" class="text-body text-truncate">Finance</a>
1077 + </h5>
1078 + <p class="text-muted mb-0 text-truncate">50 Files</p>
1079 + </div>
1080 + <div class="align-self-end ms-2">
1081 + <p class="text-muted mb-0">9GB</p>
1082 + </div>
1083 + </div>
1084 + </div>
1085 + </div>
1086 + </div>
1087 + <div class="col-6 col-xxl-3">
1088 + <div class="card shadow-none border">
1089 + <div class="card-body p-3">
1090 + <div class="float-end">
1091 + <div class="dropdown position-relative">
1092 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
1093 +                       <i class="align-middle" data-lucide="more-horizontal"></i>
1094 +                     </a>
1095 +
1096 + <div class="dropdown-menu dropdown-menu-end">
1097 + <a class="dropdown-item" href="#">Open</a>
1098 + <a class="dropdown-item" href="#">Edit</a>
1099 + <a class="dropdown-item" href="#">Delete</a>
1100 + </div>
1101 + </div>
1102 + </div>
1103 + <i class="align-middle fs-1 mb-3 text-primary" data-lucide="book-type"></i>
1104 + <div class="d-flex w-100">
1105 + <div class="overflow-hidden me-auto">
1106 + <h5 class="mb-1">
1107 + <a href="#" class="text-body text-truncate">Translations</a>
1108 + </h5>
1109 + <p class="text-muted mb-0 text-truncate">40 Files</p>
1110 + </div>
1111 + <div class="align-self-end ms-2">
1112 + <p class="text-muted mb-0">2GB</p>
1113 + </div>
1114 + </div>
1115 + </div>
1116 + </div>
1117 + </div>
1118 + <div class="col-6 col-xxl-3">
1119 + <div class="card shadow-none border">
1120 + <div class="card-body p-3">
1121 + <div class="float-end">
1122 + <div class="dropdown position-relative">
1123 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
1124 +                       <i class="align-middle" data-lucide="more-horizontal"></i>
1125 +                     </a>
1126 +
1127 + <div class="dropdown-menu dropdown-menu-end">
1128 + <a class="dropdown-item" href="#">Open</a>
1129 + <a class="dropdown-item" href="#">Edit</a>
1130 + <a class="dropdown-item" href="#">Delete</a>
1131 + </div>
1132 + </div>
1133 + </div>
1134 + <i class="align-middle fs-1 mb-3 text-success" data-lucide="luggage"></i>
1135 + <div class="d-flex w-100">
1136 + <div class="overflow-hidden me-auto">
1137 + <h5 class="mb-1">
1138 + <a href="#" class="text-body text-truncate">Travel</a>
1139 + </h5>
1140 + <p class="text-muted mb-0 text-truncate">60 Files</p>
1141 + </div>
1142 + <div class="align-self-end ms-2">
1143 + <p class="text-muted mb-0">5GB</p>
1144 + </div>
1145 + </div>
1146 + </div>
1147 + </div>
1148 + </div>
1149 + <div class="col-6 col-xxl-3">
1150 + <div class="card shadow-none border">
1151 + <div class="card-body p-3">
1152 + <div class="float-end">
1153 + <div class="dropdown position-relative">
1154 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
1155 +                       <i class="align-middle" data-lucide="more-horizontal"></i>
1156 +                     </a>
1157 +
1158 + <div class="dropdown-menu dropdown-menu-end">
1159 + <a class="dropdown-item" href="#">Open</a>
1160 + <a class="dropdown-item" href="#">Edit</a>
1161 + <a class="dropdown-item" href="#">Delete</a>
1162 + </div>
1163 + </div>
1164 + </div>
1165 + <i class="align-middle fs-1 mb-3 text-secondary" data-lucide="archive"></i>
1166 + <div class="d-flex w-100">
1167 + <div class="overflow-hidden me-auto">
1168 + <h5 class="mb-1">
1169 + <a href="#" class="text-body text-truncate">Backups</a>
1170 + </h5>
1171 + <p class="text-muted mb-0 text-truncate">320 Files</p>
1172 + </div>
1173 + <div class="align-self-end ms-2">
1174 + <p class="text-muted mb-0">16GB</p>
1175 + </div>
1176 + </div>
1177 + </div>
1178 + </div>
1179 + </div>
1180 + </div>
1181 + </div>
1182 + </div>
1183 +
1184 + <div class="card">
1185 + <div class="card-header pb-0">
1186 + <div class="row">
1187 + <div class="col-md-7">
1188 + <h5 class="card-title mt-2">
1189 + Recent Files
1190 + </h5>
1191 + </div>
1192 + <div class="col-md-5 mb-md-0">
1193 + <div class="input-group input-group-search">
1194 + <input type="text" class="form-control" placeholder="Search files…">
1195 + <button class="btn" type="button">
1196 +                 <i class="align-middle" data-lucide="search"></i>
1197 +               </button>
1198 + </div>
1199 + </div>
1200 + </div>
1201 + </div>
1202 + <div class="card-body">
1203 + <table class="table">
1204 + <thead>
1205 + <tr>
1206 + <th class="w-50">Name</th>
1207 + <th>Date Modified</th>
1208 + <th>Size</th>
1209 + <th class="text-end">Actions</th>
1210 + </tr>
1211 + </thead>
1212 + <tbody>
1213 + <tr>
1214 + <td> <a href="#" class="text-reset"> <i data-lucide="file-code" class="me-2"></i>app.js </a> </td>
1215 + <td>April 15, 2024</td>
1216 + <td>25 KB</td>
1217 + <td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
1218 + </tr>
1219 + <tr>
1220 + <td> <a href="#" class="text-reset"> <i data-lucide="file-json" class="me-2"></i>styles.css </a> </td>
1221 + <td>February 28, 2024</td>
1222 + <td>12 KB</td>
1223 + <td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
1224 + </tr>
1225 + <tr>
1226 + <td> <a href="#" class="text-reset"> <i data-lucide="file-spreadsheet" class="me-2"></i>data.xlsx </a> </td>
1227 + <td>March 12, 2024</td>
1228 + <td>1 MB</td>
1229 + <td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
1230 + </tr>
1231 + <tr>
1232 + <td> <a href="#" class="text-reset"> <i data-lucide="file-audio" class="me-2"></i>audio.mp3 </a> </td>
1233 + <td>May 1, 2024</td>
1234 + <td>3 MB</td>
1235 + <td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
1236 + </tr>
1237 + <tr>
1238 + <td> <a href="#" class="text-reset"> <i data-lucide="file-video" class="me-2"></i>video.mp4 </a> </td>
1239 + <td>December 18, 2023</td>
1240 + <td>50 MB</td>
1241 + <td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
1242 + </tr>
1243 + <tr>
1244 + <td> <a href="#" class="text-reset"> <i data-lucide="file" class="me-2"></i>report.pdf </a> </td>
1245 + <td>November 20, 2023</td>
1246 + <td>5 MB</td>
1247 + <td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
1248 + </tr>
1249 + <tr>
1250 + <td> <a href="#" class="text-reset"> <i data-lucide="file" class="me-2"></i>presentation.pptx </a> </td>
1251 + <td>September 3, 2023</td>
1252 + <td>10 MB</td>
1253 + <td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
1254 + </tr>
1255 + <tr>
1256 + <td> <a href="#" class="text-reset"> <i data-lucide="file-text" class="me-2"></i>index.html </a> </td>
1257 + <td>August 8, 2023</td>
1258 + <td>9 KB</td>
1259 + <td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
1260 + </tr>
1261 + </tbody>
1262 + </table>
1263 + </div>
1264 + </div>
1265 + </div>
1266 + </div>
1267 + </div>
1268 + </main>
1269 +
1270 +
1271 + 也给出了基础的设置页面：
1272 +
1273 + <main class="content">
1274 + <div class="container-fluid p-0">
1275 +
1276 + <h1 class="h3 mb-3">Settings</h1>
1277 +
1278 + <div class="row">
1279 + <div class="col-md-3 col-xl-2">
1280 +
1281 + <div class="card">
1282 + <div class="card-header">
1283 + <h5 class="card-title mb-0">Profile Settings</h5>
1284 + </div>
1285 +
1286 + <div class="list-group list-group-flush" role="tablist">
1287 + <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#account" role="tab">
1288 +           Account
1289 +         </a>
1290 + <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#password" role="tab">
1291 +           Password
1292 +         </a>
1293 + <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
1294 +           Privacy and safety
1295 +         </a>
1296 + <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
1297 +           Email notifications
1298 +         </a>
1299 + <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
1300 +           Web notifications
1301 +         </a>
1302 + <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
1303 +           Widgets
1304 +         </a>
1305 + <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
1306 +           Your data
1307 +         </a>
1308 + <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
1309 +           Delete account
1310 +         </a>
1311 + </div>
1312 + </div>
1313 + </div>
1314 +
1315 + <div class="col-md-9 col-xl-10">
1316 + <div class="tab-content">
1317 + <div class="tab-pane fade show active" id="account" role="tabpanel">
1318 +
1319 + <div class="card">
1320 + <div class="card-header">
1321 + <div class="card-actions float-end">
1322 + <div class="dropdown position-relative">
1323 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
1324 +                   <i class="align-middle" data-lucide="more-horizontal"></i>
1325 +                 </a>
1326 +
1327 + <div class="dropdown-menu dropdown-menu-end">
1328 + <a class="dropdown-item" href="#">Action</a>
1329 + <a class="dropdown-item" href="#">Another action</a>
1330 + <a class="dropdown-item" href="#">Something else here</a>
1331 + </div>
1332 + </div>
1333 + </div>
1334 + <h5 class="card-title mb-0">Public info</h5>
1335 + </div>
1336 + <div class="card-body">
1337 + <form>
1338 + <div class="row">
1339 + <div class="col-md-8">
1340 + <div class="mb-3">
1341 + <label for="inputUsername" class="form-label">Username</label>
1342 + <input type="text" class="form-control" id="inputUsername" placeholder="Username">
1343 + </div>
1344 + <div class="mb-3">
1345 + <label for="inputUsername" class="form-label">Biography</label>
1346 + <textarea rows="2" class="form-control" id="inputBio" placeholder="Tell something about yourself"></textarea>
1347 + </div>
1348 + </div>
1349 + <div class="col-md-4">
1350 + <div class="text-center">
1351 + <img alt="Chris Wood" src="img/avatars/avatar.jpg" class="rounded-circle img-responsive mt-2" width="128" height="128" />
1352 + <div class="mt-2">
1353 + <span class="btn btn-primary"><i class="fas fa-upload"></i> Upload</span>
1354 + </div>
1355 + <small>For best results, use an image at least 128px by 128px in .jpg format</small>
1356 + </div>
1357 + </div>
1358 + </div>
1359 +
1360 + <button type="submit" class="btn btn-primary">Save changes</button>
1361 + </form>
1362 +
1363 + </div>
1364 + </div>
1365 +
1366 + <div class="card">
1367 + <div class="card-header">
1368 + <div class="card-actions float-end">
1369 + <div class="dropdown position-relative">
1370 + <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
1371 +                   <i class="align-middle" data-lucide="more-horizontal"></i>
1372 +                 </a>
1373 +
1374 + <div class="dropdown-menu dropdown-menu-end">
1375 + <a class="dropdown-item" href="#">Action</a>
1376 + <a class="dropdown-item" href="#">Another action</a>
1377 + <a class="dropdown-item" href="#">Something else here</a>
1378 + </div>
1379 + </div>
1380 + </div>
1381 + <h5 class="card-title mb-0">Private info</h5>
1382 + </div>
1383 + <div class="card-body">
1384 + <form>
1385 + <div class="row">
1386 + <div class="mb-3 col-md-6">
1387 + <label for="inputFirstName" class="form-label">First name</label>
1388 + <input type="text" class="form-control" id="inputFirstName" placeholder="First name">
1389 + </div>
1390 + <div class="mb-3 col-md-6">
1391 + <label for="inputLastName" class="form-label">Last name</label>
1392 + <input type="text" class="form-control" id="inputLastName" placeholder="Last name">
1393 + </div>
1394 + </div>
1395 + <div class="mb-3">
1396 + <label for="inputEmail4" class="form-label">Email</label>
1397 + <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
1398 + </div>
1399 + <div class="mb-3">
1400 + <label for="inputAddress" class="form-label">Address</label>
1401 + <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
1402 + </div>
1403 + <div class="mb-3">
1404 + <label for="inputAddress2" class="form-label">Address 2</label>
1405 + <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
1406 + </div>
1407 + <div class="row">
1408 + <div class="mb-3 col-md-6">
1409 + <label for="inputCity" class="form-label">City</label>
1410 + <input type="text" class="form-control" id="inputCity">
1411 + </div>
1412 + <div class="mb-3 col-md-4">
1413 + <label for="inputState" class="form-label">State</label>
1414 + <select id="inputState" class="form-control">
1415 +                     <option selected>Choose...</option>
1416 +                     <option>...</option>
1417 +                   </select>
1418 + </div>
1419 + <div class="mb-3 col-md-2">
1420 + <label for="inputZip" class="form-label">Zip</label>
1421 + <input type="text" class="form-control" id="inputZip">
1422 + </div>
1423 + </div>
1424 + <button type="submit" class="btn btn-primary">Save changes</button>
1425 + </form>
1426 +
1427 + </div>
1428 + </div>
1429 +
1430 + </div>
1431 + <div class="tab-pane fade" id="password" role="tabpanel">
1432 + <div class="card">
1433 + <div class="card-body">
1434 + <h5 class="card-title">Password</h5>
1435 +
1436 + <form>
1437 + <div class="mb-3">
1438 + <label for="inputPasswordCurrent" class="form-label">Current password</label>
1439 + <input type="password" class="form-control" id="inputPasswordCurrent">
1440 + <small><a href="#">Forgot your password?</a></small>
1441 + </div>
1442 + <div class="mb-3">
1443 + <label for="inputPasswordNew" class="form-label">New password</label>
1444 + <input type="password" class="form-control" id="inputPasswordNew">
1445 + </div>
1446 + <div class="mb-3">
1447 + <label for="inputPasswordNew2" class="form-label">Verify password</label>
1448 + <input type="password" class="form-control" id="inputPasswordNew2">
1449 + </div>
1450 + <button type="submit" class="btn btn-primary">Save changes</button>
1451 + </form>
1452 +
1453 + </div>
1454 + </div>
1455 + </div>
1456 + </div>
1457 + </div>
1458 + </div>
1459 +
1460 + </div>
1461 + </main>
1462 +
1463 + 这些页面，只要按照它的标准，就写出来都非常漂亮。我想你已经能想象出这些页面布局多么漂亮合理。
1464 +
1465 + 我们现在一起来学习一下它的使用范式。虽然我知道它是标准的bootstrap，但我们要理解它是如何建设审美以构建这么漂亮的仪表板的。
1466 +
1467 + 它之所以看起来美观、专业，是因为它遵循了一套现代前端设计的范式和原则。我们来一起拆解和学习它，这样你就能得心应手地将它应用到你的 ASP.NET Core 项目中了。
1468 +
1469 + 简单来说，这个模板的“审美”主要建立在以下几个核心支柱上：
1470 +
1471 + * 坚实的框架基础：Bootstrap 5。它提供了响应式网格系统、预设样式的组件和强大的工具类。
1472 + * 模块化的内容组织：以 卡片 (Card) 作为信息承载的基本单元。
1473 + * 一致且充裕的间距：通过 工具类 (Utility Classes) 实现统一的内外边距和元素间隔。
1474 + * 清晰的视觉层级：利用字体大小、颜色和布局来引导用户的注意力。
1475 + * 现代化的图标系统：使用 Lucide Icons，风格统一、简洁清晰。
1476 +
1477 + -------
1478 +
1479 + 现在，既然我已经购买了，为了使用而继续扩展我自己的项目，我需要严格尊重模板里的主题。请你扮演一位非常尊重上面设计范式的公司高级工程师，也非常精通 ASP.NET Core 的最佳实践，开始缜密的执行这项工作。
1480 +
1481 + 另外，我已经配好了 ASP.NET Core 里的 Layout，在编写视图（Views\Index.cshtml) 的时候，其内容会自动被 `<main class="content"></main>` 包起来，而正确出现在他模板的核心位置。无需反复包一次。
1482 +
1483 + 重构的时候，考虑到 CSHTML 里有服务器代码和本地化代码，例如localizer，也包含了一些 ASP.NET Core 的标签，例如asp-for，我们要继续坚持我们的项目是服务器渲染。所以要保持原有的服务器渲染的功能，我们买模板只是单纯为了好看，不要舍本逐末，丢了核心功能。
1484 +
1485 + * 例如，如果你要增加卡片的header，你也需要优先尊重服务器代码的范式，也就是用 @Localizer包起来需要呈现的string。当然你可以自由增加、编辑、删除无关业务的描述性文字。毕竟我本来写的就很差劲，一大堆无意义的文字，反复介绍。只要增加的文字好看，标准就行。
1486 + * 例如，如果你要重构表单 form，你也需要优先尊重服务器代码的范式，也就是用 <form asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post"> 等作为基础。
1487 +
1488 + 重构的时候，注意：我们在生成真正用于使用的业务代码，而不是模板的示例代码。所以不要编出来不存在的页面，不要编出来不存在的表单参数。我们是在真正将模板落地企业项目生产，而不是在产出代码示例。
1489 +
1490 + 现在，基于这些原则，重构我下面的代码：
1491 +
1492 + ```razor
1493 + @using Aiursoft.WebTools
1494 + @using Aiursoft.CSTools.Tools
1495 + @model Aiursoft.StatHub.Models.DashboardViewModels.IndexViewModel
1496 + @{
1497 + var showLast30 = ViewBag.Last30Seconds as bool? ?? false;
1498 + var unit = showLast30 ? "/s" : string.Empty;
1499 + }
1500 + <div class="jumbotron">
1501 + <div class="container">
1502 + <h1 class="display-4">Welcome, Admin!</h1>
1503 + <p class="lead">Here you can manage your clients and view your clients' status.</p>
1504 + </div>
1505 + </div>
1506 + <div class="container-fluid">
1507 + <div class="row no-gutters">
1508 + <div class="col-md-12 mt-3 mb-3">
1509 + <div class="card mb-2">
1510 + <div class="card-body">
1511 + <h5 class="card-title">Client status</h5>
1512 +
1513 + <div class="d-flex justify-content-center">
1514 + @* Center *@
1515 + <div class="btn-group btn-group-toggle" data-toggle="buttons">
1516 + @{
1517 + var cumulativeActive = showLast30 ? "" : "active";
1518 + var last30Active = showLast30 ? "active" : "";
1519 + }
1520 + <a class="btn btn-secondary @cumulativeActive" asp-controller="Home" asp-action="Index" asp-route-Last30Seconds="false">
1521 + Cumulative
1522 + </a>
1523 + <a class="btn btn-secondary @last30Active" asp-controller="Home" asp-action="Index" asp-route-Last30Seconds="true">
1524 + Last 30 seconds
1525 + </a>
1526 + </div>
1527 + </div>
1528 +
1529 + <div class="table-responsive">
1530 + <table class="table table-hover table-sm datatable" id="logTable">
1531 + <thead>
1532 + <tr>
1533 + <th>IP</th>
1534 + <th>Name</th>
1535 + <th>SKU</th>
1536 + <th>Boot at</th>
1537 + <th>Avg Load</th>
1538 + <th>CPU Usage</th>
1539 + <th>Used at</th>
1540 + <th>RAM Usage</th>
1541 + @if(showLast30)
1542 + {
1543 + <th>Net Receiving</th>
1544 + <th>Net Sending</th>
1545 + <th>Disk Used</th>
1546 + <th>Disk Reading</th>
1547 + <th>Disk Writing</th>
1548 + }
1549 + else
1550 + {
1551 + <th>Net Received</th>
1552 + <th>Net Sent</th>
1553 + <th>Disk Used</th>
1554 + <th>Disk Read</th>
1555 + <th>Disk Written</th>
1556 + }
1557 + <th>OS</th>
1558 + <th>More</th>
1559 + @* <th>Last Update</th> *@
1560 + @* <th>Version</th> *@
1561 + </tr>
1562 + </thead>
1563 + <tbody>
1564 + @foreach (var client in Model.Clients)
1565 + {
1566 + <tr>
1567 + <td>
1568 + @{
1569 + // Identify
1570 + var isOutDated = client.LastUpdate < DateTime.UtcNow.AddMinutes(-1);
1571 +
1572 + // Load
1573 + var load = client.GetLoad();
1574 + var loadRate = load.Load15M * 30; // Usually Load < 3.33 is safe.
1575 + var colorLoad =
1576 + loadRate < 10 ? "bg-success":
1577 + loadRate < 15 ? "bg-info":
1578 + loadRate < 30 ? "bg-secondary":
1579 + loadRate < 60 ? "bg-warning":
1580 + "bg-danger";
1581 + var promptTextLoad = $"Load:\n1 min: {load.Load1M}\n5 min: {load.Load5M}\n15 min: {load.Load15M}";
1582 +
1583 + // CPU
1584 + var cpu = client.GetCpuUsage();
1585 + var cpuRate = cpu.Ratio;
1586 + var promptText = $"CPU Usage:\nUser: {cpu.Usr}%\nSystem: {cpu.Sys}%\nIdle: {cpu.Idl}%\nWait: {cpu.Wai}%\nSteal: {cpu.Stl}%";
1587 + var color =
1588 + cpuRate < 5 ? "bg-success":
1589 + cpuRate < 10 ? "bg-info":
1590 + cpuRate < 20 ? "bg-secondary":
1591 + cpuRate < 40 ? "bg-warning":
1592 + "bg-danger";
1593 +
1594 + // RAM
1595 + var mem = client.GetMemUsed();
1596 +
1597 + // NetWork
1598 + var net = showLast30 ? client.GetNetworkLast30Seconds() : client.GetNetwork();
1599 +
1600 + // Disk
1601 + var disk = showLast30 ? client.GetDiskLast30Seconds() : client.GetDisk();
1602 + var diskUseRatio = client.UsedRoot / (double)client.TotalRoot;
1603 + var message = $"{client.UsedRoot}GB / {client.TotalRoot}GB";
1604 + var diskColor =
1605 + diskUseRatio < 0.6 ? "bg-success":
1606 + diskUseRatio < 0.7 ? "bg-warning":
1607 + "bg-danger";
1608 +
1609 + // OS
1610 + var osFirstTwoWords = string.Join(" ", client.OsName.Split(' ').Take(2)).Trim();
1611 +
1612 + // Overall
1613 + var reason = isOutDated ? "Server is out of sync. " : "";
1614 + reason += loadRate > 60 ? "Load critical. " : loadRate > 30 ? "Load warning. " : "";
1615 + reason += cpuRate > 40 ? "CPU usage critical. " : cpuRate > 20 ? "CPU usage warning. " : "";
1616 + reason += diskUseRatio > 0.7 ? "Disk space critical. " : diskUseRatio > 0.6 ? "Disk space warning. " : "";
1617 + }
1618 + @if (isOutDated)
1619 + {
1620 + <div class="dot dot-secondary" data-toggle="tooltip" data-placement="bottom" title="@reason"></div>
1621 + }
1622 + else if (loadRate > 60 || cpuRate > 40 || diskUseRatio > 0.7)
1623 + {
1624 + <div class="dot dot-danger" data-toggle="tooltip" data-placement="bottom" title="@reason"></div>
1625 + }
1626 + else if (loadRate > 30 || cpuRate > 20 || diskUseRatio > 0.6)
1627 + {
1628 + <div class="dot dot-warning" data-toggle="tooltip" data-placement="bottom" title="@reason"></div>
1629 + }
1630 + else
1631 + {
1632 + <div class="dot dot-success"></div>
1633 + }
1634 + @client.Ip
1635 + </td>
1636 + <td>
1637 + @client.Hostname
1638 + @if (!string.IsNullOrWhiteSpace(client.Motd))
1639 + {
1640 + <span data-toggle="tooltip" data-placement="bottom" title="@client.Motd">✉️</span>
1641 + }
1642 + </td>
1643 + <td data-sort="@client.GetSkuInNumber()">@client.GetSku()</td>
1644 + <td data-utc-time="@client.BootTime.ToHtmlDateTime()" data-sort="@client.BootTime.Ticks">
1645 + </td>
1646 +
1647 + @* Load *@
1648 + <td data-sort="@loadRate">
1649 + <div class="progress">
1650 + <div class="progress-bar-striped progress-bar-animated @colorLoad"
1651 + role="progressbar" style="width: @(loadRate)%" aria-valuenow="loadRate" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom"
1652 + title="@promptTextLoad"></div>
1653 + </div>
1654 + </td>
1655 +
1656 + @* CPU *@
1657 + <td data-sort="@cpuRate">
1658 + <div class="progress">
1659 + <div class="progress-bar-striped progress-bar-animated @color"
1660 + role="progressbar" style="width: @(cpuRate)%" aria-valuenow="@cpuRate" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom"
1661 + title="@promptText"></div>
1662 + </div>
1663 + </td>
1664 + <td>
1665 + @if (cpuRate < 30)
1666 + {
1667 + <span class="badge badge-secondary">@(client.Process)</span>
1668 + }
1669 + else
1670 + {
1671 + <span class="badge badge-danger">@(client.Process)</span>
1672 + }
1673 + </td>
1674 +
1675 + @* RAM *@
1676 + <td data-sort="@mem.UsedRate">
1677 + <div class="progress">
1678 + <div class="progress-bar-striped bg-success" role="progressbar" style="width: @(mem.UsedRate)%" aria-valuenow="@(mem.UsedRate)" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom" title="Used RAM: @mem.Used.HumanReadableSize()"></div>
1679 + <div class="progress-bar-striped bg-info" role="progressbar" style="width: @(mem.BufRate)%" aria-valuenow="@(mem.BufRate)" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom" title="Buffer RAM: @mem.Buf.HumanReadableSize()"></div>
1680 + <div class="progress-bar-striped bg-warning" role="progressbar" style="width: @(mem.CacheRate)%" aria-valuenow="@(mem.CacheRate)" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom" title="Cache RAM: @mem.Cache.HumanReadableSize()"></div>
1681 + </div>
1682 + </td>
1683 +
1684 + @* NetWork *@
1685 + <td data-sort="@net.Recv">
1686 + @net.Recv.HumanReadableSize()@unit
1687 + </td>
1688 + <td data-sort="@net.Send">
1689 + @net.Send.HumanReadableSize()@unit
1690 + </td>
1691 +
1692 + @* Disk *@
1693 + <td data-sort="@diskUseRatio">
1694 + <div class="progress">
1695 + <div class="progress-bar @diskColor" role="progressbar" style="width: @(diskUseRatio * 100)%" aria-valuenow="@(diskUseRatio * 100)" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom" title="@message">@(client.UsedRoot)GB</div>
1696 + </div>
1697 + <td data-sort="@disk.Read">
1698 + @disk.Read.HumanReadableSize()@unit
1699 + </td>
1700 + <td data-sort="@disk.Writ">
1701 + @disk.Writ.HumanReadableSize()@unit
1702 + </td>
1703 +
1704 + <td>@osFirstTwoWords</td>
1705 +
1706 + <td>
1707 + <a class="btn btn-primary btn-sm" asp-controller="Home" asp-action="Details" asp-route-id="@client.ClientId">Details</a>
1708 + </td>
1709 + @* <td data-utc-time="@client.LastUpdate.ToHtmlDateTime()" data-sort="@client.LastUpdate.Ticks"> *@
1710 + @* </td> *@
1711 + @* <td>@client.Version</td> *@
1712 + </tr>
1713 + }
1714 + </tbody>
1715 + </table>
1716 + </div>
1717 + </div>
1718 + </div>
1719 + </div>
1720 + </div>
1721 + </div>
1722 +
1723 + ```
1724 +
1725 + 现在请你开始编写这段razor吧！
Newer Older

Powered by Opengist ⋅ Load: 51ms⋅

English