GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Shopping - Shirts for Men</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #FFFFFF;14 box-sizing: border-box;15 }16 17 /* Status bar */18 .status-bar {19 height: 96px;20 background: #ECECEC;21 display: flex;22 align-items: center;23 padding: 0 32px;24 color: #4A4A4A;25 font-size: 34px;26 box-sizing: border-box;27 }28 .status-spacer { flex: 1; }29 .status-dot { width: 10px; height: 10px; background: #707070; border-radius: 50%; margin: 0 12px; }30 31 /* Top search bar */32 .topbar {33 height: 120px;34 display: flex;35 align-items: center;36 padding: 0 28px;37 box-sizing: border-box;38 border-bottom: 1px solid #E6E6E6;39 background: #FFFFFF;40 }41 .topbar .title {42 font-size: 48px;43 color: #222;44 margin-left: 20px;45 flex: 1;46 }47 .icon-btn {48 width: 84px;49 height: 84px;50 display: flex;51 align-items: center;52 justify-content: center;53 border-radius: 42px;54 }55 .icon-btn svg { width: 48px; height: 48px; fill: #3A3A3A; }56 .badge {57 position: absolute;58 top: 6px;59 right: 6px;60 background: #E53935;61 color: #fff;62 font-size: 26px;63 border-radius: 18px;64 line-height: 28px;65 height: 28px;66 min-width: 28px;67 padding: 0 8px;68 text-align: center;69 }70 71 /* Sort / Filter row */72 .sort-filter {73 height: 120px;74 display: grid;75 grid-template-columns: 1fr 1fr;76 border-bottom: 1px solid #E9E9E9;77 background: #FFFFFF;78 }79 .sf-item {80 display: flex;81 align-items: center;82 justify-content: center;83 gap: 18px;84 font-size: 38px;85 color: #333;86 position: relative;87 }88 .sf-item svg { width: 44px; height: 44px; fill: #4A4A4A; }89 .sf-divider {90 position: absolute;91 right: 0;92 top: 24px;93 bottom: 24px;94 width: 1px;95 background: #EEEEEE;96 }97 .sf-dot {98 position: absolute;99 top: 18px;100 left: 620px;101 width: 26px;102 height: 26px;103 background: #E53935;104 border-radius: 50%;105 color: #fff;106 font-size: 22px;107 line-height: 26px;108 text-align: center;109 }110 111 /* Banner placeholder */112 .banner {113 margin: 20px 24px;114 height: 220px;115 background: #E0E0E0;116 border: 1px solid #BDBDBD;117 border-radius: 24px;118 display: flex;119 align-items: center;120 justify-content: center;121 color: #757575;122 font-size: 40px;123 }124 125 /* Product grid */126 .grid {127 display: grid;128 grid-template-columns: 1fr 1fr;129 gap: 24px;130 padding: 0 24px 24px;131 box-sizing: border-box;132 }133 .card {134 background: #FFFFFF;135 border: 1px solid #EEEEEE;136 border-radius: 24px;137 padding: 14px;138 box-sizing: border-box;139 position: relative;140 }141 .ad-pill {142 position: absolute;143 top: 18px;144 left: 18px;145 background: #F3F3F3;146 color: #707070;147 font-size: 28px;148 padding: 6px 12px;149 border-radius: 12px;150 }151 .wish-btn {152 position: absolute;153 top: 18px;154 right: 18px;155 width: 72px;156 height: 72px;157 border-radius: 36px;158 background: #FFFFFF;159 border: 1px solid #E6E6E6;160 display: flex;161 align-items: center;162 justify-content: center;163 }164 .wish-btn svg { width: 40px; height: 40px; fill: none; stroke: #6C6C6C; stroke-width: 2px; }165 166 .img-placeholder {167 width: 100%;168 height: 540px;169 background: #E0E0E0;170 border: 1px solid #BDBDBD;171 border-radius: 18px;172 display: flex;173 align-items: center;174 justify-content: center;175 color: #757575;176 font-size: 34px;177 }178 .brand {179 font-size: 42px;180 color: #1F1F1F;181 margin: 18px 8px 6px;182 }183 .desc {184 font-size: 34px;185 color: #6E6E6E;186 margin: 0 8px 12px;187 white-space: nowrap;188 overflow: hidden;189 text-overflow: ellipsis;190 }191 .price-row {192 display: flex;193 align-items: baseline;194 gap: 14px;195 margin: 0 8px 12px;196 font-size: 38px;197 }198 .strike {199 color: #9E9E9E;200 text-decoration: line-through;201 }202 .sale { color: #222; font-weight: 600; }203 .off { color: #2E7D32; font-weight: 600; }204 205 .pill-blue {206 display: inline-flex;207 align-items: center;208 gap: 12px;209 background: #EAF0FF;210 color: #2F5BD2;211 padding: 12px 16px;212 border-radius: 14px;213 font-size: 32px;214 margin: 0 8px 12px;215 }216 .pill-blue svg { width: 32px; height: 32px; fill: #2F5BD2; }217 218 .rating-row {219 display: flex;220 align-items: center;221 gap: 16px;222 margin: 0 8px 12px;223 }224 .stars {225 color: #2E7D32;226 font-size: 38px;227 letter-spacing: 6px;228 }229 .rating-count {230 font-size: 32px;231 color: #7A7A7A;232 }233 234 .hot-deal {235 display: inline-block;236 font-size: 32px;237 color: #2E7D32;238 background: #E8F5E9;239 padding: 10px 16px;240 border-radius: 12px;241 margin: 0 8px 14px;242 }243 244 .coupon {245 display: flex;246 align-items: center;247 background: #EAF7E5;248 border-radius: 12px;249 margin: 0 8px 16px;250 overflow: hidden;251 }252 .coupon .amount {253 background: #DFF3D6;254 color: #2E7D32;255 font-weight: 600;256 padding: 14px 18px;257 font-size: 34px;258 }259 .coupon .divider {260 width: 2px;261 height: 100%;262 border-left: 2px dashed #BBD9B3;263 }264 .coupon .label {265 flex: 1;266 padding: 14px 18px;267 font-size: 34px;268 color: #2E7D32;269 }270 271 /* Bottom navigation */272 .bottom-nav {273 position: absolute;274 left: 0;275 right: 0;276 bottom: 120px;277 height: 160px;278 background: #FFFFFF;279 border-top: 1px solid #E6E6E6;280 display: grid;281 grid-template-columns: repeat(5, 1fr);282 align-items: center;283 text-align: center;284 }285 .nav-item {286 position: relative;287 }288 .nav-item svg { width: 48px; height: 48px; fill: #6A6A6A; }289 .nav-item .label {290 font-size: 30px;291 color: #6A6A6A;292 margin-top: 8px;293 }294 .nav-item.active svg { fill: #3D5AFE; }295 .nav-item.active .label { color: #3D5AFE; }296 .nav-dot {297 position: absolute;298 top: 24px;299 right: 130px;300 width: 18px;301 height: 18px;302 background: #E53935;303 border-radius: 50%;304 }305 306 /* Home indicator */307 .home-indicator {308 position: absolute;309 bottom: 32px;310 left: 50%;311 transform: translateX(-50%);312 width: 360px;313 height: 16px;314 background: #000;315 border-radius: 8px;316 opacity: 0.7;317 }318</style>319</head>320<body>321<div id="render-target">322 <!-- Status Bar -->323 <div class="status-bar">324 <div>11:29</div>325 <div class="status-spacer"></div>326 <div style="display:flex; align-items:center; gap:18px;">327 <div style="background:#9E9E9E; color:#fff; border-radius:8px; padding:6px 10px; font-size:28px;">B</div>328 <div style="font-size:28px; color:#707070;">TEMU</div>329 <div class="status-dot"></div>330 <svg viewBox="0 0 24 24" style="width:34px;height:34px; fill:#707070;"><path d="M12 4a8 8 0 0 0-8 8h2a6 6 0 0 1 12 0h2a8 8 0 0 0-8-8zm-6 12v-2h12v2H6zm3 4v-2h6v2H9z"/></svg>331 <svg viewBox="0 0 24 24" style="width:34px;height:34px; fill:#707070;"><path d="M12 4a8 8 0 0 0-8 8h16a8 8 0 0 0-8-8zm-6 10v2h12v-2H6zm3 4v2h6v-2H9z"/></svg>332 </div>333 </div>334 335 <!-- Top Bar -->336 <div class="topbar">337 <div class="icon-btn">338 <svg viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7" stroke="#3A3A3A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>339 </div>340 <div class="title">shirts for men</div>341 <div class="icon-btn">342 <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 0 4.9 14.3l5 5 1.4-1.4-5-5A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z"/></svg>343 </div>344 <div class="icon-btn">345 <svg viewBox="0 0 24 24"><path d="M12 2a4 4 0 0 1 4 4v3a4 4 0 0 1-8 0V6a4 4 0 0 1 4-4zm-2 14h4v6h-4v-6z"/></svg>346 </div>347 <div class="icon-btn">348 <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 3.99 4 6.5 4c1.74 0 3.41.81 4.5 2.09C12.09 4.81 13.76 4 15.5 4 18.01 4 20 6 20 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#6A6A6A"/></svg>349 </div>350 <div class="icon-btn" style="position:relative;">351 <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-2-.9-2-2V7H3V5h3l1-2h8l1 2h3v2h-2v9c0 1.1-.9 2-2 2H7zm0-11v9h10V7H7z"/></svg>352 <div class="badge">1</div>353 </div>354 </div>355 356 <!-- Sort / Filter -->357 <div class="sort-filter">358 <div class="sf-item">359 <svg viewBox="0 0 24 24"><path d="M6 4l4 4H7v12H5V8H2l4-4zm12 16l-4-4h3V4h2v12h3l-4 4z"/></svg>360 <div>Sort</div>361 <div class="sf-divider"></div>362 </div>363 <div class="sf-item">364 <svg viewBox="0 0 24 24"><path d="M6 5h12v2H6V5zm-2 6h10v2H4v-2zm4 6h8v2H8v-2z"/></svg>365 <div>Filter</div>366 <div class="badge" style="top:16px; right:200px; height:28px; line-height:28px; font-size:24px; min-width:28px; border-radius:14px;">1</div>367 </div>368 </div>369 370 <!-- Banner -->371 <div class="banner">[IMG: Promotional Banner]</div>372 373 <!-- Products Grid -->374 <div class="grid">375 <!-- Card 1 -->376 <div class="card">377 <div class="ad-pill">Ad</div>378 <div class="wish-btn">379 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9.33-8.1C1.47 10.5 2.5 7.5 5.5 7.5c2 0 3.38 1.15 4.5 2.6 1.12-1.45 2.5-2.6 4.5-2.6 3 0 4.03 3 2.83 5.4C19 16.65 12 21 12 21z"/></svg>380 </div>381 <div class="img-placeholder">[IMG: Model wearing printed shirt]</div>382 <div class="brand">Allen Solly</div>383 <div class="desc">Men Regular Fit Solid Casual Shirt</div>384 <div class="price-row">385 <span class="strike">1,999</span>386 <span class="sale">₹1,299</span>387 <span class="off">35% off</span>388 </div>389 <div class="pill-blue">390 <svg viewBox="0 0 24 24"><path d="M3 12h13l3-4v10h-3l-3 4H3V12z"/></svg>391 Free Delivery392 </div>393 <div class="rating-row">394 <div class="stars">★ ★ ★ ★ ☆</div>395 <div class="rating-count">(45)</div>396 </div>397 <div class="hot-deal">Hot Deal</div>398 <div class="coupon">399 <div class="amount">₹35</div>400 <div class="divider"></div>401 <div class="label">Coupon available</div>402 </div>403 </div>404 405 <!-- Card 2 -->406 <div class="card">407 <div class="ad-pill">Ad</div>408 <div class="wish-btn">409 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9.33-8.1C1.47 10.5 2.5 7.5 5.5 7.5c2 0 3.38 1.15 4.5 2.6 1.12-1.45 2.5-2.6 4.5-2.6 3 0 4.03 3 2.83 5.4C19 16.65 12 21 12 21z"/></svg>410 </div>411 <div class="img-placeholder">[IMG: Model wearing blue checked shirt]</div>412 <div class="brand">Allen Solly</div>413 <div class="desc">Men Regular Fit Solid Casual Shirt</div>414 <div class="price-row">415 <span class="strike">1,899</span>416 <span class="sale">₹1,234</span>417 <span class="off">35% off</span>418 </div>419 <div class="pill-blue">420 <svg viewBox="0 0 24 24"><path d="M3 12h13l3-4v10h-3l-3 4H3V12z"/></svg>421 Free Delivery422 </div>423 <div class="rating-row">424 <div class="stars">★ ★ ★ ★ ☆</div>425 <div class="rating-count">(28)</div>426 </div>427 <div class="hot-deal">Hot Deal</div>428 <div class="coupon">429 <div class="amount">₹35</div>430 <div class="divider"></div>431 <div class="label">Coupon available</div>432 </div>433 </div>434 435 <!-- Row 2 cards - images only (as visible in screenshot) -->436 <div class="card">437 <div class="wish-btn">438 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9.33-8.1C1.47 10.5 2.5 7.5 5.5 7.5c2 0 3.38 1.15 4.5 2.6 1.12-1.45 2.5-2.6 4.5-2.6 3 0 4.03 3 2.83 5.4C19 16.65 12 21 12 21z"/></svg>439 </div>440 <div class="img-placeholder">[IMG: Model wearing pink shirt]</div>441 </div>442 443 <div class="card">444 <div class="wish-btn">445 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9.33-8.1C1.47 10.5 2.5 7.5 5.5 7.5c2 0 3.38 1.15 4.5 2.6 1.12-1.45 2.5-2.6 4.5-2.6 3 0 4.03 3 2.83 5.4C19 16.65 12 21 12 21z"/></svg>446 </div>447 <div class="img-placeholder">[IMG: Model wearing dark green shirt]</div>448 </div>449 </div>450 451 <!-- Bottom Navigation -->452 <div class="bottom-nav">453 <div class="nav-item">454 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z"/></svg>455 <div class="label">Home</div>456 </div>457 <div class="nav-item active">458 <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 0 4.9 14.3l5 5 1.4-1.4-5-5A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z"/></svg>459 <div class="label">Search</div>460 </div>461 <div class="nav-item">462 <div class="nav-dot"></div>463 <svg viewBox="0 0 24 24"><path d="M3 4h8v6H3V4zm0 10h8v6H3v-6zm10-10h8v8h-8V4zm0 10h8v6h-8v-6z"/></svg>464 <div class="label">Categories</div>465 </div>466 <div class="nav-item">467 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.42 0-8 2.24-8 5v3h16v-3c0-2.76-3.58-5-8-5z"/></svg>468 <div class="label">Account</div>469 </div>470 <div class="nav-item" style="position:relative;">471 <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-2-.9-2-2V7H3V5h3l1-2h8l1 2h3v2h-2v9c0 1.1-.9 2-2 2H7zm0-11v9h10V7H7z"/></svg>472 <div class="label">Cart</div>473 <div class="badge" style="top:22px; right:160px; height:26px; line-height:26px; font-size:22px; min-width:26px; border-radius:13px;">1</div>474 </div>475 </div>476 477 <div class="home-indicator"></div>478</div>479</body>480</html>