GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Product Grid - Boots</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #ffffff;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 140px;28    background: #000;29    color: #fff;30    display: flex;31    align-items: center;32    padding: 0 30px;33    box-sizing: border-box;34  }35  .status-time {36    font-size: 44px;37    font-weight: 600;38    letter-spacing: 1px;39  }40  .status-icons {41    margin-left: 28px;42    display: flex;43    align-items: center;44    gap: 26px;45  }46  .status-dot, .status-square, .status-circle {47    background: #fff;48  }49  .status-square { width: 42px; height: 42px; border-radius: 8px; opacity: 0.9; }50  .status-circle { width: 42px; height: 42px; border-radius: 50%; opacity: 0.9; }51  .status-dot { width: 14px; height: 14px; border-radius: 50%; opacity: 0.8; }52  .status-right {53    margin-left: auto;54    display: flex;55    align-items: center;56    gap: 28px;57  }58  .status-icon-mini {59    width: 44px; height: 44px; border-radius: 12px; background: #fff;60  }61 62  /* Content */63  .content {64    position: absolute;65    top: 140px;66    left: 0;67    right: 0;68    bottom: 160px; /* leave space for bottom bar */69    overflow-y: auto;70  }71  .grid {72    padding: 40px;73    box-sizing: border-box;74    display: grid;75    grid-template-columns: 1fr 1fr;76    column-gap: 40px;77    row-gap: 60px;78  }79 80  .card {81    display: flex;82    flex-direction: column;83  }84  .image {85    position: relative;86    height: 360px;87    background: #E0E0E0;88    border: 1px solid #BDBDBD;89    display: flex;90    justify-content: center;91    align-items: center;92    color: #757575;93    font-size: 34px;94    border-radius: 8px;95  }96  .chev {97    position: absolute;98    top: 50%;99    transform: translateY(-50%);100    width: 54px;101    height: 54px;102    fill: #000;103    opacity: 0.85;104  }105  .chev.left { left: 20px; }106  .chev.right { right: 20px; }107 108  .badge {109    position: absolute;110    top: 16px;111    left: 16px;112    background: #B3392F;113    color: #fff;114    font-size: 30px;115    font-weight: 700;116    padding: 12px 16px;117    border-radius: 4px;118    letter-spacing: 1px;119  }120 121  .thumbs {122    display: flex;123    align-items: center;124    gap: 24px;125    margin-top: 22px;126    margin-bottom: 10px;127  }128  .thumb {129    width: 110px;130    height: 80px;131    background: #E0E0E0;132    border: 1px solid #BDBDBD;133    display: flex;134    justify-content: center;135    align-items: center;136    color: #777;137    font-size: 24px;138    border-radius: 6px;139  }140  .thumb.active {141    outline: 4px solid #777;142  }143 144  .title {145    font-size: 42px;146    font-weight: 600;147    line-height: 1.2;148    color: #111;149    margin-top: 16px;150  }151  .price {152    margin-top: 10px;153    font-size: 40px;154    font-weight: 700;155    color: #000;156  }157  .price .old {158    color: #333;159    text-decoration: line-through;160    margin-right: 20px;161    font-weight: 600;162    opacity: 0.75;163  }164  .price .new {165    color: #000;166    font-weight: 800;167  }168 169  /* Bottom navigation / gesture bar */170  .bottom-bar {171    position: absolute;172    bottom: 0;173    left: 0;174    width: 1080px;175    height: 160px;176    background: #000;177    display: flex;178    justify-content: center;179    align-items: center;180  }181  .gesture-pill {182    width: 420px;183    height: 20px;184    background: #fff;185    border-radius: 12px;186  }187</style>188</head>189<body>190<div id="render-target">191 192  <div class="status-bar">193    <div class="status-time">5:15</div>194    <div class="status-icons">195      <div class="status-circle"></div>196      <div class="status-square"></div>197      <div class="status-square"></div>198      <div class="status-circle"></div>199      <div class="status-dot"></div>200    </div>201    <div class="status-right">202      <div class="status-icon-mini"></div>203      <div class="status-icon-mini"></div>204    </div>205  </div>206 207  <div class="content">208    <div class="grid">209 210      <!-- Row 1 - Left -->211      <div class="card">212        <div class="image">213          <div>[IMG: Navy boot]</div>214          <svg class="chev left" viewBox="0 0 24 24">215            <path d="M15 4L7 12l8 8" />216          </svg>217          <svg class="chev right" viewBox="0 0 24 24">218            <path d="M9 4l8 8-8 8" />219          </svg>220        </div>221        <div class="thumbs">222          <div class="thumb">[IMG]</div>223          <div class="thumb">[IMG]</div>224          <div class="thumb">[IMG]</div>225        </div>226        <div class="title">DROYAL BLUE boots for women</div>227        <div class="price">&#8377;5495</div>228      </div>229 230      <!-- Row 1 - Right -->231      <div class="card">232        <div class="image">233          <div>[IMG: Red boot]</div>234          <svg class="chev left" viewBox="0 0 24 24">235            <path d="M15 4L7 12l8 8" />236          </svg>237          <svg class="chev right" viewBox="0 0 24 24">238            <path d="M9 4l8 8-8 8" />239          </svg>240        </div>241        <div class="thumbs">242          <div class="thumb active">[IMG]</div>243          <div class="thumb">[IMG]</div>244          <div class="thumb">[IMG]</div>245        </div>246        <div class="title">Woodland Rusty red boots for women</div>247        <div class="price">&#8377;5495</div>248      </div>249 250      <!-- Row 2 - Left -->251      <div class="card">252        <div class="image">253          <div>[IMG: Tan boot]</div>254          <svg class="chev left" viewBox="0 0 24 24">255            <path d="M15 4L7 12l8 8" />256          </svg>257          <svg class="chev right" viewBox="0 0 24 24">258            <path d="M9 4l8 8-8 8" />259          </svg>260        </div>261        <div class="thumbs">262          <div class="thumb">[IMG]</div>263          <div class="thumb">[IMG]</div>264          <div class="thumb">[IMG]</div>265        </div>266        <div class="title">Snaype Boots for Women</div>267        <div class="price">&#8377;5995</div>268      </div>269 270      <!-- Row 2 - Right (discount) -->271      <div class="card">272        <div class="image">273          <div class="badge">40%</div>274          <div>[IMG: Dark royal blue boot]</div>275          <svg class="chev left" viewBox="0 0 24 24">276            <path d="M15 4L7 12l8 8" />277          </svg>278          <svg class="chev right" viewBox="0 0 24 24">279            <path d="M9 4l8 8-8 8" />280          </svg>281        </div>282        <div class="thumbs">283          <div class="thumb active">[IMG]</div>284          <div class="thumb">[IMG]</div>285          <div class="thumb">[IMG]</div>286        </div>287        <div class="title">Dark royal blue boot for women</div>288        <div class="price"><span class="old">&#8377;4995</span><span class="new">&#8377;2997</span></div>289      </div>290 291      <!-- Row 3 - Left (discount) -->292      <div class="card">293        <div class="image">294          <div class="badge">40%</div>295          <div>[IMG: Beige knit boot]</div>296          <svg class="chev left" viewBox="0 0 24 24">297            <path d="M15 4L7 12l8 8" />298          </svg>299          <svg class="chev right" viewBox="0 0 24 24">300            <path d="M9 4l8 8-8 8" />301          </svg>302        </div>303        <div class="thumbs">304          <div class="thumb">[IMG]</div>305          <div class="thumb">[IMG]</div>306          <div class="thumb">[IMG]</div>307        </div>308        <div class="title">Knitted high-top outdoor boot</div>309        <div class="price">&#8377;4495</div>310      </div>311 312      <!-- Row 3 - Right (discount) -->313      <div class="card">314        <div class="image">315          <div class="badge">40%</div>316          <div>[IMG: Black sneaker]</div>317          <svg class="chev left" viewBox="0 0 24 24">318            <path d="M15 4L7 12l8 8" />319          </svg>320          <svg class="chev right" viewBox="0 0 24 24">321            <path d="M9 4l8 8-8 8" />322          </svg>323        </div>324        <div class="thumbs">325          <div class="thumb active">[IMG]</div>326          <div class="thumb">[IMG]</div>327          <div class="thumb">[IMG]</div>328        </div>329        <div class="title">Trail runner lace-up shoes</div>330        <div class="price">&#8377;3995</div>331      </div>332 333    </div>334  </div>335 336  <div class="bottom-bar">337    <div class="gesture-pill"></div>338  </div>339 340</div>341</body>342</html>