# App 介紹 230306

紅色主色企業形象頁：筆電外框展示、特色網格、圖文分欄、深色推廣區與 Email 訂閱列。

## 概要

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

## 即時預覽

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

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

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 頂部導覽列 | 固定頂部導覽 #nav-002：PARDNCHIU logo、ITEM 按鈕、GitHub 連結、漢堡按鈕 |
| 主視覺（header=1） | 白底主視覺，標題、文字與主色 GitHub 按鈕 |
| 筆電展示（num=9） | span.laptop 筆電外框內 16:10 螢幕放置示意截圖，下弧分隔 |
| 特色圖示（num=1） | 上弧分隔與四欄圖示卡 |
| 特色卡片（num=7） | 淺藍區塊，含 h2 標題與四張卡片 |
| 圖文分欄（num=2） | 陰影圖片搭配標題與四個含 MORE 連結的列表項 |
| 深色推廣（num=4） | #212831 背景、兩欄項目與連到 joball.tw 的 MORE 按鈕 |
| 圖片橫幅 | 30rem 背景圖區塊 |
| 圖示亮點卡（num=6） | 兩張陰影卡片，漸層圖示，上移 -4rem |
| 訂閱列（num=8） | 標題、Email 輸入框與 SEND 按鈕（無處理邏輯） |
| 頁尾（footer num=1） | 站名、社群圖示（Instagram/Facebook/GitHub）、ABOUT / PRODUCTS / TECHNICAL / LEGAL 四欄連結、版權列 |

## 互動行為

- js/index.js：body.onscroll 在 scrollTop &gt; 48px 時對第一個 &lt;nav&gt; 加上 .scroll（原生 DOM）
- js/index.js：將自訂屬性 top / bottom / bg-col / col / bg-img 轉為 inline padding、背景色、文字色、背景圖（-- 開頭值轉為 var(--x)）
- js/index.js：把 span[mask=arc|arc-up|arc-down|slash-left|slash-right|wave] 替換成依 viewport 寬度產生的 inline SVG 分隔曲線（&gt;1024px 時 64/128px）
- js/index.js 為原生 DOM（querySelectorAll / getAttribute）；雖載入 PDRenderKit，但頁面腳本未使用

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| 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) | G-L5VYEZPVXX | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Page stylesheet (compiled SCSS) | - | ./css/index.css |
| Page script | - | ./js/index.js |

## 樣式

| 項目 | 內容 |
|---|---|
| SCSS 入口 | `sass/index.scss` |
| 輸出 CSS | `css/index.css` |
| Partials | `nav/_001.scss`, `nav/_002.scss`, `nav/_body.scss`, `header/_001.scss`, `header/_002.scss`, `header/_003.scss`, `section/_000.scss ... section/_022.scss`, `section/_015-top.scss`, `section/_015-center.scss`, `section/_015-bottom.scss`, `footer/_001.scss`, `comp/_div-info.scss`, `comp/_innerText.scss`, `comp/_li-r2.scss`, `comp/_li-r3.scss`, `comp/_li-r4.scss`, `comp/_ul-button.scss` |

共用區塊庫：index.scss 在 body 內 import 全部 nav/header/section/footer partial，以屬性選擇器（nav[num]、section[header=N]、section[num=N]、footer[num]）對應；comp/* 為在 section 內 import 的片段（r2/r3/r4 響應式欄寬、div-info 標題區）。component/_info.scss、comp/_w-h-rate.scss、section/_rm-1st-top.scss 存在但未被 import。

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

## 使用技巧

- inline &lt;style&gt; :root 以 CSS 變數設定主題（--col-nav、--col-system、--col-txt、--col-border、--max-width）
- 屬性驅動版型：section[num=N] / section[header=N] / nav[num] 對應預製 SCSS 區塊；ul.r2/.r3/.r4 選 2/3/4 欄卡片
- 固定頂部導覽列與漢堡按鈕；media query 斷點 max-width 413/479/639/799/1023/1139px、min-width 480/640/768/1024px
- 以 span[mask] 由 JS 產生 SVG 區塊分隔（弧形 / 斜切 / 波浪）
- SEO head：Open Graph、Twitter card、canonical、JSON-LD WebPage schema
- 以 CSS 製作筆電外框（section[num=9] &gt; span.laptop）與 16:10 比例容器

## 外部資源

- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230306.jpg (og:image / twitter:image)
- https://pardn.io/web-template/target/20230306 (canonical / og:url)
- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images)
- https://joball.tw (link)

## 相關頁面

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