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>Product Page Mock</title>7<style>8 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .statusbar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 background: #E0E0E0;25 color: #ffffff;26 }27 .statusbar .time {28 position: absolute;29 left: 36px;30 top: 28px;31 font-size: 42px;32 font-weight: 600;33 letter-spacing: 1px;34 }35 .status-icons {36 position: absolute;37 right: 32px;38 top: 32px;39 display: flex;40 gap: 22px;41 align-items: center;42 }43 /* Top app bar */44 .appbar {45 position: absolute;46 top: 110px;47 left: 0;48 width: 1080px;49 height: 130px;50 background: #ffffff;51 border-bottom: 1px solid #E5E5E5;52 }53 .appbar .left {54 position: absolute;55 left: 24px;56 top: 30px;57 width: 120px;58 height: 70px;59 display: flex;60 align-items: center;61 justify-content: flex-start;62 }63 .appbar .right {64 position: absolute;65 right: 20px;66 top: 30px;67 height: 70px;68 display: flex;69 align-items: center;70 gap: 36px;71 }72 .icon {73 width: 56px;74 height: 56px;75 display: inline-block;76 }77 78 /* Content wrapper */79 .content {80 position: absolute;81 left: 0;82 top: 240px;83 width: 1080px;84 height: 1920px;85 overflow: hidden;86 }87 88 /* Advantages section */89 .section {90 padding: 0 40px;91 }92 .title-with-line {93 display: flex;94 align-items: center;95 gap: 24px;96 margin: 16px 0 22px;97 }98 .title-with-line h2 {99 margin: 0;100 font-size: 48px;101 color: #333333;102 font-weight: 800;103 letter-spacing: 0.2px;104 }105 .title-with-line .line {106 height: 2px;107 background: #E5E5E5;108 flex: 1;109 }110 111 .advantages {112 display: grid;113 grid-template-columns: 1fr 1fr;114 column-gap: 40px;115 row-gap: 42px;116 padding-right: 20px;117 }118 .adv-item {119 display: grid;120 grid-template-columns: 90px 1fr;121 align-items: start;122 }123 .adv-icon {124 width: 70px;125 height: 70px;126 margin-top: 8px;127 }128 .adv-text h3 {129 margin: 0 0 6px 0;130 font-size: 42px;131 color: #444;132 font-weight: 800;133 }134 .adv-text p {135 margin: 0;136 font-size: 34px;137 color: #777;138 line-height: 1.35;139 }140 .divider {141 height: 18px;142 background: #F2F2F2;143 margin: 40px 0 0;144 border-top: 1px solid #EAEAEA;145 border-bottom: 1px solid #EAEAEA;146 }147 148 /* Similar products */149 .section-header {150 background: #F6F6F6;151 border-top: 1px solid #ECECEC;152 border-bottom: 1px solid #ECECEC;153 padding: 28px 40px;154 margin-top: 10px;155 }156 .section-header h2 {157 margin: 0;158 font-size: 44px;159 color: #434343;160 font-weight: 800;161 letter-spacing: 0.3px;162 }163 164 .cards {165 display: flex;166 gap: 28px;167 padding: 26px 32px 10px 32px;168 }169 .card {170 width: 320px;171 border: 1px solid #E2E2E2;172 border-radius: 8px;173 background: #fff;174 position: relative;175 }176 .card .img {177 width: 100%;178 height: 220px;179 background: #E0E0E0;180 border-bottom: 1px solid #BDBDBD;181 display: flex;182 align-items: center;183 justify-content: center;184 color: #757575;185 font-size: 28px;186 }187 .badge-clearance {188 position: absolute;189 top: 14px;190 left: 14px;191 background: #E74C3C;192 color: #fff;193 font-size: 22px;194 font-weight: 700;195 padding: 6px 10px;196 border-radius: 4px;197 }198 .card-body {199 padding: 16px 16px 18px;200 }201 .rating-badge {202 display: inline-flex;203 align-items: center;204 gap: 8px;205 border: 1px solid #D9E3F7;206 background: #F4F8FF;207 padding: 6px 10px;208 border-radius: 6px;209 font-size: 26px;210 color: #444;211 margin-bottom: 10px;212 }213 .heart-circle {214 position: absolute;215 right: 14px;216 top: 196px;217 width: 48px; height: 48px;218 border-radius: 50%;219 border: 2px solid #DDE6F5;220 background: #fff;221 display: flex; align-items: center; justify-content: center;222 }223 .brand {224 font-size: 32px;225 font-weight: 800;226 color: #202020;227 margin-top: 8px;228 }229 .pname {230 font-size: 28px;231 color: #666;232 margin-top: 4px;233 height: 66px;234 overflow: hidden;235 }236 .price-row {237 display: flex;238 align-items: center;239 gap: 12px;240 margin-top: 12px;241 }242 .price-now {243 background: #F6D64A;244 font-weight: 800;245 padding: 6px 10px;246 border-radius: 6px;247 font-size: 30px;248 color: #1A1A1A;249 }250 .price-old {251 color: #8F8F8F;252 text-decoration: line-through;253 font-size: 26px;254 }255 .price-off {256 color: #D9534F;257 font-size: 26px;258 font-weight: 700;259 }260 261 .pager {262 width: 960px;263 height: 14px;264 background: #E8EEF7;265 border-radius: 8px;266 margin: 18px auto 10px;267 position: relative;268 }269 .pager .active {270 position: absolute;271 left: 360px;272 top: 3px;273 width: 240px;274 height: 8px;275 background: #2B74FF;276 border-radius: 8px;277 }278 279 /* Ratings & Reviews header */280 .reviews-header {281 margin: 16px 40px;282 }283 .reviews-header h2 {284 margin: 0;285 font-size: 44px;286 color: #444;287 font-weight: 800;288 letter-spacing: 0.3px;289 }290 291 /* Sticky add to cart block */292 .sticky-cta {293 position: absolute;294 left: 24px;295 right: 24px;296 bottom: 88px;297 background: #fff;298 border-radius: 18px;299 box-shadow: 0 10px 24px rgba(0,0,0,0.12);300 height: 170px;301 display: flex;302 align-items: center;303 padding: 24px;304 gap: 24px;305 }306 .wish-tile {307 width: 210px;308 height: 120px;309 border-radius: 16px;310 border: 2px solid #E6ECF7;311 display: flex;312 align-items: center;313 justify-content: center;314 color: #2B74FF;315 background: #ffffff;316 }317 .add-button {318 flex: 1;319 height: 120px;320 border-radius: 14px;321 background: #F6D64A;322 display: flex;323 align-items: center;324 justify-content: center;325 color: #333;326 font-size: 46px;327 font-weight: 800;328 letter-spacing: 1px;329 gap: 22px;330 }331 332 /* Chat bubble overlay */333 .chat-overlay {334 position: absolute;335 right: 40px;336 bottom: 320px;337 display: flex;338 align-items: center;339 gap: 16px;340 }341 .chat-box {342 background: #fff;343 border: 1px solid #E3E3E3;344 border-radius: 16px;345 padding: 18px 22px;346 box-shadow: 0 8px 20px rgba(0,0,0,0.08);347 width: 420px;348 position: relative;349 }350 .chat-close {351 position: absolute;352 left: -16px;353 top: -16px;354 width: 44px;355 height: 44px;356 background: #E6E6E6;357 border-radius: 50%;358 display: flex; align-items: center; justify-content: center;359 color: #666;360 font-weight: 700;361 font-size: 24px;362 }363 .chat-box h4 {364 margin: 0 0 6px 0;365 font-size: 30px;366 color: #333;367 }368 .chat-box p {369 margin: 0;370 font-size: 28px;371 color: #666;372 line-height: 1.3;373 }374 .chat-avatar {375 width: 120px;376 height: 120px;377 border-radius: 50%;378 background: #E0E0E0;379 border: 1px solid #BDBDBD;380 display: flex; align-items: center; justify-content: center;381 color: #757575;382 font-size: 22px;383 text-align: center;384 padding: 6px;385 }386 387 /* Home indicator */388 .home-indicator {389 position: absolute;390 bottom: 24px;391 left: 50%;392 transform: translateX(-50%);393 width: 280px;394 height: 12px;395 background: #1A1A1A;396 border-radius: 12px;397 opacity: 0.9;398 }399</style>400</head>401<body>402<div id="render-target">403 <!-- Status bar -->404 <div class="statusbar">405 <div class="time">8:46</div>406 <div class="status-icons">407 <!-- WiFi -->408 <svg class="icon" viewBox="0 0 24 24">409 <path fill="#ffffff" d="M12 18a2 2 0 1 0 0.001 0zM2 9c5.5-5 14.5-5 20 0l-2 2c-4.5-4-11.5-4-16 0L2 9zm4 4c3.5-3 8.5-3 12 0l-2 2c-2.5-2-5.5-2-8 0l-2-2z"/>410 </svg>411 <!-- Battery -->412 <svg class="icon" viewBox="0 0 24 24">413 <rect x="1" y="6" width="18" height="12" rx="2" fill="none" stroke="#ffffff" stroke-width="2"/>414 <rect x="3" y="8" width="14" height="8" fill="#ffffff"/>415 <rect x="20" y="10" width="3" height="6" rx="1" fill="#ffffff"/>416 </svg>417 </div>418 </div>419 420 <!-- App bar -->421 <div class="appbar">422 <div class="left">423 <!-- Back arrow -->424 <svg class="icon" viewBox="0 0 24 24">425 <path d="M15 18L9 12l6-6" fill="none" stroke="#2C2C2C" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>426 </svg>427 </div>428 <div class="right">429 <!-- Search -->430 <svg class="icon" viewBox="0 0 24 24">431 <circle cx="11" cy="11" r="7" fill="none" stroke="#333" stroke-width="2.2"/>432 <path d="M20 20l-3.5-3.5" stroke="#333" stroke-width="2.2" stroke-linecap="round"/>433 </svg>434 <!-- Heart -->435 <svg class="icon" viewBox="0 0 24 24">436 <path d="M12 20s-7-4.5-7-9a4.5 4.5 0 0 1 8-3 4.5 4.5 0 0 1 8 3c0 4.5-7 9-7 9z" fill="none" stroke="#333" stroke-width="2"/>437 </svg>438 <!-- Cart -->439 <svg class="icon" viewBox="0 0 24 24">440 <circle cx="9" cy="20" r="1.5" fill="#333"/><circle cx="17" cy="20" r="1.5" fill="#333"/>441 <path d="M3 4h2l2.5 11h10L20 8H7" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>442 </svg>443 </div>444 </div>445 446 <div class="content">447 <div class="section">448 <div class="title-with-line">449 <h2>Advantages</h2>450 <div class="line"></div>451 </div>452 453 <div class="advantages">454 <!-- flexibility -->455 <div class="adv-item">456 <svg class="adv-icon" viewBox="0 0 24 24">457 <path d="M3 14c4-2 14-2 18 0" stroke="#1E88E5" stroke-width="2.2" fill="none" stroke-linecap="round"/>458 <path d="M5 8l2 2-2 2M19 8l-2 2 2 2" stroke="#1E88E5" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>459 </svg>460 <div class="adv-text">461 <h3>flexibility</h3>462 <p>The Flex-H grooves make the sole more flexible.</p>463 </div>464 </div>465 <!-- lightweight -->466 <div class="adv-item">467 <svg class="adv-icon" viewBox="0 0 24 24">468 <path d="M3 12c6-6 12-2 18-6-3 6-9 10-16 9" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>469 </svg>470 <div class="adv-text">471 <h3>lightweight</h3>472 <p>Their lightweight materials make fitness walking easier: 150g in size 5.5.</p>473 </div>474 </div>475 <!-- breathability -->476 <div class="adv-item">477 <svg class="adv-icon" viewBox="0 0 24 24">478 <rect x="3" y="6" width="18" height="8" fill="none" stroke="#1E88E5" stroke-width="2"/>479 <path d="M7 18v-3M12 18v-3M17 18v-3" stroke="#1E88E5" stroke-width="2" stroke-linecap="round"/>480 </svg>481 <div class="adv-text">482 <h3>breathability</h3>483 <p>Ventilated 3D mesh fabric for good air circulation around your feet.</p>484 </div>485 </div>486 </div>487 </div>488 489 <div class="divider"></div>490 491 <div class="section-header">492 <h2>SIMILAR PRODUCTS</h2>493 </div>494 495 <div class="cards">496 <!-- Card 1 (partially visible left in screenshot, but we show full) -->497 <div class="card">498 <div class="img">[IMG: Walking Shoe]</div>499 <div class="heart-circle">500 <svg width="26" height="26" viewBox="0 0 24 24">501 <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2.5A4 4 0 0 1 19 11c0 4.5-7 9-7 9z" fill="none" stroke="#2B74FF" stroke-width="2"/>502 </svg>503 </div>504 <div class="card-body">505 <div class="rating-badge">506 <svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 3l2.6 5.3 5.9.9-4.2 4.1 1 5.8L12 16.8 6.7 19l1-5.8L3.5 9.2l5.9-.9L12 3z" fill="#F4B400"/></svg>507 4.3508 </div>509 <div class="brand">NEWFEEL</div>510 <div class="pname">Fitness Walking Shoes</div>511 <div class="price-row">512 <div class="price-now">₹1,799</div>513 <div class="price-old">₹3,299</div>514 <div class="price-off">-45%</div>515 </div>516 </div>517 </div>518 519 <!-- Card 2 with clearance -->520 <div class="card">521 <div class="img">[IMG: Women's Fitness Walking Shoe]</div>522 <div class="badge-clearance">CLEARANCE</div>523 <div class="heart-circle">524 <svg width="26" height="26" viewBox="0 0 24 24">525 <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2.5A4 4 0 0 1 19 11c0 4.5-7 9-7 9z" fill="none" stroke="#2B74FF" stroke-width="2"/>526 </svg>527 </div>528 <div class="card-body">529 <div class="rating-badge">530 <svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 3l2.6 5.3 5.9.9-4.2 4.1 1 5.8L12 16.8 6.7 19l1-5.8L3.5 9.2l5.9-.9L12 3z" fill="#F4B400"/></svg>531 4.5532 </div>533 <div class="brand">NEWFEEL</div>534 <div class="pname">Women's Fitness Walking Shoes PW</div>535 <div class="price-row">536 <div class="price-now">₹1,999</div>537 <div class="price-old">₹3,499</div>538 <div class="price-off">-42%</div>539 </div>540 </div>541 </div>542 543 <!-- Card 3 -->544 <div class="card">545 <div class="img">[IMG: Slip-On Walking Shoe]</div>546 <div class="heart-circle">547 <svg width="26" height="26" viewBox="0 0 24 24">548 <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2.5A4 4 0 0 1 19 11c0 4.5-7 9-7 9z" fill="none" stroke="#2B74FF" stroke-width="2"/>549 </svg>550 </div>551 <div class="card-body">552 <div class="rating-badge">553 <svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 3l2.6 5.3 5.9.9-4.2 4.1 1 5.8L12 16.8 6.7 19l1-5.8L3.5 9.2l5.9-.9L12 3z" fill="#F4B400"/></svg>554 4.7555 </div>556 <div class="brand">NEWFEEL</div>557 <div class="pname">PW 160 Slip-On Women's Urban Walking</div>558 <div class="price-row">559 <div class="price-now">₹2,199</div>560 <div class="price-old">₹3,499</div>561 </div>562 </div>563 </div>564 </div>565 566 <div class="pager"><div class="active"></div></div>567 568 <div class="reviews-header">569 <h2>RATINGS & REVIEWS</h2>570 </div>571 </div>572 573 <!-- Chat overlay -->574 <div class="chat-overlay">575 <div class="chat-box">576 <div class="chat-close">×</div>577 <h4>Hi There,</h4>578 <p>Please click here to sign in & chat with me:)</p>579 </div>580 <div class="chat-avatar">User Avatar</div>581 </div>582 583 <!-- Sticky CTA -->584 <div class="sticky-cta">585 <div class="wish-tile">586 <svg width="62" height="62" viewBox="0 0 24 24">587 <path d="M12 21s-7-4.5-7-9a4.5 4.5 0 0 1 8-3 4.5 4.5 0 0 1 8 3c0 4.5-7 9-7 9z" fill="none" stroke="#2B74FF" stroke-width="2"/>588 <path d="M12 8v6M9 11h6" stroke="#2B74FF" stroke-width="2" stroke-linecap="round"/>589 </svg>590 </div>591 <div class="add-button">592 ADD TO CART593 <svg width="52" height="52" viewBox="0 0 24 24">594 <circle cx="9" cy="20" r="2" fill="#333"/><circle cx="17" cy="20" r="2" fill="#333"/>595 <path d="M3 4h2l2.5 11h10L20 8H7" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>596 </svg>597 </div>598 </div>599 600 <!-- Home indicator -->601 <div class="home-indicator"></div>602</div>603</body>604</html>