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>Travel Search UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 color: #1e2b55;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #f6f7fb;21 }22 23 /* Status bar */24 .status-bar {25 height: 140px;26 background: #3a4b7f;27 color: #e9efff;28 display: flex;29 align-items: center;30 padding: 0 36px;31 font-size: 34px;32 }33 .status-left, .status-right {34 display: flex;35 align-items: center;36 gap: 22px;37 }38 .status-bar .spacer { flex: 1; }39 .status-icon {40 width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.85);41 }42 43 /* Hero illustration */44 .hero {45 position: relative;46 height: 520px;47 overflow: hidden;48 }49 .hero .img {50 position: absolute;51 inset: 0;52 background: #E0E0E0;53 border-bottom: 1px solid #BDBDBD;54 display: flex;55 justify-content: center;56 align-items: center;57 color: #757575;58 font-size: 34px;59 letter-spacing: 0.2px;60 }61 .hero .tint {62 position: absolute;63 inset: 0;64 background: linear-gradient(180deg, rgba(58,75,127,0.82) 0%, rgba(58,75,127,0.35) 55%, rgba(58,75,127,0) 100%);65 }66 .hero-title {67 position: absolute;68 left: 48px;69 bottom: 40px;70 font-weight: 800;71 color: #ffffff;72 font-size: 72px;73 }74 75 /* Sheet (white rounded container) */76 .sheet {77 position: relative;78 background: #ffffff;79 margin-top: -20px;80 border-radius: 28px 28px 0 0;81 padding: 36px 36px 0 36px;82 box-shadow: 0 -2px 0 rgba(0,0,0,0.02);83 }84 85 .field {86 height: 132px;87 background: #edf0f6;88 border-radius: 28px;89 display: flex;90 align-items: center;91 padding: 0 36px;92 gap: 28px;93 color: #2a3b74;94 font-size: 40px;95 margin-bottom: 28px;96 }97 .field .left-icon svg,98 .field .right-icon svg {99 width: 54px;100 height: 54px;101 fill: none;102 stroke: #8ea4d8;103 stroke-width: 3.5;104 }105 .field .right-icon {106 margin-left: auto;107 opacity: 0.9;108 }109 110 .row {111 display: flex;112 gap: 28px;113 }114 .mini-field {115 flex: 1;116 height: 128px;117 background: #edf0f6;118 border-radius: 28px;119 display: flex;120 align-items: center;121 padding: 0 32px;122 gap: 24px;123 font-size: 40px;124 color: #2a3b74;125 }126 .mini-field .close {127 margin-left: auto;128 opacity: 0.55;129 }130 .mini-field svg {131 width: 52px; height: 52px; stroke: #9bb0dd; stroke-width: 3.5; fill: none;132 }133 134 .cta {135 height: 148px;136 background: #ff7b7b;137 border-radius: 28px;138 color: #ffffff;139 font-weight: 700;140 font-size: 44px;141 display: flex;142 align-items: center;143 justify-content: center;144 margin: 28px 0 40px 0;145 box-shadow: 0 6px 18px rgba(255, 123, 123, 0.45);146 }147 148 /* Hotels section */149 .section {150 padding: 20px 36px 0 36px;151 }152 .section h2 {153 margin: 24px 0 16px 0;154 font-size: 56px;155 color: #142a60;156 letter-spacing: 0.2px;157 }158 .divider {159 height: 2px;160 background: #e8ebf3;161 margin: 10px 0 24px 0;162 }163 .cards {164 display: flex;165 gap: 24px;166 overflow-x: auto;167 padding-bottom: 22px;168 }169 .card {170 min-width: 440px;171 max-width: 440px;172 }173 .card .thumb {174 position: relative;175 width: 100%;176 height: 260px;177 background: #E0E0E0;178 border: 1px solid #BDBDBD;179 border-radius: 26px;180 display: flex;181 align-items: center;182 justify-content: center;183 color: #757575;184 font-size: 30px;185 }186 .badge {187 position: absolute;188 top: 16px; left: 16px;189 background: #1ea96c;190 color: #ffffff;191 padding: 10px 18px;192 border-radius: 14px;193 font-size: 32px;194 font-weight: 700;195 }196 .badge.alt { background: #1ea96c; }197 .title {198 margin-top: 18px;199 font-size: 42px;200 font-weight: 800;201 color: #0f2458;202 }203 .sub {204 margin-top: 6px;205 font-size: 32px;206 color: #6d7896;207 }208 209 /* Bottom tab bar */210 .tabbar {211 position: absolute;212 left: 0; right: 0; bottom: 120px;213 height: 160px;214 background: #ffffff;215 border-top: 1px solid #e5e9f3;216 display: flex;217 align-items: center;218 justify-content: space-around;219 }220 .tab {221 display: flex;222 flex-direction: column;223 align-items: center;224 color: #a5b2d3;225 gap: 12px;226 }227 .tab svg { width: 56px; height: 56px; stroke: #a5b2d3; stroke-width: 3.8; fill: none; }228 .tab.active svg { stroke: #ff8f8f; }229 .dot {230 width: 16px; height: 16px; background: #ff6d6d; border-radius: 50%;231 position: absolute; top: 38px; right: 220px;232 }233 234 /* Bottom safe area with handle */235 .bottom-safe {236 position: absolute;237 left: 0; right: 0; bottom: 0;238 height: 120px;239 background: #0f1f46;240 display: flex;241 align-items: center;242 justify-content: center;243 }244 .handle {245 width: 280px; height: 12px; border-radius: 8px; background: #ffffff;246 opacity: 0.9;247 }248</style>249</head>250<body>251<div id="render-target">252 253 <!-- Status bar -->254 <div class="status-bar">255 <div class="status-left">256 <span>1:43</span>257 <div class="status-icon"></div>258 <div class="status-icon"></div>259 <div class="status-icon"></div>260 <span style="font-weight:600">M</span>261 <span style="opacity:.8">•</span>262 </div>263 <div class="spacer"></div>264 <div class="status-right">265 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none"><path d="M3 12h18M3 12a7 7 0 0 1 14 0M3 12a7 7 0 0 0 14 0" opacity=".0"/></svg>266 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none"><path d="M3 12h18" opacity=".0"/></svg>267 <div class="status-icon" style="background:transparent;border:2px solid rgba(255,255,255,.9)"></div>268 </div>269 </div>270 271 <!-- Hero illustration -->272 <div class="hero">273 <div class="img">[IMG: Travel illustration]</div>274 <div class="tint"></div>275 <div class="hero-title">Where to, Maria?</div>276 </div>277 278 <!-- Sheet with form -->279 <div class="sheet">280 281 <div class="field">282 <div class="left-icon">283 <svg viewBox="0 0 24 24">284 <circle cx="12" cy="12" r="6"></circle>285 </svg>286 </div>287 <div>Roma, Autostazione Tiburtina Italy</div>288 <div class="right-icon" title="swap">289 <svg viewBox="0 0 24 24">290 <path d="M7 4v9m0 0-3-3m3 3 3-3M17 20V11m0 0-3 3m3-3 3 3" stroke-linecap="round" stroke-linejoin="round"></path>291 </svg>292 </div>293 </div>294 295 <div class="field">296 <div class="left-icon">297 <svg viewBox="0 0 24 24">298 <path d="M12 21s-7-7-7-11a7 7 0 1 1 14 0c0 4-7 11-7 11z" stroke-linejoin="round"></path>299 <circle cx="12" cy="10" r="2.8"></circle>300 </svg>301 </div>302 <div>Milan Centrale Italy</div>303 </div>304 305 <div class="row">306 <div class="mini-field">307 <svg viewBox="0 0 24 24">308 <rect x="3.5" y="5" width="17" height="15" rx="2"></rect>309 <path d="M8 3.5v3M16 3.5v3M3.5 10h17"></path>310 </svg>311 <div>Tue, Nov 14</div>312 </div>313 <div class="mini-field">314 <svg viewBox="0 0 24 24">315 <rect x="3.5" y="5" width="17" height="15" rx="2"></rect>316 <path d="M8 3.5v3M16 3.5v3M3.5 10h17"></path>317 </svg>318 <div>Tue, Nov 14</div>319 <div class="close">320 <svg viewBox="0 0 24 24">321 <path d="M5 5l14 14M19 5L5 19" stroke-linecap="round"></path>322 </svg>323 </div>324 </div>325 </div>326 327 <div class="field">328 <div class="left-icon">329 <svg viewBox="0 0 24 24">330 <circle cx="12" cy="8" r="3.5"></circle>331 <path d="M4 20c1.5-4 5-6 8-6s6.5 2 8 6" stroke-linecap="round"></path>332 </svg>333 </div>334 <div>1 Adult, No discount card</div>335 </div>336 337 <div class="cta">Search Omio</div>338 </div>339 340 <!-- Hotels -->341 <div class="section">342 <h2>Need a place to stay in Milan?</h2>343 <div class="divider"></div>344 345 <div class="cards">346 <div class="card">347 <div class="thumb">348 [IMG: Hotel exterior]349 <div class="badge">Cheapest</div>350 </div>351 <div class="title">Hotel Brivio</div>352 <div class="sub">4.7 km from center</div>353 </div>354 355 <div class="card">356 <div class="thumb">357 [IMG: Minimal white room]358 <div class="badge">-68%</div>359 </div>360 <div class="title">Hotel Perugino</div>361 <div class="sub">2.1 km from center</div>362 </div>363 364 <div class="card">365 <div class="thumb">366 [IMG: Grand building at night]367 <div class="badge">-32%</div>368 </div>369 <div class="title">Grand Vienna</div>370 <div class="sub">2.4 km from center</div>371 </div>372 </div>373 </div>374 375 <!-- Bottom navigation -->376 <div class="tabbar">377 <div class="tab active">378 <svg viewBox="0 0 24 24">379 <circle cx="11" cy="11" r="7"></circle>380 <path d="M20 20l-4-4"></path>381 </svg>382 </div>383 <div class="tab">384 <svg viewBox="0 0 24 24">385 <path d="M3 9.5c0-.8.6-1.4 1.4-1.6l12-3c.9-.2 1.6.5 1.6 1.4v10.3c0 .8-.6 1.5-1.4 1.6l-12 3c-.9.2-1.6-.5-1.6-1.4V9.5z"></path>386 <path d="M7 12h7"></path>387 </svg>388 </div>389 <div class="tab">390 <svg viewBox="0 0 24 24">391 <circle cx="12" cy="8" r="3.8"></circle>392 <path d="M4 21c1.8-4.7 6.2-6.5 8-6.5s6.2 1.8 8 6.5"></path>393 </svg>394 </div>395 <div class="dot"></div>396 </div>397 398 <div class="bottom-safe">399 <div class="handle"></div>400 </div>401 402</div>403</body>404</html>