GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    border-radius: 0;16    box-shadow: none;17    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;18    color: #0e1f57;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 96px;28    padding: 20px 28px;29    box-sizing: border-box;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #222;34    font-size: 34px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 20px;40  }41  .icon {42    width: 40px;43    height: 40px;44  }45  /* Header */46  .header {47    position: absolute;48    top: 96px;49    left: 0;50    width: 1080px;51    padding: 24px 36px 12px 36px;52    box-sizing: border-box;53    display: flex;54    align-items: center;55    gap: 24px;56  }57  .close-btn {58    width: 56px;59    height: 56px;60    border-radius: 28px;61    display: flex;62    align-items: center;63    justify-content: center;64  }65  .title {66    font-size: 60px;67    font-weight: 800;68    letter-spacing: 0.4px;69    color: #142052;70  }71 72  /* Search input */73  .search-card {74    position: absolute;75    top: 240px;76    left: 36px;77    width: 1008px;78    height: 120px;79    background: #f6f8fc;80    border: 2px solid #c7d0e0;81    border-radius: 28px;82    box-sizing: border-box;83    display: flex;84    align-items: center;85    padding: 0 28px;86    gap: 24px;87  }88  .radio-icon {89    width: 44px;90    height: 44px;91    border-radius: 22px;92    border: 3px solid #b6bfce;93    position: relative;94  }95  .radio-icon::after {96    content: "";97    position: absolute;98    top: 50%;99    left: 50%;100    width: 12px;101    height: 12px;102    background: #b6bfce;103    border-radius: 50%;104    transform: translate(-50%, -50%);105  }106  .placeholder {107    font-size: 40px;108    color: #97a4bb;109  }110 111  /* Use location row */112  .use-location {113    position: absolute;114    top: 396px;115    left: 36px;116    display: flex;117    align-items: center;118    gap: 18px;119    color: #e25555;120    font-size: 40px;121    font-weight: 600;122  }123  .divider {124    position: absolute;125    top: 480px;126    left: 30px;127    width: 1020px;128    height: 2px;129    background: #d6dee6;130  }131 132  /* Keyboard approximation */133  .keyboard {134    position: absolute;135    bottom: 0;136    left: 0;137    width: 1080px;138    height: 860px;139    background: #111315;140    border-top: 1px solid #222;141    box-sizing: border-box;142    padding: 24px 24px 32px 24px;143    color: #d9d9d9;144  }145  .kb-top {146    display: flex;147    align-items: center;148    justify-content: space-between;149    color: #cfcfcf;150    font-size: 34px;151    margin-bottom: 18px;152  }153  .kb-top .item {154    display: flex;155    align-items: center;156    gap: 12px;157  }158  .kb-row {159    display: flex;160    gap: 16px;161    margin: 18px 0;162    justify-content: center;163  }164  .key {165    background: #2a2d30;166    border-radius: 18px;167    padding: 26px 30px;168    min-width: 80px;169    text-align: center;170    font-size: 42px;171    color: #e7e7e7;172    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.35);173  }174  .key.wide { min-width: 140px; }175  .key.xwide { min-width: 180px; }176  .space {177    min-width: 500px;178  }179  .key.alt {180    background: #95a9ac;181    color: #0b1113;182    font-weight: 700;183  }184  .confirm {185    position: absolute;186    right: 28px;187    bottom: 40px;188    width: 124px;189    height: 124px;190    background: #92f1ec;191    border-radius: 62px;192    display: flex;193    align-items: center;194    justify-content: center;195  }196  .mic {197    position: absolute;198    right: 192px;199    bottom: 62px;200    width: 72px;201    height: 72px;202    background: #2a2d30;203    border-radius: 36px;204    display: flex;205    align-items: center;206    justify-content: center;207  }208</style>209</head>210<body>211<div id="render-target">212 213  <!-- Status Bar -->214  <div class="status-bar">215    <div class="status-left">5:54</div>216    <div class="status-icons">217      <!-- wifi icon -->218      <svg class="icon" viewBox="0 0 24 24">219        <path d="M2 8a14 14 0 0 1 20 0" stroke="#666" stroke-width="2.2" fill="none" stroke-linecap="round"/>220        <path d="M5 12a10 10 0 0 1 14 0" stroke="#666" stroke-width="2.2" fill="none" stroke-linecap="round"/>221        <path d="M9 15a6 6 0 0 1 6 0" stroke="#666" stroke-width="2.2" fill="none" stroke-linecap="round"/>222        <circle cx="12" cy="18" r="1.8" fill="#666"/>223      </svg>224      <!-- battery icon -->225      <svg class="icon" viewBox="0 0 24 24">226        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#666" stroke-width="2" fill="none"/>227        <rect x="4" y="8" width="12" height="8" fill="#666"/>228        <rect x="20" y="9" width="2" height="6" fill="#666"/>229      </svg>230    </div>231  </div>232 233  <!-- Header -->234  <div class="header">235    <div class="close-btn">236      <svg width="40" height="40" viewBox="0 0 24 24">237        <path d="M5 5L19 19M19 5L5 19" stroke="#6f7ea2" stroke-width="2.6" stroke-linecap="round"/>238      </svg>239    </div>240    <div class="title">Departure</div>241  </div>242 243  <!-- Search Input -->244  <div class="search-card">245    <div class="radio-icon"></div>246    <div class="placeholder">City, station, airport or port</div>247  </div>248 249  <!-- Use location -->250  <div class="use-location">251    <svg width="42" height="42" viewBox="0 0 24 24">252      <path d="M3 12l18-8-8 18-1.8-6.6L3 12z" fill="#e25555"/>253    </svg>254    <div>Use location</div>255  </div>256 257  <div class="divider"></div>258 259  <!-- Keyboard (approximation) -->260  <div class="keyboard">261    <div class="kb-top">262      <div class="item">263        <svg width="36" height="36" viewBox="0 0 24 24">264          <rect x="3" y="4" width="18" height="16" rx="3" fill="#cfcfcf"/>265          <rect x="6" y="8" width="12" height="2" fill="#111315"/>266        </svg>267      </div>268      <div class="item">GIF</div>269      <div class="item">G</div>270      <div class="item">271        <svg width="34" height="34" viewBox="0 0 24 24">272          <circle cx="12" cy="12" r="10" fill="#cfcfcf"/>273        </svg>274      </div>275      <div class="item">276        <svg width="36" height="36" viewBox="0 0 24 24">277          <circle cx="12" cy="12" r="10" fill="#cfcfcf"/>278          <path d="M8 12h8M12 8v8" stroke="#111315" stroke-width="2"/>279        </svg>280      </div>281      <div class="item">282        <svg width="36" height="36" viewBox="0 0 24 24">283          <circle cx="12" cy="12" r="10" fill="#cfcfcf"/>284        </svg>285      </div>286      <div class="item">287        <svg width="36" height="36" viewBox="0 0 24 24">288          <circle cx="12" cy="12" r="10" fill="#cfcfcf"/>289          <path d="M12 7v10" stroke="#111315" stroke-width="2"/>290        </svg>291      </div>292    </div>293 294    <div class="kb-row">295      <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>296      <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>297    </div>298    <div class="kb-row">299      <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>300      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>301      <div class="key wide">302        <svg width="40" height="40" viewBox="0 0 24 24">303          <path d="M4 12h14M12 6l6 6-6 6" stroke="#e7e7e7" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>304        </svg>305      </div>306    </div>307    <div class="kb-row">308      <div class="key alt">?123</div>309      <div class="key">,</div>310      <div class="key">311        <svg width="38" height="38" viewBox="0 0 24 24">312          <circle cx="12" cy="12" r="9" fill="#d9d9d9"/>313          <circle cx="12" cy="12" r="5" fill="#2a2d30"/>314        </svg>315      </div>316      <div class="key space"></div>317      <div class="key">.</div>318    </div>319 320    <div class="mic">321      <svg width="36" height="36" viewBox="0 0 24 24">322        <rect x="9" y="5" width="6" height="9" rx="3" fill="#cfcfcf"/>323        <path d="M7 12a5 5 0 0 0 10 0M12 17v3" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>324      </svg>325    </div>326    <div class="confirm">327      <svg width="56" height="56" viewBox="0 0 24 24">328        <path d="M5 13l4 4 10-10" stroke="#0b6862" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>329      </svg>330    </div>331  </div>332 333</div>334</body>335</html>