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>3-piece Tuxedo Search</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #212121;17  }18 19  /* Status bar */20  .status-bar {21    height: 88px;22    padding: 0 28px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    font-size: 32px;27    color: #424242;28  }29  .status-left { display: flex; align-items: center; gap: 24px; }30  .status-right { display: flex; align-items: center; gap: 28px; }31  .dot { width: 12px; height: 12px; background: #757575; border-radius: 50%; display: inline-block; }32 33  /* Search header */34  .search-header {35    height: 140px;36    display: flex;37    align-items: center;38    padding: 0 24px;39    border-bottom: 1px solid #e0e0e0;40    gap: 18px;41  }42  .back-btn {43    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;44  }45  .search-title {46    flex: 1;47    font-size: 40px;48    font-weight: 500;49    white-space: nowrap;50    overflow: hidden;51    text-overflow: ellipsis;52  }53  .header-icons {54    display: flex; align-items: center; gap: 22px;55  }56  .icon-btn {57    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;58  }59  .icon { width: 40px; height: 40px; fill: none; stroke: #212121; stroke-width: 3; }60 61  /* Chips */62  .chips-wrap { padding: 20px 24px 8px; }63  .chips-row { display: flex; flex-wrap: nowrap; gap: 16px; margin-bottom: 16px; }64  .chip {65    display: inline-flex; align-items: center; gap: 12px;66    padding: 18px 26px; border: 1px solid #dcdcdc; border-radius: 28px;67    background: #fff; color: #424242; font-size: 30px;68    box-shadow: 0 0 0 rgba(0,0,0,0);69  }70  .chip .chev { width: 26px; height: 26px; stroke: #616161; }71  .chip .mini-icon {72    width: 36px; height: 36px; border-radius: 18px; display: inline-flex;73    align-items: center; justify-content: center; border: 1px solid #cfcfcf; background: #f5f5f5;74  }75  .mini-icon svg { width: 24px; height: 24px; }76 77  /* Results info */78  .results-info {79    padding: 12px 24px 16px;80    border-top: 1px solid #efefef;81    border-bottom: 1px solid #efefef;82    background: #fafafa;83  }84  .results-info .line {85    font-size: 30px; color: #424242; margin: 6px 0;86  }87  .results-info .link { color: #1a73e8; text-decoration: none; }88 89  /* Products grid */90  .products {91    display: grid;92    grid-template-columns: 1fr 1fr;93    column-gap: 20px;94    padding: 0 20px;95  }96  .card {97    padding-bottom: 24px;98    border-right: 1px solid #e9e9e9;99  }100  .card:nth-child(2n) { border-right: none; }101  .img-box {102    position: relative;103    width: 520px;104    height: 820px;105    background: #E0E0E0;106    border: 1px solid #BDBDBD;107    display: flex; align-items: center; justify-content: center;108    color: #757575; font-size: 28px; text-align: center;109  }110  .heart {111    position: absolute; top: 18px; right: 18px; width: 56px; height: 56px;112    display: flex; align-items: center; justify-content: center;113    background: rgba(255,255,255,0.9); border-radius: 28px; border: 1px solid #e0e0e0;114  }115  .heart svg { width: 34px; height: 34px; stroke: #9e9e9e; fill: none; stroke-width: 2.5; }116 117  .title { font-size: 34px; margin: 22px 8px 6px; color: #212121; }118  .pricing { display: flex; align-items: center; gap: 18px; margin: 4px 8px; }119  .discount { color: #2e7d32; font-weight: 600; font-size: 30px; }120  .old { color: #9e9e9e; text-decoration: line-through; font-size: 30px; }121  .price { color: #212121; font-weight: 700; font-size: 32px; }122 123  .rating-row { display: flex; align-items: center; gap: 8px; margin: 8px 8px; }124  .stars { display: inline-flex; gap: 4px; }125  .star { width: 28px; height: 28px; }126  .star path { fill: #2e7d32; }127  .count { color: #616161; font-size: 28px; }128  .badge {129    margin-left: 8px; font-size: 26px; color: #1a73e8; border: 1px solid #bcd3ff;130    padding: 4px 10px; border-radius: 16px; background: #eaf2ff;131  }132  .delivery { margin: 10px 8px 0; font-size: 28px; color: #616161; }133  .delivery strong { color: #212121; }134 135  /* Second row simple images */136  .simple-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; padding: 0 20px; margin-top: 12px; }137  .simple-img { width: 520px; height: 520px; background: #E0E0E0; border: 1px solid #BDBDBD;138    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; position: relative; }139  .simple-img .heart { top: 16px; right: 16px; }140 141  /* Bottom home indicator */142  .home-bar {143    position: absolute; bottom: 0; left: 0; right: 0;144    height: 120px; background: #000;145    display: flex; align-items: center; justify-content: center;146  }147  .home-pill {148    width: 320px; height: 12px; background: #fff; border-radius: 6px;149  }150</style>151</head>152<body>153<div id="render-target">154 155  <!-- Status bar -->156  <div class="status-bar">157    <div class="status-left">158      <span>12:18</span>159      <span class="dot"></span>160      <span class="dot"></span>161    </div>162    <div class="status-right">163      <span class="dot"></span>164      <span class="dot"></span>165      <span class="dot"></span>166    </div>167  </div>168 169  <!-- Search header -->170  <div class="search-header">171    <div class="back-btn">172      <svg class="icon" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg>173    </div>174    <div class="search-title">3-piece Tuxedo for b...</div>175    <div class="header-icons">176      <div class="icon-btn">177        <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>178      </div>179      <div class="icon-btn">180        <svg class="icon" viewBox="0 0 24 24"><path d="M12 3v10"/><circle cx="12" cy="17" r="2"/></svg>181      </div>182      <div class="icon-btn">183        <svg class="icon" viewBox="0 0 24 24"><rect x="5" y="6" width="14" height="12" rx="2"/><circle cx="12" cy="12" r="3"/></svg>184      </div>185      <div class="icon-btn">186        <svg class="icon" viewBox="0 0 24 24"><path d="M7 7h14l-2 12H5L3 7h4"/><path d="M9 7V5h6v2"/></svg>187      </div>188    </div>189  </div>190 191  <!-- Chips -->192  <div class="chips-wrap">193    <div class="chips-row">194      <div class="chip">Sort By195        <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2"/></svg>196      </div>197      <div class="chip">198        <svg class="chev" viewBox="0 0 24 24"><path d="M3 6h18M3 12h12M3 18h6" fill="none" stroke="#616161" stroke-width="2"/></svg>199        Filter200      </div>201      <div class="chip">Gender</div>202      <div class="chip">Brand</div>203      <div class="chip">Age</div>204    </div>205 206    <div class="chips-row">207      <div class="chip">208        <span class="mini-icon">209          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#66bb6a"/></svg>210        </span>211        Rakhi Deals212      </div>213      <div class="chip">214        <span class="mini-icon">215          <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .8-4.5 4 1.3 6.2L12 17l-5.8 3.9 1.3-6.2L3 9.8 9 9z" fill="#ffd54f"/></svg>216        </span>217        Popular Brands218      </div>219      <div class="chip">220        <span class="mini-icon">221          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#a5d6a7"/><text x="12" y="16" font-size="10" text-anchor="middle" fill="#2e7d32">60%</text></svg>222        </span>223        60% or more224      </div>225      <div class="chip">226        <span class="mini-icon">227          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#bbdefb"/></svg>228        </span>229        Color230      </div>231    </div>232  </div>233 234  <!-- Results info -->235  <div class="results-info">236    <div class="line">Showing results for <a class="link" href="#">3 piece tuxedo for boy kids</a></div>237    <div class="line">Search instead for <a class="link" href="#">3-piece Tuxedo for boy kids</a></div>238  </div>239 240  <!-- Products -->241  <div class="products">242    <!-- Card 1 -->243    <div class="card">244      <div class="img-box">245        [IMG: Boy tuxedo set - silver]246        <div class="heart">247          <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.2C1.2 9.6 3.1 7 6 7c1.9 0 3.2 1.1 4 2.3C11.8 8.1 13.1 7 15 7c2.9 0 4.8 2.6 3 5.8C19 16.4 12 21 12 21z"/></svg>248        </div>249      </div>250      <div class="title">Zolario</div>251      <div class="pricing">252        <div class="discount">53% off</div>253        <div class="old">3,499</div>254        <div class="price">₹1,619</div>255      </div>256      <div class="rating-row">257        <div class="stars">258          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.5-6.7-5.1-4.4 6.8-.6L12 3l2.9 6.9 6.8.6-5.1 4.4 1.5 6.7z"/></svg>259          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.5-6.7-5.1-4.4 6.8-.6L12 3l2.9 6.9 6.8.6-5.1 4.4 1.5 6.7z"/></svg>260          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.5-6.7-5.1-4.4 6.8-.6L12 3l2.9 6.9 6.8.6-5.1 4.4 1.5 6.7z"/></svg>261          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.5-6.7-5.1-4.4 6.8-.6L12 3l2.9 6.9 6.8.6-5.1 4.4 1.5 6.7z"/></svg>262          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.5-6.7-5.1-4.4 6.8-.6L12 3l2.9 6.9 6.8.6-5.1 4.4 1.5 6.7z"/></svg>263        </div>264        <span class="count">(17)</span>265        <span class="badge">Plus F-ASSURED</span>266      </div>267      <div class="delivery">Free delivery</div>268    </div>269 270    <!-- Card 2 -->271    <div class="card">272      <div class="img-box">273        [IMG: Boy tuxedo set - black]274        <div class="heart">275          <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.2C1.2 9.6 3.1 7 6 7c1.9 0 3.2 1.1 4 2.3C11.8 8.1 13.1 7 15 7c2.9 0 4.8 2.6 3 5.8C19 16.4 12 21 12 21z"/></svg>276        </div>277      </div>278      <div class="title">Fourfolds</div>279      <div class="pricing">280        <div class="discount">56% off</div>281        <div class="old">4,599</div>282        <div class="price">₹1,999</div>283      </div>284      <div class="rating-row">285        <div class="stars">286          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.5-6.7-5.1-4.4 6.8-.6L12 3l2.9 6.9 6.8.6-5.1 4.4 1.5 6.7z"/></svg>287          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.5-6.7-5.1-4.4 6.8-.6L12 3l2.9 6.9 6.8.6-5.1 4.4 1.5 6.7z"/></svg>288          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.5-6.7-5.1-4.4 6.8-.6L12 3l2.9 6.9 6.8.6-5.1 4.4 1.5 6.7z"/></svg>289          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.5-6.7-5.1-4.4 6.8-.6L12 3l2.9 6.9 6.8.6-5.1 4.4 1.5 6.7z"/></svg>290          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.5-6.7-5.1-4.4 6.8-.6L12 3l2.9 6.9 6.8.6-5.1 4.4 1.5 6.7z"/></svg>291        </div>292        <span class="count">(12)</span>293        <span class="badge">Plus F-ASSURED</span>294      </div>295      <div class="delivery">Free delivery by <strong>Today</strong></div>296    </div>297  </div>298 299  <!-- Second row of images (flat lay sets) -->300  <div class="simple-row">301    <div class="simple-img">302      [IMG: Outfit set flat lay - light blue]303      <div class="heart">304        <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.2C1.2 9.6 3.1 7 6 7c1.9 0 3.2 1.1 4 2.3C11.8