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>Budget for - Categories</title>7<style>8 :root{9 --bg:#111213;10 --text:#e9e9e9;11 --muted:#a7b0b6;12 --divider:#222428;13 --ring:#9fb1bd;14 --accent:#1abc9c;15 --green:#11c490;16 }17 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }18 #render-target{19 width:1080px; height:2400px; position:relative; overflow:hidden;20 background:var(--bg); color:var(--text);21 }22 23 /* Status bar */24 .status-bar{25 height:96px; padding:0 42px; display:flex; align-items:flex-end; justify-content:space-between;26 box-sizing:border-box; color:#eaeaea; font-weight:600;27 }28 .status-time{ font-size:38px; padding-bottom:12px; letter-spacing:0.5px;}29 .status-icons{ display:flex; gap:26px; align-items:center; padding-bottom:14px;}30 .icon{ width:36px; height:36px; opacity:0.95;}31 .icon svg{ width:100%; height:100%; fill:#eaeaea; }32 33 /* App bar */34 .app-bar{35 height:140px; display:flex; align-items:center; gap:18px; padding:0 34px;36 box-sizing:border-box;37 }38 .back{39 width:72px; height:72px; display:flex; align-items:center; justify-content:center; opacity:.95;40 }41 .title{ font-size:58px; font-weight:700; letter-spacing:0.2px; }42 43 /* Content area */44 .content{ height:2164px; overflow:hidden; box-sizing:border-box; padding:0 24px; }45 .select-row{46 display:flex; align-items:center; justify-content:space-between;47 padding:26px 14px 12px 14px; color:#d5dadd; font-size:36px;48 }49 .toggle-pill{50 width:72px; height:72px; border-radius:50%; background:var(--green); position:relative;51 display:flex; align-items:center; justify-content:center;52 }53 .toggle-pill:before{54 content:""; width:36px; height:6px; background:#fff; border-radius:4px; display:block;55 }56 57 /* List */58 .list{ margin-top:10px; padding-bottom:60px; }59 .item{60 display:flex; align-items:center; justify-content:space-between;61 padding:30px 12px; height:134px; box-sizing:border-box;62 border-bottom:1px solid transparent;63 }64 .left{65 display:flex; align-items:center; gap:28px; padding-left:12px;66 }67 .cat-icon{68 width:94px; height:94px; border-radius:50%; display:flex; align-items:center; justify-content:center;69 color:#fff; position:relative;70 }71 .cat-icon svg{ width:56px; height:56px; fill:#fff; opacity:.95; }72 .label{ font-size:44px; letter-spacing:0.2px; color:#e9eef1; }73 74 .check{75 width:64px; height:64px; border-radius:50%; box-sizing:border-box;76 border:4px solid var(--ring);77 }78 .check.selected{79 background:var(--green); border-color:var(--green); position:relative;80 }81 .check.selected:after{82 content:""; position:absolute; width:26px; height:14px; border-left:5px solid #fff; border-bottom:5px solid #fff;83 transform:rotate(-45deg); left:18px; top:18px;84 }85 86 /* Category color helpers */87 .c-purple{ background:#7a5cf2; }88 .c-teal{ background:#59c7b2; }89 .c-blue{ background:#56a7ef; }90 .c-navy{ background:#3e74c8; }91 .c-orange{ background:#ffb200; }92 .c-sky{ background:#4aa8e7; }93 .c-green{ background:#25c27a; }94 .c-amber{ background:#e08f3a; }95 .c-pink{ background:#e97b87; }96 .c-brown{ background:#b89452; }97 .c-grey{ background:#66686f; }98 .c-magenta{ background:#c061ff; }99 100 /* Bottom gesture bar */101 .gesture{102 position:absolute; left:50%; transform:translateX(-50%);103 bottom:24px; width:360px; height:10px; border-radius:6px; background:#e9e9e9; opacity:.85;104 }105</style>106</head>107<body>108<div id="render-target">109 110 <!-- Status Bar -->111 <div class="status-bar">112 <div class="status-time">3:54</div>113 <div class="status-icons">114 <!-- simple icons to mimic OS indicators -->115 <span class="icon" title="Do Not Disturb">116 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm-6 9h12v2H6v-2Z"/></svg>117 </span>118 <span class="icon" title="WiFi">119 <svg viewBox="0 0 24 24"><path d="M12 18a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm0-4c3 0 5.7 1.2 7.7 3.1l-1.4 1.4C16.8 12.9 7.2 12.9 5.7 18.5L4.3 17C6.3 15.2 9 14 12 14Zm0-4c4.7 0 8.9 1.8 12 4.7l-1.5 1.3C19.1 12.7 4.9 12.7 1.5 16L0 14.7C3.1 11.8 7.3 10 12 10Z"/></svg>120 </span>121 <span class="icon" title="Battery">122 <svg viewBox="0 0 24 24"><path d="M17 7h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2v2H3V5h14v2Z"/></svg>123 </span>124 </div>125 </div>126 127 <!-- App Bar -->128 <div class="app-bar">129 <div class="back">130 <svg width="44" height="44" viewBox="0 0 24 24" fill="#eaeaea"><path d="M15.5 19 9 12.5 15.5 6 17 7.5l-5 5 5 5z"/></svg>131 </div>132 <div class="title">Budget for</div>133 </div>134 135 <!-- Content -->136 <div class="content">137 <div class="select-row">138 <div>Select all</div>139 <div class="toggle-pill" aria-label="Select all toggle"></div>140 </div>141 142 <div class="list">143 <!-- Beauty -->144 <div class="item">145 <div class="left">146 <div class="cat-icon c-purple" aria-hidden="true">147 <svg viewBox="0 0 24 24"><path d="M12 3l2 4 4 1-3 3 .8 4-3.8-2-3.8 2 .8-4-3-3 4-1 2-4z"/></svg>148 </div>149 <div class="label">Beauty</div>150 </div>151 <div class="check" aria-label="unchecked"></div>152 </div>153 154 <!-- Bills & Fees -->155 <div class="item">156 <div class="left">157 <div class="cat-icon c-teal">158 <svg viewBox="0 0 24 24"><path d="M4 6h16v12H4V6zm2 2v8h12V8H6zm2 2h8v2H8v-2z"/></svg>159 </div>160 <div class="label">Bills & Fees</div>161 </div>162 <div class="check"></div>163 </div>164 165 <!-- Car -->166 <div class="item">167 <div class="left">168 <div class="cat-icon c-blue">169 <svg viewBox="0 0 24 24"><path d="M5 11l2-4h10l2 4v6h-2v-2H7v2H5v-6zm3-2l-1 2h10l-1-2H8zm0 6h8v-2H8v2z"/></svg>170 </div>171 <div class="label">Car</div>172 </div>173 <div class="check"></div>174 </div>175 176 <!-- Education -->177 <div class="item">178 <div class="left">179 <div class="cat-icon c-navy">180 <svg viewBox="0 0 24 24"><path d="M2 9l10-5 10 5-10 5-10-5zm3 4.5v3l7 3 7-3v-3l-7 3-7-3z"/></svg>181 </div>182 <div class="label">Education</div>183 </div>184 <div class="check"></div>185 </div>186 187 <!-- Entertainment -->188 <div class="item">189 <div class="left">190 <div class="cat-icon c-orange">191 <svg viewBox="0 0 24 24"><path d="M4 6h16v12H4zM8 8v8l6-4-6-4z"/></svg>192 </div>193 <div class="label">Entertainment</div>194 </div>195 <div class="check"></div>196 </div>197 198 <!-- Family & Personal -->199 <div class="item">200 <div class="left">201 <div class="cat-icon c-sky">202 <svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-7 8c0-3.3 2.7-6 6-6h2c3.3 0 6 2.7 6 6H5z"/></svg>203 </div>204 <div class="label">Family & Personal</div>205 </div>206 <div class="check"></div>207 </div>208 209 <!-- Food & Drink (selected) -->210 <div class="item">211 <div class="left">212 <div class="cat-icon c-orange">213 <svg viewBox="0 0 24 24"><path d="M7 3h2v8a3 3 0 1 1-2 0V3zm8 0h2v7h-2V3zm-1 7h4v11h-4V10z"/></svg>214 </div>215 <div class="label">Food & Drink</div>216 </div>217 <div class="check selected" aria-label="selected"></div>218 </div>219 220 <!-- Gifts -->221 <div class="item">222 <div class="left">223 <div class="cat-icon c-green">224 <svg viewBox="0 0 24 24"><path d="M2 10h20v10H2V10zm2 0V8h6V6a2 2 0 1 0-4 0H4a3 3 0 0 1 6-2 3 3 0 0 1 6 2h-2a2 2 0 1 0-4 0v2h6v2H4z"/></svg>225 </div>226 <div class="label">Gifts</div>227 </div>228 <div class="check"></div>229 </div>230 231 <!-- Groceries -->232 <div class="item">233 <div class="left">234 <div class="cat-icon c-amber">235 <svg viewBox="0 0 24 24"><path d="M7 4h12l-2 10H7L5 6H3V4h4zm1 12h10v2H8v-2zm2 3a2 2 0 1 1-4 0h4zm10 0a2 2 0 1 1-4 0h4z"/></svg>236 </div>237 <div class="label">Groceries</div>238 </div>239 <div class="check"></div>240 </div>241 242 <!-- Healthcare -->243 <div class="item">244 <div class="left">245 <div class="cat-icon c-pink">246 <svg viewBox="0 0 24 24"><path d="M10 2h4v6h6v4h-6v6h-4v-6H4V8h6V2z"/></svg>247 </div>248 <div class="label">Healthcare</div>249 </div>250 <div class="check"></div>251 </div>252 253 <!-- Home -->254 <div class="item">255 <div class="left">256 <div class="cat-icon c-brown">257 <svg viewBox="0 0 24 24"><path d="M12 5l9 7h-3v7h-5v-5H11v5H6v-7H3l9-7z"/></svg>258 </div>259 <div class="label">Home</div>260 </div>261 <div class="check"></div>262 </div>263 264 <!-- Other -->265 <div class="item">266 <div class="left">267 <div class="cat-icon c-grey">268 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>269 </div>270 <div class="label">Other</div>271 </div>272 <div class="check"></div>273 </div>274 275 <!-- Shopping -->276 <div class="item">277 <div class="left">278 <div class="cat-icon c-magenta">279 <svg viewBox="0 0 24 24"><path d="M7 7V5a5 5 0 1 1 10 0v2h3v13H4V7h3zm2 0h6V5a3 3 0 1 0-6 0v2z"/></svg>280 </div>281 <div class="label">Shopping</div>282 </div>283 <div class="check"></div>284 </div>285 </div>286 </div>287 288 <!-- Bottom gesture bar -->289 <div class="gesture"></div>290</div>291</body>292</html>