GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Formal Shoes Listing</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 font-family: Arial, Helvetica, sans-serif;15 color: #111;16 box-sizing: border-box;17 }18 19 /* Top status bar */20 .status-bar {21 height: 90px;22 padding: 0 32px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 font-size: 36px;27 color: #222;28 }29 .status-right svg { width: 32px; height: 32px; margin-left: 16px; }30 31 /* Search header */32 .header {33 display: flex;34 align-items: center;35 padding: 10px 28px 0 28px;36 }37 .back-btn {38 width: 68px;39 height: 68px;40 border-radius: 34px;41 display: flex;42 align-items: center;43 justify-content: center;44 margin-right: 18px;45 }46 .back-btn svg { width: 42px; height: 42px; }47 .search-bar {48 flex: 1;49 height: 100px;50 border: 3px solid #000;51 border-radius: 50px;52 display: flex;53 align-items: center;54 padding: 0 24px;55 box-sizing: border-box;56 }57 .search-text {58 font-size: 40px;59 color: #222;60 flex: 1;61 }62 .search-actions {63 display: flex;64 align-items: center;65 gap: 18px;66 }67 .circle-icon {68 width: 68px;69 height: 68px;70 border: 2px solid #999;71 border-radius: 34px;72 display: flex;73 align-items: center;74 justify-content: center;75 }76 .circle-icon svg { width: 34px; height: 34px; }77 78 /* Chips */79 .chip-row {80 padding: 18px 28px 0 28px;81 display: flex;82 flex-wrap: wrap;83 gap: 16px;84 }85 .chip {86 background: #EFEFEF;87 color: #333;88 border-radius: 34px;89 padding: 18px 26px;90 font-size: 32px;91 display: inline-flex;92 align-items: center;93 gap: 12px;94 border: 1px solid #DDDDDD;95 }96 .chip svg { width: 32px; height: 32px; }97 98 /* Promo banner */99 .promo {100 margin: 22px 0 0 0;101 padding: 24px 28px;102 background: #FFEBD9;103 display: flex;104 align-items: center;105 gap: 28px;106 font-size: 34px;107 }108 .promo-item {109 display: inline-flex;110 align-items: center;111 color: #1A8E2E;112 gap: 12px;113 white-space: nowrap;114 }115 .promo-divider {116 width: 2px;117 height: 36px;118 background: #E0C8B4;119 }120 .promo svg { width: 32px; height: 32px; }121 122 /* Product grid */123 .product-grid {124 padding: 26px 30px 120px 30px;125 display: grid;126 grid-template-columns: repeat(2, 1fr);127 grid-gap: 30px;128 }129 .card {130 background: #fff;131 border-radius: 8px;132 }133 .image {134 position: relative;135 width: 100%;136 height: 420px;137 background: #E0E0E0;138 border: 1px solid #BDBDBD;139 display: flex;140 align-items: center;141 justify-content: center;142 color: #757575;143 font-size: 34px;144 }145 146 /* Lightning Deal banner */147 .deal-banner {148 position: absolute;149 bottom: 0;150 left: 0;151 right: 0;152 height: 64px;153 display: flex;154 overflow: hidden;155 border-top-left-radius: 4px;156 border-top-right-radius: 4px;157 }158 .deal-left {159 background: #0B0B0B;160 color: #fff;161 width: 48%;162 display: flex;163 align-items: center;164 gap: 10px;165 padding: 0 16px;166 font-size: 30px;167 }168 .deal-right {169 background: #E11919;170 color: #fff;171 flex: 1;172 display: flex;173 align-items: center;174 justify-content: center;175 font-weight: bold;176 font-size: 30px;177 }178 .card-content {179 padding: 14px 10px 16px 10px;180 }181 .title {182 font-size: 32px;183 line-height: 40px;184 color: #111;185 margin-bottom: 8px;186 }187 .stock-row {188 font-size: 32px;189 margin-bottom: 10px;190 }191 .stock-row .low { color: #FF7A00; }192 .stock-row .install { color: #6F6F6F; margin-left: 10px; }193 .rating {194 font-size: 34px;195 color: #000;196 margin-bottom: 12px;197 }198 .price-row {199 display: flex;200 align-items: center;201 justify-content: space-between;202 font-size: 36px;203 }204 .price-left {205 display: flex;206 align-items: center;207 gap: 12px;208 }209 .price {210 color: #FF7A00;211 font-weight: bold;212 }213 .sold {214 color: #777;215 font-size: 32px;216 }217 .cart-btn {218 width: 94px;219 height: 94px;220 border-radius: 47px;221 border: 3px solid #222;222 display: flex;223 align-items: center;224 justify-content: center;225 }226 .cart-btn svg { width: 46px; height: 46px; }227 228 /* Floating cart badge */229 .floating-cart {230 position: absolute;231 right: 42px;232 top: 1320px;233 width: 160px;234 height: 160px;235 border-radius: 80px;236 background: #23C323;237 color: #fff;238 box-shadow: 0 8px 16px rgba(0,0,0,0.15);239 display: flex;240 align-items: center;241 justify-content: center;242 flex-direction: column;243 border: 8px solid #fff;244 text-align: center;245 }246 .floating-cart .label {247 font-size: 36px;248 font-weight: bold;249 margin-top: 6px;250 }251 .floating-cart .sub {252 background: #09B009;253 font-size: 28px;254 padding: 6px 12px;255 border-radius: 20px;256 margin-top: 6px;257 }258 .floating-cart svg { width: 44px; height: 44px; }259 260 /* Bottom gesture bar */261 .gesture {262 position: absolute;263 bottom: 24px;264 left: 50%;265 transform: translateX(-50%);266 width: 300px;267 height: 14px;268 background: #DADADA;269 border-radius: 7px;270 }271</style>272</head>273<body>274<div id="render-target">275 276 <!-- Status bar -->277 <div class="status-bar">278 <div>8:54</div>279 <div class="status-right">280 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#666" stroke-width="2"/></svg>281 <svg viewBox="0 0 24 24"><path d="M3 12h18" stroke="#666" stroke-width="2"/></svg>282 <svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" fill="none" stroke="#666" stroke-width="2"/></svg>283 <svg viewBox="0 0 24 24"><path d="M3 12l9 9 9-9-9-9-9 9z" fill="none" stroke="#666" stroke-width="2"/></svg>284 <span style="font-size:32px; margin-left:12px;">96%</span>285 </div>286 </div>287 288 <!-- Header with search -->289 <div class="header">290 <div class="back-btn">291 <svg viewBox="0 0 24 24">292 <path d="M15 6l-6 6 6 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>293 </svg>294 </div>295 <div class="search-bar">296 <div class="search-text">42-size formal shoes</div>297 <div class="search-actions">298 <div class="circle-icon">299 <svg viewBox="0 0 24 24">300 <path d="M5 5l14 14M19 5L5 19" stroke="#666" stroke-width="2" stroke-linecap="round"/>301 </svg>302 </div>303 <div class="circle-icon">304 <svg viewBox="0 0 24 24">305 <circle cx="10" cy="10" r="5" fill="none" stroke="#333" stroke-width="2"/>306 <line x1="15" y1="15" x2="21" y2="21" stroke="#333" stroke-width="2"/>307 </svg>308 </div>309 </div>310 </div>311 </div>312 313 <!-- First chip row -->314 <div class="chip-row">315 <div class="chip">316 <svg viewBox="0 0 24 24"><path d="M3 21h18M6 21V3h4v18M14 21V8h4v13" stroke="#666" stroke-width="2"/></svg>317 <span>Filters</span>318 </div>319 <div class="chip">320 <span>Sort by</span>321 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" stroke="#666" stroke-width="2" fill="none"/></svg>322 </div>323 <div class="chip">324 <span>Category</span>325 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" stroke="#666" stroke-width="2" fill="none"/></svg>326 </div>327 <div class="chip">328 <span>Size</span>329 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" stroke="#666" stroke-width="2" fill="none"/></svg>330 </div>331 <div class="chip">332 <span>Color</span>333 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" stroke="#666" stroke-width="2" fill="none"/></svg>334 </div>335 </div>336 337 <!-- Promo banner -->338 <div class="promo">339 <div class="promo-item">340 <svg viewBox="0 0 24 24"><path d="M9 21l6-9H9l6-9" fill="none" stroke="#1A8E2E" stroke-width="2"/></svg>341 <span>Free shipping</span>342 </div>343 <div class="promo-divider"></div>344 <div class="promo-item">345 <svg viewBox="0 0 24 24"><path d="M9 21l6-9H9l6-9" fill="none" stroke="#1A8E2E" stroke-width="2"/></svg>346 <span>Price adjustment within 30 days</span>347 </div>348 </div>349 350 <!-- Second chip row -->351 <div class="chip-row">352 <div class="chip">353 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4 2.5 7-7-4.5-7 4.5 2.5-7L2 9h7z" fill="#333"/></svg>354 <span>Deals</span>355 </div>356 <div class="chip">Under $26</div>357 <div class="chip">★★★★☆ & up</div>358 <div class="chip">60% off or more</div>359 </div>360 361 <!-- Product grid -->362 <div class="product-grid">363 364 <!-- Card 1 -->365 <div class="card">366 <div class="image">[IMG: Men's premium leather formal shoes]367 <div class="deal-banner">368 <div class="deal-left">369 <svg viewBox="0 0 24 24"><path d="M12 2l3 7H8l4 13-1-8h6z" fill="#fff"/></svg>370 <span>Lightning Deal</span>371 </div>372 <div class="deal-right">Ends in 04:35:53</div>373 </div>374 </div>375 <div class="card-content">376 <div class="title">LAORENTOU Men's Premium Leather Dress Shoes...</div>377 <div class="stock-row"><span class="low">Only 16 Left</span> <span class="install">$15.39/wk x 4</span></div>378 <div class="rating">★★★★★ <span style="color:#333;">(388)</span></div>379 <div class="price-row">380 <div class="price-left">381 <svg viewBox="0 0 24 24"><path d="M12 2l3 7H8l4 13-1-8h6z" fill="#FF6A00"/></svg>382 <span class="price">$61.55</span>383 <span class="sold">1 sold</span>384 </div>385 <div class="cart-btn">386 <svg viewBox="0 0 24 24">387 <path d="M3 6h3l2 10h9l2-8H7" fill="none" stroke="#111" stroke-width="2"/>388 <circle cx="10" cy="20" r="1.5" fill="#111"/>389 <circle cx="17" cy="20" r="1.5" fill="#111"/>390 </svg>391 </div>392 </div>393 </div>394 </div>395 396 <!-- Card 2 -->397 <div class="card">398 <div class="image">[IMG: Men's wing tip formal shoes]399 <div class="deal-banner">400 <div class="deal-left">401 <svg viewBox="0 0 24 24"><path d="M12 2l3 7H8l4 13-1-8h6z" fill="#fff"/></svg>402 <span>Lightning Deal</span>403 </div>404 <div class="deal-right">Ends in 04:35:53</div>405 </div>406 </div>407 <div class="card-content">408 <div class="title">LAORENTOU Men's Wing Tip Premium Dress Shoes...</div>409 <div class="stock-row"><span class="low">Only 2 Left</span> <span class="install">$16.09/wk x 4</span></div>410 <div class="rating">★★★★★ <span style="color:#333;">(388)</span></div>411 <div class="price-row">412 <div class="price-left">413 <svg viewBox="0 0 24 24"><path d="M12 2l3 7H8l4 13-1-8h6z" fill="#FF6A00"/></svg>414 <span class="price">$64.34</span>415 <span class="sold">2 sold</span>416 </div>417 <div class="cart-btn">418 <svg viewBox="0 0 24 24">419 <path d="M3 6h3l2 10h9l2-8H7" fill="none" stroke="#111" stroke-width="2"/>420 <circle cx="10" cy="20" r="1.5" fill="#111"/>421 <circle cx="17" cy="20" r="1.5" fill="#111"/>422 </svg>423 </div>424 </div>425 </div>426 </div>427 428 <!-- Card 3 -->429 <div class="card">430 <div class="image">[IMG: Men's dress shoes black]431 <div class="deal-banner">432 <div class="deal-left">433 <svg viewBox="0 0 24 24"><path d="M12 2l3 7H8l4 13-1-8h6z" fill="#fff"/></svg>434 <span>Lightning Deal</span>435 </div>436 <div class="deal-right">Ends in 04:35:53</div>437 </div>438 </div>439 <div class="card-content">440 <div class="title">LAORENTOU Men's Dress Shoes, Classic Lace-up...</div>441 <div class="stock-row"><span class="low">Almost sold out</span> <span class="install">$14.29/wk x 4</span></div>442 <div class="rating">★★★★★ <span style="color:#333;">(388)</span></div>443 <div class="price-row">444 <div class="price-left">445 <svg viewBox="0 0 24 24"><path d="M12 2l3 7H8l4 13-1-8h6z" fill="#FF6A00"/></svg>446 <span class="price">$57.14</span>447 <span class="sold">13 sold</span>448 </div>449 <div class="cart-btn">450 <svg viewBox="0 0 24 24">451 <path d="M3 6h3l2 10h9l2-8H7" fill="none" stroke="#111" stroke-width="2"/>452 <circle cx="10" cy="20" r="1.5" fill="#111"/>453 <circle cx="17" cy="20" r="1.5" fill="#111"/>454 </svg>455 </div>456 </div>457 </div>458 </div>459 460 <!-- Card 4 -->461 <div class="card">462 <div class="image">[IMG: Men's genuine leather shoes brown]463 <div class="deal-banner">464 <div class="deal-left">465 <svg viewBox="0 0 24 24"><path d="M12 2l3 7H8l4 13-1-8h6z" fill="#fff"/></svg>466 <span>Lightning Deal</span>467 </div>468 <div class="deal-right">Ends in 04:35:53</div>469 </div>470 </div>471 <div class="card-content">472 <div class="title">LAORENTOU Men's Genuine Leather Oxfords...</div>473 <div class="stock-row"><span class="low">Only 12 Left</span> <span class="install">$16.31/wk x 4</span></div>474 <div class="rating">★★★★★ <span style="color:#333;">(388)</span></div>475 <div class="price-row">476 <div class="price-left">477 <svg viewBox="0 0 24 24"><path d="M12 2l3 7H8l4 13-1-8h6z" fill="#FF6A00"/></svg>478 <span class="price">$65.24</span>479 <span class="sold">5 sold</span>480 </div>481 <div class="cart-btn">482 <svg viewBox="0 0 24 24">483 <path d="M3 6h3l2 10h9l2-8H7" fill="none" stroke="#111" stroke-width="2"/>484 <circle cx="10" cy="20" r="1.5" fill="#111"/>485 <circle cx="17" cy="20" r="1.5" fill="#111"/>486 </svg>487 </div>488 </div>489 </div>490 </div>491 492 </div>493 494 <!-- Floating cart badge -->495 <div class="floating-cart">496 <svg viewBox="0 0 24 24">497 <path d="M3 6h3l2 10h9l2-8H7" fill="none" stroke="#fff" stroke-width="2"/>498 <circle cx="10" cy="20" r="1.5" fill="#fff"/>499 <circle cx="17" cy="20" r="1.5" fill="#fff"/>500 </svg>501 <div class="label">Cart</div>502 <div class="sub">Free Shipping</div>503 </div>504 505 <!-- Bottom gesture bar -->506 <div class="gesture"></div>507 508</div>509</body>510</html>