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 :root{9 --bg:#121516;10 --text:#D7E1E5;11 --muted:#8EA0A7;12 --line:#2A3439;13 --tile:#2F3A40;14 --tileLine:#3B474D;15 --accent:#19C7A6;16 --accent-strong:#17B698;17 --white:#ffffff;18 }19 body{ margin:0; padding:0; background:transparent; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }20 #render-target{21 position:relative;22 overflow:hidden;23 width:1080px;24 height:2400px;25 background:var(--bg);26 color:var(--text);27 }28 /* Top area */29 .status-spacer{ height:92px; }30 .topbar{31 height:120px;32 display:flex;33 align-items:center;34 padding:0 36px;35 position:relative;36 border-bottom:1px solid var(--line);37 }38 .topbar h1{39 margin:0;40 width:100%;41 text-align:center;42 font-size:54px;43 font-weight:600;44 letter-spacing:0.5px;45 color:var(--text);46 }47 .icon-btn{48 position:absolute;49 left:24px;50 top:50%;51 transform:translateY(-50%);52 width:72px; height:72px;53 display:flex; align-items:center; justify-content:center;54 cursor:default;55 }56 /* Form */57 .form{ padding: 24px 36px 0 36px; }58 .row{59 display:flex;60 align-items:flex-start;61 gap:24px;62 padding:28px 0;63 }64 .row+.row{ border-top:1px solid var(--line); }65 .l-icon{66 width:72px; height:72px; min-width:72px;67 display:flex; align-items:center; justify-content:center;68 }69 .field{70 flex:1;71 }72 .label{73 font-size:26px; color:var(--muted); margin-bottom:14px;74 }75 .value{76 font-size:42px; color:var(--text); letter-spacing:1px;77 padding-bottom:18px; border-bottom:1px solid var(--line);78 }79 .split{80 display:grid;81 grid-template-columns: 1fr 1fr;82 gap:36px;83 }84 .mini .value{ border-bottom:1px solid var(--line); }85 .right-val{86 font-size:36px; color:#B7C4C9;87 margin-left:auto;88 }89 .list-row{90 display:flex; align-items:center; gap:24px;91 padding:34px 0;92 border-top:1px solid var(--line);93 }94 .list-row .title{95 font-size:36px; color:var(--text);96 }97 .chev{98 margin-left:auto; display:flex; align-items:center; gap:18px; color:#ACBBC0; font-size:34px;99 }100 /* Sticky create bar */101 .create-bar{102 position:absolute; left:0; right:0;103 bottom:880px; /* sits just above keypad */104 background:var(--accent);105 height:120px; display:flex; align-items:center; justify-content:center;106 font-size:42px; font-weight:600; color:var(--white);107 }108 /* Keypad */109 .keypad{110 position:absolute;111 left:0; right:0; bottom:80px;112 width:100%;113 height:780px;114 display:grid;115 grid-template-columns: repeat(4, 1fr);116 grid-auto-rows: 195px;117 border-top:1px solid var(--tileLine);118 }119 .key{120 display:flex; align-items:center; justify-content:center;121 font-size:64px; color:#EAF2F5;122 background:var(--tile);123 border-right:1px solid var(--tileLine);124 border-bottom:1px solid var(--tileLine);125 }126 .key:nth-child(4n){ border-right:none; }127 /* Home indicator */128 .home-indicator{129 position:absolute; bottom:24px; left:50%; transform:translateX(-50%);130 width:360px; height:12px; background:#E6E6E6; border-radius:12px; opacity:0.85;131 }132 /* SVG defaults */133 svg{ display:block; }134</style>135</head>136<body>137<div id="render-target">138 139 <div class="status-spacer"></div>140 141 <div class="topbar">142 <div class="icon-btn">143 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">144 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#9AA7AE" stroke-width="2.2" stroke-linecap="round"/>145 </svg>146 </div>147 <h1>Add New Budget</h1>148 </div>149 150 <div class="form">151 <!-- Budget Name -->152 <div class="row" style="padding-top:36px;">153 <div class="l-icon">154 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">155 <path d="M7 7c0-1.5 1.2-2.5 2.7-2.8l.3-1.2h4l.3 1.2C15.8 4.5 17 5.5 17 7" stroke="none" fill="var(--accent)"/>156 <path d="M4 10c.7-2 2.7-3 8-3s7.3 1 8 3c.5 1.6-.2 3.7-1.5 5.2C16.9 19.6 7.1 19.6 5.5 15.2 4.2 13.7 3.5 11.6 4 10z" fill="var(--accent)"/>157 <circle cx="12" cy="13" r="2" fill="#0c4"/>158 </svg>159 </div>160 <div class="field">161 <div class="label">Budget Name</div>162 <div class="value" style="border-bottom:1px solid var(--line);">JULY</div>163 </div>164 </div>165 166 <!-- Amount + Currency -->167 <div class="row split" style="padding-top:40px;">168 <div class="l-icon">169 <svg width="44" height="44" viewBox="0 0 24 24" fill="var(--accent)">170 <rect x="3" y="7" width="18" height="10" rx="2"/>171 <rect x="5" y="9" width="4" height="2" fill="#0c4"/>172 <rect x="11" y="9" width="8" height="2" fill="#0c4"/>173 </svg>174 </div>175 <div class="field mini" style="grid-column:1 / span 1;">176 <div class="label">Amount</div>177 <div class="value">1</div>178 </div>179 <div class="field mini" style="grid-column:2 / span 1; position:relative;">180 <div class="label">Currency</div>181 <div class="value" style="display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line);">182 <span>INR</span>183 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">184 <path d="M9 6l6 6-6 6" stroke="#9FB0B6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>185 </svg>186 </div>187 </div>188 </div>189 190 <!-- Wallets -->191 <div class="list-row">192 <div class="l-icon">193 <svg width="44" height="44" viewBox="0 0 24 24" fill="var(--accent)">194 <rect x="3" y="6" width="18" height="12" rx="2"/>195 <rect x="12" y="10" width="6" height="4" rx="1" fill="#0c4"/>196 </svg>197 </div>198 <div class="title">Wallets</div>199 <div class="chev">200 <span>All Wallets</span>201 <svg width="26" height="26" viewBox="0 0 24 24" fill="none">202 <path d="M9 6l6 6-6 6" stroke="#9FB0B6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>203 </svg>204 </div>205 </div>206 207 <!-- Budget for -->208 <div class="list-row">209 <div class="l-icon">210 <svg width="44" height="44" viewBox="0 0 24 24" fill="var(--accent)">211 <circle cx="8" cy="9" r="3"/>212 <circle cx="16" cy="9" r="3"/>213 <circle cx="12" cy="15" r="3"/>214 </svg>215 </div>216 <div class="title">Budget for</div>217 <div class="chev">218 <span>All Expenses</span>219 <svg width="26" height="26" viewBox="0 0 24 24" fill="none">220 <path d="M9 6l6 6-6 6" stroke="#9FB0B6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>221 </svg>222 </div>223 </div>224 225 <!-- Recurrence -->226 <div class="list-row">227 <div class="l-icon">228 <svg width="44" height="44" viewBox="0 0 24 24" fill="var(--accent)">229 <rect x="3" y="4" width="18" height="16" rx="2"/>230 <rect x="7" y="2" width="2" height="4" fill="var(--bg)"/>231 <rect x="15" y="2" width="2" height="4" fill="var(--bg)"/>232 <rect x="6" y="10" width="12" height="2" fill="#0c4"/>233 </svg>234 </div>235 <div class="title">Recurrence</div>236 <div class="chev">237 <span>Monthly</span>238 <svg width="26" height="26" viewBox="0 0 24 24" fill="none">239 <path d="M9 6l6 6-6 6" stroke="#9FB0B6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>240 </svg>241 </div>242 </div>243 244 <!-- Start Date -->245 <div class="list-row">246 <div class="l-icon">247 <svg width="44" height="44" viewBox="0 0 24 24" fill="var(--accent)">248 <circle cx="12" cy="12" r="10"/>249 <path d="M10 8l6 4-6 4V8z" fill="var(--bg)"/>250 </svg>251 </div>252 <div class="title">Start Date</div>253 <div class="chev">254 <span>Today</span>255 <svg width="26" height="26" viewBox="0 0 24 24" fill="none">256 <path d="M9 6l6 6-6 6" stroke="#9FB0B6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>257 </svg>258 </div>259 </div>260 </div>261 262 <!-- Sticky create button -->263 <div class="create-bar">Create a New Budget</div>264 265 <!-- Keypad -->266 <div class="keypad">267 <div class="key">1</div>268 <div class="key">2</div>269 <div class="key">3</div>270 <div class="key">÷</div>271 272 <div class="key">4</div>273 <div class="key">5</div>274 <div class="key">6</div>275 <div class="key">×</div>276 277 <div class="key">7</div>278 <div class="key">8</div>279 <div class="key">9</div>280 <div class="key">−</div>281 282 <div class="key">.</div>283 <div class="key">0</div>284 <div class="key">285 <svg width="64" height="40" viewBox="0 0 24 24" fill="none">286 <path d="M4 12h10" stroke="#EAF2F5" stroke-width="2" stroke-linecap="round"/>287 <path d="M9 8l-5 4 5 4" stroke="#EAF2F5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>288 </svg>289 </div>290 <div class="key">+</div>291 </div>292 293 <div class="home-indicator"></div>294</div>295</body>296</html>