218 lines
9.4 KiB
HTML
218 lines
9.4 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="zh-Hant">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>水晶練習室</title>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
|
||
|
|
<link href="css/style.css" rel="stylesheet">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- 上方導覽列 -->
|
||
|
|
<nav class="navbar navbar-expand-lg navbar-dark sk-navbar sticky-top">
|
||
|
|
<div class="container">
|
||
|
|
<a class="navbar-brand" href="index.html"><i class="bi bi-gem me-1"></i>水晶練習室</a>
|
||
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
|
||
|
|
<span class="navbar-toggler-icon"></span>
|
||
|
|
</button>
|
||
|
|
<div class="collapse navbar-collapse" id="mainNav">
|
||
|
|
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-1">
|
||
|
|
<li class="nav-item"><a class="nav-link active" href="index.html">練習室首頁</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link" href="#today">今日訓練</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link" href="practice/index.html">我的練習紀錄</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link disabled" href="#" aria-disabled="true">課程庫</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link" href="#progress">個人進度</a></li>
|
||
|
|
<li class="nav-item ms-lg-2">
|
||
|
|
<a class="btn btn-brand btn-sm" href="admin/index.html">後台管理</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- 主視覺 -->
|
||
|
|
<header class="sk-hero py-5">
|
||
|
|
<div class="container py-4 text-center">
|
||
|
|
<h1 class="display-4 fw-bold mb-0">水晶男孩練習室</h1>
|
||
|
|
<div class="sk-title-bar"></div>
|
||
|
|
<p class="lead mb-0 mt-4 text-body-secondary">從今天開始，完成你的偶像練習生日誌</p>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main class="container py-5">
|
||
|
|
|
||
|
|
<!-- 練習生歡迎區 -->
|
||
|
|
<section class="mb-5">
|
||
|
|
<div class="card sk-card p-4">
|
||
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
||
|
|
<div class="sk-welcome-icon"><i class="bi bi-person-video3"></i></div>
|
||
|
|
<div class="me-auto">
|
||
|
|
<div class="fs-5 fw-bold text-white">練習生：努比</div>
|
||
|
|
<span class="badge badge-status badge-status--progress"><i class="bi bi-record-circle me-1"></i>今日狀態：訓練中</span>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex gap-4 text-center">
|
||
|
|
<div>
|
||
|
|
<div class="sk-stat-value fs-3">4</div>
|
||
|
|
<div class="small text-body-secondary">本週完成練習（次）</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="sk-stat-value fs-3">3</div>
|
||
|
|
<div class="small text-body-secondary">連續練習（天）</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- 今日訓練任務 -->
|
||
|
|
<section class="mb-5" id="today">
|
||
|
|
<h2 class="sk-section-title"><i class="bi bi-list-task"></i>今日訓練任務</h2>
|
||
|
|
|
||
|
|
<div class="row g-4">
|
||
|
|
<div class="col-md-4">
|
||
|
|
<div class="card sk-card h-100 p-4">
|
||
|
|
<div class="d-flex align-items-center gap-2 mb-3">
|
||
|
|
<i class="bi bi-mic-fill fs-4 text-white"></i>
|
||
|
|
<span class="badge badge-type badge-type--vocal">聲樂</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="h5 text-white">完成一首歌曲錄唱</h3>
|
||
|
|
<p class="text-body-secondary small mb-3"><i class="bi bi-clock me-1"></i>預計時間：30 分鐘</p>
|
||
|
|
<span class="badge badge-status badge-status--pending mb-3 align-self-start">未開始</span>
|
||
|
|
<a class="btn btn-brand mt-auto" href="practice/create.html">開始練習</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-4">
|
||
|
|
<div class="card sk-card h-100 p-4">
|
||
|
|
<div class="d-flex align-items-center gap-2 mb-3">
|
||
|
|
<i class="bi bi-person-arms-up fs-4 text-white"></i>
|
||
|
|
<span class="badge badge-type badge-type--dance">舞蹈</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="h5 text-white">練習一段水晶男孩舞蹈</h3>
|
||
|
|
<p class="text-body-secondary small mb-3"><i class="bi bi-clock me-1"></i>預計時間：45 分鐘</p>
|
||
|
|
<span class="badge badge-status badge-status--progress mb-3 align-self-start">進行中</span>
|
||
|
|
<a class="btn btn-brand mt-auto" href="practice/create.html">開始練習</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-4">
|
||
|
|
<div class="card sk-card h-100 p-4">
|
||
|
|
<div class="d-flex align-items-center gap-2 mb-3">
|
||
|
|
<i class="bi bi-soundwave fs-4 text-white"></i>
|
||
|
|
<span class="badge badge-type badge-type--rap">Rap</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="h5 text-white">完成節奏與咬字訓練</h3>
|
||
|
|
<p class="text-body-secondary small mb-3"><i class="bi bi-clock me-1"></i>預計時間：20 分鐘</p>
|
||
|
|
<span class="badge badge-status badge-status--done mb-3 align-self-start">已完成</span>
|
||
|
|
<a class="btn btn-outline-brand mt-auto" href="practice/create.html">再次練習</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- 能力進度 -->
|
||
|
|
<section class="mb-5" id="progress">
|
||
|
|
<h2 class="sk-section-title"><i class="bi bi-graph-up-arrow"></i>能力進度</h2>
|
||
|
|
|
||
|
|
<div class="card sk-card p-4">
|
||
|
|
<div class="row g-4">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="d-flex justify-content-between small mb-1">
|
||
|
|
<span><i class="bi bi-mic-fill me-1"></i>聲樂</span>
|
||
|
|
<span class="text-body-secondary">72%</span>
|
||
|
|
</div>
|
||
|
|
<div class="progress sk-progress">
|
||
|
|
<div class="progress-bar" style="width: 72%" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="d-flex justify-content-between small mb-1">
|
||
|
|
<span><i class="bi bi-person-arms-up me-1"></i>舞蹈</span>
|
||
|
|
<span class="text-body-secondary">65%</span>
|
||
|
|
</div>
|
||
|
|
<div class="progress sk-progress">
|
||
|
|
<div class="progress-bar" style="width: 65%" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="d-flex justify-content-between small mb-1">
|
||
|
|
<span><i class="bi bi-soundwave me-1"></i>Rap</span>
|
||
|
|
<span class="text-body-secondary">58%</span>
|
||
|
|
</div>
|
||
|
|
<div class="progress sk-progress">
|
||
|
|
<div class="progress-bar" style="width: 58%" role="progressbar" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="d-flex justify-content-between small mb-1">
|
||
|
|
<span><i class="bi bi-stars me-1"></i>舞台表現</span>
|
||
|
|
<span class="text-body-secondary">80%</span>
|
||
|
|
</div>
|
||
|
|
<div class="progress sk-progress">
|
||
|
|
<div class="progress-bar" style="width: 80%" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- 最近練習紀錄 -->
|
||
|
|
<section>
|
||
|
|
<h2 class="sk-section-title"><i class="bi bi-journal-text"></i>最近練習紀錄</h2>
|
||
|
|
|
||
|
|
<div class="card sk-card sk-surface">
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table class="table table-hover mb-0">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>日期</th>
|
||
|
|
<th>練習項目</th>
|
||
|
|
<th>歌曲</th>
|
||
|
|
<th>練習時間</th>
|
||
|
|
<th>完成度</th>
|
||
|
|
<th class="text-end">查看紀錄</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>2026-07-16</td>
|
||
|
|
<td><span class="badge badge-type badge-type--dance">舞蹈</span></td>
|
||
|
|
<td>Road Fighter</td>
|
||
|
|
<td>40 分鐘</td>
|
||
|
|
<td>85%</td>
|
||
|
|
<td class="text-end"><a class="btn btn-sm btn-outline-brand" href="practice/show.html">查看</a></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>2026-07-15</td>
|
||
|
|
<td><span class="badge badge-type badge-type--vocal">聲樂</span></td>
|
||
|
|
<td>Couple</td>
|
||
|
|
<td>30 分鐘</td>
|
||
|
|
<td>70%</td>
|
||
|
|
<td class="text-end"><a class="btn btn-sm btn-outline-brand" href="practice/show.html">查看</a></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>2026-07-14</td>
|
||
|
|
<td><span class="badge badge-type badge-type--rap">Rap</span></td>
|
||
|
|
<td>Chivalry</td>
|
||
|
|
<td>25 分鐘</td>
|
||
|
|
<td>60%</td>
|
||
|
|
<td class="text-end"><a class="btn btn-sm btn-outline-brand" href="practice/show.html">查看</a></td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer class="sk-footer text-center py-4">
|
||
|
|
<small>© 2026 水晶練習室</small>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|