GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Flight Details - Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f6f6f7;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #262626;17 }18 19 /* Top app area behind the sheet */20 .top-area {21 padding: 36px 48px 24px 48px;22 }23 .status-bar {24 height: 60px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #5f5f5f;29 font-size: 28px;30 }31 .header-row {32 margin-top: 16px;33 display: flex;34 align-items: center;35 gap: 20px;36 }37 .icon-btn {38 width: 64px;39 height: 64px;40 border-radius: 32px;41 display: flex;42 align-items: center;43 justify-content: center;44 color: #444;45 }46 .page-title {47 font-weight: 700;48 font-size: 48px;49 flex: 1;50 color: #2c2c2c;51 }52 .pill-row {53 margin-top: 24px;54 display: flex;55 gap: 16px;56 }57 .pill {58 display: inline-flex;59 align-items: center;60 gap: 16px;61 background: #f6d2e7;62 color: #b10268;63 padding: 20px 28px;64 border-radius: 40px;65 font-size: 32px;66 font-weight: 600;67 }68 .pill svg { width: 36px; height: 36px; }69 70 /* Bottom sheet */71 .sheet {72 position: absolute;73 left: 0;74 right: 0;75 top: 260px;76 background: #ffffff;77 border-top-left-radius: 40px;78 border-top-right-radius: 40px;79 box-shadow: 0 -8px 24px rgba(0,0,0,0.08);80 }81 .sheet-header {82 height: 120px;83 display: flex;84 align-items: center;85 justify-content: space-between;86 padding: 0 40px;87 border-bottom: 1px solid #eee;88 }89 .sheet-title {90 font-size: 40px;91 font-weight: 700;92 color: #2e2e2e;93 }94 .sheet-header .icon {95 width: 60px;96 height: 60px;97 border-radius: 30px;98 display: flex;99 align-items: center;100 justify-content: center;101 color: #5a5a5a;102 }103 .sheet-content {104 padding: 36px 48px 300px 48px;105 }106 107 .label-row {108 display: flex;109 align-items: center;110 gap: 16px;111 color: #9ea2a7;112 text-transform: uppercase;113 letter-spacing: 0.5px;114 font-weight: 700;115 font-size: 28px;116 margin-bottom: 10px;117 }118 .main-date {119 font-size: 52px;120 font-weight: 800;121 margin: 6px 0 8px 0;122 color: #292929;123 }124 .sub-route {125 font-size: 32px;126 color: #7c7f84;127 margin-bottom: 24px;128 }129 130 /* Flight card */131 .flight-card {132 background: #ffffff;133 border: 1px solid #ebebeb;134 border-radius: 28px;135 box-shadow: 0 6px 12px rgba(0,0,0,0.04);136 padding: 32px;137 }138 .card-top {139 display: flex;140 justify-content: space-between;141 align-items: flex-start;142 gap: 20px;143 }144 .route-times {145 font-size: 40px;146 font-weight: 800;147 color: #2a2a2a;148 }149 .route-airports {150 font-size: 30px;151 color: #7a7a7a;152 margin-top: 4px;153 }154 .stops {155 text-align: right;156 font-size: 30px;157 color: #5a5a5a;158 }159 .stops .dur { color: #8a8a8a; font-size: 28px; margin-top: 6px; }160 .divider {161 height: 1px;162 background: #eee;163 margin: 24px 0;164 }165 166 /* Timeline */167 .timeline {168 position: relative;169 display: grid;170 grid-template-columns: 170px 60px 1fr;171 row-gap: 36px;172 }173 .timeline .vline {174 position: absolute;175 left: 240px; /* centers within column 2 */176 top: 16px;177 width: 4px;178 height: calc(100% - 40px);179 background: #222;180 border-radius: 4px;181 }182 .t-row {183 display: contents;184 }185 .t-time {186 font-size: 30px;187 color: #4a4a4a;188 align-self: center;189 }190 .t-dot {191 align-self: center;192 width: 18px;193 height: 18px;194 border-radius: 50%;195 background: #2c2c2c;196 margin-left: 18px;197 }198 .t-dot.small {199 background: #ffffff;200 border: 3px solid #1c1c1c;201 }202 .t-text {203 font-size: 34px;204 color: #2e2e2e;205 line-height: 1.2;206 }207 208 .airline-box {209 margin-top: 20px;210 border: 1px solid #e8e8e8;211 border-radius: 24px;212 padding: 24px;213 display: flex;214 gap: 18px;215 align-items: flex-start;216 background: #fbfbfb;217 }218 .img-ph {219 width: 64px;220 height: 64px;221 background: #E0E0E0;222 border: 1px solid #BDBDBD;223 display: flex;224 align-items: center;225 justify-content: center;226 color: #757575;227 font-size: 20px;228 border-radius: 12px;229 flex-shrink: 0;230 }231 .airline-box ul {232 margin: 4px 0 0 0;233 padding-left: 22px;234 color: #666;235 font-size: 30px;236 }237 .airline-box .name {238 font-size: 32px;239 font-weight: 700;240 color: #2d2d2d;241 }242 243 .connection {244 margin-top: 20px;245 background: #f2f2f3;246 border-radius: 20px;247 padding: 22px 26px;248 color: #6a6a6a;249 font-size: 30px;250 display: inline-flex;251 align-items: center;252 gap: 16px;253 border: 1px solid #e6e6e6;254 }255 .connection .ic {256 width: 36px; height: 36px; border-radius: 18px; background: #fff;257 border: 1px solid #d0d0d0; display: flex; align-items: center; justify-content: center; color: #888; font-weight: 700;258 }259 260 /* Bottom bar */261 .bottom-bar {262 position: absolute;263 left: 0; right: 0; bottom: 90px;264 background: #ffffff;265 border-top: 1px solid #eaeaea;266 box-shadow: 0 -12px 24px rgba(0,0,0,0.06);267 padding: 30px 40px;268 display: flex;269 align-items: center;270 justify-content: space-between;271 }272 .price-info {273 font-size: 40px;274 font-weight: 800;275 color: #1c1c1c;276 }277 .price-info span {278 font-size: 36px;279 font-weight: 500;280 color: #6d6d6d;281 }282 .price-sub {283 font-size: 30px;284 color: #8b8b8b;285 margin-top: 8px;286 }287 .cta {288 background: #ff0a8b;289 color: #fff;290 font-weight: 800;291 font-size: 36px;292 padding: 28px 48px;293 border-radius: 24px;294 box-shadow: 0 8px 18px rgba(255,10,139,0.35);295 }296 297 /* Home indicator */298 .home-indicator {299 position: absolute;300 left: 50%;301 transform: translateX(-50%);302 bottom: 24px;303 width: 240px;304 height: 10px;305 background: #000;306 opacity: 0.12;307 border-radius: 10px;308 }309 310 /* Simple SVG icon styles */311 svg { display: block; }312 .chev {313 width: 36px; height: 36px;314 }315</style>316</head>317<body>318<div id="render-target">319 320 <!-- Area above the sheet -->321 <div class="top-area">322 <div class="status-bar">323 <div>9:46</div>324 <div>• • •</div>325 <div>79%</div>326 </div>327 328 <div class="header-row">329 <div class="icon-btn">330 <svg class="chev" viewBox="0 0 24 24">331 <path d="M15 4 L7 12 L15 20" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>332 </svg>333 </div>334 <div class="page-title">Sao Paulo - New York</div>335 <div style="width:64px"></div>336 </div>337 338 <div class="pill-row">339 <div class="pill">340 <svg viewBox="0 0 24 24">341 <rect x="3" y="4" width="18" height="16" rx="3" ry="3" fill="#b10268"/>342 <rect x="6" y="9" width="12" height="9" fill="#fff"/>343 </svg>344 <span>Tue, 14 Nov</span>345 </div>346 <div class="pill">347 <svg viewBox="0 0 24 24">348 <circle cx="12" cy="8" r="4" fill="#b10268"/>349 <path d="M4 22 C4 16, 20 16, 20 22 Z" fill="#b10268"/>350 </svg>351 <span>2</span>352 </div>353 </div>354 </div>355 356 <!-- Bottom sheet -->357 <div class="sheet">358 <div class="sheet-header">359 <div class="icon">360 <svg viewBox="0 0 24 24">361 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#333" stroke-width="2.5" stroke-linecap="round"/>362 </svg>363 </div>364 <div class="sheet-title">Flight details</div>365 <div class="icon">366 <svg viewBox="0 0 24 24">367 <path d="M4 12 L10 8 L10 16 Z M14 6 L20 6 L20 12 L14 12 Z" fill="#333"/>368 </svg>369 </div>370 </div>371 372 <div class="sheet-content">373 <div class="label-row">374 <svg viewBox="0 0 24 24" width="32" height="32">375 <path d="M2 13 L22 13 M12 4 L16 10 L8 10 Z" stroke="#9ea2a7" fill="none" stroke-width="2" stroke-linecap="round"/>376 </svg>377 <span>Departing flight</span>378 </div>379 380 <div class="main-date">Tuesday, 14 November</div>381 <div class="sub-route">From Sao Paulo to New York</div>382 383 <div class="flight-card">384 <div class="card-top">385 <div>386 <div class="route-times">16:35 - 04:55+1</div>387 <div class="route-airports">GRU - JFK</div>388 </div>389 <div class="stops">390 <div>1 stop</div>391 <div class="dur">14h 20m</div>392 </div>393 <div class="icon">394 <svg viewBox="0 0 24 24" class="chev">395 <path d="M6 15 L12 9 L18 15" stroke="#444" stroke-width="2.5" fill="none" stroke-linecap="round"/>396 </svg>397 </div>398 </div>399 400 <div class="divider"></div>401 402 <div class="timeline">403 <div class="vline"></div>404 405 <!-- Row 1 -->406 <div class="t-row">407 <div class="t-time">16:35</div>408 <div class="t-dot"></div>409 <div class="t-text">(GRU) Sao Paulo Guarulhos International410 <div class="airline-box">411 <div class="img-ph">[IMG: Airline]</div>412 <div>413 <div class="name">Avianca</div>414 <ul>415 <li>Flight AV184</li>416 <li>Economy</li>417 </ul>418 </div>419 </div>420 </div>421 </div>422 423 <!-- Row 2 -->424 <div class="t-row">425 <div class="t-time">20:40</div>426 <div class="t-dot small"></div>427 <div class="t-text">(BOG) Bogota El Dorado428 <div class="connection">429 <div class="ic">i</div>430 Connection time 2h 15m431 </div>432 </div>433 </div>434 435 <!-- Row 3 -->436 <div class="t-row">437 <div class="t-time">22:55</div>438 <div class="t-dot small"></div>439 <div class="t-text">(BOG) Bogota El Dorado440 <div class="airline-box">441 <div class="img-ph">[IMG: Airline]</div>442 <div>443 <div class="name">Avianca</div>444 <ul>445 <li>Flight AV20</li>446 <li>Economy</li>447 </ul>448 </div>449 </div>450 </div>451 </div>452 </div>453 </div>454 455 </div>456 457 <!-- Bottom purchase bar -->458 <div class="bottom-bar">459 <div>460 <div class="price-info">€387.00 <span>/ traveller</span></div>461 <div class="price-sub">€774.00 Total</div>462 </div>463 <div class="cta">Continue</div>464 </div>465 </div>466 467 <div class="home-indicator"></div>468</div>469</body>470</html>