GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #ffffff;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15    color: #111;16    box-sizing: border-box;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 130px;26    background: #d9d9d9;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 40px;31    box-sizing: border-box;32    font-size: 34px;33    color: #333;34  }35  .status-icons { display: flex; align-items: center; gap: 28px; }36  .status-dot { width: 16px; height: 16px; background: #bfbfbf; border-radius: 50%; }37 38  /* Hero image area */39  .product-hero {40    position: absolute;41    top: 130px;42    left: 0;43    width: 100%;44    height: 1320px;45  }46  .image-placeholder {47    position: absolute;48    inset: 0;49    background: #E0E0E0;50    border: 1px solid #BDBDBD;51    display: flex;52    align-items: center;53    justify-content: center;54    color: #757575;55    font-size: 36px;56    letter-spacing: 0.3px;57  }58 59  /* Overlay controls */60  .icon-btn {61    position: absolute;62    width: 64px;63    height: 64px;64    display: flex;65    align-items: center;66    justify-content: center;67  }68  .back-arrow { top: 180px; left: 40px; }69  .bag-icon { top: 180px; right: 40px; }70 71  .nav-dots {72    position: absolute;73    left: 60px;74    top: 520px;75    display: flex;76    flex-direction: column;77    gap: 30px;78  }79  .nav-dots span {80    width: 22px;81    height: 22px;82    border: 3px solid #000;83    border-radius: 50%;84    box-sizing: border-box;85  }86  .nav-dots .active { background: #000; }87 88  .wishlist-fab {89    position: absolute;90    right: 40px;91    bottom: 40px;92    width: 150px;93    height: 150px;94    border-radius: 50%;95    background: #fff;96    box-shadow: 0 6px 20px rgba(0,0,0,0.15);97    display: flex;98    align-items: center;99    justify-content: center;100  }101 102  /* Details sheet */103  .details {104    position: absolute;105    left: 0;106    top: 1450px;107    width: 100%;108    height: 950px;109    background: #fff;110    padding: 0 54px;111    box-sizing: border-box;112  }113  .handle {114    position: absolute;115    top: -24px;116    left: 50%;117    transform: translateX(-50%);118    width: 160px;119    height: 12px;120    background: #262626;121    border-radius: 6px;122  }123  .title-price {124    margin-top: 60px;125    display: flex;126    align-items: flex-start;127    justify-content: space-between;128  }129  .product-title {130    font-size: 54px;131    font-weight: 600;132  }133  .price-block { text-align: right; }134  .price-old {135    color: #8f8f8f;136    text-decoration: line-through;137    font-size: 34px;138  }139  .price-new {140    display: block;141    margin-top: 6px;142    color: #C83C30;143    font-size: 44px;144    font-weight: 600;145  }146 147  .variant-row {148    margin-top: 80px;149    display: flex;150    align-items: center;151    justify-content: space-between;152  }153  .swatch {154    width: 92px;155    height: 92px;156    border-radius: 50%;157    background: #d9d9d9;158    border: 3px solid #000;159    box-sizing: border-box;160  }161  .variant-label {162    font-size: 38px;163    color: #9c9c9c;164  }165 166  .wishlist-banner {167    margin-top: 70px;168    height: 140px;169    background: #111;170    color: #fff;171    display: flex;172    align-items: center;173    justify-content: space-between;174    padding: 0 40px;175    box-sizing: border-box;176  }177  .wishlist-banner .text { font-size: 36px; }178  .wishlist-banner .go {179    font-size: 36px;180    padding: 0 40px;181    border-left: 2px solid #333;182  }183 184  /* Home indicator */185  .home-indicator {186    position: absolute;187    bottom: 30px;188    left: 50%;189    transform: translateX(-50%);190    width: 360px;191    height: 18px;192    background: #000;193    border-radius: 9px;194    opacity: 0.85;195  }196 197  svg { width: 64px; height: 64px; }198</style>199</head>200<body>201<div id="render-target">202 203  <div class="status-bar">204    <div>11:11</div>205    <div class="status-icons">206      <span class="status-dot"></span>207      <span class="status-dot"></span>208      <span class="status-dot"></span>209    </div>210  </div>211 212  <div class="product-hero">213    <div class="image-placeholder">[IMG: Grey cotton pajama set on model]</div>214 215    <div class="icon-btn back-arrow">216      <svg viewBox="0 0 24 24">217        <path d="M15 5 L7 12 L15 19" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>218      </svg>219    </div>220 221    <div class="icon-btn bag-icon">222      <svg viewBox="0 0 24 24">223        <path d="M7 8h10l1 11H6z" fill="none" stroke="#111" stroke-width="2"/>224        <path d="M9 8V6a3 3 0 016 0v2" fill="none" stroke="#111" stroke-width="2"/>225      </svg>226    </div>227 228    <div class="nav-dots">229      <span class="active"></span>230      <span></span>231      <span></span>232      <span></span>233      <span></span>234      <span></span>235    </div>236 237    <div class="wishlist-fab">238      <svg viewBox="0 0 24 24">239        <path d="M12 21s-7-4.7-7-10a4.5 4.5 0 017-3.7A4.5 4.5 0 0119 11c0 5.3-7 10-7 10z" fill="#111"/>240      </svg>241    </div>242  </div>243 244  <div class="details">245    <div class="handle"></div>246 247    <div class="title-price">248      <div class="product-title">Cotton pajama pack</div>249      <div class="price-block">250        <div class="price-old">US$ 69.99</div>251        <span class="price-new">US$ 35.99</span>252      </div>253    </div>254 255    <div class="variant-row">256      <div class="swatch"></div>257      <div class="variant-label">Light Heather Grey</div>258    </div>259 260    <div class="wishlist-banner">261      <div class="text">Item added to wishlist</div>262      <div class="go">GO</div>263    </div>264  </div>265 266  <div class="home-indicator"></div>267</div>268</body>269</html>