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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f6f8fb;15 }16 17 /* Status bar */18 .status-bar {19 position: relative;20 height: 130px;21 background: #3a4a7e;22 color: #fff;23 padding: 0 40px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 box-sizing: border-box;28 }29 .sb-left, .sb-right { display: flex; align-items: center; gap: 24px; }30 .sb-time { font-weight: 600; font-size: 42px; letter-spacing: 0.5px; }31 32 /* Hero illustration placeholder */33 .hero {34 position: relative;35 height: 600px;36 background: linear-gradient(180deg, rgba(81,108,166,0.95) 0%, rgba(81,108,166,0.6) 60%, rgba(81,108,166,0.3) 100%);37 }38 .hero .img {39 position: absolute;40 left: 0; right: 0; bottom: 0; top: 0;41 margin: 0;42 border: 1px solid #BDBDBD;43 background: #E0E0E0;44 display: flex; align-items: center; justify-content: center;45 color: #757575; font-size: 34px;46 }47 .hero-title {48 position: absolute;49 left: 48px;50 bottom: 40px;51 color: #ffffff;52 font-size: 76px;53 font-weight: 800;54 letter-spacing: 0.2px;55 }56 57 /* Search panel */58 .panel {59 background: #ffffff;60 border-top-left-radius: 32px;61 border-top-right-radius: 32px;62 box-shadow: 0 12px 24px rgba(38, 53, 92, 0.12);63 margin-top: -24px;64 padding: 36px 36px 40px;65 }66 .input-row {67 height: 128px;68 background: #eef1f6;69 border-radius: 28px;70 padding: 0 34px;71 display: flex;72 align-items: center;73 justify-content: space-between;74 margin: 22px 0;75 box-sizing: border-box;76 }77 .row-left {78 display: flex; align-items: center; gap: 28px;79 color: #22315e;80 font-size: 44px; font-weight: 600;81 }82 .row-right { display: flex; align-items: center; gap: 18px; }83 .muted { color: #9aa5bd; font-weight: 600; }84 85 .two-cols {86 display: grid;87 grid-template-columns: 1fr 1fr;88 gap: 28px;89 margin: 22px 0;90 }91 92 .search-btn {93 height: 128px;94 background: #ea7a73;95 color: #fff;96 border-radius: 28px;97 font-size: 48px;98 font-weight: 700;99 display: flex; align-items: center; justify-content: center;100 margin: 40px 0 8px;101 }102 103 /* Lodging section */104 .section {105 padding: 38px 36px 0;106 }107 .section-title {108 color: #172a64;109 font-size: 58px;110 font-weight: 800;111 line-height: 1.15;112 margin-bottom: 22px;113 }114 .divider {115 height: 2px;116 background: #e2e6ee;117 margin: 6px 0 24px;118 }119 .cards {120 display: flex;121 gap: 26px;122 overflow: hidden;123 }124 .hotel-card {125 width: 300px;126 flex: 0 0 300px;127 }128 .hotel-img {129 width: 100%;130 height: 200px;131 border-radius: 24px;132 background: #E0E0E0;133 border: 1px solid #BDBDBD;134 display: flex; align-items: center; justify-content: center;135 color: #757575; font-size: 28px; position: relative;136 }137 .badge {138 position: absolute; top: 12px; left: 12px;139 background: #3a8b60; color: #fff;140 padding: 10px 16px; border-radius: 16px;141 font-size: 30px; font-weight: 700;142 }143 .hotel-name {144 margin-top: 16px;145 font-size: 38px;146 font-weight: 700;147 color: #243564;148 }149 150 /* Bottom navigation */151 .bottom-nav {152 position: absolute;153 left: 0; right: 0;154 bottom: 160px;155 height: 170px;156 background: #ffffff;157 border-top: 1px solid #e6e9f2;158 display: flex; align-items: center; justify-content: space-around;159 }160 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }161 .nav-label { font-size: 32px; color: #5f6b8e; font-weight: 600; }162 .dark-footer {163 position: absolute; left: 0; right: 0; bottom: 0;164 height: 160px; background: #0f1f42;165 }166 .home-indicator {167 position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%);168 width: 220px; height: 14px; border-radius: 8px; background: rgba(255,255,255,0.6);169 }170 171 /* Simple icon styling */172 .icon { width: 56px; height: 56px; }173 .icon-sm { width: 44px; height: 44px; }174 .icon-lg { width: 64px; height: 64px; }175 .icon-white path, .icon-white circle, .icon-white rect { fill: #ffffff; stroke: none; }176 .icon-blue path, .icon-blue circle, .icon-blue rect { fill: #2b3e73; }177 .icon-stroke { stroke: #22315e; fill: none; stroke-width: 3; }178</style>179</head>180<body>181<div id="render-target">182 183 <!-- Status Bar -->184 <div class="status-bar">185 <div class="sb-left">186 <div class="sb-time">9:00</div>187 <!-- small icons -->188 <svg class="icon-white icon-sm" viewBox="0 0 24 24">189 <path d="M7 2h10l2 4v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6l2-4zm0 6h10v12H7V8z"/>190 </svg>191 <svg class="icon-white icon-sm" viewBox="0 0 24 24">192 <path d="M4 7h16v10H4zM8 3h8v2H8z"/>193 </svg>194 <svg class="icon-white icon-sm" viewBox="0 0 24 24">195 <path d="M3 20l9-16 9 16H3z"/>196 </svg>197 <svg class="icon-white icon-sm" viewBox="0 0 24 24">198 <circle cx="12" cy="12" r="2"/>199 </svg>200 </div>201 <div class="sb-right">202 <svg class="icon-white icon-sm" viewBox="0 0 24 24">203 <path d="M12 2a9 9 0 1 1 0 18 9 9 0 0 1 0-18zm1 10h5v2h-7V6h2v6z"/>204 </svg>205 <svg class="icon-white icon-sm" viewBox="0 0 24 24">206 <path d="M3 7h18v10H3zM21 7v-2H3v2"/>207 </svg>208 <span style="font-size:34px;font-weight:700;">100%</span>209 <svg class="icon-white icon-sm" viewBox="0 0 24 24">210 <circle cx="12" cy="12" r="2"/>211 </svg>212 </div>213 </div>214 215 <!-- Hero with illustration placeholder -->216 <div class="hero">217 <div class="img">[IMG: Travel illustration with train, bus and plane]</div>218 <div class="hero-title">Where to, Fabio?</div>219 </div>220 221 <!-- Search Panel -->222 <div class="panel">223 <div class="input-row">224 <div class="row-left">225 <!-- radio icon -->226 <svg class="icon" viewBox="0 0 24 24">227 <circle cx="12" cy="12" r="9" fill="#9AA5BD"></circle>228 <circle cx="12" cy="12" r="5" fill="#ffffff"></circle>229 </svg>230 <span>New York USA</span>231 </div>232 <div class="row-right">233 <!-- swap arrows up/down -->234 <svg class="icon" viewBox="0 0 24 24">235 <path d="M8 4l4-4 4 4H8zm8 16H8l4 4 4-4z" fill="#6b78a6"></path>236 </svg>237 </div>238 </div>239 240 <div class="input-row">241 <div class="row-left">242 <!-- pin icon -->243 <svg class="icon" viewBox="0 0 24 24">244 <path d="M12 2c-4.4 0-8 3.6-8 8 0 5 8 12 8 12s8-7 8-12c0-4.4-3.6-8-8-8zm0 6a2 2 0 110 4 2 2 0 010-4z" fill="#6b78a6"></path>245 </svg>246 <span>New Hyde Park USA</span>247 </div>248 </div>249 250 <div class="two-cols">251 <div class="input-row" style="margin:0;">252 <div class="row-left">253 <!-- calendar icon -->254 <svg class="icon" viewBox="0 0 24 24">255 <path d="M7 2h2v3h6V2h2v3h3v16H4V5h3V2zm13 7H4v11h16V9z" fill="#6b78a6"></path>256 </svg>257 <span>Wed, Nov 22</span>258 </div>259 </div>260 <div class="input-row" style="margin:0;">261 <div class="row-left">262 <!-- calendar icon muted -->263 <svg class="icon" viewBox="0 0 24 24">264 <path d="M7 2h2v3h6V2h2v3h3v16H4V5h3V2zm13 7H4v11h16V9z" fill="#b6bfd6"></path>265 </svg>266 <span class="muted">+ Add return</span>267 </div>268 </div>269 </div>270 271 <div class="input-row">272 <div class="row-left">273 <!-- person icon -->274 <svg class="icon" viewBox="0 0 24 24">275 <path d="M12 12a4 4 0 100-8 4 4 0 000 8zm-8 9c0-4 4-6 8-6s8 2 8 6v1H4v-1z" fill="#6b78a6"></path>276 </svg>277 <span>1 Adult, No discount card</span>278 </div>279 </div>280 281 <div class="search-btn">Search Omio</div>282 </div>283 284 <!-- Lodging Section -->285 <div class="section">286 <div class="section-title">Need a place to stay in New Hyde Park, NY?</div>287 <div class="divider"></div>288 289 <div class="cards">290 <div class="hotel-card">291 <div class="hotel-img">292 <div class="badge">Cheapest -9%</div>293 [IMG: Meadowbrook Motel facade]294 </div>295 <div class="hotel-name">Meadowbrook Mot...</div>296 </div>297 298 <div class="hotel-card">299 <div class="hotel-img">300 <div class="badge">-47%</div>301 [IMG: Desk with NYC skyline view]302 </div>303 <div class="hotel-name">Courtyard New Yor...</div>304 </div>305 306 <div class="hotel-card">307 <div class="hotel-img">308 <div class="badge">-44%</div>309 [IMG: The Westin entrance at night]310 </div>311 <div class="hotel-name">The Westin</div>312 </div>313 </div>314 </div>315 316 <!-- Bottom Navigation -->317 <div class="bottom-nav">318 <div class="nav-item">319 <svg class="icon-lg" viewBox="0 0 24 24">320 <circle cx="10" cy="10" r="6" stroke="#ea7a73" stroke-width="2" fill="none"></circle>321 <rect x="16" y="16" width="5" height="2" fill="#ea7a73"></rect>322 </svg>323 <div class="nav-label" style="color:#ea7a73;">Search</div>324 </div>325 <div class="nav-item">326 <svg class="icon-lg" viewBox="0 0 24 24">327 <rect x="3" y="5" width="18" height="12" rx="2" ry="2" fill="#7c8db5"></rect>328 <circle cx="7" cy="11" r="2" fill="#ffffff"></circle>329 <circle cx="17" cy="11" r="2" fill="#ffffff"></circle>330 </svg>331 <div class="nav-label">Tickets</div>332 </div>333 <div class="nav-item">334 <svg class="icon-lg" viewBox="0 0 24 24">335 <path d="M12 12a4 4 0 100-8 4 4 0 000 8z" fill="#7c8db5"></path>336 <path d="M3 21c0-4 4-6 9-6s9 2 9 6H3z" fill="#7c8db5"></path>337 </svg>338 <div class="nav-label">Profile</div>339 </div>340 </div>341 342 <div class="dark-footer">343 <div class="home-indicator"></div>344 </div>345 346</div>347</body>348</html>