GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Add New Budget</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #111416;15 color: #EAEFF2;16 }17 18 /* Status bar */19 .status-bar {20 height: 84px;21 padding: 0 28px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #cfd8dc;26 font-size: 30px;27 letter-spacing: 1px;28 }29 .status-right { display: flex; align-items: center; gap: 22px; }30 .icon-signal, .icon-battery {31 width: 32px; height: 22px; border: 2px solid #cfd8dc; border-radius: 3px; position: relative;32 }33 .icon-signal:before {34 content: ""; position: absolute; right: -8px; top: 4px; width: 0; height: 0;35 border-left: 8px solid #cfd8dc; border-top: 7px solid transparent; border-bottom: 7px solid transparent;36 }37 .icon-battery:after {38 content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 10px; background: #cfd8dc; border-radius: 2px;39 }40 41 /* Header */42 .header {43 padding: 22px 28px 18px;44 border-bottom: 1px solid #1f2a31;45 position: relative;46 }47 .header-title {48 text-align: center;49 font-size: 54px;50 font-weight: 700;51 color: #dfe6eb;52 }53 .close-btn {54 position: absolute;55 left: 24px;56 top: 28px;57 width: 56px; height: 56px;58 display: flex; align-items: center; justify-content: center;59 color: #8aa3ac;60 }61 .close-btn svg { width: 40px; height: 40px; }62 63 /* Form area */64 .form {65 padding: 20px 36px 0 36px;66 }67 .row {68 display: flex;69 gap: 24px;70 align-items: flex-start;71 padding: 22px 0;72 }73 .ico {74 width: 68px; height: 68px; border-radius: 14px;75 display: flex; align-items: center; justify-content: center;76 color: #111416; background: #22c39a;77 }78 .ico svg { width: 42px; height: 42px; fill: #111416; }79 .field {80 flex: 1;81 color: #e6edf1;82 }83 .label {84 font-size: 28px;85 color: #8ea3ad;86 margin-bottom: 8px;87 }88 .value {89 font-size: 42px;90 letter-spacing: 1px;91 color: #e6edf1;92 }93 .underline {94 height: 2px; background: #2a343a; margin-top: 16px;95 }96 .double {97 display: grid; grid-template-columns: 1fr 1fr; gap: 28px;98 align-items: end;99 }100 .subcol .label { display: flex; justify-content: space-between; }101 .subcol .value { font-size: 40px; }102 .subcol .underline { height: 2px; background: #2a343a; margin-top: 14px; }103 104 .right-value {105 color: #9db0bb;106 font-size: 36px;107 }108 .chevron {109 width: 22px; height: 22px; margin-left: 12px;110 }111 .row-line { border-bottom: 1px solid transparent; }112 113 /* Bottom sheet keypad */114 .sheet {115 position: absolute;116 left: 0;117 right: 0;118 bottom: 88px;119 height: 900px;120 background: #2e3f48;121 box-shadow: 0 -6px 18px rgba(0,0,0,0.45);122 display: flex;123 flex-direction: column;124 }125 .sheet-header {126 height: 110px;127 display: flex; align-items: center; justify-content: center;128 color: #9fb2bb;129 font-weight: 700;130 font-size: 36px;131 opacity: 0.85;132 }133 .keys {134 flex: 1;135 display: grid;136 grid-template-columns: repeat(4, 1fr);137 grid-auto-rows: 198px;138 border-top: 1px solid #3b505a;139 }140 .key {141 border-right: 1px solid #3b505a;142 border-bottom: 1px solid #3b505a;143 display: flex; align-items: center; justify-content: center;144 font-size: 54px; color: #e8f0f4;145 }146 .key:nth-child(4n) { border-right: 0; }147 .key.dim { color: #cbd6db; font-size: 48px; }148 .key.small { font-size: 44px; }149 150 /* Nav pill */151 .nav-area {152 position: absolute; left: 0; right: 0; bottom: 0; height: 88px; background: #000;153 display: flex; align-items: center; justify-content: center;154 }155 .pill {156 width: 220px; height: 10px; border-radius: 10px; background: #e6e6e6; opacity: 0.9;157 }158 159 /* Utility tiny separator under header title matching screenshot */160 .top-divider { height: 1px; background: #1f2a31; margin-top: 12px; opacity: 0.7; }161 .spacer-lg { height: 16px; }162 .spacer-xl { height: 8px; }163 .row-select {164 display: flex; align-items: center; justify-content: space-between;165 padding-right: 8px;166 }167 .row-select .left {168 display: flex; align-items: center; gap: 18px;169 }170</style>171</head>172<body>173<div id="render-target">174 175 <!-- Status bar -->176 <div class="status-bar">177 <div class="status-left">3:49</div>178 <div class="status-right">179 <span style="font-size:26px;opacity:.8;">◯</span>180 <span style="font-size:26px;opacity:.8;">◔</span>181 <span style="font-size:30px;">✉</span>182 <svg width="30" height="22" viewBox="0 0 30 22" fill="none"><path d="M2 20h4V10H2v10Zm6 0h4V6H8v14Zm6 0h4V2h-4v18Zm6 0h4V14h-4v6Z" fill="#cfd8dc"/></svg>183 <div class="icon-signal"></div>184 <div class="icon-battery"></div>185 </div>186 </div>187 188 <!-- Header -->189 <div class="header">190 <div class="close-btn">191 <svg viewBox="0 0 24 24">192 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#8aa3ac" stroke-width="2" stroke-linecap="round"/>193 </svg>194 </div>195 <div class="header-title">Add New Budget</div>196 <div class="top-divider"></div>197 </div>198 199 <!-- Form -->200 <div class="form">201 202 <!-- Budget Name -->203 <div class="row">204 <div class="ico" title="budget icon">205 <svg viewBox="0 0 24 24">206 <circle cx="12" cy="12" r="10"></circle>207 </svg>208 </div>209 <div class="field">210 <div class="label">Budget Name</div>211 <div class="value">JULY</div>212 <div class="underline"></div>213 </div>214 </div>215 216 <!-- Amount / Currency -->217 <div class="row">218 <div class="ico">219 <svg viewBox="0 0 24 24">220 <rect x="3" y="6" width="18" height="10" rx="2"></rect>221 <rect x="6" y="4" width="12" height="4" rx="1" fill="#22c39a"></rect>222 </svg>223 </div>224 <div class="field double">225 <div class="subcol">226 <div class="label">Amount</div>227 <div class="underline"></div>228 </div>229 <div class="subcol">230 <div class="label" style="display:flex;justify-content:space-between;">231 <span>Currency</span>232 </div>233 <div class="value" style="display:flex;align-items:center;justify-content:space-between;color:#aebfc7;">234 <span>INR</span>235 <svg class="chevron" viewBox="0 0 24 24">236 <path d="M9 6l6 6-6 6" stroke="#9fb0bb" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>237 </svg>238 </div>239 <div class="underline"></div>240 </div>241 </div>242 </div>243 244 <!-- Wallets -->245 <div class="row">246 <div class="ico">247 <svg viewBox="0 0 24 24">248 <rect x="3" y="7" width="18" height="10" rx="2"></rect>249 <rect x="3" y="7" width="10" height="3"></rect>250 </svg>251 </div>252 <div class="field row-select">253 <div class="label" style="font-size:38px; color:#cfd9df;">Wallets</div>254 <div class="right-value" style="display:flex; align-items:center;">255 <span>All Wallets</span>256 <svg class="chevron" viewBox="0 0 24 24">257 <path d="M9 6l6 6-6 6" stroke="#9fb0bb" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>258 </svg>259 </div>260 </div>261 </div>262 263 <!-- Budget for -->264 <div class="row">265 <div class="ico">266 <svg viewBox="0 0 24 24">267 <circle cx="8" cy="10" r="3"></circle>268 <circle cx="16" cy="10" r="3"></circle>269 <circle cx="12" cy="16" r="3"></circle>270 </svg>271 </div>272 <div class="field row-select">273 <div class="label" style="font-size:38px; color:#cfd9df;">Budget for</div>274 <div class="right-value" style="display:flex; align-items:center;">275 <span>All Expenses</span>276 <svg class="chevron" viewBox="0 0 24 24">277 <path d="M9 6l6 6-6 6" stroke="#9fb0bb" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>278 </svg>279 </div>280 </div>281 </div>282 283 <!-- Recurrence -->284 <div class="row">285 <div class="ico">286 <svg viewBox="0 0 24 24">287 <rect x="4" y="6" width="16" height="12" rx="2"></rect>288 <rect x="7" y="3" width="3" height="6"></rect>289 <rect x="14" y="3" width="3" height="6"></rect>290 </svg>291 </div>292 <div class="field row-select">293 <div class="label" style="font-size:38px; color:#cfd9df;">Recurrence</div>294 <div class="right-value" style="display:flex; align-items:center;">295 <span>Monthly</span>296 <svg class="chevron" viewBox="0 0 24 24">297 <path d="M9 6l6 6-6 6" stroke="#9fb0bb" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>298 </svg>299 </div>300 </div>301 </div>302 303 <!-- Start Date -->304 <div class="row">305 <div class="ico">306 <svg viewBox="0 0 24 24">307 <polygon points="8,6 18,12 8,18"></polygon>308 </svg>309 </div>310 <div class="field row-select">311 <div class="label" style="font-size:38px; color:#cfd9df;">Start Date</div>312 <div class="right-value" style="display:flex; align-items:center;">313 <span>Today</span>314 <svg class="chevron" viewBox="0 0 24 24">315 <path d="M9 6l6 6-6 6" stroke="#9fb0bb" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>316 </svg>317 </div>318 </div>319 </div>320 321 </div>322 323 <!-- Bottom sheet keypad -->324 <div class="sheet">325 <div class="sheet-header">Create a New Budget</div>326 <div class="keys">327 <div class="key">1</div>328 <div class="key">2</div>329 <div class="key">3</div>330 <div class="key dim">÷</div>331 332 <div class="key">4</div>333 <div class="key">5</div>334 <div class="key">6</div>335 <div class="key dim">×</div>336 337 <div class="key">7</div>338 <div class="key">8</div>339 <div class="key">9</div>340 <div class="key dim">−</div>341 342 <div class="key small">.</div>343 <div class="key">0</div>344 <div class="key small">⌫</div>345 <div class="key dim">+</div>346 </div>347 </div>348 349 <!-- Bottom navigation pill -->350 <div class="nav-area">351 <div class="pill"></div>352 </div>353 354</div>355</body>356</html>