GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Grocery UI - Almonds</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14    color: #111;15  }16 17  /* Top navigation */18  .topbar {19    position: relative;20    padding: 36px 24px 16px 24px;21  }22  .nav-row {23    display: flex;24    align-items: center;25    gap: 24px;26    height: 84px;27  }28  .icon-btn {29    width: 72px;30    height: 72px;31    border-radius: 18px;32    display: flex;33    align-items: center;34    justify-content: center;35  }36  .search-wrap {37    margin-top: 12px;38    background: #F3F4F6;39    border: 1px solid #E0E0E0;40    border-radius: 28px;41    height: 100px;42    display: flex;43    align-items: center;44    padding: 0 24px;45  }46  .search-wrap .left {47    display: flex;48    align-items: center;49    gap: 16px;50    color: #4B5563;51    font-size: 42px;52  }53  .search-wrap .right-x {54    margin-left: auto;55    width: 72px; height: 72px;56    display: flex; align-items: center; justify-content: center;57    color: #6B7280;58  }59  .title-search {60    font-size: 48px;61    color: #111827;62  }63 64  /* List items */65  .list {66    padding: 8px 24px 24px 24px;67  }68  .item {69    display: flex;70    gap: 24px;71    padding: 28px 0;72    border-bottom: 1px solid #EFEFEF;73  }74  .thumb {75    width: 180px; height: 160px;76    background: #E0E0E0;77    border: 1px solid #BDBDBD;78    border-radius: 16px;79    display: flex; align-items: center; justify-content: center;80    color: #757575; font-size: 30px; text-align: center; padding: 8px;81  }82  .item .info {83    flex: 1;84    display: flex;85    flex-direction: column;86    justify-content: center;87  }88  .item .name {89    font-size: 46px;90    line-height: 1.2;91    color: #111;92  }93  .price-row {94    margin-top: 10px;95    font-weight: 700;96    font-size: 40px;97    color: #111;98  }99  .qty-card {100    width: 270px;101    height: 104px;102    background: #F6F7F8;103    border: 1px solid #E5E7EB;104    border-radius: 26px;105    display: flex; align-items: center; justify-content: space-around;106  }107  .count {108    color: #D32F2F;109    font-weight: 700;110    font-size: 44px;111  }112  .plus-mini, .trash-mini {113    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;114  }115 116  /* Bottom sheet */117  .sheet {118    position: absolute;119    left: 0; right: 0;120    top: 760px;121    height: 1640px;122    background: #FFFFFF;123    border-top-left-radius: 36px;124    border-top-right-radius: 36px;125    box-shadow: 0 -8px 32px rgba(0,0,0,0.12);126  }127  .sheet .dropdown {128    position: absolute;129    left: 32px;130    top: 28px;131    width: 116px; height: 116px;132    background: #FFFFFF;133    border-radius: 28px;134    box-shadow: 0 2px 10px rgba(0,0,0,0.08);135    display: flex; align-items: center; justify-content: center;136  }137  .sheet-content {138    position: absolute;139    left: 0; right: 0;140    top: 140px;141    bottom: 0;142    padding: 0 32px 200px 32px;143  }144  .product-image {145    width: 720px; height: 420px;146    margin: 40px auto 24px auto;147    background: #E0E0E0;148    border: 1px solid #BDBDBD;149    border-radius: 20px;150    display: flex; align-items: center; justify-content: center;151    color: #757575; font-size: 42px;152  }153  .prod-name {154    font-size: 58px; font-weight: 800; color: #111; margin-top: 20px;155  }156  .perkg {157    margin-top: 18px; color: #6B7280; font-size: 38px; font-weight: 700;158  }159  .weight-row {160    margin-top: 36px;161    display: flex; align-items: center; gap: 26px;162  }163  .minus-pill {164    width: 132px; height: 132px;165    border-radius: 40px;166    background: #F3F4F6;167    border: 1px solid #E5E7EB;168    display: flex; align-items: center; justify-content: center;169  }170  .weight-value {171    font-size: 56px; font-weight: 800; color: #111;172  }173  .plus-circle {174    margin-left: auto;175    width: 132px; height: 132px;176    background: #E53935;177    border-radius: 40px;178    display: flex; align-items: center; justify-content: center;179    box-shadow: 0 4px 12px rgba(229,57,53,0.4);180  }181 182  /* Add to basket bar */183  .basket-bar {184    position: absolute;185    left: 24px; right: 24px; bottom: 32px;186    height: 140px;187    background: #D32F2F;188    border-radius: 28px;189    display: flex; align-items: center; justify-content: space-between;190    padding: 0 36px;191    color: #fff;192  }193  .basket-left {194    display: flex; align-items: center; gap: 24px;195    font-size: 48px; font-weight: 700;196  }197  .basket-price {198    font-size: 46px; font-weight: 800;199  }200 201  /* Utilities */202  .muted { color: #6B7280; }203  .row-spread { display: flex; align-items: center; justify-content: space-between; gap: 24px; }204</style>205</head>206<body>207<div id="render-target">208 209  <div class="topbar">210    <div class="nav-row">211      <div class="icon-btn">212        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">213          <path d="M15.5 4.5L7.5 12l8 7.5" stroke="#111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>214        </svg>215      </div>216    </div>217 218    <div class="search-wrap">219      <div class="left">220        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">221          <circle cx="10" cy="10" r="7" stroke="#6B7280" stroke-width="2.2"/>222          <path d="M15.5 15.5L21 21" stroke="#6B7280" stroke-width="2.2" stroke-linecap="round"/>223        </svg>224        <div class="title-search">Almonds</div>225      </div>226      <div class="right-x">227        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">228          <path d="M6 6l12 12M18 6L6 18" stroke="#6B7280" stroke-width="2.2" stroke-linecap="round"/>229        </svg>230      </div>231    </div>232  </div>233 234  <div class="list">235    <!-- Item 1 -->236    <div class="item">237      <div class="thumb">[IMG]</div>238      <div class="info">239        <div class="name">Khudari Almonds Syrup 600ml</div>240        <div class="price-row">JD 1.99</div>241      </div>242      <div class="qty-card">243        <div class="trash-mini">244          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">245            <path d="M9 4h6M4 7h16M7 7l1 12h8l1-12" stroke="#9CA3AF" stroke-width="1.8" stroke-linecap="round"/>246          </svg>247        </div>248        <div class="count">0</div>249        <div class="plus-mini">250          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">251            <path d="M12 5v14M5 12h14" stroke="#111" stroke-width="2.2" stroke-linecap="round"/>252          </svg>253        </div>254      </div>255    </div>256 257    <!-- Item 2 -->258    <div class="item">259      <div class="thumb">[IMG: Ritter Sport]</div>260      <div class="info">261        <div class="name">Ritter Sport Honey Salted Almonds Milk Chocolate 100g</div>262        <div class="price-row">JD 1.99</div>263      </div>264      <div class="qty-card">265        <div class="trash-mini">266          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">267            <path d="M9 4h6M4 7h16M7 7l1 12h8l1-12" stroke="#9CA3AF" stroke-width="1.8" stroke-linecap="round"/>268          </svg>269        </div>270        <div class="count">0</div>271        <div class="plus-mini">272          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">273            <path d="M12 5v14M5 12h14" stroke="#111" stroke-width="2.2" stroke-linecap="round"/>274          </svg>275        </div>276      </div>277    </div>278  </div>279 280  <!-- Bottom Sheet -->281  <div class="sheet">282    <div class="dropdown">283      <svg width="54" height="54" viewBox="0 0 24 24" fill="none">284        <path d="M6 9l6 6 6-6" stroke="#D32F2F" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>285      </svg>286    </div>287 288    <div class="sheet-content">289      <div class="product-image">[IMG: Roasted Almonds]</div>290 291      <div class="prod-name">Roasted Peeled Almonds</div>292      <div class="perkg">JD 10.00 / 1 KG</div>293 294      <div class="weight-row">295        <div class="minus-pill">296          <svg width="48" height="48" viewBox="0 0 24 24" fill="none">297            <path d="M5 12h14" stroke="#9CA3AF" stroke-width="2.5" stroke-linecap="round"/>298          </svg>299        </div>300        <div class="weight-value">250.0 GR</div>301        <div class="plus-circle">302          <svg width="56" height="56" viewBox="0 0 24 24" fill="none">303            <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="2.8" stroke-linecap="round"/>304          </svg>305        </div>306      </div>307 308      <div class="basket-bar">309        <div class="basket-left">310          <svg width="54" height="54" viewBox="0 0 24 24" fill="none">311            <path d="M12 4v16M4 12h16" stroke="#FFFFFF" stroke-width="2.6" stroke-linecap="round"/>312          </svg>313          <div>Add To Basket</div>314        </div>315        <div class="basket-price">JD 2.50</div>316      </div>317    </div>318  </div>319 320</div>321</body>322</html>