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 Results - Sports Shoes</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #222;17 }18 /* Header */19 .header {20 width: 100%;21 height: 260px;22 background: linear-gradient(180deg, #78d7cf 0%, #bdeee6 100%);23 box-sizing: border-box;24 padding: 28px 32px 18px 32px;25 }26 .status-bar {27 display: flex;28 justify-content: space-between;29 align-items: center;30 font-size: 28px;31 color: #0b3b37;32 opacity: 0.9;33 }34 .status-icons { display: flex; align-items: center; gap: 18px; }35 .search-row {36 margin-top: 22px;37 display: flex;38 align-items: center;39 gap: 18px;40 }41 .icon-btn {42 width: 60px; height: 60px;43 display: flex; align-items: center; justify-content: center;44 border-radius: 30px;45 cursor: pointer;46 }47 .search-box {48 flex: 1;49 height: 96px;50 background: #fff;51 border-radius: 24px;52 box-shadow: 0 3px 10px rgba(0,0,0,0.15);53 display: flex;54 align-items: center;55 padding: 0 26px;56 box-sizing: border-box;57 gap: 18px;58 }59 .search-text {60 flex: 1;61 font-size: 36px;62 color: #333;63 }64 /* Chips / filters */65 .chips {66 width: 100%;67 background: #ffffff;68 box-sizing: border-box;69 padding: 12px 24px;70 display: flex;71 gap: 16px;72 align-items: center;73 border-bottom: 1px solid #e3e3e3;74 }75 .chip {76 display: inline-flex;77 align-items: center;78 gap: 12px;79 padding: 18px 26px;80 border-radius: 22px;81 border: 1px solid #cfe9e5;82 background: #e9f6f4;83 color: #1f6b66;84 font-size: 30px;85 white-space: nowrap;86 }87 .chip.secondary {88 background: #f6fbfb;89 border-color: #d5e6e4;90 color: #3b6f6a;91 }92 .chip.right { margin-left: auto; }93 .switch {94 width: 58px; height: 30px;95 background: #ddd; border-radius: 15px; position: relative;96 }97 .switch::after {98 content: ""; position: absolute; left: 2px; top: 2px;99 width: 26px; height: 26px; background: #fff; border-radius: 50%;100 box-shadow: 0 1px 2px rgba(0,0,0,0.2);101 }102 /* Grid */103 .grid {104 width: 100%;105 display: grid;106 grid-template-columns: 1fr 1fr;107 column-gap: 0;108 row-gap: 0;109 }110 .card {111 width: 540px;112 border-right: 1px solid #e5e5e5;113 border-bottom: 1px solid #e5e5e5;114 box-sizing: border-box;115 background: #fff;116 }117 .card:nth-child(2n) { border-right: none; }118 .image-area {119 position: relative;120 width: 100%;121 height: 460px;122 display: flex;123 align-items: center;124 justify-content: center;125 background: #E0E0E0;126 border-bottom: 1px solid #d3d3d3;127 box-sizing: border-box;128 }129 .image-area .img-label {130 color: #757575;131 font-size: 30px;132 border: 1px solid #BDBDBD;133 padding: 12px 16px;134 background: rgba(255,255,255,0.7);135 border-radius: 8px;136 }137 .like-pill {138 position: absolute; right: 22px; bottom: 18px;139 display: inline-flex; align-items: center; gap: 8px;140 padding: 8px 14px;141 background: #fff; border: 1px solid #cfcfcf; border-radius: 20px;142 font-size: 26px; color: #555;143 }144 .like-pill .dot {145 width: 18px; height: 18px; border-radius: 50%;146 background: #222; box-shadow: 0 0 0 2px #999 inset;147 }148 .details {149 padding: 18px 24px 22px 24px;150 }151 .brand { font-size: 34px; font-weight: 700; margin-bottom: 6px; }152 .title { font-size: 30px; color: #444; line-height: 1.3; margin-bottom: 12px; }153 .rating-row {154 display: flex; align-items: center; gap: 8px;155 margin-bottom: 14px; font-size: 30px;156 }157 .rating-score { color: #1e9bd7; font-weight: 600; }158 .stars { display: inline-flex; gap: 4px; }159 .count { color: #777; font-size: 28px; }160 .badge {161 display: inline-block; background: #b83b08; color: #fff;162 padding: 10px 14px; border-radius: 6px; font-size: 28px; margin: 10px 0 14px 0;163 }164 .price-row { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }165 .price { font-size: 46px; font-weight: 800; }166 .mrp { font-size: 28px; color: #777; text-decoration: line-through; }167 .off { font-size: 28px; color: #555; }168 .prime {169 display: inline-flex; align-items: center; gap: 8px;170 color: #1e9bd7; font-weight: 700; font-size: 30px; margin-top: 8px;171 }172 .delivery { font-size: 26px; color: #666; margin-top: 6px; }173 /* Bottom navigation */174 .bottom-nav {175 position: absolute; left: 0; right: 0; bottom: 0;176 height: 180px; border-top: 1px solid #e5e5e5; background: #fff;177 display: flex; justify-content: space-around; align-items: center;178 }179 .nav-item { width: 20%; text-align: center; color: #333; }180 .nav-item span { display: block; font-size: 28px; margin-top: 8px; }181 .nav-item.active { color: #14a6a0; }182 .home-indicator {183 position: absolute; left: 50%; transform: translateX(-50%);184 bottom: 186px; width: 300px; height: 14px; background: #bbb; border-radius: 7px;185 opacity: 0.6;186 }187 /* Small helpers */188 svg { display: block; }189</style>190</head>191<body>192<div id="render-target">193 <div class="header">194 <div class="status-bar">195 <div>10:38</div>196 <div class="status-icons">197 <!-- Simple status placeholders -->198 <svg width="26" height="26"><circle cx="13" cy="13" r="10" fill="none" stroke="#0b3b37" stroke-width="2"/></svg>199 <svg width="26" height="26"><circle cx="13" cy="13" r="10" fill="none" stroke="#0b3b37" stroke-width="2"/><path d="M7 13h12" stroke="#0b3b37" stroke-width="2"/></svg>200 <svg width="26" height="26"><rect x="4" y="6" width="16" height="12" rx="2" fill="none" stroke="#0b3b37" stroke-width="2"/><rect x="21" y="10" width="3" height="4" rx="1" fill="#0b3b37"/></svg>201 <span>100%</span>202 </div>203 </div>204 <div class="search-row">205 <div class="icon-btn">206 <svg width="42" height="42" viewBox="0 0 48 48">207 <path d="M28 10 L16 24 L28 38" fill="none" stroke="#0b3b37" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>208 </svg>209 </div>210 <div class="search-box">211 <svg width="34" height="34" viewBox="0 0 24 24">212 <circle cx="11" cy="11" r="7" fill="none" stroke="#777" stroke-width="2"/>213 <path d="M20 20 L16 16" stroke="#777" stroke-width="2" stroke-linecap="round"/>214 </svg>215 <div class="search-text">sports shoes for men</div>216 <svg width="40" height="40" viewBox="0 0 24 24">217 <rect x="3" y="7" width="18" height="12" rx="3" fill="none" stroke="#777" stroke-width="2"/>218 <rect x="9" y="5" width="6" height="4" rx="1" fill="none" stroke="#777" stroke-width="2"/>219 <circle cx="12" cy="13" r="4" fill="none" stroke="#777" stroke-width="2"/>220 </svg>221 </div>222 </div>223 </div>224 225 <div class="chips">226 <div class="chip">227 <svg width="24" height="24" viewBox="0 0 24 24">228 <path d="M5 12l4 4 10-10" fill="none" stroke="#ffb31a" stroke-width="3" stroke-linecap="round"/>229 </svg>230 prime231 <div class="switch"></div>232 </div>233 <div class="chip secondary">Nike</div>234 <div class="chip secondary">Shoes & Handb...</div>235 <div class="chip right secondary">Filters (2)236 <svg width="20" height="20" viewBox="0 0 24 24">237 <path d="M8 10l4 4 4-4" fill="none" stroke="#3b6f6a" stroke-width="2" stroke-linecap="round"/>238 </svg>239 </div>240 </div>241 242 <div class="grid">243 <!-- Card 1 -->244 <div class="card">245 <div class="image-area">246 <div class="img-label">[IMG: White Nike Running Shoe]</div>247 <div class="like-pill"><div class="dot"></div><div class="dot"></div>11</div>248 </div>249 <div class="details">250 <div class="brand">Nike</div>251 <div class="title">Mens Revolution 6 Nn 4e Men's Shoes Sneaker</div>252 <div class="rating-row">253 <div class="rating-score">3.9</div>254 <div class="stars">255 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#f59e0b"/></svg>256 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#f59e0b"/></svg>257 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#f59e0b"/></svg>258 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#f59e0b"/></svg>259 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#ddd"/></svg>260 </div>261 <div class="count">(945)</div>262 </div>263 <div class="badge">Deal of the Day</div>264 <div class="price-row">265 <div class="price">₹3,204</div>266 <div class="mrp">M.R.P: ₹3,695</div>267 <div class="off">(13% off)</div>268 </div>269 <div class="prime">270 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" fill="none" stroke="#ffb31a" stroke-width="3" stroke-linecap="round"/></svg>271 prime272 </div>273 <div class="delivery">FREE Delivery by Amazon</div>274 </div>275 </div>276 277 <!-- Card 2 -->278 <div class="card">279 <div class="image-area">280 <div class="img-label">[IMG: Black Nike Shoe with Lime Swoosh]</div>281 <div class="like-pill"><div class="dot"></div><div class="dot"></div>17</div>282 </div>283 <div class="details">284 <div class="brand">Nike</div>285 <div class="title">Mens React Infinity Run Fk 3 Running Shoe</div>286 <div class="rating-row">287 <div class="rating-score">4.4</div>288 <div class="stars">289 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#f59e0b"/></svg>290 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#f59e0b"/></svg>291 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#f59e0b"/></svg>292 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#f59e0b"/></svg>293 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#ddd"/></svg>294 </div>295 <div class="count">(136)</div>296 </div>297 <div class="price-row">298 <div class="price">₹13,995</div>299 </div>300 <div class="prime">301 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" fill="none" stroke="#ffb31a" stroke-width="3" stroke-linecap="round"/></svg>302 prime303 </div>304 <div class="delivery">FREE Delivery by Amazon</div>305 </div>306 </div>307 308 <!-- Card 3 -->309 <div class="card">310 <div class="image-area" style="height: 440px;">311 <div class="img-label">[IMG: Black Nike Shoe with Red Accent]</div>312 </div>313 <div class="details">314 <div class="brand">Nike</div>315 <div class="title">Men's Running Shoe - Cushion Ride</div>316 <div class="rating-row">317 <div class="rating-score">4.2</div>318 <div class="stars">319 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#f59e0b"/></svg>320 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#f59e0b"/></svg>321 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#f59e0b"/></svg>322 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#ddd"/></svg>323 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#ddd"/></svg>324 </div>325 <div class="count">(512)</div>326 </div>327 <div class="price-row">328 <div class="price">₹6,499</div>329 <div class="mrp">M.R.P: ₹7,199</div>330 <div class="off">(9% off)</div>331 </div>332 <div class="prime">333 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" fill="none" stroke="#ffb31a" stroke-width="3" stroke-linecap="round"/></svg>334 prime335 </div>336 <div class="delivery">FREE Delivery by Amazon</div>337 </div>338 </div>339 340 <!-- Card 4 -->341 <div class="card">342 <div class="image-area" style="height: 440px;">343 <div class="img-label">[IMG: Grey Nike Shoe with Neon Green Swoosh]</div>344 </div>345 <div class="details">346 <div class="brand">Nike</div>347 <div class="title">Men's Road Runner - Lightweight Mesh</div>348 <div class="rating-row">349 <div class="rating-score">4.0</div>350 <div class="stars">351 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#f59e0b"/></svg>352 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#f59e0b"/></svg>353 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#f59e0b"/></svg>354 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#ddd"/></svg>355 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1 2.2 7L12 17l-6.5 3.1 2.2-7L2 9h7z" fill="#ddd"/></svg>356 </div>357 <div class="count">(302)</div>358 </div>359 <div class="price-row">360 <div class="price">₹7,999</div>361 <div class="mrp">M.R.P: ₹9,499</div>362 <div class="off">(16% off)</div>363 </div>364 <div class="prime">365 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" fill="none" stroke="#ffb31a" stroke-width="3" stroke-linecap="round"/></svg>366 prime367 </div>368 <div class="delivery">FREE Delivery by Amazon</div>369 </div>370 </div>371 </div>372 373 <div class="home-indicator"></div>374 375 <div class="bottom-nav">376 <div class="nav-item active">377 <svg width="48" height="48" viewBox="0 0 24 24">378 <path d="M3 12l9-7 9 7v8a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2z" fill="none" stroke="#14a6a0" stroke-width="2"/>379 </svg>380 <span>Home</span>381 </div>382 <div class="nav-item">383 <svg width="48" height="48" viewBox="0 0 24 24">384 <circle cx="12" cy="8" r="4" fill="none" stroke="#333" stroke-width="2"/>385 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"/>386 </svg>387 <span>You</span>388 </div>389 <div class="nav-item">390 <svg width="48" height="48" viewBox="0 0 24 24">391 <rect x="4" y="4" width="7" height="7" fill="none" stroke="#333" stroke-width="2"/>392 <rect x="13" y="4" width="7" height="7" fill="none" stroke="#333" stroke-width="2"/>393 <rect x="4" y="13" width="7" height="7" fill="none" stroke="#333" stroke-width="2"/>394 <rect x="13" y="13" width="7" height="7" fill="none" stroke="#333" stroke-width="2"/>395 </svg>396 <span>More</span>397 </div>398 <div class="nav-item">399 <svg width="48" height="48" viewBox="0 0 24 24">400 <path d="M3 5h3l2 10h9l2-7H8" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>401 <circle cx="9" cy="20" r="2" fill="none" stroke="#333" stroke-width="2"/>402 <circle cx="17" cy="20" r="2" fill="none" stroke="#333" stroke-width="2"/>403 </svg>404 <span>Cart</span>405 </div>406 <div class="nav-item">407 <svg width="48" height="48" viewBox="0 0 24 24">408 <path d="M4 6h16M4 12h16M4 18h16" stroke="#333" stroke-width="2" stroke-linecap="round"/>409 </svg>410 <span>Menu</span>411 </div>412 </div>413</div>414</body>415</html>