feat 整合多頁面 導覽列

index.html

@@ -20,19 +20,65 @@
         </div>
     </header>
 
-    <nav>
-        <div class="logo"><img src="./img/logov.svg" alt=""></div>
+    <nav class="portal-nav" aria-label="水晶男孩推廣部導覽">
+        <a class="logo" href="index.html"><img src="./img/logov.svg" alt=""></a>
         <ul>
-            <li><a href="#background">重拾黃色奇蹟</a></li>
-            <li><a href="#albums">歷年作品</a></li>
-            <li><a href="#current">現在故事線</a></li>
-            <li><a href="concert.html">演唱會紀錄</a></li>
+            <li><a href="index.html#intro">淪陷瞬間</a>
+                <ul class="portal-submenu">
+                    <li><a href="index.html#mission">成立的初衷</a></li>
+                    <li><a href="index.html#current">跨時空軌跡</a></li>
+                    <li><a href="index.html#story">好奇的代價</a></li>
+                </ul>
+            </li>
+            <li><a href="chronicle.html">十六年約定</a>
+                <ul class="portal-submenu">
+                    <li><a href="chronicle.html#challenge">無限挑戰</a></li>
+                    <li><a href="chronicle.html#ssg2">六六歌第二季</a></li>
+                    <li><a href="chronicle.html#sechskies-profile">水晶男孩</a></li>
+                    <li><a href="chronicle.html#gather">召集</a></li>
+                    <li><a href="chronicle.html#negotiate">正式交涉</a></li>
+                    <li><a href="chronicle.html#variables">變數</a></li>
+                    <li><a href="chronicle.html#surprise">驚喜</a></li>
+                    <li><a href="chronicle.html#final-stage">登場</a></li>
+                </ul>
+            </li>
+            <li><a href="index.html#archive">黃色留聲機</a>
+                <ul class="portal-submenu">
+                    <li><a href="classic.html">輝煌全盛期</a></li>
+                    <li><a href="index.html#new">啟動新篇章</a></li>
+                </ul>
+            </li>
+            <li><a href="concert.html">現場的悸動</a>
+                <ul class="portal-submenu">
+                    <li><a href="concert.html#classic-stage" data-coming-soon="true" aria-disabled="true">燦爛的最初</a></li>
+                    <li><a href="concert.html#reunion-stage">永恆的重逢</a></li>
+                </ul>
+            </li>
+            <li class="coming-soon"><a href="variety.html" data-coming-soon="true" aria-disabled="true">綜藝熱播中</a>
+                <ul class="portal-submenu">
+                    <li><a href="variety.html#jiwon" data-coming-soon="true" aria-disabled="true">瘋子與天才</a></li>
+                    <li><a href="variety.html#group" data-coming-soon="true" aria-disabled="true">舞台外真實</a></li>
+                </ul>
+            </li>
+            <li><a href="map.html">聖地巡禮</a>
+                <ul class="portal-submenu">
+                    <li><a href="map.html#taiwan">台灣聖地</a></li>
+                    <li><a href="map.html#global">海外遠征</a></li>
+                </ul>
+            </li>
         </ul>
     </nav>
 
     <canvas id="particles"></canvas>
 
     <div class="container">
+        <div id="intro"></div>
+        <div id="mission"></div>
+        <div id="timeline"></div>
+        <div id="story"></div>
+        <div id="archive"></div>
+        <div id="classic"></div>
+        <div id="new"></div>
         <section id="background">
             <h2 class="section-title">故事背景</h2>
             <div class="intro-text">
@@ -135,6 +181,7 @@
                 </article>
             </div>
         </section>
+
     </div>
     <footer>
         <p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
@@ -201,6 +248,7 @@
         init();
         animate();
     </script>
+    <script src="portal-nav.js"></script>
 </body>
 
 </html>