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>Shopping Results - Washing Machine</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F5F6F8;15 }16 17 /* Status bar */18 .status-bar {19 height: 96px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #2D2D2D;25 font-weight: 600;26 font-size: 34px;27 }28 .status-icons {29 display: flex;30 gap: 24px;31 align-items: center;32 }33 .status-dot {34 width: 12px; height: 12px; background: #2D2D2D; border-radius: 50%;35 }36 37 /* Top search header */38 .top-bar {39 padding: 16px 24px 8px 24px;40 }41 .top-row {42 display: flex;43 align-items: center;44 gap: 18px;45 margin-bottom: 18px;46 }47 .icon-btn {48 width: 72px; height: 72px;49 border-radius: 36px;50 border: 1px solid #E2E2E2;51 background: #FFFFFF;52 display: flex; align-items: center; justify-content: center;53 }54 .red-dot {55 width: 16px; height: 16px; background: #FF2D55; border-radius: 50%;56 margin-left: 8px; transform: translateY(10px);57 }58 .search-pill {59 flex: 1;60 height: 96px;61 border-radius: 48px;62 border: 2px solid #222;63 background: #FFFFFF;64 display: flex; align-items: center;65 padding: 0 24px;66 gap: 18px;67 box-shadow: 0 2px 0 #111 inset;68 }69 .search-text {70 flex: 1;71 font-size: 34px;72 color: #111;73 opacity: 0.95;74 }75 .pill-icon {76 width: 64px; height: 64px; border-radius: 32px; background: #F0F0F0;77 display: flex; align-items: center; justify-content: center; border: 1px solid #D6D6D6;78 }79 .geo-icon {80 width: 72px; height: 72px; border-radius: 36px; background: #FFF;81 border: 1px solid #E0E0E0; display: flex; align-items: center; justify-content: center;82 }83 84 /* Filter chips row */85 .chips {86 display: flex; align-items: center; gap: 18px;87 padding-left: 24px;88 margin-bottom: 14px;89 }90 .round-chip {91 width: 96px; height: 72px; border-radius: 36px; background: #FFF;92 border: 1px solid #D9D9D9; display: flex; align-items: center; justify-content: center;93 }94 .pill-chip {95 height: 72px; padding: 0 28px; border-radius: 36px; background: #FFF;96 border: 1px solid #D9D9D9; display: flex; align-items: center; gap: 18px;97 font-size: 30px; color: #111;98 }99 .badge {100 min-width: 42px; height: 42px; border-radius: 21px; background: #111; color: #FFF;101 display: inline-flex; align-items: center; justify-content: center; font-size: 26px;102 }103 .gray-pill {104 height: 72px; padding: 0 32px; border-radius: 36px; background: #EFEFEF; color: #111;105 display: flex; align-items: center; gap: 16px; border: 1px solid #E5E5E5;106 font-size: 30px;107 }108 109 /* Product cards */110 .list {111 padding: 0 24px 24px;112 }113 .card {114 background: #FFFFFF;115 border-radius: 28px;116 padding: 24px;117 margin-bottom: 24px;118 display: flex; gap: 24px; align-items: center;119 border: 1px solid #ECECEC;120 }121 .product-img {122 width: 270px; height: 270px;123 background: #E0E0E0; border: 1px solid #BDBDBD;124 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;125 border-radius: 16px;126 }127 .card-content {128 flex: 1;129 }130 .title {131 font-size: 32px; color: #111; line-height: 1.25; margin-bottom: 10px;132 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;133 }134 .price {135 font-size: 44px; font-weight: 800; color: #000;136 margin-bottom: 6px;137 }138 .shipping {139 font-size: 28px; color: #666;140 }141 .wish {142 width: 64px; height: 64px; border-radius: 32px; border: 2px solid #DADADA;143 display: flex; align-items: center; justify-content: center; background: #FFF;144 }145 .cart-btn {146 width: 92px; height: 92px; border-radius: 46px; border: 1px solid #E0E0E0;147 background: #FFF; display: flex; align-items: center; justify-content: center;148 }149 150 /* Section note */151 .section-note {152 background: #EFEFEF;153 border-radius: 28px;154 margin: 24px;155 padding: 24px;156 font-size: 30px; color: #6A6A6A;157 }158 .section-note b { color: #2A82FF; }159 160 /* Smaller deal cards */161 .deal-card {162 background: #FFFFFF; border: 1px solid #ECECEC; border-radius: 28px;163 margin: 24px; padding: 24px; display: flex; gap: 24px; align-items: flex-start;164 }165 .deal-img {166 width: 320px; height: 260px; border-radius: 22px;167 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;168 position: relative;169 }170 .img-heart {171 position: absolute; right: -16px; top: -16px;172 width: 72px; height: 72px; border-radius: 36px; background: #FFF; border: 1px solid #E0E0E0;173 display: flex; align-items: center; justify-content: center;174 box-shadow: 0 4px 8px rgba(0,0,0,0.08);175 }176 .deal-content { flex: 1; }177 .deal-title { font-size: 32px; color: #111; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }178 .deal-price {179 font-size: 40px; font-weight: 800; color: #E6452F; display: inline-block; margin-right: 16px;180 }181 .old-price {182 font-size: 32px; color: #999; text-decoration: line-through;183 }184 185 /* Floating cart */186 .fab-cart {187 position: absolute; right: 24px; top: 1380px;188 width: 96px; height: 96px; border-radius: 48px; background: #000; color: #FFF;189 display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 16px rgba(0,0,0,0.25);190 }191 192 /* Gesture bar */193 .gesture {194 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);195 width: 360px; height: 16px; background: #111; border-radius: 12px; opacity: 0.85;196 }197 198 /* SVG base */199 svg { width: 32px; height: 32px; }200</style>201</head>202<body>203<div id="render-target">204 205 <!-- Status bar -->206 <div class="status-bar">207 <div>10:28</div>208 <div class="status-icons">209 <div class="status-dot"></div>210 <div class="status-dot"></div>211 <div class="status-dot"></div>212 <div class="status-dot"></div>213 <div class="status-dot"></div>214 </div>215 </div>216 217 <!-- Top search header -->218 <div class="top-bar">219 <div class="top-row">220 <div class="icon-btn">221 <svg viewBox="0 0 24 24">222 <path d="M15 4 L7 12 L15 20" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>223 </svg>224 </div>225 <div class="icon-btn">226 <svg viewBox="0 0 24 24">227 <path d="M4 6 H20 M4 12 H16 M4 18 H12" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>228 </svg>229 </div>230 <div class="red-dot"></div>231 232 <div class="search-pill">233 <div class="search-text">washing machine</div>234 <div class="pill-icon">235 <svg viewBox="0 0 24 24">236 <rect x="5" y="6" width="14" height="12" rx="3" stroke="#333" fill="none" stroke-width="2"/>237 <circle cx="12" cy="10" r="2" fill="#333"/>238 </svg>239 </div>240 <div class="pill-icon">241 <svg viewBox="0 0 24 24">242 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"/>243 <line x1="16" y1="16" x2="21" y2="21" stroke="#111" stroke-width="2" stroke-linecap="round"/>244 </svg>245 </div>246 </div>247 248 <div class="geo-icon">249 <svg viewBox="0 0 24 24">250 <path d="M12 3 C8 3 5 6 5 9 C5 13 12 21 12 21 C12 21 19 13 19 9 C19 6 16 3 12 3 Z" stroke="#111" fill="none" stroke-width="2"/>251 <circle cx="12" cy="9" r="2" fill="#111"/>252 </svg>253 </div>254 </div>255 256 <div class="chips">257 <div class="round-chip">258 <svg viewBox="0 0 24 24">259 <rect x="4" y="4" width="6" height="6" fill="#111"/>260 <rect x="14" y="4" width="6" height="6" fill="#111"/>261 <rect x="4" y="14" width="6" height="6" fill="#111"/>262 <rect x="14" y="14" width="6" height="6" fill="#111"/>263 </svg>264 </div>265 266 <div class="pill-chip">267 <svg viewBox="0 0 24 24">268 <path d="M4 4 H20 L14 12 V20 H10 V12 L4 4 Z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>269 </svg>270 <span>Filter</span>271 <span class="badge">1</span>272 </div>273 274 <div class="pill-chip">275 <span>Category</span>276 <svg viewBox="0 0 24 24">277 <path d="M6 6 L18 18 M6 18 L18 6" stroke="#666" stroke-width="2" stroke-linecap="round"/>278 </svg>279 </div>280 281 <div class="gray-pill">282 <span>Price & Deals</span>283 <svg viewBox="0 0 24 24">284 <path d="M6 9 L12 15 L18 9" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>285 </svg>286 </div>287 </div>288 </div>289 290 <!-- Product list -->291 <div class="list">292 293 <div class="card">294 <div class="product-img">[IMG: Top-load Washing Machine]</div>295 <div class="card-content">296 <div class="title">Free shipping 380w Power Washer Ca...</div>297 <div class="price">958,75 €</div>298 <div class="shipping">Free Shipping</div>299 </div>300 <div class="wish">301 <svg viewBox="0 0 24 24">302 <path d="M12 21 C12 21 3 14 3 8 C3 5.5 5 4 7 4 C9 4 10.5 5.2 12 6.8 C13.5 5.2 15 4 17 4 C19 4 21 5.5 21 8 C21 14 12 21 12 21 Z" fill="none" stroke="#111" stroke-width="2"/>303 </svg>304 </div>305 <div class="cart-btn">306 <svg viewBox="0 0 24 24">307 <path d="M4 5 H6 L7.5 14 H18 L20 8 H8" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round"/>308 <circle cx="9" cy="18" r="2" fill="#111"/>309 <circle cx="17" cy="18" r="2" fill="#111"/>310 </svg>311 </div>312 </div>313 314 <div class="card">315 <div class="product-img">[IMG: Washing Machine]</div>316 <div class="card-content">317 <div class="title">HOT SELLING Large Capacity Househo...</div>318 <div class="price">958,75 €</div>319 <div class="shipping">Free Shipping</div>320 </div>321 <div class="wish">322 <svg viewBox="0 0 24 24">323 <path d="M12 21 C12 21 3 14 3 8 C3 5.5 5 4 7 4 C9 4 10.5 5.2 12 6.8 C13.5 5.2 15 4 17 4 C19 4 21 5.5 21 8 C21 14 12 21 12 21 Z" fill="none" stroke="#111" stroke-width="2"/>324 </svg>325 </div>326 <div class="cart-btn">327 <svg viewBox="0 0 24 24">328 <path d="M4 5 H6 L7.5 14 H18 L20 8 H8" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round"/>329 <circle cx="9" cy="18" r="2" fill="#111"/>330 <circle cx="17" cy="18" r="2" fill="#111"/>331 </svg>332 </div>333 </div>334 335 <div class="card">336 <div class="product-img">[IMG: Cardboard Box with Washer]</div>337 <div class="card-content">338 <div class="title">FREE SHIPPING 8kg Fully Automatic W...</div>339 <div class="price">958,75 €</div>340 <div class="shipping">Free Shipping</div>341 </div>342 <div class="wish">343 <svg viewBox="0 0 24 24">344 <path d="M12 21 C12 21 3 14 3 8 C3 5.5 5 4 7 4 C9 4 10.5 5.2 12 6.8 C13.5 5.2 15 4 17 4 C19 4 21 5.5 21 8 C21 14 12 21 12 21 Z" fill="none" stroke="#111" stroke-width="2"/>345 </svg>346 </div>347 <div class="cart-btn">348 <svg viewBox="0 0 24 24">349 <path d="M4 5 H6 L7.5 14 H18 L20 8 H8" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round"/>350 <circle cx="9" cy="18" r="2" fill="#111"/>351 <circle cx="17" cy="18" r="2" fill="#111"/>352 </svg>353 </div>354 </div>355 </div>356 357 <!-- Section note -->358 <div class="section-note">359 Result for washing machine in <b>All Categories</b>360 </div>361 362 <!-- Deals -->363 <div class="deal-card">364 <div class="deal-img">365 [IMG: Washing Machine Cleaner Brushes]366 <div class="img-heart">367 <svg viewBox="0 0 24 24">368 <path d="M12 21 C12 21 3 14 3 8 C3 5.5 5 4 7 4 C9 4 10.5 5.2 12 6.8 C13.5 5.2 15 4 17 4 C19 4 21 5.5 21 8 C21 14 12 21 12 21 Z" fill="none" stroke="#111" stroke-width="2"/>369 </svg>370 </div>371 </div>372 <div class="deal-content">373 <div class="deal-title">New Washing Machine Cleaner Brush ...</div>374 <div>375 <span class="deal-price">2,94 €</span>376 <span class="old-price">3,23 €</span>377 </div>378 </div>379 <div class="cart-btn">380 <svg viewBox="0 0 24 24">381 <path d="M4 5 H6 L7.5 14 H18 L20 8 H8" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round"/>382 <circle cx="9" cy="18" r="2" fill="#111"/>383 <circle cx="17" cy="18" r="2" fill="#111"/>384 </svg>385 </div>386 </div>387 388 <div class="fab-cart">389 <svg viewBox="0 0 24 24">390 <path d="M4 5 H6 L7.5 14 H18 L20 8 H8" fill="none" stroke="#FFF" stroke-width="2" stroke-linecap="round"/>391 <circle cx="9" cy="18" r="2" fill="#FFF"/>392 <circle cx="17" cy="18" r="2" fill="#FFF"/>393 </svg>394 </div>395 396 <div class="deal-card">397 <div class="deal-img">[IMG: Oral Irrigator Product]</div>398 <div class="deal-content">399 <div class="deal-title">Oral Irrigators Powerful Water Flosser ...</div>400 <div>401 <span class="deal-price" style="color:#E6452F;">35,05 €</span>402 <span class="old-price">73,02 €</span>403 </div>404 </div>405 <div class="cart-btn">406 <svg viewBox="0 0 24 24">407 <path d="M4 5 H6 L7.5 14 H18 L20 8 H8" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round"/>408 <circle cx="9" cy="18" r="2" fill="#111"/>409 <circle cx="17" cy="18" r="2" fill="#111"/>410 </svg>411 </div>412 </div>413 414 <!-- Gesture bar -->415 <div class="gesture"></div>416</div>417</body>418</html>