900 lines
30 KiB
HTML
900 lines
30 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-TW">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>數據展示元件 - Drama Ling Component Library</title>
|
||
<link rel="stylesheet" href="../../assets/styles/base.css">
|
||
<link rel="stylesheet" href="../../assets/styles/components.css">
|
||
<style>
|
||
/* CSS Variables Definition */
|
||
:root {
|
||
--white: #ffffff;
|
||
--gray-50: #f9fafb;
|
||
--gray-100: #f3f4f6;
|
||
--gray-200: #e5e7eb;
|
||
--gray-300: #d1d5db;
|
||
--gray-500: #6b7280;
|
||
--gray-600: #4b5563;
|
||
--gray-700: #374151;
|
||
--gray-900: #111827;
|
||
--primary: #667eea;
|
||
--primary-100: #e0e7ff;
|
||
--success: #10b981;
|
||
--danger: #ef4444;
|
||
--warning: #f59e0b;
|
||
}
|
||
|
||
/* Component Container Fix */
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 2rem;
|
||
background: #f9fafb;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* Header Section Fix */
|
||
.header {
|
||
background: white;
|
||
padding: 2rem;
|
||
border-radius: 12px;
|
||
margin-bottom: 2rem;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 2rem;
|
||
color: #111827;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.header p {
|
||
color: #6b7280;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
/* Component Section Fix */
|
||
.component-section {
|
||
background: white;
|
||
padding: 2rem;
|
||
border-radius: 12px;
|
||
margin-bottom: 2rem;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.component-section h2 {
|
||
font-size: 1.5rem;
|
||
color: #111827;
|
||
margin-bottom: 1.5rem;
|
||
padding-bottom: 0.75rem;
|
||
border-bottom: 2px solid #e5e7eb;
|
||
}
|
||
|
||
/* Showcase Layout Fix */
|
||
.component-showcase {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.showcase-preview {
|
||
padding: 1.5rem;
|
||
background: #f9fafb;
|
||
border-radius: 8px;
|
||
border: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.showcase-code {
|
||
background: #1f2937;
|
||
border-radius: 8px;
|
||
padding: 1rem;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.showcase-code pre {
|
||
margin: 0;
|
||
color: #d1d5db;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 0.875rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.showcase-code code {
|
||
color: #93c5fd;
|
||
}
|
||
|
||
/* Button Styles */
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 0.5rem 1.5rem;
|
||
border-radius: 6px;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #667eea;
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #5a67d8;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #e5e7eb;
|
||
color: #374151;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #d1d5db;
|
||
}
|
||
|
||
/* Badge Styles */
|
||
.badge {
|
||
display: inline-block;
|
||
padding: 0.25rem 0.75rem;
|
||
border-radius: 12px;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.badge-primary {
|
||
background: #e0e7ff;
|
||
color: #4c51bf;
|
||
}
|
||
|
||
.badge-success {
|
||
background: #d1fae5;
|
||
color: #065f46;
|
||
}
|
||
|
||
.badge-warning {
|
||
background: #fed7aa;
|
||
color: #92400e;
|
||
}
|
||
|
||
/* Progress Bar Fix */
|
||
.progress {
|
||
height: 8px;
|
||
background: #e5e7eb;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 100%;
|
||
background: #667eea;
|
||
border-radius: 4px;
|
||
transition: width 0.3s;
|
||
}
|
||
|
||
/* Select Input Fix */
|
||
.select {
|
||
padding: 0.5rem 1rem;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 6px;
|
||
background: white;
|
||
color: #374151;
|
||
font-size: 0.875rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Footer Fix */
|
||
.footer {
|
||
text-align: center;
|
||
padding: 2rem;
|
||
color: #6b7280;
|
||
margin-top: 4rem;
|
||
}
|
||
|
||
/* Data Display Components Specific Styles */
|
||
|
||
/* Table */
|
||
.table-container {
|
||
overflow-x: auto;
|
||
background: var(--white);
|
||
border-radius: 12px;
|
||
border: 1px solid var(--gray-200);
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.table thead {
|
||
background: var(--gray-50);
|
||
border-bottom: 2px solid var(--gray-200);
|
||
}
|
||
|
||
.table th {
|
||
padding: 1rem;
|
||
text-align: left;
|
||
font-weight: 600;
|
||
color: var(--gray-700);
|
||
font-size: 0.875rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.table td {
|
||
padding: 1rem;
|
||
border-bottom: 1px solid var(--gray-100);
|
||
color: var(--gray-900);
|
||
}
|
||
|
||
.table tbody tr:hover {
|
||
background: var(--gray-50);
|
||
}
|
||
|
||
.table tbody tr:last-child td {
|
||
border-bottom: none;
|
||
}
|
||
|
||
/* Table Variants */
|
||
.table-striped tbody tr:nth-child(even) {
|
||
background: var(--gray-50);
|
||
}
|
||
|
||
.table-compact th,
|
||
.table-compact td {
|
||
padding: 0.5rem 0.75rem;
|
||
}
|
||
|
||
/* List */
|
||
.list {
|
||
background: var(--white);
|
||
border-radius: 12px;
|
||
border: 1px solid var(--gray-200);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.list-item {
|
||
padding: 1rem 1.5rem;
|
||
border-bottom: 1px solid var(--gray-100);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.list-item:hover {
|
||
background: var(--gray-50);
|
||
}
|
||
|
||
.list-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.list-item-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.list-item-title {
|
||
font-weight: 600;
|
||
color: var(--gray-900);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.list-item-description {
|
||
font-size: 0.875rem;
|
||
color: var(--gray-600);
|
||
}
|
||
|
||
.list-item-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.list-item-avatar {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
background: var(--primary-100);
|
||
color: var(--primary);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 600;
|
||
margin-right: 1rem;
|
||
}
|
||
|
||
/* Statistics Card */
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.stat-card {
|
||
background: var(--white);
|
||
padding: 1.5rem;
|
||
border-radius: 12px;
|
||
border: 1px solid var(--gray-200);
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 0.875rem;
|
||
color: var(--gray-600);
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
color: var(--gray-900);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.stat-change {
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.stat-change.positive {
|
||
color: var(--success);
|
||
}
|
||
|
||
.stat-change.negative {
|
||
color: var(--danger);
|
||
}
|
||
|
||
.stat-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: var(--primary-100);
|
||
color: var(--primary);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
/* Timeline */
|
||
.timeline {
|
||
position: relative;
|
||
padding-left: 2rem;
|
||
}
|
||
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: var(--gray-200);
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
padding-bottom: 2rem;
|
||
}
|
||
|
||
.timeline-item:last-child {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.timeline-marker {
|
||
position: absolute;
|
||
left: -2.5rem;
|
||
width: 12px;
|
||
height: 12px;
|
||
background: var(--white);
|
||
border: 2px solid var(--primary);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.timeline-content {
|
||
background: var(--white);
|
||
padding: 1rem;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--gray-200);
|
||
}
|
||
|
||
.timeline-date {
|
||
font-size: 0.875rem;
|
||
color: var(--gray-600);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.timeline-title {
|
||
font-weight: 600;
|
||
color: var(--gray-900);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.timeline-description {
|
||
color: var(--gray-700);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
/* Data Grid */
|
||
.data-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
gap: 1rem;
|
||
}
|
||
|
||
.data-grid-item {
|
||
background: var(--white);
|
||
border: 1px solid var(--gray-200);
|
||
border-radius: 8px;
|
||
padding: 1rem;
|
||
text-align: center;
|
||
transition: all 0.2s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.data-grid-item:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.data-grid-icon {
|
||
font-size: 2rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.data-grid-label {
|
||
font-weight: 600;
|
||
color: var(--gray-900);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.data-grid-value {
|
||
font-size: 0.875rem;
|
||
color: var(--gray-600);
|
||
}
|
||
|
||
/* Chart Placeholder */
|
||
.chart-container {
|
||
background: var(--white);
|
||
border: 1px solid var(--gray-200);
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.chart-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.chart-title {
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
color: var(--gray-900);
|
||
}
|
||
|
||
.chart-placeholder {
|
||
height: 300px;
|
||
background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--gray-500);
|
||
}
|
||
|
||
/* Empty State */
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 3rem;
|
||
background: var(--gray-50);
|
||
border-radius: 12px;
|
||
border: 2px dashed var(--gray-300);
|
||
}
|
||
|
||
.empty-state-icon {
|
||
font-size: 3rem;
|
||
margin-bottom: 1rem;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.empty-state-title {
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
color: var(--gray-900);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.empty-state-description {
|
||
color: var(--gray-600);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>📊 數據展示元件</h1>
|
||
<p>表格、列表、統計卡片、時間軸等數據展示元件</p>
|
||
<a href="../../index.html" class="btn btn-secondary">← 返回主頁</a>
|
||
</div>
|
||
|
||
<!-- Table -->
|
||
<section class="component-section">
|
||
<h2>表格 (Table)</h2>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<div class="table-container">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>詞彙</th>
|
||
<th>類型</th>
|
||
<th>進度</th>
|
||
<th>掌握度</th>
|
||
<th>最後練習</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Hello</strong></td>
|
||
<td><span class="badge badge-primary">基礎</span></td>
|
||
<td>
|
||
<div class="progress">
|
||
<div class="progress-bar" style="width: 80%"></div>
|
||
</div>
|
||
</td>
|
||
<td>80%</td>
|
||
<td>2小時前</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Goodbye</strong></td>
|
||
<td><span class="badge badge-primary">基礎</span></td>
|
||
<td>
|
||
<div class="progress">
|
||
<div class="progress-bar" style="width: 65%"></div>
|
||
</div>
|
||
</td>
|
||
<td>65%</td>
|
||
<td>昨天</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Thank you</strong></td>
|
||
<td><span class="badge badge-success">進階</span></td>
|
||
<td>
|
||
<div class="progress">
|
||
<div class="progress-bar" style="width: 95%"></div>
|
||
</div>
|
||
</td>
|
||
<td>95%</td>
|
||
<td>3天前</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<pre><code><div class="table-container">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>詞彙</th>
|
||
<th>類型</th>
|
||
<th>進度</th>
|
||
<th>掌握度</th>
|
||
<th>最後練習</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Hello</strong></td>
|
||
<td><span class="badge badge-primary">基礎</span></td>
|
||
<td>
|
||
<div class="progress">
|
||
<div class="progress-bar" style="width: 80%"></div>
|
||
</div>
|
||
</td>
|
||
<td>80%</td>
|
||
<td>2小時前</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- List -->
|
||
<section class="component-section">
|
||
<h2>列表 (List)</h2>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<div class="list">
|
||
<div class="list-item">
|
||
<div class="list-item-avatar">JD</div>
|
||
<div class="list-item-content">
|
||
<div class="list-item-title">John Doe</div>
|
||
<div class="list-item-description">完成了「日常對話」單元</div>
|
||
</div>
|
||
<div class="list-item-meta">
|
||
<span class="badge badge-success">+50 XP</span>
|
||
<span style="color: var(--gray-500);">5分鐘前</span>
|
||
</div>
|
||
</div>
|
||
<div class="list-item">
|
||
<div class="list-item-avatar">SJ</div>
|
||
<div class="list-item-content">
|
||
<div class="list-item-title">Sarah Johnson</div>
|
||
<div class="list-item-description">達成連續學習7天成就</div>
|
||
</div>
|
||
<div class="list-item-meta">
|
||
<span class="badge badge-warning">🏆 成就</span>
|
||
<span style="color: var(--gray-500);">1小時前</span>
|
||
</div>
|
||
</div>
|
||
<div class="list-item">
|
||
<div class="list-item-avatar">MC</div>
|
||
<div class="list-item-content">
|
||
<div class="list-item-title">Mike Chen</div>
|
||
<div class="list-item-description">晉升至中級學習者</div>
|
||
</div>
|
||
<div class="list-item-meta">
|
||
<span class="badge badge-primary">升級</span>
|
||
<span style="color: var(--gray-500);">3小時前</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<pre><code><div class="list">
|
||
<div class="list-item">
|
||
<div class="list-item-avatar">JD</div>
|
||
<div class="list-item-content">
|
||
<div class="list-item-title">John Doe</div>
|
||
<div class="list-item-description">完成了「日常對話」單元</div>
|
||
</div>
|
||
<div class="list-item-meta">
|
||
<span class="badge badge-success">+50 XP</span>
|
||
<span style="color: var(--gray-500);">5分鐘前</span>
|
||
</div>
|
||
</div>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Statistics Cards -->
|
||
<section class="component-section">
|
||
<h2>統計卡片 (Statistics Cards)</h2>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-icon">📚</div>
|
||
<div class="stat-label">已學詞彙</div>
|
||
<div class="stat-value">248</div>
|
||
<div class="stat-change positive">
|
||
↑ 12% 比上週
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">🔥</div>
|
||
<div class="stat-label">連續學習</div>
|
||
<div class="stat-value">7天</div>
|
||
<div class="stat-change positive">
|
||
↑ 個人最佳紀錄
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">⏱️</div>
|
||
<div class="stat-label">學習時間</div>
|
||
<div class="stat-value">45分</div>
|
||
<div class="stat-change negative">
|
||
↓ 15分 比昨天
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">🎯</div>
|
||
<div class="stat-label">準確率</div>
|
||
<div class="stat-value">85%</div>
|
||
<div class="stat-change positive">
|
||
↑ 5% 提升
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<pre><code><div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-icon">📚</div>
|
||
<div class="stat-label">已學詞彙</div>
|
||
<div class="stat-value">248</div>
|
||
<div class="stat-change positive">
|
||
↑ 12% 比上週
|
||
</div>
|
||
</div>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Timeline -->
|
||
<section class="component-section">
|
||
<h2>時間軸 (Timeline)</h2>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<div class="timeline-marker"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-date">今天 14:30</div>
|
||
<div class="timeline-title">完成口說練習</div>
|
||
<div class="timeline-description">
|
||
成功完成5個口說練習，準確率達到90%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-marker"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-date">今天 10:15</div>
|
||
<div class="timeline-title">解鎖新成就</div>
|
||
<div class="timeline-description">
|
||
「勤奮學習者」- 連續學習7天
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-marker"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-date">昨天 19:45</div>
|
||
<div class="timeline-title">完成每日目標</div>
|
||
<div class="timeline-description">
|
||
學習30分鐘，完成20個新詞彙
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<pre><code><div class="timeline">
|
||
<div class="timeline-item">
|
||
<div class="timeline-marker"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-date">今天 14:30</div>
|
||
<div class="timeline-title">完成口說練習</div>
|
||
<div class="timeline-description">
|
||
成功完成5個口說練習，準確率達到90%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Data Grid -->
|
||
<section class="component-section">
|
||
<h2>數據網格 (Data Grid)</h2>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<div class="data-grid">
|
||
<div class="data-grid-item">
|
||
<div class="data-grid-icon">📖</div>
|
||
<div class="data-grid-label">詞彙</div>
|
||
<div class="data-grid-value">248個已學習</div>
|
||
</div>
|
||
<div class="data-grid-item">
|
||
<div class="data-grid-icon">🗣️</div>
|
||
<div class="data-grid-label">口說</div>
|
||
<div class="data-grid-value">45次練習</div>
|
||
</div>
|
||
<div class="data-grid-item">
|
||
<div class="data-grid-icon">💬</div>
|
||
<div class="data-grid-label">對話</div>
|
||
<div class="data-grid-value">12個場景</div>
|
||
</div>
|
||
<div class="data-grid-item">
|
||
<div class="data-grid-icon">🏆</div>
|
||
<div class="data-grid-label">成就</div>
|
||
<div class="data-grid-value">8個解鎖</div>
|
||
</div>
|
||
<div class="data-grid-item">
|
||
<div class="data-grid-icon">⭐</div>
|
||
<div class="data-grid-label">評分</div>
|
||
<div class="data-grid-value">4.5/5.0</div>
|
||
</div>
|
||
<div class="data-grid-item">
|
||
<div class="data-grid-icon">📊</div>
|
||
<div class="data-grid-label">進度</div>
|
||
<div class="data-grid-value">65% 完成</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<pre><code><div class="data-grid">
|
||
<div class="data-grid-item">
|
||
<div class="data-grid-icon">📖</div>
|
||
<div class="data-grid-label">詞彙</div>
|
||
<div class="data-grid-value">248個已學習</div>
|
||
</div>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Chart Placeholder -->
|
||
<section class="component-section">
|
||
<h2>圖表容器 (Chart Container)</h2>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<div class="chart-container">
|
||
<div class="chart-header">
|
||
<h3 class="chart-title">學習進度趨勢</h3>
|
||
<select class="select">
|
||
<option>最近7天</option>
|
||
<option>最近30天</option>
|
||
<option>全部</option>
|
||
</select>
|
||
</div>
|
||
<div class="chart-placeholder">
|
||
📊 圖表區域 (需整合圖表庫)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<pre><code><div class="chart-container">
|
||
<div class="chart-header">
|
||
<h3 class="chart-title">學習進度趨勢</h3>
|
||
<select class="select">
|
||
<option>最近7天</option>
|
||
<option>最近30天</option>
|
||
</select>
|
||
</div>
|
||
<div class="chart-placeholder">
|
||
📊 圖表區域 (需整合圖表庫)
|
||
</div>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Empty State -->
|
||
<section class="component-section">
|
||
<h2>空狀態 (Empty State)</h2>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<div class="empty-state">
|
||
<div class="empty-state-icon">📭</div>
|
||
<h3 class="empty-state-title">還沒有學習記錄</h3>
|
||
<p class="empty-state-description">
|
||
開始您的第一堂課，建立學習記錄
|
||
</p>
|
||
<button class="btn btn-primary">開始學習</button>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<pre><code><div class="empty-state">
|
||
<div class="empty-state-icon">📭</div>
|
||
<h3 class="empty-state-title">還沒有學習記錄</h3>
|
||
<p class="empty-state-description">
|
||
開始您的第一堂課，建立學習記錄
|
||
</p>
|
||
<button class="btn btn-primary">開始學習</button>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="footer">
|
||
<p>© 2024 Drama Ling. Component Library v1.0</p>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |