GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Kids - 2 Piece Sweatshirt</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    font-family: Arial, Helvetica, sans-serif;14    color: #111;15  }16 17  /* Header */18  .top-bar {19    position: relative;20    height: 120px;21    padding: 24px 40px;22  }23  .top-left {24    position: absolute;25    left: 32px;26    top: 34px;27  }28  .top-right {29    position: absolute;30    right: 32px;31    top: 28px;32    display: flex;33    gap: 32px;34  }35  .icon-btn { width: 40px; height: 40px; cursor: pointer; }36 37  /* Category nav */38  .categories {39    display: flex;40    align-items: center;41    gap: 42px;42    padding: 0 40px 10px 40px;43    font-size: 34px;44    letter-spacing: 0.5px;45  }46  .categories .item { color: #222; }47  .categories .active {48    font-weight: 700;49    position: relative;50  }51  .categories .active::after {52    content: "";53    position: absolute;54    left: 0; bottom: -14px;55    width: 100%; height: 4px; background: #000;56  }57  .categories .spacer { flex: 1; }58  .categories .results { color: #555; font-size: 30px; }59 60  /* Search */61  .search {62    margin: 26px 40px 0 40px;63    display: flex;64    align-items: center;65  }66  .search-box {67    flex: 1;68    height: 96px;69    border: 1px solid #D0D0D0;70    border-radius: 8px;71    display: flex;72    align-items: center;73    padding: 0 24px;74    font-size: 32px;75    color: #333;76  }77  .search-clear {78    margin-left: auto;79    width: 42px; height: 42px;80  }81 82  /* Filters */83  .filters {84    padding: 20px 40px;85    display: flex;86    gap: 20px;87  }88  .filter-chip {89    border: 1px solid #999;90    border-radius: 8px;91    padding: 18px 26px;92    font-size: 32px;93    color: #222;94  }95 96  /* Product Grid */97  .grid {98    display: grid;99    grid-template-columns: 1fr 1fr;100    margin-top: 10px;101    border-top: 1px solid #E0E0E0;102  }103  .card {104    position: relative;105    border-right: 1px solid #E0E0E0;106    border-bottom: 1px solid #E0E0E0;107    min-height: 1180px;108  }109  .card:nth-child(2n) { border-right: none; }110  .image {111    height: 900px;112    margin: 0 28px;113    background: #E0E0E0;114    border: 1px solid #BDBDBD;115    display: flex;116    align-items: center;117    justify-content: center;118    color: #757575;119    font-size: 32px;120    text-align: center;121  }122  .plus {123    position: absolute;124    top: 820px;125    left: 50%;126    transform: translateX(-50%);127    width: 72px; height: 72px;128    border-radius: 50%;129    background: #fff;130    border: 1px solid #CFCFCF;131    display: flex;132    align-items: center;133    justify-content: center;134  }135  .card-info {136    padding: 28px 32px 40px 32px;137    font-size: 30px;138    color: #222;139  }140  .title { margin-bottom: 10px; }141  .price { color: #555; font-size: 28px; }142 143  /* Bottom Navigation */144  .bottom-progress {145    position: absolute;146    bottom: 160px;147    left: 50%;148    transform: translateX(-50%);149    width: 520px;150    height: 16px;151    background: #EEEEEE;152    border-radius: 10px;153  }154  .bottom-progress .bar {155    width: 420px; height: 16px;156    background: #CFCFCF;157    border-radius: 10px;158  }159  .bottom-nav {160    position: absolute;161    bottom: 0; left: 0;162    width: 100%; height: 140px;163    border-top: 1px solid #E0E0E0;164    background: #fff;165    display: flex;166    align-items: center;167    justify-content: space-around;168    font-size: 34px;169  }170  .bottom-nav .active { text-decoration: underline; }171</style>172</head>173<body>174<div id="render-target">175 176  <!-- Header with close and utility icons -->177  <div class="top-bar">178    <div class="top-left">179      <svg class="icon-btn" viewBox="0 0 24 24">180        <path d="M4 4 L20 20 M20 4 L4 20" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>181      </svg>182    </div>183    <div class="top-right">184      <!-- Square icon -->185      <svg class="icon-btn" viewBox="0 0 24 24">186        <rect x="4" y="4" width="16" height="16" stroke="#111" stroke-width="2" fill="none" />187      </svg>188      <!-- Sliders icon -->189      <svg class="icon-btn" viewBox="0 0 24 24">190        <line x1="5" y1="5" x2="19" y2="5" stroke="#111" stroke-width="2"/>191        <circle cx="10" cy="5" r="2" fill="#111"/>192        <line x1="5" y1="12" x2="19" y2="12" stroke="#111" stroke-width="2"/>193        <circle cx="14" cy="12" r="2" fill="#111"/>194        <line x1="5" y1="19" x2="19" y2="19" stroke="#111" stroke-width="2"/>195        <circle cx="8" cy="19" r="2" fill="#111"/>196      </svg>197      <!-- Grid icon -->198      <svg class="icon-btn" viewBox="0 0 24 24">199        <rect x="4" y="4" width="5" height="5" fill="none" stroke="#111" stroke-width="2"/>200        <rect x="10" y="4" width="5" height="5" fill="none" stroke="#111" stroke-width="2"/>201        <rect x="16" y="4" width="5" height="5" fill="none" stroke="#111" stroke-width="2"/>202        <rect x="4" y="10" width="5" height="5" fill="none" stroke="#111" stroke-width="2"/>203        <rect x="10" y="10" width="5" height="5" fill="none" stroke="#111" stroke-width="2"/>204        <rect x="16" y="10" width="5" height="5" fill="none" stroke="#111" stroke-width="2"/>205      </svg>206    </div>207  </div>208 209  <!-- Categories -->210  <div class="categories">211    <div class="item">WOMAN</div>212    <div class="item">MAN</div>213    <div class="item active">KIDS</div>214    <div class="item">HOME</div>215    <div class="item">MASSIMC</div>216    <div class="spacer"></div>217    <div class="results">6 RESULTS</div>218  </div>219 220  <!-- Search -->221  <div class="search">222    <div class="search-box">223      2 PIECE SWEATSHIRT224      <svg class="search-clear" viewBox="0 0 24 24">225        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>226      </svg>227    </div>228  </div>229 230  <!-- Filters -->231  <div class="filters">232    <div class="filter-chip">SIZES (1)</div>233    <div class="filter-chip">COLOR</div>234  </div>235 236  <!-- Product grid -->237  <div class="grid">238    <!-- Card 1 -->239    <div class="card">240      <div class="image">[IMG: Snoopy Peanuts kids sweatshirt + pants set]</div>241      <div class="plus">242        <svg viewBox="0 0 24 24" width="36" height="36">243          <path d="M12 5 V19 M5 12 H19" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>244        </svg>245      </div>246      <div class="card-info">247        <div class="title">SNOOPY PEANUTS™ SET</div>248        <div class="price">32.90 USD</div>249      </div>250    </div>251 252    <!-- Card 2 -->253    <div class="card">254      <div class="image">[IMG: Beige striped sweatshirt with matching leggings]</div>255      <div class="plus">256        <svg viewBox="0 0 24 24" width="36" height="36">257          <path d="M12 5 V19 M5 12 H19" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>258        </svg>259      </div>260      <div class="card-info">261        <div class="title">SWEATSHIRT AND LEGGINGS SET</div>262        <div class="price">32.90 USD</div>263      </div>264    </div>265 266    <!-- Card 3 -->267    <div class="card">268      <div class="image">[IMG: Black NIRVANA print sweatshirt + pants set]</div>269      <div class="plus">270        <svg viewBox="0 0 24 24" width="36" height="36">271          <path d="M12 5 V19 M5 12 H19" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>272        </svg>273      </div>274      <div class="card-info">275        <div class="title">NIRVANA PRINT SET</div>276        <div class="price">32.90 USD</div>277      </div>278    </div>279 280    <!-- Card 4 -->281    <div class="card">282      <div class="image">[IMG: Disney characters with pink hearts sweatshirt + pants]</div>283      <div class="plus">284        <svg viewBox="0 0 24 24" width="36" height="36">285          <path d="M12 5 V19 M5 12 H19" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>286        </svg>287      </div>288      <div class="card-info">289        <div class="title">MICKEY PRINT SET</div>290        <div class="price">32.90 USD</div>291      </div>292    </div>293  </div>294 295  <!-- Bottom progress bar -->296  <div class="bottom-progress"><div class="bar"></div></div>297 298  <!-- Bottom Navigation -->299  <div class="bottom-nav">300    <div>START</div>301    <div class="active">MENU</div>302    <div>ACCOUNT</div>303    <div>BASKET (5)</div>304  </div>305 306</div>307</body>308</html>