diff --git a/sechskies-admin-hw/admin/index.html b/sechskies-admin-hw/admin/index.html new file mode 100644 index 0000000..61c97ec --- /dev/null +++ b/sechskies-admin-hw/admin/index.html @@ -0,0 +1,133 @@ + + + + + + 後台首頁｜水晶練習室 Admin + + + + + + + + + +
+
+ + + + + +
+

後台首頁

+ +
+
+
+
+ +
練習生人數
+
6
+
+
+
+
+
+
+ +
今日練習次數
+
9
+
+
+
+
+
+
+ +
課程數量
+
8
+
+
+
+
+
+
+ +
已完成任務數
+
23
+
+
+
+
+ +

最近練習紀錄

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
練習生日期訓練類型歌曲練習時間完成度
努比2026-07-16舞蹈Road Fighter40 分鐘85%
小星2026-07-16聲樂Couple35 分鐘78%
阿凱2026-07-15RapChivalry25 分鐘60%
+
+
+ +
+
+
+ + + + diff --git a/sechskies-admin-hw/admin/practices/create.html b/sechskies-admin-hw/admin/practices/create.html new file mode 100644 index 0000000..7541427 --- /dev/null +++ b/sechskies-admin-hw/admin/practices/create.html @@ -0,0 +1,119 @@ + + + + + + 新增練習紀錄｜水晶練習室 Admin + + + + + + + + +
+
+ + + +
+

新增練習紀錄

+ +
+
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + 取消 +
+
+
+ +
+
+
+ + + + diff --git a/sechskies-admin-hw/admin/practices/delete.html b/sechskies-admin-hw/admin/practices/delete.html new file mode 100644 index 0000000..bdee786 --- /dev/null +++ b/sechskies-admin-hw/admin/practices/delete.html @@ -0,0 +1,68 @@ + + + + + + 刪除練習紀錄｜水晶練習室 Admin + + + + + + + + +
+
+ + + +
+

刪除練習紀錄

+ +
+ + +
+
練習生
+
努比
+
日期
+
2026-07-16
+
訓練類型
+
舞蹈
+
歌曲
+
Road Fighter
+
+ +
+ + 取消 +
+
+ +
+
+
+ + + + diff --git a/sechskies-admin-hw/admin/practices/edit.html b/sechskies-admin-hw/admin/practices/edit.html new file mode 100644 index 0000000..ba05edd --- /dev/null +++ b/sechskies-admin-hw/admin/practices/edit.html @@ -0,0 +1,119 @@ + + + + + + 編輯練習紀錄｜水晶練習室 Admin + + + + + + + + +
+
+ + + +
+

編輯練習紀錄

+ +
+
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + 取消 +
+
+
+ +
+
+
+ + + + diff --git a/sechskies-admin-hw/admin/practices/index.html b/sechskies-admin-hw/admin/practices/index.html new file mode 100644 index 0000000..8e750e0 --- /dev/null +++ b/sechskies-admin-hw/admin/practices/index.html @@ -0,0 +1,125 @@ + + + + + + 練習紀錄管理｜水晶練習室 Admin + + + + + + + + +
+
+ + + +
+
+

練習紀錄管理

+
+ 新增練習紀錄 + 回後台首頁 +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
練習生日期訓練類型歌曲練習時間完成度完成狀態操作
努比2026-07-16舞蹈Road Fighter40 分鐘85%已完成 + 編輯 + 刪除 +
小星2026-07-16聲樂Couple35 分鐘78%已完成 + 編輯 + 刪除 +
阿凱2026-07-15RapChivalry25 分鐘60%進行中 + 編輯 + 刪除 +
敏珠2026-07-14舞台表現Com' Back50 分鐘0%未開始 + 編輯 + 刪除 +
+
+
+ +
+
+
+ + + + diff --git a/sechskies-admin-hw/admin/songs/create.html b/sechskies-admin-hw/admin/songs/create.html new file mode 100644 index 0000000..f8d0c11 --- /dev/null +++ b/sechskies-admin-hw/admin/songs/create.html @@ -0,0 +1,96 @@ + + + + + + 新增歌曲｜水晶練習室 Admin + + + + + + + + +
+
+ + + +
+

