{"tool":"get_design","slug":"vault-bank","title":"Vault Bank — Mobile Banking","url":"/vault-bank","kind":"Category page","code":"<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\" />\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\" />\n<title>Vault Bank — Mobile Banking</title>\n<style>\n:root{--green:#14532D;--green2:#166534;--cream:#F0FDF4;--accent:#16A34A;--ink:#111827;--muted:#6B7280;--line:#DCFCE7;--card:#FFFFFF;--red:#DC2626}\n*{box-sizing:border-box}\nbody{margin:0;background:#E5E7EB;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;color:var(--ink)}\n.phone{max-width:390px;margin:0 auto;min-height:100dvh;background:var(--cream);display:flex;flex-direction:column;position:relative}\nheader{background:var(--green);color:#fff;padding:28px 20px 18px}\nheader .row{display:flex;justify-content:space-between;align-items:center}\n.avatar{width:42px;height:42px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}\nheader h1{margin:0;font-size:15px;font-weight:600;opacity:.9}\n.balance{font-size:38px;font-weight:800;letter-spacing:-.02em;margin:6px 0 2px}\n.balance-label{font-size:13px;opacity:.85}\nmain{flex:1;padding:18px 16px 96px;overflow-y:auto}\n.screen{display:none}\n.screen.on{display:block}\n.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px}\n.card h2{margin:0 0 10px;font-size:15px}\n.quick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}\n.quick button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px 6px;font:inherit;font-weight:600;font-size:13px;cursor:pointer}\n.acct{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--line)}\n.acct:first-of-type{border-top:0}\n.acct .name{font-weight:600}\n.acct .sub{font-size:12px;color:var(--muted)}\n.acct .amt{font-weight:700}\n.txn{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);align-items:center}\n.txn:first-of-type{border-top:0}\n.dot{width:38px;height:38px;border-radius:50%;background:var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--green);flex:none}\n.txn .t-name{font-weight:600}\n.txn .t-date{font-size:12px;color:var(--muted)}\n.txn .t-amt{margin-left:auto;font-weight:700}\n.txn .t-amt.neg{color:var(--red)}\n.txn .t-amt.pos{color:var(--accent)}\nlabel{display:block;font-size:13px;font-weight:600;margin:12px 0 6px}\ninput,select{width:100%;padding:12px;border:1.5px solid var(--line);border-radius:12px;font:inherit;background:#fff}\n.cta{width:100%;background:var(--accent);color:#fff;border:0;border-radius:999px;padding:14px;font:inherit;font-weight:700;cursor:pointer;margin-top:16px}\n.cta:disabled{background:#9CA3AF;cursor:not-allowed}\n.note{font-size:13px;color:var(--muted);margin-top:10px}\n.ok{background:#DCFCE7;color:var(--green);border-radius:12px;padding:12px;font-weight:600;display:none;margin-top:12px}\n.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:390px;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:8px 0 calc(8px + env(safe-area-inset-bottom))}\n.tabbar button{border:0;background:none;font:inherit;font-size:12px;color:var(--muted);cursor:pointer;padding:6px 0}\n.tabbar button.on{color:var(--green);font-weight:700}\n.tabbar .ic{display:block;font-size:20px;margin-bottom:2px}\n.cardnum{font-family:ui-monospace,monospace;letter-spacing:.08em}\n</style>\n</head>\n<body>\n<div class=\"phone\">\n  <header>\n    <div class=\"row\">\n      <div><h1>Good morning</h1><div style=\"font-weight:700\">Alex Morgan</div></div>\n      <div class=\"avatar\">AM</div>\n    </div>\n    <div class=\"balance-label\">Total balance</div>\n    <div class=\"balance\" id=\"balance\">$2,847.50</div>\n    <div class=\"balance-label\" id=\"balanceNote\">Across 2 accounts</div>\n  </header>\n\n  <main>\n    <!-- HOME -->\n    <section class=\"screen on\" id=\"screen-home\">\n      <div class=\"quick\">\n        <button type=\"button\" data-goto=\"send\">Send</button>\n        <button type=\"button\" data-goto=\"send\">Request</button>\n        <button type=\"button\" data-goto=\"activity\">Activity</button>\n      </div>\n      <div class=\"card\">\n        <h2>Accounts</h2>\n        <div class=\"acct\"><div><div class=\"name\">Everyday Checking</div><div class=\"sub\">•• 4821</div></div><div class=\"amt\" id=\"checkingAmt\">$1,924.30</div></div>\n        <div class=\"acct\"><div><div class=\"name\">Savings</div><div class=\"sub\">•• 7730</div></div><div class=\"amt\" id=\"savingsAmt\">$923.20</div></div>\n      </div>\n      <div class=\"card\">\n        <h2>Recent activity</h2>\n        <div id=\"recentList\"></div>\n      </div>\n    </section>\n\n    <!-- SEND -->\n    <section class=\"screen\" id=\"screen-send\">\n      <div class=\"card\">\n        <h2>Send money</h2>\n        <label for=\"recipient\">To</label>\n        <select id=\"recipient\">\n          <option>Sara Lee</option>\n          <option>Jordan Kim</option>\n          <option>Maya Patel</option>\n          <option>Tom Rivera</option>\n        </select>\n        <label for=\"amount\">Amount ($)</label>\n        <input id=\"amount\" type=\"number\" min=\"1\" max=\"1924\" step=\"0.01\" placeholder=\"0.00\" inputmode=\"decimal\" />\n        <label for=\"sendNote\">Note (optional)</label>\n        <input id=\"sendNote\" type=\"text\" placeholder=\"Dinner, rent, thanks…\" />\n        <button class=\"cta\" id=\"sendBtn\" type=\"button\">Send money</button>\n        <div class=\"ok\" id=\"sendOk\"></div>\n        <p class=\"note\">Sent from Everyday Checking. Your balance updates right away and the transfer appears in Activity.</p>\n      </div>\n    </section>\n\n    <!-- ACTIVITY -->\n    <section class=\"screen\" id=\"screen-activity\">\n      <div class=\"card\">\n        <h2>Transactions</h2>\n        <div id=\"txnList\"></div>\n      </div>\n    </section>\n\n    <!-- CARDS -->\n    <section class=\"screen\" id=\"screen-cards\">\n      <div class=\"card\" style=\"background:var(--green);color:#fff;border-color:var(--green)\">\n        <div style=\"font-size:13px;opacity:.85\">Vault Debit</div>\n        <div class=\"cardnum\" style=\"font-size:20px;margin:12px 0\">•••• •••• •••• 4821</div>\n        <div style=\"display:flex;justify-content:space-between;font-size:13px\"><span>ALEX MORGAN</span><span>09/29</span></div>\n      </div>\n      <div class=\"card\">\n        <h2>Card settings</h2>\n        <div class=\"acct\"><div><div class=\"name\">Freeze card</div><div class=\"sub\" id=\"freezeState\">Card is active</div></div><button class=\"cta\" style=\"width:auto;margin:0;padding:8px 14px\" id=\"freezeBtn\" type=\"button\">Freeze</button></div>\n        <div class=\"acct\"><div><div class=\"name\">Online payments</div><div class=\"sub\" id=\"onlineState\">Allowed</div></div><button class=\"cta\" style=\"width:auto;margin:0;padding:8px 14px\" id=\"onlineBtn\" type=\"button\">Block</button></div>\n      </div>\n    </section>\n  </main>\n\n  <nav class=\"tabbar\" aria-label=\"Main navigation\">\n    <button type=\"button\" class=\"on\" data-screen=\"home\"><span class=\"ic\">H</span>Home</button>\n    <button type=\"button\" data-screen=\"send\"><span class=\"ic\">S</span>Send</button>\n    <button type=\"button\" data-screen=\"activity\"><span class=\"ic\">A</span>Activity</button>\n    <button type=\"button\" data-screen=\"cards\"><span class=\"ic\">C</span>Cards</button>\n  </nav>\n</div>\n\n<script>\nvar checking = 1924.30, savings = 923.20;\nvar txns = [\n  {name:\"Grocery Market\", date:\"Nov 4\", amt:-86.20, kind:\"out\"},\n  {name:\"Payroll — Northwind\", date:\"Nov 3\", amt:1240.00, kind:\"in\"},\n  {name:\"Coffee House\", date:\"Nov 3\", amt:-6.40, kind:\"out\"},\n  {name:\"Transfer to Savings\", date:\"Nov 2\", amt:-200.00, kind:\"out\"},\n  {name:\"Refund — Bookstore\", date:\"Nov 1\", amt:18.99, kind:\"in\"}\n];\nfunction money(n){ return \"$\" + n.toFixed(2).replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\"); }\nfunction render(){\n  document.getElementById(\"balance\").textContent = money(checking + savings);\n  document.getElementById(\"checkingAmt\").textContent = money(checking);\n  document.getElementById(\"savingsAmt\").textContent = money(savings);\n  var html = \"\";\n  txns.forEach(function(t){\n    var init = t.name.split(\" \").map(function(w){ return w[0]; }).join(\"\").slice(0,2).toUpperCase();\n    html += '<div class=\"txn\"><div class=\"dot\">' + init + '</div><div><div class=\"t-name\">' + t.name + '</div><div class=\"t-date\">' + t.date + '</div></div><div class=\"t-amt ' + (t.kind === \"in\" ? \"pos\" : \"neg\") + '\">' + (t.kind === \"in\" ? \"+\" : \"−\") + money(Math.abs(t.amt)).slice(0) + '</div></div>';\n  });\n  document.getElementById(\"txnList\").innerHTML = html;\n  document.getElementById(\"recentList\").innerHTML = html;\n  var recent = document.getElementById(\"recentList\");\n  recent.innerHTML = txns.slice(0,3).map(function(t){\n    var init = t.name.split(\" \").map(function(w){ return w[0]; }).join(\"\").slice(0,2).toUpperCase();\n    return '<div class=\"txn\"><div class=\"dot\">' + init + '</div><div><div class=\"t-name\">' + t.name + '</div><div class=\"t-date\">' + t.date + '</div></div><div class=\"t-amt ' + (t.kind === \"in\" ? \"pos\" : \"neg\") + '\">' + (t.kind === \"in\" ? \"+\" : \"−\") + money(Math.abs(t.amt)) + '</div></div>';\n  }).join(\"\");\n}\nfunction show(id){\n  document.querySelectorAll(\".screen\").forEach(function(s){ s.classList.remove(\"on\"); });\n  document.getElementById(\"screen-\" + id).classList.add(\"on\");\n  document.querySelectorAll(\".tabbar button\").forEach(function(b){ b.classList.toggle(\"on\", b.dataset.screen === id); });\n  window.scrollTo(0,0);\n}\ndocument.querySelectorAll(\".tabbar button\").forEach(function(b){\n  b.addEventListener(\"click\", function(){ show(b.dataset.screen); });\n});\ndocument.querySelectorAll(\"[data-goto]\").forEach(function(b){\n  b.addEventListener(\"click\", function(){ show(b.dataset.goto); });\n});\ndocument.getElementById(\"sendBtn\").addEventListener(\"click\", function(){\n  var amt = parseFloat(document.getElementById(\"amount\").value);\n  var to = document.getElementById(\"recipient\").value;\n  var ok = document.getElementById(\"sendOk\");\n  if (!amt || amt <= 0) { ok.style.display = \"block\"; ok.textContent = \"Enter an amount above $0.\"; return; }\n  if (amt > checking) { ok.style.display = \"block\"; ok.textContent = \"That is more than your checking balance of \" + money(checking) + \".\"; return; }\n  checking -= amt;\n  txns.unshift({name:\"Sent to \" + to, date:\"Today\", amt:amt, kind:\"out\"});\n  render();\n  ok.style.display = \"block\";\n  ok.textContent = \"Sent \" + money(amt) + \" to \" + to + \". New checking balance: \" + money(checking) + \".\";\n  document.getElementById(\"amount\").value = \"\";\n  document.getElementById(\"sendNote\").value = \"\";\n});\nvar frozen = false, onlineBlocked = false;\ndocument.getElementById(\"freezeBtn\").addEventListener(\"click\", function(){\n  frozen = !frozen;\n  document.getElementById(\"freezeState\").textContent = frozen ? \"Card is frozen\" : \"Card is active\";\n  this.textContent = frozen ? \"Unfreeze\" : \"Freeze\";\n});\ndocument.getElementById(\"onlineBtn\").addEventListener(\"click\", function(){\n  onlineBlocked = !onlineBlocked;\n  document.getElementById(\"onlineState\").textContent = onlineBlocked ? \"Blocked\" : \"Allowed\";\n  this.textContent = onlineBlocked ? \"Allow\" : \"Block\";\n});\nrender();\n</script>\n</body>\n</html>\n","code_bytes":11169}