root = Card([header, balances, transactions, spending, bills, vacationGoal, creditScore, moveMoney, statementCard, alertsCard, disputeDialog])
header = CardHeader("Personal Banking", "Your accounts at a glance")
balances = Card([balancesHeader, balancesTable], "sunk")
balancesHeader = Heading("Balances", "h2")
balancesTable = Table([balanceAccountCol, balanceAmountCol])
balanceAccountCol = Col("Account", ["Checking", "Savings", "Credit"])
balanceAmountCol = Col("Balance", ["$12,450.32", "$38,210.87", "$2,410.55"])
transactions = Card([transactionsHeader, transactionsTable], "sunk")
transactionsHeader = Heading("Recent transactions", "h2")
transactionsTable = Table([txnDateCol, txnMerchantCol, txnAmountCol])
txnDateCol = Col("Date", ["May 12", "May 11", "May 10", "May 9", "May 8"])
txnMerchantCol = Col("Merchant", ["Whole Foods", "Shell", "Netflix", "Starbucks", "Target"])
txnAmountCol = Col("Amount", ["-$84.20", "-$45.00", "-$15.99", "-$6.45", "-$62.18"])
spending = Card([spendingHeader, spendingChart], "sunk")
spendingHeader = Heading("Spending by category", "h2")
spendingChart = PieChart(spendingLabels, spendingValues, "donut")
spendingLabels = ["Groceries", "Transport", "Entertainment", "Dining", "Shopping"]
spendingValues = [420, 180, 120, 240, 310]
bills = Card([billsHeader, billsList], "sunk")
billsHeader = Heading("Bills due soon", "h2")
billsList = ListBlock([electricBill, internetBill, rentBill])
electricBill = ListItem("Electricity", "Due May 15 · $86.40")
internetBill = ListItem("Internet", "Due May 18 · $64.99")
rentBill = ListItem("Rent", "Due Jun 1 · $1,850.00")
vacationGoal = Card([vacationHeader, vacationProgress], "sunk")
vacationHeader = Heading("Vacation savings goal", "h2")
vacationProgress = Progress(68, "68% · $6,800 of $10,000 saved")
creditScore = Card([creditHeader, creditValue, creditBadge, freezeCard], "sunk")
creditHeader = Heading("Credit score", "h2")
creditValue = TextContent("742", "large-heavy")
creditBadge = Badge("Excellent", "secondary")
freezeCard = AlertDialogBlock("Freeze credit line", "Freeze your credit line?", "No new purchases or cash advances will be approved while frozen.", "Yes, freeze", "Cancel")
moveMoney = Card([moveHeader, moveForm], "sunk")
moveHeader = Heading("Move money", "h2")
moveForm = Form("transfer", transferButtons, [fromField, toField, amountField])
transferButtons = Buttons([transferBtn])
transferBtn = Button("Transfer")
fromField = FormControl("From", fromSelect)
fromSelect = Select("from", [fromChecking, fromSavings])
fromChecking = SelectItem("checking", "Checking · $12,450.32")
fromSavings = SelectItem("savings", "Savings · $38,210.87")
toField = FormControl("To", toSelect)
toSelect = Select("to", [toSavings, toChecking, toCredit])
toSavings = SelectItem("savings", "Savings")
toChecking = SelectItem("checking", "Checking")
toCredit = SelectItem("credit", "Credit card")
amountField = FormControl("Amount", amountInput)
amountInput = Input("amount", "0.00", "number")
statementCard = Card([statementHeader, statementForm], "sunk")
statementHeader = Heading("Statement period", "h2")
statementForm = Form("statement-period", statementButtons, [periodField])
statementButtons = Buttons([applyPeriodBtn])
applyPeriodBtn = Button("Apply")
periodField = FormControl("Period", periodSelect)
periodSelect = Select("period", [periodApr, periodMar, periodFeb], "Select a statement period")
periodApr = SelectItem("apr", "April 1 – April 30")
periodMar = SelectItem("mar", "March 1 – March 31")
periodFeb = SelectItem("feb", "February 1 – February 28")
alertsCard = Card([alertsHeader, alertsForm], "sunk")
alertsHeader = Heading("Alert triggers", "h2")
alertsForm = Form("alert-settings", alertsButtons, [alertGroup])
alertsButtons = Buttons([saveAlertsBtn])
saveAlertsBtn = Button("Save alert settings")
alertGroup = FormControl("Notify me when", alertCheckboxes)
alertCheckboxes = CheckBoxGroup("alerts", [alertLowBalance, alertLargePurchase, alertNewLogin, alertStatementReady])
alertLowBalance = CheckBoxItem("Low balance", "When any account drops below $500", "low_balance", true)
alertLargePurchase = CheckBoxItem("Large purchase", "When a single purchase exceeds $500", "large_purchase", true)
alertNewLogin = CheckBoxItem("New login", "When a new device signs in", "new_login", false)
alertStatementReady = CheckBoxItem("Statement ready", "When a new statement is available", "statement_ready", true)
disputeDialog = DialogBlock("Dispute a transaction", "Dispute a transaction", "Tell us which charge and why.", [disputeForm])
disputeForm = Form("dispute", disputeButtons, [txnSelectField, reasonField, detailsField])
disputeButtons = Buttons([submitDisputeBtn, cancelDisputeBtn])
submitDisputeBtn = Button("Submit dispute", null, "primary")
cancelDisputeBtn = Button("Cancel", null, "tertiary")
txnSelectField = FormControl("Transaction", txnSelect)
txnSelect = Select("transaction", [txnWhole, txnShell, txnNetflix], "Select a charge")
txnWhole = SelectItem("whole-foods", "Whole Foods · $84.20")
txnShell = SelectItem("shell", "Shell · $45.00")
txnNetflix = SelectItem("netflix", "Netflix · $15.99")
reasonField = FormControl("Reason", reasonSelect)
reasonSelect = Select("reason", [reasonUnauthorized, reasonDuplicate, reasonWrongAmount], "Choose a reason")
reasonUnauthorized = SelectItem("unauthorized", "I didn't authorize this")
reasonDuplicate = SelectItem("duplicate", "Duplicate charge")
reasonWrongAmount = SelectItem("wrong-amount", "Wrong amount")
detailsField = FormControl("Details", detailsArea)
detailsArea = TextArea("details", "Add any details...", 3)