新增歌曲

+ +
+
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + +
+
+ +
+ +
+ + 取消 +
+
+
+ +
+
+
+ + + + diff --git a/sechskies-admin-hw/admin/songs/delete.html b/sechskies-admin-hw/admin/songs/delete.html new file mode 100644 index 0000000..3440d66 --- /dev/null +++ b/sechskies-admin-hw/admin/songs/delete.html @@ -0,0 +1,68 @@ + + + + + + 刪除歌曲｜水晶練習室 Admin + + + + + + + + +
+
+ + + +
+

刪除歌曲

+ +
+ + +
+
編號
+
1
+
歌名
+
Couple
+
專輯
+
Come Back Again
+
發行年份
+
1997
+
+ +
+ + 取消 +
+
+ +
+
+
+ + + + diff --git a/sechskies-admin-hw/admin/songs/edit.html b/sechskies-admin-hw/admin/songs/edit.html new file mode 100644 index 0000000..64f69c6 --- /dev/null +++ b/sechskies-admin-hw/admin/songs/edit.html @@ -0,0 +1,103 @@ + + + + + + 編輯歌曲｜水晶練習室 Admin + + + + + + + + +
+
+ + + +
+

編輯歌曲

+ +
+
+
+ +
+ + +
+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + +
+
+ +
+ +
+ + 取消 +
+
+
+ +
+
+
+ + + + diff --git a/sechskies-admin-hw/admin/songs/index.html b/sechskies-admin-hw/admin/songs/index.html new file mode 100644 index 0000000..36a38c9 --- /dev/null +++ b/sechskies-admin-hw/admin/songs/index.html @@ -0,0 +1,112 @@ + + + + + + 歌曲資料管理｜水晶練習室 Admin + + + + + + + + +
+
+ + + +
+
+

歌曲資料管理

+
+ 新增歌曲 + 回後台首頁 +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
編號歌名專輯發行年份YouTube 連結舞蹈難度是否顯示操作
1CoupleCome Back Again1997連結中等顯示 + 編輯 + 刪除 +
2Road FighterRoad Fighter2000連結高顯示 + 編輯 + 刪除 +
3Couple 재수사The Story of Kies Part 12016連結低隱藏 + 編輯 + 刪除 +
+
+
+ +
+
+
+ + + + diff --git a/sechskies-admin-hw/css/style.css b/sechskies-admin-hw/css/style.css new file mode 100644 index 0000000..99976a5 --- /dev/null +++ b/sechskies-admin-hw/css/style.css @@ -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); +} diff --git a/sechskies-admin-hw/index.html b/sechskies-admin-hw/index.html new file mode 100644 index 0000000..22a010a --- /dev/null +++ b/sechskies-admin-hw/index.html @@ -0,0 +1,217 @@ + + + + + + 水晶練習室 + + + + + + + + + + +
+
+

水晶男孩練習室

+
+

從今天開始，完成你的偶像練習生日誌

+
+
+ +
+ + +
+
+
+
+
+
練習生：努比
+ 今日狀態：訓練中 +
+
+
+
4
+
本週完成練習（次）
+
+
+
3
+
連續練習（天）
+
+
+
+
+
+ + +
+

今日訓練任務

+ +
+
+
+
+ + 聲樂 +
+

完成一首歌曲錄唱

+

預計時間：30 分鐘

+ 未開始 + 開始練習 +
+
+ +
+
+
+ + 舞蹈 +
+

練習一段水晶男孩舞蹈

+

預計時間：45 分鐘

+ 進行中 + 開始練習 +
+
+ +
+
+
+ + Rap +
+

完成節奏與咬字訓練

+

預計時間：20 分鐘

+ 已完成 + 再次練習 +
+
+
+
+ + +
+

能力進度

