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-08-18 16:33:24 +08:00
parent ce6f946c94
commit 5d30332267
11 changed files with 296 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CLAUDE.md
+11 -3
View File
@@ -43,7 +43,7 @@
| 檔案 | 頁面標題 | 說明 |
|------|----------|------|
| `vedio/bangxiao.html` | 世紀級寶藏 / 爆笑養老院 | 甜蜜負擔計量器；六人卡片選取 + jQuery 計算；CTA → `totoga2/ebook.html` |
| `vedio/bangxiao.html` | 世紀級寶藏 / 爆笑養老院 | 甜蜜負擔計量器；六人卡片選取 + jQuery 計算；CTA → `vedio/variety-shows.html` |
| `vedio/variety-shows.html` | 全員發瘋 | 綜藝節目存檔表；tabs + 搜尋；已對齊 albums.html 扁平結構 |
| `vedio/NJTW/NJTW5.html` | 新西遊記5 | 各自暴走專頁 |
| `vedio/vedio-list.html` | 影視清單 | 追劇進度預覽頁（乙級第三題骨架，PHP 後台在 `vedio/vedio-list/`） |
@@ -67,27 +67,35 @@
5. **commit 前網站不會更新**。本地端強制重整用 `Ctrl+Shift+R`；GitHub Pages 需 `git push` 後等約 1 分鐘。
6. **頂層 `<li>` 固定 5 個，沒有例外**（淪陷瞬間、完整的六顆、現場的震撼、黃色留聲機、Yellow Note）。「水晶練習室」籌備中佔位也收進「Yellow Note」子選單，不再獨立於頂層。新頁面／佔位一律收進其中一項的子選單，不要自己開新的頂層項目。詳見 `developer-rules/rules/portal-nav-rules.md` §8。
---
## 目前工作狀態
<!-- 每次對話結束後更新這個區塊 -->
**最後更新：** 2026-08-13
**最後更新：** 2026-08-18
**進行中：**
- 無
- `calendar2026.html` 的 `<h1>` 標題「水晶萬年曆」還在想更好的名字（要求：不用「水晶」前綴、不重複站上已用意象詞、要有典故／查證過的出處），已否決多輪提案，暫緩
**待確認：**
- developer-rules 健檢尚未執行
**已完成：**
- `yellow-note/minister.html`（視覺進化論）Journey 時間軸重構：3 個大 `<article data-era="2016/2017/NOW">` 拆成每個月獨立一個 `story-node`（`data-era="2016.07"` 格式），套用 `.merged-storyline` 既有奇偶交錯排版，不再手寫「07 月｜」字樣。真實照片只有 `2018.07`「415 天健身挑戰」（`fitness-calendar.png`，7/13 李宰鎮生日發起的每日健身計畫，年份待查證）；其餘節點 `data-photo-pending="true"`、不渲染 `<figure>`，等後台控制方式定案後再補真照片
- `yellow-note/minister.html` 與 `calendar2026.html` 內文提到「水晶廢人字幕組」處都連到頻道（`youtube.com/channel/UCJnhlm_t9C7BmcILcjHDk_w`），minister.html 用 `.story-external-inline` 外部連結樣式
- `yellow-note/practice-room.html`（水晶練習室）練舞清單接上第一支影片（SECHSKIES 回歸編舞練習），新增 `yellow-note/dance-practices-data.php` 靜態資料端點頂著（完整 MySQL 後台版在獨立專案 `sechskies_fans`，未部署）
- portal-nav 全開檢查用的 `TEMP_OPEN_ALL_FOR_REVIEW` 已還原為 `false`；`minister.html` 正式從 `COMING_SOON_PAGES` 移除（今天做完，永久開放），「水晶練習室」改為永久真連結（今天做完），「隊長的氣場」維持籌備中（今天沒動它，回到原狀）
- 建立 CLAUDE.md 跨裝置上下文檔案
- 新增 `vedio/bangxiao.html`（世紀級寶藏 / 爆笑養老院，甜蜜負擔計量器）
- `vedio/variety-shows.html` 重構：移除多層包裝，對齊 albums.html 扁平結構
- portal-nav 新增世紀級寶藏，正確放入淪陷瞬間子選單
- `extra/site-guide.html` 同步更新：全員發瘋 → 世紀級寶藏
- `variety/` 資料夾整個改名為 `vedio/`，同步修正 portal-nav.js、site-guide.html、style.css 註解、docs/site-structure.md、portal-nav-rules.md 等連結
- `calendar2026.html` 新增「粉絲應援 / 字幕作品」(`fanwork`) 分類，收錄「水晶廢人字幕組」頻道全部 8 支影片＋ MTV 我愛偶像報導影片（4/4，重啟活動20週年），依上架日期分布；`assets/css/calendar.css` 新增對應淺金配色（比生日金淺、hover 提亮）
- 修正 portal-nav.js 兩次頂層項目迴歸：「世紀級寶藏」移回「淪陷瞬間」子選單、「水晶練習室」移入「Yellow Note」子選單；`portal-nav-rules.md` 新增 §8 頂層 5 主項上限規則（無例外），`extra/site-guide.html` 心智圖同步
---
assets/css/calendar.css
+49
View File
@@ -8,6 +8,9 @@
--cal-border-soft: rgba(255, 204, 0, 0.18);
--cal-border-strong: rgba(255, 204, 0, 0.28);
--cal-panel-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
/* 粉絲應援／字幕作品：比生日金淺一階，hover 時提亮 */
--cal-fanwork-color: #ffe066;
--cal-fanwork-color-hover: #fff4b8;
}
.calendar-page-container {
@@ -245,6 +248,15 @@
background: var(--color-brand);
}
.event-dot.fanwork {
background: var(--cal-fanwork-color);
transition: background-color 0.18s ease;
}
.day-cell:hover .event-dot.fanwork {
background: var(--cal-fanwork-color-hover);
}
/* 生日頭像縮圖小標籤 */
.day-avatar-badge {
width: 38px;
@@ -331,6 +343,43 @@
border-left-color: var(--color-brand);
}
.event-card.type-fanwork {
border-left-color: var(--cal-fanwork-color);
}
.event-card.type-fanwork:hover {
border-left-color: var(--cal-fanwork-color-hover);
box-shadow: 0 0 14px rgba(255, 224, 102, 0.4);
}
.event-desc a,
.modal-desc a {
color: var(--color-brand-dark);
text-decoration: underline;
text-decoration-color: rgba(255, 204, 0, 0.5);
}
.event-desc a:hover,
.modal-desc a:hover {
color: #cc0000;
}
.event-video-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 0.86rem;
font-weight: 700;
color: var(--color-brand-dark);
text-decoration: none;
transition: color 0.18s ease;
}
.event-video-link:hover {
color: #cc0000;
}
.event-card-header {
display: flex;
align-items: center;
assets/css/style.css
-25
View File
@@ -4158,17 +4158,6 @@ body.minister-page .minister-journey .sub-title {
color: #b0b0b0;
}
body.minister-page .merged-storyline .story-node p.minister-month {
font-weight: 800;
color: #8a6910;
margin: 1rem 0 0.4rem;
letter-spacing: 0.02em;
}
body.minister-page .merged-storyline .story-node h3+p.minister-month {
margin-top: 0.35rem;
}
body.minister-page .minister-photo {
margin: 0.6rem 0 0;
}
@@ -4184,19 +4173,5 @@ body.minister-page .minister-photo img {
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
}
body.minister-page .minister-photo--dual {
display: grid;
gap: 14px;
grid-template-columns: 1fr 1fr;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
body.minister-page .minister-photo--dual img {
max-width: none;
width: 100%;
}
body.minister-page .minister-back {
text-
assets/images/minister/fitness-calendar.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 405 KiB

assets/js/portal-nav.js
+13 -5
View File
@@ -59,11 +59,17 @@
link.setAttribute("title", p);
}
/**
* 站主曾暫時要求「全部開放檢查」，現已檢查完畢還原為 false。
* true 時會繞過所有籌備中判斷（COMING_SOON_PAGES／INDEX_NAV_OPEN_HASHES／
* 頂欄「隊長的氣場」stub）；不要刪掉下面原本的名單。
*/
const TEMP_OPEN_ALL_FOR_REVIEW = false;
const COMING_SOON_PAGES = new Set([
"albums.html",
"map.html",
"member.html",
"minister.html",
"minister_ge.html",
"readable.html",
"timeline.html",
@@ -120,6 +126,7 @@
}
function linkShouldBeComingSoon(href, pageKey, pageKeysSoon) {
if (TEMP_OPEN_ALL_FOR_REVIEW) return false;
if (pageKeysSoon.has(pageKey)) {
return true;
}
@@ -234,7 +241,8 @@
}
/** 全站導覽 HTML — `rp` 為站根相對前綴；僅修改此模板即可同步所有頁面
* 七主項：淪陷瞬間、完整的六顆、現場的震撼、黃色留聲機、世紀級寶藏、Yellow Note、水晶練習室（外站 sechskies_fans，籌備中）。 */
* 五主項固定：淪陷瞬間、完整的六顆、現場的震撼、黃色留聲機、Yellow Note，不得再開第 6 個頂層項目。
* 世紀級寶藏收在「淪陷瞬間」子選單內；水晶練習室收在「Yellow Note」子選單內（見 site-guide.html 心智圖）。 */
function buildPortalNavInnerHTML(rp) {
return `
<a class="logo" target="_blank" rel="noopener noreferrer" href="${rp}index.html"><img src="${rp}assets/images/logov.svg" alt="SECHSKIES Logo"></a>
@@ -257,9 +265,9 @@
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/video.html"><span class="portal-nav__label">影片</span></a></li>
</ul>
</li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}vedio/bangxiao.html"><span class="portal-nav__label">世紀級寶藏</span></a></li>
</ul>
</li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}vedio/bangxiao.html"><span class="portal-nav__label">世紀級寶藏</span></a></li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}member/member.html"><span class="portal-nav__label">完整的六顆</span></a></li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.html"><span class="portal-nav__label">現場的震撼</span></a>
<ul class="portal-submenu">
@@ -273,13 +281,13 @@
<li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html#classic"><span class="portal-nav__label">輝煌全盛期</span></a></li>
</ul>
</li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">Yellow Note</span></a>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/minister.html"><span class="portal-nav__label">Yellow Note</span></a>
<ul class="portal-submenu">
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/minister.html"><span class="portal-nav__label">視覺進化論</span></a></li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">聖地巡禮</span></a></li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/practice-room.html"><span class="portal-nav__label">水晶練習室</span></a></li>
</ul>
</li>
<li><a href="#" data-coming-soon="true" aria-disabled="true" aria-label="水晶練習室，尚無開放"><span class="portal-nav__label">水晶練習室</span></a></li>
</ul>
`.trim();
}
calendar2026.html
+49 -10
View File
@@ -16,7 +16,7 @@
<div class="header-inner site-header-inner">
<h1 class="main-title">水晶萬年曆</h1>
<div class="subtitle-wrap">
<span class="sub-title">2026 SECHSKIES SPECIAL CALENDAR</span>
<span class="sub-title">SECHSKIES SPECIAL CALENDAR</span>
</div>
</div>
</header>
@@ -62,6 +62,7 @@
<button type="button" class="filter-chip" data-category="birthday">成員生日</button>
<button type="button" class="filter-chip" data-category="debut">出道 / 重逢</button>
<button type="button" class="filter-chip" data-category="concert">演唱會 / 見面會</button>
<button type="button" class="filter-chip" data-category="fanwork">粉絲應援 / 字幕作品</button>
</div>
</section>
@@ -73,12 +74,12 @@
<div class="calendar-weekdays">
<div class="calendar-weekday weekend">日</div>
<div class="calendar-weekday">一</div>
<div class="calendar-weekday">二</div>
<div class="calendar-weekday">三</div>
<div class="calendar-weekday">四</div>
<div class="calendar-weekday">五</div>
<div class="calendar-weekday weekend">六</div>
<div class="calendar-weekday">月</div>
<div class="calendar-weekday">火</div>
<div class="calendar-weekday">水</div>
<div class="calendar-weekday">木</div>
<div class="calendar-weekday">金</div>
<div class="calendar-weekday weekend">土</div>
</div>
<div class="calendar-days-grid" id="calendar-days-grid">
@@ -126,6 +127,10 @@
// 水晶男孩專屬紀念日數據集 (含成員介紹頁連結錨點)
const sechskiesEvents = [
// 1月
{
month: 1, day: 8, type: 'fanwork', title: '世界真美味：西澳洲篇 🎬',
desc: '<a href="https://www.youtube.com/channel/UCJnhlm_t9C7BmcILcjHDk_w" target="_blank" rel="noopener noreferrer">水晶廢人字幕組</a>翻譯之旅遊節目 E01，金在德與H.O.T. Tony共同主持', videoUrl: 'https://www.youtube.com/watch?v=HJ9MYlt8qPQ'
},
{
month: 1, day: 21, endDay: 22, type: 'concert', title: 'Yellow Note Final 首爾演唱會 🎤',
photo: 'assets/images/concert/2017.jpg', desc: '2017 年首爾終場演唱會紀念'
@@ -142,6 +147,10 @@
},
{ month: 3, day: 23, type: 'debut', title: 'J-Walk 組合出道日 🌟', desc: '2002.03.23 金在德與張水院發行首張專輯《Suddenly》' },
// 4月
{
month: 4, day: 4, type: 'fanwork', title: 'MTV 報導：水晶男孩重啟活動 🎬',
desc: 'MTV 我愛偶像 Idols of Asia 報導，水晶男孩出道20年重啟團體活動、創下多項紀錄', videoUrl: 'https://www.youtube.com/watch?v=Qict851iwmw'
},
{
month: 4, day: 14, type: 'concert', title: '六六歌2 上岩黃海重逢日 🌟',
photo: 'assets/images/totoga2/toto1.png', desc: '2016.04.14 無限挑戰六六歌2 上岩游擊演唱會16年後重逢'
@@ -150,6 +159,10 @@
// 5月
{ month: 5, day: 18, type: 'debut', title: '水晶男孩告別宣佈日', desc: '2000.05.18 告別紀念' },
{ month: 5, day: 24, type: 'debut', title: '姜成勳 Solo 出道日 🌟', desc: '2001.05.24 首張專輯《In Connection》' },
{
month: 5, day: 27, type: 'fanwork', title: '日本見面會宣傳片 🎬',
desc: '<a href="https://www.youtube.com/channel/UCJnhlm_t9C7BmcILcjHDk_w" target="_blank" rel="noopener noreferrer">水晶廢人字幕組</a>製作，水晶男孩日本見面會活動宣傳影片', videoUrl: 'https://www.youtube.com/watch?v=2YAAbTG9Pi8'
},
// 6月
{
month: 6, day: 8, type: 'birthday', title: '殷志源 生日 🎂', memberName: '殷志源', enName: 'EUN JI WON', role: 'Leader · Rap · Dance',
@@ -168,11 +181,35 @@
month: 7, day: 16, type: 'birthday', title: '張水院 生日 🎂', memberName: '張水院', enName: 'JANG SU WON', role: 'Vocal',
photo: 'assets/images/member/seven7lai_1___BuRBxcPAIsP___.jpg', desc: '1980.07.16 張水院生日', memberUrl: 'member/member.html#poster-jsw'
},
{
month: 7, day: 20, type: 'fanwork', title: 'BE WELL 日文版中字 🎬',
desc: '<a href="https://www.youtube.com/channel/UCJnhlm_t9C7BmcILcjHDk_w" target="_blank" rel="noopener noreferrer">水晶廢人字幕組</a>製作，慶賀水晶男孩日本正式出道，繁中字幕版', videoUrl: 'https://www.youtube.com/watch?v=dTlTQ_qt3S8'
},
{
month: 7, day: 20, type: 'fanwork', title: 'THREE WORD 日文版中字 🎬',
desc: '<a href="https://www.youtube.com/channel/UCJnhlm_t9C7BmcILcjHDk_w" target="_blank" rel="noopener noreferrer">水晶廢人字幕組</a>製作，慶賀水晶男孩日本正式出道，繁中字幕版', videoUrl: 'https://www.youtube.com/watch?v=vDl0xee2Xrw'
},
{
month: 7, day: 24, type: 'fanwork', title: 'SAD SONG 日文版中字 🎬',
desc: '<a href="https://www.youtube.com/channel/UCJnhlm_t9C7BmcILcjHDk_w" target="_blank" rel="noopener noreferrer">水晶廢人字幕組</a>製作，慶賀水晶男孩日本正式出道，繁中字幕版', videoUrl: 'https://www.youtube.com/watch?v=-J8AUewz1OI'
},
// 8月
{
month: 8, day: 6, type: 'fanwork', title: '在德生日祝福影片 🎬',
desc: 'PTT水晶男孩板召集台灣香港粉絲共同製作，賀 8/7 金在德生日，已登上 J-walk 官咖首頁', videoUrl: 'https://www.youtube.com/watch?v=pBeJC4ol-ts'
},
{
month: 8, day: 7, type: 'birthday', title: '金在德 生日 🎂', memberName: '金在德', enName: 'KIM JAE DUC', role: 'Rap · Dance',
photo: 'assets/images/member/4c0e013b341e85622979475bc230719b.jpg', desc: '1979.08.07 天使笑顏與舞蹈機器金在德生日', memberUrl: 'member/member.html#poster-kjd'
},
{
month: 8, day: 26, type: 'fanwork', title: '世界真美味：新喀里多尼亞篇 🎬',
desc: '<a href="https://www.youtube.com/channel/UCJnhlm_t9C7BmcILcjHDk_w" target="_blank" rel="noopener noreferrer">水晶廢人字幕組</a>翻譯之旅遊節目 E05，金在德與H.O.T. Tony共同主持', videoUrl: 'https://www.youtube.com/watch?v=Mhxxh42zZu4'
},
{
month: 8, day: 30, type: 'fanwork', title: '台灣小黃演唱會應援影片 🎬',
desc: 'PTT水晶男孩板召集台灣小黃共同製作，為 16 年後重返舞台演唱會應援打氣', videoUrl: 'https://www.youtube.com/watch?v=pvsa7PjsfwA'
},
// 9月
{
month: 9, day: 10, endDay: 11, type: 'concert', title: 'Yellow Note 演唱會 (二安日) 🎤',
@@ -217,7 +254,7 @@
const modalBody = document.getElementById('modal-body-content');
function cleanEventTitle(title) {
return String(title || '').replace(/[🎂🌟🎤]/g, '').trim();
return String(title || '').replace(/[🎂🌟🎤🎬]/g, '').trim();
}
// 初始化
@@ -402,7 +439,7 @@
`;
eventsList.appendChild(concertCard);
} else {
// 一般事件卡片
// 一般事件卡片（含粉絲應援／字幕作品）
const dateStr = ev.endDay ? `${ev.month}/${ev.day} ~ ${ev.month}/${ev.endDay}` : `${ev.month}/${ev.day}`;
const card = document.createElement('div');
card.className = `event-card type-${ev.type}`;
@@ -412,6 +449,7 @@
</div>
<div class="event-title">${cleanEventTitle(ev.title)}</div>
<div class="event-desc">${ev.desc}</div>
${ev.videoUrl ? `<a href="${ev.videoUrl}" class="event-video-link" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-youtube" aria-hidden="true"></i> 觀看影片</a>` : ''}
`;
eventsList.appendChild(card);
}
@@ -444,6 +482,7 @@
<div class="modal-event-box">
<h4 class="modal-event-title">${cleanEventTitle(ev.title)}</h4>
<p class="modal-desc">${ev.desc}</p>
${ev.videoUrl ? `<a href="${ev.videoUrl}" class="event-video-link" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-youtube" aria-hidden="true"></i> 觀看影片</a>` : ''}
</div>
`;
}
@@ -457,4 +496,4 @@
</script>
</body>
</html>
</html>
developer-rules/rules/portal-nav-rules.md
+8
View File
@@ -127,6 +127,14 @@ alwaysApply: true
錨點拿掉後，書籤網址列仍可能顯示 `#…`，不代表 DOM 還在。header 大標 ≠ 已刪的 `#id` 區塊。「刪除」範圍不清 → **先問**。
## 8. 頂欄主項上限（5 項，無例外）
**頂欄 `<ul id="portal-primary-menu">` 下的頂層 `<li>`，固定只能有 5 個：淪陷瞬間、完整的六顆、現場的震撼、黃色留聲機、Yellow Note。**
- **除非站主明講要新增第 6 個正式主項**，否則任何新頁面／新功能一律收進上述 5 項之一的子選單（`portal-submenu` / `portal-nav__subgroup`），**禁止**在頂層再開新的 `<li>`。
- 對照表見 `extra/site-guide.html` 的 `data-site-guide-depth="1"` 節點；動 `buildPortalNavInnerHTML` 前務必先數一次頂層 `<li>` 數量，超過就是做錯。
- 血淚教訓：「世紀級寶藏」（`vedio/bangxiao.html`）本該收在「淪陷瞬間」子選單裡，曾被誤植成獨立頂層項目，導致主項變 7 個；「水晶練習室」（外站 `sechskies_fans`，`data-coming-soon`）也曾一度單獨佔用頂層，後改收進「Yellow Note」子選單。往後新增類似頁面請比照辦理，先找歸屬的主項子選單，不要預設「獨立一項」。
## 名詞
- **頂欄**：`portal-nav.js` 注入的 `<nav class="portal-nav" data-portal-nav>`。
extra/site-guide.html
+4 -4
View File
@@ -141,11 +141,11 @@
<li data-site-guide-depth="3"><span class="sg-node sg-node--extra">錨點：<code>#taipei</code>·<code>#global</code></span></li>
</ul>
</li>
<li data-site-guide-depth="2">
<span class="sg-node"><a href="../yellow-note/practice-room.html">水晶練習室</a></span>
</li>
</ul>
</li>
<li data-site-guide-depth="1">
<span class="sg-node sg-node--extra sg-node--nolink" title="外站 sechskies_fans，籌備中（href=# data-coming-soon），尚未接上真實網址">水晶練習室（籌備中，外部連結待 sechskies_fans 部署完成後補上）</span>
</li>
<li data-site-guide-depth="1">
<span class="sg-node sg-node--extra sg-node--nolink">站內其他頁面（草稿／作業／備查，不在頂欄）</span>
<ul>
@@ -194,7 +194,7 @@
<tbody>
<tr>
<th scope="row"><code>COMING_SOON_PAGES</code></th>
<td><code>albums.html</code>、<code>map.html</code>、<code>member.html</code>、<code>minister.html</code>、<code>minister_ge.html</code>、<code>readable.html</code>、<code>timeline.html</code>、<code>variety.html</code> → 一般頁改 <code>#</code></td>
<td><code>albums.html</code>、<code>map.html</code>、<code>member.html</code>、<code>minister_ge.html</code>、<code>readable.html</code>、<code>timeline.html</code>、<code>variety.html</code> → 一般頁改 <code>#</code></td>
</tr>
<tr>
<th scope="row"><code>INDEX_NAV_OPEN_HASHES</code></th>
vedio/bangxiao.html
+1 -1
View File
@@ -455,7 +455,7 @@
resultEl.html(
'<p class="result-headline">你總共有 <strong>' + totalStr + '</strong> 個節目要補！</p>' +
groupNote +
'<a class="result-cta" href="../totoga2/ebook.html" target="_blank" rel="noopener noreferrer">' +
'<a class="result-cta" href="../vedio/variety-shows.html" target="_blank" rel="noopener noreferrer">' +
'進坑挖寶囉 <span class="cta-arrow">→</span>' +
'</a>'
);
yellow-note/minister.html
+34 -36
View File
@@ -55,58 +55,56 @@
</div>
<div class="merged-storyline">
<article id="journey-2016" class="story-node" data-era="2016">
<h3>從「欣賞」到「實踐」的元年</h3>
<p class="minister-month">07 月｜手作初試</p>
<article class="story-node" data-era="2016.07" data-photo-pending="true">
<h3>手作初試</h3>
<p>開始學習勾針，為金在德製作第一個鴨鴨置物籃，這是從旁觀者轉為實踐者的第一步。</p>
<figure class="minister-photo">
<img src="../assets/images/minister/image_3c1739.jpg" alt="手作鴨鴨置物籃" width="1040" height="780" loading="lazy">
</figure>
</article>
<p class="minister-month">08 月｜螢幕後的參與</p>
<p>以「水晶廢人字幕組」粉絲身分，用手繪應援板與勾針作品參與應援影片籌備。</p>
<figure class="minister-photo">
<img src="../assets/images/minister/image_3c13d7.jpg" alt="手繪應援板與勾針作品" width="1040" height="780" loading="lazy">
</figure>
<article class="story-node" data-era="2016.08" data-photo-pending="true">
<h3>螢幕後的參與</h3>
<p>以「<a href="https://www.youtube.com/channel/UCJnhlm_t9C7BmcILcjHDk_w" class="story-external-inline" target="_blank" rel="noopener noreferrer"><span class="story-external-inline__label">水晶廢人字幕組</span><i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>」粉絲身分，用手繪應援板與勾針作品參與應援影片籌備。</p>
</article>
<p class="minister-month">09 月｜孤注一擲的現場</p>
<article class="story-node" data-era="2016.09" data-photo-pending="true">
<h3>孤注一擲的現場</h3>
<p>在經濟窘迫、甚至需要借錢籌措旅費的情況下，飛往首爾參加首場演唱會。在那裡，我握著導師設計的台灣小黃手幅，第一次感受到設計與才華帶來的震撼。</p>
<figure class="minister-photo">
<img src="../assets/images/minister/image_3bb254.jpg" alt="台灣小黃手幅" width="1040" height="780" loading="lazy">
</figure>
</article>
<p class="minister-month">12 月｜溫暖的饋贈</p>
<article class="story-node" data-era="2016.12" data-photo-pending="true">
<h3>溫暖的饋贈</h3>
<p>在「#水晶文具社」聚會中，收到了同好精緻的手繪聖誕卡片。看著別人的創作，我更加確信自己也想成為能用作品傳遞能量的人。</p>
<figure class="minister-photo">
<img src="../assets/images/minister/image_3bab17.jpg" alt="手繪聖誕卡片" width="1040" height="780" loading="lazy">
</figure>
</article>
<article id="journey-2017" class="story-node" data-era="2017">
<h3>從「身體」到「文字」的深化</h3>
<p class="minister-month">01 月｜職人精神的啟發</p>
<article class="story-node" data-era="2017.01" data-photo-pending="true">
<h3>職人精神的啟發</h3>
<p>參與資管組 D 大的新年紅包活動。其書法與刻印結合的質感，深深影響了我對美感的標準。</p>
<figure class="minister-photo">
<img src="../assets/images/minister/image_3ba74f.jpg" alt="新年紅包活動" width="1040" height="780" loading="lazy">
</figure>
</article>
<p class="minister-month">02 月｜身體記憶的熱血</p>
<article class="story-node" data-era="2017.02" data-photo-pending="true">
<h3>身體記憶的熱血</h3>
<p>擔任應援組熱舞企劃小組長，在板橋與中山地下街教舞兩個月，為此減重 10 公斤，用身體記憶跨越世紀的節奏。</p>
</article>
<p class="minister-month">04 月｜筆尖的沈澱</p>
<article class="story-node" data-era="2017.04" data-photo-pending="true">
<h3>筆尖的沈澱</h3>
<p>跟著文具社走遍全台咖啡廳，在鋼筆墨水與玻璃杯的陪伴下，用手寫記錄初心。</p>
<figure class="minister-photo minister-photo--dual">
<img src="../assets/images/minister/image_3baed1.jpg" alt="鋼筆墨水與玻璃杯" width="1040" height="780" loading="lazy">
<img src="../assets/images/minister/image_3c2299.jpg" alt="手寫記錄初心" width="1040" height="780" loading="lazy">
</article>
<article class="story-node" data-era="2018">
<h3>設計靈魂覺醒</h3>
<p>正式踏入設計領域。因為想為水晶男孩創作的執念，所有的練習都以他們為主題，這種動力讓我的設計實力產生質變。</p>
</article>
<article class="story-node" data-era="2018.07">
<h3>415 天健身挑戰</h3>
<p>7/13 李宰鎮生日這天，自發性展開為期 415 天的每日健身計畫。也因為知道李宰鎮、張水院都有重訓健身的習慣，這條「水晶健身重訓」的自我要求就更沒有鬆懈的理由。</p>
<figure class="minister-photo">
<img src="../assets/images/minister/fitness-calendar.png" alt="健身重訓行事曆" width="1040" height="780" loading="lazy">
</figure>
</article>
<article id="journey-now" class="story-node" data-era="NOW">
<h3>以熱愛為名的設計進化</h3>
<p class="minister-month">2018 年｜設計靈魂覺醒</p>
<p>正式踏入設計領域。因為想為水晶男孩創作的執念，所有的練習都以他們為主題，這種動力讓我的設計實力產生質變。</p>
<p class="minister-month">現在｜全端開發與推廣</p>
<article class="story-node" data-era="NOW">
<h3>全端開發與推廣</h3>
<p>不再只是感嘆導師與他人的才華。我正運用包裝設計與全端開發的積累，親手搭建這個數位平台，證明追星是讓我「變厲害」的軍功章。</p>
</article>
</div>
yellow-note/practice-room.html
+127 -122
View File
@@ -499,41 +499,41 @@
color: var(--practice-text-dark);
}
body.practice-room-page .practice-room__song-status--soon {
background: rgba(255, 255, 255, 0.5);
color: var(--practice-text-muted);
}
body.practice-room-page .practice-room__song-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 42px;
margin-bottom: 0.75rem;
padding: 0.55rem 0.9rem;
border: 1px solid var(--practice-accent);
border-radius: 999px;
color: var(--practice-text-dark);
text-decoration: none;
font-size: 0.78rem;
font-weight: 800;
}
body.practice-room-page .practice-room__song-link:hover {
background: var(--practice-accent-soft);
}
body.practice-room-page .practice-room__song-empty {
grid-column: 1 / -1;
margin: 0;
padding: 1.5rem;
border: 1px dashed var(--practice-border);
border-radius: 14px;
color: var(--practice-text-muted);
background: var(--practice-surface);
text-align: center;
}
body.practice-room-page .practice-room__song-status--soon {
background: rgba(255, 255, 255, 0.5);
color: var(--practice-text-muted);
}
body.practice-room-page .practice-room__song-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 42px;
margin-bottom: 0.75rem;
padding: 0.55rem 0.9rem;
border: 1px solid var(--practice-accent);
border-radius: 999px;
color: var(--practice-text-dark);
text-decoration: none;
font-size: 0.78rem;
font-weight: 800;
}
body.practice-room-page .practice-room__song-link:hover {
background: var(--practice-accent-soft);
}
body.practice-room-page .practice-room__song-empty {
grid-column: 1 / -1;
margin: 0;
padding: 1.5rem;
border: 1px dashed var(--practice-border);
border-radius: 14px;
color: var(--practice-text-muted);
background: var(--practice-surface);
text-align: center;
}
/* ── 段落練習 ── */
body.practice-room-page .practice-room__section-panel {
@@ -670,11 +670,11 @@
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
body.practice-room-page .practice-room__song-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
body.practice-room-page .practice-room__song-grid {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
@@ -700,7 +700,7 @@
<h2 class="practice-room__hero-title" id="practice-hero-title">水晶練習室</h2>
<p class="practice-room__hero-en">Crystal Practice Room</p>
<p class="practice-room__hero-lead">
水晶練習室延續我們當年以<span class="mark_b mark_y">水晶熱舞社、水晶歌詞社與水晶嘻哈社</span>等名稱交流的玩心，將歌曲、舞蹈、歌詞、Rap 與應援整理成可以反覆練習的粉絲向互動工具。第一版先以舞蹈影片練習與歌詞段落整理為主，未來可擴充唱歌、Rap、應援詞、錄音回放與練習紀錄。
水晶練習室延續我們當年以<span class="mark_b mark_y">水晶熱舞社、水晶歌詞社與水晶嘻哈社</span>等名稱交流的玩心，將歌曲、舞蹈、歌詞、Rap 與應援整理成可以反覆練習的粉絲向互動工具。第一版先以舞蹈影片練習與歌詞段落整理為主，未來可擴充唱歌、Rap、應援詞、錄音回放與練習紀錄。
</p>
<div class="practice-room__tag-row">
<span class="practice-room__tag"><i class="fa-solid fa-fire" aria-hidden="true"></i> 水晶熱舞社</span>
@@ -815,14 +815,14 @@
</div>
</section>
<!-- ④ 練舞清單 -->
<section class="practice-room__block" aria-labelledby="songs-title">
<h2 class="practice-room__block-title" id="songs-title">練舞清單</h2>
<span class="practice-room__block-sub">DANCE PRACTICE LIST</span>
<div class="practice-room__song-grid" data-dance-practice-list aria-live="polite">
<p class="practice-room__song-empty">正在載入練舞清單…</p>
</div>
</section>
<!-- ④ 練舞清單 -->
<section class="practice-room__block" aria-labelledby="songs-title">
<h2 class="practice-room__block-title" id="songs-title">練舞清單</h2>
<span class="practice-room__block-sub">DANCE PRACTICE LIST</span>
<div class="practice-room__song-grid" data-dance-practice-list aria-live="polite">
<p class="practice-room__song-empty">正在載入練舞清單…</p>
</div>
</section>
<!-- ⑤ 歌詞段落示意 -->
<section class="practice-room__block" aria-labelledby="sections-title">
@@ -1128,79 +1128,84 @@
}
});
updatePlaceholder();
updateProgress();
})();
(function () {
var list = document.querySelector('[data-dance-practice-list]');
if (!list) return;
function element(tagName, className, text) {
var node = document.createElement(tagName);
if (className) node.className = className;
if (typeof text === 'string') node.textContent = text;
return node;
}
function renderEmpty(message) {
list.replaceChildren(element('p', 'practice-room__song-empty', message));
}
function renderItems(items) {
if (!items.length) {
renderEmpty('練舞清單目前整理中。');
return;
}
var fragment = document.createDocumentFragment();
items.forEach(function (item) {
var cardClass = 'practice-room__song-card' + (item.featured ? ' practice-room__song-card--featured' : '');
var card = element('article', cardClass);
card.appendChild(element('h3', 'practice-room__song-title', item.title));
var meta = element('div', 'practice-room__song-meta');
(item.tags || []).forEach(function (tag) {
meta.appendChild(element('span', 'practice-room__song-tag', tag));
});
meta.appendChild(element('span', 'practice-room__song-tag', '難度：' + item.difficulty));
meta.appendChild(element('span', 'practice-room__song-tag', item.progress));
card.appendChild(meta);
var focus = element('p', 'practice-room__song-focus');
focus.appendChild(element('strong', '', '練習重點：'));
focus.appendChild(document.createTextNode(item.practiceFocus));
card.appendChild(focus);
if (item.videoUrl) {
var link = element('a', 'practice-room__song-link', '打開參考影片');
link.href = item.videoUrl;
link.target = '_blank';
link.rel = 'noopener noreferrer';
card.appendChild(link);
}
var statusClass = 'practice-room__song-status' + (item.comingSoon ? ' practice-room__song-status--soon' : '');
card.appendChild(element('span', statusClass, item.note || item.progress));
fragment.appendChild(card);
});
list.replaceChildren(fragment);
}
fetch('dance-practices-data.php', { headers: { Accept: 'application/json' } })
.then(function (response) {
if (!response.ok) throw new Error('request failed');
return response.json();
})
.then(function (data) {
if (!data.ok || !Array.isArray(data.items)) throw new Error('invalid data');
renderItems(data.items);
})
.catch(function () {
renderEmpty('練舞清單暫時無法載入，請稍後再試。');
});
})();
</script>
updatePlaceholder();
updateProgress();
})();
(function () {
var list = document.querySelector('[data-dance-practice-list]');
if (!list) return;
function element(tagName, className, text) {
var node = document.createElement(tagName);
if (className) node.className = className;
if (typeof text === 'string') node.textContent = text;
return node;
}
function renderEmpty(message) {
list.replaceChildren(element('p', 'practice-room__song-empty', message));
}
function renderItems(items) {
if (!items.length) {
renderEmpty('練舞清單目前整理中。');
return;
}
var fragment = document.createDocumentFragment();
items.forEach(function (item) {
var cardClass = 'practice-room__song-card' + (item.featured ? ' practice-room__song-card--featured' : '');
var card = element('article', cardClass);
card.appendChild(element('h3', 'practice-room__song-title', item.title));
var meta = element('div', 'practice-room__song-meta');
(item.tags || []).forEach(function (tag) {
meta.appendChild(element('span', 'practice-room__song-tag', tag));
});
meta.appendChild(element('span', 'practice-room__song-tag', '難度：' + item.difficulty));
meta.appendChild(element('span', 'practice-room__song-tag', item.progress));
card.appendChild(meta);
var focus = element('p', 'practice-room__song-focus');
focus.appendChild(element('strong', '', '練習重點：'));
focus.appendChild(document.createTextNode(item.practiceFocus));
card.appendChild(focus);
if (item.videoUrl) {
var link = element('a', 'practice-room__song-link', '打開參考影片');
link.href = item.videoUrl;
link.target = '_blank';
link.rel = 'noopener noreferrer';
card.appendChild(link);
}
var statusClass = 'practice-room__song-status' + (item.comingSoon ? ' practice-room__song-status--soon' : '');
card.appendChild(element('span', statusClass, item.note || item.progress));
fragment.appendChild(card);
});
list.replaceChildren(fragment);
}
/* 靜態資料，不依賴 PHP：本站部署在 GitHub Pages（不支援 PHP 執行），
本機 Live Server 同樣不會執行 .php，所以清單資料直接寫在這裡。
完整版（含後台管理、MySQL）在獨立專案 sechskies_fans。 */
var danceItems = [
{
title: 'SECHSKIES 回歸編舞練習影片',
tags: ['回歸曲', '編舞練習'],
practiceFocus: '跟著示範影片抓基本站位與轉場，作為之後細部拆解動作的參考版本。',
videoUrl: 'https://youtu.be/Idvu0XwUrgk?si=v7bD50zRkx90gA42',
difficulty: '中等',
progress: '整理中',
featured: true,
comingSoon: false
}
];
renderItems(danceItems);
})();
</script>
</body>
</html>