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>Flight Search - Where to</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #FFFFFF;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #1F1F1F;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 120px;26 padding: 0 36px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #1F1F1F;31 font-size: 34px;32 }33 .status-left { display: flex; align-items: center; gap: 24px; }34 .status-icons { display: flex; align-items: center; gap: 18px; }35 .status-dot {36 width: 10px; height: 10px; background: #808080; border-radius: 50%;37 }38 .status-right { display: flex; align-items: center; gap: 18px; }39 .icon-signal, .icon-battery { width: 36px; height: 36px; }40 41 /* Cancel link */42 .top-actions {43 position: absolute;44 top: 140px;45 right: 36px;46 font-size: 40px;47 color: #1A73E8;48 }49 50 /* Content area */51 .content {52 position: absolute;53 top: 200px;54 left: 36px;55 right: 36px;56 }57 58 .title {59 font-size: 64px;60 font-weight: 700;61 margin-bottom: 36px;62 }63 64 .search-box {65 position: relative;66 height: 118px;67 border: 2px solid #D3D3D3;68 border-radius: 18px;69 display: flex;70 align-items: center;71 padding: 0 28px;72 font-size: 40px;73 background: #FFFFFF;74 box-sizing: border-box;75 }76 .search-text { color: #000000; }77 .clear-btn {78 position: absolute;79 right: 18px;80 top: 50%;81 transform: translateY(-50%);82 width: 72px;83 height: 72px;84 display: flex;85 align-items: center;86 justify-content: center;87 border-radius: 50%;88 }89 .subtitle {90 margin-top: 22px;91 font-size: 30px;92 color: #6B6B6B;93 }94 95 .divider {96 height: 2px;97 background: #E6E6E6;98 margin: 32px 0;99 }100 101 /* Results list */102 .results { }103 .result {104 display: flex;105 align-items: flex-start;106 gap: 26px;107 padding: 34px 0;108 border-bottom: 1px solid #EEEEEE;109 }110 .result:last-child { border-bottom: none; }111 .icon-wrap {112 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;113 color: #4A4A4A;114 }115 .result-text {116 flex: 1;117 }118 .result-title {119 font-size: 36px;120 color: #1F1F1F;121 }122 .result-title b { font-weight: 800; }123 .result-sub {124 margin-top: 8px;125 font-size: 30px;126 color: #6B6B6B;127 }128 .checkbox {129 width: 54px; height: 54px;130 border: 2px solid #BDBDBD;131 border-radius: 6px;132 margin-left: 16px;133 }134 135 /* Keyboard */136 .keyboard {137 position: absolute;138 bottom: 110px;139 left: 0;140 width: 1080px;141 height: 900px;142 background: #1F1F1F;143 border-top-left-radius: 24px;144 border-top-right-radius: 24px;145 box-shadow: 0 -8px 16px rgba(0,0,0,0.2);146 color: #FFFFFF;147 }148 .suggest-row {149 height: 100px;150 display: flex;151 align-items: center;152 gap: 18px;153 padding: 0 24px;154 border-bottom: 1px solid #2B2B2B;155 }156 .chip {157 background: #2A2A2A;158 padding: 18px 28px;159 border-radius: 22px;160 font-size: 32px;161 color: #E6E6E6;162 }163 .keys {164 padding: 16px 18px;165 }166 .row {167 display: flex;168 justify-content: space-between;169 margin-bottom: 18px;170 }171 .key {172 background: #2B2B2B;173 border-radius: 18px;174 height: 120px;175 flex: 1;176 margin: 0 6px;177 display: flex;178 align-items: center;179 justify-content: center;180 font-size: 44px;181 color: #FAFAFA;182 }183 .key.small { flex: 0.9; }184 .key.medium { flex: 1.2; }185 .key.wide { flex: 3.5; }186 .key.space { flex: 5.2; }187 .key.send {188 background: #77E8E0;189 color: #0A2A28;190 font-weight: 700;191 }192 193 /* Gesture bar */194 .gesture-bar {195 position: absolute;196 bottom: 22px;197 left: 50%;198 transform: translateX(-50%);199 width: 300px; height: 14px;200 background: #EDEDED;201 border-radius: 9px;202 }203 204 /* Simple icons */205 .svg {206 width: 36px; height: 36px;207 }208 .pin-svg { width: 54px; height: 54px; }209 .plane-svg { width: 54px; height: 54px; }210</style>211</head>212<body>213<div id="render-target">214 215 <!-- Status bar -->216 <div class="status-bar">217 <div class="status-left">218 <div>3:33</div>219 <div class="status-icons">220 <!-- bell -->221 <svg class="svg" viewBox="0 0 24 24">222 <path d="M12 2c-2.8 0-5 2.2-5 5v3.5L5 12v2h14v-2l-2-1.5V7c0-2.8-2.2-5-5-5zM10 18a2 2 0 004 0h-4z" fill="#6B6B6B"/>223 </svg>224 <!-- temperature -->225 <svg class="svg" viewBox="0 0 24 24">226 <path d="M14 14.5V5a2 2 0 10-4 0v9.5a4 4 0 104 0z" fill="#6B6B6B"/>227 </svg>228 <!-- timer -->229 <svg class="svg" viewBox="0 0 24 24">230 <path d="M9 2h6v2H9zM12 6a8 8 0 100 16 8 8 0 000-16zm1 4h-2v6h6v-2h-4z" fill="#6B6B6B"/>231 </svg>232 <div class="status-dot"></div>233 </div>234 </div>235 <div class="status-right">236 <!-- signal -->237 <svg class="icon-signal" viewBox="0 0 24 24">238 <path d="M3 17h2v4H3zm4-4h2v8H7zm4-4h2v12h-2zm4-4h2v16h-2z" fill="#6B6B6B"/>239 </svg>240 <!-- battery -->241 <svg class="icon-battery" viewBox="0 0 24 24">242 <path d="M20 7h2v10h-2zM3 7h16v10H3z" fill="none" stroke="#6B6B6B" stroke-width="2"/>243 <rect x="5" y="9" width="11" height="6" fill="#6B6B6B"/>244 </svg>245 </div>246 </div>247 248 <!-- Cancel -->249 <div class="top-actions">Cancel</div>250 251 <!-- Content -->252 <div class="content">253 <div class="title">Where to?</div>254 255 <div class="search-box">256 <div class="search-text">Paris</div>257 <div class="clear-btn">258 <svg viewBox="0 0 24 24" width="36" height="36">259 <circle cx="12" cy="12" r="10" fill="#F0F0F0" stroke="#BDBDBD" stroke-width="2"/>260 <path d="M8 8l8 8M16 8l-8 8" stroke="#555" stroke-width="2" stroke-linecap="round"/>261 </svg>262 </div>263 </div>264 <div class="subtitle">Select multiple airports at once and compare flights</div>265 266 <div class="divider"></div>267 268 <div class="results">269 <!-- Paris - All airports -->270 <div class="result">271 <div class="icon-wrap">272 <svg class="pin-svg" viewBox="0 0 24 24">273 <path d="M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 9a2 2 0 110-4 2 2 0 010 4z" fill="#6B6B6B"/>274 </svg>275 </div>276 <div class="result-text">277 <div class="result-title">Paris · All airports</div>278 <div class="result-sub">Ile de France, France</div>279 </div>280 <div class="checkbox"></div>281 </div>282 283 <!-- CDG -->284 <div class="result">285 <div class="icon-wrap">286 <svg class="plane-svg" viewBox="0 0 24 24">287 <path d="M2 13l8-2 3-7 2 1-2 6 7 2-1 2-6-1-3 6-2-1 2-5-6-1z" fill="#6B6B6B"/>288 </svg>289 </div>290 <div class="result-text">291 <div class="result-title"><b>CDG</b> Paris - Charles de Gaulle Airport</div>292 <div class="result-sub">23 km from city center</div>293 </div>294 <div class="checkbox"></div>295 </div>296 297 <!-- ORY -->298 <div class="result">299 <div class="icon-wrap">300 <svg class="plane-svg" viewBox="0 0 24 24">301 <path d="M2 13l8-2 3-7 2 1-2 6 7 2-1 2-6-1-3 6-2-1 2-5-6-1z" fill="#6B6B6B"/>302 </svg>303 </div>304 <div class="result-text">305 <div class="result-title"><b>ORY</b> Paris - Orly Airport</div>306 <div class="result-sub">14 km from city center</div>307 </div>308 <div class="checkbox"></div>309 </div>310 311 <!-- BVA -->312 <div class="result">313 <div class="icon-wrap">314 <svg class="plane-svg" viewBox="0 0 24 24">315 <path d="M2 13l8-2 3-7 2 1-2 6 7 2-1 2-6-1-3 6-2-1 2-5-6-1z" fill="#6B6B6B"/>316 </svg>317 </div>318 <div class="result-text">319 <div class="result-title"><b>BVA</b> Beauvais–Tillé Airport</div>320 <div class="result-sub">69 km from city center</div>321 </div>322 <div class="checkbox"></div>323 </div>324 325 <!-- GND -->326 <div class="result">327 <div class="icon-wrap">328 <svg class="plane-svg" viewBox="0 0 24 24">329 <path d="M2 13l8-2 3-7 2 1-2 6 7 2-1 2-6-1-3 6-2-1 2-5-6-1z" fill="#6B6B6B"/>330 </svg>331 </div>332 <div class="result-text">333 <div class="result-title"><b>GND</b> Maurice Bishop International Airport</div>334 <div class="result-sub">Saint George’s, Saint George Parish, Grenada</div>335 </div>336 <div class="checkbox"></div>337 </div>338 </div>339 </div>340 341 <!-- Keyboard -->342 <div class="keyboard">343 <div class="suggest-row">344 <div class="chip">Paris</div>345 <div class="chip">Parish</div>346 <div class="chip">Parisian</div>347 </div>348 <div class="keys">349 <div class="row">350 <div class="key">q</div>351 <div class="key">w</div>352 <div class="key">e</div>353 <div class="key">r</div>354 <div class="key">t</div>355 <div class="key">y</div>356 <div class="key">u</div>357 <div class="key">i</div>358 <div class="key">o</div>359 <div class="key">p</div>360 </div>361 <div class="row">362 <div class="key small">a</div>363 <div class="key">s</div>364 <div class="key">d</div>365 <div class="key">f</div>366 <div class="key">g</div>367 <div class="key">h</div>368 <div class="key">j</div>369 <div class="key">k</div>370 <div class="key small">l</div>371 </div>372 <div class="row">373 <div class="key medium">⇧</div>374 <div class="key">z</div>375 <div class="key">x</div>376 <div class="key">c</div>377 <div class="key">v</div>378 <div class="key">b</div>379 <div class="key">n</div>380 <div class="key">m</div>381 <div class="key medium">⌫</div>382 </div>383 <div class="row">384 <div class="key wide">?123</div>385 <div class="key small">,</div>386 <div class="key small">🙂</div>387 <div class="key space"></div>388 <div class="key small">.</div>389 <div class="key send">✓</div>390 </div>391 </div>392 </div>393 394 <div class="gesture-bar"></div>395</div>396</body>397</html>