2026-08-13 16:05:26 +08:00
|
|
|
|
<!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;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.vedio-list-page .drama-card__poster--image {
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
background: var(--color-surface-soft);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.vedio-list-page .drama-card__poster--image img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.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>vedio/vedio-list/dramas.sql</code> 後，開啟
|
|
|
|
|
|
<a href="vedio-list/"><code>vedio/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/tw/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，戲劇">
|
|
|
|
|
|
<!-- 海報來源：Wikipedia，版權歸原著作權人所有 -->
|
|
|
|
|
|
<div class="drama-card__poster drama-card__poster--image" aria-hidden="true">
|
|
|
|
|
|
<img src="https://upload.wikimedia.org/wikipedia/zh/a/a9/Reply_1997.jpg" alt="" loading="lazy">
|
|
|
|
|
|
</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/tw/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>
|
