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.0">6<title>Search - Sports shoes for men</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0; left: 0;21 width: 100%;22 height: 120px;23 background: #EAEAEA;24 display: flex;25 align-items: center;26 padding: 0 32px;27 box-sizing: border-box;28 color: #3A3A3A;29 font-size: 36px;30 }31 .status-spacer { flex: 1; }32 .status-icons svg { width: 40px; height: 40px; margin-left: 18px; }33 34 /* Search header */35 .header {36 position: absolute;37 top: 120px; left: 0;38 width: 100%;39 height: 140px;40 background: #fff;41 display: flex;42 align-items: center;43 box-sizing: border-box;44 padding: 0 32px;45 border-bottom: 1px solid #eee;46 }47 .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 20px; }48 .search-text { font-size: 40px; color: #222; flex: 1; }49 .header-icons svg { width: 56px; height: 56px; margin-left: 32px; stroke: #333; }50 51 /* Sort / Filter row */52 .tools-row {53 position: absolute;54 top: 260px; left: 0;55 width: 100%;56 height: 120px;57 display: grid;58 grid-template-columns: 1fr 1fr;59 gap: 0;60 background: #fff;61 border-bottom: 1px solid #eee;62 }63 .tool {64 display: flex;65 align-items: center;66 padding: 0 40px;67 box-sizing: border-box;68 border-right: 1px solid #eee;69 font-size: 36px;70 color: #333;71 }72 .tool:last-child { border-right: none; }73 .tool svg { width: 48px; height: 48px; margin-right: 20px; stroke: #333; }74 .badge {75 position: relative;76 display: inline-block;77 }78 .badge::after {79 content: "1";80 position: absolute;81 top: -10px; right: -14px;82 background: #E74C3C;83 color: #fff;84 font-size: 26px;85 line-height: 28px;86 width: 30px; height: 30px;87 border-radius: 50%;88 text-align: center;89 box-shadow: 0 0 0 2px #fff;90 }91 92 /* Products */93 .content {94 position: absolute;95 top: 380px; left: 0;96 width: 100%;97 padding: 20px 32px 200px;98 box-sizing: border-box;99 }100 .grid {101 display: grid;102 grid-template-columns: 1fr 1fr;103 gap: 32px;104 }105 .card {106 background: #fff;107 border: 1px solid #E6E6E6;108 border-radius: 24px;109 overflow: hidden;110 box-shadow: 0 0 0 rgba(0,0,0,0);111 }112 .img-wrap {113 position: relative;114 padding: 16px;115 box-sizing: border-box;116 }117 .img {118 width: 100%;119 height: 520px;120 background: #E0E0E0;121 border: 1px solid #BDBDBD;122 border-radius: 20px;123 display: flex;124 align-items: center;125 justify-content: center;126 color: #757575;127 font-size: 32px;128 text-align: center;129 }130 .fav {131 position: absolute;132 top: 24px; right: 24px;133 width: 80px; height: 80px;134 border-radius: 40px;135 background: rgba(255,255,255,0.85);136 display: flex; align-items: center; justify-content: center;137 border: 1px solid #e5e5e5;138 }139 .fav svg { width: 48px; height: 48px; stroke: #777; }140 141 .card-body {142 padding: 16px 24px 24px;143 }144 .brand {145 font-weight: 800;146 letter-spacing: 1px;147 font-size: 34px;148 margin-bottom: 6px;149 color: #222;150 }151 .title {152 font-size: 30px;153 color: #666;154 white-space: nowrap;155 overflow: hidden;156 text-overflow: ellipsis;157 margin-bottom: 10px;158 }159 .price {160 font-size: 38px;161 font-weight: 800;162 color: #000;163 margin-bottom: 8px;164 }165 .price .strike {166 font-size: 30px;167 color: #888;168 text-decoration: line-through;169 font-weight: 600;170 margin-right: 10px;171 }172 .price .save {173 font-size: 30px;174 color: #19A463;175 font-weight: 700;176 margin-left: 8px;177 }178 .rating {179 display: flex; align-items: center;180 color: #19A463;181 font-size: 30px;182 margin-top: 6px;183 }184 .rating svg { width: 34px; height: 34px; margin-right: 6px; }185 .rating .count {186 color: #888; margin-left: 8px;187 }188 189 /* Bottom nav */190 .bottom-nav {191 position: absolute;192 bottom: 84px; left: 0;193 width: 100%;194 height: 150px;195 background: #fff;196 border-top: 1px solid #e6e6e6;197 display: grid;198 grid-template-columns: repeat(5, 1fr);199 align-items: center;200 text-align: center;201 font-size: 28px;202 color: #666;203 }204 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; }205 .nav-item svg { width: 56px; height: 56px; margin-bottom: 8px; stroke: #666; }206 .nav-item.active { color: #6C56F9; font-weight: 700; }207 .nav-item.active svg { stroke: #6C56F9; }208 .nav-indicator {209 position: absolute;210 top: -6px;211 left: 50%;212 transform: translateX(-50%);213 width: 200px;214 height: 8px;215 background: #6C56F9;216 border-radius: 4px;217 }218 219 /* Gesture bar */220 .gesture {221 position: absolute;222 bottom: 24px; left: 50%;223 transform: translateX(-50%);224 width: 260px; height: 14px;225 background: #111;226 border-radius: 8px;227 opacity: 0.9;228 }229</style>230</head>231<body>232<div id="render-target">233 234 <!-- Status Bar -->235 <div class="status-bar">236 <div>2:15</div>237 <div class="status-spacer"></div>238 <div class="status-icons">239 <!-- simple status glyphs -->240 <svg viewBox="0 0 24 24"><path d="M3 12h18" stroke="#666" stroke-width="2"/></svg>241 <svg viewBox="0 0 24 24"><path d="M5 4h14v16H5z" stroke="#666" stroke-width="2" fill="none"/></svg>242 <svg viewBox="0 0 24 24"><path d="M4 6l8 6-8 6" stroke="#666" stroke-width="2" fill="none"/></svg>243 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" stroke="#666" stroke-width="2" fill="none"/><path d="M15 15l5 5" stroke="#666" stroke-width="2"/></svg>244 <svg viewBox="0 0 24 24"><path d="M20 8v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8" stroke="#666" stroke-width="2" fill="none"/></svg>245 <svg viewBox="0 0 24 24"><path d="M3 12h18" stroke="#666" stroke-width="2"/></svg>246 </div>247 </div>248 249 <!-- Header -->250 <div class="header">251 <div class="back-btn">252 <svg viewBox="0 0 24 24">253 <path d="M15 5L8 12l7 7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>254 </svg>255 </div>256 <div class="search-text">sports shoes for men</div>257 <div class="header-icons">258 <!-- search -->259 <svg viewBox="0 0 24 24">260 <circle cx="10" cy="10" r="7" stroke-width="2" fill="none"/>261 <path d="M15 15l6 6" stroke-width="2" fill="none" />262 </svg>263 <!-- mic -->264 <svg viewBox="0 0 24 24">265 <rect x="9" y="4" width="6" height="10" rx="3" ry="3" stroke-width="2" fill="none"/>266 <path d="M6 11v2a6 6 0 0 0 12 0v-2" stroke-width="2" fill="none"/>267 <path d="M12 19v3" stroke-width="2" />268 </svg>269 <!-- heart -->270 <svg viewBox="0 0 24 24">271 <path d="M12 21s-8-6-8-11a5 5 0 0 1 8-3 5 5 0 0 1 8 3c0 5-8 11-8 11z" stroke-width="2" fill="none"/>272 </svg>273 <!-- cart -->274 <svg viewBox="0 0 24 24">275 <path d="M3 5h3l2 12h10l2-9H7" stroke-width="2" fill="none" />276 <circle cx="9" cy="20" r="2" />277 <circle cx="18" cy="20" r="2" />278 </svg>279 </div>280 </div>281 282 <!-- Sort / Filter -->283 <div class="tools-row">284 <div class="tool">285 <svg viewBox="0 0 24 24">286 <path d="M7 4v12M7 4l-3 3M7 4l3 3" stroke-width="2" fill="none" stroke-linecap="round"/>287 <path d="M17 20V8M17 20l-3-3M17 20l3-3" stroke-width="2" fill="none" stroke-linecap="round"/>288 </svg>289 <span>Sort</span>290 </div>291 <div class="tool">292 <span class="badge">293 <svg viewBox="0 0 24 24">294 <path d="M4 6h16M10 6v0M14 6v0" stroke-width="2" fill="none" stroke-linecap="round"/>295 <path d="M6 12h12M12 12v0" stroke-width="2" fill="none" stroke-linecap="round"/>296 <path d="M8 18h8M16 18v0" stroke-width="2" fill="none" stroke-linecap="round"/>297 </svg>298 </span>299 <span>Filter</span>300 </div>301 </div>302 303 <!-- Content -->304 <div class="content">305 <div class="grid">306 307 <!-- Card 1 -->308 <div class="card">309 <div class="img-wrap">310 <div class="img">[IMG: Nike Precision 5 Basketball Shoes]</div>311 <div class="fav">312 <svg viewBox="0 0 24 24">313 <path d="M12 21s-8-6-8-11a5 5 0 0 1 8-3 5 5 0 0 1 8 3c0 5-8 11-8 11z" stroke-width="2" fill="none"/>314 </svg>315 </div>316 </div>317 <div class="card-body">318 <div class="brand">NIKE</div>319 <div class="title">Precision 5 Basketball Shoes...</div>320 <div class="price">₹5,695</div>321 <div class="rating">322 <!-- 4 full stars + grey star -->323 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#19A463"/></svg>324 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#19A463"/></svg>325 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#19A463"/></svg>326 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#19A463"/></svg>327 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#CFCFCF"/></svg>328 <span class="count">(911)</span>329 </div>330 </div>331 </div>332 333 <!-- Card 2 -->334 <div class="card">335 <div class="img-wrap">336 <div class="img">[IMG: Nike Revolution 7 WIDE Running]</div>337 <div class="fav">338 <svg viewBox="0 0 24 24">339 <path d="M12 21s-8-6-8-11a5 5 0 0 1 8-3 5 5 0 0 1 8 3c0 5-8 11-8 11z" stroke-width="2" fill="none"/>340 </svg>341 </div>342 </div>343 <div class="card-body">344 <div class="brand">NIKE</div>345 <div class="title">REVOLUTION 7 WIDE Running...</div>346 <div class="price">₹3,695</div>347 <div class="rating">348 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#19A463"/></svg>349 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#19A463"/></svg>350 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#19A463"/></svg>351 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#19A463"/></svg>352 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#CFCFCF"/></svg>353 <span class="count">(26)</span>354 </div>355 </div>356 </div>357 358 <!-- Card 3 -->359 <div class="card">360 <div class="img-wrap">361 <div class="img">[IMG: Nike Downshifter 11 Running Shoe]</div>362 <div class="fav">363 <svg viewBox="0 0 24 24">364 <path d="M12 21s-8-6-8-11a5 5 0 0 1 8-3 5 5 0 0 1 8 3c0 5-8 11-8 11z" stroke-width="2" fill="none"/>365 </svg>366 </div>367 </div>368 <div class="card-body">369 <div class="brand">NIKE</div>370 <div class="title">Downshifter 11 Running Shoes...</div>371 <div class="price">₹3,995</div>372 <div class="rating">373 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#19A463"/></svg>374 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#19A463"/></svg>375 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#19A463"/></svg>376 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#19A463"/></svg>377 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#CFCFCF"/></svg>378 <span class="count">(203)</span>379 </div>380 </div>381 </div>382 383 <!-- Card 4 -->384 <div class="card">385 <div class="img-wrap">386 <div class="img">[IMG: Nike LeBron Witness 6 EP Basketball]</div>387 <div class="fav">388 <svg viewBox="0 0 24 24">389 <path d="M12 21s-8-6-8-11a5 5 0 0 1 8-3 5 5 0 0 1 8 3c0 5-8 11-8 11z" stroke-width="2" fill="none"/>390 </svg>391 </div>392 </div>393 <div class="card-body">394 <div class="brand">NIKE</div>395 <div class="title">LeBron Witness 6 EP Basketb...</div>396 <div class="price"><span class="strike">₹8,295</span> ₹6,884 <span class="save">17% off</span></div>397 <div class="rating">398 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#19A463"/></svg>399 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#19A463"/></svg>400 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#19A463"/></svg>401 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#19A463"/></svg>402 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#CFCFCF"/></svg>403 <span class="count">(87)</span>404 </div>405 </div>406 </div>407 408 </div>409 </div>410 411 <!-- Bottom Navigation -->412 <div class="bottom-nav">413 <div class="nav-indicator"></div>414 <div class="nav-item">415 <svg viewBox="0 0 24 24">416 <path d="M3 11l9-7 9 7v9H3z" stroke-width="2" fill="none"/>417 </svg>418 <div>Home</div>419 </div>420 <div class="nav-item active">421 <svg viewBox="0 0 24 24">422 <circle cx="10" cy="10" r="6" stroke-width="2" fill="none"/>423 <path d="M15 15l6 6" stroke-width="2" fill="none"/>424 </svg>425 <div>Search</div>426 </div>427 <div class="nav-item">428 <svg viewBox="0 0 24 24">429 <path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z" stroke-width="2" fill="none"/>430 </svg>431 <div>Categories</div>432 </div>433 <div class="nav-item">434 <svg viewBox="0 0 24 24">435 <path d="M12 12a6 6 0 1 0-6-6 6 6 0 0 0 6 6zM4 22c1.5-4 6.5-4 8-4s6.5 0 8 4" stroke-width="2" fill="none"/>436 </svg>437 <div>Account</div>438 </div>439 <div class="nav-item">440 <svg viewBox="0 0 24 24">441 <path d="M3 5h3l2 12h10l2-9H7" stroke-width="2" fill="none"/>442 <circle cx="9" cy="20" r="2"/>443 <circle cx="18" cy="20" r="2"/>444 </svg>445 <div>Cart</div>446 </div>447 </div>448 449 <!-- Gesture Home Bar -->450 <div class="gesture"></div>451 452</div>453</body>454</html>