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>Fashion Grid</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#111; }9  * { box-sizing: border-box; }10 11  #render-target {12    width: 1080px;13    height: 2400px;14    position: relative;15    overflow: hidden;16    background: #ffffff;17  }18 19  /* Status bar */20  .statusbar {21    height: 96px;22    padding: 0 32px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color:#111;27  }28  .statusbar .time { font-weight: 600; font-size: 34px; letter-spacing: 0.5px; }29  .status-icons { display: flex; gap: 22px; align-items: center; }30  .status-icons svg { width: 40px; height: 40px; }31 32  /* Top dual titles */33  .top-dual {34    display: grid;35    grid-template-columns: 1fr 1fr;36    gap: 24px;37    padding: 0 24px 8px 24px;38  }39  .dual-item .title {40    font-size: 42px;41    font-weight: 600;42    line-height: 1.15;43    color:#1a1a1a;44    margin-top: 6px;45  }46  .dual-item .chips {47    display: flex;48    align-items: center;49    gap: 14px;50    margin-top: 6px;51  }52  .chip {53    font-size: 26px;54    color:#6b6b6b;55    padding: 4px 8px;56    border: 1px solid #d0d0d0;57    border-radius: 10px;58  }59  .chip.small { padding: 2px 6px; font-size: 24px; }60  .dot {61    width: 22px; height: 22px; border-radius: 50%;62    display: inline-block;63    border: 1px solid #bdbdbd;64    background: #e5e5e5;65  }66  .dot.black { background:#111; border-color: #111; }67  .dot.gray { background:#9e9e9e; border-color:#9e9e9e; }68  .dot.separator { background:#9e9e9e; opacity: .4; width: 10px; height: 10px; border-radius: 50%; }69  .dual-item .price {70    margin-top: 8px;71    font-weight: 700;72    font-size: 40px;73  }74 75  /* Product grid */76  .grid {77    padding: 16px 24px 0 24px;78    display: grid;79    grid-template-columns: 1fr 1fr;80    gap: 28px;81  }82  .card .img,83  .only-img {84    width: 100%;85    height: 760px;86    background: #E0E0E0;87    border: 1px solid #BDBDBD;88    display: flex;89    align-items: center;90    justify-content: center;91    color: #757575;92    font-size: 30px;93    text-align: center;94    padding: 16px;95  }96  .card .name {97    margin-top: 24px;98    font-size: 40px;99    font-weight: 500;100    color:#222;101  }102  .card .price {103    margin-top: 8px;104    font-size: 44px;105    font-weight: 700;106  }107 108  /* Banner */109  .banner {110    margin: 40px 24px 0 24px;111    position: relative;112    height: 600px;113    border: 1px solid #BDBDBD;114    background: #E0E0E0;115    overflow: hidden;116  }117  .banner .banner-img {118    position: absolute;119    inset: 0;120    display:flex;121    align-items:center;122    justify-content:center;123    color:#757575;124    font-size: 34px;125    text-align:center;126    padding: 16px;127  }128  .banner .banner-text {129    position: absolute;130    left: 36px;131    right: 36px;132    bottom: 34px;133    color: #ffffff;134    text-shadow: 0 2px 10px rgba(0,0,0,0.35);135  }136  .banner .big {137    font-size: 86px;138    font-weight: 700;139    letter-spacing: 1px;140  }141  .banner .small {142    margin-top: 10px;143    font-size: 34px;144    font-weight: 600;145    letter-spacing: 1px;146  }147 148  /* Next row preview */149  .grid-small {150    padding: 18px 24px 0 24px;151    grid-template-columns: 1fr 1fr;152    gap: 26px;153  }154  .grid-small .only-img {155    height: 300px;156  }157 158  /* Tab bar */159  .tabbar {160    position: absolute;161    left: 0; right: 0; bottom: 60px;162    height: 190px;163    border-top: 1px solid #E5E5E5;164    background: #ffffff;165    display: grid;166    grid-template-columns: repeat(4, 1fr);167    align-items: center;168    padding: 10px 30px 8px 30px;169  }170  .tab {171    display: flex;172    flex-direction: column;173    align-items: center;174    gap: 10px;175    color:#7b7b7b;176    font-size: 30px;177  }178  .tab svg { width: 72px; height: 72px; }179  .tab.active { color:#111; }180  .tab.active svg path, .tab.active svg circle { stroke:#111; fill: none; }181 182  .bag-wrapper { position: relative; }183  .badge {184    position: absolute;185    top: -6px; right: -6px;186    width: 40px; height: 40px;187    background: #111;188    color:#fff;189    border-radius: 50%;190    display:flex; align-items:center; justify-content:center;191    font-size: 24px; font-weight: 700;192  }193 194  /* Home indicator */195  .home-indicator {196    position: absolute;197    bottom: 14px; left: 50%;198    transform: translateX(-50%);199    width: 320px; height: 14px;200    background:#111; border-radius: 10px; opacity: 0.9;201  }202</style>203</head>204<body>205<div id="render-target">206 207  <!-- Status bar -->208  <div class="statusbar">209    <div class="time">8:23</div>210    <div class="status-icons">211      <!-- Network/Wi-Fi -->212      <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.8">213        <path d="M2 9c5-5 15-5 20 0" />214        <path d="M5 12c3.5-3.5 10.5-3.5 14 0" />215        <path d="M8 15c2-2 6-2 8 0" />216        <circle cx="12" cy="18" r="1.4" fill="#111" stroke="none"/>217      </svg>218      <!-- Battery -->219      <svg viewBox="0 0 30 24" fill="none" stroke="#111" stroke-width="2">220        <rect x="2" y="6" width="22" height="12" rx="2"></rect>221        <rect x="4" y="8" width="14" height="8" fill="#111" stroke="none"></rect>222        <rect x="24" y="9" width="3" height="6" rx="1" fill="#111" stroke="none"></rect>223      </svg>224    </div>225  </div>226 227  <!-- Thin divider mimic -->228  <div style="height:1px;background:#eee;"></div>229 230  <!-- Dual top titles -->231  <div class="top-dual">232    <div class="dual-item">233      <div class="title">Midi Mesh Dress With</div>234      <div class="chips">235        <span class="chip small">ib</span>236        <span class="dot black"></span>237        <span class="dot gray"></span>238        <span class="dot"></span>239        <span class="chip">🌐</span>240        <span class="dot separator"></span>241      </div>242      <div class="price">₹1,590</div>243    </div>244    <div class="dual-item">245      <div class="title">Gathered Bodycon Dress</div>246      <div class="price">₹1,990</div>247    </div>248  </div>249 250  <!-- First product grid -->251  <div class="grid">252    <div class="card">253      <div class="img">[IMG: Pink bodycon dress on model]</div>254      <div class="name">Patchwork Bodycon Dress</div>255      <div class="price">₹1,290</div>256    </div>257    <div class="card">258      <div class="img">[IMG: Lavender maxi gathered cami dress]</div>259      <div class="name">Maxi Gathered Cami Dress</div>260      <div class="price">₹3,090</div>261    </div>262  </div>263 264  <!-- Banner -->265  <div class="banner">266    <div class="banner-img">[IMG: Street fashion banner with trench coat and cafe]</div>267    <div class="banner-text">268      <div class="big">Luxe List</div>269      <div class="small">THE ULTIMATE PIECES FROM A‑W’23 ></div>270    </div>271  </div>272 273  <!-- Next row preview (cropped in screenshot) -->274  <div class="grid grid-small">275    <div class="only-img">[IMG: Sleeveless top in light grey]</div>276    <div class="only-img">[IMG: Blazer in lilac]</div>277  </div>278 279  <!-- Bottom navigation -->280  <div class="tabbar">281    <div class="tab active">282      <svg viewBox="0 0 48 48" fill="none" stroke="#7b7b7b" stroke-width="3" stroke-linejoin="round">283        <path d="M8 22 L24 10 L40 22 V40 H28 V30 H20 V40 H8 Z"></path>284      </svg>285      <span>Home</span>286    </div>287    <div class="tab">288      <svg viewBox="0 0 48 48" fill="none" stroke="#7b7b7b" stroke-width="3" stroke-linecap="round">289        <circle cx="20" cy="20" r="10"></circle>290        <path d="M30 30 L40 40"></path>291      </svg>292      <span>Menu</span>293    </div>294    <div class="tab">295      <div class="bag-wrapper">296        <svg viewBox="0 0 48 48" fill="none" stroke="#7b7b7b" stroke-width="3" stroke-linejoin="round">297          <path d="M10 18 H38 L36 40 H12 Z"></path>298          <path d="M16 18 C16 13 20 10 24 10 C28 10 32 13 32 18"></path>299        </svg>300        <span class="badge">1</span>301      </div>302      <span>Bag</span>303    </div>304    <div class="tab">305      <svg viewBox="0 0 48 48" fill="none" stroke="#7b7b7b" stroke-width="3" stroke-linecap="round">306        <circle cx="24" cy="18" r="7"></circle>307        <path d="M10 40 C12 31 36 31 38 40"></path>308      </svg>309      <span>Me</span>310    </div>311  </div>312 313  <div class="home-indicator"></div>314</div>315</body>316</html>