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 Detail Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #111;17  }18 19  /* Top gradient header */20  .top {21    background: linear-gradient(180deg, #8fd6d3 0%, #e7f6ef 75%, #ffffff 100%);22    padding-bottom: 16px;23    box-shadow: 0 1px 0 rgba(0,0,0,0.08);24  }25 26  .status-bar {27    height: 64px;28    padding: 12px 28px 0 28px;29    font-size: 30px;30    color: #1a1a1a;31    display: flex;32    align-items: center;33    justify-content: space-between;34    opacity: 0.9;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 18px;40  }41  .icon-wifi, .icon-battery {42    width: 36px; height: 24px;43  }44 45  .search-row {46    display: flex;47    align-items: center;48    padding: 10px 24px 6px 12px;49  }50  .back-btn {51    width: 80px; height: 72px;52    background: transparent; border: none; padding: 0; margin: 0 6px 0 8px;53    display: flex; align-items: center; justify-content: center;54    cursor: default;55  }56  .search-box {57    flex: 1;58    height: 88px;59    background: #ffffff;60    border-radius: 44px;61    box-shadow: 0 6px 16px rgba(0,0,0,0.12);62    border: 1px solid #e6e6e6;63    display: flex;64    align-items: center;65    padding: 0 22px;66    gap: 18px;67  }68  .search-box span {69    font-size: 36px;70    color: #666;71  }72  .search-icon, .scan-icon {73    width: 48px; height: 48px;74    display: inline-flex; align-items: center; justify-content: center;75  }76  .scan-wrap {77    margin-left: auto;78    width: 56px; height: 56px; border-radius: 14px;79    border: 2px solid #d9d9d9; display: flex; align-items: center; justify-content: center;80    background: #fafafa;81  }82 83  .tabs {84    margin-top: 8px;85    display: grid;86    grid-template-columns: 1fr 1fr 1fr 88px;87    border-top: 1px solid rgba(0,0,0,0.06);88    border-bottom: 1px solid rgba(0,0,0,0.08);89    background: #ffffffc7;90  }91  .tab {92    text-align: center;93    padding: 28px 0;94    font-size: 36px;95    color: #222;96  }97  .tab.active { font-weight: 700; }98  .tab.up {99    background: #f6faf8;100    border-left: 1px solid #eef1ef;101    display: flex; align-items: center; justify-content: center;102  }103 104  .content {105    position: absolute;106    top: 260px; /* approx top section height */107    left: 0; right: 0;108    height: calc(100% - 260px - 170px); /* leave room for bottom bar + nav pill */109    overflow-y: auto;110    -webkit-overflow-scrolling: touch;111  }112 113  .divider { height: 1px; background: #e5e5e5; margin: 22px 0; }114  .section-title {115    font-size: 46px; font-weight: 800; margin: 18px 36px 12px 36px;116  }117 118  .suggest-row {119    display: flex;120    gap: 42px;121    padding: 8px 36px 0 36px;122  }123  .suggest {124    width: 320px;125  }126  .img-ph {127    width: 100%; height: 310px;128    background: #E0E0E0;129    border: 1px solid #BDBDBD;130    display: flex; align-items: center; justify-content: center;131    color: #757575; font-size: 28px; text-align: center; padding: 10px;132    border-radius: 6px;133  }134  .item-caption {135    margin-top: 18px;136    font-size: 36px;137    line-height: 1.2;138    color: #7fb5bf;139    font-weight: 600;140  }141 142  .more-reco {143    margin: 18px 36px;144    padding: 18px 0;145    display: flex; align-items: center; gap: 14px;146    color: #0f6d77; font-size: 40px; font-weight: 600;147    border-bottom: 1px solid #e5e5e5;148  }149 150  .product-card {151    padding: 24px 36px;152  }153  .big-img {154    width: 100%; height: 420px;155    background: #E0E0E0;156    border: 1px solid #BDBDBD;157    display: flex; align-items: center; justify-content: center;158    color: #757575; font-size: 34px; border-radius: 8px;159  }160  .prod-title {161    margin-top: 22px;162    font-size: 42px; line-height: 1.2; font-weight: 800;163  }164  .badge-row {165    margin-top: 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;166  }167  .badge {168    background: #d32f2f; color: #fff; font-weight: 800;169    padding: 8px 14px; border-radius: 8px; font-size: 30px;170  }171  .deal-text { color: #c62828; font-weight: 800; font-size: 32px; }172 173  .price-row {174    margin-top: 10px; display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap;175  }176  .price {177    color: #c62828; font-size: 64px; font-weight: 900;178  }179  .old-price {180    color: #989898; text-decoration: line-through; font-size: 36px;181  }182  .prime {183    color: #1a73e8; font-weight: 700; font-size: 34px; display: inline-flex; align-items: center; gap: 8px;184  }185  .sponsored {186    border-top: 1px solid #e5e5e5;187    padding: 10px 36px;188    display: flex; justify-content: flex-end; align-items: center; gap: 10px;189    color: #8c8c8c; font-size: 28px;190  }191 192  /* Bottom bar */193  .bottom-bar {194    position: absolute;195    left: 0; right: 0; bottom: 78px;196    background: #ffffff;197    border-top: 1px solid #e5e5e5;198    height: 120px;199    display: flex; align-items: center; justify-content: space-between;200    padding: 0 26px;201  }202  .bottom-price {203    font-size: 46px; font-weight: 800;204  }205  .add-btn {206    background: #ffd814;207    border: none; border-radius: 60px;208    height: 88px; padding: 0 44px;209    font-size: 42px; font-weight: 800; color: #111;210    box-shadow: 0 4px 0 rgba(0,0,0,0.08);211  }212 213  .nav-pill {214    position: absolute; bottom: 18px; left: 50%;215    transform: translateX(-50%);216    width: 280px; height: 12px; background: #c9c9c9;217    border-radius: 10px;218  }219 220  /* Small helpers */221  .muted { color: #777; }222</style>223</head>224<body>225<div id="render-target">226 227  <div class="top">228    <div class="status-bar">229      <div class="time">3:49</div>230      <div class="status-icons">231        <!-- wifi -->232        <svg class="icon-wifi" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">233          <path d="M2 8c5-4 15-4 20 0"></path>234          <path d="M5 12c3-3 11-3 14 0"></path>235          <path d="M8 16c2-2 6-2 8 0"></path>236          <circle cx="12" cy="19" r="1.5" fill="#222"></circle>237        </svg>238        <!-- battery -->239        <svg class="icon-battery" viewBox="0 0 30 18" fill="none" stroke="#222" stroke-width="2">240          <rect x="1" y="3" width="24" height="12" rx="2"></rect>241          <rect x="3" y="5" width="16" height="8" fill="#4caf50" stroke="none"></rect>242          <rect x="26" y="7" width="3" height="6" rx="1" fill="#222" stroke="none"></rect>243        </svg>244      </div>245    </div>246 247    <div class="search-row">248      <button class="back-btn" aria-label="Back">249        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">250          <path d="M15 18l-6-6 6-6"></path>251        </svg>252      </button>253 254      <div class="search-box">255        <div class="search-icon">256          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">257            <circle cx="10" cy="10" r="6"></circle>258            <path d="M21 21l-5.2-5.2"></path>259          </svg>260        </div>261        <span>chair</span>262        <div class="scan-wrap" title="Scan">263          <svg class="scan-icon" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">264            <path d="M4 8V5a1 1 0 0 1 1-1h3"></path>265            <path d="M20 8V5a1 1 0 0 0-1-1h-3"></path>266            <path d="M4 16v3a1 1 0 0 0 1 1h3"></path>267            <path d="M20 16v3a1 1 0 0 1-1 1h-3"></path>268          </svg>269        </div>270      </div>271    </div>272 273    <div class="tabs">274      <div class="tab active">Details</div>275      <div class="tab">Compare</div>276      <div class="tab">Reviews</div>277      <div class="tab up" title="Scroll to top">278        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">279          <path d="M18 14l-6-6-6 6"></path>280        </svg>281      </div>282    </div>283  </div>284 285  <div class="content">286    <div class="divider"></div>287    <div class="section-title">Customers who viewed this item also viewed</div>288 289    <div class="suggest-row">290      <div class="suggest">291        <div class="img-ph">[IMG: Black metal chair]</div>292        <div class="item-caption">Ikea ADDE Chair (Stainless Steel, Black, Pack of 2)</div>293      </div>294      <div class="suggest">295        <div class="img-ph">[IMG: Black metal chair]</div>296        <div class="item-caption">IKEA ADDE Chair - by STOCKLAND (Black)</div>297      </div>298      <div class="suggest">299        <div class="img-ph">[IMG: White metal chair]</div>300        <div class="item-caption">IKEA ADDE Chair (White, Metal)</div>301      </div>302    </div>303 304    <div class="more-reco">305      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#0f6d77" stroke-width="2">306        <path d="M6 9l6 6 6-6"></path>307      </svg>308      <span>Explore more recommendations</span>309    </div>310 311    <div class="product-card">312      <div class="big-img">[IMG: Sofa side table near couch]</div>313      <div class="prod-title">314        Umark Sheesham Wood Sofa Chair Arm Rest Tray Table Stand Natural Brown Finish (Large)315      </div>316 317      <div class="badge-row">318        <span class="badge">54% off</span>319        <span class="deal-text">Deal of the Day</span>320      </div>321 322      <div class="price-row">323        <div class="price">₹2,754<span style="font-size:30px; vertical-align: super;">00</span></div>324        <div class="old-price">₹5,999.00</div>325        <div class="prime">326          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#1a73e8" stroke-width="3">327            <path d="M4 12l4 4 8-8"></path>328          </svg>329          prime330        </div>331      </div>332    </div>333 334    <div class="sponsored">335      <span>Sponsored</span>336      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#8c8c8c" stroke-width="2">337        <circle cx="12" cy="12" r="9"></circle>338        <path d="M12 8v1"></path>339        <path d="M12 11v5"></path>340      </svg>341    </div>342 343    <div class="divider"></div>344    <!-- Extra spacer to simulate scrollable content -->345    <div style="height: 320px;"></div>346  </div>347 348  <div class="bottom-bar">349    <div class="bottom-price">₹1,369<span style="font-size:24px; vertical-align: super;">00</span></div>350    <button class="add-btn">Add to Cart</button>351  </div>352 353  <div class="nav-pill"></div>354</div>355</body>356</html>