GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Product Detail - Avocado</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background:transparent; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#ffffff; font-family: Arial, Helvetica, sans-serif; color:#1a1a1a;11  }12 13  /* Top purple area */14  .top-bar {15    position:absolute; left:0; top:0; width:100%; height:210px; background:#46107f;16    color:#fff;17  }18  .status-row {19    height:90px; display:flex; align-items:center; justify-content:space-between;20    padding:0 40px; font-size:40px; letter-spacing:0.5px;21  }22  .status-icons { display:flex; gap:26px; align-items:center; }23  .dot-icon { width:22px; height:22px; background:#fff; border-radius:50%; opacity:0.8; }24  .wifi-icon, .battery-icon {25    width:46px; height:46px; border:2px solid #fff; border-radius:8px; opacity:0.85;26  }27  .nav-row {28    height:120px; display:flex; align-items:center; justify-content:space-between;29    padding:0 30px;30  }31  .icon-btn { width:110px; height:90px; display:flex; align-items:center; justify-content:center; }32  .icon-btn svg { width:60px; height:60px; fill:#fff; }33 34  /* Image block */35  .hero-img {36    position:absolute; left:0; top:210px; width:100%; height:780px;37    display:flex; align-items:center; justify-content:center;38  }39  .img-placeholder {40    width:900px; height:680px; background:#E0E0E0; border:1px solid #BDBDBD;41    display:flex; align-items:center; justify-content:center; color:#757575;42    font-size:40px; text-align:center; border-radius:8px;43  }44 45  /* Carousel dots */46  .dots {47    position:absolute; top:1010px; left:420px; display:flex; gap:18px;48  }49  .dots span {50    width:26px; height:26px; border-radius:50%; background:#d9d9d9;51  }52  .dots span.active { background:#ff6b7a; }53 54  /* Title section */55  .content {56    position:absolute; top:1060px; left:34px; right:34px;57  }58  .title {59    font-size:56px; font-weight:700; line-height:1.25; margin-bottom:22px;60  }61  .link {62    color:#7A30D8; font-size:40px; font-weight:600; text-decoration:none;63    display:inline-block; margin-bottom:26px;64  }65  .link svg { width:28px; height:28px; vertical-align:middle; fill:#7A30D8; }66 67  .price-row {68    display:flex; align-items:flex-end; justify-content:space-between; margin-top:12px;69  }70  .piece { font-size:44px; color:#444; }71  .price-info { margin-top:16px; display:flex; align-items:center; gap:18px; }72  .price { font-size:64px; font-weight:800; color:#000; }73  .mrp { font-size:46px; color:#8a8a8a; text-decoration:line-through; }74  .off-pill {75    background:#7A30D8; color:#fff; font-size:38px; padding:18px 24px; border-radius:18px;76    font-weight:700;77  }78 79  .qty-stepper {80    display:flex; align-items:center; gap:20px;81  }82  .qty-stepper .btn {83    width:180px; height:100px; background:#ff6b7a; border-radius:22px;84    display:flex; align-items:center; justify-content:center; color:#fff; font-size:62px; font-weight:900;85  }86  .qty-stepper .count {87    width:180px; height:100px; background:#ffe1e6; border-radius:22px;88    display:flex; align-items:center; justify-content:center; font-size:54px; font-weight:700; color:#cc3b52;89  }90 91  .divider { height:24px; background:#f1eef6; margin:40px -34px; }92 93  /* Product info */94  .section-head {95    display:flex; align-items:center; justify-content:space-between;96    font-size:46px; font-weight:800; margin-bottom:18px;97  }98  .chevron svg { width:40px; height:40px; fill:#6a6a6a; }99  .bullets { font-size:42px; color:#333; line-height:1.7; }100  .bullets li { margin-bottom:16px; }101 102  /* Similar products & promo card */103  .similar-title {104    font-size:46px; font-weight:800; margin-top:36px; margin-bottom:24px;105  }106  .promo-card {107    border:1px solid #e2e2e2; border-radius:28px; padding:26px 30px;108    display:flex; align-items:center; justify-content:space-between; background:#fafafa;109  }110  .promo-left { display:flex; align-items:center; gap:28px; }111  .badge {112    width:120px; height:120px; background:#55c17a; border-radius:26px; display:flex;113    align-items:center; justify-content:center; color:#fff; font-size:56px; font-weight:900;114  }115  .promo-text { font-size:44px; color:#222; }116  .promo-text .bold { font-weight:900; }117  .promo-right { display:flex; align-items:center; gap:40px; }118  .pill { background:#7A30D8; color:#fff; padding:14px 26px; border-radius:24px; font-size:38px; font-weight:700; }119  .mini-dots { display:flex; gap:12px; }120  .mini-dots span { width:16px; height:16px; background:#c3b9d9; border-radius:50%; }121  .mini-dots span.active { background:#7A30D8; }122 123  /* Bottom cart bar */124  .bottom-bar {125    position:absolute; left:30px; right:30px; bottom:140px; height:160px;126    background:#ff6b7a; border-radius:36px; display:flex; align-items:center; justify-content:space-between;127    padding:0 40px; color:#fff;128    box-shadow:0 8px 20px rgba(0,0,0,0.08);129  }130  .bottom-left { font-size:56px; font-weight:800; }131  .view-cart {132    background:rgba(255,255,255,0.2); border-radius:28px; padding:22px 34px;133    display:flex; align-items:center; gap:24px; font-size:54px; font-weight:800;134  }135  .bag-icon svg { width:56px; height:56px; fill:#fff; }136 137  /* Gesture bar */138  .gesture {139    position:absolute; left:50%; transform:translateX(-50%);140    bottom:56px; width:640px; height:16px; background:#111; border-radius:10px;141    opacity:0.85;142  }143</style>144</head>145<body>146<div id="render-target">147  <div class="top-bar">148    <div class="status-row">149      <div>8:51</div>150      <div class="status-icons">151        <div class="dot-icon"></div>152        <div class="dot-icon"></div>153        <div class="wifi-icon"></div>154        <div class="battery-icon"></div>155      </div>156    </div>157    <div class="nav-row">158      <div class="icon-btn">159        <svg viewBox="0 0 24 24"><path d="M15.5 4l-9 8 9 8v-4.5L9.8 12 15.5 8.5V4z"/></svg>160      </div>161      <div class="icon-btn">162        <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"/><path d="M14.5 14.5L20 20" stroke="#fff" stroke-width="2" fill="none"/></svg>163      </div>164    </div>165  </div>166 167  <div class="hero-img">168    <div class="img-placeholder">[IMG: Westfalia logo & avocado]</div>169  </div>170 171  <div class="dots">172    <span class="active"></span>173    <span></span>174    <span></span>175    <span></span>176    <span></span>177  </div>178 179  <div class="content">180    <div class="title">Westfalia Avocado Imported Semi Ripe</div>181    <a class="link" href="#">See All Westfalia Products182      <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg>183    </a>184 185    <div class="price-row">186      <div>187        <div class="piece">1 piece</div>188        <div class="price-info">189          <div class="price">₹89</div>190          <div class="mrp">₹111</div>191          <div class="off-pill">19% Off</div>192        </div>193      </div>194      <div class="qty-stepper">195        <div class="btn">−</div>196        <div class="count">1</div>197        <div class="btn">+</div>198      </div>199    </div>200 201    <div class="divider"></div>202 203    <div class="section-head">204      <div>Product Information</div>205      <div class="chevron">206        <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>207      </div>208    </div>209    <ul class="bullets">210      <li>Country of Origin : Tanzania</li>211      <li>Shelf Life : 6 days</li>212    </ul>213 214    <div class="divider"></div>215 216    <div class="similar-title">Similar Products</div>217    <div class="promo-card">218      <div class="promo-left">219        <div class="badge">%</div>220        <div class="promo-text">Add items worth <span class="bold">₹10</span> to get<br><span class="bold">Free Delivery</span></div>221      </div>222      <div class="promo-right">223        <div class="pill">1/5</div>224        <div class="mini-dots">225          <span class="active"></span><span></span>226        </div>227      </div>228    </div>229  </div>230 231  <div class="bottom-bar">232    <div class="bottom-left">1 Item | ₹89</div>233    <div class="view-cart">234      <span class="bag-icon">235        <svg viewBox="0 0 24 24">236          <path d="M7 9h10l-1 11H8L7 9z"/>237          <path d="M9 9V7a3 3 0 0 1 6 0v2" fill="none" stroke="#fff" stroke-width="2"/>238        </svg>239      </span>240      View Cart241    </div>242  </div>243 244  <div class="gesture"></div>245</div>246</body>247</html>