Compare commits
10
Commits
b09271ab96
..
main
| Author | SHA1 | Date | |
|---|---|---|---|
  jekkinoopyandClaude Sonnet 5
|
782cf3637e | ||
|
jekkinoopyandClaude Sonnet 5
|
0faebc8e88 | ||
|
jekkinoopy
|
7f06886440 | ||
|
jekkinoopy
|
b57df6897a | ||
|
jekkinoopy
|
6996fb2fb3 | ||
|
jekkinoopy
|
31497c4d31 | ||
|
jekkinoopy
|
c8b886e550 | ||
|
jekkinoopy
|
604fb26cb2 | ||
|
jekkinoopy
|
f9f068f517 | ||
|
jekkinoopy
|
d7367c3298 |
@@ -0,0 +1,59 @@
|
|||||||
|
/* yellow-note/fan-articles.html：小黃文章典藏頁面專屬版型 */
|
||||||
|
|
||||||
|
.fan-articles-intro {
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fan-articles-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
max-width: 42rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fan-article-card {
|
||||||
|
border-left: 4px solid var(--color-brand);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fan-article-card__meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
padding-bottom: 0.6rem;
|
||||||
|
border-bottom: 1px solid rgba(255, 204, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fan-article-card__board {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-brand-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fan-article-card__title {
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
font-size: 1.35rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-text-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fan-article-card__author {
|
||||||
|
margin: 0 0 0.9rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fan-article-card p:not(.fan-article-card__author) {
|
||||||
|
color: var(--color-text);
|
||||||
|
line-height: 1.75;
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fan-article-card p:last-of-type {
|
||||||
|
margin-bottom: 1.2rem;
|
||||||
|
}
|
||||||
@@ -92,9 +92,10 @@
|
|||||||
|
|
||||||
/* albums/albums.html：.archive-block 已改為 <section>，沿用 style.css 的 section 卡片版型 */
|
/* albums/albums.html：.archive-block 已改為 <section>，沿用 style.css 的 section 卡片版型 */
|
||||||
section.archive-block p {
|
section.archive-block p {
|
||||||
|
font-size: 1.0625rem;
|
||||||
color: #4a4a4a;
|
color: #4a4a4a;
|
||||||
line-height: 1.7;
|
line-height: 1.75;
|
||||||
margin: 0 0 0.75rem;
|
margin: 0 0 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.archive-block p:last-child {
|
section.archive-block p:last-child {
|
||||||
|
|||||||
@@ -0,0 +1,109 @@
|
|||||||
|
/* yellow-note/pitch-map.html：頁面專屬版型（頁內索引、精選標籤卡、影音嵌入） */
|
||||||
|
|
||||||
|
/* 本頁 .card 皆作為 <a> 使用，蓋掉瀏覽器預設連結底線／藍字（本檔僅此頁引用，不影響全站 .card） */
|
||||||
|
a.card {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-index {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 24px;
|
||||||
|
margin: 0 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-index a {
|
||||||
|
color: var(--color-brand-dark);
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-index a:hover {
|
||||||
|
border-bottom-color: var(--color-brand);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-section {
|
||||||
|
margin-bottom: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-highlights,
|
||||||
|
.pitch-map-links {
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-highlight {
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-highlight i {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--color-brand);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-highlight h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
color: #2e2e2e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-highlight p {
|
||||||
|
margin: 0;
|
||||||
|
color: #585858;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-media {
|
||||||
|
max-width: 42rem;
|
||||||
|
margin: 2rem auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-video-note {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-embed {
|
||||||
|
margin: 2rem auto;
|
||||||
|
max-width: 42rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-embed iframe {
|
||||||
|
width: 100%;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-embed--video {
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-embed--video iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-yellowkies-intro {
|
||||||
|
max-width: 42rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pitch-map-yellowkies-intro i {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--color-brand);
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 0.3rem;
|
||||||
|
}
|
||||||
+53
-21
@@ -269,7 +269,7 @@ nav a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 子選單第一項（如淪陷瞬間／傳奇的轉折）上方不畫分隔線 */
|
/* 子選單第一項（如淪陷瞬間／傳奇的轉折）上方不畫分隔線 */
|
||||||
.portal-nav .portal-submenu > li.portal-nav__subgroup:first-child {
|
.portal-nav .portal-submenu>li.portal-nav__subgroup:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
@@ -1027,6 +1027,51 @@ footer {
|
|||||||
margin: 15px auto 0;
|
margin: 15px auto 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 全站共用：跟首頁 #start 對齊的正文間距（h2.section-title 後接的敘述段落／列表）。
|
||||||
|
可套在包住多個 <p> 的容器上，也可直接加在單一 <p> 上。 */
|
||||||
|
.section-copy {
|
||||||
|
max-width: 42rem;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-copy p,
|
||||||
|
p.section-copy {
|
||||||
|
font-size: 1.0625rem;
|
||||||
|
line-height: 1.75;
|
||||||
|
color: #4a4a4a;
|
||||||
|
/* margin: 0 0 1.125rem; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-copy p:last-child,
|
||||||
|
p.section-copy:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-copy ul {
|
||||||
|
margin: 0.5rem 0 0;
|
||||||
|
padding-left: 1.2rem;
|
||||||
|
color: #4a4a4a;
|
||||||
|
line-height: 1.75;
|
||||||
|
font-size: 1.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-copy ul li {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-copy ul li:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
|
||||||
|
.section-copy p,
|
||||||
|
p.section-copy,
|
||||||
|
.section-copy ul {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.subtitle-wrap {
|
.subtitle-wrap {
|
||||||
margin: 4px auto 28px;
|
margin: 4px auto 28px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -2821,7 +2866,7 @@ body.ebook-ssg2-page .ebook-intro.section p.ebook-intro-note {
|
|||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.ebook-ssg2-page .ebook-intro.section p.ebook-intro-lead + p.ebook-intro-note {
|
body.ebook-ssg2-page .ebook-intro.section p.ebook-intro-lead+p.ebook-intro-note {
|
||||||
margin-top: -0.5rem;
|
margin-top: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -3788,28 +3833,28 @@ body.site-guide-page .sg-node--extra.sg-node--nolink {
|
|||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.site-guide-page .site-guide-mindmap li[data-site-guide-depth="1"] > .sg-node {
|
body.site-guide-page .site-guide-mindmap li[data-site-guide-depth="1"]>.sg-node {
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
font-size: 0.98rem;
|
font-size: 0.98rem;
|
||||||
background: rgba(255, 220, 150, 0.55);
|
background: rgba(255, 220, 150, 0.55);
|
||||||
border-color: rgba(255, 204, 0, 0.6);
|
border-color: rgba(255, 204, 0, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
body.site-guide-page .site-guide-mindmap li[data-site-guide-depth="2"] > .sg-node {
|
body.site-guide-page .site-guide-mindmap li[data-site-guide-depth="2"]>.sg-node {
|
||||||
background: rgba(255, 238, 200, 0.55);
|
background: rgba(255, 238, 200, 0.55);
|
||||||
}
|
}
|
||||||
|
|
||||||
body.site-guide-page .site-guide-mindmap li[data-site-guide-depth="3"] > .sg-node {
|
body.site-guide-page .site-guide-mindmap li[data-site-guide-depth="3"]>.sg-node {
|
||||||
background: #fffaf2;
|
background: #fffaf2;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.site-guide-page .site-guide-mindmap li[data-site-guide-depth="4"] > .sg-node {
|
body.site-guide-page .site-guide-mindmap li[data-site-guide-depth="4"]>.sg-node {
|
||||||
background: #f5f8ff;
|
background: #f5f8ff;
|
||||||
font-size: 0.82rem;
|
font-size: 0.82rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 延伸內容維持灰色虛線，不隨深度套用金黃底色（放在深度規則之後以蓋過同層底色） */
|
/* 延伸內容維持灰色虛線，不隨深度套用金黃底色（放在深度規則之後以蓋過同層底色） */
|
||||||
body.site-guide-page .site-guide-mindmap li[data-site-guide-depth] > .sg-node--extra {
|
body.site-guide-page .site-guide-mindmap li[data-site-guide-depth]>.sg-node--extra {
|
||||||
background: rgba(0, 0, 0, 0.02);
|
background: rgba(0, 0, 0, 0.02);
|
||||||
border-color: rgba(0, 0, 0, 0.22);
|
border-color: rgba(0, 0, 0, 0.22);
|
||||||
}
|
}
|
||||||
@@ -4082,25 +4127,12 @@ body.minister-page .minister-hero-lead .mark_b {
|
|||||||
color: var(--color-brand-light);
|
color: var(--color-brand-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
body.minister-page .variety-block .intro-text {
|
|
||||||
color: #333;
|
|
||||||
line-height: 1.9;
|
|
||||||
margin: 0 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.minister-page .variety-block .slogan-quote--awakening+.intro-text {
|
body.minister-page .variety-block .slogan-quote--awakening+.intro-text {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.minister-page .minister-skill-list {
|
body.minister-page .minister-skill-list {
|
||||||
margin: 0.75rem 0 0;
|
list-style: none;
|
||||||
padding-left: 1.2rem;
|
|
||||||
color: #333;
|
|
||||||
line-height: 1.75;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.minister-page .minister-skill-list li {
|
|
||||||
margin-bottom: 0.85rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* hashtag 膠囊：minister.html 與 home-page（minister_ge .hashtag-chip）共用 */
|
/* hashtag 膠囊：minister.html 與 home-page（minister_ge .hashtag-chip）共用 */
|
||||||
|
|||||||
Binary file not shown.
@@ -242,7 +242,7 @@
|
|||||||
|
|
||||||
/** 全站導覽 HTML — `rp` 為站根相對前綴；僅修改此模板即可同步所有頁面
|
/** 全站導覽 HTML — `rp` 為站根相對前綴；僅修改此模板即可同步所有頁面
|
||||||
* 五主項固定：淪陷瞬間、完整的六顆、現場的震撼、黃色留聲機、Yellow Note，不得再開第 6 個頂層項目。
|
* 五主項固定：淪陷瞬間、完整的六顆、現場的震撼、黃色留聲機、Yellow Note，不得再開第 6 個頂層項目。
|
||||||
* 世紀級寶藏收在「淪陷瞬間」子選單內；小黃練習室收在「Yellow Note」子選單內（見 site-guide.html 心智圖）。 */
|
* 世紀級寶藏收在「淪陷瞬間」子選單內；YELLOW WAVE（外連 sechskies_fans，原小黃練習室）收在「Yellow Note」子選單內（見 site-guide.html 心智圖）。 */
|
||||||
function buildPortalNavInnerHTML(rp) {
|
function buildPortalNavInnerHTML(rp) {
|
||||||
return `
|
return `
|
||||||
<a class="logo" target="_blank" rel="noopener noreferrer" href="${rp}index.html"><img src="${rp}assets/images/logov.svg" alt="SECHSKIES Logo"></a>
|
<a class="logo" target="_blank" rel="noopener noreferrer" href="${rp}index.html"><img src="${rp}assets/images/logov.svg" alt="SECHSKIES Logo"></a>
|
||||||
@@ -283,9 +283,11 @@
|
|||||||
</li>
|
</li>
|
||||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/minister.html"><span class="portal-nav__label">Yellow Note</span></a>
|
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/minister.html"><span class="portal-nav__label">Yellow Note</span></a>
|
||||||
<ul class="portal-submenu">
|
<ul class="portal-submenu">
|
||||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/minister.html"><span class="portal-nav__label">視覺進化論</span></a></li>
|
<li><a href="#" data-coming-soon="true" aria-disabled="true" aria-label="應援活動，尚無開放"><span class="portal-nav__label">應援活動</span></a></li>
|
||||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">聖地巡禮</span></a></li>
|
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">聖地巡禮</span></a></li>
|
||||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/practice-room.html"><span class="portal-nav__label">小黃練習室</span></a></li>
|
<li><a target="_blank" rel="noopener noreferrer" href="https://jekkinoopy.github.io/sechskies_fans/"><span class="portal-nav__label">YELLOW WAVE</span></a></li>
|
||||||
|
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/fan-articles.html"><span class="portal-nav__label">篇章拾遺</span></a></li>
|
||||||
|
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/minister.html"><span class="portal-nav__label">水晶傳教士</span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
+14
-9
@@ -129,12 +129,7 @@
|
|||||||
<li data-site-guide-depth="1">
|
<li data-site-guide-depth="1">
|
||||||
<span class="sg-node"><a href="../yellow-note/map.html">Yellow Note</a></span>
|
<span class="sg-node"><a href="../yellow-note/map.html">Yellow Note</a></span>
|
||||||
<ul>
|
<ul>
|
||||||
<li data-site-guide-depth="2">
|
<li data-site-guide-depth="2"><span class="sg-node sg-node--nolink">應援活動（固定籌備中）</span></li>
|
||||||
<span class="sg-node"><a href="../yellow-note/minister.html">視覺進化論</a></span>
|
|
||||||
<ul>
|
|
||||||
<li data-site-guide-depth="3"><span class="sg-node sg-node--extra"><a href="minister_ge.html">minister 長版備份（未列頂欄）</a></span></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li data-site-guide-depth="2">
|
<li data-site-guide-depth="2">
|
||||||
<span class="sg-node"><a href="../yellow-note/map.html">聖地巡禮</a></span>
|
<span class="sg-node"><a href="../yellow-note/map.html">聖地巡禮</a></span>
|
||||||
<ul>
|
<ul>
|
||||||
@@ -142,7 +137,17 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li data-site-guide-depth="2">
|
<li data-site-guide-depth="2">
|
||||||
<span class="sg-node"><a href="../yellow-note/practice-room.html">小黃練習室</a></span>
|
<span class="sg-node sg-node--extra"><a href="https://jekkinoopy.github.io/sechskies_fans/">YELLOW WAVE（外部連結，獨立專案 sechskies_fans，原「小黃練習室」）</a></span>
|
||||||
|
</li>
|
||||||
|
<li data-site-guide-depth="2">
|
||||||
|
<span class="sg-node"><a href="../yellow-note/fan-articles.html">篇章拾遺</a></span>
|
||||||
|
</li>
|
||||||
|
<li data-site-guide-depth="2">
|
||||||
|
<span class="sg-node"><a href="../yellow-note/minister.html">水晶傳教士</a></span>
|
||||||
|
<ul>
|
||||||
|
<li data-site-guide-depth="3"><span class="sg-node sg-node--extra">頁面 h1／title 仍用「視覺進化論」，僅選單標籤改名</span></li>
|
||||||
|
<li data-site-guide-depth="3"><span class="sg-node sg-node--extra"><a href="minister_ge.html">minister 長版備份（未列頂欄）</a></span></li>
|
||||||
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
@@ -168,7 +173,7 @@
|
|||||||
<li data-site-guide-depth="3"><span class="sg-node sg-node--extra"><a href="../s20260612_04_jq_calculator.html">s20260612_04_jq_calculator.html（學校作業）</a></span></li>
|
<li data-site-guide-depth="3"><span class="sg-node sg-node--extra"><a href="../s20260612_04_jq_calculator.html">s20260612_04_jq_calculator.html（學校作業）</a></span></li>
|
||||||
<li data-site-guide-depth="3"><span class="sg-node sg-node--extra"><a href="../sechskies_brand_color_spec.html">sechskies_brand_color_spec.html（品牌色規範）</a></span></li>
|
<li data-site-guide-depth="3"><span class="sg-node sg-node--extra"><a href="../sechskies_brand_color_spec.html">sechskies_brand_color_spec.html（品牌色規範）</a></span></li>
|
||||||
<li data-site-guide-depth="3"><span class="sg-node sg-node--extra"><a href="../totoga2/readable_ebookcontent.html">totoga2/readable_ebookcontent.html（電子書內容草稿）</a></span></li>
|
<li data-site-guide-depth="3"><span class="sg-node sg-node--extra"><a href="../totoga2/readable_ebookcontent.html">totoga2/readable_ebookcontent.html（電子書內容草稿）</a></span></li>
|
||||||
<li data-site-guide-depth="3"><span class="sg-node sg-node--extra"><a href="../vedio/vedio-list.html">vedio/vedio-list.html（深夜清單，追劇進度預覽頁）</a></span></li>
|
<li data-site-guide-depth="3"><span class="sg-node sg-node--extra"><a href="../vedio/vedio-list.html">vedio/vedio-list.html（影片清單，追劇進度預覽頁）</a></span></li>
|
||||||
<li data-site-guide-depth="3"><span class="sg-node sg-node--extra" title="admin/api/back 等 PHP 後台，非靜態站主線">vedio/vedio-list/（追劇清單後台練習，非本站主線）</span></li>
|
<li data-site-guide-depth="3"><span class="sg-node sg-node--extra" title="admin/api/back 等 PHP 後台，非靜態站主線">vedio/vedio-list/（追劇清單後台練習，非本站主線）</span></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
@@ -218,7 +223,7 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">2026-07-30 分岔</th>
|
<th scope="row">2026-07-30 分岔</th>
|
||||||
<td>本機原有 4 個未 push commit（<code>variety/vedio-list.html</code> 深夜清單、<code>concert/captain-aura.html</code>、<code>yellow-note/practice-room.html</code> 等），同時遠端 origin/main 多了 1 個新 commit（<code>calendar2026.html</code> 2026 行事曆頁＋<code>admin/</code> 後台系統，改動 <code>assets/js/map.js</code>、<code>member/member.html</code>）</td>
|
<td>本機原有 4 個未 push commit（<code>variety/vedio-list.html</code> 影片清單、<code>concert/captain-aura.html</code>、<code>yellow-note/practice-room.html</code> 等），同時遠端 origin/main 多了 1 個新 commit（<code>calendar2026.html</code> 2026 行事曆頁＋<code>admin/</code> 後台系統，改動 <code>assets/js/map.js</code>、<code>member/member.html</code>）</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">衝突檔案</th>
|
<th scope="row">衝突檔案</th>
|
||||||
|
|||||||
@@ -351,15 +351,11 @@
|
|||||||
<p>綜藝裡的失控笑聲、戲劇裡的心跳停拍，都值得被好好記下來：看到哪一季、哪一集、哪一句台詞剛把你釘在沙發上。
|
<p>綜藝裡的失控笑聲、戲劇裡的心跳停拍，都值得被好好記下來：看到哪一季、哪一集、哪一句台詞剛把你釘在沙發上。
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
這裡先收兩部最近在追的：一部是把人丟進肯亞還能笑到缺氧的<span class="mark_y">韓綜</span>，
|
把人丟進肯亞還能笑到缺氧的<span class="mark_y">韓綜</span>，把 1997 年的青春寫得又甜又疼的<span class="mark_b">韓劇</span>。
|
||||||
一部是把 1997 年的青春寫得又甜又疼的<span class="mark_b">韓劇</span>。
|
|
||||||
點進去，進度與入口都在；先別急著一次追完，慢慢養也很好看。
|
點進去，進度與入口都在；先別急著一次追完，慢慢養也很好看。
|
||||||
</p>
|
</p>
|
||||||
<!-- <p>
|
<!--此頁為線上靜態預覽。完整資料庫與後台 CRUD（乙級第三題骨架）請本機 XAMPP 匯入
|
||||||
此頁為線上靜態預覽。完整資料庫與後台 CRUD（乙級第三題骨架）請本機 XAMPP 匯入
|
vedio/vedio-list/dramas.sql後，開啟vedio-list/。-->
|
||||||
<code>vedio/vedio-list/dramas.sql</code> 後，開啟
|
|
||||||
<a href="vedio-list/"><code>vedio/vedio-list/</code></a>。
|
|
||||||
</p> -->
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="list-section" aria-labelledby="vedio-list-heading">
|
<section class="list-section" aria-labelledby="vedio-list-heading">
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>深夜清單｜管理後台</title>
|
<title>影片清單｜管理後台</title>
|
||||||
<link rel="stylesheet" href="../../assets/css/style.css">
|
<link rel="stylesheet" href="../../assets/css/style.css">
|
||||||
<link rel="stylesheet" href="css/vedio-list.css">
|
<link rel="stylesheet" href="css/vedio-list.css">
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||||
@@ -14,7 +14,7 @@
|
|||||||
<body class="vedio-admin-page">
|
<body class="vedio-admin-page">
|
||||||
<header class="inner-page-header">
|
<header class="inner-page-header">
|
||||||
<div class="header-inner site-header-inner">
|
<div class="header-inner site-header-inner">
|
||||||
<h1 class="main-title">深夜清單後台</h1>
|
<h1 class="main-title">影片清單後台</h1>
|
||||||
<div class="subtitle-wrap">
|
<div class="subtitle-wrap">
|
||||||
<span class="sub-title">ADMIN · CRUD</span>
|
<span class="sub-title">ADMIN · CRUD</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,11 +1,25 @@
|
|||||||
<?php
|
<?php
|
||||||
|
$error = '';
|
||||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
|
$type = $_POST['type'] ?? '';
|
||||||
|
|
||||||
|
if (!in_array($type, ['variety', 'drama'], true)) {
|
||||||
|
$error = '請選擇正確的類型（綜藝或戲劇）。';
|
||||||
|
} else {
|
||||||
$maxRank = $Drama->q("SELECT MAX(`rank`) AS m FROM `dramas`");
|
$maxRank = $Drama->q("SELECT MAX(`rank`) AS m FROM `dramas`");
|
||||||
$nextRank = ((int)($maxRank[0]['m'] ?? 0)) + 1;
|
$nextRank = ((int)($maxRank[0]['m'] ?? 0)) + 1;
|
||||||
|
|
||||||
|
$posterName = '';
|
||||||
|
if (!empty($_FILES['poster']['name']) && $_FILES['poster']['error'] === UPLOAD_ERR_OK) {
|
||||||
|
$ext = strtolower(pathinfo($_FILES['poster']['name'], PATHINFO_EXTENSION));
|
||||||
|
$posterName = uniqid('poster_') . '.' . $ext;
|
||||||
|
move_uploaded_file($_FILES['poster']['tmp_name'], __DIR__ . '/../uploads/' . $posterName);
|
||||||
|
}
|
||||||
|
|
||||||
$data = [
|
$data = [
|
||||||
'title' => trim($_POST['title'] ?? ''),
|
'title' => trim($_POST['title'] ?? ''),
|
||||||
'type' => $_POST['type'] ?? 'drama',
|
'type' => $type,
|
||||||
|
'poster' => $posterName,
|
||||||
'platform' => $_POST['platform'] ?? '其他',
|
'platform' => $_POST['platform'] ?? '其他',
|
||||||
'watch_url' => trim($_POST['watch_url'] ?? ''),
|
'watch_url' => trim($_POST['watch_url'] ?? ''),
|
||||||
'current_season' => max(1, (int)($_POST['current_season'] ?? 1)),
|
'current_season' => max(1, (int)($_POST['current_season'] ?? 1)),
|
||||||
@@ -28,13 +42,18 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
$Drama->save($data);
|
$Drama->save($data);
|
||||||
to("?do=drama");
|
to("?do=drama");
|
||||||
exit;
|
exit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2 class="section-title">新增作品</h2>
|
<h2 class="section-title">新增作品</h2>
|
||||||
|
|
||||||
<form class="admin-form" method="post" action="?do=add">
|
<?php if ($error): ?>
|
||||||
|
<p class="empty-hint"><?= htmlspecialchars($error, ENT_QUOTES, 'UTF-8') ?></p>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<form class="admin-form" method="post" action="?do=add" enctype="multipart/form-data">
|
||||||
<label for="title">劇名／節目名</label>
|
<label for="title">劇名／節目名</label>
|
||||||
<input type="text" id="title" name="title" required>
|
<input type="text" id="title" name="title" required>
|
||||||
|
|
||||||
@@ -54,7 +73,8 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
<option value="YouTube">YouTube</option>
|
<option value="YouTube">YouTube</option>
|
||||||
<option value="其他">其他</option>
|
<option value="其他">其他</option>
|
||||||
</select>
|
</select>
|
||||||
|
<label for="poster">海報圖片</label>
|
||||||
|
<input type="file" id="poster" name="poster">
|
||||||
<label for="watch_url">直接觀看網址</label>
|
<label for="watch_url">直接觀看網址</label>
|
||||||
<input type="url" id="watch_url" name="watch_url" placeholder="https://...">
|
<input type="url" id="watch_url" name="watch_url" placeholder="https://...">
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,12 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
$row['title'] = trim($_POST['title'] ?? $row['title']);
|
$row['title'] = trim($_POST['title'] ?? $row['title']);
|
||||||
$row['type'] = $_POST['type'] ?? $row['type'];
|
$row['type'] = $_POST['type'] ?? $row['type'];
|
||||||
$row['platform'] = $_POST['platform'] ?? $row['platform'];
|
$row['platform'] = $_POST['platform'] ?? $row['platform'];
|
||||||
|
|
||||||
|
if (!empty($_FILES['poster']['name']) && $_FILES['poster']['error'] === UPLOAD_ERR_OK) {
|
||||||
|
$ext = strtolower(pathinfo($_FILES['poster']['name'], PATHINFO_EXTENSION));
|
||||||
|
$row['poster'] = uniqid('poster_') . '.' . $ext;
|
||||||
|
move_uploaded_file($_FILES['poster']['tmp_name'], __DIR__ . '/../uploads/' . $row['poster']);
|
||||||
|
}
|
||||||
$row['watch_url'] = trim($_POST['watch_url'] ?? '');
|
$row['watch_url'] = trim($_POST['watch_url'] ?? '');
|
||||||
$row['current_season'] = max(1, (int)($_POST['current_season'] ?? 1));
|
$row['current_season'] = max(1, (int)($_POST['current_season'] ?? 1));
|
||||||
$row['current_episode'] = max(0, (int)($_POST['current_episode'] ?? 0));
|
$row['current_episode'] = max(0, (int)($_POST['current_episode'] ?? 0));
|
||||||
@@ -29,7 +35,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
<section>
|
<section>
|
||||||
<h2 class="section-title">編輯作品</h2>
|
<h2 class="section-title">編輯作品</h2>
|
||||||
|
|
||||||
<form class="admin-form" method="post" action="?do=edit&id=<?= (int)$row['id'] ?>">
|
<form class="admin-form" method="post" action="?do=edit&id=<?= (int)$row['id'] ?>" enctype="multipart/form-data">
|
||||||
<label for="title">劇名／節目名</label>
|
<label for="title">劇名／節目名</label>
|
||||||
<input type="text" id="title" name="title" required
|
<input type="text" id="title" name="title" required
|
||||||
value="<?= htmlspecialchars($row['title'], ENT_QUOTES, 'UTF-8') ?>">
|
value="<?= htmlspecialchars($row['title'], ENT_QUOTES, 'UTF-8') ?>">
|
||||||
@@ -52,6 +58,12 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
|
<label for="poster">海報圖片</label>
|
||||||
|
<?php if (!empty($row['poster'])): ?>
|
||||||
|
<img src="../uploads/<?= htmlspecialchars($row['poster'], ENT_QUOTES, 'UTF-8') ?>" alt="" style="max-width:120px;display:block;margin-bottom:0.5rem;">
|
||||||
|
<?php endif; ?>
|
||||||
|
<input type="file" id="poster" name="poster" accept="image/*">
|
||||||
|
|
||||||
<label for="watch_url">直接觀看網址</label>
|
<label for="watch_url">直接觀看網址</label>
|
||||||
<input type="url" id="watch_url" name="watch_url"
|
<input type="url" id="watch_url" name="watch_url"
|
||||||
value="<?= htmlspecialchars($row['watch_url'] ?? '', ENT_QUOTES, 'UTF-8') ?>"
|
value="<?= htmlspecialchars($row['watch_url'] ?? '', ENT_QUOTES, 'UTF-8') ?>"
|
||||||
|
|||||||
@@ -99,6 +99,19 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vedio-list-page .drama-card__poster--image {
|
||||||
|
padding: 0;
|
||||||
|
background: var(--color-surface-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vedio-list-page .drama-card__poster--image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vedio-list-page .drama-card__meta {
|
.vedio-list-page .drama-card__meta {
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
-- 深夜清單 / 追劇資料庫
|
-- 影片清單 / 追劇資料庫
|
||||||
-- 本機 XAMPP：phpMyAdmin 匯入此檔即可
|
-- 本機 XAMPP：phpMyAdmin 匯入此檔即可
|
||||||
|
|
||||||
CREATE DATABASE IF NOT EXISTS `vedio_list` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
|
CREATE DATABASE IF NOT EXISTS `vedio_list` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
|
||||||
|
|||||||
@@ -52,7 +52,13 @@ $rows = $Drama->all($where, " ORDER BY `rank` ASC, `id` ASC");
|
|||||||
$posterLabel = htmlspecialchars(strtoupper($row['platform']) . ' · ' . $typeText, ENT_QUOTES, 'UTF-8');
|
$posterLabel = htmlspecialchars(strtoupper($row['platform']) . ' · ' . $typeText, ENT_QUOTES, 'UTF-8');
|
||||||
?>
|
?>
|
||||||
<article class="drama-card" data-type="<?= htmlspecialchars($row['type'], ENT_QUOTES, 'UTF-8') ?>">
|
<article class="drama-card" data-type="<?= htmlspecialchars($row['type'], ENT_QUOTES, 'UTF-8') ?>">
|
||||||
<div class="drama-card__poster" aria-hidden="true"><?= $posterLabel ?></div>
|
<div class="drama-card__poster<?= !empty($row['poster']) ? ' drama-card__poster--image' : '' ?>" aria-hidden="true">
|
||||||
|
<?php if (!empty($row['poster'])): ?>
|
||||||
|
<img src="uploads/<?= htmlspecialchars($row['poster'], ENT_QUOTES, 'UTF-8') ?>" alt="">
|
||||||
|
<?php else: ?>
|
||||||
|
<?= $posterLabel ?>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
<div class="drama-card__meta">
|
<div class="drama-card__meta">
|
||||||
<span class="drama-tag"><?= htmlspecialchars($typeText, ENT_QUOTES, 'UTF-8') ?></span>
|
<span class="drama-tag"><?= htmlspecialchars($typeText, ENT_QUOTES, 'UTF-8') ?></span>
|
||||||
<span class="drama-tag drama-tag--platform"><?= htmlspecialchars($row['platform'], ENT_QUOTES, 'UTF-8') ?></span>
|
<span class="drama-tag drama-tag--platform"><?= htmlspecialchars($row['platform'], ENT_QUOTES, 'UTF-8') ?></span>
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>水晶男孩｜深夜清單</title>
|
<title>水晶男孩｜影片清單</title>
|
||||||
<link rel="stylesheet" href="../../assets/css/style.css">
|
<link rel="stylesheet" href="../../assets/css/style.css">
|
||||||
<link rel="stylesheet" href="../../assets/css/index.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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
@@ -17,7 +17,7 @@
|
|||||||
<body class="vedio-list-page">
|
<body class="vedio-list-page">
|
||||||
<header class="inner-page-header">
|
<header class="inner-page-header">
|
||||||
<div class="header-inner site-header-inner">
|
<div class="header-inner site-header-inner">
|
||||||
<h1 class="main-title">深夜清單</h1>
|
<h1 class="main-title">影片清單</h1>
|
||||||
<div class="subtitle-wrap">
|
<div class="subtitle-wrap">
|
||||||
<span class="sub-title">DRAMA & VARIETY WATCH LIST</span>
|
<span class="sub-title">DRAMA & VARIETY WATCH LIST</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,65 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-TW">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>SECHSKIES｜小黃文章典藏</title>
|
||||||
|
<link rel="stylesheet" href="../assets/css/style.css">
|
||||||
|
<link rel="stylesheet" href="../assets/css/fan-articles.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">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="fan-articles-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">FAN WRITING ARCHIVE</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||||
|
|
||||||
|
<canvas id="particles"></canvas>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<p class="section-copy fan-articles-intro">
|
||||||
|
散落在各個論壇與社群裡的小黃手記，是站主陸續挖出來的珍貴紀錄。這裡收錄摘要與原文連結，向每一位曾經認真寫下這些文字的小黃致意。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="fan-articles-list">
|
||||||
|
<article class="card fan-article-card">
|
||||||
|
<div class="fan-article-card__meta">
|
||||||
|
<span class="fan-article-card__board">PTT KoreaStar</span>
|
||||||
|
<span class="fan-article-card__date">2016.05.09</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="fan-article-card__title">讓人變廢人的水晶男孩</h2>
|
||||||
|
<p class="fan-article-card__author">l711470（nao）</p>
|
||||||
|
<p>
|
||||||
|
回歸浪潮剛掀起時的深度長文：從 DSP 娛樂當年「專輯只賣 50 萬張」的解散說法談起，逐一點評六人各自的魅力——隊長殷志源的領導力、張水院的獨特氣質、李宰鎮的四次元思維、隱藏成員高志溶的溫暖、主唱姜成勳的顏值歌聲、金在德的忠誠，並向《無限挑戰》讓水晶男孩重回舞台致謝。
|
||||||
|
</p>
|
||||||
|
<a href="fan-articles/水晶男孩-六人六色.html" class="story-external-inline">
|
||||||
|
<span class="story-external-inline__label">閱讀原文</span>
|
||||||
|
<i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
|
||||||
|
</a>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||||||
|
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||||||
|
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="../assets/js/particles.js"></script>
|
||||||
|
<script src="../assets/js/portal-nav.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,438 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-Hant">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>水晶男孩 ‧ 六人六色</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Sans+TC:wght@500;700;900&family=Noto+Serif+TC:wght@400;600&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root{
|
||||||
|
--bg-deep:#0B1220;
|
||||||
|
--bg-panel:#111A2C;
|
||||||
|
--bg-panel-2:#0E1626;
|
||||||
|
--line:rgba(237,237,227,0.12);
|
||||||
|
--ink:#EDEDE3;
|
||||||
|
--muted:#8C97AC;
|
||||||
|
--c-brand:#FFCC00; /* 非成員專屬的通用強調色，對齊全站品牌色 */
|
||||||
|
|
||||||
|
--c-jiwon:#C4CDD6; /* 殷志源 - 隊長 - 銀色 */
|
||||||
|
--c-suwon:#6FC6E8; /* 張水院 - 水藍色 */
|
||||||
|
--c-jaejin:#F0D879; /* 李宰鎮 - 鵝黃色 */
|
||||||
|
--c-jiyong:#3F7A5E; /* 高志溶 - 墨綠色 */
|
||||||
|
--c-sunghun:#E88FB5; /* 姜成勳 - 粉紅色 */
|
||||||
|
--c-jaeduk:#B08968; /* 金在德 - 松鼠色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
*{box-sizing:border-box; margin:0; padding:0;}
|
||||||
|
html{scroll-behavior:smooth;}
|
||||||
|
body{
|
||||||
|
background:var(--bg-deep);
|
||||||
|
color:var(--ink);
|
||||||
|
font-family:'Noto Serif TC', serif;
|
||||||
|
line-height:1.9;
|
||||||
|
-webkit-font-smoothing:antialiased;
|
||||||
|
overflow-x:hidden;
|
||||||
|
}
|
||||||
|
::selection{background:var(--c-brand); color:#0B1220;}
|
||||||
|
|
||||||
|
h1,h2,h3,.disp{font-family:'Noto Sans TC', sans-serif;}
|
||||||
|
.num{font-family:'Bebas Neue', sans-serif; letter-spacing:0.02em;}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce){
|
||||||
|
*{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
|
||||||
|
}
|
||||||
|
|
||||||
|
a{color:inherit;}
|
||||||
|
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}
|
||||||
|
|
||||||
|
/* ---------- 六人六色 分隔條（簽名元素） ---------- */
|
||||||
|
.spectrum{
|
||||||
|
height:6px;
|
||||||
|
width:100%;
|
||||||
|
background:linear-gradient(90deg,
|
||||||
|
var(--c-jiwon) 0 16.66%,
|
||||||
|
var(--c-suwon) 16.66% 33.33%,
|
||||||
|
var(--c-jaejin) 33.33% 50%,
|
||||||
|
var(--c-jiyong) 50% 66.66%,
|
||||||
|
var(--c-sunghun) 66.66% 83.33%,
|
||||||
|
var(--c-jaeduk) 83.33% 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- 側邊六色導覽點 ---------- */
|
||||||
|
.dots{
|
||||||
|
position:fixed; right:22px; top:50%; transform:translateY(-50%);
|
||||||
|
display:flex; flex-direction:column; gap:14px; z-index:50;
|
||||||
|
}
|
||||||
|
.dots a{
|
||||||
|
width:10px; height:10px; border-radius:50%;
|
||||||
|
display:block; border:1px solid rgba(237,237,227,0.35);
|
||||||
|
transition:transform .25s ease, box-shadow .25s ease;
|
||||||
|
}
|
||||||
|
.dots a:hover{transform:scale(1.5);}
|
||||||
|
.dots a:nth-child(1){background:var(--c-jiwon);}
|
||||||
|
.dots a:nth-child(2){background:var(--c-suwon);}
|
||||||
|
.dots a:nth-child(3){background:var(--c-jaejin);}
|
||||||
|
.dots a:nth-child(4){background:var(--c-jiyong);}
|
||||||
|
.dots a:nth-child(5){background:var(--c-sunghun);}
|
||||||
|
.dots a:nth-child(6){background:var(--c-jaeduk);}
|
||||||
|
@media (max-width:760px){.dots{display:none;}}
|
||||||
|
|
||||||
|
/* ---------- HERO ---------- */
|
||||||
|
.hero{
|
||||||
|
position:relative;
|
||||||
|
min-height:100svh;
|
||||||
|
display:flex; flex-direction:column; justify-content:center;
|
||||||
|
padding:120px 0 80px;
|
||||||
|
overflow:hidden;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 60% 50% at 20% 15%, rgba(142,207,239,0.16), transparent 60%),
|
||||||
|
radial-gradient(ellipse 55% 45% at 85% 80%, rgba(196,68,46,0.14), transparent 60%),
|
||||||
|
var(--bg-deep);
|
||||||
|
}
|
||||||
|
.hero::before{
|
||||||
|
content:"";
|
||||||
|
position:absolute; inset:0;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(237,237,227,0.035) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(237,237,227,0.035) 1px, transparent 1px);
|
||||||
|
background-size:64px 64px;
|
||||||
|
mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, black, transparent);
|
||||||
|
}
|
||||||
|
.hero-eyebrow{
|
||||||
|
position:relative; z-index:2;
|
||||||
|
font-family:'Noto Sans TC',sans-serif;
|
||||||
|
font-size:13px; letter-spacing:0.35em; color:var(--muted);
|
||||||
|
margin-bottom:22px; font-weight:700;
|
||||||
|
}
|
||||||
|
.hero h1{
|
||||||
|
position:relative; z-index:2;
|
||||||
|
font-size:clamp(56px, 12vw, 132px);
|
||||||
|
font-weight:900; letter-spacing:0.02em;
|
||||||
|
line-height:0.98;
|
||||||
|
background:linear-gradient(120deg, var(--ink) 40%, var(--c-brand) 65%, var(--ink) 90%);
|
||||||
|
-webkit-background-clip:text; background-clip:text; color:transparent;
|
||||||
|
}
|
||||||
|
.hero-sub{
|
||||||
|
position:relative; z-index:2;
|
||||||
|
margin-top:26px; max-width:640px;
|
||||||
|
font-size:clamp(17px,2.4vw,20px); color:var(--ink); opacity:0.92;
|
||||||
|
}
|
||||||
|
.hero-meta{
|
||||||
|
position:relative; z-index:2;
|
||||||
|
margin-top:56px;
|
||||||
|
display:flex; gap:44px; flex-wrap:wrap;
|
||||||
|
}
|
||||||
|
.hero-meta .item .num{font-size:44px; color:var(--c-brand);}
|
||||||
|
.hero-meta .item .lab{font-size:13px; color:var(--muted); letter-spacing:0.08em; margin-top:2px;}
|
||||||
|
.scrolldown{
|
||||||
|
position:absolute; z-index:2; bottom:34px; left:28px;
|
||||||
|
font-family:'Noto Sans TC',sans-serif; font-size:12px; color:var(--muted);
|
||||||
|
display:flex; align-items:center; gap:10px;
|
||||||
|
}
|
||||||
|
.scrolldown::before{
|
||||||
|
content:""; width:1px; height:38px; background:linear-gradient(var(--c-brand), transparent);
|
||||||
|
animation:pulse 2.2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes pulse{0%,100%{opacity:.3;}50%{opacity:1;}}
|
||||||
|
|
||||||
|
section{padding:110px 0;}
|
||||||
|
.eyebrow{
|
||||||
|
font-family:'Noto Sans TC',sans-serif; font-size:12px; letter-spacing:0.3em;
|
||||||
|
color:var(--muted); font-weight:700; margin-bottom:14px;
|
||||||
|
}
|
||||||
|
.sec-title{font-size:clamp(28px,4vw,42px); font-weight:900; margin-bottom:20px;}
|
||||||
|
.sec-lead{max-width:640px; color:var(--muted); font-size:16px;}
|
||||||
|
|
||||||
|
/* ---------- TIMELINE ---------- */
|
||||||
|
.timeline{background:var(--bg-panel);}
|
||||||
|
.tl-grid{
|
||||||
|
display:grid; grid-template-columns:1fr 1fr; gap:1px;
|
||||||
|
background:var(--line); border:1px solid var(--line); margin-top:56px;
|
||||||
|
border-radius:4px; overflow:hidden;
|
||||||
|
}
|
||||||
|
.tl-col{background:var(--bg-panel); padding:40px 34px;}
|
||||||
|
.tl-col:first-child{background:var(--bg-panel-2);}
|
||||||
|
.tl-year{font-size:15px; letter-spacing:0.15em; color:var(--muted); font-family:'Noto Sans TC',sans-serif; font-weight:700; margin-bottom:8px;}
|
||||||
|
.tl-big{font-family:'Bebas Neue','Noto Sans TC',sans-serif; font-weight:900; font-size:clamp(46px,6vw,72px); color:var(--c-brand); line-height:1;}
|
||||||
|
.tl-col:last-child .tl-big{color:var(--c-brand);}
|
||||||
|
.tl-rows{margin-top:28px; display:flex; flex-direction:column; gap:16px;}
|
||||||
|
.tl-row{display:flex; gap:16px; font-size:14.5px;}
|
||||||
|
.tl-row .k{flex:0 0 64px; color:var(--muted); font-family:'Noto Sans TC',sans-serif; font-weight:700; font-size:13px; letter-spacing:.05em; padding-top:2px;}
|
||||||
|
.tl-row .v{flex:1; color:var(--ink); opacity:0.92;}
|
||||||
|
@media (max-width:720px){.tl-grid{grid-template-columns:1fr;}}
|
||||||
|
|
||||||
|
/* ---------- 六人六色 CHIP INTRO ---------- */
|
||||||
|
.chips-row{
|
||||||
|
display:flex; gap:10px; flex-wrap:wrap; margin-top:40px;
|
||||||
|
}
|
||||||
|
.chip{
|
||||||
|
font-family:'Noto Sans TC',sans-serif; font-size:13px; font-weight:700;
|
||||||
|
padding:9px 18px; border-radius:999px; color:#0B1220;
|
||||||
|
display:flex; align-items:center; gap:8px;
|
||||||
|
box-shadow:0 8px 22px -10px rgba(0,0,0,.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- MEMBERS ---------- */
|
||||||
|
.members{background:var(--bg-deep);}
|
||||||
|
.m-grid{
|
||||||
|
margin-top:56px;
|
||||||
|
display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
|
||||||
|
background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden;
|
||||||
|
}
|
||||||
|
@media (max-width:760px){.m-grid{grid-template-columns:1fr;}}
|
||||||
|
.m-card{
|
||||||
|
background:var(--bg-panel); padding:38px 34px 34px;
|
||||||
|
position:relative; transition:background .3s ease;
|
||||||
|
}
|
||||||
|
.m-card::before{
|
||||||
|
content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
|
||||||
|
background:var(--accent);
|
||||||
|
}
|
||||||
|
.m-card:hover{background:var(--bg-panel-2);}
|
||||||
|
.m-role{
|
||||||
|
font-family:'Noto Sans TC',sans-serif; font-size:11.5px; letter-spacing:0.18em;
|
||||||
|
color:var(--accent); font-weight:700; margin-bottom:10px;
|
||||||
|
}
|
||||||
|
.m-name{font-size:25px; font-weight:900; font-family:'Noto Sans TC',sans-serif;}
|
||||||
|
.m-name en{font-family:'Bebas Neue',sans-serif; font-size:15px; color:var(--muted); font-weight:400; letter-spacing:.06em; margin-left:10px;}
|
||||||
|
.m-desc{margin-top:14px; font-size:14.5px; color:var(--ink); opacity:0.86;}
|
||||||
|
.m-quote{
|
||||||
|
margin-top:16px; font-size:13.5px; color:var(--accent); font-family:'Noto Sans TC',sans-serif;
|
||||||
|
font-weight:700; opacity:0.95;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- DSP 風暴 ---------- */
|
||||||
|
.storm{
|
||||||
|
background:linear-gradient(180deg, var(--bg-panel-2), #0A0F1C);
|
||||||
|
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
|
||||||
|
}
|
||||||
|
.storm .sec-title{color:var(--c-brand);}
|
||||||
|
.storm-body{max-width:720px; margin-top:30px; font-size:16px; color:var(--ink); opacity:0.9;}
|
||||||
|
.storm-body p + p{margin-top:18px;}
|
||||||
|
.storm-stat{
|
||||||
|
margin-top:44px; display:flex; gap:48px; flex-wrap:wrap;
|
||||||
|
border-top:1px solid var(--line); padding-top:32px;
|
||||||
|
}
|
||||||
|
.storm-stat .num{font-size:52px; color:var(--c-brand);}
|
||||||
|
.storm-stat .lab{font-size:13px; color:var(--muted); margin-top:4px; max-width:220px;}
|
||||||
|
|
||||||
|
/* ---------- 迴響 TICKER ---------- */
|
||||||
|
.echo{background:var(--bg-deep); overflow:hidden;}
|
||||||
|
.ticker-track{
|
||||||
|
margin-top:50px; display:flex; gap:40px; white-space:nowrap;
|
||||||
|
animation:scroll-left 42s linear infinite;
|
||||||
|
width:max-content;
|
||||||
|
}
|
||||||
|
.echo:hover .ticker-track{animation-play-state:paused;}
|
||||||
|
@keyframes scroll-left{
|
||||||
|
from{transform:translateX(0);}
|
||||||
|
to{transform:translateX(-50%);}
|
||||||
|
}
|
||||||
|
.ticker-item{
|
||||||
|
font-family:'Noto Sans TC',sans-serif; font-size:16px;
|
||||||
|
padding:14px 26px; border:1px solid var(--line); border-radius:999px;
|
||||||
|
color:var(--ink); opacity:0.88; display:inline-flex; align-items:center; gap:10px;
|
||||||
|
}
|
||||||
|
.ticker-item .dot{width:7px; height:7px; border-radius:50%; flex:0 0 auto;}
|
||||||
|
|
||||||
|
/* ---------- FOOTER ---------- */
|
||||||
|
footer{
|
||||||
|
padding:90px 0 60px; text-align:center; background:var(--bg-panel-2);
|
||||||
|
}
|
||||||
|
footer .line{
|
||||||
|
font-family:'Noto Sans TC',sans-serif; font-size:22px; font-weight:900;
|
||||||
|
margin-bottom:18px;
|
||||||
|
}
|
||||||
|
footer p{color:var(--muted); font-size:13.5px;}
|
||||||
|
footer a.src{
|
||||||
|
display:inline-block; margin-top:18px; font-size:12.5px; color:var(--c-brand);
|
||||||
|
border-bottom:1px solid rgba(142,207,239,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* fade-in on scroll */
|
||||||
|
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
|
||||||
|
.reveal.in{opacity:1; transform:none;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="dots">
|
||||||
|
<a href="#m-jiwon" aria-label="殷志源"></a>
|
||||||
|
<a href="#m-suwon" aria-label="張水院"></a>
|
||||||
|
<a href="#m-jaejin" aria-label="李宰鎮"></a>
|
||||||
|
<a href="#m-jiyong" aria-label="高志溶"></a>
|
||||||
|
<a href="#m-sunghun" aria-label="姜成勳"></a>
|
||||||
|
<a href="#m-jaeduk" aria-label="金在德"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- HERO -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="hero-eyebrow">KOREASTAR ‧ 廢人症候群紀錄</div>
|
||||||
|
<h1>水晶男孩</h1>
|
||||||
|
<p class="hero-sub">成軍僅僅三年，卻讓歌迷足足等了十六年。六個人，六種個性，各自走過不同的命運，卻在同一個舞台上重新合體——這是一篇獻給「六人六色」的告白。</p>
|
||||||
|
<div class="hero-meta">
|
||||||
|
<div class="item"><div class="num">3</div><div class="lab">年 ‧ 成軍時間</div></div>
|
||||||
|
<div class="item"><div class="num">16</div><div class="lab">年 ‧ 空白等待</div></div>
|
||||||
|
<div class="item"><div class="num">4</div><div class="lab">張 ‧ 正規專輯</div></div>
|
||||||
|
<div class="item"><div class="num">6</div><div class="lab">人 ‧ 六色齊聚</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="scrolldown">向下滾動，認識六種顏色</div>
|
||||||
|
</section>
|
||||||
|
<div class="spectrum"></div>
|
||||||
|
|
||||||
|
<!-- TIMELINE -->
|
||||||
|
<section class="timeline">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="eyebrow reveal">TIMELINE</div>
|
||||||
|
<h2 class="sec-title reveal">1997 與 2016，中間隔了一整個時代</h2>
|
||||||
|
<p class="sec-lead reveal">解散的理由，是唱片公司口中「只」賣了五十萬張——後來才知道，那個年代的五十萬張，其實從不是失敗的數字。</p>
|
||||||
|
<div class="tl-grid">
|
||||||
|
<div class="tl-col reveal">
|
||||||
|
<div class="tl-year">1997 — 2000</div>
|
||||||
|
<div class="tl-big num">六人六色</div>
|
||||||
|
<div class="tl-rows">
|
||||||
|
<div class="tl-row"><div class="k">色彩</div><div class="v">個人特色鮮明，六人各自成一種風格，合體才完整</div></div>
|
||||||
|
<div class="tl-row"><div class="k">分組</div><div class="v">團內再分「黑白水晶」，同一組人也能玩出反差</div></div>
|
||||||
|
<div class="tl-row"><div class="k">代表曲</div><div class="v">〈COUPLE〉——十七年後依然能重新登上排行榜的作品</div></div>
|
||||||
|
<div class="tl-row"><div class="k">出道</div><div class="v">出道曲即帶著對社會的犀利提問，並不只是偶像情歌</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tl-col reveal">
|
||||||
|
<div class="tl-year">2016 — 無限挑戰</div>
|
||||||
|
<div class="tl-big num">六六大順</div>
|
||||||
|
<div class="tl-rows">
|
||||||
|
<div class="tl-row"><div class="k">身材</div><div class="v">白色戰袍再度上身，體態幾乎沒有走鐘，主唱依然驚人</div></div>
|
||||||
|
<div class="tl-row"><div class="k">容貌</div><div class="v">歲月幾乎沒有留下痕跡，一眼仍能認出十六年前的臉</div></div>
|
||||||
|
<div class="tl-row"><div class="k">時代</div><div class="v">跟上九零年代復古風潮，重新成為一個被討論的名字</div></div>
|
||||||
|
<div class="tl-row"><div class="k">舞台</div><div class="v">歌迷等待多年的約定終於兌現，應援與舞台再次對稱</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chips-row reveal">
|
||||||
|
<span class="chip" style="background:var(--c-jiwon)">殷志源 ‧ 隊長</span>
|
||||||
|
<span class="chip" style="background:var(--c-suwon)">張水院 ‧ 機器人</span>
|
||||||
|
<span class="chip" style="background:var(--c-jaejin)">李宰鎮 ‧ 四次元</span>
|
||||||
|
<span class="chip" style="background:var(--c-jiyong)">高志溶 ‧ 隱藏版</span>
|
||||||
|
<span class="chip" style="background:var(--c-sunghun)">姜成勳 ‧ 主唱</span>
|
||||||
|
<span class="chip" style="background:var(--c-jaeduk)">金在德 ‧ 頭上星星</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="spectrum"></div>
|
||||||
|
|
||||||
|
<!-- MEMBERS -->
|
||||||
|
<section class="members">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="eyebrow reveal">SIX COLORS</div>
|
||||||
|
<h2 class="sec-title reveal">六人六色，缺一不可</h2>
|
||||||
|
<p class="sec-lead reveal">分開看其實各自很不搭，合在一起卻異常協調——這正是水晶男孩最迷人的地方。</p>
|
||||||
|
|
||||||
|
<div class="m-grid">
|
||||||
|
<div class="m-card reveal" id="m-jiwon" style="--accent:var(--c-jiwon)">
|
||||||
|
<div class="m-role">隊長 ‧ CAPTAIN</div>
|
||||||
|
<div class="m-name">殷志源 <en>EUN JI-WON</en></div>
|
||||||
|
<div class="m-desc">節目上看起來憨厚孩子氣，實際唱功遠比想像中扎實。面對成員詞窮時總能天才般解圍，一句「你要畫就自己畫」看似任性，其實邏輯清楚到讓人無法反駁——這正是隊長的霸氣。</div>
|
||||||
|
<div class="m-quote">"因為是他畫的，所以是他的畫。"</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="m-card reveal" id="m-suwon" style="--accent:var(--c-suwon)">
|
||||||
|
<div class="m-role">機器人演技 ‧ THE STEADY ONE</div>
|
||||||
|
<div class="m-name">張水院 <en>JANG SU-WON</en></div>
|
||||||
|
<div class="m-desc">解散那天沒有哭，理由只是「沒得選擇」。當初帶著「我什麼都不會」的心情加入，卻靠著獨樹一格、不受外貌影響的演技意外走出自己的路，八支以上代言全是靠這份「跟對時代」的坦然。</div>
|
||||||
|
<div class="m-quote">"沒得選擇，所以沒有哭。"</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="m-card reveal" id="m-jaejin" style="--accent:var(--c-jaejin)">
|
||||||
|
<div class="m-role">四次元 ‧ THE WILD CARD</div>
|
||||||
|
<div class="m-name">李宰鎮 <en>LEE JAE-JIN</en></div>
|
||||||
|
<div class="m-desc">思考邏輯常常天馬行空，但神奇的是隊友從不覺得奇怪，甚至能替他翻譯給全世界聽。私底下低調節儉,幾年沉潛之後,終於準備好重新回到螢光幕前。</div>
|
||||||
|
<div class="m-quote">"四次元，但沒人覺得奇怪。"</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="m-card reveal" id="m-jiyong" style="--accent:var(--c-jiyong)">
|
||||||
|
<div class="m-role">隱藏版水晶 ‧ THE HIDDEN ONE</div>
|
||||||
|
<div class="m-name">高志溶 <en>KO JI-YONG</en></div>
|
||||||
|
<div class="m-desc">離開演藝圈多年，過著極度重視隱私的生活，願意重新站上舞台的理由只有一句：「希望這能讓其他成員有更好的發展。」六個人一起跳〈COUPLE〉的那一刻，是整段重聚裡最催淚的畫面。</div>
|
||||||
|
<div class="m-quote">"以為忘了，其實一直都記得。"</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="m-card reveal" id="m-sunghun" style="--accent:var(--c-sunghun)">
|
||||||
|
<div class="m-role">主唱 ‧ THE VOICE</div>
|
||||||
|
<div class="m-name">姜成勳 <en>KANG SUNG-HUN</en></div>
|
||||||
|
<div class="m-desc">容貌與歌聲二十年如一日，〈oh~ love〉甚至唱得比當年更好。經歷過低潮、幾乎快被人遺忘，直到重新站上舞台，那份好嗓音才被再次記起——躺在地上唱情話，這種事大概也只有他做得不尷尬。</div>
|
||||||
|
<div class="m-quote">"甜到爆的 oh~ love。"</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="m-card reveal" id="m-jaeduk" style="--accent:var(--c-jaeduk)">
|
||||||
|
<div class="m-role">頭上的星星 ‧ THE LOYAL ONE</div>
|
||||||
|
<div class="m-name">金在德 <en>KIM JAE-DUK</en></div>
|
||||||
|
<div class="m-desc">團內人氣雖不是最高，卻是解散時哭得最慘的那一個，跳舞永遠最認真。如今在幕後協助隊長經營公司、栽培新人，用另一種方式繼續留在這個舞台旁邊。</div>
|
||||||
|
<div class="m-quote">"用情最深的那一個。"</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="spectrum"></div>
|
||||||
|
|
||||||
|
<!-- DSP 風暴 -->
|
||||||
|
<section class="storm">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="eyebrow reveal">THE OTHER SIDE</div>
|
||||||
|
<h2 class="sec-title reveal">解散的理由，經不起細看</h2>
|
||||||
|
<div class="storm-body reveal">
|
||||||
|
<p>公司高層那句「你們完蛋了」，成了六個人拆夥的關鍵一句話。理由是專輯「只」賣出五十萬張——但在那個年代，五十萬張從來不是滑落的訊號，而是九成同期歌手連摸都摸不到的成績。</p>
|
||||||
|
<p>多年後才傳出，銷售數字其實遠不只五十萬，是公司刻意壓低、方便報稅的說法。成員曾在節目上坦言，當初只是想換一家公司重新出發，從沒想過「解散」會是唯一的選項。</p>
|
||||||
|
<p>諷刺的是，這家公司旗下曾經捧紅過不只一組傳奇——最終卻一次又一次把好牌打到只剩回憶。而六個人選擇的方式，不是抱怨，是把最好的舞台狀態留給等待了十六年的歌迷。</p>
|
||||||
|
</div>
|
||||||
|
<div class="storm-stat">
|
||||||
|
<div><div class="num">50<span style="font-size:22px;">萬張</span></div><div class="lab">當年被說成「賣不動」的專輯銷量</div></div>
|
||||||
|
<div><div class="num">17</div><div class="lab">年後，〈COUPLE〉依然能重登排行榜</div></div>
|
||||||
|
<div><div class="num">6/6</div><div class="lab">全員到齊，缺一不可的合體舞台</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 迴響 -->
|
||||||
|
<section class="echo">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="eyebrow reveal">FAN ECHO</div>
|
||||||
|
<h2 class="sec-title reveal">「廢人症」持續中</h2>
|
||||||
|
<p class="sec-lead reveal">這篇文章底下，滿滿都是同一種症狀——重新愛上水晶男孩，然後再也戒不掉。</p>
|
||||||
|
</div>
|
||||||
|
<div class="ticker-track">
|
||||||
|
<span class="ticker-item"><span class="dot" style="background:var(--c-jiwon)"></span>廢人症持續到現在還沒好轉</span>
|
||||||
|
<span class="ticker-item"><span class="dot" style="background:var(--c-suwon)"></span>每天在等他的 IG 更新</span>
|
||||||
|
<span class="ticker-item"><span class="dot" style="background:var(--c-jaejin)"></span>完全水晶廢人啊，大入主唱大人坑了</span>
|
||||||
|
<span class="ticker-item"><span class="dot" style="background:var(--c-jiyong)"></span>從高志溶出來那刻眼淚就沒停過</span>
|
||||||
|
<span class="ticker-item"><span class="dot" style="background:var(--c-sunghun)"></span>水晶中毒＋1，到現在還在無限循環</span>
|
||||||
|
<span class="ticker-item"><span class="dot" style="background:var(--c-jaeduk)"></span>六人感情真的很好，看了會哭</span>
|
||||||
|
<span class="ticker-item"><span class="dot" style="background:var(--c-jiwon)"></span>廢人症持續到現在還沒好轉</span>
|
||||||
|
<span class="ticker-item"><span class="dot" style="background:var(--c-suwon)"></span>每天在等他的 IG 更新</span>
|
||||||
|
<span class="ticker-item"><span class="dot" style="background:var(--c-jaejin)"></span>完全水晶廢人啊，大入主唱大人坑了</span>
|
||||||
|
<span class="ticker-item"><span class="dot" style="background:var(--c-jiyong)"></span>從高志溶出來那刻眼淚就沒停過</span>
|
||||||
|
<span class="ticker-item"><span class="dot" style="background:var(--c-sunghun)"></span>水晶中毒＋1，到現在還在無限循環</span>
|
||||||
|
<span class="ticker-item"><span class="dot" style="background:var(--c-jaeduk)"></span>六人感情真的很好，看了會哭</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="line">六六大順，水晶男孩</div>
|
||||||
|
<p>一直以為是忘了那樣活，其實從沒忘記那樣活。</p>
|
||||||
|
<a class="src" href="https://www.ptt.cc/bbs/KoreaStar/M.1462808417.A.424.html" target="_blank" rel="noopener">內容改編自 PTT KoreaStar 板原文 →</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const io = new IntersectionObserver((entries)=>{
|
||||||
|
entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });
|
||||||
|
}, {threshold:0.15});
|
||||||
|
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+15
-11
@@ -25,24 +25,23 @@
|
|||||||
<canvas id="particles"></canvas>
|
<canvas id="particles"></canvas>
|
||||||
|
|
||||||
<main class="content-container variety-page-main chronicle-reader minister-main">
|
<main class="content-container variety-page-main chronicle-reader minister-main">
|
||||||
<p class="minister-hero-lead">
|
|
||||||
關於我：<span class="mark_b">從「好奇」到「全端」的進化之路</span>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<section id="intro" class="variety-block">
|
<section id="intro" class="variety-block">
|
||||||
<h2 class="section-title">跨越時空的開端</h2>
|
<h2 class="section-title">跨越時空的開端</h2>
|
||||||
<p class="intro-text">
|
<p class="intro-text section-copy">
|
||||||
這段旅程始於 2016 年 4 月，透過《無限挑戰》的回歸企劃，讓原本不認識這組傳奇團體的我，因一時好奇點開節目。即便錯過了 2000 年巔峰解散的時代，我依然被那份真誠且專業的魅力所震撼。</p>
|
這段旅程始於 2016 年 4 月，透過《無限挑戰》的回歸企劃，讓原本不認識這組傳奇團體的我，因一時好奇點開節目。即便錯過了 2000 年巔峰解散的時代，我依然被那份真誠且專業的魅力所震撼。</p>
|
||||||
<p class="slogan-quote slogan-quote--awakening"><span class="slogan-quote__inner">對我而言，這不只是追星的開始，更是自我覺醒的起點。</span></p>
|
<p class="slogan-quote slogan-quote--awakening"><span
|
||||||
|
class="slogan-quote__inner">對我而言，這不只是追星的開始，更是自我覺醒的起點。</span></p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="slant" class="variety-block">
|
<section id="slant" class="variety-block">
|
||||||
<h2 class="section-title">為了熱愛而進化的斜槓精神</h2>
|
<h2 class="section-title">為了熱愛而進化的斜槓精神</h2>
|
||||||
<p class="intro-text">
|
<p class="intro-text section-copy">
|
||||||
我始於「水晶廢人」的自嘲，卻在熱愛中長成了各個領域的策劃者：
|
始於「水晶廢人字幕組」出現的名詞「水晶廢人」，在熱愛中長成了各個領域的策劃者：
|
||||||
</p>
|
</p>
|
||||||
<ul class="minister-skill-list">
|
<ul class="minister-skill-list section-copy">
|
||||||
<li><span class="minister-hashtag">#水晶推廣部</span>身為品牌設計師，我堅持「不看醜東西」的原則，親自操刀所有視覺，將這份能量轉化為專業策劃。</li>
|
<li><span class="minister-hashtag">#水晶推廣部</span>身為設計總監，我堅持「美感」，親自操刀所有視覺，將這份能量轉化為專業策劃。</li>
|
||||||
<li><span class="minister-hashtag">#水晶訓練營</span>為了聽懂歐巴的每一句話，我開始學韓文、考韓檢、健身、跳舞，證明追星是自我提升最強大的動力。</li>
|
<li><span class="minister-hashtag">#水晶訓練營</span>為了聽懂歐巴的每一句話，我開始學韓文、考韓檢、健身、跳舞，證明追星是自我提升最強大的動力。</li>
|
||||||
<li><span class="minister-hashtag">#全端開發者</span>這是我當下最重要的挑戰，將設計專業與程式技術結合，搭建一個專屬於這份熱愛的數位平台。</li>
|
<li><span class="minister-hashtag">#全端開發者</span>這是我當下最重要的挑戰，將設計專業與程式技術結合，搭建一個專屬於這份熱愛的數位平台。</li>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -62,7 +61,11 @@
|
|||||||
|
|
||||||
<article class="story-node" data-era="2016.08" data-photo-pending="true">
|
<article class="story-node" data-era="2016.08" data-photo-pending="true">
|
||||||
<h3>螢幕後的參與</h3>
|
<h3>螢幕後的參與</h3>
|
||||||
<p>以「<a href="https://www.youtube.com/channel/UCJnhlm_t9C7BmcILcjHDk_w" class="story-external-inline" target="_blank" rel="noopener noreferrer"><span class="story-external-inline__label">水晶廢人字幕組</span><i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>」粉絲身分，用手繪應援板與勾針作品參與應援影片籌備。</p>
|
<p>以「<a href="https://www.youtube.com/channel/UCJnhlm_t9C7BmcILcjHDk_w"
|
||||||
|
class="story-external-inline" target="_blank" rel="noopener noreferrer"><span
|
||||||
|
class="story-external-inline__label">水晶廢人字幕組</span><i
|
||||||
|
class="fa-solid fa-arrow-up-right-from-square"
|
||||||
|
aria-hidden="true"></i></a>」粉絲身分，用手繪應援板與勾針作品參與應援影片籌備。</p>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="story-node" data-era="2016.09" data-photo-pending="true">
|
<article class="story-node" data-era="2016.09" data-photo-pending="true">
|
||||||
@@ -99,7 +102,8 @@
|
|||||||
<h3>415 天健身挑戰</h3>
|
<h3>415 天健身挑戰</h3>
|
||||||
<p>7/13 李宰鎮生日這天，自發性展開為期 415 天的每日健身計畫。也因為知道李宰鎮、張水院都有重訓健身的習慣，這條「水晶健身重訓」的自我要求就更沒有鬆懈的理由。</p>
|
<p>7/13 李宰鎮生日這天，自發性展開為期 415 天的每日健身計畫。也因為知道李宰鎮、張水院都有重訓健身的習慣，這條「水晶健身重訓」的自我要求就更沒有鬆懈的理由。</p>
|
||||||
<figure class="minister-photo">
|
<figure class="minister-photo">
|
||||||
<img src="../assets/images/minister/fitness-calendar.png" alt="健身重訓行事曆" width="1040" height="780" loading="lazy">
|
<img src="../assets/images/minister/fitness-calendar.png" alt="健身重訓行事曆" width="1040"
|
||||||
|
height="780" loading="lazy">
|
||||||
</figure>
|
</figure>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,150 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-TW">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>SECHSKIES｜推坑地圖</title>
|
||||||
|
<link rel="stylesheet" href="../assets/css/style.css">
|
||||||
|
<link rel="stylesheet" href="../assets/css/pitch-map.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">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="pitch-map-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 PITCH GUIDE</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||||
|
|
||||||
|
<canvas id="particles"></canvas>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<nav class="pitch-map-index" aria-label="頁內索引">
|
||||||
|
<a href="#about-sechskies">關於水晶</a>
|
||||||
|
<a href="#about-yellowkies">關於小黃</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section id="about-sechskies" class="pitch-map-section">
|
||||||
|
<h2 class="section-title">ABOUT SECHSKIES｜關於水晶男孩</h2>
|
||||||
|
|
||||||
|
<div class="story-grid pitch-map-highlights">
|
||||||
|
<a class="card pitch-map-highlight" href="../concert/concert.html">
|
||||||
|
<i class="fa-solid fa-star" aria-hidden="true"></i>
|
||||||
|
<h3>暌違16年的等待</h3>
|
||||||
|
<p>所有活動</p>
|
||||||
|
</a>
|
||||||
|
<a class="card pitch-map-highlight" href="../vedio/variety-shows.html">
|
||||||
|
<i class="fa-solid fa-star" aria-hidden="true"></i>
|
||||||
|
<h3>偶像的指南針</h3>
|
||||||
|
<p>精選作品</p>
|
||||||
|
</a>
|
||||||
|
<a class="card pitch-map-highlight" href="../member/member.html">
|
||||||
|
<i class="fa-solid fa-star" aria-hidden="true"></i>
|
||||||
|
<h3>逆齡完顏男團</h3>
|
||||||
|
<p>六顆水晶</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pitch-map-media">
|
||||||
|
<p class="section-copy pitch-map-video-note">
|
||||||
|
《我愛偶像 Idols of Asia》【小黃們集合！】水晶男孩SECHSKIES重啟團體活動 出道20年創下多項紀錄
|
||||||
|
</p>
|
||||||
|
<div class="pitch-map-embed">
|
||||||
|
<iframe src="https://open.spotify.com/embed/playlist/2bM6FlYn3OxNKzfdjre0W7" width="100%"
|
||||||
|
height="380" frameborder="0"
|
||||||
|
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
|
||||||
|
loading="lazy" title="部長精選歌單"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="subtitle-wrap">
|
||||||
|
<span class="sub-title">MILESTONE</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="merged-storyline">
|
||||||
|
<article class="story-node" data-era="1997">
|
||||||
|
<h3>出道即巔峰</h3>
|
||||||
|
<p>水晶男孩 1997 年 4 月 15 日出道，一出道就和 H.O.T（韓國第一支男孩團體，「韓流」的開山鼻祖）平分秋色，為 90
|
||||||
|
年代的歌壇颶風主角。團名是德語的六顆水晶，全盛期也如名字一般閃耀：發行五張專輯、銷售量高達 400
|
||||||
|
萬張、演唱會門票年年售罄、曾獲得 32 次冠軍獎盃，僅三年一個月便取得如此輝煌的成績。</p>
|
||||||
|
</article>
|
||||||
|
<article class="story-node" data-era="2000">
|
||||||
|
<h3>無預警解散</h3>
|
||||||
|
<p>2000 年 5 月 18 日，水晶男孩召開記者會，無預警宣布解散，令粉絲陷入莫大的震驚與悲慟。事業巔峰期做出解散的決定，令外界深感意外不解，歌迷更是無法接受，部分激進歌迷群起橫躺街頭抗議，幾乎成為社會事件。解散的
|
||||||
|
16 年間，六人皆未以水晶男孩名義合體演出。</p>
|
||||||
|
</article>
|
||||||
|
<article class="story-node" data-era="2016">
|
||||||
|
<h3>正式重組回歸</h3>
|
||||||
|
<p>韓國代表性綜藝節目《無限挑戰》製作的特別企劃「星期六星期六我是歌手2」，特別邀請水晶男孩詢問重組意見，並花了不少心力說服離開舞台 16
|
||||||
|
年的團員，一起舉辦了突襲演唱會。節目播出後造成熱烈回響，同年六月，水晶男孩正式重組回歸歌壇。</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="story-grid pitch-map-links">
|
||||||
|
<a class="card" href="../member/member.html">
|
||||||
|
<h3>MEMBER</h3>
|
||||||
|
<p>認識六顆水晶的名字與長相</p>
|
||||||
|
</a>
|
||||||
|
<a class="card" href="../vedio/variety-shows.html">
|
||||||
|
<h3>PORTFOLIO</h3>
|
||||||
|
<p>20 年累積作品裡的精選節目</p>
|
||||||
|
</a>
|
||||||
|
<a class="card" href="../concert/concert.html">
|
||||||
|
<h3>水晶官方活動</h3>
|
||||||
|
<p>官方活動整理與現場舞台</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="about-yellowkies" class="pitch-map-section">
|
||||||
|
<h2 class="section-title">ABOUT YELLOWKIES｜關於小黃</h2>
|
||||||
|
|
||||||
|
<div class="pitch-map-yellowkies-intro">
|
||||||
|
<i class="fa-solid fa-lightbulb" aria-hidden="true"></i>
|
||||||
|
<p class="section-copy">
|
||||||
|
小黃 Yellowkies 是水晶男孩歌迷統稱。因水晶男孩應援色是黃色，粉絲們會穿黃色雨衣、手拿黃色氣球，故被水晶男孩主唱姜成勳暱稱為小黃們。分開
|
||||||
|
16 年的粉絲和偶像的羈絆，也是圈新粉的一大重點；下方影片是韓國阿拉唷和小黃的訪談（3:00–35:40）。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pitch-map-embed pitch-map-embed--video">
|
||||||
|
<iframe src="https://www.youtube.com/embed/YdrMQ6-C_Pw" title="韓國阿拉唷 x 小黃訪談" loading="lazy"
|
||||||
|
allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="story-grid pitch-map-highlights">
|
||||||
|
<a class="card pitch-map-highlight" href="../concert/concert.html">
|
||||||
|
<i class="fa-solid fa-star" aria-hidden="true"></i>
|
||||||
|
<h3>超過16年的喜愛</h3>
|
||||||
|
<p>精選應援</p>
|
||||||
|
</a>
|
||||||
|
<a class="card pitch-map-highlight" href="../index.html#start">
|
||||||
|
<i class="fa-solid fa-star" aria-hidden="true"></i>
|
||||||
|
<h3>迷妹的指南針</h3>
|
||||||
|
<p>成粉養成</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||||||
|
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||||||
|
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="../assets/js/particles.js"></script>
|
||||||
|
<script src="../assets/js/portal-nav.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,190 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-Hant">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>THREE WORDS · 10th Anniversary</title>
|
||||||
|
<meta name="description" content="SECHSKIES〈세 단어 (THREE WORDS)〉發行十週年紀念頁：2016.10.07—2026.10.07。">
|
||||||
|
<meta property="og:title" content="THREE WORDS · 10th Anniversary">
|
||||||
|
<meta property="og:description" content="現在、這裡、我們。十年後，再次相遇。">
|
||||||
|
<meta property="og:image" content="public/og.png">
|
||||||
|
<style>
|
||||||
|
:root{--ink:#07101d;--cream:#f2ede2;--gold:#efb53f;--blue:#16334d;--line:rgba(255,255,255,.22)}
|
||||||
|
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--cream);font-family:Arial,"Noto Sans TC","Microsoft JhengHei",sans-serif}button,a{font:inherit}
|
||||||
|
.hero{position:relative;min-height:100svh;overflow:hidden;background:radial-gradient(circle at 76% 18%,#80583c 0,#243f57 18%,#0a1726 49%,#050b13 100%);transition:1s}.hero.isLit{background:radial-gradient(circle at 73% 23%,#ffc676 0,#355e7c 25%,#0b1d31 54%,#050b13 100%)}
|
||||||
|
nav{position:absolute;z-index:6;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:26px 4vw;border-bottom:1px solid var(--line);font:700 10px Arial;letter-spacing:.28em}.logo{font-size:24px;letter-spacing:-.08em}.logo span{margin-left:7px;color:var(--gold);font-size:12px;vertical-align:top}
|
||||||
|
.light{position:absolute;width:46vw;height:46vw;right:-4vw;top:-12vw;border-radius:50%;background:rgba(255,194,111,.16);filter:blur(30px);transition:1s}.isLit .light{background:rgba(255,202,115,.38);transform:scale(1.15)}
|
||||||
|
.frames{position:absolute;inset:12vh 5vw 8vh 42vw;perspective:900px}.frames i{position:absolute;display:block;width:36%;height:72%;border:1px solid rgba(255,255,255,.42);background:linear-gradient(135deg,rgba(255,255,255,.06),transparent);backdrop-filter:blur(2px);transform:rotateY(-14deg) rotateZ(4deg);box-shadow:0 30px 80px rgba(0,0,0,.24)}.frames i:nth-child(1){left:0;top:12%}.frames i:nth-child(2){left:29%;top:2%}.frames i:nth-child(3){left:58%;top:15%}
|
||||||
|
.noise{position:absolute;inset:0;opacity:.14;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
|
||||||
|
.heroText{position:relative;z-index:4;padding:16vh 0 11vh 7vw;width:min(760px,90vw)}.kicker,.sectionTag{font:700 10px/1.5 Arial;letter-spacing:.34em;color:var(--gold)}h1{margin:28px 0 12px;font:900 clamp(76px,12vw,178px)/.72 Arial;letter-spacing:-.09em}h1 span{display:block}.outline{color:transparent;-webkit-text-stroke:1.5px rgba(242,237,226,.75)}
|
||||||
|
.anniversary{display:flex;align-items:center;gap:16px;margin:24px 0}.anniversary strong{font:900 clamp(72px,9vw,132px)/.7 Arial;color:var(--gold);letter-spacing:-.08em}.anniversary p{font:700 16px/1.15 Arial;letter-spacing:.12em}.dates{font:700 12px Arial;letter-spacing:.2em}.dates b{color:var(--gold);margin:0 10px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}.actions button{padding:15px 20px;border:1px solid transparent;cursor:pointer;transition:.25s}.primary{background:var(--gold);color:var(--ink);font-weight:800}.secondary{background:transparent;color:var(--cream);border-color:rgba(255,255,255,.5)!important}.actions button:hover{transform:translateY(-3px)}.threeDots{position:absolute;z-index:4;right:4vw;bottom:36px;display:flex;gap:10px}.threeDots b{width:8px;height:8px;border:1px solid var(--cream);border-radius:50%}.threeDots b:first-child{background:var(--gold);border-color:var(--gold)}
|
||||||
|
.statement,.words,.memory{padding:100px 8vw}.statement{display:grid;grid-template-columns:1fr 3fr;gap:6vw;background:var(--gold);color:var(--ink)}.statement .sectionTag{color:var(--ink)}.hangul{font:700 13px Arial;letter-spacing:.24em}.statement h2{font:900 clamp(48px,8vw,112px)/1 serif;margin:20px 0 42px;letter-spacing:-.06em}.bigCopy{font:700 clamp(25px,3.4vw,48px)/1.55 serif;margin:0}
|
||||||
|
.words{background:var(--cream);color:var(--ink)}.words .sectionTag{color:#7c682f}.wordGrid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:65px;border-top:1px solid #999}.wordGrid article{padding:28px 32px 45px 0;margin-right:32px;border-right:1px solid #aaa}.wordGrid span{font-size:11px;color:#786d51}.wordGrid h3{font:900 clamp(44px,7vw,100px)/1 Arial;letter-spacing:-.07em;margin:28px 0 16px}.wordGrid p{color:#59606a;line-height:1.7}
|
||||||
|
.lyricsPreview{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 2fr;gap:7vw;padding:100px 8vw;background:radial-gradient(circle at 8% 15%,#28455f 0,#102337 32%,#07101d 74%);border-top:1px solid rgba(255,255,255,.12)}.lyricsPreview:after{content:"3";position:absolute;right:-.04em;bottom:-.32em;font:900 min(48vw,680px)/1 Arial;color:rgba(255,255,255,.025);pointer-events:none}.lyricsMeta{position:relative;z-index:1}.lyricsMeta>span{display:block;margin-top:38px;font:900 clamp(38px,5vw,72px)/.95 Arial;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(242,237,226,.5)}.lyricsLines{position:relative;z-index:1;border-left:1px solid rgba(239,181,63,.6);padding-left:clamp(25px,4vw,64px)}.lyricsLines p{margin:0 0 18px;font:700 clamp(22px,3vw,44px)/1.25 serif;letter-spacing:-.02em}.lyricsLines p:nth-child(2n){color:#aebdca}.lyricsLines a{display:inline-flex;align-items:center;gap:22px;margin-top:28px;padding:15px 20px;background:var(--gold);color:var(--ink);font-weight:800;text-decoration:none;transition:.25s}.lyricsLines a:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(0,0,0,.28)}.lyricsLines a span{font-size:18px}
|
||||||
|
.memory{background:#0c1a2a}.memory>.sectionTag{display:block;margin-bottom:55px}.memory article{display:grid;grid-template-columns:1fr 2fr;gap:6vw;border-top:1px solid var(--line);padding:40px 0}.memory strong{font:900 clamp(42px,7vw,96px)/1 Arial;color:var(--gold);letter-spacing:-.06em}.memory h3{font:700 clamp(25px,3vw,42px)/1.2 serif;margin:0 0 16px}.memory p{max-width:650px;color:#b9c0c8;line-height:1.8;margin:0}
|
||||||
|
.video{padding:90px 8vw;background:#d9d0bf;color:var(--ink);display:grid;grid-template-columns:minmax(250px,.75fr) minmax(0,1.5fr);align-items:center;gap:7vw}.video .sectionTag{color:#796727}.video h2{font:800 clamp(42px,5vw,76px)/1.12 serif;margin:25px 0 32px}.videoHeading>a{display:inline-block;color:var(--ink);font-weight:800;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:5px}.videoHeading>a:hover{color:#796727}.videoFrame{position:relative;width:100%;aspect-ratio:16/9;background:#050b13;box-shadow:0 35px 80px rgba(7,16,29,.25);overflow:hidden}.videoFrame:before{content:"";position:absolute;inset:-1px;border:1px solid rgba(255,255,255,.22);pointer-events:none;z-index:1}.videoFrame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
|
||||||
|
.stageArchive{padding:100px 8vw;background:var(--cream);color:var(--ink)}.stageIntro{display:grid;grid-template-columns:1fr 1.5fr;gap:20px 6vw;align-items:end;margin-bottom:55px}.stageIntro .sectionTag{color:#796727;grid-column:1/-1}.stageIntro h2{margin:0;font:900 clamp(54px,8vw,108px)/.9 serif;letter-spacing:-.06em}.stageIntro>p:last-child{max-width:470px;margin:0;color:#59606a;line-height:1.8}.stageTable{border-top:2px solid var(--ink)}.stageHead,.stageRow{display:grid;grid-template-columns:.55fr 2fr .8fr;gap:28px;align-items:center}.stageHead{padding:15px 0;border-bottom:1px solid #9e998e;font:700 9px Arial;letter-spacing:.2em;color:#76682f}.stageRow{padding:24px 0;border-bottom:1px solid #aaa59b}.stageRow time{font:900 clamp(22px,2.5vw,38px)/1 Arial;letter-spacing:-.04em}.stageVideo{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:24px;align-items:center;color:var(--ink);text-decoration:none}.stageThumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0a1726}.stageThumb img{width:100%;height:100%;object-fit:cover;transition:.35s}.stageThumb b{position:absolute;inset:50% auto auto 50%;translate:-50% -50%;width:46px;height:46px;border-radius:50%;display:grid;place-content:center;padding-left:3px;background:var(--gold);box-shadow:0 8px 25px rgba(0,0,0,.3)}.stageVideo:hover img{transform:scale(1.05)}.stageVideo>span:last-child{display:grid;gap:12px}.stageVideo strong{font:800 clamp(18px,2vw,28px)/1.25 serif}.stageVideo small{font:700 9px Arial;letter-spacing:.15em;color:#796727}.station{display:grid;gap:8px}.station strong{font:900 clamp(30px,4vw,58px)/1 Arial;color:#c48f17}.station span{font-size:12px;color:#59606a}
|
||||||
|
footer{display:flex;justify-content:space-between;gap:20px;padding:26px 4vw;background:#040910;color:#8d97a4;font:10px Arial;letter-spacing:.16em}
|
||||||
|
@media(max-width:720px){.hero{min-height:820px}.frames{inset:12vh -18vw 29vh 36vw;opacity:.8}.heroText{padding:17vh 7vw 8vh}.heroText h1{font-size:72px}.statement{grid-template-columns:1fr;padding:70px 7vw}.words,.memory{padding:75px 7vw}.wordGrid{grid-template-columns:1fr}.wordGrid article{border-right:0;border-bottom:1px solid #aaa;margin:0}.lyricsPreview{grid-template-columns:1fr;padding:75px 7vw}.lyricsMeta>span{margin:22px 0 36px}.lyricsLines{padding-left:24px}.lyricsLines p{font-size:24px}.memory article{grid-template-columns:1fr}.video{grid-template-columns:1fr;padding:65px 7vw;gap:42px}.video h2{font-size:48px}.stageArchive{padding:75px 7vw}.stageIntro{grid-template-columns:1fr}.stageIntro .sectionTag{grid-column:auto}.stageHead{display:none}.stageRow{grid-template-columns:1fr;gap:18px;padding:28px 0}.stageVideo{grid-template-columns:1fr}.stageRow time{font-size:30px}.station{grid-template-columns:auto 1fr;align-items:baseline}.station strong{font-size:38px}footer{flex-direction:column}}
|
||||||
|
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<section class="hero" id="hero">
|
||||||
|
<nav>
|
||||||
|
<span class="logo">3W<span>10</span></span>
|
||||||
|
<span>2016 — 2026</span>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="light" aria-hidden="true"></div>
|
||||||
|
<div class="frames" aria-hidden="true"><i></i><i></i><i></i></div>
|
||||||
|
<div class="noise" aria-hidden="true"></div>
|
||||||
|
|
||||||
|
<div class="heroText">
|
||||||
|
<p class="kicker">SECHSKIES · 세 단어</p>
|
||||||
|
<h1><span>THREE</span><span class="outline">WORDS</span></h1>
|
||||||
|
<div class="anniversary"><strong>10</strong><p>TH<br>ANNIVERSARY</p></div>
|
||||||
|
<p class="dates">2016.10.07 <b>—</b> 2026.10.07</p>
|
||||||
|
<div class="actions">
|
||||||
|
<button class="primary" id="litToggle">點亮第十年的光 <span>✦</span></button>
|
||||||
|
<button class="secondary" id="downloadPoster">下載 IG 紀念圖 ↓</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="threeDots"><b></b><b></b><b></b></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="statement">
|
||||||
|
<p class="sectionTag">01 / TEN YEARS LATER</p>
|
||||||
|
<div>
|
||||||
|
<p class="hangul">지금 · 여기 · 우리</p>
|
||||||
|
<h2>現在。這裡。我們。</h2>
|
||||||
|
<p class="bigCopy">有些歌不只是被聽見，<br>而是替一段等待留下名字。</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="words">
|
||||||
|
<p class="sectionTag">02 / THREE WORDS</p>
|
||||||
|
<div class="wordGrid">
|
||||||
|
<article><span>01</span><h3>NOW</h3><p>十年後的此刻，重新按下播放。</p></article>
|
||||||
|
<article><span>02</span><h3>HERE</h3><p>回到那個讓我們再次相遇的地方。</p></article>
|
||||||
|
<article><span>03</span><h3>US</h3><p>歌曲仍在，我們也仍然在這裡。</p></article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="lyricsPreview">
|
||||||
|
<div class="lyricsMeta">
|
||||||
|
<p class="sectionTag">03 / LYRICS PREVIEW</p>
|
||||||
|
<span>세 단어<br>THREE WORDS</span>
|
||||||
|
</div>
|
||||||
|
<div class="lyricsLines">
|
||||||
|
<p>I just wanna be with you</p>
|
||||||
|
<p>내가 사는 이유</p>
|
||||||
|
<p>다시는 멀리 가지 않을게요</p>
|
||||||
|
<p>I'll always be here for you</p>
|
||||||
|
<p>세월이 지난 후</p>
|
||||||
|
<a href="https://jekkinoopy.github.io/sechskies/extra/lyrics.html" target="_blank" rel="noreferrer">完整歌詞與歌曲資料 <span>↗</span></a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="memory">
|
||||||
|
<p class="sectionTag">04 / FROM THEN TO NOW</p>
|
||||||
|
<article><strong>2016.10.07</strong><div><h3>重新相遇</h3><p>睽違十六年後，SECHSKIES 以〈세 단어 (THREE WORDS)〉帶回重逢的聲音。</p></div></article>
|
||||||
|
<article><strong>2026.10.07</strong><div><h3>十年以後</h3><p>旋律走過十年，當時的感動仍停在現在、這裡、我們之間。</p></div></article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="video">
|
||||||
|
<div class="videoHeading">
|
||||||
|
<p class="sectionTag">OFFICIAL MUSIC VIDEO</p>
|
||||||
|
<h2>再聽一次，<br>十年前的三個詞。</h2>
|
||||||
|
<a href="https://www.youtube.com/watch?v=m7Zt_p9S-yg" target="_blank" rel="noreferrer">在 YouTube 開啟 ↗</a>
|
||||||
|
</div>
|
||||||
|
<div class="videoFrame">
|
||||||
|
<iframe
|
||||||
|
src="https://www.youtube-nocookie.com/embed/m7Zt_p9S-yg?rel=0"
|
||||||
|
title="SECHSKIES - 세 단어 (THREE WORDS) Official Music Video"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||||
|
referrerpolicy="strict-origin-when-cross-origin"
|
||||||
|
allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="stageArchive">
|
||||||
|
<div class="stageIntro">
|
||||||
|
<p class="sectionTag">05 / MUSIC SHOW ARCHIVE</p>
|
||||||
|
<h2>打歌舞台</h2>
|
||||||
|
<p>把當年的舞台依日期收好，從十年前重新播放。</p>
|
||||||
|
</div>
|
||||||
|
<div class="stageTable" role="table" aria-label="THREE WORDS 打歌舞台列表">
|
||||||
|
<div class="stageHead" role="row">
|
||||||
|
<span role="columnheader">DATE</span>
|
||||||
|
<span role="columnheader">VIDEO</span>
|
||||||
|
<span role="columnheader">STATION</span>
|
||||||
|
</div>
|
||||||
|
<div class="stageRow" role="row">
|
||||||
|
<time role="cell" datetime="2016.12.04">2016.12.04</time>
|
||||||
|
<a class="stageVideo" role="cell" href="https://www.youtube.com/watch?v=8HTqr3Wp-R0" target="_blank" rel="noreferrer">
|
||||||
|
<span class="stageThumb">
|
||||||
|
<img src="https://i.ytimg.com/vi/8HTqr3Wp-R0/hqdefault.jpg" alt="인기가요 · Inkigayo THREE WORDS · Goodbye Stage 影片縮圖">
|
||||||
|
<b>▶</b>
|
||||||
|
</span>
|
||||||
|
<span><strong>THREE WORDS · Goodbye Stage</strong><small>WATCH ON YOUTUBE ↗</small></span>
|
||||||
|
</a>
|
||||||
|
<div class="station" role="cell"><strong>SBS</strong><span>인기가요 · Inkigayo</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer><span>FAN-MADE 10TH ANNIVERSARY TRIBUTE</span><span>SECHSKIES · THREE WORDS · 2016—2026</span></footer>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var hero = document.getElementById("hero");
|
||||||
|
var litToggle = document.getElementById("litToggle");
|
||||||
|
var lit = false;
|
||||||
|
litToggle.addEventListener("click", function () {
|
||||||
|
lit = !lit;
|
||||||
|
hero.classList.toggle("isLit", lit);
|
||||||
|
litToggle.firstChild.textContent = lit ? "讓記憶停在這裡 " : "點亮第十年的光 ";
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("downloadPoster").addEventListener("click", function () {
|
||||||
|
var canvas = document.createElement("canvas");
|
||||||
|
canvas.width = 1080;
|
||||||
|
canvas.height = 1350;
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
if (!ctx) return;
|
||||||
|
var glow = ctx.createRadialGradient(780, 300, 10, 780, 300, 900);
|
||||||
|
glow.addColorStop(0, "#e0a16b");
|
||||||
|
glow.addColorStop(.34, "#264765");
|
||||||
|
glow.addColorStop(1, "#07101d");
|
||||||
|
ctx.fillStyle = glow;
|
||||||
|
ctx.fillRect(0, 0, 1080, 1350);
|
||||||
|
ctx.strokeStyle = "rgba(255,255,255,.45)";
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
[150, 390, 630].forEach(function (x, index) {
|
||||||
|
ctx.strokeRect(x, 180 + index * 70, 420, 660);
|
||||||
|
});
|
||||||
|
ctx.fillStyle = "#f5efe2";
|
||||||
|
ctx.font = "700 106px Arial";
|
||||||
|
ctx.fillText("THREE", 72, 980);
|
||||||
|
ctx.fillText("WORDS", 72, 1085);
|
||||||
|
ctx.fillStyle = "#efb53f";
|
||||||
|
ctx.font = "700 36px Arial";
|
||||||
|
ctx.fillText("10TH ANNIVERSARY", 76, 1155);
|
||||||
|
ctx.fillStyle = "#f5efe2";
|
||||||
|
ctx.font = "30px Arial";
|
||||||
|
ctx.fillText("2016.10.07 — 2026.10.07", 76, 1225);
|
||||||
|
ctx.font = "26px Arial";
|
||||||
|
ctx.fillText("NOW · HERE · US", 76, 1285);
|
||||||
|
var link = document.createElement("a");
|
||||||
|
link.download = "three-words-10th-anniversary.png";
|
||||||
|
link.href = canvas.toDataURL("image/png");
|
||||||
|
link.click();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user