# 嘖嘖募資平台

以嘖嘖為基底的群眾募資平台多頁範例，使用 QuickUI 0.6.2 :for 迴圈：首頁、探索、專案、常見問題、留言、提案與會員頁。

## 概要

| 項目 | 內容 |
|---|---|
| 製作日期 | 2024-06-25 |
| 分類 | App 與平台範例 |
| HTML 檔案 | `index.html`, `search.html`, `start.html`, `project.html`, `project-1.html`, `project-2.html`, `login.html`, `signup.html`, `forget.html` |
| 原始碼 | [target/20240625](https://github.com/pardnio/demo-web/tree/main/target/20240625) |

## 即時預覽

<iframe src="/target/20240625/" title="嘖嘖募資平台" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

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

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 導覽列 | 內嵌 SVG Logo 與字標、探索（search.html）／提案（start.html）連結、登入／註冊／Facebook 登入。 |
| 首頁主視覺 | 精選專案卡，data-text 標籤（群眾募資 ｜ 剩下24天）、支持人數與金額。 |
| 首頁推薦 | 以 :for="(e, i) in list_4" 產生 4 張專案卡。 |
| 分類 | 分類連結（飲食、時尚、地方創生、音樂...）。 |
| 專案格 | 群眾募資與預購式專案格（list_6），含進度條（data-percent）、金額、人數、剩餘時間與分頁。 |
| 頁尾 | Logo、幫助／關於連結群組與社群圖示。 |
| 探索頁 | 含搜尋框的篩選列與 12 張專案卡格（list_12）。 |
| 專案頁 | YouTube 影片、標題、含圓餅進度的募資數據、按鈕、頁籤、Markdown 介紹（section.markdown）與附折扣提示的回饋方案。 |
| 常見問題／留言 | 相同專案頁首；常見問題列表（project-3）與含回覆的留言串（project-4）。 |
| 提案頁 | 提案介紹頁：數據（100 億 +、5,600 +...）、提案類別與常見問答。 |
| 登入／註冊／忘記密碼 | 左圖右表單版型（電子信箱、密碼、記住我、Facebook 按鈕）。 |

## 互動行為

- index.html／search.html：new QUI({ id: 'app', data: { list_4, list_6 | list_12 } }) 渲染 :for 卡片迴圈。
- project.html：抓取 @pardnchiu/nanomd@1.8.5 的 README.md，於 when.rendered 建立 new MDViewer(...) 放入 section.markdown；但頁面未載入任何提供 MDViewer 的 script，QuickUI 0.6.2 也不含它。
- 其他頁面為靜態 HTML（除 GA 外無 script）。

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| QuickUI (@pardnchiu/quickui) | 0.6.2 | https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@0.6.2/dist/QuickUI.js |
| Google Analytics (gtag.js) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| @pardnchiu/nanomd README.md (fetched content) | 1.8.5 | https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@1.8.5/README.md |
| Noto Sans TC (font-family only) | - | declared in SCSS; no font stylesheet is linked, so it relies on a locally installed font or the sans-serif fallback |
| Roboto Mono (font-family only) | - | declared in SCSS; not loaded |

## 樣式

| 項目 | 內容 |
|---|---|
| SCSS 入口 | `sass/index.scss` |
| 輸出 CSS | `css/index.css` |
| Partials | `_init.scss`, `function/_hsbTohsl.scss`, `animation/_pie.scss` |

_init 定義 $_2 至 $_96 的 rem 間距變數與 reset；function/_hsbTohsl 提供 hsb()／hsba() 色彩函式；animation/_pie 為圓餅 keyframes，於專案數據圓圈內引入。index.scss 涵蓋所有頁面區塊（nav、home-1..3、project-1..4、start-1..3、login、footer、.md-viewer）。

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

## 使用技巧

- QuickUI :for="(e, i) in list_n" 模板迴圈搭配佔位陣列。
- 以 CSS attr() 顯示標籤（content: attr(data-text)、attr(data-hint)）；[data-percent="0..100"] 選擇器控制進度條；SCSS @for 產生以 [percent][done] 與 CSS 變數（--pie-*）的圓餅進度。
- SCSS 間距變數尺度與自訂 @function hsb()；@media (hover: hover) 僅在可 hover 裝置套用；單一斷點 $_1140。
- 內嵌 SVG Logo 與字標；nav-logo 與 background-color keyframes。

## 外部資源

- https://fakeimg.pl/1024/282828/eae0d0/?text=sample and https://fakeimg.pl/1024/ (placeholder images)
- https://www.youtube.com/embed/nueh3qZIYFE (project.html video)
- https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@1.8.5/README.md (project.html runtime fetch)
- https://pardn.io/image/head.png (favicon); canonical/og:url and JSON-LD url point to https://pardn.io/web-template/target/20230625/... (note: 20230625, not 20240625)

## 已知問題

- All local links are relative (./*.html, ./css/index.css), so the folder copies as-is. Independent of copying, project.html's Markdown block fails: it calls new MDViewer(...) but no loaded script defines MDViewer.

## 相關頁面

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