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: #121212;15 color: #ECEFF1;16 }17 18 /* Status bar */19 .status-bar {20 height: 92px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #E0E0E0;26 font-weight: 600;27 letter-spacing: 0.5px;28 }29 .status-left { font-size: 36px; }30 .status-right {31 display: flex;32 align-items: center;33 gap: 22px;34 }35 .icon-wifi, .icon-battery {36 width: 34px; height: 34px;37 }38 39 /* App bar */40 .app-bar {41 height: 140px;42 border-bottom: 1px solid #263238;43 display: flex;44 align-items: center;45 justify-content: center;46 position: relative;47 }48 .close-btn {49 position: absolute;50 left: 24px;51 top: 50%;52 transform: translateY(-50%);53 width: 72px; height: 72px;54 display: flex; align-items: center; justify-content: center;55 color: #90A4AE;56 }57 .close-btn svg line { stroke: #90A4AE; stroke-width: 8; stroke-linecap: round; }58 .app-title {59 font-size: 54px;60 font-weight: 700;61 color: #CFD8DC;62 }63 64 /* Form area */65 .screen {66 padding: 10px 36px 0 36px;67 }68 .row {69 display: flex;70 align-items: flex-start;71 gap: 26px;72 margin: 28px 0;73 }74 .ico {75 width: 68px; height: 68px;76 flex: 0 0 68px;77 display: flex; align-items: center; justify-content: center;78 }79 .ico svg { width: 68px; height: 68px; }80 .teal { color: #1ECF9A; fill: #1ECF9A; }81 .label {82 font-size: 34px;83 color: #90A4AE;84 margin-bottom: 8px;85 }86 .field {87 font-size: 44px;88 color: #EAEFF2;89 padding: 8px 0 18px 0;90 border-bottom: 2px solid #37474F;91 }92 93 .two-col {94 display: flex;95 gap: 30px;96 }97 .two-col .col {98 flex: 1;99 position: relative;100 }101 .col .right-meta {102 position: absolute;103 right: 0; top: 50%;104 transform: translateY(-50%);105 display: flex; align-items: center; gap: 12px;106 color: #A7C0CD;107 font-size: 40px;108 }109 .chev {110 width: 22px; height: 22px;111 }112 113 .simple-row {114 display: flex;115 align-items: center;116 justify-content: space-between;117 padding: 22px 0;118 border-bottom: 1px solid #222B2F;119 }120 .simple-row .left {121 display: flex; align-items: center; gap: 26px;122 }123 .simple-row .title {124 font-size: 44px; color: #CFD8DC;125 }126 .simple-row .value {127 display: flex; align-items: center; gap: 12px;128 color: #A7C0CD; font-size: 42px;129 }130 131 /* Bottom action bar */132 .create-bar {133 position: absolute;134 left: 0; right: 0;135 bottom: 1050px; /* sits above keypad */136 height: 120px;137 background: #1ECF9A;138 color: #FFFFFF;139 display: flex; align-items: center; justify-content: center;140 font-size: 46px; font-weight: 700;141 letter-spacing: 0.5px;142 }143 144 /* Keypad */145 .keypad {146 position: absolute;147 bottom: 120px;148 left: 0; right: 0;149 height: 900px;150 background: #101417;151 display: grid;152 grid-template-columns: repeat(4, 1fr);153 grid-template-rows: repeat(4, 1fr);154 gap: 8px;155 padding: 8px;156 }157 .key {158 background: #2B3940;159 border-radius: 6px;160 display: flex; align-items: center; justify-content: center;161 color: #EAEFF2;162 font-size: 64px; font-weight: 600;163 }164 .key.dim { color: #9FB1B9; }165 .gesture {166 position: absolute;167 bottom: 40px;168 left: 50%;169 transform: translateX(-50%);170 width: 250px; height: 12px;171 background: #E0E0E0;172 border-radius: 8px;173 opacity: 0.9;174 }175</style>176</head>177<body>178<div id="render-target">179 180 <!-- Status Bar -->181 <div class="status-bar">182 <div class="status-left">3:49</div>183 <div class="status-right">184 <!-- Simple wifi -->185 <svg class="icon-wifi" viewBox="0 0 24 24">186 <path fill="#E0E0E0" d="M12 20a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 20z"></path>187 <path fill="#E0E0E0" d="M2 9a14 14 0 0 1 20 0l-2 2a11 11 0 0 0-16 0L2 9z"></path>188 <path fill="#E0E0E0" d="M6 13a8 8 0 0 1 12 0l-2 2a5 5 0 0 0-8 0l-2-2z"></path>189 </svg>190 <!-- Battery -->191 <svg class="icon-battery" viewBox="0 0 28 16">192 <rect x="1" y="3" width="22" height="10" rx="2" fill="none" stroke="#E0E0E0" stroke-width="2"></rect>193 <rect x="3" y="5" width="14" height="6" fill="#E0E0E0"></rect>194 <rect x="24" y="6" width="3" height="4" fill="#E0E0E0"></rect>195 </svg>196 </div>197 </div>198 199 <!-- App Bar -->200 <div class="app-bar">201 <div class="close-btn">202 <svg viewBox="0 0 64 64">203 <line x1="16" y1="16" x2="48" y2="48"></line>204 <line x1="48" y1="16" x2="16" y2="48"></line>205 </svg>206 </div>207 <div class="app-title">Add New Budget</div>208 </div>209 210 <!-- Screen/Form -->211 <div class="screen">212 213 <!-- Budget Name -->214 <div class="row" style="margin-top: 26px;">215 <div class="ico teal">216 <!-- money bag (simplified) -->217 <svg viewBox="0 0 64 64" class="teal">218 <path d="M22 10h20l-6 6h-8z" fill="currentColor"></path>219 <path d="M32 18c-12 0-20 10-20 22s8 18 20 18 20-6 20-18S44 18 32 18z" fill="currentColor"></path>220 <text x="32" y="42" text-anchor="middle" font-size="22" fill="#0B3D33" font-weight="700">$</text>221 </svg>222 </div>223 <div style="flex:1;">224 <div class="label">Budget Name</div>225 <div class="field" style="font-weight:700; letter-spacing: 2px;">JULY</div>226 </div>227 </div>228 229 <!-- Amount + Currency -->230 <div class="row">231 <div class="ico teal">232 <!-- stacked money -->233 <svg viewBox="0 0 64 64" class="teal">234 <rect x="6" y="22" width="44" height="22" rx="3" fill="currentColor"></rect>235 <rect x="12" y="28" width="32" height="10" rx="2" fill="#0B3D33"></rect>236 <rect x="10" y="16" width="44" height="22" rx="3" fill="currentColor" opacity="0.7"></rect>237 </svg>238 </div>239 <div style="flex:1;">240 <div class="two-col">241 <div class="col">242 <div class="label">Amount</div>243 <div class="field">100</div>244 </div>245 <div class="col">246 <div class="label">Currency</div>247 <div class="field" style="padding-right: 56px;">INR</div>248 <div class="right-meta">249 <svg class="chev" viewBox="0 0 16 16"><path d="M5 2l6 6-6 6" fill="none" stroke="#A7C0CD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>250 </div>251 </div>252 </div>253 </div>254 </div>255 256 <!-- Wallets -->257 <div class="row" style="margin-top: 24px;">258 <div class="ico teal">259 <svg viewBox="0 0 64 64" class="teal">260 <rect x="8" y="18" width="48" height="28" rx="6" fill="currentColor"></rect>261 <rect x="14" y="24" width="20" height="8" rx="2" fill="#0B3D33"></rect>262 </svg>263 </div>264 <div style="flex:1;">265 <div class="simple-row">266 <div class="left">267 <div class="title">Wallets</div>268 </div>269 <div class="value">All Wallets270 <svg class="chev" viewBox="0 0 16 16"><path d="M5 2l6 6-6 6" fill="none" stroke="#A7C0CD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>271 </div>272 </div>273 </div>274 </div>275 276 <!-- Budget for -->277 <div class="row">278 <div class="ico teal">279 <svg viewBox="0 0 64 64" class="teal">280 <circle cx="18" cy="22" r="8" fill="currentColor"></circle>281 <circle cx="34" cy="22" r="8" fill="currentColor" opacity="0.8"></circle>282 <circle cx="26" cy="38" r="8" fill="currentColor" opacity="0.6"></circle>283 </svg>284 </div>285 <div style="flex:1;">286 <div class="simple-row">287 <div class="left">288 <div class="title">Budget for</div>289 </div>290 <div class="value">All Expenses291 <svg class="chev" viewBox="0 0 16 16"><path d="M5 2l6 6-6 6" fill="none" stroke="#A7C0CD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>292 </div>293 </div>294 </div>295 </div>296 297 <!-- Recurrence -->298 <div class="row">299 <div class="ico teal">300 <svg viewBox="0 0 64 64" class="teal">301 <rect x="10" y="18" width="44" height="32" rx="4" fill="currentColor"></rect>302 <rect x="10" y="22" width="44" height="8" fill="#0B3D33"></rect>303 <rect x="18" y="36" width="8" height="8" fill="#0B3D33"></rect>304 <rect x="32" y="36" width="8" height="8" fill="#0B3D33"></rect>305 </svg>306 </div>307 <div style="flex:1;">308 <div class="simple-row">309 <div class="left">310 <div class="title">Recurrence</div>311 </div>312 <div class="value">Monthly313 <svg class="chev" viewBox="0 0 16 16"><path d="M5 2l6 6-6 6" fill="none" stroke="#A7C0CD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>314 </div>315 </div>316 </div>317 </div>318 319 <!-- Start Date -->320 <div class="row">321 <div class="ico teal">322 <svg viewBox="0 0 64 64" class="teal">323 <circle cx="32" cy="32" r="22" fill="currentColor"></circle>324 <polygon points="28,22 46,32 28,42" fill="#0B3D33"></polygon>325 </svg>326 </div>327 <div style="flex:1;">328 <div class="simple-row" style="border-bottom: none;">329 <div class="left">330 <div class="title">Start Date</div>331 </div>332 <div class="value">Today333 <svg class="chev" viewBox="0 0 16 16"><path d="M5 2l6 6-6 6" fill="none" stroke="#A7C0CD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>334 </div>335 </div>336 </div>337 </div>338 339 </div>340 341 <!-- Fixed Create Bar -->342 <div class="create-bar">Create a New Budget</div>343 344 <!-- Keypad -->345 <div class="keypad">346 <div class="key">1</div>347 <div class="key">2</div>348 <div class="key">3</div>349 <div class="key dim">÷</div>350 351 <div class="key">4</div>352 <div class="key">5</div>353 <div class="key">6</div>354 <div class="key dim">×</div>355 356 <div class="key">7</div>357 <div class="key">8</div>358 <div class="key">9</div>359 <div class="key dim">−</div>360 361 <div class="key">.</div>362 <div class="key">0</div>363 <div class="key dim">⌫</div>364 <div class="key dim">+</div>365 </div>366 367 <!-- Gesture Bar -->368 <div class="gesture"></div>369 370</div>371</body>372</html>