GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Budget For - Categories</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 10 /* Root render target */11 #render-target {12 width: 1080px;13 height: 2400px;14 position: relative;15 overflow: hidden;16 background: #0E0E0E; /* dark app background */17 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;18 color: #EDEDED;19 }20 21 /* Status bar */22 .status-bar {23 height: 110px;24 padding: 0 34px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #fff;29 font-size: 34px;30 letter-spacing: 1px;31 box-sizing: border-box;32 }33 .status-icons {34 display: flex;35 align-items: center;36 gap: 26px;37 }38 .status-icons svg { fill: #fff; }39 40 /* App header */41 .app-bar {42 height: 120px;43 display: flex;44 align-items: center;45 padding: 0 34px;46 box-sizing: border-box;47 }48 .back-icon {49 width: 44px; height: 44px; margin-right: 16px;50 }51 .title {52 font-size: 56px;53 font-weight: 700;54 }55 56 /* Content area */57 .content {58 padding: 40px 24px 140px 34px;59 box-sizing: border-box;60 }61 .subtle {62 color: #BDBDBD;63 font-size: 36px;64 margin-bottom: 28px;65 }66 67 /* List */68 .list {69 display: flex;70 flex-direction: column;71 gap: 26px;72 }73 .item {74 display: flex;75 align-items: center;76 justify-content: space-between;77 padding: 18px 6px;78 min-height: 132px;79 box-sizing: border-box;80 }81 .left {82 display: flex;83 align-items: center;84 gap: 28px;85 }86 .circle {87 width: 94px;88 height: 94px;89 border-radius: 50%;90 display: flex;91 align-items: center;92 justify-content: center;93 color: #fff;94 font-weight: 700;95 font-size: 34px;96 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15);97 }98 .label {99 font-size: 42px;100 color: #EAEAEA;101 }102 .check {103 width: 64px;104 height: 64px;105 background: #18C796;106 border-radius: 50%;107 display: flex;108 align-items: center;109 justify-content: center;110 box-shadow: 0 0 0 2px rgba(0,0,0,0.25) inset;111 }112 .check svg { width: 36px; height: 36px; }113 114 /* Icon circle colors (approximate to screenshot) */115 .c-beauty { background: #7D60FF; }116 .c-bills { background: #66C7B8; }117 .c-car { background: #62B1F5; }118 .c-edu { background: #4D89D6; }119 .c-ent { background: #FFA20D; }120 .c-family { background: #8DC6FF; }121 .c-food { background: #FFA946; }122 .c-gifts { background: #4CAF50; }123 .c-groceries { background: #D59063; }124 .c-health { background: #EE8D97; }125 .c-home { background: #B69157; }126 .c-other { background: #6D6D6D; }127 .c-shopping { background: #C679FF; }128 129 /* Bottom gesture bar */130 .gesture {131 position: absolute;132 bottom: 28px;133 left: 50%;134 transform: translateX(-50%);135 width: 320px;136 height: 10px;137 background: #E6E6E6;138 border-radius: 8px;139 opacity: 0.9;140 }141</style>142</head>143<body>144<div id="render-target">145 <!-- Status Bar -->146 <div class="status-bar">147 <div class="time">3:51</div>148 <div class="status-icons">149 <!-- Simple dot/circle icon -->150 <svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/></svg>151 <!-- Moon (Do Not Disturb style) -->152 <svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a8.8 8.8 0 0 0 0 20 9 9 0 0 1 0-20z"/></svg>153 <!-- Mail envelope -->154 <svg width="32" height="26" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18v12H3z"/><path fill="#0E0E0E" d="M3 6l9 7 9-7"/></svg>155 <!-- WiFi -->156 <svg width="34" height="26" viewBox="0 0 24 24" aria-hidden="true"><path d="M2 8a16 16 0 0 1 20 0M5 12a11 11 0 0 1 14 0M9 16a6 6 0 0 1 6 0"/><circle cx="12" cy="19" r="1.5" fill="#fff"/></svg>157 <!-- Battery -->158 <svg width="40" height="26" viewBox="0 0 28 16" aria-hidden="true">159 <rect x="1" y="3" width="22" height="10" rx="2" fill="none" stroke="#fff" stroke-width="2"/>160 <rect x="3" y="5" width="16" height="6" fill="#fff"/>161 <rect x="23" y="6" width="3" height="4" fill="#fff"/>162 </svg>163 </div>164 </div>165 166 <!-- App Bar -->167 <div class="app-bar">168 <svg class="back-icon" viewBox="0 0 24 24" aria-hidden="true">169 <path d="M15 19L8 12l7-7" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>170 </svg>171 <div class="title">Budget for</div>172 </div>173 174 <!-- Content -->175 <div class="content">176 <div class="subtle">Select all</div>177 178 <div class="list">179 <!-- Beauty -->180 <div class="item">181 <div class="left">182 <div class="circle c-beauty">✿</div>183 <div class="label">Beauty</div>184 </div>185 <div class="check" aria-hidden="true">186 <svg viewBox="0 0 24 24">187 <path d="M4 12l5 5 11-11" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>188 </svg>189 </div>190 </div>191 192 <!-- Bills & Fees -->193 <div class="item">194 <div class="left">195 <div class="circle c-bills">≋</div>196 <div class="label">Bills & Fees</div>197 </div>198 <div class="check">199 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>200 </div>201 </div>202 203 <!-- Car -->204 <div class="item">205 <div class="left">206 <div class="circle c-car">🚗</div>207 <div class="label">Car</div>208 </div>209 <div class="check">210 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>211 </div>212 </div>213 214 <!-- Education -->215 <div class="item">216 <div class="left">217 <div class="circle c-edu">🎓</div>218 <div class="label">Education</div>219 </div>220 <div class="check">221 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>222 </div>223 </div>224 225 <!-- Entertainment -->226 <div class="item">227 <div class="left">228 <div class="circle c-ent">☺</div>229 <div class="label">Entertainment</div>230 </div>231 <div class="check">232 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>233 </div>234 </div>235 236 <!-- Family & Personal -->237 <div class="item">238 <div class="left">239 <div class="circle c-family">👤</div>240 <div class="label">Family & Personal</div>241 </div>242 <div class="check">243 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>244 </div>245 </div>246 247 <!-- Food & Drink -->248 <div class="item">249 <div class="left">250 <div class="circle c-food">🍴</div>251 <div class="label">Food & Drink</div>252 </div>253 <div class="check">254 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>255 </div>256 </div>257 258 <!-- Gifts -->259 <div class="item">260 <div class="left">261 <div class="circle c-gifts">🎁</div>262 <div class="label">Gifts</div>263 </div>264 <div class="check">265 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>266 </div>267 </div>268 269 <!-- Groceries -->270 <div class="item">271 <div class="left">272 <div class="circle c-groceries">🥐</div>273 <div class="label">Groceries</div>274 </div>275 <div class="check">276 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>277 </div>278 </div>279 280 <!-- Healthcare -->281 <div class="item">282 <div class="left">283 <div class="circle c-health">✚</div>284 <div class="label">Healthcare</div>285 </div>286 <div class="check">287 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>288 </div>289 </div>290 291 <!-- Home -->292 <div class="item">293 <div class="left">294 <div class="circle c-home">🏠</div>295 <div class="label">Home</div>296 </div>297 <div class="check">298 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>299 </div>300 </div>301 302 <!-- Other -->303 <div class="item">304 <div class="left">305 <div class="circle c-other">?</div>306 <div class="label">Other</div>307 </div>308 <div class="check">309 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>310 </div>311 </div>312 313 <!-- Shopping -->314 <div class="item">315 <div class="left">316 <div class="circle c-shopping">🛍</div>317 <div class="label">Shopping</div>318 </div>319 <div class="check">320 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>321 </div>322 </div>323 </div>324 </div>325 326 <!-- Bottom gesture bar -->327 <div class="gesture"></div>328</div>329</body>330</html>