GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Sport Shoes Men - Results</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 /* Status bar */16 .status-bar {17 height: 82px;18 padding: 0 32px;19 display: flex; align-items: center; justify-content: space-between;20 color: #222;21 font-size: 34px;22 border-bottom: 1px solid #eee;23 }24 .sb-left { display: flex; align-items: center; gap: 18px; }25 .sb-dots { width: 8px; height: 8px; background: #666; border-radius: 50%; display: inline-block; margin: 0 10px; }26 .sb-right { display: flex; align-items: center; gap: 16px; }27 .battery {28 display: inline-flex; align-items: center; gap: 10px; font-size: 30px;29 }30 .battery-box { width: 38px; height: 22px; border: 2px solid #333; border-radius: 4px; position: relative; }31 .battery-box::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #333; border-radius: 2px; }32 .battery-level { position: absolute; left: 3px; top: 3px; width: 30px; height: 16px; background: #2ecc71; }33 34 /* Header with search */35 .header {36 padding: 22px 24px 12px 24px;37 }38 .header-row {39 display: flex; align-items: center; gap: 22px;40 }41 .icon-btn {42 width: 72px; height: 72px; border-radius: 36px;43 display: flex; align-items: center; justify-content: center;44 background: transparent;45 }46 .search-bar {47 flex: 1;48 height: 106px;49 border: 3px solid #356BFF;50 border-radius: 60px;51 display: flex; align-items: center;52 padding: 0 28px;53 gap: 20px;54 font-size: 40px; color: #222;55 box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;56 }57 .search-placeholder { color: #333; }58 .header-actions {59 display: flex; align-items: center; gap: 24px;60 }61 .divider { height: 1px; background: #e8e8e8; margin: 22px 0 14px; }62 .result-info {63 font-size: 34px; color: #666;64 padding: 0 24px 18px;65 }66 .result-info b { color: #222; }67 68 /* Category chips */69 .category-section {70 margin: 0 0 18px;71 padding: 22px 24px 26px;72 background: linear-gradient(90deg, #FFECEC 0%, #F9EFEF 100%);73 }74 .category-title {75 font-size: 46px; font-weight: 700; color: #2b2b2b; margin-bottom: 20px;76 }77 .category-row {78 display: flex; gap: 24px;79 }80 .cat-card {81 width: 190px;82 background: #fff; border: 1px solid #e6e6e6; border-radius: 22px;83 padding: 18px 14px;84 text-align: center;85 }86 .cat-circle {87 width: 162px; height: 162px; border-radius: 50%;88 background: radial-gradient(circle at 50% 30%, #ffd3c6, #f7a991);89 margin: 0 auto 12px;90 display: flex; align-items: center; justify-content: center;91 }92 .cat-circle.pink { background: radial-gradient(circle at 50% 30%, #ffd0e6, #f6a5c8); }93 .cat-circle.purple { background: radial-gradient(circle at 50% 30%, #dcd3ff, #b9a4ff); }94 .cat-circle.violet { background: radial-gradient(circle at 50% 30%, #d9d4ff, #b6b0ff); }95 .img-ph {96 width: 140px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;97 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; text-align: center;98 }99 .cat-label { font-size: 34px; color: #444; }100 101 /* Product grid */102 .product-grid {103 padding: 20px 16px 0;104 display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;105 }106 .product-card {107 background: #fff; border: 1px solid #eee; border-radius: 14px; overflow: hidden;108 position: relative;109 }110 .product-img {111 height: 620px;112 background: #E0E0E0; border-bottom: 1px solid #BDBDBD;113 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px; text-align: center;114 }115 .carousel-dots {116 position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);117 display: flex; gap: 12px;118 }119 .dot { width: 14px; height: 14px; background: #c9c9c9; border-radius: 50%; }120 .dot.active { background: #333; }121 122 .product-info { padding: 18px 18px 24px; }123 .product-title {124 font-size: 34px; color: #333; line-height: 1.28;125 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;126 min-height: 86px;127 }128 .price-row {129 display: flex; align-items: baseline; gap: 12px; margin-top: 8px;130 font-size: 40px; font-weight: 700; color: #000;131 }132 .old-price { font-size: 34px; color: #888; text-decoration: line-through; }133 .discount { font-size: 34px; color: #D88A1A; font-weight: 700; }134 135 /* Floating action */136 .fab {137 position: absolute; right: 22px; top: 520px;138 width: 88px; height: 88px; border-radius: 44px;139 background: #E84D62; display: flex; align-items: center; justify-content: center;140 box-shadow: 0 6px 16px rgba(232,77,98,0.35);141 }142 143 /* Color swatch pill */144 .swatch-pill {145 position: absolute; right: 22px; bottom: 146px;146 background: #fff; border: 1px solid #d9d9d9; border-radius: 28px;147 padding: 6px 12px; display: flex; align-items: center; gap: 8px; font-size: 28px; color: #666;148 }149 .sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #cfcfcf; }150 .sw.red { background: #8b1b2e; }151 .sw.blue { background: #233b84; }152 .sw.green { background: #7e9b2b; }153 .sw.olive { background: #556b2f; }154 .sw.gold { background: #c6aa2e; }155 156 /* Bottom toolbar */157 .bottom-bar {158 position: absolute; bottom: 60px; left: 0; right: 0;159 height: 150px; background: #fff; border-top: 1px solid #e6e6e6;160 display: flex; align-items: center; justify-content: space-around;161 font-size: 40px; color: #333;162 }163 .tool {164 display: flex; align-items: center; gap: 18px;165 }166 .red-dot { width: 16px; height: 16px; background: #E84D62; border-radius: 50%; display: inline-block; margin-left: 6px; }167 168 /* Home indicator */169 .home-indicator {170 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);171 width: 360px; height: 10px; background: #000; opacity: 0.8; border-radius: 6px;172 }173 /* Simple SVG baseline */174 svg { display: block; }175</style>176</head>177<body>178<div id="render-target">179 180 <!-- Status Bar -->181 <div class="status-bar">182 <div class="sb-left">183 <div>9:58</div>184 <div class="sb-dots"></div>185 <div class="sb-dots"></div>186 <div class="sb-dots"></div>187 <div class="sb-dots"></div>188 </div>189 <div class="sb-right">190 <span>⏻</span>191 <div class="battery">192 <div class="battery-box"><div class="battery-level"></div></div>193 <div>100%</div>194 </div>195 </div>196 </div>197 198 <!-- Header controls -->199 <div class="header">200 <div class="header-row">201 <div class="icon-btn">202 <svg width="44" height="44" viewBox="0 0 24 24">203 <path d="M15 6l-6 6 6 6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>204 </svg>205 </div>206 207 <div class="search-bar">208 <svg width="44" height="44" viewBox="0 0 24 24">209 <circle cx="11" cy="11" r="7" stroke="#356BFF" stroke-width="2" fill="none"/>210 <path d="M20 20l-4.5-4.5" stroke="#356BFF" stroke-width="2" fill="none" stroke-linecap="round"/>211 </svg>212 <div class="search-placeholder">sport shoes men</div>213 </div>214 215 <div class="header-actions">216 <div class="icon-btn">217 <svg width="44" height="44" viewBox="0 0 24 24">218 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke="#222" stroke-width="2" fill="none" stroke-linejoin="round"/>219 <path d="M9 21V12h6v9" stroke="#222" stroke-width="2" fill="none"/>220 </svg>221 </div>222 <div class="icon-btn">223 <svg width="44" height="44" viewBox="0 0 24 24">224 <path d="M3 5h2l2 12h11l2-9H7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>225 <circle cx="10" cy="20" r="1.8" fill="#222"/>226 <circle cx="17" cy="20" r="1.8" fill="#222"/>227 </svg>228 </div>229 <div class="icon-btn">230 <svg width="44" height="44" viewBox="0 0 24 24">231 <path d="M4 20l1.5-3.5A8.5 8.5 0 1 1 12 20" stroke="#22a65b" stroke-width="2" fill="none" stroke-linecap="round"/>232 <circle cx="12" cy="11" r="3" fill="#22a65b"/>233 </svg>234 </div>235 </div>236 </div>237 238 <div class="divider"></div>239 <div class="result-info">Showing results for <b>sport shoes men</b></div>240 </div>241 242 <!-- Category section -->243 <div class="category-section">244 <div class="category-title">Footwear Range</div>245 <div class="category-row">246 <div class="cat-card">247 <div class="cat-circle">248 <div class="img-ph">[IMG: Sports]</div>249 </div>250 <div class="cat-label">Sports</div>251 </div>252 <div class="cat-card">253 <div class="cat-circle pink">254 <div class="img-ph">[IMG: Sneakers]</div>255 </div>256 <div class="cat-label">Sneakers</div>257 </div>258 <div class="cat-card">259 <div class="cat-circle pink">260 <div class="img-ph">[IMG: Loafers]</div>261 </div>262 <div class="cat-label">Loafers</div>263 </div>264 <div class="cat-card">265 <div class="cat-circle violet">266 <div class="img-ph">[IMG: Casual]</div>267 </div>268 <div class="cat-label">Casual</div>269 </div>270 <div class="cat-card">271 <div class="cat-circle purple">272 <div class="img-ph">[IMG: Ethnic]</div>273 </div>274 <div class="cat-label">Ethnic</div>275 </div>276 </div>277 </div>278 279 <!-- Product grid -->280 <div class="product-grid">281 <!-- Product 1 -->282 <div class="product-card">283 <div class="product-img">[IMG: White sneakers on green backdrop]</div>284 <div class="carousel-dots">285 <div class="dot active"></div>286 <div class="dot"></div>287 <div class="dot"></div>288 </div>289 <div class="product-info">290 <div class="product-title">Campus - FIRST Off White Men's ...</div>291 <div class="price-row">292 <div>₹975</div>293 <div class="old-price">₹1,899</div>294 <div class="discount">49% OFF</div>295 </div>296 </div>297 </div>298 299 <!-- Product 2 -->300 <div class="product-card">301 <div class="product-img">[IMG: Navy sports shoe close-up]</div>302 <div class="carousel-dots">303 <div class="dot"></div>304 <div class="dot active"></div>305 <div class="dot"></div>306 </div>307 <div class="fab">308 <svg width="44" height="44" viewBox="0 0 24 24">309 <path d="M12 5a7 7 0 1 1-7 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>310 <path d="M12 1v6h6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>311 </svg>312 </div>313 <div class="product-info">314 <div class="product-title">Campus - Navy Men's Sports Ru...</div>315 <div class="price-row">316 <div>₹875</div>317 <div class="old-price">₹1,599</div>318 <div class="discount">45% OFF</div>319 </div>320 </div>321 </div>322 323 <!-- Product 3 -->324 <div class="product-card">325 <div class="product-img">[IMG: Black slip-on shoes]</div>326 <div class="product-info">327 <div class="product-title">Slip-on Comfort Black Men's Shoes</div>328 <div class="price-row">329 <div>₹799</div>330 <div class="old-price">₹1,299</div>331 <div class="discount">38% OFF</div>332 </div>333 </div>334 <div class="swatch-pill">335 <div class="sw.red sw"></div>336 <div class="sw.blue sw"></div>337 </div>338 </div>339 340 <!-- Product 4 -->341 <div class="product-card">342 <div class="product-img">[IMG: Olive lace-up sneaker]</div>343 <div class="product-info">344 <div class="product-title">Lace-up Olive Men's Sports Sneaker</div>345 <div class="price-row">346 <div>₹949</div>347 <div class="old-price">₹1,499</div>348 <div class="discount">36% OFF</div>349 </div>350 </div>351 <div class="swatch-pill">352 <div class="sw.green sw"></div>353 <div class="sw.olive sw"></div>354 <div class="sw.gold sw"></div>355 <span>+1</span>356 </div>357 </div>358 </div>359 360 <!-- Bottom action bar -->361 <div class="bottom-bar">362 <div class="tool">363 <svg width="44" height="44" viewBox="0 0 24 24">364 <path d="M7 4v16M17 4v16M4 7h6M14 17h6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>365 </svg>366 <div>Sort</div>367 </div>368 <div class="tool">369 <svg width="44" height="44" viewBox="0 0 24 24">370 <path d="M5 6h14M8 12h10M11 18h7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>371 </svg>372 <div>Filter<span class="red-dot"></span></div>373 </div>374 </div>375 376 <!-- Home indicator -->377 <div class="home-indicator"></div>378</div>379</body>380</html>