# 健身房介紹

健身房形象網站，以 PDRenderKit 1.5.2 PD 資料綁定組合 view/*.html，搭配 IntersectionObserver 捲動進場。

## 概要

| 項目 | 內容 |
|---|---|
| 製作日期 | 2023-06-19 |
| 最後更新 | 2024-08-03 |
| 分類 | 商業網站範例 |
| HTML 檔案 | `index.html`, `view/header.html`, `view/child3.html`, `view/child4.html`, `view/child5.html`, `view/child6.html`, `view/child7.html`, `view/child8.html`, `view/child9.html` |
| 原始碼 | [target/20230619](https://github.com/pardnio/demo-web/tree/main/target/20230619) |

## 即時預覽

<iframe src="/target/20230619/" title="健身房介紹" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

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

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 導覽列 | sticky 導覽列，{{ navTitle }} 標題、以 :for 渲染 navTarget 標籤與選單按鈕；項目與按鈕皆無點擊行為。 |
| 主視覺（view/header.html） | 健身照片全幅背景與漸層面板，標題、內文、GitHub/LinkedIn 按鈕與 Freepik 圖片來源。 |
| 特色（view/child3.html） | 標題、以 :for 渲染 3 個圖示文章（啞鈴、單車）與背景圖區塊（image/image 1.png）。 |
| 介紹與圖片（view/child4.html） | 文字與 GitHub/LinkedIn 連結，旁為 :for 渲染的 4 張照片。 |
| 重點清單（view/child5.html） | 3 段勾選圖示文字搭配一張照片。 |
| 課程卡片（view/child6.html） | 色帶上的 3 張卡片，含圖片、標題、內文與 LEARN MORE。 |
| 重點介紹（view/child7.html） | 大圖與位移陰影、標題、提示、段落與 CONTACT US 按鈕。 |
| 照片牆（view/child8.html） | 標題、段落與 :for 渲染的 6 張照片格。 |
| 聯絡（view/child9.html） | 以 :model 綁定的表單（名稱、信箱、訊息）與 @click=send 送出、照片，以及 :html 渲染的 3 個資訊（電話、地址、營業時間）。 |
| 頁尾 | 版權與 :for 渲染的社群圖示（GitHub、LinkedIn）。 |

## 互動行為

- js/index.js（module）：new PD({id: "app", data, next}) 渲染頁面；每個 view/*.html 內含自己的 inline script 為該區塊 id 建立 PD 實例。
- 捲動進場：next() 中延遲 300ms + 300ms 後以 IntersectionObserver 監看所有 *.delay，進入視窗即移除 delay class（elm.class_("delay")），由 CSS transition 呈現。
- view/child9.html：event.send 以 alert 顯示 :model 綁定的名稱、信箱與訊息。
- 原始碼中未綁定的屬性：child8 href="item.freepik"、child9 class="item.fa" 與 href="freepik" 為字面字串，非綁定。

## 相依資源

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

## 樣式

| 項目 | 內容 |
|---|---|
| SCSS 入口 | `sass/index.scss` |
| 輸出 CSS | `css/index.css` |
| Partials | `_section-3.scss`, `_section-4.scss`, `_section-5.scss`, `_section-6.scss`, `_section-7.scss`, `_section-8.scss`, `_section-9.scss`, `animation/_section-3.scss`, `animation/_bg-move.scss` |

index.scss：:root safe-area env() 變數、--width-max 1024px、--bgcolor、reset、sticky 導覽、header 漸層面板與階梯式 transition、頁尾；_section-3.._section-9 對應 child3..child9，定義 .delay 起始狀態（位移／透明）。animation/_section-3 全部註解，animation/_bg-move 未被 import。多個 partial 使用 --col-brand-5 但從未定義。

```bash
cd target/20230619
npx sass sass/index.scss css/index.css --no-source-map || exit 1
```

## 使用技巧

- PDRenderKit PD 模板：section/header 上的 :path 片段載入、:for、:class / :src / :href 綁定、{{ }} 插值、:model 雙向輸入、:html、@click 事件。
- 以 IntersectionObserver 移除 .delay class 搭配 CSS transition 做進場動畫。
- env(safe-area-inset-*) CSS 變數；position: sticky 導覽；位移 box-shadow；斷點 480/640/800/1024px。

## 外部資源

- https://www.freepik.com/... (image credit links)
- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230619.jpg (og/twitter image)

## 相關頁面

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