# Restaurant Introduction (2022-05-25)

Four-page restaurant / franchise brand site (About, News, Products, Stores) with scroll-aware nav, canvas-drawn curved hero and in-view store animations.

## Overview

| Item | Value |
|---|---|
| Created | 2022-05-25 |
| Category | Business Examples |
| HTML files | `index.html`, `news.html`, `products.html`, `store.html` |
| Source | [target/20220525](https://github.com/pardnio/demo-web/tree/main/target/20220525) |

## Live Preview

<iframe src="/target/20220525/" title="Restaurant Introduction (2022-05-25)" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[Open the example in a new tab](/target/20220525/)

## Page Sections

| Section | Description |
|---|---|
| Nav (all pages) | #nav with list toggle button, 4 page tabs (品牌介紹 / 最新消息 / 餐點介紹 / 門市據點 linking to the 4 HTML files), and right-side 加盟專區 / 聯絡我們 / Facebook icons. |
| Page hero (all pages) | #body with a cover image and a &lt;canvas&gt; that paints a white curved shape around the centered #page-title (ABOUT US / LATEST NEWS / PRODUCTS / STORES). |
| index.html content | Placeholder block '自訂內容 (此範例沒此頁設計)'. |
| news.html list | Category nav (全部消息 / 媒體報導 / 新品上市 / 新店快訊) and dated news items with tag, text and image. |
| products.html grid | Category nav (類別1-5) and product figures with description and price (35 / 份). |
| store.html list | Store search (city / district selects, keyword, 搜尋門市) and numbered store cards (phone, hours, address, 訂餐 / 菜單 / 地圖 buttons) alternating image left / right. |
| Footer (all pages) | Store search form, logo image with franchise hotline tel: link, copyright row. |

## Interactions

- js/PDWebsitemplate.js window.onscroll: sets #nav class 'toppest' when pageYOffset &gt;= 64px, switches to 'float' when scrolled back.
- setLeftBg() on load / resize: sizes the hero canvas and draws a quadraticCurveTo bump around #page-title's width.
- #nav-show-button toggles the left tab list 'show' / 'hide' (500ms) and swaps the icon between fa-list and fa-arrow-left.
- IntersectionObserver sets class 'inview' on [animation='1'] store cards to trigger stores-index-show-left / -right keyframes.

## Dependencies

| Name | Version | Source |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| PDRenderKit (loaded, not used by page code) | 1.0.0 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.0/dist/PDRenderKit.js |
| js/PDWebsitemplate.js (local) | - | js/PDWebsitemplate.js |

## Styling

| Item | Value |
|---|---|
| SCSS entry | `sass/PDWebsiteImitationCss.scss` |
| Output CSS | `css/PDWebsiteImitationCss.css` |
| Partials | `_nav.scss`, `_body.scss`, `_component.scss (imported inside _body)`, `_bottom.scss` |

_nav styles #nav states (toppest / float / show / hide) with keyframes; _body the hero and canvas; _component the news / product / stores lists and in-view animations; _bottom the footer.

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

## Techniques

- Canvas 2D path (quadraticCurveTo) recomputed on resize for a curved header edge.
- IntersectionObserver scroll-reveal with alternating left / right keyframes.
- Desktop-first max-width breakpoints 359 / 413 / 479 / 539 / 639 / 799 / 1023px.
- Multi-page static site sharing one stylesheet and script with relative ./*.html links.

## External Assets

- `https://fakeimg.pl/1024/282828/eae0d0/?text=sample`
- `https://pardn.io/image/head.png`
- `https://pardn.io/web-template/image/20220525.jpg`

## Related

- [Project Structure](/project-structure)
- [Styling Workflow](/styling-workflow)
- [Frameworks](/frameworks)