GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Shopping Search - Sports Shoes</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 color: #222;14 }15 16 /* Status bar */17 .status-bar {18 height: 90px;19 padding: 0 32px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 font-size: 34px;24 color: #333;25 }26 .status-right {27 display: flex;28 align-items: center;29 gap: 26px;30 font-size: 28px;31 }32 .dot { width: 12px; height: 12px; border-radius: 50%; background:#555; display:inline-block; }33 .battery {34 width: 48px; height: 24px; border:2px solid #333; border-radius:6px; position: relative; margin-left: 6px;35 }36 .battery::after {37 content:""; position:absolute; right:-10px; top:6px; width:6px; height:12px; background:#333; border-radius:2px;38 }39 .battery-level { height: 100%; width: 70%; background:#4caf50; }40 41 /* Header search bar */42 .header {43 height: 120px;44 padding: 0 26px;45 display: flex;46 align-items: center;47 gap: 24px;48 border-bottom: 1px solid #eee;49 }50 .header-title {51 font-size: 44px;52 font-weight: 600;53 flex: 1;54 }55 .header-actions {56 display: flex;57 gap: 28px;58 align-items: center;59 }60 .icon-btn {61 width: 60px; height: 60px; display:flex; align-items:center; justify-content:center;62 }63 64 /* Sort / Filter row */65 .sort-filter {66 height: 110px;67 display: flex;68 align-items: center;69 padding: 0 26px;70 gap: 24px;71 border-bottom: 1px solid #eee;72 }73 .sf-item {74 flex: 0 0 auto;75 display: flex;76 align-items: center;77 gap: 16px;78 font-size: 36px;79 font-weight: 600;80 color: #222;81 padding: 18px 24px;82 border-radius: 16px;83 background: #fff;84 box-shadow: 0 0 0 1px #e5e5e5 inset;85 }86 .badge {87 background: #e53935;88 color: #fff;89 font-size: 26px;90 padding: 4px 12px;91 border-radius: 16px;92 margin-left: 6px;93 }94 95 /* Banner */96 .promo-banner {97 height: 180px;98 margin: 0 20px 10px;99 border-radius: 20px;100 background: linear-gradient(90deg,#ffe800,#ffd74a 30%, #3a6cff 30%, #3a6cff 100%);101 display: flex;102 align-items: center;103 justify-content: space-between;104 padding: 0 28px;105 color: #fff;106 font-size: 36px;107 font-weight: 700;108 }109 .promo-right {110 display:flex;111 align-items:center;112 gap: 18px;113 }114 .promo-pill {115 background: rgba(255,255,255,0.2);116 padding: 10px 16px;117 border-radius: 20px;118 font-weight: 600;119 }120 121 /* Product grid */122 .grid {123 display: grid;124 grid-template-columns: 1fr 1fr;125 gap: 24px;126 padding: 20px;127 }128 .card {129 border: 1px solid #e5e5e5;130 border-radius: 20px;131 overflow: hidden;132 background: #fff;133 position: relative;134 }135 .ad-tag {136 position: absolute;137 top: 18px; left: 18px;138 background: #f1f1f1;139 color: #666;140 font-size: 28px;141 padding: 8px 14px;142 border-radius: 12px;143 border: 1px solid #ddd;144 }145 .like-circle {146 position: absolute;147 top: 18px; right: 18px;148 width: 66px; height: 66px; border-radius: 50%;149 background: #fff;150 box-shadow: 0 2px 8px rgba(0,0,0,0.08);151 display:flex; align-items:center; justify-content:center;152 }153 .img-box {154 height: 520px;155 background: #E0E0E0;156 border-bottom: 1px solid #BDBDBD;157 display:flex; align-items:center; justify-content:center;158 color: #757575; font-size: 30px; text-align:center;159 }160 .card-body {161 padding: 24px;162 }163 .brand {164 font-size: 38px; font-weight: 800; margin-bottom: 10px;165 }166 .name {167 font-size: 32px; color: #444;168 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;169 margin-bottom: 12px;170 }171 .price-row {172 display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px;173 }174 .old-price { color: #777; text-decoration: line-through; font-size: 32px; }175 .new-price { font-size: 40px; font-weight: 800; }176 .off { color: #1aaf5d; font-size: 34px; font-weight: 700; }177 .rating-row {178 display: flex; align-items: center; gap: 10px; margin-top: 8px; color:#777; font-size: 30px;179 }180 .stars { display:flex; gap: 6px; }181 .star svg { width: 32px; height: 32px; }182 .star.green path { fill: #1aaf5d; }183 .star.gray path { fill: #d0d0d0; }184 .star.half path { fill: url(#halfGrad); }185 186 /* Bottom nav */187 .bottom-nav {188 position: absolute; bottom: 120px; left: 0; right: 0;189 height: 140px; border-top: 1px solid #eee; background:#fff;190 display:flex; align-items:center; justify-content:space-around;191 padding: 0 10px;192 }193 .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#666; font-size: 28px; }194 .nav-item.active { color:#2563eb; }195 .notif-dot {196 position: absolute; top: -6px; right: -6px; width: 16px; height:16px; border-radius:50%; background:#e53935;197 }198 .home-indicator {199 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);200 width: 360px; height: 14px; background:#000; border-radius: 8px; opacity: 0.15;201 }202 203 /* Small utility */204 .muted { color:#666; }205</style>206</head>207<body>208<div id="render-target">209 210 <!-- Status Bar -->211 <div class="status-bar">212 <div>2:27</div>213 <div class="status-right">214 <span class="dot"></span>215 <span class="dot" style="opacity:.6"></span>216 <span class="dot" style="opacity:.4"></span>217 <span class="dot" style="opacity:.3"></span>218 <span class="dot" style="opacity:.2"></span>219 <span>69%</span>220 <div class="battery"><div class="battery-level"></div></div>221 </div>222 </div>223 224 <!-- Header Search Bar -->225 <div class="header">226 <div class="icon-btn">227 <!-- Back Arrow -->228 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M15.5 4l-8 8 8 8" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>229 </div>230 <div class="header-title">sports shoes for men</div>231 <div class="header-actions">232 <!-- Search -->233 <div class="icon-btn">234 <svg viewBox="0 0 24 24" width="44" height="44">235 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="3" fill="none"/>236 <path d="M16 16l6 6" stroke="#333" stroke-width="3" stroke-linecap="round"/>237 </svg>238 </div>239 <!-- Mic -->240 <div class="icon-btn">241 <svg viewBox="0 0 24 24" width="44" height="44">242 <rect x="8" y="3" width="8" height="12" rx="4" ry="4" stroke="#333" stroke-width="3" fill="none"/>243 <path d="M4 11c0 5 4 7 8 7s8-2 8-7" stroke="#333" stroke-width="3" fill="none"/>244 <path d="M12 18v4" stroke="#333" stroke-width="3" stroke-linecap="round"/>245 </svg>246 </div>247 <!-- Heart -->248 <div class="icon-btn">249 <svg viewBox="0 0 24 24" width="44" height="44">250 <path d="M12 21s-7-4.5-9-8.5C1 8 3.5 6 6 6c2 0 3.3 1.2 4 2 0.7-0.8 2-2 4-2 2.5 0 5 2 3 6.5-2 4-9 8.5-9 8.5z" fill="none" stroke="#333" stroke-width="2"/>251 </svg>252 </div>253 <!-- Cart -->254 <div class="icon-btn">255 <svg viewBox="0 0 24 24" width="44" height="44">256 <path d="M3 5h2l2 12h11l2-9H7" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>257 <circle cx="9" cy="20" r="2" fill="#333"/>258 <circle cx="18" cy="20" r="2" fill="#333"/>259 </svg>260 </div>261 </div>262 </div>263 264 <!-- Sort / Filter Row -->265 <div class="sort-filter">266 <div class="sf-item">267 <svg viewBox="0 0 24 24" width="36" height="36">268 <path d="M4 6h12M8 12h10M12 18h8" stroke="#333" stroke-width="2" stroke-linecap="round"/>269 </svg>270 <span>Sort</span>271 </div>272 <div style="flex:1"></div>273 <div class="sf-item">274 <svg viewBox="0 0 24 24" width="36" height="36">275 <path d="M4 6h16M10 12h10M6 18h14" stroke="#333" stroke-width="2" stroke-linecap="round"/>276 <circle cx="10" cy="6" r="2" fill="#333"/>277 <circle cx="14" cy="12" r="2" fill="#333"/>278 <circle cx="12" cy="18" r="2" fill="#333"/>279 </svg>280 <span>Filter</span>281 <span class="badge">2</span>282 </div>283 </div>284 285 <!-- Promo Banner -->286 <div class="promo-banner">287 <div>Ye Hai Best Value Ka Badge</div>288 <div class="promo-right">289 <div class="promo-pill">Budget</div>290 </div>291 </div>292 293 <!-- Product Grid -->294 <div class="grid">295 296 <!-- Card 1 -->297 <div class="card">298 <div class="ad-tag">Ad</div>299 <div class="like-circle">300 <svg viewBox="0 0 24 24" width="40" height="40">301 <path d="M12 21s-7-4.5-9-8.5C1 8 3.5 6 6 6c2 0 3.3 1.2 4 2 0.7-0.8 2-2 4-2 2.5 0 5 2 3 6.5-2 4-9 8.5-9 8.5z" fill="none" stroke="#777" stroke-width="2"/>302 </svg>303 </div>304 <div class="img-box">[IMG: Navy Slip-on Walking Shoes]</div>305 <div class="card-body">306 <div class="brand">CAMPUS</div>307 <div class="name">GALE-02 Walking Shoes For...</div>308 <div class="price-row">309 <div class="old-price">899</div>310 <div class="new-price">₹499</div>311 <div class="off">44% off</div>312 </div>313 <div class="rating-row">314 <div class="stars">315 <span class="star green">316 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.6 1.6 7.6L12 18l-6.6 3.9L7 14.4 2 9.8l7-.8z"/></svg>317 </span>318 <span class="star green">319 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.6 1.6 7.6L12 18l-6.6 3.9L7 14.4 2 9.8l7-.8z"/></svg>320 </span>321 <span class="star green">322 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.6 1.6 7.6L12 18l-6.6 3.9L7 14.4 2 9.8l7-.8z"/></svg>323 </span>324 <span class="star green">325 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.6 1.6 7.6L12 18l-6.6 3.9L7 14.4 2 9.8l7-.8z"/></svg>326 </span>327 <span class="star gray">328 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.6 1.6 7.6L12 18l-6.6 3.9L7 14.4 2 9.8l7-.8z"/></svg>329 </span>330 </div>331 <span class="muted">(133)</span>332 </div>333 </div>334 </div>335 336 <!-- Card 2 -->337 <div class="card">338 <div class="like-circle">339 <svg viewBox="0 0 24 24" width="40" height="40">340 <path d="M12 21s-7-4.5-9-8.5C1 8 3.5 6 6 6c2 0 3.3 1.2 4 2 0.7-0.8 2-2 4-2 2.5 0 5 2 3 6.5-2 4-9 8.5-9 8.5z" fill="none" stroke="#777" stroke-width="2"/>341 </svg>342 </div>343 <div class="img-box">[IMG: Black Running Shoes Pair on Round Background]</div>344 <div class="card-body">345 <div class="brand">ROCKEE</div>346 <div class="name">Running Shoes For M...</div>347 <div class="price-row">348 <div class="old-price">1,399</div>349 <div class="new-price">₹1,199</div>350 <div class="off">14% off</div>351 </div>352 <div class="rating-row">353 <div class="stars">354 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.6 1.6 7.6L12 18l-6.6 3.9L7 14.4 2 9.8l7-.8z"/></svg></span>355 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.6 1.6 7.6L12 18l-6.6 3.9L7 14.4 2 9.8l7-.8z"/></svg></span>356 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.6 1.6 7.6L12 18l-6.6 3.9L7 14.4 2 9.8l7-.8z"/></svg></span>357 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.6 1.6 7.6L12 18l-6.6 3.9L7 14.4 2 9.8l7-.8z"/></svg></span>358 <span class="star gray"><svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.6 1.6 7.6L12 18l-6.6 3.9L7 14.4 2 9.8l7-.8z"/></svg></span>359 </div>360 <span class="muted">(58)</span>361 </div>362 </div>363 </div>364 365 <!-- Card 3 -->366 <div class="card">367 <div class="like-circle">368 <svg viewBox="0 0 24 24" width="40" height="40">369 <path d="M12 21s-7-4.5-9-8.5C1 8 3.5 6 6 6c2 0 3.3 1.2 4 2 0.7-0.8 2-2 4-2 2.5 0 5 2 3 6.5-2 4-9 8.5-9 8.5z" fill="none" stroke="#777" stroke-width="2"/>370 </svg>371 </div>372 <div class="img-box">[IMG: Light Grey Mesh Sneakers]</div>373 <div class="card-body">374 <div class="brand">CAMPUS</div>375 <div class="name">Lightweight Sports Shoes</div>376 <div class="price-row">377 <div class="new-price">₹799</div>378 </div>379 </div>380 </div>381 382 <!-- Card 4 -->383 <div class="card">384 <div class="like-circle">385 <svg viewBox="0 0 24 24" width="40" height="40">386 <path d="M12 21s-7-4.5-9-8.5C1 8 3.5 6 6 6c2 0 3.3 1.2 4 2 0.7-0.8 2-2 4-2 2.5 0 5 2 3 6.5-2 4-9 8.5-9 8.5z" fill="none" stroke="#777" stroke-width="2"/>387 </svg>388 </div>389 <div class="img-box">[IMG: Grey Running Shoes with Orange Accent]</div>390 <div class="card-body">391 <div class="brand">ROCKEE</div>392 <div class="name">Breathable Sports Sneakers</div>393 <div class="price-row">394 <div class="new-price">₹1,099</div>395 </div>396 </div>397 </div>398 399 </div>400 401 <!-- Bottom Navigation -->402 <div class="bottom-nav">403 <div class="nav-item">404 <div class="icon-btn">405 <svg viewBox="0 0 24 24" width="48" height="48">406 <path d="M3 10l9-7 9 7v10H3z" fill="none" stroke="#666" stroke-width="2"/>407 </svg>408 </div>409 <div>Home</div>410 </div>411 <div class="nav-item active">412 <div class="icon-btn">413 <svg viewBox="0 0 24 24" width="48" height="48">414 <circle cx="10" cy="10" r="7" stroke="#2563eb" stroke-width="3" fill="none"/>415 <path d="M16 16l6 6" stroke="#2563eb" stroke-width="3" stroke-linecap="round"/>416 </svg>417 </div>418 <div>Search</div>419 </div>420 <div class="nav-item" style="position:relative">421 <div class="icon-btn" style="position:relative">422 <span class="notif-dot"></span>423 <svg viewBox="0 0 24 24" width="48" height="48">424 <path d="M4 6h6v6H4zM14 6h6v6h-6zM4 16h6v6H4zM14 16h6v6h-6z" fill="none" stroke="#666" stroke-width="2"/>425 </svg>426 </div>427 <div>Categories</div>428 </div>429 <div class="nav-item">430 <div class="icon-btn">431 <svg viewBox="0 0 24 24" width="48" height="48">432 <circle cx="12" cy="8" r="4" fill="none" stroke="#666" stroke-width="2"/>433 <path d="M4 22c0-5 4-8 8-8s8 3 8 8" fill="none" stroke="#666" stroke-width="2"/>434 </svg>435 </div>436 <div>Account</div>437 </div>438 <div class="nav-item">439 <div class="icon-btn">440 <svg viewBox="0 0 24 24" width="48" height="48">441 <path d="M3 5h2l2 12h11l2-9H7" fill="none" stroke="#666" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>442 <circle cx="9" cy="20" r="2" fill="#666"/>443 <circle cx="18" cy="20" r="2" fill="#666"/>444 </svg>445 </div>446 <div>Cart</div>447 </div>448 </div>449 450 <div class="home-indicator"></div>451 452 <!-- Gradient for half star (defined once) -->453 <svg width="0" height="0">454 <defs>455 <linearGradient id="halfGrad">456 <stop offset="50%" stop-color="#1aaf5d"></stop>457 <stop offset="50%" stop-color="#d0d0d0"></stop>458 </linearGradient>459 </defs>460 </svg>461</div>462</body>463</html>