GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Women Shoes Listing</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    color: #222;16  }17 18  /* Top app bar */19  .appbar {20    height: 150px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25  }26  .appbar-left {27    display: flex;28    align-items: center;29    gap: 24px;30  }31  .title {32    font-size: 46px;33    font-weight: 700;34    letter-spacing: 0.5px;35  }36  .icon-btn {37    width: 64px;38    height: 64px;39    display: inline-flex;40    align-items: center;41    justify-content: center;42  }43  .divider {44    height: 2px;45    background: #EEEEEE;46    width: 100%;47  }48 49  /* Filter row */50  .filters {51    height: 120px;52    padding: 0 40px;53    display: flex;54    align-items: center;55    justify-content: space-between;56    font-weight: 700;57    letter-spacing: 1px;58  }59  .filters .left, .filters .right {60    display: flex;61    align-items: center;62    gap: 14px;63    font-size: 34px;64  }65  .muted {66    color: #8A8A8A;67  }68 69  .results-text {70    text-align: center;71    font-size: 32px;72    color: #8A8A8A;73    margin: 26px 0 10px;74  }75 76  /* Grid */77  .grid {78    padding: 0 48px 0 48px;79    display: grid;80    grid-template-columns: 1fr 1fr;81    column-gap: 48px;82    row-gap: 56px;83    margin-top: 16px;84  }85  .card {}86  .img-wrap {87    position: relative;88    width: 100%;89    height: 470px;90    overflow: hidden;91    border-radius: 2px;92  }93  .img-placeholder {94    width: 100%;95    height: 100%;96    background: #E0E0E0;97    border: 1px solid #BDBDBD;98    display: flex;99    align-items: center;100    justify-content: center;101    color: #757575;102    font-size: 28px;103    text-align: center;104    padding: 12px;105    box-sizing: border-box;106  }107  .ribbon {108    position: absolute;109    top: 0;110    left: 0;111    right: 0;112    height: 56px;113    background: #2F2F2F;114    color: #FFFFFF;115    display: flex;116    align-items: center;117    justify-content: center;118    font-size: 26px;119    font-weight: 800;120    letter-spacing: 3px;121  }122  .price-row {123    display: flex;124    align-items: center;125    justify-content: space-between;126    margin-top: 24px;127    padding: 0 8px;128  }129  .price {130    font-size: 44px;131    font-weight: 800;132    letter-spacing: 0.5px;133  }134  .heart {135    width: 56px;136    height: 56px;137  }138  .title-text {139    margin-top: 14px;140    padding: 0 8px;141    font-size: 32px;142    line-height: 40px;143    color: #444;144  }145 146  /* Home indicator */147  .home-indicator {148    position: absolute;149    bottom: 26px;150    left: 50%;151    transform: translateX(-50%);152    width: 320px;153    height: 10px;154    background: #CFCFCF;155    border-radius: 10px;156  }157</style>158</head>159<body>160<div id="render-target">161 162  <!-- Top App Bar -->163  <div class="appbar">164    <div class="appbar-left">165      <div class="icon-btn" aria-label="Back">166        <svg width="42" height="42" viewBox="0 0 48 48" fill="none">167          <path d="M28 8 L12 24 L28 40" stroke="#222" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>168          <path d="M16 24 H38" stroke="#222" stroke-width="4" stroke-linecap="round"/>169        </svg>170      </div>171      <div class="title">"WOMEN SHOES"</div>172    </div>173    <div class="appbar-right" style="display:flex; gap:28px;">174      <div class="icon-btn" aria-label="Favorites">175        <svg class="heart" viewBox="0 0 24 24" fill="none">176          <path d="M12 20s-7-4.35-9.2-8.28C1.5 9.5 3 6.5 6.2 6.5c2 0 3.2 1.2 3.8 2 0.6-0.8 1.8-2 3.8-2 3.2 0 4.7 3 3.4 5.22C19 15.65 12 20 12 20z" stroke="#222" stroke-width="1.8" fill="none" stroke-linejoin="round"/>177        </svg>178      </div>179      <div class="icon-btn" aria-label="Search">180        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">181          <circle cx="11" cy="11" r="7" stroke="#222" stroke-width="2"/>182          <path d="M16.5 16.5 L21 21" stroke="#222" stroke-width="2" stroke-linecap="round"/>183        </svg>184      </div>185    </div>186  </div>187  <div class="divider"></div>188 189  <!-- Filters Row -->190  <div class="filters">191    <div class="left">192      <span>RECOMMENDED</span>193      <svg width="26" height="26" viewBox="0 0 24 24" fill="none">194        <path d="M6 9 L12 15 L18 9" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>195      </svg>196    </div>197    <div class="right">198      <svg width="30" height="30" viewBox="0 0 24 24" fill="none">199        <path d="M4 13 L9 18 L20 7" stroke="#222" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>200      </svg>201      <span>FILTER</span>202    </div>203  </div>204  <div class="divider"></div>205 206  <div class="results-text">106 items found, "New Balance"</div>207 208  <!-- Products Grid -->209  <div class="grid">210    <!-- Card 1 -->211    <div class="card">212      <div class="img-wrap">213        <div class="ribbon">SELLING FAST</div>214        <div class="img-placeholder">[IMG: New Balance 530 sneakers in stone on model]</div>215      </div>216      <div class="price-row">217        <div class="price">$134.00</div>218        <svg class="heart" viewBox="0 0 24 24" fill="none">219          <path d="M12 20s-7-4.35-9.2-8.28C1.5 9.5 3 6.5 6.2 6.5c2 0 3.2 1.2 3.8 2 0.6-0.8 1.8-2 3.8-2 3.2 0 4.7 3 3.4 5.22C19 15.65 12 20 12 20z" stroke="#222" stroke-width="1.8" fill="none" stroke-linejoin="round"/>220        </svg>221      </div>222      <div class="title-text">New Balance 530 sneakers in stone - Exclusive to ASOS</div>223    </div>224 225    <!-- Card 2 -->226    <div class="card">227      <div class="img-wrap">228        <div class="ribbon">SELLING FAST</div>229        <div class="img-placeholder">[IMG: New Balance 530 sneakers in gray and white on model]</div>230      </div>231      <div class="price-row">232        <div class="price">$134.00</div>233        <svg class="heart" viewBox="0 0 24 24" fill="none">234          <path d="M12 20s-7-4.35-9.2-8.28C1.5 9.5 3 6.5 6.2 6.5c2 0 3.2 1.2 3.8 2 0.6-0.8 1.8-2 3.8-2 3.2 0 4.7 3 3.4 5.22C19 15.65 12 20 12 20z" stroke="#222" stroke-width="1.8" fill="none" stroke-linejoin="round"/>235        </svg>236      </div>237      <div class="title-text">New Balance 530 sneakers in gray and white - Exclusive t...</div>238    </div>239 240    <!-- Card 3 -->241    <div class="card">242      <div class="img-wrap">243        <div class="ribbon">SELLING FAST</div>244        <div class="img-placeholder">[IMG: New Balance 530 sneakers in silver on model]</div>245      </div>246      <div class="price-row">247        <div class="price">$134.00</div>248        <svg class="heart" viewBox="0 0 24 24" fill="none">249          <path d="M12 20s-7-4.35-9.2-8.28C1.5 9.5 3 6.5 6.2 6.5c2 0 3.2 1.2 3.8 2 0.6-0.8 1.8-2 3.8-2 3.2 0 4.7 3 3.4 5.22C19 15.65 12 20 12 20z" stroke="#222" stroke-width="1.8" fill="none" stroke-linejoin="round"/>250        </svg>251      </div>252      <div class="title-text">New Balance 530 sneakers in silver</div>253    </div>254 255    <!-- Card 4 -->256    <div class="card">257      <div class="img-wrap">258        <div class="img-placeholder">[IMG: New Balance 574Z platform sneakers in off white]</div>259      </div>260      <div class="price-row">261        <div class="price">$134.00</div>262        <svg class="heart" viewBox="0 0 24 24" fill="none">263          <path d="M12 20s-7-4.35-9.2-8.28C1.5 9.5 3 6.5 6.2 6.5c2 0 3.2 1.2 3.8 2 0.6-0.8 1.8-2 3.8-2 3.2 0 4.7 3 3.4 5.22C19 15.65 12 20 12 20z" stroke="#222" stroke-width="1.8" fill="none" stroke-linejoin="round"/>264        </svg>265      </div>266      <div class="title-text">New Balance 574Z platform sneakers</div>267    </div>268  </div>269 270  <div class="home-indicator"></div>271</div>272</body>273</html>