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>Shopsy - Phone Login</title>7<style>8  /* BODY RESET */9  html, body { margin: 0; padding: 0; }10  body { background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }11 12  /* RENDER TARGET */13  #render-target {14    position: relative;15    width: 1080px;16    height: 2400px;17    overflow: hidden;18    background: #FFFFFF;19    color: #212121;20  }21 22  /* Status bar */23  .status-bar {24    height: 96px;25    padding: 0 28px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #000;30    font-size: 36px;31    letter-spacing: 0.5px;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 22px;37  }38  .battery {39    width: 60px; height: 28px; border: 3px solid #000; border-radius: 6px; position: relative;40  }41  .battery::after { content: ""; position: absolute; right: -10px; top: 7px; width: 6px; height: 14px; background: #000; border-radius: 2px; }42  .battery .level { width: 48px; height: 20px; background: #000; margin: 3px; border-radius: 3px; }43  .dot { width: 10px; height: 10px; background: #000; border-radius: 50%; display: inline-block; }44 45  /* Header */46  .header {47    display: flex;48    align-items: center;49    padding: 18px 28px 8px 28px;50  }51  .close-btn {52    width: 72px;53    height: 72px;54    display: flex;55    align-items: center;56    justify-content: center;57    cursor: default;58  }59  .logo {60    flex: 1;61    text-align: center;62    color: #5B4BFF;63    font-weight: 800;64    font-size: 92px;65    line-height: 1;66    letter-spacing: 1px;67  }68 69  /* Content */70  .content {71    padding: 16px 64px 0 64px;72  }73  .title {74    font-size: 58px;75    font-weight: 700;76    margin: 24px 0 10px;77  }78  .subtitle {79    font-size: 40px;80    color: #616161;81    margin-bottom: 46px;82  }83 84  /* Input field */85  .input-wrap {86    position: relative;87    border: 4px solid #5B4BFF;88    border-radius: 20px;89    padding conscience:  sopx;90  }91  .input-wrap suppose{}92  .input-wrap sop{}93  .input-wrap { padding: 36px 32px; }94  .input-label {95    position: absolute;96    top: -24px;97    left: 24px;98    background: #FFFFFF;99    padding: 0 12px;100    color: #5B4BFF;101    font-size: 34px;102  }103  .phone-row {104    display: flex;105    align-items: center;106    gap: 16px;107  }108  .country {109    font-size: 44px;110    color: #212121;111    letter-spacing: 0.5px;112    display: flex;113    align-items: center;114    gap: 8px;115  }116  .down-arrow {117    width: 0; height: 0;118    border-left: 10px solid transparent;119    border-right: 10px solid transparent;120    border-top: 14px solid #212121;121    margin-top: 8px;122  }123  .phone-input {124    border: none;125    outline: none;126    font-size: 44px;127    flex: 1;128  }129 130  /* Terms text */131  .terms {132    color: #616161;133    font-size: 36px;134    margin: 64px 0 0;135    line-height: 1.5;136  }137  .terms a { color: #5B4BFF; text-decoration: none; }138 139  /* Disabled Continue bar */140  .continue-strip {141    position: absolute;142    left: 0; right: 0;143    bottom: 890px; /* sits just above the keyboard block */144    padding: 0 32px;145  }146  .btn-disabled {147    background: #CFCFCF;148    border-radius: 10px;149    height: 96px;150    display: flex;151    align-items: center;152    justify-content: center;153    color: #FFFFFF;154    font-size: 42px;155    font-weight: 600;156  }157 158  /* Keyboard mock */159  .keyboard {160    position: absolute;161    left: 0; right: 0; bottom: 70px;162    background: #1E1E1E;163    padding: 38px 28px 28px;164    border-top-left-radius: 18px;165    border-top-right-radius: 18px;166  }167  .keys {168    display: grid;169    grid-template-columns: repeat(4, 1fr);170    grid-auto-rows: 160px;171    gap: 26px;172  }173  .key {174    background: #2B2B2B;175    border-radius: 80px;176    color: #EDEDED;177    font-size: 58px;178    display: flex;179    align-items: center;180    justify-content: center;181  }182  .key.alt { background: #BFEFF1; color: #0D2B2E; }183  .key.go { background: #C8F8A6; color: #0B2A12; font-weight: 700; }184  .home-indicator {185    position: absolute;186    bottom: 16px;187    left: 50%;188    transform: translateX(-50%);189    width: 320px;190    height: 10px;191    background: #FFFFFF;192    opacity: 0.9;193    border-radius: 10px;194  }195</style>196</head>197<body>198<div id="render-target">199 200  <!-- Status Bar -->201  <div class="status-bar">202    <div class="time">8:28</div>203    <div class="status-icons">204      <span class="dot"></span>205      <span class="dot"></span>206      <span class="dot"></span>207      <span class="dot"></span>208      <div class="battery"><div class="level"></div></div>209      <div style="font-size:32px;">100%</div>210    </div>211  </div>212 213  <!-- Header with close and logo -->214  <div class="header">215    <div class="close-btn">216      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round">217        <path d="M18 6L6 18M6 6l12 12"></path>218      </svg>219    </div>220    <div class="logo">shopsy</div>221    <div style="width:72px;"></div>222  </div>223 224  <!-- Main content -->225  <div class="content">226    <div class="title">Welcome!</div>227    <div class="subtitle">Enter your mobile number to start earning.</div>228 229    <div class="input-wrap">230      <div class="input-label">Phone Number</div>231      <div class="phone-row">232        <div class="country">+91 <span class="down-arrow"></span></div>233        <input class="phone-input" type="text" placeholder="" />234      </div>235    </div>236 237    <div class="terms">238      By continuing, I agree to the <a href="#">Terms of Use</a> and <a href="#">Privacy Policy</a>239    </div>240  </div>241 242  <!-- Disabled Continue bar -->243  <div class="continue-strip">244    <div class="btn-disabled">Continue</div>245  </div>246 247  <!-- Keyboard mock -->248  <div class="keyboard">249    <div class="keys">250      <div class="key">1</div>251      <div class="key">2</div>252      <div class="key">3</div>253      <div class="key">-</div>254 255      <div class="key">4</div>256      <div class="key">5</div>257      <div class="key">6</div>258      <div class="key alt">⌫</div>259 260      <div class="key">7</div>261      <div class="key">8</div>262      <div class="key">9</div>263      <div class="key go">✓</div>264 265      <div class="key">,</div>266      <div class="key">0</div>267      <div class="key">.</div>268      <div class="key" style="visibility:hidden;"></div>269    </div>270  </div>271 272  <!-- Home indicator -->273  <div class="home-indicator"></div>274</div>275</body>276</html>