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 - Mobile UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #222; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15  }16 17  /* Top gradient header background */18  .header-bg {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 320px;24    background: linear-gradient(180deg, #a9e6dc 0%, #e0f4ef 100%);25    z-index: 1;26  }27 28  /* Status bar */29  .status-bar {30    position: absolute;31    top: 16px;32    left: 24px;33    right: 24px;34    height: 48px;35    display: flex;36    align-items: center;37    justify-content: space-between;38    z-index: 2;39    color: #1b3332;40    font-weight: 600;41  }42  .status-right {43    display: flex;44    align-items: center;45    gap: 18px;46    color: #1b3332;47    font-size: 22px;48  }49  .dot { width: 10px; height: 10px; background:#2f4a49; border-radius:50%; display:inline-block; opacity:.8; }50  .battery {51    width: 42px; height: 22px; border: 3px solid #263434; border-radius: 4px; position: relative;52  }53  .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #263434; border-radius: 1px; }54  .battery-level { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 26px; background:#263434; }55 56  /* Search row */57  .search-row {58    position: absolute;59    top: 84px;60    left: 24px;61    right: 24px;62    display: flex;63    align-items: center;64    gap: 16px;65    z-index: 2;66  }67  .icon-btn {68    width: 64px; height: 64px; display:flex; align-items:center; justify-content:center;69    border-radius: 16px; color:#1c3e3c;70  }71  .search-box {72    flex: 1;73    background: #ffffff;74    border-radius: 24px;75    box-shadow: 0 4px 12px rgba(0,0,0,0.12);76    display: flex;77    align-items: center;78    padding: 18px 22px;79    gap: 18px;80  }81  .search-input {82    flex: 1;83    font-size: 34px;84    color: #3b3b3b;85  }86  .search-input span { color: #6c6c6c; }87  .lens, .camera { width: 44px; height: 44px; color:#1b3332; }88 89  /* Tabs */90  .tabs {91    position: absolute;92    top: 200px;93    left: 0;94    right: 0;95    height: 100px;96    display: flex;97    align-items: flex-end;98    z-index: 2;99  }100  .tabs-inner {101    display: flex;102    align-items: center;103    width: 100%;104    border-bottom: 1px solid #dcdcdc;105    background: rgba(240,255,250,0.6);106  }107  .tab {108    flex: 1;109    text-align: center;110    padding: 26px 0 20px;111    font-size: 38px;112    color: #444;113    position: relative;114  }115  .tab.active {116    color: #c45500;117    font-weight: 700;118  }119  .tab.active::after {120    content: "";121    position: absolute;122    bottom: -1px;123    left: 28%;124    right: 28%;125    height: 6px;126    background: #c45500;127    border-radius: 4px 4px 0 0;128  }129  .tab-right {130    width: 90px;131    text-align: center;132  }133 134  /* Content */135  .content {136    position: absolute;137    top: 300px;138    left: 0;139    right: 0;140    bottom: 180px; /* leave space for bottom nav */141    overflow: hidden; /* no actual scrolling in this static rendering */142  }143  .section {144    padding: 32px 44px;145  }146  .divider { height: 1px; background: #e5e5e5; margin: 12px 0; }147 148  .price {149    font-size: 58px; font-weight: 700; letter-spacing: 0.5px;150  }151  .free {152    color: #008577; font-weight: 700; margin-top: 6px; font-size: 34px;153  }154  .link { color: #007185; font-size: 38px; font-weight: 600; margin-top: 18px; }155 156  .benefits {157    display: flex;158    justify-content: space-between;159    padding: 24px 24px 8px 24px;160    gap: 12px;161  }162  .benefit {163    width: 240px;164    text-align: center;165  }166  .benefit .circle {167    width: 140px; height: 140px; margin: 0 auto 16px; border-radius: 70px;168    background: #f3f4f6; display:flex; align-items:center; justify-content:center; border:1px solid #e0e0e0;169  }170  .benefit svg { width: 72px; height: 72px; color: #606060; }171  .benefit p { font-size: 30px; color:#2b4a56; line-height: 1.2; }172 173  .row-title {174    padding: 28px 44px;175    display:flex; align-items:center; justify-content:space-between;176    font-size: 46px; font-weight: 700;177    background: #ffffff;178  }179  .chev {180    width: 42px; height: 42px; color:#555;181  }182 183  .details {184    padding: 22px 44px 10px 44px;185  }186  .field { margin: 28px 0; }187  .field .label { font-weight: 700; font-size: 36px; margin-bottom: 4px; }188  .field .value { font-size: 38px; color: #6a6a6a; }189 190  .about {191    padding: 10px 44px 50px;192  }193  .about h3 { font-size: 52px; margin: 12px 0 18px; }194  .about ul { margin: 0; padding-left: 36px; }195  .about li { font-size: 36px; margin: 18px 0; color: #333; }196 197  /* Bottom navigation */198  .bottom-nav {199    position: absolute;200    left: 0; right: 0; bottom: 48px;201    height: 150px;202    border-top: 1px solid #dcdcdc;203    background: #f6f7f8;204    display: flex;205    align-items: center;206    justify-content: space-around;207  }208  .nav-item {209    width: 180px; text-align: center; color:#2b2b2b;210  }211  .nav-item.active { color: #176a6a; }212  .nav-item svg { width: 56px; height: 56px; display:block; margin: 0 auto 8px; }213  .nav-item span { font-size: 30px; display:block; }214 215  /* Gesture bar */216  .gesture {217    position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);218    width: 360px; height: 10px; background: #bdbdbd; border-radius: 8px;219  }220</style>221</head>222<body>223<div id="render-target">224 225  <div class="header-bg"></div>226 227  <!-- Status bar -->228  <div class="status-bar">229    <div style="font-size:32px;">7:27</div>230    <div class="status-right">231      <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>232      <span style="font-size:36px;">•</span>233      <svg width="36" height="28" viewBox="0 0 24 24" fill="#1b3332" xmlns="http://www.w3.org/2000/svg">234        <path d="M3 18h18v2H3v-2zm2-4h14v2H5v-2zm2-4h10v2H7V10zm2-4h6v2H9V6z"/>235      </svg>236      <svg width="36" height="28" viewBox="0 0 24 24" fill="#1b3332" xmlns="http://www.w3.org/2000/svg">237        <path d="M12 2a9 9 0 0 0-9 9h2a7 7 0 1 1 7 7v-3l-4 4 4 4v-3a9 9 0 0 0 0-18z"/>238      </svg>239      <div class="battery"><div class="battery-level"></div></div>240    </div>241  </div>242 243  <!-- Search row -->244  <div class="search-row">245    <div class="icon-btn" aria-label="Back">246      <svg width="48" height="48" viewBox="0 0 24 24" fill="#1b3332" xmlns="http://www.w3.org/2000/svg">247        <path d="M15.5 5l-7 7 7 7 1.5-1.5L11 12l6-6L15.5 5z"/>248      </svg>249    </div>250    <div class="search-box">251      <svg class="lens" viewBox="0 0 24 24" fill="#1b3332" xmlns="http://www.w3.org/2000/svg">252        <path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8L20 22l2-2-6.5-6zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/>253      </svg>254      <div class="search-input"><span>formal coat for women</span></div>255      <svg class="camera" viewBox="0 0 24 24" fill="#1b3332" xmlns="http://www.w3.org/2000/svg">256        <path d="M9 4l1.5 2H18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2.5L9 4zm3 5a5 5 0 1 0 .001 10.001A5 5 0 0 0 12 9zm0 2.5a2.5 2.5 0 1 1-.001 5.001A2.5 2.5 0 0 1 12 11.5z"/>257      </svg>258    </div>259  </div>260 261  <!-- Tabs -->262  <div class="tabs">263    <div class="tabs-inner" style="width:100%;">264      <div class="tab active">Details</div>265      <div class="tab">Questions</div>266      <div class="tab">Reviews</div>267      <div class="tab-right">268        <svg class="chev" viewBox="0 0 24 24" fill="#2b4a56" xmlns="http://www.w3.org/2000/svg">269          <path d="M7 14l5-5 5 5H7z"/>270        </svg>271      </div>272    </div>273  </div>274 275  <!-- Scroll/content area -->276  <div class="content">277 278    <div class="section">279      <div class="price">₹920</div>280      <div class="free">FREE Delivery.</div>281      <div class="divider" style="margin-top:24px;"></div>282      <div class="link">Compare all 2 options</div>283    </div>284 285    <div class="divider" style="margin: 24px 0;"></div>286 287    <!-- Benefits row -->288    <div class="benefits">289      <div class="benefit">290        <div class="circle">291          <svg viewBox="0 0 24 24" fill="#666">292            <path d="M3 7h18v10H3V7zm2 2v6h14V9H5z"/>293          </svg>294        </div>295        <p>10 days Return & Exchange</p>296      </div>297      <div class="benefit">298        <div class="circle">299          <svg viewBox="0 0 24 24" fill="#666">300            <path d="M3 6h18v12H3V6zm2 2v8h14V8H5zm6 2h2v4h-2v-4z"/>301          </svg>302        </div>303        <p>Pay on Delivery</p>304      </div>305      <div class="benefit">306        <div class="circle">307          <svg viewBox="0 0 24 24" fill="#666">308            <path d="M3 16h2l1-3h11l1 3h2v2H3v-2zm4-9h8l2 5H5l2-5z"/>309          </svg>310        </div>311        <p>Free Delivery</p>312      </div>313      <div class="benefit">314        <div class="circle">315          <svg viewBox="0 0 24 24" fill="#666">316            <path d="M3 7h12v10H3V7zm13 4h3l2 3v3h-5v-6z"/>317          </svg>318        </div>319        <p>Amazon Delivered</p>320      </div>321    </div>322 323    <div class="divider" style="margin: 8px 0 0;"></div>324 325    <div class="row-title">326      <div>Size guide</div>327      <svg class="chev" viewBox="0 0 24 24" fill="#555" xmlns="http://www.w3.org/2000/svg">328        <path d="M7 10l5 5 5-5H7z"/>329      </svg>330    </div>331 332    <div class="divider"></div>333 334    <div class="row-title" style="padding-top: 34px;">335      <div>Product details</div>336      <svg class="chev" viewBox="0 0 24 24" fill="#555" xmlns="