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 Results - Washing Machine</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: #F7F7F7;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #111;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 16px;23 left: 24px;24 right: 24px;25 height: 48px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 font-weight: 600;30 color: #2C2C2C;31 }32 .status-left { display:flex; align-items:center; gap:16px; }33 .status-right { display:flex; align-items:center; gap:18px; }34 .status-icon svg { width: 28px; height: 28px; stroke: #5F5F5F; }35 36 /* Header/search */37 .header {38 position: absolute;39 top: 84px;40 left: 24px;41 right: 24px;42 height: 86px;43 display: flex;44 align-items: center;45 gap: 18px;46 }47 .round-btn {48 width: 56px;49 height: 56px;50 border-radius: 28px;51 background: #FFFFFF;52 box-shadow: 0 2px 4px rgba(0,0,0,0.08);53 display: flex;54 align-items: center;55 justify-content: center;56 border: 1px solid #E6E6E6;57 }58 .search-bar {59 flex: 1;60 height: 74px;61 background: #FFFFFF;62 border-radius: 37px;63 border: 1px solid #E5E5E5;64 box-shadow: 0 2px 4px rgba(0,0,0,0.08) inset;65 display: flex;66 align-items: center;67 padding: 0 22px;68 gap: 16px;69 }70 .search-input {71 flex: 1;72 font-size: 30px;73 color: #111;74 }75 .search-placeholder { color:#707070; }76 .pill-icon {77 width: 52px;78 height: 52px;79 border-radius: 26px;80 background: #F0F0F0;81 display:flex;82 align-items:center;83 justify-content:center;84 border: 1px solid #DADADA;85 }86 87 /* Filters row */88 .filters {89 position: absolute;90 top: 186px;91 left: 24px;92 right: 24px;93 height: 72px;94 display: flex;95 align-items: center;96 gap: 18px;97 }98 .chip {99 height: 64px;100 padding: 0 26px;101 border-radius: 32px;102 background: #FFFFFF;103 border: 1px solid #E0E0E0;104 display: flex;105 align-items: center;106 gap: 14px;107 font-size: 28px;108 color: #333;109 white-space: nowrap;110 }111 .chip .badge {112 min-width: 32px;113 height: 32px;114 border-radius: 16px;115 background: #000;116 color: #fff;117 font-size: 22px;118 display:flex;119 align-items:center;120 justify-content:center;121 padding: 0 8px;122 }123 124 /* Product list */125 .list {126 position: absolute;127 top: 270px;128 left: 24px;129 right: 24px;130 bottom: 0;131 }132 .card {133 background: #FFFFFF;134 border-radius: 26px;135 border: 1px solid #EAEAEA;136 padding: 22px;137 margin-bottom: 26px;138 display: flex;139 gap: 24px;140 align-items: flex-start;141 }142 .img {143 width: 260px;144 height: 240px;145 background: #E0E0E0;146 border: 1px solid #BDBDBD;147 border-radius: 18px;148 display:flex;149 align-items:center;150 justify-content:center;151 color:#757575;152 font-size: 26px;153 text-align:center;154 padding: 10px;155 }156 .content {157 flex: 1;158 position: relative;159 padding-right: 140px; /* space for cart button */160 }161 .title {162 font-size: 30px;163 line-height: 1.2;164 color: #222;165 margin-bottom: 10px;166 overflow: hidden;167 text-overflow: ellipsis;168 white-space: nowrap;169 }170 .price {171 font-weight: 800;172 font-size: 38px;173 margin: 8px 0 10px;174 }175 .subtext {176 color: #666;177 font-size: 26px;178 }179 .wish {180 position: absolute;181 top: 0;182 right: 0;183 }184 .wish .heart {185 width: 44px;186 height: 44px;187 }188 .add-cart {189 position: absolute;190 right: 10px;191 bottom: 10px;192 width: 92px;193 height: 92px;194 border-radius: 46px;195 background: #FFFFFF;196 border: 1px solid #DADADA;197 display:flex;198 align-items:center;199 justify-content:center;200 box-shadow: 0 2px 6px rgba(0,0,0,0.08);201 }202 .add-cart svg { width: 44px; height: 44px; }203 204 /* Section divider */205 .divider {206 background: #EFEFEF;207 color: #5A5A5A;208 border-radius: 22px;209 padding: 22px 26px;210 font-size: 28px;211 margin: 8px 0 18px;212 }213 .divider a { color:#1784FF; text-decoration:none; font-weight:600; }214 215 /* Discount styling */216 .price-red { color: #E64A19; font-weight: 800; }217 .price-strike { color:#9E9E9E; text-decoration: line-through; margin-left: 10px; font-weight: 600; }218 219 /* Floating cart button */220 .floating-cart {221 position: absolute;222 right: 26px;223 top: 1340px;224 width: 104px;225 height: 104px;226 border-radius: 52px;227 background: #111;228 display:flex;229 align-items:center;230 justify-content:center;231 box-shadow: 0 6px 12px rgba(0,0,0,0.25);232 }233 .floating-cart svg { width: 50px; height: 50px; stroke: #fff; }234 235 /* Gesture bar (bottom) */236 .gesture {237 position: absolute;238 bottom: 24px;239 left: 360px;240 width: 360px;241 height: 10px;242 background: #101010;243 border-radius: 6px;244 opacity: 0.7;245 }246</style>247</head>248<body>249<div id="render-target">250 251 <!-- Status bar -->252 <div class="status-bar">253 <div class="status-left">254 <div style="font-size:32px;">9:45</div>255 <div class="status-icon">256 <svg viewBox="0 0 24 24" fill="none">257 <circle cx="10" cy="10" r="6" stroke-width="2" />258 <path d="M15 15 L20 20" stroke-width="2" />259 </svg>260 </div>261 <div class="status-icon">262 <svg viewBox="0 0 24 24" fill="none">263 <rect x="3" y="3" width="7" height="7" stroke-width="2"></rect>264 <rect x="14" y="3" width="7" height="7" stroke-width="2"></rect>265 <rect x="3" y="14" width="7" height="7" stroke-width="2"></rect>266 <rect x="14" y="14" width="7" height="7" stroke-width="2"></rect>267 </svg>268 </div>269 <div style="font-weight:800; background:#EFEFEF; padding:4px 8px; border-radius:6px;">S</div>270 <div style="width:6px; height:6px; background:#818181; border-radius:50%;"></div>271 </div>272 <div class="status-right">273 <svg width="32" height="20" viewBox="0 0 32 20" fill="none">274 <rect x="1" y="4" width="24" height="12" rx="6" stroke="#5F5F5F" stroke-width="2"></rect>275 <rect x="27" y="7" width="4" height="6" rx="2" fill="#5F5F5F"></rect>276 </svg>277 <svg width="22" height="22" viewBox="0 0 22 22" fill="none">278 <path d="M2 11 L11 2 L20 11 L11 20 Z" stroke="#5F5F5F" stroke-width="2" fill="none"></path>279 </svg>280 </div>281 </div>282 283 <!-- Header with search -->284 <div class="header">285 <div class="round-btn">286 <svg viewBox="0 0 24 24" fill="none">287 <path d="M15 6 L7 12 L15 18" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>288 </svg>289 </div>290 <div class="round-btn">291 <svg viewBox="0 0 24 24" fill="none">292 <path d="M4 6 H20" stroke="#111" stroke-width="2" stroke-linecap="round"></path>293 <path d="M4 12 H20" stroke="#111" stroke-width="2" stroke-linecap="round"></path>294 <path d="M4 18 H20" stroke="#111" stroke-width="2" stroke-linecap="round"></path>295 </svg>296 </div>297 298 <div class="search-bar">299 <div class="pill-icon">300 <svg viewBox="0 0 24 24" fill="none">301 <rect x="4" y="6" width="16" height="12" rx="2" stroke="#333" stroke-width="2"></rect>302 <circle cx="12" cy="12" r="3" stroke="#333" stroke-width="2"></circle>303 </svg>304 </div>305 <div class="search-input">washing machine</div>306 <div class="pill-icon">307 <svg viewBox="0 0 24 24" fill="none">308 <circle cx="11" cy="11" r="7" stroke="#333" stroke-width="2"></circle>309 <path d="M16 16 L21 21" stroke="#333" stroke-width="2"></path>310 </svg>311 </div>312 </div>313 314 <div class="round-btn">315 <svg viewBox="0 0 24 24" fill="none">316 <path d="M12 3 C8 3 5 6 5 10 C5 14 8 17 12 21 C16 17 19 14 19 10 C19 6 16 3 12 3 Z" stroke="#111" stroke-width="2" fill="none"></path>317 <circle cx="12" cy="10" r="3" stroke="#111" stroke-width="2"></circle>318 </svg>319 </div>320 </div>321 322 <!-- Filters row -->323 <div class="filters">324 <div class="round-btn" style="width:64px;height:64px;">325 <svg viewBox="0 0 24 24" fill="none">326 <rect x="3" y="3" width="7" height="7" stroke="#111" stroke-width="2"></rect>327 <rect x="14" y="3" width="7" height="7" stroke="#111" stroke-width="2"></rect>328 <rect x="3" y="14" width="7" height="7" stroke="#111" stroke-width="2"></rect>329 <rect x="14" y="14" width="7" height="7" stroke="#111" stroke-width="2"></rect>330 </svg>331 </div>332 <div class="chip">333 <span>Sort</span>334 <svg width="20" height="20" viewBox="0 0 20 20" fill="none">335 <path d="M6 8 L10 12 L14 8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>336 </svg>337 </div>338 <div class="chip">339 <svg width="24" height="24" viewBox="0 0 24 24" fill="none">340 <path d="M4 5 H20 L14 12 V18 L10 16 V12 Z" stroke="#333" stroke-width="2" fill="none"></path>341 </svg>342 <div class="badge">1</div>343 </div>344 <div class="chip">345 <span>Category</span>346 <svg width="20" height="20" viewBox="0 0 20 20" fill="none">347 <path d="M6 8 L10 12 L14 8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>348 </svg>349 <svg width="18" height="18" viewBox="0 0 18 18" fill="none">350 <path d="M4 4 L14 14" stroke="#999" stroke-width="2"></path>351 </svg>352 </div>353 <div class="chip" style="opacity:.6;">354 <span>Price & Deals</span>355 </div>356 </div>357 358 <!-- Product list -->359 <div class="list">360 361 <!-- Card 1 -->362 <div class="card">363 <div class="img">[IMG: Top-loading Washing Machine]</div>364 <div class="content">365 <div class="title">Free shipping 380w Power Washer Ca...</div>366 <div class="price">958,75 €</div>367 <div class="subtext">Free Shipping</div>368 <div class="wish">369 <svg class="heart" viewBox="0 0 24 24" fill="none">370 <path d="M12 19 C8 16 5 14 5 10 C5 8 6.5 6.5 8.5 6.5 C10 6.5 11 7.3 12 8.5 C13 7.3 14 6.5 15.5 6.5 C17.5 6.5 19 8 19 10 C19 14 16 16 12 19 Z" stroke="#111" stroke-width="2" fill="none"></path>371 </svg>372 </div>373 <div class="add-cart">374 <svg viewBox="0 0 24 24" fill="none" stroke="#111">375 <path d="M3 5 H5 L6 12 H18 L20 7 H7" stroke-width="2" fill="none"></path>376 <circle cx="9" cy="19" r="2" stroke-width="2"></circle>377 <circle cx="16" cy="19" r="2" stroke-width="2"></circle>378 </svg>379 </div>380 </div>381 </div>382 383 <!-- Card 2 -->384 <div class="card">385 <div class="img">[IMG: Washing Machine - Large Capacity]</div>386 <div class="content">387 <div class="title">HOT SELLING Large Capacity Househo...</div>388 <div class="price">958,75 €</div>389 <div class="subtext">Free Shipping</div>390 <div class="wish">391 <svg class="heart" viewBox="0 0 24 24" fill="none">392 <path d="M12 19 C8 16 5 14 5 10 C5 8 6.5 6.5 8.5 6.5 C10 6.5 11 7.3 12 8.5 C13 7.3 14 6.5 15.5 6.5 C17.5 6.5 19 8 19 10 C19 14 16 16 12 19 Z" stroke="#111" stroke-width="2" fill="none"></path>393 </svg>394 </div>395 <div class="add-cart">396 <svg viewBox="0 0 24 24" fill="none" stroke="#111">397 <path d="M3 5 H5 L6 12 H18 L20 7 H7" stroke-width="2" fill="none"></path>398 <circle cx="9" cy="19" r="2" stroke-width="2"></circle>399 <circle cx="16" cy="19" r="2" stroke-width="2"></circle>400 </svg>401 </div>402 </div>403 </div>404 405 <!-- Card 3 -->406 <div class="card">407 <div class="img">[IMG: Boxed Washing Machine]</div>408 <div class="content">409 <div class="title">FREE SHIPPING 8kg Fully Automatic W...</div>410 <div class="price">958,75 €</div>411 <div class="subtext">Free Shipping</div>412 <div class="wish">413 <svg class="heart" viewBox="0 0 24 24" fill="none">414 <path d="M12 19 C8 16 5 14 5 10 C5 8 6.5 6.5 8.5 6.5 C10 6.5 11 7.3 12 8.5 C13 7.3 14 6.5 15.5 6.5 C17.5 6.5 19 8 19 10 C19 14 16 16 12 19 Z" stroke="#111" stroke-width="2" fill="none"></path>415 </svg>416 </div>417 <div class="add-cart">418 <svg viewBox="0 0 24 24" fill="none" stroke="#111">419 <path d="M3 5 H5 L6 12 H18 L20 7 H7" stroke-width="2" fill="none"></path>420 <circle cx="9" cy="19" r="2" stroke-width="2"></circle>421 <circle cx="16" cy="19" r="2" stroke-width="2"></circle>422 </svg>423 </div>424 </div>425 </div>426 427 <!-- Divider -->428 <div class="divider">Result for washing machine in <a href="#">All Categories</a></div>429 430 <!-- Card 4: accessory -->431 <div class="card">432 <div class="img" style="width:260px; height:260px;">[IMG: Washing Machine Cleaner Brush Set]</div>433 <div class="content">434 <div class="title">New Washing Machine Cleaner Brush ...</div>435 <div style="display:flex; align-items:center; gap:8px; margin:8px 0 10px;">436 <div class="price price-red">2,94 €</div>437 <div class="price-strike">3,23 €</div>438 </div>439 <div class="subtext">Deal • Limited time</div>440 <div class="wish">441 <svg class="heart" viewBox="0 0 24 24" fill="none">442 <path d="M12 19 C8 16 5 14 5 10 C5 8 6.5 6.5 8.5 6.5 C10 6.5 11 7.3 12 8.5 C13 7.3 14 6.5 15.5 6.5 C17.5 6.5 19 8 19 10 C19 14 16 16 12 19 Z" stroke="#111" stroke-width="2" fill="none"></path>443 </svg>444 </div>445 <div class="add-cart">446 <svg viewBox="0 0 24 24" fill="none" stroke="#111">447 <path d="M3 5 H5 L6 12 H18 L20 7 H7" stroke-width="2" fill="none"></path>448 <circle cx="9" cy="19" r="2" stroke-width="2"></circle>449 <circle cx="16" cy="19" r="2" stroke-width="2"></circle>450 </svg>451 </div>452 </div>453 </div>454 455 <!-- Card 5: accessory -->456 <div class="card">457 <div class="img" style="width:260px; height:240px;">[IMG: Oral Irrigator / Water Flosser]</div>458 <div class="content">459 <div class="title">Oral Irrigators Powerful Water Flosser ...</div>460 <div style="display:flex; align-items:center; gap:8px; margin:8px 0 10px;">461 <div class="price price-red">35,05 €</div>462 <div class="price-strike">73,02 €</div>463 </div>464 <div class="subtext">Deal • Limited time</div>465 <div class="wish">466 <svg class="heart" viewBox="0 0 24 24" fill="none">467 <path d="M12 19 C8 16 5 14 5 10 C5 8 6.5 6.5 8.5 6.5 C10 6.5 11 7.3 12 8.5 C13 7.3 14 6.5 15.5 6.5 C17.5 6.5 19 8 19 10 C19 14 16 16 12 19 Z" stroke="#111" stroke-width="2" fill="none"></path>468 </svg>469 </div>470 <div class="add-cart">471 <svg viewBox="0 0 24 24" fill="none" stroke="#111">472 <path d="M3 5 H5 L6 12 H18 L20 7 H7" stroke-width="2" fill="none"></path>473 <circle cx="9" cy="19" r="2" stroke-width="2"></circle>474 <circle cx="16" cy="19" r="2" stroke-width="2"></circle>475 </svg>476 </div>477 </div>478 </div>479 480 </div>481 482 <!-- Floating cart -->483 <div class="floating-cart">484 <svg viewBox="0 0 24 24" fill="none">485 <path d="M3 5 H5 L6 12 H18 L20 7 H7" stroke-width="2" fill="none"></path>486 <circle cx="9" cy="19" r="2" stroke-width="2"></circle>487 <circle cx="16" cy="19" r="2" stroke-width="2"></circle>488 </svg>489 </div>490 491 <!-- Bottom gesture bar -->492 <div class="gesture"></div>493 494</div>495</body>496</html>