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 UI</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 actions */20  .top-actions { position: absolute; top: 200px; left: 60px; right: 60px; height: 60px; }21  .close-btn { position: absolute; left: 0; width: 60px; height: 60px; }22  .right-icons { position: absolute; right: 0; display: flex; gap: 40px; align-items: center; }23 24  /* Placeholder product image */25  .product-photo {26    position: absolute;27    left: 60px;28    top: 320px;29    width: 960px;30    height: 1400px;31    background: #E0E0E0;32    border: 1px solid #BDBDBD;33    display: flex;34    align-items: center;35    justify-content: center;36    color: #757575;37    font-size: 32px;38    letter-spacing: 0.5px;39  }40 41  /* Bottom action bar */42  .bottom-actions {43    position: absolute;44    left: 0;45    top: 1820px;46    width: 1080px;47    height: 140px;48    border-top: 1px solid #D7D7D7;49    display: flex;50  }51  .bottom-actions .btn {52    flex: 1;53    display: flex;54    align-items: center;55    justify-content: center;56    text-transform: uppercase;57    font-size: 34px;58    letter-spacing: 1px;59    color: #333;60  }61  .bottom-actions .btn + .btn { border-left: 1px solid #D7D7D7; }62 63  /* Product info section below action bar */64  .info {65    position: absolute;66    left: 60px;67    right: 60px;68    bottom: 140px;69  }70  .title {71    font-size: 34px;72    letter-spacing: 2px;73    color: #333;74    text-transform: uppercase;75    margin-bottom: 20px;76  }77  .price-row {78    display: flex;79    align-items: center;80    gap: 18px;81    margin-bottom: 24px;82  }83  .old-price {84    color: #8a8a8a;85    text-decoration: line-through;86    font-size: 28px;87  }88  .discount-pill {89    background: #000;90    color: #fff;91    border-radius: 6px;92    padding: 8px 14px;93    font-size: 26px;94    letter-spacing: 0.5px;95  }96  .vat {97    color: #9E9E9E;98    font-size: 26px;99  }100 101  /* Color swatches */102  .swatches {103    position: absolute;104    right: 60px;105    top: 0;106    display: flex;107    gap: 24px;108    align-items: flex-end;109    height: 120px;110  }111  .swatch {112    width: 72px;113    height: 72px;114    border: 1px solid #BDBDBD;115    background: #BDBDBD;116    position: relative;117  }118  .swatch.dark { background: #222; }119  .swatch.selected::after {120    content: "";121    position: absolute;122    left: 14px;123    right: 14px;124    bottom: -8px;125    height: 6px;126    background: #9E9E9E;127    border-radius: 3px;128  }129 130  /* Gesture pill */131  .gesture {132    position: absolute;133    bottom: 34px;134    left: 50%;135    transform: translateX(-50%);136    width: 360px;137    height: 16px;138    background: #9E9E9E;139    border-radius: 10px;140    opacity: 0.6;141  }142</style>143</head>144<body>145<div id="render-target">146 147  <!-- Top actions -->148  <div class="top-actions">149    <!-- Close (X) -->150    <svg class="close-btn" viewBox="0 0 24 24">151      <line x1="4" y1="4" x2="20" y2="20" stroke="#000" stroke-width="2"/>152      <line x1="20" y1="4" x2="4" y2="20" stroke="#000" stroke-width="2"/>153    </svg>154 155    <div class="right-icons">156      <!-- Share icon -->157      <svg width="48" height="48" viewBox="0 0 24 24">158        <circle cx="6" cy="12" r="2" fill="none" stroke="#000" stroke-width="1.7"/>159        <circle cx="16" cy="6" r="2" fill="none" stroke="#000" stroke-width="1.7"/>160        <circle cx="18" cy="18" r="2" fill="none" stroke="#000" stroke-width="1.7"/>161        <path d="M7.7 11.2 L14.3 7.2 M7.9 12.8 L16.2 16.8" fill="none" stroke="#000" stroke-width="1.7" stroke-linecap="round"/>162      </svg>163      <!-- Bookmark icon -->164      <svg width="48" height="48" viewBox="0 0 24 24">165        <path d="M6 4 H18 V20 L12 16 L6 20 Z" fill="none" stroke="#000" stroke-width="1.7"/>166      </svg>167    </div>168  </div>169 170  <!-- Product image placeholder -->171  <div class="product-photo">[IMG: Product Photo]</div>172 173  <!-- Bottom actions bar -->174  <div class="bottom-actions">175    <div class="btn">ADD</div>176    <div class="btn">SHOPPING BAG</div>177  </div>178 179  <!-- Product info -->180  <div class="info">181    <div class="title">SPORTY SNEAKERS</div>182    <div class="price-row">183      <div class="old-price">29.95 EUR</div>184      <div class="discount-pill">-33%&nbsp;&nbsp;19.99 EUR</div>185    </div>186    <div class="vat">VAT included / excl Shipping cost</div>187 188    <div class="swatches">189      <div class="swatch selected"></div>190      <div class="swatch dark"></div>191    </div>192  </div>193 194  <!-- Gesture pill -->195  <div class="gesture"></div>196</div>197</body>198</html>