45 lines
3.2 KiB
Markdown
45 lines
3.2 KiB
Markdown
# Design — SERUBI Cashback Calculator
|
||
|
||
World: a bank-desk **printing calculator**. A navy machine body holds the inputs and one recessed display that carries the answer. A paper tape prints every figure and every step. The admin uses the same machine body as its side panel, with plain white work surfaces for editing.
|
||
|
||
## Tokens (assets/css/base.css)
|
||
|
||
| Role | Light | Dark |
|
||
|---|---|---|
|
||
| Desk (page ground) `--desk` | #e7ebf2 | #070c17 |
|
||
| Machine body `--machine` / hi / lo | #0b2e66 / #154290 / #072153 | #0c2a5c / #12387a / #071a40 |
|
||
| Key `--key` / edge | #143c7c / #061a40 | #11346d / #061a40 |
|
||
| Gold (Bank Papua accent) `--gold` / ink | #f2c14e / #241800 | same |
|
||
| Display `--display` / ink / dim | #04132f / #ffe6a0 / #c9b98c | #020a1c / same |
|
||
| Paper `--paper` / ink / muted / rule | #fffef8 / #1a2130 / #545d70 / #c3c7cf | #ebe7db / #191f2b / #4c5464 / #b4b1a6 |
|
||
| Good / bad | #0a7140 / #b42318 | same on paper |
|
||
|
||
Radius: 8 / 12 / 22px (machine). Motion: 150–250ms, `cubic-bezier(.16,1,.3,1)`; one signature motion (the tape "feeds" 10px on recalculation); all motion off under `prefers-reduced-motion`.
|
||
|
||
## Type
|
||
|
||
- **Archivo** (variable, self-hosted, `font-stretch` 62–125%): UI, labels, and display numerals (800 weight at ~78% width, tabular).
|
||
- **JetBrains Mono** (self-hosted): the paper tape only, because it is printed data.
|
||
- Labels on the machine: 0.8rem uppercase, 0.04–0.06em tracking.
|
||
|
||
## Components
|
||
|
||
- **Key**: navy fill with an inset 3px bottom edge for depth. Pressed: moves down 2px and the edge shrinks. The gold key is the primary action (print).
|
||
- **Segmented keys** (tenor, customer type): radio inputs. The checked key turns gold.
|
||
- **Display**: a recessed panel with the headline value right-aligned, a dashed rule, and three sub-values. When there is no cashback it dims and shows a note explaining why.
|
||
- **Tape**: dotted leader lines (`label ····· value`), strong rows ruled above and below, collapsible sections, and a torn zig-zag bottom edge done with a CSS mask.
|
||
- **Comparison row**: product name, total, a two-part bar (navy = bunga neto, gold = cashback neto), four metadata cells, and the difference vs deposito. The highest total gets a "Tertinggi" tag; deposito has a dashed border.
|
||
- **Admin**: sticky navy side panel (on phones it becomes a sticky top strip with scrolling tabs), white panels, editable tier tables (shown as cards on phones), a save bar for unsaved changes, and a live "Pratinjau dampak" panel.
|
||
|
||
## Layout
|
||
|
||
- Calculator: one column below 900px. From 900px, the machine (360–460px, sticky) sits beside the tape. On phones, a compact display bar appears at the bottom once the main display scrolls out of view.
|
||
- Admin: side panel + main from 960px. The preview gets a third column from 1320px.
|
||
- Verified at 320, 390, 820, 1100, 1280, and 1440px with no horizontal page scroll.
|
||
|
||
## Rules
|
||
|
||
- Brand = the official Bank Papua logo (`bank_logo()` in includes/helpers.php, files in assets/img/, sourced, never redrawn) + the gold "SERUBI" tag. Color logo on light surfaces and paper/print; white logo on navy and in dark mode (`'auto'` switches by theme).
|
||
- Numbers use tabular figures; Rupiah is formatted `Rp1.234.567`, percentages `2,70%`.
|
||
- Print shows only the tape.
|