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>Departure Search</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    height: 96px;20    padding: 0 32px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #1f2937;25    font-weight: 600;26    font-size: 34px;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 18px;32    color: #374151;33    font-size: 26px;34  }35  .status-icons .icon {36    width: 28px;37    height: 28px;38    border-radius: 6px;39    background: #E5E7EB;40  }41 42  /* Header */43  .header {44    padding: 24px 36px 8px 36px;45    display: flex;46    align-items: center;47    gap: 18px;48  }49  .header-title {50    font-size: 64px;51    line-height: 1.1;52    font-weight: 800;53    color: #1a2a5a; /* Deep navy */54  }55  .icon-btn {56    width: 72px;57    height: 72px;58    display: flex;59    align-items: center;60    justify-content: center;61  }62 63  /* Search input */64  .search-wrap {65    padding: 12px 36px 0 36px;66  }67  .search-box {68    display: flex;69    align-items: center;70    gap: 22px;71    height: 120px;72    border: 2px solid #D6DEE8;73    border-radius: 24px;74    background: #EEF2F7;75    padding: 0 24px;76    color: #6B7280;77  }78  .search-placeholder {79    font-size: 40px;80    color: #98A3B3;81  }82  .ring {83    width: 56px;84    height: 56px;85    border-radius: 50%;86    border: 6px solid #AEB7C6;87    position: relative;88  }89  .ring:after {90    content: "";91    position: absolute;92    width: 16px;93    height: 16px;94    border-radius: 50%;95    background: #AEB7C6;96    top: 50%; left: 50%;97    transform: translate(-50%, -50%);98  }99 100  /* Use location row */101  .use-location {102    display: flex;103    align-items: center;104    gap: 18px;105    padding: 28px 36px 18px 36px;106    color: #E06263;107    font-size: 40px;108    font-weight: 600;109  }110 111  .divider {112    height: 2px;113    background: #E2E8F0;114    margin: 0 36px;115  }116 117  /* Keyboard (mock) */118  .keyboard {119    position: absolute;120    bottom: 0;121    left: 0;122    width: 1080px;123    height: 900px;124    background: #1f1f23;125    border-top-left-radius: 22px;126    border-top-right-radius: 22px;127    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);128    display: flex;129    flex-direction: column;130    padding: 18px 18px 34px;131    box-sizing: border-box;132  }133  .kb-top-tools {134    height: 96px;135    display: flex;136    align-items: center;137    justify-content: space-around;138  }139  .tool-btn {140    width: 88px;141    height: 64px;142    border-radius: 14px;143    background: #2b2b31;144    display: flex;145    align-items: center;146    justify-content: center;147    color: #E5E7EB;148    font-weight: 700;149    font-size: 28px;150  }151  .keys {152    margin-top: 8px;153    display: flex;154    flex-direction: column;155    gap: 18px;156    flex: 1;157    justify-content: center;158  }159  .row {160    display: flex;161    justify-content: space-between;162    padding: 0 12px;163    gap: 10px;164  }165  .key {166    flex: 1;167    height: 120px;168    max-width: 92px;169    background: #35363b;170    border-radius: 20px;171    color: #E5E7EB;172    display: flex;173    align-items: center;174    justify-content: center;175    font-size: 44px;176    font-weight: 600;177  }178  .key.wide { max-width: 140px; flex: 0 0 140px; }179  .key.extra-wide { max-width: 420px; flex: 0 0 420px; }180  .key.icon {181    font-size: 34px;182    color: #E5E7EB;183  }184 185  .home-indicator {186    position: absolute;187    bottom: 10px;188    left: 50%;189    transform: translateX(-50%);190    width: 280px;191    height: 10px;192    background: #E5E7EB;193    border-radius: 8px;194    opacity: 0.8;195  }196</style>197</head>198<body>199<div id="render-target">200  <!-- Status bar -->201  <div class="status-bar">202    <div class="time">8:56</div>203    <div class="status-icons">204      <div class="icon"></div>205      <div class="icon"></div>206      <div class="icon"></div>207      <div class="icon"></div>208      <span style="font-size:28px;color:#111827;font-weight:700;">100%</span>209    </div>210  </div>211 212  <!-- Header -->213  <div class="header">214    <div class="icon-btn" aria-label="Close">215      <svg width="36" height="36" viewBox="0 0 24 24" fill="none">216        <path d="M4 4 L20 20 M20 4 L4 20" stroke="#1a2a5a" stroke-width="2.6" stroke-linecap="round"/>217      </svg>218    </div>219    <div class="header-title">Departure</div>220  </div>221 222  <!-- Search -->223  <div class="search-wrap">224    <div class="search-box">225      <div class="ring"></div>226      <div class="search-placeholder">City, station, airport or port</div>227    </div>228  </div>229 230  <!-- Use location -->231  <div class="use-location">232    <svg width="42" height="42" viewBox="0 0 24 24">233      <path d="M3 11L21 3L13 21L11 13L3 11Z" fill="#E06263"/>234    </svg>235    <span>Use location</span>236  </div>237 238  <div class="divider"></div>239 240  <!-- Keyboard mock -->241  <div class="keyboard">242    <div class="kb-top-tools">243      <div class="tool-btn">⌨</div>244      <div class="tool-btn">🙂</div>245      <div class="tool-btn">GIF</div>246      <div class="tool-btn">⚙</div>247      <div class="tool-btn">G⇄</div>248      <div class="tool-btn">🎨</div>249      <div class="tool-btn">🎤</div>250    </div>251 252    <div class="keys">253      <div class="row">254        <div class="key">q</div>255        <div class="key">w</div>256        <div class="key">e</div>257        <div class="key">r</div>258        <div class="key">t</div>259        <div class="key">y</div>260        <div class="key">u</div>261        <div class="key">i</div>262        <div class="key">o</div>263        <div class="key">p</div>264      </div>265      <div class="row" style="padding:0 48px;">266        <div class="key">a</div>267        <div class="key">s</div>268        <div class="key">d</div>269        <div class="key">f</div>270        <div class="key">g</div>271        <div class="key">h</div>272        <div class="key">j</div>273        <div class="key">k</div>274        <div class="key">l</div>275      </div>276      <div class="row">277        <div class="key wide icon">⇧</div>278        <div class="key">z</div>279        <div class="key">x</div>280        <div class="key">c</div>281        <div class="key">v</div>282        <div class="key">b</div>283        <div class="key">n</div>284        <div class="key">m</div>285        <div class="key wide icon">286          <svg width="34" height="34" viewBox="0 0 24 24">287            <path d="M4 12h12m0 0l-4-4m4 4l-4 4" stroke="#E5E7EB" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>288          </svg>289        </div>290      </div>291      <div class="row" style="padding:0 24px;">292        <div class="key wide">?123</div>293        <div class="key wide">🙂</div>294        <div class="key">,</div>295        <div class="key extra-wide"></div>296        <div class="key">.</div>297        <div class="key wide" style="background:#d7d9e7;color:#222;">✓</div>298      </div>299    </div>300    <div class="home-indicator"></div>301  </div>302</div>303</body>304</html>