diff --git a/yellow-note/crystal-dance-survey.backup-2026-07-09.html b/yellow-note/crystal-dance-survey.backup-2026-07-09.html
new file mode 100644
index 0000000..459b4ab
--- /dev/null
+++ b/yellow-note/crystal-dance-survey.backup-2026-07-09.html
@@ -0,0 +1,724 @@
+
+
+
+
+
+
+ 瘞湔?瑕酋?典誨?剁?瘞湔?梯?蝷?/title>
+ <link rel="stylesheet" href="../assets/css/style.css">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
+ <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 ??敺???靽風嚗? index-bootstrap.html ??嚗?
+ Bootstrap Reboot ?函?璅惜?豢??券?閮?body嚗?憿?畾菔嚗??嚗? ?ㄐ?典?????撖怠 Bootstrap 敺??璅惜?豢??函??蝡??祆?潘?
+ 銝?韐? .section-title ?? class ?豢??剁?銝蔣?踵?隞見撘??? */
+ body {
+ background-color: var(--color-bg);
+ color: var(--color-text);
+ font-family: 'Noto Sans TC', 'Microsoft JhengHei', system-ui, sans-serif;
+ line-height: 1.6;
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p,
+ ul,
+ ol,
+ dl,
+ dd,
+ blockquote,
+ hr {
+ margin: 0;
+ padding: 0;
+ }
+
+ a {
+ color: var(--color-text);
+ text-decoration: none;
+ }
+
+ /* 瘞湔?梯?蝷橘?瘞湔?瑕酋?典誨?冽?銝?頩??港??? 憿銝敺?朣蝡?color-tokens嚗?-color-brand 蝟餃?嚗?銝?菔??*/
+ :root {
+ --dance-yellow: var(--color-brand);
+ --dance-yellow-light: var(--color-brand-light);
+ --dance-yellow-dark: var(--color-brand-dark);
+ --dance-ink: var(--color-brand-dark);
+ }
+
+ /* 憭扳?摨?嚗???函??蝷曉??閬死嚗??芾????銝??函??梁??header.jpg */
+ body.crystal-dance-page header.inner-page-header {
+ background-image: url('../assets/images/crystal-dance-hero.jpg');
+ background-position: center 68%;
+ }
+
+ /* ?? Hero ?嚗窒??inner-page-header ?嗡蜓璅??ㄐ?芣撘????批?閬踝? ?? */
+ .crystal-dance-hero {
+ text-align: center;
+ }
+
+ .crystal-dance-hero .category-tag {
+ display: inline-block;
+ background: var(--dance-yellow-light);
+ color: var(--dance-ink);
+ padding: .35rem 1.1rem;
+ border-radius: 999px;
+ font-size: .8rem;
+ font-weight: 700;
+ letter-spacing: 1px;
+ margin-bottom: 1rem;
+ }
+
+ .crystal-dance-hero .hero-desc {
+ color: var(--color-text-muted);
+ line-height: 1.85;
+ max-width: 640px;
+ margin: 0 auto 1.5rem;
+ }
+
+ .crystal-dance-hero .quick-nav {
+ display: flex;
+ flex-wrap: nowrap;
+ overflow-x: auto;
+ justify-content: center;
+ gap: .6rem;
+ padding: .25rem 0 .5rem;
+ }
+
+ .crystal-dance-hero .quick-nav a {
+ white-space: nowrap;
+ text-decoration: none;
+ }
+
+ /* --- ?挾?賢?冽?憿見撘?--- */
+ .section-alt {
+ background: rgba(255, 204, 0, 0.08);
+ }
+
+ .section-kicker {
+ font-weight: 800;
+ color: var(--dance-yellow-dark);
+ letter-spacing: 2px;
+ font-size: .85rem;
+ text-transform: uppercase;
+ margin-bottom: .5rem;
+ }
+
+ .crystal-dance-page .section-title {
+ text-align: left;
+ margin-bottom: 1.1rem;
+ }
+
+ .section-lead {
+ color: var(--color-text-muted);
+ line-height: 1.85;
+ max-width: 760px;
+ }
+
+ .section-lead+.section-lead {
+ margin-top: .9rem;
+ }
+
+ /* --- 瘣餃?銝餉?閬?/ 銵典 Banner --- */
+ .event-banner {
+ background: linear-gradient(135deg, var(--dance-yellow) 0%, var(--dance-yellow-light) 100%);
+ border-radius: 24px;
+ padding: 2.25rem 2.5rem;
+ text-align: center;
+ color: var(--dance-ink);
+ box-shadow: 0 12px 30px rgba(255, 204, 0, .25);
+ }
+
+ .event-banner .event-badge {
+ display: inline-block;
+ background: var(--dance-ink);
+ color: var(--dance-yellow-light);
+ padding: .35rem 1.1rem;
+ border-radius: 999px;
+ font-size: .8rem;
+ font-weight: 700;
+ letter-spacing: 1px;
+ margin-bottom: .9rem;
+ }
+
+ .event-banner h2 {
+ font-weight: 900;
+ letter-spacing: 3px;
+ font-size: 1.9rem;
+ margin-bottom: .6rem;
+ }
+
+ .event-banner p {
+ margin: 0 auto;
+ font-weight: 600;
+ letter-spacing: .5px;
+ max-width: 640px;
+ }
+
+ /* --- ?梯?蝷曆?蝝對??摮?chip --- */
+ .keyword-row {
+ margin-top: 1.5rem;
+ }
+
+ .keyword-chip {
+ background: #fff;
+ border: 1.5px solid var(--dance-yellow);
+ border-radius: 999px;
+ padding: .5rem 1.1rem;
+ font-weight: 700;
+ color: var(--dance-ink);
+ display: inline-flex;
+ align-items: center;
+ gap: .4rem;
+ }
+
+ /* --- 20TH 敶梁??“ --- */
+ .video-card {
+ background: #fff;
+ border: 1.5px solid var(--dance-yellow);
+ border-radius: 16px;
+ padding: 1rem;
+ height: 100%;
+ box-shadow: 0 6px 18px rgba(255, 204, 0, .1);
+ }
+
+ .video-tag {
+ display: inline-block;
+ background: var(--dance-yellow-dark);
+ color: #fff;
+ font-weight: 700;
+ font-size: .75rem;
+ padding: .3rem .8rem;
+ border-radius: 999px;
+ margin-bottom: .75rem;
+ }
+
+ .video-card .ratio {
+ border-radius: 10px;
+ overflow: hidden;
+ }
+
+ /* --- 蝬?? --- */
+ .song-card {
+ background: #fff;
+ border: 1.5px solid var(--dance-yellow);
+ border-radius: 16px;
+ padding: 1.5rem;
+ height: 100%;
+ box-shadow: 0 6px 18px rgba(255, 204, 0, .1);
+ }
+
+ .song-card h4 {
+ color: var(--dance-yellow-dark);
+ font-weight: 800;
+ margin-bottom: .8rem;
+ }
+
+ .song-card .song-meta {
+ font-size: .78rem;
+ font-weight: 800;
+ color: var(--dance-ink);
+ background: var(--dance-yellow-light);
+ display: inline-block;
+ padding: .15rem .6rem;
+ border-radius: 999px;
+ margin-bottom: .4rem;
+ }
+
+ .song-card p {
+ font-size: .9rem;
+ color: var(--color-text-muted);
+ line-height: 1.7;
+ margin-bottom: .9rem;
+ }
+
+ /* --- 30TH ?隡? --- */
+ .countdown-strip {
+ background: var(--dance-ink);
+ color: var(--dance-yellow-light);
+ border-radius: 16px;
+ padding: .9rem 1.5rem;
+ display: inline-flex;
+ align-items: center;
+ gap: .6rem;
+ font-weight: 800;
+ letter-spacing: 1px;
+ margin-top: 1.5rem;
+ }
+
+ /* --- 30TH ???銵典 --- */
+ .form-intro {
+ background: var(--color-surface-soft);
+ border-left: 4px solid var(--dance-yellow-dark);
+ padding: 1rem 1.25rem;
+ border-radius: 0 12px 12px 0;
+ color: var(--dance-ink);
+ font-weight: 600;
+ margin-bottom: 1.75rem;
+ }
+
+ .form-panel {
+ background: #fff;
+ border: 1.5px solid var(--dance-yellow);
+ border-radius: 20px;
+ padding: 2rem;
+ height: 100%;
+ box-shadow: 0 8px 24px rgba(255, 204, 0, .12);
+ }
+
+ .panel-title {
+ font-weight: 800;
+ color: var(--dance-yellow-dark);
+ margin-bottom: 1.5rem;
+ font-size: 1.3rem;
+ }
+
+ .form-label {
+ font-weight: 700;
+ color: var(--dance-ink);
+ }
+
+ .form-control,
+ .form-select {
+ border: 1.5px solid var(--color-brand-light);
+ border-radius: 12px;
+ padding: .65rem .9rem;
+ }
+
+ .form-control:focus,
+ .form-select:focus {
+ border-color: var(--dance-yellow-dark);
+ box-shadow: 0 0 0 .2rem rgba(255, 204, 0, .25);
+ }
+
+ .form-control[type="file"] {
+ border-style: dashed;
+ cursor: pointer;
+ }
+
+ .form-text {
+ color: var(--color-text-muted);
+ }
+
+ /* 頨思遢 / ?閎隞交??? radio?heckbox ?嚗??身憭??湔餈?撖虫??? */
+ .btn-outline-dance {
+ border: 1.5px solid var(--dance-yellow-dark);
+ color: var(--dance-yellow-dark);
+ border-radius: 999px;
+ font-weight: 600;
+ padding: .4rem 1.15rem;
+ }
+
+ .btn-check:checked+.btn-outline-dance,
+ .btn-outline-dance:hover {
+ background: var(--dance-yellow);
+ color: var(--dance-ink);
+ border-color: var(--dance-yellow-dark);
+ }
+
+ .btn-dance {
+ background: var(--dance-yellow);
+ color: var(--dance-ink);
+ border: 2px solid var(--dance-yellow-dark);
+ border-radius: 999px;
+ font-weight: 800;
+ padding: .75rem;
+ }
+
+ .btn-dance:hover {
+ background: var(--dance-yellow-dark);
+ color: #fff;
+ }
+
+ .btn-reset-dance {
+ background: #fff;
+ color: var(--dance-yellow-dark);
+ border: 2px solid var(--dance-yellow-dark);
+ border-radius: 999px;
+ font-weight: 700;
+ padding: .75rem;
+ }
+
+ .btn-reset-dance:hover {
+ background: #fdecec;
+ border-color: #dc3545;
+ color: #dc3545;
+ }
+
+ /* --- 憛怠神???--- */
+ .info-card {
+ background: linear-gradient(160deg, var(--dance-ink) 0%, var(--color-bg-raised) 100%);
+ color: var(--dance-yellow-light);
+ border-radius: 20px;
+ padding: 2rem;
+ height: 100%;
+ box-shadow: 0 8px 24px rgba(78, 73, 43, .3);
+ }
+
+ .info-tag {
+ display: inline-block;
+ background: var(--dance-yellow);
+ color: var(--dance-ink);
+ padding: .3rem 1rem;
+ border-radius: 999px;
+ font-size: .75rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ }
+
+ .info-card h3 {
+ color: #fff;
+ font-weight: 800;
+ margin-bottom: 1rem;
+ }
+
+ .info-list {
+ list-style: none;
+ padding: 0;
+ margin: 0 0 1.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: .6rem;
+ }
+
+ .info-list li {
+ background: rgba(255, 255, 255, .08);
+ padding: .6rem 1rem;
+ border-radius: 12px;
+ font-weight: 600;
+ font-size: .9rem;
+ line-height: 1.5;
+ }
+
+ .info-footer {
+ display: flex;
+ flex-wrap: wrap;
+ gap: .5rem;
+ }
+
+ .mini-badge {
+ border: 1px solid var(--dance-yellow);
+ color: var(--dance-yellow-light);
+ padding: .25rem .8rem;
+ border-radius: 999px;
+ font-size: .75rem;
+ }
+
+ @media (max-width: 575.98px) {
+ .event-banner {
+ padding: 1.75rem 1.25rem;
+ border-radius: 18px;
+ }
+
+ .event-banner h2 {
+ font-size: 1.5rem;
+ letter-spacing: 1px;
+ }
+
+ .form-panel,
+ .info-card {
+ padding: 1.5rem;
+ }
+ }
+ </style>
+</head>
+
+<body class="crystal-dance-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">SECHSKIES DANCE ARCHIVE & 30TH FAN PROJECT</span>
+ </div>
+ </div>
+ </header>
+
+ <nav class="portal-nav" aria-label="瘞湔?瑕酋?典誨?典?閬? data-portal-nav></nav>
+
+ <canvas id="particles"></canvas>
+
+ <main class="content-container crystal-dance-main">
+
+ <section class="crystal-dance-hero">
+ <span class="category-tag">瘞湔?瑕酋?典誨?具???隡?</span>
+ <p class="hero-desc">瘞湔?梯?蝷暹瘞湔?瑕酋?典誨?其葉??頩??港???敺?20TH
+ ?啁撠?銝脩??航???擃??嗅?潘??渡?蝬??蕃頝喟????銵?嚗蒂????2027/04/15 30TH ???????/p>
+
+ <nav class="quick-nav" aria-label="?撠汗">
+ <a href="#about" class="btn btn-outline-dance btn-sm">02 ?梯?蝷曆?蝝?/a>
+ <a href="#throwback-20th" class="btn btn-outline-dance btn-sm">03 20TH 敶梁??“</a>
+ <a href="#song-archive" class="btn btn-outline-dance btn-sm">04 蝬??</a>
+ <a href="#project-30th" class="btn btn-outline-dance btn-sm">05 30TH ?隡?</a>
+ <a href="#form-30th" class="btn btn-outline-dance btn-sm">06 ???銵典</a>
+ </nav>
+ </section>
+
+ <!-- 02 ?梯?蝷曆?蝝?-->
+ <section id="about" class="section-alt">
+ <div class="section-kicker">02 繚 ?梯?蝷曆?蝝?/div>
+ <h2 class="section-title">瘞湔?梯?蝷曆??臭??祉冗??/h2>
+ <p class="section-lead">瘞湔?梯?蝷曆??舐蝡?蝡?蝷曉?嚗?偌?嗥摮拇撱???銝????蕃頝喋??渲?敶梁?蝝??憿?航? SECHSKIES
+ ????毀蝧??曇?蝝???賣?鋡急?脤??ㄐ嚗甇瑕??啁撠??亙??渡??辣蝥?/p>
+ <div class="keyword-row d-flex flex-wrap gap-2">
+ <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>
+ </section>
+
+ <!-- 03 20TH 敶梁??“ -->
+ <section id="throwback-20th">
+ <div class="section-kicker">03 繚 20TH 敶梁??“</div>
+ <h2 class="section-title">20TH 敶梁??“</h2>
+ <p class="section-lead">2017 撟湛??啁撠?隞交偌?嗥摮拙??20 ?典僑?箏?璈?蝐齒鈭??豢??脖葡????氬??芣銝甈∟歲?暑??????乓?敺?甇貉???賊?瞈葬?典?銝?臬蔣?ㄐ??擃??嗚?/p>
+ <p class="section-lead">瘞湔?梯?蝷曉??辣蝥遢閮嚗? 20TH ?銵銵??渡??隞亥◤?活??????銋 2027/04/15 ??30TH ?隡????啁?????/p>
+
+ <div class="row g-4 mt-1">
+ <div class="col-12 col-sm-6">
+ <div class="video-card">
+ <span class="video-tag">20TH ??敶梁?</span>
+ <div class="ratio ratio-16x9">
+ <iframe src="https://www.youtube.com/embed/ARi0cfpv6mE" title="20TH ??敶梁?"
+ allowfullscreen></iframe>
+ </div>
+ </div>
+ </div>
+ <div class="col-12 col-sm-6">
+ <div class="video-card">
+ <span class="video-tag">20TH 甇??敶梁?</span>
+ <div class="ratio ratio-16x9">
+ <iframe src="https://www.youtube.com/embed/fkJmOMPirBc" title="20TH 甇??敶梁?"
+ allowfullscreen></iframe>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- 04 蝬?? -->
+ <section id="song-archive" class="section-alt">
+ <div class="section-kicker">04 繚 蝬??</div>
+ <h2 class="section-title">蝬??</h2>
+ <p class="section-lead">隞乩??撟暸??冽??渲?蝧餉歲銝剜?撣詨?曄??嚗???30TH 蝺渡??葡??楊?????柴?/p>
+
+ <div class="row g-4 mt-1">
+ <div class="col-12 col-sm-6 col-lg-3">
+ <div class="song-card">
+ <span class="song-meta">??啗情</span>
+ <h4>Couple</h4>
+ <p>頛翰???望??嚗??貊??犖鈭?韏唬?嚗虜鋡怠?脫風撟渡????嗆捏?毽?芸蔣?ㄐ??/p>
+ <span class="song-meta">?拙???</span>
+ <p>??憟質???敶Ｚ???銴?嚗??拙??嗡???????脩??/p>
+ </div>
+ </div>
+ <div class="col-12 col-sm-6 col-lg-3">
+ <div class="song-card">
+ <span class="song-meta">??啗情</span>
+ <h4>Com' Back</h4>
+ <p>?飛?隞?”?脖?銝嚗?憟?敹怒??撘瘀?敺捆?葆??湔除瘞?/p>
+ <span class="song-meta">?拙???</span>
+ <p>?舀????折?嚗停蝞蝚砌?甈∪????渡?撠?銋敹恍?銝?/p>
+ </div>
+ </div>
+ <div class="col-12 col-sm-6 col-lg-3">
+ <div class="song-card">
+ <span class="song-meta">??啗情</span>
+ <h4>Road Fighter</h4>
+ <p>??撟漲憭扼?憟?敹恬??舫???暺???嚗??唳除?Ｗ?頞喋?/p>
+ <span class="song-meta">?拙???</span>
+ <p>?拙?撌脫??箇?????蝺渲絲靘??擛交?嚗??拙??曉銝脩???頠詻?/p>
+ </div>
+ </div>
+ <div class="col-12 col-sm-6 col-lg-3">
+ <div class="song-card">
+ <span class="song-meta">??啗情</span>
+ <h4>Pom Saeng Pom Sa</h4>
+ <p>??敺??朣?敶ｇ??舫?甇甇瑕僑蝧餉歲銝剛◤??憭活????銝??/p>
+ <span class="song-meta">?拙???</span>
+ <p>颲刻?摨阡?嚗?其葡???銝剜挾敺捆???勗?湔除瘞?/p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- 05 30TH ?隡? -->
+ <section id="project-30th">
+ <div class="section-kicker">05 繚 30TH ?隡?</div>
+ <h2 class="section-title">30TH ???</h2>
+ <p class="section-lead">2027/04/15 ??SECHSKIES ?粹? 30 ?典僑?摮偌?嗥?冗????30TH
+ ???唳??頩??游摰對????喃?韏瑕????啁撠?嚗?蝬??蕃頝喟毀蝧蔣?頛臬蟡???嚗??啁??銵?敺遢銵典??蝝舐???/p>
+ <p class="section-lead">雿??閬???撠勗??歲???芾???敺偌?嗥摮拍?????莎?????雿???祇?嚗?臭誑?券ㄐ??雿????孵???/p>
+ <div class="countdown-strip" id="countdown">?? 頝 30TH 繚 2027/04/15 ?閮?銝?..</div>
+ </section>
+
+ <!-- 06 30TH ???銵典 -->
+ <section id="form-30th" class="section-alt">
+ <div class="section-kicker">06 繚 30TH ???銵典</div>
+
+ <div class="event-banner mb-4">
+ <span class="event-badge">?? SECHSKIES 30TH 繚 2027.04.15</span>
+ <h2>30TH ???銵典</h2>
+ <p>?遢銵典?舀偌?嗥?冗??2027/04/15 30TH ?????游??芋蝯??其??渡????蝺渡?甇??舀?摰寡??喟?銝?蟡???/p>
+ </div>
+
+ <div class="row g-4">
+ <div class="col-12 col-sm-7">
+ <div class="form-panel">
+ <h3 class="panel-title">?? ???鞈?</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>
+
+ <div class="col-12 col-sm-5">
+ <div class="info-card">
+ <span class="info-tag">憛怠神?</span>
+ <h3>???蝣箄?銝銝?/h3>
+ <ul class="info-list">
+ <li>?? 瑼??澆?嚗蔣?????嚗遣霅啣瑼?100MB 隞亙</li>
+ <li>?? ?遢鞈???瘞湔?梯?蝷曉?冽??30TH ?隡?雿輻</li>
+ <li>?? ?敺蝣箏???嚗?敺??西??砍?蝺渡???鋆賣???/li>
+ </ul>
+ <div class="info-footer">
+ <span class="mini-badge">瘞湔?瑕酋?典誨??/span>
+ <span class="mini-badge">30TH ?隡?</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ </main>
+
+ <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>
+
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script src="../assets/js/particles.js"></script>
+ <script src="../assets/js/portal-nav.js"></script>
+ <script>
+ (function () {
+ var target = new Date('2027-04-15T00:00:00+08:00');
+ var now = new Date();
+ var diffDays = Math.ceil((target - now) / (1000 * 60 * 60 * 24));
+ var el = document.getElementById('countdown');
+ if (el) {
+ el.textContent = diffDays > 0
+ ? '?? 頝 30TH 繚 2027/04/15 ?? ' + diffDays + ' 憭?
+ : '?? 30TH 繚 2027/04/15 撌脩??唬?嚗?韏瑕???嚗?;
+ }
+ })();
+ </script>
+</body>
+
+</html>
diff --git a/yellow-note/crystal-dance-survey.html b/yellow-note/crystal-dance-survey.html
index 0b34f6d..d392153 100644
--- a/yellow-note/crystal-dance-survey.html
+++ b/yellow-note/crystal-dance-survey.html
@@ -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>