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 Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;13    color: #111;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 150px;30    background: #d5d5d7;31    padding: 0 32px;32    box-sizing: border-box;33    display: flex;34    align-items: center;35    justify-content: space-between;36    color: #fff;37  }38  .status-left {39    display: flex;40    align-items: center;41    gap: 28px;42    color: #fff;43    opacity: 0.95;44  }45  .status-time {46    font-size: 44px;47    font-weight: 600;48    color: #ffffff;49  }50  .status-icons {51    display: flex;52    align-items: center;53    gap: 26px;54  }55  .status-right {56    display: flex;57    align-items: center;58    gap: 26px;59    color: #ffffff;60  }61  .dot {62    width: 12px;63    height: 12px;64    background: #ffffff;65    border-radius: 50%;66    opacity: 0.9;67  }68 69  /* Floating controls */70  .floating-btn {71    position: absolute;72    top: 180px;73    width: 120px;74    height: 120px;75    background: #ffffff;76    border: 1px solid #DBDBDB;77    border-radius: 60px;78    display: flex;79    align-items: center;80    justify-content: center;81    box-shadow: 0 2px 10px rgba(0,0,0,0.05);82  }83  .btn-back { left: 36px; }84  .btn-bag-top { right: 36px; }85 86  /* Main image placeholder */87  .product-hero {88    position: absolute;89    top: 150px;90    left: 0;91    width: 1080px;92    height: 1450px;93    background: #E0E0E0;94    border-top: 1px solid #BDBDBD;95    border-bottom: 1px solid #BDBDBD;96    display: flex;97    align-items: center;98    justify-content: center;99    text-align: center;100    color: #555;101    font-size: 40px;102    padding: 0 40px;103    box-sizing: border-box;104  }105 106  /* Promo strip */107  .promo {108    position: absolute;109    top: 1600px;110    left: 0;111    width: 1080px;112    height: 320px;113    background: #ffffff;114    border-top: 1px solid #EEEEEE;115    display: flex;116    align-items: center;117    justify-content: center;118    text-align: center;119    padding: 0 80px;120    box-sizing: border-box;121  }122  .promo p {123    margin: 0;124    font-size: 40px;125    line-height: 1.4;126    color: #222;127  }128  .promo .bold {129    font-weight: 700;130  }131  .promo a {132    display: inline-block;133    margin-top: 18px;134    font-size: 36px;135    color: #1a1a1a;136    text-decoration: underline;137  }138 139  /* Action section */140  .actions {141    position: absolute;142    top: 1920px;143    left: 0;144    width: 1080px;145    height: 280px;146    background: #ffffff;147    border-top: 1px solid #efefef;148    box-sizing: border-box;149    padding: 48px 60px;150    display: flex;151    gap: 40px;152  }153  .selector {154    flex: 1 1 auto;155    height: 120px;156    border: 2px solid #E4E4E4;157    border-radius: 8px;158    display: flex;159    align-items: center;160    justify-content: space-between;161    padding: 0 28px 0 36px;162    box-sizing: border-box;163    color: #222;164    background: #ffffff;165  }166  .selector .label {167    font-size: 36px;168  }169  .chevron {170    width: 36px;171    height: 36px;172    opacity: 0.75;173  }174 175  .btn-add {176    width: 360px;177    height: 120px;178    background: #ECECEC;179    border: 2px solid #E4E4E4;180    border-radius: 8px;181    display: flex;182    align-items: center;183    justify-content: center;184  }185 186  /* Device home area */187  .home-area {188    position: absolute;189    left: 0;190    bottom: 0;191    width: 1080px;192    height: 100px;193    background: #000000;194    display: flex;195    align-items: center;196    justify-content: center;197  }198  .home-pill {199    width: 240px;200    height: 14px;201    background: #ffffff;202    border-radius: 16px;203    opacity: 0.9;204  }205</style>206</head>207<body>208<div id="render-target">209  <!-- Status bar -->210  <div class="status-bar">211    <div class="status-left">212      <div class="status-time">3:52</div>213      <div class="status-icons">214        <!-- play icon -->215        <svg width="36" height="36" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">216          <path d="M8 5v14l11-7z"></path>217        </svg>218        <!-- calendar icon -->219        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" aria-hidden="true">220          <rect x="3" y="4" width="18" height="17" rx="2"></rect>221          <line x1="3" y1="9" x2="21" y2="9"></line>222          <line x1="8" y1="4" x2="8" y2="2"></line>223          <line x1="16" y1="4" x2="16" y2="2"></line>224        </svg>225        <!-- docs icon -->226        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" aria-hidden="true">227          <rect x="6" y="4" width="12" height="16" rx="2"></rect>228          <line x1="9" y1="8" x2="15" y2="8"></line>229          <line x1="9" y1="12" x2="15" y2="12"></line>230          <line x1="9" y1="16" x2="13" y2="16"></line>231        </svg>232        <div class="dot"></div>233      </div>234    </div>235    <div class="status-right">236      <!-- WiFi -->237      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" aria-hidden="true">238        <path d="M2 8.82a15 15 0 0 1 20 0"></path>239        <path d="M5 12.2a10 10 0 0 1 14 0"></path>240        <path d="M8.5 15.5a5 5 0 0 1 7 0"></path>241        <circle cx="12" cy="19" r="1.5" fill="#ffffff" stroke="none"></circle>242      </svg>243      <!-- Battery -->244      <svg width="44" height="44" viewBox="0 0 28 18" fill="none" stroke="#ffffff" stroke-width="2" aria-hidden="true">245        <rect x="1" y="3" width="22" height="12" rx="2"></rect>246        <rect x="3" y="5" width="14" height="8" fill="#ffffff" stroke="none"></rect>247        <rect x="23" y="7" width="3" height="6" rx="1" fill="#ffffff" stroke="none"></rect>248      </svg>249    </div>250  </div>251 252  <!-- Floating top-left back button -->253  <div class="floating-btn btn-back" aria-label="Back">254    <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5" aria-hidden="true">255      <path d="M15 18l-6-6 6-6"></path>256    </svg>257  </div>258 259  <!-- Floating top-right bag button -->260  <div class="floating-btn btn-bag-top" aria-label="Bag">261    <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" aria-hidden="true">262      <path d="M6 8h12l-1 12H7L6 8z"></path>263      <path d="M9 8V6a3 3 0 0 1 6 0v2"></path>264    </svg>265  </div>266 267  <!-- Main product image placeholder -->268  <div class="product-hero">269    [IMG: Model wearing charcoal dress shirt and black trousers]270  </div>271 272  <!-- Promo banner -->273  <div class="promo">274    <div>275      <p>Shop now, <span class="bold">pay in 30 days.</span> For members with H&amp;M × Klarna.</p>276      <a href="#">Learn more</a>277    </div>278  </div>279 280  <!-- Action controls -->281  <div class="actions">282    <div class="selector" role="button" aria-label="Select size">283      <div class="label">Select size</div>284      <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">285        <path d="M6 9l6 6 6-6"></path>286      </svg>287    </div>288    <div class="btn-add" role="button" aria-label="Add to bag">289      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" aria-hidden="true">290        <path d="M6 8h12l-1 12H7L6 8z"></path>291        <path d="M9 8V6a3 3 0 0 1 6 0v2"></path>292      </svg>293    </div>294  </div>295 296  <!-- Device home area -->297  <div class="home-area">298    <div class="home-pill"></div>299  </div>300</div>301</body>302</html>