GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI - Search with Keyboard</title>6<meta name="viewport" content="width=1080, initial-scale=1">7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    font-family: Arial, Helvetica, sans-serif;16    color: #222;17  }18 19  /* Status bar */20  .status-bar {21    height: 110px;22    background: #EFEFEF;23    display: flex;24    align-items: center;25    padding: 0 36px;26    box-sizing: border-box;27  }28  .status-bar .time {29    font-size: 32px;30    color: #555;31    letter-spacing: 0.5px;32  }33  .status-bar .icons {34    margin-left: auto;35    display: flex;36    gap: 22px;37    align-items: center;38  }39  .icon {40    width: 38px;41    height: 38px;42    fill: none;43    stroke: #666;44    stroke-width: 2.5;45  }46 47  /* Search header */48  .search-header {49    height: 140px;50    background: #EFEFEF;51    display: flex;52    align-items: center;53    padding: 0 32px;54    box-sizing: border-box;55    border-bottom: 1px solid #E5E5E5;56  }57  .search-header .back {58    width: 56px; height: 56px; margin-right: 20px;59  }60  .search-text {61    flex: 1;62    font-size: 48px;63    color: #2a2a2a;64    line-height: 1;65  }66  .search-text .caret {67    color: #2a2a2a;68  }69  .clear {70    width: 52px; height: 52px; margin-left: 14px;71  }72 73  /* Content */74  .content {75    height: 1140px; /* remaining space before keyboard */76    background: #FFFFFF;77  }78 79  /* Keyboard */80  #keyboard {81    position: absolute;82    bottom: 70px; /* leave room for gesture bar */83    left: 0;84    width: 100%;85    height: 950px;86    background: #F0F0F0;87    border-top: 1px solid #E2E2E2;88    box-sizing: border-box;89  }90 91  .suggestions {92    height: 120px;93    display: flex;94    align-items: center;95    padding: 0 26px;96    box-sizing: border-box;97    color: #4f4f4f;98  }99  .suggestions .left-chip {100    width: 76px; height: 76px;101    border-radius: 38px;102    background: #DADADA;103    display: flex; justify-content: center; align-items: center;104    margin-right: 18px;105    color: #666;106    font-size: 34px;107  }108  .suggestions .center-text {109    flex: 1;110    text-align: center;111    font-size: 34px;112    font-weight: 500;113  }114  .suggestions .mic {115    width: 40px; height: 40px; margin-left: 16px;116    stroke: #666; fill: none;117  }118 119  .keys {120    padding: 16px 28px;121    box-sizing: border-box;122    display: grid;123    grid-template-rows: repeat(4, auto);124    row-gap: 18px;125  }126  .row {127    display: flex;128    justify-content: center;129    gap: 16px;130  }131  .row.indent {132    padding-left: 40px;133  }134  .key {135    width: 88px;136    height: 120px;137    background: #FFFFFF;138    border: 1px solid #D7D7D7;139    border-radius: 26px;140    display: flex;141    align-items: center;142    justify-content: center;143    font-size: 40px;144    color: #333;145    box-shadow: 0 1px 0 #EAEAEA inset;146  }147  .key.small {148    width: 110px;149  }150  .key.shift, .key.backspace {151    width: 140px;152  }153  .space {154    flex: 1;155    min-width: 420px;156    height: 120px;157    background: #FFFFFF;158    border: 1px solid #D7D7D7;159    border-radius: 26px;160  }161  .key-icon {162    width: 44px; height: 44px;163    stroke: #666; fill: none; stroke-width: 3;164  }165 166  /* Gesture bar */167  .gesture-bar {168    position: absolute;169    bottom: 22px;170    left: 50%;171    transform: translateX(-50%);172    width: 240px;173    height: 10px;174    background: #BEBEBE;175    border-radius: 6px;176  }177</style>178</head>179<body>180<div id="render-target">181 182  <div class="status-bar">183    <div class="time">10:34</div>184    <div class="icons">185      <!-- Wi-Fi -->186      <svg class="icon" viewBox="0 0 48 48">187        <path d="M3 17c9-7 33-7 42 0"/>188        <path d="M9 23c6-4 24-4 30 0"/>189        <path d="M15 29c4-2 14-2 18 0"/>190        <circle cx="24" cy="36" r="3" fill="#666" stroke="none"></circle>191      </svg>192      <!-- Battery -->193      <svg class="icon" viewBox="0 0 48 48">194        <rect x="6" y="12" width="34" height="24" rx="4"></rect>195        <rect x="40" y="18" width="4" height="12" rx="2" fill="#666" stroke="none"></rect>196        <rect x="9" y="15" width="28" height="18" rx="3" fill="#888" stroke="none"></rect>197      </svg>198    </div>199  </div>200 201  <div class="search-header">202    <!-- Back arrow -->203    <svg class="back icon" viewBox="0 0 48 48">204      <path d="M30 10 L16 24 L30 38" stroke-linecap="round" stroke-linejoin="round"></path>205    </svg>206    <div class="search-text">Rath Yatra<span class="caret">|</span></div>207    <!-- Clear (X) -->208    <svg class="clear icon" viewBox="0 0 48 48">209      <path d="M14 14 L34 34 M34 14 L14 34" stroke-linecap="round"></path>210    </svg>211  </div>212 213  <div class="content"></div>214 215  <div id="keyboard">216    <div class="suggestions">217      <div class="left-chip">&gt;</div>218      <div class="center-text">Yatra</div>219      <svg class="mic" viewBox="0 0 48 48">220        <rect x="18" y="10" width="12" height="18" rx="6"></rect>221        <path d="M12 22c0 8 24 8 24 0M24 30v6M18 36h12" stroke-width="2.5"></path>222      </svg>223    </div>224 225    <div class="keys">226      <div class="row">227        <div class="key">q</div>228        <div class="key">w</div>229        <div class="key">e</div>230        <div class="key">r</div>231        <div class="key">t</div>232        <div class="key">y</div>233        <div class="key">u</div>234        <div class="key">i</div>235        <div class="key">o</div>236        <div class="key">p</div>237      </div>238 239      <div class="row indent">240        <div class="key">a</div>241        <div class="key">s</div>242        <div class="key">d</div>243        <div class="key">f</div>244        <div class="key">g</div>245        <div class="key">h</div>246        <div class="key">j</div>247        <div class="key">k</div>248        <div class="key">l</div>249      </div>250 251      <div class="row">252        <div class="key shift">253          <svg class="key-icon" viewBox="0 0 48 48">254            <path d="M24 10 L10 26 H18 V38 H30 V26 H38 Z" stroke-linejoin="round"></path>255          </svg>256        </div>257        <div class="key">z</div>258        <div class="key">x</div>259        <div class="key">c</div>260        <div class="key">v</div>261        <div class="key">b</div>262        <div class="key">n</div>263        <div class="key">m</div>264        <div class="key backspace">265          <svg class="key-icon" viewBox="0 0 48 48">266            <path d="M12 12 L4 24 L12 36 H38 C42 36 42 12 38 12 Z"></path>267            <path d="M22 18 L30 26 M30 18 L22 26" stroke-linecap="round"></path>268          </svg>269        </div>270      </div>271 272      <div class="row">273        <div class="key small">?123</div>274        <div class="key small">,</div>275        <div class="key small">☺</div>276        <div class="space"></div>277        <div class="key small">.</div>278        <div class="key small">279          <svg class="key-icon" viewBox="0 0 48 48">280            <circle cx="20" cy="20" r="12"></circle>281            <path d="M29 29 L40 40" stroke-linecap="round"></path>282          </svg>283        </div>284      </div>285    </div>286  </div>287 288  <div class="gesture-bar"></div>289 290</div>291</body>292</html>