style: 移除裝飾性標籤，改純文字呈現
This commit is contained in:
@@ -10,7 +10,7 @@
|
||||
<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>
|
||||
/* Bootstrap Reboot 還原（同 index-bootstrap.html） */
|
||||
/* Bootstrap Reboot 還原 */
|
||||
body.crystal-dance-page {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
@@ -18,19 +18,7 @@
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
dd,
|
||||
blockquote,
|
||||
hr {
|
||||
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, blockquote, hr {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -40,152 +28,228 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ── 頁面專用（scoped） ── */
|
||||
body.crystal-dance-page section>p {
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.85;
|
||||
max-width: 760px;
|
||||
text-align: left;
|
||||
margin-bottom: 0.85rem;
|
||||
/* 標題與內文：拉開垂直節奏，避免擠在一起 */
|
||||
body.crystal-dance-page .section-title {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page section>p:last-of-type {
|
||||
body.crystal-dance-page .section-title::after {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .section-body {
|
||||
max-width: 760px;
|
||||
margin: 0 auto 2.5rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .section-body p,
|
||||
body.crystal-dance-page .form-lead {
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.9;
|
||||
text-align: left;
|
||||
margin-bottom: 1.15rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .section-body p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .form-lead {
|
||||
max-width: 760px;
|
||||
margin: 0 auto 2.5rem;
|
||||
}
|
||||
|
||||
/* ① 認識區 */
|
||||
body.crystal-dance-page #about {
|
||||
text-align: center;
|
||||
padding-bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .category-tag {
|
||||
display: inline-block;
|
||||
background: var(--color-brand-light);
|
||||
color: var(--color-brand-dark);
|
||||
padding: 0.35rem 1.1rem;
|
||||
padding: 0.35rem 1.15rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .hero-banner {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 760px;
|
||||
max-width: 100%;
|
||||
aspect-ratio: 21 / 9;
|
||||
object-fit: cover;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 204, 0, 0.28);
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
|
||||
margin: 0 auto 1.25rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 204, 0, 0.22);
|
||||
margin: 0 auto 2.25rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page #about .section-title {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .keyword-row {
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
margin: 2.25rem auto 2.5rem;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .keyword-chip {
|
||||
font-weight: 700;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
background: var(--color-brand-light);
|
||||
color: var(--color-brand-dark);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
padding: 0.4rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 204, 0, 0.35);
|
||||
}
|
||||
|
||||
body.crystal-dance-page .page-nav-wrap {
|
||||
margin: 1.75rem auto 0;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .page-nav-list {
|
||||
/* 頁內導覽：深色底條（對照參考圖） */
|
||||
body.crystal-dance-page .page-nav-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 4px 0;
|
||||
gap: 0.25rem 0;
|
||||
margin: 0 -36px;
|
||||
padding: 0.95rem 1.5rem;
|
||||
background: var(--color-bg-raised);
|
||||
border-top: 1px solid rgba(255, 204, 0, 0.2);
|
||||
}
|
||||
|
||||
body.crystal-dance-page .page-nav-link {
|
||||
display: inline-block;
|
||||
padding: 4px 14px;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 1px;
|
||||
border-right: 1px solid rgba(255, 204, 0, 0.3);
|
||||
body.crystal-dance-page .page-nav-bar a {
|
||||
color: var(--color-brand);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 0.2rem 0.85rem;
|
||||
border-right: 1px solid rgba(255, 204, 0, 0.25);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .page-nav-link:last-child {
|
||||
body.crystal-dance-page .page-nav-bar a:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .page-nav-link:hover {
|
||||
color: var(--color-brand);
|
||||
body.crystal-dance-page .page-nav-bar a:hover {
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
|
||||
/* ② 影片區：主影片與下方三欄同寬對齊 */
|
||||
body.crystal-dance-page .video-grid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .sub-section-title {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 1.25rem;
|
||||
font-weight: 800;
|
||||
color: var(--color-brand-dark);
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.05rem;
|
||||
text-align: center;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .video-label {
|
||||
display: block;
|
||||
color: var(--color-brand-dark);
|
||||
font-weight: 800;
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .card--main-video {
|
||||
max-width: 720px;
|
||||
margin: 1.5rem auto 0;
|
||||
body.crystal-dance-page .video-feature {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .card .ratio {
|
||||
body.crystal-dance-page .video-feature .video-label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .video-feature .ratio,
|
||||
body.crystal-dance-page .video-thumb .ratio {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 204, 0, 0.18);
|
||||
}
|
||||
|
||||
body.crystal-dance-page .video-thumb {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .video-thumb .video-label {
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .countdown-note {
|
||||
display: block;
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 2.5rem;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
color: var(--color-brand-dark);
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--color-surface-soft);
|
||||
border-radius: 999px;
|
||||
max-width: 420px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .form-lead {
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.85;
|
||||
max-width: 760px;
|
||||
text-align: left;
|
||||
margin: 0 auto 1.75rem;
|
||||
/* ③ 表單區：單欄直排 */
|
||||
body.crystal-dance-page .form-stack {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .form-label {
|
||||
font-weight: 700;
|
||||
color: var(--color-brand-dark);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .form-stack .col-12 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .form-control,
|
||||
body.crystal-dance-page .form-select {
|
||||
border: 1.5px solid var(--color-brand-light);
|
||||
border-radius: 12px;
|
||||
padding: 0.65rem 0.9rem;
|
||||
border: 1px solid rgba(255, 204, 0, 0.35);
|
||||
border-radius: 10px;
|
||||
padding: 0.6rem 0.85rem;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .form-control:focus,
|
||||
body.crystal-dance-page .form-select:focus {
|
||||
border-color: var(--color-brand-dark);
|
||||
box-shadow: 0 0 0 0.2rem rgba(255, 204, 0, 0.25);
|
||||
border-color: var(--color-brand);
|
||||
box-shadow: 0 0 0 0.2rem rgba(255, 204, 0, 0.2);
|
||||
}
|
||||
|
||||
body.crystal-dance-page .form-control[type="file"] {
|
||||
border-style: dashed;
|
||||
cursor: pointer;
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
body.crystal-dance-page .form-text {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .btn-outline-dance {
|
||||
@@ -193,10 +257,12 @@
|
||||
color: var(--color-brand-dark);
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
padding: 0.4rem 1.15rem;
|
||||
font-size: 0.88rem;
|
||||
padding: 0.38rem 1rem;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .btn-check:checked+.btn-outline-dance,
|
||||
body.crystal-dance-page .btn-check:checked + .btn-outline-dance,
|
||||
body.crystal-dance-page .btn-outline-dance:hover {
|
||||
background: var(--color-brand);
|
||||
color: var(--color-brand-dark);
|
||||
@@ -206,10 +272,11 @@
|
||||
body.crystal-dance-page .btn-dance {
|
||||
background: var(--color-brand);
|
||||
color: var(--color-brand-dark);
|
||||
border: 2px solid var(--color-brand-dark);
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
font-weight: 800;
|
||||
padding: 0.75rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .btn-dance:hover {
|
||||
@@ -220,49 +287,65 @@
|
||||
body.crystal-dance-page .btn-reset-dance {
|
||||
background: #fff;
|
||||
color: var(--color-brand-dark);
|
||||
border: 2px solid var(--color-brand-dark);
|
||||
border: 1.5px solid var(--color-brand-dark);
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
padding: 0.75rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .btn-reset-dance:hover {
|
||||
background: #fdecec;
|
||||
border-color: #dc3545;
|
||||
color: #dc3545;
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
/* 填寫須知：表單上方單欄提示區 */
|
||||
body.crystal-dance-page .info-panel {
|
||||
background: var(--color-surface-soft);
|
||||
border: 1px solid rgba(255, 204, 0, 0.22);
|
||||
border-radius: 14px;
|
||||
padding: 1.5rem 1.75rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .info-panel h3 {
|
||||
font-weight: 800;
|
||||
color: var(--color-brand-dark);
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .info-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 1.25rem;
|
||||
margin: 0 0 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .info-list li {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .info-footer-text {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.85;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page #about {
|
||||
text-align: center;
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
body.crystal-dance-page .page-nav-bar {
|
||||
margin: 0 -20px;
|
||||
padding: 0.85rem 1rem;
|
||||
}
|
||||
|
||||
body.crystal-dance-page #about>p {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
body.crystal-dance-page .sub-section-title--flush {
|
||||
margin-top: 0;
|
||||
body.crystal-dance-page .page-nav-bar a {
|
||||
font-size: 0.76rem;
|
||||
padding: 0.2rem 0.55rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -288,75 +371,81 @@
|
||||
<span class="category-tag">水晶男孩推廣部・舞蹈應援企劃</span>
|
||||
<img class="hero-banner" src="../assets/images/crystal-dance-hero.jpg" alt="水晶熱舞社應援視覺">
|
||||
<h2 class="section-title">水晶熱舞社不是一般社團</h2>
|
||||
<p>水晶熱舞社是水晶男孩推廣部中的舞蹈應援企劃，從 20TH
|
||||
台灣小黃串燒聯舞的集體記憶出發，整理經典舞台、翻跳紀錄與應援行動，並預備在 2027/04/15 30TH 前募集新的參與者。</p>
|
||||
<p>水晶熱舞社不是獨立成立的社團，而是「水晶男孩推廣部」底下的舞蹈、翻跳、應援與影片紀錄分類。凡是跟 SECHSKIES
|
||||
舞台有關的練習、重現與紀錄，都會被收進這個企劃裡，由歷屆台灣小黃接力整理與延續。</p>
|
||||
<div class="keyword-row d-flex flex-wrap justify-content-center gap-2">
|
||||
<div class="section-body">
|
||||
<p>水晶熱舞社是水晶男孩推廣部中的舞蹈應援企劃，從 20TH
|
||||
台灣小黃串燒聯舞的集體記憶出發，整理經典舞台、翻跳紀錄與應援行動，並預備在 2027/04/15 30TH 前募集新的參與者。</p>
|
||||
<p>水晶熱舞社不是獨立成立的社團，而是「水晶男孩推廣部」底下的舞蹈、翻跳、應援與影片紀錄分類。凡是跟 SECHSKIES
|
||||
舞台有關的練習、重現與紀錄，都會被收進這個企劃裡，由歷屆台灣小黃接力整理與延續。</p>
|
||||
</div>
|
||||
<div class="keyword-row">
|
||||
<span class="keyword-chip">💛 經典舞台</span>
|
||||
<span class="keyword-chip">🕺 應援舞蹈</span>
|
||||
<span class="keyword-chip">🎥 翻跳紀錄</span>
|
||||
<span class="keyword-chip">💃 串燒聯舞</span>
|
||||
<span class="keyword-chip">🇹🇼 台灣小黃</span>
|
||||
</div>
|
||||
<nav class="page-nav-wrap" aria-label="頁面導覽">
|
||||
<div class="page-nav-list">
|
||||
<a href="#about" class="page-nav-link">認識熱舞社</a>
|
||||
<a href="#from-20th-to-30th" class="page-nav-link">20TH 到 30TH</a>
|
||||
<a href="#form-30th" class="page-nav-link">應援表單</a>
|
||||
</div>
|
||||
<nav class="page-nav-bar" aria-label="頁面導覽">
|
||||
<a href="#about">認識熱舞社</a>
|
||||
<a href="#from-20th-to-30th">20TH 到 30TH</a>
|
||||
<a href="#form-30th">應援表單</a>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<!-- ② 從 20TH 到 30TH -->
|
||||
<section id="from-20th-to-30th">
|
||||
<h2 class="section-title">從 20TH 到 30TH</h2>
|
||||
<p>2017 年，台灣小黃以水晶男孩出道 20 周年為契機，籌辦了經典歌曲串燒聯舞應援。這不只是一次跳舞活動，而是把青春、等待、回歸與重新相遇濃縮在同一支影片裡的集體記憶。</p>
|
||||
<p>水晶熱舞社希望延續這份記憶，將 20TH 的熱血行動整理成可以被再次看見的紀錄，也為 2027/04/15 的 30TH 應援企劃預留新的開始。</p>
|
||||
|
||||
<div class="card card--main-video">
|
||||
<span class="video-label">20TH 正式影片</span>
|
||||
<div class="ratio ratio-16x9">
|
||||
<iframe src="https://www.youtube.com/embed/fkJmOMPirBc" title="20TH 正式影片：SECHSKIES 20週年紀念串燒舞蹈"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="section-body">
|
||||
<p>2017 年，台灣小黃以水晶男孩出道 20 周年為契機，籌辦了經典歌曲串燒聯舞應援。這不只是一次跳舞活動，而是把青春、等待、回歸與重新相遇濃縮在同一支影片裡的集體記憶。</p>
|
||||
<p>水晶熱舞社希望延續這份記憶，將 20TH 的熱血行動整理成可以被再次看見的紀錄，也為 2027/04/15 的 30TH 應援企劃預留新的開始。</p>
|
||||
</div>
|
||||
|
||||
<h3 class="sub-section-title">延伸閱讀</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="card h-100">
|
||||
<span class="video-label">預告</span>
|
||||
<div class="ratio ratio-16x9">
|
||||
<iframe src="https://www.youtube.com/embed/ARi0cfpv6mE" title="20TH 預告影片"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="video-grid">
|
||||
<div class="video-feature">
|
||||
<span class="video-label">20TH 正式影片</span>
|
||||
<div class="ratio ratio-16x9">
|
||||
<iframe src="https://www.youtube.com/embed/fkJmOMPirBc" title="20TH 正式影片：SECHSKIES 20週年紀念串燒舞蹈"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="card h-100">
|
||||
<span class="video-label">幕後花絮 #1</span>
|
||||
<div class="ratio ratio-16x9">
|
||||
<iframe src="https://www.youtube.com/embed/nygNm5mtsJM" title="幕後花絮 #1"
|
||||
allowfullscreen></iframe>
|
||||
|
||||
<h3 class="sub-section-title">延伸閱讀</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="video-thumb">
|
||||
<span class="video-label">預告</span>
|
||||
<div class="ratio ratio-16x9">
|
||||
<iframe src="https://www.youtube.com/embed/ARi0cfpv6mE" title="20TH 預告影片"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="card h-100">
|
||||
<span class="video-label">幕後花絮 #2・雨中共舞</span>
|
||||
<div class="ratio ratio-16x9">
|
||||
<iframe src="https://www.youtube.com/embed/f04neSErUEY" title="幕後花絮 #2・雨中共舞"
|
||||
allowfullscreen></iframe>
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="video-thumb">
|
||||
<span class="video-label">幕後花絮 #1</span>
|
||||
<div class="ratio ratio-16x9">
|
||||
<iframe src="https://www.youtube.com/embed/nygNm5mtsJM" title="幕後花絮 #1"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="video-thumb">
|
||||
<span class="video-label">幕後花絮 #2・雨中共舞</span>
|
||||
<div class="ratio ratio-16x9">
|
||||
<iframe src="https://www.youtube.com/embed/f04neSErUEY" title="幕後花絮 #2・雨中共舞"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="sub-section-title">30TH 應援募集</h3>
|
||||
<p>2027/04/15 是 SECHSKIES 出道 30 周年的日子。水晶熱舞社預計在 30TH
|
||||
前重新整理舞蹈應援內容，募集想一起參與的台灣小黃，從經典舞曲、翻跳練習、影片剪輯到祝福文字，讓新的應援行動從這份表單開始累積。</p>
|
||||
<p>你不需要一開始就很會跳舞，只要還記得水晶男孩的舞台、歌曲，或某個讓你入坑的瞬間，都可以在這裡留下你的參與方式。</p>
|
||||
<div class="section-body">
|
||||
<p>2027/04/15 是 SECHSKIES 出道 30 周年的日子。水晶熱舞社預計在 30TH
|
||||
前重新整理舞蹈應援內容，募集想一起參與的台灣小黃，從經典舞曲、翻跳練習、影片剪輯到祝福文字，讓新的應援行動從這份表單開始累積。</p>
|
||||
<p>你不需要一開始就很會跳舞，只要還記得水晶男孩的舞台、歌曲，或某個讓你入坑的瞬間，都可以在這裡留下你的參與方式。</p>
|
||||
</div>
|
||||
<span class="countdown-note" id="countdown">💛 距離 30TH · 2027/04/15 倒數計算中...</span>
|
||||
</section>
|
||||
|
||||
@@ -365,126 +454,118 @@
|
||||
<h2 class="section-title">30TH 應援募集表單</h2>
|
||||
<p class="form-lead">這份表單是水晶熱舞社為 2027/04/15 30TH 預備的應援募集模組，用來整理參與者想練的歌曲、可支援的內容與想留下的祝福。</p>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-sm-7">
|
||||
<div class="card h-100">
|
||||
<h3 class="sub-section-title sub-section-title--flush">📋 應援募集資訊</h3>
|
||||
<form action="#">
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-sm-6">
|
||||
<label for="nickname" class="form-label">暱稱</label>
|
||||
<input type="text" class="form-control" id="nickname" name="nickname"
|
||||
placeholder="例：熱舞小黃" required>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<label for="email" class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="email" name="email"
|
||||
placeholder="dance@example.com" required>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<label for="dance_years" class="form-label">練舞經驗年數</label>
|
||||
<input type="number" class="form-control" id="dance_years" name="dance_years"
|
||||
min="0" max="30" placeholder="0">
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<label for="available_date" class="form-label">可參與日期</label>
|
||||
<input type="date" class="form-control" id="available_date" name="available_date">
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label d-block">是否參加過 20TH</label>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<input type="radio" class="btn-check" name="attended_20th"
|
||||
id="attended_20th_yes" value="attended" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="attended_20th_yes">參加過 20TH</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="attended_20th"
|
||||
id="attended_20th_video" value="watched_video" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="attended_20th_video">看過 20TH
|
||||
影片</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="attended_20th"
|
||||
id="attended_20th_first" value="first_time" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="attended_20th_first">第一次知道</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label d-block">想參與的 30TH 內容（可複選）</label>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<input type="checkbox" class="btn-check" name="participate_content"
|
||||
id="content_cover" value="cover" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="content_cover">翻跳</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" name="participate_content"
|
||||
id="content_medley" value="medley" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="content_medley">串燒聯舞</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" name="participate_content"
|
||||
id="content_blessing" value="blessing" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="content_blessing">祝福影片</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" name="participate_content"
|
||||
id="content_graphic" value="graphic" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="content_graphic">圖文應援</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" name="participate_content"
|
||||
id="content_editing" value="editing" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="content_editing">影片剪輯</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" name="participate_content"
|
||||
id="content_archive" value="archive" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="content_archive">資料整理</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<label for="song" class="form-label">想練的歌曲</label>
|
||||
<select class="form-select" id="song" name="song">
|
||||
<option value="" selected>請選擇歌曲</option>
|
||||
<option value="couple">Couple</option>
|
||||
<option value="comeback">Com' Back</option>
|
||||
<option value="road_fighter">Road Fighter</option>
|
||||
<option value="pom_saeng_pom_sa">Pom Saeng Pom Sa</option>
|
||||
<option value="other">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<label for="reference_file" class="form-label">上傳參考影片或圖片</label>
|
||||
<input class="form-control" type="file" id="reference_file" name="reference_file"
|
||||
accept="image/*,video/*">
|
||||
<div class="form-text">翻跳影片、舞台照片或剪輯素材皆可</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label for="message_30th" class="form-label">想對 30TH 說的話</label>
|
||||
<textarea class="form-control" id="message_30th" name="message_30th" rows="4"
|
||||
placeholder="想對水晶熱舞社說的話、想貢獻的部分、想見到誰、想留下的祝福……"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid d-sm-flex gap-3 mt-4">
|
||||
<button type="reset"
|
||||
class="btn btn-reset-dance flex-fill order-2 order-sm-1">重新填寫</button>
|
||||
<button type="submit"
|
||||
class="btn btn-dance flex-fill order-1 order-sm-2">送出應援表單 💛</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="form-stack">
|
||||
<div class="info-panel">
|
||||
<h3>填寫須知</h3>
|
||||
<ul class="info-list">
|
||||
<li>📎 檔案格式：影片或圖片皆可，建議單檔 100MB 以內</li>
|
||||
<li>🔒 這份資料僅供水晶熱舞社內部整理 30TH 應援企劃使用</li>
|
||||
<li>📅 送出後若確定參與，之後會另行公告練習與錄製時間</li>
|
||||
</ul>
|
||||
<p class="info-footer-text">水晶男孩推廣部・30TH 應援企劃</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-5">
|
||||
<div class="card h-100">
|
||||
<h3 class="sub-section-title sub-section-title--flush">填寫須知</h3>
|
||||
<ul class="info-list">
|
||||
<li>📎 檔案格式：影片或圖片皆可，建議單檔 100MB 以內</li>
|
||||
<li>🔒 這份資料僅供水晶熱舞社內部整理 30TH 應援企劃使用</li>
|
||||
<li>📅 送出後若確定參與，之後會另行公告練習與錄製時間</li>
|
||||
</ul>
|
||||
<p class="info-footer-text">水晶男孩推廣部・30TH 應援企劃</p>
|
||||
<form action="#">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-sm-6">
|
||||
<label for="nickname" class="form-label">暱稱</label>
|
||||
<input type="text" class="form-control" id="nickname" name="nickname"
|
||||
placeholder="例：熱舞小黃" required>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<label for="email" class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="email" name="email"
|
||||
placeholder="dance@example.com" required>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<label for="dance_years" class="form-label">練舞經驗年數</label>
|
||||
<input type="number" class="form-control" id="dance_years" name="dance_years"
|
||||
min="0" max="30" placeholder="0">
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<label for="available_date" class="form-label">可參與日期</label>
|
||||
<input type="date" class="form-control" id="available_date" name="available_date">
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label d-block">是否參加過 20TH</label>
|
||||
<div class="d-flex flex-wrap gap-2 mt-1">
|
||||
<input type="radio" class="btn-check" name="attended_20th"
|
||||
id="attended_20th_yes" value="attended" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="attended_20th_yes">參加過 20TH</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="attended_20th"
|
||||
id="attended_20th_video" value="watched_video" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="attended_20th_video">看過 20TH 影片</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="attended_20th"
|
||||
id="attended_20th_first" value="first_time" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="attended_20th_first">第一次知道</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label d-block">想參與的 30TH 內容（可複選）</label>
|
||||
<div class="d-flex flex-wrap gap-2 mt-1">
|
||||
<input type="checkbox" class="btn-check" name="participate_content"
|
||||
id="content_cover" value="cover" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="content_cover">翻跳</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" name="participate_content"
|
||||
id="content_medley" value="medley" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="content_medley">串燒聯舞</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" name="participate_content"
|
||||
id="content_blessing" value="blessing" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="content_blessing">祝福影片</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" name="participate_content"
|
||||
id="content_graphic" value="graphic" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="content_graphic">圖文應援</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" name="participate_content"
|
||||
id="content_editing" value="editing" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="content_editing">影片剪輯</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" name="participate_content"
|
||||
id="content_archive" value="archive" autocomplete="off">
|
||||
<label class="btn btn-outline-dance" for="content_archive">資料整理</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<label for="song" class="form-label">想練的歌曲</label>
|
||||
<select class="form-select" id="song" name="song">
|
||||
<option value="" selected>請選擇歌曲</option>
|
||||
<option value="couple">Couple</option>
|
||||
<option value="comeback">Com' Back</option>
|
||||
<option value="road_fighter">Road Fighter</option>
|
||||
<option value="pom_saeng_pom_sa">Pom Saeng Pom Sa</option>
|
||||
<option value="other">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<label for="reference_file" class="form-label">上傳參考影片或圖片</label>
|
||||
<input class="form-control" type="file" id="reference_file" name="reference_file"
|
||||
accept="image/*,video/*">
|
||||
<div class="form-text">翻跳影片、舞台照片或剪輯素材皆可</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label for="message_30th" class="form-label">想對 30TH 說的話</label>
|
||||
<textarea class="form-control" id="message_30th" name="message_30th" rows="4"
|
||||
placeholder="想對水晶熱舞社說的話、想貢獻的部分、想見到誰、想留下的祝福……"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid d-sm-flex gap-3 mt-5">
|
||||
<button type="reset"
|
||||
class="btn btn-reset-dance flex-fill order-2 order-sm-1">重新填寫</button>
|
||||
<button type="submit"
|
||||
class="btn btn-dance flex-fill order-1 order-sm-2">送出應援表單 💛</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user