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>Reviews Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #111;16 }17 18 /* Status bar */19 .status-bar {20 height: 80px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 font-size: 36px;26 color: #000;27 }28 .status-right {29 display: flex;30 align-items: center;31 gap: 22px;32 }33 .battery {34 display: flex;35 align-items: center;36 gap: 12px;37 font-size: 32px;38 }39 .battery svg { width: 46px; height: 24px; }40 41 /* Top navigation */42 .top-nav {43 height: 120px;44 padding: 0 24px;45 display: flex;46 align-items: center;47 border-bottom: 1px solid #e6e6e6;48 }49 .nav-left {50 width: 120px;51 display: flex;52 align-items: center;53 justify-content: center;54 }55 .nav-center {56 flex: 1;57 display: flex;58 align-items: center;59 justify-content: center;60 gap: 70px;61 font-size: 40px;62 color: #555;63 }64 .nav-center .active {65 color: #000;66 position: relative;67 font-weight: 600;68 }69 .nav-center .active::after {70 content: "";71 position: absolute;72 left: 15%;73 right: 15%;74 bottom: -20px;75 height: 8px;76 background: #000;77 border-radius: 8px;78 }79 .nav-right {80 width: 180px;81 display: flex;82 align-items: center;83 justify-content: flex-end;84 gap: 30px;85 }86 .icon-btn {87 width: 72px;88 height: 72px;89 border-radius: 36px;90 display: flex;91 align-items: center;92 justify-content: center;93 }94 .icon-btn svg { width: 44px; height: 44px; }95 96 /* Content area */97 .content {98 padding: 28px 36px 280px;99 }100 .section-title {101 font-size: 48px;102 font-weight: 700;103 margin-top: 12px;104 margin-bottom: 28px;105 }106 107 .rating-row {108 display: flex;109 align-items: center;110 gap: 18px;111 font-size: 44px;112 margin-bottom: 22px;113 }114 .stars {115 font-size: 44px;116 letter-spacing: 2px;117 }118 .subtext {119 color: #666;120 font-size: 36px;121 }122 123 .split-heading {124 margin-top: 10px;125 margin-bottom: 16px;126 display: flex;127 align-items: center;128 justify-content: space-between;129 }130 .split-heading .left {131 font-size: 44px;132 font-weight: 700;133 }134 .split-heading .right {135 font-size: 36px;136 color: #000;137 display: flex;138 align-items: center;139 gap: 8px;140 }141 142 /* Verified banner */143 .verified {144 background: #E7F5E7;145 border: 1px solid #CFE9CF;146 border-radius: 16px;147 padding: 22px 24px;148 display: flex;149 align-items: center;150 gap: 20px;151 color: #15803D;152 font-size: 36px;153 margin-bottom: 28px;154 }155 .verified-icon {156 width: 60px;157 height: 60px;158 border-radius: 12px;159 background: #1DB954;160 display: flex;161 align-items: center;162 justify-content: center;163 }164 .verified-icon svg { width: 36px; height: 36px; }165 166 /* Size bars */167 .size-rows { margin-top: 10px; margin-bottom: 18px; }168 .size-row {169 display: grid;170 grid-template-columns: 220px 1fr 90px;171 align-items: center;172 gap: 18px;173 margin: 18px 0;174 font-size: 34px;175 color: #333;176 }177 .bar {178 height: 16px;179 background: #dedede;180 border-radius: 10px;181 overflow: hidden;182 }183 .bar > span {184 display: block;185 height: 100%;186 background: #111;187 border-radius: 10px;188 }189 190 /* Chips */191 .chips {192 display: flex;193 flex-wrap: wrap;194 gap: 18px;195 margin: 14px 0 30px;196 }197 .chip {198 border: 1px solid #DADADA;199 color: #333;200 padding: 18px 28px;201 border-radius: 48px;202 font-size: 34px;203 background: #fff;204 }205 206 /* Reviews */207 .review {208 padding: 24px 0;209 border-top: 1px solid #efefef;210 }211 .review:first-of-type { border-top: 1px solid #efefef; }212 .review-head {213 display: flex;214 align-items: center;215 gap: 22px;216 font-size: 34px;217 color: #666;218 margin-bottom: 8px;219 }220 .avatar {221 width: 66px;222 height: 66px;223 border-radius: 33px;224 background: #E0E0E0;225 border: 1px solid #BDBDBD;226 display: flex;227 align-items: center;228 justify-content: center;229 color: #757575;230 font-size: 24px;231 }232 .name-date {233 display: flex;234 align-items: baseline;235 gap: 12px;236 font-size: 36px;237 color: #000;238 }239 .name-date .date { color: #666; font-size: 32px; }240 .review-stars {241 font-size: 44px;242 margin: 8px 0;243 }244 .purchase {245 color: #666;246 font-size: 34px;247 margin-bottom: 8px;248 }249 .review-text {250 font-size: 36px;251 color: #222;252 line-height: 1.36;253 }254 .review-actions {255 display: flex;256 align-items: center;257 justify-content: space-between;258 margin-top: 18px;259 }260 .action-left {261 display: flex;262 align-items: center;263 gap: 22px;264 font-size: 34px;265 color: #333;266 }267 .review-share {268 display: inline-flex;269 align-items: center;270 gap: 10px;271 color: #333;272 }273 .review-share svg { width: 36px; height: 36px; }274 .ellipsis svg { width: 32px; height: 32px; }275 276 /* Seller block */277 .seller {278 margin-top: 24px;279 padding-top: 26px;280 border-top: 12px solid #f7f7f7;281 }282 .seller-header {283 display: flex;284 align-items: center;285 justify-content: space-between;286 }287 .seller-left {288 display: flex;289 align-items: center;290 gap: 24px;291 }292 .seller-avatar {293 width: 108px;294 height: 108px;295 border-radius: 54px;296 background: #000;297 color: #fff;298 display: flex;299 align-items: center;300 justify-content: center;301 font-weight: 700;302 font-size: 46px;303 }304 .seller-info .seller-name {305 font-size: 44px;306 font-weight: 700;307 color: #111;308 }309 .seller-info .seller-stats {310 font-size: 34px;311 color: #666;312 margin-top: 6px;313 }314 .seller-rating {315 text-align: right;316 font-size: 36px;317 color: #111;318 }319 .seller-stars { font-size: 40px; }320 321 .seller-actions {322 display: grid;323 grid-template-columns: 1fr 1fr;324 gap: 24px;325 margin-top: 30px;326 }327 .seller-btn {328 height: 98px;329 border: 1px solid #dedede;330 border-radius: 60px;331 display: flex;332 align-items: center;333 justify-content: center;334 font-size: 36px;335 color: #111;336 background: #fff;337 }338 339 /* Overlay coupon banner */340 .coupon-banner {341 position: absolute;342 left: 0;343 right: 0;344 bottom: 220px;345 background: #333333;346 color: #fff;347 display: flex;348 align-items: center;349 gap: 18px;350 padding: 18px 24px;351 font-size: 34px;352 }353 .coupon-thumb {354 width: 98px;355 height: 98px;356 background: #E0E0E0;357 border: 1px solid #BDBDBD;358 display: flex;359 justify-content: center;360 align-items: center;361 color: #757575;362 border-radius: 8px;363 }364 .coupon-text .title {365 font-weight: 700;366 }367 .coupon-text .subtitle {368 color: #dcdcdc;369 font-size: 30px;370 }371 372 /* Cart bubble */373 .cart-bubble {374 position: absolute;375 right: 24px;376 bottom: 260px;377 width: 180px;378 height: 180px;379 background: #2ECC71;380 border-radius: 90px;381 box-shadow: 0 8px 18px rgba(0,0,0,0.18);382 display: flex;383 align-items: center;384 justify-content: center;385 color: #fff;386 flex-direction: column;387 gap: 6px;388 }389 .cart-bubble svg { width: 64px; height: 64px; }390 .cart-badge {391 position: absolute;392 top: -8px;393 right: -8px;394 width: 56px;395 height: 56px;396 border-radius: 28px;397 background: #FF6B00;398 color: #fff;399 font-size: 32px;400 font-weight: 700;401 display: flex;402 align-items: center;403 justify-content: center;404 border: 4px solid #fff;405 }406 .bubble-sub {407 background: #fff;408 color: #2ECC71;409 padding: 6px 10px;410 border-radius: 12px;411 font-size: 26px;412 font-weight: 700;413 }414 415 /* Hurry line and bottom add bar */416 .hurry {417 position: absolute;418 left: 24px;419 right: 24px;420 bottom: 170px;421 font-size: 34px;422 color: #333;423 }424 .hurry strong { color: #FF6B00; }425 426 .add-bar {427 position: absolute;428 left: 24px;429 right: 24px;430 bottom: 86px;431 height: 120px;432 background: #F37B1D;433 border-radius: 72px;434 display: flex;435 align-items: center;436 justify-content: space-between;437 padding: 0 28px;438 color: #fff;439 box-shadow: 0 8px 18px rgba(0,0,0,0.12);440 }441 .add-btn {442 width: 96px;443 height: 96px;444 border-radius: 48px;445 background: rgba(255,255,255,0.25);446 display: flex;447 align-items: center;448 justify-content: center;449 font-size: 60px;450 font-weight: 700;451 }452 .add-center {453 text-align: center;454 line-height: 1.1;455 }456 .add-center .main { font-size: 44px; font-weight: 800; }457 .add-center .sub { font-size: 30px; color: #ffe8d0; }458 459 /* Home indicator */460 .home-indicator {461 position: absolute;462 bottom: 20px;463 left: 50%;464 transform: translateX(-50%);465 width: 320px;466 height: 16px;467 background: #000;468 border-radius: 8px;469 opacity: 0.15;470 }471 472 /* Simple link styles */473 .link {474 text-decoration: none;475 color: inherit;476 }477</style>478</head>479<body>480<div id="render-target">481 482 <!-- Status bar -->483 <div class="status-bar">484 <div>9:18</div>485 <div class="status-right">486 <!-- Signal -->487 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M2 20h2v-4H2v4zm5 0h2v-8H7v8zm5 0h2v-12h-2v12zm5 0h2V4h-2v16z" fill="#000"/></svg>488 <!-- Wi-Fi -->489 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M12 20l-2-2a2.8 2.8 0 0 1 4 0l-2 2zm0-6c-2.2 0-4.2.8-5.8 2.2l-1.4-1.6A11 11 0 0 1 12 10a11 11 0 0 1 7.2 2.6l-1.4 1.6A8.9 8.9 0 0 0 12 14z" fill="#000"/></svg>490 <!-- Do not disturb -->491 <svg viewBox="0 0 24 24" width="44" height="44"><circle cx="12" cy="12" r="10" fill="none" stroke="#000" stroke-width="2"/><path d="M7 12h10" stroke="#000" stroke-width="2"/></svg>492 <span>•</span>493 <div class="battery">494 <svg viewBox="0 0 26 14"><rect x="1" y="2" width="22" height="10" rx="2" ry="2" fill="none" stroke="#000" stroke-width="2"></rect><rect x="3" y="4" width="16" height="6" fill="#000"></rect><rect x="23" y="5" width="2" height="4" fill="#000"></rect></svg>495 <span>94%</span>496 </div>497 </div>498 </div>499 500 <!-- Top navigation -->501 <div class="top-nav">502 <div class="nav-left">503 <svg viewBox="0 0 24 24"><path d="M15 19L8 12l7-7" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>504 </div>505 <div class="nav-center">506 <div>Overview</div>507 <div class="active">Reviews</div>508 <div>Recommended</div>509 </div>510 <div class="nav-right">511 <div class="icon-btn">512 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" fill="none" stroke="#000" stroke-width="2"/><path d="M20 20l-4-4" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg>513 </div>514 <div class="icon-btn">515 <svg viewBox="0 0 24 24"><path d="M4 12v8h16v-8M12 4v12M8 8l4-4 4 4" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>516 </div>517 </div>518 </div>519 520 <!-- Content -->521 <div class="content">522 <div class="section-title">Item reviews and shop ratings</div>523 <div class="rating-row">524 <strong>4,7</strong>525 <span class="stars">★★★★★</span>526 <span class="subtext">(2.794 shop ratings)</span>527 </div>528 529 <div class="split-heading">530 <div class="left">Item reviews</div>531 <div class="right">See all532 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>533 </div>534 </div>535 536 <div class="verified">537 <div class="verified-icon">538 <svg viewBox="0 0 24 24"><path d="M12 2l7 4v6c0 4.4-3.1 8.4-7 9-3.9-.6-7-4.6-7-9V6l7-4z" fill="#fff"></path><path d="M9 12l2 2 4-4" stroke="#1DB954" stroke-width="2" fill="none" stroke-linecap="round"/></svg>539 </div>540 <div>All reviews are from verified purchases</div>541 </div>542 543 <div class="size-rows">544 <div class="size-row">545 <div>Small</div>546 <div class="bar"><span style="width: 12%;"></span></div>547 <div>1%</div>548 </div>549 <div class="size-row">550 <div>True to size</div>551 <div class="bar"><span style="width: 87%;"></span></div>552 <div>87%</div>553 </div>554 <div class="size-row">555 <div>Large</div>556 <div class="bar"><span style="width: 32%;"></span></div>557 <div>12%</div>558 </div>559 </div>560 561 <div class="chips">562 <div class="chip">Party Wear(3)</div>563 <div class="chip">Great Service(11)</div>564 <div class="chip">Good Quality(29)</div>565 </div>566 567 <!-- Review 1 -->568 <div class="review">569 <div class="review-head">570 <div class="avatar">AV</div>571 <div class="name-date">572 <span style="font-weight:700;">MC MODERN</span>573 <span class="date">on Jun 18, 2023</span>574 </div>575 </div>576 <div class="review-stars">★★★★★</div>577 <div class="purchase">Purchase: Navy Blue / M(48)</div>578 <div class="review-text">579 Great Service, Loungewear, Fast Shipping, Good Quality, Fast Shipping, Good Quality, Comfortable, Soft, Fit Well, Affordable. See more580 </div>581 <div class="review-actions">582 <div class="action-left">583 <span class="review-share">584 <svg viewBox="0 0 24 24"><path d="M4 12v7h16v-7M12 5v10M8 9l4-4 4 4" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg>585 Share586 </span>587 <span>|</span>588 <span>👍 Helpful (6)</span>589 </div>590 <div class="ellipsis">591 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#000"/><circle cx="12" cy="12" r="2" fill="#000"/><circle cx="19" cy="12" r="2" fill="#000"/></svg>592 </div>593 </div>594 </div>595 596 <!-- Review 2 -->597 <div class="review">598 <div class="review-head">599 <div class="avatar">AV</div>600 <div class="name-date">601 <span style="font-weight:700;">Kitty-Ffion Vickerton-Levis</span>602 <span class="date">on Jun 8, 2023</span>603 </div>604 </div>605 <div class="review-stars">★★★★★</div>606 <div class="purchase">Purchase: Navy Blue / XS(44)</div>607 <div class="review-text">608 fabulously light and breathable! The shine pattern is great and makes the shirt stand out from the plain everyday stuff. See more609 </div>610 <div class="review-actions">611 <div class="action-left">612 <span class="review-share">613 <svg viewBox="0 0 24 24"><path d="M4 12v7h16v-7M12 5v10M8 9l4-4 4 4" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg>614 Share615 </span>616 <span>|</span>617 <span>👍 Helpful (3)</span>618 </div>619 <div class="ellipsis">620 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#000"/><circle cx="12" cy="12" r="2" fill="#000"/><circle cx="19" cy="12" r="2" fill="#000"/></svg>621 </div>622 </div>623 </div>624 625 <!-- Seller -->626 <div class="seller">627 <div class="seller-header">628 <div class="seller-left">629 <div class="seller-avatar">SD</div>630 <div class="seller-info">631 <div class="seller-name">Zandra</div>632 <div class="seller-stats">221 Followers • 17K+ Sold • 47 Items</div>633 </div>634 </div>635 <div class="seller-rating">636 <div>4.7</div>637 <div class="seller-stars">★★★★★</div>638 </div>639 </div>640 <div class="seller-actions">641 <div class="seller-btn">❤ Follow</div>642 <div class="seller-btn">Shop all items</div>643 </div>644 </div>645 </div>646 647 <!-- Coupon banner -->648 <div class="coupon-banner">649 <div class="coupon-thumb">[IMG: Product Thumbnail]</div>650 <div class="coupon-text">651 <div class="title">Get 50€ Coupon Bundle</div>652 <div class="subtitle">Pick items on event page to get</div>653 </div>654 </div>655 656 <!-- Cart bubble -->657 <div class="cart-bubble">658 <div class="cart-badge">2</div>659 <svg viewBox="0 0 24 24"><path d="M3 5h2l2 10h10l2-7H7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="9" cy="20" r="2" fill="#fff"></circle><circle cx="17" cy="20" r="2" fill="#fff"></circle></svg>660 <div class="bubble-sub">Free shipping</div>661 <div style="font-size:26px; opacity:0.9;">Cart</div>662 </div>663 664 <!-- Hurry line -->665 <div class="hurry">🔥 Hurry! <strong>Over 688 people</strong> have this in their carts</div>666 667 <!-- Bottom add bar -->668 <div class="add-bar">669 <div class="add-btn">−</div>670 <div class="add-center">671 <div class="main">1 Added</div>672 <div class="sub">Navy Blue / L(50)</div>673 </div>674 <div class="add-btn">+</div>675 </div>676 677 <!-- Home indicator -->678 <div class="home-indicator"></div>679</div>680</body>681</html>