GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Travel Search UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #F4F6FB;14 border-radius: 0;15 }16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 130px;23 background: #323D78;24 color: #FFFFFF;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 40px;29 box-sizing: border-box;30 }31 .status-left, .status-right { display: flex; align-items: center; gap: 26px; }32 .status-time { font-weight: 600; font-size: 36px; letter-spacing: 0.5px; }33 .status-icon svg { width: 36px; height: 36px; opacity: 0.9; }34 35 /* Hero */36 .hero {37 position: absolute;38 top: 130px;39 left: 0;40 width: 1080px;41 height: 520px;42 background: linear-gradient(180deg, #5B7EBB 0%, #7EA8DA 50%, #8DB6E8 100%);43 }44 .hero-img {45 position: absolute;46 bottom: 0;47 left: 0;48 width: 1080px;49 height: 520px;50 display: flex;51 align-items: center;52 justify-content: center;53 color: #FFFFFF;54 font-size: 30px;55 letter-spacing: 0.3px;56 background: rgba(255,255,255,0.08);57 border-top: 1px solid rgba(255,255,255,0.15);58 }59 .title {60 position: absolute;61 top: 560px;62 left: 60px;63 color: #FFFFFF;64 font-size: 64px;65 font-weight: 800;66 }67 68 /* Card container */69 .card {70 position: absolute;71 top: 640px;72 left: 0;73 width: 1080px;74 background: transparent;75 }76 .card-inner {77 width: 960px;78 margin: 0 auto;79 background: #FFFFFF;80 border-radius: 28px;81 box-shadow: 0 8px 18px rgba(51,71,125,0.08);82 padding: 36px;83 box-sizing: border-box;84 }85 .field {86 display: flex;87 align-items: center;88 justify-content: space-between;89 background: #EEF2F8;90 border-radius: 22px;91 padding: 26px 30px;92 margin-bottom: 26px;93 }94 .field .left {95 display: flex;96 align-items: center;97 gap: 22px;98 }99 .field .text {100 color: #1E2B63;101 font-size: 34px;102 font-weight: 600;103 }104 .field .sub {105 color: #7783B3;106 font-size: 32px;107 font-weight: 600;108 }109 .swap-icon svg { width: 42px; height: 42px; fill: none; stroke: #6C79B2; stroke-width: 4; }110 .two-col {111 display: grid;112 grid-template-columns: 1fr 1fr;113 gap: 24px;114 }115 .field-icon svg { width: 42px; height: 42px; fill: none; stroke: #6C79B2; stroke-width: 4; }116 .cta {117 width: 960px;118 margin: 28px auto 0;119 background: #F56F73;120 color: #FFFFFF;121 border-radius: 26px;122 text-align: center;123 padding: 34px 20px;124 font-size: 40px;125 font-weight: 700;126 }127 128 /* How it works section */129 .how {130 position: absolute;131 top: 1180px;132 left: 0;133 width: 1080px;134 }135 .how-inner {136 width: 960px;137 margin: 0 auto;138 }139 .how h2 {140 color: #162A66;141 font-size: 48px;142 font-weight: 800;143 margin: 24px 0 22px;144 }145 .step {146 display: grid;147 grid-template-columns: 90px 1fr;148 gap: 20px;149 padding: 26px 0;150 border-top: 1px solid #E3E7F2;151 }152 .step:first-of-type { border-top: none; }153 .step .icon-wrap {154 position: relative;155 display: flex;156 align-items: center;157 justify-content: center;158 }159 .dot-line {160 position: absolute;161 left: 45px;162 top: 90px;163 width: 0;164 height: 160px;165 border-left: 3px dotted #E0E4EF;166 }167 .step-title {168 color: #1E2B63;169 font-size: 40px;170 font-weight: 800;171 margin-bottom: 10px;172 }173 .step-desc {174 color: #4A578A;175 font-size: 34px;176 line-height: 1.4;177 }178 .circle {179 width: 72px; height: 72px; border-radius: 50%;180 border: 3px solid #DCE2F1; background: #F6F8FD;181 display: flex; align-items: center; justify-content: center;182 }183 .circle svg { width: 38px; height: 38px; stroke: #8895C5; stroke-width: 4; fill: none; }184 185 /* Bottom navigation bar */186 .bottom-bar {187 position: absolute;188 bottom: 0;189 left: 0;190 width: 1080px;191 height: 170px;192 background: #FFFFFF;193 border-top: 1px solid #E3E7F2;194 display: flex;195 align-items: center;196 justify-content: space-around;197 }198 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; }199 .nav-item svg { width: 58px; height: 58px; stroke-width: 4; }200 .nav-label { font-size: 28px; color: #8692C0; }201 .active svg { stroke: #F56F73; }202 .active .nav-label { color: #F56F73; }203 .badge {204 position: absolute; top: -4px; right: -8px;205 width: 18px; height: 18px; background: #FF5C64; border-radius: 50%;206 border: 3px solid #FFFFFF;207 }208 209 /* Gesture pill */210 .gesture {211 position: absolute;212 bottom: 18px;213 left: 50%;214 transform: translateX(-50%);215 width: 280px;216 height: 12px;217 background: #DDE2EE;218 border-radius: 12px;219 }220 221 /* Image placeholder style per instructions */222 .img-placeholder {223 background: #E0E0E0;224 border: 1px solid #BDBDBD;225 color: #757575;226 display: flex; justify-content: center; align-items: center;227 }228</style>229</head>230<body>231<div id="render-target">232 233 <!-- Status Bar -->234 <div class="status-bar">235 <div class="status-left">236 <div class="status-time">6:00</div>237 <div class="status-icon">238 <svg viewBox="0 0 24 24"><path d="M6 12a6 6 0 1 0 12 0 6 6 0 1 0-12 0zm3 0l3 3 4-6"/></svg>239 </div>240 <div class="status-icon">241 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"></circle><path d="M2 12a10 10 0 0 1 20 0"/></svg>242 </div>243 <div class="status-icon">244 <svg viewBox="0 0 24 24"><rect x="7" y="3" width="10" height="18" rx="2"></rect><rect x="10" y="1" width="4" height="2"></rect></svg>245 </div>246 </div>247 <div class="status-right">248 <div class="status-icon">249 <svg viewBox="0 0 24 24"><path d="M2 18l20-12v12H2z"/></svg>250 </div>251 <div class="status-icon">252 <svg viewBox="0 0 24 24"><rect x="1" y="5" width="18" height="14" rx="2"></rect><rect x="20" y="10" width="3" height="4" rx="1"></rect></svg>253 </div>254 </div>255 </div>256 257 <!-- Hero -->258 <div class="hero">259 <div class="hero-img img-placeholder">[IMG: Travel hero illustration with train, bus and plane]</div>260 </div>261 <div class="title">Where to, Jane ?</div>262 263 <!-- Search Card -->264 <div class="card">265 <div class="card-inner">266 <!-- From -->267 <div class="field">268 <div class="left">269 <div class="field-icon">270 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><circle cx="12" cy="12" r="3"></circle></svg>271 </div>272 <div class="text">New York, NY USA</div>273 </div>274 <div class="swap-icon">275 <svg viewBox="0 0 24 24"><path d="M8 5l4-3 4 3M12 2v14M16 19l-4 3-4-3M12 20V6"/></svg>276 </div>277 </div>278 <!-- To -->279 <div class="field">280 <div class="left">281 <div class="field-icon">282 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z"/><circle cx="12" cy="9" r="3"/></svg>283 </div>284 <div class="text">Delaware, OH USA</div>285 </div>286 </div>287 <!-- Dates -->288 <div class="two-col">289 <div class="field" style="margin-bottom:0;">290 <div class="left">291 <div class="field-icon">292 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"></rect><path d="M8 3v4M16 3v4M3 9h18"/></svg>293 </div>294 <div class="text">Fri, Sep 15</div>295 </div>296 </div>297 <div class="field" style="margin-bottom:0;">298 <div class="left">299 <div class="field-icon">300 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"></rect><path d="M8 3v4M16 3v4M3 9h18"/></svg>301 </div>302 <div class="sub">+ Add return</div>303 </div>304 </div>305 </div>306 <!-- Passengers -->307 <div class="field" style="margin-top:26px;">308 <div class="left">309 <div class="field-icon">310 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c1-4 6-5 8-5s7 1 8 5"/></svg>311 </div>312 <div class="text">1 Adult, No discount card</div>313 </div>314 </div>315 </div>316 <div class="cta">Search Omio</div>317 </div>318 319 <!-- How it works -->320 <div class="how">321 <div class="how-inner">322 <h2>How it works</h2>323 324 <div class="step">325 <div class="icon-wrap">326 <div class="circle">327 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"></circle><path d="M21 21l-5-5"/></svg>328 </div>329 <div class="dot-line"></div>330 </div>331 <div>332 <div class="step-title">Search</div>333 <div class="step-desc">Find trains, buses, flights and ferries across Europe, Canada and the US.</div>334 </div>335 </div>336 337 <div class="step">338 <div class="icon-wrap">339 <div class="circle">340 <svg viewBox="0 0 24 24"><path d="M6 4h12l-2 16H8L6 4z"></path><path d="M9 8h6M9 12h6"/></svg>341 </div>342 </div>343 <div>344 <div class="step-title">Compare</div>345 <div class="step-desc">Choose the fastest and cheapest routes from our 1000+ official partners.</div>346 </div>347 </div>348 </div>349 </div>350 351 <!-- Bottom Navigation -->352 <div class="bottom-bar">353 <div class="nav-item active">354 <svg viewBox="0 0 24 24" fill="none" stroke="#8692C0">355 <circle cx="11" cy="11" r="7"></circle>356 <path d="M21 21l-4-4"></path>357 </svg>358 <div class="nav-label">Search</div>359 </div>360 <div class="nav-item">361 <svg viewBox="0 0 24 24" fill="none" stroke="#8692C0">362 <path d="M5 20l2-12h10l2 12H5z"></path>363 <path d="M9 8v-2h6v2"></path>364 </svg>365 <div class="nav-label">Tickets</div>366 </div>367 <div class="nav-item">368 <svg viewBox="0 0 24 24" fill="none" stroke="#8692C0">369 <circle cx="12" cy="7" r="4"></circle>370 <path d="M3 22c2-6 7-7 9-7s7 1 9 7"></path>371 </svg>372 <div class="badge"></div>373 <div class="nav-label">Profile</div>374 </div>375 </div>376 377 <div class="gesture"></div>378 379</div>380</body>381</html>