470 lines
18 KiB
HTML
470 lines
18 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>
|
||
/* ── 爆笑養老院頁面專用樣式 ── */
|
||
|
||
.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 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
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;
|
||
height: 210px;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bangxiao-page .member-check--all {
|
||
height: auto;
|
||
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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* name + role：absolute 置中，選取後滑到頂部 */
|
||
.bangxiao-page .member-check__info {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
width: 100%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
transition: top 0.4s ease, transform 0.4s ease;
|
||
}
|
||
|
||
.bangxiao-page .member-check:has(input:checked) .member-check__info {
|
||
top: 14px;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.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 {
|
||
display: block;
|
||
padding: 18px 20px;
|
||
border-radius: 12px;
|
||
background: var(--color-surface-soft);
|
||
border: 1px solid rgba(255, 204, 0, 0.25);
|
||
}
|
||
|
||
.bangxiao-page .checker-result:empty {
|
||
display: none;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* 卡片展開明細：絕對定位，不佔 flex 空間 */
|
||
.bangxiao-page .member-detail {
|
||
position: absolute;
|
||
bottom: 14px;
|
||
left: 0;
|
||
width: 100%;
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
text-align: center;
|
||
transform: translateY(12px);
|
||
transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
|
||
}
|
||
|
||
.bangxiao-page .member-check:has(input:checked) .member-detail {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.bangxiao-page .member-detail__count {
|
||
display: block;
|
||
font-size: 2rem;
|
||
font-weight: 900;
|
||
color: var(--color-brand-dark);
|
||
letter-spacing: -0.02em;
|
||
margin: 0 0 6px;
|
||
}
|
||
|
||
.bangxiao-page .member-detail__works {
|
||
font-size: 0.76rem;
|
||
color: var(--color-text-muted);
|
||
line-height: 2;
|
||
margin: 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.bangxiao-page .result-cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-top: 1.2rem;
|
||
color: var(--color-brand-dark);
|
||
font-size: 0.95rem;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
border-bottom: 2px solid var(--color-brand);
|
||
padding-bottom: 2px;
|
||
transition: border-color 0.18s ease, color 0.18s ease;
|
||
}
|
||
|
||
.bangxiao-page .result-cta:hover {
|
||
border-color: var(--color-brand-dark);
|
||
}
|
||
|
||
.bangxiao-page .result-cta .cta-arrow {
|
||
display: inline-block;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.bangxiao-page .result-cta:hover .cta-arrow {
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
@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">
|
||
<h1 class="main-title">世紀級寶藏</h1>
|
||
<div class="subtitle-wrap">
|
||
<span class="sub-title">LEGENDARY VARIETY ARCHIVE</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||
|
||
<canvas id="particles"></canvas>
|
||
|
||
<div class="container">
|
||
|
||
<section class="bangxiao-intro">
|
||
<h2 class="section-title">爆笑養老院</h2>
|
||
<p>
|
||
水晶男孩的綜藝節目，<span class="mark_b">多到要看到老才看得完</span>。
|
||
從 1997 年出道、世紀解散後的各自精彩，再到後來的奇蹟合體，這群大男孩不論在哪個時期，都在各種節目裡全力失控——
|
||
隊長帶著弟弟們上山下海，弟弟們又各自出去繼續暴走，算下來這二十幾年累積的精采清單，多到讓人眼睛發亮。
|
||
</p>
|
||
<p>
|
||
在這裡你可以先算算，<span class="mark_y">選完本命之後有幾個節目得補</span>，
|
||
然後找個舒服的位置坐好，慢慢養老，反正寶藏這麼多，你這輩子是跑不掉了。
|
||
</p>
|
||
</section>
|
||
|
||
<section class="checker-section">
|
||
<h2 class="section-title">甜蜜負擔計量器</h2>
|
||
<p class="checker-lead">勾選你的本命（貪心全選也沒關係！），算出這輩子夠你慢慢養老的甜蜜負擔有多長。</p>
|
||
<div class="member-grid">
|
||
<label class="member-check member-check--all">
|
||
<input type="checkbox" id="member-all">
|
||
<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>
|
||
</label>
|
||
<label class="member-check">
|
||
<input type="checkbox" name="member" value="jiwon">
|
||
<div class="member-check__info">
|
||
<span class="member-check__name">殷志源</span>
|
||
<span class="member-check__role">Leader・Rapper</span>
|
||
</div>
|
||
<div class="member-detail">
|
||
<span class="member-detail__count">50+ 部</span>
|
||
<p class="member-detail__works">《兩天一夜》第一季<br>《新西遊記》系列<br>《姜食堂》系列</p>
|
||
</div>
|
||
</label>
|
||
<label class="member-check">
|
||
<input type="checkbox" name="member" value="jaejin">
|
||
<div class="member-check__info">
|
||
<span class="member-check__name">李宰鎮</span>
|
||
<span class="member-check__role">Rapper・Dancer</span>
|
||
</div>
|
||
<div class="member-detail">
|
||
<span class="member-detail__count">5 部</span>
|
||
<p class="member-detail__works">《打工達人的誕生》<br>《花樣旅行》<br>《全知干預視角》</p>
|
||
</div>
|
||
</label>
|
||
<label class="member-check">
|
||
<input type="checkbox" name="member" value="jaeduck">
|
||
<div class="member-check__info">
|
||
<span class="member-check__name">金在德</span>
|
||
<span class="member-check__role">Rapper・Dancer</span>
|
||
</div>
|
||
<div class="member-detail">
|
||
<span class="member-detail__count">10+ 部</span>
|
||
<p class="member-detail__works">《Tony An的魅力TV》<br>《介紹美食店的男人》<br>《我家的熊孩子》</p>
|
||
</div>
|
||
</label>
|
||
<label class="member-check">
|
||
<input type="checkbox" name="member" value="sunghoon">
|
||
<div class="member-check__info">
|
||
<span class="member-check__name">姜成勳</span>
|
||
<span class="member-check__role">Vocalist</span>
|
||
</div>
|
||
<div class="member-detail">
|
||
<span class="member-detail__count">5 部</span>
|
||
<p class="member-detail__works">《神秘音樂秀：蒙面歌王》<br>《二重唱歌謠祭》<br>《能力者們》</p>
|
||
</div>
|
||
</label>
|
||
<label class="member-check">
|
||
<input type="checkbox" name="member" value="suwon">
|
||
<div class="member-check__info">
|
||
<span class="member-check__name">張水院</span>
|
||
<span class="member-check__role">Vocalist</span>
|
||
</div>
|
||
<div class="member-detail">
|
||
<span class="member-detail__count">20+ 部</span>
|
||
<p class="member-detail__works">《全知干預視角》<br>《演員學校》<br>《本月的活動王》</p>
|
||
</div>
|
||
</label>
|
||
<label class="member-check">
|
||
<input type="checkbox" name="member" value="jiyong">
|
||
<div class="member-check__info">
|
||
<span class="member-check__name">高志溶</span>
|
||
<span class="member-check__role">Vocalist</span>
|
||
</div>
|
||
<div class="member-detail">
|
||
<span class="member-detail__count">3 部</span>
|
||
<p class="member-detail__works">《超人回來了》<br>《新穎的整理》<br>《非首腦會談》</p>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
<button type="button" id="calcBtn" class="btn checker-btn">
|
||
天啊太嗨了！要補幾個？<i class="fa-solid fa-calculator" aria-hidden="true"></i>
|
||
</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 () {
|
||
const GROUP_SCORE = 7;
|
||
|
||
// 成員資料：數量、是否為估計值（+）、三部代表作
|
||
const memberData = {
|
||
jiwon: {
|
||
score: 50, est: true,
|
||
works: ['《兩天一夜》第一季', '《新西遊記》系列', '《姜食堂》系列']
|
||
},
|
||
jaejin: {
|
||
score: 5, est: false,
|
||
works: ['《打工達人的誕生》', '《花樣旅行》', '《全知干預視角》']
|
||
},
|
||
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: ['《超人回來了》', '《新穎的整理》', '《非首腦會談》']
|
||
},
|
||
};
|
||
|
||
const calcBtn = $('#calcBtn');
|
||
const resultEl = $('#calcResult');
|
||
|
||
// 團飯：勾了就全選六人，但六人的變動不反過來影響團飯
|
||
$('#member-all').on('change', function () {
|
||
$('input[name="member"]').prop('checked', this.checked);
|
||
});
|
||
|
||
calcBtn.click(function () {
|
||
const checked = $('input[name="member"]:checked');
|
||
|
||
if (checked.length === 0) {
|
||
resultEl.html('<p class="result-headline">先勾一個本命吧！</p>');
|
||
return;
|
||
}
|
||
|
||
const isAll = checked.length === $('input[name="member"]').length;
|
||
let total = isAll ? GROUP_SCORE : 0;
|
||
let hasEst = false;
|
||
checked.each(function () {
|
||
const data = memberData[$(this).val()];
|
||
total += data.score;
|
||
if (data.est) hasEst = true;
|
||
});
|
||
|
||
const totalStr = total + (hasEst ? '+' : '');
|
||
const groupNote = isAll
|
||
? '<p class="result-group">（含團體綜藝 ' + GROUP_SCORE + ' 部）</p>'
|
||
: '';
|
||
|
||
resultEl.html(
|
||
'<p class="result-headline">你總共有 <strong>' + totalStr + '</strong> 個節目要補！</p>' +
|
||
groupNote +
|
||
'<a class="result-cta" href="../vedio/variety-shows.html" target="_blank" rel="noopener noreferrer">' +
|
||
'進坑挖寶囉 <span class="cta-arrow">→</span>' +
|
||
'</a>'
|
||
);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<script src="../assets/js/particles.js"></script>
|
||
<script src="../assets/js/portal-nav.js"></script>
|
||
</body>
|
||
|
||
</html> |