GD-ML/AndroidCode

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>Category Modal UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #FFFFFF;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 96px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 32px;30    box-sizing: border-box;31    color: #fff;32    font-weight: 600;33    font-size: 34px;34    opacity: 0.95;35  }36  .sb-left { display: flex; align-items: center; gap: 12px; }37  .sb-right { display: flex; align-items: center; gap: 18px; }38  .sb-icon {39    width: 30px; height: 30px; border-radius: 50%;40    background: #9E9E9E;41    opacity: 0.9;42  }43  .battery {44    display: flex; align-items: center; gap: 6px; font-size: 30px;45  }46  .battery .icon {47    width: 40px; height: 24px; border: 2px solid #BDBDBD; border-radius: 4px; position: relative;48  }49  .battery .icon::after {50    content: ""; position: absolute; right: -6px; top: 6px; width: 4px; height: 12px; background: #BDBDBD; border-radius: 1px;51  }52  .battery .level {53    position: absolute; left: 2px; top: 2px; height: 18px; width: 28px; background: #FFFFFF; border-radius: 2px;54  }55 56  /* Underlay content preview */57  .underlay {58    position: absolute;59    top: 120px;60    left: 0;61    right: 0;62    bottom: 0;63    padding: 24px 24px 140px;64    box-sizing: border-box;65  }66  .underlay .product {67    width: 460px; height: 360px;68    background: #E0E0E0;69    border: 1px solid #BDBDBD;70    display: flex; justify-content: center; align-items: center;71    color: #757575; font-size: 32px; font-weight: 600;72    border-radius: 24px;73    overflow: hidden;74  }75  .underlay .row { display: flex; gap: 24px; margin-bottom: 32px; }76  .dim { opacity: 0.15; } /* darkened behind modal */77 78  /* Modal sheet */79  .modal {80    position: absolute;81    left: 64px;82    right: 64px;83    top: 160px;84    bottom: 220px;85    background: #2B2B2B;86    border-radius: 28px;87    box-shadow: 0 40px 80px rgba(0,0,0,0.6);88    overflow: hidden;89  }90 91  .modal-header {92    height: 140px;93    border-bottom: 1px solid #444;94    position: relative;95    display: flex;96    align-items: center;97    justify-content: center;98  }99  .modal-header .title {100    font-size: 58px;101    font-weight: 800;102    letter-spacing: 0.5px;103  }104  .back-btn {105    position: absolute;106    left: 28px;107    top: 50%;108    transform: translateY(-50%);109    width: 72px; height: 72px;110    display: flex; align-items: center; justify-content: center;111    border-radius: 36px;112  }113  .back-btn svg { width: 42px; height: 42px; }114 115  .list {116    position: absolute;117    left: 0; right: 0;118    top: 140px; bottom: 180px;119    overflow-y: auto;120    padding: 8px 28px 24px;121    box-sizing: border-box;122  }123  .item {124    display: flex; align-items: center;125    padding: 30px 12px;126    font-size: 38px;127    line-height: 44px;128    color: #EAEAEA;129    font-weight: 600;130  }131  .item + .divider { margin-top: 8px; }132  .divider {133    height: 1px; background: #474747; margin: 10px 0 2px;134  }135  .radio {136    width: 44px; height: 44px; min-width: 44px;137    border-radius: 50%;138    border: 3px solid #CFCFCF;139    margin-right: 24px;140    position: relative;141    box-sizing: border-box;142  }143  .selected { color: #FFFFFF; }144  .selected .radio {145    border-color: #5E87FF;146  }147  .selected .radio::after {148    content: "";149    position: absolute; left: 50%; top: 50%;150    transform: translate(-50%, -50%);151    width: 18px; height: 18px; border-radius: 50%;152    background: #5E87FF;153  }154 155  .modal-footer {156    position: absolute;157    left: 24px; right: 24px; bottom: 16px;158    padding: 16px 0 24px;159    box-sizing: border-box;160    background: transparent;161  }162  .cta {163    height: 120px;164    background: #5E87FF;165    border-radius: 60px;166    display: flex; align-items: center; justify-content: center;167    color: #FFFFFF; font-size: 42px; font-weight: 800;168    letter-spacing: 0.2px;169    box-shadow: 0 8px 16px rgba(94,135,255,0.35);170  }171 172  /* Subtle scroll bar styling for realism */173  .list::-webkit-scrollbar { width: 8px; }174  .list::-webkit-scrollbar-thumb {175    background: #4A4A4A; border-radius: 8px;176  }177  .list::-webkit-scrollbar-track { background: transparent; }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Status bar -->184  <div class="status-bar">185    <div class="sb-left">186      <span>1:38</span>187    </div>188    <div class="sb-right">189      <div class="sb-icon"></div>190      <div class="sb-icon"></div>191      <div class="sb-icon"></div>192      <div class="battery">193        <div class="icon"><div class="level"></div></div>194        <span>100%</span>195      </div>196    </div>197  </div>198 199  <!-- Underlay page preview -->200  <div class="underlay dim">201    <div class="row">202      <div class="product">[IMG: Tool Kit Case]</div>203    </div>204    <div class="row" style="margin-top: 620px;">205      <div class="product">[IMG: Screwdriver Set]</div>206    </div>207  </div>208 209  <!-- Modal sheet -->210  <div class="modal">211    <div class="modal-header">212      <div class="back-btn">213        <svg viewBox="0 0 32 32">214          <path d="M20 6 L8 16 L20 26" stroke="#FFFFFF" stroke-width="3.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>215        </svg>216      </div>217      <div class="title">Category</div>218    </div>219 220    <div class="list">221      <div class="item selected">222        <div class="radio"></div>223        <div>Tools &amp; Workshop Equipment</div>224      </div>225      <div class="divider"></div>226 227      <div class="item">228        <div class="radio"></div>229        <div>Hand Tools</div>230      </div>231      <div class="divider"></div>232 233      <div class="item">234        <div class="radio"></div>235        <div>Power Tool &amp; Air Tool Accessories</div>236      </div>237      <div class="divider"></div>238 239      <div class="item">240        <div class="radio"></div>241        <div>Power Tools</div>242      </div>243      <div class="divider"></div>244 245      <div class="item">246        <div class="radio"></div>247        <div>Tool Boxes &amp; Storage</div>248      </div>249      <div class="divider"></div>250 251      <div class="item">252        <div class="radio"></div>253        <div>Other Tools &amp; Workshop Equipment</div>254      </div>255      <div class="divider"></div>256 257      <div class="item">258        <div class="radio"></div>259        <div>Measuring &amp; Layout Tools</div>260      </div>261      <div class="divider"></div>262 263      <div class="item">264        <div class="radio"></div>265        <div>Hand Tool Accessories</div>266      </div>267      <div class="divider"></div>268 269      <div class="item">270        <div class="radio"></div>271        <div>Air Tools &amp; Air Compressors</div>272      </div>273      <div class="divider"></div>274 275      <div class="item">276        <div class="radio"></div>277        <div>Workshop Equipment</div>278      </div>279      <div class="divider"></div>280 281      <div class="item">282        <div class="radio"></div>283        <div>Power Tool &amp; Air Tool Replacement Parts</div>284      </div>285      <div class="divider"></div>286 287      <div class="item">288        <div class="radio"></div>289        <div>Hand Tool Replacement Parts</div>290      </div>291      <div class="divider"></div>292 293      <div class="item" style="padding-bottom: 34px;">294        <div class="radio"></div>295        <div>Cell Phones &amp; Accessories</div>296      </div>297    </div>298 299    <div class="modal-footer">300      <div class="cta">Show 14,000+ results</div>301    </div>302  </div>303 304</div>305</body>306</html>