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>Women Shoes - Product List</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    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #111;17  }18 19  /* Header */20  .app-header {21    height: 180px;22    padding: 54px 36px 24px 36px;23    box-sizing: border-box;24    border-bottom: 1px solid #eee;25    display: flex;26    align-items: center;27    justify-content: space-between;28  }29  .left-wrap {30    display: flex;31    align-items: center;32    gap: 28px;33  }34  .title {35    font-size: 44px;36    font-weight: 700;37    letter-spacing: 1px;38  }39  .icon-btn {40    width: 56px;41    height: 56px;42    display: inline-flex;43    align-items: center;44    justify-content: center;45  }46  .icon {47    width: 44px;48    height: 44px;49    stroke: #111;50    fill: none;51    stroke-width: 2.5;52  }53 54  /* Sort/Filter bar */55  .controls {56    height: 120px;57    padding: 0 36px;58    display: flex;59    align-items: center;60    justify-content: space-between;61    border-bottom: 1px solid #eee;62  }63  .ctrl-left, .ctrl-right {64    display: flex;65    align-items: center;66    gap: 14px;67    font-weight: 700;68    letter-spacing: 1px;69    font-size: 34px;70  }71  .ctrl-right .check {72    width: 34px;73    height: 34px;74    stroke-width: 3;75  }76 77  .result-info {78    text-align: center;79    color: #777;80    font-size: 30px;81    margin: 28px 0 18px;82  }83 84  /* Product card */85  .product-area {86    padding-left: 36px;87    padding-right: 36px;88  }89  .product-card {90    width: 640px;91  }92  .img-wrap {93    position: relative;94    width: 640px;95    height: 720px;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  }105  .badge {106    position: absolute;107    top: 0;108    left: 0;109    width: 100%;110    height: 66px;111    background: #2f2f2f;112    color: #fff;113    font-weight: 800;114    letter-spacing: 2px;115    display: flex;116    align-items: center;117    justify-content: center;118    font-size: 26px;119  }120 121  .price-row {122    margin-top: 26px;123    display: flex;124    align-items: center;125    justify-content: space-between;126  }127  .price {128    font-size: 48px;129    font-weight: 800;130    letter-spacing: 1px;131  }132  .heart {133    width: 56px;134    height: 56px;135  }136 137  .prod-title {138    margin-top: 18px;139    font-size: 34px;140    line-height: 46px;141    color: #222;142  }143 144  /* Home indicator (bottom bar) */145  .home-indicator {146    position: absolute;147    left: 50%;148    transform: translateX(-50%);149    bottom: 26px;150    width: 360px;151    height: 10px;152    background: #8a8a8a;153    border-radius: 6px;154    opacity: 0.8;155  }156</style>157</head>158<body>159<div id="render-target">160  <!-- Header -->161  <div class="app-header">162    <div class="left-wrap">163      <div class="icon-btn" aria-label="Back">164        <svg class="icon" viewBox="0 0 24 24">165          <path d="M14 5 L7 12 L14 19" stroke-linecap="round" stroke-linejoin="round"></path>166          <path d="M8 12 H21" stroke-linecap="round"></path>167        </svg>168      </div>169      <div class="title">"WOMEN SHOES"</div>170    </div>171    <div style="display:flex; align-items:center; gap:28px;">172      <div class="icon-btn" aria-label="Wishlist">173        <svg class="icon heart" viewBox="0 0 24 24">174          <path d="M12 21s-7-4.9-7-10.3C5 7.6 6.9 6 9 6c1.3 0 2.6.7 3 1.7C12.4 6.7 13.7 6 15 6c2.1 0 4 1.6 4 4.7 0 5.4-7 10.3-7 10.3z" stroke-linejoin="round"></path>175        </svg>176      </div>177      <div class="icon-btn" aria-label="Search">178        <svg class="icon" viewBox="0 0 24 24">179          <circle cx="11" cy="11" r="6.5"></circle>180          <path d="M16 16 L21 21" stroke-linecap="round"></path>181        </svg>182      </div>183    </div>184  </div>185 186  <!-- Controls -->187  <div class="controls">188    <div class="ctrl-left">189      <span>RECOMMENDED</span>190      <svg class="icon" viewBox="0 0 24 24">191        <path d="M6 9 L12 15 L18 9" stroke-linecap="round" stroke-linejoin="round"></path>192      </svg>193    </div>194    <div class="ctrl-right">195      <svg class="icon check" viewBox="0 0 24 24">196        <path d="M4 13 L9 18 L20 7" stroke-linecap="round" stroke-linejoin="round"></path>197      </svg>198      <span>FILTER</span>199    </div>200  </div>201 202  <div class="result-info">1 item found, "UK 9", "New Balance"</div>203 204  <!-- Product list -->205  <div class="product-area">206    <div class="product-card">207      <div class="img-wrap">208        <div class="badge">SELLING FAST</div>209        [IMG: Beige New Balance sneakers]210      </div>211 212      <div class="price-row">213        <div class="price">$134.00</div>214        <svg class="icon heart" viewBox="0 0 24 24">215          <path d="M12 21s-7-4.9-7-10.3C5 7.6 6.9 6 9 6c1.3 0 2.6.7 3 1.7C12.4 6.7 13.7 6 15 6c2.1 0 4 1.6 4 4.7 0 5.4-7 10.3-7 10.3z" stroke-linejoin="round" fill="none" stroke="#111" stroke-width="2.5"></path>216        </svg>217      </div>218      <div class="prod-title">New Balance 327 sneakers in oatmeal and white</div>219    </div>220  </div>221 222  <div class="home-indicator"></div>223</div>224</body>225</html>