GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Product Detail UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    border-radius: 0;14    box-shadow: none;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #000;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30    font-weight: 600;31    letter-spacing: 0.2px;32  }33  .status-left { font-size: 44px; }34  .status-right {35    margin-left: auto;36    display: flex;37    align-items: center;38    gap: 26px;39  }40  .status-icon svg { width: 48px; height: 48px; fill: #fff; }41 42  /* Image area */43  .image-area {44    position: absolute;45    top: 120px;46    left: 0;47    width: 1080px;48    height: 1280px;49    background: #fff;50  }51  .product-photo {52    position: absolute;53    left: 0;54    top: 0;55    width: 1080px;56    height: 1280px;57    background: #E0E0E0;58    border: 1px solid #BDBDBD;59    display: flex;60    justify-content: center;61    align-items: center;62    color: #757575;63    font-size: 40px;64    text-align: center;65    padding: 0 40px;66    box-sizing: border-box;67  }68 69  /* Top overlay controls */70  .top-controls {71    position: absolute;72    top: 140px; /* just below status bar */73    left: 0;74    width: 100%;75    padding: 0 30px;76    display: flex;77    justify-content: space-between;78    align-items: center;79    pointer-events: none;80  }81  .icon-btn {82    width: 96px;83    height: 96px;84    border-radius: 48px;85    display: flex;86    justify-content: center;87    align-items: center;88    pointer-events: auto;89  }90  .back-btn svg, .share-btn svg { width: 56px; height: 56px; fill: #333; }91 92  /* Carousel dots */93  .carousel-dots {94    position: absolute;95    bottom: 70px;96    left: 50%;97    transform: translateX(-50%);98    display: flex;99    gap: 24px;100    align-items: center;101  }102  .dot {103    width: 28px;104    height: 28px;105    border-radius: 50%;106    background: #CFCFCF;107    opacity: 0.8;108  }109  .dot.active {110    width: 36px;111    height: 36px;112    border: 4px solid #000;113    background: #fff;114    box-sizing: border-box;115  }116 117  /* Dark details panel */118  .details {119    position: absolute;120    left: 0;121    top: 1400px;122    width: 1080px;123    height: 1000px;124    background: #141414;125    color: #fff;126    box-sizing: border-box;127    padding: 60px 54px 40px 54px;128  }129  .likes-pill {130    position: absolute;131    right: 54px;132    top: -60px;133    background: #2A2A2A;134    color: #fff;135    border-radius: 60px;136    padding: 22px 34px;137    font-size: 44px;138    display: flex;139    align-items: center;140    gap: 22px;141    box-shadow: 0 8px 16px rgba(0,0,0,0.35);142  }143  .likes-pill svg { width: 44px; height: 44px; fill: #fff; }144 145  .section-title {146    font-size: 40px;147    letter-spacing: 1px;148    color: #BFBFBF;149    margin-bottom: 24px;150  }151  .colour-value {152    font-size: 44px;153    color: #EAEAEA;154  }155 156  .thumbs {157    display: flex;158    gap: 30px;159    margin-top: 34px;160    margin-bottom: 50px;161  }162  .thumb {163    width: 210px;164    height: 270px;165    background: #E0E0E0;166    border: 2px solid #BDBDBD;167    display: flex;168    align-items: center;169    justify-content: center;170    color: #757575;171    font-size: 32px;172  }173  .thumb.selected {174    border: 6px solid #D0A36A;175  }176 177  .product-name {178    font-size: 56px;179    line-height: 72px;180    margin-top: 12px;181    margin-bottom: 24px;182    color: #FFFFFF;183  }184  .price {185    font-size: 56px;186    font-weight: 700;187    margin-bottom: 44px;188  }189 190  .size-row {191    display: flex;192    align-items: center;193    justify-content: space-between;194    border-top: 1px solid #2A2A2A;195    border-bottom: 1px solid #2A2A2A;196    padding: 34px 8px;197    margin-bottom: 40px;198  }199  .size-row .label {200    font-size: 44px;201    color: #EDEDED;202    letter-spacing: 1px;203  }204  .chev svg { width: 40px; height: 40px; fill: #CFCFCF; }205 206  .add-btn {207    width: 972px;208    height: 120px;209    background: #2FA24B;210    border-radius: 14px;211    display: flex;212    align-items: center;213    justify-content: center;214    font-size: 50px;215    font-weight: 700;216    color: #ffffff;217    margin: 0 auto;218  }219 220  .floating-fav {221    position: absolute;222    right: 42px;223    bottom: 46px;224    width: 120px;225    height: 120px;226    border-radius: 60px;227    background: #2A2A2A;228    display: flex;229    justify-content: center;230    align-items: center;231  }232  .floating-fav svg { width: 54px; height: 54px; fill: #fff; }233</style>234</head>235<body>236<div id="render-target">237 238  <!-- Status bar -->239  <div class="status-bar">240    <div class="status-left">7:47</div>241    <div class="status-right">242      <div class="status-icon">243        <!-- WiFi icon -->244        <svg viewBox="0 0 24 24">245          <path d="M12 18l-2 2 2 2 2-2-2-2zm-6-6l2 2a6 6 0 0 1 8 0l2-2a8 8 0 0 0-12 0zm-4-4l2 2a12 12 0 0 1 16 0l2-2a14 14 0 0 0-20 0z"/>246        </svg>247      </div>248      <div class="status-icon">249        <!-- Cellular icon -->250        <svg viewBox="0 0 24 24">251          <path d="M3 20h2V10H3v10zm4 0h2V6H7v14zm4 0h2V3h-2v17zm4 0h2V13h-2v7zm4 0h2V8h-2v12z"/>252        </svg>253      </div>254      <div class="status-icon">255        <!-- Battery icon -->256        <svg viewBox="0 0 24 24">257          <path d="M20 7h2v10h-2V7zm-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 12H4V7h14v10z"/>258        </svg>259      </div>260    </div>261  </div>262 263  <!-- Product image and overlays -->264  <div class="image-area">265    <div class="product-photo">[IMG: Brown formal derby shoes on model with trousers]</div>266 267    <!-- Top overlay controls -->268    <div class="top-controls">269      <div class="icon-btn back-btn">270        <svg viewBox="0 0 24 24">271          <path d="M15 19l-7-7 7-7v14z"/>272        </svg>273      </div>274      <div class="icon-btn share-btn">275        <!-- Simple share icon -->276        <svg viewBox="0 0 24 24">277          <path d="M18 16a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm-12-6a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm12-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM7.6 11.5l8.8 4.4M16.4 8.1L7.6 12.5" stroke="#333" stroke-width="2" fill="none"/>278        </svg>279      </div>280    </div>281 282    <!-- Carousel dots -->283    <div class="carousel-dots">284      <div class="dot active"></div>285      <div class="dot"></div>286      <div class="dot"></div>287      <div class="dot"></div>288      <div class="dot"></div>289    </div>290  </div>291 292  <!-- Likes pill -->293  <div class="likes-pill" style="top: 1320px;">294    <span>57</span>295    <svg viewBox="0 0 24 24">296      <path d="M12 21s-6.7-4.6-9.3-7.3A6 6 0 0 1 12 5a6 6 0 0 1 9.3 8.7C18.7 16.4 12 21 12 21z"/>297    </svg>298  </div>299 300  <!-- Details panel -->301  <div class="details">302    <div class="section-title">COLOUR: <span class="colour-value">Mid Brown</span></div>303 304    <div class="thumbs">305      <div class="thumb">[IMG: Black shoe]</div>306      <div class="thumb selected">[IMG: Brown shoe]</div>307    </div>308 309    <div class="product-name">New Look plain formal derby in brown</div>310    <div class="price">£29.99</div>311 312    <div class="size-row">313      <div class="label">SIZE</div>314      <div class="chev">315        <svg viewBox="0 0 24 24">316          <path d="M7 10l5 5 5-5H7z"/>317        </svg>318      </div>319    </div>320 321    <div class="add-btn">ADD TO BAG</div>322 323    <div class="floating-fav">324      <svg viewBox="0 0 24 24">325        <path d="M12 21s-6.7-4.6-9.3-7.3A6 6 0 0 1 12 5a6 6 0 0 1 9.3 8.7C18.7 16.4 12 21 12 21z"/>326      </svg>327    </div>328  </div>329 330</div>331</body>332</html>