150 lines
5.3 KiB
HTML
150 lines
5.3 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 - HTML 原型導航</title>
|
|
<link rel="stylesheet" href="assets/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="prototype-nav">
|
|
<header class="nav-header">
|
|
<h1>🎭 Drama Ling - HTML 原型系統</h1>
|
|
<p>互動式頁面原型與設計規格</p>
|
|
</header>
|
|
|
|
<section class="nav-section">
|
|
<h2>📱 主要頁面</h2>
|
|
<div class="nav-grid">
|
|
<a href="pages/home.html" class="nav-card">
|
|
<h3>首頁</h3>
|
|
<p>產品介紹、功能特色、CTA</p>
|
|
</a>
|
|
|
|
<a href="pages/register.html" class="nav-card">
|
|
<h3>註冊頁面</h3>
|
|
<p>用戶註冊表單與驗證</p>
|
|
</a>
|
|
|
|
<a href="pages/login.html" class="nav-card">
|
|
<h3>登入頁面</h3>
|
|
<p>用戶登入與忘記密碼</p>
|
|
</a>
|
|
|
|
<a href="pages/dashboard.html" class="nav-card">
|
|
<h3>學習儀表板</h3>
|
|
<p>學習進度、任務概覽</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="nav-section">
|
|
<h2>📚 學習模組</h2>
|
|
<div class="nav-grid">
|
|
<a href="pages/vocabulary.html" class="nav-card">
|
|
<h3>詞彙學習</h3>
|
|
<p>單詞卡片、測驗、進度</p>
|
|
</a>
|
|
|
|
<a href="pages/dialogue.html" class="nav-card">
|
|
<h3>對話練習</h3>
|
|
<p>AI 對話、錄音回放</p>
|
|
</a>
|
|
|
|
<a href="pages/roleplay.html" class="nav-card">
|
|
<h3>角色扮演</h3>
|
|
<p>情境模擬、角色選擇</p>
|
|
</a>
|
|
|
|
<a href="pages/pronunciation.html" class="nav-card">
|
|
<h3>發音練習</h3>
|
|
<p>語音識別、發音評分</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="nav-section">
|
|
<h2>👤 用戶管理</h2>
|
|
<div class="nav-grid">
|
|
<a href="pages/profile.html" class="nav-card">
|
|
<h3>個人檔案</h3>
|
|
<p>用戶信息、學習統計</p>
|
|
</a>
|
|
|
|
<a href="pages/progress.html" class="nav-card">
|
|
<h3>學習進度</h3>
|
|
<p>詳細進度、成就系統</p>
|
|
</a>
|
|
|
|
<a href="pages/settings.html" class="nav-card">
|
|
<h3>設定頁面</h3>
|
|
<p>偏好設定、通知管理</p>
|
|
</a>
|
|
|
|
<a href="pages/subscription.html" class="nav-card">
|
|
<h3>訂閱管理</h3>
|
|
<p>方案選擇、付費管理</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="nav-section">
|
|
<h2>🧩 組件庫</h2>
|
|
<div class="nav-grid">
|
|
<a href="components/buttons.html" class="nav-card">
|
|
<h3>按鈕組件</h3>
|
|
<p>各種按鈕樣式與狀態</p>
|
|
</a>
|
|
|
|
<a href="components/forms.html" class="nav-card">
|
|
<h3>表單組件</h3>
|
|
<p>輸入框、選單、驗證</p>
|
|
</a>
|
|
|
|
<a href="components/cards.html" class="nav-card">
|
|
<h3>卡片組件</h3>
|
|
<p>內容卡片、資訊展示</p>
|
|
</a>
|
|
|
|
<a href="components/modals.html" class="nav-card">
|
|
<h3>彈窗組件</h3>
|
|
<p>對話框、提示框、通知</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="nav-section">
|
|
<h2>📋 設計規格</h2>
|
|
<div class="nav-grid">
|
|
<a href="specs/colors.html" class="nav-card">
|
|
<h3>色彩規範</h3>
|
|
<p>品牌色、功能色、漸層</p>
|
|
</a>
|
|
|
|
<a href="specs/typography.html" class="nav-card">
|
|
<h3>字體規範</h3>
|
|
<p>字型、大小、行距</p>
|
|
</a>
|
|
|
|
<a href="specs/spacing.html" class="nav-card">
|
|
<h3>間距規範</h3>
|
|
<p>邊距、內距、網格</p>
|
|
</a>
|
|
|
|
<a href="specs/icons.html" class="nav-card">
|
|
<h3>圖示規範</h3>
|
|
<p>圖標庫、使用規則</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
// 簡單的導航統計
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const cards = document.querySelectorAll('.nav-card');
|
|
console.log(`HTML 原型系統載入完成，共 ${cards.length} 個頁面/組件`);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |