GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>Formal Shoes Listing</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1440px;11    height: 3120px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: "Segoe UI", Roboto, Arial, sans-serif;16    color: #222;17  }18  .teal { background: #0DA1A7; }19  .status-bar {20    height: 120px;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 36px;25    justify-content: space-between;26  }27  .status-left {28    font-weight: 600;29    font-size: 42px;30    letter-spacing: 1px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .tiny-icon {38    width: 30px; height: 30px; fill: #fff; opacity: 0.95;39  }40  .header {41    height: 160px;42    background: #fff;43    display: flex;44    align-items: center;45    padding: 0 40px;46    border-bottom: 1px solid #E5E5E5;47  }48  .header .title {49    margin-left: 24px;50    font-size: 48px;51    font-weight: 700;52    letter-spacing: 1px;53    color: #202124;54  }55  .spacer { flex: 1; }56  .icon-btn {57    width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;58    margin-left: 26px;59  }60  .icon-btn svg { width: 52px; height: 52px; stroke: #179EA6; fill: none; stroke-width: 4; }61  .back svg { stroke: #202124; }62  .filters-strip {63    height: 120px;64    display: flex;65    border-bottom: 1px solid #EAEAEA;66    border-top: 1px solid #EAEAEA;67    background: #fff;68  }69  .f-item {70    flex: 1;71    display: flex;72    align-items: center;73    justify-content: center;74    gap: 18px;75    font-size: 40px;76    color: #3C4043;77    border-right: 1px solid #EEEEEE;78  }79  .f-item:last-child { border-right: none; }80  .f-item .count {81    background: #0DA1A7; color: #fff; width: 64px; height: 64px; border-radius: 50%;82    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 34px;83  }84  .chip-row {85    background: #FAFAFA;86    padding: 28px 36px 24px;87    display: flex; gap: 28px;88    position: relative;89    z-index: 1;90    box-shadow: 0 2px 6px rgba(0,0,0,0.04) inset;91  }92  .chip {93    background: #fff;94    padding: 26px 40px;95    border: 1px solid #E3E3E3;96    border-radius: 20px;97    color: #5f6368;98    font-size: 40px;99    box-shadow: 0 6px 16px rgba(0,0,0,0.08);100  }101  .grid {102    display: grid;103    grid-template-columns: 1fr 1fr;104    gap: 40px 40px;105    padding: 36px;106  }107  .card {108    background: #fff;109    border-top: 1px solid #F0F0F0;110    position: relative;111    padding-bottom: 40px;112    min-height: 900px;113  }114  .img {115    width: 100%;116    height: 560px;117    background: #E0E0E0;118    border: 1px solid #BDBDBD;119    display: flex;120    align-items: center;121    justify-content: center;122    color: #757575;123    font-size: 40px;124  }125  .fav {126    position: absolute;127    top: 420px;128    right: 36px;129    width: 110px; height: 110px;130    border-radius: 50%;131    background: #fff;132    box-shadow: 0 8px 20px rgba(0,0,0,0.12);133    display: flex; align-items: center; justify-content: center;134  }135  .fav svg { width: 56px; height: 56px; stroke: #9e9e9e; fill: none; stroke-width: 5; }136  .card-body {137    padding: 26px 30px 0 30px;138  }139  .name {140    font-size: 40px;141    color: #444;142    line-height: 1.35;143    min-height: 130px;144  }145  .price-row {146    display: flex; align-items: baseline; gap: 16px; margin-top: 10px;147  }148  .price {149    font-size: 52px; font-weight: 800;150  }151  .old {152    color: #9E9E9E; text-decoration: line-through; font-size: 36px;153  }154  .discount {155    color: #1E88E5; font-size: 40px; margin-top: 12px; font-weight: 600;156  }157  .home-indicator {158    position: absolute;159    bottom: 24px;160    left: 50%;161    transform: translateX(-50%);162    width: 360px;163    height: 14px;164    background: #000;165    opacity: 0.75;166    border-radius: 12px;167  }168</style>169</head>170<body>171<div id="render-target">172  <!-- Top status bar -->173  <div class="status-bar teal">174    <div class="status-left">10:45</div>175    <div class="status-right">176      <svg class="tiny-icon" viewBox="0 0 24 24"><path d="M7 7h10l-1 12H8L7 7Z" stroke="none"/><path d="M9 4h6" stroke="#fff" stroke-width="2" fill="none"/></svg>177      <svg class="tiny-icon" viewBox="0 0 24 24"><path d="M7 7h10l-1 12H8L7 7Z" stroke="none"/><path d="M9 4h6" stroke="#fff" stroke-width="2" fill="none"/></svg>178      <svg class="tiny-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff"/></svg>179      <svg class="tiny-icon" viewBox="0 0 24 24"><path d="M3 8l9-5 9 5v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Z" fill="#fff"/></svg>180    </div>181  </div>182 183  <!-- Header -->184  <div class="header">185    <div class="icon-btn back" aria-label="Back">186      <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke-linecap="round" stroke-linejoin="round"/></svg>187    </div>188    <div class="title">FORMAL SHOES FOR MEN</div>189    <div class="spacer"></div>190    <div class="icon-btn" aria-label="Search">191      <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M15 15l5 5"/></svg>192    </div>193    <div class="icon-btn" aria-label="Cart">194      <svg viewBox="0 0 24 24"><path d="M3 5h3l2 11h9l2-8H7" stroke-linecap="round" stroke-linejoin="round"/><circle cx="10" cy="20" r="1.8"/><circle cx="18" cy="20" r="1.8"/></svg>195    </div>196  </div>197 198  <!-- Filters strip -->199  <div class="filters-strip">200    <div class="f-item">Category201      <svg width="34" height="34" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"/></svg>202    </div>203    <div class="f-item"><span class="count">2</span> <span style="color:#0DA1A7;font-weight:700;">Filter</span></div>204    <div class="f-item">205      <span style="font-weight:600;">₹</span>206      <svg width="34" height="34" viewBox="0 0 24 24"><path d="M8 12h8M12 8h4M12 16h4" stroke="#5f6368" stroke-width="2" fill="none"/><path d="M14 10l-2 2 2 2" stroke="#5f6368" stroke-width="2" fill="none"/></svg>207      <span>Price</span>208    </div>209    <div class="f-item">210      <svg width="34" height="34" viewBox="0 0 24 24"><path d="M7 4h10M7 10h7M7 16h4" stroke="#5f6368" stroke-width="2" fill="none"/><path d="M17 4v6M14 10v6M11 16v4" stroke="#5f6368" stroke-width="2"/></svg>211      <span>Sort</span>212    </div>213  </div>214 215  <!-- Chip row -->216  <div class="chip-row">217    <div class="chip">Formal Shoes</div>218    <div class="chip">Loafers and Moccasins</div>219    <div class="chip">Black</div>220  </div>221 222  <!-- Product grid -->223  <div class="grid">224    <!-- Card 1 -->225    <div class="card">226      <div class="img">[IMG: Black formal shoe]</div>227      <div class="fav" title="Wishlist">228        <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10Z"/></svg>229      </div>230      <div class="card-body">231        <div class="name">850 Blackburn Formal Shoes For Men</div>232        <div class="price-row">233          <div class="price">₹750</div>234          <div class="old">₹1,575</div>235        </div>236        <div class="discount">52% off</div>237      </div>238    </div>239 240    <!-- Card 2 -->241    <div class="card">242      <div class="img">[IMG: Brown ankle boot]</div>243      <div class="fav" title="Wishlist">244        <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10Z"/></svg>245      </div>246      <div class="card-body">247        <div class="name">BlackBurn Casual Shoes</div>248        <div class="price-row">249          <div class="price">₹1,920</div>250          <div class="old">₹2,865</div>251        </div>252        <div class="discount">32% off</div>253      </div>254    </div>255 256    <!-- Card 3 -->257    <div class="card">258      <div class="img">[IMG: Black sports shoe]</div>259      <div class="fav" title="Wishlist">260        <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10Z"/></svg>261      </div>262      <div class="card-body">263        <div class="name">Men Running Shoes</div>264        <div class="price-row">265          <div class="price">₹1,299</div>266          <div class="old">₹1,999</div>267        </div>268        <div class="discount">35% off</div>269      </div>270    </div>271 272    <!-- Card 4 -->273    <div class="card">274      <div class="img">[IMG: Pink and white sports shoes]</div>275      <div class="fav" title="Wishlist">276        <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10Z"/></svg>277      </div>278      <div class="card-body">279        <div class="name">Women Sports Shoes</div>280        <div class="price-row">281          <div class="price">₹1,450</div>282          <div class="old">₹2,199</div>283        </div>284        <div class="discount">34% off</div>285      </div>286    </div>287  </div>288 289  <!-- Bottom home indicator -->290  <div class="home-indicator"></div>291</div>292</body>293</html>