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>Shopping Search Results - Puma Walking Shoes</title>7<style>8 * { box-sizing: border-box; }9 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #212121; }10 #render-target {11 position: relative;12 width: 1080px;13 height: 2400px;14 overflow: hidden;15 background: #ffffff;16 }17 18 /* Top status bar */19 .status-bar {20 height: 96px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #424242;26 font-size: 36px;27 }28 .status-icons {29 display: flex;30 gap: 24px;31 align-items: center;32 }33 .status-dot {34 width: 14px; height: 14px; background: #616161; border-radius: 50%;35 }36 37 /* Search header */38 .search-header {39 height: 160px;40 padding: 0 24px;41 display: flex;42 align-items: center;43 gap: 18px;44 }45 .icon-btn {46 width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;47 border-radius: 36px; background: transparent;48 }49 .search-field {50 flex: 1;51 height: 96px;52 border: 1px solid #E0E0E0;53 border-radius: 48px;54 display: flex;55 align-items: center;56 padding: 0 24px;57 gap: 18px;58 background: #F5F5F5;59 }60 .search-input {61 flex: 1;62 font-size: 36px;63 color: #424242;64 white-space: nowrap;65 overflow: hidden;66 text-overflow: ellipsis;67 }68 .search-tools {69 display: flex; align-items: center; gap: 16px;70 }71 72 /* Filter chips */73 .chip-row {74 padding: 12px 16px;75 display: flex;76 gap: 16px;77 flex-wrap: nowrap;78 overflow: hidden;79 }80 .chip {81 height: 80px;82 padding: 0 28px;83 border: 1px solid #DADCE0;84 border-radius: 999px;85 display: inline-flex;86 align-items: center;87 gap: 14px;88 background: #fff;89 font-size: 32px;90 color: #424242;91 box-shadow: 0 1px 0 #eee;92 }93 .chip .chev {94 width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;95 }96 97 /* Promo badges */98 .badge-row {99 padding: 10px 16px 24px;100 display: flex;101 gap: 18px;102 overflow: hidden;103 }104 .badge {105 height: 96px;106 padding: 0 24px;107 border: 1px solid #E0E0E0;108 border-radius: 16px;109 display: inline-flex;110 align-items: center;111 gap: 18px;112 background: #fafafa;113 font-size: 30px;114 color: #424242;115 }116 .badge .badge-icon {117 width: 56px; height: 56px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;118 background: #EEE;119 border: 1px solid #DDD;120 }121 122 /* Product grid */123 .product-grid {124 padding: 0 0 0 0;125 display: grid;126 grid-template-columns: 1fr 1fr;127 gap: 0;128 border-top: 1px solid #EEE;129 }130 .card {131 padding: 24px;132 border-right: 1px solid #EEE;133 }134 .card:nth-child(2n) { border-right: none; }135 .img-wrap {136 position: relative;137 width: 100%;138 height: 540px;139 background: #E0E0E0;140 border: 1px solid #BDBDBD;141 display: flex;142 align-items: center;143 justify-content: center;144 color: #757575;145 font-size: 30px;146 border-radius: 16px;147 }148 .heart {149 position: absolute;150 top: 18px;151 right: 18px;152 width: 56px; height: 56px;153 border-radius: 28px;154 background: #fff;155 box-shadow: 0 2px 6px rgba(0,0,0,0.08);156 display: flex; align-items: center; justify-content: center;157 }158 .compare-pill {159 position: absolute;160 left: 18px;161 bottom: -28px;162 width: 88px; height: 88px;163 border-radius: 44px;164 background: #fff;165 box-shadow: 0 2px 10px rgba(0,0,0,0.12);166 border: 1px solid #EEE;167 display: flex; align-items: center; justify-content: center;168 }169 .toggle-count {170 position: absolute;171 right: 18px;172 bottom: -30px;173 height: 72px;174 padding: 0 20px;175 border-radius: 36px;176 background: #fff;177 box-shadow: 0 2px 10px rgba(0,0,0,0.12);178 display: inline-flex; align-items: center; gap: 12px;179 font-size: 28px; color: #424242;180 border: 1px solid #EEE;181 }182 .toggle-count .switch {183 width: 52px; height: 32px; background: #E0E0E0; border-radius: 16px; position: relative;184 }185 .switch::before {186 content: "";187 position: absolute;188 width: 22px; height: 22px; background: #7C4DFF; border-radius: 11px; top: 5px; left: 5px;189 }190 191 .meta {192 margin-top: 48px;193 font-size: 28px;194 color: #757575;195 }196 .brand {197 margin-top: 6px;198 font-weight: 700;199 font-size: 40px;200 letter-spacing: 0.3px;201 }202 .title {203 margin-top: 8px;204 font-size: 30px;205 color: #616161;206 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;207 }208 .price-row {209 margin-top: 12px;210 display: flex; align-items: baseline; gap: 12px;211 font-size: 34px;212 }213 .offer { color: #2E7D32; font-weight: 700; }214 .mrp { color: #9E9E9E; text-decoration: line-through; }215 .curr { color: #212121; font-weight: 700; }216 .assured { font-size: 26px; color: #616161; display: inline-flex; align-items: center; gap: 10px; margin-left: 8px; }217 .assured .badge-dot { width: 16px; height: 16px; background: #FFD54F; border-radius: 50%; display: inline-block; }218 219 .rating-row {220 margin-top: 12px;221 display: flex; align-items: center; gap: 6px;222 }223 .delivery {224 margin-top: 16px;225 font-size: 32px;226 color: #424242;227 }228 229 /* Bottom nav bar */230 .bottom-bar {231 position: absolute;232 left: 0; right: 0; bottom: 0;233 height: 120px;234 background: #000;235 }236 .home-indicator {237 position: absolute;238 bottom: 32px; left: 50%;239 transform: translateX(-50%);240 width: 360px; height: 10px;241 background: #fff; border-radius: 5px;242 opacity: 0.9;243 }244 245 /* Helper SVG styling */246 svg { display: block; }247</style>248</head>249<body>250<div id="render-target">251 252 <!-- Status Bar -->253 <div class="status-bar">254 <div>7:00</div>255 <div class="status-icons">256 <div class="status-dot"></div>257 <div class="status-dot"></div>258 <div class="status-dot"></div>259 <div class="status-dot"></div>260 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M3 8h18v8H3z" fill="#616161"/><path d="M7 6h10v2H7z" fill="#616161"/></svg>261 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M4 9h16l-2 10H6z" fill="#616161"/><circle cx="8" cy="21" r="1.5" fill="#9E9E9E"/><circle cx="16" cy="21" r="1.5" fill="#9E9E9E"/></svg>262 <svg width="34" height="34" viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="16" rx="2" fill="none" stroke="#616161" stroke-width="2"/><rect x="10" y="2" width="4" height="2" fill="#616161"/></svg>263 </div>264 </div>265 266 <!-- Search Header -->267 <div class="search-header">268 <div class="icon-btn">269 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M15 6L9 12l6 6" fill="none" stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>270 </div>271 <div class="search-field">272 <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" fill="none" stroke="#616161" stroke-width="2"/><path d="M20 20l-4-4" stroke="#616161" stroke-width="2" stroke-linecap="round"/></svg>273 <div class="search-input">puma walking shoes for wo...</div>274 <div class="search-tools">275 <svg width="36" height="36" viewBox="0 0 24 24"><rect x="10" y="4" width="4" height="10" rx="2" fill="#616161"/><path d="M7 10v2a5 5 0 0010 0v-2" fill="none" stroke="#616161" stroke-width="2"/></svg>276 <svg width="36" height="36" viewBox="0 0 24 24"><rect x="4" y="7" width="16" height="12" rx="2" fill="none" stroke="#616161" stroke-width="2"/><rect x="9" y="5" width="6" height="3" rx="1.5" fill="#616161"/><circle cx="12" cy="13" r="3" fill="#9E9E9E"/></svg>277 </div>278 </div>279 <div class="icon-btn">280 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M6 6h15l-2 11H7z" fill="none" stroke="#212121" stroke-width="2"/><circle cx="9" cy="20" r="1.5" fill="#212121"/><circle cx="18" cy="20" r="1.5" fill="#212121"/></svg>281 </div>282 </div>283 284 <!-- Filter Chips -->285 <div class="chip-row">286 <div class="chip">Sort By <span class="chev"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#616161" stroke-width="2"/></svg></span></div>287 <div class="chip">288 <svg width="24" height="24" viewBox="0 0 24 24"><path d="M3 6h18M7 12h10M10 18h4" stroke="#616161" stroke-width="2" stroke-linecap="round"/></svg>289 Filter290 </div>291 <div class="chip">Brand <span class="chev"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#616161" stroke-width="2"/></svg></span></div>292 <div class="chip">Discount <span class="chev"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#616161" stroke-width="2"/></svg></span></div>293 <div class="chip">Size <span class="chev"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#616161" stroke-width="2"/></svg></span></div>294 </div>295 296 <!-- Promo Badges -->297 <div class="badge-row">298 <div class="badge">299 <div class="badge-icon"><svg width="32" height="32" viewBox="0 0 24 24"><path d="M5 5l14 4-6 2-2 6z" fill="#B39DDB"/></svg></div>300 Sale Price Live301 </div>302 <div class="badge">303 <div class="badge-icon"><svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 3l7 4v5c0 5-7 9-7 9s-7-4-7-9V7z" fill="#A5D6A7"/><text x="9" y="15" font-size="10" fill="#2E7D32">₹</text></svg></div>304 Lowest Price305 </div>306 <div class="badge">307 <div class="badge-icon"><svg width="32" height="32" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#FFE082"/><path d="M12 6l2 4 4 .5-3 3 .8 4.5L12 16l-3.8 2 1-4.5-3-3 4-.5z" fill="#FBC02D"/></svg></div>308 Premium Brands309 </div>310 <div class="badge">311 <div class="badge-icon"><svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 6l2 4 4 .5-3 3 .8 4.5L12 16l-3.8 2 1-4.5-3-3 4-.5z" fill="#FFE082"/></svg></div>312 Top Rated313 </div>314 </div>315 316 <!-- Product Grid -->317 <div class="product-grid">318 <!-- Card 1 -->319 <div class="card">320 <div class="img-wrap">321 [IMG: ADIDAS walking shoes - white]322 <div class="heart">323 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9-8.35C1.3 9.3 3.1 7 5.5 7c1.7 0 3.2.9 4.1 2.3C10.7 7.9 12.2 7 13.9 7 16.3 7 18.1 9.3 21 12.65 19 16.65 12 21 12 21z" fill="none" stroke="#9E9E9E" stroke-width="1.6"/></svg>324 </div>325 <div class="compare-pill">326 <svg width="42" height="42" viewBox="0 0 24 24"><rect x="5" y="7" width="10" height="10" rx="2" fill="none" stroke="#5E35B1" stroke-width="2"/><rect x="9" y="5" width="10" height="10" rx="2" fill="none" stroke="#5E35B1" stroke-width="2"/></svg>327 </div>328 </div>329 <div class="meta">Sponsored</div>330 <div class="brand">ADIDAS</div>331 <div class="title">Contem X Walking Shoes For Women</div>332 <div class="price-row">333 <span class="offer">40% off</span>334 <span class="mrp">₹3,799</span>335 <span class="curr">₹2,279</span>336 <span class="assured"><span class="badge-dot"></span> Plus F-Assured</span>337 </div>338 <div class="rating-row">339 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4 1.3 6.1L12 16l-5.8 3 1.3-6.1L3 8.9 9 8z" fill="#2E7D32"/></svg>340 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4 1.3 6.1L12 16l-5.8 3 1.3-6.1L3 8.9 9 8z" fill="#2E7D32"/></svg>341 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4 1.3 6.1L12 16l-5.8 3 1.3-6.1L3 8.9 9 8z" fill="#2E7D32"/></svg>342 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4 1.3 6.1L12 16l-5.8 3 1.3-6.1L3 8.9 9 8z" fill="#2E7D32"/></svg>343 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4 1.3 6.1L12 16l-5.8 3 1.3-6.1L3 8.9 9 8z" fill="#BDBDBD"/></svg>344 </div>345 <div class="delivery">Free delivery</div>346 </div>347 348 <!-- Card 2 -->349 <div class="card">350 <div class="img-wrap">351 [IMG: ADIDAS walking shoes - mauve]352 <div class="heart">353 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9-8.35C1.3 9.3 3.1 7 5.5 7c1.7 0 3.2.9 4.1 2.3C10.7 7.9 12.2 7 13.9 7 16.3 7 18.1 9.3 21 12.65 19 16.65 12 21 12 21z" fill="none" stroke="#9E9E9E" stroke-width="1.6"/></svg>354 </div>355 <div class="compare-pill">356 <svg width="42" height="42" viewBox="0 0 24 24"><rect x="5" y="7" width="10" height="10" rx="2" fill="none" stroke="#5E35B1" stroke-width="2"/><rect x="9" y="5" width="10" height="10" rx="2" fill="none" stroke="#5E35B1" stroke-width="2"/></svg>357 </div>358 <div class="toggle-count">359 <div class="switch"></div>360 3361 </div>362 </div>363 <div class="meta">Sponsored</div>364 <div class="brand">ADIDAS</div>365 <div class="title">AzureWalk W Walking Shoes Women</div>366 <div class="price-row">367 <span class="offer">48% off</span>368 <span class="mrp">₹4,599</span>369 <span class="curr">₹2,389</span>370 <span class="assured"><span class="badge-dot"></span> Plus F-Assured</span>371 </div>372 <div class="rating-row">373 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4 1.3 6.1L12 16l-5.8 3 1.3-6.1L3 8.9 9 8z" fill="#2E7D32"/></svg>374 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4 1.3 6.1L12 16l-5.8 3 1.3-6.1L3 8.9 9 8z" fill="#2E7D32"/></svg>375 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4 1.3 6.1L12 16l-5.8 3 1.3-6.1L3 8.9 9 8z" fill="#2E7D32"/></svg>376 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4 1.3 6.1L12 16l-5.8 3 1.3-6.1L3 8.9 9 8z" fill="#2E7D32"/></svg>377 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4 1.3 6.1L12 16l-5.8 3 1.3-6.1L3 8.9 9 8z" fill="#BDBDBD"/></svg>378 </div>379 <div class="delivery">Free delivery</div>380 </div>381 382 <!-- Card 3 -->383 <div class="card">384 <div class="img-wrap">385 [IMG: PUMA walking shoes - grey/white]386 <div class="heart">387 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9-8.35C1.3 9.3 3.1 7 5.5 7c1.7 0 3.2.9 4.1 2.3C10.7 7.9 12.2 7 13.9 7 16.3 7 18.1 9.3 21 12.65 19 16.65 12 21 12 21z" fill="none" stroke="#9E9E9E" stroke-width="1.6"/></svg>388 </div>389 <div class="compare-pill">390 <svg width="42" height="42" viewBox="0 0 24 24"><rect x="5" y="7" width="10" height="10" rx="2" fill="none" stroke="#5E35B1" stroke-width="2"/><rect x="9" y="5" width="10" height="10" rx="2" fill="none" stroke="#5E35B1" stroke-width="2"/></svg>391 </div>392 </div>393 <div class="brand">PUMA</div>394 <div class="title">Slip-On Walking Shoes - Women</div>395 <div class="price-row">396 <span class="offer">35% off</span>397 <span class="mrp">₹3,299</span>398 <span class="curr">₹2,145</span>399 </div>400 <div class="delivery">Free delivery</div>401 </div>402 403 <!-- Card 4 -->404 <div class="card">405 <div class="img-wrap">406 [IMG: PUMA walking shoes - black]407 <div class="heart">408 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9-8.35C1.3 9.3 3.1 7 5.5 7c1.7 0 3.2.9 4.1 2.3C10.7 7.9 12.2 7 13.9 7 16.3 7 18.1 9.3 21 12.65 19 16.65 12 21 12 21z" fill="none" stroke="#9E9E9E" stroke-width="1.6"/></svg>409 </div>410 <div class="compare-pill">411 <svg width="42" height="42" viewBox="0 0 24 24"><rect x="5" y="7" width="10" height="10" rx="2" fill="none" stroke="#5E35B1" stroke-width="2"/><rect x="9" y="5" width="10" height="10" rx="2" fill="none" stroke="#5E35B1" stroke-width="2"/></svg>412 </div>413 </div>414 <div class="brand">PUMA</div>415 <div class="title">Slip-On Walking Shoes - Women</div>416 <div class="price-row">417 <span class="offer">40% off</span>418 <span class="mrp">₹3,799</span>419 <span class="curr">₹2,279</span>420 </div>421 <div class="delivery">Free delivery</div>422 </div>423 </div>424 425 <!-- Bottom bar -->426 <div class="bottom-bar">427 <div class="home-indicator"></div>428 </div>429</div>430</body>431</html>