GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Add New Budget - Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #121212; color: #E7ECEF;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14 }15 16 /* Top status bar */17 .status-bar {18 height: 96px;19 padding: 0 32px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #fff;24 font-size: 34px;25 letter-spacing: 0.5px;26 opacity: 0.9;27 }28 .status-icons { display: flex; align-items: center; gap: 22px; }29 .icon-dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; opacity: 0.9; }30 .wifi {31 width: 30px; height: 20px;32 }33 .battery {34 width: 42px; height: 20px;35 }36 37 /* Header */38 .header {39 height: 140px;40 display: flex;41 align-items: center;42 padding: 0 32px;43 position: relative;44 border-bottom: 1px solid #2A2E31;45 }46 .close-btn {47 width: 64px; height: 64px;48 display: flex; align-items: center; justify-content: center;49 }50 .header-title {51 position: absolute; left: 0; right: 0;52 text-align: center;53 font-size: 56px; font-weight: 600; color: #E7ECEF;54 }55 56 /* Form area */57 .content { padding: 8px 0 0 0; }58 .field-row {59 display: flex;60 align-items: flex-start;61 padding: 26px 48px 26px 48px;62 border-bottom: 1px solid #2A2E31;63 }64 .field-icon {65 width: 64px; height: 64px; margin-right: 28px;66 }67 .field-body { flex: 1; }68 .label {69 font-size: 28px; color: #90A4AE; margin-bottom: 6px;70 }71 .value {72 font-size: 44px; color: #E7ECEF; font-weight: 600; letter-spacing: 0.5px;73 }74 .field-row.chevron .right {75 display: flex; align-items: center; gap: 16px;76 }77 .right-text { font-size: 32px; color: #B0BEC5; }78 .chev {79 width: 28px; height: 28px;80 }81 82 /* Amount + Currency double row */83 .double-row {84 display: flex;85 align-items: flex-start;86 padding: 26px 48px 26px 48px;87 border-bottom: 1px solid #2A2E31;88 }89 .double-row .field-icon { margin-right: 28px; }90 .double-row .cols { display: flex; flex: 1; gap: 40px; }91 .half {92 flex: 1;93 padding-right: 16px;94 border-bottom: 1px solid #2F3B3F;95 padding-bottom: 18px;96 }97 .half .label { font-size: 28px; color: #90A4AE; }98 .half .value { font-size: 44px; }99 .half.right {100 display: flex; align-items: center; justify-content: space-between;101 border-bottom: 1px solid #2F3B3F;102 }103 104 /* Spacing for the list rows (Wallets, Budget for, Recurrence, Start Date) */105 .list-row {106 display: flex; align-items: center;107 padding: 34px 48px; border-bottom: 1px solid #2A2E31;108 }109 .list-row .title { font-size: 36px; color: #B0BEC5; }110 .list-row .spacer { flex: 1; }111 .list-row .value-right { font-size: 32px; color: #B0BEC5; margin-right: 14px; }112 113 /* Bottom CTA and keypad */114 .cta-bar {115 position: absolute; left: 0; right: 0; bottom: 980px;116 height: 120px; background: #18C4A1; color: #ffffff;117 display: flex; align-items: center; justify-content: center;118 font-size: 40px; font-weight: 700; letter-spacing: 0.4px;119 }120 .keypad {121 position: absolute; left: 0; right: 0; bottom: 80px;122 height: 900px;123 display: grid;124 grid-template-columns: repeat(4, 1fr);125 grid-template-rows: repeat(4, 1fr);126 background: #1D2428;127 border-top: 1px solid #2A2E31;128 }129 .key {130 border-right: 1px solid #2A2E31;131 border-bottom: 1px solid #2A2E31;132 display: flex; align-items: center; justify-content: center;133 color: #FFFFFF; font-size: 56px; font-weight: 600;134 background: #2B353B;135 }136 .key:last-child { border-right: none; }137 .operator { color: #B0BEC5; font-weight: 700; }138 .home-indicator {139 position: absolute; bottom: 24px; left: 50%;140 width: 220px; height: 10px; border-radius: 6px;141 background: #E7ECEF; transform: translateX(-50%); opacity: 0.7;142 }143 144 /* Accent color for icons */145 .accent { fill: #18C4A1; }146 .muted { fill: #90A4AE; }147</style>148</head>149<body>150<div id="render-target">151 152 <!-- Status Bar -->153 <div class="status-bar">154 <div>3:49</div>155 <div class="status-icons">156 <div class="icon-dot"></div>157 <div class="icon-dot" style="opacity:0.7;"></div>158 <svg class="wifi" viewBox="0 0 24 14">159 <path fill="#fff" d="M12 12l-2-2a6 6 0 0 1 4 0l-2 2zm-5-5 -2-2a12 12 0 0 1 14 0l-2 2a8 8 0 0 0-10 0z"/>160 </svg>161 <svg class="battery" viewBox="0 0 28 14">162 <rect x="0.5" y="1.5" width="22" height="11" rx="2" ry="2" stroke="#fff" fill="none"/>163 <rect x="2.5" y="3.5" width="17.5" height="7" fill="#fff"/>164 <rect x="23" y="4" width="3" height="6" fill="#fff"/>165 </svg>166 </div>167 </div>168 169 <!-- Header -->170 <div class="header">171 <div class="close-btn">172 <svg width="46" height="46" viewBox="0 0 24 24">173 <path class="muted" d="M5 5l14 14M19 5L5 19" stroke="#90A4AE" stroke-width="2" stroke-linecap="round"/>174 </svg>175 </div>176 <div class="header-title">Add New Budget</div>177 </div>178 179 <!-- Content -->180 <div class="content">181 182 <!-- Budget Name -->183 <div class="field-row">184 <svg class="field-icon" viewBox="0 0 24 24">185 <path class="accent" d="M12 2c2 2 3 2 3 3-2 2-1 2-1 3l5 6c0 4-3 6-7 6s-7-2-7-6l5-6c0-1 1-1-1-3 0-1 1-1 3-3z"/>186 <circle cx="12" cy="13" r="2.4" fill="#121212"/>187 <path d="M12 11v4" stroke="#121212" stroke-width="1.8"/>188 <path d="M10.5 12.5h3" stroke="#121212" stroke-width="1.8"/>189 </svg>190 <div class="field-body">191 <div class="label">Budget Name</div>192 <div class="value">JULY</div>193 </div>194 </div>195 196 <!-- Amount + Currency -->197 <div class="double-row">198 <svg class="field-icon" viewBox="0 0 24 24">199 <rect x="3" y="7" width="18" height="10" rx="2" class="accent"/>200 <rect x="5" y="9" width="14" height="6" fill="#121212"/>201 <circle cx="9" cy="12" r="1.5" fill="#18C4A1"/>202 </svg>203 <div class="cols">204 <div class="half">205 <div class="label">Amount</div>206 <div class="value">10</div>207 </div>208 <div class="half right">209 <div>210 <div class="label">Currency</div>211 <div class="value" style="color:#B0BEC5;">INR</div>212 </div>213 <svg class="chev" viewBox="0 0 24 24">214 <path class="muted" d="M9 6l6 6-6 6" fill="none" stroke="#90A4AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>215 </svg>216 </div>217 </div>218 </div>219 220 <!-- Wallets -->221 <div class="list-row">222 <svg class="field-icon" viewBox="0 0 24 24">223 <path class="accent" d="M3 7h18v10H3z"/>224 <path d="M16 10h5v4h-5z" fill="#121212"/>225 <circle cx="18.5" cy="12" r="1" fill="#18C4A1"/>226 </svg>227 <div class="title">Wallets</div>228 <div class="spacer"></div>229 <div class="value-right">All Wallets</div>230 <svg class="chev" viewBox="0 0 24 24">231 <path class="muted" d="M9 6l6 6-6 6" fill="none" stroke="#90A4AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>232 </svg>233 </div>234 235 <!-- Budget for -->236 <div class="list-row">237 <svg class="field-icon" viewBox="0 0 24 24">238 <circle cx="8" cy="8" r="3" class="accent"/>239 <circle cx="16" cy="8" r="3" class="accent"/>240 <circle cx="12" cy="16" r="3" class="accent"/>241 </svg>242 <div class="title">Budget for</div>243 <div class="spacer"></div>244 <div class="value-right">All Expenses</div>245 <svg class="chev" viewBox="0 0 24 24">246 <path class="muted" d="M9 6l6 6-6 6" fill="none" stroke="#90A4AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>247 </svg>248 </div>249 250 <!-- Recurrence -->251 <div class="list-row">252 <svg class="field-icon" viewBox="0 0 24 24">253 <rect x="3" y="5" width="18" height="15" rx="2" class="accent"/>254 <rect x="5" y="9" width="14" height="9" fill="#121212"/>255 <rect x="7" y="11" width="3" height="3" fill="#18C4A1"/>256 <rect x="12" y="11" width="3" height="3" fill="#18C4A1"/>257 <rect x="17" y="11" width="3" height="3" fill="#18C4A1"/>258 </svg>259 <div class="title">Recurrence</div>260 <div class="spacer"></div>261 <div class="value-right">Monthly</div>262 <svg class="chev" viewBox="0 0 24 24">263 <path class="muted" d="M9 6l6 6-6 6" fill="none" stroke="#90A4AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>264 </svg>265 </div>266 267 <!-- Start Date -->268 <div class="list-row">269 <svg class="field-icon" viewBox="0 0 24 24">270 <polygon points="7,5 19,12 7,19" class="accent"/>271 <circle cx="6" cy="12" r="3" fill="#121212"/>272 </svg>273 <div class="title">Start Date</div>274 <div class="spacer"></div>275 <div class="value-right">Today</div>276 <svg class="chev" viewBox="0 0 24 24">277 <path class="muted" d="M9 6l6 6-6 6" fill="none" stroke="#90A4AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>278 </svg>279 </div>280 </div>281 282 <!-- CTA -->283 <div class="cta-bar">Create a New Budget</div>284 285 <!-- Keypad -->286 <div class="keypad">287 <div class="key">1</div>288 <div class="key">2</div>289 <div class="key">3</div>290 <div class="key operator">÷</div>291 292 <div class="key">4</div>293 <div class="key">5</div>294 <div class="key">6</div>295 <div class="key operator">×</div>296 297 <div class="key">7</div>298 <div class="key">8</div>299 <div class="key">9</div>300 <div class="key operator">−</div>301 302 <div class="key">.</div>303 <div class="key">0</div>304 <div class="key">305 <svg width="54" height="34" viewBox="0 0 24 14">306 <path fill="#E7ECEF" d="M2 2h14l4 5-4 5H2z"/>307 <path d="M11 4l-3 3 3 3" fill="none" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>308 </svg>309 </div>310 <div class="key operator">+</div>311 </div>312 313 <div class="home-indicator"></div>314</div>315</body>316</html>