GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Shoppers Stop - Search Results</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #121212; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 height: 120px;19 background: #000;20 color: #fff;21 display: flex;22 align-items: center;23 padding: 0 36px;24 font-size: 40px;25 box-sizing: border-box;26 letter-spacing: 0.5px;27 }28 .status-right {29 margin-left: auto;30 display: flex;31 align-items: center;32 gap: 26px;33 }34 .status-dot { width: 12px; height: 12px; background:#fff; border-radius:50%; opacity:0.9; }35 36 /* App bar */37 .app-bar {38 height: 150px;39 background: #fff;40 display: flex;41 align-items: center;42 padding: 0 36px;43 box-sizing: border-box;44 border-bottom: 1px solid #e9e9e9;45 }46 .menu-btn {47 width: 80px; height: 80px; display:flex; align-items:center; justify-content:center;48 }49 .brand {50 font-family: "Times New Roman", Georgia, serif;51 font-size: 54px;52 font-weight: 600;53 letter-spacing: 2px;54 margin-left: 12px;55 }56 .app-icons {57 margin-left: auto;58 display: flex;59 align-items: center;60 gap: 36px;61 }62 .icon-btn { width: 72px; height: 72px; display:flex; align-items:center; justify-content:center; }63 64 /* Sub header */65 .sub-header {66 height: 120px;67 background: #f1f1f1;68 display: flex;69 align-items: center;70 padding: 0 36px;71 box-sizing: border-box;72 gap: 18px;73 border-bottom: 1px solid #e6e6e6;74 }75 .sub-header .title {76 font-size: 48px;77 font-weight: 600;78 color: #222;79 }80 81 /* Grid area */82 .content {83 position: absolute;84 top: 390px; /* 120 + 150 + 120 = 390 but we want start after sub-header */85 left: 0;86 right: 0;87 bottom: 210px; /* space for bottom bar + gesture */88 background: #efefef;89 overflow: hidden;90 }91 .grid {92 display: grid;93 grid-template-columns: repeat(2, 1fr);94 gap: 36px;95 padding: 36px;96 box-sizing: border-box;97 }98 .card {99 background: #fff;100 border-radius: 16px;101 box-shadow: 0 2px 6px rgba(0,0,0,0.08);102 overflow: hidden;103 }104 .card-img {105 position: relative;106 height: 520px;107 background: #E0E0E0;108 border-bottom: 1px solid #E5E5E5;109 display: flex;110 align-items: center;111 justify-content: center;112 color: #757575;113 font-size: 36px;114 }115 .fav-circle {116 position: absolute;117 top: 20px;118 right: 20px;119 width: 88px;120 height: 88px;121 border-radius: 44px;122 background: #fff;123 box-shadow: 0 2px 6px rgba(0,0,0,0.15);124 display: flex;125 align-items: center;126 justify-content: center;127 }128 .card-body {129 padding: 22px 26px 28px;130 }131 .brand-name {132 font-size: 46px;133 font-weight: 700;134 letter-spacing: 0.5px;135 margin-bottom: 10px;136 }137 .desc {138 font-size: 34px;139 color: #666;140 line-height: 1.3;141 min-height: 96px;142 }143 .price-row {144 display: flex;145 align-items: baseline;146 gap: 18px;147 margin-top: 18px;148 }149 .price {150 font-size: 44px;151 font-weight: 700;152 }153 .mrp {154 font-size: 34px;155 color: #8f8f8f;156 text-decoration: line-through;157 }158 .off {159 font-size: 34px;160 color: #ff6a00;161 font-weight: 700;162 }163 164 /* Bottom bar */165 .bottom-bar {166 position: absolute;167 left: 0;168 right: 0;169 bottom: 66px;170 height: 140px;171 background: #fff;172 border-top: 1px solid #e6e6e6;173 display: flex;174 }175 .bb-item {176 flex: 1;177 display: flex;178 align-items: center;179 justify-content: center;180 gap: 18px;181 font-size: 38px;182 font-weight: 600;183 }184 .bb-divider {185 width: 1px;186 background: #e6e6e6;187 height: 100%;188 }189 .badge {190 position: absolute;191 top: -8px;192 right: -10px;193 min-width: 40px;194 height: 40px;195 padding: 0 10px;196 background: #e53935;197 color: #fff;198 border-radius: 20px;199 font-size: 26px;200 font-weight: 700;201 display: flex;202 align-items: center;203 justify-content: center;204 }205 .icon-wrap {206 position: relative;207 width: 60px; height: 60px; display:flex; align-items:center; justify-content:center;208 }209 210 /* Gesture home indicator */211 .gesture {212 position: absolute;213 left: 50%;214 transform: translateX(-50%);215 bottom: 18px;216 width: 420px;217 height: 10px;218 background: #cfcfcf;219 border-radius: 6px;220 }221 222 /* Utility */223 svg { display:block; }224</style>225</head>226<body>227<div id="render-target">228 229 <!-- Top system status bar -->230 <div class="status-bar">231 <div>8:20</div>232 <div class="status-right">233 <div class="status-dot" style="opacity:.6;"></div>234 <div style="width:36px;height:36px;border-radius:50%;border:2px solid #fff;"></div>235 <div style="width:38px;height:24px;border:3px solid #fff;border-radius:4px; position:relative;">236 <div style="position:absolute;right:-6px;top:7px;width:6px;height:10px;background:#fff;border-radius:1px;"></div>237 </div>238 </div>239 </div>240 241 <!-- App header -->242 <div class="app-bar">243 <div class="menu-btn" aria-label="Menu">244 <svg width="48" height="48" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2" stroke-linecap="round">245 <path d="M3 5h18M3 12h18M3 19h18"/>246 </svg>247 </div>248 <div class="brand">Shoppers Stop</div>249 <div class="app-icons">250 <div class="icon-btn" aria-label="Search">251 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2" stroke-linecap="round">252 <circle cx="11" cy="11" r="7"></circle>253 <path d="M21 21l-4.2-4.2"></path>254 </svg>255 </div>256 <div class="icon-btn" aria-label="Wishlist">257 <svg width="46" height="46" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">258 <path d="M12 21s-8-4.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 10-8 10z"/>259 </svg>260 </div>261 <div class="icon-btn" aria-label="Bag">262 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2" stroke-linecap="round">263 <path d="M6 7h12l1 14H5L6 7z"></path>264 <path d="M8 7a4 4 0 0 1 8 0"></path>265 </svg>266 </div>267 </div>268 </div>269 270 <!-- Sub header -->271 <div class="sub-header">272 <svg width="54" height="54" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">273 <path d="M15 18l-6-6 6-6"></path>274 </svg>275 <div class="title">Search(7527)</div>276 </div>277 278 <!-- Content grid -->279 <div class="content">280 <div class="grid">281 <!-- Card 1 -->282 <div class="card">283 <div class="card-img">284 [IMG: Men's Striped Casual Shirt]285 <div class="fav-circle">286 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#333" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">287 <path d="M12 21s-8-4.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 10-8 10z"/>288 </svg>289 </div>290 </div>291 <div class="card-body">292 <div class="brand-name">URI</div>293 <div class="desc">Stripes Cotton Regular Fit Men's Casual Shirt - Multi</div>294 <div class="price-row">295 <div class="price">₹899</div>296 <div class="mrp">₹1,999</div>297 <div class="off">55% Off</div>298 </div>299 </div>300 </div>301 302 <!-- Card 2 -->303 <div class="card">304 <div class="card-img">305 [IMG: Men's Light Blue Slim Fit Shirt]306 <div class="fav-circle">307 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#333" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">308 <path d="M12 21s-8-4.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 10-8 10z"/>309 </svg>310 </div>311 </div>312 <div class="card-body">313 <div class="brand-name">STOP</div>314 <div class="desc">Stripes Cotton Slim Fit Men's Shirt - Blue</div>315 <div class="price-row">316 <div class="price">₹699</div>317 <div class="mrp">₹1,799</div>318 <div class="off">61% Off</div>319 </div>320 </div>321 </div>322 323 <!-- Card 3 -->324 <div class="card">325 <div class="card-img">326 [IMG: Men's Blue Linen Shirt]327 <div class="fav-circle">328 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#333" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">329 <path d="M12 21s-8-4.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 10-8 10z"/>330 </svg>331 </div>332 </div>333 <div class="card-body">334 <div class="brand-name">STOP</div>335 <div class="desc">Textured Cotton Casual Shirt - Indigo</div>336 <div class="price-row">337 <div class="price">₹799</div>338 <div class="mrp">₹1,999</div>339 <div class="off">60% Off</div>340 </div>341 </div>342 </div>343 344 <!-- Card 4 -->345 <div class="card">346 <div class="card-img">347 [IMG: Men's Navy Printed Shirt]348 <div class="fav-circle">349 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#333" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">350 <path d="M12 21s-8-4.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 10-8 10z"/>351 </svg>352 </div>353 </div>354 <div class="card-body">355 <div class="brand-name">STOP</div>356 <div class="desc">Printed Cotton Casual Shirt - Navy</div>357 <div class="price-row">358 <div class="price">₹849</div>359 <div class="mrp">₹2,199</div>360 <div class="off">61% Off</div>361 </div>362 </div>363 </div>364 365 </div>366 </div>367 368 <!-- Bottom action bar -->369 <div class="bottom-bar">370 <div class="bb-item">371 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">372 <path d="M6 15l3-3 3 3"></path>373 <path d="M12 9l3 3 3-3"></path>374 </svg>375 <span>SORT</span>376 </div>377 <div class="bb-divider"></div>378 <div class="bb-item">379 <div class="icon-wrap">380 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">381 <path d="M3 5h18l-7 7v6l-4-2v-4z"></path>382 </svg>383 <div class="badge">1</div>384 </div>385 <span>FILTER</span>386 </div>387 </div>388 389 <!-- Gesture bar -->390 <div class="gesture"></div>391</div>392</body>393</html>