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>Search Destination UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 border-radius: 0;16 }17 18 /* Header (dark purple) */19 .header {20 position: relative;21 height: 420px;22 background: #1b0f3a;23 color: #fff;24 }25 .status-bar {26 height: 84px;27 display: flex;28 align-items: center;29 padding: 0 40px;30 font-weight: 600;31 font-size: 34px;32 color: #ffffff;33 opacity: 0.95;34 }35 .status-bar .right {36 margin-left: auto;37 display: flex;38 align-items: center;39 gap: 28px;40 }41 .title-row {42 display: flex;43 align-items: center;44 gap: 22px;45 padding: 24px 40px 16px 32px;46 margin-top: 6px;47 }48 .title-row .title {49 font-size: 48px;50 font-weight: 700;51 }52 .back-btn {53 width: 60px;54 height: 60px;55 }56 .search-wrap {57 padding: 0 32px 24px 32px;58 }59 .search-bar {60 margin: 0 16px;61 height: 120px;62 border-radius: 22px;63 background: #ffffff;64 display: flex;65 align-items: center;66 padding: 0 26px;67 box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;68 }69 .search-input {70 flex: 1;71 color: #2f2f2f;72 font-size: 40px;73 font-weight: 600;74 }75 .caret {76 width: 4px;77 height: 46px;78 background: #ff9800;79 margin-left: 6px;80 border-radius: 2px;81 }82 .clear-chip {83 width: 76px;84 height: 76px;85 border-radius: 18px;86 background: #EFEAF6;87 display: grid;88 place-items: center;89 color: #6b5ea8;90 border: 1px solid #d9d4e8;91 }92 93 /* Tabs row */94 .tabs {95 background: #ffffff;96 display: flex;97 align-items: center;98 padding: 18px 40px 8px 40px;99 gap: 24px;100 }101 .tab {102 display: flex;103 align-items: center;104 gap: 16px;105 color: #2e2b4c;106 font-size: 36px;107 padding: 18px 24px;108 border-radius: 12px;109 }110 .tab.inactive {111 color: #8b89a6;112 }113 .tab.active {114 position: relative;115 font-weight: 700;116 }117 .tab.active::after {118 content: "";119 position: absolute;120 left: 0;121 right: 0;122 bottom: -10px;123 height: 8px;124 border-radius: 4px;125 background: #1b0f3a;126 }127 128 /* Section header */129 .section-label {130 height: 90px;131 background: #efeff1;132 color: #8c8c93;133 font-size: 34px;134 display: flex;135 align-items: center;136 padding: 0 40px;137 }138 139 /* Result item */140 .result {141 padding: 26px 40px;142 border-bottom: 1px solid #e6e6ea;143 display: flex;144 align-items: center;145 gap: 28px;146 }147 .circle-icon {148 width: 92px;149 height: 92px;150 border-radius: 46px;151 background: #eeeaf6;152 border: 1px solid #cfc9e6;153 display: grid;154 place-items: center;155 color: #514a91;156 }157 .result .texts {158 flex: 1;159 }160 .result .title {161 font-size: 40px;162 color: #1d1d2b;163 font-weight: 700;164 margin-bottom: 6px;165 }166 .result .subtitle {167 font-size: 32px;168 color: #a0a0aa;169 font-weight: 600;170 }171 .fav {172 width: 86px;173 height: 86px;174 border-radius: 43px;175 border: 1px solid #d9d9de;176 display: grid;177 place-items: center;178 color: #b8b8bf;179 background: #ffffff;180 }181 182 /* Keyboard mock */183 .keyboard {184 position: absolute;185 left: 0;186 right: 0;187 bottom: 40px;188 height: 860px;189 background: #f2edf7;190 border-top-left-radius: 28px;191 border-top-right-radius: 28px;192 box-shadow: 0 -2px 0 rgba(0,0,0,0.04) inset;193 padding: 20px 22px 24px 22px;194 display: flex;195 flex-direction: column;196 gap: 16px;197 }198 .kb-suggestions {199 background: #efe9f5;200 height: 90px;201 border-radius: 16px;202 display: flex;203 align-items: center;204 justify-content: center;205 color: #6b638f;206 font-size: 36px;207 font-weight: 600;208 position: relative;209 }210 .kb-suggestions .mic {211 position: absolute;212 right: 22px;213 top: 50%;214 transform: translateY(-50%);215 color: #6b5ea8;216 }217 .row {218 display: flex;219 justify-content: center;220 gap: 14px;221 }222 .key {223 height: 120px;224 min-width: 90px;225 padding: 0 22px;226 background: #ffffff;227 border-radius: 28px;228 display: flex;229 align-items: center;230 justify-content: center;231 font-size: 40px;232 color: #2c2c34;233 box-shadow: 0 1px 0 rgba(0,0,0,0.05);234 }235 .key.wide { min-width: 160px; }236 .key.wider { min-width: 260px; }237 .key.space { flex: 1; }238 .key.special {239 background: #dcd6f1;240 color: #3f3a78;241 font-weight: 700;242 }243 244 .gesture {245 position: absolute;246 bottom: 6px;247 left: 50%;248 transform: translateX(-50%);249 width: 280px;250 height: 10px;251 background: #bdbdc2;252 border-radius: 6px;253 opacity: 0.8;254 }255</style>256</head>257<body>258<div id="render-target">259 260 <!-- Dark header -->261 <div class="header">262 <div class="status-bar">263 11:27264 <div class="right">265 <!-- simple icons -->266 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><path d="M3 8a9 9 0 0 1 18 0h-2a7 7 0 0 0-14 0H3zm2 0a7 7 0 0 1 14 0h-2a5 5 0 0 0-10 0H5zm4 0a3 3 0 0 1 6 0h-6z"/></svg>267 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><path d="M21 8v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8l3-4h12l3 4zM6 8h12"/></svg>268 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M3 7h18v10H3z"/><path d="M7 7V5h10v2"/></svg>269 </div>270 </div>271 272 <div class="title-row">273 <svg class="back-btn" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5"><path d="M15 18l-6-6 6-6"/></svg>274 <div class="title">Where to next?</div>275 </div>276 277 <div class="search-wrap">278 <div class="search-bar">279 <div class="search-input">Brussels</div>280 <div class="caret"></div>281 <div class="clear-chip" title="Clear">282 <svg width="30" height="30" viewBox="0 0 24 24" stroke="#6b5ea8" fill="none" stroke-width="2.5"><path d="M6 6l12 12M18 6L6 18"/></svg>283 </div>284 </div>285 </div>286 </div>287 288 <!-- Tabs -->289 <div class="tabs">290 <div class="tab active">291 <svg width="40" height="40" viewBox="0 0 24 24" fill="#2e2b4c"><path d="M4 5h16v3H4zM4 10h16v3H4zM4 15h10v3H4z"/></svg>292 <span>View as list</span>293 </div>294 <div class="tab inactive" style="margin-left: 28px;">295 <svg width="40" height="40" viewBox="0 0 24 24" fill="#8b89a6"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5z"/></svg>296 <span>View on map</span>297 </div>298 </div>299 300 <div class="section-label">Search results</div>301 302 <!-- Result item -->303 <div class="result">304 <div class="circle-icon" aria-hidden="true">305 <svg width="52" height="52" viewBox="0 0 24 24" fill="#5a528e">306 <rect x="5" y="7" width="14" height="9" rx="2"></rect>307 <rect x="7" y="9" width="4" height="3" fill="#eeeaf6"></rect>308 <rect x="13" y="9" width="4" height="3" fill="#eeeaf6"></rect>309 <path d="M7 18h2m6 0h2" stroke="#5a528e" stroke-width="2" fill="none"/>310 </svg>311 </div>312 <div class="texts">313 <div class="title"><strong>Brussels</strong> Airport - Zaventem</div>314 <div class="subtitle">Belgium</div>315 </div>316 <div class="fav">317 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#b0b0b7" stroke-width="2">318 <path d="M12 17.3l-5.1 3 1.3-5.7-4.2-3.7 5.6-.5L12 5l2.4 5.4 5.6.5-4.2 3.7 1.3 5.7z"/>319 </svg>320 </div>321 </div>322 323 <!-- Keyboard -->324 <div class="keyboard">325 <div class="kb-suggestions">326 Brussels327 <div class="mic">328 <svg width="40" height="40" viewBox="0 0 24 24" fill="#6b5ea8"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm-5-3a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.9V21h-2v-3.1A7 7 0 0 1 5 11h2z"/></svg>329 </div>330 </div>331 <div class="row">332 <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><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>333 </div>334 <div class="row">335 <div class="key wide special">⇧</div>336 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>337 <div class="key wide special">338 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#3f3a78" stroke-width="2.2"><path d="M4 12h16M10 6l-6 6 6 6"/></svg>339 </div>340 </div>341 <div class="row">342 <div class="key wide special">?123</div>343 <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>344 <div class="key wide special">345 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#3f3a78" stroke-width="2.2"><path d="M5 12h9"/><path d="M10 7l5 5-5 5"/></svg>346 </div>347 </div>348 <div class="row">349 <div class="key wide special">,</div>350 <div class="key space"> </div>351 <div class="key wide special">.</div>352 <div class="key wider special">353 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#3f3a78" stroke-width="2.2"><path d="M5 12h12"/><path d="M12 5l7 7-7 7"/></svg>354 </div>355 </div>356 </div>357 358 <div class="gesture"></div>359</div>360</body>361</html>