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>Shoppers Stop - Search Results</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 }13 #render-target {14 position: relative;15 overflow: hidden;16 width: 1080px;17 height: 2400px;18 background: #ffffff;19 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;20 color: #111;21 }22 23 /* Status bar */24 .status-bar {25 height: 96px;26 background: #000;27 color: #fff;28 display: flex;29 align-items: center;30 padding: 0 32px;31 box-sizing: border-box;32 font-size: 34px;33 letter-spacing: 0.5px;34 justify-content: space-between;35 }36 .sb-left { display: flex; align-items: center; gap: 18px; }37 .sb-icons { display: flex; align-items: center; gap: 22px; }38 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.8; }39 .sb-icon {40 width: 34px; height: 34px; opacity: 0.9;41 }42 43 /* App header */44 .app-bar {45 height: 132px;46 background: #fff;47 display: flex;48 align-items: center;49 padding: 0 32px;50 box-sizing: border-box;51 border-bottom: 1px solid #E5E5E5;52 gap: 24px;53 }54 .brand {55 font-family: "Times New Roman", Georgia, serif;56 letter-spacing: 3px;57 font-size: 44px;58 color: #1a1a1a;59 }60 .nav-actions { margin-left: auto; display: flex; align-items: center; gap: 28px; }61 .icon-btn {62 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;63 }64 .icon {65 width: 40px; height: 40px; fill: none; stroke: #111; stroke-width: 3;66 }67 .hamburger { width: 54px; height: 54px; }68 .hamburger path { stroke: #111; stroke-width: 6; }69 70 /* Search header */71 .search-head {72 background: #efefef;73 padding: 26px 32px;74 display: flex;75 align-items: center;76 gap: 22px;77 border-bottom: 1px solid #e0e0e0;78 }79 .search-title {80 font-size: 44px;81 font-weight: 600;82 color: #222;83 }84 .pill {85 margin-left: 18px;86 background: #fff;87 border: 1px solid #ddd;88 border-radius: 18px;89 padding: 12px 18px;90 font-size: 30px;91 color: #444;92 display: flex;93 align-items: center;94 gap: 10px;95 }96 .arrow-up {97 width: 26px; height: 26px;98 }99 100 /* Grid list */101 .list-wrap {102 background: #f2f2f2;103 padding: 26px 24px 250px;104 box-sizing: border-box;105 }106 .grid {107 display: grid;108 grid-template-columns: 1fr 1fr;109 gap: 26px;110 }111 .card {112 background: #fff;113 border-radius: 16px;114 overflow: hidden;115 box-shadow: 0 1px 0 rgba(0,0,0,0.08);116 border: 1px solid #e7e7e7;117 }118 .img-wrap {119 position: relative;120 width: 100%;121 height: 540px;122 background: #E0E0E0;123 border-bottom: 1px solid #BDBDBD;124 display: flex;125 align-items: center;126 justify-content: center;127 color: #757575;128 font-size: 34px;129 }130 .fav-badge {131 position: absolute;132 top: 18px;133 right: 18px;134 width: 86px; height: 86px;135 background: #fff;136 border-radius: 50%;137 border: 1px solid #e5e5e5;138 display: flex; align-items: center; justify-content: center;139 box-shadow: 0 2px 8px rgba(0,0,0,0.12);140 }141 .heart { width: 44px; height: 44px; stroke: #555; fill: none; stroke-width: 4; }142 143 .card-body {144 padding: 22px 26px 28px;145 }146 .brand-name {147 font-weight: 800;148 font-size: 42px;149 letter-spacing: 1px;150 margin: 0 0 8px 0;151 }152 .desc {153 font-size: 30px;154 color: #666;155 line-height: 1.35;156 margin: 0 0 18px 0;157 }158 .price-row {159 display: flex;160 align-items: center;161 gap: 18px;162 font-size: 34px;163 }164 .price {165 font-weight: 800;166 }167 .mrp {168 color: #9e9e9e;169 text-decoration: line-through;170 }171 .off {172 color: #ff6a00;173 font-weight: 700;174 }175 176 /* Bottom action bar */177 .bottom-bar {178 position: absolute;179 left: 0; right: 0; bottom: 72px;180 height: 150px;181 background: #fff;182 border-top: 1px solid #e5e5e5;183 display: flex;184 align-items: center;185 justify-content: space-around;186 padding: 0 40px;187 box-sizing: border-box;188 }189 .bar-section {190 width: 50%;191 display: flex;192 align-items: center;193 justify-content: center;194 gap: 18px;195 font-size: 36px;196 font-weight: 700;197 color: #111;198 }199 .divider {200 width: 1px;201 height: 60%;202 background: #e5e5e5;203 }204 .sort-icon {205 width: 42px; height: 42px; stroke: #111; fill: none; stroke-width: 4;206 }207 .filter-icon {208 width: 42px; height: 42px; stroke: #111; fill: none; stroke-width: 4;209 position: relative;210 }211 .badge {212 position: absolute;213 top: -10px; right: -12px;214 background: #e34234;215 color: #fff;216 font-size: 22px;217 padding: 6px 10px;218 border-radius: 18px;219 line-height: 1;220 font-weight: 800;221 }222 223 /* Gesture area */224 .gesture-area {225 position: absolute;226 left: 0; right: 0; bottom: 0;227 height: 72px;228 background: #000;229 display: flex; align-items: center; justify-content: center;230 }231 .home-indicator {232 width: 300px; height: 8px; background: #cfcfcf; border-radius: 8px;233 opacity: 0.9;234 }235 236 /* Small helpers */237 .back {238 width: 48px; height: 48px; stroke: #222; fill: none; stroke-width: 5;239 }240</style>241</head>242<body>243<div id="render-target">244 245 <!-- Status bar -->246 <div class="status-bar">247 <div class="sb-left">248 <span>8:22</span>249 <div class="dot"></div>250 <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#fff" d="M7 2h10v20H7z"/></svg>251 <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#fff"/></svg>252 <span>N</span>253 <div class="dot"></div>254 </div>255 <div class="sb-icons">256 <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#fff" d="M12 2l7 7-7 7-7-7z"/></svg>257 <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#fff" d="M3 12h18"/></svg>258 <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#fff" d="M7 4h10l1 4H6zM5 8h14v12H5z"/></svg>259 </div>260 </div>261 262 <!-- App header -->263 <div class="app-bar">264 <div class="icon-btn">265 <svg class="hamburger" viewBox="0 0 48 48">266 <path d="M6 12h36M6 24h36M6 36h24"/>267 </svg>268 </div>269 <div class="brand">Shoppers Stop</div>270 <div class="nav-actions">271 <div class="icon-btn" aria-label="Search">272 <svg class="icon" viewBox="0 0 24 24">273 <circle cx="11" cy="11" r="7"></circle>274 <path d="M16 16l6 6"></path>275 </svg>276 </div>277 <div class="icon-btn" aria-label="Wishlist">278 <svg class="icon" viewBox="0 0 24 24">279 <path d="M12 21s-8-5.3-8-10.2C4 7 6.2 5 8.9 5c1.5 0 2.9.7 3.7 1.9C13.4 5.7 14.8 5 16.3 5 19 5 21 7 21 10.8 21 15.7 12 21 12 21z"></path>280 </svg>281 </div>282 <div class="icon-btn" aria-label="Bag">283 <svg class="icon" viewBox="0 0 24 24">284 <path d="M6 8h12l1 12H5L6 8z"></path>285 <path d="M9 8V6a3 3 0 0 1 6 0v2"></path>286 </svg>287 </div>288 </div>289 </div>290 291 <!-- Search header -->292 <div class="search-head">293 <svg class="back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg>294 <div class="search-title">Search(1979)</div>295 <div class="pill">296 <svg class="arrow-up" viewBox="0 0 24 24"><path d="M12 5v14M5 12l7-7 7 7" stroke="#666" fill="none" stroke-width="2"/></svg>297 <span>1 out of 1979</span>298 </div>299 </div>300 301 <!-- Product grid -->302 <div class="list-wrap">303 <div class="grid">304 <!-- Card 1 -->305 <div class="card">306 <div class="img-wrap">307 [IMG: Light blue striped formal shirt]308 <div class="fav-badge">309 <svg class="heart" viewBox="0 0 24 24">310 <path d="M12 21s-8-5.3-8-10.2C4 7 6.2 5 8.9 5c1.5 0 2.9.7 3.7 1.9C13.4 5.7 14.8 5 16.3 5 19 5 21 7 21 10.8 21 15.7 12 21 12 21z"/>311 </svg>312 </div>313 </div>314 <div class="card-body">315 <h3 class="brand-name">STOP</h3>316 <p class="desc">Stripes Cotton Slim Fit Men's Shirt - Blue</p>317 <div class="price-row">318 <span class="price">₹699</span>319 <span class="mrp">₹1,799</span>320 <span class="off">61% Off</span>321 </div>322 </div>323 </div>324 325 <!-- Card 2 -->326 <div class="card">327 <div class="img-wrap">328 [IMG: Navy striped casual shirt]329 <div class="fav-badge">330 <svg class="heart" viewBox="0 0 24 24">331 <path d="M12 21s-8-5.3-8-10.2C4 7 6.2 5 8.9 5c1.5 0 2.9.7 3.7 1.9C13.4 5.7 14.8 5 16.3 5 19 5 21 7 21 10.8 21 15.7 12 21 12 21z"/>332 </svg>333 </div>334 </div>335 <div class="card-body">336 <h3 class="brand-name">FRATINI</h3>337 <p class="desc">Stripes Cotton Regular Fit Men's Shirt - Navy</p>338 <div class="price-row">339 <span class="price">₹999</span>340 <span class="mrp">₹1,999</span>341 <span class="off">50% Off</span>342 </div>343 </div>344 </div>345 346 <!-- Card 3 -->347 <div class="card">348 <div class="img-wrap">349 [IMG: Dark blue dotted shirt]350 <div class="fav-badge">351 <svg class="heart" viewBox="0 0 24 24">352 <path d="M12 21s-8-5.3-8-10.2C4 7 6.2 5 8.9 5c1.5 0 2.9.7 3.7 1.9C13.4 5.7 14.8 5 16.3 5 19 5 21 7 21 10.8 21 15.7 12 21 12 21z"/>353 </svg>354 </div>355 </div>356 <div class="card-body">357 <h3 class="brand-name">STOP</h3>358 <p class="desc">Micro-dot Cotton Slim Fit Men's Shirt - Navy</p>359 <div class="price-row">360 <span class="price">₹899</span>361 <span class="mrp">₹1,799</span>362 <span class="off">50% Off</span>363 </div>364 </div>365 </div>366 367 <!-- Card 4 -->368 <div class="card">369 <div class="img-wrap">370 [IMG: Black shirt with blue vertical stripes]371 <div class="fav-badge">372 <svg class="heart" viewBox="0 0 24 24">373 <path d="M12 21s-8-5.3-8-10.2C4 7 6.2 5 8.9 5c1.5 0 2.9.7 3.7 1.9C13.4 5.7 14.8 5 16.3 5 19 5 21 7 21 10.8 21 15.7 12 21 12 21z"/>374 </svg>375 </div>376 </div>377 <div class="card-body">378 <h3 class="brand-name">ALLEN SOLLY</h3>379 <p class="desc">Striped Cotton Slim Fit Men's Shirt - Black</p>380 <div class="price-row">381 <span class="price">₹1,299</span>382 <span class="mrp">₹2,599</span>383 <span class="off">50% Off</span>384 </div>385 </div>386 </div>387 </div>388 </div>389 390 <!-- Bottom bar -->391 <div class="bottom-bar">392 <div class="bar-section">393 <svg class="sort-icon" viewBox="0 0 24 24">394 <path d="M7 4v16M7 4l-3 3M7 4l3 3"/>395 <path d="M12 9h9M12 15h6"/>396 </svg>397 <span>SORT</span>398 </div>399 <div class="divider"></div>400 <div class="bar-section">401 <div style="position: relative; width:42px; height:42px;">402 <svg class="filter-icon" viewBox="0 0 24 24">403 <path d="M4 5h16L14 12v6l-4-2v-4L4 5z"/>404 </svg>405 <span class="badge">2</span>406 </div>407 <span>FILTER</span>408 </div>409 </div>410 411 <!-- Gesture area -->412 <div class="gesture-area">413 <div class="home-indicator"></div>414 </div>415</div>416</body>417</html>