552 lines
22 KiB
HTML
552 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-TW">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>水晶男孩｜追劇清單</title>
|
||
<link rel="stylesheet" href="../assets/css/style.css">
|
||
<link rel="stylesheet" href="../assets/css/index.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||
<link rel="stylesheet" href="../assets/css/tablet.css">
|
||
<style>
|
||
/* ── 追劇清單頁面專用樣式 ── */
|
||
|
||
.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 {
|
||
appearance: none;
|
||
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;
|
||
cursor: pointer;
|
||
transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.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;
|
||
cursor: pointer;
|
||
transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
|
||
box-sizing: border-box;
|
||
min-height: 100%;
|
||
}
|
||
|
||
.vedio-list-page .drama-card:hover,
|
||
.vedio-list-page .drama-card.is-active {
|
||
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,
|
||
.vedio-list-page .drama-card__actions button {
|
||
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;
|
||
cursor: pointer;
|
||
border: 2px solid rgba(255, 204, 0, 0.35);
|
||
background: #fff;
|
||
color: var(--color-brand-dark);
|
||
transition: background 0.18s ease, border-color 0.18s ease;
|
||
}
|
||
|
||
.vedio-list-page .drama-card__actions a:hover,
|
||
.vedio-list-page .drama-card__actions button: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-panel {
|
||
display: none;
|
||
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-panel.is-open {
|
||
display: block;
|
||
}
|
||
|
||
.vedio-list-page .detail-panel__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;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.vedio-list-page .detail-panel__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-panel 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-panel__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-panel__progress-box p {
|
||
margin: 0 0 0.35rem;
|
||
}
|
||
|
||
.vedio-list-page .detail-panel__progress-box p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.vedio-list-page .detail-panel__actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
justify-content: center;
|
||
margin-top: 1.1rem;
|
||
}
|
||
|
||
.vedio-list-page .detail-panel__actions a,
|
||
.vedio-list-page .detail-panel__actions 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-panel__actions a.is-primary {
|
||
background: var(--color-brand);
|
||
border-color: var(--color-brand);
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.vedio-list-page .empty-hint {
|
||
display: none;
|
||
text-align: center;
|
||
color: var(--color-text-muted);
|
||
padding: 1.5rem 1rem;
|
||
margin: 0 0 1.5rem;
|
||
}
|
||
|
||
.vedio-list-page .empty-hint.is-visible {
|
||
display: block;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.vedio-list-page .drama-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="vedio-list-page">
|
||
<header class="inner-page-header">
|
||
<div class="header-inner site-header-inner">
|
||
<h1 class="main-title">深夜清單</h1>
|
||
<div class="subtitle-wrap">
|
||
<span class="sub-title">DRAMA & VARIETY WATCH LIST</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||
|
||
<canvas id="particles"></canvas>
|
||
|
||
<div class="container">
|
||
|
||
<section class="vedio-intro">
|
||
<h2 class="section-title">正在追的那些夜晚</h2>
|
||
<p>
|
||
有些夜晚適合考古黃色奇蹟，有些夜晚則是——螢幕一亮，人就栽進另一個世界。
|
||
綜藝裡的失控笑聲、戲劇裡的心跳停拍，都值得被好好記下來：看到哪一季、哪一集、哪一句台詞剛把你釘在沙發上。
|
||
</p>
|
||
<p>
|
||
這裡先收兩部最近在追的：一部是把人丟進肯亞還能笑到缺氧的<span class="mark_y">韓綜</span>，
|
||
一部是把 1997 年的青春寫得又甜又疼的<span class="mark_b">韓劇</span>。
|
||
點進去，進度與入口都在；先別急著一次追完，慢慢養也很好看。
|
||
</p>
|
||
<p>
|
||
此頁為線上靜態預覽。完整資料庫與後台 CRUD（乙級第三題骨架）請本機 XAMPP 匯入
|
||
<code>variety/vedio-list/dramas.sql</code> 後，開啟
|
||
<a href="vedio-list/"><code>variety/vedio-list/</code></a>。
|
||
</p>
|
||
</section>
|
||
|
||
<section class="list-section" aria-labelledby="vedio-list-heading">
|
||
<h2 class="section-title" id="vedio-list-heading">追劇清單</h2>
|
||
<p class="list-lead">先用類型找——綜藝還是戲劇，跟 OTT 首頁那排分類一樣直覺。</p>
|
||
|
||
<div class="type-tabs" role="tablist" aria-label="作品類型">
|
||
<button type="button" class="type-tab is-active" role="tab" aria-selected="true"
|
||
data-type="all">全部</button>
|
||
<button type="button" class="type-tab" role="tab" aria-selected="false"
|
||
data-type="variety">綜藝</button>
|
||
<button type="button" class="type-tab" role="tab" aria-selected="false"
|
||
data-type="drama">戲劇</button>
|
||
</div>
|
||
|
||
<div class="drama-grid" id="dramaGrid">
|
||
<article class="drama-card" data-type="variety" data-id="kenya" tabindex="0"
|
||
aria-label="三傻遊肯亞，綜藝">
|
||
<div class="drama-card__poster" aria-hidden="true">NETFLIX · 綜藝</div>
|
||
<div class="drama-card__meta">
|
||
<span class="drama-tag">綜藝</span>
|
||
<span class="drama-tag drama-tag--platform">Netflix</span>
|
||
</div>
|
||
<h3 class="drama-card__title">三傻遊肯亞</h3>
|
||
<p class="drama-card__progress">觀看進度：第 1 季・第 2 集・看到 28:40</p>
|
||
<p class="drama-card__note">三人剛被扔進野外，表情比獅子還慌。</p>
|
||
<div class="drama-card__actions">
|
||
<a class="is-primary" href="https://www.netflix.com/title/82031207"
|
||
target="_blank" rel="noopener noreferrer"
|
||
onclick="event.stopPropagation()">繼續觀看</a>
|
||
<button type="button" data-open-detail="kenya">查看詳情</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="drama-card" data-type="drama" data-id="reply1997" tabindex="0"
|
||
aria-label="請回答1997，戲劇">
|
||
<div class="drama-card__poster" aria-hidden="true">DISNEY+ · 戲劇</div>
|
||
<div class="drama-card__meta">
|
||
<span class="drama-tag">戲劇</span>
|
||
<span class="drama-tag drama-tag--platform">Disney+</span>
|
||
</div>
|
||
<h3 class="drama-card__title">請回答1997</h3>
|
||
<p class="drama-card__progress">觀看進度：第 1 季・第 5 集・看到 41:12</p>
|
||
<p class="drama-card__note">宿舍夜談剛結束，收音機還在響，心卻已經開始亂。</p>
|
||
<div class="drama-card__actions">
|
||
<a class="is-primary" href="https://www.disneyplus.com/en-tw/browse/entity-3979fb82-8681-44e8-b7be-e313091f0d73"
|
||
target="_blank" rel="noopener noreferrer"
|
||
onclick="event.stopPropagation()">繼續觀看</a>
|
||
<button type="button" data-open-detail="reply1997">查看詳情</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<p class="empty-hint" id="emptyHint" role="status">這個類型目前還沒有作品——換「全部」看看？</p>
|
||
|
||
<div class="detail-panel" id="detailPanel" aria-live="polite">
|
||
<span class="detail-panel__eyebrow" id="detailEyebrow">單部作品</span>
|
||
<h3 class="detail-panel__title" id="detailTitle"></h3>
|
||
<p id="detailIntro"></p>
|
||
<div class="detail-panel__progress-box">
|
||
<p id="detailProgress"></p>
|
||
<p id="detailNote"></p>
|
||
</div>
|
||
<p id="detailExtra"></p>
|
||
<div class="detail-panel__actions">
|
||
<a class="is-primary" id="detailWatch" href="#" target="_blank" rel="noopener noreferrer">繼續觀看</a>
|
||
<button type="button" id="detailClose">先收起來</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<footer>
|
||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank" rel="noopener noreferrer">
|
||
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||
</a>
|
||
</footer>
|
||
|
||
<script>
|
||
(function () {
|
||
const dramas = {
|
||
kenya: {
|
||
typeLabel: '綜藝｜Netflix',
|
||
title: '三傻遊肯亞',
|
||
intro: '三個人、一座肯亞，以及無數個「這也能出事？」的現場。笑點來得又急又野，像把旅行節目的安全感整袋拆掉，只留下腎上腺素與默契。',
|
||
progress: '第 1 季｜第 2 集｜28:40',
|
||
note: '三人剛被扔進野外，表情比獅子還慌。',
|
||
extra: '狀態：追劇中 · 開始看的那天：最近才入坑，進度還很乖。',
|
||
watchUrl: 'https://www.netflix.com/title/82031207'
|
||
},
|
||
reply1997: {
|
||
typeLabel: '戲劇｜Disney+',
|
||
title: '請回答1997',
|
||
intro: '把 1997 寫進宿舍、收音機與那一聲來不及說出口的喜歡。甜的時候甜到發亮，疼的時候又老實得讓人不敢快轉——那種青春，看完會想立刻打電話給誰。',
|
||
progress: '第 1 季｜第 5 集｜41:12',
|
||
note: '宿舍夜談剛結束，收音機還在響，心卻已經開始亂。',
|
||
extra: '狀態：追劇中 · 提醒自己：下一集容易哭，衛生紙先備好。',
|
||
watchUrl: 'https://www.disneyplus.com/en-tw/browse/entity-3979fb82-8681-44e8-b7be-e313091f0d73'
|
||
}
|
||
};
|
||
|
||
const tabs = document.querySelectorAll('.type-tab');
|
||
const cards = document.querySelectorAll('.drama-card');
|
||
const emptyHint = document.getElementById('emptyHint');
|
||
const detailPanel = document.getElementById('detailPanel');
|
||
const detailEyebrow = document.getElementById('detailEyebrow');
|
||
const detailTitle = document.getElementById('detailTitle');
|
||
const detailIntro = document.getElementById('detailIntro');
|
||
const detailProgress = document.getElementById('detailProgress');
|
||
const detailNote = document.getElementById('detailNote');
|
||
const detailExtra = document.getElementById('detailExtra');
|
||
const detailWatch = document.getElementById('detailWatch');
|
||
const detailClose = document.getElementById('detailClose');
|
||
|
||
function setFilter(type) {
|
||
tabs.forEach(function (tab) {
|
||
const active = tab.getAttribute('data-type') === type;
|
||
tab.classList.toggle('is-active', active);
|
||
tab.setAttribute('aria-selected', active ? 'true' : 'false');
|
||
});
|
||
|
||
let visible = 0;
|
||
cards.forEach(function (card) {
|
||
const show = type === 'all' || card.getAttribute('data-type') === type;
|
||
card.hidden = !show;
|
||
if (show) visible += 1;
|
||
});
|
||
|
||
emptyHint.classList.toggle('is-visible', visible === 0);
|
||
|
||
const activeCard = document.querySelector('.drama-card.is-active');
|
||
if (activeCard && activeCard.hidden) {
|
||
closeDetail();
|
||
}
|
||
}
|
||
|
||
function openDetail(id) {
|
||
const data = dramas[id];
|
||
if (!data) return;
|
||
|
||
cards.forEach(function (card) {
|
||
card.classList.toggle('is-active', card.getAttribute('data-id') === id);
|
||
});
|
||
|
||
detailEyebrow.textContent = data.typeLabel;
|
||
detailTitle.textContent = data.title;
|
||
detailIntro.textContent = data.intro;
|
||
detailProgress.textContent = '觀看進度：' + data.progress;
|
||
detailNote.textContent = data.note;
|
||
detailExtra.textContent = data.extra;
|
||
detailWatch.href = data.watchUrl;
|
||
detailPanel.classList.add('is-open');
|
||
detailPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||
}
|
||
|
||
function closeDetail() {
|
||
detailPanel.classList.remove('is-open');
|
||
cards.forEach(function (card) {
|
||
card.classList.remove('is-active');
|
||
});
|
||
}
|
||
|
||
tabs.forEach(function (tab) {
|
||
tab.addEventListener('click', function () {
|
||
setFilter(tab.getAttribute('data-type'));
|
||
});
|
||
});
|
||
|
||
cards.forEach(function (card) {
|
||
card.addEventListener('click', function (event) {
|
||
if (event.target.closest('a, button')) return;
|
||
openDetail(card.getAttribute('data-id'));
|
||
});
|
||
|
||
card.addEventListener('keydown', function (event) {
|
||
if (event.key === 'Enter' || event.key === ' ') {
|
||
event.preventDefault();
|
||
openDetail(card.getAttribute('data-id'));
|
||
}
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('[data-open-detail]').forEach(function (btn) {
|
||
btn.addEventListener('click', function (event) {
|
||
event.stopPropagation();
|
||
openDetail(btn.getAttribute('data-open-detail'));
|
||
});
|
||
});
|
||
|
||
detailClose.addEventListener('click', closeDetail);
|
||
})();
|
||
</script>
|
||
|
||
<script src="../assets/js/particles.js"></script>
|
||
<script src="../assets/js/portal-nav.js"></script>
|
||
</body>
|
||
|
||
</html>
|