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/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>