## 歡迎使用 Drama Ling 設計元件庫

這是一個基於 HTML/CSS 的設計元件系統，取代傳統的 Figma 設計工具。 所有元件都可以直接複製使用，並已針對響應式設計和無障礙性進行優化。

ℹ️
快速開始
點擊左側導航選擇元件，每個元件都包含預覽效果和可複製的 HTML/CSS 代碼。

## 按鈕 Buttons

提供多種樣式和尺寸的按鈕元件，支援主要、次要、成功、危險等狀態。

### 基礎按鈕

    <button class="btn btn-primary">主要按鈕</button>
    <button class="btn btn-secondary">次要按鈕</button>
    <button class="btn btn-success">成功按鈕</button>
    <button class="btn btn-danger">危險按鈕</button>
    <button class="btn btn-text">文字按鈕</button>

### 按鈕尺寸

    <button class="btn btn-primary btn-sm">小按鈕</button>
    <button class="btn btn-primary">標準按鈕</button>
    <button class="btn btn-primary btn-lg">大按鈕</button>

### 按鈕狀態

    <button class="btn btn-primary">正常狀態</button>
    <button class="btn btn-primary" disabled>禁用狀態</button>
    <button class="btn btn-icon btn-primary">🎮</button>

### 按鈕群組

    <div class="btn-group">
      <button class="btn btn-primary">左</button>
      <button class="btn btn-primary">中</button>
      <button class="btn btn-primary">右</button>
    </div>

## 輸入框 Input Fields

提供文字輸入、密碼、搜尋等多種輸入框樣式，支援驗證狀態顯示。

### 基礎輸入框

使用者名稱
電子郵件 我們不會分享你的電子郵件

    <div class="input-group">
      <label class="input-label">使用者名稱</label>
      <input type="text" class="input-field" placeholder="請輸入使用者名稱">
    </div>

    <div class="input-group">
      <label class="input-label required">電子郵件</label>
      <input type="email" class="input-field" placeholder="example@email.com">
      <span class="input-hint">我們不會分享你的電子郵件</span>
    </div>

### 輸入狀態

成功狀態
錯誤狀態 請輸入有效的內容

    <input type="text" class="input-field success" value="正確的輸入">
    <input type="text" class="input-field error" value="錯誤的輸入">
    <span class="input-error">請輸入有效的內容</span>

## 卡片 Cards

用於展示內容的容器元件，支援標題、內容、操作按鈕等。

### 基礎卡片

### 卡片標題

副標題或描述
這是卡片的主要內容區域，可以放置任何內容。

    <div class="card">
      <div class="card-header">
        <h3 class="card-title">卡片標題</h3>
        <div class="card-subtitle">副標題或描述</div>
      </div>
      <div class="card-body">
        這是卡片的主要內容區域，可以放置任何內容。
      </div>
      <div class="card-footer">
        <button class="btn btn-primary btn-sm">操作</button>
        <button class="btn btn-text btn-sm">取消</button>
      </div>
    </div>

### 學習卡片

### 詞彙學習

Level 3
今日學習了 15 個新詞彙，完成率 75%

    <div class="card card-learning">
      <div class="card-header">
        <h3 class="card-title">詞彙學習</h3>
        <div class="badge badge-level">Level 3</div>
      </div>
      <div class="card-body">
        今日學習了 15 個新詞彙，完成率 75%
      </div>
      <div class="card-progress">
        <div class="progress-bar">
          <div class="progress-fill" style="width: 75%"></div>
        </div>
      </div>
    </div>

## 警告 Alerts

用於顯示重要訊息、警告或反饋的元件。

✓
成功！
你的操作已成功完成。
✕
錯誤
發生了錯誤，請稍後再試。
⚠
警告
請注意這個重要訊息。
ℹ
提示
這是一條有用的資訊。

    <div class="alert alert-success">
      <span class="alert-icon">✓</span>
      <div class="alert-content">
        <div class="alert-title">成功！</div>
        <div class="alert-message">你的操作已成功完成。</div>
      </div>
      <button class="alert-close">✕</button>
    </div>

## 徽章 Badges

用於標記狀態、分類或計數的小型元件。

主要 次要 成功 危險 警告 資訊 Level 5

    <span class="badge badge-primary">主要</span>
    <span class="badge badge-secondary">次要</span>
    <span class="badge badge-success">成功</span>
    <span class="badge badge-danger">危險</span>
    <span class="badge badge-warning">警告</span>
    <span class="badge badge-info">資訊</span>
    <span class="badge badge-level">Level 5</span>

## 進度條 Progress

展示任務進度或載入狀態的視覺化元件。

基礎進度條 (60%)
大型進度條 (40%)
條紋進度條 (80%)

    <div class="progress">
      <div class="progress-bar" style="width: 60%"></div>
    </div>

    <div class="progress progress-lg">
      <div class="progress-bar" style="width: 40%"></div>
    </div>

    <div class="progress progress-striped">
      <div class="progress-bar" style="width: 80%"></div>
    </div>

## 載入 Loading

顯示載入中狀態的動畫元件。

    <div class="spinner spinner-sm"></div>
    <div class="spinner"></div>
    <div class="spinner spinner-lg"></div>

### 骨架屏

    <div class="skeleton skeleton-title"></div>
    <div class="skeleton skeleton-text"></div>
    <div class="skeleton skeleton-text"></div>
    <div class="skeleton skeleton-text" style="width: 80%;"></div>

## 生命值 Life Bar

遊戲化的生命值顯示元件。

❤️ ❤️ ❤️ ❤️ ❤️

    <div class="life-bar">
      <span class="life-heart">❤️</span>
      <span class="life-heart">❤️</span>
      <span class="life-heart">❤️</span>
      <span class="life-heart empty">❤️</span>
      <span class="life-heart empty">❤️</span>
    </div>

## 星級評分 Star Rating

用於評分或展示等級的星星元件。

⭐ ⭐ ⭐ ⭐ ⭐

    <div class="star-rating">
      <span class="star active">⭐</span>
      <span class="star active">⭐</span>
      <span class="star active">⭐</span>
      <span class="star active">⭐</span>
      <span class="star">⭐</span>
    </div>