2026-08-07 23:15:21 +08:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="zh-Hant">
|
2026-08-07 23:45:10 +08:00
|
|
|
|
2026-08-07 23:15:21 +08:00
|
|
|
<head>
|
2026-08-07 23:45:10 +08:00
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
|
|
|
<title>JAEDUCK — Fan Archive</title>
|
|
|
|
|
<style>
|
|
|
|
|
:root {
|
|
|
|
|
--ink: #161310;
|
|
|
|
|
--paper: #f7f2e8;
|
|
|
|
|
--muted: #7d7367;
|
|
|
|
|
--line: #e2d8c5;
|
|
|
|
|
--accent: #c99a3d;
|
|
|
|
|
--card: #fffcf5;
|
|
|
|
|
--dark: #161310;
|
|
|
|
|
}
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
* {
|
|
|
|
|
box-sizing: border-box
|
|
|
|
|
}
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
html {
|
|
|
|
|
scroll-behavior: smooth
|
|
|
|
|
}
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
background: var(--paper);
|
|
|
|
|
color: var(--ink);
|
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
|
|
|
|
|
}
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
a {
|
|
|
|
|
color: inherit;
|
|
|
|
|
text-decoration: none
|
|
|
|
|
}
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
img {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
display: block
|
|
|
|
|
}
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
.wrap {
|
|
|
|
|
width: min(1140px, calc(100% - 40px));
|
|
|
|
|
margin: auto
|
|
|
|
|
}
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
/* header */
|
|
|
|
|
header {
|
|
|
|
|
position: sticky;
|
|
|
|
|
top: 0;
|
|
|
|
|
z-index: 30;
|
|
|
|
|
backdrop-filter: blur(14px);
|
|
|
|
|
background: rgba(247, 242, 232, .88);
|
|
|
|
|
border-bottom: 1px solid rgba(22, 19, 16, .08);
|
|
|
|
|
}
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
.nav {
|
|
|
|
|
height: 64px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
gap: 24px
|
|
|
|
|
}
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
.brand {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
line-height: 1.1
|
|
|
|
|
}
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
.brand strong {
|
|
|
|
|
font-weight: 900;
|
|
|
|
|
letter-spacing: .1em;
|
|
|
|
|
font-size: 14px
|
|
|
|
|
}
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
.brand span {
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
letter-spacing: .14em;
|
|
|
|
|
color: var(--muted)
|
|
|
|
|
}
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
.menu {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 18px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
letter-spacing: .04em;
|
|
|
|
|
color: #4d4944;
|
|
|
|
|
flex-wrap: wrap
|
|
|
|
|
}
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
.menu a {
|
2026-08-08 11:23:46 +08:00
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
2026-08-07 23:45:10 +08:00
|
|
|
padding: 4px 0;
|
|
|
|
|
border-bottom: 1px solid transparent
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.menu a:hover {
|
|
|
|
|
border-color: var(--accent)
|
|
|
|
|
}
|
|
|
|
|
|
2026-08-08 11:23:46 +08:00
|
|
|
.nav-item__label {
|
|
|
|
|
text-transform: uppercase
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-item__num {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 100%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
font-size: 9px;
|
|
|
|
|
letter-spacing: .14em;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
transition: opacity .15s ease
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.menu a:hover .nav-item__num {
|
|
|
|
|
opacity: 1
|
|
|
|
|
}
|
|
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
.back {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
letter-spacing: .05em;
|
|
|
|
|
white-space: nowrap
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.back:hover {
|
|
|
|
|
color: var(--ink)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* hero */
|
|
|
|
|
.hero {
|
|
|
|
|
padding: 56px 0 0;
|
|
|
|
|
border-bottom: 1px solid var(--line);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hero-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 1.1fr .9fr;
|
|
|
|
|
gap: 0;
|
|
|
|
|
align-items: end
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hero-copy {
|
|
|
|
|
padding-bottom: 56px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.eyebrow {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
letter-spacing: .22em;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
margin-bottom: 16px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h1.hero-title {
|
|
|
|
|
font-size: clamp(56px, 10vw, 132px);
|
|
|
|
|
line-height: .86;
|
|
|
|
|
margin: 0 0 22px;
|
|
|
|
|
letter-spacing: -.05em;
|
|
|
|
|
font-weight: 950;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hero-copy p {
|
|
|
|
|
font-size: 17px;
|
|
|
|
|
line-height: 1.8;
|
|
|
|
|
margin: 0 0 22px;
|
|
|
|
|
max-width: 440px;
|
|
|
|
|
color: #3a352f
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tag {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
border: 1px solid var(--ink);
|
|
|
|
|
padding: 7px 13px;
|
|
|
|
|
border-radius: 999px;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
letter-spacing: .04em;
|
|
|
|
|
margin: 0 7px 7px 0
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hero-photo {
|
|
|
|
|
position: relative;
|
|
|
|
|
align-self: stretch;
|
|
|
|
|
min-height: 420px;
|
|
|
|
|
border-radius: 20px 20px 0 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background: #d8cbae;
|
|
|
|
|
}
|
|
|
|
|
|
2026-08-08 08:18:49 +08:00
|
|
|
.hero-photo a.hero-video-link {
|
|
|
|
|
display: block;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hero-photo a.hero-video-link img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
object-position: center
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hero-photo .play {
|
2026-08-07 23:50:26 +08:00
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
2026-08-08 08:18:49 +08:00
|
|
|
width: 64px;
|
|
|
|
|
height: 64px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background: rgba(255, 255, 255, .92);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
2026-08-07 23:50:26 +08:00
|
|
|
transform: translate(-50%, -50%);
|
2026-08-08 08:18:49 +08:00
|
|
|
transition: transform .2s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hero-photo .play::after {
|
|
|
|
|
content: "";
|
|
|
|
|
border-left: 16px solid #161310;
|
|
|
|
|
border-top: 10px solid transparent;
|
|
|
|
|
border-bottom: 10px solid transparent;
|
|
|
|
|
margin-left: 5px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hero-photo a.hero-video-link:hover .play {
|
|
|
|
|
transform: translate(-50%, -50%) scale(1.08)
|
2026-08-07 23:45:10 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hero-photo .cap {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 18px;
|
|
|
|
|
bottom: 18px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
letter-spacing: .1em;
|
|
|
|
|
text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* sections */
|
|
|
|
|
section {
|
|
|
|
|
padding: 78px 0;
|
|
|
|
|
border-bottom: 1px solid var(--line)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.section-head {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: end;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
gap: 30px;
|
|
|
|
|
margin-bottom: 36px;
|
|
|
|
|
flex-wrap: wrap
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.section-head h2 {
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-size: clamp(32px, 5vw, 58px);
|
|
|
|
|
letter-spacing: -.04em
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.section-num {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
letter-spacing: .2em;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
margin-bottom: 8px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sub {
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
max-width: 440px;
|
|
|
|
|
line-height: 1.75;
|
|
|
|
|
text-align: left
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* profile */
|
|
|
|
|
.profile-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: .8fr 1.2fr;
|
|
|
|
|
gap: 34px;
|
|
|
|
|
align-items: start
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.profile-photo {
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background: #d8cbae;
|
|
|
|
|
aspect-ratio: 4/5
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.profile-photo img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
object-position: center 12%
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.spec-list {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 0;
|
|
|
|
|
border-top: 1px solid var(--line)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.spec-row {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 120px 1fr;
|
|
|
|
|
gap: 20px;
|
|
|
|
|
padding: 16px 0;
|
|
|
|
|
border-bottom: 1px solid var(--line)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.spec-row .k {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
letter-spacing: .14em;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
padding-top: 2px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.spec-row .v {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
line-height: 1.7;
|
|
|
|
|
text-align: left
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* timeline */
|
|
|
|
|
.timeline {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 0
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.row {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 110px 1fr;
|
|
|
|
|
gap: 24px;
|
|
|
|
|
padding: 22px 0;
|
|
|
|
|
border-top: 1px solid var(--line)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.row:first-child {
|
|
|
|
|
border-top: 0
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.year {
|
|
|
|
|
font-weight: 800;
|
|
|
|
|
font-size: 18px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.row p {
|
|
|
|
|
margin: 0;
|
|
|
|
|
color: #4a453e;
|
|
|
|
|
line-height: 1.8;
|
|
|
|
|
text-align: left
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* grid cards generic */
|
|
|
|
|
.grid3 {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
|
|
gap: 16px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grid4 {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(4, 1fr);
|
|
|
|
|
gap: 16px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card {
|
|
|
|
|
background: var(--card);
|
|
|
|
|
border: 1px solid var(--line);
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
padding: 22px;
|
|
|
|
|
min-height: 150px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card .tagline {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
letter-spacing: .12em;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
margin-bottom: auto;
|
|
|
|
|
padding-bottom: 30px;
|
|
|
|
|
text-transform: uppercase
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card h3 {
|
|
|
|
|
margin: 0 0 8px;
|
|
|
|
|
font-size: 19px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card p {
|
|
|
|
|
margin: 0;
|
|
|
|
|
color: #5d5751;
|
|
|
|
|
line-height: 1.7;
|
|
|
|
|
font-size: 13.5px;
|
|
|
|
|
text-align: left
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* gallery */
|
|
|
|
|
.gallery {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 1.3fr .7fr .7fr;
|
|
|
|
|
gap: 14px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ph {
|
|
|
|
|
min-height: 270px;
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
border: 1px solid var(--line);
|
|
|
|
|
background:
|
|
|
|
|
radial-gradient(circle at 25% 25%, rgba(201, 154, 61, .35), transparent 24%),
|
|
|
|
|
linear-gradient(135deg, #ebe1c9, #faf5e9 60%, #ddd0b0);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: end;
|
|
|
|
|
padding: 16px;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
letter-spacing: .08em;
|
|
|
|
|
color: #7a705f;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ph.tall {
|
|
|
|
|
min-height: 558px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* videos */
|
|
|
|
|
.video-card {
|
|
|
|
|
background: var(--card);
|
|
|
|
|
border: 1px solid var(--line);
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
overflow: hidden
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-thumb {
|
|
|
|
|
aspect-ratio: 16/9;
|
|
|
|
|
background: linear-gradient(135deg, #2b2620, #171410);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-thumb .play {
|
|
|
|
|
width: 52px;
|
|
|
|
|
height: 52px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background: rgba(255, 255, 255, .92);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-thumb .play::after {
|
|
|
|
|
content: "";
|
|
|
|
|
border-left: 14px solid #161310;
|
|
|
|
|
border-top: 9px solid transparent;
|
|
|
|
|
border-bottom: 9px solid transparent;
|
|
|
|
|
margin-left: 4px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-body {
|
|
|
|
|
padding: 16px 18px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-body .cat {
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
letter-spacing: .14em;
|
|
|
|
|
color: var(--accent);
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
margin-bottom: 6px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-body h3 {
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-size: 16px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-body p {
|
|
|
|
|
margin: 6px 0 0;
|
|
|
|
|
font-size: 12.5px;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
text-align: left
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* updates */
|
|
|
|
|
.updates {
|
|
|
|
|
border-top: 1px solid var(--line)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.update-row {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 100px 1fr;
|
|
|
|
|
gap: 20px;
|
|
|
|
|
padding: 18px 0;
|
|
|
|
|
border-bottom: 1px solid var(--line)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.update-row .date {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
letter-spacing: .06em;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
padding-top: 2px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.update-row .body {
|
|
|
|
|
text-align: left
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.update-row .body .kicker {
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
letter-spacing: .12em;
|
|
|
|
|
color: var(--accent);
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
margin-bottom: 4px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.update-row .body p {
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 1.7;
|
|
|
|
|
color: #3a352f
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* taiwan */
|
|
|
|
|
.tw-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
|
gap: 16px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tw-card {
|
|
|
|
|
background: var(--card);
|
|
|
|
|
border: 1px solid var(--line);
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
padding: 24px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tw-card h3 {
|
|
|
|
|
margin: 0 0 10px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 10px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tw-card .dot {
|
|
|
|
|
width: 7px;
|
|
|
|
|
height: 7px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background: var(--accent);
|
|
|
|
|
flex: none
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tw-card p {
|
|
|
|
|
margin: 0;
|
|
|
|
|
color: #5d5751;
|
|
|
|
|
line-height: 1.75;
|
|
|
|
|
font-size: 13.5px;
|
|
|
|
|
text-align: left
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* stickers */
|
|
|
|
|
.sticker-note {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
padding: 12px 16px;
|
|
|
|
|
border: 1px dashed var(--line);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
max-width: 560px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
line-height: 1.7;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 目前貼圖 02～04 註解中，僅剩 1 張卡片；用 auto-fill 讓格線跟著實際卡片數走，之後補回卡片會自動變回 4 欄 */
|
|
|
|
|
.sticker-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 240px));
|
|
|
|
|
gap: 16px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sticker-card {
|
|
|
|
|
background: var(--card);
|
|
|
|
|
border: 1px solid var(--line);
|
|
|
|
|
border-radius: 18px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sticker-tag {
|
|
|
|
|
padding: 10px 14px;
|
|
|
|
|
font-size: 10.5px;
|
|
|
|
|
letter-spacing: .12em;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
border-bottom: 1px solid var(--line);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sticker-art {
|
|
|
|
|
aspect-ratio: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
background: linear-gradient(150deg, #efe4c8, #dccb9d);
|
|
|
|
|
transition: transform .35s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sticker-art svg {
|
|
|
|
|
width: 56%;
|
|
|
|
|
height: 56%
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sticker-art--photo {
|
|
|
|
|
background: #efe4c8;
|
|
|
|
|
padding: 14%
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sticker-art--photo img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
object-fit: contain
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sticker-art--soon {
|
|
|
|
|
background: repeating-linear-gradient(135deg, #e7dcc0, #e7dcc0 10px, #ded1af 10px, #ded1af 20px)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sticker-art--soon span {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
letter-spacing: .1em;
|
|
|
|
|
color: #6b6152;
|
|
|
|
|
background: rgba(255, 252, 245, .85);
|
|
|
|
|
padding: 6px 12px;
|
|
|
|
|
border-radius: 999px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sticker-card a.sticker-link {
|
|
|
|
|
display: block
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sticker-card a.sticker-link:hover .sticker-art {
|
|
|
|
|
transform: scale(1.04)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sticker-info {
|
|
|
|
|
padding: 14px 16px 18px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 4px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sticker-info .name {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 800
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sticker-info .source {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: var(--muted)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer {
|
|
|
|
|
padding: 44px 0 60px;
|
|
|
|
|
color: #8a8071;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
line-height: 1.8;
|
|
|
|
|
text-align: left
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media(max-width:960px) {
|
|
|
|
|
.grid4 {
|
|
|
|
|
grid-template-columns: repeat(2, 1fr)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.profile-grid {
|
|
|
|
|
grid-template-columns: 1fr
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media(max-width:800px) {
|
|
|
|
|
.menu {
|
|
|
|
|
display: none
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hero-grid {
|
|
|
|
|
grid-template-columns: 1fr
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hero-photo {
|
|
|
|
|
min-height: 340px;
|
|
|
|
|
border-radius: 16px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hero-copy {
|
|
|
|
|
padding-top: 26px;
|
|
|
|
|
padding-bottom: 34px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grid3,
|
|
|
|
|
.gallery {
|
|
|
|
|
grid-template-columns: 1fr
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.gallery .ph,
|
|
|
|
|
.ph.tall {
|
|
|
|
|
min-height: 280px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.row {
|
|
|
|
|
grid-template-columns: 76px 1fr
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.update-row {
|
|
|
|
|
grid-template-columns: 76px 1fr
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tw-grid {
|
|
|
|
|
grid-template-columns: 1fr
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2026-08-07 23:15:21 +08:00
|
|
|
</head>
|
2026-08-07 23:45:10 +08:00
|
|
|
|
2026-08-07 23:15:21 +08:00
|
|
|
<body>
|
|
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
<header>
|
|
|
|
|
<div class="wrap nav">
|
|
|
|
|
<a class="brand" href="#top">
|
|
|
|
|
<strong>JAEDUCK ARCHIVE</strong>
|
|
|
|
|
<span>SECHSKIES · FAN PROJECT</span>
|
|
|
|
|
</a>
|
2026-08-08 11:23:46 +08:00
|
|
|
<nav class="menu" id="siteMenu"></nav>
|
|
|
|
|
<!-- <a class="back" href="member.html">← 六顆水晶</a> -->
|
2026-08-07 23:15:21 +08:00
|
|
|
</div>
|
2026-08-07 23:45:10 +08:00
|
|
|
</header>
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
<main id="top">
|
|
|
|
|
|
|
|
|
|
<section class="hero">
|
|
|
|
|
<div class="wrap hero-grid">
|
|
|
|
|
<div class="hero-copy">
|
|
|
|
|
<div class="eyebrow">Sechs Kies · Black Kies · Fan Archive</div>
|
|
|
|
|
<h1 class="hero-title">JAEDUCK</h1>
|
2026-08-07 23:50:26 +08:00
|
|
|
<p>一個以金在德為核心整理的粉絲企劃頁——舞台上的節奏擔當，鏡頭外的沉穩存在。這裡收著他的資料與時間軸，慢慢補、慢慢留。</p>
|
2026-08-07 23:45:10 +08:00
|
|
|
<span class="tag">김재덕</span>
|
|
|
|
|
<span class="tag">젝스키스</span>
|
|
|
|
|
<span class="tag">KIM JAEDUCK</span>
|
2026-08-07 23:15:21 +08:00
|
|
|
</div>
|
2026-08-07 23:45:10 +08:00
|
|
|
<div class="hero-photo">
|
2026-08-08 08:18:49 +08:00
|
|
|
<a class="hero-video-link" href="https://youtu.be/m7Zt_p9S-yg?t=179" target="_blank" rel="noopener noreferrer"
|
|
|
|
|
aria-label="前往 YouTube 觀看完整片段">
|
|
|
|
|
<img src="https://img.youtube.com/vi/m7Zt_p9S-yg/maxresdefault.jpg" alt="金在德舞台片段"
|
|
|
|
|
onerror="this.onerror=null;this.src='https://img.youtube.com/vi/m7Zt_p9S-yg/hqdefault.jpg'">
|
|
|
|
|
<span class="play"></span>
|
|
|
|
|
</a>
|
2026-08-07 23:45:10 +08:00
|
|
|
<span class="cap">BLACK KIES · RAP / DANCE</span>
|
2026-08-07 23:15:21 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-08-07 23:45:10 +08:00
|
|
|
</section>
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
<section id="profile">
|
|
|
|
|
<div class="wrap">
|
|
|
|
|
<div class="section-head">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="section-num">01 · ABOUT</div>
|
|
|
|
|
<h2>Profile</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sub">舞台上負責節奏與張力的一角，水晶男孩黑水晶陣線核心之一。</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="profile-grid">
|
|
|
|
|
<div class="profile-photo">
|
|
|
|
|
<img src="../assets/images/member/4c0e013b341e85622979475bc230719b.jpg" alt="金在德肖像">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="spec-list">
|
|
|
|
|
<div class="spec-row">
|
|
|
|
|
<div class="k">Name</div>
|
|
|
|
|
<div class="v">金在德 · 김재덕 · Kim Jaeduck</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="spec-row">
|
|
|
|
|
<div class="k">Group</div>
|
|
|
|
|
<div class="v">SECHSKIES（水晶男孩）</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="spec-row">
|
|
|
|
|
<div class="k">Unit</div>
|
|
|
|
|
<div class="v">Black Kies — 舞蹈與節奏路線</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="spec-row">
|
|
|
|
|
<div class="k">Birthday</div>
|
|
|
|
|
<div class="v">8月7日</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="spec-row">
|
|
|
|
|
<div class="k">Debut</div>
|
|
|
|
|
<div class="v">1997 年出道</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="spec-row">
|
|
|
|
|
<div class="k">Note</div>
|
|
|
|
|
<div class="v"><span style="font-size: large; font-style: italic; font-weight: 600;">Back
|
|
|
|
|
Down!!!<br></span>舞台上的重心與節拍感，是韓國末世紀裡最常被提及的舞蹈高手之一。
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-08-07 23:15:21 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-08-07 23:45:10 +08:00
|
|
|
</section>
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
<section id="timeline">
|
|
|
|
|
<div class="wrap">
|
|
|
|
|
<div class="section-head">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="section-num">02 · JOURNEY</div>
|
|
|
|
|
<h2>Timeline</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sub">從出道到合體，一段留給水晶男孩、也留給金在德的時間軸。</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="timeline">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="year">1997</div>
|
|
|
|
|
<p>水晶男孩出道，六人以黑白水晶的分工站上舞台，金在德在其中負責舞蹈與節奏線條。</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="year">2000</div>
|
|
|
|
|
<p>團體活動告一段落，各自往不同的路走去，那份默契先被收進記憶裡。</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="year">2016</div>
|
|
|
|
|
<!-- <p>六人重新站回同一個舞台，粉絲們才明白，原來只是換個方式一起變老。</p> -->
|
|
|
|
|
<p>六人重新站回同一個舞台，想念小黃想念成員想念舞台，在德幸福地眼眶含淚。</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="year">2019 至今</div>
|
|
|
|
|
<p>陸續透過舞台、綜藝與活動延續水晶男孩的故事，金在德仍是那個穩住節奏的存在。</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="year">2026</div>
|
|
|
|
|
<p>這個 Fan Archive 持續整理中，歡迎之後陸續補上更多片段。</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
Gallery / Videos / Updates / 台灣粉絲角落：先註解隱藏。
|
|
|
|
|
這四區目前只有版位示意，沒有真實照片、影片連結、動態消息或台灣粉絲活動資料，
|
|
|
|
|
直接上線會讓訪客看到假內容。等實際素材/資料到位後，拿掉外層註解即可直接使用。
|
|
|
|
|
-->
|
|
|
|
|
<!--
|
2026-08-07 23:15:21 +08:00
|
|
|
<section id="gallery">
|
|
|
|
|
<div class="wrap">
|
|
|
|
|
<div class="section-head">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="section-num">03 · VISUAL</div>
|
|
|
|
|
<h2>Gallery</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sub">目前為版位示意，之後可直接替換成指定的照片素材。</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="gallery">
|
|
|
|
|
<div class="ph tall">MAIN PHOTO</div>
|
|
|
|
|
<div class="ph">STAGE</div>
|
|
|
|
|
<div class="ph">CANDID</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section id="videos">
|
|
|
|
|
<div class="wrap">
|
|
|
|
|
<div class="section-head">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="section-num">04 · WATCH</div>
|
|
|
|
|
<h2>Videos</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sub">舞台、綜藝與訪談片段的收藏區，版位先搭好，連結陸續補上。</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid4">
|
|
|
|
|
<a class="video-card" href="#">
|
|
|
|
|
<div class="video-thumb"><span class="play"></span></div>
|
|
|
|
|
<div class="video-body"><div class="cat">STAGE</div><h3>舞台整理中</h3><p>連結待補</p></div>
|
|
|
|
|
</a>
|
|
|
|
|
<a class="video-card" href="#">
|
|
|
|
|
<div class="video-thumb"><span class="play"></span></div>
|
|
|
|
|
<div class="video-body"><div class="cat">SHOW</div><h3>綜藝整理中</h3><p>連結待補</p></div>
|
|
|
|
|
</a>
|
|
|
|
|
<a class="video-card" href="#">
|
|
|
|
|
<div class="video-thumb"><span class="play"></span></div>
|
|
|
|
|
<div class="video-body"><div class="cat">FANCAM</div><h3>直拍整理中</h3><p>連結待補</p></div>
|
|
|
|
|
</a>
|
|
|
|
|
<a class="video-card" href="#">
|
|
|
|
|
<div class="video-thumb"><span class="play"></span></div>
|
|
|
|
|
<div class="video-body"><div class="cat">INTERVIEW</div><h3>訪談整理中</h3><p>連結待補</p></div>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section id="updates">
|
|
|
|
|
<div class="wrap">
|
|
|
|
|
<div class="section-head">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="section-num">05 · LOG</div>
|
|
|
|
|
<h2>Updates</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sub">近期動態的整理紀錄，持續更新中。</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="updates">
|
|
|
|
|
<div class="update-row">
|
|
|
|
|
<div class="date">2026.08</div>
|
|
|
|
|
<div class="body"><div class="kicker">Archive</div><p>Fan Archive 正式開站，陸續補上資料與素材。</p></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="update-row">
|
|
|
|
|
<div class="date">—</div>
|
|
|
|
|
<div class="body"><div class="kicker">Pending</div><p>更多動態整理中，之後會依實際消息更新這裡。</p></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section id="taiwan">
|
|
|
|
|
<div class="wrap">
|
|
|
|
|
<div class="section-head">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="section-num">06 · TAIWAN</div>
|
|
|
|
|
<h2>台灣粉絲角落</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sub">給台灣粉絲的整理區，之後可依實際內容補上連結與活動紀錄。</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tw-grid">
|
|
|
|
|
<div class="tw-card"><h3><span class="dot"></span>應援 / 後援整理</h3><p>台灣端的應援資訊與活動整理，內容陸續補上。</p></div>
|
|
|
|
|
<div class="tw-card"><h3><span class="dot"></span>活動紀錄</h3><p>來台活動、粉絲見面會等相關記錄整理區。</p></div>
|
|
|
|
|
<div class="tw-card"><h3><span class="dot"></span>翻譯與字幕</h3><p>台灣粉絲協力的翻譯、字幕與資料整理入口。</p></div>
|
|
|
|
|
<div class="tw-card"><h3><span class="dot"></span>交流社群</h3><p>台灣粉絲社群與交流管道整理，之後補上連結。</p></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2026-08-07 23:45:10 +08:00
|
|
|
-->
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
<section id="stickers">
|
|
|
|
|
<div class="wrap">
|
|
|
|
|
<div class="section-head">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="section-num">03 · fans</div>
|
|
|
|
|
<h2>Fan Site</h2>
|
2026-08-07 23:15:21 +08:00
|
|
|
</div>
|
2026-08-07 23:45:10 +08:00
|
|
|
<div class="sub">收錄粉絲各種應援水晶男孩的方式。<br>陸續更新中，會一一詢問創作者是否願意公開在此站。</div>
|
2026-08-07 23:15:21 +08:00
|
|
|
</div>
|
2026-08-07 23:45:10 +08:00
|
|
|
<div class="sticker-grid">
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
<div class="sticker-card">
|
|
|
|
|
<!-- <div class="sticker-tag">貼圖</div> -->
|
|
|
|
|
<a class="sticker-link" href="https://store.line.me/stickershop/product/35689099/zh-Hant" target="_blank"
|
|
|
|
|
rel="noopener noreferrer" aria-label="前往 LINE 貼圖頁面">
|
|
|
|
|
<div class="sticker-art sticker-art--photo">
|
|
|
|
|
<img src="https://stickershop.line-scdn.net/stickershop/v1/product/35689099/LINEStorePC/main.png?v=1"
|
|
|
|
|
alt="松鼠德德貼圖">
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
<div class="sticker-info">
|
|
|
|
|
<div class="name">松鼠德德</div>
|
|
|
|
|
<div class="source">來源：LINE 貼圖</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
繁體貼圖 02～04：先註解隱藏。
|
|
|
|
|
目前還沒拿到其他粉絲創作者的名稱／圖片／LINE 連結，先不放假資料上線；
|
|
|
|
|
拿到資料後，比照上面「松鼠德德」那張卡片的寫法補上，再拿掉這段註解。
|
|
|
|
|
-->
|
|
|
|
|
<!--
|
2026-08-07 23:15:21 +08:00
|
|
|
<div class="sticker-card">
|
|
|
|
|
<div class="sticker-tag">繁體貼圖</div>
|
|
|
|
|
<div class="sticker-art sticker-art--soon">
|
|
|
|
|
<span>陸續趕工中</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sticker-info">
|
|
|
|
|
<div class="name">繁體貼圖 02</div>
|
|
|
|
|
<div class="source">收錄邀請中</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="sticker-card">
|
|
|
|
|
<div class="sticker-tag">繁體貼圖</div>
|
|
|
|
|
<div class="sticker-art sticker-art--soon">
|
|
|
|
|
<span>陸續趕工中</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sticker-info">
|
|
|
|
|
<div class="name">繁體貼圖 03</div>
|
|
|
|
|
<div class="source">收錄邀請中</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="sticker-card">
|
|
|
|
|
<div class="sticker-tag">繁體貼圖</div>
|
|
|
|
|
<div class="sticker-art sticker-art--soon">
|
|
|
|
|
<span>陸續趕工中</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sticker-info">
|
|
|
|
|
<div class="name">繁體貼圖 04</div>
|
|
|
|
|
<div class="source">收錄邀請中</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-08-07 23:45:10 +08:00
|
|
|
-->
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
</div>
|
2026-08-07 23:15:21 +08:00
|
|
|
</div>
|
2026-08-07 23:45:10 +08:00
|
|
|
</section>
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
</main>
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-07 23:45:10 +08:00
|
|
|
<footer>
|
|
|
|
|
<div class="wrap">Unofficial fan archive. 非官方粉絲整理頁面，內容持續更新，所有藝人相關權益屬各自所有者。</div>
|
|
|
|
|
</footer>
|
2026-08-07 23:15:21 +08:00
|
|
|
|
2026-08-08 11:23:46 +08:00
|
|
|
<script>
|
|
|
|
|
(function () {
|
|
|
|
|
var nav = document.getElementById('siteMenu');
|
|
|
|
|
var sections = document.querySelectorAll('main > section[id]');
|
|
|
|
|
sections.forEach(function (section) {
|
|
|
|
|
var numEl = section.querySelector('.section-num');
|
|
|
|
|
var titleEl = section.querySelector('h2');
|
|
|
|
|
if (!numEl || !titleEl) return;
|
|
|
|
|
var a = document.createElement('a');
|
|
|
|
|
a.href = '#' + section.id;
|
|
|
|
|
var label = document.createElement('span');
|
|
|
|
|
label.className = 'nav-item__label';
|
|
|
|
|
label.textContent = titleEl.textContent;
|
|
|
|
|
var num = document.createElement('span');
|
|
|
|
|
num.className = 'nav-item__num';
|
|
|
|
|
num.textContent = numEl.textContent;
|
|
|
|
|
a.appendChild(label);
|
|
|
|
|
a.appendChild(num);
|
|
|
|
|
nav.appendChild(a);
|
|
|
|
|
});
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
2026-08-07 23:15:21 +08:00
|
|
|
</body>
|
2026-08-07 23:45:10 +08:00
|
|
|
|
|
|
|
|
</html>
|
