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>Search - Formal Coat for Women</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;13 color: #222;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #fff;21 border-radius: 24px;22 box-shadow: 0 10px 30px rgba(0,0,0,0.08);23 }24 25 /* Header / status bar */26 .header {27 background: linear-gradient(180deg, #a8e5e1 0%, #b9e8d8 100%);28 padding: 16px 24px 24px;29 }30 .status-bar {31 height: 50px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 color: #1b1b1b;36 font-weight: 600;37 letter-spacing: 0.2px;38 }39 .status-left {40 display: flex;41 align-items: center;42 gap: 14px;43 font-size: 30px;44 }45 .status-icons {46 display: flex;47 gap: 10px;48 }49 .dot {50 width: 12px;51 height: 12px;52 background: #1b1b1b;53 border-radius: 50%;54 opacity: 0.6;55 }56 .status-right {57 display: flex;58 align-items: center;59 gap: 20px;60 }61 .status-icon {62 width: 28px;63 height: 28px;64 opacity: 0.8;65 }66 67 .search-row {68 display: flex;69 align-items: center;70 margin-top: 18px;71 gap: 20px;72 }73 .back-btn {74 width: 60px;75 height: 60px;76 display: grid;77 place-items: center;78 }79 .search-bar {80 flex: 1;81 background: #fff;82 border-radius: 16px;83 box-shadow: 0 2px 0 rgba(0,0,0,0.05);84 border: 1px solid #e6e6e6;85 height: 80px;86 display: flex;87 align-items: center;88 padding: 0 24px;89 gap: 18px;90 }91 .search-input-text {92 font-size: 34px;93 color: #444;94 flex: 1;95 }96 .scan-btn {97 width: 56px;98 height: 56px;99 border: 1px solid #d0d0d0;100 border-radius: 12px;101 display: grid;102 place-items: center;103 }104 105 /* Content */106 .content {107 background: #fff;108 }109 .section {110 padding: 18px 24px;111 }112 .section-title {113 font-size: 28px;114 color: #666;115 display: flex;116 align-items: center;117 gap: 10px;118 }119 .info-icon {120 width: 26px;121 height: 26px;122 border-radius: 50%;123 border: 1px solid #cfcfcf;124 color: #777;125 font-size: 18px;126 display: grid;127 place-items: center;128 }129 130 /* Sponsored horizontal cards */131 .card-row {132 display: flex;133 gap: 24px;134 margin-top: 16px;135 padding: 0 24px 12px;136 }137 .s-card {138 width: 320px;139 background: #fff;140 border: 1px solid #e6e6e6;141 border-radius: 12px;142 padding: 16px;143 }144 .img-placeholder {145 width: 100%;146 height: 200px;147 background: #E0E0E0;148 border: 1px solid #BDBDBD;149 border-radius: 8px;150 display: flex;151 justify-content: center;152 align-items: center;153 color: #757575;154 font-size: 26px;155 text-align: center;156 }157 .card-title {158 font-size: 28px;159 margin-top: 12px;160 color: #222;161 }162 .rating-row {163 display: flex;164 align-items: center;165 gap: 10px;166 margin-top: 8px;167 font-size: 26px;168 }169 .prime {170 color: #2b77ff;171 font-weight: 700;172 font-size: 28px;173 }174 .stars {175 display: flex;176 align-items: center;177 gap: 4px;178 }179 .star {180 width: 26px;181 height: 26px;182 }183 .count {184 color: #666;185 font-size: 24px;186 }187 188 /* Divider hint */189 .hint {190 margin: 24px 24px 8px;191 padding: 22px;192 border-radius: 16px;193 background: #f8f8f8;194 color: #666;195 font-size: 26px;196 border: 1px solid #eee;197 }198 199 /* Product grid */200 .grid {201 display: grid;202 grid-template-columns: 1fr 1fr;203 gap: 24px;204 padding: 0 24px 24px;205 }206 .p-card {207 border: 1px solid #e6e6e6;208 border-radius: 16px;209 background: #fff;210 overflow: hidden;211 }212 .p-media {213 position: relative;214 padding: 16px;215 }216 .badge {217 position: absolute;218 top: 16px;219 left: 16px;220 background: #f39c12;221 color: #fff;222 font-weight: 700;223 font-size: 26px;224 padding: 10px 16px;225 border-radius: 8px;226 }227 .p-link {228 color: #1a73e8;229 text-decoration: underline;230 font-size: 26px;231 padding: 12px 16px 0;232 }233 .p-sub {234 display: flex;235 align-items: center;236 gap: 8px;237 color: #777;238 font-size: 24px;239 padding: 6px 16px 0;240 }241 .brand {242 font-weight: 800;243 font-size: 28px;244 padding: 8px 16px 0;245 }246 .title {247 padding: 6px 16px 0;248 font-size: 26px;249 color: #333;250 line-height: 1.25;251 }252 .p-rating {253 display: flex;254 align-items: center;255 gap: 10px;256 padding: 12px 16px 0;257 font-size: 26px;258 }259 .festival {260 margin: 14px 16px 0;261 display: inline-block;262 background: #f3c46b;263 color: #4a3a12;264 font-weight: 700;265 padding: 12px 18px;266 border-radius: 10px;267 font-size: 26px;268 }269 .price {270 padding: 14px 16px 20px;271 font-size: 30px;272 font-weight: 800;273 }274 275 /* Bottom nav */276 .bottom-nav {277 position: absolute;278 left: 0;279 right: 0;280 bottom: 80px;281 height: 140px;282 border-top: 1px solid #e6e6e6;283 background: #fff;284 display: flex;285 align-items: center;286 justify-content: space-around;287 padding: 0 12px;288 }289 .nav-item {290 display: flex;291 flex-direction: column;292 align-items: center;293 gap: 12px;294 color: #2b2b2b;295 font-size: 24px;296 }297 .nav-item.active {298 color: #0aa5a4;299 }300 .nav-icon {301 width: 48px;302 height: 48px;303 }304 .gesture-pill {305 position: absolute;306 left: 50%;307 transform: translateX(-50%);308 bottom: 24px;309 width: 320px;310 height: 14px;311 background: #c9c9c9;312 border-radius: 10px;313 }314</style>315</head>316<body>317<div id="render-target">318 319 <div class="header">320 <div class="status-bar">321 <div class="status-left">322 <div>7:22</div>323 <div class="status-icons">324 <div class="dot"></div>325 <div class="dot"></div>326 <div class="dot"></div>327 <div class="dot"></div>328 <div class="dot" style="opacity:.4;"></div>329 </div>330 </div>331 <div class="status-right">332 <!-- Wi-Fi -->333 <svg class="status-icon" viewBox="0 0 24 24">334 <path d="M2 8c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 8zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4l2 2 2-2-2-2-2 2z" fill="#222"/>335 </svg>336 <!-- Battery -->337 <svg class="status-icon" viewBox="0 0 24 24">338 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#222" stroke-width="2"/>339 <rect x="4" y="8" width="14" height="8" fill="#222"/>340 <rect x="20" y="10" width="2" height="4" fill="#222"/>341 </svg>342 </div>343 </div>344 345 <div class="search-row">346 <div class="back-btn">347 <svg width="40" height="40" viewBox="0 0 24 24">348 <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>349 </svg>350 </div>351 <div class="search-bar">352 <svg width="40" height="40" viewBox="0 0 24 24">353 <circle cx="10" cy="10" r="6" stroke="#555" stroke-width="2" fill="none"/>354 <path d="M21 21l-6-6" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>355 </svg>356 <div class="search-input-text">formal coat for women</div>357 <div class="scan-btn">358 <svg width="34" height="34" viewBox="0 0 24 24">359 <path d="M3 7V5h4M17 5h4v2M21 17v2h-4M7 19H3v-2" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>360 <rect x="7" y="7" width="10" height="10" rx="2" ry="2" stroke="#666" stroke-width="2" fill="none"/>361 </svg>362 </div>363 </div>364 </div>365 </div>366 367 <div class="content">368 369 <div class="section">370 <div class="section-title">Sponsored <span class="info-icon">i</span></div>371 </div>372 373 <div class="card-row">374 <div class="s-card">375 <div class="img-placeholder">[IMG: Van Heusen Logo]</div>376 <div class="card-title">Shop Van Heusen</div>377 </div>378 <div class="s-card">379 <div class="img-placeholder">[IMG: Woman in Grey Blazer]</div>380 <div class="card-title">Van Heusen Women Blazer</div>381 <div class="rating-row">382 <span class="prime">prime</span>383 <div class="stars">384 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" fill="#f6a623"/></svg>385 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" fill="#f6a623"/></svg>386 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" fill="#f6a623"/></svg>387 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" fill="#ddd"/></svg>388 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" fill="#ddd"/></svg>389 </div>390 <span class="count">18</span>391 </div>392 </div>393 </div>394 395 <div class="hint">Price and other details may vary based on product size and colour.</div>396 397 <div class="grid">398 <!-- Left product -->399 <div class="p-card">400 <div class="p-media">401 <div class="img-placeholder" style="height: 640px;">[IMG: Woman in Black Blazer]</div>402 </div>403 <div class="p-link">+5 colours/patterns</div>404 <div class="p-sub">Sponsored <span class="info-icon" style="width:22px;height:22px;font-size:16px;">i</span></div>405 <div class="brand">ROCKSY</div>406 <div class="title">Smart Casual & Formal Blazer for Women, Regular...</div>407 <div class="p-rating">408 <span style="color:#1a73e8;">3.1</span>409 <div class="stars">410 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" fill="#f6a623"/></svg>411 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" fill="#f6a623"/></svg>412 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" fill="#f6a623"/></svg>413 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" fill="#ddd"/></svg>414 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" fill="#ddd"/></svg>415 </div>416 <span class="count">(7)</span>417 </div>418 <span class="festival">Great Indian Festival</span>419 <div class="price">₹949</div>420 </div>421 422 <!-- Right product -->423 <div class="p-card">424 <div class="p-media">425 <div class="badge">Best seller</div>426 <div class="img-placeholder" style="height: 640px;">[IMG: Woman in Black Formal Blazer]</div>427 </div>428 <div class="p-link">+5 colours/patterns</div>429 <div class="p-sub">Sponsored <span class="info-icon" style="width:22px;height:22px;font-size:16px;">i</span></div>430 <div class="brand">ROCKSY</div>431 <div class="title">Black Smart Casual Formal Blazer for Women, Regular...</div>432 <div class="p-rating">433 <span style="color:#1a73e8;">3.3</span>434 <div class="stars">435 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" fill="#f6a623"/></svg>436 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" fill="#f6a623"/></svg>437 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" fill="#f6a623"/></svg>438 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" fill="#ddd"/></svg>439 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" fill="#ddd"/></svg>440 </div>441 <span class="count">(13)</span>442 </div>443 <div style="padding: 0 16px 0; color:#777; font-size:24px;">50+ bought in past month</div>444 <span class="festival">Great Indian Festival</span>445 <div class="price">₹949</div>446 </div>447 </div>448 449 </div>450 451 <!-- Bottom navigation -->452 <div class="bottom-nav">453 <div class="nav-item active">454 <svg class="nav-icon" viewBox="0 0 24 24">455 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-5v-7H10v7H5a2 2 0 0 1-2-2v-9z" fill="#0aa5a4"/>456 </svg>457 <div>Home</div>458 </div>459 <div class="nav-item">460 <svg class="nav-icon" viewBox="0 0 24 24">461 <circle cx="12" cy="8" r="4" fill="#444"/>462 <path d="M4 20c2-4 6-5 8-5s6 1 8 5" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>463 </svg>464 <div>You</div>465 </div>466 <div class="nav-item">467 <svg class="nav-icon" viewBox="0 0 24 24">468 <path d="M12 5v14M5 12h14" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>469 </svg>470 <div>More</div>471 </div>472 <div class="nav-item">473 <svg class="nav-icon" viewBox="0 0 24 24">474 <path d="M6 6h14l-2 12H8L6 6z" stroke="#444" stroke-width="2" fill="none"/>475 <circle cx="9" cy="20" r="2" fill="#444"/>476 <circle cx="17" cy="20" r="2" fill="#444"/>477 </svg>478 <div>Cart</div>479 </div>480 <div class="nav-item">481 <svg class="nav-icon" viewBox="0 0 24 24">482 <path d="M4 7h16M4 12h16M4 17h16" stroke="#444" stroke-width="2" stroke-linecap="round"/>483 </svg>484 <div>Menu</div>485 </div>486 </div>487 488 <div class="gesture-pill"></div>489 490</div>491</body>492</html>