GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Shoes for Mens - Listing</title>6<meta name="viewport" content="width=device-width, initial-scale=1.0">7<style>8 /* Body reset and transparency */9 html, body { height: 100%; }10 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; }11 12 /* Root render target */13 #render-target {14 width: 1440px;15 height: 3120px;16 position: relative;17 overflow: hidden;18 background: #ffffff;19 }20 21 /* Utility */22 .row { display: flex; align-items: center; }23 .space-between { justify-content: space-between; }24 .muted { color: #777; }25 .divider { height: 1px; background: #eee; }26 .pill { padding: 10px 22px; border-radius: 24px; font-size: 34px; line-height: 1; }27 .shadow { box-shadow: 0 6px 18px rgba(0,0,0,0.08); }28 .strike { text-decoration: line-through; color: #9e9e9e; }29 30 /* Status bar */31 .status-bar {32 height: 120px;33 background: #0f0f0f;34 color: #fff;35 padding: 0 48px;36 display: flex;37 align-items: center;38 justify-content: space-between;39 box-sizing: border-box;40 }41 .status-left, .status-right { display: flex; align-items: center; gap: 28px; }42 .status-time { font-size: 46px; letter-spacing: 1px; }43 44 /* Simple icons */45 .icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }46 .icon svg { width: 48px; height: 48px; }47 48 /* Top navigation */49 .nav-bar {50 height: 170px;51 padding: 0 48px;52 display: flex;53 align-items: center;54 background: #ffffff;55 border-bottom: 1px solid #efefef;56 }57 .nav-title { margin-left: 20px; }58 .nav-title h1 { margin: 0; font-size: 64px; font-weight: 600; }59 .nav-title p { margin: 8px 0 0; font-size: 36px; color: #777; }60 .nav-actions { margin-left: auto; display: flex; gap: 40px; }61 62 /* Brand strip */63 .brands {64 background: #ffffff;65 padding: 44px 36px 36px;66 }67 .brand-grid {68 display: grid;69 grid-template-columns: repeat(4, 1fr);70 column-gap: 20px;71 text-align: center;72 }73 .brand {74 display: flex;75 flex-direction: column;76 align-items: center;77 gap: 24px;78 padding: 10px 0 0;79 }80 .brand .logo {81 width: 260px;82 height: 120px;83 background: #E0E0E0;84 border: 1px solid #BDBDBD;85 display: flex;86 align-items: center;87 justify-content: center;88 color: #757575;89 font-size: 34px;90 border-radius: 10px;91 }92 .brand span { font-size: 40px; color: #444; }93 94 /* Products grid */95 .products {96 background: #f6f6f6;97 padding: 36px 32px 480px; /* leave space for toolbar */98 box-sizing: border-box;99 }100 .grid {101 display: grid;102 grid-template-columns: 1fr 1fr;103 gap: 36px;104 }105 .card {106 background: #fff;107 border-radius: 28px;108 overflow: hidden;109 box-shadow: 0 8px 24px rgba(0,0,0,0.06);110 }111 .card-media {112 position: relative;113 padding: 18px;114 }115 .img-ph {116 width: 100%;117 height: 720px;118 background: #E0E0E0;119 border: 1px solid #BDBDBD;120 border-radius: 22px;121 display: flex;122 align-items: center;123 justify-content: center;124 color: #757575;125 font-size: 40px;126 text-align: center;127 }128 .offer-pill {129 position: absolute;130 top: 28px;131 left: 28px;132 background: #efe6a6;133 color: #2f2f2f;134 font-weight: 600;135 padding: 14px 26px;136 font-size: 36px;137 border-radius: 28px;138 }139 .fav {140 position: absolute;141 top: 28px;142 right: 28px;143 width: 70px;144 height: 70px;145 border-radius: 50%;146 background: rgba(255,255,255,0.9);147 display: flex;148 align-items: center;149 justify-content: center;150 }151 .corner-tag {152 position: absolute;153 right: 46px;154 bottom: 46px;155 width: 52px;156 height: 70px;157 background: rgba(255,255,255,0.95);158 border: 2px solid #d0d0d0;159 border-radius: 10px;160 }161 .card-body { padding: 26px 34px 34px; }162 .brand-name { font-size: 52px; font-weight: 700; margin: 0 0 10px; }163 .desc { font-size: 36px; color: #666; margin: 0 0 26px; }164 .price-row { display: flex; align-items: baseline; gap: 18px; margin-bottom: 22px; }165 .price { font-size: 54px; font-weight: 800; }166 .off { color: #2e7d32; font-size: 38px; font-weight: 700; }167 .rating-row { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }168 .rating-pill {169 background: #f0f0f0;170 padding: 10px 18px;171 border-radius: 20px;172 font-size: 36px;173 display: inline-flex;174 align-items: center;175 gap: 10px;176 }177 .rating-pill .star { color: #2e7d32; }178 .bought { font-size: 34px; color: #8a1352; display: flex; align-items: center; gap: 14px; margin-top: 8px; }179 180 /* Bottom toolbar */181 .toolbar {182 position: absolute;183 left: 0;184 right: 0;185 bottom: 120px;186 margin: 0 0;187 height: 220px;188 background: #ffffff;189 border-top: 1px solid #e9e9e9;190 display: flex;191 align-items: center;192 padding: 0 40px;193 box-shadow: 0 -6px 16px rgba(0,0,0,0.06);194 }195 .toolbar .section {196 flex: 1;197 display: flex;198 align-items: center;199 gap: 24px;200 justify-content: center;201 height: 100%;202 position: relative;203 }204 .toolbar .section + .section::before {205 content: "";206 position: absolute;207 left: 0;208 top: 30px;209 bottom: 30px;210 width: 2px;211 background: #eee;212 }213 .toolbar .label { font-size: 48px; font-weight: 600; }214 .toolbar .sub { font-size: 34px; color: #e91e63; margin-left: 10px; }215 .filter-dot {216 width: 40px;217 height: 40px;218 background: #e91e63;219 color: #fff;220 border-radius: 50%;221 font-size: 28px;222 line-height: 40px;223 text-align: center;224 }225 226 /* Home indicator */227 .home-indicator {228 position: absolute;229 bottom: 40px;230 left: 50%;231 transform: translateX(-50%);232 width: 360px;233 height: 12px;234 background: #cfcfcf;235 border-radius: 10px;236 }237</style>238</head>239<body>240<div id="render-target">241 <!-- Status Bar -->242 <div class="status-bar">243 <div class="status-left">244 <div class="status-time">9:44</div>245 <div class="icon" aria-label="Search">246 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">247 <circle cx="11" cy="11" r="7"></circle>248 <line x1="16.5" y1="16.5" x2="22" y2="22"></line>249 </svg>250 </div>251 <div class="icon" aria-label="Alert">252 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">253 <path d="M12 3L2 20h20L12 3z"></path>254 <line x1="12" y1="9" x2="12" y2="14"></line>255 <circle cx="12" cy="18" r="1"></circle>256 </svg>257 </div>258 </div>259 <div class="status-right">260 <div class="icon" aria-label="Signal">261 <svg viewBox="0 0 24 24" fill="#fff"><path d="M2 20h2v-2H2v2zm4 0h2v-6H6v6zm4 0h2v-10h-2v10zm4 0h2V6h-2v14zm4 0h2V2h-2v18z"/></svg>262 </div>263 <div class="icon" aria-label="Battery">264 <svg viewBox="0 0 28 16" fill="none" stroke="#fff" stroke-width="2">265 <rect x="1" y="3" width="22" height="10" rx="2"></rect>266 <rect x="3" y="5" width="15" height="6" fill="#fff"></rect>267 <rect x="24" y="6" width="3" height="4" fill="#fff"></rect>268 </svg>269 </div>270 </div>271 </div>272 273 <!-- Navigation Bar -->274 <div class="nav-bar">275 <div class="icon" aria-label="Back">276 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">277 <polyline points="15 18 9 12 15 6"></polyline>278 </svg>279 </div>280 <div class="nav-title">281 <h1>shoes for mens</h1>282 <p>21,245 Products</p>283 </div>284 <div class="nav-actions">285 <div class="icon" aria-label="Search">286 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">287 <circle cx="11" cy="11" r="7"></circle>288 <line x1="16.5" y1="16.5" x2="22" y2="22"></line>289 </svg>290 </div>291 <div class="icon" aria-label="Wishlist">292 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">293 <path d="M12 21s-7-4.4-9.5-7.6C-0.2 10.1 1 6.7 4 6c1.9-.4 3.5.6 4 2 0 0 .7-2.3 3.9-2.3C15.8 5.7 17 8 17 8c.5-1.4 2.1-2.4 4-2 3 .7 4.2 4.1 1.5 7.4C19 16.6 12 21 12 21z"></path>294 </svg>295 </div>296 <div class="icon" aria-label="Bag">297 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">298 <path d="M6 7h12l1 13H5L6 7z"></path>299 <path d="M9 7V6a3 3 0 0 1 6 0v1"></path>300 </svg>301 </div>302 </div>303 </div>304 305 <!-- Brand Strip -->306 <div class="brands">307 <div class="brand-grid">308 <div class="brand">309 <div class="logo">[IMG: Woodland Logo]</div>310 <span>Woodland</span>311 </div>312 <div class="brand">313 <div class="logo">[IMG: adidas Logo]</div>314 <span>Adidas</span>315 </div>316 <div class="brand">317 <div class="logo">[IMG: PUMA Logo]</div>318 <span>Puma</span>319 </div>320 <div class="brand">321 <div class="logo">[IMG: Skechers Logo]</div>322 <span>Skechers</span>323 </div>324 </div>325 </div>326 327 <!-- Product Grid -->328 <div class="products">329 <div class="grid">330 331 <!-- Card 1 -->332 <div class="card">333 <div class="card-media">334 <div class="img-ph">[IMG: White Casual Sneakers]</div>335 <div class="offer-pill">On Offer</div>336 <div class="fav">337 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">338 <path d="M12 21s-7-4.4-9.5-7.6C-0.2 10.1 1 6.7 4 6c1.9-.4 3.5.6 4 2 0 0 .7-2.3 3.9-2.3C15.8 5.7 17 8 17 8c.5-1.4 2.1-2.4 4-2 3 .7 4.2 4.1 1.5 7.4C19 16.6 12 21 12 21z"></path>339 </svg>340 </div>341 <div class="corner-tag"></div>342 </div>343 <div class="card-body">344 <div class="brand-name">Red Tape</div>345 <div class="desc">Red Tape Men's White Casual Sneakers</div>346 <div class="price-row">347 <div class="price">₹1,349</div>348 <div class="strike">₹5,399</div>349 <div class="off">75% Off</div>350 </div>351 <div class="rating-row">352 <div class="rating-pill"><span>4.4</span><span class="star">★</span></div>353 <div class="muted">(68)</div>354 </div>355 <div class="bought">356 <svg class="icon" viewBox="0 0 24 24" width="32" height="32">357 <path d="M6 6h15l-2 9H7L6 6z" fill="#8a1352"></path>358 <circle cx="9" cy="20" r="1.5" fill="#8a1352"></circle>359 <circle cx="18" cy="20" r="1.5" fill="#8a1352"></circle>360 </svg>361 <span>Bought 117 times recently</span>362 </div>363 </div>364 </div>365 366 <!-- Card 2 -->367 <div class="card">368 <div class="card-media">369 <div class="img-ph">[IMG: White Running Shoes]</div>370 <div class="offer-pill">On Offer</div>371 <div class="fav">372 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">373 <path d="M12 21s-7-4.4-9.5-7.6C-0.2 10.1 1 6.7 4 6c1.9-.4 3.5.6 4 2 0 0 .7-2.3 3.9-2.3C15.8 5.7 17 8 17 8c.5-1.4 2.1-2.4 4-2 3 .7 4.2 4.1 1.5 7.4C19 16.6 12 21 12 21z"></path>374 </svg>375 </div>376 <div class="corner-tag"></div>377 </div>378 <div class="card-body">379 <div class="brand-name">Red Tape</div>380 <div class="desc">Red Tape Men's White Running Shoes</div>381 <div class="price-row">382 <div class="price">₹1,724</div>383 <div class="strike">₹6,899</div>384 <div class="off">75% Off</div>385 </div>386 <div class="rating-row">387 <div class="rating-pill"><span>4.2</span><span class="star">★</span></div>388 <div class="muted">(100)</div>389 </div>390 <div class="bought">391 <svg class="icon" viewBox="0 0 24 24" width="32" height="32">392 <path d="M6 6h15l-2 9H7L6 6z" fill="#8a1352"></path>393 <circle cx="9" cy="20" r="1.5" fill="#8a1352"></circle>394 <circle cx="18" cy="20" r="1.5" fill="#8a1352"></circle>395 </svg>396 <span>Bought 205 times recently</span>397 </div>398 </div>399 </div>400 401 <!-- Card placeholders for next row (partially visible in screenshot) -->402 <div class="card">403 <div class="card-media">404 <div class="img-ph">[IMG: Black Sneakers]</div>405 <div class="offer-pill">On Offer</div>406 <div class="fav">407 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">408 <path d="M12 21s-7-4.4-9.5-7.6C-0.2 10.1 1 6.7 4 6c1.9-.4 3.5.6 4 2 0 0 .7-2.3 3.9-2.3C15.8 5.7 17 8 17 8c.5-1.4 2.1-2.4 4-2 3 .7 4.2 4.1 1.5 7.4C19 16.6 12 21 12 21z"></path>409 </svg>410 </div>411 <div class="corner-tag"></div>412 </div>413 <div class="card-body">414 <div class="brand-name">Brand Name</div>415 <div class="desc">Product subtitle goes here</div>416 <div class="price-row">417 <div class="price">₹1,299</div>418 <div class="strike">₹3,999</div>419 <div class="off">55% Off</div>420 </div>421 <div class="rating-row">422 <div class="rating-pill"><span>4.1</span><span class="star">★</span></div>423 <div class="muted">(56)</div>424 </div>425 <div class="bought">426 <svg class="icon" viewBox="0 0 24 24" width="32" height="32">427 <path d="M6 6h15l-2 9H7L6 6z" fill="#8a1352"></path>428 <circle cx="9" cy="20" r="1.5" fill="#8a1352"></circle>429 <circle cx="18" cy="20" r="1.5" fill="#8a1352"></circle>430 </svg>431 <span>Bought recently</span>432 </div>433 </div>434 </div>435 436 <div class="card">437 <div class="card-media">438 <div class="img-ph">[IMG: Black Running Shoes]</div>439 <div class="offer-pill">On Offer</div>440 <div class="fav">441 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">442 <path d="M12 21s-7-4.4-9.5-7.6C-0.2 10.1 1 6.7 4 6c1.9-.4 3.5.6 4 2 0 0 .7-2.3 3.9-2.3C15.8 5.7 17 8 17 8c.5-1.4 2.1-2.4 4-2 3 .7 4.2 4.1 1.5 7.4C19 16.6 12 21 12 21z"></path>443 </svg>444 </div>445 <div class="corner-tag"></div>446 </div>447 <div class="card-body">448 <div class="brand-name">Brand Name</div>449 <div class="desc">Product subtitle goes here</div>450 <div class="price-row">451 <div class="price">₹1,899</div>452 <div class="strike">₹4,999</div>453 <div class="off">60% Off</div>454 </div>455 <div class="rating-row">456 <div class="rating-pill"><span>4.5</span><span class="star">★</span></div>457 <div class="muted">(240)</div>458 </div>459 <div class="bought">460 <svg class="icon" viewBox="0 0 24 24" width="32" height="32">461 <path d="M6 6h15l-2 9H7L6 6z" fill="#8a1352"></path>462 <circle cx="9" cy="20" r="1.5" fill="#8a1352"></circle>463 <circle cx="18" cy="20" r="1.5" fill="#8a1352"></circle>464 </svg>465 <span>Bought recently</span>466 </div>467 </div>468 </div>469 470 </div>471 </div>472 473 <!-- Bottom Toolbar -->474 <div class="toolbar">475 <div class="section">476 <svg class="icon" viewBox="0 0 24 24">477 <rect x="3" y="5" width="18" height="4" fill="#555"></rect>478 <rect x="3" y="11" width="18" height="4" fill="#555"></rect>479 <rect x="3" y="17" width="18" height="4" fill="#555"></rect>480 </svg>481 <div class="label">View</div>482 </div>483 <div class="section">484 <svg class="icon" viewBox="0 0 24 24">485 <path d="M3 6h18M6 12h12M9 18h6" stroke="#555" stroke-width="2" fill="none"></path>486 </svg>487 <div>488 <span class="label">Sort</span>489 <span class="sub">Popularity</span>490 </div>491 </div>492 <div class="section">493 <svg class="icon" viewBox="0 0 24 24">494 <path d="M4 4h16M7 4v6l5 5v5M17 4v8l3 3" stroke="#555" stroke-width="2" fill="none"></path>495 </svg>496 <div class="label">Filter</div>497 <div class="filter-dot">1</div>498 </div>499 </div>500 501 <!-- Home Indicator -->502 <div class="home-indicator"></div>503</div>504</body>505</html>