GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=device-width, initial-scale=1.0"/>6<title>Departure Search</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";13  }14  #render-target {15    position: relative;16    overflow: hidden;17    width: 1080px;18    height: 2400px;19    background: #FFFFFF;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 100%;28    height: 96px;29    display: flex;30    align-items: center;31    padding: 0 36px;32    box-sizing: border-box;33    color: #111;34    font-size: 34px;35  }36  .status-time {37    font-weight: 600;38  }39  .status-icons {40    margin-left: auto;41    display: flex;42    align-items: center;43    gap: 28px;44  }45  .status-dot {46    width: 10px;47    height: 10px;48    background: #6B6B6B;49    border-radius: 50%;50    opacity: .8;51  }52 53  /* Header */54  .header {55    position: absolute;56    top: 96px;57    left: 0;58    right: 0;59    height: 140px;60    display: flex;61    align-items: center;62    padding: 0 36px;63    box-sizing: border-box;64  }65  .back-btn {66    width: 72px;67    height: 72px;68    display: flex;69    align-items: center;70    justify-content: center;71    margin-right: 18px;72    cursor: default;73  }74  .title {75    font-size: 64px;76    font-weight: 800;77    color: #0D2C70;78    letter-spacing: 0.2px;79  }80 81  /* Search field */82  .content {83    position: absolute;84    top: 236px;85    left: 0;86    right: 0;87    padding: 0 36px;88    box-sizing: border-box;89  }90  .search-box {91    height: 128px;92    border: 2px solid #BFC7DE;93    background: #EEF1F6;94    border-radius: 28px;95    display: flex;96    align-items: center;97    padding: 0 30px;98    box-sizing: border-box;99    gap: 26px;100  }101  .radio {102    width: 52px;103    height: 52px;104    border-radius: 50%;105    border: 3px solid #BFC7DE;106    position: relative;107    box-sizing: border-box;108  }109  .radio::after {110    content: "";111    position: absolute;112    top: 50%;113    left: 50%;114    width: 16px;115    height: 16px;116    transform: translate(-50%, -50%);117    background: #0D2C70;118    border-radius: 50%;119    opacity: .25;120  }121  .placeholder {122    color: #97A3BD;123    font-size: 40px;124  }125 126  .use-location {127    margin-top: 36px;128    display: flex;129    align-items: center;130    gap: 18px;131    color: #E95B5B;132    font-size: 40px;133    font-weight: 600;134  }135 136  .divider {137    margin-top: 36px;138    height: 2px;139    background: #D3DCEB;140    width: 100%;141  }142 143  /* Keyboard */144  .keyboard {145    position: absolute;146    left: 0;147    right: 0;148    bottom: 0;149    height: 820px;150    background: #1E1716;151    padding: 26px 28px 78px;152    box-sizing: border-box;153  }154  .key-row {155    display: flex;156    justify-content: center;157    gap: 16px;158    margin-bottom: 20px;159  }160  .key {161    background: #3A332F;162    color: #E8DDD6;163    min-width: 84px;164    height: 120px;165    border-radius: 24px;166    display: flex;167    align-items: center;168    justify-content: center;169    font-size: 44px;170    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);171  }172  .key.wide {173    min-width: 180px;174  }175  .key.space {176    flex: 1;177    min-width: 360px;178  }179  .key.icon {180    padding: 0 16px;181  }182  .key.backspace {183    min-width: 132px;184  }185  .confirm-btn {186    background: #FFDCC5;187    color: #2B2B2B;188  }189 190  /* Gesture bar */191  .gesture {192    position: absolute;193    left: 50%;194    bottom: 22px;195    transform: translateX(-50%);196    width: 248px;197    height: 12px;198    background: #FFFFFF;199    border-radius: 8px;200    opacity: .95;201  }202</style>203</head>204<body>205<div id="render-target">206 207  <!-- Status Bar -->208  <div class="status-bar">209    <div class="status-time">1:41</div>210    <div class="status-icons">211      <div class="status-dot"></div>212      <div class="status-dot"></div>213      <!-- WiFi -->214      <svg width="44" height="32" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">215        <path d="M12 14c1-1 2-2 3-3-2-2-4-2-6 0 1 1 2 2 3 3z" fill="#333"/>216        <path d="M4 6c4-4 12-4 16 0l-2 2c-3-3-9-3-12 0L4 6z" fill="#333" opacity=".8"/>217        <path d="M7 9c3-3 7-3 10 0l-2 2c-2-2-4-2-6 0L7 9z" fill="#333" opacity=".9"/>218      </svg>219      <!-- Battery -->220      <svg width="52" height="28" viewBox="0 0 28 14" xmlns="http://www.w3.org/2000/svg">221        <rect x="1" y="2" width="22" height="10" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"/>222        <rect x="3" y="4" width="16" height="6" rx="1" fill="#333"/>223        <rect x="24" y="5" width="3" height="4" rx="1" fill="#333"/>224      </svg>225    </div>226  </div>227 228  <!-- Header -->229  <div class="header">230    <div class="back-btn">231      <svg width="48" height="48" viewBox="0 0 24 24">232        <path d="M5 5l14 14M19 5L5 19" stroke="#1B2C63" stroke-width="2.6" stroke-linecap="round"/>233      </svg>234    </div>235    <div class="title">Departure</div>236  </div>237 238  <!-- Content -->239  <div class="content">240    <div class="search-box">241      <div class="radio"></div>242      <div class="placeholder">City, station, airport or port</div>243    </div>244 245    <div class="use-location">246      <svg width="40" height="40" viewBox="0 0 24 24">247        <path d="M3 11l17-7-7 17-1-6-6-4z" fill="#E95B5B"/>248      </svg>249      <span>Use location</span>250    </div>251 252    <div class="divider"></div>253  </div>254 255  <!-- Keyboard -->256  <div class="keyboard">257    <div class="key-row">258      <div class="key">q</div>259      <div class="key">w</div>260      <div class="key">e</div>261      <div class="key">r</div>262      <div class="key">t</div>263      <div class="key">y</div>264      <div class="key">u</div>265      <div class="key">i</div>266      <div class="key">o</div>267      <div class="key">p</div>268    </div>269    <div class="key-row">270      <div class="key">a</div>271      <div class="key">s</div>272      <div class="key">d</div>273      <div class="key">f</div>274      <div class="key">g</div>275      <div class="key">h</div>276      <div class="key">j</div>277      <div class="key">k</div>278      <div class="key">l</div>279      <div class="key backspace icon">280        <svg width="64" height="40" viewBox="0 0 24 24">281          <path d="M3 12l5-6h11a2 2 0 012 2v8a2 2 0 01-2 2H8L3 12z" fill="#564C47"/>282          <path d="M12 9l4 4m0-4l-4 4" stroke="#E8DDD6" stroke-width="2" stroke-linecap="round"/>283        </svg>284      </div>285    </div>286    <div class="key-row">287      <div class="key wide icon">288        <svg width="44" height="44" viewBox="0 0 24 24">289          <path d="M8 17l-3-3 3-3" stroke="#E8DDD6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>290          <path d="M20 14H6" stroke="#E8DDD6" stroke-width="2" stroke-linecap="round"/>291        </svg>292      </div>293      <div class="key">z</div>294      <div class="key">x</div>295      <div class="key">c</div>296      <div class="key">v</div>297      <div class="key">b</div>298      <div class="key">n</div>299      <div class="key">m</div>300      <div class="key icon wide">301        <svg width="44" height="44" viewBox="0 0 24 24">302          <path d="M6 6l12 12M18 6L6 18" stroke="#E8DDD6" stroke-width="2" stroke-linecap="round"/>303        </svg>304      </div>305    </div>306    <div class="key-row">307      <div class="key wide">?123</div>308      <div class="key">,</div>309      <div class="key wide">😊</div>310      <div class="key space"></div>311      <div class="key">.</div>312      <div class="key confirm-btn wide icon">313        <svg width="44" height="44" viewBox="0 0 24 24">314          <path d="M5 13l4 4L19 7" stroke="#2B2B2B" stroke-width="2.6" stroke-linecap="round" fill="none"/>315        </svg>316      </div>317    </div>318    <div class="gesture"></div>319  </div>320 321</div>322</body>323</html>