GD-ML/AndroidCode

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 - Basmati Rice</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#111; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden; background:#fff;11  }12  /* Header */13  .header {14    position: relative;15    width:100%;16    height:270px;17    background: linear-gradient(180deg, #9ee2da 0%, #c7e7d9 100%);18    box-sizing: border-box;19  }20  .top-icons {21    position:absolute; top:24px; left:24px; right:24px; height:42px; opacity:.75;22  }23  .back-row {24    position:absolute; left:24px; top:88px; right:24px; display:flex; align-items:center; gap:24px;25  }26  .back-btn {27    width:64px; height:64px; display:flex; align-items:center; justify-content:center; color:#1f2c2e;28  }29  .search {30    flex:1; height:110px; background:#fff; border-radius:24px; box-shadow:0 6px 18px rgba(0,0,0,0.15);31    display:flex; align-items:center; padding:0 28px; gap:24px;32  }33  .search input {34    border:none; outline:none; flex:1; font-size:42px; color:#333;35  }36  .search .scan {37    width:74px; height:74px; border-radius:18px; background:#f3f3f3; display:flex; align-items:center; justify-content:center; border:1px solid #ddd;38  }39  /* Content */40  .content {41    position:relative;42    padding: 32px 40px 360px 40px; /* bottom padding to keep above bottom nav */43  }44  .muted { color:#666; }45  .link { color:#1a8b9a; text-decoration:none; }46  .bold { font-weight:700; }47  .green { color:#228B22; }48  .delivery-block p { margin:12px 0; line-height:1.3; font-size:40px; }49  .pin-row {50    display:flex; align-items:center; gap:16px; color:#2b6778; font-size:40px; margin:18px 0 28px;51  }52  .pin-row svg { width:40px; height:40px; }53  .qty-row { display:flex; align-items:center; gap:28px; margin:20px 0 36px; }54  .qty-box {55    width:230px; height:110px; border-radius:22px; background:#f6f6f6; box-shadow:0 6px 14px rgba(0,0,0,0.15);56    display:flex; align-items:center; justify-content:space-between; padding:0 26px; font-size:40px; color:#333; border:1px solid #e1e1e1;57  }58  .pill-btn {59    width:100%; height:148px; border-radius:90px; display:flex; align-items:center; justify-content:center;60    font-size:48px; font-weight:700; margin:22px 0;61  }62  .btn-cart { background: linear-gradient(180deg, #f9e169, #f0c63d); color:#222; }63  .btn-buy { background: linear-gradient(180deg, #f6b04c, #ee903b); color:#222; }64  .secure-row {65    display:flex; align-items:center; gap:18px; margin:24px 0; color:#2b6778; font-size:40px;66  }67  .secure-row svg { width:42px; height:42px; }68  .seller { font-size:40px; line-height:1.35; color:#333; }69  .wish { margin-top:16px; font-size:40px; }70  .divider { height:16px; background:#efefef; margin:36px -40px 26px; }71  .section-title { font-size:48px; font-weight:800; margin:10px 0 12px; }72  .price-row { display:flex; align-items:flex-end; gap:12px; }73  .price { font-size:64px; font-weight:700; }74  .fulfilled {75    display:inline-flex; align-items:center; gap:12px; background:#39424e; color:#fff; border-radius:10px; padding:6px 14px; font-size:32px; margin:10px 0;76  }77  .chev-right { margin-left:auto; }78  .h-scroll {79    display:flex; justify-content:space-between; padding:20px 0 6px;80  }81  .feature {82    width:200px; display:flex; flex-direction:column; align-items:center; gap:16px; color:#666; font-size:32px; text-align:center;83  }84  .feature .icon {85    width:120px; height:120px; border:2px solid #e0e0e0; border-radius:60px; display:flex; align-items:center; justify-content:center; color:#b0b0b0;86  }87  /* Bottom navigation */88  .bottom-nav {89    position:absolute; left:0; right:0; bottom:150px; height:180px; background:#fff; border-top:1px solid #e6e6e6;90    display:flex; justify-content:space-around; align-items:center;91  }92  .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#333; font-size:34px; }93  .nav-item .icon { width:60px; height:60px; color:#2b6778; }94  .home-indicator {95    position:absolute; bottom:60px; left:50%; transform:translateX(-50%); width:340px; height:14px; background:#c9c9c9; border-radius:8px;96  }97  /* Small helpers */98  .img-placeholder {99    width:110px; height:34px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px;100    border-radius:6px;101  }102</style>103</head>104<body>105<div id="render-target">106  <!-- Header with search -->107  <div class="header">108    <div class="back-row">109      <div class="back-btn" aria-label="Back">110        <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">111          <path d="M15 18l-6-6 6-6"></path>112        </svg>113      </div>114      <div class="search">115        <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">116          <circle cx="11" cy="11" r="8"></circle>117          <path d="M21 21l-4.3-4.3"></path>118        </svg>119        <input type="text" value="basmati rice" aria-label="Search">120        <div class="scan" aria-label="Scan">121          <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">122            <path d="M3 7V5a2 2 0 0 1 2-2h2"/>123            <path d="M17 3h2a2 2 0 0 1 2 2v2"/>124            <path d="M21 17v2a2 2 0 0 1-2 2h-2"/>125            <path d="M7 21H5a2 2 0 0 1-2-2v-2"/>126            <rect x="8" y="8" width="8" height="8" rx="1"></rect>127          </svg>128        </div>129      </div>130    </div>131  </div>132 133  <!-- Page content -->134  <div class="content">135    <div class="delivery-block">136      <p><a class="link bold" href="#">FREE delivery</a> <span class="bold">Wednesday, 13 December.</span> <a class="link" href="#">Details</a></p>137      <p>Or fastest delivery <span class="bold">Tomorrow, 12 December.</span> Order within <span class="green bold">10 hrs 34 mins.</span> <a class="link" href="#">Details</a></p>138    </div>139 140    <div class="pin-row">141      <svg viewBox="0 0 24 24" fill="#2b6778">142        <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>143      </svg>144      <span>Delivering to New Delhi 110043 - <a class="link" href="#">Update location</a></span>145    </div>146 147    <p class="muted" style="font-size:40px; margin-top:22px;">Use by: 31 MAR 2024</p>148    <p class="green" style="font-size:48px; margin-top:6px;