GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Product Detail - Oats Cookies</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: Arial, Helvetica, sans-serif;15    color: #222;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 150px;25    background: #fff;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30    font-size: 40px;31    color: #111;32  }33  .status-right {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 26px;38    color: #111;39    font-size: 32px;40  }41  .icon {42    width: 42px;43    height: 42px;44  }45  .icon svg { width: 100%; height: 100%; }46 47  /* Search area */48  .search-area {49    position: absolute;50    top: 160px;51    left: 0;52    width: 1080px;53    height: 120px;54    display: flex;55    align-items: center;56    padding: 0 36px;57    box-sizing: border-box;58  }59  .back-btn {60    width: 72px;61    height: 72px;62    display: flex;63    align-items: center;64    justify-content: center;65    margin-right: 24px;66  }67  .search-bar {68    flex: 1;69    height: 100px;70    border: 2px solid #c7d0c4;71    border-radius: 24px;72    background: #f7fbf5;73    display: flex;74    align-items: center;75    padding: 0 28px;76    box-sizing: border-box;77    color: #456338;78    font-size: 40px;79  }80  .search-bar .placeholder {81    margin-left: 18px;82    opacity: 0.9;83  }84  .mic-btn {85    width: 72px;86    height: 72px;87    display: flex;88    align-items: center;89    justify-content: center;90    margin-left: 18px;91  }92 93  /* Product detail sheet */94  .sheet {95    position: absolute;96    top: 260px;97    left: 0;98    width: 1080px;99    height: 1740px;100    background: #f0f0f0;101    border-top-left-radius: 44px;102    border-top-right-radius: 44px;103    box-sizing: border-box;104    padding: 36px 40px;105  }106  .sheet-top {107    display: flex;108    align-items: center;109    justify-content: space-between;110  }111  .sheet-actions {112    display: flex;113    align-items: center;114    gap: 26px;115  }116 117  .product-image {118    width: 900px;119    height: 260px;120    margin: 80px auto 60px auto;121    background: #E0E0E0;122    border: 1px solid #BDBDBD;123    display: flex;124    justify-content: center;125    align-items: center;126    color: #757575;127    font-size: 36px;128    border-radius: 8px;129  }130 131  .title {132    font-size: 44px;133    letter-spacing: 1.5px;134    margin: 0 0 26px 0;135  }136  .price {137    font-size: 88px;138    font-weight: 700;139    margin: 0 0 28px 0;140  }141 142  .info-list {143    margin-top: 8px;144    display: grid;145    grid-template-columns: 1fr;146    gap: 22px;147    font-size: 38px;148  }149  .info-item {150    display: flex;151    align-items: center;152    gap: 18px;153  }154  .info-item .check {155    width: 42px;156    height: 42px;157    color: #2f8d2f;158  }159 160  .ebt-row {161    display: flex;162    align-items: center;163    gap: 16px;164    margin-top: 16px;165    font-size: 36px;166  }167  .ebt-tag {168    background: #2f8d2f;169    color: #fff;170    padding: 8px 16px;171    border-radius: 8px;172    font-weight: 700;173    letter-spacing: 1px;174    font-size: 30px;175  }176 177  .best-before {178    display: flex;179    align-items: center;180    gap: 18px;181    margin-top: 22px;182    font-size: 36px;183  }184  .calendar-icon {185    width: 46px;186    height: 46px;187  }188 189  .recommend-title {190    margin-top: 36px;191    font-size: 40px;192    font-weight: 600;193  }194 195  .recommend-row {196    margin-top: 24px;197    display: flex;198    gap: 24px;199    overflow: hidden;200  }201  .card {202    width: 320px;203    height: 280px;204    background: #fff;205    border: 1px solid #E1E1E1;206    border-radius: 26px;207    padding: 18px;208    box-sizing: border-box;209    position: relative;210  }211  .card .heart {212    position: absolute;213    top: 18px;214    right: 18px;215    width: 48px;216    height: 48px;217  }218  .card .img {219    width: 100%;220    height: 200px;221    background: #E0E0E0;222    border: 1px solid #BDBDBD;223    border-radius: 12px;224    display: flex;225    justify-content: center;226    align-items: center;227    color: #757575;228    font-size: 28px;229  }230 231  /* Bottom green toast */232  .toast {233    position: absolute;234    left: 0;235    bottom: 140px;236    width: 1080px;237    height: 520px;238    background: #4C8E2F;239    color: #fff;240    box-sizing: border-box;241    padding: 40px;242  }243  .toast .close {244    position: absolute;245    top: 40px;246    right: 40px;247    width: 48px;248    height: 48px;249  }250  .toast .row {251    display: flex;252    align-items: center;253    gap: 24px;254    margin-top: 40px;255    font-size: 46px;256    font-weight: 600;257  }258  .toast .check-circle {259    width: 52px;260    height: 52px;261  }262  .toast .btn {263    margin-top: 60px;264    width: 1000px;265    height: 120px;266    background: #E4F0D9;267    color: #316E26;268    border-radius: 26px;269    display: flex;270    align-items: center;271    justify-content: center;272    font-size: 46px;273    font-weight: 700;274    margin-left: 20px;275  }276 277  /* Home indicator */278  .home-indicator {279    position: absolute;280    bottom: 40px;281    left: 50%;282    transform: translateX(-50%);283    width: 340px;284    height: 14px;285    background: #111;286    opacity: 0.9;287    border-radius: 7px;288  }289</style>290</head>291<body>292<div id="render-target">293 294  <!-- Status bar -->295  <div class="status-bar">296    <div>1:17</div>297    <div class="status-right">298      <svg class="icon" viewBox="0 0 24 24">299        <circle cx="12" cy="12" r="10" fill="none" stroke="#111" stroke-width="2"/>300        <path d="M15 8 L12 11 L9 8" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>301      </svg>302      <svg class="icon" viewBox="0 0 24 24">303        <path d="M12 3 L12 13" stroke="#111" stroke-width="2" stroke-linecap="round"/>304        <circle cx="12" cy="17" r="3" fill="none" stroke="#111" stroke-width="2"/>305      </svg>306      <div>100%</div>307      <svg class="icon" viewBox="0 0 26 14">308        <rect x="1" y="1" width="18" height="12" rx="2" fill="none" stroke="#111" stroke-width="2"/>309        <rect x="3" y="3" width="14" height="8" rx="1" fill="#111"/>310        <rect x="21" y="6" width="4" height="2" rx="1" fill="#111"/>311      </svg>312    </div>313  </div>314 315  <!-- Search -->316  <div class="search-area">317    <div class="back-btn">318      <svg viewBox="0 0 24 24">319        <path d="M15 4 L7 12 L15 20" fill="none" stroke="#4C8E2F" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>320        <path d="M7 12 H22" fill="none" stroke="#4C8E2F" stroke-width="3" stroke-linecap="round"/>321      </svg>322    </div>323    <div class="search-bar">324      <svg class="icon" viewBox="0 0 24 24">325        <circle cx="11" cy="11" r="7" fill="none" stroke="#4C8E2F" stroke-width="2"/>326        <path d="M20 20 L16 16" stroke="#4C8E2F" stroke-width="2" stroke-linecap="round"/>327      </svg>328      <div class="placeholder">Oats</div>329    </div>330    <div class="mic-btn">331      <svg viewBox="0 0 24 24">332        <rect x="9" y="4" width="6" height="10" rx="3" fill="none" stroke="#4C8E2F" stroke-width="2"/>333        <path d="M6 11 C6 15 18 15 18 11" fill="none" stroke="#4C8E2F" stroke-width="2"/>334        <path d="M12 15 L12 20" stroke="#4C8E2F" stroke-width="2" stroke-linecap="round"/>335        <path d="M9 20 H15" stroke="#4C8E2F" stroke-width="2" stroke-linecap="round"/>336      </svg>337    </div>338  </div>339 340  <!-- Product sheet -->341  <div class="sheet">342    <div class="sheet-top">343      <div class="close-btn">344        <svg class="icon" viewBox="0 0 24 24">345          <path d="M4 4 L20 20" stroke="#111" stroke-width="3" stroke-linecap="round"/>346          <path d="M4 20 L20 4" stroke="#111" stroke-width="3" stroke-linecap="round"/>347        </svg>348      </div>349      <div class="sheet-actions">350        <svg class="icon" viewBox="0 0 24 24">351          <path d="M12 5 L12 16" stroke="#111" stroke-width="2" stroke-linecap="round"/>352          <path d="M8 9 L12 5 L16 9" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>353          <rect x="5" y="16" width="14" height="5" rx="2" fill="none" stroke="#111" stroke-width="2"/>354        </svg>355        <svg class="icon" viewBox="0 0 24 24">356          <path d="M12 21 C5 15 3 12 6 9 C8 7 11 8 12 10 C13 8 16 7 18 9 C21 12 19 15 12 21 Z" fill="none" stroke="#111" stroke-width="2"/>357        </svg>358      </div>359    </div>360 361    <div class="product-image">[IMG: Britannia Nutri Choice Oats Cookies Pack]</div>362 363    <div class="title">Britannia Nutri Choice Oats Choco & Almond Cookies, 75 g</div>364    <div class="price">$0.89</div>365 366    <div class="info-list">367      <div class="info-item">368        <svg class="check" viewBox="0 0 24 24">369          <circle cx="12" cy="12" r="10" fill="none" stroke="#2f8d2f" stroke-width="2"/>370          <path d="M7 12 L10 15 L17 8" fill="none" stroke="#2f8d2f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>371        </svg>372        <div>Pickup: Tomorrow 9am - 5pm</div>373      </div>374      <div class="info-item">375        <svg class="check" viewBox="0 0 24 24">376          <circle cx="12" cy="12" r="10" fill="none" stroke="#2f8d2f" stroke-width="2"/>377          <path d="M7 12 L10 15 L17 8" fill="none" stroke="#2f8d2f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>378        </svg>379        <div>Delivery: Tomorrow 1pm - 8pm</div>380      </div>381    </div>382 383    <div class="ebt-row">384      <div class="ebt-tag">EBT</div>385      <div>SNAP EBT eligible</div>386    </div>387 388    <div class="best-before">389      <svg class="calendar-icon" viewBox="0 0 24 24">390        <rect x="3" y="6" width="18" height="15" rx="2" fill="none" stroke="#111" stroke-width="2"/>391        <path d="M3 10 H21" stroke="#111" stroke-width="2"/>392        <path d="M7 3 V8 M17 3 V8" stroke="#111" stroke-width="2" stroke-linecap="round"/>393      </svg>394      <div>Best Before: 03/30/2024</div>395    </div>396 397    <div class="recommend-title">Product Recommendations</div>398    <div class="recommend-row">399      <div class="card">400        <svg class="heart" viewBox="0 0 24 24">401          <path d="M12 21 C5 15 3 12 6 9 C8 7 11 8 12 10 C13 8 16 7 18 9 C21 12 19 15 12 21 Z" fill="none" stroke="#999" stroke-width="2"/>402        </svg>403        <div class="img">[IMG: Snack Pack]</div>404      </div>405      <div class="card">406        <svg class="heart" viewBox="0 0 24 24">407          <path d="M12 21 C5 15 3 12 6 9 C8 7 11 8 12 10 C13 8 16 7 18 9 C21 12 19 15 12 21 Z" fill="none" stroke="#999" stroke-width="2"/>408        </svg>409        <div class="img">[IMG: Biscuit Box]</div>410      </div>411      <div class="card">412        <svg class="heart" viewBox="0 0 24 24">413          <path d="M12 21 C5 15 3 12 6 9 C8 7 11 8 12 10 C13 8 16 7 18 9 C21 12 19 15 12 21 Z" fill="none" stroke="#999" stroke-width="2"/>414        </svg>415        <div class="img">[IMG: Cookies Pack]</div>416      </div>417    </div>418  </div>419 420  <!-- Bottom toast -->421  <div class="toast">422    <div class="close">423      <svg viewBox="0 0 24 24">424        <path d="M4 4 L20 20" stroke="#fff" stroke-width="3" stroke-linecap="round"/>425        <path d="M4 20 L20 4" stroke="#fff" stroke-width="3" stroke-linecap="round"/>426      </svg>427    </div>428    <div class="row">429      <svg class="check-circle" viewBox="0 0 24 24">430        <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/>431        <path d="M7 12 L10 15 L17 8" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>432      </svg>433      <div>Item added to your Cart</div>434    </div>435    <div class="btn">GO TO CART</div>436  </div>437 438  <!-- Home indicator -->439  <div class="home-indicator"></div>440</div>441</body>442</html>