381 lines
14 KiB
HTML
381 lines
14 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;
|
||
gap: 4px;
|
||
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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.bangxiao-page .result-members {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
margin-top: 0.85rem;
|
||
}
|
||
|
||
.bangxiao-page .result-member {
|
||
display: grid;
|
||
grid-template-columns: auto auto 1fr;
|
||
gap: 0 10px;
|
||
align-items: baseline;
|
||
padding: 8px 12px;
|
||
background: rgba(255, 204, 0, 0.1);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.bangxiao-page .result-member__name {
|
||
font-weight: 800;
|
||
font-size: 0.95rem;
|
||
color: var(--color-text-dark);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.bangxiao-page .result-member__count {
|
||
font-weight: 700;
|
||
font-size: 0.88rem;
|
||
color: var(--color-brand-dark);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.bangxiao-page .result-member__works {
|
||
font-size: 0.82rem;
|
||
color: var(--color-text-muted);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
@media (max-width: 540px) {
|
||
.bangxiao-page .result-member {
|
||
grid-template-columns: auto auto;
|
||
grid-template-rows: auto auto;
|
||
}
|
||
|
||
.bangxiao-page .result-member__works {
|
||
grid-column: 1 / -1;
|
||
}
|
||
}
|
||
|
||
@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">LAUGH TILL YOU'RE OLD</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>。
|
||
從 2016 年回歸後，六個大男孩分別在各種節目裡全力失控——
|
||
隊長帶著弟弟們上山下海，弟弟們又各自出去繼續暴走，
|
||
加上超人回來了裡的爸爸系燃點，算下來要補的清單長到讓人頭皮發麻。
|
||
</p>
|
||
<p>
|
||
在這裡你可以先算算，<span class="mark_y">選完本命之後有幾個節目得補</span>，
|
||
然後找個舒服的位置坐好，慢慢養老，反正跑不掉了。
|
||
</p>
|
||
</section>
|
||
|
||
<section class="checker-section">
|
||
<h2 class="section-title">我要補幾個？</h2>
|
||
<div class="subtitle-wrap">
|
||
<span class="sub-title">SELECT YOUR BIAS</span>
|
||
</div>
|
||
<p class="checker-lead">勾選你的本命（可複選），算出你的補番清單有多長。</p>
|
||
|
||
<div class="member-grid">
|
||
<label class="member-check member-check--all">
|
||
<input type="checkbox" id="member-all">
|
||
<span class="member-check__name">我是團飯！！六顆都要</span>
|
||
</label>
|
||
<label class="member-check">
|
||
<input type="checkbox" name="member" value="jiwon">
|
||
<span class="member-check__name">殷志源</span>
|
||
<span class="member-check__role">Leader・Rapper</span>
|
||
</label>
|
||
<label class="member-check">
|
||
<input type="checkbox" name="member" value="jaejin">
|
||
<span class="member-check__name">李宰鎮</span>
|
||
<span class="member-check__role">Rapper・Dancer</span>
|
||
</label>
|
||
<label class="member-check">
|
||
<input type="checkbox" name="member" value="jaeduck">
|
||
<span class="member-check__name">金在德</span>
|
||
<span class="member-check__role">Rapper・Dancer</span>
|
||
</label>
|
||
<label class="member-check">
|
||
<input type="checkbox" name="member" value="sunghoon">
|
||
<span class="member-check__name">姜成勳</span>
|
||
<span class="member-check__role">Vocalist</span>
|
||
</label>
|
||
<label class="member-check">
|
||
<input type="checkbox" name="member" value="suwon">
|
||
<span class="member-check__name">張水院</span>
|
||
<span class="member-check__role">Vocalist</span>
|
||
</label>
|
||
<label class="member-check">
|
||
<input type="checkbox" name="member" value="jiyong">
|
||
<span class="member-check__name">高志溶</span>
|
||
<span class="member-check__role">Vocalist</span>
|
||
</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: ['《無限挑戰》六六歌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: ['《無限挑戰》重組特輯', '《超人回來了》（與昇材）', '《大腦性感的時代》']
|
||
},
|
||
};
|
||
|
||
const calcBtn = $('#calcBtn');
|
||
const resultEl = $('#calcResult');
|
||
|
||
// 團飯全選：勾全部；個別全勾時也同步亮全選卡
|
||
$('#member-all').on('change', function () {
|
||
$('input[name="member"]').prop('checked', this.checked);
|
||
});
|
||
|
||
$('input[name="member"]').on('change', function () {
|
||
const total = $('input[name="member"]').length;
|
||
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) {
|
||
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;
|
||
let worksHTML = '';
|
||
|
||
checked.each(function () {
|
||
const val = $(this).val();
|
||
const data = memberData[val];
|
||
const name = $(this).closest('label').find('.member-check__name').text();
|
||
|
||
total += data.score;
|
||
if (data.est) hasEst = true;
|
||
|
||
worksHTML +=
|
||
'<div class="result-member">' +
|
||
'<span class="result-member__name">' + name + '</span>' +
|
||
'<span class="result-member__count">' + data.score + (data.est ? '+' : '') + ' 部</span>' +
|
||
'<span class="result-member__works">' + data.works.join('・') + '</span>' +
|
||
'</div>';
|
||
});
|
||
|
||
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 +
|
||
'<div class="result-members">' + worksHTML + '</div>'
|
||
);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<script src="../assets/js/particles.js"></script>
|
||
<script src="../assets/js/portal-nav.js"></script>
|
||
</body>
|
||
|
||
</html>
|