805 lines
34 KiB
HTML
805 lines
34 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 UI/UX 設計系統展示</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="./dramaling-ui.css">
|
|
<style>
|
|
.showcase {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: var(--space-8) var(--space-6);
|
|
}
|
|
|
|
.showcase-header {
|
|
text-align: center;
|
|
margin-bottom: var(--space-16);
|
|
padding: var(--space-12);
|
|
background: linear-gradient(135deg, var(--primary-teal), var(--secondary-purple));
|
|
border-radius: var(--radius-2xl);
|
|
color: white;
|
|
}
|
|
|
|
.showcase-title {
|
|
font-size: var(--text-4xl);
|
|
font-weight: 800;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.showcase-subtitle {
|
|
font-size: var(--text-xl);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: var(--space-16);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: var(--text-2xl);
|
|
font-weight: 700;
|
|
margin-bottom: var(--space-8);
|
|
color: var(--text-primary);
|
|
border-bottom: 2px solid var(--primary-teal);
|
|
padding-bottom: var(--space-2);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.demo-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: var(--space-6);
|
|
}
|
|
|
|
.demo-item {
|
|
background: var(--card-background);
|
|
border-radius: var(--radius-xl);
|
|
padding: var(--space-6);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.demo-title {
|
|
font-size: var(--text-lg);
|
|
font-weight: 600;
|
|
margin-bottom: var(--space-4);
|
|
color: var(--primary-teal);
|
|
}
|
|
|
|
.demo-description {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-6);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.color-palette {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.color-item {
|
|
text-align: center;
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.color-preview {
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.color-info {
|
|
padding: var(--space-3);
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.color-name {
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.color-hex {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
.typography-demo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.typography-item {
|
|
padding: var(--space-4);
|
|
background: var(--background-secondary);
|
|
border-radius: var(--radius-lg);
|
|
border-left: 4px solid var(--primary-teal);
|
|
}
|
|
|
|
.typography-label {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-2);
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.component-demo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.interactive-demo {
|
|
padding: var(--space-6);
|
|
background: var(--background-secondary);
|
|
border-radius: var(--radius-xl);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.demo-controls {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-6);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-8);
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--card-background);
|
|
padding: var(--space-6);
|
|
border-radius: var(--radius-xl);
|
|
text-align: center;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
transition: all var(--duration-normal);
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: var(--text-4xl);
|
|
font-weight: 800;
|
|
color: var(--primary-teal);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: var(--text-base);
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.toast-demo-area {
|
|
position: relative;
|
|
height: 200px;
|
|
background: var(--background-secondary);
|
|
border-radius: var(--radius-xl);
|
|
border: 2px dashed var(--divider);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="showcase">
|
|
<!-- Header -->
|
|
<header class="showcase-header">
|
|
<h1 class="showcase-title">Drama Ling UI/UX 設計系統</h1>
|
|
<p class="showcase-subtitle">基於官方設計指南的完整UI組件庫展示</p>
|
|
</header>
|
|
|
|
<!-- Statistics Overview -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-number">150+</div>
|
|
<div class="stat-label">UI 組件</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">50+</div>
|
|
<div class="stat-label">CSS 變數</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">100%</div>
|
|
<div class="stat-label">響應式設計</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">A++</div>
|
|
<div class="stat-label">無障礙評級</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Color System -->
|
|
<section class="section">
|
|
<h2 class="section-title">
|
|
<span>🎨</span>
|
|
<span>色彩系統</span>
|
|
</h2>
|
|
<div class="demo-grid">
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">主要色彩</h3>
|
|
<p class="demo-description">品牌主色和輔助色，用於主要互動元素</p>
|
|
<div class="color-palette">
|
|
<div class="color-item">
|
|
<div class="color-preview color-preview-teal">Teal</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Primary Teal</div>
|
|
<div class="color-hex">#00E5CC</div>
|
|
</div>
|
|
</div>
|
|
<div class="color-item">
|
|
<div class="color-preview color-preview-purple">Purple</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Secondary Purple</div>
|
|
<div class="color-hex">#8E44AD</div>
|
|
</div>
|
|
</div>
|
|
<div class="color-item">
|
|
<div class="color-preview color-preview-violet">Violet</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Accent Violet</div>
|
|
<div class="color-hex">#9B59B6</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">功能性色彩</h3>
|
|
<p class="demo-description">用於狀態提示和系統回饋的功能色彩</p>
|
|
<div class="color-palette">
|
|
<div class="color-item">
|
|
<div class="color-preview color-preview-success">Success</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Success Green</div>
|
|
<div class="color-hex">#27AE60</div>
|
|
</div>
|
|
</div>
|
|
<div class="color-item">
|
|
<div class="color-preview color-preview-warning">Warning</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Warning Yellow</div>
|
|
<div class="color-hex">#F39C12</div>
|
|
</div>
|
|
</div>
|
|
<div class="color-item">
|
|
<div class="color-preview color-preview-error">Error</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Error Red</div>
|
|
<div class="color-hex">#E74C3C</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">遊戲化色彩</h3>
|
|
<p class="demo-description">用於等級、成就和遊戲化元素的特殊色彩</p>
|
|
<div class="color-palette">
|
|
<div class="color-item">
|
|
<div class="color-preview color-preview-gold">Gold</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Gold</div>
|
|
<div class="color-hex">#FFD700</div>
|
|
</div>
|
|
</div>
|
|
<div class="color-item">
|
|
<div class="color-preview color-preview-star">Star</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Star Active</div>
|
|
<div class="color-hex">#F1C40F</div>
|
|
</div>
|
|
</div>
|
|
<div class="color-item">
|
|
<div class="color-preview color-preview-glow">Glow</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Achievement Glow</div>
|
|
<div class="color-hex">#F39C12</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Typography -->
|
|
<section class="section">
|
|
<h2 class="section-title">
|
|
<span>📝</span>
|
|
<span>字體排版</span>
|
|
</h2>
|
|
<div class="demo-grid">
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">標題階層</h3>
|
|
<p class="demo-description">從大型標題到小標籤的完整字體階層系統</p>
|
|
<div class="typography-demo">
|
|
<div class="typography-item">
|
|
<div class="typography-label">text-4xl (42px)</div>
|
|
<div class="text-4xl font-extrabold">主要標題</div>
|
|
</div>
|
|
<div class="typography-item">
|
|
<div class="typography-label">text-2xl (28px)</div>
|
|
<div class="text-2xl font-bold">頁面標題</div>
|
|
</div>
|
|
<div class="typography-item">
|
|
<div class="typography-label">text-xl (22px)</div>
|
|
<div class="text-xl font-semibold">卡片標題</div>
|
|
</div>
|
|
<div class="typography-item">
|
|
<div class="typography-label">text-base (16px)</div>
|
|
<div class="text-base">正文內容</div>
|
|
</div>
|
|
<div class="typography-item">
|
|
<div class="typography-label">text-sm (13px)</div>
|
|
<div class="text-sm text-secondary">輔助資訊</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">字重變化</h3>
|
|
<p class="demo-description">不同字重用於建立視覺層次和重要性</p>
|
|
<div class="typography-demo">
|
|
<div class="typography-item">
|
|
<div class="typography-label">font-normal (400)</div>
|
|
<div class="font-normal">一般文字內容</div>
|
|
</div>
|
|
<div class="typography-item">
|
|
<div class="typography-label">font-medium (500)</div>
|
|
<div class="font-medium">中等重要內容</div>
|
|
</div>
|
|
<div class="typography-item">
|
|
<div class="typography-label">font-semibold (600)</div>
|
|
<div class="font-semibold">重要標籤</div>
|
|
</div>
|
|
<div class="typography-item">
|
|
<div class="typography-label">font-bold (700)</div>
|
|
<div class="font-bold">標題和強調</div>
|
|
</div>
|
|
<div class="typography-item">
|
|
<div class="typography-label">font-extrabold (800)</div>
|
|
<div class="font-extrabold">數字和主標題</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Button Components -->
|
|
<section class="section">
|
|
<h2 class="section-title">
|
|
<span>🔘</span>
|
|
<span>按鈕組件</span>
|
|
</h2>
|
|
<div class="demo-grid">
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">按鈕變體</h3>
|
|
<p class="demo-description">不同用途和重要性的按鈕樣式</p>
|
|
<div class="component-demo">
|
|
<button class="btn-primary">主要按鈕</button>
|
|
<button class="btn-secondary">次要按鈕</button>
|
|
<button class="btn-danger">危險操作</button>
|
|
<button class="btn-reply-help">回覆輔助</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">按鈕尺寸</h3>
|
|
<p class="demo-description">適應不同界面需求的按鈕尺寸變體</p>
|
|
<div class="component-demo">
|
|
<button class="btn-primary btn-lg">大型按鈕</button>
|
|
<button class="btn-primary">標準按鈕</button>
|
|
<button class="btn-primary btn-sm">小型按鈕</button>
|
|
<button class="btn-primary btn-xs">迷你按鈕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">圖標按鈕</h3>
|
|
<p class="demo-description">簡潔的圖標按鈕，用於工具欄和快捷操作</p>
|
|
<div class="component-demo">
|
|
<button class="btn-primary btn-icon">🎤</button>
|
|
<button class="btn-secondary btn-icon">⚙️</button>
|
|
<button class="btn-danger btn-icon">🗑️</button>
|
|
<button class="btn-primary btn-icon btn-icon-sm">❤️</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">按鈕狀態</h3>
|
|
<p class="demo-description">按鈕的不同互動狀態展示</p>
|
|
<div class="component-demo">
|
|
<button class="btn-primary">正常狀態</button>
|
|
<button class="btn-primary demo-hover-effect">懸停狀態</button>
|
|
<button class="btn-primary" disabled>禁用狀態</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Card Components -->
|
|
<section class="section">
|
|
<h2 class="section-title">
|
|
<span>🃏</span>
|
|
<span>卡片組件</span>
|
|
</h2>
|
|
<div class="demo-grid">
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">基礎卡片</h3>
|
|
<p class="demo-description">標準的內容容器，具備圓角和陰影</p>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">卡片標題</h4>
|
|
<p class="card-subtitle">卡片副標題</p>
|
|
</div>
|
|
<p>這是一個標準卡片的內容區域。卡片提供了清晰的內容分組和視覺層次。</p>
|
|
<div class="card-actions">
|
|
<button class="btn-secondary btn-sm">取消</button>
|
|
<button class="btn-primary btn-sm">確認</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">遊戲化卡片</h3>
|
|
<p class="demo-description">具備遊戲化元素的特殊卡片樣式</p>
|
|
<div class="card-game">
|
|
<div class="card-header">
|
|
<h4 class="card-title">學習進度</h4>
|
|
<p class="card-subtitle">今日任務完成情況</p>
|
|
</div>
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<div class="avatar-md avatar-user">👤</div>
|
|
<div class="flex-1">
|
|
<div class="progress mb-2">
|
|
<div class="progress-bar progress-xp w-75"></div>
|
|
</div>
|
|
<div class="text-sm">75% 完成</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button class="btn-primary btn-sm">繼續學習</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">成就卡片</h3>
|
|
<p class="demo-description">突出顯示用戶成就和里程碑</p>
|
|
<div class="card-achievement">
|
|
<div class="card-header">
|
|
<h4 class="card-title">🏆 新成就解鎖！</h4>
|
|
<p class="card-subtitle">連續學習 7 天</p>
|
|
</div>
|
|
<p>恭喜！您已經連續學習 7 天，獲得「堅持不懈」成就徽章。</p>
|
|
<div class="star-rating mt-4">
|
|
<span class="star active">★</span>
|
|
<span class="star active">★</span>
|
|
<span class="star active">★</span>
|
|
<span class="star active">★</span>
|
|
<span class="star active">★</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">進度卡片</h3>
|
|
<p class="demo-description">展示學習進度和統計數據</p>
|
|
<div class="card-progress">
|
|
<div class="card-header">
|
|
<h4 class="card-title">本週學習統計</h4>
|
|
<p class="card-subtitle">2024年第12週</p>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-4">
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold">142</div>
|
|
<div class="text-sm">學習天數</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold">86%</div>
|
|
<div class="text-sm">完成率</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold">2.4k</div>
|
|
<div class="text-sm">經驗值</div>
|
|
</div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar w-86"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Form Components -->
|
|
<section class="section">
|
|
<h2 class="section-title">
|
|
<span>📋</span>
|
|
<span>表單組件</span>
|
|
</h2>
|
|
<div class="demo-grid">
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">輸入框</h3>
|
|
<p class="demo-description">不同狀態的文字輸入框</p>
|
|
<div class="component-demo">
|
|
<div class="input-group">
|
|
<label class="input-label">用戶名稱</label>
|
|
<input type="text" class="input-field" placeholder="請輸入用戶名稱">
|
|
<div class="input-help">用戶名稱必須是唯一的</div>
|
|
</div>
|
|
<div class="input-group">
|
|
<label class="input-label">電子郵件</label>
|
|
<input type="email" class="input-field input-success" value="user@example.com">
|
|
<div class="input-help text-success">✓ 電子郵件格式正確</div>
|
|
</div>
|
|
<div class="input-group">
|
|
<label class="input-label">密碼</label>
|
|
<input type="password" class="input-field input-error">
|
|
<div class="input-help text-error">✗ 密碼長度不足 8 個字符</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">徽章組件</h3>
|
|
<p class="demo-description">用於標記狀態和分類的小型標籤</p>
|
|
<div class="component-demo">
|
|
<div class="flex gap-2 mb-4">
|
|
<span class="badge badge-primary">主要</span>
|
|
<span class="badge badge-secondary">次要</span>
|
|
<span class="badge badge-success">成功</span>
|
|
<span class="badge badge-warning">警告</span>
|
|
<span class="badge badge-danger">錯誤</span>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<span class="badge-level">Lv.15</span>
|
|
<span class="badge badge-primary">新手</span>
|
|
<span class="badge badge-success">已驗證</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">進度條</h3>
|
|
<p class="demo-description">視覺化顯示進度和完成度</p>
|
|
<div class="component-demo">
|
|
<div class="mb-4">
|
|
<div class="flex justify-between mb-2">
|
|
<span>學習進度</span>
|
|
<span>75%</span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar w-75"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<div class="flex justify-between mb-2">
|
|
<span>經驗值</span>
|
|
<span>2,400 / 3,000</span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-xp w-80"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between mb-2">
|
|
<span>等級進度</span>
|
|
<span>Lv.15 → Lv.16</span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-level w-45"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">頭像組件</h3>
|
|
<p class="demo-description">不同尺寸和類型的用戶頭像</p>
|
|
<div class="component-demo">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<div class="avatar-xl avatar-user">👤</div>
|
|
<div class="avatar-lg avatar-ai">🤖</div>
|
|
<div class="avatar-md avatar-achievement">🏆</div>
|
|
<div class="avatar-sm avatar-user">😊</div>
|
|
</div>
|
|
<div class="text-sm text-secondary">
|
|
從左到右：特大、大、中、小尺寸
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Interactive Components -->
|
|
<section class="section">
|
|
<h2 class="section-title">
|
|
<span>⚡</span>
|
|
<span>互動組件</span>
|
|
</h2>
|
|
<div class="demo-grid">
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">星級評分</h3>
|
|
<p class="demo-description">互動式星級評分組件</p>
|
|
<div class="interactive-demo">
|
|
<div class="star-rating mb-4" id="starRating">
|
|
<span class="star" data-rating="1">★</span>
|
|
<span class="star" data-rating="2">★</span>
|
|
<span class="star" data-rating="3">★</span>
|
|
<span class="star" data-rating="4">★</span>
|
|
<span class="star" data-rating="5">★</span>
|
|
</div>
|
|
<div class="text-sm text-secondary">點擊星星來評分</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">通知提示</h3>
|
|
<p class="demo-description">不同類型的通知和提示訊息</p>
|
|
<div class="interactive-demo">
|
|
<div class="toast-demo-area" id="toastArea">
|
|
點擊下方按鈕查看通知效果
|
|
</div>
|
|
<div class="demo-controls">
|
|
<button class="btn-primary btn-sm" onclick="showToast('success')">成功通知</button>
|
|
<button class="btn-danger btn-sm" onclick="showToast('error')">錯誤通知</button>
|
|
<button class="btn-secondary btn-sm" onclick="showToast('warning')">警告通知</button>
|
|
<button class="btn-primary btn-sm" onclick="showToast('info')">資訊通知</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">模態框</h3>
|
|
<p class="demo-description">彈出式對話框和確認視窗</p>
|
|
<div class="interactive-demo">
|
|
<button class="btn-primary" onclick="showModal()">打開模態框</button>
|
|
<div class="text-sm text-secondary mt-4">
|
|
點擊按鈕查看模態框效果
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-item">
|
|
<h3 class="demo-title">特殊效果</h3>
|
|
<p class="demo-description">玻璃形態效果和發光效果</p>
|
|
<div class="interactive-demo">
|
|
<div class="glass p-4 rounded-xl mb-4">
|
|
<h4 class="font-semibold mb-2">玻璃形態卡片</h4>
|
|
<p class="text-sm text-secondary">半透明的毛玻璃效果</p>
|
|
</div>
|
|
<div class="card glow-teal">
|
|
<h4 class="font-semibold mb-2">青色發光效果</h4>
|
|
<p class="text-sm text-secondary">適用於重要提示和強調內容</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Toast Template -->
|
|
<div id="toastTemplate" class="toast hidden">
|
|
<div class="toast-content">通知內容</div>
|
|
</div>
|
|
|
|
<!-- Modal Template -->
|
|
<div id="modalOverlay" class="modal-overlay">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">確認操作</h3>
|
|
<p class="modal-subtitle">您確定要執行此操作嗎？</p>
|
|
</div>
|
|
<p class="mb-6 text-center">此操作無法撤銷，請確認您的選擇。</p>
|
|
<div class="flex gap-4">
|
|
<button class="btn-secondary flex-1" onclick="hideModal()">取消</button>
|
|
<button class="btn-primary flex-1" onclick="hideModal()">確認</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Star Rating Interaction
|
|
document.getElementById('starRating').addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('star')) {
|
|
const rating = parseInt(e.target.dataset.rating);
|
|
const stars = this.querySelectorAll('.star');
|
|
stars.forEach((star, index) => {
|
|
if (index < rating) {
|
|
star.classList.add('active');
|
|
} else {
|
|
star.classList.remove('active');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Toast Notifications
|
|
function showToast(type) {
|
|
const messages = {
|
|
success: '操作成功完成！',
|
|
error: '發生錯誤，請重試',
|
|
warning: '請注意相關設定',
|
|
info: '這是一個資訊提示'
|
|
};
|
|
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast toast-${type} show`;
|
|
toast.textContent = messages[type];
|
|
|
|
document.body.appendChild(toast);
|
|
|
|
setTimeout(() => {
|
|
toast.classList.remove('show');
|
|
setTimeout(() => {
|
|
document.body.removeChild(toast);
|
|
}, 300);
|
|
}, 3000);
|
|
}
|
|
|
|
// Modal Management
|
|
function showModal() {
|
|
document.getElementById('modalOverlay').classList.add('show');
|
|
}
|
|
|
|
function hideModal() {
|
|
document.getElementById('modalOverlay').classList.remove('show');
|
|
}
|
|
|
|
// Close modal when clicking overlay
|
|
document.getElementById('modalOverlay').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
hideModal();
|
|
}
|
|
});
|
|
|
|
// Add some interactive animations
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Animate progress bars
|
|
const progressBars = document.querySelectorAll('.progress-bar');
|
|
progressBars.forEach(bar => {
|
|
const width = bar.style.width;
|
|
bar.style.width = '0%';
|
|
setTimeout(() => {
|
|
bar.style.width = width;
|
|
}, 500);
|
|
});
|
|
|
|
// Add hover effects to cards
|
|
const cards = document.querySelectorAll('.card, .demo-item');
|
|
cards.forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-2px)';
|
|
});
|
|
card.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0)';
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |