jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

練習室後台

Browse Source
This commit is contained in:
jekkinoopy
2026-07-17 15:49:35 +08:00
parent f3540e388d
commit 2e76ca2798
16 changed files with 2006 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sechskies-admin-hw/admin/index.html
+133
View File
@@ -0,0 +1,133 @@
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>後台首頁｜水晶練習室 Admin</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>
<!-- 後台上方 Navbar -->
<nav class="navbar navbar-expand navbar-dark sk-navbar">
<div class="container-fluid">
<span class="navbar-brand mb-0"><i class="bi bi-gem me-1"></i>水晶練習室 <span class="fw-light">Admin</span></span>
<div class="d-flex gap-2">
<a class="btn btn-brand btn-sm" href="../index.html">回前台</a>
<a class="btn btn-outline-brand btn-sm" href="../index.html">登出</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!-- 左側管理選單 -->
<aside class="col-lg-2 border-end sk-admin-sidebar py-4 px-3 min-vh-100">
<nav class="nav flex-column">
<a class="nav-link active" href="index.html"><i class="bi bi-speedometer2 me-2"></i>後台首頁</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-people me-2"></i>練習生管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-mortarboard me-2"></i>課程管理</a>
<a class="nav-link" href="practices/index.html"><i class="bi bi-journal-text me-2"></i>練習紀錄管理</a>
<a class="nav-link" href="songs/index.html"><i class="bi bi-music-note-list me-2"></i>歌曲資料管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-list-task me-2"></i>訓練任務管理</a>
</nav>
</aside>
<!-- 主內容 -->
<main class="col-lg-10 py-4 px-4">
<h1 class="h3 mb-4 text-white">後台首頁</h1>
<div class="row g-4 mb-5">
<div class="col-sm-6 col-xl-3">
<div class="card sk-card shadow-sm h-100 p-3">
<div class="card-body">
<i class="bi bi-people fs-3 text-white"></i>
<div class="text-body-secondary small mt-2 mb-1">練習生人數</div>
<div class="sk-stat-value">6</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card sk-card shadow-sm h-100 p-3">
<div class="card-body">
<i class="bi bi-lightning-charge fs-3 text-white"></i>
<div class="text-body-secondary small mt-2 mb-1">今日練習次數</div>
<div class="sk-stat-value">9</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card sk-card shadow-sm h-100 p-3">
<div class="card-body">
<i class="bi bi-mortarboard fs-3 text-white"></i>
<div class="text-body-secondary small mt-2 mb-1">課程數量</div>
<div class="sk-stat-value">8</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card sk-card shadow-sm h-100 p-3">
<div class="card-body">
<i class="bi bi-check2-circle fs-3 text-white"></i>
<div class="text-body-secondary small mt-2 mb-1">已完成任務數</div>
<div class="sk-stat-value">23</div>
</div>
</div>
</div>
</div>
<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>完成度</th>
</tr>
</thead>
<tbody>
<tr>
<td>努比</td>
<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>
</tr>
<tr>
<td>小星</td>
<td>2026-07-16</td>
<td><span class="badge badge-type badge-type--vocal">聲樂</span></td>
<td>Couple</td>
<td>35 分鐘</td>
<td>78%</td>
</tr>
<tr>
<td>阿凱</td>
<td>2026-07-15</td>
<td><span class="badge badge-type badge-type--rap">Rap</span></td>
<td>Chivalry</td>
<td>25 分鐘</td>
<td>60%</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
sechskies-admin-hw/admin/practices/create.html
+119
View File
@@ -0,0 +1,119 @@
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>新增練習紀錄｜水晶練習室 Admin</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 navbar-dark sk-navbar">
<div class="container-fluid">
<span class="navbar-brand mb-0"><i class="bi bi-gem me-1"></i>水晶練習室 <span class="fw-light">Admin</span></span>
<div class="d-flex gap-2">
<a class="btn btn-brand btn-sm" href="../../index.html">回前台</a>
<a class="btn btn-outline-brand btn-sm" href="../../index.html">登出</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<aside class="col-lg-2 border-end sk-admin-sidebar py-4 px-3 min-vh-100">
<nav class="nav flex-column">
<a class="nav-link" href="../index.html"><i class="bi bi-speedometer2 me-2"></i>後台首頁</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-people me-2"></i>練習生管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-mortarboard me-2"></i>課程管理</a>
<a class="nav-link active" href="index.html"><i class="bi bi-journal-text me-2"></i>練習紀錄管理</a>
<a class="nav-link" href="../songs/index.html"><i class="bi bi-music-note-list me-2"></i>歌曲資料管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-list-task me-2"></i>訓練任務管理</a>
</nav>
</aside>
<main class="col-lg-10 py-4 px-4">
<h1 class="h3 mb-4 text-white">新增練習紀錄</h1>
<div class="card sk-card sk-surface p-4" style="max-width: 42rem;">
<form>
<div class="row g-3">
<div class="col-md-6">
<label for="traineeName" class="form-label">練習生</label>
<select class="form-select" id="traineeName">
<option>努比</option>
<option>小星</option>
<option>阿凱</option>
<option>敏珠</option>
</select>
</div>
<div class="col-md-6">
<label for="practiceDate" class="form-label">日期</label>
<input type="date" class="form-control" id="practiceDate">
</div>
<div class="col-md-6">
<label for="practiceType" class="form-label">訓練類型</label>
<select class="form-select" id="practiceType">
<option>聲樂</option>
<option>舞蹈</option>
<option>Rap</option>
<option>舞台表現</option>
<option>體能</option>
</select>
</div>
<div class="col-md-6">
<label for="practiceSong" class="form-label">歌曲</label>
<select class="form-select" id="practiceSong">
<option>Couple</option>
<option>Road Fighter</option>
<option>Com' Back</option>
<option>Chivalry</option>
<option>The Way This Guy Lives</option>
</select>
</div>
<div class="col-md-6">
<label for="practiceMinutes" class="form-label">練習時間（分鐘）</label>
<input type="number" class="form-control" id="practiceMinutes" placeholder="例如：40">
</div>
<div class="col-md-6">
<label for="practiceStatus" class="form-label">完成狀態</label>
<select class="form-select" id="practiceStatus">
<option>未開始</option>
<option>進行中</option>
<option>已完成</option>
</select>
</div>
<div class="col-12">
<label for="practiceCompletion" class="form-label d-flex justify-content-between">
<span>完成度</span>
<span class="text-body-secondary" id="completionValue">50%</span>
</label>
<input type="range" class="form-range" id="practiceCompletion" min="0" max="100" value="50"
oninput="document.getElementById('completionValue').textContent = this.value + '%'">
</div>
</div>
<div class="d-flex gap-2 mt-4">
<button type="submit" class="btn btn-brand">儲存</button>
<a class="btn btn-outline-brand" href="index.html">取消</a>
</div>
</form>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
sechskies-admin-hw/admin/practices/delete.html
+68
View File
@@ -0,0 +1,68 @@
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>刪除練習紀錄｜水晶練習室 Admin</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 navbar-dark sk-navbar">
<div class="container-fluid">
<span class="navbar-brand mb-0"><i class="bi bi-gem me-1"></i>水晶練習室 <span class="fw-light">Admin</span></span>
<div class="d-flex gap-2">
<a class="btn btn-brand btn-sm" href="../../index.html">回前台</a>
<a class="btn btn-outline-brand btn-sm" href="../../index.html">登出</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<aside class="col-lg-2 border-end sk-admin-sidebar py-4 px-3 min-vh-100">
<nav class="nav flex-column">
<a class="nav-link" href="../index.html"><i class="bi bi-speedometer2 me-2"></i>後台首頁</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-people me-2"></i>練習生管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-mortarboard me-2"></i>課程管理</a>
<a class="nav-link active" href="index.html"><i class="bi bi-journal-text me-2"></i>練習紀錄管理</a>
<a class="nav-link" href="../songs/index.html"><i class="bi bi-music-note-list me-2"></i>歌曲資料管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-list-task me-2"></i>訓練任務管理</a>
</nav>
</aside>
<main class="col-lg-10 py-4 px-4">
<h1 class="h3 mb-4 text-white">刪除練習紀錄</h1>
<div class="card sk-card sk-surface p-4" style="max-width: 32rem;">
<div class="alert alert-danger mb-4" role="alert">
<i class="bi bi-exclamation-triangle-fill me-1"></i>確定要刪除這筆練習紀錄嗎？此動作無法復原。
</div>
<dl class="row mb-4">
<dt class="col-4 text-body-secondary">練習生</dt>
<dd class="col-8">努比</dd>
<dt class="col-4 text-body-secondary">日期</dt>
<dd class="col-8">2026-07-16</dd>
<dt class="col-4 text-body-secondary">訓練類型</dt>
<dd class="col-8">舞蹈</dd>
<dt class="col-4 text-body-secondary">歌曲</dt>
<dd class="col-8">Road Fighter</dd>
</dl>
<div class="d-flex gap-2">
<button type="button" class="btn btn-danger">確認刪除</button>
<a class="btn btn-outline-brand" href="index.html">取消</a>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
sechskies-admin-hw/admin/practices/edit.html
+119
View File
@@ -0,0 +1,119 @@
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>編輯練習紀錄｜水晶練習室 Admin</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 navbar-dark sk-navbar">
<div class="container-fluid">
<span class="navbar-brand mb-0"><i class="bi bi-gem me-1"></i>水晶練習室 <span class="fw-light">Admin</span></span>
<div class="d-flex gap-2">
<a class="btn btn-brand btn-sm" href="../../index.html">回前台</a>
<a class="btn btn-outline-brand btn-sm" href="../../index.html">登出</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<aside class="col-lg-2 border-end sk-admin-sidebar py-4 px-3 min-vh-100">
<nav class="nav flex-column">
<a class="nav-link" href="../index.html"><i class="bi bi-speedometer2 me-2"></i>後台首頁</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-people me-2"></i>練習生管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-mortarboard me-2"></i>課程管理</a>
<a class="nav-link active" href="index.html"><i class="bi bi-journal-text me-2"></i>練習紀錄管理</a>
<a class="nav-link" href="../songs/index.html"><i class="bi bi-music-note-list me-2"></i>歌曲資料管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-list-task me-2"></i>訓練任務管理</a>
</nav>
</aside>
<main class="col-lg-10 py-4 px-4">
<h1 class="h3 mb-4 text-white">編輯練習紀錄</h1>
<div class="card sk-card sk-surface p-4" style="max-width: 42rem;">
<form>
<div class="row g-3">
<div class="col-md-6">
<label for="traineeName" class="form-label">練習生</label>
<select class="form-select" id="traineeName">
<option selected>努比</option>
<option>小星</option>
<option>阿凱</option>
<option>敏珠</option>
</select>
</div>
<div class="col-md-6">
<label for="practiceDate" class="form-label">日期</label>
<input type="date" class="form-control" id="practiceDate" value="2026-07-16">
</div>
<div class="col-md-6">
<label for="practiceType" class="form-label">訓練類型</label>
<select class="form-select" id="practiceType">
<option>聲樂</option>
<option selected>舞蹈</option>
<option>Rap</option>
<option>舞台表現</option>
<option>體能</option>
</select>
</div>
<div class="col-md-6">
<label for="practiceSong" class="form-label">歌曲</label>
<select class="form-select" id="practiceSong">
<option>Couple</option>
<option selected>Road Fighter</option>
<option>Com' Back</option>
<option>Chivalry</option>
<option>The Way This Guy Lives</option>
</select>
</div>
<div class="col-md-6">
<label for="practiceMinutes" class="form-label">練習時間（分鐘）</label>
<input type="number" class="form-control" id="practiceMinutes" value="40">
</div>
<div class="col-md-6">
<label for="practiceStatus" class="form-label">完成狀態</label>
<select class="form-select" id="practiceStatus">
<option>未開始</option>
<option>進行中</option>
<option selected>已完成</option>
</select>
</div>
<div class="col-12">
<label for="practiceCompletion" class="form-label d-flex justify-content-between">
<span>完成度</span>
<span class="text-body-secondary" id="completionValue">85%</span>
</label>
<input type="range" class="form-range" id="practiceCompletion" min="0" max="100" value="85"
oninput="document.getElementById('completionValue').textContent = this.value + '%'">
</div>
</div>
<div class="d-flex gap-2 mt-4">
<button type="submit" class="btn btn-brand">儲存變更</button>
<a class="btn btn-outline-brand" href="index.html">取消</a>
</div>
</form>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
sechskies-admin-hw/admin/practices/index.html
+125
View File
@@ -0,0 +1,125 @@
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>練習紀錄管理｜水晶練習室 Admin</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 navbar-dark sk-navbar">
<div class="container-fluid">
<span class="navbar-brand mb-0"><i class="bi bi-gem me-1"></i>水晶練習室 <span class="fw-light">Admin</span></span>
<div class="d-flex gap-2">
<a class="btn btn-brand btn-sm" href="../../index.html">回前台</a>
<a class="btn btn-outline-brand btn-sm" href="../../index.html">登出</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<aside class="col-lg-2 border-end sk-admin-sidebar py-4 px-3 min-vh-100">
<nav class="nav flex-column">
<a class="nav-link" href="../index.html"><i class="bi bi-speedometer2 me-2"></i>後台首頁</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-people me-2"></i>練習生管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-mortarboard me-2"></i>課程管理</a>
<a class="nav-link active" href="index.html"><i class="bi bi-journal-text me-2"></i>練習紀錄管理</a>
<a class="nav-link" href="../songs/index.html"><i class="bi bi-music-note-list me-2"></i>歌曲資料管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-list-task me-2"></i>訓練任務管理</a>
</nav>
</aside>
<main class="col-lg-10 py-4 px-4">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-4">
<h1 class="h3 mb-0 text-white">練習紀錄管理</h1>
<div class="d-flex gap-2">
<a class="btn btn-brand" href="create.html"><i class="bi bi-plus-lg me-1"></i>新增練習紀錄</a>
<a class="btn btn-outline-brand" href="../index.html">回後台首頁</a>
</div>
</div>
<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>完成度</th>
<th>完成狀態</th>
<th class="text-end">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>努比</td>
<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><span class="badge badge-status badge-status--done">已完成</span></td>
<td class="text-end">
<a class="btn btn-sm btn-outline-brand" href="edit.html">編輯</a>
<a class="btn btn-sm btn-outline-danger" href="delete.html">刪除</a>
</td>
</tr>
<tr>
<td>小星</td>
<td>2026-07-16</td>
<td><span class="badge badge-type badge-type--vocal">聲樂</span></td>
<td>Couple</td>
<td>35 分鐘</td>
<td>78%</td>
<td><span class="badge badge-status badge-status--done">已完成</span></td>
<td class="text-end">
<a class="btn btn-sm btn-outline-brand" href="edit.html">編輯</a>
<a class="btn btn-sm btn-outline-danger" href="delete.html">刪除</a>
</td>
</tr>
<tr>
<td>阿凱</td>
<td>2026-07-15</td>
<td><span class="badge badge-type badge-type--rap">Rap</span></td>
<td>Chivalry</td>
<td>25 分鐘</td>
<td>60%</td>
<td><span class="badge badge-status badge-status--progress">進行中</span></td>
<td class="text-end">
<a class="btn btn-sm btn-outline-brand" href="edit.html">編輯</a>
<a class="btn btn-sm btn-outline-danger" href="delete.html">刪除</a>
</td>
</tr>
<tr>
<td>敏珠</td>
<td>2026-07-14</td>
<td><span class="badge badge-type badge-type--stage">舞台表現</span></td>
<td>Com' Back</td>
<td>50 分鐘</td>
<td>0%</td>
<td><span class="badge badge-status badge-status--pending">未開始</span></td>
<td class="text-end">
<a class="btn btn-sm btn-outline-brand" href="edit.html">編輯</a>
<a class="btn btn-sm btn-outline-danger" href="delete.html">刪除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
sechskies-admin-hw/admin/songs/create.html
+96
View File
@@ -0,0 +1,96 @@
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>新增歌曲｜水晶練習室 Admin</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 navbar-dark sk-navbar">
<div class="container-fluid">
<span class="navbar-brand mb-0"><i class="bi bi-gem me-1"></i>水晶練習室 <span class="fw-light">Admin</span></span>
<div class="d-flex gap-2">
<a class="btn btn-brand btn-sm" href="../../index.html">回前台</a>
<a class="btn btn-outline-brand btn-sm" href="../../index.html">登出</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<aside class="col-lg-2 border-end sk-admin-sidebar py-4 px-3 min-vh-100">
<nav class="nav flex-column">
<a class="nav-link" href="../index.html"><i class="bi bi-speedometer2 me-2"></i>後台首頁</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-people me-2"></i>練習生管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-mortarboard me-2"></i>課程管理</a>
<a class="nav-link" href="../practices/index.html"><i class="bi bi-journal-text me-2"></i>練習紀錄管理</a>
<a class="nav-link active" href="index.html"><i class="bi bi-music-note-list me-2"></i>歌曲資料管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-list-task me-2"></i>訓練任務管理</a>
</nav>
</aside>
<main class="col-lg-10 py-4 px-4">
<h1 class="h3 mb-4 text-white">新增歌曲</h1>
<div class="card sk-card sk-surface p-4">
<form>
<div class="row g-3">
<div class="col-md-6">
<label for="songName" class="form-label">歌名</label>
<input type="text" class="form-control" id="songName" placeholder="例如：Couple">
</div>
<div class="col-md-6">
<label for="songAlbum" class="form-label">專輯</label>
<input type="text" class="form-control" id="songAlbum" placeholder="例如：Come Back Again">
</div>
<div class="col-md-6">
<label for="songYear" class="form-label">發行年份</label>
<input type="number" class="form-control" id="songYear" placeholder="例如：1997">
</div>
<div class="col-md-6">
<label for="songYoutube" class="form-label">YouTube 連結</label>
<input type="url" class="form-control" id="songYoutube" placeholder="https://www.youtube.com/...">
</div>
<div class="col-md-6">
<label for="songDifficulty" class="form-label">舞蹈難度</label>
<select class="form-select" id="songDifficulty">
<option>低</option>
<option>中等</option>
<option>高</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label d-block">是否顯示</label>
<div class="form-check form-switch mt-2">
<input class="form-check-input" type="checkbox" role="switch" id="songVisible" checked>
<label class="form-check-label" for="songVisible">於前台顯示</label>
</div>
</div>
</div>
<div class="d-flex gap-2 mt-4">
<button type="submit" class="btn btn-brand">儲存</button>
<a class="btn btn-outline-brand" href="index.html">取消</a>
</div>
</form>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
sechskies-admin-hw/admin/songs/delete.html
+68
View File
@@ -0,0 +1,68 @@
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>刪除歌曲｜水晶練習室 Admin</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 navbar-dark sk-navbar">
<div class="container-fluid">
<span class="navbar-brand mb-0"><i class="bi bi-gem me-1"></i>水晶練習室 <span class="fw-light">Admin</span></span>
<div class="d-flex gap-2">
<a class="btn btn-brand btn-sm" href="../../index.html">回前台</a>
<a class="btn btn-outline-brand btn-sm" href="../../index.html">登出</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<aside class="col-lg-2 border-end sk-admin-sidebar py-4 px-3 min-vh-100">
<nav class="nav flex-column">
<a class="nav-link" href="../index.html"><i class="bi bi-speedometer2 me-2"></i>後台首頁</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-people me-2"></i>練習生管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-mortarboard me-2"></i>課程管理</a>
<a class="nav-link" href="../practices/index.html"><i class="bi bi-journal-text me-2"></i>練習紀錄管理</a>
<a class="nav-link active" href="index.html"><i class="bi bi-music-note-list me-2"></i>歌曲資料管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-list-task me-2"></i>訓練任務管理</a>
</nav>
</aside>
<main class="col-lg-10 py-4 px-4">
<h1 class="h3 mb-4 text-white">刪除歌曲</h1>
<div class="card sk-card sk-surface p-4" style="max-width: 32rem;">
<div class="alert alert-danger mb-4" role="alert">
<i class="bi bi-exclamation-triangle-fill me-1"></i>確定要刪除這首歌曲嗎？此動作無法復原。
</div>
<dl class="row mb-4">
<dt class="col-4 text-body-secondary">編號</dt>
<dd class="col-8">1</dd>
<dt class="col-4 text-body-secondary">歌名</dt>
<dd class="col-8">Couple</dd>
<dt class="col-4 text-body-secondary">專輯</dt>
<dd class="col-8">Come Back Again</dd>
<dt class="col-4 text-body-secondary">發行年份</dt>
<dd class="col-8">1997</dd>
</dl>
<div class="d-flex gap-2">
<button type="button" class="btn btn-danger">確認刪除</button>
<a class="btn btn-outline-brand" href="index.html">取消</a>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
sechskies-admin-hw/admin/songs/edit.html
+103
View File
@@ -0,0 +1,103 @@
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>編輯歌曲｜水晶練習室 Admin</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 navbar-dark sk-navbar">
<div class="container-fluid">
<span class="navbar-brand mb-0"><i class="bi bi-gem me-1"></i>水晶練習室 <span class="fw-light">Admin</span></span>
<div class="d-flex gap-2">
<a class="btn btn-brand btn-sm" href="../../index.html">回前台</a>
<a class="btn btn-outline-brand btn-sm" href="../../index.html">登出</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<aside class="col-lg-2 border-end sk-admin-sidebar py-4 px-3 min-vh-100">
<nav class="nav flex-column">
<a class="nav-link" href="../index.html"><i class="bi bi-speedometer2 me-2"></i>後台首頁</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-people me-2"></i>練習生管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-mortarboard me-2"></i>課程管理</a>
<a class="nav-link" href="../practices/index.html"><i class="bi bi-journal-text me-2"></i>練習紀錄管理</a>
<a class="nav-link active" href="index.html"><i class="bi bi-music-note-list me-2"></i>歌曲資料管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-list-task me-2"></i>訓練任務管理</a>
</nav>
</aside>
<main class="col-lg-10 py-4 px-4">
<h1 class="h3 mb-4 text-white">編輯歌曲</h1>
<div class="card sk-card sk-surface p-4">
<form>
<div class="row g-3">
<div class="col-md-6">
<label for="songId" class="form-label">編號</label>
<input type="text" class="form-control" id="songId" value="1" disabled>
</div>
<div class="col-md-6"></div>
<div class="col-md-6">
<label for="songName" class="form-label">歌名</label>
<input type="text" class="form-control" id="songName" value="Couple">
</div>
<div class="col-md-6">
<label for="songAlbum" class="form-label">專輯</label>
<input type="text" class="form-control" id="songAlbum" value="Come Back Again">
</div>
<div class="col-md-6">
<label for="songYear" class="form-label">發行年份</label>
<input type="number" class="form-control" id="songYear" value="1997">
</div>
<div class="col-md-6">
<label for="songYoutube" class="form-label">YouTube 連結</label>
<input type="url" class="form-control" id="songYoutube" value="https://www.youtube.com/">
</div>
<div class="col-md-6">
<label for="songDifficulty" class="form-label">舞蹈難度</label>
<select class="form-select" id="songDifficulty">
<option>低</option>
<option selected>中等</option>
<option>高</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label d-block">是否顯示</label>
<div class="form-check form-switch mt-2">
<input class="form-check-input" type="checkbox" role="switch" id="songVisible" checked>
<label class="form-check-label" for="songVisible">於前台顯示</label>
</div>
</div>
</div>
<div class="d-flex gap-2 mt-4">
<button type="submit" class="btn btn-brand">儲存變更</button>
<a class="btn btn-outline-brand" href="index.html">取消</a>
</div>
</form>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
sechskies-admin-hw/admin/songs/index.html
+112
View File
@@ -0,0 +1,112 @@
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>歌曲資料管理｜水晶練習室 Admin</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 navbar-dark sk-navbar">
<div class="container-fluid">
<span class="navbar-brand mb-0"><i class="bi bi-gem me-1"></i>水晶練習室 <span class="fw-light">Admin</span></span>
<div class="d-flex gap-2">
<a class="btn btn-brand btn-sm" href="../../index.html">回前台</a>
<a class="btn btn-outline-brand btn-sm" href="../../index.html">登出</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<aside class="col-lg-2 border-end sk-admin-sidebar py-4 px-3 min-vh-100">
<nav class="nav flex-column">
<a class="nav-link" href="../index.html"><i class="bi bi-speedometer2 me-2"></i>後台首頁</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-people me-2"></i>練習生管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-mortarboard me-2"></i>課程管理</a>
<a class="nav-link" href="../practices/index.html"><i class="bi bi-journal-text me-2"></i>練習紀錄管理</a>
<a class="nav-link active" href="index.html"><i class="bi bi-music-note-list me-2"></i>歌曲資料管理</a>
<a class="nav-link disabled" href="#" aria-disabled="true"><i class="bi bi-list-task me-2"></i>訓練任務管理</a>
</nav>
</aside>
<main class="col-lg-10 py-4 px-4">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="h3 mb-0 text-white">歌曲資料管理</h1>
<div class="d-flex gap-2">
<a class="btn btn-brand" href="create.html"><i class="bi bi-plus-lg me-1"></i>新增歌曲</a>
<a class="btn btn-outline-brand" href="../index.html">回後台首頁</a>
</div>
</div>
<div class="card sk-card sk-surface">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead>
<tr>
<th>編號</th>
<th>歌名</th>
<th>專輯</th>
<th>發行年份</th>
<th>YouTube 連結</th>
<th>舞蹈難度</th>
<th>是否顯示</th>
<th class="text-end">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Couple</td>
<td>Come Back Again</td>
<td>1997</td>
<td><a href="https://www.youtube.com/" target="_blank" rel="noopener">連結</a></td>
<td><span class="badge text-bg-warning">中等</span></td>
<td><span class="badge text-bg-success">顯示</span></td>
<td class="text-end">
<a class="btn btn-sm btn-outline-brand" href="edit.html">編輯</a>
<a class="btn btn-sm btn-outline-danger" href="delete.html">刪除</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Road Fighter</td>
<td>Road Fighter</td>
<td>2000</td>
<td><a href="https://www.youtube.com/" target="_blank" rel="noopener">連結</a></td>
<td><span class="badge text-bg-danger">高</span></td>
<td><span class="badge text-bg-success">顯示</span></td>
<td class="text-end">
<a class="btn btn-sm btn-outline-brand" href="edit.html">編輯</a>
<a class="btn btn-sm btn-outline-danger" href="delete.html">刪除</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Couple 재수사</td>
<td>The Story of Kies Part 1</td>
<td>2016</td>
<td><a href="https://www.youtube.com/" target="_blank" rel="noopener">連結</a></td>
<td><span class="badge text-bg-secondary">低</span></td>
<td><span class="badge text-bg-secondary">隱藏</span></td>
<td class="text-end">
<a class="btn btn-sm btn-outline-brand" href="edit.html">編輯</a>
<a class="btn btn-sm btn-outline-danger" href="delete.html">刪除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
sechskies-admin-hw/css/style.css
+354
View File
@@ -0,0 +1,354 @@
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
/* ============================================
水晶練習室｜偶像練習生訓練管理系統
主題：專輯質感 — 黑底 + 銀白金屬漸層（呼應 G1 專輯視覺），
重點行動區保留少量烈焰紅點綴
============================================ */
:root {
/* ── 環境色（銀白金屬，用於底色／邊框／卡片） ── */
--sk-primary: #9aa0a8;
--sk-primary-dark: #4b4e54;
--sk-secondary: #e4e6ea;
--sk-accent: #ffffff;
--sk-gradient: linear-gradient(135deg, #3a3c40 0%, #8b8f96 45%, #d6d9dd 75%, #ffffff 100%);
/* ── 重點色（烈焰紅，僅用於關鍵行動／狀態） ── */
--sk-red: #e2102b;
--sk-red-dark: #9c0b1e;
--sk-red-gradient: linear-gradient(135deg, #ff2d3d 0%, #9c0b1e 100%);
/* ── 背景色（舞台黑） ── */
--sk-bg: #0a0a0a;
--sk-bg-raised: #161616;
/* ── 玻璃卡片面 ── */
--sk-surface: rgba(180, 184, 191, 0.06);
--sk-surface-soft: rgba(180, 184, 191, 0.12);
--sk-border: rgba(180, 184, 191, 0.35);
/* ── 文字色（銀白，呼應專輯封面） ── */
--sk-text: #f1f2f4;
--sk-text-muted: #a7abb2;
}
html,
body {
background-color: var(--sk-bg);
color: var(--sk-text);
}
body {
font-family: 'Noto Sans TC', system-ui, sans-serif;
line-height: 1.6;
position: relative;
}
a {
color: var(--sk-secondary);
}
/* 舞台感光暈：兩顆柔光暈，僅作背景點綴，不搶內容 */
body::before,
body::after {
content: "";
position: fixed;
width: 40vw;
height: 40vw;
border-radius: 50%;
filter: blur(80px);
opacity: 0.16;
z-index: -1;
pointer-events: none;
}
body::before {
top: -10vw;
left: -10vw;
background: var(--sk-primary);
}
body::after {
bottom: -10vw;
right: -10vw;
background: var(--sk-accent);
}
/* ============ Navbar（前台／後台共用） ============ */
.sk-navbar {
background-color: var(--sk-bg-raised) !important;
border-bottom: 1px solid var(--sk-border);
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.sk-navbar .navbar-brand,
.sk-brand-text {
background: var(--sk-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
letter-spacing: 1px;
}
.sk-navbar .nav-link {
color: var(--sk-text);
}
.sk-navbar .nav-link:hover,
.sk-navbar .nav-link.active {
color: var(--sk-secondary);
}
.sk-navbar .nav-link.disabled {
color: #5c5f64;
}
/* ============ 品牌按鈕 ============ */
.btn-brand {
background: var(--sk-red-gradient);
border: none;
color: #fff;
font-weight: 600;
}
.btn-brand:hover,
.btn-brand:focus {
filter: brightness(1.1);
color: #fff;
}
.btn-outline-brand {
color: var(--sk-secondary);
border-color: var(--sk-border);
background-color: transparent;
}
.btn-outline-brand:hover {
background: var(--sk-red-gradient);
border-color: transparent;
color: #fff;
}
/* ============ 主視覺 ============ */
.sk-hero {
background: linear-gradient(180deg, rgba(180, 184, 191, 0.14) 0%, transparent 100%);
border-bottom: 1px solid var(--sk-border);
}
.sk-hero h1 {
color: #fff;
letter-spacing: 2px;
}
.sk-hero .sk-title-bar {
width: 60px;
height: 3px;
background: var(--sk-gradient);
margin: 18px auto 0;
border-radius: 2px;
}
/* ============ 區塊標題 ============ */
.sk-section-title {
color: var(--sk-text);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.sk-section-title i {
color: var(--sk-accent);
}
/* ============ 玻璃卡片（練習/統計/表格/表單容器共用） ============ */
.sk-card,
.sk-surface {
background-color: var(--sk-surface);
border: 1px solid var(--sk-border);
backdrop-filter: blur(10px);
color: var(--sk-text);
border-radius: 0.75rem;
}
.sk-card {
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.sk-card:hover {
transform: translateY(-4px);
border-color: var(--sk-primary);
box-shadow: 0 0.75rem 1.75rem rgba(180, 184, 191, 0.3);
}
.sk-card .card-title {
color: #fff;
}
.sk-stat-value {
font-size: 2rem;
font-weight: 700;
background: var(--sk-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ============ 練習生歡迎區 ============ */
.sk-welcome-icon {
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
background: var(--sk-gradient);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #fff;
flex-shrink: 0;
}
/* ============ 訓練類型徽章（紅／金／黑／米白家族） ============ */
.badge-type {
border-radius: 999px;
padding: 0.35em 0.75em;
font-weight: 600;
border: 1px solid transparent;
}
.badge-type--vocal { background: rgba(200, 205, 214, 0.18); color: #dde0e6; border-color: rgba(200, 205, 214, 0.45); }
.badge-type--dance { background: rgba(154, 160, 168, 0.18); color: #c9ccd2; border-color: rgba(154, 160, 168, 0.45); }
.badge-type--rap { background: rgba(110, 114, 121, 0.30); color: #b7bac0; border-color: rgba(110, 114, 121, 0.55); }
.badge-type--stage { background: var(--sk-text); color: #1a1a1a; border-color: var(--sk-text); }
.badge-type--fitness { background: rgba(150, 154, 161, 0.16); color: #c4c7cd; border-color: rgba(150, 154, 161, 0.4); }
/* ============ 完成狀態徽章 ============ */
.badge-status {
border-radius: 999px;
padding: 0.35em 0.75em;
font-weight: 600;
border: 1px solid transparent;
}
.badge-status--pending { background: rgba(150, 154, 161, 0.16); color: var(--sk-text-muted); border-color: rgba(150, 154, 161, 0.35); }
.badge-status--progress { background: rgba(226, 16, 43, 0.18); color: #ff8a94; border-color: rgba(226, 16, 43, 0.45); }
.badge-status--done { background: rgba(52, 211, 153, 0.18); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.45); }
/* ============ Progress（能力進度） ============ */
.sk-progress {
height: 0.6rem;
background-color: var(--sk-bg-raised);
border: 1px solid var(--sk-border);
border-radius: 999px;
}
.sk-progress .progress-bar {
background: var(--sk-gradient);
}
/* ============ 後台側邊選單 ============ */
.sk-admin-sidebar {
background-color: var(--sk-bg-raised);
border-color: var(--sk-border) !important;
}
.sk-admin-sidebar .nav-link {
color: var(--sk-text);
border-radius: 0.5rem;
margin-bottom: 0.25rem;
}
.sk-admin-sidebar .nav-link.active {
background: var(--sk-gradient);
color: #fff;
font-weight: 600;
}
.sk-admin-sidebar .nav-link:not(.active):hover {
background-color: var(--sk-surface-soft);
}
.sk-admin-sidebar .nav-link.disabled {
color: #5c5f64;
}
/* ============ 表格 ============ */
.sk-surface .table {
--bs-table-color: var(--sk-text);
--bs-table-bg: transparent;
--bs-table-striped-bg: rgba(180, 184, 191, 0.06);
--bs-table-hover-bg: rgba(180, 184, 191, 0.1);
--bs-table-border-color: var(--sk-border);
vertical-align: middle;
}
.sk-surface .table thead {
background-color: var(--sk-surface-soft);
color: #fff;
}
.sk-surface a:not(.btn):not(.nav-link) {
color: var(--sk-secondary);
}
/* ============ 表單元件（暗色輸入框） ============ */
.form-control,
.form-select {
background-color: var(--sk-bg-raised);
border: 1px solid var(--sk-border);
color: var(--sk-text);
}
.form-control:focus,
.form-select:focus {
background-color: var(--sk-bg-raised);
border-color: var(--sk-primary);
color: var(--sk-text);
box-shadow: 0 0 0 0.25rem rgba(180, 184, 191, 0.25);
}
.form-control::placeholder {
color: #6c7076;
}
.form-control:disabled {
background-color: var(--sk-bg-raised);
color: var(--sk-text-muted);
opacity: 0.7;
}
.form-label {
color: var(--sk-text-muted);
font-weight: 500;
}
.form-check-input {
background-color: var(--sk-bg-raised);
border-color: var(--sk-border);
}
.form-check-input:checked {
background-color: var(--sk-primary);
border-color: var(--sk-primary);
}
.form-range::-webkit-slider-thumb {
background: var(--sk-primary);
}
.form-range::-moz-range-thumb {
background: var(--sk-primary);
}
/* ============ Footer ============ */
.sk-footer {
background-color: var(--sk-bg-raised);
color: var(--sk-text-muted);
border-top: 1px solid var(--sk-border);
}
sechskies-admin-hw/index.html
+217
View File
@@ -0,0 +1,217 @@
<!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>&copy; 2026 水晶練習室</small>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
sechskies-admin-hw/practice/create.html
+115
View File
@@ -0,0 +1,115 @@
<!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" href="../index.html">練習室首頁</a></li>
<li class="nav-item"><a class="nav-link" href="../index.html#today">今日訓練</a></li>
<li class="nav-item"><a class="nav-link active" href="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="../index.html#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>
<main class="container py-5">
<h1 class="h3 mb-4 text-white"><i class="bi bi-plus-circle me-2"></i>新增練習紀錄</h1>
<div class="card sk-card sk-surface p-4" style="max-width: 42rem;">
<form>
<div class="row g-3">
<div class="col-md-6">
<label for="practiceDate" class="form-label">練習日期</label>
<input type="date" class="form-control" id="practiceDate">
</div>
<div class="col-md-6">
<label for="practiceType" class="form-label">訓練類型</label>
<select class="form-select" id="practiceType">
<option>聲樂</option>
<option>舞蹈</option>
<option>Rap</option>
<option>舞台表現</option>
<option>體能</option>
</select>
</div>
<div class="col-md-6">
<label for="practiceSong" class="form-label">練習歌曲</label>
<select class="form-select" id="practiceSong">
<option>Couple</option>
<option>Road Fighter</option>
<option>Com' Back</option>
<option>Chivalry</option>
<option>The Way This Guy Lives</option>
</select>
</div>
<div class="col-md-6">
<label for="practiceMinutes" class="form-label">練習分鐘數</label>
<input type="number" class="form-control" id="practiceMinutes" placeholder="例如：30">
</div>
<div class="col-12">
<label for="practiceContent" class="form-label">練習內容</label>
<textarea class="form-control" id="practiceContent" rows="2" placeholder="例如：副歌走位＋隊形轉換"></textarea>
</div>
<div class="col-12">
<label for="practiceCompletion" class="form-label d-flex justify-content-between">
<span>今日完成度</span>
<span class="text-body-secondary" id="completionValue">50%</span>
</label>
<input type="range" class="form-range" id="practiceCompletion" min="0" max="100" value="50"
oninput="document.getElementById('completionValue').textContent = this.value + '%'">
</div>
<div class="col-12">
<label for="practiceNote" class="form-label">練習心得</label>
<textarea class="form-control" id="practiceNote" rows="3" placeholder="今天練習的感想與需要加強的地方"></textarea>
</div>
<div class="col-12">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="practiceDone">
<label class="form-check-label" for="practiceDone">是否完成</label>
</div>
</div>
</div>
<div class="d-flex gap-2 mt-4">
<button type="submit" class="btn btn-brand">儲存</button>
<a class="btn btn-outline-brand" href="index.html">取消</a>
</div>
</form>
</div>
</main>
<footer class="sk-footer text-center py-4">
<small>&copy; 2026 水晶練習室</small>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
sechskies-admin-hw/practice/delete.html
+66
View File
@@ -0,0 +1,66 @@
<!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" href="../index.html">練習室首頁</a></li>
<li class="nav-item"><a class="nav-link" href="../index.html#today">今日訓練</a></li>
<li class="nav-item"><a class="nav-link active" href="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="../index.html#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>
<main class="container py-5">
<h1 class="h3 mb-4 text-white"><i class="bi bi-trash3 me-2"></i>刪除練習紀錄</h1>
<div class="card sk-card sk-surface p-4" style="max-width: 32rem;">
<div class="alert alert-danger mb-4" role="alert">
<i class="bi bi-exclamation-triangle-fill me-1"></i>確定要刪除這筆練習紀錄嗎？此動作無法復原。
</div>
<dl class="row mb-4">
<dt class="col-4 text-body-secondary">練習日期</dt>
<dd class="col-8">2026-07-16</dd>
<dt class="col-4 text-body-secondary">訓練類型</dt>
<dd class="col-8">舞蹈</dd>
<dt class="col-4 text-body-secondary">練習歌曲</dt>
<dd class="col-8">Road Fighter</dd>
<dt class="col-4 text-body-secondary">練習時間</dt>
<dd class="col-8">40 分鐘</dd>
</dl>
<div class="d-flex gap-2">
<button type="button" class="btn btn-danger">確認刪除</button>
<a class="btn btn-outline-brand" href="index.html">取消</a>
</div>
</div>
</main>
<footer class="sk-footer text-center py-4">
<small>&copy; 2026 水晶練習室</small>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
sechskies-admin-hw/practice/edit.html
+115
View File
@@ -0,0 +1,115 @@
<!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" href="../index.html">練習室首頁</a></li>
<li class="nav-item"><a class="nav-link" href="../index.html#today">今日訓練</a></li>
<li class="nav-item"><a class="nav-link active" href="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="../index.html#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>
<main class="container py-5">
<h1 class="h3 mb-4 text-white"><i class="bi bi-pencil-square me-2"></i>編輯練習紀錄</h1>
<div class="card sk-card sk-surface p-4" style="max-width: 42rem;">
<form>
<div class="row g-3">
<div class="col-md-6">
<label for="practiceDate" class="form-label">練習日期</label>
<input type="date" class="form-control" id="practiceDate" value="2026-07-16">
</div>
<div class="col-md-6">
<label for="practiceType" class="form-label">訓練類型</label>
<select class="form-select" id="practiceType">
<option>聲樂</option>
<option selected>舞蹈</option>
<option>Rap</option>
<option>舞台表現</option>
<option>體能</option>
</select>
</div>
<div class="col-md-6">
<label for="practiceSong" class="form-label">練習歌曲</label>
<select class="form-select" id="practiceSong">
<option>Couple</option>
<option selected>Road Fighter</option>
<option>Com' Back</option>
<option>Chivalry</option>
<option>The Way This Guy Lives</option>
</select>
</div>
<div class="col-md-6">
<label for="practiceMinutes" class="form-label">練習分鐘數</label>
<input type="number" class="form-control" id="practiceMinutes" value="40">
</div>
<div class="col-12">
<label for="practiceContent" class="form-label">練習內容</label>
<textarea class="form-control" id="practiceContent" rows="2">整段主歌＋副歌走位</textarea>
</div>
<div class="col-12">
<label for="practiceCompletion" class="form-label d-flex justify-content-between">
<span>今日完成度</span>
<span class="text-body-secondary" id="completionValue">85%</span>
</label>
<input type="range" class="form-range" id="practiceCompletion" min="0" max="100" value="85"
oninput="document.getElementById('completionValue').textContent = this.value + '%'">
</div>
<div class="col-12">
<label for="practiceNote" class="form-label">練習心得</label>
<textarea class="form-control" id="practiceNote" rows="3">隊形轉換卡點抓得比昨天準，副歌動作幅度還要再放大。</textarea>
</div>
<div class="col-12">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="practiceDone" checked>
<label class="form-check-label" for="practiceDone">是否完成</label>
</div>
</div>
</div>
<div class="d-flex gap-2 mt-4">
<button type="submit" class="btn btn-brand">儲存變更</button>
<a class="btn btn-outline-brand" href="index.html">取消</a>
</div>
</form>
</div>
</main>
<footer class="sk-footer text-center py-4">
<small>&copy; 2026 水晶練習室</small>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
sechskies-admin-hw/practice/index.html
+115
View File
@@ -0,0 +1,115 @@
<!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" href="../index.html">練習室首頁</a></li>
<li class="nav-item"><a class="nav-link" href="../index.html#today">今日訓練</a></li>
<li class="nav-item"><a class="nav-link active" href="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="../index.html#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>
<main class="container py-5">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-4">
<h1 class="h3 mb-0 text-white"><i class="bi bi-journal-text me-2"></i>我的練習紀錄</h1>
<div class="d-flex gap-2">
<a class="btn btn-brand" href="create.html"><i class="bi bi-plus-lg me-1"></i>新增練習紀錄</a>
<a class="btn btn-outline-brand" href="../index.html">回練習室首頁</a>
</div>
</div>
<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>練習時間</th>
<th>完成度</th>
<th class="text-end">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2026-07-16</td>
<td><span class="badge badge-type badge-type--dance">舞蹈</span></td>
<td>Road Fighter</td>
<td>整段主歌＋副歌走位</td>
<td>40 分鐘</td>
<td>85%</td>
<td class="text-end">
<a class="btn btn-sm btn-outline-brand" href="show.html">查看</a>
<a class="btn btn-sm btn-outline-brand" href="edit.html">編輯</a>
<a class="btn btn-sm btn-outline-danger" href="delete.html">刪除</a>
</td>
</tr>
<tr>
<td>2</td>
<td>2026-07-15</td>
<td><span class="badge badge-type badge-type--vocal">聲樂</span></td>
<td>Couple</td>
<td>副歌高音音準練習</td>
<td>30 分鐘</td>
<td>70%</td>
<td class="text-end">
<a class="btn btn-sm btn-outline-brand" href="show.html">查看</a>
<a class="btn btn-sm btn-outline-brand" href="edit.html">編輯</a>
<a class="btn btn-sm btn-outline-danger" href="delete.html">刪除</a>
</td>
</tr>
<tr>
<td>3</td>
<td>2026-07-14</td>
<td><span class="badge badge-type badge-type--rap">Rap</span></td>
<td>Chivalry</td>
<td>咬字與節奏卡點</td>
<td>25 分鐘</td>
<td>60%</td>
<td class="text-end">
<a class="btn btn-sm btn-outline-brand" href="show.html">查看</a>
<a class="btn btn-sm btn-outline-brand" href="edit.html">編輯</a>
<a class="btn btn-sm btn-outline-danger" href="delete.html">刪除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<footer class="sk-footer text-center py-4">
<small>&copy; 2026 水晶練習室</small>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
sechskies-admin-hw/practice/show.html
+81
View File
@@ -0,0 +1,81 @@
<!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" href="../index.html">練習室首頁</a></li>
<li class="nav-item"><a class="nav-link" href="../index.html#today">今日訓練</a></li>
<li class="nav-item"><a class="nav-link active" href="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="../index.html#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>
<main class="container py-5">
<h1 class="h3 mb-4 text-white"><i class="bi bi-journal-check me-2"></i>練習紀錄詳情</h1>
<div class="card sk-card sk-surface p-4" style="max-width: 42rem;">
<div class="d-flex align-items-center gap-2 mb-4">
<span class="badge badge-type badge-type--dance">舞蹈</span>
<span class="badge badge-status badge-status--done">已完成</span>
</div>
<dl class="row mb-0">
<dt class="col-4 text-body-secondary">練習日期</dt>
<dd class="col-8">2026-07-16</dd>
<dt class="col-4 text-body-secondary">訓練類型</dt>
<dd class="col-8">舞蹈</dd>
<dt class="col-4 text-body-secondary">練習歌曲</dt>
<dd class="col-8">Road Fighter</dd>
<dt class="col-4 text-body-secondary">練習時間</dt>
<dd class="col-8">40 分鐘</dd>
<dt class="col-4 text-body-secondary">完成度</dt>
<dd class="col-8">
<div class="progress sk-progress" style="max-width: 12rem;">
<div class="progress-bar" style="width: 85%" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</dd>
<dt class="col-4 text-body-secondary">練習心得</dt>
<dd class="col-8">隊形轉換卡點抓得比昨天準，副歌動作幅度還要再放大。</dd>
</dl>
<div class="d-flex gap-2 mt-4">
<a class="btn btn-brand" href="edit.html">編輯這筆紀錄</a>
<a class="btn btn-outline-brand" href="index.html">回練習紀錄列表</a>
</div>
</div>
</main>
<footer class="sk-footer text-center py-4">
<small>&copy; 2026 水晶練習室</small>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>