diff --git a/.vscode/settings.json b/.vscode/settings.json index 6f3a291..8a6063c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,5 @@ { + // 本地預覽：雙擊專案根目錄 preview.bat + // 或在 Cursor：Ctrl+Shift+P →「執行工作」→「預覽網站」 "liveServer.settings.port": 5501 -} \ No newline at end of file +} diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 0000000..d10c1b0 --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,23 @@ +{ + "version": "2.0.0", + "tasks": [ + { + "label": "預覽網站", + "detail": "本機 http://127.0.0.1:5501（等同雙擊 preview.bat）", + "type": "shell", + "command": "${workspaceFolder}\\preview.bat", + "options": { + "cwd": "${workspaceFolder}" + }, + "problemMatcher": [], + "presentation": { + "reveal": "always", + "panel": "dedicated", + "focus": false + }, + "runOptions": { + "instanceLimit": 1 + } + } + ] +} diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..b8098cb --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,103 @@ +# 水晶男孩推廣部 — AI 工作上下文 + +> 這個檔案讓 AI 在任何裝置（家／學校）都能快速恢復上下文。 +> **每次對話做了重要決定，請叫我更新這裡，然後 git commit。** + +--- + +## 專案簡介 + +水晶男孩（Sechs Kies）推廣粉絲網站。靜態 HTML + PHP + 原生 CSS/JS，無框架。 +站主（Noopy）2016 年入坑，藝廊式創作風格。 + +--- + +## 規範速查（詳細見 `developer-rules/rules/`） + +| 規範 | 檔案 | +|------|------| +| 改檔行為守則（必問再改） | `agent-must-ask.md` | +| 變更邊界（只改被點名的） | `ai-change-boundaries.md` | +| CSS 顏色 Token | `color-tokens.md` | +| 版面視覺預設 | `design-defaults.md` | +| Git commit 規範 | `git-commit-required.md` | +| 導覽邏輯（portal-nav） | `portal-nav-rules.md` | +| 文案語調 | `site-voice.md` | + +**最重要的三條：** +1. 沒說「執行」→ 不改檔 +2. 只改被點名的那一頁／區塊 +3. 改完必附 commit 指令（禁止在 sandbox 跑 git） + +--- + +## 架構重點 + +- **全站導覽**：`assets/js/portal-nav.js`（`COMING_SOON_PAGES` 控制開放） +- **全站 CSS**：`assets/css/style.css`（定義所有 color token） +- **首頁**：`index.html` +- **站主索引**（自用）：`extra/site-guide.html`（`data-portal-nav-all-open`，不對外） +- **內頁 header class**：`inner-page-header`（禁改回舊名） + +### variety/ 頁面 + +| 檔案 | 頁面標題 | 說明 | +|------|----------|------| +| `variety/bangxiao.html` | 世紀級寶藏 / 爆笑養老院 | 甜蜜負擔計量器；六人卡片選取 + jQuery 計算；CTA → `totoga2/ebook.html` | +| `variety/variety-shows.html` | 全員發瘋 | 綜藝節目存檔表；tabs + 搜尋；已對齊 albums.html 扁平結構 | +| `variety/NJTW/NJTW5.html` | 新西遊記5 | 各自暴走專頁 | + +--- + +## portal-nav 操作守則（血淚版） + +> 每次新增或修改導覽，必須先讀這裡再動手。 + +1. **先查 `extra/site-guide.html` 確認層級**，再動 `portal-nav.js`。 + site-guide 的 depth 數字 = nav 的層級：depth-1 是第一層 `
  • `，depth-2 是子選單項目，depth-3 是 subgroup 裡的巢狀項目。 + +2. **`COMING_SOON_PAGES` 只放檔名**（不含路徑）。 + `normalizePageKey` 只取 href 最後一段，所以 `variety/bangxiao.html` → 比對 `bangxiao.html`。 + +3. **直接連結不需要 subgroup**。 + 子選單內只要 `
  • ` 就夠；`portal-nav__subgroup` 只在該項目還有巢狀子項目時才用（例如「傳奇的轉折」有時間軸、電子書等四項）。 + +4. **site-guide.html 要同步更新**，否則站主索引頁會顯示舊名稱。 + +5. **commit 前網站不會更新**。本地端強制重整用 `Ctrl+Shift+R`；GitHub Pages 需 `git push` 後等約 1 分鐘。 + +--- + +## 目前工作狀態 + + + +**最後更新：** 2026-06-17 + +**進行中：** +- 無 + +**待確認：** +- developer-rules 健檢尚未執行 + +**已完成：** +- 建立 AGENTS.md 跨裝置上下文檔案 +- 新增 `variety/bangxiao.html`（世紀級寶藏 / 爆笑養老院，甜蜜負擔計量器） +- `variety/variety-shows.html` 重構：移除多層包裝，對齊 albums.html 扁平結構 +- portal-nav 新增世紀級寶藏，正確放入淪陷瞬間子選單 +- `extra/site-guide.html` 同步更新：全員發瘋 → 世紀級寶藏 + +--- + +## 如何使用這個檔案 + +換裝置後，告訴 AI： +> 「請先讀 AGENTS.md，再讀 developer-rules/rules/ 裡的所有規範，然後繼續 [任務]。」 + +## Imported Claude Cowork project instructions + +「在這個專案資料夾中，有一個名為 developer-rules 的資料夾。 + +這是我們第一次合作，我不確定裡面目前記錄的規範是否完全正確、有沒有被之前亂寫的扣給弄髒。 + +請你在初始化專案後，立刻去徹底閱讀 developer-rules 裡的所有內容，並且不要盲目死背。請幫我仔細檢查、挑出裡面是否有前後矛盾、不夠乾淨、或是不符合現代高標準前端美感與 PHP 結構的規範。讀完後，請在我們的第一次對話中，條理分明地向我回報你的健檢結果，並給出優化建議，等我確認後我們再正式鎖定。」 diff --git a/assets/css/captain-aura.css b/assets/css/captain-aura.css new file mode 100644 index 0000000..3e0d1d2 --- /dev/null +++ b/assets/css/captain-aura.css @@ -0,0 +1,101 @@ +/* 隊長的氣場 — 殷志源台北見面會存檔頁（2018-07-21） */ + +body.captain-aura-page { + background-color: var(--color-bg); + background-image: url('../images/concert/captain-aura/bg-digital-placeholder.svg'); + background-repeat: repeat; +} + +body.captain-aura-page .captain-aura-hero { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +} + +body.captain-aura-page .captain-aura-hero img { + display: block; + width: 100%; + height: auto; + border-radius: 4px; +} + +body.captain-aura-page .captain-aura-main { + max-width: 893px; + margin: 0 auto; + padding: 50px 20px 72px; + box-sizing: border-box; +} + +body.captain-aura-page .captain-aura-act { + margin-bottom: 2.5rem; +} + +body.captain-aura-page .captain-aura-act:last-child { + margin-bottom: 0; +} + +body.captain-aura-page .captain-aura-act__title { + margin: 0 0 1rem; + text-align: center; + color: var(--color-brand); + font-size: 1.65rem; + font-weight: 700; + line-height: 1.35; + text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); +} + +body.captain-aura-page .captain-aura-act__title--plain { + color: var(--color-text-inverse); + text-shadow: none; + font-size: 1.35rem; + margin-bottom: 0.65rem; +} + +body.captain-aura-page .captain-aura-act__title--plain + .captain-aura-act__title--plain { + margin-top: 0; +} + +body.captain-aura-page .captain-aura-divider { + margin: 2.75rem 0; + text-align: center; + color: var(--color-brand); + font-size: 1.1rem; + font-weight: 700; + letter-spacing: 0.2em; +} + +body.captain-aura-page .captain-aura-videos { + display: flex; + flex-direction: column; + gap: 1rem; +} + +body.captain-aura-page .captain-aura-video { + position: relative; + width: 100%; + padding-bottom: 56.25%; + background: #000; + border-radius: 4px; + overflow: hidden; +} + +body.captain-aura-page .captain-aura-video iframe { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + border: 0; +} + +@media (max-width: 640px) { + body.captain-aura-page .captain-aura-main { + padding-top: 32px; + padding-bottom: 48px; + } + + body.captain-aura-page .captain-aura-act__title { + font-size: 1.35rem; + } +} diff --git a/assets/images/concert/captain-aura/bg-digital-placeholder.svg b/assets/images/concert/captain-aura/bg-digital-placeholder.svg new file mode 100644 index 0000000..e8a5b64 --- /dev/null +++ b/assets/images/concert/captain-aura/bg-digital-placeholder.svg @@ -0,0 +1,5 @@ + diff --git a/assets/images/concert/captain-aura/hero-placeholder.svg b/assets/images/concert/captain-aura/hero-placeholder.svg new file mode 100644 index 0000000..0aee4f4 --- /dev/null +++ b/assets/images/concert/captain-aura/hero-placeholder.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + G1 private 1theland in Taipei + kEG hero.jpg sli01.png + diff --git a/assets/js/portal-nav.js b/assets/js/portal-nav.js index 5dd22d2..ee4a812 100644 --- a/assets/js/portal-nav.js +++ b/assets/js/portal-nav.js @@ -264,7 +264,7 @@
  • 現場的震撼
  • 黃色留聲機 diff --git a/concert/captain-aura.html b/concert/captain-aura.html new file mode 100644 index 0000000..4cc9028 --- /dev/null +++ b/concert/captain-aura.html @@ -0,0 +1,300 @@ + + + + + + + 水晶男孩｜殷志源台北見面會 + + + + + + + +
    +
    +

    殷志源台北見面會

    +
    + G1 private · 1theland in Taipei · 2018.07.21 +
    +
    +
    + + + + + + +
    + + + +
    +

    8t. Truck

    +
    +
    + +
    +
    + +
    +
    +
    + +
    +

    入境表格

    +
    +
    + +
    +
    + +
    +
    +
    + +
    +

    粉絲提問

    +

    Taipei in Melody

    +

    G1's Great Moment

    +

    Dance

    +
    +
    + +
    +
    + +
    +
    +
    + +
    +

    撒嬌

    +
    +
    + +
    +
    +
    + +
    +

    1 the land

    +
    + +
    +

    烏克麗麗

    +
    +
    + +
    +
    + +
    +
    +
    + +
    +

    Couple大合唱

    +
    +
    + +
    +
    + +
    +
    +
    + +
    +

    Never, Ever…

    +
    +
    + +
    +
    +
    + + + +
    +
    +
    + +
    +
    +
    + +
    +

    酒醉

    +
    +
    + +
    +
    +
    + +
    +

    滿醉 in Melody

    +
    +
    + +
    +
    + +
    +
    +
    + +
    +

    All Famy

    +
    +
    + +
    +
    + +
    +
    +
    + +
    +

    Suddenly

    +
    +
    + +
    +
    +
    + +
    +

    ONE

    +
    +
    + +
    +
    + +
    +
    +
    + +
    +

    安可 / Adios

    +
    +
    + +
    +
    + +
    +
    +
    + +
    + + + + + + diff --git a/preview.bat b/preview.bat new file mode 100644 index 0000000..507bf08 --- /dev/null +++ b/preview.bat @@ -0,0 +1,28 @@ +@echo off +chcp 65001 >nul +cd /d "%~dp0" + +echo. +echo ═══════════════════════════════════════ +echo 水晶男孩推廣部 — 本地預覽 +echo 網址：http://127.0.0.1:5501 +echo 關閉此視窗 = 停止預覽 +echo ═══════════════════════════════════════ +echo. + +where py >nul 2>&1 +if %errorlevel%==0 ( + start "" "http://127.0.0.1:5501/index.html" + py -m http.server 5501 + goto :eof +) + +where python >nul 2>&1 +if %errorlevel%==0 ( + start "" "http://127.0.0.1:5501/index.html" + python -m http.server 5501 + goto :eof +) + +echo [錯誤] 找不到 Python。請安裝 Python 後再試，或使用 Cursor：Ctrl+Shift+P →「預覽網站」 +pause diff --git a/variety/vedio-list.html b/variety/vedio-list.html new file mode 100644 index 0000000..1d3189f --- /dev/null +++ b/variety/vedio-list.html @@ -0,0 +1,551 @@ + + + + + + + 水晶男孩｜追劇清單 + + + + + + + + +
    +
    +

    深夜清單

    +
    + DRAMA & VARIETY WATCH LIST +
    +
    +
    + + + + + +
    + +
    +

    正在追的那些夜晚

    +

    + 有些夜晚適合考古黃色奇蹟，有些夜晚則是——螢幕一亮，人就栽進另一個世界。 + 綜藝裡的失控笑聲、戲劇裡的心跳停拍，都值得被好好記下來：看到哪一季、哪一集、哪一句台詞剛把你釘在沙發上。 +

    +

    + 這裡先收兩部最近在追的：一部是把人丟進肯亞還能笑到缺氧的韓綜， + 一部是把 1997 年的青春寫得又甜又疼的韓劇。 + 點進去，進度與入口都在；先別急著一次追完，慢慢養也很好看。 +

    +

    + 此頁為線上靜態預覽。完整資料庫與後台 CRUD（乙級第三題骨架）請本機 XAMPP 匯入 + variety/vedio-list/dramas.sql 後，開啟 + variety/vedio-list/。 +

    +
    + +
    +

    追劇清單

    +

    先用類型找——綜藝還是戲劇，跟 OTT 首頁那排分類一樣直覺。

    + +
    + + + +
    + +
    +
    + +
    + 綜藝 + Netflix +
    +

    三傻遊肯亞

    +

    觀看進度：第 1 季・第 2 集・看到 28:40

    +

    三人剛被扔進野外，表情比獅子還慌。

    +
    + 繼續觀看 + +
    +
    + +
    + +
    + 戲劇 + Disney+ +
    +

    請回答1997

    +

    觀看進度：第 1 季・第 5 集・看到 41:12

    +

    宿舍夜談剛結束，收音機還在響，心卻已經開始亂。

    +
    + 繼續觀看 + +
    +
    +
    + +

    這個類型目前還沒有作品——換「全部」看看？

    + +
    + 單部作品 +

    +

    +
    +

    +

    +
    +

    +
    + 繼續觀看 + +
    +
    +
    + +
    + + + + + + + + + + diff --git a/variety/vedio-list/admin.php b/variety/vedio-list/admin.php new file mode 100644 index 0000000..2a91f58 --- /dev/null +++ b/variety/vedio-list/admin.php @@ -0,0 +1,44 @@ + + + + + + + + 深夜清單｜管理後台 + + + + + + +
    +
    +

    深夜清單後台

    +
    + ADMIN · CRUD +
    +
    +
    + +
    + + + +
    + + + diff --git a/variety/vedio-list/api/db.php b/variety/vedio-list/api/db.php new file mode 100644 index 0000000..94f0e7e --- /dev/null +++ b/variety/vedio-list/api/db.php @@ -0,0 +1,125 @@ +table = $table; + $this->pdo = new PDO($this->dsn, 'root', ''); + } + + function all(...$arg) + { + $sql = "SELECT * FROM `$this->table` "; + if (isset($arg[0])) { + if (is_array($arg[0])) { + $tmp = $this->a2s($arg[0]); + $sql .= " WHERE " . join(" AND ", $tmp); + } else { + $sql .= $arg[0]; + } + } + + if (isset($arg[1])) { + $sql .= $arg[1]; + } + + return $this->pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC); + } + + function count(...$arg) + { + $sql = "SELECT count(*) FROM `$this->table`"; + if (isset($arg[0])) { + if (is_array($arg[0])) { + $tmp = $this->a2s($arg[0]); + $sql .= " WHERE " . join(" AND ", $tmp); + } else { + $sql .= $arg[0]; + } + } + + if (isset($arg[1])) { + $sql .= $arg[1]; + } + + return $this->pdo->query($sql)->fetchColumn(); + } + + function find($arg) + { + $sql = "SELECT * FROM `$this->table` "; + + if (is_array($arg)) { + $tmp = $this->a2s($arg); + $sql .= " WHERE " . join(" AND ", $tmp); + } else { + $sql .= " WHERE `id`='$arg'"; + } + + return $this->pdo->query($sql)->fetch(PDO::FETCH_ASSOC); + } + + function save($arg) + { + if (isset($arg['id'])) { + $tmp = $this->a2s($arg); + $sql = "UPDATE `$this->table` SET " . join(" , ", $tmp); + $sql .= " WHERE `id`='{$arg['id']}'"; + } else { + $keys = array_keys($arg); + $sql = "INSERT INTO `$this->table` (`" . join("`,`", $keys) . "`) VALUES('" . join("','", $arg) . "');"; + } + + return $this->pdo->exec($sql); + } + + function del($arg) + { + $sql = "DELETE FROM `$this->table` "; + + if (is_array($arg)) { + $tmp = $this->a2s($arg); + $sql .= " WHERE " . join(" AND ", $tmp); + } else { + $sql .= " WHERE `id`='$arg'"; + } + + return $this->pdo->exec($sql); + } + + protected function a2s($array) + { + $tmp = []; + foreach ($array as $key => $val) { + $tmp[] = "`$key`='$val'"; + } + + return $tmp; + } + + function q($sql) + { + return $this->pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC); + } +} + +function dd($array) +{ + echo "
    ";
+    print_r($array);
+    echo "
    "; +} + +function to($url) +{ + header("location:$url"); +} + +$Drama = new DB('dramas'); diff --git a/variety/vedio-list/api/del.php b/variety/vedio-list/api/del.php new file mode 100644 index 0000000..59453c1 --- /dev/null +++ b/variety/vedio-list/api/del.php @@ -0,0 +1,5 @@ +del($_POST['id']); diff --git a/variety/vedio-list/api/show.php b/variety/vedio-list/api/show.php new file mode 100644 index 0000000..5bd5d7e --- /dev/null +++ b/variety/vedio-list/api/show.php @@ -0,0 +1,6 @@ +find($_POST['id']); +$row['sh'] = ((int)$row['sh'] + 1) % 2; +$Drama->save($row); diff --git a/variety/vedio-list/api/sw.php b/variety/vedio-list/api/sw.php new file mode 100644 index 0000000..cdcff71 --- /dev/null +++ b/variety/vedio-list/api/sw.php @@ -0,0 +1,13 @@ +find($_POST['ids'][0]); +$row2 = $table->find($_POST['ids'][1]); + +$tmp = $row1['rank']; +$row1['rank'] = $row2['rank']; +$row2['rank'] = $tmp; + +$table->save($row1); +$table->save($row2); diff --git a/variety/vedio-list/back/add.php b/variety/vedio-list/back/add.php new file mode 100644 index 0000000..b360961 --- /dev/null +++ b/variety/vedio-list/back/add.php @@ -0,0 +1,96 @@ +q("SELECT MAX(`rank`) AS m FROM `dramas`"); + $nextRank = ((int)($maxRank[0]['m'] ?? 0)) + 1; + + $data = [ + 'title' => trim($_POST['title'] ?? ''), + 'type' => $_POST['type'] ?? 'drama', + 'platform' => $_POST['platform'] ?? '其他', + 'watch_url' => trim($_POST['watch_url'] ?? ''), + 'current_season' => max(1, (int)($_POST['current_season'] ?? 1)), + 'current_episode' => max(0, (int)($_POST['current_episode'] ?? 0)), + 'current_position' => trim($_POST['current_position'] ?? ''), + 'progress_note' => trim($_POST['progress_note'] ?? ''), + 'status' => $_POST['status'] ?? 'want', + 'rating' => $_POST['rating'] !== '' ? $_POST['rating'] : null, + 'intro' => trim($_POST['intro'] ?? ''), + 'note' => trim($_POST['note'] ?? ''), + 'sh' => 1, + 'rank' => $nextRank, + ]; + + // DB::save 用字串拼接；null 改空字串避免 SQL 破掉 + if ($data['rating'] === null) { + $data['rating'] = ''; + } + + $Drama->save($data); + to("?do=drama"); + exit; +} +?> + +
    +

    新增作品

    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + 取消 +
    +
    +
    diff --git a/variety/vedio-list/back/drama.php b/variety/vedio-list/back/drama.php new file mode 100644 index 0000000..757df38 --- /dev/null +++ b/variety/vedio-list/back/drama.php @@ -0,0 +1,71 @@ + '綜藝', + 'drama' => '戲劇', +]; +$rows = $Drama->all(" ORDER BY `rank` ASC, `id` ASC"); +?> + +
    +

    追劇管理

    +
    + 新增作品 +
    + +
    + $row): ?> + +
    +
    +
    +
    + 進度：第 季・第 集 + + ・ + +
    +
    + + + + 編輯 + +
    +
    + + + +

    尚無資料，先新增一部作品吧。

    + +
    +
    + + diff --git a/variety/vedio-list/back/edit.php b/variety/vedio-list/back/edit.php new file mode 100644 index 0000000..bba53b6 --- /dev/null +++ b/variety/vedio-list/back/edit.php @@ -0,0 +1,107 @@ +find($id); + +if (!$row) { + echo '

    找不到這筆資料。

    '; + return; +} + +if ($_SERVER['REQUEST_METHOD'] === 'POST') { + $row['title'] = trim($_POST['title'] ?? $row['title']); + $row['type'] = $_POST['type'] ?? $row['type']; + $row['platform'] = $_POST['platform'] ?? $row['platform']; + $row['watch_url'] = trim($_POST['watch_url'] ?? ''); + $row['current_season'] = max(1, (int)($_POST['current_season'] ?? 1)); + $row['current_episode'] = max(0, (int)($_POST['current_episode'] ?? 0)); + $row['current_position'] = trim($_POST['current_position'] ?? ''); + $row['progress_note'] = trim($_POST['progress_note'] ?? ''); + $row['status'] = $_POST['status'] ?? $row['status']; + $row['rating'] = ($_POST['rating'] !== '') ? $_POST['rating'] : ''; + $row['intro'] = trim($_POST['intro'] ?? ''); + $row['note'] = trim($_POST['note'] ?? ''); + $Drama->save($row); + to("?do=drama"); + exit; +} +?> + +
    +

    編輯作品

    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + 取消 +
    +
    +
    diff --git a/variety/vedio-list/back/main.php b/variety/vedio-list/back/main.php new file mode 100644 index 0000000..4ae81d5 --- /dev/null +++ b/variety/vedio-list/back/main.php @@ -0,0 +1,7 @@ +
    +

    後台首頁

    +

    乙級第三題骨架：清單、詳情、進度、後台 CRUD。訂票不做。

    +
    + 進入追劇管理 +
    +
    diff --git a/variety/vedio-list/css/vedio-list.css b/variety/vedio-list/css/vedio-list.css new file mode 100644 index 0000000..9b873ab --- /dev/null +++ b/variety/vedio-list/css/vedio-list.css @@ -0,0 +1,429 @@ +/* ── 追劇清單／後台專用樣式 ── */ + +.vedio-list-page .vedio-intro { + text-align: left; +} + +.vedio-list-page .vedio-intro p { + color: var(--color-text-muted); + font-size: 1rem; + line-height: 1.8; + margin: 0 0 0.85rem; + text-align: left; +} + +.vedio-list-page .vedio-intro p:last-child { + margin-bottom: 0; +} + +.vedio-list-page .list-lead { + color: var(--color-text-muted); + font-size: 1rem; + margin: 0 0 1.25rem; + text-align: left; +} + +.vedio-list-page .type-tabs { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 10px; + margin: 0 0 1.75rem; +} + +.vedio-list-page .type-tab { + display: inline-flex; + align-items: center; + justify-content: center; + border: 2px solid rgba(255, 204, 0, 0.22); + background: var(--color-surface-soft); + color: var(--color-text-dark); + font-weight: 700; + font-size: 0.92rem; + padding: 0.45rem 1.1rem; + border-radius: 999px; + text-decoration: none; + white-space: nowrap; + transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease; +} + +.vedio-list-page .type-tab:hover { + border-color: var(--color-brand); +} + +.vedio-list-page .type-tab.is-active { + border-color: var(--color-brand); + background: #fffce8; + color: var(--color-brand-dark); +} + +.vedio-list-page .drama-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; + margin: 0 0 2rem; +} + +.vedio-list-page .drama-card { + display: flex; + flex-direction: column; + align-items: stretch; + text-align: left; + padding: 1.15rem 1.2rem 1.25rem; + background: var(--color-surface-soft); + border: 2px solid rgba(255, 204, 0, 0.18); + border-radius: 12px; + box-sizing: border-box; + min-height: 100%; +} + +.vedio-list-page .drama-card:hover { + border-color: var(--color-brand); + background: #fffce8; +} + +.vedio-list-page .drama-card__poster { + display: flex; + align-items: center; + justify-content: center; + aspect-ratio: 16 / 9; + margin: 0 0 0.95rem; + border-radius: 8px; + background: + linear-gradient(145deg, rgba(255, 204, 0, 0.22), rgba(0, 0, 0, 0.08)), + var(--color-surface-soft); + color: var(--color-brand-dark); + font-weight: 800; + font-size: 0.95rem; + letter-spacing: 0.04em; + text-align: center; + padding: 0.75rem; + box-sizing: border-box; +} + +.vedio-list-page .drama-card__meta { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin: 0 0 0.55rem; +} + +.vedio-list-page .drama-tag { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.18rem 0.55rem; + border-radius: 999px; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.03em; + white-space: nowrap; + background: rgba(255, 204, 0, 0.18); + color: var(--color-brand-dark); +} + +.vedio-list-page .drama-tag--platform { + background: rgba(0, 0, 0, 0.06); + color: var(--color-text-muted); +} + +.vedio-list-page .drama-card__title { + margin: 0 0 0.45rem; + font-size: 1.15rem; + font-weight: 800; + color: var(--color-text-dark); + line-height: 1.35; + text-align: center; +} + +.vedio-list-page .drama-card__progress, +.vedio-list-page .drama-card__note { + margin: 0 0 0.35rem; + color: var(--color-text-muted); + font-size: 0.9rem; + line-height: 1.65; + text-align: left; +} + +.vedio-list-page .drama-card__note { + font-size: 0.84rem; + margin-bottom: 0.85rem; +} + +.vedio-list-page .drama-card__actions { + display: flex; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + margin-top: auto; + padding-top: 0.35rem; +} + +.vedio-list-page .drama-card__actions a { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + min-height: 38px; + padding: 0.35rem 0.9rem; + border-radius: 999px; + font-size: 0.86rem; + font-weight: 700; + text-decoration: none; + white-space: nowrap; + border: 2px solid rgba(255, 204, 0, 0.35); + background: #fff; + color: var(--color-brand-dark); +} + +.vedio-list-page .drama-card__actions a:hover { + border-color: var(--color-brand); + background: #fffce8; +} + +.vedio-list-page .drama-card__actions a.is-primary { + background: var(--color-brand); + border-color: var(--color-brand); + color: #1a1a1a; +} + +.vedio-list-page .detail-block { + padding: 1.35rem 1.4rem 1.5rem; + border-radius: 12px; + background: var(--color-surface-soft); + border: 1px solid rgba(255, 204, 0, 0.25); + margin-bottom: 1.5rem; +} + +.vedio-list-page .detail-block__eyebrow { + display: block; + text-align: center; + font-size: 0.78rem; + font-weight: 700; + letter-spacing: 0.08em; + color: var(--color-text-muted); + margin: 0 0 0.45rem; +} + +.vedio-list-page .detail-block__title { + margin: 0 0 0.75rem; + text-align: center; + font-size: 1.35rem; + font-weight: 800; + color: var(--color-brand-dark); + line-height: 1.35; +} + +.vedio-list-page .detail-block p { + margin: 0 0 0.75rem; + color: var(--color-text-muted); + font-size: 0.98rem; + line-height: 1.8; + text-align: left; +} + +.vedio-list-page .detail-block__progress-box { + margin: 1rem 0; + padding: 0.9rem 1rem; + border-radius: 10px; + background: #fffce8; + border: 1px solid rgba(255, 204, 0, 0.35); +} + +.vedio-list-page .detail-block__progress-box p { + margin: 0 0 0.35rem; +} + +.vedio-list-page .detail-block__progress-box p:last-child { + margin-bottom: 0; +} + +.vedio-list-page .detail-block__actions, +.vedio-list-page .form-actions { + display: flex; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + margin-top: 1.1rem; +} + +.vedio-list-page .detail-block__actions a, +.vedio-list-page .form-actions a, +.vedio-list-page .form-actions button, +.vedio-list-page .progress-form button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + min-height: 40px; + padding: 0.4rem 1.05rem; + border-radius: 999px; + font-size: 0.9rem; + font-weight: 700; + text-decoration: none; + white-space: nowrap; + cursor: pointer; + border: 2px solid rgba(255, 204, 0, 0.35); + background: #fff; + color: var(--color-brand-dark); +} + +.vedio-list-page .detail-block__actions a.is-primary, +.vedio-list-page .form-actions button.is-primary, +.vedio-list-page .progress-form button.is-primary { + background: var(--color-brand); + border-color: var(--color-brand); + color: #1a1a1a; +} + +.vedio-list-page .empty-hint { + text-align: center; + color: var(--color-text-muted); + padding: 1.5rem 1rem; + margin: 0 0 1.5rem; +} + +.vedio-list-page .progress-form, +.vedio-admin-page .admin-form { + max-width: 560px; + margin: 0 auto 2rem; + padding: 1.25rem 1.35rem; + background: var(--color-surface-soft); + border: 1px solid rgba(255, 204, 0, 0.25); + border-radius: 12px; +} + +.vedio-list-page .progress-form label, +.vedio-admin-page .admin-form label { + display: block; + margin: 0.85rem 0 0.35rem; + font-weight: 700; + color: var(--color-text-dark); + text-align: left; +} + +.vedio-list-page .progress-form input, +.vedio-list-page .progress-form select, +.vedio-list-page .progress-form textarea, +.vedio-admin-page .admin-form input, +.vedio-admin-page .admin-form select, +.vedio-admin-page .admin-form textarea { + width: 100%; + box-sizing: border-box; + padding: 0.55rem 0.7rem; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 8px; + font-size: 0.95rem; +} + +.vedio-list-page .vedio-admin-link, +.vedio-admin-page .admin-nav { + text-align: center; + margin: 1rem 0; +} + +.vedio-list-page .vedio-admin-link a { + color: var(--color-brand-dark); + font-weight: 700; +} + +.vedio-admin-page .admin-wrap { + padding-top: 1.5rem; + padding-bottom: 2.5rem; +} + +.vedio-admin-page .admin-nav { + display: flex; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + margin-bottom: 1.5rem; +} + +.vedio-admin-page .admin-nav a { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.4rem 1rem; + border-radius: 999px; + border: 2px solid rgba(255, 204, 0, 0.35); + background: #fffce8; + color: var(--color-brand-dark); + font-weight: 700; + text-decoration: none; + white-space: nowrap; +} + +.vedio-admin-page .admin-lead { + text-align: center; + color: var(--color-text-muted); + margin: 0 0 1.25rem; +} + +.vedio-admin-page .drama-row { + display: flex; + flex-wrap: wrap; + gap: 12px; + justify-content: space-between; + align-items: center; + padding: 12px 14px; + margin: 0 0 10px; + background: #fff; + border: 1px solid rgba(255, 204, 0, 0.25); + border-radius: 10px; + color: #222; +} + +.vedio-admin-page .drama-row__info { + flex: 1 1 220px; + text-align: left; +} + +.vedio-admin-page .drama-row__actions { + display: flex; + flex-wrap: wrap; + gap: 6px; + justify-content: flex-end; +} + +.vedio-admin-page .drama-row__actions button, +.vedio-admin-page .drama-row__actions a.btn-like { + appearance: none; + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 34px; + padding: 0.25rem 0.7rem; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 6px; + background: #fffce8; + color: #222; + font-size: 0.85rem; + font-weight: 700; + cursor: pointer; + text-decoration: none; + white-space: nowrap; +} + +.vedio-admin-page .admin-toolbar { + text-align: center; + margin: 0 0 1rem; +} + +.vedio-admin-page .admin-toolbar a { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.45rem 1.1rem; + border-radius: 999px; + background: var(--color-brand); + color: #1a1a1a; + font-weight: 800; + text-decoration: none; +} + +@media (max-width: 640px) { + .vedio-list-page .drama-grid { + grid-template-columns: 1fr; + } +} diff --git a/variety/vedio-list/dramas.sql b/variety/vedio-list/dramas.sql new file mode 100644 index 0000000..219df84 --- /dev/null +++ b/variety/vedio-list/dramas.sql @@ -0,0 +1,62 @@ +-- 深夜清單 / 追劇資料庫 +-- 本機 XAMPP：phpMyAdmin 匯入此檔即可 + +CREATE DATABASE IF NOT EXISTS `vedio_list` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; +USE `vedio_list`; + +DROP TABLE IF EXISTS `dramas`; + +CREATE TABLE `dramas` ( + `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, + `title` varchar(100) NOT NULL COMMENT '劇名／節目名', + `type` varchar(20) NOT NULL DEFAULT 'drama' COMMENT 'variety=綜藝, drama=戲劇', + `platform` varchar(50) NOT NULL COMMENT '上架平台', + `watch_url` varchar(500) DEFAULT NULL COMMENT '作品直接觀看網址', + `current_season` int(10) UNSIGNED NOT NULL DEFAULT 1 COMMENT '目前第幾季', + `current_episode` int(10) UNSIGNED NOT NULL DEFAULT 0 COMMENT '目前第幾集', + `current_position` varchar(50) DEFAULT NULL COMMENT '該集看到的位置', + `progress_note` varchar(255) DEFAULT NULL COMMENT '進度情節備註', + `status` varchar(20) NOT NULL DEFAULT 'watching' COMMENT 'want/watching/done/paused/dropped', + `rating` decimal(3,1) DEFAULT NULL COMMENT '評分', + `intro` text COMMENT '簡介', + `note` text COMMENT '心得備註', + `sh` tinyint(1) UNSIGNED NOT NULL DEFAULT 1 COMMENT '是否顯示', + `rank` int(10) UNSIGNED NOT NULL DEFAULT 0 COMMENT '排列順序', + PRIMARY KEY (`id`) +) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci; + +INSERT INTO `dramas` +(`title`, `type`, `platform`, `watch_url`, `current_season`, `current_episode`, `current_position`, `progress_note`, `status`, `rating`, `intro`, `note`, `sh`, `rank`) +VALUES +( + '三傻遊肯亞', + 'variety', + 'Netflix', + 'https://www.netflix.com/title/82031207', + 1, + 2, + '28:40', + '三人剛被扔進野外，表情比獅子還慌。', + 'watching', + 8.5, + '三個人、一座肯亞，以及無數個「這也能出事？」的現場。笑點來得又急又野，像把旅行節目的安全感整袋拆掉，只留下腎上腺素與默契。', + '羅PD 首登 Netflix；志源在裡面，小黃更沒有藉口不補。', + 1, + 1 +), +( + '請回答1997', + 'drama', + 'Disney+', + 'https://www.disneyplus.com/en-tw/browse/entity-3979fb82-8681-44e8-b7be-e313091f0d73', + 1, + 5, + '41:12', + '宿舍夜談剛結束，收音機還在響，心卻已經開始亂。', + 'watching', + 9.0, + '把 1997 寫進宿舍、收音機與那一聲來不及說出口的喜歡。甜的時候甜到發亮，疼的時候又老實得讓人不敢快轉。', + '下一集容易哭，衛生紙先備好。', + 1, + 2 +); diff --git a/variety/vedio-list/front/detail.php b/variety/vedio-list/front/detail.php new file mode 100644 index 0000000..847db26 --- /dev/null +++ b/variety/vedio-list/front/detail.php @@ -0,0 +1,65 @@ +find($id); + +if (!$row || (int)$row['sh'] !== 1) { + echo '

    找不到這部作品，或它目前未公開顯示。

    '; + echo '

    回清單

    '; + return; +} + +$typeLabels = [ + 'variety' => '綜藝', + 'drama' => '戲劇', +]; +$statusLabels = [ + 'want' => '想看', + 'watching' => '追劇中', + 'done' => '已追完', + 'paused' => '暫停', + 'dropped' => '棄劇', +]; + +$typeText = $typeLabels[$row['type']] ?? $row['type']; +$statusText = $statusLabels[$row['status']] ?? $row['status']; +?> + +
    + +

    + + +

    + + +
    +

    + 觀看進度：第 季｜第 集 + + ｜ + +

    + +

    + +
    + +

    狀態： + + 　·　評分： + +

    + + +

    + + +
    + + 繼續觀看 + + 更新進度 + 回清單 +
    +
    diff --git a/variety/vedio-list/front/main.php b/variety/vedio-list/front/main.php new file mode 100644 index 0000000..f64df8f --- /dev/null +++ b/variety/vedio-list/front/main.php @@ -0,0 +1,84 @@ + '綜藝', + 'drama' => '戲劇', +]; +$statusLabels = [ + 'want' => '想看', + 'watching' => '追劇中', + 'done' => '已追完', + 'paused' => '暫停', + 'dropped' => '棄劇', +]; + +$filter = $_GET['type'] ?? 'all'; +$where = ['sh' => 1]; +if ($filter === 'variety' || $filter === 'drama') { + $where['type'] = $filter; +} +$rows = $Drama->all($where, " ORDER BY `rank` ASC, `id` ASC"); +?> + +
    +

    正在追的那些夜晚

    +

    + 有些夜晚適合考古黃色奇蹟，有些夜晚則是——螢幕一亮，人就栽進另一個世界。 + 綜藝裡的失控笑聲、戲劇裡的心跳停拍，都值得被好好記下來：看到哪一季、哪一集、哪一句台詞剛把你釘在沙發上。 +

    +

    + 這裡的清單來自資料庫：類型先分綜藝與戲劇， + 進度與「繼續觀看」入口都能改。慢慢養也很好看。 +

    +
    + +
    +

    追劇清單

    +

    先用類型找——綜藝還是戲劇，跟 OTT 首頁那排分類一樣直覺。

    + +
    + 全部 + 綜藝 + 戲劇 +
    + + +

    這個類型目前還沒有作品——換「全部」看看，或到後台新增一筆。

    + +
    + + + + +
    + +
    diff --git a/variety/vedio-list/front/progress.php b/variety/vedio-list/front/progress.php new file mode 100644 index 0000000..886c5d8 --- /dev/null +++ b/variety/vedio-list/front/progress.php @@ -0,0 +1,69 @@ +find($id); + +if (!$row) { + echo '

    找不到這部作品。

    '; + echo '

    回清單

    '; + return; +} + +if ($_SERVER['REQUEST_METHOD'] === 'POST') { + $row['current_season'] = max(1, (int)($_POST['current_season'] ?? 1)); + $row['current_episode'] = max(0, (int)($_POST['current_episode'] ?? 0)); + $row['current_position'] = trim($_POST['current_position'] ?? ''); + $row['progress_note'] = trim($_POST['progress_note'] ?? ''); + $row['status'] = $_POST['status'] ?? $row['status']; + $Drama->save($row); + to("?do=detail&id=" . (int)$row['id']); + exit; +} +?> + +
    +

    更新進度

    +

    記下你停在哪一季、哪一集、哪一秒——以及當時螢幕上正在發生什麼，之後才找得回那個心跳瞬間。

    +
    + +
    +

    + + + + + + + + + + + + + + + + +
    + + 取消 +
    +
    diff --git a/variety/vedio-list/index.php b/variety/vedio-list/index.php new file mode 100644 index 0000000..3b9ffe7 --- /dev/null +++ b/variety/vedio-list/index.php @@ -0,0 +1,54 @@ + + + + + + + + 水晶男孩｜深夜清單 + + + + + + + + + +
    +
    +

    深夜清單

    +
    + DRAMA & VARIETY WATCH LIST +
    +
    +
    + + + + +
    + +
    + + + + + + + + diff --git a/yellow-note/practice-room.html b/yellow-note/practice-room.html new file mode 100644 index 0000000..421db6d --- /dev/null +++ b/yellow-note/practice-room.html @@ -0,0 +1,1140 @@ + + + + + + + 水晶男孩推廣部｜水晶練習室 + + + + + + + +
    +
    +

    水晶練習室

    +
    + CRYSTAL PRACTICE ROOM +
    +
    +
    + + + + + +
    + + +
    + SECHSKIES PRACTICE DEMO +

    水晶練習室

    +

    Crystal Practice Room

    +

    + 水晶練習室是水晶男孩推廣部底下的粉絲向練習工具，結合水晶熱舞社、水晶歌詞社與水晶嘻哈社概念，將歌曲、舞蹈、歌詞、Rap 與應援整理成可以反覆練習的互動頁面。第一版先以舞蹈影片練習與歌詞段落整理為主，未來可擴充唱歌、Rap、應援詞、錄音回放與練習紀錄。 +

    +
    + 水晶熱舞社 + 水晶歌詞社 + 水晶嘻哈社 + 應援練習 + SECHSKIES Practice +
    +
    + + +
    +

    分館功能

    + FOUR PRACTICE HALLS +
    +
    + +

    水晶熱舞社

    +

    以舞蹈影片為核心，支援鏡像、慢速播放、逐段練習與 A-B 循環，適合整理經典舞台、翻跳練習與應援舞蹈。

    +
    +
    + +

    水晶歌詞社

    +

    整理歌曲段落、中文理解、韓文歌詞位置與跟唱提示，未來可加入羅馬拼音、逐句練唱與原唱開關。

    +
    +
    + +

    水晶嘻哈社

    +

    針對 Rap 段落設計節奏、flow、咬字與慢速練習，未來可加入節拍器與錄音比較。

    +
    +
    + +

    水晶應援社

    +

    整理演唱會應援詞、口號、手燈節奏與粉絲活動資訊，讓新加入的 Yellowkies 可以更快跟上。

    +
    +
    +
    + + +
    +

    舞蹈練習播放器

    + DANCE PRACTICE PLAYER +
    +
    +
    + +
    +
    + +

    請放入水晶熱舞社練習影片

    + 支援本機或合法來源影片替換 +
    +
    + +
    +
    + 0:00 +
    +
    +
    +
    + 0:00 +
    + +
    + + + +
    + +
    + 鏡像 + +
    + +
    + 速度 + + + + +
    + +
    + A-B + + + + +
    + +
    + A 點：未設定 + B 點：未設定 +
    +
    +
    +
    + + +
    +

    歌曲練習範例

    + SAMPLE TRACKS +
    +
    +

    Couple

    +
    + Dance + Vocal +
    +

    練習重點：副歌動作、隊形感、甜感表情

    + 可作為第一首示範歌 +
    +
    +

    Com' Back

    +
    + Dance + Rap +
    +

    練習重點：強拍、Rap 段落、舞台氣勢

    + 未來擴充 +
    +
    +

    Road Fighter

    +
    + Dance + Rap + Performance +
    +

    練習重點：節奏、力量、舞台感

    + 未來擴充 +
    +
    +
    + + +
    +

    段落練習

    + SECTION PRACTICE +
    +
    + + + + + + +
    +
    + Intro +

    先熟悉站位與進場節奏。

    +
    +
    +
    + + +
    +

    未來擴充

    + COMING SOON +
      +
    • 韓文歌詞 / 羅馬拼音 / 中文理解
      • +
    • Rap 節拍器
      • +
    • 應援詞練習
      • +
    • 錄音回放
      • +
    • 錄影回放
      • +
    • 練習紀錄
      • +
    • 歌曲資料庫
      • +
    • 舞台版本比較
      • +
    • 30TH 應援企劃串接
      • +
    +
    + + + + +
    + + + + + + + + +