GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>Qty Selector Modal Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #f7f8f9;15  }16 17  /* Top gradient area */18  .top-gradient {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 270px;24    background: linear-gradient(180deg, #92e3d7 0%, #a4e7d6 100%);25  }26  .status-bar {27    position: absolute;28    top: 20px;29    left: 36px;30    right: 36px;31    height: 60px;32    color: #1a2a2a;33    font-size: 34px;34    display: flex;35    align-items: center;36    justify-content: space-between;37    opacity: 0.95;38  }39  .status-icons {40    display: flex;41    gap: 18px;42    align-items: center;43  }44  .icon-dot {45    width: 16px; height: 16px; background: #1a2a2a; border-radius: 50%;46    display: inline-block;47  }48 49  .nav-row {50    position: absolute;51    top: 130px;52    left: 24px;53    right: 24px;54    display: flex;55    align-items: center;56    gap: 18px;57  }58  .back-btn {59    width: 84px;60    height: 84px;61    display: flex;62    align-items: center;63    justify-content: center;64  }65  .search-bar {66    flex: 1;67    height: 110px;68    background: #ffffff;69    border-radius: 26px;70    box-shadow: 0 2px 8px rgba(0,0,0,0.25);71    display: flex;72    align-items: center;73    padding: 0 24px;74    gap: 18px;75  }76  .search-placeholder {77    color: #2b2b2b;78    font-size: 36px;79    white-space: nowrap;80    overflow: hidden;81    text-overflow: ellipsis;82    flex: 1;83  }84  .scan-icon {85    width: 64px; height: 64px;86    border-radius: 14px;87    background: #f1f5f6;88    border: 2px solid #d8e1e3;89    display: flex; align-items: center; justify-content: center;90  }91 92  /* Page content (behind modal) */93  .content {94    position: absolute;95    top: 270px;96    left: 0;97    right: 0;98    bottom: 0;99    padding: 28px 28px 180px;100  }101  .row {102    display: flex; align-items: center; gap: 14px;103  }104  .deal-badge {105    background: #b10028;106    color: #fff;107    padding: 10px 18px;108    border-radius: 10px;109    font-weight: bold;110    font-size: 32px;111    width: 110px;112    text-align: center;113  }114  .discount {115    font-size: 110px;116    color: #c92a2a;117    font-weight: 700;118    margin: 18px 0;119  }120  .link {121    color: #0d8b8f;122    font-size: 40px;123    margin: 18px 0;124  }125  .grey-card {126    border: 1px solid #d9d9d9;127    border-radius: 16px;128    padding: 26px;129    margin-top: 24px;130    background: #ffffff;131  }132  .buy-now {133    position: absolute;134    left: 105px;135    bottom: 150px;136    width: 870px;137    height: 150px;138    background: linear-gradient(180deg, #ffdf4d 0%, #d0950f 100%);139    border-radius: 90px;140    box-shadow: inset 0 2px 0 rgba(255,255,255,0.6);141    display: flex; align-items: center; justify-content: center;142    font-size: 48px; font-weight: 700; color: #242424;143  }144 145  /* Dim overlay */146  .overlay {147    position: absolute;148    inset: 0;149    background: rgba(0,0,0,0.45);150    z-index: 60;151  }152 153  /* Modal */154  .modal {155    position: absolute;156    top: 470px;157    left: 50%;158    transform: translateX(-50%);159    width: 820px;160    height: 1420px;161    background: #ffffff;162    border-radius: 28px;163    box-shadow: 0 12px 28px rgba(0,0,0,0.35);164    z-index: 80;165    overflow: hidden;166  }167  .modal-header {168    height: 120px;169    padding: 0 34px;170    display: flex;171    align-items: center;172    justify-content: space-between;173    background: #f1f4f5;174    font-weight: 800;175    font-size: 46px;176    color: #1f2a2c;177  }178  .close-x {179    width: 54px; height: 54px;180    border-radius: 50%;181    display: flex; align-items: center; justify-content: center;182    color: #2a2a2a;183    font-size: 44px;184  }185  .qty-list {186    height: calc(100% - 120px);187    overflow: hidden;188    background: #fff;189  }190  .qty-item {191    height: 115px;192    display: flex;193    align-items: center;194    padding: 0 34px;195    font-size: 46px;196    color: #1a2a2a;197    border-bottom: 1px solid #e6e7e8;198  }199  .qty-item.selected {200    background: #e6f7f9;201    border: 3px solid #8bd3da;202    margin: 0 0 0 0;203    box-sizing: border-box;204  }205 206  /* Small Android gesture bar */207  .gesture-bar {208    position: absolute;209    bottom: 18px;210    left: 50%;211    transform: translateX(-50%);212    width: 320px; height: 12px;213    background: #a5a8ab;214    border-radius: 6px;215    opacity: 0.9;216  }217</style>218</head>219<body>220<div id="render-target">221  <div class="top-gradient"></div>222 223  <div class="status-bar">224    <div>2:03</div>225    <div class="status-icons">226      <span>🌙</span>227      <span class="icon-dot"></span>228      <span class="icon-dot"></span>229    </div>230  </div>231 232  <div class="nav-row">233    <div class="back-btn">234      <svg width="46" height="46" viewBox="0 0 24 24" fill="#1d2b2c" xmlns="http://www.w3.org/2000/svg">235        <path d="M15.5 5l-7 7 7 7" stroke="#1d2b2c" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>236      </svg>237    </div>238    <div class="search-bar">239      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">240        <circle cx="11" cy="11" r="7" stroke="#6a7d7f" stroke-width="2"/>241        <path d="M16.5 16.5L21 21" stroke="#6a7d7f" stroke-width="2" stroke-linecap="round"/>242      </svg>243      <div class="search-placeholder">Twelfth Night by William Shakesp...</div>244      <div class="scan-icon">245        <svg width="30" height="30" viewBox="0 0 24 24" fill="none">246          <rect x="4" y="4" width="16" height="16" rx="3" stroke="#92a2a5" stroke-width="2"/>247          <circle cx="12" cy="12" r="2" fill="#92a2a5"/>248        </svg>249      </div>250    </div>251  </div>252 253  <div class="content">254    <div class="link">Shop all formats</div>255    <div class="row">256      <div class="deal-badge">Deal</div>257      <div class="discount">-34%</div>258    </div>259    <div class="grey-card">260      <div style="display:flex; gap:16px; align-items:center; margin-bottom:14px;">261        <div style="width:56px;height:56px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#757575;">%</div>262        <div style="font-size:36px;color:#2b2b2b;font-weight:700;">Save extra with offers</div>263      </div>264      <div style="font-size:30px;color:#5a6164;line-height:1.3;">Get additional discounts and no-cost EMI on selected cards. See more</div>265    </div>266 267    <div class="buy-now">Buy Now</div>268  </div>269 270  <!-- Dim overlay -->271  <div class="overlay"></div>272 273  <!-- Modal -->274  <div class="modal">275    <div class="modal-header">276      <div>Qty:</div>277      <div class="close-x">×</div>278    </div>279    <div class="qty-list">280      <div class="qty-item selected">1</div>281      <div class="qty-item">2</div>282      <div class="qty-item">3</div>283      <div class="qty-item">4</div>284      <div class="qty-item">5</div>285      <div class="qty-item">6</div>286      <div class="qty-item">7</div>287      <div class="qty-item">8</div>288      <div class="qty-item">9</div>289      <div class="qty-item">10</div>290      <div class="qty-item">11</div>291      <div class="qty-item" style="border-bottom:none;">12</div>292    </div>293  </div>294 295  <div class="gesture-bar"></div>296</div>297</body>298</html>