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>Cart - Mobile UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16  * { box-sizing: border-box; color: #1a1a1a; }17 18  /* Header */19  .header {20    padding: 70px 48px 24px 48px;21  }22  .title-row {23    position: relative;24    padding-top: 46px;25    padding-bottom: 24px;26  }27  .title {28    font-size: 56px;29    color: #114a8b;30    font-weight: 600;31  }32  .close-btn {33    position: absolute;34    right: 8px;35    top: 30px;36    width: 80px;37    height: 80px;38    display: flex;39    align-items: center;40    justify-content: center;41    cursor: default;42  }43  .divider-thin {44    height: 1px;45    background: #eeeeee;46    width: 100%;47  }48 49  /* Store row */50  .store-row {51    display: flex;52    align-items: center;53    justify-content: space-between;54    padding: 38px 48px;55  }56  .store-left {57    display: flex;58    align-items: center;59    gap: 28px;60  }61  .store-logo {62    width: 100px;63    height: 100px;64    border-radius: 50%;65    background: #E0E0E0;66    border: 1px solid #BDBDBD;67    display: flex;68    align-items: center;69    justify-content: center;70    color: #757575;71    font-weight: 700;72    font-size: 40px;73  }74  .store-name {75    font-size: 46px;76    font-weight: 600;77  }78  .store-total {79    font-size: 44px;80    font-weight: 700;81  }82 83  .section-label {84    padding: 18px 48px 26px 48px;85    color: #1861ae;86    font-size: 44px;87    font-weight: 600;88  }89 90  /* Item card */91  .item-card {92    padding: 34px 48px;93    background: #ffffff;94    border-top: 1px solid #f0f0f0;95    border-bottom: 1px solid #f0f0f0;96  }97  .item-row {98    display: flex;99    align-items: flex-start;100    gap: 30px;101  }102  .item-img {103    width: 180px;104    height: 180px;105    background: #E0E0E0;106    border: 1px solid #BDBDBD;107    display: flex;108    align-items: center;109    justify-content: center;110    color: #757575;111    font-size: 28px;112    text-align: center;113  }114  .item-info {115    flex: 1;116    padding-right: 24px;117  }118  .price-line {119    display: flex;120    align-items: baseline;121    gap: 12px;122    margin-bottom: 14px;123  }124  .price-ea {125    font-size: 48px;126    font-weight: 700;127  }128  .approx {129    font-size: 30px;130    color: #888;131  }132  .strike {133    font-size: 36px;134    color: #9e9e9e;135    text-decoration: line-through;136  }137  .item-title {138    font-size: 42px;139    line-height: 1.25;140    margin-bottom: 16px;141  }142  .unit {143    font-size: 34px;144    color: #777;145  }146  .qty-circle {147    width: 96px;148    height: 96px;149    border-radius: 50%;150    border: 3px solid #1c6ed1;151    color: #1c6ed1;152    display: flex;153    align-items: center;154    justify-content: center;155    font-weight: 700;156    font-size: 40px;157    margin-top: 20px;158  }159 160  /* Note box */161  .note {162    margin: 24px 0 0 0;163    padding: 36px 48px;164    background: #f5f6f7;165    color: #777;166    font-size: 34px;167    line-height: 1.45;168    border-top: 1px solid #ededed;169    border-bottom: 1px solid #ededed;170  }171 172  /* Summary */173  .summary {174    padding: 48px;175  }176  .summary-row {177    display: flex;178    align-items: center;179    justify-content: space-between;180    padding: 22px 0;181    font-size: 44px;182  }183  .summary-row .label {184    font-weight: 600;185  }186  .summary-row .value {187    font-weight: 700;188  }189  .link-blue {190    color: #1861ae;191    font-weight: 600;192  }193  .green {194    color: #1e8e5a;195    font-weight: 700;196  }197  .divider {198    height: 2px;199    background: #eeeeee;200    margin: 18px 0 28px 0;201  }202 203  /* Spacer to avoid overlap with checkout bar */204  .spacer {205    height: 520px;206  }207 208  /* Checkout bar */209  .checkout-bar {210    position: absolute;211    left: 0;212    right: 0;213    bottom: 110px;214    background: #ffffff;215    border-top: 1px solid #e6e6e6;216    padding: 32px 40px 40px 40px;217    box-shadow: 0 -6px 20px rgba(0,0,0,0.05);218  }219  .checkout-top {220    display: flex;221    align-items: center;222    justify-content: space-between;223    padding: 6px 8px 24px 8px;224  }225  .checkout-top .label {226    color: #0f3866;227    font-size: 42px;228    font-weight: 700;229  }230  .checkout-top .prices {231    display: flex;232    align-items: baseline;233    gap: 24px;234    font-size: 42px;235  }236  .old {237    color: #9e9e9e;238    text-decoration: line-through;239    font-weight: 600;240  }241  .new {242    color: #0f3866;243    font-weight: 800;244  }245  .checkout-btn {246    margin-top: 10px;247    width: 100%;248    background: #1769d1;249    color: #fff;250    font-size: 46px;251    font-weight: 700;252    padding: 40px 24px;253    border-radius: 90px;254    text-align: center;255  }256 257  /* System nav pill */258  .system-nav {259    position: absolute;260    left: 0; right: 0; bottom: 0;261    height: 110px;262    background: #000;263    display: flex;264    align-items: center;265    justify-content: center;266  }267  .pill {268    width: 220px;269    height: 12px;270    background: #ffffff;271    border-radius: 8px;272    opacity: 0.9;273  }274</style>275</head>276<body>277<div id="render-target">278 279  <div class="header">280    <div class="title-row">281      <div class="title">Cart (1)</div>282      <div class="close-btn" aria-label="Close">283        <svg width="48" height="48" viewBox="0 0 24 24">284          <path d="M5 5 L19 19 M19 5 L5 19" stroke="#114a8b" stroke-width="2.5" stroke-linecap="round"/>285        </svg>286      </div>287    </div>288  </div>289 290  <div class="divider-thin"></div>291 292  <div class="store-row">293    <div class="store-left">294      <div class="store-logo">A</div>295      <div class="store-name">Albertsons</div>296    </div>297    <div class="store-total">$18.71</div>298  </div>299 300  <div class="divider-thin"></div>301 302  <div class="section-label">Meat & Seafood</div>303 304  <div class="item-card">305    <div class="item-row">306      <div class="item-img">[IMG: Meat Pack]</div>307      <div class="item-info">308        <div class="price-line">309          <div class="price-ea">$18.71ea</div>310          <div class="approx">approx</div>311          <div class="strike">$37.46</div>312        </div>313        <div class="item-title">Beef Top Loin New York Strip Steak Bone In Value Pack - 3.75 Lb</div>314        <div class="unit">$4.99 / lb</div>315      </div>316      <div class="qty-circle">1</div>317    </div>318 319    <div class="note">320      Apologies, we're not able to guarantee the prices or availability of the items in your list. Please check in store for current prices and availability.321    </div>322  </div>323 324  <div class="summary">325    <div class="summary-row">326      <div class="label">Albertsons items (1)</div>327      <div class="value">$37.46</div>328    </div>329    <div class="summary-row">330      <div class="link-blue">Estimated savings</div>331      <div class="green">-$18.75</div>332    </div>333    <div class="divider"></div>334    <div class="summary-row">335      <div class="label">Estimated subtotal</div>336      <div class="value">$18.71</div>337    </div>338  </div>339 340  <div class="spacer"></div>341 342  <div class="checkout-bar">343    <div class="checkout-top">344      <div class="label">Est. subtotal</div>345      <div class="prices">346        <span class="old">$37.46</span>347        <span class="new">$18.71</span>348      </div>349    </div>350    <div class="checkout-btn">Checkout</div>351  </div>352 353  <div class="system-nav">354    <div class="pill"></div>355  </div>356 357</div>358</body>359</html>