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 Detail - Denim Jacket</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff; color: #111;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif;14  }15 16  /* Top system/status and header */17  .status-bar {18    height: 88px; padding: 0 40px;19    display: flex; align-items: center; justify-content: space-between;20    color: #111; font-size: 34px;21  }22  .status-left { font-weight: 600; }23  .status-right { display: flex; gap: 22px; align-items: center; opacity: .8; }24  .dot { width: 12px; height: 12px; border-radius: 50%; background: #111; display: inline-block; }25 26  .topbar {27    height: 96px; padding: 0 28px;28    display: flex; align-items: center; justify-content: space-between;29  }30  .icon-btn {31    width: 88px; height: 88px; border: none; background: transparent; padding: 0;32    display: flex; align-items: center; justify-content: center; cursor: default;33  }34  .right-icons { display: flex; align-items: center; gap: 8px; }35  .bag { position: relative; }36  .bag .badge {37    position: absolute; top: 14px; right: 18px;38    background: #111; color: #fff; font-size: 24px; line-height: 24px;39    width: 28px; height: 28px; border-radius: 50%;40    display: flex; justify-content: center; align-items: center;41  }42 43  /* Content */44  .content { padding: 10px 60px 360px 60px; }45  .title {46    font-family: Georgia, "Times New Roman", serif;47    font-size: 86px; line-height: 1.1; letter-spacing: 0.2px;48    margin: 12px 0 28px 0; color: #111;49  }50  .price { font-size: 48px; font-weight: 800; margin: 10px 0 10px; }51  .muted { color: #B0B0B0; font-size: 36px; }52 53  .section { margin-top: 54px; }54  .label { font-size: 38px; font-weight: 800; letter-spacing: .6px; }55  .label span { font-weight: 600; color: #555; }56  .swatches { margin-top: 24px; display: flex; gap: 24px; }57  .swatch {58    width: 128px; height: 128px; border-radius: 28px;59    background: #E0E0E0; border: 2px solid #BDBDBD;60    display: flex; justify-content: center; align-items: center; color: #757575; font-size: 28px;61  }62 63  .delivery-title { display: flex; align-items: center; gap: 14px; font-size: 38px; font-weight: 800; }64  .pin-input {65    margin-top: 26px; display: flex; border: 2px solid #E6E6E6; border-radius: 60px; overflow: hidden;66    height: 120px;67  }68  .pin-input input {69    flex: 1; border: none; outline: none; padding: 0 36px; font-size: 36px; color: #333;70  }71  .pin-input button {72    width: 320px; background: #111; color: #fff; border: none; font-size: 38px; font-weight: 700;73    cursor: default;74  }75  .note { margin-top: 26px; font-size: 36px; color: #333; }76 77  .accordion { margin-top: 36px; }78  .row {79    height: 124px; display: flex; align-items: center; justify-content: space-between;80    font-size: 40px; font-weight: 800; color: #222;81  }82  .divider { height: 2px; background: #EFEFEF; width: 100%; }83 84  .suggestions { margin-top: 70px; }85  .suggest-title {86    font-family: Georgia, "Times New Roman", serif;87    font-size: 64px; font-weight: 700; color: #111; margin-bottom: 26px;88  }89  .suggest-grid {90    display: grid; grid-template-columns: 1fr 1fr; gap: 28px;91  }92  .ph-img {93    height: 360px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 10px;94    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;95  }96 97  /* Sticky action bar */98  .sticky-bar {99    position: absolute; left: 0; right: 0; bottom: 110px;100    padding: 20px 36px;101  }102  .sticky-inner {103    background: #fff; border-radius: 36px; box-shadow: 0 8px 24px rgba(0,0,0,0.08);104    padding: 24px; display: flex; gap: 28px; align-items: center; justify-content: space-between;105  }106  .size-pill {107    flex: 0 0 420px; height: 120px; border: 2px solid #E5E5E5; border-radius: 60px;108    display: flex; align-items: center; justify-content: space-between; padding: 0 34px; font-size: 42px; color: #333; background: #fff;109  }110  .add-btn {111    flex: 1; height: 120px; background: #111; color: #fff; border: none; border-radius: 60px;112    font-size: 44px; font-weight: 800; letter-spacing: .5px; cursor: default;113  }114 115  /* Home indicator */116  .home-indicator {117    position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);118    width: 360px; height: 10px; border-radius: 6px; background: #111; opacity: .12;119  }120 121  /* Simple resets for buttons */122  button { font-family: inherit; }123  /* SVG defaults */124  svg { width: 44px; height: 44px; stroke: #111; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }125  .chev svg { width: 40px; height: 40px; opacity: .7; }126</style>127</head>128<body>129<div id="render-target">130 131  <!-- Status bar mock -->132  <div class="status-bar">133    <div class="status-left">8:20</div>134    <div class="status-right">135      <span class="dot"></span><span class="dot" style="opacity:.5"></span><span class="dot" style="opacity:.2"></span>136      <span style="font-size: 30px;">🌐</span>137      <span style="width:18px;height:18px;background:#777;border-radius:50%;display:inline-block;"></span>138      <span style="font-size:32px;">📶</span>139      <span style="font-size:32px;">🔋</span>140    </div>141  </div>142 143  <!-- Top bar -->144  <div class="topbar">145    <button class="icon-btn" aria-label="Back">146      <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>147    </button>148    <div class="right-icons">149      <button class="icon-btn" aria-label="Share">150        <svg viewBox="0 0 24 24"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/>151          <path d="M12 16V4"/><path d="M8 8l4-4 4 4"/></svg>152      </button>153      <button class="icon-btn bag" aria-label="Bag">154        <svg viewBox="0 0 24 24"><path d="M6 8h12l-1 12H7L6 8z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>155        <span class="badge">1</span>156      </button>157    </div>158  </div>159 160  <div class="content">161    <div class="title">Denim jacket with Raw Hem</div>162 163    <div class="price">MRP ₹1,690</div>164    <div class="muted">Inclusive of all taxes</div>165 166    <div class="section color-section">167      <div class="label">COLOR : <span>Denim Light Blue</span></div>168      <div class="swatches">169        <div class="swatch">[Swatch]</div>170      </div>171    </div>172 173    <div class="section">174      <div class="delivery-title">DELIVERY INFO175        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01"/><path d="M12 12v4"/></svg>176      </div>177 178      <div class="pin-input">179        <input type="text" placeholder="Enter a pincode to check" aria-label="Pincode">180        <button>Check</button>181      </div>182      <div class="note">Fast Delivery is available on this product!</div>183    </div>184 185    <div class="accordion">186      <div class="row">187        <span>SERVICE & POLICY</span>188        <span class="chev"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></span>189      </div>190      <div class="divider"></div>191 192      <div class="row">193        <span>ABOUT THIS PRODUCT</span>194        <span class="chev"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></span>195      </div>196      <div class="divider"></div>197 198      <div class="row">199        <span>PRODUCT MEASUREMENTS</span>200        <span class="chev"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></span>201      </div>202      <div class="divider"></div>203    </div>204 205    <div class="suggestions">206      <div class="suggest-title">You might also like</div>207      <div class="suggest-grid">208        <div class="ph-img">[IMG: Similar Product]</div>209        <div class="ph-img">[IMG: Similar Product]</div>210      </div>211    </div>212  </div>213 214  <!-- Sticky action area -->215  <div class="sticky-bar">216    <div class="sticky-inner">217      <div class="size-pill">218        <span>S</span>219        <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>220      </div>221      <button class="add-btn">ADD TO BAG</button>222    </div>223  </div>224 225  <div class="home-indicator"></div>226</div>227</body>228</html>