超人回來了
This commit is contained in:
@@ -92,6 +92,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.menu a {
|
.menu a {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
padding: 4px 0;
|
padding: 4px 0;
|
||||||
border-bottom: 1px solid transparent
|
border-bottom: 1px solid transparent
|
||||||
}
|
}
|
||||||
@@ -100,6 +104,29 @@
|
|||||||
border-color: var(--accent)
|
border-color: var(--accent)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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
|
||||||
|
}
|
||||||
|
|
||||||
.back {
|
.back {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
@@ -720,13 +747,8 @@
|
|||||||
<strong>JAEDUCK ARCHIVE</strong>
|
<strong>JAEDUCK ARCHIVE</strong>
|
||||||
<span>SECHSKIES · FAN PROJECT</span>
|
<span>SECHSKIES · FAN PROJECT</span>
|
||||||
</a>
|
</a>
|
||||||
<nav class="menu">
|
<nav class="menu" id="siteMenu"></nav>
|
||||||
<a href="#profile">PROFILE</a>
|
<!-- <a class="back" href="member.html">← 六顆水晶</a> -->
|
||||||
<a href="#timeline">TIMELINE</a>
|
|
||||||
<!-- GALLERY / VIDEOS / UPDATES / 台灣粉絲：對應區塊尚無實際素材，先與內容一起註解，等內容補齊再一併打開 -->
|
|
||||||
<a href="#stickers">貼圖</a>
|
|
||||||
</nav>
|
|
||||||
<a class="back" href="member.html">← 六顆水晶</a>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@@ -1004,6 +1026,28 @@
|
|||||||
<div class="wrap">Unofficial fan archive. 非官方粉絲整理頁面，內容持續更新，所有藝人相關權益屬各自所有者。</div>
|
<div class="wrap">Unofficial fan archive. 非官方粉絲整理頁面，內容持續更新，所有藝人相關權益屬各自所有者。</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<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>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -0,0 +1,220 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-TW">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>高高父子遊台灣｜《超人回來了》</title>
|
||||||
|
<meta name="description" content="《超人回來了》高志溶與高昇材父子的台灣旅行特輯介紹與踩點地圖。">
|
||||||
|
<style>
|
||||||
|
:root{
|
||||||
|
--yellow:#ffd928;
|
||||||
|
--ink:#191919;
|
||||||
|
--paper:#fffdf4;
|
||||||
|
--soft:#f6f1df;
|
||||||
|
--line:#ded7bf;
|
||||||
|
--muted:#716b5b;
|
||||||
|
--white:#fff;
|
||||||
|
}
|
||||||
|
*{box-sizing:border-box}
|
||||||
|
html{scroll-behavior:smooth}
|
||||||
|
body{
|
||||||
|
margin:0;
|
||||||
|
font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
|
||||||
|
color:var(--ink);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 15% 10%, rgba(255,217,40,.30), transparent 26rem),
|
||||||
|
linear-gradient(180deg,#fffdf5 0%,#fff 52%,#faf7ec 100%);
|
||||||
|
line-height:1.7;
|
||||||
|
}
|
||||||
|
a{color:inherit}
|
||||||
|
.wrap{width:min(1120px,calc(100% - 36px));margin:auto}
|
||||||
|
.topbar{
|
||||||
|
position:sticky;top:0;z-index:10;
|
||||||
|
background:rgba(255,253,244,.88);
|
||||||
|
backdrop-filter:blur(12px);
|
||||||
|
border-bottom:1px solid rgba(0,0,0,.08);
|
||||||
|
}
|
||||||
|
.topbar .wrap{
|
||||||
|
height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;
|
||||||
|
}
|
||||||
|
.brand{font-weight:900;letter-spacing:.03em}
|
||||||
|
.brand b{background:var(--yellow);padding:3px 7px;border-radius:5px}
|
||||||
|
.nav{display:flex;gap:18px;font-size:14px;font-weight:700}
|
||||||
|
.nav a{text-decoration:none}
|
||||||
|
.hero{padding:78px 0 52px}
|
||||||
|
.kicker{
|
||||||
|
display:inline-flex;align-items:center;gap:8px;
|
||||||
|
font-size:13px;font-weight:900;letter-spacing:.12em;
|
||||||
|
padding:7px 11px;border:1px solid var(--ink);border-radius:999px;background:var(--yellow);
|
||||||
|
}
|
||||||
|
.hero h1{
|
||||||
|
margin:20px 0 16px;
|
||||||
|
font-size:clamp(42px,8vw,92px);
|
||||||
|
line-height:.98;letter-spacing:-.055em;
|
||||||
|
max-width:900px;
|
||||||
|
}
|
||||||
|
.hero h1 span{display:block;color:#8a7400}
|
||||||
|
.hero p{max-width:720px;font-size:18px;color:#4e493e;margin:0}
|
||||||
|
.hero-meta{
|
||||||
|
display:flex;flex-wrap:wrap;gap:10px;margin-top:28px
|
||||||
|
}
|
||||||
|
.chip{
|
||||||
|
padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);
|
||||||
|
font-size:13px;font-weight:800
|
||||||
|
}
|
||||||
|
.grid{
|
||||||
|
display:grid;grid-template-columns:1.05fr .95fr;gap:24px;margin-bottom:54px
|
||||||
|
}
|
||||||
|
.card{
|
||||||
|
background:rgba(255,255,255,.92);border:1px solid var(--line);
|
||||||
|
border-radius:24px;padding:28px;box-shadow:0 16px 40px rgba(63,50,0,.06)
|
||||||
|
}
|
||||||
|
.card h2{margin:0 0 12px;font-size:28px}
|
||||||
|
.card p{margin:0;color:#5f594c}
|
||||||
|
.quote{
|
||||||
|
height:100%;display:flex;flex-direction:column;justify-content:space-between;
|
||||||
|
background:var(--ink);color:var(--white);border-color:var(--ink)
|
||||||
|
}
|
||||||
|
.quote .big{font-size:clamp(28px,4vw,48px);line-height:1.22;font-weight:900;letter-spacing:-.035em}
|
||||||
|
.quote small{display:block;margin-top:22px;color:#d9d4c7}
|
||||||
|
.section{padding:22px 0 62px}
|
||||||
|
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}
|
||||||
|
.section h2{font-size:36px;margin:0;letter-spacing:-.03em}
|
||||||
|
.section-head p{margin:0;color:var(--muted);max-width:520px}
|
||||||
|
.timeline{
|
||||||
|
display:grid;grid-template-columns:repeat(3,1fr);gap:14px
|
||||||
|
}
|
||||||
|
.day{
|
||||||
|
border-top:5px solid var(--yellow);
|
||||||
|
background:var(--white);border-radius:0 0 18px 18px;padding:20px;
|
||||||
|
box-shadow:0 10px 24px rgba(0,0,0,.04)
|
||||||
|
}
|
||||||
|
.day b{font-size:12px;letter-spacing:.12em;color:#8a7400}
|
||||||
|
.day h3{margin:5px 0 8px;font-size:21px}
|
||||||
|
.day p{margin:0;color:#686153;font-size:14px}
|
||||||
|
.map-shell{
|
||||||
|
background:#111;border-radius:26px;padding:12px;
|
||||||
|
box-shadow:0 22px 50px rgba(0,0,0,.12)
|
||||||
|
}
|
||||||
|
.map-shell iframe{
|
||||||
|
display:block;width:100%;height:620px;border:0;border-radius:18px;background:#eee
|
||||||
|
}
|
||||||
|
.map-actions{
|
||||||
|
display:flex;justify-content:space-between;align-items:center;gap:12px;
|
||||||
|
padding:12px 8px 2px;color:#fff;font-size:13px
|
||||||
|
}
|
||||||
|
.map-actions a{
|
||||||
|
text-decoration:none;background:var(--yellow);color:var(--ink);
|
||||||
|
padding:8px 12px;border-radius:999px;font-weight:900
|
||||||
|
}
|
||||||
|
.notice{
|
||||||
|
margin-top:16px;font-size:12px;color:#7b7465
|
||||||
|
}
|
||||||
|
.footer{
|
||||||
|
border-top:1px solid var(--line);padding:28px 0 44px;color:#746d5e;font-size:13px
|
||||||
|
}
|
||||||
|
@media (max-width:760px){
|
||||||
|
.nav{display:none}
|
||||||
|
.hero{padding-top:54px}
|
||||||
|
.grid,.timeline{grid-template-columns:1fr}
|
||||||
|
.section-head{display:block}
|
||||||
|
.section-head p{margin-top:8px}
|
||||||
|
.map-shell iframe{height:500px}
|
||||||
|
.map-actions{align-items:flex-start;flex-direction:column}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="topbar">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="brand"><b>SECHSKIES</b> YELLOW NOTE</div>
|
||||||
|
<nav class="nav">
|
||||||
|
<a href="#about">節目介紹</a>
|
||||||
|
<a href="#trip">台灣旅行</a>
|
||||||
|
<a href="#map">踩點地圖</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero wrap">
|
||||||
|
<span class="kicker">THE RETURN OF SUPERMAN × TAIWAN</span>
|
||||||
|
<h1>高高父子<br><span>遊台灣</span></h1>
|
||||||
|
<p>從《超人回來了》認識高志溶與高昇材，再沿著節目裡留下的足跡，把父子的三天台灣旅行重新走一遍。</p>
|
||||||
|
<div class="hero-meta">
|
||||||
|
<span class="chip">高志溶 KO JI YONG</span>
|
||||||
|
<span class="chip">高昇材 KO SEUNG JAE</span>
|
||||||
|
<span class="chip">父子旅行</span>
|
||||||
|
<span class="chip">台北・九份・北投・十分</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="about" class="wrap grid">
|
||||||
|
<article class="card">
|
||||||
|
<h2>《超人回來了》是什麼？</h2>
|
||||||
|
<p>節目把鏡頭放進爸爸與孩子的日常：沒有華麗設定，真正好看的往往是一起吃飯、旅行、鬧脾氣、和好，還有孩子一路長大的細節。高志溶與昇材的篇章，也因為父子之間一冷一熱、節奏完全不同，而留下非常鮮明的記憶點。</p>
|
||||||
|
</article>
|
||||||
|
<article class="card quote">
|
||||||
|
<div class="big">這不是單純的「偶像踩點」，而是一條可以重新看見父子關係的旅行線。</div>
|
||||||
|
<small>YELLOW NOTE / 高高父子台灣篇</small>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="trip" class="section wrap">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<span class="kicker">3 DAYS IN TAIWAN</span>
|
||||||
|
<h2>把節目變成一條真的路線</h2>
|
||||||
|
</div>
|
||||||
|
<p>下面先用三天的節奏理解整趟旅行，再直接進地圖看每個實際地點。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline">
|
||||||
|
<article class="day">
|
||||||
|
<b>DAY 1</b>
|
||||||
|
<h3>台北市區・夜市</h3>
|
||||||
|
<p>桃園機場 → 西門 → 牛肉麵 → 旅店 → 士林夜市，先讓昇材用最直接的方式認識台灣。</p>
|
||||||
|
</article>
|
||||||
|
<article class="day">
|
||||||
|
<b>DAY 2</b>
|
||||||
|
<h3>校園・九份山城</h3>
|
||||||
|
<p>從師大周邊一路進九份，飲料、小吃與老街互動成為父子旅行裡最有生活感的一天。</p>
|
||||||
|
</article>
|
||||||
|
<article class="day">
|
||||||
|
<b>DAY 3</b>
|
||||||
|
<h3>北投・十分</h3>
|
||||||
|
<p>節奏慢下來，從溫泉一路走到十分老街，最後以天燈替三天旅程收尾。</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="map" class="section wrap">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<span class="kicker">LOCATION ARCHIVE</span>
|
||||||
|
<h2>高高父子遊台灣地圖</h2>
|
||||||
|
</div>
|
||||||
|
<p>你原本整理的 Google My Maps 直接嵌進來，這頁可以當「節目介紹＋旅行入口」，細節仍回到完整地圖頁。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="map-shell">
|
||||||
|
<iframe
|
||||||
|
title="高高父子遊台灣 Google My Maps"
|
||||||
|
loading="lazy"
|
||||||
|
referrerpolicy="no-referrer-when-downgrade"
|
||||||
|
src="https://www.google.com/maps/d/embed?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw&hl=zh-TW&ehbc=2E312F">
|
||||||
|
</iframe>
|
||||||
|
<div class="map-actions">
|
||||||
|
<span>高高父子遊台灣｜SECHSKIES LOCATION ARCHIVE</span>
|
||||||
|
<a href="https://jekkinoopy.github.io/sechskies/yellow-note/map.html" target="_blank" rel="noopener">看完整景點列表 →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="notice">本頁為粉絲整理用途；節目名稱、人物與相關影像權利均屬原權利人。</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="wrap">SECHSKIES Fanpage © 2026 · 黃色氣球永遠飄揚</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user