餐廳介紹 230604
素食早午餐餐廳（耕園7293 / G-Burger）單頁形象網站，含主視覺、熱門餐點、店長推薦菜單與聯絡區。
概要
即時預覽
在新分頁開啟範例
頁面區塊
互動行為
- js/index.js：監聽 body scroll，依預先計算的區塊位置設定 #view-tab 的 sel=0..3（scroll-spy）高亮目前分頁。
- js/index.js scrollTo(top)：以 setInterval 自製緩動平滑捲動（每 30ms 移動剩餘距離 1/5），點擊分頁觸發。
- #button-tab 切換 #view-tab 的 .show class 開啟全螢幕行動選單，點選項目後關閉。
- 按鈕以 inline onclick window.open() 開啟 Uber Eats 與 Instagram。
相依資源
樣式
index.scss 含 reset、:root 變數（--max-width 1024px、--col-sys #FF6B18）與聯絡區；partials 巢狀 @import 於 body 選擇器內：_nav（固定列、依 sel 高亮、行動版 .show 覆蓋）、_top（主視覺、旋轉背景 keyframes、25 秒淡入淡出輪播）、_hot（::before 編號毛玻璃卡）、_menu（菜單卡片與 hover）。
cd target/20230604
npx sass sass/index.scss css/index.css --no-source-map || exit 1
使用技巧
- PDRenderKit 1.0 字串原型 DOM 輔助："id".$、._attr()、._click()、.class()、.class()、.$$class()、.$child()。
- 屬性驅動狀態：ul[sel="n"] > li:nth-child(n+1) 樣式化目前分頁。
- 純 CSS 輪播：堆疊圖片搭配錯開的 animation-delay（0/5/10/15/20s）與 25 秒透明度 keyframes。
- backdrop-filter 毛玻璃卡片；flex-wrap 搭配 calc() 寬度做 1/2/3 欄。
- 斷點 480/640/768/800px；以 @media (hover: hover) and (pointer: fine) 限定 hover 效果。
- html 固定、body 作為捲動容器（overflow: hidden scroll），隱藏捲軸。
外部資源
相關頁面
