GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Flight Results UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15 color: #1c2430;16 }17 .status-bar {18 height: 88px;19 padding: 20px 30px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #222;24 font-weight: 600;25 font-size: 36px;26 }27 .status-icons {28 display: flex;29 gap: 24px;30 }31 .header {32 position: relative;33 padding: 18px 32px 24px 32px;34 }35 .header .pill {36 width: 880px;37 margin: 0 auto;38 background: #ECEFF1;39 border-radius: 60px;40 padding: 34px 40px;41 text-align: center;42 box-sizing: border-box;43 }44 .header .title {45 font-size: 40px;46 font-weight: 700;47 letter-spacing: 0.2px;48 }49 .header .subtitle {50 margin-top: 10px;51 font-size: 26px;52 color: #6b778c;53 }54 .icon-btn {55 position: absolute;56 top: 40px;57 width: 64px;58 height: 64px;59 border-radius: 32px;60 display: flex;61 align-items: center;62 justify-content: center;63 color: #4b5b76;64 }65 .icon-back { left: 22px; }66 .icon-share { right: 22px; }67 68 .dates-bar {69 margin-top: 8px;70 border-top: 1px solid #E5E8EC;71 border-bottom: 1px solid #E5E8EC;72 display: flex;73 height: 140px;74 box-sizing: border-box;75 background: #fff;76 }77 .dates-bar .month {78 width: 90px;79 border-right: 1px solid #E5E8EC;80 display: flex;81 align-items: center;82 justify-content: center;83 color: #6b778c;84 font-weight: 600;85 letter-spacing: 2px;86 writing-mode: vertical-rl;87 transform: rotate(180deg);88 font-size: 24px;89 }90 .dates-bar .day {91 flex: 1;92 min-width: 165px;93 display: flex;94 flex-direction: column;95 align-items: center;96 justify-content: center;97 gap: 8px;98 position: relative;99 }100 .dates-bar .day .dow { font-size: 26px; color: #6b778c; }101 .dates-bar .day .price { font-size: 26px; color: #17a35b; font-weight: 700; }102 .dates-bar .day .dash { font-size: 28px; color: #9aa6b2; }103 .dates-bar .day.selected::after {104 content: "";105 height: 6px; width: 70%;106 background: #1976D2;107 position: absolute; bottom: 0; left: 15%;108 border-radius: 6px;109 }110 111 .divider { height: 1px; background: #E9EDF2; }112 113 .flight-card {114 padding: 32px;115 display: grid;116 grid-template-columns: 140px 1fr 240px;117 gap: 24px;118 box-sizing: border-box;119 background: #fff;120 }121 .airline-logo {122 width: 110px; height: 110px;123 background: #E0E0E0;124 border: 1px solid #BDBDBD;125 display: flex; align-items: center; justify-content: center;126 color: #757575; font-size: 22px; border-radius: 8px;127 }128 .airline-name {129 font-size: 30px; color: #3a475a; font-weight: 600;130 margin-bottom: 12px;131 }132 .times {133 display: grid;134 grid-template-columns: 1fr 220px 1fr;135 align-items: center;136 gap: 16px;137 }138 .time-big {139 font-size: 54px; font-weight: 700; letter-spacing: 0.5px;140 }141 .location { font-size: 22px; color: #59667a; margin-top: 6px; }142 .duration {143 text-align: center;144 font-size: 24px; color: #8a95a6;145 }146 .duration .bar {147 height: 8px; background: #C7CDD6; border-radius: 4px; margin: 10px 20px;148 position: relative;149 }150 .duration .bar::after {151 content: "";152 position: absolute; right: 0; top: -6px;153 width: 16px; height: 16px; border-radius: 50%; background: #C7CDD6;154 }155 .tag {156 display: inline-flex; align-items: center; gap: 8px;157 margin-top: 18px;158 border: 1px solid #90CAF9;159 color: #1976D2;160 background: #E3F2FD;161 border-radius: 18px;162 padding: 8px 12px;163 font-size: 24px;164 font-weight: 600;165 width: fit-content;166 }167 .price {168 text-align: right;169 display: flex;170 flex-direction: column;171 justify-content: center;172 }173 .old-price {174 font-size: 26px; color: #A1A8B2; text-decoration: line-through; margin-bottom: 8px;175 }176 .new-price {177 font-size: 42px; font-weight: 800; color: #1d2b3a;178 }179 .plus1 {180 color: #E53935; font-size: 30px; font-weight: 700; margin-left: 6px;181 }182 183 .promo {184 margin: 18px 32px;185 background: #FF7F1E;186 border-radius: 30px;187 padding: 26px;188 display: grid;189 grid-template-columns: 420px 1fr;190 gap: 24px;191 color: #fff;192 align-items: center;193 }194 .promo .img {195 width: 100%; height: 220px;196 background: #E0E0E0;197 border: 1px solid #BDBDBD;198 display: flex; align-items: center; justify-content: center;199 color: #757575; font-size: 24px; border-radius: 20px;200 }201 .promo h3 { font-size: 44px; margin: 0 0 8px 0; }202 .promo p { font-size: 30px; margin: 0 0 18px 0; }203 .promo .btn {204 display: inline-block; padding: 10px 26px; border: 2px solid #fff;205 border-radius: 28px; color: #fff; font-size: 28px; font-weight: 700;206 }207 208 .bottom-bar {209 position: absolute; left: 0; right: 0; bottom: 90px;210 background: #FFFFFF;211 border-top: 1px solid #E5E8EC;212 height: 140px;213 display: grid;214 grid-template-columns: repeat(5, 1fr);215 align-items: center;216 padding: 0 20px;217 box-sizing: border-box;218 }219 .bottom-item {220 display: flex; flex-direction: column; align-items: center; gap: 10px;221 color: #3e4b5f; font-size: 24px; font-weight: 700;222 }223 .toggle {224 width: 100px; height: 56px; border-radius: 28px; background: #ECEFF1;225 position: relative;226 display: flex; align-items: center; justify-content: center;227 color: #7c8796; font-size: 26px; font-weight: 700;228 }229 .gesture {230 position: absolute; left: 50%; transform: translateX(-50%);231 bottom: 24px; width: 360px; height: 12px; background: #0F0F0F; border-radius: 8px;232 opacity: 0.9;233 }234 235 /* Small helper for inline SVG icons */236 .svg { width: 36px; height: 36px; }237</style>238</head>239<body>240<div id="render-target">241 242 <!-- Status bar -->243 <div class="status-bar">244 <div>10:48</div>245 <div class="status-icons">246 <!-- simple signal icon -->247 <svg class="svg" viewBox="0 0 24 24"><path d="M3 17h2v2H3v-2zm4-4h2v6H7v-6zm4-4h2v10h-2V9zm4-4h2v14h-2V5z" fill="#5b6677"/></svg>248 <!-- battery -->249 <svg class="svg" viewBox="0 0 24 24"><path d="M16 4h-1V3h-6v1H8C6.9 4 6 4.9 6 6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z" fill="none" stroke="#5b6677" stroke-width="1.5"/><rect x="9" y="7" width="6" height="10" fill="#5b6677"/></svg>250 </div>251 </div>252 253 <!-- Header with pill and icons -->254 <div class="header">255 <div class="icon-btn icon-back">256 <svg class="svg" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#243447" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>257 </div>258 <div class="pill">259 <div class="title">AMS → BER</div>260 <div class="subtitle">23 Dec • 1 Traveller • Economy</div>261 </div>262 <div class="icon-btn icon-share">263 <svg class="svg" viewBox="0 0 24 24"><path d="M18 8a3 3 0 10-2.9-3.9L7.8 7.2a3.1 3.1 0 000 9.6l7.2 3.1A3 3 0 1016 18a3 3 0 00-.2-1.1l-7.5-3.2a3 3 0 010-3.4l7.5-3.2A3 3 0 0018 8z" fill="#243447"/></svg>264 </div>265 </div>266 267 <!-- Date selector bar -->268 <div class="dates-bar">269 <div class="month">DEC</div>270 <div class="day">271 <div class="dow">Thu, 21</div>272 <div class="price">₹11123</div>273 </div>274 <div class="day">275 <div class="dow">Fri, 22</div>276 <div class="dash">-</div>277 </div>278 <div class="day selected">279 <div class="dow">Sat, 23</div>280 <div class="dash">-</div>281 </div>282 <div class="day">283 <div class="dow">Sun, 24</div>284 <div class="dash">-</div>285 </div>286 <div class="day">287 <div class="dow">Mon, 25</div>288 <div class="dash">-</div>289 </div>290 <div class="day">291 <div class="dow">Tue, 26</div>292 <div class="dash">-</div>293 </div>294 </div>295 296 <!-- First flight card -->297 <div class="flight-card">298 <div class="airline-logo">[IMG: Airline]</div>299 <div>300 <div class="airline-name">Brussels Airlines • SN 4236</div>301 <div class="times">302 <div>303 <div class="time-big">16:43</div>304 <div class="location">AMS</div>305 </div>306 <div class="duration">307 <div>5h 37m</div>308 <div class="bar"></div>309 <div>4 stops</div>310 </div>311 <div style="text-align:right">312 <div class="time-big">22:20<span class="plus1">+1</span></div>313 <div class="location" style="text-align:right">BER</div>314 </div>315 </div>316 <div class="tag">317 <svg class="svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#1976D2" stroke-width="2" fill="none"/><path d="M6 12h12" stroke="#1976D2" stroke-width="2"/></svg>318 Value for money319 </div>320 </div>321 <div class="price">322 <div class="old-price">₹23901</div>323 <div class="new-price">₹23266</div>324 </div>325 </div>326 <div class="divider"></div>327 328 <!-- Second flight -->329 <div class="flight-card">330 <div class="airline-logo">[IMG: Airline]</div>331 <div>332 <div class="airline-name">Brussels Airlines • SN 4246</div>333 <div class="times">334 <div>335 <div class="time-big">21:43</div>336 <div class="location">AMS</div>337 </div>338 <div class="duration">339 <div>13h 22m</div>340 <div class="bar"></div>341 <div>4 stops</div>342 </div>343 <div style="text-align:right">344 <div class="time-big">11:05</div>345 <div class="location" style="text-align:right">BER</div>346 </div>347 </div>348 </div>349 <div class="price">350 <div class="old-price">₹23901</div>351 <div class="new-price">₹23266</div>352 </div>353 </div>354 <div class="divider"></div>355 356 <!-- Third flight -->357 <div class="flight-card">358 <div class="airline-logo">[IMG: Airline]</div>359 <div>360 <div class="airline-name">Brussels Airlines • SN 4218</div>361 <div class="times">362 <div>363 <div class="time-big">07:43</div>364 <div class="location">AMS</div>365 </div>366 <div class="duration">367 <div>14h 37m</div>368 <div class="bar"></div>369 <div>4 stops</div>370 </div>371 <div style="text-align:right">372 <div class="time-big">22:20<span class="plus1">+1</span></div>373 <div class="location" style="text-align:right">BER</div>374 </div>375 </div>376 </div>377 <div class="price">378 <div class="old-price">₹23901</div>379 <div class="new-price">₹23266</div>380 </div>381 </div>382 383 <!-- Promo banner -->384 <div class="promo">385 <div class="img">[IMG: Airplane Illustration]</div>386 <div>387 <h3>Flat 12% Off</h3>388 <p>on 1st Flight</p>389 <span class="btn">Login</span>390 </div>391 </div>392 393 <div class="divider"></div>394 395 <!-- Fourth flight -->396 <div class="flight-card">397 <div class="airline-logo">[IMG: Airline]</div>398 <div>399 <div class="airline-name">Brussels Airlines • SN 4216</div>400 <div class="times">401 <div>402 <div class="time-big">06:43</div>403 <div class="location">AMS</div>404 </div>405 <div class="duration">406 <div>15h 37m</div>407 <div class="bar"></div>408 <div>4 stops</div>409 </div>410 <div style="text-align:right">411 <div class="time-big">22:20<span class="plus1">+1</span></div>412 <div class="location" style="text-align:right">BER</div>413 </div>414 </div>415 </div>416 <div class="price">417 <div class="old-price">₹23901</div>418 <div class="new-price">₹23266</div>419 </div>420 </div>421 <div class="divider"></div>422 423 <!-- Fifth flight -->424 <div class="flight-card">425 <div class="airline-logo">[IMG: Airline]</div>426 <div>427 <div class="airline-name">Brussels Airlines • SN 4236</div>428 <div class="times">429 <div>430 <div class="time-big">16:43</div>431 <div class="location">AMS</div>432 </div>433 <div class="duration">434 <div>18h 22m</div>435 <div class="bar"></div>436 <div>4 stops</div>437 </div>438 <div style="text-align:right">439 <div class="time-big">11:05<span class="plus1">+1</span></div>440 <div class="location" style="text-align:right">BER</div>441 </div>442 </div>443 </div>444 <div class="price">445 <div class="old-price">₹23901</div>446 <div class="new-price">₹23266</div>447 </div>448 </div>449 450 <!-- Bottom filter bar -->451 <div class="bottom-bar">452 <div class="bottom-item">453 <svg class="svg" viewBox="0 0 24 24"><path d="M3 4h18l-7 8v6l-4-2v-4L3 4z" fill="#3e4b5f"/></svg>454 <div>FILTER</div>455 </div>456 <div class="bottom-item">457 <div class="toggle">✕</div>458 <div>NON-STOP</div>459 </div>460 <div class="bottom-item">461 <svg class="svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#3e4b5f" stroke-width="2" fill="none"/><path d="M12 7v6l4 2" stroke="#3e4b5f" stroke-width="2" fill="none" stroke-linecap="round"/></svg>462 <div>TIME</div>463 </div>464 <div class="bottom-item">465 <svg class="svg" viewBox="0 0 24 24"><path d="M2 17h20l-3-10H5L2 17zm5-12h10l1-2H6l1 2z" fill="#3e4b5f"/></svg>466 <div>AIRLINE</div>467 </div>468 <div class="bottom-item">469 <svg class="svg" viewBox="0 0 24 24"><path d="M4 10h16v2H4v-2zm0-6h12v2H4V4zm0 12h8v2H4v-2z" fill="#3e4b5f"/></svg>470 <div>SORT</div>471 </div>472 </div>473 474 <!-- Gesture bar -->475 <div class="gesture"></div>476</div>477</body>478</html>