GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Listing - Boots</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FFFFFF; border-radius: 24px;13    box-shadow: 0 6px 24px rgba(0,0,0,0.08);14  }15 16  /* Status bar */17  .status-bar {18    height: 120px;19    background: #000;20    color: #fff;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    font-weight: 600;26    font-size: 44px;27    letter-spacing: 0.5px;28  }29  .status-right {30    display: flex;31    align-items: center;32    gap: 28px;33  }34  .icon { display: inline-flex; align-items: center; justify-content: center; }35 36  /* Page content */37  .content {38    padding: 40px 48px 0 48px;39  }40 41  .filter {42    border: 2px solid #356B3F;43    height: 120px;44    border-radius: 4px;45    margin-bottom: 36px;46    display: flex;47    align-items: center;48    padding: 0 32px;49    justify-content: space-between;50    color: #2F3A2F;51    font-size: 42px;52  }53  .heading {54    margin: 18px 0 24px 0;55    font-size: 52px;56    color: #6B6B6B;57    font-weight: 700;58    letter-spacing: 0.5px;59  }60 61  /* Grid of products */62  .grid {63    display: grid;64    grid-template-columns: 1fr 1fr;65    gap: 40px 40px;66  }67  .card {68    padding-bottom: 36px;69  }70  .img-box {71    position: relative;72    width: 100%;73    height: 480px;74    background: #EDEDED;75    border: 1px solid #D0D0D0;76    border-radius: 6px;77    display: flex;78    align-items: center;79    justify-content: center;80    color: #757575;81    font-size: 40px;82  }83  .arrow {84    position: absolute;85    top: 50%;86    transform: translateY(-50%);87    width: 72px;88    height: 72px;89    color: #000;90    opacity: 0.85;91  }92  .arrow.left { left: 24px; }93  .arrow.right { right: 24px; }94 95  .thumbs {96    display: flex;97    gap: 24px;98    margin: 22px 0 10px 0;99  }100  .thumb {101    width: 110px; height: 110px;102    background: #E0E0E0;103    border: 1px solid #BDBDBD;104    display: flex; align-items: center; justify-content: center;105    color: #757575; font-size: 26px;106    border-radius: 2px;107  }108  .thumb.active { border: 4px solid #3A3A3A; }109 110  .title {111    font-size: 44px;112    font-weight: 700;113    color: #111;114    line-height: 1.2;115    margin-top: 10px;116  }117  .price {118    font-size: 42px;119    font-weight: 800;120    margin-top: 12px;121  }122 123  /* Bottom gesture bar */124  .bottom-bar {125    position: absolute;126    left: 0; right: 0; bottom: 0;127    height: 160px;128    background: #000;129    display: flex; align-items: center; justify-content: center;130  }131  .gesture {132    width: 320px; height: 18px; background: #fff; border-radius: 16px;133  }134</style>135</head>136<body>137<div id="render-target">138  <!-- Android status bar -->139  <div class="status-bar">140    <div>5:15</div>141    <div class="status-right">142      <!-- simple icons -->143      <span class="icon">144        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><rect x="3" y="6" width="16" height="12" rx="2"></rect><rect x="20" y="10" width="1.5" height="4" fill="#fff"></rect></svg>145      </span>146      <span class="icon">147        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg>148      </span>149      <span class="icon">150        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="3"></circle></svg>151      </span>152      <span class="icon">153        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><polygon points="4,6 20,12 4,18"></polygon></svg>154      </span>155      <span class="icon">156        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="2"></circle><circle cx="20" cy="12" r="2"></circle></svg>157      </span>158    </div>159  </div>160 161  <div class="content">162    <!-- Filters -->163    <div class="filter">164      <span>All Color</span>165      <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#356B3F" stroke-width="2">166        <polyline points="6,9 12,15 18,9"></polyline>167      </svg>168    </div>169    <div class="filter">170      <span>Select Brands</span>171      <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#356B3F" stroke-width="2">172        <polyline points="6,9 12,15 18,9"></polyline>173      </svg>174    </div>175 176    <div class="heading">Showing  28 of products  28</div>177 178    <!-- Product grid -->179    <div class="grid">180      <!-- Card 1 -->181      <div class="card">182        <div class="img-box">183          [IMG: Light Grey Women's Boot]184          <svg class="arrow left" viewBox="0 0 24 24">185            <polyline points="15,6 9,12 15,18" fill="none" stroke="black" stroke-width="2"></polyline>186          </svg>187          <svg class="arrow right" viewBox="0 0 24 24">188            <polyline points="9,6 15,12 9,18" fill="none" stroke="black" stroke-width="2"></polyline>189          </svg>190        </div>191        <div class="thumbs">192          <div class="thumb">[thumb]</div>193          <div class="thumb">[thumb]</div>194          <div class="thumb">[thumb]</div>195        </div>196        <div class="title">Bright Grey Boots for Women</div>197        <div class="price">₹5995</div>198      </div>199 200      <!-- Card 2 -->201      <div class="card">202        <div class="img-box">203          [IMG: Brown Women's Trek Boot]204          <svg class="arrow left" viewBox="0 0 24 24">205            <polyline points="15,6 9,12 15,18" fill="none" stroke="black" stroke-width="2"></polyline>206          </svg>207          <svg class="arrow right" viewBox="0 0 24 24">208            <polyline points="9,6 15,12 9,18" fill="none" stroke="black" stroke-width="2"></polyline>209          </svg>210        </div>211        <div class="thumbs">212          <div class="thumb active">[brown]</div>213          <div class="thumb">[grey]</div>214          <div class="thumb">[khaki]</div>215        </div>216        <div class="title">Brown Boot for Women</div>217        <div class="price">₹5495</div>218      </div>219 220      <!-- Card 3 -->221      <div class="card">222        <div class="img-box">223          [IMG: Royal Blue High Boot]224          <svg class="arrow left" viewBox="0 0 24 24">225            <polyline points="15,6 9,12 15,18" fill="none" stroke="black" stroke-width="2"></polyline>226          </svg>227          <svg class="arrow right" viewBox="0 0 24 24">228            <polyline points="9,6 15,12 9,18" fill="none" stroke="black" stroke-width="2"></polyline>229          </svg>230        </div>231        <div class="thumbs">232          <div class="thumb active">[blue]</div>233          <div class="thumb">[brown]</div>234          <div class="thumb">[tan]</div>235        </div>236        <div class="title">DROYAL BLUE boots for women</div>237        <div class="price">₹5495</div>238      </div>239 240      <!-- Card 4 -->241      <div class="card">242        <div class="img-box">243          [IMG: Rusty Red Women's Boot]244          <svg class="arrow left" viewBox="0 0 24 24">245            <polyline points="15,6 9,12 15,18" fill="none" stroke="black" stroke-width="2"></polyline>246          </svg>247          <svg class="arrow right" viewBox="0 0 24 24">248            <polyline points="9,6 15,12 9,18" fill="none" stroke="black" stroke-width="2"></polyline>249          </svg>250        </div>251        <div class="thumbs">252          <div class="thumb active">[red]</div>253          <div class="thumb">[blue]</div>254          <div class="thumb">[tan]</div>255        </div>256        <div class="title">Woodland Rusty red boots for women</div>257        <div class="price">₹5495</div>258      </div>259    </div>260  </div>261 262  <!-- Bottom gesture area -->263  <div class="bottom-bar">264    <div class="gesture"></div>265  </div>266</div>267</body>268</html>