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 { 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: Arial, Helvetica, sans-serif;16    color: #111;17  }18 19  /* Top bar */20  .topbar {21    height: 120px;22    display: flex;23    align-items: center;24    padding: 0 40px;25    box-sizing: border-box;26  }27  .topbar .left {28    display: flex;29    align-items: center;30    gap: 24px;31  }32  .topbar .right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 38px;37  }38  .icon-btn {39    width: 48px;40    height: 48px;41    border: none;42    background: transparent;43    padding: 0;44    cursor: default;45  }46  .divider {47    height: 1px;48    background: #CFCFCF;49    margin: 0 0 0 0;50  }51 52  /* Add / Shopping Bag bar */53  .action-bar {54    display: flex;55    width: 100%;56    height: 120px;57    border-top: 1px solid #CFCFCF;58    border-bottom: 1px solid #CFCFCF;59  }60  .action-bar .cell {61    width: 50%;62    display: flex;63    align-items: center;64    justify-content: center;65    font-size: 34px;66    letter-spacing: 1px;67  }68  .action-bar .cell + .cell {69    border-left: 1px solid #CFCFCF;70  }71  .action-bar .muted {72    font-size: 26px;73    color: #666;74  }75 76  /* Content */77  .content {78    padding: 40px;79    box-sizing: border-box;80  }81  .label {82    font-size: 22px;83    letter-spacing: 2px;84    color: #777;85    text-transform: uppercase;86    margin-top: 26px;87  }88  .title {89    font-size: 38px;90    letter-spacing: 1px;91    text-transform: uppercase;92    margin-top: 20px;93  }94  .price {95    font-size: 28px;96    color: #333;97    margin-top: 16px;98  }99  .section-title {100    font-size: 32px;101    text-transform: uppercase;102    margin-top: 60px;103  }104  .description {105    font-size: 28px;106    line-height: 1.6;107    color: #333;108    margin-top: 24px;109    max-width: 920px;110  }111  .sku {112    font-size: 24px;113    color: #777;114    margin-top: 18px;115  }116 117  /* Accordion */118  .accordion {119    margin-top: 60px;120  }121  .accordion .row {122    display: flex;123    justify-content: space-between;124    align-items: center;125    border: 1px solid #BDBDBD;126    padding: 30px 32px;127    font-size: 30px;128    margin-bottom: 24px;129  }130  .accordion .plus {131    font-size: 36px;132    color: #555;133  }134 135  .help {136    font-size: 28px;137    color: #555;138    margin: 70px 0 0 0;139    letter-spacing: 1px;140  }141 142  .interest-title {143    text-align: center;144    font-size: 30px;145    letter-spacing: 1px;146    text-transform: uppercase;147    color: #333;148    margin: 120px 0 40px;149  }150 151  /* Suggestions grid */152  .suggestions {153    display: grid;154    grid-template-columns: 1fr 1fr;155    border-top: 1px solid #D0D0D0;156    border-bottom: 1px solid #E0E0E0;157  }158  .card {159    height: 720px;160    padding: 30px 30px 80px;161    box-sizing: border-box;162    position: relative;163  }164  .card + .card {165    border-left: 1px solid #D0D0D0;166  }167  .card .tag {168    font-size: 20px;169    color: #777;170    letter-spacing: 2px;171    text-transform: uppercase;172    margin-bottom: 20px;173  }174  .img-placeholder {175    width: 100%;176    height: 520px;177    background: #E0E0E0;178    border: 1px solid #BDBDBD;179    display: flex;180    align-items: center;181    justify-content: center;182    color: #757575;183    font-size: 28px;184    text-align: center;185  }186  .circle-plus {187    position: absolute;188    bottom: 22px;189    left: 50%;190    transform: translateX(-50%);191    width: 78px;192    height: 78px;193    border-radius: 50%;194    border: 1px solid #CFCFCF;195    display: flex;196    align-items: center;197    justify-content: center;198    color: #666;199    font-size: 42px;200    background: #fff;201  }202 203  /* Bottom handle */204  .bottom-handle {205    position: absolute;206    bottom: 26px;207    left: 50%;208    transform: translateX(-50%);209    width: 240px;210    height: 12px;211    background: #C7C7C7;212    border-radius: 8px;213  }214</style>215</head>216<body>217<div id="render-target">218 219  <!-- Header with close/share/bookmark -->220  <div class="topbar">221    <div class="left">222      <button class="icon-btn" aria-label="Close">223        <svg viewBox="0 0 24 24" width="44" height="44">224          <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>225        </svg>226      </button>227    </div>228    <div class="right">229      <button class="icon-btn" aria-label="Share">230        <svg viewBox="0 0 24 24" width="44" height="44">231          <circle cx="6" cy="12" r="2" fill="none" stroke="#111" stroke-width="2"/>232          <circle cx="18" cy="6" r="2" fill="none" stroke="#111" stroke-width="2"/>233          <circle cx="18" cy="18" r="2" fill="none" stroke="#111" stroke-width="2"/>234          <path d="M8 12 L16 7 M8 12 L16 17" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>235        </svg>236      </button>237      <button class="icon-btn" aria-label="Bookmark">238        <svg viewBox="0 0 24 24" width="44" height="44">239          <path d="M6 3 H18 V21 L12 17 L6 21 Z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>240        </svg>241      </button>242    </div>243  </div>244  <div class="divider"></div>245 246  <!-- Action bar -->247  <div class="action-bar">248    <div class="cell">ADD</div>249    <div class="cell">250      <div>251        <div>SHOPPING BAG</div>252        <div class="muted">(1)</div>253      </div>254    </div>255  </div>256 257  <!-- Product content -->258  <div class="content">259    <div class="label">Few items left</div>260    <div class="title">Slim satin effect shirt ZW collection</div>261    <div class="price">49.90 USD</div>262 263    <div class="section-title">Zara Woman Collection</div>264    <div class="description">265      Slim shirt made of 100% viscose fabric. Lapel collar with long sleeves and vented cuffs. Asymmetric hem. Front button closure.266    </div>267    <div class="sku">Ecru | 4786/322</div>268 269    <div class="accordion">270      <div class="row">271        <div>COMPOSITION &amp; CARE</div>272        <div class="plus">+</div>273      </div>274      <div class="row">275        <div>SHIPPING, EXCHANGES AND RETURNS</div>276        <div class="plus">+</div>277      </div>278      <div class="row">279        <div>CHECK IN-STORE AVAILABILITY</div>280        <div class="plus">+</div>281      </div>282    </div>283 284    <div class="help">HOW CAN WE HELP YOU?</div>285 286    <div class="interest-title">YOU MIGHT BE INTERESTED IN</div>287  </div>288 289  <!-- Suggested looks -->290  <div class="suggestions">291    <div class="card">292      <div class="tag">LOOK</div>293      <div class="img-placeholder">[IMG: Black wedge ankle boot]</div>294      <div class="circle-plus">+</div>295    </div>296    <div class="card">297      <div class="tag">LOOK</div>298      <div class="img-placeholder">[IMG: Black strappy crop top]</div>299      <div class="circle-plus">+</div>300    </div>301  </div>302 303  <div class="bottom-handle"></div>304</div>305</body>306</html>