GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Airport Search UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin:0; padding:0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }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:90px; padding:0 36px; display:flex; align-items:center; color:#333; font-size:34px;17 }18 .status-left { display:flex; align-items:center; gap:18px; }19 .status-right { margin-left:auto; display:flex; align-items:center; gap:22px; }20 .sb-icon { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; }21 .battery {22 width:48px; height:24px; border:3px solid #444; border-radius:6px; position:relative;23 }24 .battery:after {25 content:""; position:absolute; right:-10px; top:6px; width:6px; height:12px; background:#444; border-radius:2px;26 }27 .battery .level { width:30px; height:16px; background:#444; margin:2px; border-radius:3px; }28 29 /* App header */30 .top-actions { position:relative; padding:22px 36px 0; }31 .cancel-btn { position:absolute; right:36px; top:0; color:#1a73e8; font-size:40px; padding:22px 0; }32 33 /* Title */34 .title { font-size:72px; font-weight:700; color:#111; margin:18px 36px 24px; }35 36 /* Input pill with chip */37 .search-input {38 margin:0 36px; border:2px solid #C9C9C9; border-radius:18px; height:108px; display:flex; align-items:center; padding:0 20px; gap:16px;39 }40 .chip {41 background:#ECEFF1; border:1px solid #D0D4D7; border-radius:28px; padding:20px 22px; display:flex; align-items:center; gap:14px;42 font-size:36px; color:#222;43 }44 .chip .code { font-weight:800; }45 .chip .close {46 width:40px; height:40px; border-radius:50%; border:1px solid #BDBDBD; color:#555; display:flex; align-items:center; justify-content:center; font-size:28px;47 }48 .input-placeholder { font-size:40px; color:#777; display:flex; align-items:center; gap:14px; }49 .caret { width:3px; height:48px; background:#1a73e8; }50 51 .helper { margin:16px 36px; font-size:34px; color:#6b6b6b; }52 53 .divider { height:1px; background:#E6E6E6; margin:24px 0; }54 55 /* Included row */56 .included-row { display:flex; align-items:center; justify-content:space-between; padding:24px 36px; font-size:40px; color:#333; }57 .chevron { width:36px; height:36px; }58 .chevron svg { width:100%; height:100%; }59 60 .section-title { margin:12px 36px 10px; font-size:40px; color:#666; font-weight:600; }61 62 /* List items */63 .list { padding:10px 0 240px; }64 .item { display:flex; align-items:flex-start; padding:26px 36px; gap:26px; }65 .icon {66 width:44px; height:44px; color:#555; margin-top:6px;67 }68 .item-title { font-size:42px; color:#111; font-weight:700; }69 .item-sub { font-size:34px; color:#666; margin-top:8px; }70 .grow { flex:1; }71 .checkbox {72 width:56px; height:56px; border:3px solid #B7B7B7; border-radius:8px; margin-left:auto; margin-top:6px;73 }74 .checkbox.checked {75 background:#1a73e8; border-color:#1a73e8; position:relative;76 }77 .checkbox.checked:after {78 content:""; position:absolute; left:14px; top:10px; width:20px; height:36px; border-right:6px solid #fff; border-bottom:6px solid #fff; transform:rotate(45deg);79 }80 81 /* Keyboard mock */82 .keyboard {83 position:absolute; bottom:0; left:0; width:100%; height:900px; background:#151515; color:#eaeaea; box-shadow:0 -6px 16px rgba(0,0,0,0.25);84 border-top-left-radius:20px; border-top-right-radius:20px;85 }86 .kb-top { display:flex; align-items:center; gap:30px; padding:22px 36px; color:#bbb; font-size:30px; }87 .kb-pill { background:#232323; padding:12px 20px; border-radius:18px; border:1px solid #2c2c2c; }88 .keys { padding:8px 24px; }89 .row { display:flex; gap:18px; justify-content:center; margin:18px 0; }90 .key {91 background:#212121; color:#fafafa; border-radius:18px; border:1px solid #2A2A2A;92 width:88px; height:120px; display:flex; align-items:center; justify-content:center; font-size:46px;93 }94 .key.wide { width:160px; }95 .space { flex:1; height:120px; background:#212121; border:1px solid #2A2A2A; border-radius:22px; }96 .enter { width:160px; height:120px; background:#77e7e7; color:#0b1b1b; border-radius:22px; font-weight:700; }97 .bottom-row { display:flex; align-items:center; gap:18px; padding:0 24px; }98 99 /* Cancel area tap target visual */100 .cancel-tap-area { height:20px; }101</style>102</head>103<body>104<div id="render-target">105 106 <!-- Status bar -->107 <div class="status-bar">108 <div class="status-left">109 <div>3:32</div>110 <div>25°</div>111 <div class="sb-icon">112 <svg viewBox="0 0 24 24" width="24" height="24">113 <circle cx="12" cy="12" r="10" fill="none" stroke="#555" stroke-width="2"></circle>114 <path d="M12 6v6l4 2" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"></path>115 </svg>116 </div>117 <div class="sb-icon">118 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#777"></circle></svg>119 </div>120 </div>121 <div class="status-right">122 <div class="sb-icon">123 <svg viewBox="0 0 24 24">124 <path d="M2 18l8-12 8 12" fill="none" stroke="#555" stroke-width="2"></path>125 </svg>126 </div>127 <div class="battery"><div class="level"></div></div>128 </div>129 </div>130 131 <div class="top-actions">132 <div class="cancel-btn">Cancel</div>133 <div class="cancel-tap-area"></div>134 </div>135 136 <!-- Title -->137 <div class="title">Where to?</div>138 139 <!-- Search input pill -->140 <div class="search-input">141 <div class="chip">142 <span class="code">BVA</span>143 <span>Paris</span>144 <span class="close">×</span>145 </div>146 <div class="input-placeholder">147 <div class="caret"></div>148 <span>Add another airport</span>149 </div>150 </div>151 152 <div class="helper">Select multiple airports at once and compare flights</div>153 154 <div class="divider"></div>155 156 <div class="included-row">157 <div>Included in your search (1)</div>158 <div class="chevron">159 <svg viewBox="0 0 24 24">160 <path d="M6 9l6 6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>161 </svg>162 </div>163 </div>164 165 <div class="section-title">Your recent searches</div>166 167 <div class="list">168 <!-- Item 1 -->169 <div class="item">170 <div class="icon">171 <svg viewBox="0 0 24 24">172 <path d="M12 22s7-8 7-12a7 7 0 10-14 0c0 4 7 12 7 12z" fill="none" stroke="#555" stroke-width="2"></path>173 <circle cx="12" cy="10" r="3" fill="none" stroke="#555" stroke-width="2"></circle>174 </svg>175 </div>176 <div class="grow">177 <div class="item-title">New York · All airports</div>178 <div class="item-sub">New York State, United States</div>179 </div>180 <div class="checkbox"></div>181 </div>182 183 <!-- Item 2 (checked) -->184 <div class="item">185 <div class="icon">186 <svg viewBox="0 0 24 24">187 <path d="M2 17l9-5 11 5-11-11-4 7" fill="none" stroke="#555" stroke-width="2" stroke-linejoin="round"></path>188 </svg>189 </div>190 <div class="grow">191 <div class="item-title"><span style="font-weight:800">BVA</span> Beauvais–Tillé Airport</div>192 <div class="item-sub">Paris, Ile de France, France</div>193 </div>194 <div class="checkbox checked"></div>195 </div>196 197 <!-- Item 3 -->198 <div class="item">199 <div class="icon">200 <svg viewBox="0 0 24 24">201 <path d="M2 17l9-5 11 5-11-11-4 7" fill="none" stroke="#555" stroke-width="2" stroke-linejoin="round"></path>202 </svg>203 </div>204 <div class="grow">205 <div class="item-title"><span style="font-weight:800">CUN</span> Cancún International Airport</div>206 <div class="item-sub">Cancún, Quintana Roo, Mexico</div>207 </div>208 <div class="checkbox"></div>209 </div>210 211 <!-- Item 4 -->212 <div class="item">213 <div class="icon">214 <svg viewBox="0 0 24 24">215 <path d="M12 22s7-8 7-12a7 7 0 10-14 0c0 4 7 12 7 12z" fill="none" stroke="#555" stroke-width="2"></path>216 <circle cx="12" cy="10" r="3" fill="none" stroke="#555" stroke-width="2"></circle>217 </svg>218 </div>219 <div class="grow">220 <div class="item-title">New York · All airports</div>221 <div class="item-sub">New York State, United States</div>222 </div>223 <div class="checkbox"></div>224 </div>225 </div>226 227 <!-- Keyboard -->228 <div class="keyboard">229 <div class="kb-top">230 <div class="kb-pill">GIF</div>231 <div class="kb-pill">🙂</div>232 <div class="kb-pill">⌨</div>233 <div class="kb-pill">⚙</div>234 <div class="kb-pill">🎨</div>235 <div class="kb-pill">🎤</div>236 </div>237 238 <div class="keys">239 <div class="row">240 <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>241 <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>242 </div>243 <div class="row">244 <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>245 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>246 </div>247 <div class="row">248 <div class="key wide">⇧</div>249 <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>250 <div class="key">n</div><div class="key">m</div>251 <div class="key wide">⌫</div>252 </div>253 </div>254 255 <div class="bottom-row">256 <div class="key wide">?123</div>257 <div class="key">,</div>258 <div class="key wide">🙂</div>259 <div class="space"></div>260 <div class="key">.</div>261 <div class="enter">✓</div>262 </div>263 </div>264 265</div>266</body>267</html>