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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";16    color: #111;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0;23    width: 100%;24    height: 140px;25    background: #DADADA;26    padding: 0 36px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31  }32  .status-left, .status-right {33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .status-time {38    font-size: 40px;39    font-weight: 600;40    color: #2B2B2B;41  }42  .status-icon {43    width: 38px; height: 38px;44    display: inline-flex;45    align-items: center; justify-content: center;46  }47 48  /* Product hero image area */49  .product-hero {50    position: absolute;51    top: 140px;52    left: 0;53    width: 1080px;54    height: 1180px;55    background: #E0E0E0;56    border: 1px solid #BDBDBD;57    box-sizing: border-box;58    display: flex;59    align-items: center;60    justify-content: center;61    color: #757575;62    font-size: 40px;63  }64 65  /* Overlay controls */66  .overlay-icon {67    position: absolute;68    width: 80px; height: 80px;69    display: flex;70    align-items: center; justify-content: center;71    color: #111;72  }73  .back-btn { top: 190px; left: 36px; }74  .bag-btn { top: 190px; right: 36px; }75 76  /* Carousel dots */77  .pager-dots {78    position: absolute;79    left: 60px;80    top: 620px;81    display: flex;82    flex-direction: column;83    gap: 28px;84  }85  .dot {86    width: 22px; height: 22px;87    border-radius: 50%;88    border: 4px solid #111;89    background: transparent;90  }91  .dot.active {92    background: #111;93  }94 95  /* Favorite floating button */96  .fav-btn {97    position: absolute;98    right: 36px;99    bottom: 80px;100    width: 150px; height: 150px;101    background: #FFFFFF;102    border-radius: 50%;103    box-shadow: 0 8px 24px rgba(0,0,0,0.12);104    display: flex; align-items: center; justify-content: center;105    border: 1px solid #E6E6E6;106  }107 108  /* Details sheet */109  .details {110    position: absolute;111    left: 0;112    top: 1320px;113    width: 100%;114    background: #FFFFFF;115    border-top-left-radius: 36px;116    border-top-right-radius: 36px;117    box-shadow: 0 -8px 24px rgba(0,0,0,0.06);118    padding: 40px 40px 220px;119    box-sizing: border-box;120  }121  .drag-handle {122    width: 180px;123    height: 14px;124    background: #1E1E1E;125    border-radius: 8px;126    margin: 0 auto 40px;127  }128  .title-price {129    display: flex;130    align-items: flex-start;131    justify-content: space-between;132    gap: 24px;133    margin-top: 10px;134  }135  .product-title {136    font-size: 56px;137    font-weight: 600;138    color: #111;139    line-height: 1.2;140  }141  .price-box {142    text-align: right;143    min-width: 320px;144  }145  .old-price {146    font-size: 44px;147    color: #8E8E8E;148    text-decoration: line-through;149  }150  .new-price {151    font-size: 48px;152    color: #D84C3F;153    font-weight: 700;154    margin-top: 6px;155  }156  .meta-row {157    display: flex;158    align-items: center;159    justify-content: space-between;160    margin-top: 40px;161  }162  .swatch {163    width: 110px;164    height: 110px;165    border-radius: 55px;166    background: #D9D9D9;167    border: 4px solid #111;168    box-sizing: border-box;169  }170  .color-name {171    font-size: 40px;172    color: #B0B0B0;173  }174  .add-btn {175    margin-top: 60px;176    width: 100%;177    height: 150px;178    background: #111111;179    color: #FFFFFF;180    font-size: 48px;181    font-weight: 600;182    border: none;183    border-radius: 8px;184    letter-spacing: 0.5px;185  }186 187  /* Bottom home indicator */188  .home-indicator {189    position: absolute;190    bottom: 24px;191    left: 50%;192    transform: translateX(-50%);193    width: 240px;194    height: 18px;195    background: #111111;196    border-radius: 12px;197    opacity: 0.9;198  }199</style>200</head>201<body>202<div id="render-target">203 204  <!-- Status bar -->205  <div class="status-bar">206    <div class="status-left">207      <div class="status-time">11:09</div>208      <!-- Simple square "B" badge -->209      <div class="status-icon" aria-label="Badge">210        <svg width="38" height="38" viewBox="0 0 24 24">211          <rect x="2" y="2" width="20" height="20" rx="3" fill="#FFF" stroke="#666"/>212          <text x="9" y="16" font-size="12" font-weight="700" fill="#666">B</text>213        </svg>214      </div>215      <!-- Envelope icon -->216      <div class="status-icon" aria-label="Envelope">217        <svg width="38" height="38" viewBox="0 0 24 24">218          <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#666"/>219          <path d="M3 7l9 6 9-6" fill="none" stroke="#666"/>220        </svg>221      </div>222      <!-- Lightning N icon -->223      <div class="status-icon" aria-label="N">224        <svg width="38" height="38" viewBox="0 0 24 24">225          <text x="9" y="16" font-size="12" font-weight="700" fill="#666">N</text>226        </svg>227      </div>228      <!-- Dot -->229      <div class="status-icon" aria-label="Dot">230        <svg width="38" height="38" viewBox="0 0 24 24">231          <circle cx="12" cy="12" r="3" fill="#666"/>232        </svg>233      </div>234    </div>235    <div class="status-right">236      <!-- Wi-Fi -->237      <div class="status-icon" aria-label="Wi-Fi">238        <svg width="38" height="38" viewBox="0 0 24 24">239          <path d="M3 9c5-5 13-5 18 0" fill="none" stroke="#666" stroke-width="2"/>240          <path d="M6 12c3-3 9-3 12 0" fill="none" stroke="#666" stroke-width="2"/>241          <path d="M9 15c2-2 4-2 6 0" fill="none" stroke="#666" stroke-width="2"/>242          <circle cx="12" cy="18" r="1.5" fill="#666"/>243        </svg>244      </div>245      <!-- Battery -->246      <div class="status-icon" aria-label="Battery">247        <svg width="38" height="38" viewBox="0 0 24 24">248          <rect x="3" y="7" width="16" height="10" rx="2" fill="none" stroke="#666"/>249          <rect x="5" y="9" width="12" height="6" rx="1" fill="#666"/>250          <rect x="20" y="10" width="2" height="4" rx="1" fill="#666"/>251        </svg>252      </div>253    </div>254  </div>255 256  <!-- Product hero image -->257  <div class="product-hero">258    [IMG: Model wearing light heather grey cotton pajama set]259    <!-- Back arrow -->260    <div class="overlay-icon back-btn">261      <svg width="60" height="60" viewBox="0 0 24 24">262        <path d="M15 6l-6 6 6 6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>263      </svg>264    </div>265    <!-- Bag icon -->266    <div class="overlay-icon bag-btn">267      <svg width="60" height="60" viewBox="0 0 24 24">268        <path d="M6 8h12v12H6z" fill="none" stroke="#333" stroke-width="2"/>269        <path d="M9 8V6a3 3 0 0 1 6 0v2" fill="none" stroke="#333" stroke-width="2"/>270      </svg>271    </div>272 273    <!-- Carousel dots -->274    <div class="pager-dots">275      <div class="dot active"></div>276      <div class="dot"></div>277      <div class="dot"></div>278      <div class="dot"></div>279      <div class="dot"></div>280      <div class="dot"></div>281      <div class="dot"></div>282    </div>283 284    <!-- Favorite button -->285    <div class="fav-btn" aria-label="Add to wishlist">286      <svg width="70" height="70" viewBox="0 0 24 24">287        <path d="M12 20s-7-4.5-7-9a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 19 11c0 4.5-7 9-7 9z" fill="none" stroke="#333" stroke-width="2" stroke-linejoin="round"/>288      </svg>289    </div>290  </div>291 292  <!-- Details section -->293  <div class="details">294    <div class="drag-handle"></div>295 296    <div class="title-price">297      <div class="product-title">Cotton pajama pack</div>298      <div class="price-box">299        <div class="old-price">US$ 69.99</div>300        <div class="new-price">US$ 35.99</div>301      </div>302    </div>303 304    <div class="meta-row">305      <div class="swatch" title="Light Heather Grey"></div>306      <div class="color-name">Light Heather Grey</div>307    </div>308 309    <button class="add-btn">Add</button>310  </div>311 312  <!-- Home indicator -->313  <div class="home-indicator"></div>314</div>315</body>316</html>