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>Blinkit Login Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #1f2c3d;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 100px;30    padding: 0 36px;31    box-sizing: border-box;32    display: flex;33    align-items: center;34    justify-content: space-between;35    color: #61656d;36    font-weight: 600;37    font-size: 32px;38  }39  .sb-left {40    display: flex;41    align-items: center;42    gap: 22px;43  }44  .sb-right {45    display: flex;46    align-items: center;47    gap: 26px;48  }49  .icon {50    width: 36px;51    height: 36px;52  }53 54  /* Skip login pill */55  .skip-pill {56    position: absolute;57    top: 110px;58    right: 36px;59    background: #ffffff;60    color: #1f2c3d;61    padding: 22px 28px;62    border-radius: 999px;63    font-size: 30px;64    font-weight: 600;65    box-shadow: 0 4px 22px rgba(0,0,0,0.12);66    border: 1px solid #e8e8e8;67  }68 69  /* Product grid area */70  .grid-wrap {71    position: absolute;72    top: 120px;73    left: 0;74    width: 100%;75    padding: 40px 36px 0 36px;76    box-sizing: border-box;77  }78  .product-grid {79    display: grid;80    grid-template-columns: repeat(4, 1fr);81    gap: 34px;82  }83  .tile {84    background: #eaf6fb;85    border-radius: 44px;86    height: 250px;87    position: relative;88    overflow: hidden;89  }90  .img-placeholder {91    position: absolute;92    left: 50%;93    top: 50%;94    transform: translate(-50%, -50%);95    width: 70%;96    height: 72%;97    background: #E0E0E0;98    border: 1px solid #BDBDBD;99    display: flex;100    justify-content: center;101    align-items: center;102    color: #757575;103    font-size: 26px;104    text-align: center;105    border-radius: 18px;106    padding: 6px;107    box-sizing: border-box;108  }109 110  /* Login section */111  .login-section {112    position: absolute;113    left: 0;114    width: 100%;115    bottom: 350px;116    padding: 0 60px;117    box-sizing: border-box;118    text-align: center;119  }120  .logo-badge {121    width: 160px;122    height: 160px;123    margin: 0 auto 36px auto;124    border-radius: 36px;125    background: #f3d36c;126    display: flex;127    align-items: center;128    justify-content: center;129    box-shadow: 0 8px 24px rgba(0,0,0,0.08);130  }131  .logo-text {132    font-weight: 800;133    font-size: 48px;134    letter-spacing: -0.5px;135    color: #212121;136  }137  .logo-text .it {138    color: #3fbf4c;139    font-weight: 900;140  }141 142  .headline {143    font-size: 58px;144    font-weight: 800;145    margin: 10px 0 10px 0;146    color: #222;147  }148  .subtext {149    font-size: 34px;150    color: #6b7280;151    margin-bottom: 36px;152    font-weight: 600;153  }154 155  .input-row {156    width: 960px;157    height: 120px;158    margin: 0 auto 26px auto;159    border: 2px solid #d9dde3;160    border-radius: 28px;161    display: flex;162    align-items: center;163    box-sizing: border-box;164    padding: 0 28px;165    background: #ffffff;166    box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);167  }168  .country-code {169    font-size: 36px;170    font-weight: 700;171    color: #2b2b2b;172    margin-right: 22px;173  }174  .divider {175    width: 2px;176    height: 54px;177    background: #e3e6ea;178    margin-right: 22px;179  }180  .placeholder {181    font-size: 34px;182    color: #9aa1aa;183  }184 185  .cta {186    width: 960px;187    height: 120px;188    margin: 18px auto 30px auto;189    border-radius: 28px;190    background: #8f949f;191    display: flex;192    align-items: center;193    justify-content: center;194    color: #ffffff;195    font-size: 40px;196    font-weight: 800;197    box-shadow: 0 6px 20px rgba(0,0,0,0.08);198  }199 200  .legal {201    font-size: 26px;202    color: #8d94a0;203  }204  .legal a {205    color: #5c6ac4;206    text-decoration: underline;207  }208 209  /* Home indicator */210  .home-indicator {211    position: absolute;212    bottom: 24px;213    left: 50%;214    transform: translateX(-50%);215    width: 240px;216    height: 10px;217    background: #000;218    opacity: 0.6;219    border-radius: 6px;220  }221</style>222</head>223<body>224<div id="render-target">225 226  <!-- Status Bar -->227  <div class="status-bar">228    <div class="sb-left">229      <div>12:00</div>230      <!-- simple dot -->231      <svg class="icon" viewBox="0 0 24 24">232        <circle cx="12" cy="12" r="3" fill="#8b8f97"></circle>233      </svg>234      <!-- signal bars -->235      <svg class="icon" viewBox="0 0 24 24">236        <rect x="3" y="14" width="3" height="7" fill="#8b8f97"></rect>237        <rect x="8" y="11" width="3" height="10" fill="#8b8f97"></rect>238        <rect x="13" y="8" width="3" height="13" fill="#8b8f97"></rect>239        <rect x="18" y="5" width="3" height="16" fill="#8b8f97"></rect>240      </svg>241    </div>242    <div class="sb-right">243      <!-- Wi-Fi -->244      <svg class="icon" viewBox="0 0 24 24">245        <path d="M2 8c5-4 15-4 20 0" stroke="#8b8f97" stroke-width="2" fill="none" stroke-linecap="round"/>246        <path d="M5 12c3-2 11-2 14 0" stroke="#8b8f97" stroke-width="2" fill="none" stroke-linecap="round"/>247        <path d="M9 15c2-1 4-1 6 0" stroke="#8b8f97" stroke-width="2" fill="none" stroke-linecap="round"/>248        <circle cx="12" cy="18" r="1.6" fill="#8b8f97"></circle>249      </svg>250      <!-- Battery -->251      <svg class="icon" viewBox="0 0 24 24">252        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#8b8f97" stroke-width="2" fill="none"/>253        <rect x="21" y="10" width="2" height="4" fill="#8b8f97"/>254        <rect x="4" y="8" width="12" height="8" fill="#8b8f97"/>255      </svg>256    </div>257  </div>258 259  <!-- Skip login -->260  <div class="skip-pill">Skip login</div>261 262  <!-- Product grid -->263  <div class="grid-wrap">264    <div class="product-grid">265      <div class="tile"><div class="img-placeholder">[IMG: Pampers diaper pack]</div></div>266      <div class="tile"><div class="img-placeholder">[IMG: Toor Dal bag]</div></div>267      <div class="tile"><div class="img-placeholder">[IMG: Chocolate bar]</div></div>268      <div class="tile"><div class="img-placeholder">[IMG: Breakfast cookies box]</div></div>269 270      <div class="tile"><div class="img-placeholder">[IMG: Durex pack]</div></div>271      <div class="tile"><div class="img-placeholder">[IMG: Vanilla ice cream tub]</div></div>272      <div class="tile"><div class="img-placeholder">[IMG: Cooking oil bottle]</div></div>273      <div class="tile"><div class="img-placeholder">[IMG: Oats & almonds pack]</div></div>274 275      <div class="tile"><div class="img-placeholder">[IMG: Coffee jar]</div></div>276      <div class="tile"><div class="img-placeholder">[IMG: Wooden spatula & spoon]</div></div>277      <div class="tile"><div class="img-placeholder">[IMG: Leaf wrap]</div></div>278      <div class="tile"><div class="img-placeholder">[IMG: Coca-Cola can]</div></div>279 280      <div class="tile"><div class="img-placeholder">[IMG: Jaggery powder bag]</div></div>281      <div class="tile"><div class="img-placeholder">[IMG: Corn flakes box]</div></div>282      <div class="tile"><div class="img-placeholder">[IMG: Masala oats pack]</div></div>283      <div class="tile"><div class="img-placeholder">[IMG: Snack pack]</div></div>284    </div>285  </div>286 287  <!-- Login section -->288  <div class="login-section">289    <div class="logo-badge">290      <div class="logo-text">blink<span class="it">it</span></div>291    </div>292 293    <div class="headline">India’s last minute app</div>294    <div class="subtext">Log in or sign up</div>295 296    <div class="input-row">297      <div class="country-code">+91</div>298      <div class="divider"></div>299      <div class="placeholder">Enter mobile number</div>300    </div>301 302    <div class="cta">Continue</div>303 304    <div class="legal">305      By continuing, you agree to our306      <a href="#">Terms of service</a> &307      <a href="#">Privacy policy</a>308    </div>309  </div>310 311  <!-- Home indicator -->312  <div class="home-indicator"></div>313</div>314</body>315</html>