local_taxi

達丁接駁司機 App

前端原型展示 - Phase 1

使用 Tailwind CSS CDN + Vanilla JavaScript

info

使用說明

  • • 點擊下方頁面卡片可查看各功能頁面
  • • 登入頁面預設帳號:912-345-678 / demo1234
  • • 所有資料為模擬資料,儲存在 localStorage
  • • 建議使用 Chrome DevTools 的裝置模擬器 (375px-430px 寬度)

check_circle Phase 1 已完成頁面

pending Phase 2 待開發頁面

construction

以下頁面尚未實作

P0-6 批次驗證 P0-7 車上乘客列表 P0-8 下車拍照 P0-9 導航中 P0-10 路線調整 P0-11 延遲通知

code 技術資訊

palette

樣式

  • • Tailwind CSS (CDN)
  • • Custom CSS
  • • Material Icons Rounded
  • • Noto Sans TC 字體
code

邏輯

  • • Vanilla JavaScript
  • • localStorage 儲存
  • • 模擬資料 (mock-data.js)
  • • 無後端依賴
devices

響應式

  • • Mobile First
  • • 375px - 430px 最佳
  • • 支援 iOS Safe Area
  • • 觸控優化

folder 專案結構

driverAppDemo/
├── index.html                 # 本頁面 (導航頁)
├── pages/                     # 各功能頁面
│   ├── p0-1-login.html       # 登入頁面
│   ├── p0-2-home.html        # 首頁 - 任務總覽
│   ├── p0-3-trip-detail.html # 任務詳情 (多站點)
│   └── p0-5-stop-detail.html # 站點詳情
├── js/                        # JavaScript 檔案
│   ├── mock-data.js          # 模擬資料
│   └── app.js                # 主要邏輯
├── styles/                    # 樣式設定
│   └── custom.css            # 自定義樣式
└── README.md                  # 專案說明