GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Men's Sports Shoes - Listing</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#ffffff;13 }14 15 /* General */16 .row { display:flex; align-items:center; }17 .spacer { flex:1; }18 .pad { padding:0 32px; }19 .muted { color:#777; }20 21 /* Status bar */22 .status-bar {23 height:90px; padding:0 26px;24 display:flex; align-items:center; color:#333; font-size:32px; letter-spacing:0.3px;25 }26 .status-icons { margin-left:18px; display:flex; gap:20px; align-items:center; }27 .dot { width:8px; height:8px; background:#777; border-radius:50%; display:inline-block; margin:0 10px; }28 29 /* Search */30 .search-area { padding:18px 24px 12px; display:flex; align-items:center; gap:18px; }31 .icon-btn { width:56px; height:56px; border-radius:28px; display:flex; justify-content:center; align-items:center; }32 .back { border:2px solid #222; }33 .camera { border:2px solid #222; }34 .search-box {35 flex:1; height:80px; border:4px solid #111; border-radius:40px;36 display:flex; align-items:center; padding:0 26px; font-size:34px; color:#111;37 box-sizing:border-box;38 }39 .search-box .muted { color:#666; }40 .search-box .inside-right { margin-left:auto; display:flex; gap:18px; }41 .search-box .circle-icon {42 width:52px; height:52px; border-radius:26px; background:#eaeaea; display:flex; align-items:center; justify-content:center;43 }44 45 /* Pills / chips */46 .chips { padding:8px 24px; display:flex; gap:16px; flex-wrap:wrap; }47 .chip {48 background:#EFEFEF; border:1px solid #D7D7D7; color:#333;49 height:64px; border-radius:32px; padding:0 26px; display:flex; align-items:center; gap:12px; font-size:30px;50 }51 .chip svg { width:28px; height:28px; }52 53 /* Promo band */54 .promo {55 margin:12px 0; padding:20px 24px; background:#FCEDE0; color:#0a9d2f; font-size:30px;56 display:flex; gap:24px; align-items:center;57 }58 .promo .divider { width:2px; height:24px; background:#eec9b5; }59 60 /* Secondary chips */61 .chips.secondary .chip {62 background:#fff; border-color:#ddd; height:66px; font-size:30px;63 }64 65 /* Grid of products */66 .grid { padding:20px 24px 120px; display:grid; grid-template-columns:1fr 1fr; gap:26px; }67 .card {68 border:1px solid #e2e2e2; border-radius:18px; overflow:hidden; background:#fff;69 box-shadow:0 1px 0 rgba(0,0,0,0.04);70 }71 .brand-tag {72 position:absolute; top:16px; left:16px; background:#fff; font-size:26px; padding:6px 10px; border:1px solid #ddd; border-radius:8px;73 }74 .img-holder {75 position:relative; height:360px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;76 display:flex; justify-content:center; align-items:center; color:#757575; font-size:30px;77 }78 .ribbon {79 position:absolute; left:0; bottom:0; height:58px; display:flex; width:100%;80 }81 .ribbon .black { background:#000; color:#fff; font-weight:bold; padding:0 20px; display:flex; align-items:center; font-size:28px; }82 .ribbon .red { background:#E30000; color:#fff; flex:1; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:bold; }83 84 .content { padding:20px; }85 .title { font-size:32px; color:#222; line-height:1.25; height:84px; overflow:hidden; }86 .warning { color:#ff7a00; font-size:28px; margin-top:8px; }87 .sub { color:#777; font-size:26px; margin-left:8px; }88 .stars { display:flex; align-items:center; gap:6px; margin-top:8px; }89 .stars .count { color:#777; font-size:26px; margin-left:8px; }90 .bottom-row { margin-top:12px; display:flex; align-items:flex-end; }91 .price { font-size:38px; font-weight:bold; color:#111; }92 .sold { color:#777; font-size:26px; margin-left:14px; }93 94 .cart-btn {95 margin-left:auto; width:72px; height:72px; border:2px solid #222; border-radius:36px;96 display:flex; align-items:center; justify-content:center;97 }98 99 /* Special badges */100 .lightning {101 position:absolute; left:0; bottom:0; width:100%; height:58px; display:flex;102 }103 .lightning .red { background:#E30000; color:#fff; flex:1; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:bold; }104 .lightning .orange { background:#ff3b00; color:#fff; padding:0 18px; display:flex; align-items:center; font-size:28px; font-weight:bold; }105 .green-floating {106 position:absolute; right:16px; bottom:18px; width:140px; height:140px; border:6px solid #18c319; border-radius:70px;107 background:#fff; color:#18c319; display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:bold;108 box-shadow:0 2px 8px rgba(0,0,0,0.15);109 }110 .green-floating .small { background:#18c319; color:#fff; font-size:24px; padding:4px 12px; border-radius:20px; margin-top:6px; }111 112 /* Bottom gesture bar */113 .gesture {114 position:absolute; left:50%; bottom:20px; transform:translateX(-50%);115 width:380px; height:12px; background:#000; border-radius:6px;116 }117 118 /* SVG helpers */119 .icon { width:32px; height:32px; }120 .star { fill:#000; }121 .check { fill:#10b115; }122</style>123</head>124<body>125<div id="render-target">126 127 <!-- Status bar -->128 <div class="status-bar">129 <div>8:51</div>130 <div class="status-icons">131 <!-- simple icons -->132 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="10" stroke="#666" stroke-width="2" fill="none"/><path d="M11 6v6l4 2" stroke="#666" stroke-width="2" fill="none"/></svg>133 <svg class="icon" viewBox="0 0 24 24"><path d="M3 5h18v14H3z" stroke="#666" stroke-width="2" fill="none"/><path d="M6 9h12" stroke="#666" stroke-width="2"/></svg>134 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l9 18H3z" stroke="#666" stroke-width="2" fill="none"/></svg>135 <svg class="icon" viewBox="0 0 24 24"><path d="M12 2v20" stroke="#666" stroke-width="2"/><path d="M2 12h20" stroke="#666" stroke-width="2"/></svg>136 <span class="dot"></span>137 <svg class="icon" viewBox="0 0 24 24"><path d="M18 7h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2" stroke="#666" stroke-width="2" fill="none"/><rect x="4" y="7" width="12" height="10" rx="2" stroke="#666" stroke-width="2" fill="none"/><path d="M6 9h8" stroke="#666" stroke-width="2"/></svg>138 <div style="font-size:28px; color:#444; margin-left:6px;">95%</div>139 </div>140 </div>141 142 <!-- Search -->143 <div class="search-area">144 <div class="icon-btn back">145 <svg viewBox="0 0 24 24" class="icon"><path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>146 </div>147 <div class="search-box">148 <span class="muted">mens sports shoes</span>149 <div class="inside-right">150 <div class="circle-icon">151 <svg viewBox="0 0 24 24" class="icon"><path d="M6 6l12 12M18 6L6 18" stroke="#666" stroke-width="2"/></svg>152 </div>153 </div>154 </div>155 <div class="icon-btn camera">156 <svg viewBox="0 0 24 24" class="icon">157 <path d="M4 7h16v10H4z" stroke="#111" stroke-width="2" fill="none"/>158 <circle cx="12" cy="12" r="3.5" stroke="#111" stroke-width="2" fill="none"/>159 <path d="M8 7l2-3h4l2 3" stroke="#111" stroke-width="2" fill="none"/>160 </svg>161 </div>162 </div>163 164 <!-- Filter chips -->165 <div class="chips">166 <div class="chip">167 <svg viewBox="0 0 24 24"><path d="M4 6h16M8 12h8M10 18h4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/></svg>168 <span>Filters</span>169 </div>170 <div class="chip">Sort by</div>171 <div class="chip">Category ▼</div>172 <div class="chip">Size ▼</div>173 <div class="chip">Color ▼</div>174 </div>175 176 <!-- Promo -->177 <div class="promo">178 <svg class="icon check" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" fill="none" stroke="#10b115" stroke-width="3"/></svg>179 <span>Free shipping</span>180 <div class="divider"></div>181 <svg class="icon check" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" fill="none" stroke="#10b115" stroke-width="3"/></svg>182 <span>Price adjustment within 30 days</span>183 </div>184 185 <!-- Secondary chips -->186 <div class="chips secondary">187 <div class="chip">188 <svg viewBox="0 0 24 24"><path d="M12 2v20M2 12h20" stroke="#222" stroke-width="2"/></svg>189 Deals190 </div>191 <div class="chip">Under $18</div>192 <div class="chip">★★★★☆ & up</div>193 <div class="chip">50% off or more</div>194 </div>195 196 <!-- Product grid -->197 <div class="grid">198 199 <!-- Card 1 -->200 <div class="card">201 <div class="img-holder">202 <div class="brand-tag">BAASPLOA</div>203 <div>[IMG: Yellow Lightweight Running Shoe]</div>204 <div class="ribbon">205 <div class="black">Black Friday</div>206 <div class="red">42% off discount</div>207 </div>208 </div>209 <div class="content">210 <div class="title">Baasploa Men's Lightweight Mesh...</div>211 <div class="row" style="margin-top:4px;">212 <div class="warning">Only 6 Left</div>213 <div class="sub">$6.22/wk x 4</div>214 </div>215 <div class="stars">216 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>217 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>218 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>219 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>220 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>221 <div class="count">(9,435)</div>222 </div>223 <div class="bottom-row">224 <div class="price">$24.88</div>225 <div class="sold">11K+ sold</div>226 <div class="cart-btn">227 <svg viewBox="0 0 24 24" class="icon"><path d="M3 5h3l2 10h10l3-7H7" stroke="#111" stroke-width="2" fill="none"/><circle cx="10" cy="19" r="2" fill="#111"/><circle cx="17" cy="19" r="2" fill="#111"/></svg>228 </div>229 </div>230 </div>231 </div>232 233 <!-- Card 2 -->234 <div class="card">235 <div class="img-holder">236 <div>[IMG: Black Lightweight Running Shoe]</div>237 <div class="ribbon">238 <div class="black">Black Friday</div>239 <div class="red">52% off discount</div>240 </div>241 </div>242 <div class="content">243 <div class="title">Men's Super Lightweight Running ...</div>244 <div class="row" style="margin-top:4px;">245 <div class="warning">Almost sold out</div>246 <div class="sub">$3.70/wk x 4</div>247 </div>248 <div class="stars">249 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>250 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>251 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>252 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>253 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>254 <div class="count">(48,422)</div>255 </div>256 <div class="bottom-row">257 <div class="price">$14.78</div>258 <div class="sold">19K+ sold</div>259 <div class="cart-btn">260 <svg viewBox="0 0 24 24" class="icon"><path d="M3 5h3l2 10h10l3-7H7" stroke="#111" stroke-width="2" fill="none"/><circle cx="10" cy="19" r="2" fill="#111"/><circle cx="17" cy="19" r="2" fill="#111"/></svg>261 </div>262 </div>263 </div>264 </div>265 266 <!-- Card 3 -->267 <div class="card">268 <div class="img-holder">269 <div>[IMG: Black Knit Breathable Running Shoe]</div>270 <div class="lightning">271 <div class="orange">Lightning Deal</div>272 <div class="red">Ends in 04:38:48</div>273 </div>274 </div>275 <div class="content">276 <div class="title">Men's Knit Breathable Running Sh...</div>277 <div class="row" style="margin-top:4px;">278 <div class="warning">Only 4 Left</div>279 <div class="sub">$5.27/wk x 4</div>280 </div>281 <div class="stars">282 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>283 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>284 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>285 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>286 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>287 <div class="count">(5,370)</div>288 </div>289 <div class="bottom-row">290 <div class="price" style="color:#ff7a00;">$21.05</div>291 <div class="sold">163 sold</div>292 <div class="cart-btn">293 <svg viewBox="0 0 24 24" class="icon"><path d="M3 5h3l2 10h10l3-7H7" stroke="#111" stroke-width="2" fill="none"/><circle cx="10" cy="19" r="2" fill="#111"/><circle cx="17" cy="19" r="2" fill="#111"/></svg>294 </div>295 </div>296 </div>297 </div>298 299 <!-- Card 4 -->300 <div class="card">301 <div class="img-holder">302 <div>[IMG: White Lace-up Sneakers]</div>303 <div class="ribbon">304 <div class="black">Black Friday</div>305 <div class="red">52% off discount</div>306 </div>307 <div class="green-floating">308 <svg viewBox="0 0 24 24" class="icon" style="fill:#18c319;">309 <path d="M3 5h3l2 10h10l3-7H7" fill="#18c319"/>310 </svg>311 <div>Cart</div>312 <div class="small">Free Shipping</div>313 </div>314 </div>315 <div class="content">316 <div class="title">Men's Lace-up Sneakers...</div>317 <div class="row" style="margin-top:4px;">318 <div class="warning">Only 4 Left</div>319 <div class="sub">$5.25/wk x 4</div>320 </div>321 <div class="stars">322 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>323 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>324 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>325 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>326 <svg viewBox="0 0 24 24" class="icon star"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>327 <div class="count">(4,464)</div>328 </div>329 <div class="bottom-row">330 <div class="price">$20.98</div>331 <div class="sold">923 sold</div>332 <div class="cart-btn">333 <svg viewBox="0 0 24 24" class="icon"><path d="M3 5h3l2 10h10l3-7H7" stroke="#111" stroke-width="2" fill="none"/><circle cx="10" cy="19" r="2" fill="#111"/><circle cx="17" cy="19" r="2" fill="#111"/></svg>334 </div>335 </div>336 </div>337 </div>338 339 <!-- Partial next row previews to match screenshot flow -->340 <div class="card">341 <div class="img-holder"><div>[IMG: Trail Running Shoes on Rocks]</div></div>342 <div class="content"><div class="title">Men's Trail Sneakers...</div></div>343 </div>344 <div class="card">345 <div class="img-holder"><div>[IMG: Black Sneakers on Background]</div></div>346 <div class="content"><div class="title">Men's Cushion Sneakers...</div></div>347 </div>348 349 </div>350 351 <!-- Bottom gesture bar -->352 <div class="gesture"></div>353 354</div>355</body>356</html>