超人回來了

2026-08-08 11:23:46 +08:00
parent f03e96d775
commit e01a0f744a
2 changed files with 271 additions and 7 deletions
@@ -92,6 +92,10 @@
    }

    .menu a {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
      padding: 4px 0;
      border-bottom: 1px solid transparent
    }
@@ -100,6 +104,29 @@
      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 {
      font-size: 11px;
      color: var(--muted);
@@ -720,13 +747,8 @@
        <strong>JAEDUCK ARCHIVE</strong>
        <span>SECHSKIES · FAN PROJECT</span>
      </a>
-      <nav class="menu">
-        <a href="#profile">PROFILE</a>
-        <a href="#timeline">TIMELINE</a>
-        <!-- GALLERY / VIDEOS / UPDATES / 台灣粉絲：對應區塊尚無實際素材，先與內容一起註解，等內容補齊再一併打開 -->
-        <a href="#stickers">貼圖</a>
-      </nav>
-      <a class="back" href="member.html">← 六顆水晶</a>
+      <nav class="menu" id="siteMenu"></nav>
+      <!-- <a class="back" href="member.html">← 六顆水晶</a> -->
    </div>
  </header>

@@ -1004,6 +1026,28 @@
    <div class="wrap">Unofficial fan archive. 非官方粉絲整理頁面，內容持續更新，所有藝人相關權益屬各自所有者。</div>
  </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>

 </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>