feat site-guide.html
This commit is contained in:
+207
@@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>水晶男孩｜全站導覽</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link rel="stylesheet" href="tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="site-guide-page">
|
||||
<header class="map-archive-header">
|
||||
<div class="header-inner">
|
||||
<h1 class="main-title">全站導覽</h1>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">SITE MAP · 頁面索引</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<main class="content-container site-guide-main">
|
||||
<p class="site-guide-lead">
|
||||
以下為本專案目前所有 HTML 頁面：每張卡片含<strong>連結</strong>、瀏覽器分頁上的<strong>標題</strong>（<code><title></code>）、以及主要<strong>區塊／錨點</strong>，方便你開發或簡報時一鍵跳轉。
|
||||
<strong>此頁未放入全站導覽列</strong>，僅供你自行書籤或輸入網址（例如 <code>site-guide.html</code>）開啟。
|
||||
</p>
|
||||
|
||||
<section class="site-guide-group" aria-labelledby="sg-home">
|
||||
<h2 class="section-title" id="sg-home">首頁與入口</h2>
|
||||
<div class="site-guide-grid">
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="index.html">index.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>SECHSKIES - 水晶男孩傳奇介紹</cite></p>
|
||||
<p class="site-guide-note">主視覺與導覽列；內文以區塊錨點分段。</p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="index.html#origin">#origin</a> — 淪陷瞬間（Hero，與導覽一致）</li>
|
||||
<li><a href="index.html#start">#start</a> — 好奇的開端</li>
|
||||
<li><a href="index.html#mission">#mission</a> — 成立的初衷</li>
|
||||
<li><a href="index.html#timeline">#timeline</a> — 跨時空軌跡</li>
|
||||
<li><a href="index.html#story">#story</a> — 傳奇的轉折</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="origin.html">origin.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>重新導向…</cite></p>
|
||||
<p class="site-guide-note">Meta refresh → <code>index.html</code>；保留給舊書籤。</p>
|
||||
<h4>說明</h4>
|
||||
<ul>
|
||||
<li><a href="index.html#origin">index.html#origin</a> — 建議改連到首頁錨點</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="grok.html">grok.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩 SECHSKIES | 永恆的六顆水晶</cite></p>
|
||||
<p class="site-guide-note">單頁多區塊版型（實驗／簡報用）。</p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="grok.html#story">#story</a></li>
|
||||
<li><a href="grok.html#members">#members</a></li>
|
||||
<li><a href="grok.html#discography">#discography</a></li>
|
||||
<li><a href="grok.html#now">#now</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="site-guide-group" aria-labelledby="sg-ssg2">
|
||||
<h2 class="section-title" id="sg-ssg2">無限挑戰 · 六六歌 2</h2>
|
||||
<div class="site-guide-grid">
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="totoga2.html">totoga2.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</cite>（與電子書頁同標題列）</p>
|
||||
<p class="site-guide-note">整合：影片／電子書／傳奇的轉折＋長卷。章節錨點與 <a href="chronicle.html">chronicle.html</a> 相同（<code>#ssg2</code> 等），網址較短。</p>
|
||||
<h4>長卷章節（錨點）</h4>
|
||||
<ul>
|
||||
<li><a href="totoga2.html#challenge">#challenge</a> — 無限挑戰</li>
|
||||
<li><a href="totoga2.html#ssg2">#ssg2</a> — 六六歌第二季</li>
|
||||
<li><a href="totoga2.html#sechskies-profile">#sechskies-profile</a> — 水晶男孩</li>
|
||||
<li><a href="totoga2.html#gather">#gather</a> — 召集</li>
|
||||
<li><a href="totoga2.html#negotiate">#negotiate</a> — 正式交涉</li>
|
||||
<li><a href="totoga2.html#variables">#variables</a> — 變數</li>
|
||||
<li><a href="totoga2.html#surprise">#surprise</a> — 驚喜</li>
|
||||
<li><a href="totoga2.html#final-stage">#final-stage</a> — 登場</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="ssg2-ebook.html">ssg2-ebook.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</cite></p>
|
||||
<p class="site-guide-note">FlipHTML5 跨頁電子書全螢幕嵌入。</p>
|
||||
<h4>結構</h4>
|
||||
<ul>
|
||||
<li>標題區 <code>map-archive-header</code></li>
|
||||
<li>主內容 <code>ebook-main</code> → <code>flip-ebook-shell</code></li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="chronicle.html">chronicle.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜傳奇紀實長卷</cite></p>
|
||||
<p class="site-guide-note">八章長文；<strong>網漫模式</strong>／<strong>分頁模式</strong>。</p>
|
||||
<h4>章節錨點</h4>
|
||||
<ul>
|
||||
<li><a href="chronicle.html#challenge">#challenge</a> — 無限挑戰</li>
|
||||
<li><a href="chronicle.html#ssg2">#ssg2</a> — 六六歌第二季</li>
|
||||
<li><a href="chronicle.html#sechskies-profile">#sechskies-profile</a></li>
|
||||
<li><a href="chronicle.html#gather">#gather</a></li>
|
||||
<li><a href="chronicle.html#negotiate">#negotiate</a></li>
|
||||
<li><a href="chronicle.html#variables">#variables</a></li>
|
||||
<li><a href="chronicle.html#surprise">#surprise</a></li>
|
||||
<li><a href="chronicle.html#final-stage">#final-stage</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="site-guide-group" aria-labelledby="sg-members">
|
||||
<h2 class="section-title" id="sg-members">成員與紀實</h2>
|
||||
<div class="site-guide-grid">
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="jiwon.html">jiwon.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜瘋子與天才</cite></p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="jiwon.html#variety">#variety</a> — 瘋狂出演中</li>
|
||||
<li><a href="jiwon.html#stage">#stage</a> — 隊長的氣場</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="sunghoon.html">sunghoon.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜消失的真相</cite></p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="sunghoon.html#truth">#truth</a></li>
|
||||
<li><a href="sunghoon.html#voice">#voice</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="site-guide-group" aria-labelledby="sg-media">
|
||||
<h2 class="section-title" id="sg-media">現場 · 典藏 · 地圖 · 歌詞</h2>
|
||||
<div class="site-guide-grid">
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="concert.html">concert.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>SECHSKIES Concert Archive</cite></p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="concert.html#stage-now">#stage-now</a> — 永恆的重逢</li>
|
||||
<li><a href="concert.html#stage-past">#stage-past</a> — 燦爛的最初</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="archive.html">archive.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜黃色留聲機</cite></p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="archive.html#new">#new</a> — 啟動新篇章</li>
|
||||
<li><a href="archive.html#classic">#classic</a> — 輝煌全盛期</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="map.html">map.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>SECHSKIES 台灣行程地圖</cite></p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="map.html#taipei">#taipei</a> — 台北聖地（主版面）</li>
|
||||
<li><a href="map.html#global">#global</a> — 海外遠征</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="lyrics.html">lyrics.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>세 단어 (THREE WORDS) — SECHSKIES</cite></p>
|
||||
<p class="site-guide-note"><code><html lang="ko"></code>；歌詞＋YouTube 嵌入單頁。</p>
|
||||
<h4>結構</h4>
|
||||
<ul>
|
||||
<li><code>.lyrics-layout</code> — 主標＋表格雙欄</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||||
Design by <strong>Jekkinoopy Studio</strong>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="particles.js"></script>
|
||||
<script src="portal-nav.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user