GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Travel Search UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #f6f8ff;14 color: #1f2a44;15 }16 17 /* Status/header area */18 .status-bar {19 height: 92px;20 background: #3d4b7f;21 color: #fff;22 display: flex;23 align-items: center;24 justify-content: space-between;25 padding: 0 36px;26 font-weight: 600;27 letter-spacing: 0.5px;28 }29 .status-icons { display: flex; gap: 26px; align-items: center; }30 .dot { width: 10px; height: 10px; background: #dbe3ff; border-radius: 50%; display: inline-block; }31 32 /* Hero illustration area */33 .hero {34 height: 560px;35 background: linear-gradient(180deg, #7f93c7 0%, #8ea4d8 30%, #a9b9e6 60%, #b9c7ee 100%);36 position: relative;37 }38 .hero-img {39 position: absolute;40 left: 0; right: 0; top: 0; bottom: 0;41 margin: 0 0;42 display: flex; align-items: center; justify-content: center;43 }44 .hero-img .img {45 width: 100%;46 height: 100%;47 background: rgba(255,255,255,0.14);48 border-top: 0;49 border-bottom: 0;50 border-left: 0;51 border-right: 0;52 display: flex; align-items: center; justify-content: center;53 color: #f0f3ff;54 font-weight: 700;55 font-size: 36px;56 text-shadow: 0 2px 4px rgba(0,0,0,0.25);57 }58 59 /* Main floating panel */60 .panel {61 position: relative;62 margin: -70px 28px 0 28px;63 background: #ffffff;64 border-radius: 28px;65 box-shadow: 0 14px 38px rgba(39, 58, 122, 0.18);66 padding: 36px;67 }68 .title {69 font-size: 60px;70 line-height: 1.15;71 font-weight: 800;72 margin: 10px 6px 24px 6px;73 }74 75 .field {76 background: #ffffff;77 border: 2px solid #e3e7f3;78 border-radius: 24px;79 height: 120px;80 display: flex;81 align-items: center;82 padding: 0 30px;83 margin: 18px 0;84 }85 .field .label {86 font-size: 44px;87 font-weight: 700;88 color: #1a2e63;89 flex: 1;90 padding-left: 22px;91 }92 .muted { color: #3a4b7e; font-weight: 700; }93 .row-2 {94 display: grid;95 grid-template-columns: 1fr 1fr;96 gap: 26px;97 }98 99 .search-btn {100 background: #ee7f77;101 color: #fff;102 border: none;103 width: 100%;104 height: 120px;105 border-radius: 22px;106 font-size: 48px;107 font-weight: 800;108 letter-spacing: .5px;109 margin: 26px 0 6px;110 box-shadow: 0 8px 20px rgba(238, 127, 119, 0.4);111 }112 113 /* Secondary section */114 .section-header {115 font-size: 48px;116 font-weight: 800;117 color: #1e2b54;118 padding: 36px 10px 16px 10px;119 border-bottom: 2px solid #e7ebf6;120 margin: 34px 28px 0 28px;121 }122 123 .cards {124 margin: 26px 28px;125 display: grid;126 grid-template-columns: repeat(3, 1fr);127 gap: 28px;128 }129 .card {130 background: #ffffff;131 border-radius: 24px;132 border: 2px solid #e4e8f4;133 overflow: hidden;134 box-shadow: 0 10px 24px rgba(40,60,120,0.08);135 }136 .card .img {137 height: 300px;138 background: #E0E0E0;139 border-bottom: 1px solid #BDBDBD;140 display: flex; align-items: center; justify-content: center;141 color: #757575; font-weight: 700;142 }143 .card .txt {144 padding: 26px;145 min-height: 150px;146 }147 .card .txt .h {148 font-size: 40px; font-weight: 800; color: #1f2a44; line-height: 1.2;149 }150 .card .txt .sub {151 margin-top: 8px; font-size: 32px; color: #8a93b3; font-weight: 700;152 }153 154 /* Bottom navigation bar */155 .bottom-nav {156 position: absolute;157 left: 0; right: 0; bottom: 0;158 height: 140px;159 background: #ffffff;160 border-top: 2px solid #e6e9f5;161 display: flex; align-items: center; justify-content: space-around;162 padding-bottom: 10px;163 }164 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #9aa2c2; font-weight: 700; font-size: 26px; }165 .nav-item.active { color: #ef7d74; }166 .notif-dot {167 position: absolute;168 width: 18px; height: 18px; background: #ff6b6b; border-radius: 50%;169 right: 146px; bottom: 92px; border: 3px solid #fff;170 }171 172 /* Helpers for icons */173 .ico {174 width: 48px; height: 48px; min-width: 48px;175 display: inline-flex; align-items: center; justify-content: center;176 }177 .swap-ico { width: 68px; height: 68px; }178 .close-ico { width: 44px; height: 44px; }179</style>180</head>181<body>182<div id="render-target">183 184 <!-- Status Bar -->185 <div class="status-bar">186 <div style="display:flex;align-items:center;gap:24px;">187 <div style="font-size:38px;">9:58</div>188 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>189 </div>190 <div class="status-icons">191 <!-- WiFi -->192 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">193 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>194 <path d="M5 11c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>195 <path d="M8 14c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>196 <circle cx="12" cy="18" r="1.5" fill="#fff"/>197 </svg>198 <!-- Battery -->199 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">200 <rect x="2" y="7" width="18" height="10" rx="2" stroke="#fff" stroke-width="2"/>201 <rect x="4.5" y="9.5" width="13" height="5" rx="1" fill="#fff"/>202 <rect x="21" y="10" width="2" height="4" rx="1" fill="#fff"/>203 </svg>204 </div>205 </div>206 207 <!-- Hero Illustration -->208 <div class="hero">209 <div class="hero-img">210 <div class="img">[IMG: Travel illustration (plane • bus • train)]</div>211 </div>212 </div>213 214 <!-- Main Panel -->215 <div class="panel">216 <div class="title">Where to, Maria?</div>217 218 <!-- From field -->219 <div class="field">220 <div class="ico">221 <!-- Start circle icon -->222 <svg viewBox="0 0 24 24" width="44" height="44">223 <circle cx="12" cy="12" r="7" fill="none" stroke="#7286d3" stroke-width="2"/>224 <circle cx="12" cy="12" r="2.2" fill="#7286d3"/>225 </svg>226 </div>227 <div class="label">London United Kingdom</div>228 <div class="swap-ico">229 <!-- Swap vertical arrows -->230 <svg viewBox="0 0 24 24" width="64" height="64">231 <path d="M7 3v13" stroke="#6a7ed2" stroke-width="2" stroke-linecap="round"/>232 <path d="M4 6l3-3 3 3" stroke="#6a7ed2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>233 <path d="M17 21V8" stroke="#6a7ed2" stroke-width="2" stroke-linecap="round"/>234 <path d="M14 18l3 3 3-3" stroke="#6a7ed2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>235 </svg>236 </div>237 </div>238 239 <!-- To field -->240 <div class="field">241 <div class="ico">242 <!-- Location Pin -->243 <svg viewBox="0 0 24 24" width="44" height="44">244 <path d="M12 22s7-7.2 7-12a7 7 0 1 0-14 0c0 4.8 7 12 7 12z" fill="none" stroke="#6a7ed2" stroke-width="2"/>245 <circle cx="12" cy="10" r="2.3" fill="#6a7ed2"/>246 </svg>247 </div>248 <div class="label">Brinnington United Kingdom</div>249 </div>250 251 <!-- Dates -->252 <div class="row-2">253 <div class="field" style="margin:0;">254 <div class="ico">255 <!-- Calendar -->256 <svg viewBox="0 0 24 24" width="44" height="44">257 <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#6a7ed2" stroke-width="2"/>258 <path d="M3 9h18" stroke="#6a7ed2" stroke-width="2"/>259 <path d="M7 3v4M17 3v4" stroke="#6a7ed2" stroke-width="2" stroke-linecap="round"/>260 </svg>261 </div>262 <div class="label muted">Wed, Nov 15</div>263 </div>264 <div class="field" style="margin:0;">265 <div class="ico">266 <!-- Calendar -->267 <svg viewBox="0 0 24 24" width="44" height="44">268 <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#6a7ed2" stroke-width="2"/>269 <path d="M3 9h18" stroke="#6a7ed2" stroke-width="2"/>270 <path d="M7 3v4M17 3v4" stroke="#6a7ed2" stroke-width="2" stroke-linecap="round"/>271 </svg>272 </div>273 <div class="label muted">Wed, Nov 15</div>274 <div class="close-ico">275 <svg viewBox="0 0 24 24" width="40" height="40">276 <path d="M6 6l12 12M18 6L6 18" stroke="#8ea0de" stroke-width="2" stroke-linecap="round"/>277 </svg>278 </div>279 </div>280 </div>281 282 <!-- Passengers -->283 <div class="field">284 <div class="ico">285 <!-- Person -->286 <svg viewBox="0 0 24 24" width="44" height="44">287 <circle cx="12" cy="8" r="3" fill="#6a7ed2"/>288 <path d="M5 20c0-3.5 3-6 7-6s7 2.5 7 6" fill="none" stroke="#6a7ed2" stroke-width="2" stroke-linecap="round"/>289 </svg>290 </div>291 <div class="label muted">1 Adult, No discount card</div>292 </div>293 294 <button class="search-btn">Search Omio</button>295 </div>296 297 <!-- Secondary section -->298 <div class="section-header">Need a place to stay?</div>299 300 <div class="cards">301 <div class="card">302 <div class="img">[IMG: Traveler paying at hotel lobby]</div>303 <div class="txt">304 <div class="h">Book now,</div>305 <div class="h" style="color:#ef7d74;">pay later</div>306 </div>307 </div>308 <div class="card">309 <div class="img">[IMG: Phone showing cancelled label]</div>310 <div class="txt">311 <div class="h" style="color:#ef7d74;">Free cancelation</div>312 <div class="sub">on most stays</div>313 </div>314 </div>315 <div class="card">316 <div class="img">[IMG: Mobile app with discount badge]</div>317 <div class="txt">318 <div class="h">Get 10% off</div>319 <div class="sub">with mobile deals</div>320 </div>321 </div>322 </div>323 324 <!-- Bottom Navigation -->325 <div class="bottom-nav">326 <div class="nav-item active">327 <svg width="58" height="58" viewBox="0 0 24 24">328 <circle cx="11" cy="11" r="7" stroke="#ef7d74" stroke-width="2" fill="none"/>329 <path d="M16.5 16.5L21 21" stroke="#ef7d74" stroke-width="2" stroke-linecap="round"/>330 </svg>331 <div>Search</div>332 </div>333 <div class="nav-item">334 <svg width="58" height="58" viewBox="0 0 24 24">335 <rect x="3" y="5" width="18" height="14" rx="3" stroke="#9aa2c2" stroke-width="2" fill="none"/>336 <path d="M7 9h10" stroke="#9aa2c2" stroke-width="2" stroke-linecap="round"/>337 </svg>338 <div>Tickets</div>339 </div>340 <div class="nav-item">341 <svg width="58" height="58" viewBox="0 0 24 24">342 <circle cx="12" cy="8" r="3.2" fill="#9aa2c2"/>343 <path d="M4 20c1-4 5-6 8-6s7 2 8 6" fill="none" stroke="#9aa2c2" stroke-width="2" stroke-linecap="round"/>344 </svg>345 <div>Account</div>346 </div>347 </div>348 <div class="notif-dot"></div>349 350</div>351</body>352</html>