GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Flipkart Login Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #14264A;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 40px;28    box-sizing: border-box;29    font-size: 36px;30  }31  .status-left { flex: 1; }32  .status-right {33    display: flex;34    align-items: center;35    gap: 24px;36    font-weight: 600;37  }38  .status-icon { width: 44px; height: 44px; fill: none; stroke: #ffffff; stroke-width: 4px; }39 40  /* App bar */41  .app-bar {42    position: absolute;43    top: 120px;44    left: 0;45    width: 1080px;46    height: 240px;47    background: #2874F0;48    border-bottom-right-radius: 40px;49    color: #ffffff;50    box-sizing: border-box;51  }52  .app-inner {53    height: 100%;54    display: flex;55    align-items: center;56    padding: 0 40px;57    gap: 24px;58  }59  .close-btn {60    width: 72px;61    height: 72px;62    display: flex;63    align-items: center;64    justify-content: center;65  }66  .brand {67    display: flex;68    align-items: center;69    gap: 16px;70    font-size: 52px;71    font-weight: 800;72    letter-spacing: 0.5px;73    margin-left: 12px;74  }75  .bag-icon { width: 64px; height: 64px; }76 77  /* Content */78  .content {79    position: absolute;80    top: 360px;81    left: 0;82    width: 100%;83    padding: 0 48px;84    box-sizing: border-box;85    color: #222;86  }87  .title {88    font-size: 48px;89    font-weight: 700;90    margin: 24px 0 12px;91  }92  .subtitle {93    font-size: 34px;94    color: #6b6b6b;95    margin-bottom: 48px;96  }97 98  .field-block {99    position: relative;100    margin-top: 12px;101  }102  .field-label {103    position: absolute;104    top: -26px;105    left: 24px;106    padding: 0 12px;107    background: #ffffff;108    color: #2874F0;109    font-size: 30px;110    font-weight: 600;111  }112  .input {113    width: 984px;114    height: 160px;115    border: 4px solid #3C64F6;116    border-radius: 24px;117    font-size: 44px;118    box-sizing: border-box;119    padding: 0 24px 0 32px;120    outline: none;121  }122  .prefix {123    position: absolute;124    top: 50%;125    left: 36px;126    transform: translateY(-50%);127    color: #111;128    font-size: 44px;129    display: flex;130    align-items: center;131    gap: 10px;132  }133  .caret {134    width: 20px;135    height: 12px;136    border-left: 12px solid transparent;137    border-right: 12px solid transparent;138    border-top: 12px solid #111;139    margin-top: 8px;140  }141  .input::placeholder { color: #999; }142  .use-email {143    width: 100%;144    padding: 18px 8px 0;145    display: flex;146    justify-content: flex-end;147    font-size: 34px;148    color: #2874F0;149    font-weight: 700;150  }151 152  .terms {153    margin-top: 64px;154    font-size: 34px;155    color: #666666;156    line-height: 1.4;157  }158  .terms a { color: #2874F0; text-decoration: none; font-weight: 700; }159 160  /* Bottom bar with button */161  .bottom-bar {162    position: absolute;163    bottom: 0;164    left: 0;165    width: 1080px;166    height: 240px;167    background: #F7F7F7;168    box-shadow: 0 -3px 0 #e1e1e1 inset;169    display: flex;170    align-items: center;171    justify-content: center;172    box-sizing: border-box;173    padding: 0 32px;174  }175  .btn {176    width: 1016px;177    height: 140px;178    background: #BDBDBD;179    color: #ffffff;180    font-size: 42px;181    font-weight: 700;182    border-radius: 16px;183    display: flex;184    align-items: center;185    justify-content: center;186  }187 188  /* Gesture pill (approx) */189  .gesture-area {190    position: absolute;191    bottom: 16px;192    left: 0;193    width: 1080px;194    display: flex;195    align-items: center;196    justify-content: center;197  }198  .gesture-pill {199    width: 240px;200    height: 16px;201    background: #dcdcdc;202    border-radius: 32px;203  }204</style>205</head>206<body>207<div id="render-target">208 209  <!-- Status Bar -->210  <div class="status-bar">211    <div class="status-left">8:25</div>212    <div class="status-right">213      <!-- Wi-Fi -->214      <svg class="status-icon" viewBox="0 0 24 24">215        <path d="M2 8c5-4 15-4 20 0"/>216        <path d="M5 12c3-2 11-2 14 0"/>217        <path d="M9 16c2-1 4-1 6 0"/>218        <circle cx="12" cy="20" r="1.5" fill="#fff" stroke="none"></circle>219      </svg>220      <!-- Battery -->221      <svg class="status-icon" viewBox="0 0 26 24">222        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="3"></rect>223        <rect x="4" y="8" width="14" height="8" rx="1" fill="#fff" stroke="none"></rect>224        <rect x="21" y="9" width="3" height="6" rx="1" fill="#fff" stroke="none"></rect>225      </svg>226      <span>100%</span>227    </div>228  </div>229 230  <!-- App Bar -->231  <div class="app-bar">232    <div class="app-inner">233      <div class="close-btn">234        <svg width="48" height="48" viewBox="0 0 24 24">235          <path d="M4 4 L20 20 M20 4 L4 20" stroke="#ffffff" stroke-width="3" stroke-linecap="round" fill="none"/>236        </svg>237      </div>238      <div class="brand">239        <span>Flipkart</span>240        <!-- Simple bag icon -->241        <svg class="bag-icon" viewBox="0 0 24 24">242          <rect x="4" y="8" width="16" height="12" rx="2" ry="2" fill="#FFD54F" stroke="#F9A825" stroke-width="2"></rect>243          <path d="M8 8c0-2 2-4 4-4s4 2 4 4" stroke="#F9A825" stroke-width="2" fill="none" />244          <circle cx="10" cy="12" r="1" fill="#2874F0"></circle>245          <circle cx="14" cy="12" r="1" fill="#2874F0"></circle>246          <path d="M9 16l6-3-2 5" stroke="#2874F0" stroke-width="2" fill="none"></path>247        </svg>248      </div>249    </div>250  </div>251 252  <!-- Content -->253  <div class="content">254    <div class="title">Log in to complete your shopping</div>255    <div class="subtitle">Shop and track your orders easily</div>256 257    <div class="field-block">258      <div class="field-label">Phone Number</div>259      <div class="prefix">260        +91261        <div class="caret"></div>262      </div>263      <input class="input" type="text" placeholder="" style="padding-left: 140px;">264    </div>265 266    <div class="use-email">Use Email-ID</div>267 268    <div class="terms">269      By continuing, you agree to Flipkart's <a href="#">Terms of Use</a> and270      <br>271      <a href="#">Privacy Policy</a>272    </div>273  </div>274 275  <!-- Bottom bar with disabled button -->276  <div class="bottom-bar">277    <div class="btn">Continue</div>278  </div>279 280  <div class="gesture-area">281    <div class="gesture-pill"></div>282  </div>283 284</div>285</body>286</html>