GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product Details UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #212121;16  }17 18  /* Status bar */19  .status-bar {20    height: 90px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    font-size: 32px;26    color: #424242;27  }28  .status-icons { display: flex; gap: 20px; align-items: center; }29  .dot { width: 10px; height: 10px; background: #616161; border-radius: 50%; display: inline-block; }30 31  /* Header with search */32  .header {33    height: 120px;34    padding: 0 24px;35    display: flex;36    align-items: center;37    gap: 20px;38  }39  .icon-btn {40    width: 72px;41    height: 72px;42    display: flex;43    align-items: center;44    justify-content: center;45    border-radius: 36px;46  }47  .search-bar {48    flex: 1;49    background: #F2F3F5;50    border: 1px solid #E0E0E0;51    height: 80px;52    border-radius: 18px;53    display: flex;54    align-items: center;55    padding: 0 24px;56    gap: 16px;57    color: #9E9E9E;58    font-size: 32px;59  }60  .search-placeholder { flex: 1; }61  .header-right { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; }62 63  /* Content scroll area */64  .content {65    position: absolute;66    top: 210px; /* status + header */67    bottom: 180px; /* bottom actions */68    left: 0;69    right: 0;70    overflow-y: auto;71    padding: 0 32px 24px;72  }73 74  .helper-text {75    margin: 16px 8px;76    color: #757575;77    font-size: 30px;78  }79  .divider { height: 12px; background: #F3F1FA; margin: 8px -32px 24px; }80  .section-title {81    font-size: 44px;82    font-weight: 700;83    margin: 16px 0 24px;84  }85 86  .detail-row {87    display: grid;88    grid-template-columns: 1fr 1fr;89    padding: 18px 8px;90    font-size: 36px;91  }92  .detail-label { color: #9E9E9E; }93  .detail-value { color: #212121; font-weight: 600; text-align: right; }94 95  .sub-title { font-size: 40px; font-weight: 700; margin: 24px 8px 12px; }96  .paragraph {97    font-size: 34px;98    line-height: 1.6;99    color: #424242;100    margin: 0 8px 24px;101  }102  .link { color: #1976D2; font-weight: 700; }103 104  .list-row {105    border-top: 1px solid #EEEEEE;106    border-bottom: 1px solid #EEEEEE;107    padding: 26px 8px;108    display: flex;109    justify-content: space-between;110    align-items: center;111    font-size: 40px;112    font-weight: 700;113    margin-bottom: 18px;114  }115 116  /* Similar products */117  .sim-header {118    display: flex;119    justify-content: space-between;120    align-items: center;121    margin: 24px 8px;122  }123  .sim-title { font-size: 44px; font-weight: 700; }124  .cards {125    display: flex;126    gap: 24px;127    padding: 0 0 40px 8px;128  }129  .card {130    width: 320px;131    border: 1px solid #E0E0E0;132    border-radius: 16px;133    background: #fff;134    overflow: hidden;135  }136  .img-ph {137    width: 100%;138    height: 260px;139    background: #E0E0E0;140    border-bottom: 1px solid #BDBDBD;141    display: flex;142    justify-content: center;143    align-items: center;144    color: #757575;145    font-size: 28px;146    text-align: center;147  }148  .card-body {149    padding: 16px;150  }151  .brand { font-size: 30px; font-weight: 700; color: #424242; }152  .title { font-size: 30px; color: #616161; margin-top: 6px; }153  .price-row { display: flex; gap: 10px; align-items: baseline; margin-top: 8px; }154  .strike { color: #9E9E9E; text-decoration: line-through; font-size: 28px; }155  .price { color: #1A1A1A; font-size: 32px; font-weight: 700; }156 157  /* Bottom action bar */158  .bottom-bar {159    position: absolute;160    left: 0; right: 0; bottom: 56px;161    height: 120px;162    display: grid;163    grid-template-columns: 180px 1fr 1fr;164    gap: 24px;165    padding: 0 24px;166  }167  .btn {168    border-radius: 18px;169    display: flex;170    align-items: center;171    justify-content: center;172    font-size: 36px;173    font-weight: 700;174  }175  .btn-cart { background: #F7F7F7; border: 1px solid #E0E0E0; color: #212121; gap: 12px; }176  .btn-emi  { background: #FFFFFF; border: 1px solid #E0E0E0; color: #212121; }177  .btn-buy  { background: #FFC107; border: 1px solid #E0E0E0; color: #212121; }178 179  .home-indicator {180    position: absolute;181    left: 50%;182    transform: translateX(-50%);183    bottom: 16px;184    width: 300px;185    height: 8px;186    background: #000000;187    opacity: 0.2;188    border-radius: 4px;189  }190 191  /* Simple SVG styling */192  svg { width: 40px; height: 40px; fill: none; stroke: #212121; stroke-width: 4; }193  .chev { width: 40px; height: 40px; }194</style>195</head>196<body>197<div id="render-target">198 199  <!-- Status bar -->200  <div class="status-bar">201    <div>11:30</div>202    <div class="status-icons">203      <span class="dot"></span>204      <span class="dot"></span>205      <span class="dot"></span>206      <svg viewBox="0 0 24 24"><path d="M2 18l10-12 10 12H2Z" /></svg>207      <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"></rect><rect x="20" y="9" width="2" height="6"></rect></svg>208    </div>209  </div>210 211  <!-- Header with back, search, cart -->212  <div class="header">213    <div class="icon-btn">214      <svg viewBox="0 0 24 24"><path d="M15 6 9 12l6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>215    </div>216    <div class="search-bar">217      <span class="search-placeholder">Search for products</span>218      <svg viewBox="0 0 24 24"><path d="M12 4v8M8 8h8" stroke="#9E9E9E"/><rect x="9" y="3" width="6" height="12" rx="3" stroke="#9E9E9E"></rect><path d="M12 15v2" stroke="#9E9E9E"></path></svg>219    </div>220    <div class="header-right">221      <svg viewBox="0 0 24 24"><path d="M3 6h18l-2 12H5L3 6Z" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9" cy="20" r="2"/><circle cx="17" cy="20" r="2"/></svg>222    </div>223  </div>224 225  <!-- Scrollable content -->226  <div class="content">227    <div class="helper-text">8+ years on Flipkart</div>228    <div class="helper-text" style="margin-top:-6px;">Trusted brand on Flipkart</div>229    <div class="divider"></div>230 231    <div class="section-title">Product Details</div>232 233    <div class="detail-row">234      <div class="detail-label">Outer material</div>235      <div class="detail-value">PU</div>236    </div>237    <div class="detail-row">238      <div class="detail-label">Occasion</div>239      <div class="detail-value">Sports</div>240    </div>241    <div class="detail-row">242      <div class="detail-label">Type For Sports</div>243      <div class="detail-value">Running Shoes</div>244    </div>245 246    <div class="sub-title">Details</div>247    <div class="paragraph">248      When the road beckons, answer the call in a lightweight pair that’ll keep you moving mile after mile. Soft foam cushions your stride and a reinforced heel delivers a smooth, stable ride. Crafted from … <span class="link">more</span>249    </div>250 251    <div class="list-row">252      <span>All Details</span>253      <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>254    </div>255 256    <div class="sim-header">257      <div class="sim-title">Similar Products</div>258      <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>259    </div>260 261    <div class="cards">262      <!-- Card 1 -->263      <div class="card">264        <div class="img-ph">[IMG: Black Running Shoes]</div>265        <div class="card-body">266          <div class="brand">NIKE</div>267          <div class="title">Revolution 5 Running...</div>268          <div class="price-row">269            <span class="strike">₹3,695</span>270            <span class="price">₹2,586</span>271          </div>272        </div>273      </div>274 275      <!-- Card 2 -->276      <div class="card">277        <div class="img-ph">[IMG: Navy ADIDAS Running Shoes]</div>278        <div class="card-body">279          <div class="title" style="color:#9E9E9E;">Sponsored</div>280          <div class="brand">ADIDAS</div>281          <div class="title">ADI-PACE M Running...</div>282          <div class="price-row">283            <span class="strike">₹5,999</span>284            <span class="price">₹5,199</span>285          </div>286        </div>287      </div>288 289      <!-- Card 3 -->290      <div class="card">291        <div class="img-ph">[IMG: Light Grey Running Shoes]</div>292        <div class="card-body">293          <div class="brand">Mast & Harbour</div>294          <div class="title">Running Shoes</div>295          <div class="price-row">296            <span class="strike">₹3,999</span>297            <span class="price">₹2,889</span>298          </div>299        </div>300      </div>301    </div>302 303  </div>304 305  <!-- Bottom action bar -->306  <div class="bottom-bar">307    <div class="btn btn-cart">308      <svg viewBox="0 0 24 24"><path d="M3 6h18l-2 12H5L3 6Z" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 9v6M9 12h6"/></svg>309    </div>310    <div class="btn btn-emi">Pay with EMI</div>311    <div class="btn btn-buy">Buy now</div>312  </div>313 314  <div class="home-indicator"></div>315</div>316</body>317</html>