/* ─── Babil App Screen mockups (phone interior) ─── */ /* Faithful HTML/CSS recreation of HomeScreen, StatsScreen, DailyLogTab */ const { useState } = React; // ── Babil hex logo (orange gradient) function BabilHex({ size = 28 }) { const gradId = React.useId(); return ( ); } // ── Status bar function StatusBar() { return (
9:41
{/* signal */} {/* battery */}
); } // ── Bottom tabs function BottomTabs({ active }) { const tabs = [ { key: "home", label: "Home", icon: (a) => () }, { key: "stats", label: "Stats", icon: (a) => () }, { key: "log", label: "Work Log", icon: (a) => () }, ]; return (
{tabs.map(t => { const a = t.key === active; return (
{t.icon(a)} {t.label}
); })}
); } // ── Home / Overview screen function HomeScreen() { // donut segments for the pie chart below W/M/Y const pie = [ { v: 38, c: "#6C63FF", n: "Rent", lbl: "$780" }, { v: 24, c: "#FFB547", n: "Shopping", lbl: "$495" }, { v: 18, c: "#00D4AA", n: "Food", lbl: "$369" }, { v: 12, c: "#FF5C5C", n: "Transport", lbl: "$248" }, { v: 8, c: "#A78BFA", n: "Other", lbl: "$165" }, ]; let pAcc = 0; const pR = 42, pCX = 60, pCY = 60, pSW = 14; const pC = 2 * Math.PI * pR; const gap = 1.6; // unit gap between segments (in stroke-units) return (
{/* Centered Babil logo + gradient wordmark */}
Babil
{/* Minimal Main / Trip pill toggle */}
Main Trip
{/* Balance header */}
Net Total Balance
$35,064.50
+ $4,210 Income − $2,045 Expense
{/* Minimal action buttons row */}
{/* W/M/Y bar */}
{["W", "M", "Y"].map((p, i) => (
{p}
))}
May 2026 ▾
{/* Pie chart + legend */}
{pie.map((s, i) => ( ))} {/* Outer shadow */} {/* Track */} {/* Glow copies */} {pie.map((s, i) => { const len = Math.max(0, (s.v / 100) * pC - gap); const off = pie.slice(0, i).reduce((a, x) => a + x.v, 0) / 100 * pC; return ( ); })} {/* Main segments */} {pie.map((s, i) => { const len = Math.max(0, (s.v / 100) * pC - gap); const off = pie.slice(0, i).reduce((a, x) => a + x.v, 0) / 100 * pC; return ( ); })} {/* Top highlight */} {/* Center disc */} SPENT $2,057 May 2026
{pie.map((r, i) => (
{r.n} {r.v}%
))}
{/* Recent activities header */}
Recent Activity
{/* List rows */} {[ { em: "☕", name: "Coffee", meta: "Today · Card", val: "−$5.40", neg: true }, { em: "💼", name: "Salary", meta: "May 15 · Bank", val: "+$3,200", pos: true }, ].map((row, i) => (
{row.em}
{row.name}
{row.meta}
{row.val}
))}
); } // ── Stats screen with donut chart function StatsScreen() { // donut values const segs = [ { v: 38, c: "#6C63FF", em: "🏠", lbl: "Rent", val: "$780" }, { v: 24, c: "#FFB547", em: "🛍️", lbl: "Shopping", val: "$495" }, { v: 18, c: "#00D4AA", em: "🍽️", lbl: "Food", val: "$369" }, { v: 12, c: "#FF5C5C", em: "🚗", lbl: "Transport", val: "$248" }, { v: 8, c: "#A78BFA", em: "✨", lbl: "Other", val: "$165" }, ]; let acc = 0; const R = 60, CX = 90, CY = 90, SW = 16; const C = 2 * Math.PI * R; return (
Stats
Filter
{/* Tab row */}
{["Expenses", "Overview", "Incomes"].map((t, i) => (
{t}
{i === 0 &&
}
))}
{/* Period */}
‹ May 2026 ›
{/* Donut */}
{/* Per-segment arc gradients */} {segs.map((s, i) => ( ))} {/* Center disc gradient */} {/* Track gradient — subtle depth */} {/* Drop shadow for the whole ring */} {/* Glow filter per segment */} {/* Outer ambient shadow ring */} {/* Track */} {/* Segments — glow layer (blurred copy underneath) */} {(() => { let a2 = 0; return segs.map((s, i) => { const len = (s.v / 100) * C - 1.5; const off = (a2 / 100) * C; a2 += s.v; return ( ); }); })()} {/* Segments — main */} {(() => { let a3 = 0; return segs.map((s, i) => { const len = (s.v / 100) * C - 1.5; const off = (a3 / 100) * C; a3 += s.v; return ( ); }); })()} {/* Top highlight rim — light edge on outer arc */} {/* Bottom shadow rim */} {/* Center disc */} {/* Inner shadow ring */} {/* Subtle top-left sheen */} {/* Center text */} $2,057 SPENT
{/* Legend list */}
{segs.map((s, i) => (
{s.em}
{s.lbl}
{s.val}
))}
); } // ── Daily Log screen — Weekly Stats view (matches actual app) function DailyLogScreen() { const jobs = [ { dot: "#6C63FF", n: "Rideshare", h: "22h", earn: 620 }, { dot: "#00D4AA", n: "Server", h: "12.5h", earn: 310 }, { dot: "#FFB547", n: "Cash tips", h: "—", earn: 50 }, ]; const totalEarn = 980; const weekRows = [ { name: "Mon", date: "12 May", hours: "6h", earn: "$168", spent: "—", rate: "$28/h" }, { name: "Tue", date: "13 May", hours: "8h", earn: "$224", spent: "-$42", rate: "$28/h" }, { name: "Wed", date: "14 May", hours: "7.5h", earn: "$210", spent: "—", rate: "$28/h" }, { name: "Thu", date: "15 May", hours: "8h", earn: "$224", spent: "-$68", rate: "$28/h" }, { name: "Fri", date: "16 May", hours: "3h", earn: "$154", spent: "—", rate: "$28/h", today: true }, { name: "Sat", date: "17 May", hours: "—", earn: "—", spent: "—", rate: "—", future: true }, { name: "Sun", date: "18 May", hours: "—", earn: "—", spent: "—", rate: "—", future: true }, ]; const S = { fontFamily: "system-ui, -apple-system, sans-serif" }; return (
{/* Period tabs */}
{["Weekly","Monthly","Yearly"].map((p, i) => (
{p} {i === 0 &&
} {i !== 0 &&
}
))}
{/* Period nav */}
‹ May 12–18, 2026 ›
{/* 4 stat cards: HOURS · PER HOUR · EARNED · SPENT */}
{[ { lbl: "HOURS", val: "34.5h", color: "#fff", active: false }, { lbl: "PER HOUR", val: "$28/h", color: "#FFB547", active: false }, { lbl: "EARNED", val: "$980", color: "#00D4AA", active: true }, { lbl: "SPENT", val: "$110", color: "#FF5C5C", active: false }, ].map((c, i) => (
0 ? "1px solid #1E264044" : "none", background: c.active ? "#00D4AA1A" : "transparent", borderBottom: c.active ? "2px solid #00D4AA" : "2px solid transparent", }}> {c.val} {c.lbl}
))}
{/* Job breakdown */}
{jobs.map((j, i) => { const pct = (j.earn / totalEarn) * 100; return (
{j.n} {j.h} ${j.earn} ▾
); })}
{/* Weekly rows */}
{/* Column headers */}
HRS EARNED SPENT /HR
{weekRows.map((d, i) => (
{d.name}
{d.date}
{d.hours} {d.earn} {d.spent} {d.rate} {!d.future && d.hours !== "—" ? "▾" : !d.future ? "+" : ""}
))}
); } // ── Wallet / Accounts screen function WalletScreen() { const accounts = [ { em: "💳", name: "BabilBank Checking", type: "Debit Card", bal: 2840.50 }, { em: "💳", name: "BabilBank Credit", type: "Credit Card", bal: 680.00, available: true, limit: 1200, debt: 520, util: 0.43 }, { em: "🏦", name: "BabilBank Savings", type: "Savings", bal: 12400.00, hidden: true }, { em: "💵", name: "Cash", type: "Cash", bal: 340.00 }, ]; const S = { fontFamily: "system-ui, -apple-system, sans-serif" }; return (
{/* Header */}
Accounts
Edit
+ Add
{/* Wallet selector + balance */}
Main Wallet
Net Available
$2,660.50
$3,180 assets −$520 debt + 1 hidden
{/* Account rows */}
{accounts.map((acc, i) => (
{acc.em}
{acc.name}
{acc.type}{acc.limit ? ` · Limit $${acc.limit.toLocaleString()}` : ""}
{acc.hidden ? (
•••••
) : (
${acc.bal.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
)} {acc.available &&
available
}
›
{/* Credit utilization bar */} {acc.util && (
CREDIT ${acc.debt} / $1,200 {Math.round(acc.util * 100)}%
)}
))}
); } // ── Phone container function Phone({ screen = "home", style = {} }) { const screens = { home: , stats: , log: , wallet: , trip: , lasvegas: }; return (
{screens[screen]}
); } // ── Trip Wallet screen function TripWalletScreen() { const cats = [ { em: "🍽️", name: "Food", amt: 480, pct: 39, c: "#6C63FF" }, { em: "🚇", name: "Transport", amt: 334, pct: 27, c: "#00D4AA" }, { em: "🎌", name: "Activities", amt: 260, pct: 21, c: "#FFB547" }, { em: "🏨", name: "Hotels", amt: 166, pct: 13, c: "#A78BFA" }, ]; const total = 1240; // donut const R = 46, CX = 56, CY = 56, SW = 13, C = 2 * Math.PI * R; let acc = 0; const S = { fontFamily: "system-ui, -apple-system, sans-serif" }; return (
{/* Header */}
‹
Tokyo Spring 2026
Apr 28 — May 5, 2026
● Active
{/* Summary row */}
{[ { lbl:"SPENT", val:"$1,240", color:"#FF5C5C" }, { lbl:"DAYS", val:"8", color:"#fff" }, { lbl:"AVG/DAY", val:"$155", color:"#FFB547" }, ].map((c,i) => (
0 ? "1px solid #1E264044":"none" }}> {c.val} {c.lbl}
))}
{/* Donut + legend */}
{cats.map((s,i) => ( ))} {cats.map((s,i) => { const len = Math.max(0,(s.pct/100)*C - 1.5); const off = cats.slice(0,i).reduce((a,x)=>a+x.pct,0)/100*C; return ( ); })} $1,240 TOTAL
{cats.map((c,i) => (
{c.em} {c.name} {c.pct}% ${c.amt}
))}
{/* Category progress bars */}
{cats.map((c,i) => (
{c.em} {c.name} ${c.amt}
))}
{/* Recent entries */}
Recent
{[ { em:"🍽️", name:"Ramen dinner", date:"May 4", amt:"−$28" }, { em:"🚇", name:"Shinkansen pass", date:"May 3", amt:"−$84" }, { em:"🎌", name:"TeamLab tickets", date:"May 2", amt:"−$36" }, ].map((r,i) => (
{r.em}
{r.name}
{r.date}
{r.amt}
))}
); } // ── Las Vegas 2026 Trip Wallet Detail screen (mirrors WalletSettingsScreen trip detail) function LasVegasTripScreen() { const S = { fontFamily: "system-ui, -apple-system, sans-serif" }; const cats = [ { dot: "#00B4D8", em: "🍽️", name: "Food & Drinks", pct: 30, amt: "$254.19" }, { dot: "#00D4AA", em: "🏨", name: "Lodging", pct: 26, amt: "$220.30" }, { dot: "#FF7A35", em: "🎭", name: "Entertainment", pct: 20, amt: "$169.46" }, { dot: "#FF5C5C", em: "✈️", name: "Transportation", pct: 12, amt: "$101.68" }, { dot: "#FFB547", em: "🛍️", name: "Shopping", pct: 8, amt: "$67.78" }, { dot: "#A78BFA", em: "🎁", name: "Gifts", pct: 4, amt: "$33.89" }, ]; return (
{/* Tab header: Main Wallets / Trip Wallets */}
‹
{/* Trip identity */}
🎰
Las Vegas 2026
2026-05-08 — 2026-05-12
Edit
{/* Total spent */}
TOTAL SPENT
$847.30
{/* Stats card */}
{[ { val:"5", lbl:"days" }, { val:"24", lbl:"entries" }, { val:"$169", lbl:"avg / day" }, ].map((s,i) => (
0 ? "1px solid #1E2640" : "none", }}> {s.val} {s.lbl}
))}
{/* Categories card */}
CATEGORIES
{cats.map((c,i) => (
0 ? "1px solid #1E264033" : "none" }}>
{c.em} {c.name} {c.pct}% {c.amt}
))}
{/* Bottom buttons */}
); } Object.assign(window, { BabilHex, HomeScreen, StatsScreen, DailyLogScreen, WalletScreen, TripWalletScreen, LasVegasTripScreen, Phone });