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 Search - 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: #ffffff;15 color: #222;16 }17 18 /* Status bar */19 .status-bar {20 height: 90px;21 padding: 0 30px;22 display: flex;23 align-items: center;24 font-weight: 600;25 font-size: 36px;26 color: #111;27 }28 .status-icons {29 margin-left: auto;30 display: flex;31 align-items: center;32 gap: 24px;33 }34 .icon {35 width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;36 }37 38 /* Header with back/button + search */39 .header {40 height: 130px;41 padding: 0 24px;42 display: flex;43 align-items: center;44 gap: 20px;45 }46 .round-btn {47 width: 70px; height: 70px; border: 2px solid #000; border-radius: 35px; display: flex; align-items: center; justify-content: center;48 }49 .search-container {50 flex: 1;51 height: 100px;52 background: #F3F3F3;53 border: 2px solid #000;54 border-radius: 50px;55 display: flex;56 align-items: center;57 padding: 0 28px;58 gap: 20px;59 }60 .search-text {61 flex: 1;62 font-size: 38px;63 color: #333;64 }65 .pill-icon {66 width: 72px; height: 72px; border: 2px solid #000; background: #fff; border-radius: 36px; display: flex; align-items: center; justify-content: center;67 }68 .location-pill {69 width: 72px; height: 72px; border: 2px solid #000; border-radius: 36px; display: flex; align-items: center; justify-content: center;70 }71 72 /* Filter chips */73 .filters {74 padding: 10px 20px 18px 20px;75 display: flex;76 gap: 18px;77 overflow: hidden;78 }79 .chip {80 display: flex;81 align-items: center;82 gap: 16px;83 padding: 18px 26px;84 border: 2px solid #222;85 border-radius: 40px;86 background: #fff;87 font-size: 32px;88 white-space: nowrap;89 }90 .chip .badge {91 min-width: 36px; height: 36px; padding: 0 8px;92 background: #222; color: #fff; border-radius: 18px;93 display: inline-flex; justify-content: center; align-items: center; font-size: 24px;94 }95 96 /* Content background */97 .content {98 background: #F5F5F7;99 height: calc(2400px - 90px - 130px - 110px);100 overflow: auto;101 padding: 20px 24px 140px 24px;102 }103 104 /* Cards */105 .card {106 background: #fff;107 border-radius: 36px;108 padding: 24px;109 display: flex;110 gap: 26px;111 margin-bottom: 26px;112 align-items: flex-start;113 }114 .card .img {115 width: 300px;116 height: 260px;117 background: #E0E0E0;118 border: 1px solid #BDBDBD;119 border-radius: 24px;120 display: flex; align-items: center; justify-content: center;121 color: #757575; font-size: 30px; text-align: center; padding: 10px;122 position: relative;123 overflow: hidden;124 }125 .play-badge {126 position: absolute;127 left: 14px;128 bottom: 14px;129 width: 48px; height: 48px;130 background: rgba(255,255,255,0.9);131 border: 2px solid #ddd;132 border-radius: 24px;133 display: flex; align-items: center; justify-content: center;134 }135 .details {136 flex: 1;137 padding-top: 2px;138 }139 .title {140 font-size: 34px; line-height: 42px; color: #222; margin-bottom: 10px;141 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;142 }143 .price-row {144 display: flex; align-items: baseline; gap: 16px; margin: 8px 0 6px 0;145 }146 .price {147 font-weight: 800; font-size: 48px; color: #222;148 }149 .price.red { color: #E2513E; }150 .old-price {151 font-size: 34px; color: #9E9E9E; text-decoration: line-through;152 }153 .shipping {154 font-size: 30px; color: #606060; margin-top: 4px;155 }156 .meta {157 display: flex; align-items: center; gap: 20px; margin-top: 12px; color: #333; font-size: 30px;158 }159 .heart {160 width: 56px; height: 56px; border: 2px solid #000; border-radius: 28px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px;161 }162 .cart-btn {163 width: 90px; height: 70px; border: 2px solid #D0D0D0; border-radius: 35px;164 display: flex; align-items: center; justify-content: center;165 }166 .card-right {167 display: flex; flex-direction: column; align-items: flex-end; gap: 18px;168 }169 170 /* Floating cart */171 .floating-cart {172 position: absolute;173 right: 34px;174 bottom: 180px;175 width: 110px; height: 110px;176 background: #111; color: #fff; border-radius: 55px;177 display: flex; align-items: center; justify-content: center;178 box-shadow: 0 8px 20px rgba(0,0,0,0.2);179 }180 181 /* Simple SVG icons */182 svg { display: block; }183 184</style>185</head>186<body>187<div id="render-target">188 189 <!-- Status bar -->190 <div class="status-bar">191 <div>10:26</div>192 <div class="status-icons">193 <div class="icon">194 <svg width="36" height="36" viewBox="0 0 24 24">195 <rect x="3" y="11" width="4" height="10" fill="#9E9E9E"></rect>196 <rect x="10" y="7" width="4" height="14" fill="#9E9E9E"></rect>197 <rect x="17" y="3" width="4" height="18" fill="#9E9E9E"></rect>198 </svg>199 </div>200 <div class="icon">201 <svg width="36" height="36" viewBox="0 0 24 24">202 <circle cx="11" cy="11" r="7" stroke="#9E9E9E" stroke-width="2" fill="none"></circle>203 <line x1="16" y1="16" x2="21" y2="21" stroke="#9E9E9E" stroke-width="2"></line>204 </svg>205 </div>206 <div class="icon">207 <svg width="36" height="36" viewBox="0 0 24 24">208 <path d="M3 12h18" stroke="#9E9E9E" stroke-width="2" />209 <path d="M6 5h12" stroke="#9E9E9E" stroke-width="2" />210 <path d="M6 19h12" stroke="#9E9E9E" stroke-width="2" />211 </svg>212 </div>213 <div class="icon">214 <svg width="36" height="36" viewBox="0 0 24 24">215 <path d="M12 5l6 6-6 6-6-6 6-6z" fill="#9E9E9E"></path>216 </svg>217 </div>218 <div class="icon">219 <svg width="36" height="36" viewBox="0 0 24 24">220 <path d="M6 8h12v10H6z" stroke="#9E9E9E" stroke-width="2" fill="none"></path>221 <path d="M9 8V6h6v2" stroke="#9E9E9E" stroke-width="2"></path>222 </svg>223 </div>224 <div class="icon">225 <svg width="36" height="36" viewBox="0 0 24 24">226 <path d="M2 7h20v10H2z" stroke="#9E9E9E" stroke-width="2" fill="none"></path>227 <circle cx="17" cy="12" r="3" fill="#9E9E9E"></circle>228 </svg>229 </div>230 </div>231 </div>232 233 <!-- Header with back, hamburger and search -->234 <div class="header">235 <div class="round-btn" title="Back">236 <svg width="36" height="36" viewBox="0 0 24 24">237 <path d="M15 6l-6 6 6 6" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>238 </svg>239 </div>240 <div class="round-btn" title="Menu">241 <svg width="36" height="36" viewBox="0 0 24 24">242 <path d="M4 7h16M4 12h16M4 17h16" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"></path>243 </svg>244 </div>245 246 <div class="search-container">247 <div class="search-text">washing machine</div>248 <div class="pill-icon" title="Camera">249 <svg width="32" height="32" viewBox="0 0 24 24">250 <rect x="4" y="6" width="16" height="12" rx="2" stroke="#000" stroke-width="2" fill="none"></rect>251 <circle cx="12" cy="12" r="4" stroke="#000" stroke-width="2" fill="none"></circle>252 <path d="M9 6l2-2h2l2 2" stroke="#000" stroke-width="2" fill="none"></path>253 </svg>254 </div>255 <div class="pill-icon" title="Search">256 <svg width="32" height="32" viewBox="0 0 24 24">257 <circle cx="11" cy="11" r="6" stroke="#000" stroke-width="2" fill="none"></circle>258 <line x1="16" y1="16" x2="21" y2="21" stroke="#000" stroke-width="2"></line>259 </svg>260 </div>261 </div>262 263 <div class="location-pill" title="Location">264 <svg width="28" height="28" viewBox="0 0 24 24">265 <path d="M12 21s7-7 7-11a7 7 0 10-14 0c0 4 7 11 7 11z" stroke="#000" stroke-width="2" fill="none"></path>266 <circle cx="12" cy="10" r="2.5" fill="#000"></circle>267 </svg>268 </div>269 </div>270 271 <!-- Filters -->272 <div class="filters">273 <div class="chip">274 <svg width="30" height="30" viewBox="0 0 24 24">275 <rect x="4" y="4" width="6" height="6" stroke="#000" fill="none" stroke-width="2"></rect>276 <rect x="14" y="4" width="6" height="6" stroke="#000" fill="none" stroke-width="2"></rect>277 <rect x="4" y="14" width="6" height="6" stroke="#000" fill="none" stroke-width="2"></rect>278 <rect x="14" y="14" width="6" height="6" stroke="#000" fill="none" stroke-width="2"></rect>279 </svg>280 </div>281 <div class="chip">282 <svg width="30" height="30" viewBox="0 0 24 24">283 <path d="M4 6h16l-6 8v4l-4 0v-4L4 6z" stroke="#000" stroke-width="2" fill="none"></path>284 </svg>285 <span>Filter</span>286 <span class="badge">1</span>287 </div>288 <div class="chip">Category <span style="font-weight:700; margin-left:10px;">×</span></div>289 <div class="chip">Color ▼</div>290 <div class="chip">Price ▼</div>291 </div>292 293 <!-- Content list -->294 <div class="content">295 296 <!-- Card 1 -->297 <div class="card">298 <div class="img">[IMG: Top-load Washing Machine]</div>299 <div class="details">300 <div class="heart">301 <svg width="26" height="26" viewBox="0 0 24 24">302 <path d="M12 20s-7-4.6-7-10a4.5 4.5 0 018 0 4.5 4.5 0 018 0c0 5.4-7 10-7 10z" stroke="#000" stroke-width="2" fill="none"></path>303 </svg>304 </div>305 <div class="title">HOT SELLING Large Capacity Household...</div>306 <div class="price-row">307 <div class="price">958,75 €</div>308 </div>309 <div class="shipping">Free Shipping</div>310 </div>311 <div class="card-right">312 <div class="cart-btn">313 <svg width="34" height="34" viewBox="0 0 24 24">314 <path d="M3 6h3l2 9h9l2-7H6" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"></path>315 <circle cx="9" cy="19" r="1.8" fill="#555"></circle>316 <circle cx="17" cy="19" r="1.8" fill="#555"></circle>317 </svg>318 </div>319 </div>320 </div>321 322 <!-- Card 2 -->323 <div class="card">324 <div class="img">[IMG: LG Drum Washing Machine Parts]</div>325 <div class="details">326 <div class="heart">327 <svg width="26" height="26" viewBox="0 0 24 24">328 <path d="M12 20s-7-4.6-7-10a4.5 4.5 0 018 0 4.5 4.5 0 018 0c0 5.4-7 10-7 10z" stroke="#000" stroke-width="2" fill="none"></path>329 </svg>330 </div>331 <div class="title">new good for LG Drum Washing Machi...</div>332 <div class="price-row">333 <div class="price">10,78 €</div>334 </div>335 <div class="shipping">Free Shipping</div>336 </div>337 <div class="card-right">338 <div class="cart-btn">339 <svg width="34" height="34" viewBox="0 0 24 24">340 <path d="M3 6h3l2 9h9l2-7H6" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"></path>341 <circle cx="9" cy="19" r="1.8" fill="#555"></circle>342 <circle cx="17" cy="19" r="1.8" fill="#555"></circle>343 </svg>344 </div>345 </div>346 </div>347 348 <!-- Card 3 -->349 <div class="card">350 <div class="img">[IMG: Mini Ultrasonic Washing Gadget]351 <div class="play-badge">352 <svg width="22" height="22" viewBox="0 0 24 24">353 <path d="M9 7l8 5-8 5V7z" fill="#777"></path>354 </svg>355 </div>356 </div>357 <div class="details">358 <div class="heart">359 <svg width="26" height="26" viewBox="0 0 24 24">360 <path d="M12 20s-7-4.6-7-10a4.5 4.5 0 018 0 4.5 4.5 0 018 0c0 5.4-7 10-7 10z" stroke="#000" stroke-width="2" fill="none"></path>361 </svg>362 </div>363 <div class="title">Mini Washing Machines Ultrasonic Was...</div>364 <div class="price-row">365 <div class="price red">10,31 €</div>366 <div class="old-price">12,58 €</div>367 </div>368 <div class="shipping">Free Shipping</div>369 <div class="meta">370 <svg width="28" height="28" viewBox="0 0 24 24">371 <path d="M12 17.3l-6.7 3.5 1.3-7.6L1 8.9l7.7-1.1L12 1.9l3.3 5.9 7.7 1.1-5.6 4.3 1.3 7.6z" fill="#000"></path>372 </svg>373 <span>5.0</span>374 <span>1 Sold</span>375 </div>376 </div>377 <div class="card-right">378 <div class="cart-btn">379 <svg width="34" height="34" viewBox="0 0 24 24">380 <path d="M3 6h3l2 9h9l2-7H6" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"></path>381 <circle cx="9" cy="19" r="1.8" fill="#555"></circle>382 <circle cx="17" cy="19" r="1.8" fill="#555"></circle>383 </svg>384 </div>385 </div>386 </div>387 388 <!-- Card 4 -->389 <div class="card">390 <div class="img">[IMG: Mini Portable Washing Cube]</div>391 <div class="details">392 <div class="title">Multi-Function Mini Portable Washing ...</div>393 <div class="price-row">394 <div class="price red">41,07 €</div>395 <div class="old-price">48,89 €</div>396 </div>397 <div class="shipping">Free Shipping</div>398 </div>399 <div class="card-right">400 <div class="cart-btn">401 <svg width="34" height="34" viewBox="0 0 24 24">402 <path d="M3 6h3l2 9h9l2-7H6" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"></path>403 <circle cx="9" cy="19" r="1.8" fill="#555"></circle>404 <circle cx="17" cy="19" r="1.8" fill="#555"></circle>405 </svg>406 </div>407 </div>408 </div>409 410 <!-- Card 5 -->411 <div class="card">412 <div class="img">[IMG: Compact Washer with Blue Lid]</div>413 <div class="details">414 <div class="heart">415 <svg width="26" height="26" viewBox="0 0 24 24">416 <path d="M12 20s-7-4.6-7-10a4.5 4.5 0 018 0 4.5 4.5 0 018 0c0 5.4-7 10-7 10z" stroke="#000" stroke-width="2" fill="none"></path>417 </svg>418 </div>419 <div class="title">Mini Washing Machines Mtifunctional ...</div>420 <div class="price-row">421 <div class="price red">174,29 €</div>422 <div class="old-price">193,65 €</div>423 </div>424 <div class="shipping">Free Shipping</div>425 </div>426 <div class="card-right">427 <div class="cart-btn">428 <svg width="34" height="34" viewBox="0 0 24 24">429 <path d="M3 6h3l2 9h9l2-7H6" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"></path>430 <circle cx="9" cy="19" r="1.8" fill="#555"></circle>431 <circle cx="17" cy="19" r="1.8" fill="#555"></circle>432 </svg>433 </div>434 </div>435 </div>436 437 </div>438 439 <!-- Floating cart -->440 <div class="floating-cart">441 <svg width="40" height="40" viewBox="0 0 24 24">442 <path d="M3 6h3l2 9h9l2-7H6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>443 <circle cx="9" cy="19" r="2" fill="#fff"></circle>444 <circle cx="17" cy="19" r="2" fill="#fff"></circle>445 </svg>446 </div>447 448</div>449</body>450</html>