docs: 新增 color-tokens 規範文件
This commit is contained in:
jekkinoopy committed
1 parent
b0cb52fec9
commit
945adc79f6
60 files changed
+17908
-17842
No files matched your search
@@ -1,5 +1,5 @@
|
||||
body.concert-page {
|
||||
background-color: var(--deep-black, #0a0a0a);
|
||||
background-color: var(--color-bg);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
+11
-11
@@ -10,7 +10,7 @@
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
background-color: var(--primary);
|
||||
background-color: var(--color-brand);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
@@ -39,7 +39,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #FFD700;
|
||||
color: var(--color-brand);
|
||||
text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
@@ -61,20 +61,20 @@
|
||||
.date-tag {
|
||||
display: inline-block;
|
||||
padding: 8px 20px;
|
||||
background: var(--accent);
|
||||
color: var(--text);
|
||||
background: var(--color-brand);
|
||||
color: var(--color-text-dark);
|
||||
border-radius: 50px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.content h3 {
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.content p {
|
||||
color: var(--text-muted);
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -158,12 +158,12 @@ section.archive-intro p {
|
||||
|
||||
/*
|
||||
* 首頁 hero 主標／副標：與全站 .site-header-inner 相同（index.css 在 style.css 之後載入）。
|
||||
* 若留舊版 .home-page header .hero h1 { color: var(--primary); text-shadow: … } 會蓋過 style.css。
|
||||
* 若留舊版 .home-page header .hero h1 { color: var(--color-brand); text-shadow: … } 會蓋過 style.css。
|
||||
*/
|
||||
.home-page header#origin .site-header-inner .main-title {
|
||||
font-size: clamp(2rem, 4.5vw, 3.2rem);
|
||||
font-weight: 900;
|
||||
color: var(--text-main, #333);
|
||||
color: var(--color-text);
|
||||
letter-spacing: 6px;
|
||||
margin: 0;
|
||||
text-shadow: none;
|
||||
@@ -172,7 +172,7 @@ section.archive-intro p {
|
||||
.home-page header#origin .site-header-inner .sub-title {
|
||||
font-size: 0.92rem;
|
||||
letter-spacing: 4px;
|
||||
color: var(--text-muted, #888);
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@@ -282,7 +282,7 @@ header#origin .site-header-inner .subtitle-wrap::after {
|
||||
}
|
||||
|
||||
.home-page .landing-intro .mark_b {
|
||||
color: var(--light-yellow);
|
||||
color: var(--color-brand-light);
|
||||
}
|
||||
|
||||
.home-page #intro .intro-text .slogan-quote--awakening + .core-description {
|
||||
@@ -365,7 +365,7 @@ header#origin .site-header-inner .subtitle-wrap::after {
|
||||
.home-page #journey .merged-storyline .story-node .journey-month {
|
||||
margin: 0.75rem 0 0.3rem;
|
||||
padding: 0.32rem 0.7rem 0.32rem 0;
|
||||
border-right: 3px solid var(--primary);
|
||||
border-right: 3px solid var(--color-brand);
|
||||
border-left: 0;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 800;
|
||||
|
||||
+182
-182
@@ -1,182 +1,182 @@
|
||||
/* 歌詞頁：載入於 style.css 之後，並以 .lyrics-page 提高權重，避免被全站 table / body 洗版 */
|
||||
|
||||
body.lyrics-page {
|
||||
--lyrics-bg: #2a2a2a;
|
||||
--lyrics-paper: #faf6e8;
|
||||
--lyrics-accent: #f5dfa8;
|
||||
--lyrics-muted: #c9c2a8;
|
||||
|
||||
font-family: "Nanum Pen Script", cursive;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
background-color: var(--lyrics-bg) !important;
|
||||
color: #fff !important;
|
||||
margin: 0 !important;
|
||||
padding: clamp(1rem, 4vw, 2.5rem) !important;
|
||||
min-height: 100dvh;
|
||||
line-height: 1.55;
|
||||
overflow-x: hidden;
|
||||
font-size: clamp(18px, 2.8vw, 26px);
|
||||
}
|
||||
|
||||
body.lyrics-page h1 {
|
||||
color: var(--lyrics-accent);
|
||||
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||
text-align: center;
|
||||
margin: 0 0 1.25rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-layout {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table {
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
border-spacing: clamp(0.75rem, 2.5vw, 1.75rem);
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table > tbody > tr > td {
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
border-bottom: none !important;
|
||||
text-align: left !important;
|
||||
color: inherit !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* 兩欄等寬 + 同一套「卡片区」留白與邊框，左右才對稱 */
|
||||
body.lyrics-page .main-left,
|
||||
body.lyrics-page .lyrics-text-cell,
|
||||
body.lyrics-page .lyrics-map-cell,
|
||||
body.lyrics-page .lyrics-contact-cell {
|
||||
width: 50%;
|
||||
max-width: none;
|
||||
box-sizing: border-box;
|
||||
padding: clamp(0.85rem, 2vw, 1.15rem) clamp(0.9rem, 2.2vw, 1.25rem) !important;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left,
|
||||
body.lyrics-page .lyrics-text-cell {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-map-cell {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-contact-cell {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
body.lyrics-page .songInfo {
|
||||
color: var(--lyrics-accent);
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 0.4rem 0.75rem;
|
||||
align-items: baseline;
|
||||
font-size: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
body.lyrics-page .songInfo dt {
|
||||
font-weight: 700;
|
||||
color: var(--lyrics-muted);
|
||||
}
|
||||
|
||||
body.lyrics-page .songInfo dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table p {
|
||||
color: #fff;
|
||||
line-height: 1.55;
|
||||
font-size: clamp(1rem, 2.2vw, 1.35rem);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-map-cell iframe {
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-contact-cell .contact {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
body.lyrics-page a {
|
||||
color: #b8e6ff;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.15em;
|
||||
}
|
||||
|
||||
body.lyrics-page a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact {
|
||||
color: var(--lyrics-paper);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact h3 {
|
||||
color: var(--lyrics-accent);
|
||||
font-size: 1.15rem;
|
||||
margin: 0.35rem 0 0.5rem;
|
||||
font-family: "Nanum Pen Script", cursive;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact img {
|
||||
max-height: 36px;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact i {
|
||||
font-size: 0.75em;
|
||||
margin-right: 0.35rem;
|
||||
color: var(--lyrics-accent);
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
body.lyrics-page .lyrics-main-table,
|
||||
body.lyrics-page .lyrics-main-table tbody,
|
||||
body.lyrics-page .lyrics-main-table tr,
|
||||
body.lyrics-page .lyrics-main-table td {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left {
|
||||
max-width: none;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table > tbody > tr > td + td {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
/* 歌詞頁：載入於 style.css 之後，並以 .lyrics-page 提高權重，避免被全站 table / body 洗版 */
|
||||
|
||||
body.lyrics-page {
|
||||
--lyrics-bg: #2a2a2a;
|
||||
--lyrics-paper: #faf6e8;
|
||||
--lyrics-accent: #f5dfa8;
|
||||
--lyrics-muted: #c9c2a8;
|
||||
|
||||
font-family: "Nanum Pen Script", cursive;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
background-color: var(--lyrics-bg) !important;
|
||||
color: #fff !important;
|
||||
margin: 0 !important;
|
||||
padding: clamp(1rem, 4vw, 2.5rem) !important;
|
||||
min-height: 100dvh;
|
||||
line-height: 1.55;
|
||||
overflow-x: hidden;
|
||||
font-size: clamp(18px, 2.8vw, 26px);
|
||||
}
|
||||
|
||||
body.lyrics-page h1 {
|
||||
color: var(--lyrics-accent);
|
||||
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||
text-align: center;
|
||||
margin: 0 0 1.25rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-layout {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table {
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
border-spacing: clamp(0.75rem, 2.5vw, 1.75rem);
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table > tbody > tr > td {
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
border-bottom: none !important;
|
||||
text-align: left !important;
|
||||
color: inherit !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* 兩欄等寬 + 同一套「卡片区」留白與邊框，左右才對稱 */
|
||||
body.lyrics-page .main-left,
|
||||
body.lyrics-page .lyrics-text-cell,
|
||||
body.lyrics-page .lyrics-map-cell,
|
||||
body.lyrics-page .lyrics-contact-cell {
|
||||
width: 50%;
|
||||
max-width: none;
|
||||
box-sizing: border-box;
|
||||
padding: clamp(0.85rem, 2vw, 1.15rem) clamp(0.9rem, 2.2vw, 1.25rem) !important;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left,
|
||||
body.lyrics-page .lyrics-text-cell {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-map-cell {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-contact-cell {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
body.lyrics-page .songInfo {
|
||||
color: var(--lyrics-accent);
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 0.4rem 0.75rem;
|
||||
align-items: baseline;
|
||||
font-size: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
body.lyrics-page .songInfo dt {
|
||||
font-weight: 700;
|
||||
color: var(--lyrics-muted);
|
||||
}
|
||||
|
||||
body.lyrics-page .songInfo dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table p {
|
||||
color: #fff;
|
||||
line-height: 1.55;
|
||||
font-size: clamp(1rem, 2.2vw, 1.35rem);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-map-cell iframe {
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-contact-cell .contact {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
body.lyrics-page a {
|
||||
color: #b8e6ff;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.15em;
|
||||
}
|
||||
|
||||
body.lyrics-page a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact {
|
||||
color: var(--lyrics-paper);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact h3 {
|
||||
color: var(--lyrics-accent);
|
||||
font-size: 1.15rem;
|
||||
margin: 0.35rem 0 0.5rem;
|
||||
font-family: "Nanum Pen Script", cursive;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact img {
|
||||
max-height: 36px;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact i {
|
||||
font-size: 0.75em;
|
||||
margin-right: 0.35rem;
|
||||
color: var(--lyrics-accent);
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
body.lyrics-page .lyrics-main-table,
|
||||
body.lyrics-page .lyrics-main-table tbody,
|
||||
body.lyrics-page .lyrics-main-table tr,
|
||||
body.lyrics-page .lyrics-main-table td {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left {
|
||||
max-width: none;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table > tbody > tr > td + td {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
+69
-74
@@ -1,22 +1,25 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
|
||||
|
||||
:root {
|
||||
--primary: #ffcc00;
|
||||
--light-yellow: #fceea7;
|
||||
--dark-yellow: #4e492b;
|
||||
--black: #1a1a1a;
|
||||
--deep-black: #0a0a0a;
|
||||
--gray: #f4f4f4;
|
||||
--text-color: #333;
|
||||
--accent: #FFD700;
|
||||
--text: #1a1a1a;
|
||||
--card-bg: #1a1a1a;
|
||||
--bg-alt: #fcfaf2;
|
||||
--text-main: #333;
|
||||
--text-muted: #4d4d4d;
|
||||
--surface: #fffdf7;
|
||||
--surface-soft: #fff9e8;
|
||||
/* ── 品牌色 ── */
|
||||
--color-brand: #ffcc00;
|
||||
--color-brand-light: #fceea7;
|
||||
--color-brand-dark: #4e492b;
|
||||
|
||||
/* ── 背景色 ── */
|
||||
--color-bg: #0a0a0a;
|
||||
--color-bg-raised: #1a1a1a;
|
||||
--color-bg-alt: #fcfaf2;
|
||||
|
||||
/* ── 表面色（淺色內容區） ── */
|
||||
--color-surface: #fffdf7;
|
||||
--color-surface-soft: #fff9e8;
|
||||
|
||||
/* ── 文字色 ── */
|
||||
--color-text: #333333;
|
||||
--color-text-dark: #1a1a1a;
|
||||
--color-text-muted: #4d4d4d;
|
||||
--color-text-inverse: #f4f4f4;
|
||||
}
|
||||
|
||||
/* 1. 先處理 body 和全域，確保沒人亂給外距 */
|
||||
@@ -29,7 +32,7 @@
|
||||
|
||||
html,
|
||||
body {
|
||||
background-color: var(--deep-black);
|
||||
background-color: var(--color-bg);
|
||||
color: #eeeeee;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
@@ -39,7 +42,7 @@ body {
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans TC', system-ui, sans-serif;
|
||||
color: var(--text-color);
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -63,7 +66,7 @@ header#origin {
|
||||
|
||||
/* 導覽列（排除 portal、B 站分集 tab 等自帶版面之 nav，避免 space-between／大 padding 破壞） */
|
||||
nav:not(.portal-nav):not(.bilivideo-episode-nav) {
|
||||
background-color: var(--black);
|
||||
background-color: var(--color-bg-raised);
|
||||
padding: 0.8rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -120,7 +123,7 @@ nav a {
|
||||
width: 100%;
|
||||
margin: 0 0 14px;
|
||||
padding: 0.8rem 100px;
|
||||
background-color: var(--black);
|
||||
background-color: var(--color-bg-raised);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
overflow: visible;
|
||||
@@ -144,11 +147,11 @@ nav a {
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
.portal-nav__menu-toggle:focus-visible {
|
||||
outline: 2px solid var(--primary);
|
||||
outline: 2px solid var(--color-brand);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
@@ -211,7 +214,7 @@ nav a {
|
||||
text-align: center;
|
||||
line-height: 1.15;
|
||||
text-decoration: none;
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 1px;
|
||||
padding: 2px 4px;
|
||||
@@ -482,7 +485,7 @@ nav a {
|
||||
max(0.85rem, env(safe-area-inset-top, 0px)) clamp(14px, 2vw + 10px, 32px) max(1rem, env(safe-area-inset-bottom, 0px));
|
||||
z-index: 10000;
|
||||
overflow: hidden;
|
||||
background-color: var(--black);
|
||||
background-color: var(--color-bg-raised);
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
@@ -498,7 +501,7 @@ nav a {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex-shrink: 0;
|
||||
background-color: var(--black);
|
||||
background-color: var(--color-bg-raised);
|
||||
}
|
||||
|
||||
.portal-nav .logo {
|
||||
@@ -599,7 +602,7 @@ nav a {
|
||||
.portal-nav.portal-nav--open>ul>li.open>a {
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
.portal-nav>ul>li {
|
||||
@@ -972,13 +975,13 @@ footer {
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem;
|
||||
color: var(--gray);
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 10px 30px;
|
||||
background: var(--primary);
|
||||
background: var(--color-brand);
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
border-radius: 50px;
|
||||
@@ -1007,7 +1010,7 @@ footer {
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
text-align: center;
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: 3px;
|
||||
@@ -1020,7 +1023,7 @@ footer {
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 3px;
|
||||
background: var(--primary);
|
||||
background: var(--color-brand);
|
||||
margin: 15px auto 0;
|
||||
}
|
||||
|
||||
@@ -1036,7 +1039,7 @@ footer {
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background-color: var(--primary);
|
||||
background-color: var(--color-brand);
|
||||
max-width: 56px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
@@ -1059,7 +1062,7 @@ footer {
|
||||
}
|
||||
|
||||
.card {
|
||||
background: linear-gradient(135deg, var(--surface-soft) 0%, #ffffff 100%);
|
||||
background: linear-gradient(135deg, var(--color-surface-soft) 0%, #ffffff 100%);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 204, 0, 0.18);
|
||||
border-radius: 14px;
|
||||
@@ -1070,7 +1073,7 @@ footer {
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-8px);
|
||||
border-color: var(--primary);
|
||||
border-color: var(--color-brand);
|
||||
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
|
||||
@@ -1087,7 +1090,7 @@ footer {
|
||||
section {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 60px;
|
||||
background: var(--surface);
|
||||
background: var(--color-surface);
|
||||
padding: 44px 36px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 204, 0, 0.15);
|
||||
@@ -1153,14 +1156,14 @@ section {
|
||||
width: 3.25rem;
|
||||
height: 4px;
|
||||
margin: 0.55rem 0 0;
|
||||
background: linear-gradient(90deg, var(--primary), #ffe066);
|
||||
background: linear-gradient(90deg, var(--color-brand), #ffe066);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.mission-section .mission-logo-heading {
|
||||
font-size: 1.08rem;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
margin: 0 0 0.85rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
@@ -1199,7 +1202,7 @@ section {
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 204, 0, 0.28);
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
|
||||
background: #1a1a1a;
|
||||
background: var(--color-bg-raised);
|
||||
}
|
||||
|
||||
.mission-section .mission-gif-frame img {
|
||||
@@ -1281,7 +1284,7 @@ section {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1;
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@@ -1338,7 +1341,7 @@ section {
|
||||
top: 0.15em;
|
||||
font-size: 1.05em;
|
||||
line-height: 1;
|
||||
color: var(--fa-before-color, var(--primary, #ffcc00));
|
||||
color: var(--fa-before-color, var(--color-brand));
|
||||
}
|
||||
|
||||
.fa-before-lead.fa-before-lead--balloon::before {
|
||||
@@ -1347,7 +1350,7 @@ section {
|
||||
width: 1.15em;
|
||||
height: 1.15em;
|
||||
top: 0.1em;
|
||||
background-color: var(--fa-before-color, var(--primary, #ffcc00));
|
||||
background-color: var(--fa-before-color, var(--color-brand));
|
||||
-webkit-mask: url('../images/icon/balloon.svg') center / contain no-repeat;
|
||||
mask: url('../images/icon/balloon.svg') center / contain no-repeat;
|
||||
}
|
||||
@@ -1383,7 +1386,7 @@ section {
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background-color: var(--primary);
|
||||
background-color: var(--color-brand);
|
||||
max-width: 56px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
@@ -1419,7 +1422,7 @@ section {
|
||||
linear-gradient(185deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 42%),
|
||||
linear-gradient(168deg, #fffef8 0%, #fff6d2 52%, #fffce8 100%);
|
||||
border: 1px solid rgba(220, 185, 90, 0.42);
|
||||
border-left: 5px solid var(--primary);
|
||||
border-left: 5px solid var(--color-brand);
|
||||
border-radius: 14px;
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.92) inset,
|
||||
@@ -1463,8 +1466,8 @@ table {
|
||||
}
|
||||
|
||||
table th {
|
||||
background-color: var(--primary);
|
||||
color: var(--black);
|
||||
background-color: var(--color-brand);
|
||||
color: var(--color-bg-raised);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@@ -1476,7 +1479,7 @@ table td {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-color);
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -1518,7 +1521,7 @@ a {
|
||||
max-width: 42rem;
|
||||
margin: 0 0 28px;
|
||||
padding: 16px 18px;
|
||||
background: linear-gradient(135deg, var(--surface-soft) 0%, #fff 100%);
|
||||
background: linear-gradient(135deg, var(--color-surface-soft) 0%, #fff 100%);
|
||||
border: 1px solid rgba(255, 204, 0, 0.18);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
|
||||
@@ -1560,7 +1563,7 @@ a {
|
||||
content: attr(data-era);
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
background-color: var(--primary);
|
||||
background-color: var(--color-brand);
|
||||
color: #303030;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
@@ -1701,7 +1704,7 @@ a {
|
||||
}
|
||||
|
||||
.merged-storyline .timeline-ebook-cta:focus-visible {
|
||||
outline: 3px solid #1a1a1a;
|
||||
outline: 3px solid var(--color-bg-raised);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
@@ -1802,7 +1805,7 @@ a {
|
||||
|
||||
.merged-storyline .story-external-inline:hover,
|
||||
.merged-storyline .story-external-inline:focus-visible {
|
||||
color: var(--dark-yellow);
|
||||
color: var(--color-brand-dark);
|
||||
}
|
||||
|
||||
.merged-storyline .story-external-inline i {
|
||||
@@ -1861,7 +1864,7 @@ a {
|
||||
|
||||
/* 頁尾 */
|
||||
footer {
|
||||
background-color: var(--black);
|
||||
background-color: var(--color-bg-raised);
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 50px 0 20px;
|
||||
@@ -1869,13 +1872,13 @@ footer {
|
||||
|
||||
/* 全站：深色字重點（棕黃字色，與 <b> 不同於「顏色」） */
|
||||
.mark_b {
|
||||
color: var(--dark-yellow);
|
||||
color: var(--color-brand-dark);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 深色頁尾內的 mark_b：維持可讀與全站黃色語彙 */
|
||||
footer a .mark_b {
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
/* map.html — 主內容層；頂欄見全站 .portal-nav */
|
||||
@@ -1921,7 +1924,7 @@ footer a .mark_b {
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
white-space: normal;
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 1px;
|
||||
@@ -2196,7 +2199,7 @@ header.inner-page-header .sub-title {
|
||||
.site-header-inner .main-title {
|
||||
font-size: clamp(2rem, 4.5vw, 3.2rem);
|
||||
font-weight: 900;
|
||||
color: var(--text-main, #333);
|
||||
color: var(--color-text);
|
||||
letter-spacing: 6px;
|
||||
margin: 0;
|
||||
text-shadow: none;
|
||||
@@ -2228,7 +2231,7 @@ header.inner-page-header .sub-title {
|
||||
flex: 0 0 auto;
|
||||
font-size: 0.92rem;
|
||||
letter-spacing: 4px;
|
||||
color: var(--text-muted, #888);
|
||||
color: var(--color-text-muted);
|
||||
margin: 0 18px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -2268,7 +2271,7 @@ header.inner-page-header .sub-title {
|
||||
}
|
||||
|
||||
#itinerary-search:focus {
|
||||
border-color: #ffcc00;
|
||||
border-color: var(--color-brand);
|
||||
box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.2);
|
||||
}
|
||||
|
||||
@@ -2287,9 +2290,9 @@ header.inner-page-header .sub-title {
|
||||
|
||||
.tab-btn:hover,
|
||||
.tab-btn.active {
|
||||
background: #ffcc00;
|
||||
background: var(--color-brand);
|
||||
color: #2f2f2f;
|
||||
border-color: #ffcc00;
|
||||
border-color: var(--color-brand);
|
||||
}
|
||||
|
||||
.map-sticky {
|
||||
@@ -2641,7 +2644,7 @@ header.inner-page-header .sub-title {
|
||||
}
|
||||
|
||||
.mode-btn.active {
|
||||
background: var(--primary);
|
||||
background: var(--color-brand);
|
||||
color: #161616;
|
||||
}
|
||||
|
||||
@@ -3111,7 +3114,7 @@ body.totoga2-page .totoga2-plot .intro-text {
|
||||
}
|
||||
|
||||
body.totoga2-page .totoga2-plot .intro-text a {
|
||||
color: var(--dark-yellow);
|
||||
color: var(--color-brand-dark);
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -3257,7 +3260,7 @@ body.member-crystal-page .member-crystal-intro__title {
|
||||
}
|
||||
|
||||
body.member-crystal-page .member-crystal-intro--black .member-crystal-intro__title {
|
||||
color: var(--yellow);
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
body.member-crystal-page .member-crystal-intro__en {
|
||||
@@ -3677,7 +3680,7 @@ body.site-guide-page .site-guide-grid {
|
||||
}
|
||||
|
||||
body.site-guide-page .site-guide-card {
|
||||
background: linear-gradient(135deg, var(--surface-soft) 0%, #fff 100%);
|
||||
background: linear-gradient(135deg, var(--color-surface-soft) 0%, #fff 100%);
|
||||
border-radius: 14px;
|
||||
padding: 1.25rem 1.35rem;
|
||||
border: 1px solid rgba(255, 204, 0, 0.18);
|
||||
@@ -3690,7 +3693,7 @@ body.site-guide-page .site-guide-card h3 {
|
||||
}
|
||||
|
||||
body.site-guide-page .site-guide-card h3 a {
|
||||
color: var(--dark-yellow);
|
||||
color: var(--color-brand-dark);
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -3852,7 +3855,7 @@ body.minister-page .minister-hero-lead {
|
||||
}
|
||||
|
||||
body.minister-page .minister-hero-lead .mark_b {
|
||||
color: var(--light-yellow);
|
||||
color: var(--color-brand-light);
|
||||
}
|
||||
|
||||
body.minister-page .variety-block .intro-text {
|
||||
@@ -3888,8 +3891,8 @@ body.minister-page .minister-hashtag,
|
||||
font-size: clamp(0.78rem, 1.65vw, 0.9rem);
|
||||
letter-spacing: 0.06em;
|
||||
line-height: 1.2;
|
||||
color: var(--dark-yellow);
|
||||
background: linear-gradient(180deg, rgba(255, 253, 247, 0.98) 0%, var(--surface-soft) 100%);
|
||||
color: var(--color-brand-dark);
|
||||
background: linear-gradient(180deg, rgba(255, 253, 247, 0.98) 0%, var(--color-surface-soft) 100%);
|
||||
border: 1px solid rgba(255, 204, 0, 0.52);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.88) inset,
|
||||
@@ -3972,12 +3975,4 @@ body.minister-page .minister-photo--dual img {
|
||||
}
|
||||
|
||||
body.minister-page .minister-back {
|
||||
text-align: center;
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
body.minister-page .minister-photo--dual {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
text-
|
||||
+257
-257
@@ -1,257 +1,257 @@
|
||||
/* iPad／平板 RWD — max-width ≤1180px（含 iPad 直／橫與小平板／小筆電） */
|
||||
|
||||
/* 頂欄漢堡：與 style.css 992 斷點一致，避免本檔 1180 規則把選單列壓回橫排 */
|
||||
@media (max-width: 991px) {
|
||||
|
||||
.portal-nav>ul {
|
||||
flex: none;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav>ul>li>a {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
|
||||
html:has(.portal-nav) {
|
||||
scroll-padding-top: clamp(52px, 12vw, 76px);
|
||||
}
|
||||
|
||||
nav:not(.portal-nav) {
|
||||
padding-left: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
padding-right: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
}
|
||||
|
||||
.portal-nav {
|
||||
padding-left: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
padding-right: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
row-gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav>ul {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav .logo {
|
||||
width: min(240px, 38vw);
|
||||
max-width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.portal-nav>ul {
|
||||
flex-wrap: wrap;
|
||||
gap: clamp(12px, 2vw, 18px);
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
flex: 1 1 280px;
|
||||
}
|
||||
|
||||
.portal-nav>ul>li>a {
|
||||
min-height: 44px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
nav:not(.portal-nav):not(.bilivideo-episode-nav) ul {
|
||||
gap: clamp(12px, 2vw, 20px);
|
||||
}
|
||||
|
||||
header.inner-page-header {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
header#origin .hero .site-header-inner .main-title {
|
||||
font-size: clamp(1.75rem, 2.25vw + 1rem, 2.35rem);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: clamp(1rem, 1.5vw + 0.65rem, 1.15rem);
|
||||
}
|
||||
|
||||
.container,
|
||||
.content-container {
|
||||
padding-left: clamp(14px, 1.5vw + 10px, 22px);
|
||||
padding-right: clamp(14px, 1.5vw + 10px, 22px);
|
||||
}
|
||||
|
||||
.home-page .container {
|
||||
padding-left: clamp(14px, 1.5vw + 10px, 22px);
|
||||
padding-right: clamp(14px, 1.5vw + 10px, 22px);
|
||||
}
|
||||
|
||||
section {
|
||||
padding: clamp(26px, 3vw + 18px, 36px) clamp(16px, 2.5vw + 12px, 28px) !important;
|
||||
}
|
||||
|
||||
.story-grid {
|
||||
gap: clamp(18px, 4vw, 28px);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: clamp(18px, 4vw, 26px);
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
padding: clamp(10px, 2vw, 14px);
|
||||
}
|
||||
|
||||
/* 首頁／跨時空軌跡：鑽石主軸在平板改左側縱線（對齊舊 ≤900px 邏輯） */
|
||||
.merged-storyline::before {
|
||||
left: 18px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node {
|
||||
width: calc(100% - 44px);
|
||||
margin-left: 44px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd),
|
||||
.merged-storyline .story-node:nth-of-type(even) {
|
||||
margin-left: 44px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node::before {
|
||||
left: -39px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node::after,
|
||||
.merged-storyline .story-node:nth-of-type(odd)::after,
|
||||
.merged-storyline .story-node:nth-of-type(even)::after {
|
||||
left: 12px;
|
||||
right: auto;
|
||||
top: -14px;
|
||||
transform: rotate(-8deg);
|
||||
transform-origin: center center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1.2;
|
||||
padding: 4px 9px;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd)::before,
|
||||
.merged-storyline .story-node:nth-of-type(even)::before {
|
||||
left: -39px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd),
|
||||
.merged-storyline .story-node:nth-of-type(even) {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
/* 紀實長卷／pillar 段落 */
|
||||
.chronicle-reader,
|
||||
.chronicle-pager {
|
||||
max-width: min(920px, 100%);
|
||||
}
|
||||
|
||||
.variety-block {
|
||||
padding: clamp(18px, 4vw, 22px);
|
||||
}
|
||||
|
||||
.site-header-inner .main-title {
|
||||
letter-spacing: clamp(3px, 1vw, 6px);
|
||||
}
|
||||
|
||||
.map-layout {
|
||||
grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
|
||||
gap: clamp(16px, 3vw, 22px);
|
||||
}
|
||||
|
||||
.map-my-maps-frame {
|
||||
height: min(52vh, 520px);
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.map-embed-all {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 重逢區兩張演唱會大卡之間留白 */
|
||||
#stage-now {
|
||||
gap: clamp(36px, 5vw, 50px);
|
||||
}
|
||||
|
||||
/* 演唱會卡片內距 */
|
||||
.con-1,
|
||||
.con-2,
|
||||
.con-3,
|
||||
.con-4,
|
||||
#yellownote-stage {
|
||||
padding: clamp(32px, 5vw, 44px) clamp(22px, 5vw, 48px) !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: clamp(24px, 5vw, 40px) !important;
|
||||
font-size: clamp(1.15rem, 2.8vw, 1.45rem);
|
||||
}
|
||||
|
||||
.concert-container {
|
||||
padding-left: clamp(12px, 3vw, 20px);
|
||||
padding-right: clamp(12px, 3vw, 20px);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.concert-page .search-input:focus {
|
||||
width: min(100%, 440px);
|
||||
}
|
||||
|
||||
.concert-page img[src*="assets/images/concert/"] {
|
||||
width: min(560px, 88%);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 歌詞頁 */
|
||||
body.lyrics-page {
|
||||
margin: clamp(24px, 5vw, 56px) !important;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html:has(body.lyrics-page) {
|
||||
font-size: 118.75% !important;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table {
|
||||
border-spacing: clamp(12px, 3vw, 24px) !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table p {
|
||||
font-size: 1.2rem !important;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
body.lyrics-page h1 {
|
||||
font-size: clamp(1.6rem, 5vw, 2.1rem) !important;
|
||||
}
|
||||
}
|
||||
/* iPad／平板 RWD — max-width ≤1180px（含 iPad 直／橫與小平板／小筆電） */
|
||||
|
||||
/* 頂欄漢堡：與 style.css 992 斷點一致，避免本檔 1180 規則把選單列壓回橫排 */
|
||||
@media (max-width: 991px) {
|
||||
|
||||
.portal-nav>ul {
|
||||
flex: none;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav>ul>li>a {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
|
||||
html:has(.portal-nav) {
|
||||
scroll-padding-top: clamp(52px, 12vw, 76px);
|
||||
}
|
||||
|
||||
nav:not(.portal-nav) {
|
||||
padding-left: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
padding-right: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
}
|
||||
|
||||
.portal-nav {
|
||||
padding-left: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
padding-right: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
row-gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav>ul {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav .logo {
|
||||
width: min(240px, 38vw);
|
||||
max-width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.portal-nav>ul {
|
||||
flex-wrap: wrap;
|
||||
gap: clamp(12px, 2vw, 18px);
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
flex: 1 1 280px;
|
||||
}
|
||||
|
||||
.portal-nav>ul>li>a {
|
||||
min-height: 44px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
nav:not(.portal-nav):not(.bilivideo-episode-nav) ul {
|
||||
gap: clamp(12px, 2vw, 20px);
|
||||
}
|
||||
|
||||
header.inner-page-header {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
header#origin .hero .site-header-inner .main-title {
|
||||
font-size: clamp(1.75rem, 2.25vw + 1rem, 2.35rem);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: clamp(1rem, 1.5vw + 0.65rem, 1.15rem);
|
||||
}
|
||||
|
||||
.container,
|
||||
.content-container {
|
||||
padding-left: clamp(14px, 1.5vw + 10px, 22px);
|
||||
padding-right: clamp(14px, 1.5vw + 10px, 22px);
|
||||
}
|
||||
|
||||
.home-page .container {
|
||||
padding-left: clamp(14px, 1.5vw + 10px, 22px);
|
||||
padding-right: clamp(14px, 1.5vw + 10px, 22px);
|
||||
}
|
||||
|
||||
section {
|
||||
padding: clamp(26px, 3vw + 18px, 36px) clamp(16px, 2.5vw + 12px, 28px) !important;
|
||||
}
|
||||
|
||||
.story-grid {
|
||||
gap: clamp(18px, 4vw, 28px);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: clamp(18px, 4vw, 26px);
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
padding: clamp(10px, 2vw, 14px);
|
||||
}
|
||||
|
||||
/* 首頁／跨時空軌跡：鑽石主軸在平板改左側縱線（對齊舊 ≤900px 邏輯） */
|
||||
.merged-storyline::before {
|
||||
left: 18px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node {
|
||||
width: calc(100% - 44px);
|
||||
margin-left: 44px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd),
|
||||
.merged-storyline .story-node:nth-of-type(even) {
|
||||
margin-left: 44px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node::before {
|
||||
left: -39px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node::after,
|
||||
.merged-storyline .story-node:nth-of-type(odd)::after,
|
||||
.merged-storyline .story-node:nth-of-type(even)::after {
|
||||
left: 12px;
|
||||
right: auto;
|
||||
top: -14px;
|
||||
transform: rotate(-8deg);
|
||||
transform-origin: center center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1.2;
|
||||
padding: 4px 9px;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd)::before,
|
||||
.merged-storyline .story-node:nth-of-type(even)::before {
|
||||
left: -39px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd),
|
||||
.merged-storyline .story-node:nth-of-type(even) {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
/* 紀實長卷／pillar 段落 */
|
||||
.chronicle-reader,
|
||||
.chronicle-pager {
|
||||
max-width: min(920px, 100%);
|
||||
}
|
||||
|
||||
.variety-block {
|
||||
padding: clamp(18px, 4vw, 22px);
|
||||
}
|
||||
|
||||
.site-header-inner .main-title {
|
||||
letter-spacing: clamp(3px, 1vw, 6px);
|
||||
}
|
||||
|
||||
.map-layout {
|
||||
grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
|
||||
gap: clamp(16px, 3vw, 22px);
|
||||
}
|
||||
|
||||
.map-my-maps-frame {
|
||||
height: min(52vh, 520px);
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.map-embed-all {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 重逢區兩張演唱會大卡之間留白 */
|
||||
#stage-now {
|
||||
gap: clamp(36px, 5vw, 50px);
|
||||
}
|
||||
|
||||
/* 演唱會卡片內距 */
|
||||
.con-1,
|
||||
.con-2,
|
||||
.con-3,
|
||||
.con-4,
|
||||
#yellownote-stage {
|
||||
padding: clamp(32px, 5vw, 44px) clamp(22px, 5vw, 48px) !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: clamp(24px, 5vw, 40px) !important;
|
||||
font-size: clamp(1.15rem, 2.8vw, 1.45rem);
|
||||
}
|
||||
|
||||
.concert-container {
|
||||
padding-left: clamp(12px, 3vw, 20px);
|
||||
padding-right: clamp(12px, 3vw, 20px);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.concert-page .search-input:focus {
|
||||
width: min(100%, 440px);
|
||||
}
|
||||
|
||||
.concert-page img[src*="assets/images/concert/"] {
|
||||
width: min(560px, 88%);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 歌詞頁 */
|
||||
body.lyrics-page {
|
||||
margin: clamp(24px, 5vw, 56px) !important;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html:has(body.lyrics-page) {
|
||||
font-size: 118.75% !important;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table {
|
||||
border-spacing: clamp(12px, 3vw, 24px) !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table p {
|
||||
font-size: 1.2rem !important;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
body.lyrics-page h1 {
|
||||
font-size: clamp(1.6rem, 5vw, 2.1rem) !important;
|
||||
}
|
||||
}
|
||||
+523
-523
File diff suppressed because it is too large.
Load diff
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
@@ -1,6 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 20" width="320" height="20" preserveAspectRatio="none" aria-hidden="true">
|
||||
<path fill="none" stroke="#c9a000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2 13c11-9 23 8 36-1s28-7 42 5 30-12 46-2 34 9 50-1 26-6 40 4 22-8 36 2 28 5 42-3"/>
|
||||
<path fill="none" stroke="#f5d24a" stroke-width="1.5" stroke-linecap="round" opacity="0.92"
|
||||
d="M0 14c16-10 30 9 48-2s34-5 52 6 38-11 56-1 30 7 48-2 36-4 52 5 28-7 40 3"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 20" width="320" height="20" preserveAspectRatio="none" aria-hidden="true">
|
||||
<path fill="none" stroke="#c9a000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2 13c11-9 23 8 36-1s28-7 42 5 30-12 46-2 34 9 50-1 26-6 40 4 22-8 36 2 28 5 42-3"/>
|
||||
<path fill="none" stroke="#f5d24a" stroke-width="1.5" stroke-linecap="round" opacity="0.92"
|
||||
d="M0 14c16-10 30 9 48-2s34-5 52 6 38-11 56-1 30 7 48-2 36-4 52 5 28-7 40 3"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 517 B After Width: | Height: | Size: 523 B |
@@ -1,47 +1,47 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M389.12,133.12C389.12,59.72,329.4,0,256,0S122.88,59.72,122.88,133.12c0,75.08,64.532,151.122,112.763,169.718
|
||||
l-7.373,7.352c-2.908,2.929-3.789,7.352-2.212,11.162c1.577,3.83,5.325,6.328,9.462,6.328h13.66
|
||||
c30.577,72.95,14.438,89.743-7.885,112.538c-13.701,14.008-29.225,29.86-36.209,59.167c-1.331,5.489,2.068,11.018,7.578,12.329
|
||||
c0.799,0.205,1.597,0.287,2.376,0.287c4.649,0,8.847-3.154,9.953-7.864c5.693-23.777,18.534-36.905,30.945-49.582
|
||||
c27.955-28.57,44.38-53.494,15.401-126.874h5.141c4.137,0,7.885-2.499,9.462-6.328c1.577-3.809,0.696-8.233-2.212-11.162
|
||||
l-7.373-7.352C324.588,284.242,389.12,208.2,389.12,133.12z M256,61.44c-39.526,0-71.68,32.154-71.68,71.68
|
||||
c0,5.652-4.588,10.24-10.24,10.24c-5.653,0-10.24-4.588-10.24-10.24c0-50.811,41.349-92.16,92.16-92.16
|
||||
c5.652,0,10.24,4.588,10.24,10.24S261.652,61.44,256,61.44z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M389.12,133.12C389.12,59.72,329.4,0,256,0S122.88,59.72,122.88,133.12c0,75.08,64.532,151.122,112.763,169.718
|
||||
l-7.373,7.352c-2.908,2.929-3.789,7.352-2.212,11.162c1.577,3.83,5.325,6.328,9.462,6.328h13.66
|
||||
c30.577,72.95,14.438,89.743-7.885,112.538c-13.701,14.008-29.225,29.86-36.209,59.167c-1.331,5.489,2.068,11.018,7.578,12.329
|
||||
c0.799,0.205,1.597,0.287,2.376,0.287c4.649,0,8.847-3.154,9.953-7.864c5.693-23.777,18.534-36.905,30.945-49.582
|
||||
c27.955-28.57,44.38-53.494,15.401-126.874h5.141c4.137,0,7.885-2.499,9.462-6.328c1.577-3.809,0.696-8.233-2.212-11.162
|
||||
l-7.373-7.352C324.588,284.242,389.12,208.2,389.12,133.12z M256,61.44c-39.526,0-71.68,32.154-71.68,71.68
|
||||
c0,5.652-4.588,10.24-10.24,10.24c-5.653,0-10.24-4.588-10.24-10.24c0-50.811,41.349-92.16,92.16-92.16
|
||||
c5.652,0,10.24,4.588,10.24,10.24S261.652,61.44,256,61.44z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.4 KiB |
+1643
-1643
File diff suppressed because it is too large.
Load diff
|
Before Width: | Height: | Size: 170 KiB After Width: | Height: | Size: 172 KiB |
+304
-304
@@ -1,304 +1,304 @@
|
||||
(() => {
|
||||
const canvas = document.getElementById("particles");
|
||||
if (canvas) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
let particles = [];
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = Math.random() * 4 + 1;
|
||||
this.speedX = Math.random() * 0.5 - 0.25;
|
||||
this.speedY = Math.random() * 0.5 + 0.2;
|
||||
}
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
if (this.y > canvas.height) this.y = 0;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#FFDD00";
|
||||
ctx.globalAlpha = 0.6;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function initParticles() {
|
||||
particles = [];
|
||||
for (let i = 0; i < 80; i += 1) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
}
|
||||
|
||||
function animateParticles() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (const particle of particles) {
|
||||
particle.update();
|
||||
particle.draw();
|
||||
}
|
||||
requestAnimationFrame(animateParticles);
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
animateParticles();
|
||||
window.addEventListener("resize", () => {
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
});
|
||||
}
|
||||
|
||||
const tabs = Array.from(document.querySelectorAll(".tab-btn"));
|
||||
const cards = Array.from(document.querySelectorAll(".polaroid-card"));
|
||||
const searchInput = document.getElementById("itinerary-search");
|
||||
const itineraryList = document.querySelector(".itinerary-list");
|
||||
const detailPanel = document.getElementById("detail-panel");
|
||||
const detailDate = document.getElementById("detail-date");
|
||||
const detailTitle = document.getElementById("detail-title");
|
||||
const detailDesc = document.getElementById("detail-desc");
|
||||
const detailQuote = document.getElementById("detail-quote");
|
||||
const detailTag = document.getElementById("detail-tag");
|
||||
const detailLink = document.getElementById("detail-link");
|
||||
const detailImage = document.getElementById("detail-image");
|
||||
const memberMapFrame = document.getElementById("member-map");
|
||||
const mapEmbedSingle = document.getElementById("map-embed-single");
|
||||
const mapEmbedAll = document.getElementById("map-embed-all");
|
||||
const openMapLink = document.getElementById("open-map-link");
|
||||
const openMapLinksDual = document.getElementById("open-map-links-dual");
|
||||
const openMapLinkKo = document.getElementById("open-map-link-ko");
|
||||
const openMapLinkEun = document.getElementById("open-map-link-eun");
|
||||
const dayGroups = new Map();
|
||||
|
||||
let currentMember = "eun";
|
||||
let currentKeyword = "";
|
||||
const memberMaps = {
|
||||
eun: {
|
||||
embed: "https://www.google.com/maps/d/embed?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI&ehbc=2E312F",
|
||||
open: "https://www.google.com/maps/d/u/0/viewer?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI"
|
||||
},
|
||||
ko: {
|
||||
embed: "https://www.google.com/maps/d/embed?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw&hl=zh-TW&ehbc=2E312F",
|
||||
open: "https://www.google.com/maps/d/u/0/viewer?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw"
|
||||
}
|
||||
};
|
||||
const memberTripPrefix = {
|
||||
ko: "高高父子遊台灣",
|
||||
eun: "殷空少搭飛機去台灣高雄"
|
||||
};
|
||||
const memberSortOrder = { eun: 0, ko: 1 };
|
||||
|
||||
function normalizeMember(member) {
|
||||
if (member === "kogo") return "ko";
|
||||
return member;
|
||||
}
|
||||
|
||||
function getMemberLabel(member) {
|
||||
const normalized = normalizeMember(member);
|
||||
if (normalized === "eun") return "殷志源";
|
||||
if (normalized === "ko") return "高志溶";
|
||||
return "未分類";
|
||||
}
|
||||
|
||||
function getDayToken(rawDate) {
|
||||
const match = String(rawDate || "").match(/Day\s*(\d+)/i);
|
||||
if (!match) return String(rawDate || "未分類");
|
||||
return "Day " + match[1];
|
||||
}
|
||||
|
||||
function getGroupLabel(card) {
|
||||
const date = getDayToken(card.dataset.date || "未分類");
|
||||
const normalized = normalizeMember(card.dataset.member || "");
|
||||
const prefix = memberTripPrefix[normalized] || getMemberLabel(normalized);
|
||||
return prefix + "_" + date;
|
||||
}
|
||||
|
||||
function setDualMapVisible(isAll) {
|
||||
if (mapEmbedSingle && mapEmbedAll) {
|
||||
mapEmbedSingle.hidden = isAll ? true : false;
|
||||
mapEmbedAll.hidden = isAll ? false : true;
|
||||
mapEmbedAll.setAttribute("aria-hidden", isAll ? "false" : "true");
|
||||
}
|
||||
if (openMapLink && openMapLinksDual) {
|
||||
openMapLink.hidden = isAll ? true : false;
|
||||
openMapLinksDual.hidden = isAll ? false : true;
|
||||
}
|
||||
}
|
||||
|
||||
function updateMapByMember(member) {
|
||||
const normalized = normalizeMember(member);
|
||||
if (normalized === "all") {
|
||||
setDualMapVisible(true);
|
||||
if (openMapLinkKo) openMapLinkKo.href = memberMaps.ko.open;
|
||||
if (openMapLinkEun) openMapLinkEun.href = memberMaps.eun.open;
|
||||
return;
|
||||
}
|
||||
setDualMapVisible(false);
|
||||
const mapConfig = memberMaps[normalized];
|
||||
if (!mapConfig || !memberMapFrame) return;
|
||||
memberMapFrame.src = mapConfig.embed;
|
||||
if (openMapLink) openMapLink.href = mapConfig.open;
|
||||
}
|
||||
|
||||
function getCardSearchText(card) {
|
||||
return [
|
||||
card.dataset.date || "",
|
||||
card.dataset.title || "",
|
||||
card.dataset.desc || "",
|
||||
card.dataset.tag || "",
|
||||
].join(" ").toLowerCase();
|
||||
}
|
||||
|
||||
function createDayGroup(dayLabel) {
|
||||
const group = document.createElement("section");
|
||||
group.className = "day-group";
|
||||
group.dataset.day = dayLabel;
|
||||
|
||||
const toggle = document.createElement("button");
|
||||
toggle.type = "button";
|
||||
toggle.className = "day-toggle";
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
toggle.innerHTML = "<span>" + dayLabel + "</span><i class='fa-solid fa-chevron-down'></i>";
|
||||
|
||||
const body = document.createElement("div");
|
||||
body.className = "day-cards";
|
||||
body.style.display = "none";
|
||||
|
||||
group.appendChild(toggle);
|
||||
group.appendChild(body);
|
||||
itineraryList.appendChild(group);
|
||||
dayGroups.set(dayLabel, { group, toggle, body });
|
||||
return dayGroups.get(dayLabel);
|
||||
}
|
||||
|
||||
function setDayExpanded(dayGroup, shouldExpand) {
|
||||
dayGroup.toggle.setAttribute("aria-expanded", shouldExpand ? "true" : "false");
|
||||
dayGroup.body.style.display = shouldExpand ? "grid" : "none";
|
||||
dayGroup.group.classList.toggle("expanded", shouldExpand);
|
||||
}
|
||||
|
||||
function initializeDayGroups() {
|
||||
const sortedCards = [...cards].sort((a, b) => {
|
||||
const memberA = normalizeMember(a.dataset.member || "");
|
||||
const memberB = normalizeMember(b.dataset.member || "");
|
||||
const memberDiff = (memberSortOrder[memberA] ?? 99) - (memberSortOrder[memberB] ?? 99);
|
||||
if (memberDiff !== 0) return memberDiff;
|
||||
|
||||
const dayA = Number((getDayToken(a.dataset.date).match(/\d+/) || [999])[0]);
|
||||
const dayB = Number((getDayToken(b.dataset.date).match(/\d+/) || [999])[0]);
|
||||
return dayA - dayB;
|
||||
});
|
||||
|
||||
sortedCards.forEach((card) => {
|
||||
const dayLabel = getGroupLabel(card);
|
||||
const dayGroup = dayGroups.get(dayLabel) || createDayGroup(dayLabel);
|
||||
dayGroup.body.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
function updateDayGroupVisibility() {
|
||||
dayGroups.forEach(({ group, body, toggle }) => {
|
||||
const visibleCards = Array.from(body.querySelectorAll(".polaroid-card")).filter((card) => card.style.display !== "none");
|
||||
group.style.display = visibleCards.length ? "" : "none";
|
||||
if (!visibleCards.length) {
|
||||
setDayExpanded({ group, toggle, body }, false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function ensureExpandedForCard(card) {
|
||||
const dayGroup = dayGroups.get(getGroupLabel(card));
|
||||
if (!dayGroup) return;
|
||||
setDayExpanded(dayGroup, true);
|
||||
}
|
||||
|
||||
function setActiveCard(card, options = {}) {
|
||||
const { expandDay = true } = options;
|
||||
cards.forEach((item) => item.classList.remove("active"));
|
||||
card.classList.add("active");
|
||||
if (expandDay) {
|
||||
ensureExpandedForCard(card);
|
||||
}
|
||||
const mapKey = currentMember === "all" ? "all" : currentMember;
|
||||
updateMapByMember(mapKey);
|
||||
|
||||
detailDate.textContent = card.dataset.date || "";
|
||||
detailTitle.textContent = card.dataset.title || "";
|
||||
detailDesc.textContent = card.dataset.desc || "";
|
||||
detailQuote.textContent = "「" + (card.dataset.quote || "") + "」";
|
||||
detailTag.textContent = card.dataset.tag || "";
|
||||
detailLink.href = card.dataset.link || "#";
|
||||
detailImage.src = card.querySelector("img").src;
|
||||
detailImage.alt = "節目截圖 - " + (card.dataset.title || "行程地點");
|
||||
}
|
||||
|
||||
function applyFilter() {
|
||||
let firstVisible = null;
|
||||
cards.forEach((card) => {
|
||||
const cardMember = normalizeMember(card.dataset.member || "");
|
||||
const matchedMember = currentMember === "all" || cardMember === currentMember;
|
||||
const matchedKeyword = !currentKeyword || getCardSearchText(card).includes(currentKeyword);
|
||||
const matched = matchedMember && matchedKeyword;
|
||||
card.style.display = matched ? "" : "none";
|
||||
if (matched && !firstVisible) firstVisible = card;
|
||||
});
|
||||
updateDayGroupVisibility();
|
||||
const activeVisibleCard = cards.find((card) => card.classList.contains("active") && card.style.display !== "none");
|
||||
const fallbackCard = activeVisibleCard || firstVisible;
|
||||
if (fallbackCard) {
|
||||
setActiveCard(fallbackCard, { expandDay: false });
|
||||
} else {
|
||||
updateMapByMember(currentMember === "all" ? "all" : currentMember);
|
||||
}
|
||||
}
|
||||
|
||||
tabs.forEach((tab) => {
|
||||
tab.addEventListener("click", () => {
|
||||
tabs.forEach((item) => {
|
||||
item.classList.remove("active");
|
||||
item.setAttribute("aria-pressed", "false");
|
||||
});
|
||||
tab.classList.add("active");
|
||||
tab.setAttribute("aria-pressed", "true");
|
||||
currentMember = normalizeMember(tab.dataset.member || "all");
|
||||
applyFilter();
|
||||
});
|
||||
});
|
||||
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener("input", (event) => {
|
||||
currentKeyword = event.target.value.trim().toLowerCase();
|
||||
applyFilter();
|
||||
});
|
||||
}
|
||||
|
||||
itineraryList.addEventListener("click", (event) => {
|
||||
const toggle = event.target.closest(".day-toggle");
|
||||
if (!toggle) return;
|
||||
const group = toggle.closest(".day-group");
|
||||
if (!group) return;
|
||||
const dayGroup = dayGroups.get(group.dataset.day);
|
||||
if (!dayGroup) return;
|
||||
const isExpanded = dayGroup.toggle.getAttribute("aria-expanded") === "true";
|
||||
setDayExpanded(dayGroup, !isExpanded);
|
||||
});
|
||||
|
||||
cards.forEach((card) => {
|
||||
card.addEventListener("click", () => {
|
||||
setActiveCard(card, { expandDay: true });
|
||||
if (window.innerWidth < 920) {
|
||||
detailPanel.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
initializeDayGroups();
|
||||
applyFilter();
|
||||
})();
|
||||
(() => {
|
||||
const canvas = document.getElementById("particles");
|
||||
if (canvas) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
let particles = [];
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = Math.random() * 4 + 1;
|
||||
this.speedX = Math.random() * 0.5 - 0.25;
|
||||
this.speedY = Math.random() * 0.5 + 0.2;
|
||||
}
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
if (this.y > canvas.height) this.y = 0;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#FFDD00";
|
||||
ctx.globalAlpha = 0.6;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function initParticles() {
|
||||
particles = [];
|
||||
for (let i = 0; i < 80; i += 1) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
}
|
||||
|
||||
function animateParticles() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (const particle of particles) {
|
||||
particle.update();
|
||||
particle.draw();
|
||||
}
|
||||
requestAnimationFrame(animateParticles);
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
animateParticles();
|
||||
window.addEventListener("resize", () => {
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
});
|
||||
}
|
||||
|
||||
const tabs = Array.from(document.querySelectorAll(".tab-btn"));
|
||||
const cards = Array.from(document.querySelectorAll(".polaroid-card"));
|
||||
const searchInput = document.getElementById("itinerary-search");
|
||||
const itineraryList = document.querySelector(".itinerary-list");
|
||||
const detailPanel = document.getElementById("detail-panel");
|
||||
const detailDate = document.getElementById("detail-date");
|
||||
const detailTitle = document.getElementById("detail-title");
|
||||
const detailDesc = document.getElementById("detail-desc");
|
||||
const detailQuote = document.getElementById("detail-quote");
|
||||
const detailTag = document.getElementById("detail-tag");
|
||||
const detailLink = document.getElementById("detail-link");
|
||||
const detailImage = document.getElementById("detail-image");
|
||||
const memberMapFrame = document.getElementById("member-map");
|
||||
const mapEmbedSingle = document.getElementById("map-embed-single");
|
||||
const mapEmbedAll = document.getElementById("map-embed-all");
|
||||
const openMapLink = document.getElementById("open-map-link");
|
||||
const openMapLinksDual = document.getElementById("open-map-links-dual");
|
||||
const openMapLinkKo = document.getElementById("open-map-link-ko");
|
||||
const openMapLinkEun = document.getElementById("open-map-link-eun");
|
||||
const dayGroups = new Map();
|
||||
|
||||
let currentMember = "eun";
|
||||
let currentKeyword = "";
|
||||
const memberMaps = {
|
||||
eun: {
|
||||
embed: "https://www.google.com/maps/d/embed?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI&ehbc=2E312F",
|
||||
open: "https://www.google.com/maps/d/u/0/viewer?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI"
|
||||
},
|
||||
ko: {
|
||||
embed: "https://www.google.com/maps/d/embed?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw&hl=zh-TW&ehbc=2E312F",
|
||||
open: "https://www.google.com/maps/d/u/0/viewer?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw"
|
||||
}
|
||||
};
|
||||
const memberTripPrefix = {
|
||||
ko: "高高父子遊台灣",
|
||||
eun: "殷空少搭飛機去台灣高雄"
|
||||
};
|
||||
const memberSortOrder = { eun: 0, ko: 1 };
|
||||
|
||||
function normalizeMember(member) {
|
||||
if (member === "kogo") return "ko";
|
||||
return member;
|
||||
}
|
||||
|
||||
function getMemberLabel(member) {
|
||||
const normalized = normalizeMember(member);
|
||||
if (normalized === "eun") return "殷志源";
|
||||
if (normalized === "ko") return "高志溶";
|
||||
return "未分類";
|
||||
}
|
||||
|
||||
function getDayToken(rawDate) {
|
||||
const match = String(rawDate || "").match(/Day\s*(\d+)/i);
|
||||
if (!match) return String(rawDate || "未分類");
|
||||
return "Day " + match[1];
|
||||
}
|
||||
|
||||
function getGroupLabel(card) {
|
||||
const date = getDayToken(card.dataset.date || "未分類");
|
||||
const normalized = normalizeMember(card.dataset.member || "");
|
||||
const prefix = memberTripPrefix[normalized] || getMemberLabel(normalized);
|
||||
return prefix + "_" + date;
|
||||
}
|
||||
|
||||
function setDualMapVisible(isAll) {
|
||||
if (mapEmbedSingle && mapEmbedAll) {
|
||||
mapEmbedSingle.hidden = isAll ? true : false;
|
||||
mapEmbedAll.hidden = isAll ? false : true;
|
||||
mapEmbedAll.setAttribute("aria-hidden", isAll ? "false" : "true");
|
||||
}
|
||||
if (openMapLink && openMapLinksDual) {
|
||||
openMapLink.hidden = isAll ? true : false;
|
||||
openMapLinksDual.hidden = isAll ? false : true;
|
||||
}
|
||||
}
|
||||
|
||||
function updateMapByMember(member) {
|
||||
const normalized = normalizeMember(member);
|
||||
if (normalized === "all") {
|
||||
setDualMapVisible(true);
|
||||
if (openMapLinkKo) openMapLinkKo.href = memberMaps.ko.open;
|
||||
if (openMapLinkEun) openMapLinkEun.href = memberMaps.eun.open;
|
||||
return;
|
||||
}
|
||||
setDualMapVisible(false);
|
||||
const mapConfig = memberMaps[normalized];
|
||||
if (!mapConfig || !memberMapFrame) return;
|
||||
memberMapFrame.src = mapConfig.embed;
|
||||
if (openMapLink) openMapLink.href = mapConfig.open;
|
||||
}
|
||||
|
||||
function getCardSearchText(card) {
|
||||
return [
|
||||
card.dataset.date || "",
|
||||
card.dataset.title || "",
|
||||
card.dataset.desc || "",
|
||||
card.dataset.tag || "",
|
||||
].join(" ").toLowerCase();
|
||||
}
|
||||
|
||||
function createDayGroup(dayLabel) {
|
||||
const group = document.createElement("section");
|
||||
group.className = "day-group";
|
||||
group.dataset.day = dayLabel;
|
||||
|
||||
const toggle = document.createElement("button");
|
||||
toggle.type = "button";
|
||||
toggle.className = "day-toggle";
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
toggle.innerHTML = "<span>" + dayLabel + "</span><i class='fa-solid fa-chevron-down'></i>";
|
||||
|
||||
const body = document.createElement("div");
|
||||
body.className = "day-cards";
|
||||
body.style.display = "none";
|
||||
|
||||
group.appendChild(toggle);
|
||||
group.appendChild(body);
|
||||
itineraryList.appendChild(group);
|
||||
dayGroups.set(dayLabel, { group, toggle, body });
|
||||
return dayGroups.get(dayLabel);
|
||||
}
|
||||
|
||||
function setDayExpanded(dayGroup, shouldExpand) {
|
||||
dayGroup.toggle.setAttribute("aria-expanded", shouldExpand ? "true" : "false");
|
||||
dayGroup.body.style.display = shouldExpand ? "grid" : "none";
|
||||
dayGroup.group.classList.toggle("expanded", shouldExpand);
|
||||
}
|
||||
|
||||
function initializeDayGroups() {
|
||||
const sortedCards = [...cards].sort((a, b) => {
|
||||
const memberA = normalizeMember(a.dataset.member || "");
|
||||
const memberB = normalizeMember(b.dataset.member || "");
|
||||
const memberDiff = (memberSortOrder[memberA] ?? 99) - (memberSortOrder[memberB] ?? 99);
|
||||
if (memberDiff !== 0) return memberDiff;
|
||||
|
||||
const dayA = Number((getDayToken(a.dataset.date).match(/\d+/) || [999])[0]);
|
||||
const dayB = Number((getDayToken(b.dataset.date).match(/\d+/) || [999])[0]);
|
||||
return dayA - dayB;
|
||||
});
|
||||
|
||||
sortedCards.forEach((card) => {
|
||||
const dayLabel = getGroupLabel(card);
|
||||
const dayGroup = dayGroups.get(dayLabel) || createDayGroup(dayLabel);
|
||||
dayGroup.body.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
function updateDayGroupVisibility() {
|
||||
dayGroups.forEach(({ group, body, toggle }) => {
|
||||
const visibleCards = Array.from(body.querySelectorAll(".polaroid-card")).filter((card) => card.style.display !== "none");
|
||||
group.style.display = visibleCards.length ? "" : "none";
|
||||
if (!visibleCards.length) {
|
||||
setDayExpanded({ group, toggle, body }, false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function ensureExpandedForCard(card) {
|
||||
const dayGroup = dayGroups.get(getGroupLabel(card));
|
||||
if (!dayGroup) return;
|
||||
setDayExpanded(dayGroup, true);
|
||||
}
|
||||
|
||||
function setActiveCard(card, options = {}) {
|
||||
const { expandDay = true } = options;
|
||||
cards.forEach((item) => item.classList.remove("active"));
|
||||
card.classList.add("active");
|
||||
if (expandDay) {
|
||||
ensureExpandedForCard(card);
|
||||
}
|
||||
const mapKey = currentMember === "all" ? "all" : currentMember;
|
||||
updateMapByMember(mapKey);
|
||||
|
||||
detailDate.textContent = card.dataset.date || "";
|
||||
detailTitle.textContent = card.dataset.title || "";
|
||||
detailDesc.textContent = card.dataset.desc || "";
|
||||
detailQuote.textContent = "「" + (card.dataset.quote || "") + "」";
|
||||
detailTag.textContent = card.dataset.tag || "";
|
||||
detailLink.href = card.dataset.link || "#";
|
||||
detailImage.src = card.querySelector("img").src;
|
||||
detailImage.alt = "節目截圖 - " + (card.dataset.title || "行程地點");
|
||||
}
|
||||
|
||||
function applyFilter() {
|
||||
let firstVisible = null;
|
||||
cards.forEach((card) => {
|
||||
const cardMember = normalizeMember(card.dataset.member || "");
|
||||
const matchedMember = currentMember === "all" || cardMember === currentMember;
|
||||
const matchedKeyword = !currentKeyword || getCardSearchText(card).includes(currentKeyword);
|
||||
const matched = matchedMember && matchedKeyword;
|
||||
card.style.display = matched ? "" : "none";
|
||||
if (matched && !firstVisible) firstVisible = card;
|
||||
});
|
||||
updateDayGroupVisibility();
|
||||
const activeVisibleCard = cards.find((card) => card.classList.contains("active") && card.style.display !== "none");
|
||||
const fallbackCard = activeVisibleCard || firstVisible;
|
||||
if (fallbackCard) {
|
||||
setActiveCard(fallbackCard, { expandDay: false });
|
||||
} else {
|
||||
updateMapByMember(currentMember === "all" ? "all" : currentMember);
|
||||
}
|
||||
}
|
||||
|
||||
tabs.forEach((tab) => {
|
||||
tab.addEventListener("click", () => {
|
||||
tabs.forEach((item) => {
|
||||
item.classList.remove("active");
|
||||
item.setAttribute("aria-pressed", "false");
|
||||
});
|
||||
tab.classList.add("active");
|
||||
tab.setAttribute("aria-pressed", "true");
|
||||
currentMember = normalizeMember(tab.dataset.member || "all");
|
||||
applyFilter();
|
||||
});
|
||||
});
|
||||
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener("input", (event) => {
|
||||
currentKeyword = event.target.value.trim().toLowerCase();
|
||||
applyFilter();
|
||||
});
|
||||
}
|
||||
|
||||
itineraryList.addEventListener("click", (event) => {
|
||||
const toggle = event.target.closest(".day-toggle");
|
||||
if (!toggle) return;
|
||||
const group = toggle.closest(".day-group");
|
||||
if (!group) return;
|
||||
const dayGroup = dayGroups.get(group.dataset.day);
|
||||
if (!dayGroup) return;
|
||||
const isExpanded = dayGroup.toggle.getAttribute("aria-expanded") === "true";
|
||||
setDayExpanded(dayGroup, !isExpanded);
|
||||
});
|
||||
|
||||
cards.forEach((card) => {
|
||||
card.addEventListener("click", () => {
|
||||
setActiveCard(card, { expandDay: true });
|
||||
if (window.innerWidth < 920) {
|
||||
detailPanel.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
initializeDayGroups();
|
||||
applyFilter();
|
||||
})();
|
||||
+58
-58
@@ -1,58 +1,58 @@
|
||||
(() => {
|
||||
const canvas = document.getElementById("particles");
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
let particles = [];
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = Math.random() * 4 + 1;
|
||||
this.speedX = Math.random() * 0.5 - 0.25;
|
||||
this.speedY = Math.random() * 0.5 + 0.2;
|
||||
}
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
if (this.y > canvas.height) this.y = 0;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#FFDD00";
|
||||
ctx.globalAlpha = 0.6;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function initParticles() {
|
||||
particles = [];
|
||||
for (let i = 0; i < 80; i += 1) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
}
|
||||
|
||||
function animateParticles() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (const particle of particles) {
|
||||
particle.update();
|
||||
particle.draw();
|
||||
}
|
||||
requestAnimationFrame(animateParticles);
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
animateParticles();
|
||||
window.addEventListener("resize", () => {
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
});
|
||||
})();
|
||||
(() => {
|
||||
const canvas = document.getElementById("particles");
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
let particles = [];
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = Math.random() * 4 + 1;
|
||||
this.speedX = Math.random() * 0.5 - 0.25;
|
||||
this.speedY = Math.random() * 0.5 + 0.2;
|
||||
}
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
if (this.y > canvas.height) this.y = 0;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#FFDD00";
|
||||
ctx.globalAlpha = 0.6;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function initParticles() {
|
||||
particles = [];
|
||||
for (let i = 0; i < 80; i += 1) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
}
|
||||
|
||||
function animateParticles() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (const particle of particles) {
|
||||
particle.update();
|
||||
particle.draw();
|
||||
}
|
||||
requestAnimationFrame(animateParticles);
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
animateParticles();
|
||||
window.addEventListener("resize", () => {
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
});
|
||||
})();
|
||||
+479
-479
@@ -1,479 +1,479 @@
|
||||
(() => {
|
||||
/**
|
||||
* ── 導覽「尚未開放」連結 ─────────────────────────────────────────
|
||||
* 【兩個世界】① 僅 `extra/site-guide.html`：`<nav data-portal-nav-all-open>` 頂欄全可點；`main.site-guide-main` 內 `<a>` 不改寫。
|
||||
* ② 其餘每一頁：頂欄＋**頁內所有連結**（含 totoga2 分頁列、首頁內文）皆依 COMING_SOON／INDEX 白名單鎖定。
|
||||
* 【totoga2】頂欄四入口：時間軸（`timeline.html`）、圖文好讀版（`readable.html`）在 Set；電子書／影片可點。未同意不得從 Set 刪除或擅自開放。
|
||||
* 【硬規則】檔案在 repo ≠ 可開放；未同意不得從 Set 刪名、不得擴白名單、不得在模板新增可點項。
|
||||
* 【未公開】href 改 #、不可點。頂欄與頁內按鈕：NAV_SOON_PHRASES 滑過隨機氣泡（同 ::after）；無障礙 aria「尚無開放」；不加可見「（籌備中）」文字後綴。
|
||||
* 【totoga2 開放】`totoga2/ebook.html`、`totoga2/video.html` 可點；`timeline.html` 與 `totoga2/readable.html` 在 Set 內。
|
||||
* 頂欄勿加 `portal-nav__sub`（站主未要求）；曾用副標見 `.cursor/portal-nav-optimization-backlog.md`。
|
||||
* 完整條文：`.cursor/rules/portal-nav-rules.mdc`
|
||||
*/
|
||||
const NAV_SOON_PHRASES = [
|
||||
"奇蹟醞釀中",
|
||||
"感動載入中",
|
||||
"初心校準中",
|
||||
"黃海漫延中",
|
||||
"傳奇編排中",
|
||||
"夢想航行中",
|
||||
];
|
||||
|
||||
/** 主選單欄 `mouseleave` 後延遲關閉（ms），方便移入子選單或右側飛出層，避免略偏就關閉 */
|
||||
const SUBMENU_CLOSE_DELAY_MS = 650;
|
||||
|
||||
/** 橫向＋右側飛出子選單；≤991px 改漢堡＋直向展開（對齊常見 992 斷點） */
|
||||
const PORTAL_NAV_DESKTOP_MIN_PX = 992;
|
||||
|
||||
function isPortalNavDesktop() {
|
||||
return window.matchMedia(`(min-width: ${PORTAL_NAV_DESKTOP_MIN_PX}px)`).matches;
|
||||
}
|
||||
|
||||
function setPortalNavMenuOpen(nav, open) {
|
||||
nav.classList.toggle("portal-nav--open", open);
|
||||
const toggle = nav.querySelector(".portal-nav__menu-toggle");
|
||||
if (toggle) {
|
||||
toggle.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
toggle.setAttribute("aria-label", open ? "關閉選單" : "開啟選單");
|
||||
}
|
||||
if (!isPortalNavDesktop()) {
|
||||
document.body.classList.toggle("portal-nav-menu-open", open);
|
||||
} else {
|
||||
document.body.classList.remove("portal-nav-menu-open");
|
||||
}
|
||||
if (!open) {
|
||||
nav.querySelectorAll(":scope > ul > li.open, .portal-nav__subgroup.open").forEach((el) => {
|
||||
el.classList.remove("open");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function pickSoonPhrase() {
|
||||
return NAV_SOON_PHRASES[Math.floor(Math.random() * NAV_SOON_PHRASES.length)];
|
||||
}
|
||||
|
||||
/** 籌備中連結：滑過／聚焦時隨機一句（氣泡與 title 同步，頂欄與頁內按鈕共用） */
|
||||
function rollSoonLabel(link) {
|
||||
const p = pickSoonPhrase();
|
||||
link.style.setProperty("--portal-nav-soon-msg", JSON.stringify(p));
|
||||
link.setAttribute("title", p);
|
||||
}
|
||||
|
||||
const COMING_SOON_PAGES = new Set([
|
||||
"albums.html",
|
||||
"map.html",
|
||||
"member.html",
|
||||
"minister.html",
|
||||
"minister_ge.html",
|
||||
"readable.html",
|
||||
"timeline.html",
|
||||
"variety.html",
|
||||
]);
|
||||
|
||||
/**
|
||||
* 首頁僅下列錨點可點；其餘（如 #story）維持籌備中，須站主同意後才可加入。
|
||||
* 空字串：連到 index.html 且無 # 片段時視為可點（淪陷瞬間主項）。
|
||||
*/
|
||||
const INDEX_NAV_OPEN_HASHES = new Set(["", "#origin", "#start", "#mission", "#timeline"]);
|
||||
|
||||
function normalizePageKey(href) {
|
||||
if (!href || href === "#") return "";
|
||||
const core = href.split("#")[0].split("?")[0];
|
||||
const parts = core.split("/").filter(Boolean);
|
||||
const last = parts.length ? parts[parts.length - 1] : "";
|
||||
return last.toLowerCase();
|
||||
}
|
||||
|
||||
/** 比照原邏輯：取 href 前半與網址列檔名比對 */
|
||||
function hrefMatchesCurrentPage(href, currentPage) {
|
||||
if (!href || href === "#") return false;
|
||||
const [filePart] = href.split("#");
|
||||
const base = filePart.split("/").pop();
|
||||
return base === currentPage;
|
||||
}
|
||||
|
||||
/** 取得 #fragment（含 #）；若無錨點則回傳空字串 */
|
||||
function anchorFromHref(href) {
|
||||
const i = href.indexOf("#");
|
||||
if (i < 0) return "";
|
||||
return href.slice(i).split("?")[0];
|
||||
}
|
||||
|
||||
function markLinkComingSoon(link, originalHref) {
|
||||
const labelEl = link.querySelector(".portal-nav__label");
|
||||
const visibleTitle = labelEl ? labelEl.textContent.trim() : link.textContent.trim();
|
||||
link.setAttribute("data-coming-soon", "true");
|
||||
link.setAttribute("aria-disabled", "true");
|
||||
link.setAttribute("aria-label", `${visibleTitle}，尚無開放`);
|
||||
|
||||
const onSoonInteract = () => rollSoonLabel(link);
|
||||
link.addEventListener("pointerenter", onSoonInteract);
|
||||
link.addEventListener("focus", onSoonInteract);
|
||||
link.addEventListener("touchstart", onSoonInteract, { passive: true });
|
||||
|
||||
if (!link.dataset.originalHref) {
|
||||
link.dataset.originalHref = originalHref;
|
||||
}
|
||||
|
||||
link.setAttribute("href", "#");
|
||||
link.dataset.portalNavSoonRoll = "1";
|
||||
}
|
||||
|
||||
function linkShouldBeComingSoon(href, pageKey, pageKeysSoon) {
|
||||
if (pageKeysSoon.has(pageKey)) {
|
||||
return true;
|
||||
}
|
||||
if (pageKey === "index.html") {
|
||||
const frag = anchorFromHref(href);
|
||||
return !INDEX_NAV_OPEN_HASHES.has(frag);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function getPageKeysSoon() {
|
||||
return new Set([...COMING_SOON_PAGES].map((p) => normalizePageKey(String(p))).filter(Boolean));
|
||||
}
|
||||
|
||||
/** 將籌備中規則套用至容器內錨點（頂欄或整頁；`site-guide` 主文除外） */
|
||||
function applyComingSoonToAnchorElements(container) {
|
||||
if (!container) return;
|
||||
const pageKeysSoon = getPageKeysSoon();
|
||||
|
||||
container.querySelectorAll("a[href]").forEach((link) => {
|
||||
if (link.classList.contains("logo")) return;
|
||||
if (link.getAttribute("data-coming-soon") === "true") return;
|
||||
|
||||
const href = link.getAttribute("href");
|
||||
if (!href || href === "#") return;
|
||||
if (/^https?:\/\//i.test(href)) return;
|
||||
|
||||
const pageKey = normalizePageKey(href);
|
||||
if (!pageKey) return;
|
||||
|
||||
if (!linkShouldBeComingSoon(href, pageKey, pageKeysSoon)) return;
|
||||
|
||||
markLinkComingSoon(link, href);
|
||||
});
|
||||
}
|
||||
|
||||
/** 訪客頁：頁內連結與頂欄同一套 COMING_SOON；僅 site-guide 的 main.site-guide-main 跳過（頂欄 all-open 不影響此條） */
|
||||
function applyComingSoonSiteWide() {
|
||||
const siteGuideMain = document.querySelector("main.site-guide-main");
|
||||
document.querySelectorAll("a[href]").forEach((link) => {
|
||||
if (link.closest("nav.portal-nav")) return;
|
||||
if (siteGuideMain && siteGuideMain.contains(link)) return;
|
||||
if (link.classList.contains("logo")) return;
|
||||
|
||||
const href = link.getAttribute("href");
|
||||
if (!href || href === "#") return;
|
||||
if (/^https?:\/\//i.test(href)) return;
|
||||
|
||||
const pageKey = normalizePageKey(href);
|
||||
if (!pageKey) return;
|
||||
|
||||
const pageKeysSoon = getPageKeysSoon();
|
||||
if (!linkShouldBeComingSoon(href, pageKey, pageKeysSoon)) return;
|
||||
|
||||
markLinkComingSoon(link, href);
|
||||
});
|
||||
}
|
||||
|
||||
function blockNavigation(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function bindComingSoonBlockers() {
|
||||
document.querySelectorAll('a[data-coming-soon="true"]').forEach((link) => {
|
||||
if (link.dataset.portalNavSoonBound === "1") return;
|
||||
link.dataset.portalNavSoonBound = "1";
|
||||
link.addEventListener("click", blockNavigation);
|
||||
link.addEventListener("auxclick", blockNavigation);
|
||||
});
|
||||
}
|
||||
|
||||
/** 將籌備中規則套用至單一導覽列（含頂層 li 樣式） */
|
||||
function applyComingSoonToNav(nav) {
|
||||
applyComingSoonToAnchorElements(nav);
|
||||
|
||||
nav.querySelectorAll(":scope > ul > li").forEach((li) => {
|
||||
const trigger = li.querySelector(":scope > a[href]");
|
||||
if (!trigger || trigger.classList.contains("logo")) return;
|
||||
if (trigger.getAttribute("data-coming-soon") === "true") {
|
||||
li.classList.add("coming-soon");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 站根與 `portal-nav.js` 同層；依腳本路徑與當前頁路徑計算回到站根的相對前綴（如 `../`）。
|
||||
* 子資料夾內頁面之導覽連結必須帶此前綴，否則 `./assets/images`、`index.html` 會錯層。
|
||||
*/
|
||||
function portalNavRootPrefix() {
|
||||
const el =
|
||||
document.currentScript ||
|
||||
Array.from(document.querySelectorAll("script[src*='portal-nav.js']")).find((s) => s.src);
|
||||
if (!el?.src) return "./";
|
||||
try {
|
||||
const scriptPathname = new URL(el.src, window.location.href).pathname;
|
||||
const scriptDirSegs = scriptPathname.split("/").filter(Boolean);
|
||||
scriptDirSegs.pop();
|
||||
const pageDirSegs = window.location.pathname.split("/").filter(Boolean);
|
||||
pageDirSegs.pop();
|
||||
let i = 0;
|
||||
const a = scriptDirSegs;
|
||||
const b = pageDirSegs;
|
||||
while (i < a.length && i < b.length && a[i] === b[i]) {
|
||||
i += 1;
|
||||
}
|
||||
const ups = b.length - i;
|
||||
return ups > 0 ? "../".repeat(ups) : "./";
|
||||
} catch {
|
||||
return "./";
|
||||
}
|
||||
}
|
||||
|
||||
/** 全站導覽 HTML — `rp` 為站根相對前綴；僅修改此模板即可同步所有頁面
|
||||
* 五主項：淪陷瞬間、完整的六顆、現場的震撼、黃色留聲機、Yellow Note（全員是瘋子子選單暫關）。 */
|
||||
function buildPortalNavInnerHTML(rp) {
|
||||
return `
|
||||
<a class="logo" target="_blank" rel="noopener noreferrer" href="${rp}index.html"><img src="${rp}assets/images/logov.svg" alt="SECHSKIES Logo"></a>
|
||||
<button type="button" class="portal-nav__menu-toggle" aria-expanded="false" aria-controls="portal-primary-menu" aria-label="開啟選單">
|
||||
<span class="portal-nav__menu-toggle-icon" aria-hidden="true">
|
||||
<span class="portal-nav__menu-toggle-bar"></span>
|
||||
<span class="portal-nav__menu-toggle-bar"></span>
|
||||
<span class="portal-nav__menu-toggle-bar"></span>
|
||||
</span>
|
||||
</button>
|
||||
<ul id="portal-primary-menu">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html"><span class="portal-nav__label">淪陷瞬間</span></a>
|
||||
<ul class="portal-submenu">
|
||||
<li class="portal-nav__subgroup">
|
||||
<span class="portal-nav__subgroup-head"><span class="portal-nav__label">傳奇的轉折</span></span>
|
||||
<ul class="portal-submenu-nested" aria-label="傳奇的轉折">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/timeline.html"><span class="portal-nav__label">時間軸</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/ebook.html"><span class="portal-nav__label">電子書</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/readable.html"><span class="portal-nav__label">圖文好讀版</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/video.html"><span class="portal-nav__label">影片</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- 全員是瘋子（原全員發瘋）：暫不顯示子選單；恢復時改回 subgroup 並用此標題 -->
|
||||
</ul>
|
||||
</li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}member/member.html"><span class="portal-nav__label">完整的六顆</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.html"><span class="portal-nav__label">現場的震撼</span></a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.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>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html"><span class="portal-nav__label">黃色留聲機</span></a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html#new"><span class="portal-nav__label">啟動新篇章</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html#classic"><span class="portal-nav__label">輝煌全盛期</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">Yellow Note</span></a>
|
||||
<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 target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">聖地巡禮</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
const rootPrefix = portalNavRootPrefix();
|
||||
document.querySelectorAll("nav.portal-nav[data-portal-nav]").forEach((nav) => {
|
||||
nav.innerHTML = buildPortalNavInnerHTML(rootPrefix);
|
||||
if (!nav.hasAttribute("data-portal-nav-all-open")) {
|
||||
applyComingSoonToNav(nav);
|
||||
}
|
||||
});
|
||||
|
||||
applyComingSoonSiteWide();
|
||||
bindComingSoonBlockers();
|
||||
|
||||
const navs = Array.from(document.querySelectorAll(".portal-nav"));
|
||||
if (!navs.length) return;
|
||||
|
||||
const currentPage = window.location.pathname.split("/").pop() || "index.html";
|
||||
|
||||
navs.forEach((nav) => {
|
||||
/* 僅頂層主欄；子選單內巢狀 li 不綁 open，否則會關閉整欄下拉 */
|
||||
const items = Array.from(nav.querySelectorAll(":scope > ul > li"));
|
||||
const menuToggle = nav.querySelector(".portal-nav__menu-toggle");
|
||||
const desktopMq = window.matchMedia(`(min-width: ${PORTAL_NAV_DESKTOP_MIN_PX}px)`);
|
||||
|
||||
if (menuToggle) {
|
||||
menuToggle.addEventListener("click", () => {
|
||||
setPortalNavMenuOpen(nav, !nav.classList.contains("portal-nav--open"));
|
||||
});
|
||||
}
|
||||
|
||||
const closeIfOutside = (event) => {
|
||||
if (!nav.contains(event.target)) {
|
||||
setPortalNavMenuOpen(nav, false);
|
||||
items.forEach((item) => item.classList.remove("open"));
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("click", closeIfOutside);
|
||||
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape") setPortalNavMenuOpen(nav, false);
|
||||
});
|
||||
|
||||
desktopMq.addEventListener("change", (event) => {
|
||||
if (event.matches) setPortalNavMenuOpen(nav, false);
|
||||
});
|
||||
|
||||
nav.addEventListener("click", (event) => {
|
||||
if (isPortalNavDesktop()) return;
|
||||
|
||||
const subgroupHead = event.target.closest(".portal-nav__subgroup-head");
|
||||
if (subgroupHead) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const subgroup = subgroupHead.closest(".portal-nav__subgroup");
|
||||
if (subgroup) subgroup.classList.toggle("open");
|
||||
return;
|
||||
}
|
||||
|
||||
const link = event.target.closest("a[href]");
|
||||
if (!link || link.classList.contains("logo")) return;
|
||||
|
||||
const topItem = link.closest(".portal-nav > ul > li");
|
||||
const isTopTrigger =
|
||||
topItem &&
|
||||
link === topItem.querySelector(":scope > a") &&
|
||||
topItem.querySelector(":scope > .portal-submenu");
|
||||
|
||||
if (isTopTrigger) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (link.getAttribute("data-coming-soon") === "true") return;
|
||||
const href = link.getAttribute("href");
|
||||
if (href && href !== "#") setPortalNavMenuOpen(nav, false);
|
||||
});
|
||||
|
||||
items.forEach((item) => {
|
||||
const trigger = item.querySelector(":scope > a");
|
||||
const submenu = item.querySelector(":scope > .portal-submenu");
|
||||
if (!trigger || !submenu) return;
|
||||
|
||||
let closeTimer = null;
|
||||
const nestedPanels = Array.from(item.querySelectorAll(".portal-submenu-nested"));
|
||||
const hoverBound = { on: false };
|
||||
|
||||
const openItem = () => {
|
||||
if (!isPortalNavDesktop()) return;
|
||||
if (closeTimer) window.clearTimeout(closeTimer);
|
||||
items.forEach((other) => {
|
||||
if (other !== item) other.classList.remove("open");
|
||||
});
|
||||
item.classList.add("open");
|
||||
};
|
||||
|
||||
const cancelClose = () => {
|
||||
if (closeTimer) {
|
||||
window.clearTimeout(closeTimer);
|
||||
closeTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
const scheduleClose = () => {
|
||||
cancelClose();
|
||||
closeTimer = window.setTimeout(() => item.classList.remove("open"), SUBMENU_CLOSE_DELAY_MS);
|
||||
};
|
||||
|
||||
const leaveUnlessStillInside = (event) => {
|
||||
const next = event.relatedTarget;
|
||||
if (next instanceof Node && item.contains(next)) return;
|
||||
scheduleClose();
|
||||
};
|
||||
|
||||
const bindDesktopHover = () => {
|
||||
if (hoverBound.on) return;
|
||||
item.addEventListener("mouseenter", openItem);
|
||||
item.addEventListener("mouseleave", leaveUnlessStillInside);
|
||||
submenu.addEventListener("mouseenter", cancelClose);
|
||||
submenu.addEventListener("mouseleave", leaveUnlessStillInside);
|
||||
nestedPanels.forEach((panel) => {
|
||||
panel.addEventListener("mouseenter", cancelClose);
|
||||
panel.addEventListener("mouseleave", leaveUnlessStillInside);
|
||||
});
|
||||
hoverBound.on = true;
|
||||
};
|
||||
|
||||
const unbindDesktopHover = () => {
|
||||
if (!hoverBound.on) return;
|
||||
item.removeEventListener("mouseenter", openItem);
|
||||
item.removeEventListener("mouseleave", leaveUnlessStillInside);
|
||||
submenu.removeEventListener("mouseenter", cancelClose);
|
||||
submenu.removeEventListener("mouseleave", leaveUnlessStillInside);
|
||||
nestedPanels.forEach((panel) => {
|
||||
panel.removeEventListener("mouseenter", cancelClose);
|
||||
panel.removeEventListener("mouseleave", leaveUnlessStillInside);
|
||||
});
|
||||
hoverBound.on = false;
|
||||
item.classList.remove("open");
|
||||
};
|
||||
|
||||
const syncDesktopHover = () => {
|
||||
if (isPortalNavDesktop()) bindDesktopHover();
|
||||
else unbindDesktopHover();
|
||||
};
|
||||
|
||||
syncDesktopHover();
|
||||
desktopMq.addEventListener("change", syncDesktopHover);
|
||||
|
||||
trigger.addEventListener("focus", () => {
|
||||
if (isPortalNavDesktop()) openItem();
|
||||
});
|
||||
|
||||
trigger.addEventListener("click", (event) => {
|
||||
const isSoon = trigger.getAttribute("data-coming-soon") === "true";
|
||||
|
||||
if (!isPortalNavDesktop()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (!isSoon && !item.classList.contains("coming-soon")) {
|
||||
const menuList = nav.querySelector(":scope > ul");
|
||||
const prevScroll = menuList ? menuList.scrollTop : 0;
|
||||
items.forEach((other) => {
|
||||
if (other !== item) other.classList.remove("open");
|
||||
});
|
||||
item.classList.toggle("open");
|
||||
if (!item.classList.contains("open")) {
|
||||
item.querySelectorAll(".portal-nav__subgroup.open").forEach((sub) => {
|
||||
sub.classList.remove("open");
|
||||
});
|
||||
}
|
||||
if (menuList) {
|
||||
requestAnimationFrame(() => {
|
||||
menuList.scrollTop = prevScroll;
|
||||
});
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (isSoon) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const navLinks = Array.from(nav.querySelectorAll("a[href]")).filter((link) => !link.classList.contains("logo"));
|
||||
navLinks.forEach((link) => {
|
||||
const fallback = link.getAttribute("href");
|
||||
const source = link.dataset.originalHref || fallback;
|
||||
if (!source || source === "#") return;
|
||||
if (hrefMatchesCurrentPage(source, currentPage)) {
|
||||
link.classList.add("nav-current");
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
(() => {
|
||||
/**
|
||||
* ── 導覽「尚未開放」連結 ─────────────────────────────────────────
|
||||
* 【兩個世界】① 僅 `extra/site-guide.html`：`<nav data-portal-nav-all-open>` 頂欄全可點；`main.site-guide-main` 內 `<a>` 不改寫。
|
||||
* ② 其餘每一頁：頂欄＋**頁內所有連結**（含 totoga2 分頁列、首頁內文）皆依 COMING_SOON／INDEX 白名單鎖定。
|
||||
* 【totoga2】頂欄四入口：時間軸（`timeline.html`）、圖文好讀版（`readable.html`）在 Set；電子書／影片可點。未同意不得從 Set 刪除或擅自開放。
|
||||
* 【硬規則】檔案在 repo ≠ 可開放；未同意不得從 Set 刪名、不得擴白名單、不得在模板新增可點項。
|
||||
* 【未公開】href 改 #、不可點。頂欄與頁內按鈕：NAV_SOON_PHRASES 滑過隨機氣泡（同 ::after）；無障礙 aria「尚無開放」；不加可見「（籌備中）」文字後綴。
|
||||
* 【totoga2 開放】`totoga2/ebook.html`、`totoga2/video.html` 可點；`timeline.html` 與 `totoga2/readable.html` 在 Set 內。
|
||||
* 頂欄勿加 `portal-nav__sub`（站主未要求）；曾用副標見 `.cursor/portal-nav-optimization-backlog.md`。
|
||||
* 完整條文：`.cursor/rules/portal-nav-rules.mdc`
|
||||
*/
|
||||
const NAV_SOON_PHRASES = [
|
||||
"奇蹟醞釀中",
|
||||
"感動載入中",
|
||||
"初心校準中",
|
||||
"黃海漫延中",
|
||||
"傳奇編排中",
|
||||
"夢想航行中",
|
||||
];
|
||||
|
||||
/** 主選單欄 `mouseleave` 後延遲關閉（ms），方便移入子選單或右側飛出層，避免略偏就關閉 */
|
||||
const SUBMENU_CLOSE_DELAY_MS = 650;
|
||||
|
||||
/** 橫向＋右側飛出子選單；≤991px 改漢堡＋直向展開（對齊常見 992 斷點） */
|
||||
const PORTAL_NAV_DESKTOP_MIN_PX = 992;
|
||||
|
||||
function isPortalNavDesktop() {
|
||||
return window.matchMedia(`(min-width: ${PORTAL_NAV_DESKTOP_MIN_PX}px)`).matches;
|
||||
}
|
||||
|
||||
function setPortalNavMenuOpen(nav, open) {
|
||||
nav.classList.toggle("portal-nav--open", open);
|
||||
const toggle = nav.querySelector(".portal-nav__menu-toggle");
|
||||
if (toggle) {
|
||||
toggle.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
toggle.setAttribute("aria-label", open ? "關閉選單" : "開啟選單");
|
||||
}
|
||||
if (!isPortalNavDesktop()) {
|
||||
document.body.classList.toggle("portal-nav-menu-open", open);
|
||||
} else {
|
||||
document.body.classList.remove("portal-nav-menu-open");
|
||||
}
|
||||
if (!open) {
|
||||
nav.querySelectorAll(":scope > ul > li.open, .portal-nav__subgroup.open").forEach((el) => {
|
||||
el.classList.remove("open");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function pickSoonPhrase() {
|
||||
return NAV_SOON_PHRASES[Math.floor(Math.random() * NAV_SOON_PHRASES.length)];
|
||||
}
|
||||
|
||||
/** 籌備中連結：滑過／聚焦時隨機一句（氣泡與 title 同步，頂欄與頁內按鈕共用） */
|
||||
function rollSoonLabel(link) {
|
||||
const p = pickSoonPhrase();
|
||||
link.style.setProperty("--portal-nav-soon-msg", JSON.stringify(p));
|
||||
link.setAttribute("title", p);
|
||||
}
|
||||
|
||||
const COMING_SOON_PAGES = new Set([
|
||||
"albums.html",
|
||||
"map.html",
|
||||
"member.html",
|
||||
"minister.html",
|
||||
"minister_ge.html",
|
||||
"readable.html",
|
||||
"timeline.html",
|
||||
"variety.html",
|
||||
]);
|
||||
|
||||
/**
|
||||
* 首頁僅下列錨點可點；其餘（如 #story）維持籌備中，須站主同意後才可加入。
|
||||
* 空字串：連到 index.html 且無 # 片段時視為可點（淪陷瞬間主項）。
|
||||
*/
|
||||
const INDEX_NAV_OPEN_HASHES = new Set(["", "#origin", "#start", "#mission", "#timeline"]);
|
||||
|
||||
function normalizePageKey(href) {
|
||||
if (!href || href === "#") return "";
|
||||
const core = href.split("#")[0].split("?")[0];
|
||||
const parts = core.split("/").filter(Boolean);
|
||||
const last = parts.length ? parts[parts.length - 1] : "";
|
||||
return last.toLowerCase();
|
||||
}
|
||||
|
||||
/** 比照原邏輯：取 href 前半與網址列檔名比對 */
|
||||
function hrefMatchesCurrentPage(href, currentPage) {
|
||||
if (!href || href === "#") return false;
|
||||
const [filePart] = href.split("#");
|
||||
const base = filePart.split("/").pop();
|
||||
return base === currentPage;
|
||||
}
|
||||
|
||||
/** 取得 #fragment（含 #）；若無錨點則回傳空字串 */
|
||||
function anchorFromHref(href) {
|
||||
const i = href.indexOf("#");
|
||||
if (i < 0) return "";
|
||||
return href.slice(i).split("?")[0];
|
||||
}
|
||||
|
||||
function markLinkComingSoon(link, originalHref) {
|
||||
const labelEl = link.querySelector(".portal-nav__label");
|
||||
const visibleTitle = labelEl ? labelEl.textContent.trim() : link.textContent.trim();
|
||||
link.setAttribute("data-coming-soon", "true");
|
||||
link.setAttribute("aria-disabled", "true");
|
||||
link.setAttribute("aria-label", `${visibleTitle}，尚無開放`);
|
||||
|
||||
const onSoonInteract = () => rollSoonLabel(link);
|
||||
link.addEventListener("pointerenter", onSoonInteract);
|
||||
link.addEventListener("focus", onSoonInteract);
|
||||
link.addEventListener("touchstart", onSoonInteract, { passive: true });
|
||||
|
||||
if (!link.dataset.originalHref) {
|
||||
link.dataset.originalHref = originalHref;
|
||||
}
|
||||
|
||||
link.setAttribute("href", "#");
|
||||
link.dataset.portalNavSoonRoll = "1";
|
||||
}
|
||||
|
||||
function linkShouldBeComingSoon(href, pageKey, pageKeysSoon) {
|
||||
if (pageKeysSoon.has(pageKey)) {
|
||||
return true;
|
||||
}
|
||||
if (pageKey === "index.html") {
|
||||
const frag = anchorFromHref(href);
|
||||
return !INDEX_NAV_OPEN_HASHES.has(frag);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function getPageKeysSoon() {
|
||||
return new Set([...COMING_SOON_PAGES].map((p) => normalizePageKey(String(p))).filter(Boolean));
|
||||
}
|
||||
|
||||
/** 將籌備中規則套用至容器內錨點（頂欄或整頁；`site-guide` 主文除外） */
|
||||
function applyComingSoonToAnchorElements(container) {
|
||||
if (!container) return;
|
||||
const pageKeysSoon = getPageKeysSoon();
|
||||
|
||||
container.querySelectorAll("a[href]").forEach((link) => {
|
||||
if (link.classList.contains("logo")) return;
|
||||
if (link.getAttribute("data-coming-soon") === "true") return;
|
||||
|
||||
const href = link.getAttribute("href");
|
||||
if (!href || href === "#") return;
|
||||
if (/^https?:\/\//i.test(href)) return;
|
||||
|
||||
const pageKey = normalizePageKey(href);
|
||||
if (!pageKey) return;
|
||||
|
||||
if (!linkShouldBeComingSoon(href, pageKey, pageKeysSoon)) return;
|
||||
|
||||
markLinkComingSoon(link, href);
|
||||
});
|
||||
}
|
||||
|
||||
/** 訪客頁：頁內連結與頂欄同一套 COMING_SOON；僅 site-guide 的 main.site-guide-main 跳過（頂欄 all-open 不影響此條） */
|
||||
function applyComingSoonSiteWide() {
|
||||
const siteGuideMain = document.querySelector("main.site-guide-main");
|
||||
document.querySelectorAll("a[href]").forEach((link) => {
|
||||
if (link.closest("nav.portal-nav")) return;
|
||||
if (siteGuideMain && siteGuideMain.contains(link)) return;
|
||||
if (link.classList.contains("logo")) return;
|
||||
|
||||
const href = link.getAttribute("href");
|
||||
if (!href || href === "#") return;
|
||||
if (/^https?:\/\//i.test(href)) return;
|
||||
|
||||
const pageKey = normalizePageKey(href);
|
||||
if (!pageKey) return;
|
||||
|
||||
const pageKeysSoon = getPageKeysSoon();
|
||||
if (!linkShouldBeComingSoon(href, pageKey, pageKeysSoon)) return;
|
||||
|
||||
markLinkComingSoon(link, href);
|
||||
});
|
||||
}
|
||||
|
||||
function blockNavigation(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function bindComingSoonBlockers() {
|
||||
document.querySelectorAll('a[data-coming-soon="true"]').forEach((link) => {
|
||||
if (link.dataset.portalNavSoonBound === "1") return;
|
||||
link.dataset.portalNavSoonBound = "1";
|
||||
link.addEventListener("click", blockNavigation);
|
||||
link.addEventListener("auxclick", blockNavigation);
|
||||
});
|
||||
}
|
||||
|
||||
/** 將籌備中規則套用至單一導覽列（含頂層 li 樣式） */
|
||||
function applyComingSoonToNav(nav) {
|
||||
applyComingSoonToAnchorElements(nav);
|
||||
|
||||
nav.querySelectorAll(":scope > ul > li").forEach((li) => {
|
||||
const trigger = li.querySelector(":scope > a[href]");
|
||||
if (!trigger || trigger.classList.contains("logo")) return;
|
||||
if (trigger.getAttribute("data-coming-soon") === "true") {
|
||||
li.classList.add("coming-soon");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 站根與 `portal-nav.js` 同層；依腳本路徑與當前頁路徑計算回到站根的相對前綴（如 `../`）。
|
||||
* 子資料夾內頁面之導覽連結必須帶此前綴，否則 `./assets/images`、`index.html` 會錯層。
|
||||
*/
|
||||
function portalNavRootPrefix() {
|
||||
const el =
|
||||
document.currentScript ||
|
||||
Array.from(document.querySelectorAll("script[src*='portal-nav.js']")).find((s) => s.src);
|
||||
if (!el?.src) return "./";
|
||||
try {
|
||||
const scriptPathname = new URL(el.src, window.location.href).pathname;
|
||||
const scriptDirSegs = scriptPathname.split("/").filter(Boolean);
|
||||
scriptDirSegs.pop();
|
||||
const pageDirSegs = window.location.pathname.split("/").filter(Boolean);
|
||||
pageDirSegs.pop();
|
||||
let i = 0;
|
||||
const a = scriptDirSegs;
|
||||
const b = pageDirSegs;
|
||||
while (i < a.length && i < b.length && a[i] === b[i]) {
|
||||
i += 1;
|
||||
}
|
||||
const ups = b.length - i;
|
||||
return ups > 0 ? "../".repeat(ups) : "./";
|
||||
} catch {
|
||||
return "./";
|
||||
}
|
||||
}
|
||||
|
||||
/** 全站導覽 HTML — `rp` 為站根相對前綴；僅修改此模板即可同步所有頁面
|
||||
* 五主項：淪陷瞬間、完整的六顆、現場的震撼、黃色留聲機、Yellow Note（全員是瘋子子選單暫關）。 */
|
||||
function buildPortalNavInnerHTML(rp) {
|
||||
return `
|
||||
<a class="logo" target="_blank" rel="noopener noreferrer" href="${rp}index.html"><img src="${rp}assets/images/logov.svg" alt="SECHSKIES Logo"></a>
|
||||
<button type="button" class="portal-nav__menu-toggle" aria-expanded="false" aria-controls="portal-primary-menu" aria-label="開啟選單">
|
||||
<span class="portal-nav__menu-toggle-icon" aria-hidden="true">
|
||||
<span class="portal-nav__menu-toggle-bar"></span>
|
||||
<span class="portal-nav__menu-toggle-bar"></span>
|
||||
<span class="portal-nav__menu-toggle-bar"></span>
|
||||
</span>
|
||||
</button>
|
||||
<ul id="portal-primary-menu">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html"><span class="portal-nav__label">淪陷瞬間</span></a>
|
||||
<ul class="portal-submenu">
|
||||
<li class="portal-nav__subgroup">
|
||||
<span class="portal-nav__subgroup-head"><span class="portal-nav__label">傳奇的轉折</span></span>
|
||||
<ul class="portal-submenu-nested" aria-label="傳奇的轉折">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/timeline.html"><span class="portal-nav__label">時間軸</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/ebook.html"><span class="portal-nav__label">電子書</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/readable.html"><span class="portal-nav__label">圖文好讀版</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/video.html"><span class="portal-nav__label">影片</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- 全員是瘋子（原全員發瘋）：暫不顯示子選單；恢復時改回 subgroup 並用此標題 -->
|
||||
</ul>
|
||||
</li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}member/member.html"><span class="portal-nav__label">完整的六顆</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.html"><span class="portal-nav__label">現場的震撼</span></a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.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>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html"><span class="portal-nav__label">黃色留聲機</span></a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html#new"><span class="portal-nav__label">啟動新篇章</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html#classic"><span class="portal-nav__label">輝煌全盛期</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">Yellow Note</span></a>
|
||||
<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 target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">聖地巡禮</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
const rootPrefix = portalNavRootPrefix();
|
||||
document.querySelectorAll("nav.portal-nav[data-portal-nav]").forEach((nav) => {
|
||||
nav.innerHTML = buildPortalNavInnerHTML(rootPrefix);
|
||||
if (!nav.hasAttribute("data-portal-nav-all-open")) {
|
||||
applyComingSoonToNav(nav);
|
||||
}
|
||||
});
|
||||
|
||||
applyComingSoonSiteWide();
|
||||
bindComingSoonBlockers();
|
||||
|
||||
const navs = Array.from(document.querySelectorAll(".portal-nav"));
|
||||
if (!navs.length) return;
|
||||
|
||||
const currentPage = window.location.pathname.split("/").pop() || "index.html";
|
||||
|
||||
navs.forEach((nav) => {
|
||||
/* 僅頂層主欄；子選單內巢狀 li 不綁 open，否則會關閉整欄下拉 */
|
||||
const items = Array.from(nav.querySelectorAll(":scope > ul > li"));
|
||||
const menuToggle = nav.querySelector(".portal-nav__menu-toggle");
|
||||
const desktopMq = window.matchMedia(`(min-width: ${PORTAL_NAV_DESKTOP_MIN_PX}px)`);
|
||||
|
||||
if (menuToggle) {
|
||||
menuToggle.addEventListener("click", () => {
|
||||
setPortalNavMenuOpen(nav, !nav.classList.contains("portal-nav--open"));
|
||||
});
|
||||
}
|
||||
|
||||
const closeIfOutside = (event) => {
|
||||
if (!nav.contains(event.target)) {
|
||||
setPortalNavMenuOpen(nav, false);
|
||||
items.forEach((item) => item.classList.remove("open"));
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("click", closeIfOutside);
|
||||
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape") setPortalNavMenuOpen(nav, false);
|
||||
});
|
||||
|
||||
desktopMq.addEventListener("change", (event) => {
|
||||
if (event.matches) setPortalNavMenuOpen(nav, false);
|
||||
});
|
||||
|
||||
nav.addEventListener("click", (event) => {
|
||||
if (isPortalNavDesktop()) return;
|
||||
|
||||
const subgroupHead = event.target.closest(".portal-nav__subgroup-head");
|
||||
if (subgroupHead) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const subgroup = subgroupHead.closest(".portal-nav__subgroup");
|
||||
if (subgroup) subgroup.classList.toggle("open");
|
||||
return;
|
||||
}
|
||||
|
||||
const link = event.target.closest("a[href]");
|
||||
if (!link || link.classList.contains("logo")) return;
|
||||
|
||||
const topItem = link.closest(".portal-nav > ul > li");
|
||||
const isTopTrigger =
|
||||
topItem &&
|
||||
link === topItem.querySelector(":scope > a") &&
|
||||
topItem.querySelector(":scope > .portal-submenu");
|
||||
|
||||
if (isTopTrigger) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (link.getAttribute("data-coming-soon") === "true") return;
|
||||
const href = link.getAttribute("href");
|
||||
if (href && href !== "#") setPortalNavMenuOpen(nav, false);
|
||||
});
|
||||
|
||||
items.forEach((item) => {
|
||||
const trigger = item.querySelector(":scope > a");
|
||||
const submenu = item.querySelector(":scope > .portal-submenu");
|
||||
if (!trigger || !submenu) return;
|
||||
|
||||
let closeTimer = null;
|
||||
const nestedPanels = Array.from(item.querySelectorAll(".portal-submenu-nested"));
|
||||
const hoverBound = { on: false };
|
||||
|
||||
const openItem = () => {
|
||||
if (!isPortalNavDesktop()) return;
|
||||
if (closeTimer) window.clearTimeout(closeTimer);
|
||||
items.forEach((other) => {
|
||||
if (other !== item) other.classList.remove("open");
|
||||
});
|
||||
item.classList.add("open");
|
||||
};
|
||||
|
||||
const cancelClose = () => {
|
||||
if (closeTimer) {
|
||||
window.clearTimeout(closeTimer);
|
||||
closeTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
const scheduleClose = () => {
|
||||
cancelClose();
|
||||
closeTimer = window.setTimeout(() => item.classList.remove("open"), SUBMENU_CLOSE_DELAY_MS);
|
||||
};
|
||||
|
||||
const leaveUnlessStillInside = (event) => {
|
||||
const next = event.relatedTarget;
|
||||
if (next instanceof Node && item.contains(next)) return;
|
||||
scheduleClose();
|
||||
};
|
||||
|
||||
const bindDesktopHover = () => {
|
||||
if (hoverBound.on) return;
|
||||
item.addEventListener("mouseenter", openItem);
|
||||
item.addEventListener("mouseleave", leaveUnlessStillInside);
|
||||
submenu.addEventListener("mouseenter", cancelClose);
|
||||
submenu.addEventListener("mouseleave", leaveUnlessStillInside);
|
||||
nestedPanels.forEach((panel) => {
|
||||
panel.addEventListener("mouseenter", cancelClose);
|
||||
panel.addEventListener("mouseleave", leaveUnlessStillInside);
|
||||
});
|
||||
hoverBound.on = true;
|
||||
};
|
||||
|
||||
const unbindDesktopHover = () => {
|
||||
if (!hoverBound.on) return;
|
||||
item.removeEventListener("mouseenter", openItem);
|
||||
item.removeEventListener("mouseleave", leaveUnlessStillInside);
|
||||
submenu.removeEventListener("mouseenter", cancelClose);
|
||||
submenu.removeEventListener("mouseleave", leaveUnlessStillInside);
|
||||
nestedPanels.forEach((panel) => {
|
||||
panel.removeEventListener("mouseenter", cancelClose);
|
||||
panel.removeEventListener("mouseleave", leaveUnlessStillInside);
|
||||
});
|
||||
hoverBound.on = false;
|
||||
item.classList.remove("open");
|
||||
};
|
||||
|
||||
const syncDesktopHover = () => {
|
||||
if (isPortalNavDesktop()) bindDesktopHover();
|
||||
else unbindDesktopHover();
|
||||
};
|
||||
|
||||
syncDesktopHover();
|
||||
desktopMq.addEventListener("change", syncDesktopHover);
|
||||
|
||||
trigger.addEventListener("focus", () => {
|
||||
if (isPortalNavDesktop()) openItem();
|
||||
});
|
||||
|
||||
trigger.addEventListener("click", (event) => {
|
||||
const isSoon = trigger.getAttribute("data-coming-soon") === "true";
|
||||
|
||||
if (!isPortalNavDesktop()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (!isSoon && !item.classList.contains("coming-soon")) {
|
||||
const menuList = nav.querySelector(":scope > ul");
|
||||
const prevScroll = menuList ? menuList.scrollTop : 0;
|
||||
items.forEach((other) => {
|
||||
if (other !== item) other.classList.remove("open");
|
||||
});
|
||||
item.classList.toggle("open");
|
||||
if (!item.classList.contains("open")) {
|
||||
item.querySelectorAll(".portal-nav__subgroup.open").forEach((sub) => {
|
||||
sub.classList.remove("open");
|
||||
});
|
||||
}
|
||||
if (menuList) {
|
||||
requestAnimationFrame(() => {
|
||||
menuList.scrollTop = prevScroll;
|
||||
});
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (isSoon) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const navLinks = Array.from(nav.querySelectorAll("a[href]")).filter((link) => !link.classList.contains("logo"));
|
||||
navLinks.forEach((link) => {
|
||||
const fallback = link.getAttribute("href");
|
||||
const source = link.dataset.originalHref || fallback;
|
||||
if (!source || source === "#") return;
|
||||
if (hrefMatchesCurrentPage(source, currentPage)) {
|
||||
link.classList.add("nav-current");
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
+112
-112
@@ -1,112 +1,112 @@
|
||||
(() => {
|
||||
const hubButtons = Array.from(document.querySelectorAll("[data-totoga-hub]"));
|
||||
const hubPanels = Array.from(document.querySelectorAll("[data-totoga-panel]"));
|
||||
|
||||
function setHubPanel(name) {
|
||||
if (!hubButtons.length || !hubPanels.length) return;
|
||||
hubButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaHub === name));
|
||||
hubPanels.forEach((panel) => {
|
||||
panel.hidden = panel.dataset.totogaPanel !== name;
|
||||
});
|
||||
}
|
||||
|
||||
hubButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const name = button.dataset.totogaHub;
|
||||
if (name) setHubPanel(name);
|
||||
});
|
||||
});
|
||||
|
||||
const reader = document.getElementById("totoga2-reader");
|
||||
const chapters = reader ? Array.from(reader.querySelectorAll(".chronicle-chapter")) : [];
|
||||
const modeButtons = Array.from(document.querySelectorAll("[data-totoga-reader-mode]"));
|
||||
const pager = document.getElementById("totoga2-pager");
|
||||
const prevBtn = document.getElementById("totoga2-prev");
|
||||
const nextBtn = document.getElementById("totoga2-next");
|
||||
const indicator = document.getElementById("totoga2-chapter-indicator");
|
||||
const hasPager = Boolean(pager && prevBtn && nextBtn && indicator);
|
||||
|
||||
let currentIndex = 0;
|
||||
|
||||
function updatePagedView() {
|
||||
if (!hasPager) return;
|
||||
chapters.forEach((chapter, index) => {
|
||||
chapter.style.display = index === currentIndex ? "" : "none";
|
||||
chapter.classList.toggle("active", index === currentIndex);
|
||||
});
|
||||
indicator.textContent = `${currentIndex + 1} / ${chapters.length}`;
|
||||
prevBtn.disabled = currentIndex === 0;
|
||||
nextBtn.disabled = currentIndex === chapters.length - 1;
|
||||
}
|
||||
|
||||
function setReaderMode(mode) {
|
||||
if (!reader) return;
|
||||
reader.dataset.mode = mode;
|
||||
modeButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaReaderMode === mode));
|
||||
if (mode === "paged" && hasPager) {
|
||||
pager.hidden = false;
|
||||
updatePagedView();
|
||||
} else {
|
||||
if (pager) pager.hidden = true;
|
||||
chapters.forEach((chapter) => {
|
||||
chapter.style.display = "";
|
||||
chapter.classList.remove("active");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
modeButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => setReaderMode(button.dataset.totogaReaderMode));
|
||||
});
|
||||
|
||||
if (hasPager) {
|
||||
prevBtn.addEventListener("click", () => {
|
||||
if (currentIndex > 0) {
|
||||
currentIndex -= 1;
|
||||
updatePagedView();
|
||||
}
|
||||
});
|
||||
|
||||
nextBtn.addEventListener("click", () => {
|
||||
if (currentIndex < chapters.length - 1) {
|
||||
currentIndex += 1;
|
||||
updatePagedView();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (hubButtons.length > 0) {
|
||||
const initialHub =
|
||||
hubButtons.find((b) => b.classList.contains("active"))?.dataset.totogaHub ||
|
||||
hubButtons[0]?.dataset.totogaHub ||
|
||||
"video";
|
||||
setHubPanel(initialHub);
|
||||
} else {
|
||||
hubPanels.forEach((panel) => {
|
||||
panel.hidden = false;
|
||||
});
|
||||
}
|
||||
|
||||
if (reader) {
|
||||
setReaderMode("scroll");
|
||||
}
|
||||
|
||||
function applyLocationHashNavigation() {
|
||||
const hash = (location.hash || "").slice(1);
|
||||
if (hash === "ebook" && hubButtons.length > 0) {
|
||||
setHubPanel("ebook");
|
||||
return;
|
||||
}
|
||||
if (hash && document.getElementById(hash)) {
|
||||
if (hubButtons.length > 0) setHubPanel("reader");
|
||||
setReaderMode("scroll");
|
||||
if (pager) pager.hidden = true;
|
||||
requestAnimationFrame(() => {
|
||||
document.getElementById(hash)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
applyLocationHashNavigation();
|
||||
window.addEventListener("hashchange", applyLocationHashNavigation);
|
||||
})();
|
||||
(() => {
|
||||
const hubButtons = Array.from(document.querySelectorAll("[data-totoga-hub]"));
|
||||
const hubPanels = Array.from(document.querySelectorAll("[data-totoga-panel]"));
|
||||
|
||||
function setHubPanel(name) {
|
||||
if (!hubButtons.length || !hubPanels.length) return;
|
||||
hubButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaHub === name));
|
||||
hubPanels.forEach((panel) => {
|
||||
panel.hidden = panel.dataset.totogaPanel !== name;
|
||||
});
|
||||
}
|
||||
|
||||
hubButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const name = button.dataset.totogaHub;
|
||||
if (name) setHubPanel(name);
|
||||
});
|
||||
});
|
||||
|
||||
const reader = document.getElementById("totoga2-reader");
|
||||
const chapters = reader ? Array.from(reader.querySelectorAll(".chronicle-chapter")) : [];
|
||||
const modeButtons = Array.from(document.querySelectorAll("[data-totoga-reader-mode]"));
|
||||
const pager = document.getElementById("totoga2-pager");
|
||||
const prevBtn = document.getElementById("totoga2-prev");
|
||||
const nextBtn = document.getElementById("totoga2-next");
|
||||
const indicator = document.getElementById("totoga2-chapter-indicator");
|
||||
const hasPager = Boolean(pager && prevBtn && nextBtn && indicator);
|
||||
|
||||
let currentIndex = 0;
|
||||
|
||||
function updatePagedView() {
|
||||
if (!hasPager) return;
|
||||
chapters.forEach((chapter, index) => {
|
||||
chapter.style.display = index === currentIndex ? "" : "none";
|
||||
chapter.classList.toggle("active", index === currentIndex);
|
||||
});
|
||||
indicator.textContent = `${currentIndex + 1} / ${chapters.length}`;
|
||||
prevBtn.disabled = currentIndex === 0;
|
||||
nextBtn.disabled = currentIndex === chapters.length - 1;
|
||||
}
|
||||
|
||||
function setReaderMode(mode) {
|
||||
if (!reader) return;
|
||||
reader.dataset.mode = mode;
|
||||
modeButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaReaderMode === mode));
|
||||
if (mode === "paged" && hasPager) {
|
||||
pager.hidden = false;
|
||||
updatePagedView();
|
||||
} else {
|
||||
if (pager) pager.hidden = true;
|
||||
chapters.forEach((chapter) => {
|
||||
chapter.style.display = "";
|
||||
chapter.classList.remove("active");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
modeButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => setReaderMode(button.dataset.totogaReaderMode));
|
||||
});
|
||||
|
||||
if (hasPager) {
|
||||
prevBtn.addEventListener("click", () => {
|
||||
if (currentIndex > 0) {
|
||||
currentIndex -= 1;
|
||||
updatePagedView();
|
||||
}
|
||||
});
|
||||
|
||||
nextBtn.addEventListener("click", () => {
|
||||
if (currentIndex < chapters.length - 1) {
|
||||
currentIndex += 1;
|
||||
updatePagedView();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (hubButtons.length > 0) {
|
||||
const initialHub =
|
||||
hubButtons.find((b) => b.classList.contains("active"))?.dataset.totogaHub ||
|
||||
hubButtons[0]?.dataset.totogaHub ||
|
||||
"video";
|
||||
setHubPanel(initialHub);
|
||||
} else {
|
||||
hubPanels.forEach((panel) => {
|
||||
panel.hidden = false;
|
||||
});
|
||||
}
|
||||
|
||||
if (reader) {
|
||||
setReaderMode("scroll");
|
||||
}
|
||||
|
||||
function applyLocationHashNavigation() {
|
||||
const hash = (location.hash || "").slice(1);
|
||||
if (hash === "ebook" && hubButtons.length > 0) {
|
||||
setHubPanel("ebook");
|
||||
return;
|
||||
}
|
||||
if (hash && document.getElementById(hash)) {
|
||||
if (hubButtons.length > 0) setHubPanel("reader");
|
||||
setReaderMode("scroll");
|
||||
if (pager) pager.hidden = true;
|
||||
requestAnimationFrame(() => {
|
||||
document.getElementById(hash)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
applyLocationHashNavigation();
|
||||
window.addEventListener("hashchange", applyLocationHashNavigation);
|
||||
})();
|
||||
Reference in new issue
Block a user