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 { 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 color: #111;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17 }18 19 /* Top system status bar */20 .status-bar {21 position: absolute;22 top: 0; left: 0; right: 0;23 height: 96px;24 background: #000;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 32px;29 font-size: 34px;30 box-sizing: border-box;31 }32 .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }33 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: .8; }34 35 /* App bar */36 .app-bar {37 position: absolute;38 top: 96px; left: 0; right: 0;39 height: 150px;40 background: #fff;41 display: flex;42 align-items: center;43 padding: 0 32px;44 box-sizing: border-box;45 border-bottom: 1px solid #ECECEC;46 }47 .brand {48 font-family: "Georgia", "Times New Roman", serif;49 font-size: 48px;50 letter-spacing: 2px;51 color: #000;52 margin-left: 18px;53 }54 .app-actions {55 margin-left: auto;56 display: flex;57 align-items: center;58 gap: 34px;59 }60 .icon {61 width: 48px; height: 48px;62 display: inline-flex; align-items: center; justify-content: center;63 }64 65 /* Search header row */66 .search-row {67 position: absolute;68 top: 246px; left: 0; right: 0;69 height: 120px;70 background: #F3F3F3;71 display: flex;72 align-items: center;73 gap: 28px;74 padding: 0 32px;75 box-sizing: border-box;76 }77 .search-title {78 font-size: 44px;79 font-weight: 600;80 color: #222;81 }82 .count-pill {83 margin-left: 8px;84 background: #fff;85 border-radius: 24px;86 padding: 18px 24px;87 display: inline-flex;88 align-items: center;89 gap: 14px;90 font-size: 34px;91 color: #333;92 box-shadow: 0 1px 0 rgba(0,0,0,0.06);93 }94 95 /* Grid list */96 .grid {97 position: absolute;98 top: 366px;99 left: 0; right: 0;100 bottom: 280px; /* leaves space for bottom bar */101 overflow: hidden; /* no scroll - per instructions */102 padding: 24px 32px 0 32px;103 box-sizing: border-box;104 }105 .cards {106 display: grid;107 grid-template-columns: repeat(2, 1fr);108 gap: 36px;109 }110 .card {111 background: #fff;112 border-radius: 14px;113 box-shadow: 0 2px 0 rgba(0,0,0,0.05);114 overflow: hidden;115 border: 1px solid #E9E9E9;116 }117 .img-wrap {118 position: relative;119 width: 100%;120 height: 600px;121 background: #E0E0E0;122 border-bottom: 1px solid #BDBDBD;123 display: flex;124 align-items: center;125 justify-content: center;126 color: #757575;127 font-size: 32px;128 text-align: center;129 padding: 0 24px;130 box-sizing: border-box;131 }132 .fav {133 position: absolute;134 top: 18px; right: 18px;135 width: 72px; height: 72px;136 background: #fff;137 border-radius: 50%;138 box-shadow: 0 2px 8px rgba(0,0,0,0.12);139 display: flex; align-items: center; justify-content: center;140 }141 .card-body {142 padding: 26px;143 }144 .brand-name {145 font-size: 40px;146 font-weight: 800;147 letter-spacing: 1px;148 color: #111;149 }150 .desc {151 margin-top: 8px;152 font-size: 30px;153 color: #6B6B6B;154 min-height: 72px;155 }156 .price-row {157 margin-top: 14px;158 display: flex;159 align-items: baseline;160 gap: 16px;161 }162 .price {163 font-size: 42px;164 font-weight: 800;165 }166 .old {167 font-size: 32px;168 color: #9E9E9E;169 text-decoration: line-through;170 }171 .off {172 font-size: 32px; color: #FF6E00; font-weight: 700;173 }174 175 /* Bottom actions */176 .bottom-actions {177 position: absolute;178 left: 0; right: 0; bottom: 110px;179 height: 170px;180 background: #fff;181 border-top: 1px solid #ECECEC;182 display: grid;183 grid-template-columns: 1fr 1fr;184 }185 .action {186 display: flex; align-items: center; justify-content: center;187 gap: 18px;188 font-size: 36px; font-weight: 800; color: #111;189 }190 .divider {191 position: absolute;192 left: 50%; top: 12px; bottom: 12px;193 width: 1px; background: #EEEEEE;194 }195 .badge {196 position: absolute;197 top: -8px; right: -8px;198 min-width: 36px; height: 36px;199 padding: 0 10px;200 background: #E53935; color: #fff;201 border-radius: 18px;202 font-size: 24px;203 font-weight: 700;204 display: flex; align-items: center; justify-content: center;205 }206 207 /* Device nav bar */208 .device-nav {209 position: absolute;210 left: 0; right: 0; bottom: 0;211 height: 110px; background: #000;212 display: flex; align-items: center; justify-content: center;213 }214 .home-pill {215 width: 220px; height: 12px; background: #A6A6A6; border-radius: 12px; opacity: .9;216 }217</style>218</head>219<body>220<div id="render-target">221 222 <!-- Status bar -->223 <div class="status-bar">224 <div style="display:flex; align-items:center; gap:16px;">225 <span>8:28</span>226 </div>227 <div class="status-right">228 <div class="dot"></div>229 <div class="dot"></div>230 <div class="dot"></div>231 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M6 18h12v2H6zM8 4h8l2 10H6z"/></svg>232 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M20 7.5A8.5 8.5 0 1 0 11.5 16h2A6.5 6.5 0 1 1 20 9.5z"/></svg>233 </div>234 </div>235 236 <!-- App bar -->237 <div class="app-bar">238 <div class="icon">239 <svg width="48" height="48" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2">240 <path d="M3 6h18M3 12h14M3 18h18"/>241 </svg>242 </div>243 <div class="brand">Shoppers Stop</div>244 <div class="app-actions">245 <div class="icon">246 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2">247 <circle cx="11" cy="11" r="7"></circle>248 <path d="M20 20l-4-4"></path>249 </svg>250 </div>251 <div class="icon">252 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2">253 <path d="M12 21s-6-4.35-6-9a4 4 0 0 1 7-2.65A4 4 0 0 1 18 12c0 4.65-6 9-6 9z"/>254 </svg>255 </div>256 <div class="icon">257 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2">258 <path d="M6 7h12l-1 12H7z"></path>259 <path d="M9 7a3 3 0 0 1 6 0"></path>260 </svg>261 </div>262 </div>263 </div>264 265 <!-- Search header -->266 <div class="search-row">267 <div class="icon">268 <svg width="48" height="48" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2">269 <path d="M15 18l-6-6 6-6"></path>270 </svg>271 </div>272 <div class="search-title">Search(1979)</div>273 <div class="count-pill">274 <svg width="34" height="34" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2">275 <path d="M12 5v14M5 12h14"></path>276 </svg>277 <span>3 out of 1979</span>278 </div>279 </div>280 281 <!-- Grid content -->282 <div class="grid">283 <div class="cards">284 285 <!-- Card 1 -->286 <div class="card">287 <div class="img-wrap">288 [IMG: Navy slim fit cotton shirt]289 </div>290 <div class="card-body">291 <div class="brand-name">LIFE</div>292 <div class="desc">Stripes Cotton Slim Fit Men's Shirt - Navy</div>293 <div class="price-row">294 <div class="price">₹699</div>295 <div class="old">₹2,199</div>296 <div class="off">68% Off</div>297 </div>298 </div>299 </div>300 301 <!-- Card 2 -->302 <div class="card">303 <div class="img-wrap">304 [IMG: Blue work wear striped shirt]305 </div>306 <div class="card-body">307 <div class="brand-name">LOUIS PHILIPPE</div>308 <div class="desc">Stripes Cotton Slim Fit Men's Work Wear Shirt - Blue</div>309 <div class="price-row">310 <div class="price">₹2,599</div>311 </div>312 </div>313 </div>314 315 <!-- Card 3 -->316 <div class="card">317 <div class="img-wrap">318 [IMG: Black shirt with gold stripes]319 <div class="fav">320 <svg width="42" height="42" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2">321 <path d="M12 21s-6-4.35-6-9a4 4 0 0 1 7-2.65A4 4 0 0 1 18 12c0 4.65-6 9-6 9z"/>322 </svg>323 </div>324 </div>325 <div class="card-body">326 <div class="brand-name">TOMMY HILFIGER</div>327 <div class="desc">Stripes Cotton Regular Fit Men's</div>328 </div>329 </div>330 331 <!-- Card 4 -->332 <div class="card">333 <div class="img-wrap">334 [IMG: Blue shirt with mustard stripes]335 <div class="fav">336 <svg width="42" height="42" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2">337 <path d="M12 21s-6-4.35-6-9a4 4 0 0 1 7-2.65A4 4 0 0 1 18 12c0 4.65-6 9-6 9z"/>338 </svg>339 </div>340 </div>341 <div class="card-body">342 <div class="brand-name">TISTABENE</div>343 <div class="desc">Stripes Cotton Blend Regular Fit</div>344 </div>345 </div>346 347 </div>348 </div>349 350 <!-- Bottom Sort / Filter bar -->351 <div class="bottom-actions">352 <div class="action">353 <svg width="42" height="42" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2">354 <path d="M3 7h10M3 12h7M3 17h4"></path>355 <path d="M17 17V7l4 5z"></path>356 </svg>357 <span>SORT</span>358 </div>359 <div class="divider"></div>360 <div class="action" style="position: relative;">361 <div style="position: relative;">362 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2">363 <path d="M3 5h18l-7 8v5l-4 2v-7z"></path>364 </svg>365 <div class="badge">2</div>366 </div>367 <span>FILTER</span>368 </div>369 </div>370 371 <!-- Device navigation bar -->372 <div class="device-nav">373 <div class="home-pill"></div>374 </div>375 376</div>377</body>378</html>