GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>Product Details - JioMart Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1440px;12    height: 3120px;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #1f2a33;17  }18 19  /* Header / App bar */20  .appbar {21    position: relative;22    width: 100%;23    height: 260px;24    background: #2E7EB8;25    box-shadow: 0 2px 0 rgba(0,0,0,0.06);26    color: #fff;27  }28  .status-row {29    height: 90px;30    display: flex;31    align-items: center;32    padding: 0 48px;33    font-weight: 600;34    font-size: 40px;35    letter-spacing: 0.5px;36  }37  .status-row .icons {38    margin-left: auto;39    display: flex;40    gap: 28px;41    align-items: center;42  }43  .header-row {44    display: flex;45    align-items: center;46    gap: 28px;47    padding: 0 48px;48    margin-top: 18px;49  }50  .back-btn {51    width: 72px;52    height: 72px;53    display: flex;54    align-items: center;55    justify-content: center;56  }57  .search-pill {58    flex: 1;59    height: 120px;60    background: #ffffff;61    border-radius: 60px;62    display: flex;63    align-items: center;64    padding: 0 40px;65    gap: 24px;66    color: #6b7a88;67    font-size: 46px;68    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);69  }70  .search-pill .placeholder { flex: 1; }71  .voice-btn {72    width: 84px;73    height: 84px;74    border-radius: 42px;75    background: #f2f6fa;76    display: flex;77    align-items: center;78    justify-content: center;79  }80  .cart-btn {81    width: 86px;82    height: 86px;83    border-radius: 43px;84    background: rgba(255,255,255,0.2);85    display: flex;86    align-items: center;87    justify-content: center;88    position: relative;89    margin-left: 20px;90  }91  .badge {92    position: absolute;93    right: -4px;94    top: -8px;95    width: 54px;96    height: 54px;97    background: #E53935;98    color: #fff;99    border-radius: 27px;100    font-weight: 700;101    font-size: 34px;102    display: flex;103    align-items: center;104    justify-content: center;105    box-shadow: 0 2px 0 rgba(0,0,0,0.15);106  }107 108  /* Content */109  .content {110    position: relative;111    padding: 36px 96px 360px;112  }113  .brand-strip {114    display: flex;115    align-items: center;116    gap: 24px;117    color: #3a4a5a;118    font-size: 42px;119    font-weight: 600;120    margin-top: 18px;121  }122  .img-ph {123    width: 270px;124    height: 80px;125    background: #E0E0E0;126    border: 1px solid #BDBDBD;127    display: flex;128    justify-content: center;129    align-items: center;130    color: #757575;131    font-size: 34px;132    border-radius: 8px;133  }134  .divider {135    height: 2px;136    background: #e9edf1;137    margin: 36px 0 24px;138  }139  h2.section-title {140    font-size: 64px;141    font-weight: 800;142    margin: 24px 0 18px;143    color: #1d2730;144  }145  .bullet-list {146    margin: 0;147    padding-left: 36px;148    font-size: 44px;149    color: #3a4a5a;150  }151  .desc-text {152    font-size: 42px;153    line-height: 1.6;154    color: #2f3b47;155    max-width: 1140px;156  }157  .desc-text b { font-weight: 800; }158  .subtle {159    color: #728293;160    font-weight: 700;161    letter-spacing: 0.3px;162    margin-top: 8px;163  }164 165  /* Product info table-like layout */166  .info-title { margin-top: 28px; }167  .info-subtitle {168    margin-top: 8px;169    color: #7a8a99;170    font-weight: 800;171    font-size: 40px;172    letter-spacing: 1px;173  }174  .info-grid {175    display: grid;176    grid-template-columns: 420px 1fr;177    gap: 24px 48px;178    margin-top: 28px;179    align-items: start;180    max-width: 1140px;181  }182  .info-grid .label {183    font-size: 44px;184    font-weight: 800;185    color: #26323c;186  }187  .info-grid .value {188    font-size: 44px;189    color: #3b4a58;190  }191 192  /* More details button */193  .more-btn {194    margin-top: 44px;195    display: inline-flex;196    align-items: center;197    justify-content: center;198    height: 120px;199    padding: 0 48px;200    border: 2px solid #d5dde6;201    color: #2c4b66;202    background: #ffffff;203    border-radius: 60px;204    font-size: 48px;205    font-weight: 800;206    box-shadow: 0 2px 0 rgba(0,0,0,0.04);207  }208 209  .section-divider {210    height: 2px;211    background: #edf2f6;212    margin: 60px 0 24px;213  }214 215  /* Bottom bar */216  .bottom-bar {217    position: absolute;218    bottom: 0;219    left: 0;220    right: 0;221    height: 220px;222    background: #ffffff;223    border-top: 1px solid #e6ecf2;224    box-shadow: 0 -6px 24px rgba(0,0,0,0.08);225    display: flex;226    align-items: center;227    padding: 0 96px;228    gap: 40px;229  }230  .explore {231    display: flex;232    flex-direction: column;233    gap: 8px;234  }235  .explore .title {236    font-size: 40px;237    color: #7a8a99;238    font-weight: 700;239  }240  .explore .link {241    display: inline-flex;242    align-items: center;243    gap: 12px;244    font-size: 52px;245    font-weight: 800;246    color: #2c4b66;247  }248 249  .qty-wrap {250    margin-left: auto;251    display: flex;252    align-items: center;253    gap: 26px;254  }255  .circle-btn {256    width: 120px;257    height: 120px;258    border-radius: 60px;259    display: flex;260    align-items: center;261    justify-content: center;262  }263  .minus {264    background: #ffffff;265    border: 2px solid #d6dee6;266    color: #2c4b66;267  }268  .plus {269    background: #2E7EB8;270    color: #ffffff;271    box-shadow: 0 8px 16px rgba(46,126,184,0.35);272  }273  .qty-val {274    width: 100px;275    text-align: center;276    font-size: 54px;277    font-weight: 800;278    color: #2f3b47;279  }280 281  /* Home indicator */282  .home-indicator {283    position: absolute;284    bottom: 18px;285    left: 50%;286    transform: translateX(-50%);287    width: 420px;288    height: 12px;289    background: #000000;290    opacity: 0.08;291    border-radius: 10px;292  }293 294  /* Simple icon styles */295  svg { display: block; }296</style>297</head>298<body>299<div id="render-target">300 301  <!-- Header / Status bar -->302  <div class="appbar">303    <div class="status-row">304      <div>9:50</div>305      <div class="icons">306        <!-- simple circle (network) -->307        <svg width="38" height="38" viewBox="0 0 24 24">308          <circle cx="12" cy="12" r="10" fill="none" stroke="#ffffff" stroke-width="2"></circle>309        </svg>310        <!-- battery -->311        <svg width="46" height="38" viewBox="0 0 26 16">312          <rect x="1" y="2" width="20" height="12" rx="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>313          <rect x="22" y="6" width="3" height="4" fill="#ffffff"></rect>314          <rect x="4" y="4" width="14" height="8" fill="#ffffff"></rect>315        </svg>316      </div>317    </div>318 319    <div class="header-row">320      <div class="back-btn">321        <svg width="56" height="56" viewBox="0 0 24 24">322          <path d="M15 6 L9 12 L15 18" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>323        </svg>324      </div>325 326      <div class="search-pill">327        <svg width="54" height="54" viewBox="0 0 24 24">328          <circle cx="11" cy="11" r="7" fill="none" stroke="#8aa0b3" stroke-width="2"></circle>329          <path d="M20 20 L16 16" stroke="#8aa0b3" stroke-width="2" stroke-linecap="round"></path>330        </svg>331        <div class="placeholder">Search JioMart</div>332        <div class="voice-btn">333          <svg width="36" height="36" viewBox="0 0 24 24">334            <rect x="9" y="5" width="6" height="10" rx="3" fill="#2E7EB8"></rect>335            <path d="M12 15 V19" stroke="#2E7EB8" stroke-width="2" stroke-linecap="round"></path>336            <path d="M8 11 C8 14 16 14 16 11" fill="none" stroke="#2E7EB8" stroke-width="2" stroke-linecap="round"></path>337          </svg>338        </div>339      </div>340 341      <div class="cart-btn">342        <svg width="44" height="44" viewBox="0 0 24 24">343          <path d="M5 6 H7 L8.5 16 H18 L20 8 H9" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>344          <circle cx="11" cy="20" r="2" fill="#ffffff"></circle>345          <circle cx="17" cy="20" r="2" fill="#ffffff"></circle>346        </svg>347        <div class="badge">1</div>348      </div>349    </div>350  </div>351 352  <!-- Page content -->353  <div class="content">354    <div class="brand-strip">355      <span>Reliance Retail</span>356      <div class="img-ph">[IMG: SMART BAZAAR Logo]</div>357    </div>358 359    <div class="divider"></div>360 361    <h2 class="section-title">Features & Details</h2>362    <ul class="bullet-list">363      <li>Tasty & flavourful</li>364    </ul>365 366    <div class="divider"></div>367 368    <h2 class="section-title">Description</h2>369    <div class="desc-text">370      Turn your day around with B Natural Mixed Fruit Juice! All it takes is a glass and a bit of ice. Delicious and refreshing - there's no other way to describe it. It contains a handpicked and delicious selection of finest quality ingredients. So go ahead, buy this product online today!371      <br><br>372      <b>Disclaimer:</b><br>373      Despite our attempts to provide you with the most accurate information possible, the actual packaging, ingredients and colour of the product may sometimes vary. Please read the label, directions and warnings carefully before use.374    </div>375 376    <div class="section-divider"></div>377 378    <h2 class="section-title info-title">Product Information</h2>379    <div class="info-subtitle">GENERAL INFORMATION</div>380 381    <div class="info-grid">382      <div class="label">Brand</div>383      <div class="value">B Natural</div>384 385      <div class="label">Manufacturer</div>386      <div class="value">ITC Ltd.</div>387 388      <div class="label">Manufacturer Address</div>389      <div class="value">Schreiber Dynamix Dairies Pvt Ltd<br>390        C/O International Mega Food Park Ltd, Tehsil - Arniwala Sheikh Subhan, Fazilka District, Punjab - 152124, India391      </div>392 393      <div class="label">Manufacturer Email</div>394      <div class="value">itccares@itc.in</div>395 396      <div class="label">Manufacturer Website</div>397      <div class="value">www.aashirvaad.com</div>398    </div>399 400    <button class="more-btn">More Details</button>401 402    <div class="section-divider"></div>403  </div>404 405  <!-- Bottom sticky bar -->406  <div class="bottom-bar">407    <div class="explore">408      <div class="title">Explore More!</div>409      <div class="link">410        View Categories411        <svg width="44" height="44" viewBox="0 0 24 24">412          <path d="M9 6 L15 12 L9 18" fill="none" stroke="#2c4b66" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>413        </svg>414      </div>415    </div>416 417    <div class="qty-wrap">418      <div class="circle-btn minus">419        <svg width="54" height="54" viewBox="0 0 24 24">420          <path d="M6 12 H18" stroke="#2c4b66" stroke-width="3" stroke-linecap="round"></path>421        </svg>422      </div>423      <div class="qty-val">1</div>424      <div class="circle-btn plus">425        <svg width="54" height="54" viewBox="0 0 24 24">426          <path d="M12 6 V18 M6 12 H18" stroke="#ffffff" stroke-width="3" stroke-linecap="round"></path>427        </svg>428      </div>429    </div>430  </div>431 432  <div class="home-indicator"></div>433</div>434</body>435</html>