GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search Results UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #222; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 height: 88px;20 padding: 0 28px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 font-size: 32px;25 color: #2b2b2b;26 }27 .status-icons { display: flex; gap: 18px; align-items: center; color: #6b6b6b; }28 .status-right { display: flex; gap: 18px; align-items: center; color: #6b6b6b; }29 30 /* Search header */31 .search-header {32 padding: 12px 24px 16px 24px;33 }34 .search-row { display: flex; align-items: center; gap: 18px; }35 .icon-btn {36 width: 64px; height: 64px; border-radius: 32px;37 display: flex; align-items: center; justify-content: center;38 }39 .search-bar {40 flex: 1;41 height: 92px;42 border: 1px solid #dcdcdc;43 border-radius: 20px;44 box-shadow: 0 2px 0 rgba(0,0,0,0.04) inset;45 display: flex; align-items: center;46 padding: 0 18px;47 gap: 16px;48 background: #f7f7f7;49 }50 .search-input {51 flex: 1; font-size: 34px; color: #606060;52 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;53 }54 .end-icons { display: flex; gap: 16px; align-items: center; }55 .cart-wrap { position: relative; }56 .badge {57 position: absolute; right: -2px; top: -6px;58 background: #ff3d3d; color: #fff; font-size: 22px;59 width: 36px; height: 36px; border-radius: 18px;60 display: flex; align-items: center; justify-content: center;61 border: 2px solid #fff;62 }63 64 /* Chips */65 .chips { display: flex; flex-wrap: wrap; gap: 16px; padding: 18px 24px; }66 .chip {67 padding: 18px 28px; border: 1px solid #dcdcdc; border-radius: 999px;68 background: #fff; font-size: 30px; color: #4b4b4b;69 }70 .chip svg { vertical-align: middle; margin-left: 8px; }71 72 /* Tags */73 .tag-bar { display: flex; gap: 16px; padding: 6px 24px 16px 24px; }74 .tag {75 display: flex; align-items: center; gap: 12px;76 padding: 16px 20px; border: 1px solid #cfcfcf; border-radius: 12px;77 background: #fff; font-size: 28px; color: #444;78 }79 .tag-icon {80 width: 44px; height: 44px; border-radius: 22px; background: #ffe9a6; border: 1px solid #e6c76b;81 }82 .tag.green { border-color: #b6dfb6; }83 .tag.green .tag-icon { background: #d8f4d8; border-color: #9dd49d; }84 85 /* Ad banner */86 .ad-banner {87 margin: 16px 24px;88 height: 420px;89 border-radius: 18px;90 background: linear-gradient(90deg, #f1bfd9, #c0b5f4);91 display: flex;92 padding: 24px;93 gap: 24px;94 position: relative;95 }96 .ad-left {97 width: 370px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;98 }99 .circle-img {100 width: 220px; height: 220px; border-radius: 110px;101 background: #E0E0E0; border: 1px solid #BDBDBD;102 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; text-align: center;103 }104 .ad-left .title { font-size: 36px; font-weight: 600; text-align: center; line-height: 1.2; color: #222; }105 .ad-left .link { font-size: 28px; color: #444; }106 .ad-right { flex: 1; display: flex; gap: 24px; align-items: center; }107 .mini-card {108 width: 300px; background: #fff; border-radius: 16px; border: 1px solid #e5e5e5;109 box-shadow: 0 2px 0 rgba(0,0,0,0.04);110 overflow: hidden; position: relative;111 }112 .mini-card .img {113 width: 100%; height: 200px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;114 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;115 }116 .rating-pill {117 position: absolute; left: 18px; top: 18px;118 background: #24a647; color: #fff; font-size: 26px; padding: 8px 12px; border-radius: 8px; font-weight: 700;119 }120 .mini-card .body { padding: 16px; }121 .mini-card .name { font-size: 26px; color: #333; }122 .price-line { font-size: 24px; color: #666; }123 .price-line .old { text-decoration: line-through; color: #9a9a9a; }124 .discount { color: #1e9c35; font-weight: 700; font-size: 24px; }125 126 /* Product grid */127 .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 12px; }128 .prod-card { border-top: 1px solid #efefef; }129 .prod-img-wrap { position: relative; }130 .prod-img {131 width: 100%; height: 860px; background: #E0E0E0; border: 1px solid #BDBDBD;132 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;133 }134 .fav-btn {135 position: absolute; right: 26px; top: 26px; width: 64px; height: 64px;136 border-radius: 32px; background: rgba(255,255,255,0.92); border: 1px solid #ddd;137 display: flex; align-items: center; justify-content: center;138 }139 .badge-trending {140 position: absolute; left: 26px; top: 26px; background: #00b79f; color: #fff; font-size: 26px;141 padding: 8px 14px; border-radius: 10px; font-weight: 700;142 }143 .prod-info { padding: 24px; }144 .prod-title { font-size: 32px; font-weight: 700; margin-bottom: 8px; }145 .price-row { font-size: 30px; display: flex; gap: 12px; align-items: baseline; }146 .price-row .old { text-decoration: line-through; color: #9a9a9a; }147 .price-row .new { font-weight: 800; }148 .price-row .off { color: #1e9c35; font-weight: 700; }149 .extra { color: #1e9c35; font-size: 28px; margin-top: 10px; }150 .rating-row { margin-top: 10px; font-size: 28px; color: #1e9c35; display: flex; align-items: center; gap: 8px; }151 .rating-row .grey { color: #777; }152 .assured { margin-left: 8px; font-size: 26px; color: #1a73e8; }153 .delivery { font-size: 28px; color: #555; margin-top: 6px; }154 155 /* Hot deal pill */156 .hot-pill { display: inline-block; padding: 8px 12px; border-radius: 10px; background: #e5ffe9; color: #18a64a; font-size: 26px; margin-top: 6px; }157 158 /* Floating button */159 .fab {160 position: absolute; right: 32px; bottom: 360px;161 width: 120px; height: 120px; border-radius: 60px;162 background: #ffd633; box-shadow: 0 8px 16px rgba(0,0,0,0.2);163 border: 8px solid #2b59ff; display: flex; align-items: center; justify-content: center;164 font-weight: 900; font-size: 48px; color: #2b59ff;165 }166 167 /* Simple SVG styles */168 svg { width: 40px; height: 40px; }169</style>170</head>171<body>172<div id="render-target">173 174 <!-- Status bar -->175 <div class="status-bar">176 <div class="status-icons">177 <span>10:25</span>178 <span>•</span>179 <span>•</span>180 <span>•</span>181 </div>182 <div class="status-right">183 <span>📶</span>184 <span>🔋</span>185 </div>186 </div>187 188 <!-- Search and actions -->189 <div class="search-header">190 <div class="search-row">191 <div class="icon-btn">192 <svg viewBox="0 0 24 24">193 <path d="M15 19L8 12l7-7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>194 </svg>195 </div>196 <div class="search-bar">197 <svg viewBox="0 0 24 24">198 <circle cx="10" cy="10" r="6" stroke="#666" stroke-width="2" fill="none"/>199 <path d="M14 14l6 6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>200 </svg>201 <div class="search-input">black formal pants for wo...</div>202 <div class="end-icons">203 <svg viewBox="0 0 24 24">204 <rect x="9" y="4" width="6" height="12" rx="3" fill="#666"/>205 <circle cx="12" cy="20" r="2" fill="#666"/>206 </svg>207 <svg viewBox="0 0 24 24">208 <rect x="3" y="7" width="18" height="13" rx="2" stroke="#666" stroke-width="2" fill="none"/>209 <circle cx="12" cy="13.5" r="3" stroke="#666" stroke-width="2" fill="none"/>210 <path d="M7 7l2-2h6l2 2" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>211 </svg>212 </div>213 </div>214 <div class="icon-btn cart-wrap">215 <svg viewBox="0 0 24 24">216 <path d="M3 5h2l2 12h10l2-9H7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>217 <circle cx="9" cy="20" r="2" fill="#222"/>218 <circle cx="17" cy="20" r="2" fill="#222"/>219 </svg>220 <div class="badge">1</div>221 </div>222 </div>223 </div>224 225 <!-- Filter chips -->226 <div class="chips">227 <div class="chip">Sort By228 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/></svg>229 </div>230 <div class="chip">231 <svg viewBox="0 0 24 24">232 <path d="M3 5h18M6 12h12M10 19h4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>233 </svg>234 Filter235 </div>236 <div class="chip">Price237 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2" fill="none"/></svg>238 </div>239 <div class="chip">Size240 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2" fill="none"/></svg>241 </div>242 <div class="chip">Brand243 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2" fill="none"/></svg>244 </div>245 </div>246 247 <!-- Category tags -->248 <div class="tag-bar">249 <div class="tag">250 <div class="tag-icon"></div>251 Popular Brands252 </div>253 <div class="tag">254 <div class="tag-icon" style="background:#d9fff1; border-color:#73e2b5;"></div>255 Spoyl256 </div>257 <div class="tag">258 <div class="tag-icon"></div>259 Top Rated260 </div>261 <div class="tag green">262 <div class="tag-icon"></div>263 Rs. 300<br>Rs. 499264 </div>265 </div>266 267 <!-- Ad banner -->268 <div class="ad-banner">269 <div class="ad-left">270 <div class="circle-img">[IMG: Kotty Logo]</div>271 <div class="title">Best Selling Kotty Trousers</div>272 <div class="link">Shop now ›</div>273 </div>274 <div class="ad-right">275 <div class="mini-card">276 <div class="rating-pill">3.8★</div>277 <div class="img">[IMG: Pink Trousers]</div>278 <div class="body">279 <div class="name">KOTTY Regular Fit W...</div>280 <div class="price-line"><span class="old">1,999</span> <strong>₹399</strong></div>281 <div class="discount">80% off</div>282 </div>283 </div>284 <div class="mini-card">285 <div class="rating-pill">3.8★</div>286 <div class="img">[IMG: Pink Trousers]</div>287 <div class="body">288 <div class="name">KOTTY Regular Fit W...</div>289 <div class="price-line"><span class="old">1,999</span> <strong>₹399</strong></div>290 <div class="discount">80% off</div>291 </div>292 </div>293 </div>294 </div>295 296 <!-- Product grid -->297 <div class="grid">298 <!-- Left product -->299 <div class="prod-card">300 <div class="prod-img-wrap">301 <div class="badge-trending">TRENDING</div>302 <div class="prod-img">[IMG: Black Formal Pants - Model]</div>303 <div class="fav-btn">304 <svg viewBox="0 0 24 24">305 <path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.65-7 10-7 10z" stroke="#777" stroke-width="1.8" fill="none"/>306 </svg>307 </div>308 </div>309 <div class="prod-info">310 <div class="prod-title">KOTTY</div>311 <div class="price-row">312 <span class="old">1,999</span>313 <span class="new">₹399</span>314 <span class="off">80% off</span>315 </div>316 <div class="extra">Save extra with combo offers</div>317 <div class="rating-row">318 ★★★★☆ <span class="grey">(54,227)</span>319 <span class="assured">Plus • F-Assured</span>320 </div>321 <div class="delivery">Free delivery</div>322 </div>323 </div>324 325 <!-- Right product -->326 <div class="prod-card">327 <div class="prod-img-wrap">328 <div class="prod-img">[IMG: Black Formal Pants - Striped Top]</div>329 <div class="fav-btn">330 <svg viewBox="0 0 24 24">331 <path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.65-7 10-7 10z" stroke="#777" stroke-width="1.8" fill="none"/>332 </svg>333 </div>334 </div>335 <div class="prod-info">336 <div class="prod-title">LEE TEX</div>337 <div class="price-row">338 <span class="old">1,799</span>339 <span class="new">₹339</span>340 <span class="off">81% off</span>341 </div>342 <span class="hot-pill">Hot Deal</span>343 <div class="rating-row">344 ★★★★☆ <span class="grey">(59)</span>345 <span class="assured">Plus • F-Assured</span>346 </div>347 <div class="delivery">Free delivery</div>348 </div>349 </div>350 </div>351 352 <!-- Floating assistance button -->353 <div class="fab">F</div>354 355</div>356</body>357</html>