3.2 KiB
3.2 KiB
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-stretch62–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, percentages2,70%. - Print shows only the tape.