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 - Mens Walking Shoes</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 font-family: Arial, Helvetica, sans-serif;16 color: #222;17 }18 19 /* Top status bar */20 .status-bar {21 height: 60px;22 display: flex;23 align-items: center;24 padding: 0 28px;25 font-size: 30px;26 color: #444;27 }28 .status-icons {29 margin-left: auto;30 display: flex;31 align-items: center;32 gap: 18px;33 }34 .icon-rect { width: 30px; height: 20px; background: #9E9E9E; border-radius: 4px; }35 .icon-signal { width: 28px; height: 22px; border: 2px solid #9E9E9E; border-radius: 3px; }36 .icon-battery { width: 40px; height: 20px; border: 2px solid #9E9E9E; border-radius: 3px; position: relative; }37 .icon-battery::after { content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 8px; background: #9E9E9E; border-radius: 1px; }38 39 /* Search area */40 .search-area {41 display: flex;42 align-items: center;43 padding: 18px 26px;44 }45 .back-btn {46 width: 60px;47 height: 60px;48 display: flex;49 align-items: center;50 justify-content: center;51 margin-right: 18px;52 }53 .search-pill {54 border: 3px solid #222;55 border-radius: 70px;56 height: 110px;57 flex: 1;58 display: flex;59 align-items: center;60 padding: 0 32px;61 gap: 16px;62 }63 .search-text {64 font-size: 40px;65 flex: 1;66 color: #333;67 }68 .circle-icon {69 width: 64px;70 height: 64px;71 border: 2px solid #C7C7C7;72 border-radius: 32px;73 display: flex;74 align-items: center;75 justify-content: center;76 }77 .chip-row {78 padding: 12px 22px;79 display: flex;80 gap: 16px;81 flex-wrap: nowrap;82 }83 .chip {84 padding: 18px 28px;85 background: #efefef;86 color: #555;87 border-radius: 36px;88 font-size: 32px;89 border: 1px solid #e0e0e0;90 }91 92 /* Free shipping banner */93 .free-shipping {94 margin: 12px 0;95 background: #f3e7d8;96 display: flex;97 justify-content: space-between;98 align-items: center;99 padding: 18px 26px;100 font-size: 32px;101 }102 .free-left {103 display: flex;104 align-items: center;105 gap: 14px;106 color: #2e7d32;107 font-weight: bold;108 }109 .timer {110 display: flex;111 align-items: center;112 gap: 12px;113 color: #6a6a6a;114 }115 .timer .boxes {116 display: flex;117 align-items: center;118 gap: 8px;119 }120 .timer .box {121 background: #030303;122 color: #fff;123 padding: 4px 10px;124 border-radius: 8px;125 font-weight: bold;126 font-size: 30px;127 min-width: 60px;128 text-align: center;129 }130 131 /* Secondary chips */132 .chip-row.secondary .chip {133 background: #fff;134 border-color: #cfcfcf;135 }136 .chip-row.secondary .chip.highlight {137 background: #f9f9f9;138 border-color: #bdbdbd;139 }140 141 /* Product grid */142 .product-grid {143 display: grid;144 grid-template-columns: repeat(2, 1fr);145 gap: 28px;146 padding: 20px 24px 160px 24px;147 }148 .product-card {149 background: #fff;150 border-radius: 10px;151 overflow: hidden;152 }153 .product-image {154 width: 100%;155 height: 400px;156 background: #E0E0E0;157 border: 1px solid #BDBDBD;158 display: flex;159 align-items: center;160 justify-content: center;161 color: #757575;162 font-size: 32px;163 }164 .ribbon {165 position: absolute;166 left: 18px;167 bottom: 18px;168 background: #000;169 color: #fff;170 font-size: 26px;171 padding: 8px 12px;172 border-radius: 6px;173 }174 .ribbon.red {175 right: 18px;176 left: auto;177 background: #d32f2f;178 }179 .card-body {180 padding: 16px 18px 20px 18px;181 }182 .title {183 font-size: 34px;184 line-height: 1.2;185 color: #2a2a2a;186 margin-bottom: 8px;187 }188 .subtitle {189 font-size: 30px;190 color: #ff6e2b;191 margin-bottom: 10px;192 }193 .rating {194 display: flex;195 align-items: center;196 gap: 8px;197 margin-bottom: 10px;198 }199 .rating-count {200 color: #666;201 font-size: 28px;202 margin-left: 8px;203 }204 .price-row {205 display: flex;206 align-items: center;207 justify-content: space-between;208 margin-top: 6px;209 }210 .price {211 font-size: 38px;212 color: #ff6e2b;213 font-weight: bold;214 }215 .sold {216 font-size: 28px;217 color: #777;218 margin-left: 10px;219 }220 .price-left {221 display: flex;222 align-items: baseline;223 gap: 10px;224 }225 .cart-circle {226 width: 66px; height: 66px;227 border-radius: 33px;228 border: 2px solid #cfcfcf;229 display: flex; align-items: center; justify-content: center;230 }231 232 /* Floating cart free shipping badge */233 .floating-cart {234 position: absolute;235 top: 1180px;236 right: 28px;237 display: flex;238 flex-direction: column;239 align-items: center;240 gap: 6px;241 }242 .floating-cart .circle {243 width: 120px; height: 120px;244 background: #e8f5e9;245 border: 6px solid #43a047;246 border-radius: 60px;247 display: flex; align-items: center; justify-content: center;248 color: #2e7d32; font-weight: bold; font-size: 34px;249 }250 .floating-cart .tag {251 background: #43a047;252 color: #fff;253 padding: 6px 14px;254 border-radius: 18px;255 font-size: 26px;256 }257 258 /* Bottom home indicator */259 .home-indicator {260 position: absolute;261 left: 240px;262 bottom: 28px;263 width: 600px;264 height: 14px;265 background: #000;266 border-radius: 8px;267 opacity: 0.9;268 }269 270 /* Simple SVG icon styles */271 svg { display: block; }272 .star { width: 30px; height: 30px; fill: #000; }273 .star.filled { fill: #000; }274 .star.half { fill: none; stroke: #000; stroke-width: 2; }275</style>276</head>277<body>278<div id="render-target">279 280 <!-- Status Bar -->281 <div class="status-bar">282 <div>1:14</div>283 <div class="status-icons">284 <div class="icon-rect"></div>285 <div class="icon-signal"></div>286 <div class="icon-rect" style="width:22px;height:22px;border-radius:50%;"></div>287 <div class="icon-battery"></div>288 </div>289 </div>290 291 <!-- Search -->292 <div class="search-area">293 <div class="back-btn">294 <svg width="40" height="40" viewBox="0 0 24 24">295 <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>296 </svg>297 </div>298 <div class="search-pill">299 <div class="search-text">mens walking shoes</div>300 <div class="circle-icon">301 <svg width="26" height="26" viewBox="0 0 24 24">302 <path d="M18 6l-12 12M6 6l12 12" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>303 </svg>304 </div>305 <div class="circle-icon">306 <svg width="28" height="28" viewBox="0 0 24 24">307 <circle cx="10" cy="10" r="4" stroke="#777" stroke-width="2" fill="none"/>308 <rect x="4" y="4" width="16" height="14" rx="3" stroke="#777" stroke-width="2" fill="none"/>309 <path d="M21 20l-4-4" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>310 </svg>311 </div>312 </div>313 </div>314 315 <!-- Filters row -->316 <div class="chip-row">317 <div class="chip">318 <svg width="28" height="28" viewBox="0 0 24 24" style="vertical-align: middle; margin-right: 10px;">319 <path d="M4 5h16M7 12h10M9 19h6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>320 </svg>321 Filters322 </div>323 <div class="chip">Sort by ▾</div>324 <div class="chip">Category ▾</div>325 <div class="chip">Size ▾</div>326 <div class="chip">Color ▾</div>327 </div>328 329 <!-- Free shipping banner -->330 <div class="free-shipping">331 <div class="free-left">332 <svg width="28" height="28" viewBox="0 0 24 24">333 <path d="M20 6l-11 11-5-5" stroke="#2e7d32" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>334 </svg>335 <div>Free shipping for you</div>336 </div>337 <div class="timer">338 <div>Time left today</div>339 <div class="boxes">340 <div class="box">00</div>341 <div style="font-weight:bold;">:</div>342 <div class="box">15</div>343 <div style="font-weight:bold;">:</div>344 <div class="box">03</div>345 </div>346 </div>347 </div>348 349 <!-- Secondary chips -->350 <div class="chip-row secondary">351 <div class="chip">352 <svg width="28" height="28" viewBox="0 0 24 24" style="margin-right:10px;">353 <path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z" fill="#000"/>354 </svg>355 Deals356 </div>357 <div class="chip">$ Under $19</div>358 <div class="chip">★★★★☆ & up</div>359 <div class="chip highlight">60% off or more</div>360 </div>361 362 <!-- Product Grid -->363 <div class="product-grid">364 365 <!-- Card 1 -->366 <div class="product-card">367 <div style="position: relative;">368 <div class="product-image">[IMG: White running shoes]</div>369 </div>370 <div class="card-body">371 <div class="title">Men's Knit Breathable Running S...</div>372 <div class="subtitle">Almost sold out</div>373 <div class="rating">374 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>375 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>376 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>377 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>378 <svg class="star half" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>379 <div class="rating-count">(4,348)</div>380 </div>381 <div class="price-row">382 <div class="price-left">383 <div class="price">$16.79</div>384 <div class="sold">8.4K+ sold</div>385 </div>386 <div class="cart-circle">387 <svg width="26" height="26" viewBox="0 0 24 24">388 <path d="M3 4h2l2 12h10l2-8H7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>389 </svg>390 </div>391 </div>392 </div>393 </div>394 395 <!-- Card 2 -->396 <div class="product-card">397 <div style="position: relative;">398 <div class="product-image">[IMG: Gray knit running shoe]</div>399 <div class="ribbon">Lightning Deal</div>400 <div class="ribbon red">Ends in 00:15:03</div>401 </div>402 <div class="card-body">403 <div class="title">Lightweight Slip-on Men's Runnin...</div>404 <div class="subtitle">Only 3 Left • just bought</div>405 <div class="rating">406 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>407 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>408 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>409 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>410 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>411 <div class="rating-count">(4,668)</div>412 </div>413 <div class="price-row">414 <div class="price-left">415 <div class="price">$10.97</div>416 <div class="sold">2.2K+ sold</div>417 </div>418 <div class="cart-circle">419 <svg width="26" height="26" viewBox="0 0 24 24">420 <path d="M3 4h2l2 12h10l2-8H7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>421 </svg>422 </div>423 </div>424 </div>425 </div>426 427 <!-- Card 3 -->428 <div class="product-card">429 <div style="position: relative;">430 <div class="product-image">[IMG: Black slip-on hiking shoe]</div>431 <div class="ribbon" style="background:#111;">Black Friday</div>432 <div class="ribbon red" style="right:18px;left:auto;">69% off discount</div>433 </div>434 <div class="card-body">435 <div class="title">Men's Slip On Durable Hiking Sh...</div>436 <div class="subtitle">Almost sold out • just bought</div>437 <div class="rating">438 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>439 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>440 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>441 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>442 <svg class="star half" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>443 <div class="rating-count">(300)</div>444 </div>445 <div class="price-row">446 <div class="price-left">447 <div class="price">$15.38</div>448 <div class="sold">1K+ sold</div>449 </div>450 <div class="cart-circle">451 <svg width="26" height="26" viewBox="0 0 24 24">452 <path d="M3 4h2l2 12h10l2-8H7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>453 </svg>454 </div>455 </div>456 </div>457 </div>458 459 <!-- Card 4 -->460 <div class="product-card">461 <div style="position: relative;">462 <div class="product-image">[IMG: Blue ankle boots, hand-stitched]</div>463 <div class="ribbon">Lightning Deal</div>464 <div class="ribbon red">Ends in 00:15:03</div>465 </div>466 <div class="card-body">467 <div class="title">Men's Ankle Boots, Hand-stitched...</div>468 <div class="subtitle">Only 4 Left</div>469 <div class="rating">470 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>471 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>472 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>473 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>474 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>475 <div class="rating-count">(2,268)</div>476 </div>477 <div class="price-row">478 <div class="price-left">479 <div class="price">$23.62</div>480 <div class="sold">6K+ sold</div>481 </div>482 <div class="cart-circle">483 <svg width="26" height="26" viewBox="0 0 24 24">484 <path d="M3 4h2l2 12h10l2-8H7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>485 </svg>486 </div>487 </div>488 </div>489 </div>490 491 </div>492 493 <!-- Floating Cart Free Shipping -->494 <div class="floating-cart">495 <div class="circle">496 <svg width="40" height="40" viewBox="0 0 24 24">497 <path d="M3 4h2l2 12h10l2-8H7" stroke="#2e7d32" stroke-width="2" fill="none" stroke-linecap="round"/>498 </svg>499 <span style="margin-left:8px;">Cart</span>500 </div>501 <div class="tag">Free Shipping</div>502 </div>503 504 <!-- Bottom home indicator -->505 <div class="home-indicator"></div>506 507</div>508</body>509</html>