283 lines
10 KiB
HTML
283 lines
10 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 {
|
||
min-height: 52px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 14px 20px;
|
||
border-radius: 12px;
|
||
background: var(--color-surface-soft);
|
||
border: 1px solid rgba(255, 204, 0, 0.25);
|
||
font-size: 1.05rem;
|
||
font-weight: 700;
|
||
color: var(--color-brand-dark);
|
||
letter-spacing: 0.02em;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.bangxiao-page .checker-result:empty {
|
||
display: none;
|
||
}
|
||
|
||
@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" data-score="0">
|
||
<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" data-score="0">
|
||
<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" data-score="0">
|
||
<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" data-score="0">
|
||
<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" data-score="0">
|
||
<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" data-score="0">
|
||
<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 scores = {
|
||
jiwon: 0,
|
||
jaejin: 0,
|
||
jaeduck: 0,
|
||
sunghoon: 0,
|
||
suwon: 0,
|
||
jiyong: 0,
|
||
};
|
||
|
||
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.text('先勾一個本命吧！');
|
||
return;
|
||
}
|
||
|
||
let total = 0;
|
||
checked.each(function () {
|
||
total += scores[$(this).val()];
|
||
});
|
||
|
||
const names = checked.map(function () {
|
||
return $(this).siblings('.member-check__name').text();
|
||
}).get().join('、');
|
||
|
||
resultEl.text(
|
||
'本命是 ' + names + '，你總共有 ' + total + ' 個節目要補，慢慢養老吧！'
|
||
);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<script src="../assets/js/particles.js"></script>
|
||
<script src="../assets/js/portal-nav.js"></script>
|
||
</body>
|
||
|
||
</html>
|