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; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Header */17 .header {18 background: #0B5AAA;19 color: #fff;20 width: 100%;21 }22 .status-bar {23 height: 90px;24 padding: 0 32px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 font-size: 30px;29 opacity: 0.95;30 }31 .status-icons { display: flex; align-items: center; gap: 26px; }32 .app-bar {33 height: 120px;34 padding: 0 28px;35 display: flex;36 align-items: center;37 gap: 24px;38 }39 .app-title {40 font-size: 46px;41 font-weight: 700;42 letter-spacing: 0.2px;43 }44 45 /* Filters */46 .filters {47 background: #fff;48 padding: 20px 24px;49 border-bottom: 1px solid #e5e5e5;50 }51 .chip-row {52 display: flex;53 gap: 18px;54 flex-wrap: wrap;55 }56 .chip {57 font-size: 28px;58 color: #333;59 background: #f5f5f5;60 border: 1px solid #dcdcdc;61 border-radius: 18px;62 padding: 16px 24px;63 }64 65 /* Route summary */66 .route-card {67 padding: 32px 32px 24px 32px;68 border-bottom: 1px solid #e9e9e9;69 }70 .route-top {71 display: flex;72 justify-content: space-between;73 align-items: center;74 }75 .route-title {76 font-size: 44px;77 font-weight: 700;78 color: #333;79 }80 .route-sub {81 margin-top: 10px;82 font-size: 28px;83 color: #737373;84 }85 86 /* Result cards */87 .result-card {88 margin: 22px 0;89 padding: 24px 32px 28px 32px;90 background: #fff;91 box-shadow: 0 2px 0 #ececec inset;92 }93 .badges { display: flex; gap: 12px; margin-bottom: 12px; }94 .badge {95 font-size: 26px;96 padding: 8px 12px;97 border-radius: 10px;98 font-weight: 600;99 }100 .badge.best { background: #e6f0ff; color: #2d5bd1; }101 .badge.cheapest { background: #dff6e3; color: #41a35c; }102 103 .segment {104 display: flex;105 align-items: center;106 padding: 16px 0;107 border-top: 1px solid #eeeeee;108 }109 .segment:first-of-type { border-top: none; }110 .seg-left, .seg-right {111 width: 320px;112 }113 .seg-center {114 flex: 1;115 text-align: center;116 }117 .time {118 font-size: 42px;119 font-weight: 700;120 color: #222;121 }122 .sub {123 margin-top: 6px;124 font-size: 28px;125 color: #7a7a7a;126 }127 .duration {128 font-size: 28px;129 color: #7a7a7a;130 margin-bottom: 8px;131 }132 .center-line {133 height: 2px;134 background: #e1e1e1;135 margin: 6px 60px;136 }137 .direct {138 font-size: 28px;139 color: #9a9a9a;140 }141 .airline {142 display: flex;143 align-items: center;144 gap: 14px;145 margin-top: 12px;146 color: #4a4a4a;147 font-size: 28px;148 }149 150 /* Price / baggage row */151 .price-row {152 display: flex;153 justify-content: space-between;154 align-items: flex-end;155 padding-top: 22px;156 border-top: 1px solid #eeeeee;157 margin-top: 16px;158 }159 .baggage {160 display: flex;161 align-items: center;162 gap: 18px;163 }164 .bag-text {165 font-size: 30px;166 color: #1877f2;167 margin-top: 6px;168 }169 .price-block {170 text-align: right;171 }172 .price-note {173 color: #9c5a25;174 font-size: 28px;175 margin-bottom: 6px;176 }177 .price {178 font-size: 44px;179 font-weight: 800;180 color: #222;181 }182 .price-sub {183 font-size: 28px;184 color: #8b8b8b;185 margin-top: 4px;186 }187 188 /* Bottom gesture bar */189 .gesture-bar {190 position: absolute;191 bottom: 20px;192 left: 50%;193 transform: translateX(-50%);194 width: 360px;195 height: 14px;196 background: #1a1a1a;197 border-radius: 8px;198 opacity: 0.9;199 }200 201 /* Utility */202 .muted { color: #828282; }203 .icon-btn { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; }204 .pencil { width: 40px; height: 40px; }205</style>206</head>207<body>208<div id="render-target">209 210 <div class="header">211 <div class="status-bar">212 <div>3:38</div>213 <div class="status-icons">214 <!-- simple status icons -->215 <svg width="30" height="30"><circle cx="15" cy="15" r="10" fill="#fff" opacity="0.85"/></svg>216 <svg width="34" height="34"><rect x="4" y="8" width="26" height="18" rx="3" fill="#fff" opacity="0.85"/></svg>217 <svg width="34" height="34"><rect x="6" y="6" width="22" height="22" rx="11" fill="none" stroke="#fff" stroke-width="3"/></svg>218 <svg width="34" height="34"><circle cx="17" cy="17" r="3" fill="#fff"/></svg>219 <svg width="40" height="32" viewBox="0 0 40 32">220 <path d="M4 12h24v10H4z" fill="#fff" opacity="0.9"/>221 <rect x="30" y="8" width="6" height="16" rx="3" fill="#fff"/>222 </svg>223 </div>224 </div>225 <div class="app-bar">226 <div class="icon-btn">227 <svg width="40" height="40" viewBox="0 0 24 24">228 <path d="M15 6L9 12l6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>229 </svg>230 </div>231 <div class="app-title">736 results</div>232 </div>233 </div>234 235 <div class="filters">236 <div class="chip-row">237 <div class="chip">↕ Sort by: Best</div>238 <div class="chip">Stops</div>239 <div class="chip">Duration</div>240 <div class="chip">Flight times</div>241 <div class="chip">Airlines</div>242 </div>243 </div>244 245 <!-- Route summary -->246 <div class="route-card">247 <div class="route-top">248 <div class="route-title">New York ↔ Paris</div>249 <div class="pencil">250 <svg width="40" height="40" viewBox="0 0 24 24">251 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#6b6b6b"/>252 </svg>253 </div>254 </div>255 <div class="route-sub">Tue, Sep 19 – Mon, Sep 25 · 3 adults · Economy</div>256 </div>257 258 <!-- Result card 1 -->259 <div class="result-card">260 <div class="badges">261 <div class="badge best">Best</div>262 <div class="badge cheapest">Cheapest</div>263 </div>264 265 <!-- Outbound segment -->266 <div class="segment">267 <div class="seg-left">268 <div class="time">11:10 PM</div>269 <div class="sub">EWR · Sep 19</div>270 <div class="airline">271 <svg width="28" height="28" viewBox="0 0 24 24">272 <path d="M2 12l8 2 4 8 2-4 6-6-4-2-8 4z" fill="#2ea3e6"/>273 </svg>274 <span>French Bee</span>275 </div>276 </div>277 <div class="seg-center">278 <div class="duration">7h 15m</div>279 <div class="center-line"></div>280 <div class="direct">Direct</div>281 </div>282 <div class="seg-right" style="text-align:right;">283 <div class="time">12:25 PM</div>284 <div class="sub">ORY · Sep 20</div>285 </div>286 </div>287 288 <!-- Return segment -->289 <div class="segment">290 <div class="seg-left">291 <div class="time">7:05 PM</div>292 <div class="sub">ORY · Sep 25</div>293 <div class="airline">294 <svg width="28" height="28" viewBox="0 0 24 24">295 <path d="M2 12l8 2 4 8 2-4 6-6-4-2-8 4z" fill="#2ea3e6"/>296 </svg>297 <span>French Bee</span>298 </div>299 </div>300 <div class="seg-center">301 <div class="duration">8h 10m</div>302 <div class="center-line"></div>303 <div class="direct">Direct</div>304 </div>305 <div class="seg-right" style="text-align:right;">306 <div class="time">9:15 PM</div>307 <div class="sub">EWR · Sep 25</div>308 </div>309 </div>310 311 <div class="price-row">312 <div class="baggage">313 <!-- baggage icons -->314 <svg width="36" height="36" viewBox="0 0 24 24">315 <rect x="6" y="8" width="12" height="10" rx="2" fill="none" stroke="#222" stroke-width="2"/>316 <rect x="9" y="5" width="6" height="3" rx="1" fill="none" stroke="#222" stroke-width="2"/>317 </svg>318 <svg width="36" height="36" viewBox="0 0 24 24">319 <rect x="6" y="9" width="12" height="9" rx="2" fill="none" stroke="#222" stroke-width="2"/>320 <rect x="10" y="5" width="4" height="4" rx="1" fill="none" stroke="#222" stroke-width="2"/>321 </svg>322 <div class="bag-text">View baggage details</div>323 </div>324 <div class="price-block">325 <div class="price-note">3 left at this price on Booking.com</div>326 <div class="price">Rs. 43,293.10</div>327 <div class="price-sub">Rs. 129,879.30 for all travelers</div>328 </div>329 </div>330 </div>331 332 <!-- Result card 2 -->333 <div class="result-card">334 <!-- No badges shown here in screenshot; keep consistent layout -->335 <div class="segment">336 <div class="seg-left">337 <div class="time">11:10 PM</div>338 <div class="sub">EWR · Sep 19</div>339 <div class="airline">340 <svg width="28" height="28" viewBox="0 0 24 24">341 <path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#7BD36D"/>342 </svg>343 <span>Air Caraibes, Operated by French Bee</span>344 </div>345 </div>346 <div class="seg-center">347 <div class="duration">7h 15m</div>348 <div class="center-line"></div>349 <div class="direct">Direct</div>350 </div>351 <div class="seg-right" style="text-align:right;">352 <div class="time">12:25 PM</div>353 <div class="sub">ORY · Sep 20</div>354 </div>355 </div>356 357 <div class="segment">358 <div class="seg-left">359 <div class="time">7:05 PM</div>360 <div class="sub">ORY · Sep 25</div>361 <div class="airline">362 <svg width="28" height="28" viewBox="0 0 24 24">363 <path d="M2 12l8 2 4 8 2-4 6-6-4-2-8 4z" fill="#2ea3e6"/>364 </svg>365 <span>French Bee</span>366 </div>367 </div>368 <div class="seg-center">369 <div class="duration">8h 10m</div>370 <div class="center-line"></div>371 <div class="direct">Direct</div>372 </div>373 <div class="seg-right" style="text-align:right;">374 <div class="time">9:15 PM</div>375 <div class="sub">EWR · Sep 25</div>376 </div>377 </div>378 379 <div class="price-row">380 <div class="baggage">381 <svg width="36" height="36" viewBox="0 0 24 24">382 <rect x="6" y="8" width="12" height="10" rx="2" fill="none" stroke="#222" stroke-width="2"/>383 <rect x="9" y="5" width="6" height="3" rx="1" fill="none" stroke="#222" stroke-width="2"/>384 </svg>385 <svg width="36" height="36" viewBox="0 0 24 24">386 <rect x="6" y="9" width="12" height="9" rx="2" fill="none" stroke="#222" stroke-width="2"/>387 <rect x="10" y="5" width="4" height="4" rx="1" fill="none" stroke="#222" stroke-width="2"/>388 </svg>389 <div class="bag-text">View baggage details</div>390 </div>391 <div class="price-block">392 <div class="price-note">3 left at this price on Booking.com</div>393 <div class="price">Rs. 43,670.83</div>394 <div class="price-sub">Rs. 131,012.48 for all travelers</div>395 </div>396 </div>397 </div>398 399 <div class="gesture-bar"></div>400</div>401</body>402</html>