GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mobile UI - Basmati Rice</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    border-radius: 0;15  }16 17  /* Header gradient */18  .header {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 420px;24    background: linear-gradient(90deg, #9fd3df 0%, #bfe9ce 100%);25  }26 27  /* Status bar */28  .status-bar {29    position: absolute;30    top: 18px;31    left: 28px;32    right: 28px;33    height: 64px;34    display: flex;35    align-items: center;36    justify-content: space-between;37    color: #1a1a1a;38    font-weight: 600;39    font-size: 36px;40    opacity: 0.95;41  }42  .status-right {43    display: flex;44    align-items: center;45    gap: 26px;46  }47  .status-icon {48    width: 32px;49    height: 32px;50    border-radius: 16px;51    background: rgba(0,0,0,0.15);52  }53  .battery {54    width: 60px; height: 28px; position: relative;55  }56  .battery svg { display: block; }57 58  /* Back button */59  .back-btn {60    position: absolute;61    top: 168px;62    left: 24px;63    width: 72px;64    height: 72px;65    display: flex;66    align-items: center;67    justify-content: center;68  }69 70  /* Search bar */71  .search-bar {72    position: absolute;73    top: 150px;74    left: 120px;75    width: 840px;76    height: 120px;77    background: #ffffff;78    border-radius: 24px;79    box-shadow: 0 6px 18px rgba(0,0,0,0.12);80    display: flex;81    align-items: center;82    padding: 0 28px;83  }84  .search-icon {85    width: 52px; height: 52px; margin-right: 22px;86  }87  .search-text {88    font-size: 44px;89    color: #111111;90    flex: 1;91  }92  .scan-btn {93    width: 72px; height: 72px; border-radius: 16px;94    background: #f4f6f8; display: flex; align-items: center; justify-content: center;95    border: 1px solid #d0d5d9;96  }97 98  /* Content area text */99  .content {100    position: absolute;101    top: 440px;102    left: 40px;103    right: 40px;104  }105  .line {106    font-size: 42px;107    line-height: 64px;108    color: rgba(0,0,0,0.35);109    margin-bottom: 10px;110  }111  .line b { color: rgba(0,0,0,0.65); }112  .link { color: #4aa7c4; }113  .green { color: #63b37b; }114  .subtle { color: rgba(0,0,0,0.3); }115  .icon-inline {116    display: inline-flex; align-items: center; gap: 16px;117  }118  .icon-inline svg { width: 40px; height: 40px; }119 120  /* Qty selector */121  .qty-row {122    margin-top: 40px;123    display: flex;124    align-items: center;125    gap: 18px;126  }127  .qty-box {128    width: 200px;129    height: 100px;130    border-radius: 20px;131    background: #ffffff;132    border: 1px solid #e9edf0;133    box-shadow: 0 6px 16px rgba(0,0,0,0.06);134    display: flex;135    align-items: center;136    justify-content: space-between;137    padding: 0 24px;138    color: rgba(0,0,0,0.4);139    font-size: 40px;140  }141 142  /* Add to Cart */143  .add-to-cart {144    margin-top: 120px;145    width: 980px;146    height: 120px;147    border-radius: 60px;148    background: #fff6d8;149    border: 3px solid #eaf3ff;150    display: flex;151    align-items: center;152    justify-content: center;153    font-size: 48px;154    color: rgba(0,0,0,0.45);155    letter-spacing: 0.5px;156  }157 158  /* Added to cart toast area */159  .added-area {160    margin-top: 60px;161    width: 980px;162    height: 160px;163    background: #fff0dc;164    border-radius: 60px;165    display: flex;166    align-items: center;167    justify-content: center;168    position: relative;169  }170  .added-pill {171    position: absolute;172    width: 520px;173    height: 110px;174    border-radius: 24px;175    background: #b7b9bd;176    color: #ffffff;177    font-weight: 700;178    font-size: 44px;179    display: flex;180    align-items: center;181    justify-content: center;182    gap: 18px;183  }184  .added-pill .check {185    width: 46px; height: 46px; background: #ffffff; border-radius: 50%;186    display: inline-flex; align-items: center; justify-content: center; color: #b7b9bd; font-weight: 900;187  }188 189  /* More info text */190  .info-block { margin-top: 40px; }191  .info-line { font-size: 40px; color: rgba(0,0,0,0.35); margin: 22px 0; }192  .info-line .link { color: #69a9d2; }193 194  /* Other sellers section */195  .other-sellers {196    margin-top: 80px;197    border-top: 1px solid #e9edf0;198    padding-top: 40px;199  }200  .other-title { font-size: 52px; font-weight: 700; color: rgba(0,0,0,0.65); margin-bottom: 20px; }201  .other-sub { font-size: 40px; color: rgba(0,0,0,0.35); }202  .price { font-size: 60px; color: rgba(0,0,0,0.55); margin-top: 22px; }203 204  /* Bottom navigation */205  .bottom-nav {206    position: absolute;207    bottom: 0;208    left: 0;209    width: 1080px;210    height: 220px;211    border-top: 1px solid #dfe5ea;212    background: #ffffff;213    display: flex;214    align-items: center;215    justify-content: space-around;216    padding-bottom: 20px;217  }218  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 20px; }219  .nav-item svg { width: 72px; height: 72px; }220  .nav-label { font-size: 38px; color: #4a8793; }221  .nav-label.muted { color: rgba(0,0,0,0.55); }222 223  /* Gesture bar */224  .gesture {225    position: absolute;226    bottom: 240px;227    left: 50%;228    transform: translateX(-50%);229    width: 340px;230    height: 16px;231    border-radius: 10px;232    background: #8b8f93;233    opacity: 0.6;234  }235</style>236</head>237<body>238<div id="render-target">239 240  <!-- Header with gradient -->241  <div class="header">242    <div class="status-bar">243      <div>1:07</div>244      <div class="status-right">245        <div class="status-icon"></div>246        <div class="status-icon"></div>247        <div class="status-icon"></div>248        <div class="battery">249          <svg viewBox="0 0 60 28">250            <rect x="2" y="2" width="50" height="24" rx="4" ry="4" fill="none" stroke="#222" stroke-width="3"></rect>251            <rect x="6" y="6" width="38" height="16" rx="3" fill="#222"></rect>252            <rect x="52" y="9" width="6" height="10" rx="2" fill="#222"></rect>253          </svg>254        </div>255      </div>256    </div>257 258    <div class="back-btn">259      <svg viewBox="0 0 24 24" width="72" height="72">260        <path d="M15 5 L7 12 L15 19" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>261      </svg>262    </div>263 264    <div class="search-bar">265      <svg class="search-icon" viewBox="0 0 24 24">266        <circle cx="10" cy="10" r="7" stroke="#222" stroke-width="2" fill="none"></circle>267        <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#222" stroke-width="2" stroke-linecap="round"></line>268      </svg>269      <div class="search-text">basmati rice</div>270      <div class="scan-btn" aria-label="scan">271        <svg viewBox="0 0 24 24" width="44" height="44">272          <rect x="3" y="3" width="18" height="18" rx="3" fill="none" stroke="#67737c" stroke-width="2"></rect>273          <circle cx="12" cy="12" r="4" fill="none" stroke="#67737c" stroke-width="2"></circle>274        </svg>275      </div>276    </div>277  </div>278 279  <!-- Content -->280  <div class="content">281    <div class="line"><span class="link">FREE delivery</span> <b>Wednesday, 13 December.</b> Details</div>282    <div class="line">Or fastest delivery <b>Tomorrow, 12 December.</b> Order within <span class="link">10 hrs 34 mins.</span> Details</div>283    <div class="line icon-inline">284      <svg viewBox="0 0 24 24">285        <path d="M12 2 C8 2 5 5 5 8 c0 6 7 12 7 12 s7-6 7-12 c0-3-3-6-7-6z" fill="none" stroke="#9eb9c5" stroke-width="2"></path>286        <circle cx="12" cy="8" r="2" fill="#9eb9c5"></circle>287      </svg>288      Delivering to New Delhi 110043 - Update location289    </div>290 291    <div class="line subtle" style="margin-top: 40px;">Use by: 31 MAR 2024</div>292    <div class="line green">In stock</div>293 294    <div class="qty-row">295      <div class="qty-box">296        <span>Qty: 1</span>297        <svg viewBox="0 0 24 24" width="36" height="36">298          <path d="M6 9 L12 15 L18 9" stroke="#a9b0b6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>299        </svg>300      </div>301    </div>302 303    <div class="add-to-cart">Add to Cart</div>304 305    <div class="added-area">306      <div class="added-pill">307        <div class="check">✓</div>308        Added to cart309      </div>310    </div>311 312    <div class="info-block">313      <div class="info-line icon-inline">314        <svg viewBox="0 0 24 24">315          <rect x="6" y="4" width="12" height="14" rx="2" fill="none" stroke="#c8ced3" stroke-width="2"></rect>316          <circle cx="12" cy="9" r="2" fill="#c8ced3"></circle>317        </svg>318        Secure transaction319      </div>320      <div class="info-line">Sold by <span class="link">Amazon Retail</span> and <span class="link">Fulfilled by Amazon</span>. </div>321      <div class="info-line"><span class="link">Add to Wish List</span></div>322    </div>323 324    <div class="other-sellers">325      <div class="other-title">Other sellers on Amazon</div>326      <div class="other-sub">Compare New (6) from</div>327      <div class="price">₹669<span style="font-size:38px;">00</span> <span class="subtle"> • Fulfilled FREE Delivery</span></div>328    </div>329  </div>330 331  <!-- Gesture bar -->332  <div class="gesture"></div>333 334  <!-- Bottom Navigation -->335  <div class="bottom-nav">336    <div class="nav-item">337      <svg viewBox="0 0 24 24">338        <path d="M3 10 L12 3 L21 10 V21 H14 V14 H10 V21 H3 Z" fill="none" stroke="#2b8a9a" stroke-width="2"></path>339      </svg>340      <div class="nav-label">Home</div>341    </div>342    <div class="nav-item">343      <svg viewBox="0 0 24 24">344        <circle cx="12" cy="8" r="4" fill="none" stroke="#111" stroke-width="2"></circle>345        <path d="M4 21 C5 15 19 15 20 21" fill="none" stroke="#111" stroke-width="2"></path>346      </svg>347      <div class="nav-label muted">You</div>348    </div>349    <div class="nav-item">350      <svg viewBox="0 0 24 24">351        <rect x="4" y="15" width="16" height="5" rx="2" fill="none" stroke="#111" stroke-width="2"></rect>352        <rect x="6" y="9" width="12" height="5" rx="2" fill="none" stroke="#111" stroke-width="2"></rect>353        <rect x="8" y="3" width="8" height="5" rx="2" fill="none" stroke="#111" stroke-width="2"></rect>354      </svg>355      <div class="nav-label muted">More</div>356    </div>357    <div class="nav-item">358      <svg viewBox="0 0 24 24">359        <circle cx="9" cy="19" r="2" stroke="#111" stroke-width="2" fill="none"></circle>360        <circle cx="17" cy="19" r="2" stroke="#111" stroke-width="2" fill="none"></circle>361        <path d="M3 5 H6 L7 13 H18 L20 7 H8" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>362      </svg>363      <div class="nav-label muted">Cart</div>364    </div>365    <div class="nav-item">366      <svg viewBox="0 0 24 24">367        <path d="M4 6 H20 M4 12 H20 M4 18 H20" stroke="#111" stroke-width="2" stroke-linecap="round"></path>368      </svg>369      <div class="nav-label muted">Menu</div>370    </div>371  </div>372 373</div>374</body>375</html>