GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Where to? Search UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #FFFFFF;12 color: #212121;13 }14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0;17 height: 120px;18 display: flex; align-items: center;19 padding: 0 44px;20 font-size: 42px; color: #2E2E2E;21 }22 .status-left { display: flex; align-items: center; gap: 24px; }23 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }24 .status-icon { width: 40px; height: 40px; }25 .cancel-link {26 position: absolute; top: 140px; right: 44px;27 font-size: 48px; color: #1A73E8; text-decoration: none;28 }29 30 /* Content */31 .content {32 position: absolute; left: 44px; right: 44px; top: 220px;33 }34 .title {35 font-size: 86px; font-weight: 700; margin-bottom: 40px;36 }37 .search-field {38 height: 120px; border: 2px solid #CFCFCF; border-radius: 18px;39 display: flex; align-items: center; padding: 0 28px;40 font-size: 46px; color: #5F5F5F;41 box-sizing: border-box;42 }43 .hint {44 margin-top: 22px; font-size: 38px; color: #6E6E6E;45 }46 .divider { height: 1px; background: #E6E6E6; margin: 40px 0; }47 .subheading { font-size: 40px; color: #6E6E6E; margin-bottom: 26px; }48 49 .result-item {50 display: flex; align-items: flex-start; gap: 28px;51 padding: 26px 0;52 }53 .result-text { flex: 1; }54 .result-title { font-size: 44px; color: #202124; }55 .result-title b { font-weight: 800; }56 .result-sub { font-size: 38px; color: #6E6E6E; margin-top: 10px; }57 .checkbox {58 width: 58px; height: 58px; border: 2px solid #CFCFCF; border-radius: 8px;59 margin-top: 8px;60 }61 62 .icon-wrap {63 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;64 }65 .icon {66 width: 50px; height: 50px; fill: none; stroke: #6E6E6E; stroke-width: 2.2;67 }68 .icon-fill { fill: #6E6E6E; stroke: none; }69 70 /* Keyboard mock */71 .keyboard {72 position: absolute; left: 0; right: 0; bottom: 0;73 height: 900px; background: #121212; border-top-left-radius: 26px; border-top-right-radius: 26px;74 padding: 34px 26px;75 box-sizing: border-box;76 }77 .kb-top {78 display: flex; align-items: center; gap: 30px; margin-bottom: 24px;79 }80 .kb-badge {81 width: 110px; height: 110px; border-radius: 16px; background: #1E1E1E;82 display: flex; justify-content: center; align-items: center; color: #E0E0E0; font-size: 42px;83 }84 .kb-row {85 display: flex; gap: 18px; margin: 18px 0;86 }87 .key {88 flex: 1;89 height: 120px; background: #1E1E1E; border-radius: 16px;90 display: flex; align-items: center; justify-content: center;91 color: #E9E9E9; font-size: 48px;92 }93 .key.wide { flex: 1.4; }94 .key.small { flex: 0.8; }95 .key.micro { width: 140px; flex: 0 0 140px; }96 .kb-bottom {97 display: flex; align-items: center; gap: 18px; margin-top: 12px;98 }99 .space { flex: 5; }100 .enter { flex: 1.6; background: #43D9D9; color: #0B0B0B; font-weight: 700; }101 .round-btn {102 width: 120px; height: 120px; background: #1E1E1E; border-radius: 60px;103 display: flex; align-items: center; justify-content: center; color: #E9E9E9; font-size: 46px;104 }105</style>106</head>107<body>108<div id="render-target">109 110 <!-- Status bar -->111 <div class="status-bar">112 <div class="status-left">113 <div>3:33</div>114 <svg class="status-icon" viewBox="0 0 24 24">115 <circle cx="12" cy="12" r="10" stroke="#777" stroke-width="2" fill="none"></circle>116 <path d="M12 6v6l4 2" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"></path>117 </svg>118 <svg class="status-icon" viewBox="0 0 24 24">119 <path d="M12 5a7 7 0 100 14 7 7 0 000-14z" stroke="#777" stroke-width="2" fill="none"></path>120 <circle cx="12" cy="12" r="2" fill="#777"></circle>121 </svg>122 <svg class="status-icon" viewBox="0 0 24 24">123 <circle cx="12" cy="12" r="10" stroke="#777" stroke-width="2" fill="none"></circle>124 <path d="M12 6v6h5" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"></path>125 </svg>126 <div style="font-size:36px; color:#777;">•</div>127 </div>128 <div class="status-right">129 <svg class="status-icon" viewBox="0 0 24 24">130 <path d="M3 8h18l-2 10H5L3 8z" fill="#777"></path>131 <circle cx="12" cy="19" r="1.6" fill="#fff"></circle>132 </svg>133 <svg class="status-icon" viewBox="0 0 24 24">134 <rect x="3" y="7" width="14" height="10" rx="2" stroke="#777" stroke-width="2" fill="none"></rect>135 <rect x="18" y="10" width="3" height="4" rx="1" fill="#777"></rect>136 </svg>137 </div>138 </div>139 140 <!-- Cancel link -->141 <a href="#" class="cancel-link">Cancel</a>142 143 <!-- Main content -->144 <div class="content">145 <div class="title">Where to?</div>146 147 <div class="search-field">Airport or city</div>148 <div class="hint">Select multiple airports at once and compare flights</div>149 150 <div class="divider"></div>151 152 <div class="subheading">Your recent searches</div>153 154 <!-- Item 1 -->155 <div class="result-item">156 <div class="icon-wrap">157 <svg class="icon" viewBox="0 0 24 24">158 <path d="M12 3c-4 0-7 3-7 7 0 6 7 11 7 11s7-5 7-11c0-4-3-7-7-7z" stroke="#6E6E6E" fill="none"></path>159 <circle cx="12" cy="10" r="3" stroke="#6E6E6E" fill="none"></circle>160 </svg>161 </div>162 <div class="result-text">163 <div class="result-title">New York · All airports</div>164 <div class="result-sub">New York State, United States</div>165 </div>166 <div class="checkbox"></div>167 </div>168 169 <!-- Item 2 -->170 <div class="result-item">171 <div class="icon-wrap">172 <svg class="icon-fill" viewBox="0 0 24 24">173 <path d="M2 12l8 2 6-10 2 2-6 10 8 2-2 2-7-2-2 7-2-2 2-7-8-2z"></path>174 </svg>175 </div>176 <div class="result-text">177 <div class="result-title"><b>BVA</b> Beauvais–Tillé Airport</div>178 <div class="result-sub">Paris, Ile de France, France</div>179 </div>180 <div class="checkbox"></div>181 </div>182 183 <!-- Item 3 -->184 <div class="result-item">185 <div class="icon-wrap">186 <svg class="icon-fill" viewBox="0 0 24 24">187 <path d="M2 12l8 2 6-10 2 2-6 10 8 2-2 2-7-2-2 7-2-2 2-7-8-2z"></path>188 </svg>189 </div>190 <div class="result-text">191 <div class="result-title"><b>CUN</b> Cancún International Airport</div>192 <div class="result-sub">Cancún, Quintana Roo, Mexico</div>193 </div>194 <div class="checkbox"></div>195 </div>196 197 <!-- Item 4 -->198 <div class="result-item">199 <div class="icon-wrap">200 <svg class="icon" viewBox="0 0 24 24">201 <path d="M12 3c-4 0-7 3-7 7 0 6 7 11 7 11s7-5 7-11c0-4-3-7-7-7z" stroke="#6E6E6E" fill="none"></path>202 <circle cx="12" cy="10" r="3" stroke="#6E6E6E" fill="none"></circle>203 </svg>204 </div>205 <div class="result-text">206 <div class="result-title">New York · All airports</div>207 <div class="result-sub">New York State, United States</div>208 </div>209 <div class="checkbox"></div>210 </div>211 212 <!-- Item 5 -->213 <div class="result-item">214 <div class="icon-wrap">215 <svg class="icon" viewBox="0 0 24 24">216 <path d="M12 3c-4 0-7 3-7 7 0 6 7 11 7 11s7-5 7-11c0-4-3-7-7-7z" stroke="#6E6E6E" fill="none"></path>217 <circle cx="12" cy="10" r="3" stroke="#6E6E6E" fill="none"></circle>218 </svg>219 </div>220 <div class="result-text">221 <div class="result-title">Phoenix · All airports</div>222 <div class="result-sub">Arizona, United States</div>223 </div>224 <div class="checkbox"></div>225 </div>226 </div>227 228 <!-- Keyboard mock (dark) -->229 <div class="keyboard">230 <div class="kb-top">231 <div class="kb-badge">⌨</div>232 <div class="kb-badge">GIF</div>233 <div class="kb-badge">G</div>234 <div class="kb-badge">⚙</div>235 <div class="kb-badge">🎨</div>236 <div class="round-btn">🎤</div>237 </div>238 239 <div class="kb-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="kb-row" style="padding-left: 60px; padding-right: 60px;">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="kb-row" style="padding-left: 160px; padding-right: 160px;">248 <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>249 <div class="key">n</div><div class="key">m</div><div class="key small">⌫</div>250 </div>251 252 <div class="kb-bottom">253 <div class="key micro">?123</div>254 <div class="key micro">,</div>255 <div class="key micro">☺</div>256 <div class="key micro">.</div>257 <div class="key space">space</div>258 <div class="key enter">✓</div>259 </div>260 </div>261 262</div>263</body>264</html>