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 Booking 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: #1f2b56;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #f7f9fc;21 }22 23 /* Status bar */24 .status-bar {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 120px;30 background: #3a4773;31 color: #fff;32 display: flex;33 align-items: center;34 justify-content: space-between;35 padding: 0 36px;36 box-sizing: border-box;37 font-weight: 600;38 letter-spacing: 0.3px;39 }40 .status-left,41 .status-right {42 display: flex;43 align-items: center;44 gap: 22px;45 font-size: 34px;46 opacity: 0.95;47 }48 .status-time {49 font-size: 40px;50 font-weight: 700;51 }52 .battery {53 display: inline-flex;54 align-items: center;55 gap: 10px;56 }57 58 /* Hero */59 .hero {60 position: absolute;61 top: 120px;62 left: 0;63 width: 1080px;64 height: 540px;65 background: linear-gradient(180deg, #5e71a9 0%, #7f9bca 40%, #a9c5e8 100%);66 box-sizing: border-box;67 }68 .hero-illustration {69 position: absolute;70 right: 30px;71 bottom: 20px;72 width: 1020px;73 height: 350px;74 background: #E0E0E0;75 border: 1px solid #BDBDBD;76 color: #757575;77 display: flex;78 justify-content: center;79 align-items: center;80 border-radius: 16px;81 font-size: 34px;82 }83 .hero h1 {84 position: absolute;85 left: 48px;86 bottom: 370px;87 margin: 0;88 color: #ffffff;89 font-size: 78px;90 line-height: 1.05;91 font-weight: 800;92 text-shadow: 0 2px 6px rgba(0,0,0,0.15);93 }94 95 /* Search Panel Card */96 .panel {97 position: absolute;98 top: 608px;99 left: 0;100 width: 1080px;101 background: #ffffff;102 border-top-left-radius: 40px;103 border-top-right-radius: 40px;104 box-shadow: 0 -6px 16px rgba(31,43,86,0.08);105 padding: 34px 36px 0 36px;106 box-sizing: border-box;107 }108 .fields {109 padding: 14px 0 0 0;110 }111 .field {112 width: 100%;113 height: 140px;114 background: #eef2f8;115 border-radius: 28px;116 display: flex;117 align-items: center;118 padding: 0 36px;119 box-sizing: border-box;120 margin-bottom: 26px;121 color: #243265;122 font-size: 44px;123 font-weight: 700;124 }125 .field.light {126 color: #8a97bd;127 font-weight: 700;128 }129 .icon {130 width: 62px;131 height: 62px;132 display: inline-flex;133 justify-content: center;134 align-items: center;135 margin-right: 24px;136 }137 .swap {138 margin-left: auto;139 opacity: 0.7;140 }141 142 .row {143 display: flex;144 gap: 26px;145 }146 .half {147 flex: 1;148 }149 150 .travelers {151 font-size: 40px;152 font-weight: 700;153 }154 155 .search-btn {156 width: 100%;157 height: 140px;158 background: #ea7772;159 color: #fff;160 border: none;161 border-radius: 28px;162 font-size: 48px;163 font-weight: 800;164 margin: 22px 0 38px 0;165 box-shadow: 0 8px 18px rgba(234,119,114,0.35);166 }167 168 /* Hotels/Recommendation Section */169 .section {170 padding: 24px 36px 0 36px;171 box-sizing: border-box;172 background: #ffffff;173 }174 .section h2 {175 font-size: 58px;176 color: #142055;177 margin: 18px 0 18px 0;178 line-height: 1.15;179 font-weight: 800;180 }181 .divider {182 height: 2px;183 background: #e6e9f2;184 margin: 0 0 24px 0;185 }186 .cards {187 display: flex;188 gap: 28px;189 overflow-x: auto;190 padding-bottom: 28px;191 }192 .hotel-card {193 min-width: 312px;194 max-width: 312px;195 }196 .hotel-image {197 width: 312px;198 height: 210px;199 background: #E0E0E0;200 border: 1px solid #BDBDBD;201 color: #757575;202 border-radius: 24px;203 display: flex;204 justify-content: center;205 align-items: center;206 position: relative;207 font-size: 28px;208 overflow: hidden;209 }210 .badge {211 position: absolute;212 top: 12px;213 left: 12px;214 background: #2f7f57;215 color: #fff;216 padding: 8px 14px;217 border-radius: 14px;218 font-size: 28px;219 font-weight: 800;220 letter-spacing: 0.4px;221 }222 .hotel-title {223 margin-top: 12px;224 font-size: 36px;225 font-weight: 800;226 color: #1e2a5a;227 white-space: nowrap;228 overflow: hidden;229 text-overflow: ellipsis;230 }231 232 /* Bottom navigation */233 .bottom-nav {234 position: absolute;235 left: 0;236 bottom: 0;237 width: 1080px;238 height: 180px;239 background: #ffffff;240 border-top: 1px solid #e7ecf3;241 display: flex;242 align-items: center;243 justify-content: space-around;244 box-sizing: border-box;245 padding-bottom: 36px;246 }247 .nav-item {248 display: flex;249 flex-direction: column;250 align-items: center;251 gap: 16px;252 color: #8aa0c9;253 font-size: 26px;254 font-weight: 700;255 }256 .nav-item.active {257 color: #ee8b86;258 }259 .nav-icon {260 width: 64px;261 height: 64px;262 }263 264 /* Home indicator */265 .home-indicator {266 position: absolute;267 bottom: 18px;268 left: 50%;269 transform: translateX(-50%);270 width: 240px;271 height: 10px;272 background: #cfd6e6;273 border-radius: 8px;274 }275</style>276</head>277<body>278<div id="render-target">279 280 <!-- Status bar -->281 <div class="status-bar">282 <div class="status-left">283 <span class="status-time">8:58</span>284 <span>⏱️</span>285 <span>🔔</span>286 <span>✈️</span>287 <span>•</span>288 </div>289 <div class="status-right">290 <span>⦸</span>291 <div class="battery">🔋 <span>100%</span></div>292 <span>•</span>293 </div>294 </div>295 296 <!-- Hero section -->297 <div class="hero">298 <h1>Where to, Fabio?</h1>299 <div class="hero-illustration">[IMG: Transport illustration]</div>300 </div>301 302 <!-- Search panel -->303 <div class="panel">304 <div class="fields">305 <div class="field">306 <div class="icon">307 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">308 <circle cx="12" cy="12" r="9" stroke="#7d89b1" stroke-width="2"/>309 <circle cx="12" cy="12" r="4" fill="none" stroke="#7d89b1" stroke-width="2"/>310 </svg>311 </div>312 <div>New York USA</div>313 <div class="swap">314 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">315 <path d="M7 3l4 4H9v6H7V7H3l4-4z" fill="#7d89b1"/>316 <path d="M17 21l-4-4h2V11h2v6h4l-4 4z" fill="#7d89b1"/>317 </svg>318 </div>319 </div>320 321 <div class="field">322 <div class="icon">323 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">324 <path d="M12 2C8.7 2 6 4.7 6 8c0 4.5 6 12 6 12s6-7.5 6-12c0-3.3-2.7-6-6-6zm0 8.5A2.5 2.5 0 1 1 12 5a2.5 2.5 0 0 1 0 5z" fill="#7d89b1"/>325 </svg>326 </div>327 <div>New Hyde Park USA</div>328 </div>329 330 <div class="row">331 <div class="field half">332 <div class="icon">333 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">334 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#7d89b1" stroke-width="2"/>335 <path d="M8 3v4M16 3v4" stroke="#7d89b1" stroke-width="2"/>336 </svg>337 </div>338 <div>Tue, Nov 21</div>339 </div>340 <div class="field half light">341 <div class="icon">342 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">343 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#b4bdd6" stroke-width="2"/>344 <path d="M8 3v4M16 3v4" stroke="#b4bdd6" stroke-width="2"/>345 </svg>346 </div>347 <div>+ Add return</div>348 </div>349 </div>350 351 <div class="field travelers">352 <div class="icon">353 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">354 <circle cx="12" cy="7" r="4" stroke="#7d89b1" stroke-width="2"/>355 <path d="M5 21c0-4 3-6 7-6s7 2 7 6" stroke="#7d89b1" stroke-width="2"/>356 </svg>357 </div>358 <div>1 Adult, No discount card</div>359 </div>360 361 <button class="search-btn">Search Omio</button>362 </div>363 364 <div class="section">365 <h2>Need a place to stay in New Hyde Park, NY?</h2>366 <div class="divider"></div>367 <div class="cards">368 <div class="hotel-card">369 <div class="hotel-image">370 <div class="badge">Cheapest -9%</div>371 [IMG: Hotel exterior]372 </div>373 <div class="hotel-title">Meadowbrook Mot...</div>374 </div>375 <div class="hotel-card">376 <div class="hotel-image">377 <div class="badge">-47%</div>378 [IMG: Hotel room with city view]379 </div>380 <div class="hotel-title">Courtyard New Yor...</div>381 </div>382 <div class="hotel-card">383 <div class="hotel-image">384 <div class="badge">-44%</div>385 [IMG: Hotel entrance]386 </div>387 <div class="hotel-title">The Westin Times...</div>388 </div>389 <div class="hotel-card">390 <div class="hotel-image">391 <div class="badge">-25%</div>392 [IMG: Boutique lobby]393 </div>394 <div class="hotel-title">Arthouse Hotel...</div>395 </div>396 </div>397 </div>398 </div>399 400 <!-- Bottom navigation -->401 <div class="bottom-nav">402 <div class="nav-item active">403 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">404 <circle cx="11" cy="11" r="7" stroke="#ee8b86" stroke-width="2"/>405 <path d="M20 20l-3-3" stroke="#ee8b86" stroke-width="2" stroke-linecap="round"/>406 </svg>407 </div>408 <div class="nav-item">409 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">410 <rect x="4" y="5" width="16" height="12" rx="2" stroke="#8aa0c9" stroke-width="2"/>411 <path d="M4 9h16" stroke="#8aa0c9" stroke-width="2"/>412 </svg>413 </div>414 <div class="nav-item">415 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">416 <circle cx="12" cy="8" r="4" stroke="#8aa0c9" stroke-width="2"/>417 <path d="M4 21c0-4.5 4-7 8-7s8 2.5 8 7" stroke="#8aa0c9" stroke-width="2"/>418 </svg>419 </div>420 <div class="nav-item">421 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">422 <path d="M12 2l9 7h-3v9H6V9H3l9-7z" stroke="#8aa0c9" stroke-width="2" fill="none"/>423 </svg>424 </div>425 </div>426 427 <div class="home-indicator"></div>428</div>429</body>430</html>