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 - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #111213;15    color: #fff;16  }17 18  /* Status bar (system) */19  .status-bar {20    height: 90px;21    background: #4a4a4a;22    color: #e6e6e6;23    font-size: 28px;24    padding: 0 28px;25    display: flex;26    align-items: center;27    justify-content: space-between;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 20px;33  }34  .dot { width: 10px; height: 10px; background: #cfcfcf; border-radius: 50%; display: inline-block; }35 36  /* App bar */37  .app-bar {38    height: 140px;39    background: #222325;40    display: flex;41    align-items: center;42    justify-content: space-between;43    padding: 0 28px;44    position: relative;45  }46  .app-left {47    display: flex;48    align-items: center;49    gap: 28px;50  }51  .icon-btn {52    width: 84px; height: 84px;53    display: flex; align-items: center; justify-content: center;54    border-radius: 12px;55  }56  .cart-wrap {57    position: relative;58  }59  .badge {60    position: absolute;61    top: -6px; right: -6px;62    width: 34px; height: 34px;63    background: #ffac2f; color: #000;64    border-radius: 50%;65    font-size: 20px;66    display: flex; align-items: center; justify-content: center;67    font-weight: bold;68    border: 2px solid #111213;69  }70 71  /* Image area */72  .image-area {73    position: relative;74    background: #ededed;75    height: 900px;76  }77  .product-img {78    position: absolute;79    left: 110px; right: 110px; top: 30px; bottom: 30px;80    background: #E0E0E0;81    border: 1px solid #BDBDBD;82    display: flex; align-items: center; justify-content: center;83    color: #757575; font-size: 40px; text-align: center;84  }85  .count-pill {86    position: absolute;87    top: 56px; right: 36px;88    background: rgba(120,120,120,0.9);89    color: #fff; padding: 16px 26px;90    border-radius: 16px;91    font-size: 32px;92  }93 94  /* Carousel dots */95  .dots {96    height: 90px;97    background: #262626;98    display: flex; justify-content: center; align-items: center;99    gap: 16px;100  }101  .dot-item {102    width: 18px; height: 18px; border-radius: 50%;103    background: #444;104  }105  .dot-item.active { background: #f5a623; }106 107  /* Details section card */108  .details {109    background: #1c1c1e;110    position: relative;111    padding: 44px 40px 200px 40px;112    border-top-left-radius: 44px;113    border-top-right-radius: 44px;114  }115  .title {116    font-size: 44px; line-height: 1.24; font-weight: 800; margin: 10px 0 28px 0;117    letter-spacing: 0.2px;118  }119  .detail-grid {120    display: grid;121    grid-template-columns: 1fr 360px;122    gap: 20px;123    align-items: start;124  }125  .price-box {126    text-align: right;127  }128  .price {129    color: #ffb54c; font-size: 44px; font-weight: 800;130  }131  .old-price {132    color: #9a9a9a; text-decoration: line-through; font-size: 30px; margin-top: 6px;133  }134  .pill {135    display: inline-block;136    margin-top: 16px;137    background: #fff; color: #111;138    border-radius: 16px;139    padding: 10px 18px;140    font-weight: 700; font-size: 26px;141  }142  .meta { font-size: 30px; color: #d8d8d8; margin: 8px 0; }143  .meta strong { color: #ffffff; }144  .meta .id { color: #f3c24d; text-decoration: none; }145  .stock {146    color: #ff472f; font-size: 30px; margin-top: 12px;147  }148 149  .ship-row {150    margin-top: 32px;151    font-size: 30px;152    display: flex; align-items: center; gap: 16px; font-weight: 700;153  }154  .flag {155    width: 46px; height: 46px; border-radius: 50%;156    background: #e0e0e0; border: 1px solid #bdbdbd;157    display: flex; align-items: center; justify-content: center;158    color: #555; font-size: 24px;159  }160  .eta {161    margin-top: 12px; color: #4caf50; font-size: 30px; font-weight: 800;162  }163  .divider {164    height: 8px; background: #3a3a3a; margin: 26px 0;165  }166  .section-label {167    color: #cfcfcf; font-size: 28px; margin: 8px 0 24px 0;168  }169 170  /* Quantity & actions row */171  .qty-row {172    display: flex; align-items: center; gap: 18px;173    justify-content: flex-end;174    margin: 20px 0;175  }176  .circle-btn {177    width: 80px; height: 80px; border-radius: 50%;178    display: flex; align-items: center; justify-content: center;179    border: 2px solid #6b6b6b; color: #ddd;180  }181  .circle-btn.gold { border-color: #d3a23d; }182  .qty-box {183    width: 108px; height: 84px; border-radius: 12px;184    border: 2px solid #7c7c7c; display: flex; align-items: center; justify-content: center;185    font-size: 34px; background: #2a2a2a;186  }187 188  .social-row {189    display: flex; align-items: center; gap: 30px;190    padding: 18px 0;191  }192  .ghost {193    width: 96px; height: 96px; border-radius: 50%;194    border: 2px solid #7a7a7a; display: flex; align-items: center; justify-content: center;195    color: #fff;196  }197 198  /* Bottom Add to Cart bar */199  .bottom-bar {200    position: absolute;201    bottom: 0; left: 0; right: 0;202    height: 130px; background: #0f0f10;203    display: flex; align-items: center; justify-content: flex-end;204    padding: 0 40px;205    border-top: 1px solid #2a2a2a;206  }207  .cta {208    font-size: 42px; font-weight: 800; letter-spacing: 1px;209  }210 211  /* Simple SVG helpers */212  svg { display: block; }213</style>214</head>215<body>216<div id="render-target">217 218  <!-- Simulated OS status bar -->219  <div class="status-bar">220    <div>8:31</div>221    <div class="status-icons">222      <span class="dot"></span>223      <span class="dot"></span>224      <span class="dot"></span>225      <span class="dot"></span>226      <span style="width:28px;height:28px;border:2px solid #e6e6e6;border-radius:4px;display:inline-block;"></span>227    </div>228  </div>229 230  <!-- App Bar -->231  <div class="app-bar">232    <div class="app-left">233      <div class="icon-btn">234        <svg width="50" height="50" viewBox="0 0 24 24" fill="#fff">235          <path d="M15.5 19L9 12l6.5-7 1.5 1.3L12.8 12l4.2 5.7z"/>236        </svg>237      </div>238      <div class="icon-btn">239        <svg width="60" height="60" viewBox="0 0 24 24" fill="#fff">240          <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h12v2H3z"/>241        </svg>242      </div>243    </div>244    <div class="cart-wrap icon-btn">245      <svg width="64" height="64" viewBox="0 0 24 24" fill="#fff">246        <path d="M7 4h10l2 6v8a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V10l2-6zm0 2l-1.2 4H18.2L17 6H7zm0 6v8h10v-8H7z"/>247      </svg>248      <div class="badge">0</div>249    </div>250  </div>251 252  <!-- Product image section -->253  <div class="image-area">254    <div class="product-img">[IMG: Blue Wireless Mouse]</div>255    <div class="count-pill">1 of 6</div>256  </div>257 258  <!-- Dots -->259  <div class="dots">260    <div class="dot-item active"></div>261    <div class="dot-item"></div>262    <div class="dot-item"></div>263    <div class="dot-item"></div>264    <div class="dot-item"></div>265  </div>266 267  <!-- Details -->268  <div class="details">269    <div class="detail-grid">270      <div>271        <div class="title">272          Microsoft Wireless Bluetooth Mouse (2022), Sculpted Design for Ultimate Comfort and Smooth Scrolling, up to 1 Year of Battery Life, 2.4G Range, Sapphire Color273        </div>274 275        <div class="meta"><strong>By:</strong> Microsoft</div>276        <div class="meta"><strong>Item Id:</strong> <span class="id">22664154</span></div>277        <div class="stock">Only 19 items left in stock.</div>278 279        <div class="ship-row">280          <div class="flag">🇺🇸</div>281          Imported from US Store282        </div>283        <div class="eta">Order now and get it around Tuesday, December 05</div>284 285        <div class="divider"></div>286        <div class="section-label">Color</div>287 288        <div class="social-row">289          <div class="ghost">290            <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">291              <path d="M12 21s-6.7-4.7-8.5-8.2C1.5 9.3 3.4 6 6.8 6c1.9 0 3 .9 3.7 2 .7-1.1 1.8-2 3.7-2 3.4 0 5.3 3.3 3.3 6.8C18.7 16.3 12 21 12 21z"/>292            </svg>293          </div>294          <div class="ghost">295            <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">296              <path d="M18 16.1c-.8 0-1.5.3-2 .8l-7.2-3.6c.1-.3.2-.6.2-.9s-.1-.6-.2-.9l7.2-3.6c.5.5 1.2.8 2 .8 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3c0 .1 0 .3.1.4L7.1 8.6C6.6 8.2 6 8 5.3 8 3.6 8 2.3 9.3 2.3 11s1.3 3 3 3c.7 0 1.3-.2 1.8-.6l8-4c0 .2-.1.4-.1.6 0 1.7 1.3 3 3 3s3-1.3 3-3-1.3-2.9-3-2.9z"/>297            </svg>298          </div>299        </div>300      </div>301 302      <div class="price-box">303        <div class="price">INR 4102.00</div>304        <div class="old-price">INR 4626.00</div>305        <span class="pill">11% OFF</span>306 307        <div class="qty-row">308          <div class="circle-btn">309            <svg width="42" height="42" viewBox="0 0 24 24" fill="#ddd"><path d="M5 11h14v2H5z"/></svg>310          </div>311          <div class="qty-box">1</div>312          <div class="circle-btn gold">313            <svg width="42" height="42" viewBox="0 0 24 24" fill="#ddd"><path d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>314          </div>315        </div>316      </div>317    </div>318 319    <!-- Bottom bar inside details -->320    <div class="bottom-bar">321      <div class="cta">ADD TO CART</div>322    </div>323  </div>324 325</div>326</body>327</html>