GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Product Page UI - Atom Men Blue Mid Ankle Sneakers</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  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0; left: 0;19    width: 1080px; height: 120px;20    background: #1a1a1a;21    color: #fff;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 40px;26    font-size: 36px;27  }28  .status-icons {29    display: flex; align-items: center; gap: 26px;30  }31  .icon-dot { width: 26px; height: 26px; background: #fff; border-radius: 50%; opacity: 0.85; }32  .icon-signal, .icon-battery {33    width: 46px; height: 24px; border: 2px solid #fff; border-radius: 6px; opacity: 0.9;34  }35  .icon-wifi {36    width: 36px; height: 26px; border: 2px solid #fff; border-radius: 50% 50% 0 0;37    border-bottom: none; transform: rotate(0deg);38    opacity: 0.9;39  }40 41  /* Hero / image section */42  .product-hero {43    position: absolute; top: 120px; left: 0;44    width: 1080px; height: 1180px;45    background: #F2F4F8;46  }47  .back-btn {48    position: absolute; top: 40px; left: 36px;49    width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;50    border-radius: 18px;51    background: rgba(255,255,255,0.85);52    box-shadow: 0 2px 6px rgba(0,0,0,0.1);53  }54  .img-holder {55    width: 1000px; height: 980px;56    margin: 140px auto 0;57    background: #E0E0E0;58    border: 1px solid #BDBDBD;59    display: flex; align-items: center; justify-content: center;60    color: #757575; font-size: 40px; text-align: center; border-radius: 12px;61  }62  .slider-dots {63    position: absolute; bottom: 40px; left: 0; width: 100%;64    display: flex; justify-content: center; gap: 18px;65  }66  .dot { width: 16px; height: 16px; background: #D0D3DA; border-radius: 50%; }67  .dot.active { background: #2C3E66; width: 28px; height: 12px; border-radius: 8px; }68 69  /* Details section */70  .details {71    position: absolute; top: 1300px; left: 0;72    width: 1080px; height: 780px;73    background: #ffffff;74    border-top-left-radius: 30px; border-top-right-radius: 30px;75    box-shadow: 0 -4px 12px rgba(0,0,0,0.06);76  }77  .ribbon {78    position: absolute; top: 24px; left: 32px;79    background: #FFD54F; color: #333; font-weight: 700; font-size: 34px;80    padding: 16px 28px; border-radius: 10px;81  }82  .title {83    position: absolute; top: 120px; left: 32px; right: 32px;84    font-size: 54px; font-weight: 700; color: #0b0b0b;85  }86  .rating-row {87    position: absolute; top: 230px; left: 32px;88    display: flex; align-items: center; gap: 16px;89    font-size: 34px; color: #444;90  }91  .star {92    width: 36px; height: 36px; display: inline-block;93  }94  .reviews-link { color: #2c3e66; text-decoration: none; }95  .info-card {96    position: absolute; top: 310px; left: 32px; right: 32px;97    background: #ffffff; border: 1px solid #e6e6e6; border-radius: 20px;98    padding: 28px 30px; font-size: 38px; color: #222;99    box-shadow: 0 2px 6px rgba(0,0,0,0.04);100  }101 102  /* Floating WhatsApp */103  .whatsapp {104    position: absolute; top: 360px; right: 34px;105    width: 110px; height: 110px; border-radius: 50%;106    background: #ffffff; border: 1px solid #d9d9d9;107    display: flex; align-items: center; justify-content: center;108    box-shadow: 0 2px 10px rgba(0,0,0,0.08);109  }110  .whatsapp svg { width: 54px; height: 54px; }111  .whatsapp path { fill: #25D366; }112 113  /* Price bar above action bar */114  .price-bar {115    position: absolute; bottom: 260px; left: 0;116    width: 1080px; height: 140px; background: #ffffff;117    border-top: 1px solid #eeeeee;118    display: flex; align-items: center; justify-content: space-between;119    padding: 0 36px;120    box-shadow: 0 -3px 8px rgba(0,0,0,0.05);121    font-size: 44px;122  }123  .price-main { font-weight: 800; color: #111; }124  .mrp { color: #9e9e9e; text-decoration: line-through; margin-left: 26px; }125  .off { color: #2E7CF6; margin-left: 26px; font-weight: 700; }126  .free-delivery { color: #22924A; font-weight: 700; }127 128  /* Action bar */129  .action-bar {130    position: absolute; bottom: 0; left: 0;131    width: 1080px; height: 220px; background: #F6F6F6;132    display: flex; align-items: center; justify-content: space-between;133    padding: 0 36px;134    border-top: 1px solid #e9e9e9;135  }136  .heart-btn {137    width: 160px; height: 160px; border-radius: 28px;138    background: #ffffff; border: 1px solid #d9d9d9;139    display: flex; align-items: center; justify-content: center;140  }141  .heart-btn svg { width: 74px; height: 74px; }142  .bag-btn, .buy-btn {143    width: 420px; height: 160px; border-radius: 42px;144    display: flex; align-items: center; justify-content: center;145    font-size: 44px; font-weight: 800; text-transform: uppercase;146    border: none; letter-spacing: 0.5px;147  }148  .bag-btn { background: #121212; color: #ffffff; }149  .buy-btn { background: #F3C43B; color: #ffffff; }150 151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Status bar -->157  <div class="status-bar">158    <div>11:53</div>159    <div class="status-icons">160      <div class="icon-dot"></div>161      <div class="icon-dot"></div>162      <div class="icon-wifi"></div>163      <div class="icon-signal"></div>164      <div class="icon-battery"></div>165    </div>166  </div>167 168  <!-- Product hero section with image and back button -->169  <div class="product-hero">170    <div class="back-btn">171      <svg viewBox="0 0 24 24" width="40" height="40">172        <path d="M15 18l-6-6 6-6" fill="none" stroke="#0b0b0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>173      </svg>174    </div>175    <div class="img-holder">[IMG: Blue Mid Ankle Sneakers]</div>176 177    <!-- Slider dots -->178    <div class="slider-dots">179      <div class="dot active"></div>180      <div class="dot"></div>181      <div class="dot"></div>182      <div class="dot"></div>183      <div class="dot"></div>184      <div class="dot"></div>185      <div class="dot"></div>186    </div>187  </div>188 189  <!-- Details section -->190  <div class="details">191    <div class="ribbon">Premium</div>192 193    <div class="title">Atom Men Blue Mid Ankle Sneakers</div>194 195    <div class="rating-row">196      <svg class="star" viewBox="0 0 24 24">197        <path d="M12 2l3.09 6.3 6.91 1-5 4.86 1.18 6.84L12 18.9l-6.18 3.1L7 14.16 2 9.3l6.91-1z" fill="#FFC107"></path>198      </svg>199      <div>3.3</div>200      <div style="color:#9e9e9e;">•</div>201      <a class="reviews-link" href="#">12 Reviews</a>202    </div>203 204    <div class="info-card">205      Colors available206    </div>207 208    <!-- Floating WhatsApp -->209    <div class="whatsapp">210      <svg viewBox="0 0 24 24">211        <path d="M12 2a10 10 0 0 0-8.94 14.56L2 22l5.6-1.48A10 10 0 1 0 12 2zm0 18a8 8 0 0 1-4.27-1.24l-.3-.2-3.02.8.81-2.94-.2-.31A8 8 0 1 1 12 20zm4.7-5.3c-.26-.13-1.52-.75-1.76-.84-.24-.09-.42-.13-.6.13-.18.26-.69.84-.85 1.01-.16.18-.31.2-.57.07-.26-.13-1.1-.41-2.1-1.31-.78-.7-1.31-1.56-1.46-1.82-.16-.26-.02-.41.12-.54.12-.12.26-.31.39-.47.13-.16.18-.26.26-.43.08-.17.04-.32-.02-.45-.06-.13-.6-1.44-.82-1.98-.22-.54-.46-.46-.6-.46h-.51c-.17 0-.45.06-.68.32-.23.26-.88.86-.88 2.1s.9 2.43 1.03 2.6c.13.17 1.76 2.68 4.27 3.77 2.51 1.09 2.51.73 2.96.68.45-.05 1.52-.62 1.74-1.22.22-.6.22-1.11.15-1.22-.07-.11-.24-.18-.5-.31z"/>212      </svg>213    </div>214 215    <!-- Price bar -->216    <div class="price-bar">217      <div style="display:flex; align-items:center;">218        <div class="price-main">₹ 2595</div>219        <div class="mrp">₹ 2895</div>220        <div class="off">10% Off</div>221      </div>222      <div class="free-delivery">Free Delivery</div>223    </div>224  </div>225 226  <!-- Bottom action bar -->227  <div class="action-bar">228    <div class="heart-btn">229      <svg viewBox="0 0 24 24">230        <path d="M12 21s-6.7-4.6-9.2-7.1C-0.1 11.3 1 7.4 4.3 6.3c2.2-.7 3.9.4 4.9 1.7 1-1.3 2.7-2.4 4.9-1.7 3.4 1.1 4.5 5 1.5 7.6C18.7 16.4 12 21 12 21z" fill="none" stroke="#333" stroke-width="1.6"/>231      </svg>232    </div>233    <button class="bag-btn">Add to Bag</button>234    <button class="buy-btn">Buy Now</button>235  </div>236 237</div>238</body>239</html>