GD-ML/AndroidCode
13.4k
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>Search Airports</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 box-sizing: border-box;16 }17 18 /* Status bar */19 .statusbar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 110px;25 padding: 0 36px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #1E1E1E;30 font-size: 40px;31 box-sizing: border-box;32 }33 .status-left { display: flex; align-items: center; gap: 22px; }34 .status-right { display: flex; align-items: center; gap: 22px; }35 .sb-icon { width: 36px; height: 36px; opacity: 0.7; }36 .battery {37 width: 60px; height: 30px; border: 3px solid #555; border-radius: 6px; position: relative;38 }39 .battery::after { content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 14px; background: #555; border-radius: 2px; }40 .battery .level { position: absolute; left: 3px; top: 3px; height: 22px; width: 36px; background: #555; border-radius: 3px; }41 42 /* Cancel */43 .cancel {44 position: absolute;45 right: 36px;46 top: 180px;47 color: #1a73e8;48 font-size: 44px;49 font-weight: 500;50 }51 52 /* Content */53 .content {54 position: absolute;55 top: 210px;56 left: 60px;57 right: 60px;58 }59 .title {60 font-size: 72px;61 font-weight: 700;62 color: #1E1E1E;63 margin-bottom: 36px;64 }65 .search-box {66 width: 960px;67 height: 118px;68 border: 2px solid #CFCFCF;69 border-radius: 16px;70 display: flex;71 align-items: center;72 padding: 0 24px;73 box-sizing: border-box;74 }75 .search-input {76 border: none;77 outline: none;78 font-size: 44px;79 color: #1E1E1E;80 flex: 1;81 background: transparent;82 }83 .clear-btn {84 width: 72px; height: 72px; border-radius: 50%;85 display: flex; align-items: center; justify-content: center;86 background: #F1F1F1; border: 1px solid #D6D6D6; cursor: pointer;87 }88 .helper {89 margin-top: 22px;90 color: #7A7A7A;91 font-size: 36px;92 }93 94 /* List */95 .results {96 margin-top: 36px;97 width: 960px;98 border-top: 1px solid #E6E6E6;99 padding-top: 24px;100 }101 .item {102 display: flex;103 align-items: flex-start;104 padding: 24px 0;105 border-bottom: 1px solid #EEEEEE;106 }107 .item:last-child { border-bottom: none; }108 .icon {109 width: 56px; height: 56px; margin-right: 28px;110 color: #555;111 }112 .texts { flex: 1; }113 .primary {114 font-size: 40px; color: #1E1E1E;115 }116 .primary .bold { font-weight: 700; }117 .secondary {118 margin-top: 8px;119 font-size: 34px;120 color: #6F6F6F;121 }122 .checkbox {123 width: 56px; height: 56px; border: 2px solid #BDBDBD; border-radius: 8px;124 }125 126 /* Keyboard */127 .keyboard {128 position: absolute;129 bottom: 60px;130 left: 0;131 width: 1080px;132 height: 820px;133 background: #1F1F1F;134 box-sizing: border-box;135 padding: 22px 24px 26px;136 color: #FFF;137 }138 .suggestions {139 display: flex; align-items: center; gap: 24px; margin-bottom: 16px;140 }141 .chip {142 background: #2A2A2A; color: #EDEDED; padding: 16px 22px; border-radius: 22px;143 font-size: 34px;144 }145 .keys {146 display: flex; flex-direction: column; gap: 16px;147 }148 .row { display: flex; justify-content: space-between; gap: 14px; }149 .key {150 background: #2B2B2B;151 color: #EDEDED;152 min-width: 86px;153 height: 110px;154 border-radius: 18px;155 display: flex; align-items: center; justify-content: center;156 font-size: 40px;157 }158 .key-wide { min-width: 130px; }159 .key-space { flex: 1; }160 .key-special { background: #2D2D2D; color: #BFBFBF; }161 .enter {162 width: 130px; height: 110px; background: #9CF0EE; color: #1F1F1F; border-radius: 24px;163 font-weight: 700;164 }165 166 /* Bottom gesture bar */167 .gesture-bar {168 position: absolute;169 bottom: 18px;170 left: 50%;171 transform: translateX(-50%);172 width: 240px; height: 10px; background: #E6E6E6; border-radius: 6px;173 opacity: 0.95;174 }175 176 /* Simple icons */177 .svg { width: 100%; height: 100%; }178</style>179</head>180<body>181<div id="render-target">182 <!-- Status bar -->183 <div class="statusbar">184 <div class="status-left">185 <div>3:31</div>186 <svg class="sb-icon" viewBox="0 0 24 24">187 <circle cx="12" cy="12" r="10" fill="#777"/>188 </svg>189 <svg class="sb-icon" viewBox="0 0 24 24">190 <path d="M12 2v8l6 4" stroke="#777" stroke-width="2" fill="none"/>191 </svg>192 <svg class="sb-icon" viewBox="0 0 24 24">193 <path d="M3 12h18" stroke="#777" stroke-width="2"/>194 </svg>195 <svg class="sb-icon" viewBox="0 0 24 24">196 <circle cx="12" cy="12" r="2" fill="#777"/>197 </svg>198 </div>199 <div class="status-right">200 <svg class="sb-icon" viewBox="0 0 24 24">201 <path d="M12 3l6 6-6 6-6-6z" fill="#777"/>202 </svg>203 <div class="battery"><div class="level"></div></div>204 </div>205 </div>206 207 <!-- Cancel -->208 <div class="cancel">Cancel</div>209 210 <!-- Main content -->211 <div class="content">212 <div class="title">Where from?</div>213 214 <div class="search-box">215 <input class="search-input" value="New York" />216 <div class="clear-btn">217 <svg class="svg" viewBox="0 0 24 24">218 <path d="M6 6l12 12M18 6L6 18" stroke="#555" stroke-width="2" />219 </svg>220 </div>221 </div>222 223 <div class="helper">Select multiple airports at once and compare flights</div>224 225 <div class="results">226 <!-- New York - All airports -->227 <div class="item">228 <div class="icon">229 <svg class="svg" viewBox="0 0 24 24">230 <path d="M12 2c-3.3 0-6 2.7-6 6 0 4.5 6 12 6 12s6-7.5 6-12c0-3.3-2.7-6-6-6z" fill="#777"/>231 <circle cx="12" cy="8" r="2.5" fill="#fff"/>232 </svg>233 </div>234 <div class="texts">235 <div class="primary">New York · All airports</div>236 <div class="secondary">New York State, United States</div>237 </div>238 <div class="checkbox"></div>239 </div>240 241 <!-- JFK -->242 <div class="item">243 <div class="icon">244 <svg class="svg" viewBox="0 0 24 24">245 <path d="M2 14l6-2 6 2 8-4-2-2-6 2-6-8-2 2 4 6-6 2z" fill="#777"/>246 </svg>247 </div>248 <div class="texts">249 <div class="primary"><span class="bold">JFK</span> John F. Kennedy International Airport</div>250 <div class="secondary">21 km from city center</div>251 </div>252 <div class="checkbox"></div>253 </div>254 255 <!-- EWR -->256 <div class="item">257 <div class="icon">258 <svg class="svg" viewBox="0 0 24 24">259 <path d="M2 14l6-2 6 2 8-4-2-2-6 2-6-8-2 2 4 6-6 2z" fill="#777"/>260 </svg>261 </div>262 <div class="texts">263 <div class="primary"><span class="bold">EWR</span> Newark Liberty International Airport</div>264 <div class="secondary">18 km from city center</div>265 </div>266 <div class="checkbox"></div>267 </div>268 269 <!-- LGA -->270 <div class="item">271 <div class="icon">272 <svg class="svg" viewBox="0 0 24 24">273 <path d="M2 14l6-2 6 2 8-4-2-2-6 2-6-8-2 2 4 6-6 2z" fill="#777"/>274 </svg>275 </div>276 <div class="texts">277 <div class="primary"><span class="bold">LGA</span> LaGuardia Airport</div>278 <div class="secondary">9 km from city center</div>279 </div>280 <div class="checkbox"></div>281 </div>282 283 <!-- BUF -->284 <div class="item">285 <div class="icon">286 <svg class="svg" viewBox="0 0 24 24">287 <path d="M2 14l6-2 6 2 8-4-2-2-6 2-6-8-2 2 4 6-6 2z" fill="#777"/>288 </svg>289 </div>290 <div class="texts">291 <div class="primary"><span class="bold">BUF</span> Buffalo Niagara International Airport</div>292 <div class="secondary">Buffalo, New York State, United States</div>293 </div>294 <div class="checkbox"></div>295 </div>296 </div>297 </div>298 299 <!-- Keyboard -->300 <div class="keyboard">301 <div class="suggestions">302 <div class="chip">York</div>303 <div class="chip">Yorkshire</div>304 <div class="chip">Yorker</div>305 <div style="margin-left:auto; display:flex; align-items:center;">306 <svg width="48" height="48" viewBox="0 0 24 24">307 <path d="M12 3a7 7 0 0 0-7 7v4l3 2v-6h2v8l2 1 2-1v-8h2v6l3-2v-4a7 7 0 0 0-7-7z" fill="#CFCFCF"/>308 </svg>309 </div>310 </div>311 <div class="keys">312 <div class="row">313 <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>314 <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>315 </div>316 <div class="row" style="padding: 0 40px;">317 <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>318 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>319 </div>320 <div class="row" style="padding: 0 80px;">321 <div class="key key-special">shift</div>322 <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>323 <div class="key key-special">324 <svg width="30" height="30" viewBox="0 0 24 24">325 <path d="M4 7h16v2H4zm0 6h12v2H4z" fill="#BFBFBF"/>326 <path d="M18 11l4 4-4 4" stroke="#BFBFBF" stroke-width="2" fill="none"/>327 </svg>328 </div>329 </div>330 <div class="row">331 <div class="key key-wide key-special">?123</div>332 <div class="key key-wide key-special">,</div>333 <div class="key key-space"></div>334 <div class="key key-wide key-special">.</div>335 <div class="key enter">✓</div>336 </div>337 </div>338 </div>339 340 <div class="gesture-bar"></div>341</div>342</body>343</html>