# Zeczec

Multi-page crowdfunding platform mockup modeled on zeczec (嘖嘖), using QuickUI 0.6.2 :for loops: home, explore, project, FAQ, comments, proposal and auth pages.

## Overview

| Item | Value |
|---|---|
| Created | 2024-06-25 |
| Category | App & Platform Examples |
| HTML files | `index.html`, `search.html`, `start.html`, `project.html`, `project-1.html`, `project-2.html`, `login.html`, `signup.html`, `forget.html` |
| Source | [target/20240625](https://github.com/pardnio/demo-web/tree/main/target/20240625) |

## Live Preview

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

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

## Page Sections

| Section | Description |
|---|---|
| Nav (.body-nav) | Inline SVG logo and logotype, links 探索 (search.html) / 提案 (start.html), 登入 / 註冊 / Facebook 登入. |
| Home hero (header.home) | Featured project card with data-text badge (群眾募資 ｜ 剩下24天), backers and amount. |
| Home picks (.home-1) | 4 project cards via :for="(e, i) in list_4". |
| Categories (.home-2) | Category links (飲食, 時尚, 地方創生, 音樂...). |
| Project grids (.home-3) | 群眾募資 and 預購式專案 grids (list_6) with progress bar (data-percent), amount, backers, time left and pager. |
| Footer (.footer) | Logo, 幫助 / 關於 link groups and social icons. |
| search.html | Filter bar with search input and a 12-card project grid (list_12). |
| project.html | YouTube iframe, title, funding data with pie progress circle, buttons, tab header, Markdown description (section.markdown) and reward plans with discount hints. |
| project-1.html / project-2.html | Same project header; FAQ list (project-3) and comment thread with replies (project-4). |
| start.html | Proposal landing: stats (100 億 +, 5,600 +...), proposal categories and FAQ. |
| login.html / signup.html / forget.html | Split layout with image and form (email, password, remember me, Facebook button). |

## Interactions

- index.html / search.html: new QUI({ id: 'app', data: { list_4, list_6 | list_12 } }) renders the :for card loops.
- project.html: fetches @pardnchiu/nanomd@1.8.5 README.md and, in when.rendered, constructs new MDViewer(...) into section.markdown; MDViewer is not loaded by any script on the page and is not part of QuickUI 0.6.2.
- Other pages are static HTML (no inline script besides GA).

## 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 |
| 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 |

## Styling

| Item | Value |
|---|---|
| SCSS entry | `sass/index.scss` |
| Output CSS | `css/index.css` |
| Partials | `_init.scss`, `function/_hsbTohsl.scss`, `animation/_pie.scss` |

_init defines $_2..$_96 rem spacing variables and the reset; function/_hsbTohsl provides hsb()/hsba() color functions; animation/_pie holds pie keyframes imported inside the project data circle. index.scss styles every page block (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
```

## Techniques

- QuickUI :for="(e, i) in list_n" template loops over placeholder arrays.
- CSS attr() for badges (content: attr(data-text), attr(data-hint)); progress bars via [data-percent="0..100"] selectors; SCSS @for-generated pie progress using [percent][done] and CSS vars (--pie-*).
- SCSS spacing variable scale and custom @function hsb(); @media (hover: hover) hover-only effects; single breakpoint $_1140.
- Inline SVG logo and logotype; nav-logo and background-color keyframes.

## External Assets

- 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)

## Known Issues

- 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.

## Related

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