GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Product Detail UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Top teal app bar */17  .app-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 150px;23    background: #1497a3; /* teal */24    color: #fff;25  }26  .status-row {27    height: 70px;28    padding: 0 32px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    font-size: 30px;33    letter-spacing: 1px;34  }35  .status-icons { display: flex; align-items: center; gap: 20px; }36  .toolbar {37    height: 80px;38    background: #ffffff;39    color: #1497a3;40    display: flex;41    align-items: center;42    justify-content: space-between;43    padding: 0 32px;44    box-shadow: 0 1px 0 rgba(0,0,0,0.08);45  }46  .toolbar-left { display: flex; align-items: center; gap: 20px; }47  .toolbar-right { display: flex; align-items: center; gap: 40px; }48 49  /* Product image area */50  .image-area {51    position: absolute;52    top: 150px;53    left: 0;54    width: 1080px;55    padding: 32px;56    box-sizing: border-box;57  }58  .product-image {59    width: 1016px;60    height: 760px;61    background: #E0E0E0;62    border: 1px solid #BDBDBD;63    display: flex;64    align-items: center;65    justify-content: center;66    color: #757575;67    font-size: 32px;68    border-radius: 8px;69  }70  .floating-actions {71    position: absolute;72    right: 36px;73    bottom: 120px;74    display: flex;75    flex-direction: column;76    gap: 40px;77  }78  .fab {79    width: 120px;80    height: 120px;81    border-radius: 60px;82    background: #ffffff;83    box-shadow: 0 6px 18px rgba(0,0,0,0.15);84    display: flex;85    align-items: center;86    justify-content: center;87    border: 1px solid #eee;88  }89 90  .dots {91    margin-top: 36px;92    display: flex;93    justify-content: center;94    gap: 18px;95  }96  .dot {97    width: 18px; height: 18px; border-radius: 9px; background: #d6d6d6;98  }99  .dot.active { background: #1aa4b0; }100 101  /* Size selection */102  .content {103    position: absolute;104    top: 1100px;105    left: 0;106    width: 1080px;107    padding: 0 32px 260px; /* bottom padding to avoid overlap with sticky bar */108    box-sizing: border-box;109  }110  .section-header {111    display: flex;112    justify-content: space-between;113    align-items: center;114    margin-top: 24px;115  }116  .section-title {117    font-size: 40px;118    font-weight: 700;119    color: #333;120  }121  .link {122    font-size: 34px;123    color: #1497a3;124    font-weight: 700;125  }126  .size-grid {127    display: grid;128    grid-template-columns: repeat(4, 1fr);129    gap: 24px;130    margin-top: 26px;131  }132  .size-chip {133    background: #fff;134    border: 2px solid #E0E0E0;135    border-radius: 20px;136    height: 100px;137    display: flex;138    align-items: center;139    justify-content: center;140    font-size: 34px;141    color: #414141;142    box-shadow: 0 2px 0 rgba(0,0,0,0.04);143  }144 145  /* Title and price */146  .product-title {147    margin-top: 40px;148    font-size: 38px;149    line-height: 1.35;150    color: #222;151    font-weight: 600;152  }153  .price-row {154    margin-top: 22px;155    display: flex;156    align-items: baseline;157    gap: 18px;158    font-size: 40px;159  }160  .price { font-weight: 800; color: #111; }161  .mrp { color: #757575; text-decoration: line-through; font-size: 34px; }162  .off { color: #19a083; font-weight: 800; font-size: 34px; }163  .tax-note { margin-top: 10px; color: #777; font-size: 30px; }164 165  .promo-card {166    margin-top: 40px;167    border: 2px solid #1497a3;168    border-radius: 12px;169    background: #e8f6f8;170    padding: 28px 32px;171    position: relative;172  }173  .promo-text {174    font-size: 36px;175    color: #222;176  }177  .promo-price { color: #1497a3; font-weight: 800; }178  .promo-expand {179    position: absolute;180    right: 24px;181    top: 24px;182  }183 184  /* Sticky bottom bar */185  .sticky-bar {186    position: absolute;187    bottom: 0;188    left: 0;189    width: 1080px;190    height: 180px;191    background: #ffffff;192    border-top: 1px solid #e6e6e6;193    box-shadow: 0 -8px 24px rgba(0,0,0,0.08);194    display: grid;195    grid-template-columns: 1fr 1fr;196  }197  .cart-side {198    display: flex; align-items: center; justify-content: center;199    font-size: 42px; font-weight: 800; color: #ff7a00;200  }201  .buy-side {202    display: flex; align-items: center; justify-content: center;203    font-size: 42px; font-weight: 800; color: #ffffff;204    background: linear-gradient(90deg, #ff7a00, #ff4f6b);205  }206 207  /* Gesture bar */208  .gesture {209    position: absolute;210    bottom: 18px;211    left: 50%;212    transform: translateX(-50%);213    width: 320px;214    height: 16px;215    background: #dcdcdc;216    border-radius: 8px;217  }218 219  /* Simple icon styles */220  svg { display: block; }221</style>222</head>223<body>224<div id="render-target">225 226  <div class="app-bar">227    <div class="status-row">228      <div>9:09</div>229      <div class="status-icons">230        <!-- small placeholders -->231        <svg width="36" height="36"><circle cx="18" cy="18" r="6" fill="#fff"/></svg>232        <svg width="36" height="36"><rect x="6" y="12" width="24" height="12" fill="#fff"/></svg>233        <!-- WiFi -->234        <svg width="40" height="40" viewBox="0 0 24 24">235          <path d="M12 18l2-2-2-2-2 2 2 2zm-5-5c3-3 8-3 11 0l-2 2c-2-2-5-2-7 0l-2-2zm-4-4c5-5 14-5 19 0l-2 2c-4-4-11-4-15 0L3 9z" fill="#fff"/>236        </svg>237        <!-- Battery -->238        <svg width="48" height="40" viewBox="0 0 28 24">239          <rect x="2" y="6" width="20" height="12" rx="2" fill="#fff"/>240          <rect x="23" y="9" width="3" height="6" rx="1" fill="#fff"/>241        </svg>242      </div>243    </div>244    <div class="toolbar">245      <div class="toolbar-left">246        <!-- back arrow -->247        <svg width="56" height="56" viewBox="0 0 24 24">248          <path d="M15 6l-6 6 6 6" stroke="#1497a3" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>249        </svg>250      </div>251      <div class="toolbar-right">252        <!-- search icon -->253        <svg width="56" height="56" viewBox="0 0 24 24">254          <circle cx="11" cy="11" r="7" stroke="#1497a3" stroke-width="2.5" fill="none"/>255          <path d="M20 20l-4-4" stroke="#1497a3" stroke-width="2.5" stroke-linecap="round"/>256        </svg>257        <!-- cart icon -->258        <svg width="56" height="56" viewBox="0 0 24 24">259          <path d="M3 5h3l2 10h9l2-7H7" stroke="#1497a3" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>260          <circle cx="10" cy="20" r="1.8" fill="#1497a3"/>261          <circle cx="17" cy="20" r="1.8" fill="#1497a3"/>262        </svg>263      </div>264    </div>265  </div>266 267  <div class="image-area">268    <div class="product-image">[IMG: Columbus Selena Women's Sports Shoe - Grey/Pink]</div>269 270    <div class="floating-actions">271      <!-- favorite -->272      <div class="fab">273        <svg width="54" height="54" viewBox="0 0 24 24">274          <path d="M12 21s-6.7-4.3-9-7.5C1.4 11.1 2.6 8 5.5 8c1.7 0 3 1 3.5 2.3C9.6 9 10.9 8 12.6 8 15.6 8 16.8 11.1 15 13.5 12.7 16.7 12 21 12 21z" fill="none" stroke="#777" stroke-width="2" stroke-linejoin="round"/>275        </svg>276      </div>277      <!-- share -->278      <div class="fab">279        <svg width="54" height="54" viewBox="0 0 24 24">280          <path d="M18 8a3 3 0 10-2.9-3.7L8.7 7.5a3 3 0 100 4.9l6.4 3.2A3 3 0 1016 18" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>281        </svg>282      </div>283    </div>284 285    <div class="dots">286      <div class="dot active"></div>287      <div class="dot"></div>288      <div class="dot"></div>289      <div class="dot"></div>290    </div>291  </div>292 293  <div class="content">294    <div class="section-header">295      <div class="section-title">Select Size - EUR or IND</div>296      <div class="link">Size Chart</div>297    </div>298 299    <div class="size-grid">300      <div class="size-chip">5 (IND/UK)</div>301      <div class="size-chip">6 (IND/UK)</div>302      <div class="size-chip">7 (IND/UK)</div>303      <div class="size-chip">8 (IND/UK)</div>304    </div>305 306    <div class="product-title">307      Columbus Selena Women's Sports Shoes - Running, Walking, Gym (B.Pink)308    </div>309 310    <div class="price-row">311      <div class="price">₹1,499</div>312      <div class="mrp">MRP: ₹2,199</div>313      <div class="off">31% off</div>314    </div>315    <div class="tax-note">Inclusive of all taxes</div>316 317    <div class="promo-card">318      <div class="promo-text">Get this for as low as: <span class="promo-price">₹1,323</span></div>319      <div class="promo-expand">320        <svg width="44" height="44" viewBox="0 0 24 24">321          <path d="M6 9l6 6 6-6" stroke="#1497a3" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>322        </svg>323      </div>324    </div>325  </div>326 327  <div class="sticky-bar">328    <div class="cart-side">ADD TO CART</div>329    <div class="buy-side">BUY NOW</div>330  </div>331 332  <div class="gesture"></div>333</div>334</body>335</html>