GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product Details</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #FFFFFF;15  }16 17  /* Top App Bar */18  .app-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 250px;24    background: #3F6EDC;25    color: #FFFFFF;26  }27  .app-title {28    position: absolute;29    left: 60px;30    bottom: 40px;31    font-size: 64px;32    font-weight: 500;33    letter-spacing: 0.3px;34  }35 36  /* Product summary card */37  .summary-card {38    position: absolute;39    top: 250px;40    left: 0;41    width: 100%;42    height: 220px;43    background: #FFFFFF;44    box-shadow: 0 4px 10px rgba(0,0,0,0.12);45    display: flex;46    align-items: center;47  }48  .img-ph {49    width: 260px;50    height: 150px;51    background: #E0E0E0;52    border: 1px solid #BDBDBD;53    border-radius: 8px;54    margin-left: 40px;55    display: flex;56    justify-content: center;57    align-items: center;58    color: #757575;59    font-size: 30px;60  }61  .summary-info {62    margin-left: 40px;63  }64  .product-name {65    font-size: 44px;66    color: #212121;67    margin-bottom: 14px;68  }69  .price {70    font-size: 64px;71    font-weight: 700;72    color: #000000;73  }74 75  /* Tabs */76  .tabs {77    position: absolute;78    top: 470px;79    left: 0;80    width: 100%;81    height: 120px;82    background: #FFFFFF;83    border-top: 1px solid rgba(0,0,0,0.06);84    box-shadow: 0 2px 6px rgba(0,0,0,0.08);85    display: flex;86    align-items: flex-end;87    padding: 0 80px;88  }89  .tab {90    font-size: 40px;91    color: #5E84F2;92    text-transform: uppercase;93    letter-spacing: 1px;94  }95  .tab + .tab { margin-left: auto; }96  .tab-active-underline {97    position: absolute;98    bottom: 0;99    left: 80px;100    width: 340px;101    height: 8px;102    background: #3F6EDC;103    border-radius: 4px 4px 0 0;104  }105 106  /* Content area */107  .content {108    position: absolute;109    top: 590px;110    left: 0;111    width: 100%;112    padding: 0 60px 0 60px;113    color: #212121;114  }115  .section-title {116    font-size: 48px;117    font-weight: 600;118    margin: 40px 0 20px 0;119  }120  .bullet {121    font-size: 40px;122    line-height: 1.6;123    margin-left: 10px;124    color: #212121;125  }126 127  .subsection-title {128    font-size: 46px;129    font-weight: 600;130    margin: 50px 0 10px 0;131  }132 133  .spec-row {134    display: flex;135    justify-content: space-between;136    align-items: center;137    padding: 28px 0;138    border-bottom: 1px solid #E0E0E0;139  }140  .spec-label {141    font-size: 40px;142    color: #9E9E9E;143  }144  .spec-value {145    font-size: 40px;146    color: #212121;147  }148 149  /* Bottom gesture bar mimic */150  .gesture-bar {151    position: absolute;152    bottom: 0;153    left: 0;154    width: 100%;155    height: 160px;156    background: #000000;157  }158  .gesture-pill {159    position: absolute;160    bottom: 40px;161    left: 50%;162    transform: translateX(-50%);163    width: 240px;164    height: 16px;165    background: #CFCFCF;166    border-radius: 20px;167    opacity: 0.85;168  }169</style>170</head>171<body>172<div id="render-target">173 174  <!-- Top Header -->175  <div class="app-bar">176    <div class="app-title">Product Details</div>177  </div>178 179  <!-- Summary Card -->180  <div class="summary-card">181    <div class="img-ph">[IMG: Black Nike Running Shoe]</div>182    <div class="summary-info">183      <div class="product-name">NIKE Downshifter 11 Running Shoes For Men</div>184      <div class="price">₹3,995</div>185    </div>186  </div>187 188  <!-- Tabs -->189  <div class="tabs">190    <div class="tab">Specifications</div>191    <div class="tab">More Info</div>192    <div class="tab-active-underline"></div>193  </div>194 195  <!-- Content -->196  <div class="content">197    <div class="section-title">Key Features</div>198    <div class="bullet">• Colour: Black</div>199    <div class="bullet">• Outer Material: PU</div>200 201    <div class="subsection-title">General</div>202 203    <div class="spec-row">204      <div class="spec-label">Color</div>205      <div class="spec-value">Black</div>206    </div>207    <div class="spec-row">208      <div class="spec-label">Outer material</div>209      <div class="spec-value">PU</div>210    </div>211    <div class="spec-row">212      <div class="spec-label">Model name</div>213      <div class="spec-value">Downshifter 11</div>214    </div>215    <div class="spec-row">216      <div class="spec-label">Ideal for</div>217      <div class="spec-value">Men</div>218    </div>219    <div class="spec-row">220      <div class="spec-label">Occasion</div>221      <div class="spec-value">Sports</div>222    </div>223    <div class="spec-row">224      <div class="spec-label">Type For Sports</div>225      <div class="spec-value">Running Shoes</div>226    </div>227 228    <div class="section-title">Product Details</div>229    <div class="spec-row" style="border-bottom: none;">230      <div class="spec-label">Care instructions</div>231      <div class="spec-value">Wipe with a clean, dry cloth</div>232    </div>233  </div>234 235  <!-- Bottom device gesture bar -->236  <div class="gesture-bar">237    <div class="gesture-pill"></div>238  </div>239 240</div>241</body>242</html>