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>Multiple Arrival Cities</title>7<style>8 body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#1b2b4d; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff;12 }13 14 /* Status bar */15 .status-bar {16 height:96px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; color:#222;17 font-weight:600; font-size:36px;18 }19 .status-right { display:flex; align-items:center; gap:22px; color:#4b4f5c; font-size:30px; }20 .dot { width:10px; height:10px; background:#6f7480; border-radius:50%; display:inline-block; }21 22 /* Header */23 .header {24 height:120px; display:flex; align-items:center; padding:0 28px 0 24px; border-bottom:1px solid #eef1f5;25 }26 .back-btn { width:92px; height:92px; display:flex; align-items:center; justify-content:center; cursor:pointer; }27 .back-btn svg { width:44px; height:44px; }28 .header-title-wrap { margin-left:8px; display:flex; align-items:center; justify-content:flex-end; width:100%; gap:24px; }29 .header-title { font-size:44px; font-weight:700; color:#162b4b; white-space:nowrap; }30 .toggle {31 position:relative; width:132px; height:64px;32 }33 .toggle input { display:none; }34 .toggle .track {35 position:absolute; inset:0; background:#dfe3ea; border-radius:32px; transition:background .2s;36 box-shadow: inset 0 0 0 1px #cbd3de;37 }38 .toggle .thumb {39 position:absolute; top:6px; left:6px; width:52px; height:52px; background:#ffffff; border-radius:50%;40 box-shadow:0 1px 2px rgba(0,0,0,.2);41 transition:left .2s;42 }43 .toggle input:checked + .track + .thumb { left:74px; }44 .toggle input:checked + .track { background:#dfe3ea; }45 46 /* Search bar */47 .search-wrap { padding:24px 28px 10px; }48 .search {49 height:110px; border:1px solid #d9dee7; border-radius:12px; display:flex; align-items:center; padding:0 24px; gap:18px;50 }51 .search svg { width:44px; height:44px; stroke:#5d6a7c; }52 .search input {53 border:none; outline:none; flex:1; font-size:42px; color:#1b2b4d; background:transparent;54 }55 .clear-btn {56 width:64px; height:64px; border-radius:50%; background:#eef1f5; display:flex; align-items:center; justify-content:center;57 border:1px solid #d9dee7; cursor:pointer;58 }59 .clear-btn svg { width:30px; height:30px; stroke:#8a94a6; }60 61 /* List */62 .list { padding:10px 0 0; }63 .item { padding:28px; }64 .row { display:flex; align-items:flex-start; gap:22px; }65 .icon-building {66 width:44px; height:44px; border-radius:6px; background:#1b2b4d; display:flex; align-items:center; justify-content:center;67 }68 .icon-building svg { width:30px; height:30px; fill:#ffffff; }69 .labels { flex:1; }70 .title { font-size:40px; font-weight:700; color:#162b4b; }71 .subtitle { font-size:34px; color:#98a2b3; margin-top:6px; }72 .divider { height:1px; background:#eef1f5; margin:16px 0 0 94px; }73 .branch {74 width:44px; height:44px; display:flex; align-items:center; justify-content:center; opacity:.55;75 }76 .sub-title { font-size:38px; color:#1b2b4d; }77 .highlight { background:#f6f7f9; }78 .right-note { margin-left:auto; color:#98a2b3; font-size:34px; }79 .pill {80 display:inline-flex; align-items:center; height:48px; padding:0 16px; border-radius:8px; background:#eef1f5;81 border:1px solid #d9dee7; color:#667085; font-size:28px; margin-right:14px;82 }83 84 /* Keyboard overlay (mock) */85 .keyboard {86 position:absolute; left:0; right:0; bottom:0; height:820px; background:#1c1c1c; color:#e8eaed;87 border-top:1px solid #111;88 padding:22px 18px 42px;89 }90 .kb-top {91 height:84px; display:flex; align-items:center; justify-content:space-between; color:#c7cad1; font-size:34px; margin-bottom:8px;92 }93 .keys { display:grid; gap:14px; }94 .row-keys { display:flex; gap:14px; justify-content:center; }95 .key {96 background:#2b2b2b; color:#f2f2f2; border-radius:14px; min-width:70px; height:120px; display:flex; align-items:center; justify-content:center;97 font-size:40px; box-shadow: inset 0 0 0 1px #3a3a3a;98 }99 .key.wide { min-width:130px; }100 .key.space { flex:1; }101 .key.action { background:#c0f36e; color:#0b0d0f; font-weight:700; box-shadow:none; }102 .bottom-bar {103 position:absolute; left:50%; transform:translateX(-50%); bottom:16px; width:220px; height:8px; border-radius:8px; background:#e8e8e8;104 opacity:.9;105 }106</style>107</head>108<body>109<div id="render-target">110 <!-- Status Bar -->111 <div class="status-bar">112 <div>8:15</div>113 <div class="status-right">114 <span>◔</span>115 <span>𝌆</span>116 <span class="dot"></span>117 <span>◎</span>118 <span>100%</span>119 </div>120 </div>121 122 <!-- Header -->123 <div class="header">124 <div class="back-btn" aria-label="Back">125 <svg viewBox="0 0 24 24" fill="none" stroke="#152a4b" stroke-width="2">126 <path d="M18 6 L6 18"></path>127 <path d="M6 6 L18 18"></path>128 </svg>129 </div>130 <div class="header-title-wrap">131 <div class="header-title">Multiple Arrival Cities</div>132 <label class="toggle">133 <input type="checkbox" checked>134 <span class="track"></span>135 <span class="thumb"></span>136 </label>137 </div>138 </div>139 140 <!-- Search -->141 <div class="search-wrap">142 <div class="search">143 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">144 <circle cx="11" cy="11" r="7" stroke="#5d6a7c"></circle>145 <path d="M16 16 L21 21" stroke="#5d6a7c" stroke-linecap="round"></path>146 </svg>147 <input type="text" value="Paris" aria-label="Search">148 <div class="clear-btn" aria-label="Clear">149 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">150 <path d="M6 6 L18 18" stroke="#8a94a6" stroke-linecap="round"></path>151 <path d="M18 6 L6 18" stroke="#8a94a6" stroke-linecap="round"></path>152 </svg>153 </div>154 </div>155 </div>156 157 <!-- Results list -->158 <div class="list">159 <!-- PAR All airports -->160 <div class="item">161 <div class="row">162 <div class="icon-building">163 <svg viewBox="0 0 24 24">164 <path d="M3 21h18v-2H3v2zm2-3h14V3H5v15zm3-2h2V6H8v10zm6 0h2V8h-2v8z" />165 </svg>166 </div>167 <div class="labels">168 <div class="title">PAR <span style="color:#1f4b86; font-weight:700;">Paris</span> (All airports)</div>169 <div class="subtitle">France</div>170 </div>171 </div>172 <div class="divider"></div>173 </div>174 175 <!-- CDG -->176 <div class="item">177 <div class="row">178 <div class="branch">179 <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#9aa4b2" stroke-width="2">180 <path d="M6 4v10a4 4 0 0 0 4 4h8" stroke-linecap="round"></path>181 </svg>182 </div>183 <div class="labels">184 <div class="sub-title">CDG <span style="color:#1f4b86; font-weight:700;">Paris</span> Charles de Gaulle Airport</div>185 </div>186 </div>187 <div class="divider"></div>188 </div>189 190 <!-- BVA -->191 <div class="item">192 <div class="row">193 <div class="branch">194 <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#9aa4b2" stroke-width="2">195 <path d="M6 4v10a4 4 0 0 0 4 4h8" stroke-linecap="round"></path>196 </svg>197 </div>198 <div class="labels">199 <div class="sub-title">BVA Beauvais Tille Airport</div>200 </div>201 </div>202 <div class="divider"></div>203 </div>204 205 <!-- XCR -->206 <div class="item">207 <div class="row">208 <div class="branch">209 <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#9aa4b2" stroke-width="2">210 <path d="M6 4v10a4 4 0 0 0 4 4h8" stroke-linecap="round"></path>211 </svg>212 </div>213 <div class="labels">214 <div class="sub-title">XCR Chalons Vatry Airport</div>215 </div>216 </div>217 <div class="divider"></div>218 </div>219 220 <!-- ORY -->221 <div class="item">222 <div class="row">223 <div class="branch">224 <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#9aa4b2" stroke-width="2">225 <path d="M6 4v10a4 4 0 0 0 4 4h8" stroke-linecap="round"></path>226 </svg>227 </div>228 <div class="labels">229 <div class="sub-title">ORY <span style="color:#1f4b86; font-weight:700;">Paris</span> Orly Airport</div>230 </div>231 </div>232 <div class="divider"></div>233 </div>234 235 <!-- Paris US highlighted -->236 <div class="item highlight">237 <div class="row">238 <div class="icon-building">239 <svg viewBox="0 0 24 24">240 <path d="M3 21h18v-2H3v2zm2-3h14V3H5v15zm3-2h2V6H8v10zm6 0h2V8h-2v8z" />241 </svg>242 </div>243 <div class="labels">244 <div class="title" style="font-weight:700; color:#1f4b86;">Paris</div>245 <div class="subtitle">United States</div>246 </div>247 </div>248 </div>249 250 <!-- Near TXK -->251 <div class="item" style="padding-top:18px;">252 <div class="row">253 <div class="labels" style="display:flex; align-items:center; gap:12px;">254 <span class="pill">Near</span>255 <div class="sub-title">TXK Texarkana Regional Airport</div>256 </div>257 <div class="right-note">85 mi</div>258 </div>259 <div class="divider" style="margin-top:22px;"></div>260 </div>261 </div>262 263 <!-- Keyboard (mock) -->264 <div class="keyboard">265 <div class="kb-top">266 <div>⌨️</div>267 <div>Paris | Parish | Parisian</div>268 <div>🎤</div>269 </div>270 <div class="keys">271 <div class="row-keys">272 <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>273 <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>274 </div>275 <div class="row-keys">276 <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>277 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>278 </div>279 <div class="row-keys">280 <div class="key wide">⇧</div>281 <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>282 <div class="key">n</div><div class="key">m</div>283 <div class="key wide">⌫</div>284 </div>285 <div class="row-keys">286 <div class="key wide">?123</div>287 <div class="key">,</div>288 <div class="key space"></div>289 <div class="key">.</div>290 <div class="key action">✓</div>291 </div>292 </div>293 <div class="bottom-bar"></div>294 </div>295</div>296</body>297</html>