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>Arrival Search UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 120px;24    padding: 0 36px;25    box-sizing: border-box;26    color: #111;27    display: flex;28    align-items: center;29    justify-content: space-between;30    font-size: 40px;31  }32  .status-icons {33    display: flex;34    gap: 26px;35    align-items: center;36  }37  .status-dot {38    width: 12px; height: 12px; background:#777; border-radius:50%;39  }40  .battery {41    width: 62px; height: 30px; border: 3px solid #111; border-radius: 6px; position: relative;42  }43  .battery::before {44    content:"";45    position:absolute; right:-10px; top:9px; width:8px; height:12px; background:#111; border-radius:2px;46  }47  .battery::after {48    content:"";49    position:absolute; left:4px; top:4px; width:44px; height:20px; background:#111; border-radius:4px;50  }51 52  /* Header */53  .header {54    position: absolute;55    top: 120px;56    left: 0;57    width: 100%;58    height: 160px;59    display: flex;60    align-items: center;61    padding: 0 36px;62    box-sizing: border-box;63  }64  .close-btn {65    width: 72px; height: 72px; margin-right: 20px;66  }67  .title {68    font-size: 68px;69    font-weight: 800;70    color: #1F2E67;71    letter-spacing: 0.5px;72  }73 74  /* Search field */75  .search-wrap {76    position: absolute;77    top: 300px;78    left: 36px;79    right: 36px;80  }81  .search-field {82    height: 120px;83    background: #F2F4F8;84    border: 3px solid #CCD3E6;85    border-radius: 26px;86    display: flex;87    align-items: center;88    padding: 0 30px;89    box-sizing: border-box;90    color: #3A4468;91    font-size: 44px;92  }93  .pin-icon {94    width: 52px; height: 52px; margin-right: 22px;95  }96 97  /* Suggestions */98  .suggestions {99    margin-top: 40px;100    border-top: 2px solid #E5EBF3;101  }102  .suggest-item {103    display: flex;104    align-items: center;105    padding: 36px 0;106    border-bottom: 2px solid #E5EBF3;107    font-size: 44px;108    color: #2F3B63;109  }110  .suggest-item .secondary {111    color: #8FA0BF;112    margin-left: 8px;113    font-weight: 500;114  }115  .suggest-item .pin {116    width: 46px; height: 46px; margin-right: 26px;117  }118 119  /* Spacer below list */120  .content-spacer {121    position: absolute;122    top: 900px;123    left: 0;124    right: 0;125    bottom: 820px;126    background: #FFFFFF;127  }128 129  /* Keyboard overlay */130  .keyboard {131    position: absolute;132    left: 0; right: 0; bottom: 0;133    height: 820px;134    background: #181A1D;135    color: #EFEFEF;136  }137  .kb-suggest {138    height: 120px;139    border-bottom: 1px solid #2A2D31;140    display: flex;141    align-items: center;142    padding: 0 30px;143    box-sizing: border-box;144    gap: 30px;145    font-size: 40px;146  }147  .kb-divider {148    width: 2px; height: 48px; background: #3A3D42;149  }150  .kb-rows {151    padding: 24px 24px 0 24px;152    box-sizing: border-box;153  }154  .kb-row {155    display: flex;156    justify-content: space-between;157    margin-bottom: 24px;158  }159  .key {160    background: #2A2D31;161    border-radius: 16px;162    width: 88px; height: 112px;163    display: flex;164    align-items: center;165    justify-content: center;166    font-size: 46px;167    color: #F2F2F2;168  }169  .key.wide { width: 150px; }170  .key.xwide { width: 210px; }171  .key.space { width: 420px; }172  .key.round { border-radius: 30px; }173  .bottom-row {174    display: flex;175    align-items: center;176    justify-content: space-between;177    padding: 12px 24px 24px 24px;178  }179  .pill {180    position: absolute;181    left: 50%;182    transform: translateX(-50%);183    bottom: 18px;184    width: 280px;185    height: 14px;186    background: #EAEAEA;187    border-radius: 10px;188    opacity: 0.9;189  }190 191  /* Simple icons */192  .svg { display: inline-block; }193</style>194</head>195<body>196<div id="render-target">197 198  <!-- Status bar -->199  <div class="status-bar">200    <div>8:58</div>201    <div class="status-icons">202      <span class="status-dot"></span>203      <span class="status-dot" style="opacity:0.6;"></span>204      <span class="status-dot" style="opacity:0.4;"></span>205      <div class="battery"></div>206      <div style="font-size:40px;">100%</div>207    </div>208  </div>209 210  <!-- Header -->211  <div class="header">212    <svg class="close-btn" viewBox="0 0 24 24">213      <path d="M5 5 L19 19 M19 5 L5 19" stroke="#6B7498" stroke-width="3.2" stroke-linecap="round" fill="none"></path>214    </svg>215    <div class="title">Arrival</div>216  </div>217 218  <!-- Search field -->219  <div class="search-wrap">220    <div class="search-field">221      <svg class="pin-icon" viewBox="0 0 24 24">222        <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#52619B"></path>223      </svg>224      <span>New Hyde Park</span>225    </div>226 227    <div class="suggestions">228      <div class="suggest-item">229        <svg class="pin" viewBox="0 0 24 24">230          <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#33457C"></path>231        </svg>232        <span>New Hyde Park, NY</span>233        <span class="secondary">USA</span>234      </div>235      <div class="suggest-item">236        <svg class="pin" viewBox="0 0 24 24">237          <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#33457C"></path>238        </svg>239        <span>North New Hyde Park, NY</span>240        <span class="secondary">USA</span>241      </div>242    </div>243  </div>244 245  <div class="content-spacer"></div>246 247  <!-- Keyboard overlay -->248  <div class="keyboard">249    <div class="kb-suggest">250      <svg class="svg" viewBox="0 0 24 24" width="54" height="54" style="margin-right:10px;">251        <rect x="2" y="4" width="20" height="16" rx="3" fill="#D0D3DA"></rect>252        <circle cx="6" cy="12" r="2.5" fill="#8D93A1"></circle>253        <circle cx="12" cy="12" r="2.5" fill="#8D93A1"></circle>254        <circle cx="18" cy="12" r="2.5" fill="#8D93A1"></circle>255      </svg>256      <span>Park</span>257      <div class="kb-divider"></div>258      <span>Parking</span>259      <div class="kb-divider"></div>260      <span>🖼️</span>261      <div style="margin-left:auto; font-size:44px;">🎤</div>262    </div>263 264    <div class="kb-rows">265      <!-- Row 1 -->266      <div class="kb-row">267        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>268      </div>269      <!-- Row 2 -->270      <div class="kb-row">271        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>272      </div>273      <!-- Row 3 -->274      <div class="kb-row">275        <div class="key wide">⇧</div>276        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>277        <div class="key wide">⌫</div>278      </div>279    </div>280 281    <!-- Bottom controls -->282    <div class="bottom-row">283      <div class="key xwide round" style="background:#A2A9B8; color:#111;">?123</div>284      <div class="key round">,</div>285      <div class="key round">🙂</div>286      <div class="key space round"></div>287      <div class="key round">.</div>288      <div class="key xwide round" style="background:#CDD3EA; color:#1E2E67;">✓</div>289    </div>290 291    <div class="pill"></div>292  </div>293 294</div>295</body>296</html>