餐廳介紹 220525

四頁式餐飲加盟品牌網站（品牌介紹、最新消息、餐點介紹、門市據點），含捲動感知導覽列、canvas 曲線主視覺與門市進場動畫。

概要

項目	內容
製作日期	2022-05-25
分類	商業網站範例
HTML 檔案	`index.html`, `news.html`, `products.html`, `store.html`
原始碼	target/20220525

區塊	說明
導覽列（各頁共用）	#nav 含清單切換鈕、4 個頁籤（品牌介紹／最新消息／餐點介紹／門市據點，連到 4 個 HTML）與右側加盟專區／聯絡我們／Facebook 圖示。
頁面主視覺（各頁共用）	#body 含封面圖與 <canvas>，在置中 #page-title（ABOUT US / LATEST NEWS / PRODUCTS / STORES）周圍繪製白色曲線。
index.html 內容	佔位區塊「自訂內容 (此範例沒此頁設計)」。
news.html 列表	分類列（全部消息／媒體報導／新品上市／新店快訊）與含日期、標籤、內文、圖片的消息項目。
products.html 餐點格	分類列（類別1-5）與含描述與價格（35 / 份）的餐點 figure。
store.html 門市列表	門市搜尋（縣市／區域下拉、關鍵字、搜尋門市）與編號門市卡（電話、營業時間、地址、訂餐／菜單／地圖按鈕），圖片左右交錯。
頁尾（各頁共用）	門市搜尋表單、Logo 圖與加盟專線 tel: 連結、版權列。

js/PDWebsitemplate.js window.onscroll：pageYOffset >= 64px 時 #nav 設為 toppest，往回捲動時改為 float。
setLeftBg() 於 load / resize 執行：調整主視覺 canvas 尺寸，依 #page-title 寬度以 quadraticCurveTo 畫出弧形。
#nav-show-button 切換左側頁籤列 show / hide（500ms），圖示在 fa-list 與 fa-arrow-left 間切換。
IntersectionObserver 對 [animation='1'] 門市卡加上 inview，觸發 stores-index-show-left / -right keyframes。

名稱	版本	來源
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

項目	內容
SCSS 入口	`sass/PDWebsiteImitationCss.scss`
輸出 CSS	`css/PDWebsiteImitationCss.css`
Partials	`_nav.scss`, `_body.scss`, `_component.scss (imported inside _body)`, `_bottom.scss`

_nav 處理 #nav 狀態（toppest / float / show / hide）與 keyframes；_body 為主視覺與 canvas；_component 為消息／餐點／門市列表與進場動畫；_bottom 為頁尾。

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