# 餐廳介紹 230604

素食早午餐餐廳（耕園7293 / G-Burger）單頁形象網站，含主視覺、熱門餐點、店長推薦菜單與聯絡區。

## 概要

| 項目 | 內容 |
|---|---|
| 製作日期 | 2023-06-04 |
| 分類 | 商業網站範例 |
| HTML 檔案 | `index.html` |
| 原始碼 | [target/20230604](https://github.com/pardnio/demo-web/tree/main/target/20230604) |

## 即時預覽

<iframe src="/target/20230604/" title="餐廳介紹 230604" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[在新分頁開啟範例](/target/20230604/)

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 固定導覽列 | 品牌名與副標，四個分頁項目，行動版漢堡選單按鈕。 |
| 主視覺（.top） | 標語、介紹文字、Uber Eats 點餐按鈕、漢堡主圖，以及 4 格各輪播 5 張餐點照片。 |
| 熱門介紹（.hot） | 橫幅圖片加 6 張編號毛玻璃卡片介紹餐點，LEARN MORE 連到 Instagram 貼文。 |
| 店長推薦（.menu） | 8 張菜單卡，含照片、品名、價格與 Uber Eats 點餐按鈕。 |
| 聯絡區（.contact） | 圖片、Email 訂閱輸入框（無送出邏輯）、Google 地圖地址連結、版權與電話 / Facebook / Instagram 圖示。 |

## 互動行為

- 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。

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| PDRenderKit | 1.0.0 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.0/dist/PDRenderKit.js |
| Google Analytics (gtag.js) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Noto Sans TC (font-family only, not loaded by the page) | - | none |

## 樣式

| 項目 | 內容 |
|---|---|
| SCSS 入口 | `sass/index.scss` |
| 輸出 CSS | `css/index.css` |
| Partials | `_nav.scss`, `_top.scss`, `_hot.scss`, `_menu.scss` |

index.scss 含 reset、:root 變數（--max-width 1024px、--col-sys #FF6B18）與聯絡區；partials 巢狀 @import 於 body 選擇器內：_nav（固定列、依 sel 高亮、行動版 .show 覆蓋）、_top（主視覺、旋轉背景 keyframes、25 秒淡入淡出輪播）、_hot（::before 編號毛玻璃卡）、_menu（菜單卡片與 hover）。

```bash
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"] &gt; 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），隱藏捲軸。

## 外部資源

- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230604.jpg (og/twitter image)
- `https://ubereats.app.link/V22g35mu3zb`
- Instagram post links (https://www.instagram.com/p/...)
- Google Maps place link

## 相關頁面

- [專案結構](/zh/project-structure)
- [樣式工作流程](/zh/styling-workflow)
- [框架使用](/zh/frameworks)