GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Product Detail - Cotton halterneck dress</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    color: #111;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #d6d6d6;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28    font-size: 42px;29    letter-spacing: 0.5px;30  }31  .status-bar .time { color: #222; }32  .status-icons {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 26px;37  }38  .status-icons svg { width: 44px; height: 44px; fill: none; stroke: #222; stroke-width: 3; }39 40  /* Header controls */41  .header-layer {42    position: absolute;43    top: 120px;44    left: 0;45    width: 100%;46    height: 180px;47    pointer-events: none;48  }49  .icon-circle {50    position: absolute;51    width: 96px;52    height: 96px;53    border-radius: 48px;54    background: #ffffff;55    border: 1px solid #e5e5e5;56    display: flex;57    align-items: center;58    justify-content: center;59    pointer-events: auto;60  }61  .icon-circle svg { width: 52px; height: 52px; }62  .icon-left { left: 32px; top: 32px; }63  .icon-right-top { right: 32px; top: 24px; }64  .icon-right-second { right: 32px; top: 150px; }65 66  /* Main product image */67  .image-wrap {68    position: absolute;69    top: 210px;70    left: 80px;71    width: 920px;72    height: 1450px;73    display: flex;74    align-items: center;75    justify-content: center;76    background: #E0E0E0;77    border: 1px solid #BDBDBD;78    text-align: center;79    color: #666;80    font-size: 32px;81    padding: 20px;82    box-sizing: border-box;83  }84 85  /* Carousel dots */86  .dots {87    position: absolute;88    top: 1688px;89    left: 0;90    width: 100%;91    display: flex;92    justify-content: center;93    gap: 18px;94  }95  .dot {96    width: 20px; height: 20px;97    border-radius: 50%;98    background: #e9e9e9;99    border: 2px solid #d0d0d0;100  }101  .dot.active {102    background: #3e3e3e;103    border-color: #3e3e3e;104  }105 106  /* Product details card */107  .details {108    position: absolute;109    top: 1750px;110    left: 0;111    width: 100%;112    padding: 40px 48px 20px 48px;113    box-sizing: border-box;114    background: #ffffff;115  }116  .title-row {117    display: flex;118    align-items: center;119  }120  .product-title {121    font-size: 56px;122    font-weight: 700;123    color: #111;124  }125  .share {126    margin-left: auto;127    width: 72px; height: 72px;128    display: inline-flex;129    align-items: center; justify-content: center;130  }131  .price {132    margin-top: 22px;133    font-size: 46px;134    color: #222;135  }136 137  /* Bottom action bar */138  .action-bar {139    position: absolute;140    bottom: 120px;141    left: 0;142    width: 100%;143    padding: 0 40px;144    box-sizing: border-box;145  }146  .action-row {147    display: flex;148    gap: 30px;149    align-items: center;150  }151  .select-size {152    flex: 1;153    height: 140px;154    border: 2px solid #dcdcdc;155    border-radius: 16px;156    display: flex;157    align-items: center;158    padding: 0 32px;159    box-sizing: border-box;160    font-size: 40px;161    color: #666;162    background: #fff;163  }164  .select-size .caret {165    margin-left: auto;166    width: 36px; height: 36px;167  }168  .btn-add {169    width: 520px;170    height: 140px;171    background: #111;172    color: #fff;173    border-radius: 16px;174    display: flex;175    justify-content: center;176    align-items: center;177    gap: 20px;178    font-size: 44px;179    font-weight: 700;180    border: none;181  }182  .btn-add svg { width: 44px; height: 44px; stroke: #fff; fill: none; stroke-width: 3; }183 184  /* Home indicator */185  .home-bar {186    position: absolute;187    bottom: 36px;188    left: 50%;189    transform: translateX(-50%);190    width: 300px; height: 14px;191    border-radius: 7px;192    background: #1b1b1b;193    opacity: 0.4;194  }195</style>196</head>197<body>198<div id="render-target">199  <!-- Status Bar -->200  <div class="status-bar">201    <div class="time">4:09</div>202    <div class="status-icons">203      <!-- WiFi -->204      <svg viewBox="0 0 24 24" aria-hidden="true">205        <path d="M2 8c6-5 14-5 20 0M6 12c4-3 8-3 12 0M10 16c2-1 4-1 6 0M12 20h0" />206        <circle cx="12" cy="20" r="1.4" fill="#222" stroke="none"></circle>207      </svg>208      <!-- Battery (simple) -->209      <svg viewBox="0 0 24 24" aria-hidden="true">210        <rect x="2" y="7" width="18" height="10" rx="2"></rect>211        <rect x="20" y="10" width="2" height="4" rx="1"></rect>212        <rect x="4" y="9" width="14" height="6" fill="#222" stroke="none"></rect>213      </svg>214    </div>215  </div>216 217  <!-- Header Controls -->218  <div class="header-layer">219    <!-- Back button -->220    <div class="icon-circle icon-left" title="Back">221      <svg viewBox="0 0 24 24" aria-hidden="true">222        <path d="M15 4L7 12l8 8" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>223      </svg>224    </div>225 226    <!-- Bag icon -->227    <div class="icon-circle icon-right-top" title="Bag">228      <svg viewBox="0 0 24 24" aria-hidden="true">229        <path d="M6 8h12l-1 12H7L6 8z" stroke="#111" stroke-width="2" fill="none"></path>230        <path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="#111" stroke-width="2" fill="none"></path>231      </svg>232    </div>233 234    <!-- Heart icon -->235    <div class="icon-circle icon-right-second" title="Wishlist">236      <svg viewBox="0 0 24 24" aria-hidden="true">237        <path d="M12 21s-7-4.6-9.5-8C.6 9.4 2 6 5.3 6c2 0 3.2 1.3 3.7 2.2C9.6 7.3 10.8 6 12.8 6 16 6 17.4 9.4 15.5 13c-2.5 3.4-9.5 8-9.5 8z"238              fill="#E53935" stroke="#E53935"></path>239      </svg>240    </div>241  </div>242 243  <!-- Product Image Placeholder -->244  <div class="image-wrap">245    [IMG: Model wearing green-blue patterned cotton halterneck dress]246  </div>247 248  <!-- Carousel Dots -->249  <div class="dots">250    <div class="dot"></div>251    <div class="dot active"></div>252    <div class="dot"></div>253    <div class="dot"></div>254  </div>255 256  <!-- Product Details -->257  <div class="details">258    <div class="title-row">259      <div class="product-title">Cotton halterneck dress</div>260      <div class="share" title="Share">261        <svg viewBox="0 0 24 24" aria-hidden="true">262          <circle cx="18" cy="5" r="3" fill="#111"></circle>263          <circle cx="6" cy="12" r="3" fill="#111"></circle>264          <circle cx="18" cy="19" r="3" fill="#111"></circle>265          <path d="M8.8 11l6.5-4M8.8 13l6.5 4" stroke="#111" stroke-width="2" fill="none"></path>266        </svg>267      </div>268    </div>269    <div class="price">Rs. 1,499.00</div>270  </div>271 272  <!-- Bottom Action Bar -->273  <div class="action-bar">274    <div class="action-row">275      <div class="select-size">276        Select size277        <svg class="caret" viewBox="0 0 24 24" aria-hidden="true">278          <path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>279        </svg>280      </div>281      <button class="btn-add">282        <svg viewBox="0 0 24 24" aria-hidden="true">283          <path d="M6 8h12l-1 12H7L6 8z"></path>284          <path d="M9 8V6a3 3 0 0 1 6 0v2"></path>285        </svg>286        Add287      </button>288    </div>289  </div>290 291  <div class="home-bar"></div>292</div>293</body>294</html>