631 lines
26 KiB
HTML
631 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-TW">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Drama Ling 設計元件庫</title>
|
||
<link rel="stylesheet" href="../design-system/tokens/design-tokens.css">
|
||
<link rel="stylesheet" href="assets/styles/base.css">
|
||
<link rel="stylesheet" href="assets/styles/components.css">
|
||
</head>
|
||
<body>
|
||
<div class="component-library-container">
|
||
<!-- 頂部導航 -->
|
||
<header class="library-header">
|
||
<div style="display: flex; align-items: center; gap: var(--space-3);">
|
||
<span style="font-size: var(--text-xl); color: var(--primary-teal);">🎨</span>
|
||
<h1 style="font-size: var(--text-xl); margin: 0; color: var(--text-primary);">
|
||
Drama Ling 設計元件庫
|
||
</h1>
|
||
<span class="badge badge-primary">v1.0</span>
|
||
</div>
|
||
|
||
<!-- 主題切換 -->
|
||
<div class="theme-toggle">
|
||
<button id="theme-dark" class="active" title="暗色主題">🌙</button>
|
||
<button id="theme-light" title="亮色主題">☀️</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 側邊欄導航 -->
|
||
<aside class="library-sidebar">
|
||
<nav>
|
||
<div class="nav-category">
|
||
<div class="nav-category-title">基礎元件</div>
|
||
<a href="#buttons" class="nav-link active">按鈕 Buttons</a>
|
||
<a href="#inputs" class="nav-link">輸入框 Inputs</a>
|
||
<a href="#cards" class="nav-link">卡片 Cards</a>
|
||
<a href="#alerts" class="nav-link">警告 Alerts</a>
|
||
</div>
|
||
|
||
<div class="nav-category">
|
||
<div class="nav-category-title">展示元件</div>
|
||
<a href="#badges" class="nav-link">徽章 Badges</a>
|
||
<a href="#progress" class="nav-link">進度條 Progress</a>
|
||
<a href="#loading" class="nav-link">載入 Loading</a>
|
||
</div>
|
||
|
||
<div class="nav-category">
|
||
<div class="nav-category-title">遊戲化元件</div>
|
||
<a href="#life-bar" class="nav-link">生命值 Life Bar</a>
|
||
<a href="#star-rating" class="nav-link">星級評分 Stars</a>
|
||
<a href="components/06-gamification/game-elements.html" class="nav-link">🎮 完整遊戲化元件</a>
|
||
</div>
|
||
|
||
<div class="nav-category">
|
||
<div class="nav-category-title">互動元件</div>
|
||
<a href="components/01-interactive/modals.html" class="nav-link">模態框 Modals</a>
|
||
<a href="components/02-input/forms.html" class="nav-link">📝 表單元件</a>
|
||
<a href="components/05-navigation/navigation.html" class="nav-link">🧭 導航元件</a>
|
||
</div>
|
||
|
||
<div class="nav-category">
|
||
<div class="nav-category-title">數據展示</div>
|
||
<a href="components/03-display/data-display.html" class="nav-link">📊 數據展示元件</a>
|
||
</div>
|
||
|
||
<div class="nav-category">
|
||
<div class="nav-category-title">頁面範例</div>
|
||
<a href="pages/login-page.html" class="nav-link">登入頁面</a>
|
||
<a href="pages/dashboard.html" class="nav-link">儀表板</a>
|
||
<a href="pages/learning-page.html" class="nav-link">學習頁面</a>
|
||
</div>
|
||
</nav>
|
||
</aside>
|
||
|
||
<!-- 主要內容區 -->
|
||
<main class="library-main">
|
||
<!-- 歡迎區塊 -->
|
||
<section class="component-section">
|
||
<h2 class="component-title">歡迎使用 Drama Ling 設計元件庫</h2>
|
||
<p class="component-description">
|
||
這是一個基於 HTML/CSS 的設計元件系統，取代傳統的 Figma 設計工具。
|
||
所有元件都可以直接複製使用，並已針對響應式設計和無障礙性進行優化。
|
||
</p>
|
||
|
||
<div class="alert alert-info">
|
||
<span class="alert-icon">ℹ️</span>
|
||
<div class="alert-content">
|
||
<div class="alert-title">快速開始</div>
|
||
<div class="alert-message">
|
||
點擊左側導航選擇元件，每個元件都包含預覽效果和可複製的 HTML/CSS 代碼。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 按鈕元件 -->
|
||
<section id="buttons" class="component-section">
|
||
<h2 class="component-title">按鈕 Buttons</h2>
|
||
<p class="component-description">
|
||
提供多種樣式和尺寸的按鈕元件，支援主要、次要、成功、危險等狀態。
|
||
</p>
|
||
|
||
<!-- 基礎按鈕 -->
|
||
<h3 class="component-subtitle">基礎按鈕</h3>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<button class="btn btn-primary">主要按鈕</button>
|
||
<button class="btn btn-secondary">次要按鈕</button>
|
||
<button class="btn btn-success">成功按鈕</button>
|
||
<button class="btn btn-danger">危險按鈕</button>
|
||
<button class="btn btn-text">文字按鈕</button>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<button class="copy-button" onclick="copyCode(this)">複製</button>
|
||
<pre><code><button class="btn btn-primary">主要按鈕</button>
|
||
<button class="btn btn-secondary">次要按鈕</button>
|
||
<button class="btn btn-success">成功按鈕</button>
|
||
<button class="btn btn-danger">危險按鈕</button>
|
||
<button class="btn btn-text">文字按鈕</button></code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 按鈕尺寸 -->
|
||
<h3 class="component-subtitle">按鈕尺寸</h3>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<button class="btn btn-primary btn-sm">小按鈕</button>
|
||
<button class="btn btn-primary">標準按鈕</button>
|
||
<button class="btn btn-primary btn-lg">大按鈕</button>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<button class="copy-button" onclick="copyCode(this)">複製</button>
|
||
<pre><code><button class="btn btn-primary btn-sm">小按鈕</button>
|
||
<button class="btn btn-primary">標準按鈕</button>
|
||
<button class="btn btn-primary btn-lg">大按鈕</button></code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 按鈕狀態 -->
|
||
<h3 class="component-subtitle">按鈕狀態</h3>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<button class="btn btn-primary">正常狀態</button>
|
||
<button class="btn btn-primary" disabled>禁用狀態</button>
|
||
<button class="btn btn-icon btn-primary">🎮</button>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<button class="copy-button" onclick="copyCode(this)">複製</button>
|
||
<pre><code><button class="btn btn-primary">正常狀態</button>
|
||
<button class="btn btn-primary" disabled>禁用狀態</button>
|
||
<button class="btn btn-icon btn-primary">🎮</button></code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 按鈕群組 -->
|
||
<h3 class="component-subtitle">按鈕群組</h3>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<div class="btn-group">
|
||
<button class="btn btn-primary">左</button>
|
||
<button class="btn btn-primary">中</button>
|
||
<button class="btn btn-primary">右</button>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<button class="copy-button" onclick="copyCode(this)">複製</button>
|
||
<pre><code><div class="btn-group">
|
||
<button class="btn btn-primary">左</button>
|
||
<button class="btn btn-primary">中</button>
|
||
<button class="btn btn-primary">右</button>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 輸入框元件 -->
|
||
<section id="inputs" class="component-section">
|
||
<h2 class="component-title">輸入框 Input Fields</h2>
|
||
<p class="component-description">
|
||
提供文字輸入、密碼、搜尋等多種輸入框樣式，支援驗證狀態顯示。
|
||
</p>
|
||
|
||
<!-- 基礎輸入框 -->
|
||
<h3 class="component-subtitle">基礎輸入框</h3>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview" style="flex-direction: column; align-items: stretch;">
|
||
<div class="input-group">
|
||
<label class="input-label">使用者名稱</label>
|
||
<input type="text" class="input-field" placeholder="請輸入使用者名稱">
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label class="input-label required">電子郵件</label>
|
||
<input type="email" class="input-field" placeholder="example@email.com">
|
||
<span class="input-hint">我們不會分享你的電子郵件</span>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<button class="copy-button" onclick="copyCode(this)">複製</button>
|
||
<pre><code><div class="input-group">
|
||
<label class="input-label">使用者名稱</label>
|
||
<input type="text" class="input-field" placeholder="請輸入使用者名稱">
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label class="input-label required">電子郵件</label>
|
||
<input type="email" class="input-field" placeholder="example@email.com">
|
||
<span class="input-hint">我們不會分享你的電子郵件</span>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 輸入狀態 -->
|
||
<h3 class="component-subtitle">輸入狀態</h3>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview" style="flex-direction: column; align-items: stretch;">
|
||
<div class="input-group">
|
||
<label class="input-label">成功狀態</label>
|
||
<input type="text" class="input-field success" value="正確的輸入">
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label class="input-label">錯誤狀態</label>
|
||
<input type="text" class="input-field error" value="錯誤的輸入">
|
||
<span class="input-error">請輸入有效的內容</span>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<button class="copy-button" onclick="copyCode(this)">複製</button>
|
||
<pre><code><input type="text" class="input-field success" value="正確的輸入">
|
||
<input type="text" class="input-field error" value="錯誤的輸入">
|
||
<span class="input-error">請輸入有效的內容</span></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 卡片元件 -->
|
||
<section id="cards" class="component-section">
|
||
<h2 class="component-title">卡片 Cards</h2>
|
||
<p class="component-description">
|
||
用於展示內容的容器元件，支援標題、內容、操作按鈕等。
|
||
</p>
|
||
|
||
<!-- 基礎卡片 -->
|
||
<h3 class="component-subtitle">基礎卡片</h3>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<div class="card" style="max-width: 320px;">
|
||
<div class="card-header">
|
||
<h3 class="card-title">卡片標題</h3>
|
||
<div class="card-subtitle">副標題或描述</div>
|
||
</div>
|
||
<div class="card-body">
|
||
這是卡片的主要內容區域，可以放置任何內容。
|
||
</div>
|
||
<div class="card-footer">
|
||
<button class="btn btn-primary btn-sm">操作</button>
|
||
<button class="btn btn-text btn-sm">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<button class="copy-button" onclick="copyCode(this)">複製</button>
|
||
<pre><code><div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">卡片標題</h3>
|
||
<div class="card-subtitle">副標題或描述</div>
|
||
</div>
|
||
<div class="card-body">
|
||
這是卡片的主要內容區域，可以放置任何內容。
|
||
</div>
|
||
<div class="card-footer">
|
||
<button class="btn btn-primary btn-sm">操作</button>
|
||
<button class="btn btn-text btn-sm">取消</button>
|
||
</div>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 學習卡片 -->
|
||
<h3 class="component-subtitle">學習卡片</h3>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<div class="card card-learning" style="max-width: 320px;">
|
||
<div class="card-header">
|
||
<h3 class="card-title">詞彙學習</h3>
|
||
<div class="badge badge-level">Level 3</div>
|
||
</div>
|
||
<div class="card-body">
|
||
今日學習了 15 個新詞彙，完成率 75%
|
||
</div>
|
||
<div class="card-progress">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 75%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<button class="copy-button" onclick="copyCode(this)">複製</button>
|
||
<pre><code><div class="card card-learning">
|
||
<div class="card-header">
|
||
<h3 class="card-title">詞彙學習</h3>
|
||
<div class="badge badge-level">Level 3</div>
|
||
</div>
|
||
<div class="card-body">
|
||
今日學習了 15 個新詞彙，完成率 75%
|
||
</div>
|
||
<div class="card-progress">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 75%"></div>
|
||
</div>
|
||
</div>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 警告元件 -->
|
||
<section id="alerts" class="component-section">
|
||
<h2 class="component-title">警告 Alerts</h2>
|
||
<p class="component-description">
|
||
用於顯示重要訊息、警告或反饋的元件。
|
||
</p>
|
||
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview" style="flex-direction: column; align-items: stretch;">
|
||
<div class="alert alert-success">
|
||
<span class="alert-icon">✓</span>
|
||
<div class="alert-content">
|
||
<div class="alert-title">成功！</div>
|
||
<div class="alert-message">你的操作已成功完成。</div>
|
||
</div>
|
||
<button class="alert-close">✕</button>
|
||
</div>
|
||
|
||
<div class="alert alert-error">
|
||
<span class="alert-icon">✕</span>
|
||
<div class="alert-content">
|
||
<div class="alert-title">錯誤</div>
|
||
<div class="alert-message">發生了錯誤，請稍後再試。</div>
|
||
</div>
|
||
<button class="alert-close">✕</button>
|
||
</div>
|
||
|
||
<div class="alert alert-warning">
|
||
<span class="alert-icon">⚠</span>
|
||
<div class="alert-content">
|
||
<div class="alert-title">警告</div>
|
||
<div class="alert-message">請注意這個重要訊息。</div>
|
||
</div>
|
||
<button class="alert-close">✕</button>
|
||
</div>
|
||
|
||
<div class="alert alert-info">
|
||
<span class="alert-icon">ℹ</span>
|
||
<div class="alert-content">
|
||
<div class="alert-title">提示</div>
|
||
<div class="alert-message">這是一條有用的資訊。</div>
|
||
</div>
|
||
<button class="alert-close">✕</button>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<button class="copy-button" onclick="copyCode(this)">複製</button>
|
||
<pre><code><div class="alert alert-success">
|
||
<span class="alert-icon">✓</span>
|
||
<div class="alert-content">
|
||
<div class="alert-title">成功！</div>
|
||
<div class="alert-message">你的操作已成功完成。</div>
|
||
</div>
|
||
<button class="alert-close">✕</button>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 徽章元件 -->
|
||
<section id="badges" class="component-section">
|
||
<h2 class="component-title">徽章 Badges</h2>
|
||
<p class="component-description">
|
||
用於標記狀態、分類或計數的小型元件。
|
||
</p>
|
||
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<span class="badge badge-primary">主要</span>
|
||
<span class="badge badge-secondary">次要</span>
|
||
<span class="badge badge-success">成功</span>
|
||
<span class="badge badge-danger">危險</span>
|
||
<span class="badge badge-warning">警告</span>
|
||
<span class="badge badge-info">資訊</span>
|
||
<span class="badge badge-level">Level 5</span>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<button class="copy-button" onclick="copyCode(this)">複製</button>
|
||
<pre><code><span class="badge badge-primary">主要</span>
|
||
<span class="badge badge-secondary">次要</span>
|
||
<span class="badge badge-success">成功</span>
|
||
<span class="badge badge-danger">危險</span>
|
||
<span class="badge badge-warning">警告</span>
|
||
<span class="badge badge-info">資訊</span>
|
||
<span class="badge badge-level">Level 5</span></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 進度條元件 -->
|
||
<section id="progress" class="component-section">
|
||
<h2 class="component-title">進度條 Progress</h2>
|
||
<p class="component-description">
|
||
展示任務進度或載入狀態的視覺化元件。
|
||
</p>
|
||
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview" style="flex-direction: column; align-items: stretch;">
|
||
<div>
|
||
<div style="margin-bottom: var(--space-2); color: var(--text-secondary); font-size: var(--text-sm);">基礎進度條 (60%)</div>
|
||
<div class="progress">
|
||
<div class="progress-bar" style="width: 60%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="margin-bottom: var(--space-2); color: var(--text-secondary); font-size: var(--text-sm);">大型進度條 (40%)</div>
|
||
<div class="progress progress-lg">
|
||
<div class="progress-bar" style="width: 40%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="margin-bottom: var(--space-2); color: var(--text-secondary); font-size: var(--text-sm);">條紋進度條 (80%)</div>
|
||
<div class="progress progress-striped">
|
||
<div class="progress-bar" style="width: 80%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<button class="copy-button" onclick="copyCode(this)">複製</button>
|
||
<pre><code><div class="progress">
|
||
<div class="progress-bar" style="width: 60%"></div>
|
||
</div>
|
||
|
||
<div class="progress progress-lg">
|
||
<div class="progress-bar" style="width: 40%"></div>
|
||
</div>
|
||
|
||
<div class="progress progress-striped">
|
||
<div class="progress-bar" style="width: 80%"></div>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 載入元件 -->
|
||
<section id="loading" class="component-section">
|
||
<h2 class="component-title">載入 Loading</h2>
|
||
<p class="component-description">
|
||
顯示載入中狀態的動畫元件。
|
||
</p>
|
||
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<div class="spinner spinner-sm"></div>
|
||
<div class="spinner"></div>
|
||
<div class="spinner spinner-lg"></div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<button class="copy-button" onclick="copyCode(this)">複製</button>
|
||
<pre><code><div class="spinner spinner-sm"></div>
|
||
<div class="spinner"></div>
|
||
<div class="spinner spinner-lg"></div></code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="component-subtitle">骨架屏</h3>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview" style="flex-direction: column; align-items: stretch;">
|
||
<div class="skeleton skeleton-title"></div>
|
||
<div class="skeleton skeleton-text"></div>
|
||
<div class="skeleton skeleton-text"></div>
|
||
<div class="skeleton skeleton-text" style="width: 80%;"></div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<button class="copy-button" onclick="copyCode(this)">複製</button>
|
||
<pre><code><div class="skeleton skeleton-title"></div>
|
||
<div class="skeleton skeleton-text"></div>
|
||
<div class="skeleton skeleton-text"></div>
|
||
<div class="skeleton skeleton-text" style="width: 80%;"></div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 生命值元件 -->
|
||
<section id="life-bar" class="component-section">
|
||
<h2 class="component-title">生命值 Life Bar</h2>
|
||
<p class="component-description">
|
||
遊戲化的生命值顯示元件。
|
||
</p>
|
||
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<div class="life-bar">
|
||
<span class="life-heart">❤️</span>
|
||
<span class="life-heart">❤️</span>
|
||
<span class="life-heart">❤️</span>
|
||
<span class="life-heart empty">❤️</span>
|
||
<span class="life-heart empty">❤️</span>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<button class="copy-button" onclick="copyCode(this)">複製</button>
|
||
<pre><code><div class="life-bar">
|
||
<span class="life-heart">❤️</span>
|
||
<span class="life-heart">❤️</span>
|
||
<span class="life-heart">❤️</span>
|
||
<span class="life-heart empty">❤️</span>
|
||
<span class="life-heart empty">❤️</span>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 星級評分元件 -->
|
||
<section id="star-rating" class="component-section">
|
||
<h2 class="component-title">星級評分 Star Rating</h2>
|
||
<p class="component-description">
|
||
用於評分或展示等級的星星元件。
|
||
</p>
|
||
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<div class="star-rating">
|
||
<span class="star active">⭐</span>
|
||
<span class="star active">⭐</span>
|
||
<span class="star active">⭐</span>
|
||
<span class="star active">⭐</span>
|
||
<span class="star">⭐</span>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<button class="copy-button" onclick="copyCode(this)">複製</button>
|
||
<pre><code><div class="star-rating">
|
||
<span class="star active">⭐</span>
|
||
<span class="star active">⭐</span>
|
||
<span class="star active">⭐</span>
|
||
<span class="star active">⭐</span>
|
||
<span class="star">⭐</span>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
// 主題切換
|
||
document.getElementById('theme-dark').addEventListener('click', function() {
|
||
document.body.classList.remove('light-theme');
|
||
document.getElementById('theme-dark').classList.add('active');
|
||
document.getElementById('theme-light').classList.remove('active');
|
||
});
|
||
|
||
document.getElementById('theme-light').addEventListener('click', function() {
|
||
document.body.classList.add('light-theme');
|
||
document.getElementById('theme-light').classList.add('active');
|
||
document.getElementById('theme-dark').classList.remove('active');
|
||
});
|
||
|
||
// 複製代碼功能
|
||
function copyCode(button) {
|
||
const codeBlock = button.nextElementSibling.querySelector('code');
|
||
const textArea = document.createElement('textarea');
|
||
textArea.value = codeBlock.textContent;
|
||
document.body.appendChild(textArea);
|
||
textArea.select();
|
||
document.execCommand('copy');
|
||
document.body.removeChild(textArea);
|
||
|
||
button.textContent = '已複製！';
|
||
button.classList.add('copied');
|
||
|
||
setTimeout(() => {
|
||
button.textContent = '複製';
|
||
button.classList.remove('copied');
|
||
}, 2000);
|
||
}
|
||
|
||
// 導航高亮
|
||
document.querySelectorAll('.nav-link').forEach(link => {
|
||
link.addEventListener('click', function(e) {
|
||
if (this.getAttribute('href').startsWith('#')) {
|
||
e.preventDefault();
|
||
document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
|
||
this.classList.add('active');
|
||
|
||
const targetId = this.getAttribute('href');
|
||
const targetElement = document.querySelector(targetId);
|
||
if (targetElement) {
|
||
targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// 監聽滾動以更新導航高亮
|
||
const sections = document.querySelectorAll('section[id]');
|
||
const navLinks = document.querySelectorAll('.nav-link[href^="#"]');
|
||
|
||
window.addEventListener('scroll', () => {
|
||
let current = '';
|
||
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop;
|
||
const sectionHeight = section.clientHeight;
|
||
if (pageYOffset >= sectionTop - 100) {
|
||
current = section.getAttribute('id');
|
||
}
|
||
});
|
||
|
||
navLinks.forEach(link => {
|
||
link.classList.remove('active');
|
||
if (link.getAttribute('href') === '#' + current) {
|
||
link.classList.add('active');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |