GD-ML/AndroidCode
13.4k
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 UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #ffffff;20 border-radius: 0;21 box-shadow: none;22 color: #1c2b59;23 }24 25 /* Status bar */26 .status-bar {27 height: 80px;28 padding: 0 32px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 color: #3a4056;33 font-size: 32px;34 }35 .status-left { display: flex; align-items: center; gap: 16px; }36 .status-right { display: flex; align-items: center; gap: 24px; }37 .status-icon svg { display: block; }38 39 /* Header */40 .header {41 height: 110px;42 padding: 0 44px;43 display: flex;44 align-items: center;45 gap: 28px;46 }47 .header .title {48 font-weight: 800;49 font-size: 54px;50 letter-spacing: 0.5px;51 color: #172b63;52 }53 54 /* Search input */55 .search-wrap {56 padding: 0 44px;57 margin-top: 18px;58 }59 .search-field {60 height: 120px;61 border: 2px solid #bfc8e2;62 border-radius: 24px;63 background: #f4f7fb;64 display: flex;65 align-items: center;66 padding: 0 28px;67 gap: 22px;68 font-size: 40px;69 color: #2a3c77;70 }71 .search-placeholder {72 color: #2a3c77;73 }74 75 /* Results list */76 .results {77 margin-top: 18px;78 }79 .result-item {80 padding: 28px 44px;81 display: flex;82 align-items: center;83 gap: 28px;84 }85 .result-text {86 font-size: 40px;87 color: #2a3c77;88 }89 .result-text .country {90 color: #9aa8c7;91 margin-left: 8px;92 }93 .divider {94 height: 2px;95 margin: 0 44px;96 background: #dde3ef;97 }98 99 /* Keyboard overlay (mock) */100 .keyboard {101 position: absolute;102 left: 0;103 bottom: 0;104 width: 1080px;105 height: 900px;106 background: #1c1c1f;107 color: #e9eef4;108 border-top: 1px solid #2c2f35;109 display: flex;110 flex-direction: column;111 }112 .kb-suggestions {113 display: flex;114 gap: 18px;115 padding: 20px 24px 8px 24px;116 }117 .chip {118 padding: 12px 20px;119 background: #2a2a2e;120 border-radius: 22px;121 font-size: 36px;122 color: #dfe6ed;123 }124 .kb-rows {125 padding: 6px 18px 18px 18px;126 display: flex;127 flex-direction: column;128 gap: 18px;129 }130 .kb-row {131 display: flex;132 justify-content: center;133 gap: 14px;134 }135 .key {136 width: 92px;137 height: 120px;138 background: #2b2b30;139 border-radius: 18px;140 display: flex;141 align-items: center;142 justify-content: center;143 font-size: 44px;144 color: #e9eef4;145 }146 .key.wide { width: 180px; }147 .space { flex: 1; height: 120px; background: #2b2b30; border-radius: 22px; }148 .key.small { width: 140px; }149</style>150</head>151<body>152<div id="render-target">153 154 <!-- Status bar -->155 <div class="status-bar">156 <div class="status-left">157 <span>5:55</span>158 <span>30°</span>159 </div>160 <div class="status-right">161 <div class="status-icon">162 <!-- WiFi -->163 <svg width="38" height="28" viewBox="0 0 24 24">164 <path d="M12 18l2-2a3 3 0 0 0-4 0l2 2z" fill="#6b7387"/>165 <path d="M3 10a13 13 0 0 1 18 0" stroke="#6b7387" stroke-width="2" fill="none" stroke-linecap="round"/>166 <path d="M6 13a9 9 0 0 1 12 0" stroke="#6b7387" stroke-width="2" fill="none" stroke-linecap="round"/>167 </svg>168 </div>169 <div class="status-icon">170 <!-- Battery -->171 <svg width="42" height="28" viewBox="0 0 24 24">172 <rect x="2" y="7" width="18" height="10" rx="2" fill="#6b7387"></rect>173 <rect x="20" y="10" width="2" height="4" fill="#6b7387"></rect>174 <rect x="4" y="9" width="12" height="6" fill="#e9eef4"></rect>175 </svg>176 </div>177 </div>178 </div>179 180 <!-- Header -->181 <div class="header">182 <!-- Close icon -->183 <svg width="48" height="48" viewBox="0 0 24 24">184 <path d="M6 6l12 12M18 6L6 18" stroke="#243b75" stroke-width="2.4" stroke-linecap="round"></path>185 </svg>186 <div class="title">Departure</div>187 </div>188 189 <!-- Search -->190 <div class="search-wrap">191 <div class="search-field">192 <!-- Radio-like selector -->193 <svg width="44" height="44" viewBox="0 0 24 24">194 <circle cx="12" cy="12" r="9" fill="none" stroke="#8da0d3" stroke-width="2"></circle>195 <circle cx="12" cy="12" r="4" fill="#ffffff" stroke="#8da0d3" stroke-width="2"></circle>196 </svg>197 <div class="search-placeholder">New York</div>198 </div>199 </div>200 201 <!-- Results -->202 <div class="results">203 <div class="result-item">204 <!-- Pin icon -->205 <svg width="44" height="44" viewBox="0 0 24 24">206 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#445a99"></path>207 </svg>208 <div class="result-text"><span class="name">New York, NY</span><span class="country"> USA</span></div>209 </div>210 <div class="divider"></div>211 212 <div class="result-item">213 <!-- Train icon -->214 <svg width="44" height="44" viewBox="0 0 24 24">215 <rect x="5" y="6" width="14" height="9" rx="2" fill="#445a99"></rect>216 <rect x="7" y="7" width="10" height="2" fill="#5b6ea3"></rect>217 <circle cx="8" cy="17" r="1.7" fill="#445a99"></circle>218 <circle cx="16" cy="17" r="1.7" fill="#445a99"></circle>219 </svg>220 <div class="result-text"><span class="name">Penn Station, NY</span><span class="country"> USA</span></div>221 </div>222 <div class="divider"></div>223 224 <div class="result-item">225 <!-- Pin icon -->226 <svg width="44" height="44" viewBox="0 0 24 24">227 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#445a99"></path>228 </svg>229 <div class="result-text"><span class="name">New Rochelle, NY</span><span class="country"> USA</span></div>230 </div>231 <div class="divider"></div>232 233 <div class="result-item">234 <!-- Train icon -->235 <svg width="44" height="44" viewBox="0 0 24 24">236 <rect x="5" y="6" width="14" height="9" rx="2" fill="#445a99"></rect>237 <rect x="7" y="7" width="10" height="2" fill="#5b6ea3"></rect>238 <circle cx="8" cy="17" r="1.7" fill="#445a99"></circle>239 <circle cx="16" cy="17" r="1.7" fill="#445a99"></circle>240 </svg>241 <div class="result-text"><span class="name">New Rochelle Station, NY</span><span class="country"> USA</span></div>242 </div>243 <div class="divider"></div>244 245 <div class="result-item">246 <!-- Pin icon -->247 <svg width="44" height="44" viewBox="0 0 24 24">248 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#445a99"></path>249 </svg>250 <div class="result-text"><span class="name">New Paltz, NY</span><span class="country"> USA</span></div>251 </div>252 <div class="divider"></div>253 254 <div class="result-item">255 <!-- Pin icon -->256 <svg width="44" height="44" viewBox="0 0 24 24">257 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#445a99"></path>258 </svg>259 <div class="result-text"><span class="name">New City, NY</span><span class="country"> USA</span></div>260 </div>261 <div class="divider"></div>262 263 <div class="result-item">264 <!-- Pin icon -->265 <svg width="44" height="44" viewBox="0 0 24 24">266 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#445a99"></path>267 </svg>268 <div class="result-text"><span class="name">West New York, NJ</span><span class="country"> USA</span></div>269 </div>270 <div class="divider"></div>271 </div>272 273 <!-- Keyboard mock -->274 <div class="keyboard">275 <div class="kb-suggestions">276 <div class="chip">York</div>277 <div class="chip">Yorkshire</div>278 <div class="chip">Yorker</div>279 </div>280 <div class="kb-rows">281 <div class="kb-row">282 <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>283 <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>284 </div>285 <div class="kb-row">286 <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>287 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>288 </div>289 <div class="kb-row">290 <div class="key wide">⇧</div>291 <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>292 <div class="key wide">⌫</div>293 </div>294 <div class="kb-row">295 <div class="key small">?123</div>296 <div class="key">,</div>297 <div class="key">😊</div>298 <div class="space"></div>299 <div class="key">.</div>300 <div class="key small">301 <!-- Enter check -->302 <svg width="44" height="44" viewBox="0 0 24 24">303 <path d="M5 12l4 4 10-10" stroke="#aef2f2" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>304 </svg>305 </div>306 </div>307 </div>308 </div>309 310</div>311</body>312</html>