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, "Apple Color Emoji", "Segoe UI Emoji"; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #1a1f36;16  }17 18  /* Status bar */19  .status-bar {20    height: 92px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #2c2f36;26    font-size: 28px;27    letter-spacing: 0.5px;28  }29  .status-left { display: flex; gap: 18px; align-items: center; }30  .status-right { display: flex; gap: 22px; align-items: center; }31  .sb-icon { width: 38px; height: 38px; }32 33  /* Header */34  .header {35    padding: 18px 32px 8px 32px;36    display: flex;37    align-items: center;38    gap: 20px;39  }40  .close-btn {41    width: 56px;42    height: 56px;43    border-radius: 28px;44    display: flex;45    align-items: center;46    justify-content: center;47    color: #1f2b6b;48  }49  .title {50    font-weight: 800;51    color: #0c2a6e;52    font-size: 64px;53    line-height: 1;54  }55 56  /* Input */57  .input-wrap {58    margin: 24px 32px 0 32px;59    padding: 0;60  }61  .input-box {62    height: 128px;63    border: 2px solid #b8c2df;64    background: #eff2f8;65    border-radius: 26px;66    display: flex;67    align-items: center;68    padding: 0 28px;69    gap: 22px;70  }71  .radio-icon {72    width: 44px; height: 44px; border-radius: 50%;73    border: 4px solid #8aa0ce;74    background: transparent;75    box-sizing: border-box;76  }77  .input-text {78    font-size: 40px;79    color: #3f4860;80  }81 82  /* Suggestion item */83  .suggestions {84    margin: 30px 32px 0 32px;85  }86  .suggestion-item {87    display: flex;88    align-items: center;89    gap: 22px;90    padding: 18px 0;91  }92  .train-icon {93    width: 54px; height: 54px;94  }95  .sugg-main {96    font-size: 44px;97    color: #1f2742;98    font-weight: 600;99  }100  .sugg-sub {101    font-size: 44px;102    color: #a0abc6;103    margin-left: 12px;104    font-weight: 600;105  }106  .divider {107    height: 2px;108    background: #d7e2ef;109    margin: 18px 0 0 0;110  }111 112  /* Keyboard */113  .keyboard {114    position: absolute;115    left: 0; right: 0; bottom: 0;116    height: 860px;117    background: #1f1b1a;118    color: #e9e3e1;119    box-shadow: 0 -6px 20px rgba(0,0,0,0.25);120  }121  .kb-suggestions {122    height: 110px;123    display: flex;124    align-items: center;125    padding: 0 22px;126    gap: 22px;127    color: #d7cfc9;128    border-bottom: 1px solid rgba(255,255,255,0.06);129  }130  .chip-sep {131    width: 2px; height: 28px; background: rgba(255,255,255,0.16);132  }133  .kb-chip { font-size: 38px; color: #e8ddd6; opacity: 0.9; }134  .kb-mic { margin-left: auto; width: 56px; height: 56px; }135 136  .kb-rows {137    padding: 18px 16px 0 16px;138    display: grid;139    gap: 16px;140  }141  .kb-row { display: grid; gap: 10px; }142  .row-10 { grid-template-columns: repeat(10, 1fr); }143  .row-9 { grid-template-columns: 1.2fr repeat(7, 1fr) 1.2fr; }144  .row-7 { grid-template-columns: 1.6fr repeat(5, 1fr) 1.6fr; }145  .kb-key {146    height: 120px;147    background: #2a2624;148    border-radius: 22px;149    display: flex; align-items: center; justify-content: center;150    font-size: 46px; color: #f2ece9;151  }152  .kb-key.alt { background: #3a332f; color: #fbe2d5; }153  .kb-bottom {154    padding: 14px 16px 28px 16px;155    display: grid;156    grid-template-columns: 1.3fr 1fr 4fr 1fr 1.3fr;157    gap: 12px;158  }159  .home-indicator {160    position: absolute;161    bottom: 10px; left: 50%;162    transform: translateX(-50%);163    width: 300px; height: 10px;164    background: rgba(255,255,255,0.9);165    border-radius: 8px;166    opacity: 0.9;167  }168 169  /* Utilities */170  .muted { color: #9aa3b7; }171</style>172</head>173<body>174<div id="render-target">175  <!-- Status Bar -->176  <div class="status-bar">177    <div class="status-left">178      <div>1:42</div>179      <svg class="sb-icon" viewBox="0 0 24 24" fill="#a0a4ab"><path d="M12 2a10 10 0 1 0 10 10A10.01 10.01 0 0 0 12 2zm0 14a1 1 0 0 1-1-1V9a1 1 0 1 1 2 0v6a1 1 0 0 1-1 1zm1 3h-2v-2h2z"/></svg>180    </div>181    <div class="status-right">182      <svg class="sb-icon" viewBox="0 0 24 24" fill="#666"><path d="M12 3C7 3 2.73 6.11 1 10.5l2.18.77A9.02 9.02 0 0 1 12 5c3.73 0 6.92 2.3 8.18 5.54L22 10.5C20.27 6.11 16 3 12 3zm0 4a7 7 0 0 0-6.32 4.11l2.12.77A4.99 4.99 0 0 1 12 9c2.09 0 3.87 1.27 4.58 3.08l2.12-.77A7 7 0 0 0 12 7zm0 4c-1.3 0-2.4.84-2.82 2.02l2.82 1.98 2.82-1.98A3 3 0 0 0 12 11z"/></svg>183      <svg class="sb-icon" viewBox="0 0 24 24" fill="#666"><path d="M16 4H8a2 2 0 0 0-2 2v14h12V6a2 2 0 0 0-2-2zm0 14H8V6h8v12z"/></svg>184      <svg class="sb-icon" viewBox="0 0 24 24" fill="#666"><path d="M16 6H4v12h12V6zm2-2a2 2 0 0 1 2 2v12.5a1.5 1.5 0 0 1-3 0V6h-1V4z"/></svg>185    </div>186  </div>187 188  <!-- Header -->189  <div class="header">190    <div class="close-btn" aria-label="Close">191      <svg width="44" height="44" viewBox="0 0 24 24" fill="#0c2a6e">192        <path d="M18.3 5.7L12 12l6.3 6.3-1.3 1.4L10.6 13.4 4.3 19.7 3 18.3 9.3 12 3 5.7 4.3 4.3l6.3 6.3 6.3-6.3 1.4 1.4z"/>193      </svg>194    </div>195    <div class="title">Departure</div>196  </div>197 198  <!-- Input -->199  <div class="input-wrap">200    <div class="input-box">201      <div class="radio-icon"></div>202      <div class="input-text">Milan Centrale, Italy</div>203    </div>204  </div>205 206  <!-- Suggestions -->207  <div class="suggestions">208    <div class="suggestion-item">209      <svg class="train-icon" viewBox="0 0 24 24" fill="#0c2a6e">210        <path d="M6 3h12a2 2 0 0 1 2 2v8a3 3 0 0 1-3 3l2 3h-2l-2-3H9l-2 3H5l2-3a3 3 0 0 1-3-3V5a2 2 0 0 1 2-2zm0 2v6h12V5H6zm2 9a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm8 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>211      </svg>212      <div style="display:flex; align-items:baseline; flex-wrap:wrap;">213        <div class="sugg-main">Milan Centrale</div>214        <div class="sugg-sub">Italy</div>215      </div>216    </div>217    <div class="divider"></div>218  </div>219 220  <!-- Keyboard mock -->221  <div class="keyboard">222    <div class="kb-suggestions">223      <svg class="kb-mic" viewBox="0 0 24 24" fill="#cdb3a8" style="margin-right:10px; transform:rotate(90deg) scaleX(-1);">224        <path d="M4 4h6v6H4zM2 2h2v2H2zM8 2h2v2H8zM2 8h2v2H2z"/>225      </svg>226      <div class="kb-chip">Italy</div>227      <div class="chip-sep"></div>228      <div class="kb-chip">Itlay</div>229      <div class="chip-sep"></div>230      <div class="kb-chip">Italy's</div>231      <svg class="kb-mic" viewBox="0 0 24 24" fill="#e9e0d8" style="margin-left:auto;">232        <path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V20H9v2h6v-2h-2v-2.08A7 7 0 0 0 19 11h-2z"/>233      </svg>234    </div>235 236    <div class="kb-rows">237      <div class="kb-row row-10">238        <div class="kb-key">q</div><div class="kb-key">w</div><div class="kb-key">e</div><div class="kb-key">r</div><div class="kb-key">t</div><div class="kb-key">y</div><div class="kb-key">u</div><div class="kb-key">i</div><div class="kb-key">o</div><div class="kb-key">p</div>239      </div>240      <div class="kb-row row-9">241        <div class="kb-key alt">⇪</div>242        <div class="kb-key">a</div><div class="kb-key">s</div><div class="kb-key">d</div><div class="kb-key">f</div><div class="kb-key">g</div><div class="kb-key">h</div><div class="kb-key">j</div>243        <div class="kb-key alt">⌫</div>244      </div>245      <div class="kb-row row-7">246        <div class="kb-key alt">123</div>247        <div class="kb-key">z</div><div class="kb-key">x</div><div class="kb-key">c</div><div class="kb-key">v</div><div class="kb-key">b</div>248        <div class="kb-key alt">⏎</div>249      </div>250    </div>251 252    <div class="kb-bottom">253      <div class="kb-key alt">?123</div>254      <div class="kb-key">,</div>255      <div class="kb-key" style="border-radius:30px;">space</div>256      <div class="kb-key">.</div>257      <div class="kb-key alt">✓</div>258    </div>259    <div class="home-indicator"></div>260  </div>261</div>262</body>263</html>