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: #E5E7EB;16 }17 18 .status-bar {19 height: 88px;20 padding: 0 28px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #E5E7EB;25 font-size: 36px;26 letter-spacing: 1px;27 }28 .status-right {29 display: flex; align-items: center; gap: 22px;30 }31 /* Simple wifi and battery */32 .icon-wifi, .icon-battery { width: 38px; height: 24px; display: inline-block; }33 .icon-wifi svg path, .icon-battery svg rect, .icon-battery svg path { fill: #E5E7EB; }34 35 .title-bar {36 height: 120px;37 display: flex;38 align-items: center;39 padding: 0 28px;40 border-bottom: 1px solid #263238;41 }42 .title {43 flex: 1;44 text-align: center;45 font-size: 56px;46 font-weight: 600;47 color: #E9ECEF;48 letter-spacing: 0.5px;49 }50 .icon-btn {51 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; color: #9CA3AF;52 }53 .content {54 padding: 24px 36px 0 36px;55 }56 .teal { color: #2dd4bf; }57 .muted { color: #9AA7B0; }58 59 .field-block {60 display: flex; align-items: flex-start;61 gap: 28px; margin-top: 32px;62 }63 .ico-box {64 width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;65 }66 .field-col {67 flex: 1;68 }69 .label {70 font-size: 32px; color: #93A4AE; margin-bottom: 10px;71 }72 .value {73 font-size: 46px; color: #E6F2F2; letter-spacing: 1px;74 }75 .underline {76 height: 2px; background: #3B4B52; margin-top: 18px; width: 100%;77 }78 79 .row-split {80 display: flex; gap: 36px; margin-top: 34px;81 }82 .half { flex: 1; }83 84 .list-item {85 display: flex; align-items: center;86 padding: 30px 0;87 border-bottom: 1px solid #1f2a30;88 }89 .list-item .text {90 font-size: 40px; color: #D2D8DC; flex: 1;91 }92 .list-item .right {93 display: flex; align-items: center; gap: 16px; color: #9FB0BB; font-size: 36px;94 }95 .chev {96 width: 28px; height: 28px;97 }98 99 .primary-btn {100 margin: 36px auto;101 width: 100%;102 height: 120px;103 background: #223543;104 border-radius: 60px;105 display: flex; align-items: center; justify-content: center;106 color: #9FB0BB;107 font-size: 42px;108 }109 110 /* Keyboard mock */111 .keyboard {112 position: absolute;113 left: 0; right: 0; bottom: 42px;114 height: 840px;115 background: #1A1C1F;116 border-top: 1px solid #252a2d;117 padding: 24px 18px;118 box-sizing: border-box;119 }120 .kb-row {121 display: flex; gap: 12px; justify-content: center; margin: 18px 0;122 }123 .key {124 width: 86px; height: 110px; background: #2A2D31; border-radius: 18px;125 display: flex; align-items: center; justify-content: center; color: #E5E7EB; font-size: 44px;126 }127 .key.wide { width: 160px; }128 .key.extra { width: 210px; }129 .key.action { background: #C7D2FE; color: #0F172A; }130 131 .suggestions {132 display: flex; align-items: center; justify-content: space-between;133 padding: 8px 18px 16px;134 color: #D1D5DB; font-size: 36px;135 }136 .divider-thin { height: 1px; background: #1f2a30; margin: 14px 0; }137 138 /* Home indicator */139 .home-indicator {140 position: absolute; bottom: 12px; left: 50%;141 transform: translateX(-50%);142 width: 280px; height: 8px; background: #E5E7EB; border-radius: 8px; opacity: 0.9;143 }144 145 /* Simple SVG icon color helper */146 svg { display: block; }147 .i-teal path, .i-teal rect, .i-teal circle, .i-teal polygon { fill: #2dd4bf; stroke: none; }148 .i-grey path { fill: #9FB0BB; }149</style>150</head>151<body>152<div id="render-target">153 154 <!-- Status Bar -->155 <div class="status-bar">156 <div class="time">3:47</div>157 <div class="status-right">158 <!-- wifi -->159 <span class="icon-wifi">160 <svg viewBox="0 0 24 24">161 <path d="M12 20a2 2 0 1 0 .001-4.001A2 2 0 0 0 12 20zm-6.5-6.5 1.4 1.4A7 7 0 0 1 17.1 15l1.4-1.4a9 9 0 0 0-13 0zm-3.2-3.2 1.4 1.4A12 12 0 0 1 20.3 11l1.4-1.4a14 14 0 0 0-19.4 0z"/>162 </svg>163 </span>164 <!-- battery -->165 <span class="icon-battery">166 <svg viewBox="0 0 30 18">167 <rect x="1" y="2" width="24" height="14" rx="2"></rect>168 <path d="M27 6h2v6h-2z"></path>169 </svg>170 </span>171 </div>172 </div>173 174 <!-- Title Bar -->175 <div class="title-bar">176 <div class="icon-btn">177 <svg width="36" height="36" viewBox="0 0 24 24">178 <path fill="#9CA3AF" d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>179 </svg>180 </div>181 <div class="title">Add New Budget</div>182 <div class="icon-btn"></div>183 </div>184 185 <!-- Content -->186 <div class="content">187 <!-- Budget Name -->188 <div class="field-block">189 <div class="ico-box">190 <svg class="i-teal" width="60" height="60" viewBox="0 0 24 24">191 <!-- money bag approximate -->192 <path d="M8 4c0-1 1-2 4-2s4 1 4 2l-2 2H10L8 4z"></path>193 <path d="M5 11c0-3 3-5 7-5s7 2 7 5-3 9-7 9-7-6-7-9z"></path>194 <path fill="#121212" d="M12 9a3 3 0 0 0-3 3h2a1 1 0 0 1 2 0 1 1 0 0 1-1 1h-1v2h2v-1a3 3 0 0 0-1-5z"></path>195 </svg>196 </div>197 <div class="field-col">198 <div class="label">Budget Name</div>199 <div class="value">JULY</div>200 <div class="underline"></div>201 </div>202 </div>203 204 <!-- Amount & Currency -->205 <div class="row-split">206 <div class="field-col half">207 <div class="label">Amount</div>208 <div class="value">0</div>209 <div class="underline"></div>210 </div>211 <div class="field-col half">212 <div class="label">Currency</div>213 <div class="value" style="display:flex; align-items:center; justify-content:space-between;">214 <span>INR</span>215 <svg class="chev i-grey" viewBox="0 0 24 24">216 <path d="M9 6l6 6-6 6"></path>217 </svg>218 </div>219 <div class="underline"></div>220 </div>221 </div>222 223 <!-- Wallets -->224 <div class="list-item" style="margin-top: 18px;">225 <div class="ico-box">226 <svg class="i-teal" width="60" height="60" viewBox="0 0 24 24">227 <path d="M2 7a3 3 0 0 1 3-3h13a2 2 0 0 1 2 2v2H2V7z"></path>228 <path d="M2 10h18a2 2 0 0 1 2 2v5a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-7z"></path>229 </svg>230 </div>231 <div class="text">Wallets</div>232 <div class="right">233 <span>All Wallets</span>234 <svg class="chev" viewBox="0 0 24 24"><path fill="#9FB0BB" d="M9 6l6 6-6 6"/></svg>235 </div>236 </div>237 238 <!-- Budget for -->239 <div class="list-item">240 <div class="ico-box">241 <svg class="i-teal" width="60" height="60" viewBox="0 0 24 24">242 <circle cx="6" cy="7" r="3"></circle>243 <circle cx="18" cy="7" r="3"></circle>244 <circle cx="12" cy="16" r="3"></circle>245 </svg>246 </div>247 <div class="text">Budget for</div>248 <div class="right">249 <span>All Expenses</span>250 <svg class="chev" viewBox="0 0 24 24"><path fill="#9FB0BB" d="M9 6l6 6-6 6"/></svg>251 </div>252 </div>253 254 <!-- Recurrence -->255 <div class="list-item">256 <div class="ico-box">257 <svg class="i-teal" width="60" height="60" viewBox="0 0 24 24">258 <rect x="3" y="4" width="18" height="16" rx="2"></rect>259 <path fill="#121212" d="M3 8h18v3H3z"></path>260 <rect x="7" y="13" width="4" height="3" fill="#2dd4bf"></rect>261 <rect x="13" y="13" width="4" height="3" fill="#2dd4bf"></rect>262 </svg>263 </div>264 <div class="text">Recurrence</div>265 <div class="right">266 <span>Monthly</span>267 <svg class="chev" viewBox="0 0 24 24"><path fill="#9FB0BB" d="M9 6l6 6-6 6"/></svg>268 </div>269 </div>270 271 <!-- Start Date -->272 <div class="list-item">273 <div class="ico-box">274 <svg class="i-teal" width="60" height="60" viewBox="0 0 24 24">275 <circle cx="12" cy="12" r="10"></circle>276 <polygon fill="#121212" points="10,8 16,12 10,16"></polygon>277 </svg>278 </div>279 <div class="text">Start Date</div>280 <div class="right">281 <span>Today</span>282 <svg class="chev" viewBox="0 0 24 24"><path fill="#9FB0BB" d="M9 6l6 6-6 6"/></svg>283 </div>284 </div>285 286 <div class="primary-btn">Create a New Budget</div>287 </div>288 289 <!-- Keyboard mock -->290 <div class="keyboard">291 <div class="suggestions">292 <span style="display:flex;align-items:center;gap:16px;">293 <div class="key" style="width:84px;height:84px;background:#3B4252;border-radius:20px;">⌨</div>294 <span style="opacity:.9;">JULY</span>295 </span>296 <span>JULY'S</span>297 <div class="key" style="width:84px;height:84px;background:#3B4252;border-radius:20px;">🎤</div>298 </div>299 <div class="divider-thin"></div>300 <div class="kb-row">301 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>302 </div>303 <div class="kb-row">304 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>305 </div>306 <div class="kb-row">307 <div class="key wide">⇧</div>308 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>309 <div class="key wide">⌫</div>310 </div>311 <div class="kb-row">312 <div class="key extra">?123</div>313 <div class="key">,</div>314 <div class="key extra" style="flex:1"> </div>315 <div class="key">.</div>316 <div class="key action">✓</div>317 </div>318 </div>319 320 <div class="home-indicator"></div>321</div>322</body>323</html>