對於一個要在手機上運作的 PWA 來說，最直覺、最符合原生 App 體驗的設計，莫過於底部導覽列 (Bottom Navigation Bar)。今天就要把這扇通往數據視覺化的「門」給建起來，並且完美融入我們 Vibe Fitness 的深色科技感主題！

AI Prompt:
@index.html @css/components.css @js/main.js (或負責初始化的檔案)
我們的 PWA 目前缺少在不同畫面間切換的機制。請幫我實作一個適合手機版使用的「底部導覽列 (Bottom Navigation Bar)」。
實作要求：
UI 設計： 導覽列必須固定 (fixed) 在螢幕最下方。背景請使用深色，並帶有一點半透明的毛玻璃效果 (backdrop-filter)，以符合整體的深色科技風格。
按鈕選項： 包含兩個主要按鈕圖示與文字：「🏋️ 訓練 (Workout)」與「📊 數據 (Habits)」。
活躍狀態 (Active State)： 點擊後，當前所在頁面的按鈕必須亮起我們主視覺的「青綠色螢光 (Neon Glow)」，明確提示使用者目前位置。
切換邏輯： 請實作 Vanilla JS 畫面切換邏輯。點擊導覽列時，能正確切換顯示/隱藏原本的「打卡數字鍵盤區塊」與「Chart.js 圖表區塊」。

AI 接收到指令後，通常會幫我們完成三個核心修改：
*HTML 結構佈局：*在 的最底端加入一個 標籤，裡面包覆著對應不同頁面的按鈕結構。
*CSS 視覺：*利用 position: fixed; bottom: 0; 將導覽列穩穩釘在畫面底部。最精華的是 backdrop-filter: blur(10px);，這行語法能瞬間營造出高質感的毛玻璃透視效果，讓導覽列不會死板板地遮擋住底部的深色網格背景。
*JavaScript 狀態切換：*透過監聽按鈕的click事件，動態切換各個視圖 (View) 容器的 display: none; 與 display: block;。同時為被點擊的按鈕加上 .active 的 CSS 類別，觸發青綠色的發光特效。

成果展示: