GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Budget For - List</title>6<meta name="viewport" content="width=device-width, initial-scale=1.0">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: #0E0E0E;15    color: #EDEDED;16  }17 18  /* App bar */19  .app-bar {20    height: 160px;21    display: flex;22    align-items: center;23    padding: 0 40px;24  }25  .back {26    width: 56px;27    height: 56px;28    border-radius: 28px;29    display: flex;30    align-items: center;31    justify-content: center;32    margin-right: 18px;33  }34  .title {35    font-size: 48px;36    font-weight: 700;37    letter-spacing: 0.2px;38  }39 40  .hint {41    padding: 24px 40px 8px 40px;42    color: #B9B9B9;43    font-size: 34px;44  }45 46  .list {47    padding: 8px 24px 120px 24px;48  }49 50  .row {51    display: flex;52    align-items: center;53    padding: 28px 24px;54    margin: 12px 0;55    border-radius: 16px;56  }57 58  .icon-wrap {59    width: 96px;60    height: 96px;61    border-radius: 50%;62    display: flex;63    align-items: center;64    justify-content: center;65    flex: 0 0 auto;66    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);67  }68  .label {69    font-size: 40px;70    margin-left: 28px;71  }72 73  .radio {74    margin-left: auto;75    width: 54px;76    height: 54px;77    border-radius: 50%;78    border: 4px solid #B7C7D4;79    background: transparent;80  }81 82  /* colors for icons */83  .c-purple { background: #7D5DF0; }84  .c-teal { background: #4CC6A6; }85  .c-blue { background: #5BA9F2; }86  .c-navy { background: #3667C9; }87  .c-yellow { background: #F2A100; }88  .c-sky { background: #47A7E6; }89  .c-orange { background: #E28A43; }90  .c-green { background: #2FC075; }91  .c-rose { background: #E87486; }92  .c-brown { background: #B08D55; }93  .c-gray { background: #666A71; }94  .c-pink { background: #CE69F3; }95 96  /* bottom gesture bar */97  .gesture {98    position: absolute;99    left: 50%;100    bottom: 24px;101    transform: translateX(-50%);102    width: 300px;103    height: 12px;104    background: #EAEAEA;105    border-radius: 12px;106    opacity: 0.8;107  }108 109  /* simple SVG sizing */110  .icon-wrap svg { width: 56px; height: 56px; }111  .thin { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }112  .fill { fill: #fff; }113</style>114</head>115<body>116<div id="render-target">117  <div class="app-bar">118    <div class="back">119      <svg width="36" height="36" viewBox="0 0 24 24" class="thin"><path d="M14 5l-7 7 7 7"/><path d="M20 12H8"/></svg>120    </div>121    <div class="title">Budget for</div>122  </div>123 124  <div class="hint">Select all</div>125 126  <div class="list">127    <!-- Beauty -->128    <div class="row">129      <div class="icon-wrap c-purple">130        <svg viewBox="0 0 24 24" class="thin">131          <path d="M12 3c0 3-2 5-5 5 3 0 5 2 5 5 0-3 2-5 5-5-3 0-5-2-5-5z"/>132          <circle cx="12" cy="13" r="2" class="fill"></circle>133        </svg>134      </div>135      <div class="label">Beauty</div>136      <div class="radio"></div>137    </div>138 139    <!-- Bills & Fees -->140    <div class="row">141      <div class="icon-wrap c-teal">142        <svg viewBox="0 0 24 24" class="thin">143          <rect x="4" y="5" width="16" height="12" rx="2"></rect>144          <line x1="7" y1="9" x2="13" y2="9"></line>145          <line x1="7" y1="12" x2="11" y2="12"></line>146        </svg>147      </div>148      <div class="label">Bills & Fees</div>149      <div class="radio"></div>150    </div>151 152    <!-- Car -->153    <div class="row">154      <div class="icon-wrap c-blue">155        <svg viewBox="0 0 24 24" class="thin">156          <path d="M3 14l2-5h14l2 5"></path>157          <rect x="4" y="14" width="16" height="4" rx="1"></rect>158          <circle cx="8" cy="18" r="1.2" class="fill"></circle>159          <circle cx="16" cy="18" r="1.2" class="fill"></circle>160        </svg>161      </div>162      <div class="label">Car</div>163      <div class="radio"></div>164    </div>165 166    <!-- Education -->167    <div class="row">168      <div class="icon-wrap c-navy">169        <svg viewBox="0 0 24 24" class="thin">170          <path d="M2 9l10-5 10 5-10 5-10-5z"></path>171          <path d="M6 12v4c3 2 9 2 12 0v-4"></path>172        </svg>173      </div>174      <div class="label">Education</div>175      <div class="radio"></div>176    </div>177 178    <!-- Entertainment -->179    <div class="row">180      <div class="icon-wrap c-yellow">181        <svg viewBox="0 0 24 24" class="thin">182          <path d="M5 17c3.5 0 3.5-5 0-5 0 3.5 5 3.5 5 0-3.5 0-3.5 5 0 5"></path>183          <path d="M14 7h5v10h-5z"></path>184        </svg>185      </div>186      <div class="label">Entertainment</div>187      <div class="radio"></div>188    </div>189 190    <!-- Family & Personal -->191    <div class="row">192      <div class="icon-wrap c-sky">193        <svg viewBox="0 0 24 24" class="thin">194          <circle cx="12" cy="8" r="3"></circle>195          <path d="M5 20c1-4 5-5 7-5s6 1 7 5"></path>196        </svg>197      </div>198      <div class="label">Family & Personal</div>199      <div class="radio"></div>200    </div>201 202    <!-- Food & Drink -->203    <div class="row">204      <div class="icon-wrap c-yellow">205        <svg viewBox="0 0 24 24" class="thin">206          <path d="M6 3v10"></path>207          <path d="M10 3v10"></path>208          <path d="M6 8h4"></path>209          <path d="M15 3v7a4 4 0 0 0 4 4h0"></path>210        </svg>211      </div>212      <div class="label">Food & Drink</div>213      <div class="radio"></div>214    </div>215 216    <!-- Gifts -->217    <div class="row">218      <div class="icon-wrap c-green">219        <svg viewBox="0 0 24 24" class="thin">220          <rect x="3" y="9" width="18" height="10" rx="2"></rect>221          <path d="M12 5c-1.5-2-5-.8-3 1.5 1.2 1.5 3 1.5 3 1.5s1.8 0 3-1.5C17 4.2 13.5 3 12 5z"></path>222          <path d="M12 5v14"></path>223        </svg>224      </div>225      <div class="label">Gifts</div>226      <div class="radio"></div>227    </div>228 229    <!-- Groceries -->230    <div class="row">231      <div class="icon-wrap c-orange">232        <svg viewBox="0 0 24 24" class="thin">233          <path d="M5 10l2 9h10l2-9z"></path>234          <path d="M9 10V7a3 3 0 0 1 6 0v3"></path>235        </svg>236      </div>237      <div class="label">Groceries</div>238      <div class="radio"></div>239    </div>240 241    <!-- Healthcare -->242    <div class="row">243      <div class="icon-wrap c-rose">244        <svg viewBox="0 0 24 24" class="thin">245          <rect x="4" y="6" width="16" height="12" rx="3"></rect>246          <path d="M12 8v8"></path>247          <path d="M8 12h8"></path>248        </svg>249      </div>250      <div class="label">Healthcare</div>251      <div class="radio"></div>252    </div>253 254    <!-- Home -->255    <div class="row">256      <div class="icon-wrap c-brown">257        <svg viewBox="0 0 24 24" class="thin">258          <path d="M3 12l9-7 9 7"></path>259          <rect x="6" y="12" width="12" height="8" rx="1"></rect>260        </svg>261      </div>262      <div class="label">Home</div>263      <div class="radio"></div>264    </div>265 266    <!-- Other -->267    <div class="row">268      <div class="icon-wrap c-gray">269        <svg viewBox="0 0 24 24" class="thin">270          <circle cx="12" cy="12" r="8"></circle>271          <path d="M9.5 9a3 3 0 1 1 4.5 2.6c-.9.6-1.5 1-1.5 2.4"></path>272          <circle cx="12" cy="18" r="1" class="fill"></circle>273        </svg>274      </div>275      <div class="label">Other</div>276      <div class="radio"></div>277    </div>278 279    <!-- Shopping -->280    <div class="row">281      <div class="icon-wrap c-pink">282        <svg viewBox="0 0 24 24" class="thin">283          <path d="M5 9h14l-1.2 10H6.2L5 9z"></path>284          <path d="M8 9a4 4 0 0 1 8 0"></path>285          <text x="12" y="17" text-anchor="middle" font-size="8" fill="#fff">$</text>286        </svg>287      </div>288      <div class="label">Shopping</div>289      <div class="radio"></div>290    </div>291  </div>292 293  <div class="gesture"></div>294</div>295</body>296</html>