GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Travel App UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 90px;22 background: #2f3b72;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 28px;27 box-sizing: border-box;28 }29 .status-left { display: flex; align-items: center; gap: 18px; }30 .status-time { font-weight: 600; font-size: 32px; }31 .status-icon {32 width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.9);33 }34 .status-right {35 margin-left: auto;36 display: flex; align-items: center; gap: 26px;37 }38 39 /* Hero header */40 .hero {41 position: absolute;42 top: 90px;43 left: 0;44 width: 1080px;45 height: 500px;46 background: linear-gradient(180deg, #8FB2EE 0%, #BFD3F9 35%, #D9E4FF 100%);47 }48 .hero-illustration {49 position: absolute;50 top: 0; left: 0;51 width: 1080px; height: 500px;52 display: flex; align-items: center; justify-content: center;53 color: #5c6ea8;54 background: rgba(255,255,255,0.12);55 border-bottom: 1px solid rgba(45,58,115,0.15);56 }57 .hero-illustration .img {58 width: 100%; height: 100%;59 background: #E0E0E0; border: 1px solid #BDBDBD;60 display: flex; align-items: center; justify-content: center;61 color: #757575; font-weight: 600;62 }63 64 .hero-title {65 position: absolute;66 top: 520px;67 left: 30px;68 color: #fff;69 font-size: 64px;70 font-weight: 800;71 letter-spacing: 0.5px;72 }73 74 /* White card with fields */75 .card {76 position: absolute;77 top: 600px;78 left: 20px;79 width: 1040px;80 background: #ffffff;81 border-radius: 22px;82 box-shadow: 0 6px 20px rgba(0,0,0,0.08);83 padding: 24px 0 30px;84 box-sizing: border-box;85 }86 .field {87 margin: 16px 28px;88 height: 120px;89 background: #F2F4F8;90 border-radius: 18px;91 display: flex; align-items: center;92 padding: 0 28px;93 box-sizing: border-box;94 color: #1c2b5a;95 font-size: 40px;96 font-weight: 600;97 }98 .field.light {99 background: #F7F8FC;100 }101 .field .icon {102 width: 54px; height: 54px; margin-right: 24px;103 display: flex; align-items: center; justify-content: center;104 }105 .swap {106 margin-left: auto;107 width: 64px; height: 64px; border-radius: 16px;108 display: flex; align-items: center; justify-content: center;109 background: #E9ECF5;110 }111 112 .dates-row {113 display: flex; gap: 26px; margin: 16px 28px;114 }115 .date-field {116 flex: 1;117 height: 120px;118 background: #F2F4F8;119 border-radius: 18px;120 display: flex; align-items: center;121 padding: 0 28px;122 box-sizing: border-box;123 color: #1c2b5a;124 font-size: 40px;125 font-weight: 700;126 }127 .date-field .right {128 margin-left: auto; display: flex; align-items: center; gap: 20px;129 }130 131 .search-btn {132 margin: 26px 28px 0;133 height: 118px;134 border-radius: 24px;135 background: #E97974;136 color: #ffffff;137 font-size: 44px;138 font-weight: 800;139 display: flex; align-items: center; justify-content: center;140 }141 142 /* Stay section */143 .stay-section {144 position: absolute;145 top: 1210px;146 left: 30px;147 width: 1020px;148 }149 .stay-title {150 color: #0e2a6e;151 font-weight: 800;152 font-size: 54px;153 margin-bottom: 20px;154 }155 .cards-row {156 display: flex; gap: 24px;157 }158 .promo-card {159 width: 324px; height: 420px;160 background: #ffffff;161 border-radius: 20px;162 box-shadow: 0 6px 16px rgba(0,0,0,0.06);163 padding: 26px;164 box-sizing: border-box;165 display: flex; flex-direction: column;166 gap: 18px;167 }168 .promo-image {169 width: 100%; height: 280px;170 background: #E0E0E0; border: 1px solid #BDBDBD;171 display: flex; align-items: center; justify-content: center;172 color: #757575; font-weight: 600;173 border-radius: 14px;174 }175 .promo-text {176 color: #1c2b5a;177 font-size: 40px;178 font-weight: 800;179 line-height: 1.1;180 }181 182 /* Bottom navigation */183 .bottom-nav {184 position: absolute;185 bottom: 140px;186 left: 0;187 width: 1080px;188 height: 140px;189 background: #ffffff;190 border-top: 1px solid #E2E6EF;191 display: flex; align-items: center; justify-content: space-around;192 }193 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #FF8E86; }194 .nav-item.secondary { color: #99A3C6; }195 .nav-icon {196 width: 64px; height: 64px;197 display: flex; align-items: center; justify-content: center;198 }199 .nav-dot {200 position: absolute; width: 22px; height: 22px; border-radius: 50%;201 background: #FF6A60; right: 220px; bottom: 210px;202 box-shadow: 0 0 0 4px #fff;203 }204 205 /* Home indicator */206 .home-indicator {207 position: absolute;208 bottom: 60px; left: 50%; transform: translateX(-50%);209 width: 420px; height: 16px; background: #C8CDD9;210 border-radius: 10px;211 }212 213 /* Helper: subtle divider shadow below hero */214 .hero-divider {215 position: absolute; top: 590px; left: 0; width: 1080px; height: 14px;216 background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0));217 }218</style>219</head>220<body>221<div id="render-target">222 223 <!-- Status Bar -->224 <div class="status-bar">225 <div class="status-left">226 <div class="status-time">9:54</div>227 <div class="status-icon"></div>228 <div class="status-icon"></div>229 <div class="status-icon"></div>230 <div class="status-icon"></div>231 <div class="status-icon" style="opacity:.7"></div>232 </div>233 <div class="status-right">234 <!-- WiFi -->235 <svg width="36" height="28" viewBox="0 0 24 24" fill="none">236 <path d="M12 18.5c.9 0 1.5-.6 1.5-1.5S12.9 15.5 12 15.5 10.5 16.1 10.5 17s.6 1.5 1.5 1.5Z" fill="#fff"/>237 <path d="M4.9 11.3a11.3 11.3 0 0 1 14.2 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>238 <path d="M7.8 13.9a7.6 7.6 0 0 1 8.4 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>239 </svg>240 <!-- Battery -->241 <svg width="42" height="22" viewBox="0 0 32 16" fill="none">242 <rect x="1" y="3" width="26" height="10" rx="2" stroke="#fff" stroke-width="2"/>243 <rect x="4" y="5" width="20" height="6" rx="1" fill="#fff"/>244 <rect x="28" y="6" width="3" height="4" rx="1" fill="#fff"/>245 </svg>246 </div>247 </div>248 249 <!-- Hero -->250 <div class="hero">251 <div class="hero-illustration">252 <div class="img">[IMG: Plane, Bus, and Train Illustration]</div>253 </div>254 </div>255 <div class="hero-title">Where to, Maria?</div>256 <div class="hero-divider"></div>257 258 <!-- Card -->259 <div class="card">260 <!-- From -->261 <div class="field">262 <div class="icon">263 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">264 <circle cx="12" cy="12" r="7" stroke="#3A4A86" stroke-width="2"/>265 <circle cx="12" cy="12" r="2.5" fill="#3A4A86"/>266 </svg>267 </div>268 <div>London United Kingdom</div>269 <div class="swap">270 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">271 <path d="M7 5v8" stroke="#3A4A86" stroke-width="2" stroke-linecap="round"/>272 <path d="M4 8l3-3 3 3" stroke="#3A4A86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>273 <path d="M17 19V11" stroke="#3A4A86" stroke-width="2" stroke-linecap="round"/>274 <path d="M14 16l3 3 3-3" stroke="#3A4A86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>275 </svg>276 </div>277 </div>278 <!-- To -->279 <div class="field light">280 <div class="icon">281 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">282 <path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Z" stroke="#3A4A86" stroke-width="2"/>283 <circle cx="12" cy="9" r="2.5" fill="#3A4A86"/>284 </svg>285 </div>286 <div>Granada Spain</div>287 </div>288 <!-- Dates row -->289 <div class="dates-row">290 <div class="date-field">291 <div class="icon">292 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">293 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#3A4A86" stroke-width="2"/>294 <path d="M7 3v4M17 3v4" stroke="#3A4A86" stroke-width="2" stroke-linecap="round"/>295 </svg>296 </div>297 <div>Thu, Nov 30</div>298 </div>299 <div class="date-field">300 <div class="icon">301 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">302 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#3A4A86" stroke-width="2"/>303 <path d="M7 3v4M17 3v4" stroke="#3A4A86" stroke-width="2" stroke-linecap="round"/>304 </svg>305 </div>306 <div>Thu, Nov 30</div>307 <div class="right">308 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">309 <path d="M6 6l12 12M18 6L6 18" stroke="#95A0BE" stroke-width="2" stroke-linecap="round"/>310 </svg>311 </div>312 </div>313 </div>314 <!-- Passengers -->315 <div class="field">316 <div class="icon">317 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">318 <circle cx="12" cy="8" r="3.5" stroke="#3A4A86" stroke-width="2"/>319 <path d="M4 20c0-4.4 4-6 8-6s8 1.6 8 6" stroke="#3A4A86" stroke-width="2" stroke-linecap="round"/>320 </svg>321 </div>322 <div>1 Adult, No discount card</div>323 </div>324 325 <div class="search-btn">Search Omio</div>326 </div>327 328 <!-- Stay section -->329 <div class="stay-section">330 <div class="stay-title">Need a place to stay?</div>331 <div class="cards-row">332 <div class="promo-card">333 <div class="promo-image">[IMG: Hotel booking handshake]</div>334 <div class="promo-text">Book now,<br>pay later</div>335 </div>336 <div class="promo-card">337 <div class="promo-image">[IMG: Phone - Free cancelation]</div>338 <div class="promo-text">Free cancelation<br>on most stays</div>339 </div>340 <div class="promo-card">341 <div class="promo-image">[IMG: Mobile app savings banner]</div>342 <div class="promo-text">Get 10% off<br>with mobile</div>343 </div>344 </div>345 </div>346 347 <!-- Bottom Navigation -->348 <div class="bottom-nav">349 <div class="nav-item">350 <div class="nav-icon">351 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">352 <circle cx="11" cy="11" r="6" stroke="#FF8E86" stroke-width="2"/>353 <path d="M20 20l-4-4" stroke="#FF8E86" stroke-width="2" stroke-linecap="round"/>354 </svg>355 </div>356 </div>357 <div class="nav-item secondary">358 <div class="nav-icon">359 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">360 <rect x="4" y="6" width="16" height="12" rx="2" stroke="#99A3C6" stroke-width="2"/>361 <circle cx="8" cy="10" r="1.5" fill="#99A3C6"/>362 <circle cx="16" cy="14" r="1.5" fill="#99A3C6"/>363 </svg>364 </div>365 </div>366 <div class="nav-item secondary">367 <div class="nav-icon">368 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">369 <circle cx="12" cy="8" r="3.5" stroke="#99A3C6" stroke-width="2"/>370 <path d="M4 20c0-4.5 4-6.5 8-6.5s8 2 8 6.5" stroke="#99A3C6" stroke-width="2" stroke-linecap="round"/>371 </svg>372 </div>373 </div>374 <div class="nav-item secondary">375 <div class="nav-icon">376 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">377 <path d="M12 3l7 6v10a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V9l7-6Z" stroke="#99A3C6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>378 </svg>379 </div>380 </div>381 </div>382 <div class="nav-dot"></div>383 384 <!-- Home indicator -->385 <div class="home-indicator"></div>386 387</div>388</body>389</html>