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: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";13 color: #22315a;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #f7f8fc;21 }22 23 /* Status bar */24 .status-bar {25 height: 150px;26 background: #2f3f77;27 color: #fff;28 display: flex;29 align-items: center;30 padding: 0 36px;31 box-sizing: border-box;32 }33 .status-left {34 display: flex;35 align-items: center;36 gap: 24px;37 font-weight: 600;38 font-size: 44px;39 }40 .status-icons {41 display: flex;42 align-items: center;43 gap: 22px;44 margin-left: auto;45 }46 .dot {47 width: 12px;48 height: 12px;49 background: #cbd3ff;50 border-radius: 50%;51 }52 53 /* Hero illustration area */54 .hero {55 height: 560px;56 background: linear-gradient(180deg, #7597d1 0%, #6a91cd 35%, #89a6d8 100%);57 position: relative;58 }59 .hero-img {60 position: absolute;61 left: 40px;62 right: 40px;63 bottom: 30px;64 height: 420px;65 background: #E0E0E0;66 border: 1px solid #BDBDBD;67 border-radius: 16px;68 display: flex;69 align-items: center;70 justify-content: center;71 color: #757575;72 font-size: 36px;73 }74 75 /* Search card */76 .search-card {77 position: relative;78 margin-top: -30px;79 background: #ffffff;80 border-top-left-radius: 36px;81 border-top-right-radius: 36px;82 padding: 40px;83 box-sizing: border-box;84 box-shadow: 0 -2px 0 rgba(0,0,0,0.03);85 }86 .heading {87 font-weight: 800;88 font-size: 64px;89 color: #10306d;90 margin: 10px 0 30px 10px;91 }92 .field {93 height: 140px;94 background: #eef2f8;95 border-radius: 28px;96 display: flex;97 align-items: center;98 padding: 0 34px;99 box-sizing: border-box;100 margin: 18px 10px;101 gap: 26px;102 }103 .field .label {104 font-size: 44px;105 color: #1f2f5e;106 flex: 1;107 line-height: 1.2;108 }109 .field-row {110 display: flex;111 gap: 24px;112 margin: 8px 10px;113 }114 .half {115 flex: 1;116 height: 140px;117 background: #eef2f8;118 border-radius: 28px;119 display: flex;120 align-items: center;121 padding: 0 34px;122 box-sizing: border-box;123 gap: 26px;124 }125 126 .swap {127 width: 70px;128 height: 70px;129 border-radius: 18px;130 background: #e5edf8;131 display: flex;132 align-items: center;133 justify-content: center;134 }135 .close {136 width: 70px;137 height: 70px;138 border-radius: 18px;139 background: #e5edf8;140 display: flex;141 align-items: center;142 justify-content: center;143 margin-left: auto;144 }145 146 .search-btn {147 height: 130px;148 background: #ff7171;149 color: #ffffff;150 border-radius: 28px;151 margin: 36px 10px 10px;152 display: flex;153 align-items: center;154 justify-content: center;155 font-size: 48px;156 font-weight: 700;157 letter-spacing: 0.5px;158 }159 160 /* Hotels section */161 .section {162 padding: 20px 40px 0;163 }164 .section-title {165 font-size: 56px;166 font-weight: 800;167 color: #0f2e66;168 margin: 18px 0 16px;169 }170 .divider {171 height: 2px;172 background: #e8ecf4;173 margin-bottom: 24px;174 }175 .cards {176 display: flex;177 gap: 26px;178 padding: 0 0 20px;179 }180 .card {181 width: 320px;182 background: transparent;183 }184 .thumb {185 width: 320px;186 height: 220px;187 background: #E0E0E0;188 border: 1px solid #BDBDBD;189 border-radius: 26px;190 display: flex;191 justify-content: center;192 align-items: center;193 color: #757575;194 font-size: 28px;195 position: relative;196 overflow: hidden;197 }198 .badge {199 position: absolute;200 top: 16px;201 left: 16px;202 background: #2ea86a;203 color: #fff;204 padding: 12px 18px;205 border-radius: 18px;206 font-size: 28px;207 font-weight: 700;208 }209 .title {210 font-size: 42px;211 font-weight: 800;212 color: #132b61;213 margin-top: 18px;214 }215 .subtitle {216 font-size: 32px;217 color: #7181a3;218 margin-top: 6px;219 }220 221 /* Bottom navigation */222 .bottom-nav {223 position: absolute;224 left: 0;225 right: 0;226 bottom: 140px;227 height: 180px;228 background: #ffffff;229 border-top: 1px solid #e7ebf3;230 display: flex;231 align-items: center;232 justify-content: space-around;233 padding: 0 40px;234 box-sizing: border-box;235 }236 .nav-item {237 width: 140px;238 height: 140px;239 display: flex;240 align-items: center;241 justify-content: center;242 }243 .nav-indicator {244 position: absolute;245 left: 50%;246 transform: translateX(-50%);247 bottom: 160px;248 width: 280px;249 height: 16px;250 background: #dcdde2;251 border-radius: 10px;252 }253 .bottom-safe {254 position: absolute;255 left: 0;256 right: 0;257 bottom: 0;258 height: 140px;259 background: #0d1e42;260 }261 .notif-dot {262 position: absolute;263 width: 20px;264 height: 20px;265 background: #ff6b6b;266 border-radius: 50%;267 right: 260px;268 bottom: 220px;269 }270 271 /* Icon defaults */272 svg {273 display: block;274 }275 .icon {276 width: 56px;277 height: 56px;278 stroke: #2c417a;279 fill: none;280 stroke-width: 6;281 }282 .icon-light {283 stroke: #ffffff;284 }285 .icon-large {286 width: 64px;287 height: 64px;288 }289</style>290</head>291<body>292<div id="render-target">293 294 <!-- Status bar -->295 <div class="status-bar">296 <div class="status-left">297 <span>1:41</span>298 <!-- simple app icons -->299 <svg class="icon-light icon" viewBox="0 0 24 24"><path d="M12 2l4 8-4 8-4-8 4-8z"/></svg>300 <svg class="icon-light icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/></svg>301 <svg class="icon-light icon" viewBox="0 0 24 24"><path d="M12 2v20M2 12h20"/></svg>302 <svg class="icon-light icon" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2"/><path d="M4 8h16"/></svg>303 <div class="dot"></div>304 </div>305 <div class="status-icons">306 <!-- WiFi -->307 <svg class="icon-light icon" viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 12c3-2 11-2 14 0M8 16c2-1 6-1 8 0"/><circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"/></svg>308 <!-- Battery -->309 <svg class="icon-light icon" viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2"/><rect x="20" y="10" width="2" height="4" rx="1" fill="#fff" stroke="none"/><rect x="4" y="8" width="12" height="8" fill="#fff" stroke="none"/></svg>310 </div>311 </div>312 313 <!-- Hero area -->314 <div class="hero">315 <div class="hero-img">[IMG: Travel illustration – plane, bus, train]</div>316 </div>317 318 <!-- Search content card -->319 <div class="search-card">320 <div class="heading">Where to, Maria?</div>321 322 <!-- From -->323 <div class="field">324 <!-- origin marker -->325 <svg class="icon" viewBox="0 0 24 24">326 <circle cx="12" cy="12" r="7"/>327 <circle cx="12" cy="12" r="3" fill="#2c417a" stroke="none"/>328 </svg>329 <div class="label">Taynuilt United Kingdom</div>330 <div class="swap">331 <svg viewBox="0 0 24 24" width="36" height="36" stroke="#2c417a" fill="none" stroke-width="2">332 <path d="M7 17l-3-3 3-3M4 14h10M17 7l3 3-3 3M20 10H10"/>333 </svg>334 </div>335 </div>336 337 <!-- To -->338 <div class="field">339 <svg class="icon" viewBox="0 0 24 24">340 <path d="M12 2c-4 0-7 3-7 7 0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7z"/>341 <circle cx="12" cy="9" r="3" fill="#2c417a" stroke="none"/>342 </svg>343 <div class="label">Iława Główna Poland</div>344 </div>345 346 <!-- Dates -->347 <div class="field-row">348 <div class="half">349 <svg class="icon" viewBox="0 0 24 24">350 <rect x="3" y="5" width="18" height="16" rx="2"/>351 <path d="M3 9h18M8 3v6M16 3v6"/>352 </svg>353 <div class="label">Tue, Nov 14</div>354 </div>355 <div class="half">356 <svg class="icon" viewBox="0 0 24 24">357 <rect x="3" y="5" width="18" height="16" rx="2"/>358 <path d="M3 9h18M8 3v6M16 3v6"/>359 </svg>360 <div class="label">Tue, Nov 14</div>361 <div class="close">362 <svg viewBox="0 0 24 24" width="30" height="30" stroke="#2c417a" fill="none" stroke-width="2">363 <path d="M6 6l12 12M18 6l-12 12"/>364 </svg>365 </div>366 </div>367 </div>368 369 <!-- Passengers -->370 <div class="field">371 <svg class="icon" viewBox="0 0 24 24">372 <circle cx="12" cy="8" r="4"/>373 <path d="M4 22c0-4 4-7 8-7s8 3 8 7"/>374 </svg>375 <div class="label">1 Adult, No discount card</div>376 </div>377 378 <!-- Search button -->379 <div class="search-btn">Search Omio</div>380 </div>381 382 <!-- Hotels section -->383 <div class="section">384 <div class="section-title">Need a place to stay in Milan?</div>385 <div class="divider"></div>386 387 <div class="cards">388 <!-- Card 1 -->389 <div class="card">390 <div class="thumb">391 <div class="badge">Cheapest</div>392 [IMG: Hotel exterior with greenery]393 </div>394 <div class="title">Hotel Brivio</div>395 <div class="subtitle">4.7 km from center</div>396 </div>397 <!-- Card 2 -->398 <div class="card">399 <div class="thumb">400 <div class="badge">-68%</div>401 [IMG: Minimal white hotel room]402 </div>403 <div class="title">Hotel Perugino</div>404 <div class="subtitle">2.1 km from center</div>405 </div>406 <!-- Card 3 -->407 <div class="card">408 <div class="thumb">409 <div class="badge">-32%</div>410 [IMG: Grand hotel facade at night]411 </div>412 <div class="title">Grand Vi...</div>413 <div class="subtitle">2.4 km from center</div>414 </div>415 </div>416 </div>417 418 <!-- Bottom navigation -->419 <div class="bottom-nav">420 <div class="nav-item">421 <svg viewBox="0 0 24 24" width="54" height="54" stroke="#ff7e8a" fill="none" stroke-width="2">422 <circle cx="11" cy="11" r="7"/>423 <path d="M20 20l-4-4"/>424 </svg>425 </div>426 <div class="nav-item">427 <svg viewBox="0 0 24 24" width="54" height="54" stroke="#8aa0c9" fill="none" stroke-width="2">428 <path d="M3 8h18l-3 10H6z"/>429 <path d="M7 8V5M17 8V5"/>430 <circle cx="9" cy="15" r="1.5" fill="#8aa0c9" stroke="none"/>431 <circle cx="15" cy="15" r="1.5" fill="#8aa0c9" stroke="none"/>432 </svg>433 </div>434 <div class="nav-item">435 <svg viewBox="0 0 24 24" width="54" height="54" stroke="#8aa0c9" fill="none" stroke-width="2">436 <circle cx="12" cy="8" r="4"/>437 <path d="M4 22c0-4 4-7 8-7s8 3 8 7"/>438 </svg>439 </div>440 </div>441 <div class="notif-dot"></div>442 <div class="nav-indicator"></div>443 <div class="bottom-safe"></div>444 445</div>446</body>447</html>