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 |
Live Preview
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).
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.