「智慧健身 PWA」已經有了穩固的骨架與資料庫藍圖,現在是時候讓它長出血肉了!
每次在健身房,做完重量訓練後,雙手都已經力竭了,這時候如果要打開手機用手機的數字鍵盤,還咬小心翼翼地輸入的數字,為了讓使用者有良好的打卡體驗,所以需要一個專屬鍵盤,還有一個方便再組間休息倒數的計時器。
精準定位檔案與下達 UI 指令
AI Prompt
幫我實作健身紀錄專用的「純數字鍵盤」與「組間計時器」UI 元件。
請參考@css/components.css @js/components/set-row.js @index.html
要求:
純數字鍵盤
在 @components.css 中使用 CSS Grid 實作一個包含 0-9、小數點與退格鍵的鍵盤。
樣式必須符合深色健身房風格,按鈕高度至少需 60px 以適應手指點擊,並加入點擊時的視覺回饋 (Active state)。
組間計時器 (Rest Timer):
在鍵盤上方加入一個圓形或醒目的倒數計時器 UI,預設顯示 01:30。
畫面整合:
請將這些元件的 HTML 結構插入到 @index.html 的 main 區塊中。
在 @set-row.js 中加上簡單的 console.log 邏輯,當我點擊鍵盤數字時,要在開發者工具印出對應的數值。
顯示畫面: