diff --git a/apps/web-native/assets/css/components.css b/apps/web-native/assets/css/components.css
new file mode 100644
index 0000000..9e6a18d
--- /dev/null
+++ b/apps/web-native/assets/css/components.css
@@ -0,0 +1,723 @@
+/* Drama Ling - 組件樣式 */
+
+/* ========================================
+   按鈕組件 (Buttons)
+======================================== */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-6);
+  border: none;
+  border-radius: var(--radius-xl);
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-semibold);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  min-height: 2.75rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* 按鈕尺寸 */
+.btn-sm {
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--text-sm);
+  min-height: 2rem;
+}
+
+.btn-lg {
+  padding: var(--space-4) var(--space-8);
+  font-size: var(--text-lg);
+  min-height: 3.5rem;
+}
+
+/* 按鈕變體 */
+.btn-primary {
+  background: linear-gradient(135deg, var(--primary-teal), var(--secondary-purple));
+  color: var(--text-inverse);
+  box-shadow: 0 4px 15px 0 var(--shadow-primary);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px 0 var(--shadow-primary);
+}
+
+.btn-secondary {
+  background-color: var(--background-tertiary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-light);
+}
+
+.btn-secondary:hover {
+  background-color: var(--border-light);
+  border-color: var(--border-medium);
+}
+
+.btn-outline {
+  background-color: transparent;
+  color: var(--primary-teal);
+  border: 2px solid var(--primary-teal);
+}
+
+.btn-outline:hover {
+  background-color: var(--primary-teal);
+  color: var(--text-inverse);
+}
+
+.btn-ghost {
+  background-color: transparent;
+  color: var(--text-secondary);
+}
+
+.btn-ghost:hover {
+  background-color: var(--background-tertiary);
+  color: var(--text-primary);
+}
+
+.btn-danger {
+  background-color: var(--text-error);
+  color: var(--text-inverse);
+}
+
+.btn-danger:hover {
+  background-color: #DC2626;
+  transform: translateY(-1px);
+}
+
+/* ========================================
+   卡片組件 (Cards)
+======================================== */
+.card {
+  background-color: var(--background-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+  box-shadow: 0 2px 8px 0 var(--shadow-light);
+  transition: all var(--transition-fast);
+}
+
+.card:hover {
+  box-shadow: 0 8px 25px 0 var(--shadow-medium);
+  transform: translateY(-2px);
+}
+
+.card-header {
+  margin-bottom: var(--space-4);
+  padding-bottom: var(--space-4);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.card-title {
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.card-subtitle {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  margin: var(--space-1) 0 0 0;
+}
+
+.card-body {
+  color: var(--text-secondary);
+  line-height: var(--leading-relaxed);
+}
+
+.card-footer {
+  margin-top: var(--space-4);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--border-light);
+  display: flex;
+  gap: var(--space-3);
+  justify-content: flex-end;
+}
+
+/* 卡片變體 */
+.card-interactive {
+  cursor: pointer;
+  transition: all var(--transition-normal);
+}
+
+.card-interactive:hover {
+  border-color: var(--primary-teal);
+  box-shadow: 0 12px 30px 0 var(--shadow-primary);
+}
+
+.card-flat {
+  box-shadow: none;
+  border: 1px solid var(--border-light);
+}
+
+.card-elevated {
+  box-shadow: 0 10px 25px 0 var(--shadow-medium);
+}
+
+/* ========================================
+   表單組件 (Forms)
+======================================== */
+.form-group {
+  margin-bottom: var(--space-4);
+}
+
+.form-label {
+  display: block;
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-primary);
+  margin-bottom: var(--space-2);
+}
+
+.form-label.required::after {
+  content: '*';
+  color: var(--text-error);
+  margin-left: var(--space-1);
+}
+
+.form-input,
+.form-textarea,
+.form-select {
+  width: 100%;
+  padding: var(--space-3) var(--space-4);
+  border: 2px solid var(--border-light);
+  border-radius: var(--radius-lg);
+  font-size: var(--text-base);
+  background-color: var(--background-secondary);
+  color: var(--text-primary);
+  transition: all var(--transition-fast);
+}
+
+.form-input:focus,
+.form-textarea:focus,
+.form-select:focus {
+  outline: none;
+  border-color: var(--primary-teal);
+  box-shadow: 0 0 0 3px rgba(0, 229, 204, 0.1);
+}
+
+.form-input.error,
+.form-textarea.error,
+.form-select.error {
+  border-color: var(--text-error);
+}
+
+.form-input.error:focus,
+.form-textarea.error:focus,
+.form-select.error:focus {
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.form-textarea {
+  resize: vertical;
+  min-height: 6rem;
+}
+
+.form-help {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  margin-top: var(--space-1);
+}
+
+.form-error {
+  font-size: var(--text-sm);
+  color: var(--text-error);
+  margin-top: var(--space-1);
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+/* 複選框和單選框 */
+.form-checkbox,
+.form-radio {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+}
+
+.form-checkbox input,
+.form-radio input {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0;
+}
+
+/* ========================================
+   徽章組件 (Badges)
+======================================== */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  border-radius: var(--radius-full);
+}
+
+.badge-primary {
+  background-color: var(--primary-teal);
+  color: var(--text-inverse);
+}
+
+.badge-secondary {
+  background-color: var(--text-secondary);
+  color: var(--text-inverse);
+}
+
+.badge-success {
+  background-color: var(--text-success);
+  color: var(--text-inverse);
+}
+
+.badge-warning {
+  background-color: var(--text-warning);
+  color: var(--text-inverse);
+}
+
+.badge-error {
+  background-color: var(--text-error);
+  color: var(--text-inverse);
+}
+
+.badge-outline {
+  background-color: transparent;
+  border: 1px solid currentColor;
+}
+
+/* ========================================
+   彈窗組件 (Modal)
+======================================== */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal-backdrop);
+  opacity: 0;
+  visibility: hidden;
+  transition: all var(--transition-normal);
+}
+
+.modal-overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.modal {
+  background-color: var(--background-secondary);
+  border-radius: var(--radius-2xl);
+  box-shadow: 0 20px 50px 0 var(--shadow-heavy);
+  max-width: 500px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  transform: scale(0.95) translateY(20px);
+  transition: transform var(--transition-normal);
+}
+
+.modal-overlay.active .modal {
+  transform: scale(1) translateY(0);
+}
+
+.modal-header {
+  padding: var(--space-6);
+  border-bottom: 1px solid var(--border-light);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal-title {
+  font-size: var(--text-xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.modal-close {
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  transition: all var(--transition-fast);
+}
+
+.modal-close:hover {
+  background-color: var(--background-tertiary);
+  color: var(--text-primary);
+}
+
+.modal-body {
+  padding: var(--space-6);
+}
+
+.modal-footer {
+  padding: var(--space-6);
+  border-top: 1px solid var(--border-light);
+  display: flex;
+  gap: var(--space-3);
+  justify-content: flex-end;
+}
+
+/* ========================================
+   提示框組件 (Toast)
+======================================== */
+.toast-container {
+  position: fixed;
+  top: var(--space-4);
+  right: var(--space-4);
+  z-index: var(--z-tooltip);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.toast {
+  background-color: var(--background-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  box-shadow: 0 8px 25px 0 var(--shadow-medium);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  max-width: 400px;
+  animation: slideInRight var(--transition-normal) ease-out;
+}
+
+.toast.removing {
+  animation: slideOutRight var(--transition-normal) ease-in;
+}
+
+.toast-icon {
+  font-size: var(--text-lg);
+  flex-shrink: 0;
+}
+
+.toast-content {
+  flex: 1;
+}
+
+.toast-title {
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin-bottom: var(--space-1);
+}
+
+.toast-message {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+.toast-close {
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: var(--space-1);
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+}
+
+.toast-close:hover {
+  background-color: var(--background-tertiary);
+  color: var(--text-primary);
+}
+
+/* 提示框類型 */
+.toast-success {
+  border-left: 4px solid var(--text-success);
+}
+
+.toast-success .toast-icon {
+  color: var(--text-success);
+}
+
+.toast-warning {
+  border-left: 4px solid var(--text-warning);
+}
+
+.toast-warning .toast-icon {
+  color: var(--text-warning);
+}
+
+.toast-error {
+  border-left: 4px solid var(--text-error);
+}
+
+.toast-error .toast-icon {
+  color: var(--text-error);
+}
+
+.toast-info {
+  border-left: 4px solid var(--primary-teal);
+}
+
+.toast-info .toast-icon {
+  color: var(--primary-teal);
+}
+
+/* ========================================
+   載入組件 (Loading)
+======================================== */
+.loading {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--border-light);
+  border-top-color: var(--primary-teal);
+  border-radius: var(--radius-full);
+  animation: spin 1s linear infinite;
+}
+
+.loading-sm {
+  width: 1rem;
+  height: 1rem;
+  border-width: 1px;
+}
+
+.loading-lg {
+  width: 2rem;
+  height: 2rem;
+  border-width: 3px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 載入覆蓋層 */
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal);
+}
+
+/* ========================================
+   進度條組件 (Progress)
+======================================== */
+.progress {
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--background-tertiary);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, var(--primary-teal), var(--secondary-purple));
+  border-radius: var(--radius-full);
+  transition: width var(--transition-normal);
+  position: relative;
+}
+
+.progress-bar::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: linear-gradient(90deg, 
+    rgba(255, 255, 255, 0.2) 0%, 
+    rgba(255, 255, 255, 0.4) 50%, 
+    rgba(255, 255, 255, 0.2) 100%);
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+/* 進度條尺寸 */
+.progress-sm {
+  height: 0.25rem;
+}
+
+.progress-lg {
+  height: 0.75rem;
+}
+
+/* ========================================
+   標籤頁組件 (Tabs)
+======================================== */
+.tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+.tab-list {
+  display: flex;
+  border-bottom: 2px solid var(--border-light);
+  margin-bottom: var(--space-6);
+}
+
+.tab-button {
+  padding: var(--space-3) var(--space-4);
+  border: none;
+  background: none;
+  color: var(--text-secondary);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  position: relative;
+  transition: all var(--transition-fast);
+}
+
+.tab-button:hover {
+  color: var(--text-primary);
+}
+
+.tab-button.active {
+  color: var(--primary-teal);
+}
+
+.tab-button.active::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: var(--primary-teal);
+}
+
+.tab-panel {
+  display: none;
+  animation: fadeInUp var(--transition-normal) ease-out;
+}
+
+.tab-panel.active {
+  display: block;
+}
+
+/* ========================================
+   下拉選單組件 (Dropdown)
+======================================== */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  transition: background-color var(--transition-fast);
+}
+
+.dropdown-toggle:hover {
+  background-color: var(--background-tertiary);
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 200px;
+  background-color: var(--background-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 8px 25px 0 var(--shadow-medium);
+  padding: var(--space-2);
+  z-index: var(--z-dropdown);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: all var(--transition-fast);
+}
+
+.dropdown.open .dropdown-menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  transition: all var(--transition-fast);
+  cursor: pointer;
+}
+
+.dropdown-item:hover {
+  background-color: var(--background-tertiary);
+  color: var(--text-primary);
+}
+
+.dropdown-divider {
+  height: 1px;
+  background-color: var(--border-light);
+  margin: var(--space-2) 0;
+}
+
+/* 響應式調整 */
+@media (max-width: 767px) {
+  .modal {
+    width: 95%;
+    margin: var(--space-4);
+  }
+  
+  .toast-container {
+    left: var(--space-4);
+    right: var(--space-4);
+  }
+  
+  .toast {
+    max-width: none;
+  }
+}
+
+/* Toast 動畫 */
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOutRight {
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
\ No newline at end of file
diff --git a/apps/web-native/assets/css/layouts.css b/apps/web-native/assets/css/layouts.css
new file mode 100644
index 0000000..a55a445
--- /dev/null
+++ b/apps/web-native/assets/css/layouts.css
@@ -0,0 +1,628 @@
+/* Drama Ling - 佈局樣式 */
+
+/* ========================================
+   頁首導航 (Header)
+======================================== */
+.app-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4rem;
+  background-color: var(--background-secondary);
+  border-bottom: 1px solid var(--border-light);
+  z-index: var(--z-sticky);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+.header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  padding: 0 var(--space-4);
+  max-width: 1920px;
+  margin: 0 auto;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+.menu-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-md);
+  background-color: transparent;
+  transition: all var(--transition-fast);
+}
+
+.menu-toggle:hover {
+  background-color: var(--background-tertiary);
+}
+
+.hamburger {
+  position: relative;
+  width: 1.25rem;
+  height: 2px;
+  background-color: var(--text-primary);
+  transition: all var(--transition-fast);
+}
+
+.hamburger::before,
+.hamburger::after {
+  content: '';
+  position: absolute;
+  width: 1.25rem;
+  height: 2px;
+  background-color: var(--text-primary);
+  transition: all var(--transition-fast);
+}
+
+.hamburger::before {
+  top: -6px;
+}
+
+.hamburger::after {
+  bottom: -6px;
+}
+
+/* 漢堡選單動畫 */
+.menu-toggle.active .hamburger {
+  background-color: transparent;
+}
+
+.menu-toggle.active .hamburger::before {
+  transform: rotate(45deg);
+  top: 0;
+}
+
+.menu-toggle.active .hamburger::after {
+  transform: rotate(-45deg);
+  bottom: 0;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--text-lg);
+  color: var(--text-primary);
+}
+
+.logo-icon {
+  width: 2rem;
+  height: 2rem;
+}
+
+.logo-text {
+  font-family: var(--font-family-display);
+}
+
+.header-center {
+  display: none;
+}
+
+.user-stats {
+  display: flex;
+  gap: var(--space-4);
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-2) var(--space-3);
+  background-color: var(--background-tertiary);
+  border-radius: var(--radius-xl);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.stat-icon {
+  font-size: var(--text-base);
+}
+
+.stat-value {
+  color: var(--text-primary);
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.profile-btn {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  transition: transform var(--transition-fast);
+}
+
+.profile-btn:hover {
+  transform: scale(1.05);
+}
+
+.avatar {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ========================================
+   側邊欄 (Sidebar)
+======================================== */
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 320px;
+  height: 100vh;
+  background-color: var(--background-secondary);
+  border-right: 1px solid var(--border-light);
+  transform: translateX(-100%);
+  transition: transform var(--transition-normal);
+  z-index: var(--z-fixed);
+  overflow-y: auto;
+}
+
+.sidebar.open {
+  transform: translateX(0);
+}
+
+.sidebar-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.sidebar-header {
+  padding: var(--space-6) var(--space-4);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.user-profile {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.user-avatar {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--radius-full);
+  object-fit: cover;
+}
+
+.user-info {
+  flex: 1;
+}
+
+.user-name {
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin-bottom: var(--space-1);
+}
+
+.user-level {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+.sidebar-menu {
+  flex: 1;
+  padding: var(--space-4) 0;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  color: var(--text-secondary);
+  transition: all var(--transition-fast);
+  position: relative;
+}
+
+.menu-item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background-color: var(--primary-teal);
+  transform: scaleY(0);
+  transition: transform var(--transition-fast);
+}
+
+.menu-item:hover,
+.menu-item.active {
+  color: var(--text-primary);
+  background-color: var(--background-tertiary);
+}
+
+.menu-item.active::before {
+  transform: scaleY(1);
+}
+
+.menu-icon {
+  font-size: var(--text-lg);
+  width: 1.5rem;
+  text-align: center;
+}
+
+.menu-text {
+  font-weight: var(--font-weight-medium);
+}
+
+.sidebar-footer {
+  padding: var(--space-4);
+  border-top: 1px solid var(--border-light);
+}
+
+.logout-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  width: 100%;
+  padding: var(--space-3) var(--space-4);
+  color: var(--text-error);
+  border-radius: var(--radius-md);
+  transition: background-color var(--transition-fast);
+}
+
+.logout-btn:hover {
+  background-color: rgba(239, 68, 68, 0.1);
+}
+
+/* ========================================
+   主內容區域 (Main Content)
+======================================== */
+.main-content {
+  flex: 1;
+  padding: var(--space-6) var(--space-4);
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.page-view {
+  display: none;
+  animation: fadeInUp var(--transition-normal) ease-out;
+}
+
+.page-view.active {
+  display: block;
+}
+
+.dashboard-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+.welcome-section {
+  text-align: center;
+  padding: var(--space-8) 0;
+}
+
+.welcome-title {
+  font-size: var(--text-3xl);
+  font-weight: var(--font-weight-bold);
+  font-family: var(--font-family-display);
+  color: var(--text-primary);
+  margin-bottom: var(--space-2);
+}
+
+.welcome-subtitle {
+  font-size: var(--text-lg);
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.quick-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-4);
+}
+
+.stat-card {
+  background-color: var(--background-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  transition: all var(--transition-fast);
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px 0 var(--shadow-medium);
+  border-color: var(--primary-teal);
+}
+
+.stat-card .stat-icon {
+  font-size: var(--text-2xl);
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, var(--primary-teal), var(--secondary-purple));
+  border-radius: var(--radius-xl);
+  margin: 0;
+}
+
+.stat-card .stat-info {
+  flex: 1;
+}
+
+.stat-card .stat-value {
+  font-size: var(--text-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  display: block;
+  margin-bottom: var(--space-1);
+}
+
+.stat-card .stat-label {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+.learning-modules {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: var(--space-6);
+}
+
+.module-card {
+  background-color: var(--background-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-2xl);
+  padding: var(--space-8);
+  transition: all var(--transition-normal);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.module-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--primary-teal), var(--secondary-purple));
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform var(--transition-normal);
+}
+
+.module-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 30px 0 var(--shadow-primary);
+  border-color: var(--primary-teal);
+}
+
+.module-card:hover::before {
+  transform: scaleX(1);
+}
+
+.module-icon {
+  font-size: var(--text-4xl);
+  margin-bottom: var(--space-4);
+  display: block;
+}
+
+.module-content {
+  margin-bottom: var(--space-6);
+}
+
+.module-title {
+  font-size: var(--text-xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  margin-bottom: var(--space-2);
+  font-family: var(--font-family-display);
+}
+
+.module-description {
+  font-size: var(--text-base);
+  color: var(--text-secondary);
+  line-height: var(--leading-relaxed);
+  margin-bottom: var(--space-4);
+}
+
+.module-btn {
+  background: linear-gradient(135deg, var(--primary-teal), var(--secondary-purple));
+  color: var(--text-inverse);
+  padding: var(--space-3) var(--space-6);
+  border-radius: var(--radius-xl);
+  font-weight: var(--font-weight-semibold);
+  transition: all var(--transition-fast);
+}
+
+.module-btn:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 15px 0 var(--shadow-primary);
+}
+
+.module-progress {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin-top: var(--space-4);
+}
+
+.progress-bar {
+  flex: 1;
+  height: 6px;
+  background-color: var(--background-tertiary);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--primary-teal), var(--secondary-purple));
+  border-radius: var(--radius-full);
+  transition: width var(--transition-normal);
+}
+
+.progress-text {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-secondary);
+}
+
+/* ========================================
+   響應式設計
+======================================== */
+
+/* 平板及以上：顯示 Header 中央統計 */
+@media (min-width: 768px) {
+  .header-center {
+    display: block;
+  }
+}
+
+/* 平板及以上：調整側邊欄為靜態 */
+@media (min-width: 768px) {
+  .sidebar {
+    position: static;
+    transform: translateX(0);
+    grid-area: sidebar;
+  }
+  
+  .app-header {
+    grid-area: header;
+    position: static;
+  }
+  
+  .main-content {
+    grid-area: main;
+    padding: var(--space-8);
+  }
+  
+  .menu-toggle {
+    display: none;
+  }
+}
+
+/* 大型桌機：增加 Header 容器最大寬度 */
+@media (min-width: 1200px) {
+  .header-container {
+    padding: 0 var(--space-8);
+  }
+  
+  .main-content {
+    padding: var(--space-12);
+  }
+  
+  .dashboard-container {
+    gap: var(--space-12);
+  }
+  
+  .learning-modules {
+    gap: var(--space-8);
+  }
+}
+
+/* 手機優化 */
+@media (max-width: 767px) {
+  .app-header {
+    height: 3.5rem;
+  }
+  
+  .header-container {
+    padding: 0 var(--space-3);
+  }
+  
+  .main-content {
+    padding: var(--space-4);
+    margin-top: 3.5rem;
+  }
+  
+  .welcome-title {
+    font-size: var(--text-2xl);
+  }
+  
+  .welcome-subtitle {
+    font-size: var(--text-base);
+  }
+  
+  .quick-stats {
+    grid-template-columns: 1fr;
+    gap: var(--space-3);
+  }
+  
+  .stat-card {
+    padding: var(--space-4);
+  }
+  
+  .learning-modules {
+    grid-template-columns: 1fr;
+    gap: var(--space-4);
+  }
+  
+  .module-card {
+    padding: var(--space-6);
+  }
+  
+  .sidebar {
+    width: 280px;
+  }
+}
+
+/* 極小手機優化 */
+@media (max-width: 375px) {
+  .header-container {
+    padding: 0 var(--space-2);
+  }
+  
+  .main-content {
+    padding: var(--space-3);
+  }
+  
+  .dashboard-container {
+    gap: var(--space-6);
+  }
+}
+
+/* 側邊欄遮罩層 */
+.sidebar-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  visibility: hidden;
+  transition: all var(--transition-normal);
+  z-index: var(--z-modal-backdrop);
+}
+
+.sidebar-overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+@media (min-width: 768px) {
+  .sidebar-overlay {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/apps/web-native/assets/css/main.css b/apps/web-native/assets/css/main.css
new file mode 100644
index 0000000..e051fbe
--- /dev/null
+++ b/apps/web-native/assets/css/main.css
@@ -0,0 +1,476 @@
+/* Drama Ling - 主要樣式框架 */
+
+/* CSS 變數系統 - 設計代幣 */
+:root {
+  /* 色彩系統 */
+  --primary-teal: #00E5CC;
+  --primary-teal-light: #33EBDB;
+  --primary-teal-dark: #00B8A3;
+  --secondary-purple: #6366F1;
+  --secondary-purple-light: #8B87F7;
+  --secondary-purple-dark: #4F46E5;
+  
+  /* 背景色彩 */
+  --background-primary: #F7F9FC;
+  --background-secondary: #FFFFFF;
+  --background-tertiary: #F1F5F9;
+  --background-dark: #1A1A1A;
+  --background-dark-secondary: #2D2D2D;
+  
+  /* 文字色彩 */
+  --text-primary: #2C3E50;
+  --text-secondary: #64748B;
+  --text-tertiary: #94A3B8;
+  --text-inverse: #FFFFFF;
+  --text-success: #10B981;
+  --text-warning: #F59E0B;
+  --text-error: #EF4444;
+  
+  /* 邊框色彩 */
+  --border-light: #E2E8F0;
+  --border-medium: #CBD5E1;
+  --border-dark: #64748B;
+  
+  /* 陰影色彩 */
+  --shadow-light: rgba(0, 0, 0, 0.05);
+  --shadow-medium: rgba(0, 0, 0, 0.1);
+  --shadow-heavy: rgba(0, 0, 0, 0.15);
+  --shadow-primary: rgba(0, 229, 204, 0.2);
+  
+  /* 間距系統 */
+  --space-1: 0.25rem;   /* 4px */
+  --space-2: 0.5rem;    /* 8px */
+  --space-3: 0.75rem;   /* 12px */
+  --space-4: 1rem;      /* 16px */
+  --space-5: 1.25rem;   /* 20px */
+  --space-6: 1.5rem;    /* 24px */
+  --space-8: 2rem;      /* 32px */
+  --space-10: 2.5rem;   /* 40px */
+  --space-12: 3rem;     /* 48px */
+  --space-16: 4rem;     /* 64px */
+  --space-20: 5rem;     /* 80px */
+  
+  /* 字體系統 */
+  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-family-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
+  
+  --text-xs: 0.75rem;   /* 12px */
+  --text-sm: 0.875rem;  /* 14px */
+  --text-base: 1rem;    /* 16px */
+  --text-lg: 1.125rem;  /* 18px */
+  --text-xl: 1.25rem;   /* 20px */
+  --text-2xl: 1.5rem;   /* 24px */
+  --text-3xl: 1.875rem; /* 30px */
+  --text-4xl: 2.25rem;  /* 36px */
+  --text-5xl: 3rem;     /* 48px */
+  
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  
+  /* 行高系統 */
+  --leading-none: 1;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
+  
+  /* 圓角系統 */
+  --radius-sm: 0.25rem;  /* 4px */
+  --radius-md: 0.5rem;   /* 8px */
+  --radius-lg: 0.75rem;  /* 12px */
+  --radius-xl: 1rem;     /* 16px */
+  --radius-2xl: 1.5rem;  /* 24px */
+  --radius-full: 9999px;
+  
+  /* 動畫過渡 */
+  --transition-fast: 0.15s ease-out;
+  --transition-normal: 0.3s ease-out;
+  --transition-slow: 0.5s ease-out;
+  
+  /* Z-index 層級 */
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+
+/* 暗色主題變數 */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-primary: #0F172A;
+    --background-secondary: #1E293B;
+    --background-tertiary: #334155;
+    --text-primary: #F8FAFC;
+    --text-secondary: #CBD5E1;
+    --text-tertiary: #94A3B8;
+    --border-light: #334155;
+    --border-medium: #475569;
+    --border-dark: #64748B;
+  }
+}
+
+/* 全域重置和基礎樣式 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-family-base);
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--leading-normal);
+  color: var(--text-primary);
+  background-color: var(--background-primary);
+  overflow-x: hidden;
+}
+
+/* 可訪問性改善 */
+*:focus {
+  outline: 2px solid var(--primary-teal);
+  outline-offset: 2px;
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* 按鈕重置 */
+button {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  cursor: pointer;
+}
+
+/* 連結重置 */
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* 圖片重置 */
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* 表單元素重置 */
+input,
+textarea,
+select {
+  font: inherit;
+  margin: 0;
+}
+
+/* 清單重置 */
+ul,
+ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* 載入畫面 */
+.loading-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, var(--primary-teal), var(--secondary-purple));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal);
+  transition: opacity var(--transition-slow), visibility var(--transition-slow);
+}
+
+.loading-screen.hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.loading-logo {
+  text-align: center;
+  margin-bottom: var(--space-8);
+}
+
+.loading-icon {
+  width: 4rem;
+  height: 4rem;
+  margin-bottom: var(--space-4);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.loading-text {
+  font-size: var(--text-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-inverse);
+  font-family: var(--font-family-display);
+}
+
+.loading-progress {
+  width: 12rem;
+  height: 0.25rem;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.loading-bar {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, 
+    var(--text-inverse) 0%, 
+    rgba(255, 255, 255, 0.8) 50%, 
+    var(--text-inverse) 100%);
+  animation: loading 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.05); opacity: 0.8; }
+}
+
+@keyframes loading {
+  0% { transform: translateX(-100%); }
+  50% { transform: translateX(0%); }
+  100% { transform: translateX(100%); }
+}
+
+/* 應用容器 */
+.app-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 響應式設計斷點 */
+/* 手機 */
+@media (max-width: 767px) {
+  .app-container {
+    padding-top: 4rem; /* Header 高度 */
+  }
+}
+
+/* 平板 */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .app-container {
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+      "sidebar header"
+      "sidebar main";
+  }
+}
+
+/* 桌機 */
+@media (min-width: 1024px) {
+  .app-container {
+    display: grid;
+    grid-template-columns: 320px 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+      "sidebar header"
+      "sidebar main";
+  }
+}
+
+/* 工具類別 */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.hidden { display: none !important; }
+.invisible { visibility: hidden; }
+
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+
+.w-full { width: 100%; }
+.h-full { height: 100%; }
+
+.rounded { border-radius: var(--radius-md); }
+.rounded-lg { border-radius: var(--radius-lg); }
+.rounded-xl { border-radius: var(--radius-xl); }
+.rounded-full { border-radius: var(--radius-full); }
+
+.shadow { box-shadow: 0 1px 3px 0 var(--shadow-light); }
+.shadow-md { box-shadow: 0 4px 6px -1px var(--shadow-medium); }
+.shadow-lg { box-shadow: 0 10px 15px -3px var(--shadow-heavy); }
+
+.transition { transition: all var(--transition-normal); }
+
+/* 色彩工具類 */
+.text-primary { color: var(--text-primary); }
+.text-secondary { color: var(--text-secondary); }
+.text-success { color: var(--text-success); }
+.text-warning { color: var(--text-warning); }
+.text-error { color: var(--text-error); }
+
+.bg-primary { background-color: var(--primary-teal); }
+.bg-secondary { background-color: var(--secondary-purple); }
+.bg-white { background-color: var(--background-secondary); }
+
+/* 間距工具類 */
+.p-1 { padding: var(--space-1); }
+.p-2 { padding: var(--space-2); }
+.p-3 { padding: var(--space-3); }
+.p-4 { padding: var(--space-4); }
+.p-6 { padding: var(--space-6); }
+.p-8 { padding: var(--space-8); }
+
+.m-1 { margin: var(--space-1); }
+.m-2 { margin: var(--space-2); }
+.m-3 { margin: var(--space-3); }
+.m-4 { margin: var(--space-4); }
+.m-6 { margin: var(--space-6); }
+.m-8 { margin: var(--space-8); }
+
+.mt-1 { margin-top: var(--space-1); }
+.mt-2 { margin-top: var(--space-2); }
+.mt-4 { margin-top: var(--space-4); }
+.mt-6 { margin-top: var(--space-6); }
+.mt-8 { margin-top: var(--space-8); }
+
+.mb-1 { margin-bottom: var(--space-1); }
+.mb-2 { margin-bottom: var(--space-2); }
+.mb-4 { margin-bottom: var(--space-4); }
+.mb-6 { margin-bottom: var(--space-6); }
+.mb-8 { margin-bottom: var(--space-8); }
+
+/* 字體工具類 */
+.text-xs { font-size: var(--text-xs); }
+.text-sm { font-size: var(--text-sm); }
+.text-base { font-size: var(--text-base); }
+.text-lg { font-size: var(--text-lg); }
+.text-xl { font-size: var(--text-xl); }
+.text-2xl { font-size: var(--text-2xl); }
+.text-3xl { font-size: var(--text-3xl); }
+.text-4xl { font-size: var(--text-4xl); }
+
+.font-light { font-weight: var(--font-weight-light); }
+.font-normal { font-weight: var(--font-weight-normal); }
+.font-medium { font-weight: var(--font-weight-medium); }
+.font-semibold { font-weight: var(--font-weight-semibold); }
+.font-bold { font-weight: var(--font-weight-bold); }
+
+/* 互動效果 */
+.hover-lift {
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.hover-lift:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px 0 var(--shadow-medium);
+}
+
+.hover-scale {
+  transition: transform var(--transition-fast);
+}
+
+.hover-scale:hover {
+  transform: scale(1.05);
+}
+
+/* 動畫關鍵幀 */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn var(--transition-normal) ease-out;
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp var(--transition-normal) ease-out;
+}
+
+.animate-slide-in-right {
+  animation: slideInRight var(--transition-normal) ease-out;
+}
+
+.animate-slide-in-left {
+  animation: slideInLeft var(--transition-normal) ease-out;
+}
+
+/* 無障礙設計 - 減少動畫 */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
\ No newline at end of file
diff --git a/apps/web-native/assets/js/app.js b/apps/web-native/assets/js/app.js
new file mode 100644
index 0000000..b034621
--- /dev/null
+++ b/apps/web-native/assets/js/app.js
@@ -0,0 +1,528 @@
+/**
+ * Drama Ling - 主應用程序
+ * 原生JavaScript模組化架構
+ */
+
+import { AppState } from './utils.js';
+import { ApiClient } from './api.js';
+import { AuthManager } from './auth.js';
+import { Sidebar } from './components/sidebar.js';
+import { Navbar } from './components/navbar.js';
+import { Modal } from './components/modal.js';
+import { Toast } from './components/toast.js';
+
+class DramaLingApp {
+    constructor() {
+        this.state = new AppState();
+        this.api = new ApiClient(this.getApiBaseUrl());
+        this.auth = new AuthManager(this.api, this.state);
+        
+        // UI 組件
+        this.sidebar = null;
+        this.navbar = null;
+        this.modal = new Modal();
+        this.toast = new Toast();
+        
+        // 當前頁面
+        this.currentPage = 'home';
+        
+        this.init();
+    }
+    
+    /**
+     * 初始化應用程序
+     */
+    async init() {
+        try {
+            // 顯示載入畫面
+            this.showLoading();
+            
+            // 檢查認證狀態
+            const isAuthenticated = await this.auth.checkAuthStatus();
+            
+            // 初始化 UI 組件
+            this.initializeComponents();
+            
+            // 設定事件監聽器
+            this.setupEventListeners();
+            
+            // 根據認證狀態決定初始頁面
+            if (isAuthenticated) {
+                await this.loadUserData();
+                this.showMainApp();
+            } else {
+                this.showAuthPage();
+            }
+            
+            // 隱藏載入畫面
+            this.hideLoading();
+            
+        } catch (error) {
+            console.error('應用程序初始化失敗:', error);
+            this.toast.show('錯誤', '應用程序載入失敗，請刷新頁面重試', 'error');
+            this.hideLoading();
+        }
+    }
+    
+    /**
+     * 獲取 API 基礎 URL
+     */
+    getApiBaseUrl() {
+        return import.meta.env?.VITE_API_BASE_URL || 'http://localhost:3000/api';
+    }
+    
+    /**
+     * 初始化 UI 組件
+     */
+    initializeComponents() {
+        this.navbar = new Navbar(this);
+        this.sidebar = new Sidebar(this);
+        
+        // 綁定組件到應用狀態
+        this.state.addListener('userUpdated', (user) => {
+            this.navbar.updateUserInfo(user);
+            this.sidebar.updateUserInfo(user);
+        });
+        
+        this.state.addListener('statsUpdated', (stats) => {
+            this.navbar.updateStats(stats);
+        });
+    }
+    
+    /**
+     * 設定事件監聽器
+     */
+    setupEventListeners() {
+        // 全域鍵盤快捷鍵
+        document.addEventListener('keydown', this.handleKeyboardShortcuts.bind(this));
+        
+        // 路由變化監聽
+        window.addEventListener('popstate', this.handlePopState.bind(this));
+        
+        // 網路狀態監聽
+        window.addEventListener('online', this.handleOnline.bind(this));
+        window.addEventListener('offline', this.handleOffline.bind(this));
+        
+        // 頁面可見性變化
+        document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
+        
+        // 模組卡片點擊
+        document.querySelectorAll('.module-card').forEach(card => {
+            card.addEventListener('click', this.handleModuleClick.bind(this));
+        });
+        
+        // 選單項目點擊
+        document.addEventListener('click', (e) => {
+            const menuItem = e.target.closest('.menu-item');
+            if (menuItem && menuItem.dataset.page) {
+                e.preventDefault();
+                this.navigateTo(menuItem.dataset.page);
+            }
+        });
+    }
+    
+    /**
+     * 鍵盤快捷鍵處理
+     */
+    handleKeyboardShortcuts(e) {
+        // Ctrl/Cmd + K: 開啟搜尋
+        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+            e.preventDefault();
+            this.openSearch();
+        }
+        
+        // Ctrl/Cmd + /: 開啟快捷鍵說明
+        if ((e.ctrlKey || e.metaKey) && e.key === '/') {
+            e.preventDefault();
+            this.showShortcutsHelp();
+        }
+        
+        // Escape: 關閉彈窗和選單
+        if (e.key === 'Escape') {
+            this.sidebar.close();
+            this.modal.close();
+        }
+        
+        // Alt + 數字鍵: 快速導航
+        if (e.altKey && /^[1-5]$/.test(e.key)) {
+            e.preventDefault();
+            const pages = ['home', 'vocabulary', 'dialogue', 'profile', 'settings'];
+            const pageIndex = parseInt(e.key) - 1;
+            if (pages[pageIndex]) {
+                this.navigateTo(pages[pageIndex]);
+            }
+        }
+    }
+    
+    /**
+     * 瀏覽器歷史記錄變化處理
+     */
+    handlePopState(e) {
+        const page = e.state?.page || 'home';
+        this.navigateTo(page, false); // false = 不更新歷史記錄
+    }
+    
+    /**
+     * 網路連線恢復
+     */
+    handleOnline() {
+        this.toast.show('網路已連線', '已恢復網路連接', 'success');
+        this.syncPendingData();
+    }
+    
+    /**
+     * 網路連線中斷
+     */
+    handleOffline() {
+        this.toast.show('網路已中斷', '請檢查網路連接，離線模式已啟用', 'warning');
+    }
+    
+    /**
+     * 頁面可見性變化
+     */
+    handleVisibilityChange() {
+        if (document.hidden) {
+            // 頁面被隱藏時，保存當前狀態
+            this.saveCurrentState();
+        } else {
+            // 頁面重新可見時，檢查是否需要更新數據
+            this.checkForUpdates();
+        }
+    }
+    
+    /**
+     * 模組卡片點擊處理
+     */
+    handleModuleClick(e) {
+        const moduleCard = e.currentTarget;
+        const moduleType = moduleCard.dataset.module;
+        
+        switch (moduleType) {
+            case 'vocabulary':
+                this.navigateTo('vocabulary');
+                break;
+            case 'dialogue':
+                this.navigateTo('dialogue');
+                break;
+            default:
+                console.warn(`未知的模組類型: ${moduleType}`);
+        }
+    }
+    
+    /**
+     * 頁面導航
+     */
+    navigateTo(page, updateHistory = true) {
+        if (this.currentPage === page) return;
+        
+        // 隱藏當前頁面
+        this.hidePage(this.currentPage);
+        
+        // 顯示新頁面
+        this.showPage(page);
+        
+        // 更新當前頁面
+        this.currentPage = page;
+        
+        // 更新選單狀態
+        this.updateMenuState(page);
+        
+        // 更新瀏覽器歷史記錄
+        if (updateHistory) {
+            const url = page === 'home' ? '/' : `/${page}`;
+            history.pushState({ page }, document.title, url);
+        }
+        
+        // 關閉側邊欄（手機版）
+        this.sidebar.close();
+        
+        // 載入頁面數據
+        this.loadPageData(page);
+    }
+    
+    /**
+     * 隱藏頁面
+     */
+    hidePage(page) {
+        const pageElement = document.getElementById(`${page}-view`);
+        if (pageElement) {
+            pageElement.classList.remove('active');
+        }
+    }
+    
+    /**
+     * 顯示頁面
+     */
+    showPage(page) {
+        const pageElement = document.getElementById(`${page}-view`);
+        if (pageElement) {
+            pageElement.classList.add('active');
+        } else {
+            // 頁面不存在，需要動態載入
+            this.loadPageComponent(page);
+        }
+    }
+    
+    /**
+     * 更新選單狀態
+     */
+    updateMenuState(activePage) {
+        document.querySelectorAll('.menu-item').forEach(item => {
+            if (item.dataset.page === activePage) {
+                item.classList.add('active');
+            } else {
+                item.classList.remove('active');
+            }
+        });
+    }
+    
+    /**
+     * 載入頁面數據
+     */
+    async loadPageData(page) {
+        try {
+            switch (page) {
+                case 'home':
+                    await this.loadDashboardData();
+                    break;
+                case 'vocabulary':
+                    await this.loadVocabularyData();
+                    break;
+                case 'dialogue':
+                    await this.loadDialogueData();
+                    break;
+                case 'profile':
+                    await this.loadProfileData();
+                    break;
+                default:
+                    console.log(`頁面 ${page} 不需要載入額外數據`);
+            }
+        } catch (error) {
+            console.error(`載入頁面 ${page} 數據失敗:`, error);
+            this.toast.show('載入失敗', '頁面數據載入失敗', 'error');
+        }
+    }
+    
+    /**
+     * 載入儀表板數據
+     */
+    async loadDashboardData() {
+        const stats = await this.api.getUserStats();
+        this.state.updateStats(stats);
+        this.updateDashboardStats(stats);
+    }
+    
+    /**
+     * 更新儀表板統計
+     */
+    updateDashboardStats(stats) {
+        const elements = {
+            totalWords: document.getElementById('total-words'),
+            studyTime: document.getElementById('study-time'),
+            achievements: document.getElementById('achievements')
+        };
+        
+        if (elements.totalWords) elements.totalWords.textContent = stats.totalWords || 0;
+        if (elements.studyTime) elements.studyTime.textContent = stats.studyTime || 0;
+        if (elements.achievements) elements.achievements.textContent = stats.achievements || 0;
+    }
+    
+    /**
+     * 載入詞彙數據
+     */
+    async loadVocabularyData() {
+        // 這將在詞彙模組中實現
+        console.log('載入詞彙數據...');
+    }
+    
+    /**
+     * 載入對話數據
+     */
+    async loadDialogueData() {
+        // 這將在對話模組中實現
+        console.log('載入對話數據...');
+    }
+    
+    /**
+     * 載入個人檔案數據
+     */
+    async loadProfileData() {
+        // 這將在個人檔案模組中實現
+        console.log('載入個人檔案數據...');
+    }
+    
+    /**
+     * 動態載入頁面組件
+     */
+    async loadPageComponent(page) {
+        try {
+            // 動態導入頁面模組
+            const module = await import(`./pages/${page}.js`);
+            const PageClass = module.default;
+            
+            // 創建頁面實例
+            const pageInstance = new PageClass(this);
+            await pageInstance.render();
+            
+        } catch (error) {
+            console.error(`載入頁面組件 ${page} 失敗:`, error);
+            this.show404Page();
+        }
+    }
+    
+    /**
+     * 顯示 404 頁面
+     */
+    show404Page() {
+        const mainContent = document.getElementById('main-content');
+        if (mainContent) {
+            mainContent.innerHTML = `
+                <div class="error-page">
+                    <h1>404</h1>
+                    <p>找不到頁面</p>
+                    <button class="btn btn-primary" onclick="app.navigateTo('home')">返回首頁</button>
+                </div>
+            `;
+        }
+    }
+    
+    /**
+     * 載入用戶數據
+     */
+    async loadUserData() {
+        try {
+            const user = await this.api.getCurrentUser();
+            this.state.setUser(user);
+        } catch (error) {
+            console.error('載入用戶數據失敗:', error);
+        }
+    }
+    
+    /**
+     * 顯示主應用
+     */
+    showMainApp() {
+        const app = document.getElementById('app');
+        if (app) {
+            app.style.display = 'block';
+        }
+    }
+    
+    /**
+     * 顯示認證頁面
+     */
+    showAuthPage() {
+        this.navigateTo('login');
+    }
+    
+    /**
+     * 顯示載入畫面
+     */
+    showLoading() {
+        const loadingScreen = document.getElementById('app-loading');
+        if (loadingScreen) {
+            loadingScreen.classList.remove('hidden');
+        }
+    }
+    
+    /**
+     * 隱藏載入畫面
+     */
+    hideLoading() {
+        const loadingScreen = document.getElementById('app-loading');
+        if (loadingScreen) {
+            setTimeout(() => {
+                loadingScreen.classList.add('hidden');
+            }, 500);
+        }
+    }
+    
+    /**
+     * 開啟搜尋功能
+     */
+    openSearch() {
+        // TODO: 實現搜尋功能
+        this.toast.show('搜尋', '搜尋功能開發中...', 'info');
+    }
+    
+    /**
+     * 顯示快捷鍵說明
+     */
+    showShortcutsHelp() {
+        const helpContent = `
+            <div class="shortcuts-help">
+                <h3>鍵盤快捷鍵</h3>
+                <div class="shortcut-list">
+                    <div class="shortcut-item">
+                        <kbd>Ctrl</kbd> + <kbd>K</kbd>
+                        <span>開啟搜尋</span>
+                    </div>
+                    <div class="shortcut-item">
+                        <kbd>Ctrl</kbd> + <kbd>/</kbd>
+                        <span>顯示快捷鍵說明</span>
+                    </div>
+                    <div class="shortcut-item">
+                        <kbd>Alt</kbd> + <kbd>1-5</kbd>
+                        <span>快速導航</span>
+                    </div>
+                    <div class="shortcut-item">
+                        <kbd>Esc</kbd>
+                        <span>關閉彈窗</span>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        this.modal.show('快捷鍵說明', helpContent);
+    }
+    
+    /**
+     * 同步待處理數據
+     */
+    async syncPendingData() {
+        // TODO: 實現離線數據同步
+        console.log('同步待處理數據...');
+    }
+    
+    /**
+     * 保存當前狀態
+     */
+    saveCurrentState() {
+        const state = {
+            page: this.currentPage,
+            timestamp: Date.now()
+        };
+        
+        localStorage.setItem('app-state', JSON.stringify(state));
+    }
+    
+    /**
+     * 檢查更新
+     */
+    async checkForUpdates() {
+        // TODO: 檢查數據是否需要更新
+        console.log('檢查更新...');
+    }
+    
+    /**
+     * 登出
+     */
+    async logout() {
+        try {
+            await this.auth.logout();
+            this.showAuthPage();
+            this.toast.show('已登出', '您已成功登出', 'success');
+        } catch (error) {
+            console.error('登出失敗:', error);
+            this.toast.show('登出失敗', '請重試', 'error');
+        }
+    }
+}
+
+// 等待 DOM 載入完成後初始化應用
+document.addEventListener('DOMContentLoaded', () => {
+    window.app = new DramaLingApp();
+});
+
+// 導出應用類別供其他模組使用
+export default DramaLingApp;
\ No newline at end of file
diff --git a/apps/web-native/assets/js/utils.js b/apps/web-native/assets/js/utils.js
new file mode 100644
index 0000000..a57341c
--- /dev/null
+++ b/apps/web-native/assets/js/utils.js
@@ -0,0 +1,663 @@
+/**
+ * Drama Ling - 工具類別和狀態管理
+ * 提供應用程序所需的基礎工具函數和狀態管理
+ */
+
+/**
+ * 應用狀態管理類別
+ * 簡潔的響應式狀態管理，不依賴外部框架
+ */
+export class AppState {
+    constructor() {
+        this.data = {
+            user: null,
+            isAuthenticated: false,
+            vocabulary: [],
+            currentSession: null,
+            stats: {
+                totalWords: 0,
+                studyTime: 0,
+                achievements: 0,
+                streak: 0,
+                diamonds: 0
+            },
+            settings: {
+                theme: 'auto',
+                language: 'zh-TW',
+                soundEnabled: true,
+                notificationsEnabled: true
+            },
+            offline: false
+        };
+        
+        this.listeners = new Map();
+        
+        // 從本地存儲恢復狀態
+        this.loadFromStorage();
+    }
+    
+    /**
+     * 添加狀態變化監聽器
+     */
+    addListener(event, callback) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, []);
+        }
+        this.listeners.get(event).push(callback);
+    }
+    
+    /**
+     * 移除狀態變化監聽器
+     */
+    removeListener(event, callback) {
+        if (this.listeners.has(event)) {
+            const callbacks = this.listeners.get(event);
+            const index = callbacks.indexOf(callback);
+            if (index > -1) {
+                callbacks.splice(index, 1);
+            }
+        }
+    }
+    
+    /**
+     * 觸發狀態變化事件
+     */
+    emit(event, data) {
+        if (this.listeners.has(event)) {
+            this.listeners.get(event).forEach(callback => {
+                try {
+                    callback(data);
+                } catch (error) {
+                    console.error(`狀態事件監聽器錯誤 (${event}):`, error);
+                }
+            });
+        }
+    }
+    
+    /**
+     * 設定用戶資料
+     */
+    setUser(user) {
+        this.data.user = user;
+        this.data.isAuthenticated = !!user;
+        this.saveToStorage();
+        this.emit('userUpdated', user);
+        this.emit('authStatusChanged', !!user);
+    }
+    
+    /**
+     * 獲取用戶資料
+     */
+    getUser() {
+        return this.data.user;
+    }
+    
+    /**
+     * 檢查是否已認證
+     */
+    isAuthenticated() {
+        return this.data.isAuthenticated;
+    }
+    
+    /**
+     * 更新統計資料
+     */
+    updateStats(newStats) {
+        this.data.stats = { ...this.data.stats, ...newStats };
+        this.saveToStorage();
+        this.emit('statsUpdated', this.data.stats);
+    }
+    
+    /**
+     * 獲取統計資料
+     */
+    getStats() {
+        return this.data.stats;
+    }
+    
+    /**
+     * 更新設定
+     */
+    updateSettings(newSettings) {
+        this.data.settings = { ...this.data.settings, ...newSettings };
+        this.saveToStorage();
+        this.emit('settingsUpdated', this.data.settings);
+    }
+    
+    /**
+     * 獲取設定
+     */
+    getSettings() {
+        return this.data.settings;
+    }
+    
+    /**
+     * 設定離線狀態
+     */
+    setOffline(offline) {
+        this.data.offline = offline;
+        this.emit('offlineStatusChanged', offline);
+    }
+    
+    /**
+     * 檢查是否離線
+     */
+    isOffline() {
+        return this.data.offline;
+    }
+    
+    /**
+     * 保存狀態到本地存儲
+     */
+    saveToStorage() {
+        try {
+            const stateToSave = {
+                user: this.data.user,
+                settings: this.data.settings,
+                stats: this.data.stats
+            };
+            localStorage.setItem('drama-ling-state', JSON.stringify(stateToSave));
+        } catch (error) {
+            console.error('保存狀態失敗:', error);
+        }
+    }
+    
+    /**
+     * 從本地存儲載入狀態
+     */
+    loadFromStorage() {
+        try {
+            const savedState = localStorage.getItem('drama-ling-state');
+            if (savedState) {
+                const parsedState = JSON.parse(savedState);
+                this.data.user = parsedState.user;
+                this.data.isAuthenticated = !!parsedState.user;
+                this.data.settings = { ...this.data.settings, ...parsedState.settings };
+                this.data.stats = { ...this.data.stats, ...parsedState.stats };
+            }
+        } catch (error) {
+            console.error('載入狀態失敗:', error);
+        }
+    }
+    
+    /**
+     * 清除所有狀態
+     */
+    clear() {
+        this.data = {
+            user: null,
+            isAuthenticated: false,
+            vocabulary: [],
+            currentSession: null,
+            stats: {
+                totalWords: 0,
+                studyTime: 0,
+                achievements: 0,
+                streak: 0,
+                diamonds: 0
+            },
+            settings: {
+                theme: 'auto',
+                language: 'zh-TW',
+                soundEnabled: true,
+                notificationsEnabled: true
+            },
+            offline: false
+        };
+        
+        localStorage.removeItem('drama-ling-state');
+        this.emit('stateCleared');
+    }
+}
+
+/**
+ * 工具函數集合
+ */
+export class Utils {
+    /**
+     * 防抖函數
+     */
+    static debounce(func, wait, immediate = false) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                timeout = null;
+                if (!immediate) func.apply(this, args);
+            };
+            const callNow = immediate && !timeout;
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+            if (callNow) func.apply(this, args);
+        };
+    }
+    
+    /**
+     * 節流函數
+     */
+    static throttle(func, limit) {
+        let inThrottle;
+        return function executedFunction(...args) {
+            if (!inThrottle) {
+                func.apply(this, args);
+                inThrottle = true;
+                setTimeout(() => inThrottle = false, limit);
+            }
+        };
+    }
+    
+    /**
+     * 深度複製對象
+     */
+    static deepClone(obj) {
+        if (obj === null || typeof obj !== 'object') {
+            return obj;
+        }
+        
+        if (obj instanceof Date) {
+            return new Date(obj.getTime());
+        }
+        
+        if (obj instanceof Array) {
+            return obj.map(item => Utils.deepClone(item));
+        }
+        
+        if (typeof obj === 'object') {
+            const clonedObj = {};
+            for (const key in obj) {
+                if (obj.hasOwnProperty(key)) {
+                    clonedObj[key] = Utils.deepClone(obj[key]);
+                }
+            }
+            return clonedObj;
+        }
+    }
+    
+    /**
+     * 格式化時間
+     */
+    static formatTime(seconds) {
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const remainingSeconds = seconds % 60;
+        
+        if (hours > 0) {
+            return `${hours}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+        } else {
+            return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+        }
+    }
+    
+    /**
+     * 格式化數字
+     */
+    static formatNumber(num) {
+        if (num >= 1000000) {
+            return (num / 1000000).toFixed(1) + 'M';
+        } else if (num >= 1000) {
+            return (num / 1000).toFixed(1) + 'K';
+        }
+        return num.toString();
+    }
+    
+    /**
+     * 格式化日期
+     */
+    static formatDate(date, locale = 'zh-TW') {
+        if (!(date instanceof Date)) {
+            date = new Date(date);
+        }
+        
+        return date.toLocaleDateString(locale, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+        });
+    }
+    
+    /**
+     * 獲取相對時間
+     */
+    static getRelativeTime(date, locale = 'zh-TW') {
+        const now = new Date();
+        const targetDate = new Date(date);
+        const diffInSeconds = Math.floor((now - targetDate) / 1000);
+        
+        const intervals = {
+            year: 31536000,
+            month: 2592000,
+            week: 604800,
+            day: 86400,
+            hour: 3600,
+            minute: 60
+        };
+        
+        for (const [unit, seconds] of Object.entries(intervals)) {
+            const interval = Math.floor(diffInSeconds / seconds);
+            if (interval >= 1) {
+                const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+                return rtf.format(-interval, unit);
+            }
+        }
+        
+        return '剛剛';
+    }
+    
+    /**
+     * 產生唯一 ID
+     */
+    static generateId() {
+        return Date.now().toString(36) + Math.random().toString(36).substr(2);
+    }
+    
+    /**
+     * 驗證電子郵件格式
+     */
+    static validateEmail(email) {
+        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return re.test(email);
+    }
+    
+    /**
+     * 驗證密碼強度
+     */
+    static validatePassword(password) {
+        const minLength = 8;
+        const hasUpperCase = /[A-Z]/.test(password);
+        const hasLowerCase = /[a-z]/.test(password);
+        const hasNumbers = /\d/.test(password);
+        const hasNonalphas = /\W/.test(password);
+        
+        return {
+            isValid: password.length >= minLength && hasUpperCase && hasLowerCase && hasNumbers,
+            strength: [hasUpperCase, hasLowerCase, hasNumbers, hasNonalphas].filter(Boolean).length,
+            minLength: password.length >= minLength,
+            hasUpperCase,
+            hasLowerCase,
+            hasNumbers,
+            hasSpecialChars: hasNonalphas
+        };
+    }
+    
+    /**
+     * 本地存儲輔助函數
+     */
+    static storage = {
+        set(key, value) {
+            try {
+                localStorage.setItem(key, JSON.stringify(value));
+                return true;
+            } catch (error) {
+                console.error('本地存儲設置失敗:', error);
+                return false;
+            }
+        },
+        
+        get(key, defaultValue = null) {
+            try {
+                const item = localStorage.getItem(key);
+                return item ? JSON.parse(item) : defaultValue;
+            } catch (error) {
+                console.error('本地存儲讀取失敗:', error);
+                return defaultValue;
+            }
+        },
+        
+        remove(key) {
+            try {
+                localStorage.removeItem(key);
+                return true;
+            } catch (error) {
+                console.error('本地存儲刪除失敗:', error);
+                return false;
+            }
+        },
+        
+        clear() {
+            try {
+                localStorage.clear();
+                return true;
+            } catch (error) {
+                console.error('本地存儲清除失敗:', error);
+                return false;
+            }
+        }
+    };
+    
+    /**
+     * URL 參數處理
+     */
+    static url = {
+        getParams() {
+            return new URLSearchParams(window.location.search);
+        },
+        
+        getParam(key, defaultValue = null) {
+            const params = new URLSearchParams(window.location.search);
+            return params.get(key) || defaultValue;
+        },
+        
+        setParam(key, value) {
+            const url = new URL(window.location);
+            url.searchParams.set(key, value);
+            window.history.pushState({}, '', url);
+        },
+        
+        removeParam(key) {
+            const url = new URL(window.location);
+            url.searchParams.delete(key);
+            window.history.pushState({}, '', url);
+        }
+    };
+    
+    /**
+     * DOM 輔助函數
+     */
+    static dom = {
+        /**
+         * 創建元素
+         */
+        create(tagName, attributes = {}, textContent = '') {
+            const element = document.createElement(tagName);
+            
+            for (const [key, value] of Object.entries(attributes)) {
+                if (key === 'className') {
+                    element.className = value;
+                } else if (key.startsWith('data-')) {
+                    element.setAttribute(key, value);
+                } else {
+                    element[key] = value;
+                }
+            }
+            
+            if (textContent) {
+                element.textContent = textContent;
+            }
+            
+            return element;
+        },
+        
+        /**
+         * 查詢元素
+         */
+        $(selector, context = document) {
+            return context.querySelector(selector);
+        },
+        
+        /**
+         * 查詢所有元素
+         */
+        $$(selector, context = document) {
+            return Array.from(context.querySelectorAll(selector));
+        },
+        
+        /**
+         * 添加事件監聽器
+         */
+        on(element, event, handler, options = false) {
+            element.addEventListener(event, handler, options);
+        },
+        
+        /**
+         * 移除事件監聽器
+         */
+        off(element, event, handler, options = false) {
+            element.removeEventListener(event, handler, options);
+        },
+        
+        /**
+         * 添加類別
+         */
+        addClass(element, className) {
+            element.classList.add(className);
+        },
+        
+        /**
+         * 移除類別
+         */
+        removeClass(element, className) {
+            element.classList.remove(className);
+        },
+        
+        /**
+         * 切換類別
+         */
+        toggleClass(element, className) {
+            element.classList.toggle(className);
+        },
+        
+        /**
+         * 檢查是否有類別
+         */
+        hasClass(element, className) {
+            return element.classList.contains(className);
+        }
+    };
+    
+    /**
+     * 數學輔助函數
+     */
+    static math = {
+        /**
+         * 限制數值範圍
+         */
+        clamp(value, min, max) {
+            return Math.min(Math.max(value, min), max);
+        },
+        
+        /**
+         * 線性插值
+         */
+        lerp(start, end, factor) {
+            return start + (end - start) * factor;
+        },
+        
+        /**
+         * 隨機整數
+         */
+        randomInt(min, max) {
+            return Math.floor(Math.random() * (max - min + 1)) + min;
+        },
+        
+        /**
+         * 隨機浮點數
+         */
+        randomFloat(min, max) {
+            return Math.random() * (max - min) + min;
+        },
+        
+        /**
+         * 百分比計算
+         */
+        percentage(value, total) {
+            return total > 0 ? (value / total) * 100 : 0;
+        }
+    };
+    
+    /**
+     * 顏色輔助函數
+     */
+    static color = {
+        /**
+         * 十六進制轉 RGB
+         */
+        hexToRgb(hex) {
+            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+            return result ? {
+                r: parseInt(result[1], 16),
+                g: parseInt(result[2], 16),
+                b: parseInt(result[3], 16)
+            } : null;
+        },
+        
+        /**
+         * RGB 轉十六進制
+         */
+        rgbToHex(r, g, b) {
+            return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+        },
+        
+        /**
+         * 生成隨機顏色
+         */
+        random() {
+            return '#' + Math.floor(Math.random() * 16777215).toString(16);
+        }
+    };
+}
+
+/**
+ * 事件匯流排
+ * 用於組件間通信
+ */
+export class EventBus {
+    constructor() {
+        this.events = {};
+    }
+    
+    /**
+     * 監聽事件
+     */
+    on(event, callback) {
+        if (!this.events[event]) {
+            this.events[event] = [];
+        }
+        this.events[event].push(callback);
+    }
+    
+    /**
+     * 觸發事件
+     */
+    emit(event, data) {
+        if (this.events[event]) {
+            this.events[event].forEach(callback => {
+                try {
+                    callback(data);
+                } catch (error) {
+                    console.error(`事件處理器錯誤 (${event}):`, error);
+                }
+            });
+        }
+    }
+    
+    /**
+     * 移除事件監聽器
+     */
+    off(event, callback) {
+        if (this.events[event]) {
+            const index = this.events[event].indexOf(callback);
+            if (index > -1) {
+                this.events[event].splice(index, 1);
+            }
+        }
+    }
+    
+    /**
+     * 清除所有事件監聽器
+     */
+    clear() {
+        this.events = {};
+    }
+}
+
+// 創建全域事件匯流排實例
+export const eventBus = new EventBus();
\ No newline at end of file
diff --git a/apps/web-native/data/mockData.js b/apps/web-native/data/mockData.js
new file mode 100644
index 0000000..1bfec02
--- /dev/null
+++ b/apps/web-native/data/mockData.js
@@ -0,0 +1,520 @@
+/**
+ * Drama Ling - 模擬數據
+ * 開發和測試用的模擬數據集
+ */
+
+/**
+ * 模擬用戶數據
+ */
+export const mockUsers = [
+    {
+        id: 'user_001',
+        email: 'demo@dramaling.com',
+        name: '張小明',
+        avatar: '/assets/media/images/avatar-1.png',
+        level: '中級',
+        joinDate: '2024-01-15',
+        preferences: {
+            language: 'zh-TW',
+            theme: 'auto',
+            soundEnabled: true,
+            notificationsEnabled: true
+        }
+    },
+    {
+        id: 'user_002',
+        email: 'sarah@example.com',
+        name: 'Sarah Chen',
+        avatar: '/assets/media/images/avatar-2.png',
+        level: '高級',
+        joinDate: '2023-11-20',
+        preferences: {
+            language: 'zh-TW',
+            theme: 'light',
+            soundEnabled: false,
+            notificationsEnabled: true
+        }
+    }
+];
+
+/**
+ * 模擬用戶統計數據
+ */
+export const mockUserStats = {
+    totalWords: 1247,
+    studyTime: 45, // 小時
+    achievements: 12,
+    streak: 7, // 連續學習天數
+    diamonds: 2580,
+    weeklyGoal: 5, // 每週學習時數目標
+    weeklyProgress: 3.5, // 本週已完成時數
+    levelProgress: 78, // 等級進度百分比
+    accuracy: 85, // 整體答題準確率
+    strongCategories: ['商務', '旅遊', '日常對話'],
+    weakCategories: ['科技', '醫療']
+};
+
+/**
+ * 模擬詞彙數據
+ */
+export const mockVocabulary = [
+    {
+        id: 'vocab_001',
+        word: 'appreciate',
+        definition: '感激；欣賞；理解',
+        pronunciation: '/əˈpriːʃieɪt/',
+        difficulty: 'intermediate',
+        category: 'business',
+        examples: [
+            {
+                english: 'I appreciate your hard work.',
+                chinese: '我很感激你的辛勤工作。'
+            },
+            {
+                english: 'Do you appreciate classical music?',
+                chinese: '你欣賞古典音樂嗎？'
+            }
+        ],
+        audioUrl: '/assets/media/audio/appreciate.mp3',
+        imageUrl: '/assets/media/images/appreciate.jpg',
+        tags: ['emotion', 'business', 'common'],
+        addedDate: '2024-09-01',
+        masteryLevel: 0.8, // 0-1，掌握程度
+        reviewCount: 5,
+        correctCount: 4,
+        lastReviewed: '2024-09-09'
+    },
+    {
+        id: 'vocab_002',
+        word: 'definitely',
+        definition: '當然；肯定地',
+        pronunciation: '/ˈdefɪnətli/',
+        difficulty: 'beginner',
+        category: 'daily',
+        examples: [
+            {
+                english: 'I will definitely come to your party.',
+                chinese: '我一定會參加你的派對。'
+            },
+            {
+                english: 'That was definitely the best movie I\'ve seen.',
+                chinese: '那絕對是我看過最好的電影。'
+            }
+        ],
+        audioUrl: '/assets/media/audio/definitely.mp3',
+        imageUrl: '/assets/media/images/definitely.jpg',
+        tags: ['adverb', 'confirmation', 'common'],
+        addedDate: '2024-08-28',
+        masteryLevel: 0.95,
+        reviewCount: 8,
+        correctCount: 8,
+        lastReviewed: '2024-09-08'
+    },
+    {
+        id: 'vocab_003',
+        word: 'entrepreneur',
+        definition: '企業家；創業者',
+        pronunciation: '/ˌɒntrəprəˈnɜː(r)/',
+        difficulty: 'advanced',
+        category: 'business',
+        examples: [
+            {
+                english: 'She is a successful entrepreneur.',
+                chinese: '她是一位成功的企業家。'
+            },
+            {
+                english: 'Many entrepreneurs start with small businesses.',
+                chinese: '許多企業家都是從小企業開始的。'
+            }
+        ],
+        audioUrl: '/assets/media/audio/entrepreneur.mp3',
+        imageUrl: '/assets/media/images/entrepreneur.jpg',
+        tags: ['business', 'career', 'advanced'],
+        addedDate: '2024-09-05',
+        masteryLevel: 0.4,
+        reviewCount: 2,
+        correctCount: 1,
+        lastReviewed: '2024-09-07'
+    }
+];
+
+/**
+ * 模擬對話場景數據
+ */
+export const mockDialogues = [
+    {
+        id: 'dialogue_001',
+        title: '餐廳點餐',
+        category: 'restaurant',
+        difficulty: 'beginner',
+        description: '在餐廳與服務生的基本對話練習',
+        estimatedTime: 5, // 分鐘
+        thumbnail: '/assets/media/images/restaurant-scene.jpg',
+        characters: [
+            {
+                id: 'customer',
+                name: '顧客',
+                avatar: '/assets/media/images/customer-avatar.png'
+            },
+            {
+                id: 'waiter',
+                name: '服務生',
+                avatar: '/assets/media/images/waiter-avatar.png',
+                isAI: true
+            }
+        ],
+        conversation: [
+            {
+                speaker: 'waiter',
+                text: 'Good evening! Welcome to our restaurant. How many people?',
+                chinese: '晚安！歡迎來到我們餐廳。請問幾位？',
+                audioUrl: '/assets/media/audio/dialogue_001_01.mp3'
+            },
+            {
+                speaker: 'customer',
+                text: 'Table for two, please.',
+                chinese: '請給我們兩人桌。',
+                audioUrl: '/assets/media/audio/dialogue_001_02.mp3',
+                isUserResponse: true,
+                alternatives: [
+                    'Two people, please.',
+                    'A table for two.',
+                    'Party of two.'
+                ]
+            },
+            {
+                speaker: 'waiter',
+                text: 'Perfect! Right this way, please. Here are your menus.',
+                chinese: '很好！請這邊走。這是菜單。',
+                audioUrl: '/assets/media/audio/dialogue_001_03.mp3'
+            }
+        ],
+        completedBy: 1250, // 完成人數
+        rating: 4.8,
+        tags: ['restaurant', 'basic', 'ordering']
+    },
+    {
+        id: 'dialogue_002',
+        title: '機場報到',
+        category: 'travel',
+        difficulty: 'intermediate',
+        description: '在機場辦理登機手續的對話',
+        estimatedTime: 8,
+        thumbnail: '/assets/media/images/airport-scene.jpg',
+        characters: [
+            {
+                id: 'passenger',
+                name: '乘客',
+                avatar: '/assets/media/images/passenger-avatar.png'
+            },
+            {
+                id: 'checkin_agent',
+                name: '報到人員',
+                avatar: '/assets/media/images/agent-avatar.png',
+                isAI: true
+            }
+        ],
+        conversation: [
+            {
+                speaker: 'checkin_agent',
+                text: 'Good morning! May I have your passport and ticket, please?',
+                chinese: '早安！請出示您的護照和機票。',
+                audioUrl: '/assets/media/audio/dialogue_002_01.mp3'
+            },
+            {
+                speaker: 'passenger',
+                text: 'Here you go.',
+                chinese: '給您。',
+                audioUrl: '/assets/media/audio/dialogue_002_02.mp3',
+                isUserResponse: true,
+                alternatives: [
+                    'Here they are.',
+                    'Sure, here you are.',
+                    'Of course.'
+                ]
+            }
+        ],
+        completedBy: 890,
+        rating: 4.6,
+        tags: ['travel', 'airport', 'procedures']
+    }
+];
+
+/**
+ * 模擬學習進度數據
+ */
+export const mockLearningProgress = {
+    dailyStats: [
+        { date: '2024-09-03', wordsLearned: 15, timeSpent: 25, accuracy: 82 },
+        { date: '2024-09-04', wordsLearned: 12, timeSpent: 30, accuracy: 88 },
+        { date: '2024-09-05', wordsLearned: 18, timeSpent: 35, accuracy: 75 },
+        { date: '2024-09-06', wordsLearned: 20, timeSpent: 40, accuracy: 90 },
+        { date: '2024-09-07', wordsLearned: 16, timeSpent: 28, accuracy: 85 },
+        { date: '2024-09-08', wordsLearned: 14, timeSpent: 32, accuracy: 87 },
+        { date: '2024-09-09', wordsLearned: 22, timeSpent: 45, accuracy: 92 }
+    ],
+    weeklyGoals: {
+        wordsTarget: 100,
+        timeTarget: 5 * 60, // 5小時，以分鐘為單位
+        currentWords: 117,
+        currentTime: 235 // 分鐘
+    },
+    categoryProgress: {
+        business: { total: 150, mastered: 120, learning: 25, difficult: 5 },
+        daily: { total: 200, mastered: 180, learning: 15, difficult: 5 },
+        travel: { total: 80, mastered: 60, learning: 15, difficult: 5 },
+        technology: { total: 100, mastered: 45, learning: 30, difficult: 25 }
+    },
+    achievements: [
+        {
+            id: 'first_week',
+            title: '初次體驗',
+            description: '完成第一週學習',
+            icon: '🎯',
+            unlockedDate: '2024-01-22',
+            rarity: 'common'
+        },
+        {
+            id: 'streak_7',
+            title: '七日連勝',
+            description: '連續學習7天',
+            icon: '🔥',
+            unlockedDate: '2024-02-01',
+            rarity: 'rare'
+        },
+        {
+            id: 'words_1000',
+            title: '詞彙大師',
+            description: '學習1000個詞彙',
+            icon: '📚',
+            unlockedDate: '2024-08-15',
+            rarity: 'epic'
+        }
+    ]
+};
+
+/**
+ * 模擬系統設定數據
+ */
+export const mockSystemSettings = {
+    themes: [
+        { id: 'auto', name: '自動', description: '跟隨系統設定' },
+        { id: 'light', name: '淺色', description: '淺色主題' },
+        { id: 'dark', name: '深色', description: '深色主題' }
+    ],
+    languages: [
+        { id: 'zh-TW', name: '繁體中文', flag: '🇹🇼' },
+        { id: 'zh-CN', name: '简体中文', flag: '🇨🇳' },
+        { id: 'en-US', name: 'English', flag: '🇺🇸' },
+        { id: 'ja-JP', name: '日本語', flag: '🇯🇵' }
+    ],
+    notificationTypes: [
+        { id: 'daily_reminder', name: '每日提醒', description: '提醒您每天學習' },
+        { id: 'streak_warning', name: '連勝警告', description: '連勝即將中斷時提醒' },
+        { id: 'achievement', name: '成就通知', description: '獲得新成就時通知' },
+        { id: 'weekly_report', name: '週報', description: '每週學習報告' }
+    ]
+};
+
+/**
+ * 模擬 API 響應數據
+ */
+export const mockApiResponses = {
+    login: {
+        success: {
+            token: 'mock_jwt_token_12345',
+            user: mockUsers[0],
+            expiresIn: 86400 // 24小時
+        },
+        error: {
+            message: '帳號或密碼錯誤',
+            code: 'INVALID_CREDENTIALS'
+        }
+    },
+    
+    getUserStats: {
+        success: mockUserStats,
+        error: {
+            message: '無法載入用戶統計',
+            code: 'STATS_LOAD_ERROR'
+        }
+    },
+    
+    getVocabulary: {
+        success: {
+            data: mockVocabulary,
+            total: mockVocabulary.length,
+            page: 1,
+            limit: 20
+        },
+        error: {
+            message: '無法載入詞彙數據',
+            code: 'VOCABULARY_LOAD_ERROR'
+        }
+    },
+    
+    getDialogues: {
+        success: {
+            data: mockDialogues,
+            total: mockDialogues.length,
+            page: 1,
+            limit: 10
+        },
+        error: {
+            message: '無法載入對話數據',
+            code: 'DIALOGUE_LOAD_ERROR'
+        }
+    }
+};
+
+/**
+ * 模擬 API 客戶端
+ * 用於開發環境的 API 模擬
+ */
+export class MockApiClient {
+    constructor() {
+        this.delay = 300; // 模擬網路延遲
+        this.failureRate = 0.1; // 10% 機率失敗
+    }
+    
+    /**
+     * 模擬 API 延遲
+     */
+    async simulateDelay() {
+        return new Promise(resolve => {
+            setTimeout(resolve, this.delay);
+        });
+    }
+    
+    /**
+     * 模擬隨機失敗
+     */
+    simulateRandomFailure() {
+        return Math.random() < this.failureRate;
+    }
+    
+    /**
+     * 用戶登入
+     */
+    async login(email, password) {
+        await this.simulateDelay();
+        
+        if (this.simulateRandomFailure()) {
+            throw new Error(mockApiResponses.login.error.message);
+        }
+        
+        // 簡單的驗證邏輯
+        if (email === 'demo@dramaling.com' && password === 'password') {
+            return mockApiResponses.login.success;
+        } else {
+            throw new Error(mockApiResponses.login.error.message);
+        }
+    }
+    
+    /**
+     * 獲取用戶統計
+     */
+    async getUserStats() {
+        await this.simulateDelay();
+        
+        if (this.simulateRandomFailure()) {
+            throw new Error(mockApiResponses.getUserStats.error.message);
+        }
+        
+        return mockApiResponses.getUserStats.success;
+    }
+    
+    /**
+     * 獲取詞彙列表
+     */
+    async getVocabulary(params = {}) {
+        await this.simulateDelay();
+        
+        if (this.simulateRandomFailure()) {
+            throw new Error(mockApiResponses.getVocabulary.error.message);
+        }
+        
+        let filteredVocabulary = [...mockVocabulary];
+        
+        // 模擬過濾和排序
+        if (params.category) {
+            filteredVocabulary = filteredVocabulary.filter(
+                vocab => vocab.category === params.category
+            );
+        }
+        
+        if (params.difficulty) {
+            filteredVocabulary = filteredVocabulary.filter(
+                vocab => vocab.difficulty === params.difficulty
+            );
+        }
+        
+        return {
+            data: filteredVocabulary,
+            total: filteredVocabulary.length,
+            page: params.page || 1,
+            limit: params.limit || 20
+        };
+    }
+    
+    /**
+     * 獲取對話場景
+     */
+    async getDialogues(params = {}) {
+        await this.simulateDelay();
+        
+        if (this.simulateRandomFailure()) {
+            throw new Error(mockApiResponses.getDialogues.error.message);
+        }
+        
+        let filteredDialogues = [...mockDialogues];
+        
+        if (params.category) {
+            filteredDialogues = filteredDialogues.filter(
+                dialogue => dialogue.category === params.category
+            );
+        }
+        
+        if (params.difficulty) {
+            filteredDialogues = filteredDialogues.filter(
+                dialogue => dialogue.difficulty === params.difficulty
+            );
+        }
+        
+        return {
+            data: filteredDialogues,
+            total: filteredDialogues.length,
+            page: params.page || 1,
+            limit: params.limit || 10
+        };
+    }
+    
+    /**
+     * 獲取學習進度
+     */
+    async getLearningProgress() {
+        await this.simulateDelay();
+        
+        if (this.simulateRandomFailure()) {
+            throw new Error('無法載入學習進度');
+        }
+        
+        return mockLearningProgress;
+    }
+    
+    /**
+     * 獲取當前用戶
+     */
+    async getCurrentUser() {
+        await this.simulateDelay();
+        
+        if (this.simulateRandomFailure()) {
+            throw new Error('無法載入用戶資料');
+        }
+        
+        return mockUsers[0];
+    }
+}
+
+// 導出模擬 API 客戶端實例
+export const mockApi = new MockApiClient();
\ No newline at end of file
diff --git a/apps/web-native/index.html b/apps/web-native/index.html
new file mode 100644
index 0000000..b1fb8dc
--- /dev/null
+++ b/apps/web-native/index.html
@@ -0,0 +1,193 @@
+<!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>
\ No newline at end of file