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>Popular categories</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: #ffffff;15    color: #111;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    height: 96px;22    padding: 0 32px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #111;27  }28  .status-left {29    display: flex;30    align-items: center;31    gap: 20px;32  }33  .time {34    font-size: 44px;35    font-weight: 600;36    letter-spacing: 1px;37  }38  .status-dot, .status-pill {39    background: #000;40    border-radius: 50%;41  }42  .status-dot { width: 22px; height: 22px; opacity: 0.75; }43  .status-pill {44    width: 38px; height: 38px; border-radius: 19px;45    display: flex; align-items: center; justify-content: center;46    color: #fff; font-size: 26px; font-weight: 700;47    background: #e0e0e0; color: #222;48  }49  .status-right {50    display: flex;51    align-items: center;52    gap: 22px;53    color: #333;54  }55  .status-right svg { width: 44px; height: 44px; }56 57  /* Heading */58  .heading {59    font-family: Georgia, "Times New Roman", serif;60    font-size: 92px;61    line-height: 1.1;62    font-weight: 600;63    margin: 8px 48px 24px 48px;64    letter-spacing: 0.5px;65  }66 67  /* Grid of categories */68  .grid {69    padding: 0 48px;70    display: grid;71    grid-template-columns: repeat(2, 1fr);72    grid-column-gap: 24px;73    grid-row-gap: 44px;74  }75  .card {}76  .img {77    width: 100%;78    height: 560px;79    background: #E0E0E0;80    border: 1px solid #BDBDBD;81    display: flex;82    align-items: center;83    justify-content: center;84    color: #757575;85    font-size: 40px;86    text-align: center;87  }88  .title {89    margin-top: 20px;90    font-weight: 900;91    letter-spacing: 6px;92    font-size: 54px;93  }94  .more {95    margin-top: 14px;96    color: #444;97    font-size: 42px;98  }99 100  /* Banner below categories */101  .banner {102    width: calc(100% - 96px);103    height: 230px;104    margin: 40px 48px 260px 48px; /* leave room for tab bar */105    background: #E0E0E0;106    border: 1px solid #BDBDBD;107    display: flex;108    align-items: center;109    justify-content: center;110    color: #757575;111    font-size: 40px;112  }113 114  /* Bottom navigation */115  .tabbar {116    position: absolute;117    left: 0; right: 0;118    bottom: 60px; /* safe area for home indicator */119    height: 180px;120    border-top: 1px solid #e5e5e5;121    background: #fff;122    display: flex;123    align-items: center;124    justify-content: space-around;125    padding: 0 20px;126    z-index: 3;127  }128  .tab {129    width: 200px;130    display: flex;131    flex-direction: column;132    align-items: center;133    gap: 14px;134    color: #9E9E9E;135    font-size: 36px;136  }137  .tab svg { width: 64px; height: 64px; }138  .tab.active { color: #111; }139  .bag {140    position: relative;141  }142  .badge {143    position: absolute;144    top: -6px;145    right: -10px;146    background: #111;147    color: #fff;148    width: 40px; height: 40px;149    border-radius: 20px;150    font-size: 28px;151    display: flex; align-items: center; justify-content: center;152  }153 154  /* Home indicator area */155  .safe-area {156    position: absolute;157    left: 0; right: 0;158    bottom: 0;159    height: 60px;160    background: #000;161    z-index: 1;162  }163  .home-indicator {164    position: absolute;165    left: 50%;166    bottom: 18px;167    transform: translateX(-50%);168    width: 360px;169    height: 12px;170    border-radius: 6px;171    background: #ffffff;172    opacity: 0.95;173    z-index: 2;174  }175</style>176</head>177<body>178<div id="render-target">179  <!-- Status Bar -->180  <div class="status-bar">181    <div class="status-left">182      <div class="time">8:22</div>183      <div class="status-pill">ib</div>184      <div class="status-dot" style="opacity:.3;"></div>185      <div class="status-dot" style="opacity:.6;"></div>186      <div class="status-dot" style="opacity:.9;"></div>187      <div class="status-dot" style="width:10px;height:10px;opacity:.5;"></div>188    </div>189    <div class="status-right">190      <!-- Globe icon -->191      <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">192        <circle cx="12" cy="12" r="9"></circle>193        <path d="M3 12h18M12 3c3 4 3 14 0 18M12 3c-3 4-3 14 0 18"></path>194      </svg>195      <!-- WiFi icon -->196      <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">197        <path d="M2 8c5-5 15-5 20 0"></path>198        <path d="M5 11c3-3 11-3 14 0"></path>199        <path d="M8 14c2-2 6-2 8 0"></path>200        <circle cx="12" cy="18" r="1.5" fill="#333" stroke="none"></circle>201      </svg>202      <!-- Battery icon -->203      <svg viewBox="0 0 28 16" fill="none" stroke="#333" stroke-width="2">204        <rect x="1" y="3" width="22" height="10" rx="2"></rect>205        <rect x="24" y="6" width="3" height="4" rx="1" fill="#333" stroke="none"></rect>206        <rect x="3" y="5" width="18" height="6" fill="#333" stroke="none"></rect>207      </svg>208    </div>209  </div>210 211  <div class="heading">Popular categories</div>212 213  <div class="grid">214    <!-- Row 1 -->215    <div class="card">216      <div class="img">[IMG: Knitwear Model]</div>217      <div class="title">KNITWEAR</div>218      <div class="more">View more ></div>219    </div>220    <div class="card">221      <div class="img">[IMG: Dress Model]</div>222      <div class="title">DRESSES</div>223      <div class="more">View more ></div>224    </div>225    <!-- Row 2 -->226    <div class="card">227      <div class="img">[IMG: Denim Outfit]</div>228      <div class="title">DENIM</div>229      <div class="more">View more ></div>230    </div>231    <div class="card">232      <div class="img">[IMG: Sportswear Outfit]</div>233      <div class="title">SPORTSWEAR</div>234      <div class="more">View more ></div>235    </div>236  </div>237 238  <div class="banner">[IMG: Promotional Banner]</div>239 240  <!-- Bottom navigation -->241  <div class="tabbar">242    <div class="tab active">243      <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">244        <path d="M3 11l9-7 9 7"></path>245        <path d="M5 10v10h14V10"></path>246      </svg>247      <div>Home</div>248    </div>249    <div class="tab">250      <svg viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2">251        <circle cx="10" cy="10" r="6"></circle>252        <path d="M15 15l5 5"></path>253        <path d="M4 20h8"></path>254      </svg>255      <div>Menu</div>256    </div>257    <div class="tab">258      <div class="bag">259        <svg viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2">260          <path d="M6 9h12l-1 11H7L6 9z"></path>261          <path d="M9 9V7a3 3 0 0 1 6 0v2"></path>262        </svg>263        <div class="badge">1</div>264      </div>265      <div>Bag</div>266    </div>267    <div class="tab">268      <svg viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2">269        <circle cx="12" cy="8" r="4"></circle>270        <path d="M4 21c2-4 14-4 16 0"></path>271      </svg>272      <div>Me</div>273    </div>274  </div>275 276  <!-- Home indicator / safe area -->277  <div class="safe-area"></div>278  <div class="home-indicator"></div>279</div>280</body>281</html>