GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Flight Results Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 color: #1f1f1f;16 }17 18 /* Header */19 .header {20 background: #0D47A1;21 color: #fff;22 height: 240px;23 padding: 24px 36px 0 36px;24 box-sizing: border-box;25 }26 .status-bar {27 display: flex;28 justify-content: space-between;29 align-items: center;30 font-size: 34px;31 opacity: 0.95;32 }33 .status-right svg { margin-left: 18px; }34 .title-row {35 display: flex;36 align-items: center;37 margin-top: 28px;38 }39 .title-row .back {40 width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;41 margin-right: 22px;42 }43 .title-row .title {44 font-size: 46px;45 font-weight: 600;46 letter-spacing: 0.2px;47 }48 49 /* Filters */50 .filters {51 background: #ffffff;52 padding: 22px 24px;53 border-bottom: 1px solid #e6e6e6;54 }55 .chip-row {56 display: flex;57 gap: 18px;58 flex-wrap: nowrap;59 }60 .chip {61 border: 1px solid #d6d6d6;62 color: #4f4f4f;63 font-size: 30px;64 border-radius: 18px;65 padding: 16px 22px;66 background: #f8f8f8;67 display: inline-flex;68 align-items: center;69 gap: 12px;70 }71 72 /* Search summary */73 .summary {74 position: relative;75 padding: 28px 36px 26px 36px;76 background: #ffffff;77 border-bottom: 10px solid #f0f0f0;78 }79 .route-line {80 font-size: 38px;81 }82 .route-line .code { font-weight: 700; }83 .summary .meta {84 margin-top: 10px;85 color: #6b6b6b;86 font-size: 30px;87 }88 .summary .edit {89 position: absolute;90 right: 36px;91 top: 36px;92 opacity: 0.7;93 }94 95 /* Cards */96 .card {97 background: #ffffff;98 padding: 26px 36px 14px 36px;99 box-sizing: border-box;100 border-bottom: 10px solid #f0f0f0;101 }102 .badge {103 background: #e8f1ff;104 color: #2a6adf;105 padding: 8px 14px;106 font-size: 26px;107 border-radius: 8px;108 display: inline-block;109 margin-bottom: 8px;110 }111 .times-row {112 display: grid;113 grid-template-columns: 290px 1fr 290px;114 align-items: center;115 column-gap: 20px;116 margin-top: 8px;117 }118 .time-block {119 font-size: 44px;120 font-weight: 700;121 }122 .time-sub {123 font-size: 28px;124 color: #6b6b6b;125 margin-top: 4px;126 }127 128 .timeline {129 position: relative;130 height: 96px;131 }132 .timeline .dur {133 position: absolute;134 top: -6px;135 left: 50%;136 transform: translateX(-50%);137 font-size: 28px;138 color: #6b6b6b;139 }140 .timeline .bar {141 position: absolute;142 top: 40px;143 left: 10px;144 right: 10px;145 height: 3px;146 background: #dcdcdc;147 border-radius: 3px;148 }149 .timeline .dot {150 position: absolute;151 top: 33px;152 left: 50%;153 transform: translateX(-50%);154 width: 16px; height: 16px; border-radius: 50%;155 background: #bdbdbd;156 }157 .timeline .stops {158 position: absolute;159 top: 60px;160 left: 50%;161 transform: translateX(-50%);162 font-size: 28px;163 color: #7a7a7a;164 }165 166 .transfer {167 margin-top: 10px;168 color: #a8551a;169 font-size: 30px;170 display: flex;171 align-items: center;172 gap: 10px;173 }174 175 .airlines {176 margin-top: 18px;177 display: flex;178 align-items: center;179 gap: 14px;180 color: #404040;181 font-size: 30px;182 }183 .badge-circle {184 width: 42px; height: 42px; border-radius: 50%;185 display: inline-flex; align-items: center; justify-content: center;186 color: #fff; font-weight: 700; font-size: 26px;187 }188 .t-green { background: #2fa56b; }189 .e-orange { background: #f07c2d; }190 .v-yellow { background: #f1d447; color: #333; font-weight: 600; }191 192 .price-row {193 margin-top: 24px;194 display: grid;195 grid-template-columns: 1fr 1fr;196 align-items: flex-end;197 column-gap: 20px;198 }199 .bag-info {200 display: flex;201 align-items: center;202 gap: 14px;203 color: #6b6b6b;204 font-size: 28px;205 }206 .price-side {207 text-align: right;208 }209 .price-side .amount {210 font-size: 46px;211 font-weight: 700;212 }213 .price-side .sub {214 color: #6b6b6b;215 font-size: 26px;216 margin-top: 2px;217 }218 219 /* Small icons */220 .icon {221 width: 34px; height: 34px;222 }223 224 /* Bottom gesture bar */225 .gesture {226 position: absolute;227 bottom: 24px;228 left: 50%;229 transform: translateX(-50%);230 width: 320px;231 height: 10px;232 background: #000;233 opacity: 0.75;234 border-radius: 10px;235 }236</style>237</head>238<body>239<div id="render-target">240 241 <!-- Header -->242 <div class="header">243 <div class="status-bar">244 <div>1:35</div>245 <div class="status-right">246 <!-- simple status icons -->247 <svg class="icon" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><circle cx="5" cy="12" r="3"/></svg>248 <svg class="icon" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><rect x="3" y="4" width="14" height="16" rx="2"/><rect x="7" y="1" width="6" height="4" rx="1"/></svg>249 <svg class="icon" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><circle cx="12" cy="12" r="3"/><circle cx="12" cy="3" r="2"/><circle cx="12" cy="21" r="2"/></svg>250 <svg class="icon" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><path d="M20 8a8 8 0 1 1-16 0" stroke="#fff" stroke-width="2" fill="none"/><circle cx="20" cy="4" r="2" fill="#fff"/></svg>251 </div>252 </div>253 <div class="title-row">254 <div class="back">255 <svg width="40" height="40" viewBox="0 0 24 24" fill="none"><path d="M15 4L7 12l8 8" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>256 </div>257 <div class="title">26 results</div>258 </div>259 </div>260 261 <!-- Filters -->262 <div class="filters">263 <div class="chip-row">264 <div class="chip">265 <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><path d="M7 5h10M5 12h14M7 19h10" stroke="#616161" stroke-width="2" stroke-linecap="round"/></svg>266 <span>Sort by: Best</span>267 </div>268 <div class="chip">Stops</div>269 <div class="chip">Duration</div>270 <div class="chip">Flight times</div>271 <div class="chip">Airlines</div>272 </div>273 </div>274 275 <!-- Search summary -->276 <div class="summary">277 <div class="route-line">278 <span class="code">RTM</span> Rotterdam → <span class="code">AMS</span> Amsterdam279 </div>280 <div class="meta">Sun, Dec 17 · 1 adult · Economy</div>281 <div class="edit">282 <svg width="40" height="40" viewBox="0 0 24 24" fill="none"><path d="M3 17l1 4 4-1 10-10-4-4L3 17z" stroke="#374151" stroke-width="1.6" fill="none"/></svg>283 </div>284 </div>285 286 <!-- Card 1 -->287 <div class="card">288 <div class="badge">Best</div>289 290 <div class="times-row">291 <div>292 <div class="time-block">1:20 PM</div>293 <div class="time-sub">RTM · Dec 17</div>294 </div>295 296 <div class="timeline">297 <div class="dur">5h 5m</div>298 <div class="bar"></div>299 <div class="dot"></div>300 <div class="stops">1 stop</div>301 </div>302 303 <div style="text-align:right;">304 <div class="time-block">6:25 PM</div>305 <div class="time-sub">AMS · Dec 17</div>306 </div>307 </div>308 309 <div class="transfer">310 <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#a8551a" stroke-width="2"/><path d="M12 7v6" stroke="#a8551a" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="16.5" r="1.2" fill="#a8551a"/></svg>311 <span>Self transfer</span>312 </div>313 314 <div class="airlines">315 <span class="badge-circle t-green">t</span>316 <span class="badge-circle e-orange">e</span>317 <span>Transavia Airlines, Easyjet</span>318 </div>319 320 <div class="price-row">321 <div class="bag-info">322 <svg width="30" height="30" viewBox="0 0 24 24" fill="none">323 <rect x="4" y="8" width="16" height="12" rx="2" stroke="#6b6b6b" stroke-width="2"/>324 <path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"/>325 </svg>326 <span>Baggage included: personal item</span>327 </div>328 <div class="price-side">329 <div class="amount">Rs. 17,639.97330 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" style="vertical-align: middle; margin-left:8px;">331 <circle cx="12" cy="12" r="10" stroke="#777" stroke-width="2"/>332 <path d="M12 8h.01M12 11v5" stroke="#777" stroke-width="2" stroke-linecap="round"/>333 </svg>334 </div>335 <div class="sub">Total</div>336 </div>337 </div>338 </div>339 340 <!-- Card 2 -->341 <div class="card">342 <div class="times-row">343 <div>344 <div class="time-block">7:20 AM</div>345 <div class="time-sub">RTM · Dec 17</div>346 </div>347 348 <div class="timeline">349 <div class="dur">6h 30m</div>350 <div class="bar"></div>351 <div class="dot"></div>352 <div class="stops">1 stop</div>353 </div>354 355 <div style="text-align:right;">356 <div class="time-block">1:50 PM</div>357 <div class="time-sub">AMS · Dec 17</div>358 </div>359 </div>360 361 <div class="transfer">362 <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#a8551a" stroke-width="2"/><path d="M12 7v6" stroke="#a8551a" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="16.5" r="1.2" fill="#a8551a"/></svg>363 <span>Self transfer</span>364 </div>365 366 <div class="airlines">367 <span class="badge-circle t-green">t</span>368 <span class="badge-circle v-yellow">v</span>369 <span>Transavia Airlines, Vueling</span>370 </div>371 372 <div class="price-row">373 <div class="bag-info">374 <svg width="30" height="30" viewBox="0 0 24 24" fill="none">375 <rect x="4" y="8" width="16" height="12" rx="2" stroke="#6b6b6b" stroke-width="2"/>376 <path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"/>377 </svg>378 <span>Baggage included: personal item</span>379 </div>380 <div class="price-side">381 <div class="amount">Rs. 19,927.54382 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" style="vertical-align: middle; margin-left:8px;">383 <circle cx="12" cy="12" r="10" stroke="#777" stroke-width="2"/>384 <path d="M12 8h.01M12 11v5" stroke="#777" stroke-width="2" stroke-linecap="round"/>385 </svg>386 </div>387 <div class="sub">Total</div>388 </div>389 </div>390 </div>391 392 <!-- Card 3 -->393 <div class="card">394 <div class="times-row">395 <div>396 <div class="time-block">1:20 PM</div>397 <div class="time-sub">RTM · Dec 17</div>398 </div>399 400 <div class="timeline">401 <div class="dur">8h</div>402 <div class="bar"></div>403 <div class="dot"></div>404 <div class="stops">1 stop</div>405 </div>406 407 <div style="text-align:right;">408 <div class="time-block">9:20 PM</div>409 <div class="time-sub">AMS · Dec 17</div>410 </div>411 </div>412 413 <div class="transfer">414 <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#a8551a" stroke-width="2"/><path d="M12 7v6" stroke="#a8551a" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="16.5" r="1.2" fill="#a8551a"/></svg>415 <span>Self transfer</span>416 </div>417 418 <div class="airlines">419 <span class="badge-circle t-green">t</span>420 <span class="badge-circle e-orange">e</span>421 <span>Transavia Airlines, Easyjet</span>422 </div>423 424 <div class="price-row">425 <div class="bag-info">426 <svg width="30" height="30" viewBox="0 0 24 24" fill="none">427 <rect x="4" y="8" width="16" height="12" rx="2" stroke="#6b6b6b" stroke-width="2"/>428 <path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"/>429 </svg>430 <span>Baggage included: personal item</span>431 </div>432 <div class="price-side">433 <div class="amount">Rs. 19,927.54434 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" style="vertical-align: middle; margin-left:8px;">435 <circle cx="12" cy="12" r="10" stroke="#777" stroke-width="2"/>436 <path d="M12 8h.01M12 11v5" stroke="#777" stroke-width="2" stroke-linecap="round"/>437 </svg>438 </div>439 <div class="sub">Total</div>440 </div>441 </div>442 </div>443 444 <div class="gesture"></div>445</div>446</body>447</html>