GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Van Heusen - Product Listing</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #222; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 height: 96px;20 display: flex;21 align-items: center;22 padding: 0 40px;23 font-size: 38px;24 color: #3c3c3c;25 }26 .status-icons {27 margin-left: auto;28 display: flex;29 gap: 28px;30 align-items: center;31 }32 .icon {33 width: 44px;34 height: 44px;35 }36 37 /* App bar */38 .app-bar {39 height: 140px;40 display: flex;41 align-items: center;42 padding: 0 32px;43 border-bottom: 1px solid #eee;44 }45 .app-left {46 display: flex;47 align-items: center;48 gap: 26px;49 }50 .brand-badge {51 width: 64px;52 height: 64px;53 border-radius: 16px;54 background: #ff3f6c;55 color: #fff;56 font-weight: 800;57 display: flex;58 align-items: center;59 justify-content: center;60 letter-spacing: 1px;61 font-size: 34px;62 }63 .app-title {64 font-size: 54px;65 font-weight: 700;66 color: #333;67 }68 .app-actions {69 margin-left: auto;70 display: flex;71 gap: 36px;72 align-items: center;73 }74 .app-icon {75 width: 56px;76 height: 56px;77 }78 79 /* Horizontal product list */80 .product-strip {81 padding: 32px;82 display: flex;83 gap: 28px;84 }85 .product-card {86 width: 320px;87 border: 1px solid #e4e4e4;88 border-radius: 10px;89 background: #fff;90 overflow: hidden;91 }92 .product-image {93 width: 320px;94 height: 360px;95 background: #E0E0E0;96 border-bottom: 1px solid #BDBDBD;97 display: flex;98 align-items: center;99 justify-content: center;100 color: #757575;101 position: relative;102 font-size: 28px;103 }104 .rating-pill {105 position: absolute;106 left: 16px;107 bottom: 16px;108 background: #ffffff;109 border-radius: 30px;110 box-shadow: 0 2px 6px rgba(0,0,0,0.08);111 padding: 10px 18px;112 display: flex;113 align-items: center;114 gap: 10px;115 font-size: 28px;116 font-weight: 700;117 color: #333;118 }119 .rating-star {120 width: 24px;121 height: 24px;122 }123 .product-info {124 padding: 18px 18px 22px;125 }126 .brand-name {127 font-size: 36px;128 font-weight: 700;129 color: #2b2b2b;130 margin-bottom: 8px;131 }132 .price-row {133 display: flex;134 align-items: center;135 gap: 14px;136 margin-bottom: 8px;137 }138 .new-price {139 font-size: 36px;140 font-weight: 800;141 color: #222;142 }143 .old-price {144 font-size: 28px;145 color: #9e9e9e;146 text-decoration: line-through;147 }148 .discount {149 font-size: 26px;150 color: #ff7043;151 font-weight: 700;152 }153 .subtitle {154 font-size: 28px;155 color: #666;156 }157 158 /* Rating & reviews */159 .section {160 padding: 36px 32px;161 }162 .section-header {163 font-size: 48px;164 font-weight: 800;165 color: #303030;166 margin-bottom: 16px;167 }168 .verified-row {169 display: flex;170 align-items: center;171 gap: 14px;172 color: #2f8f7f;173 font-weight: 700;174 font-size: 28px;175 margin-bottom: 28px;176 }177 .check-icon {178 width: 34px;179 height: 34px;180 }181 .ratings-grid {182 display: grid;183 grid-template-columns: 320px 1fr;184 gap: 32px;185 align-items: center;186 }187 .big-rating {188 display: flex;189 flex-direction: column;190 align-items: center;191 gap: 8px;192 }193 .big-rating-value {194 font-size: 120px;195 font-weight: 800;196 line-height: 1;197 color: #333;198 }199 .big-rating-sub {200 font-size: 28px;201 color: #777;202 display: flex;203 align-items: center;204 gap: 10px;205 }206 .star-teal {207 width: 28px;208 height: 28px;209 }210 .rating-row {211 display: grid;212 grid-template-columns: 120px 520px 100px 40px;213 align-items: center;214 gap: 16px;215 margin: 14px 0;216 }217 .rating-label {218 font-size: 30px;219 color: #444;220 display: flex;221 align-items: center;222 gap: 10px;223 }224 .bar {225 height: 16px;226 background: #e9e9e9;227 border-radius: 10px;228 overflow: hidden;229 }230 .bar-fill {231 height: 100%;232 background: #2f8f7f;233 border-radius: 10px;234 }235 .count {236 font-size: 28px;237 color: #555;238 text-align: right;239 }240 .chevron {241 width: 32px;242 height: 32px;243 }244 .divider {245 height: 16px;246 background: #f3f3f3;247 margin: 18px 0 0;248 }249 250 /* Q&A */251 .qa-section {252 padding: 32px;253 }254 .qa-header {255 font-size: 44px;256 font-weight: 800;257 color: #2b2b2b;258 margin-bottom: 10px;259 }260 .qa-sub {261 font-size: 28px;262 color: #777;263 margin-bottom: 28px;264 }265 .question {266 font-size: 34px;267 font-weight: 800;268 color: #222;269 margin-bottom: 12px;270 }271 .answer {272 font-size: 32px;273 color: #333;274 margin-bottom: 18px;275 }276 .meta {277 display: flex;278 align-items: center;279 gap: 12px;280 font-size: 24px;281 color: #777;282 margin-bottom: 28px;283 }284 .meta .seller-pill {285 background: #e0e0e0;286 color: #555;287 font-weight: 700;288 padding: 8px 14px;289 border-radius: 10px;290 font-size: 22px;291 }292 .link-red {293 color: #ff3f6c;294 font-size: 30px;295 font-weight: 800;296 margin-bottom: 28px;297 }298 299 /* CTA */300 .cta {301 margin: 24px 32px;302 border: 1px solid #e0e0e0;303 border-radius: 16px;304 height: 140px;305 display: flex;306 align-items: center;307 justify-content: center;308 font-size: 38px;309 font-weight: 800;310 color: #2b2b2b;311 background: #fafafa;312 }313 314 /* Bottom gesture bar */315 .gesture-bar {316 position: absolute;317 bottom: 22px;318 left: 50%;319 transform: translateX(-50%);320 width: 320px;321 height: 10px;322 background: #cfcfcf;323 border-radius: 10px;324 }325</style>326</head>327<body>328<div id="render-target">329 330 <!-- Status Bar -->331 <div class="status-bar">332 <div>10:15</div>333 <div class="status-icons">334 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#9e9e9e"></circle></svg>335 <svg class="icon" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" fill="#b0b0b0"></rect></svg>336 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#b0b0b0" stroke-width="2" stroke-linecap="round"></path></svg>337 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#9e9e9e"></circle></svg>338 </div>339 </div>340 341 <!-- App Bar -->342 <div class="app-bar">343 <div class="app-left">344 <svg class="app-icon" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>345 <div class="brand-badge">M</div>346 <div class="app-title">Van Heusen</div>347 </div>348 <div class="app-actions">349 <svg class="app-icon" viewBox="0 0 24 24"><circle cx="6" cy="6" r="3" fill="#555"></circle><circle cx="18" cy="12" r="3" fill="#555"></circle><circle cx="6" cy="18" r="3" fill="#555"></circle><path d="M8.5 7.5l7 3M8.5 16.5l7-3" stroke="#555" stroke-width="2" fill="none"></path></svg>350 <svg class="app-icon" viewBox="0 0 24 24"><path d="M12 21s-6-4.5-9-7.5C-1 9 3 4 8 7c2 1.3 4 3.3 4 3.3S14 8.3 16 7c5-3 9 2 5 6.5-3 3-9 7.5-9 7.5z" fill="#555"></path></svg>351 <svg class="app-icon" viewBox="0 0 24 24"><rect x="5" y="9" width="14" height="11" rx="2" fill="#555"></rect><path d="M8 9V6a4 4 0 0 1 8 0v3" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>352 </div>353 </div>354 355 <!-- Product Cards Strip -->356 <div class="product-strip">357 <!-- Card 1 -->358 <div class="product-card">359 <div class="product-image">360 [IMG: Men's formal shirt product]361 <div class="rating-pill">362 <span>4.1</span>363 <svg class="rating-star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5.2 4.8L18.3 22 12 18.5 5.7 22l1.4-7.6L2 9.6l7-1L12 2z" fill="#2f8f7f"></path></svg>364 </div>365 </div>366 <div class="product-info">367 <div class="brand-name">Van Heusen</div>368 <div class="price-row">369 <div class="old-price">₹2,999</div>370 <div class="new-price">₹2,249</div>371 <div class="discount">25% OFF</div>372 </div>373 <div class="subtitle">Slim Fit Formal Shirt</div>374 </div>375 </div>376 377 <!-- Card 2 -->378 <div class="product-card">379 <div class="product-image">380 [IMG: Men's formal shirt product]381 <div class="rating-pill">382 <span>4.5</span>383 <svg class="rating-star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5.2 4.8L18.3 22 12 18.5 5.7 22l1.4-7.6L2 9.6l7-1L12 2z" fill="#2f8f7f"></path></svg>384 </div>385 </div>386 <div class="product-info">387 <div class="brand-name">Van Heusen</div>388 <div class="price-row">389 <div class="new-price">₹2,299</div>390 </div>391 <div class="subtitle">Slim Fit Cotton Formal Shirt</div>392 </div>393 </div>394 395 <!-- Card 3 -->396 <div class="product-card">397 <div class="product-image">398 [IMG: Men's formal shirt product]399 <div class="rating-pill">400 <span>4.3</span>401 <svg class="rating-star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5.2 4.8L18.3 22 12 18.5 5.7 22l1.4-7.6L2 9.6l7-1L12 2z" fill="#2f8f7f"></path></svg>402 </div>403 </div>404 <div class="product-info">405 <div class="brand-name">Louis Philippe</div>406 <div class="price-row">407 <div class="old-price">₹2,599</div>408 <div class="new-price">₹1,999</div>409 </div>410 <div class="subtitle">Spread Collar Formal Shirt</div>411 </div>412 </div>413 </div>414 415 <!-- Rating & Reviews -->416 <div class="section">417 <div class="section-header">Rating & Reviews</div>418 <div class="verified-row">419 <svg class="check-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#2f8f7f"></circle><path d="M7 12l3 3 7-7" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>420 <div>By Verified Buyers Only</div>421 </div>422 423 <div class="ratings-grid">424 <div class="big-rating">425 <div class="big-rating-value">4.4</div>426 <div class="big-rating-sub">427 <svg class="star-teal" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5.2 4.8L18.3 22 12 18.5 5.7 22l1.4-7.6L2 9.6l7-1L12 2z" fill="#2f8f7f"></path></svg>428 <span>49 Verified Buyers</span>429 </div>430 </div>431 432 <div>433 <div class="rating-row">434 <div class="rating-label">5 ★</div>435 <div class="bar"><div class="bar-fill" style="width: 78%;"></div></div>436 <div class="count">33</div>437 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#888" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>438 </div>439 <div class="rating-row">440 <div class="rating-label">4 ★</div>441 <div class="bar"><div class="bar-fill" style="width: 25%;"></div></div>442 <div class="count">9</div>443 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#888" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>444 </div>445 <div class="rating-row">446 <div class="rating-label">3 ★</div>447 <div class="bar"><div class="bar-fill" style="width: 12%;"></div></div>448 <div class="count">3</div>449 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#888" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>450 </div>451 <div class="rating-row">452 <div class="rating-label">2 ★</div>453 <div class="bar"><div class="bar-fill" style="width: 8%; background:#f5a623;"></div></div>454 <div class="count">2</div>455 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#888" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>456 </div>457 <div class="rating-row">458 <div class="rating-label">1 ★</div>459 <div class="bar"><div class="bar-fill" style="width: 8%; background:#e57373;"></div></div>460 <div class="count">2</div>461 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#888" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>462 </div>463 </div>464 </div>465 </div>466 467 <div class="divider"></div>468 469 <!-- Customer Questions -->470 <div class="qa-section">471 <div class="qa-header">Customer Questions</div>472 <div class="qa-sub">Answered by people who bought this and verified sellers</div>473 474 <div class="question">is it stretchable?</div>475 <div class="answer">It's perfect as it is described 👍</div>476 <div class="meta">477 <div>MOHAMMAD MUSTAQ...</div>478 <div class="seller-pill">SELLER</div>479 <div>• 2 months ago</div>480 </div>481 482 <div class="link-red">Read more answers</div>483 </div>484 485 <!-- Ask CTA -->486 <div class="cta">ASK A QUESTION</div>487 488 <!-- Bottom gesture bar -->489 <div class="gesture-bar"></div>490</div>491</body>492</html>