193 lines
9.0 KiB
HTML
193 lines
9.0 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>
|
||
|
||
<!-- Meta Tags for SEO and PWA -->
|
||
<meta name="description" content="Drama Ling - 透過情境對話和智能AI，讓語言學習更生動有趣">
|
||
<meta name="keywords" content="語言學習,英語,對話練習,AI,詞彙">
|
||
<meta name="author" content="Drama Ling">
|
||
|
||
<!-- PWA Meta Tags -->
|
||
<meta name="theme-color" content="#00E5CC">
|
||
<link rel="manifest" href="/manifest.json">
|
||
<link rel="icon" type="image/svg+xml" href="/assets/media/icons/logo.svg">
|
||
|
||
<!-- CSS -->
|
||
<link rel="stylesheet" href="/assets/css/main.css">
|
||
<link rel="stylesheet" href="/assets/css/components.css">
|
||
<link rel="stylesheet" href="/assets/css/layouts.css">
|
||
</head>
|
||
<body>
|
||
<!-- App Loading Screen -->
|
||
<div id="app-loading" class="loading-screen">
|
||
<div class="loading-logo">
|
||
<img src="/assets/media/icons/logo.svg" alt="Drama Ling" class="loading-icon">
|
||
<div class="loading-text">Drama Ling</div>
|
||
</div>
|
||
<div class="loading-progress">
|
||
<div class="loading-bar"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Application -->
|
||
<div id="app" class="app-container" style="display: none;">
|
||
<!-- Navigation Header -->
|
||
<header id="main-header" class="app-header">
|
||
<div class="header-container">
|
||
<div class="header-left">
|
||
<button id="menu-toggle" class="menu-toggle" aria-label="選單">
|
||
<span class="hamburger"></span>
|
||
</button>
|
||
<div class="logo">
|
||
<img src="/assets/media/icons/logo.svg" alt="Drama Ling" class="logo-icon">
|
||
<span class="logo-text">Drama Ling</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-center">
|
||
<div class="user-stats">
|
||
<div class="stat-item">
|
||
<span class="stat-icon">💎</span>
|
||
<span id="diamonds-count" class="stat-value">0</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-icon">🔥</span>
|
||
<span id="streak-count" class="stat-value">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-right">
|
||
<button id="profile-btn" class="profile-btn" aria-label="個人檔案">
|
||
<img id="user-avatar" src="/assets/media/images/default-avatar.png" alt="頭像" class="avatar">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Sidebar Navigation -->
|
||
<nav id="sidebar" class="sidebar">
|
||
<div class="sidebar-content">
|
||
<div class="sidebar-header">
|
||
<div class="user-profile">
|
||
<img id="sidebar-avatar" src="/assets/media/images/default-avatar.png" alt="頭像" class="user-avatar">
|
||
<div class="user-info">
|
||
<div id="user-name" class="user-name">訪客</div>
|
||
<div id="user-level" class="user-level">初學者</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-menu">
|
||
<a href="/" class="menu-item active" data-page="home">
|
||
<span class="menu-icon">🏠</span>
|
||
<span class="menu-text">首頁</span>
|
||
</a>
|
||
<a href="/pages/vocabulary/" class="menu-item" data-page="vocabulary">
|
||
<span class="menu-icon">📚</span>
|
||
<span class="menu-text">詞彙學習</span>
|
||
</a>
|
||
<a href="/pages/dialogue/" class="menu-item" data-page="dialogue">
|
||
<span class="menu-icon">💬</span>
|
||
<span class="menu-text">對話練習</span>
|
||
</a>
|
||
<a href="/pages/profile/" class="menu-item" data-page="profile">
|
||
<span class="menu-icon">👤</span>
|
||
<span class="menu-text">個人檔案</span>
|
||
</a>
|
||
<a href="/pages/profile/progress.html" class="menu-item" data-page="progress">
|
||
<span class="menu-icon">📊</span>
|
||
<span class="menu-text">學習進度</span>
|
||
</a>
|
||
<a href="/pages/profile/settings.html" class="menu-item" data-page="settings">
|
||
<span class="menu-icon">⚙️</span>
|
||
<span class="menu-text">設定</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="sidebar-footer">
|
||
<button id="logout-btn" class="logout-btn">
|
||
<span class="menu-icon">🚪</span>
|
||
<span class="menu-text">登出</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Main Content Area -->
|
||
<main id="main-content" class="main-content">
|
||
<!-- Home Dashboard -->
|
||
<div id="home-view" class="page-view active">
|
||
<div class="dashboard-container">
|
||
<div class="welcome-section">
|
||
<h1 class="welcome-title">歡迎回來！</h1>
|
||
<p class="welcome-subtitle">準備好今天的語言學習冒險了嗎？</p>
|
||
</div>
|
||
|
||
<div class="quick-stats">
|
||
<div class="stat-card">
|
||
<div class="stat-icon">📈</div>
|
||
<div class="stat-info">
|
||
<div class="stat-value" id="total-words">0</div>
|
||
<div class="stat-label">已學詞彙</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">⏱️</div>
|
||
<div class="stat-info">
|
||
<div class="stat-value" id="study-time">0</div>
|
||
<div class="stat-label">學習時數</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">🏆</div>
|
||
<div class="stat-info">
|
||
<div class="stat-value" id="achievements">0</div>
|
||
<div class="stat-label">獲得成就</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="learning-modules">
|
||
<div class="module-card" data-module="vocabulary">
|
||
<div class="module-icon">📚</div>
|
||
<div class="module-content">
|
||
<h3 class="module-title">詞彙學習</h3>
|
||
<p class="module-description">透過科學的間隔重複法，高效記憶新詞彙</p>
|
||
<button class="module-btn">開始學習</button>
|
||
</div>
|
||
<div class="module-progress">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 0%"></div>
|
||
</div>
|
||
<span class="progress-text">0/100</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="module-card" data-module="dialogue">
|
||
<div class="module-icon">💬</div>
|
||
<div class="module-content">
|
||
<h3 class="module-title">情境對話</h3>
|
||
<p class="module-description">在真實場景中練習對話，提升口語表達能力</p>
|
||
<button class="module-btn">開始對話</button>
|
||
</div>
|
||
<div class="module-progress">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 0%"></div>
|
||
</div>
|
||
<span class="progress-text">0/50</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- JavaScript Modules -->
|
||
<script type="module" src="/assets/js/app.js"></script>
|
||
</body>
|
||
</html> |