+ +
+
+
+
+ 聲樂 + 72% +
+
+
+
+
+
+
+ 舞蹈 + 65% +
+
+
+
+
+
+
+ Rap + 58% +
+
+
+
+
+
+
+ 舞台表現 + 80% +
+
+
+
+
+
+
+
+ + +
+

最近練習紀錄

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
日期練習項目歌曲練習時間完成度查看紀錄
2026-07-16舞蹈Road Fighter40 分鐘85%查看
2026-07-15聲樂Couple30 分鐘70%查看
2026-07-14RapChivalry25 分鐘60%查看
+
+
+
+ +
+ + + + + + diff --git a/sechskies-admin-hw/practice/create.html b/sechskies-admin-hw/practice/create.html new file mode 100644 index 0000000..24397ff --- /dev/null +++ b/sechskies-admin-hw/practice/create.html @@ -0,0 +1,115 @@ + + + + + + 新增練習紀錄｜水晶練習室 + + + + + + + + +
+

新增練習紀錄

+ +
+
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ + +
+
+ +
+ +
+ + 取消 +
+
+
+
+ + + + + + diff --git a/sechskies-admin-hw/practice/delete.html b/sechskies-admin-hw/practice/delete.html new file mode 100644 index 0000000..67f2d68 --- /dev/null +++ b/sechskies-admin-hw/practice/delete.html @@ -0,0 +1,66 @@ + + + + + + 刪除練習紀錄｜水晶練習室 + + + + + + + + +
+

刪除練習紀錄

+ +
+ + +
+
練習日期
+
2026-07-16
+
訓練類型
+
舞蹈
+
練習歌曲
+
Road Fighter
+
練習時間
+
40 分鐘
+
+ +
+ + 取消 +
+
+
+ + + + + + diff --git a/sechskies-admin-hw/practice/edit.html b/sechskies-admin-hw/practice/edit.html new file mode 100644 index 0000000..caa5f8e --- /dev/null +++ b/sechskies-admin-hw/practice/edit.html @@ -0,0 +1,115 @@ + + + + + + 編輯練習紀錄｜水晶練習室 + + + + + + + + +
+

編輯練習紀錄

+ +
+
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ + +
+
+ +
+ +
+ + 取消 +
+
+
+
+ + + + + + diff --git a/sechskies-admin-hw/practice/index.html b/sechskies-admin-hw/practice/index.html new file mode 100644 index 0000000..60e1626 --- /dev/null +++ b/sechskies-admin-hw/practice/index.html @@ -0,0 +1,115 @@ + + + + + + 我的練習紀錄｜水晶練習室 + + + + + + + + +
+ +
+

我的練習紀錄

+
+ 新增練習紀錄 + 回練習室首頁 +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
編號練習日期訓練類型練習歌曲練習內容練習時間完成度操作
12026-07-16舞蹈Road Fighter整段主歌＋副歌走位40 分鐘85% + 查看 + 編輯 + 刪除 +
22026-07-15聲樂Couple副歌高音音準練習30 分鐘70% + 查看 + 編輯 + 刪除 +
32026-07-14RapChivalry咬字與節奏卡點25 分鐘60% + 查看 + 編輯 + 刪除 +
+
+
+ +
+ + + + + + diff --git a/sechskies-admin-hw/practice/show.html b/sechskies-admin-hw/practice/show.html new file mode 100644 index 0000000..634f0a3 --- /dev/null +++ b/sechskies-admin-hw/practice/show.html @@ -0,0 +1,81 @@ + + + + + + 練習紀錄詳情｜水晶練習室 + + + + + + + + +
+

練習紀錄詳情

+ +
+ +
+ 舞蹈 + 已完成 +
+ +
+
練習日期
+
2026-07-16
+ +
訓練類型
+
舞蹈
+ +
練習歌曲
+
Road Fighter
+ +
練習時間
+
40 分鐘
+ +
完成度
+
+
+
+
+
+ +
練習心得
+
隊形轉換卡點抓得比昨天準，副歌動作幅度還要再放大。
+
+ +
+ 編輯這筆紀錄 + 回練習紀錄列表 +
+
+
+ + + + + +