2026-06-17 13:07:20 +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>
|
|
|
|
|
|
/* ── 爆笑養老院頁面專用樣式 ── */
|
|
|
|
|
|
|
|
|
|
|
|
.bangxiao-page .bangxiao-intro {
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bangxiao-page .bangxiao-intro p {
|
|
|
|
|
|
color: var(--color-text-muted);
|
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
|
line-height: 1.8;
|
|
|
|
|
|
margin: 0 0 0.85rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bangxiao-page .bangxiao-intro p:last-child {
|
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* ── 計算器區塊 ── */
|
|
|
|
|
|
.bangxiao-page .checker-section {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bangxiao-page .checker-lead {
|
|
|
|
|
|
color: var(--color-text-muted);
|
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
|
margin: 0 0 1.75rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 六位成員 checkbox 格線 */
|
|
|
|
|
|
.bangxiao-page .member-grid {
|
|
|
|
|
|
display: grid;
|
|
|
|
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
|
|
|
gap: 14px;
|
|
|
|
|
|
max-width: 560px;
|
|
|
|
|
|
margin: 0 auto 1.75rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bangxiao-page .member-check {
|
2026-06-17 13:49:59 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
2026-06-17 13:07:20 +08:00
|
|
|
|
padding: 14px 10px;
|
|
|
|
|
|
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;
|
|
|
|
|
|
user-select: none;
|
2026-06-17 13:49:59 +08:00
|
|
|
|
height: 210px;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
box-sizing: border-box;
|
2026-06-17 13:35:51 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bangxiao-page .member-check--all {
|
2026-06-17 13:49:59 +08:00
|
|
|
|
height: auto;
|
2026-06-17 13:59:28 +08:00
|
|
|
|
min-height: 60px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 團飯卡：info 不需要動，detail 回歸正常流 */
|
|
|
|
|
|
.bangxiao-page .member-check--all .member-check__info {
|
|
|
|
|
|
position: static;
|
|
|
|
|
|
transform: none;
|
|
|
|
|
|
transition: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bangxiao-page .member-check--all:has(input:checked) .member-check__info {
|
|
|
|
|
|
position: static;
|
|
|
|
|
|
transform: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bangxiao-page .member-check--all .member-detail {
|
|
|
|
|
|
position: static;
|
|
|
|
|
|
max-height: 0;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
visibility: visible;
|
|
|
|
|
|
transform: none;
|
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
|
transition: max-height 0.4s ease, padding-top 0.4s ease;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bangxiao-page .member-check--all:has(input:checked) .member-detail {
|
|
|
|
|
|
max-height: 300px;
|
|
|
|
|
|
padding-top: 10px;
|
2026-06-17 13:07:20 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bangxiao-page .member-check:has(input:checked) {
|
|
|
|
|
|
border-color: var(--color-brand);
|
|
|
|
|
|
background: #fffce8;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 團飯全選卡片：橫跨三欄 */
|
|
|
|
|
|
.bangxiao-page .member-check--all {
|
|
|
|
|
|
grid-column: 1 / -1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bangxiao-page .member-check input[type="checkbox"] {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
width: 0;
|
|
|
|
|
|
height: 0;
|
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-17 13:50:28 +08:00
|
|
|
|
/* name + role：absolute 置中，選取後滑到頂部 */
|
2026-06-17 13:35:51 +08:00
|
|
|
|
.bangxiao-page .member-check__info {
|
2026-06-17 13:50:28 +08:00
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
transform: translateY(-50%);
|
2026-06-17 13:35:51 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
gap: 4px;
|
2026-06-17 13:59:28 +08:00
|
|
|
|
transition: top 0.4s ease, transform 0.4s ease;
|
2026-06-17 13:35:51 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-17 13:49:59 +08:00
|
|
|
|
.bangxiao-page .member-check:has(input:checked) .member-check__info {
|
|
|
|
|
|
top: 14px;
|
2026-06-17 13:50:28 +08:00
|
|
|
|
transform: translateY(0);
|
2026-06-17 13:49:59 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-17 13:07:20 +08:00
|
|
|
|
.bangxiao-page .member-check__name {
|
|
|
|
|
|
font-weight: 800;
|
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
|
color: var(--color-text-dark);
|
|
|
|
|
|
line-height: 1.2;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bangxiao-page .member-check__role {
|
|
|
|
|
|
font-size: 0.72rem;
|
|
|
|
|
|
color: var(--color-text-muted);
|
|
|
|
|
|
letter-spacing: 0.04em;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 送出按鈕 */
|
|
|
|
|
|
.bangxiao-page .checker-btn {
|
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
gap: 0.5rem;
|
|
|
|
|
|
margin-bottom: 1.5rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 結果區塊 */
|
|
|
|
|
|
.bangxiao-page .checker-result {
|
2026-06-17 13:12:31 +08:00
|
|
|
|
display: block;
|
|
|
|
|
|
padding: 18px 20px;
|
2026-06-17 13:07:20 +08:00
|
|
|
|
border-radius: 12px;
|
|
|
|
|
|
background: var(--color-surface-soft);
|
|
|
|
|
|
border: 1px solid rgba(255, 204, 0, 0.25);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bangxiao-page .checker-result:empty {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-17 13:12:31 +08:00
|
|
|
|
.bangxiao-page .result-headline {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-size: 1.05rem;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
color: var(--color-brand-dark);
|
|
|
|
|
|
margin: 0 0 0.5rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bangxiao-page .result-headline strong {
|
|
|
|
|
|
font-size: 1.25rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bangxiao-page .result-group {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-size: 0.85rem;
|
|
|
|
|
|
color: var(--color-text-muted);
|
|
|
|
|
|
margin: 0 0 0.75rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-17 13:49:59 +08:00
|
|
|
|
/* 卡片展開明細：絕對定位，不佔 flex 空間 */
|
2026-06-17 13:25:13 +08:00
|
|
|
|
.bangxiao-page .member-detail {
|
2026-06-17 13:49:59 +08:00
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 14px;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
width: 100%;
|
2026-06-17 13:25:13 +08:00
|
|
|
|
visibility: hidden;
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
text-align: center;
|
2026-06-17 13:50:28 +08:00
|
|
|
|
transform: translateY(12px);
|
2026-06-17 13:59:28 +08:00
|
|
|
|
transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
|
2026-06-17 13:12:31 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-17 13:25:13 +08:00
|
|
|
|
.bangxiao-page .member-check:has(input:checked) .member-detail {
|
|
|
|
|
|
visibility: visible;
|
|
|
|
|
|
opacity: 1;
|
2026-06-17 13:50:28 +08:00
|
|
|
|
transform: translateY(0);
|
2026-06-17 13:12:31 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-17 13:25:13 +08:00
|
|
|
|
.bangxiao-page .member-detail__count {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
|
font-weight: 900;
|
2026-06-17 13:12:31 +08:00
|
|
|
|
color: var(--color-brand-dark);
|
2026-06-17 13:25:13 +08:00
|
|
|
|
letter-spacing: -0.02em;
|
|
|
|
|
|
margin: 0 0 6px;
|
2026-06-17 13:12:31 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-17 13:25:13 +08:00
|
|
|
|
.bangxiao-page .member-detail__works {
|
|
|
|
|
|
font-size: 0.76rem;
|
2026-06-17 13:12:31 +08:00
|
|
|
|
color: var(--color-text-muted);
|
2026-06-17 13:25:13 +08:00
|
|
|
|
line-height: 2;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
text-align: center;
|
2026-06-17 13:12:31 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-17 13:07:20 +08:00
|
|
|
|
@media (max-width: 540px) {
|
|
|
|
|
|
.bangxiao-page .member-grid {
|
|
|
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body class="bangxiao-page">
|
|
|
|
|
|
<header class="inner-page-header">
|
|
|
|
|
|
<div class="header-inner site-header-inner">
|
2026-06-17 13:51:25 +08:00
|
|
|
|
<h1 class="main-title">世紀級寶藏庫</h1>
|
2026-06-17 13:07:20 +08:00
|
|
|
|
<div class="subtitle-wrap">
|
2026-06-17 13:51:25 +08:00
|
|
|
|
<span class="sub-title">LEGENDARY VARIETY ARCHIVE</span>
|
2026-06-17 13:07:20 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
|
|
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
|
|
|
|
|
|
|
|
|
|
|
<canvas id="particles"></canvas>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
|
|
|
|
|
|
<section class="bangxiao-intro">
|
2026-06-17 13:51:25 +08:00
|
|
|
|
<h2 class="section-title">爆笑養老院</h2>
|
2026-06-17 13:07:20 +08:00
|
|
|
|
<p>
|
2026-06-17 13:25:13 +08:00
|
|
|
|
水晶男孩的綜藝節目，<span class="mark_b">多到要看到老才看得完</span>。
|
|
|
|
|
|
從 1997 年出道、世紀解散後的各自精彩，再到後來的奇蹟合體，這群大男孩不論在哪個時期，都在各種節目裡全力失控——
|
|
|
|
|
|
隊長帶著弟弟們上山下海，弟弟們又各自出去繼續暴走，算下來這二十幾年累積的精采清單，多到讓人眼睛發亮。
|
2026-06-17 13:07:20 +08:00
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
在這裡你可以先算算，<span class="mark_y">選完本命之後有幾個節目得補</span>，
|
2026-06-17 13:25:13 +08:00
|
|
|
|
然後找個舒服的位置坐好，慢慢養老，反正寶藏這麼多，你這輩子是跑不掉了。
|
2026-06-17 13:07:20 +08:00
|
|
|
|
</p>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<section class="checker-section">
|
2026-06-17 13:35:51 +08:00
|
|
|
|
<h2 class="section-title">甜蜜負擔計量器</h2>
|
|
|
|
|
|
<p class="checker-lead">勾選你的本命（貪心全選也沒關係！），算出這輩子夠你慢慢養老的甜蜜負擔有多長。</p>
|
2026-06-17 13:07:20 +08:00
|
|
|
|
<div class="member-grid">
|
|
|
|
|
|
<label class="member-check member-check--all">
|
|
|
|
|
|
<input type="checkbox" id="member-all">
|
2026-06-17 13:59:28 +08:00
|
|
|
|
<div class="member-check__info">
|
|
|
|
|
|
<span class="member-check__name">我是團飯！！六顆都要</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="member-detail">
|
|
|
|
|
|
<span class="member-detail__count">5 部</span>
|
|
|
|
|
|
<p class="member-detail__works">《無限挑戰》重組特輯<br>《無本質青春旅行》<br>《三時四餐》<br>《不要回頭看》<br>《在峇里島的大小事》</p>
|
|
|
|
|
|
</div>
|
2026-06-17 13:07:20 +08:00
|
|
|
|
</label>
|
|
|
|
|
|
<label class="member-check">
|
2026-06-17 13:12:31 +08:00
|
|
|
|
<input type="checkbox" name="member" value="jiwon">
|
2026-06-17 13:35:51 +08:00
|
|
|
|
<div class="member-check__info">
|
|
|
|
|
|
<span class="member-check__name">殷志源</span>
|
|
|
|
|
|
<span class="member-check__role">Leader・Rapper</span>
|
|
|
|
|
|
</div>
|
2026-06-17 13:25:13 +08:00
|
|
|
|
<div class="member-detail">
|
|
|
|
|
|
<span class="member-detail__count">50+ 部</span>
|
2026-06-17 13:35:51 +08:00
|
|
|
|
<p class="member-detail__works">《兩天一夜》第一季<br>《新西遊記》系列<br>《姜食堂》系列</p>
|
2026-06-17 13:25:13 +08:00
|
|
|
|
</div>
|
2026-06-17 13:07:20 +08:00
|
|
|
|
</label>
|
|
|
|
|
|
<label class="member-check">
|
2026-06-17 13:12:31 +08:00
|
|
|
|
<input type="checkbox" name="member" value="jaejin">
|
2026-06-17 13:35:51 +08:00
|
|
|
|
<div class="member-check__info">
|
|
|
|
|
|
<span class="member-check__name">李宰鎮</span>
|
|
|
|
|
|
<span class="member-check__role">Rapper・Dancer</span>
|
|
|
|
|
|
</div>
|
2026-06-17 13:25:13 +08:00
|
|
|
|
<div class="member-detail">
|
|
|
|
|
|
<span class="member-detail__count">5 部</span>
|
2026-06-17 13:35:51 +08:00
|
|
|
|
<p class="member-detail__works">《無限挑戰》六六歌2<br>《花樣旅行》<br>《全知干預視角》</p>
|
2026-06-17 13:25:13 +08:00
|
|
|
|
</div>
|
2026-06-17 13:07:20 +08:00
|
|
|
|
</label>
|
|
|
|
|
|
<label class="member-check">
|
2026-06-17 13:12:31 +08:00
|
|
|
|
<input type="checkbox" name="member" value="jaeduck">
|
2026-06-17 13:35:51 +08:00
|
|
|
|
<div class="member-check__info">
|
|
|
|
|
|
<span class="member-check__name">金在德</span>
|
|
|
|
|
|
<span class="member-check__role">Rapper・Dancer</span>
|
|
|
|
|
|
</div>
|
2026-06-17 13:25:13 +08:00
|
|
|
|
<div class="member-detail">
|
|
|
|
|
|
<span class="member-detail__count">10+ 部</span>
|
2026-06-17 13:35:51 +08:00
|
|
|
|
<p class="member-detail__works">《Tony An的魅力TV》<br>《介紹美食店的男人》<br>《我家的熊孩子》</p>
|
2026-06-17 13:25:13 +08:00
|
|
|
|
</div>
|
2026-06-17 13:07:20 +08:00
|
|
|
|
</label>
|
|
|
|
|
|
<label class="member-check">
|
2026-06-17 13:12:31 +08:00
|
|
|
|
<input type="checkbox" name="member" value="sunghoon">
|
2026-06-17 13:35:51 +08:00
|
|
|
|
<div class="member-check__info">
|
|
|
|
|
|
<span class="member-check__name">姜成勳</span>
|
|
|
|
|
|
<span class="member-check__role">Vocalist</span>
|
|
|
|
|
|
</div>
|
2026-06-17 13:25:13 +08:00
|
|
|
|
<div class="member-detail">
|
|
|
|
|
|
<span class="member-detail__count">5 部</span>
|
2026-06-17 13:35:51 +08:00
|
|
|
|
<p class="member-detail__works">《神秘音樂秀：蒙面歌王》<br>《二重唱歌謠祭》<br>《能力者們》</p>
|
2026-06-17 13:25:13 +08:00
|
|
|
|
</div>
|
2026-06-17 13:07:20 +08:00
|
|
|
|
</label>
|
|
|
|
|
|
<label class="member-check">
|
2026-06-17 13:12:31 +08:00
|
|
|
|
<input type="checkbox" name="member" value="suwon">
|
2026-06-17 13:35:51 +08:00
|
|
|
|
<div class="member-check__info">
|
|
|
|
|
|
<span class="member-check__name">張水院</span>
|
|
|
|
|
|
<span class="member-check__role">Vocalist</span>
|
|
|
|
|
|
</div>
|
2026-06-17 13:25:13 +08:00
|
|
|
|
<div class="member-detail">
|
|
|
|
|
|
<span class="member-detail__count">20+ 部</span>
|
2026-06-17 13:35:51 +08:00
|
|
|
|
<p class="member-detail__works">《全知干預視角》<br>《演員學校》<br>《本月的活動王》</p>
|
2026-06-17 13:25:13 +08:00
|
|
|
|
</div>
|
2026-06-17 13:07:20 +08:00
|
|
|
|
</label>
|
|
|
|
|
|
<label class="member-check">
|
2026-06-17 13:12:31 +08:00
|
|
|
|
<input type="checkbox" name="member" value="jiyong">
|
2026-06-17 13:35:51 +08:00
|
|
|
|
<div class="member-check__info">
|
|
|
|
|
|
<span class="member-check__name">高志溶</span>
|
|
|
|
|
|
<span class="member-check__role">Vocalist</span>
|
|
|
|
|
|
</div>
|
2026-06-17 13:25:13 +08:00
|
|
|
|
<div class="member-detail">
|
|
|
|
|
|
<span class="member-detail__count">3 部</span>
|
2026-06-17 13:35:51 +08:00
|
|
|
|
<p class="member-detail__works">《無限挑戰》重組特輯<br>《超人回來了》<br>《大腦性感的時代》</p>
|
2026-06-17 13:25:13 +08:00
|
|
|
|
</div>
|
2026-06-17 13:07:20 +08:00
|
|
|
|
</label>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<button type="button" id="calcBtn" class="btn checker-btn">
|
2026-06-17 13:59:28 +08:00
|
|
|
|
天啊太嗨了！要補幾個？<i class="fa-solid fa-calculator" aria-hidden="true"></i>
|
2026-06-17 13:07:20 +08:00
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="checker-result" id="calcResult" role="status" aria-live="polite"></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>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- jquery -->
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
|
|
|
|
|
|
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
|
|
|
|
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
$(document).ready(function () {
|
2026-06-17 13:12:31 +08:00
|
|
|
|
const GROUP_SCORE = 7;
|
|
|
|
|
|
|
|
|
|
|
|
// 成員資料：數量、是否為估計值（+）、三部代表作
|
|
|
|
|
|
const memberData = {
|
|
|
|
|
|
jiwon: {
|
|
|
|
|
|
score: 50, est: true,
|
|
|
|
|
|
works: ['《兩天一夜》第一季', '《新西遊記》系列', '《姜食堂》系列']
|
|
|
|
|
|
},
|
|
|
|
|
|
jaejin: {
|
|
|
|
|
|
score: 5, est: false,
|
|
|
|
|
|
works: ['《無限挑戰》六六歌2', '《花樣旅行》', '《全知干預視角》']
|
|
|
|
|
|
},
|
|
|
|
|
|
jaeduck: {
|
|
|
|
|
|
score: 10, est: true,
|
|
|
|
|
|
works: ['《尋笑人》（客串話題）', '《不朽的名曲》', '《與張水院的同居生活》']
|
|
|
|
|
|
},
|
|
|
|
|
|
suwon: {
|
|
|
|
|
|
score: 20, est: true,
|
|
|
|
|
|
works: ['《全知干預視角》', '《林大叔的搞笑演技學堂》', '《演藝家中介》（機器人始祖）']
|
|
|
|
|
|
},
|
|
|
|
|
|
sunghoon: {
|
|
|
|
|
|
score: 5, est: false,
|
|
|
|
|
|
works: ['《Sugar Man》', '《心動（Video Star）》', '《家師父一體》（早期客串）']
|
|
|
|
|
|
},
|
|
|
|
|
|
jiyong: {
|
|
|
|
|
|
score: 3, est: false,
|
|
|
|
|
|
works: ['《無限挑戰》重組特輯', '《超人回來了》（與昇材）', '《大腦性感的時代》']
|
|
|
|
|
|
},
|
2026-06-17 13:07:20 +08:00
|
|
|
|
};
|
|
|
|
|
|
|
2026-06-17 13:25:13 +08:00
|
|
|
|
const calcBtn = $('#calcBtn');
|
2026-06-17 13:07:20 +08:00
|
|
|
|
const resultEl = $('#calcResult');
|
|
|
|
|
|
|
|
|
|
|
|
// 團飯全選：勾全部；個別全勾時也同步亮全選卡
|
|
|
|
|
|
$('#member-all').on('change', function () {
|
|
|
|
|
|
$('input[name="member"]').prop('checked', this.checked);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
$('input[name="member"]').on('change', function () {
|
2026-06-17 13:25:13 +08:00
|
|
|
|
const total = $('input[name="member"]').length;
|
2026-06-17 13:07:20 +08:00
|
|
|
|
const checked = $('input[name="member"]:checked').length;
|
|
|
|
|
|
$('#member-all').prop('checked', total === checked);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
calcBtn.click(function () {
|
|
|
|
|
|
const checked = $('input[name="member"]:checked');
|
|
|
|
|
|
|
|
|
|
|
|
if (checked.length === 0) {
|
2026-06-17 13:12:31 +08:00
|
|
|
|
resultEl.html('<p class="result-headline">先勾一個本命吧！</p>');
|
2026-06-17 13:07:20 +08:00
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-17 13:12:31 +08:00
|
|
|
|
const isAll = checked.length === $('input[name="member"]').length;
|
2026-06-17 13:25:13 +08:00
|
|
|
|
let total = isAll ? GROUP_SCORE : 0;
|
|
|
|
|
|
let hasEst = false;
|
2026-06-17 13:07:20 +08:00
|
|
|
|
checked.each(function () {
|
2026-06-17 13:25:13 +08:00
|
|
|
|
const data = memberData[$(this).val()];
|
2026-06-17 13:12:31 +08:00
|
|
|
|
total += data.score;
|
|
|
|
|
|
if (data.est) hasEst = true;
|
2026-06-17 13:07:20 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
2026-06-17 13:25:13 +08:00
|
|
|
|
const totalStr = total + (hasEst ? '+' : '');
|
2026-06-17 13:12:31 +08:00
|
|
|
|
const groupNote = isAll
|
|
|
|
|
|
? '<p class="result-group">（含團體綜藝 ' + GROUP_SCORE + ' 部）</p>'
|
|
|
|
|
|
: '';
|
2026-06-17 13:07:20 +08:00
|
|
|
|
|
2026-06-17 13:12:31 +08:00
|
|
|
|
resultEl.html(
|
2026-06-17 13:49:59 +08:00
|
|
|
|
'<p class="result-headline">你總共有 <strong>' + totalStr + '</strong> 個節目要補！</p>' +
|
2026-06-17 13:25:13 +08:00
|
|
|
|
groupNote
|
2026-06-17 13:07:20 +08:00
|
|
|
|
);
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="../assets/js/particles.js"></script>
|
|
|
|
|
|
<script src="../assets/js/portal-nav.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
2026-06-17 13:25:13 +08:00
|
|
|
|
</html>
|
