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; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #FFFFFF;15    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;16    color: #1E2A56;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 120px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 40px;30    box-sizing: border-box;31    color: #333A4A;32    font-weight: 600;33  }34  .status-bar .time { font-size: 40px; }35  .status-icons {36    display: flex;37    align-items: center;38    gap: 26px;39  }40  .status-icons svg { width: 42px; height: 42px; }41 42  /* Header */43  .header {44    position: absolute;45    top: 120px;46    left: 40px;47    right: 40px;48    height: 140px;49    display: flex;50    align-items: center;51    gap: 28px;52  }53  .close-icon {54    width: 60px;55    height: 60px;56  }57  .title {58    font-size: 64px;59    font-weight: 800;60    letter-spacing: 0.2px;61  }62 63  /* Search field */64  .search-field {65    position: absolute;66    top: 300px;67    left: 40px;68    width: 1000px;69    height: 150px;70    background: #EEF1F7;71    border: 3px solid #BFC6DB;72    border-radius: 26px;73    box-sizing: border-box;74    display: flex;75    align-items: center;76    padding: 0 28px;77    gap: 22px;78    color: #8E97A9;79  }80  .search-field .pin { width: 56px; height: 56px; }81  .caret {82    width: 3px;83    height: 60px;84    background: #1E2A56;85    border-radius: 2px;86  }87  .placeholder {88    font-size: 42px;89    line-height: 1;90  }91 92  /* Keyboard */93  .keyboard {94    position: absolute;95    left: 0;96    bottom: 0;97    width: 1080px;98    height: 900px;99    background: #121213;100    color: #F0F0F0;101    box-sizing: border-box;102  }103  .kbd-top {104    height: 110px;105    display: flex;106    align-items: center;107    justify-content: space-around;108    padding: 0 40px;109    box-sizing: border-box;110  }111  .kbd-top .tool {112    width: 84px;113    height: 84px;114    background: #1E1E1F;115    border-radius: 42px;116    display: flex;117    align-items: center;118    justify-content: center;119    border: 1px solid #2A2A2B;120  }121  .kbd-rows {122    padding: 14px 36px 0;123  }124  .kbd-row {125    display: flex;126    gap: 12px;127    margin-top: 18px;128    justify-content: center;129  }130  .key {131    background: #2A2A2B;132    border: 1px solid #3A3A3B;133    color: #FFFFFF;134    border-radius: 18px;135    height: 120px;136    min-width: 90px;137    font-size: 44px;138    font-weight: 600;139    display: flex;140    align-items: center;141    justify-content: center;142  }143  .key.wide { min-width: 120px; }144  .key.xwide { min-width: 150px; }145  .key.space { min-width: 440px; font-size: 36px; font-weight: 500; color: #DADADA; }146  .key.pale {147    background: #404244;148    color: #EAEAF0;149  }150 151  /* Gesture bar */152  .gesture {153    position: absolute;154    bottom: 14px;155    left: 50%;156    transform: translateX(-50%);157    width: 240px;158    height: 10px;159    background: #FFFFFF;160    border-radius: 6px;161    opacity: 0.85;162  }163</style>164</head>165<body>166<div id="render-target">167 168  <!-- Status Bar -->169  <div class="status-bar">170    <div class="time">8:58</div>171    <div class="status-icons">172      <!-- Do Not Disturb -->173      <svg viewBox="0 0 24 24" fill="none" stroke="#3C3F4F" stroke-width="2">174        <circle cx="12" cy="12" r="9"></circle>175        <line x1="6.8" y1="12" x2="17.2" y2="12"></line>176      </svg>177      <!-- Cellular -->178      <svg viewBox="0 0 24 24" fill="#3C3F4F">179        <rect x="3" y="14" width="3" height="7" rx="1"></rect>180        <rect x="8" y="11" width="3" height="10" rx="1"></rect>181        <rect x="13" y="8" width="3" height="13" rx="1"></rect>182        <rect x="18" y="5" width="3" height="16" rx="1"></rect>183      </svg>184      <!-- Battery -->185      <svg viewBox="0 0 28 24" fill="none" stroke="#3C3F4F" stroke-width="2">186        <rect x="2" y="6" width="20" height="12" rx="2"></rect>187        <rect x="23" y="9" width="3" height="6" rx="1" fill="#3C3F4F"></rect>188        <rect x="4" y="8" width="16" height="8" rx="1" fill="#3C3F4F"></rect>189      </svg>190      <!-- 100% text -->191      <span style="font-size:36px; color:#3C3F4F; font-weight:700;">100%</span>192    </div>193  </div>194 195  <!-- Header -->196  <div class="header">197    <!-- Close Icon -->198    <svg class="close-icon" viewBox="0 0 24 24" fill="none" stroke="#1E2A56" stroke-width="2" stroke-linecap="round">199      <line x1="4" y1="4" x2="20" y2="20"></line>200      <line x1="20" y1="4" x2="4" y2="20"></line>201    </svg>202    <div class="title">Arrival</div>203  </div>204 205  <!-- Search Field -->206  <div class="search-field">207    <!-- Location Pin Icon -->208    <svg class="pin" viewBox="0 0 24 24">209      <path d="M12 2C8.7 2 6 4.7 6 8c0 4.8 6 12 6 12s6-7.2 6-12c0-3.3-2.7-6-6-6zm0 8.2a2.2 2.2 0 1 1 0-4.4 2.2 2.2 0 0 1 0 4.4z" fill="#A7B0C5"></path>210    </svg>211    <div class="caret"></div>212    <div class="placeholder">City, station, airport or port</div>213  </div>214 215  <!-- Keyboard -->216  <div class="keyboard">217    <div class="kbd-top">218      <div class="tool"><span style="font-size:34px; color:#DADADA;">⌨</span></div>219      <div class="tool"><span style="font-size:34px; color:#DADADA;">🙂</span></div>220      <div class="tool"><span style="font-size:34px; color:#DADADA;">GIF</span></div>221      <div class="tool"><span style="font-size:34px; color:#DADADA;">⚙</span></div>222      <div class="tool"><span style="font-size:30px; color:#DADADA;">G↔</span></div>223      <div class="tool"><span style="font-size:34px; color:#DADADA;">🎨</span></div>224      <div class="tool"><span style="font-size:34px; color:#DADADA;">🎙</span></div>225    </div>226    <div class="kbd-rows">227      <!-- Row 1 -->228      <div class="kbd-row">229        <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>230        <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>231      </div>232      <!-- Row 2 -->233      <div class="kbd-row" style="padding: 0 20px;">234        <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>235        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>236      </div>237      <!-- Row 3 -->238      <div class="kbd-row">239        <div class="key wide" style="font-size:38px;">⇧</div>240        <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>241        <div class="key xwide" style="font-size:38px;">⌫</div>242      </div>243      <!-- Row 4 -->244      <div class="kbd-row">245        <div class="key xwide pale">?123</div>246        <div class="key pale">,</div>247        <div class="key pale" style="font-size:38px;">🙂</div>248        <div class="key space">space</div>249        <div class="key pale">.</div>250        <div class="key xwide pale" style="font-size:40px;">✓</div>251      </div>252    </div>253  </div>254 255  <!-- Gesture bar -->256  <div class="gesture"></div>257</div>258</body>259</html>