GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Grocery - Almonds</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    height: 88px;18    padding: 0 32px;19    display: flex;20    align-items: center;21    color: #1e1e1e;22    font-weight: 600;23    font-size: 40px;24  }25  .status-icons {26    margin-left: auto;27    display: flex;28    align-items: center;29    gap: 26px;30  }31  .dot-icon {32    width: 22px;33    height: 22px;34    background: #1e1e1e;35    border-radius: 50%;36    opacity: 0.9;37  }38 39  /* Search header */40  .search-header {41    display: flex;42    align-items: center;43    padding: 20px 26px 10px 26px;44    gap: 18px;45  }46  .icon-btn {47    width: 74px;48    height: 74px;49    border-radius: 16px;50    display: flex;51    align-items: center;52    justify-content: center;53    color: #1e1e1e;54  }55  .search-box {56    flex: 1;57    height: 104px;58    border-radius: 24px;59    border: 1px solid #E5E5E5;60    background: #FAFAFA;61    display: flex;62    align-items: center;63    padding: 0 28px;64    gap: 22px;65  }66  .search-placeholder {67    color: #3a3a3a;68    font-size: 42px;69    flex: 1;70  }71  .icon {72    width: 44px; height: 44px;73  }74 75  /* List */76  .list {77    padding-top: 10px;78  }79  .row {80    display: flex;81    align-items: center;82    padding: 30px 30px;83    gap: 26px;84    border-bottom: 1px solid #EFEFEF;85  }86  .thumb {87    width: 200px;88    height: 160px;89    background: #E0E0E0;90    border: 1px solid #BDBDBD;91    border-radius: 12px;92    display: flex;93    justify-content: center;94    align-items: center;95    color: #757575;96    font-size: 28px;97    text-align: center;98    padding: 8px;99  }100  .details {101    flex: 1;102    min-width: 0;103  }104  .title {105    font-size: 44px;106    color: #1f1f1f;107    line-height: 1.25;108    font-weight: 700;109    margin-bottom: 20px;110  }111  .price {112    font-size: 38px;113    color: #111;114    font-weight: 700;115  }116  .unit {117    font-weight: 700;118  }119 120  /* Qty control */121  .qty {122    width: 300px;123    height: 120px;124    border-radius: 26px;125    padding: 0 22px;126    display: flex;127    align-items: center;128    justify-content: space-between;129    border: 1px solid #ECECEC;130    background: #F7F7F7;131  }132  .qty.pink {133    background: #FFEFEF;134    border-color: #FFD7D7;135  }136  .qty .count {137    font-size: 46px;138    font-weight: 800;139    color: #222;140  }141  .qty.pink .count {142    color: #E53935;143  }144  .qty .plus {145    width: 68px;146    height: 68px;147    border-radius: 16px;148    background: #FFFFFF;149    border: 1px solid #E0E0E0;150    display: flex;151    align-items: center;152    justify-content: center;153    color: #222;154    font-size: 52px;155    line-height: 0;156  }157  .small-note {158    font-size: 32px;159    color: #6b6b6b;160    margin-top: 8px;161  }162 163  /* Bottom basket bar */164  .basket-bar {165    position: absolute;166    left: 0; right: 0; bottom: 0;167    height: 190px;168    background: #E53935;169    border-top-left-radius: 34px;170    border-top-right-radius: 34px;171    color: #fff;172    display: flex;173    align-items: center;174    padding: 0 40px;175    gap: 26px;176  }177  .basket-count {178    width: 74px;179    height: 74px;180    border-radius: 50%;181    background: #F06292;182    display: flex;183    align-items: center;184    justify-content: center;185    font-weight: 800;186    font-size: 40px;187  }188  .basket-text {189    font-size: 52px;190    font-weight: 800;191    letter-spacing: 0.5px;192  }193  .basket-price {194    margin-left: 18px;195    font-size: 48px;196    font-weight: 700;197    opacity: 0.95;198  }199 200  /* Simple helpers */201  .spacer-xxs { height: 4px; }202  .row-large .thumb { width: 240px; height: 170px; }203</style>204</head>205<body>206<div id="render-target">207 208  <!-- Android-like status bar -->209  <div class="status-bar">210    9:40211    <div class="status-icons">212      <div class="dot-icon"></div>213      <div class="dot-icon"></div>214      <div class="dot-icon" style="opacity:.6"></div>215    </div>216  </div>217 218  <!-- Search -->219  <div class="search-header">220    <div class="icon-btn" aria-label="Back">221      <svg class="icon" viewBox="0 0 24 24">222        <path d="M15.5 3.5L7 12l8.5 8.5" stroke="#1e1e1e" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>223      </svg>224    </div>225 226    <div class="search-box">227      <svg class="icon" viewBox="0 0 24 24">228        <circle cx="10" cy="10" r="6.5" stroke="#666" stroke-width="2.2" fill="none"/>229        <path d="M15.5 15.5L21 21" stroke="#666" stroke-width="2.2" stroke-linecap="round"/>230      </svg>231      <div class="search-placeholder">Almonds</div>232      <svg class="icon" viewBox="0 0 24 24">233        <path d="M6 6l12 12M18 6L6 18" stroke="#777" stroke-width="2.4" stroke-linecap="round"/>234      </svg>235    </div>236  </div>237 238  <!-- Product list -->239  <div class="list">240 241    <!-- Item 1 -->242    <div class="row row-large">243      <div class="thumb">[IMG: Ritter Sport Bar]</div>244      <div class="details">245        <div class="title">Ritter Sport Honey Salted Almonds Milk<br>Chocolate 100g</div>246        <div class="price">JD 1.99</div>247      </div>248      <div class="qty">249        <div style="display:flex; align-items:center; gap:16px;">250          <svg class="icon" viewBox="0 0 24 24">251            <path d="M6 7h12l-1 12H7L6 7z" fill="none" stroke="#888" stroke-width="2"/>252            <path d="M9 7V5a3 3 0 013-3 3 3 0 013 3v2" fill="none" stroke="#888" stroke-width="2"/>253          </svg>254          <div class="count">0</div>255        </div>256        <div class="plus">+</div>257      </div>258    </div>259 260    <!-- Item 2 -->261    <div class="row">262      <div class="thumb">[IMG: Almond Slices]</div>263      <div class="details">264        <div class="title">Almonds Halfs</div>265        <div class="price">JD 7.96 <span class="unit">/ 1 KG</span></div>266      </div>267      <div class="qty pink">268        <div style="display:flex; align-items:center; gap:16px;">269          <svg class="icon" viewBox="0 0 24 24">270            <path d="M6 7h12l-1 12H7L6 7z" fill="none" stroke="#E57373" stroke-width="2"/>271            <path d="M9 7V5a3 3 0 013-3 3 3 0 013 3v2" fill="none" stroke="#E57373" stroke-width="2"/>272          </svg>273          <div class="count">0.0 GR</div>274        </div>275        <div class="plus">+</div>276      </div>277    </div>278 279    <!-- Item 3 -->280    <div class="row">281      <div class="thumb">[IMG: Nestle Fitness Cereal]</div>282      <div class="details">283        <div class="title">Nestle Fitness Honey And Almonds<br>Cereal 355g</div>284        <div class="price">JD 3.99</div>285      </div>286      <div class="qty">287        <div style="display:flex; align-items:center; gap:16px;">288          <svg class="icon" viewBox="0 0 24 24">289            <path d="M6 7h12l-1 12H7L6 7z" fill="none" stroke="#888" stroke-width="2"/>290            <path d="M9 7V5a3 3 0 013-3 3 3 0 013 3v2" fill="none" stroke="#888" stroke-width="2"/>291          </svg>292          <div class="count">0</div>293        </div>294        <div class="plus">+</div>295      </div>296    </div>297 298    <!-- Item 4 -->299    <div class="row">300      <div class="thumb">[IMG: Roasted Peeled Almonds]</div>301      <div class="details">302        <div class="title">Roasted Peeled Almonds</div>303        <div class="price">JD 10.00 <span class="unit">/ 1 KG</span></div>304      </div>305      <div class="qty pink">306        <div style="display:flex; align-items:center; gap:16px;">307          <svg class="icon" viewBox="0 0 24 24">308            <path d="M6 7h12l-1 12H7L6 7z" fill="none" stroke="#E57373" stroke-width="2"/>309            <path d="M9 7V5a3 3 0 013-3 3 3 0 013 3v2" fill="none" stroke="#E57373" stroke-width="2"/>310          </svg>311          <div class="count">250.0 GR</div>312        </div>313        <div class="plus">+</div>314      </div>315    </div>316 317    <!-- Item 5 (partial) -->318    <div class="row" style="padding-bottom: 200px;">319      <div class="thumb">[IMG: Roasted Almonds]</div>320      <div class="details">321        <div class="title">Roasted Almonds</div>322        <div class="price">JD 9.90 <span class="unit">/ 1 KG</span></div>323      </div>324      <div class="qty pink">325        <div style="display:flex; align-items:center; gap:16px;">326          <svg class="icon" viewBox="0 0 24 24">327            <path d="M6 7h12l-1 12H7L6 7z" fill="none" stroke="#E57373" stroke-width="2"/>328            <path d="M9 7V5a3 3 0 013-3 3 3 0 013 3v2" fill="none" stroke="#E57373" stroke-width="2"/>329          </svg>330          <div class="count">0.0 GR</div>331        </div>332        <div class="plus">+</div>333      </div>334    </div>335 336  </div>337 338  <!-- Basket bar -->339  <div class="basket-bar">340    <div class="basket-count">1</div>341    <div class="basket-text">Basket</div>342    <div class="basket-price">2.50 JD</div>343  </div>344 345</div>346</body>347</html>