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; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1440px;13    height: 3120px;14    background: #ffffff;15    color: #212121;16  }17 18  /* Top status bar */19  .status-bar {20    height: 110px;21    background: #0fa7ae;22    color: #fff;23    padding: 0 50px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    box-sizing: border-box;28  }29  .status-left { font-weight: 600; font-size: 42px; letter-spacing: 1px; }30  .status-right {31    display: flex; align-items: center; gap: 28px;32  }33  .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: .9; }34 35  /* Header with title */36  .header {37    height: 170px;38    background: #ffffff;39    display: flex;40    align-items: center;41    padding: 0 40px 0 30px;42    box-sizing: border-box;43    border-bottom: 1px solid #e5e5e5;44  }45  .header .left {46    display: flex; align-items: center; gap: 30px;47  }48  .back-btn {49    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;50  }51  .title {52    font-size: 54px; font-weight: 700; letter-spacing: 1px;53  }54  .header .actions {55    margin-left: auto;56    display: flex; align-items: center; gap: 48px;57  }58  .icon-teal { stroke: #0fa7ae; fill: none; stroke-width: 4; }59 60  /* Filter tabs */61  .filter-tabs {62    height: 122px;63    display: flex;64    align-items: center;65    border-bottom: 1px solid #e6e6e6;66    border-top: 1px solid #f1f1f1;67  }68  .filter-tabs .tab {69    flex: 1;70    height: 100%;71    display: flex; align-items: center; justify-content: center;72    font-size: 40px; color: #616161;73    border-right: 1px solid #eeeeee;74    gap: 18px;75  }76  .filter-tabs .tab:last-child { border-right: 0; }77  .filter-badge {78    background: #0fa7ae; color: #fff; width: 56px; height: 56px; border-radius: 50%;79    display: inline-flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700;80  }81  .caret {82    width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent;83    border-top: 16px solid #9e9e9e;84  }85 86  /* Category chips */87  .chip-row {88    display: flex; gap: 24px; padding: 28px 28px; background: #fafafa; overflow: hidden;89  }90  .chip {91    background: #fff;92    padding: 30px 38px;93    border-radius: 16px;94    box-shadow: 0 6px 16px rgba(0,0,0,0.08);95    border: 1px solid #e9e9e9;96    color: #616161;97    font-size: 40px;98    white-space: nowrap;99  }100 101  /* Product grid */102  .grid {103    display: grid;104    grid-template-columns: 1fr 1fr;105    column-gap: 24px;106    row-gap: 40px;107    padding: 12px 0;108  }109  .card {110    padding: 36px;111    border-right: 1px solid #f0f0f0;112    border-bottom: 1px solid #f3f3f3;113    box-sizing: border-box;114    position: relative;115    min-height: 980px;116  }117  .card:nth-child(2n) { border-right: 0; }118  .img {119    width: 100%;120    height: 540px;121    background: #E0E0E0;122    border: 1px solid #BDBDBD;123    color: #757575;124    display: flex; align-items: center; justify-content: center;125    font-size: 42px;126  }127  .fav {128    position: absolute;129    top: 420px;130    right: 60px;131    width: 110px; height: 110px;132    background: #fff;133    border-radius: 50%;134    display: flex; align-items: center; justify-content: center;135    box-shadow: 0 6px 16px rgba(0,0,0,0.15);136  }137  .heart { fill: none; stroke: #9e9e9e; stroke-width: 4; }138  .title-text {139    margin-top: 40px;140    font-size: 44px;141    color: #424242;142    line-height: 1.3;143  }144  .price-row {145    margin-top: 18px;146    display: flex; align-items: baseline; gap: 18px;147  }148  .price-current {149    font-size: 56px; font-weight: 800;150  }151  .price-old {152    font-size: 40px; color: #9e9e9e; text-decoration: line-through;153  }154  .discount {155    margin-top: 10px;156    font-size: 42px; color: #1e88e5; font-weight: 700;157  }158</style>159</head>160<body>161<div id="render-target">162 163  <!-- Status Bar -->164  <div class="status-bar">165    <div class="status-left">10:44</div>166    <div class="status-right">167      <div class="dot"></div>168      <svg width="44" height="44" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2">169        <path d="M3 18h18" />170        <path d="M6 18V8a2 2 0 012-2h8a2 2 0 012 2v10" />171      </svg>172      <svg width="44" height="44" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2">173        <path d="M3 12h4l3 8h8l3-12H6" />174        <circle cx="10" cy="21" r="1.7" />175        <circle cx="18" cy="21" r="1.7" />176      </svg>177      <svg width="44" height="44" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2">178        <path d="M3 6h18" />179        <path d="M4 6v12a2 2 0 002 2h12a2 2 0 002-2V6" />180      </svg>181    </div>182  </div>183 184  <!-- Header -->185  <div class="header">186    <div class="left">187      <div class="back-btn">188        <svg width="56" height="56" viewBox="0 0 24 24" class="icon-teal">189          <path d="M14 6l-6 6 6 6" stroke-linecap="round" stroke-linejoin="round"></path>190        </svg>191      </div>192      <div class="title">FORMAL SHOES FOR MEN</div>193    </div>194    <div class="actions">195      <svg width="66" height="66" viewBox="0 0 24 24" class="icon-teal">196        <circle cx="11" cy="11" r="6"></circle>197        <path d="M20 20l-4.2-4.2"></path>198      </svg>199      <svg width="74" height="74" viewBox="0 0 24 24" class="icon-teal">200        <path d="M6 6h14l-2 9H8z"></path>201        <circle cx="9" cy="19" r="1.3" fill="#0fa7ae" stroke="none"></circle>202        <circle cx="17" cy="19" r="1.3" fill="#0fa7ae" stroke="none"></circle>203        <path d="M6 6l-1-2H3" stroke-linecap="round"></path>204      </svg>205    </div>206  </div>207 208  <!-- Filter Tabs -->209  <div class="filter-tabs">210    <div class="tab">211      <span>Category</span>212      <div class="caret"></div>213    </div>214    <div class="tab">215      <span class="filter-badge">2</span>216      <span>Filter</span>217    </div>218    <div class="tab">219      <span>₹</span>220      <span>Price</span>221      <svg width="24" height="24" viewBox="0 0 24 24" stroke="#9e9e9e" fill="none" stroke-width="2">222        <path d="M6 9l6 6 6-6"></path>223      </svg>224    </div>225    <div class="tab">226      <svg width="24" height="24" viewBox="0 0 24 24" stroke="#9e9e9e" fill="none" stroke-width="2">227        <path d="M7 4v14m0 0l-3-3m3 3l3-3"></path>228        <path d="M17 20V6m0 0l3 3m-3-3l-3 3"></path>229      </svg>230      <span>Sort</span>231    </div>232  </div>233 234  <!-- Chips Row -->235  <div class="chip-row">236    <div class="chip">Formal Shoes</div>237    <div class="chip">Loafers and Moccasins</div>238    <div class="chip">Black</div>239  </div>240 241  <!-- Products Grid -->242  <div class="grid">243 244    <!-- Card 1 -->245    <div class="card">246      <div class="img">[IMG: Black formal shoe]</div>247      <div class="fav">248        <svg width="56" height="56" viewBox="0 0 24 24" class="heart">249          <path d="M12 20s-7-4.5-7-9.5S9 4 12 8c3-4 7-1.5 7 2.5S12 20 12 20z"></path>250        </svg>251      </div>252      <div class="title-text">850 Blackburn Formal Shoes For Men</div>253      <div class="price-row">254        <div class="price-current">₹750</div>255        <div class="price-old">₹1,575</div>256      </div>257      <div class="discount">52% off</div>258    </div>259 260    <!-- Card 2 -->261    <div class="card">262      <div class="img">[IMG: Brown boot shoe]</div>263      <div class="fav">264        <svg width="56" height="56" viewBox="0 0 24 24" class="heart">265          <path d="M12 20s-7-4.5-7-9.5S9 4 12 8c3-4 7-1.5 7 2.5S12 20 12 20z"></path>266        </svg>267      </div>268      <div class="title-text">BlackBurn Casual Shoes</div>269      <div class="price-row">270        <div class="price-current">₹1,920</div>271        <div class="price-old">₹2,865</div>272      </div>273      <div class="discount">32% off</div>274    </div>275 276    <!-- Card 3 -->277    <div class="card">278      <div class="img">[IMG: Black sports shoe]</div>279      <div class="fav">280        <svg width="56" height="56" viewBox="0 0 24 24" class="heart">281          <path d="M12 20s-7-4.5-7-9.5S9 4 12 8c3-4 7-1.5 7 2.5S12 20 12 20z"></path>282        </svg>283      </div>284      <div class="title-text">Lotto Men Running Shoes</div>285      <div class="price-row">286        <div class="price-current">₹1,249</div>287        <div class="price-old">₹2,499</div>288      </div>289      <div class="discount">50% off</div>290    </div>291 292    <!-- Card 4 -->293    <div class="card">294      <div class="img">[IMG: Pink women sports shoes]</div>295      <div class="fav">296        <svg width="56" height="56" viewBox="0 0 24 24" class="heart">297          <path d="M12 20s-7-4.5-7-9.5S9 4 12 8c3-4 7-1.5 7 2.5S12 20 12 20z"></path>298        </svg>299      </div>300      <div class="title-text">Lotto Running Shoes (Pink/White)</div>301      <div class="price-row">302        <div class="price-current">₹1,499</div>303        <div class="price-old">₹2,999</div>304      </div>305      <div class="discount">50% off</div>306    </div>307 308  </div>309 310</div>311</body>312</html>