# Moneybook

Mobile bookkeeping app mock built with PDRenderKit data binding: month calendar / pie view, side tab and add-record keypad calculator.

## Overview

| Item | Value |
|---|---|
| Created | 2023-04-18 |
| Category | App & Platform Examples |
| HTML files | `index.html` |
| Source | [target/20230418](https://github.com/pardnio/demo-web/tree/main/target/20230418) |

## Live Preview

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

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

## Page Sections

| Section | Description |
|---|---|
| Top bar (#nav) | Menu button, {{ year }}年{{ month }}月 month-selector toggle, mode switch icon (pie / calendar via :if / :else) |
| Month selector (#month-selector) | Year row with prev/next buttons and 12 month buttons rendered by :for (current month .sel) |
| Add button | Floating + button opening the add-item panel |
| Calendar view (.index-calendar) | Shown when mode == calendar: table with 週日-週六 header and week rows of day buttons built in JS (:for + :html) |
| Pie view (.index-pie) | Default view: 月支出 / 月收入 values and CSS pie ring with percent="65" label |
| Record list (.index-list) | Static day group 2023/04/18 with three expense rows; date and amounts printed from attributes |
| Side tab (#app-tab) | Slide-in panel with avatar, name, mail link, GitHub/LinkedIn/Facebook/Instagram links and copyright |
| Add record panel (#add-item) | Expense/income toggle, category grid from type_list (:for), description input, date row and 19-key calculator pad |

## Interactions

- js/index.js: new PD({ id: "app", data, event }) binds {{ }} text, :for lists, :if/:else, :class, :html and @click handlers
- Mode read from ?mode= query (location.href.$query, default pie); changeMode reloads with ?mode=pie / ?mode=calendar
- Calendar data computed with PDRenderKit date helpers ($date start/end/pre, $d, $D) including previous/next month filler days (.unmonth)
- addShow / tabShow / selectorShow toggle .show on #add-item / #app-tab / #month-selector; selectorShow rotates the caret icon
- changeIncome swaps app.data.type_list between expense and income categories (reactive re-render); changeType moves .sel
- numVal: keypad builds an expression in #num-input data-value (max 16 chars, ÷/x mapped to / *), AC clears, ← deletes, OK evaluates via eval() or alerts 成功新增紀錄 and closes the panel
- Year prev/next and date prev/next buttons have no handlers

## 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 |
| PDRenderKit | 1.2.0 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.2.0/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 (type=module) | - | ./js/index.js |

## Styling

| Item | Value |
|---|---|
| SCSS entry | `sass/index.scss` |
| Output CSS | `css/index.css` |

Single-file SCSS (no partials). :root vars --main-color, --content-max-width (480px), --num-pad-color, --num-pad-enter; fixed full-screen panels with backdrop-filter blur; @for 1..100 loop generates [percent=N] rotations for the two-half pie ring.

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

## Techniques

- PDRenderKit template syntax: {{ }}, :for="e in list", :if / :else, :class, :html, @click
- Element builder "td"._(["button.sel"._(i)]).$html to produce calendar cell HTML
- CSS-only pie ring: two half spans rotated by 3.6deg × percent from an SCSS @for loop
- Values rendered by CSS content: "$" attr(data-value), attr(date), attr(percent) "％"
- Mobile-first fixed layout capped at 480px width; media queries at min-width 480px; backdrop-filter glass panels
- Script loaded as ES module (type="module")

## External Assets

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

## Related

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