GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Flight Fare Selection</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    border-radius: 28px;15    box-shadow: 0 20px 40px rgba(0,0,0,0.08);16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17    color: #1f2d3d;18  }19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 24px;23    left: 36px;24    right: 36px;25    height: 48px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #2e2e2e;30    font-size: 28px;31    letter-spacing: 0.4px;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 22px;37  }38  .icon-cloud, .icon-wifi, .icon-battery {39    width: 36px; height: 24px;40  }41 42  /* Close (X) icon */43  .close-wrap {44    position: absolute;45    top: 120px;46    left: 40px;47    width: 48px;48    height: 48px;49    display: flex;50    align-items: center;51    justify-content: center;52  }53  .close-wrap svg { width: 36px; height: 36px; }54  .close-wrap line { stroke: #3b6df5; stroke-width: 4; stroke-linecap: round; }55 56  /* Header section */57  .header {58    position: absolute;59    top: 190px;60    left: 48px;61    right: 48px;62  }63  .title {64    font-size: 52px;65    font-weight: 700;66    margin: 0 0 18px 0;67    letter-spacing: 0.2px;68  }69  .subrow {70    display: flex;71    align-items: center;72    gap: 16px;73    color: #445069;74    font-size: 28px;75  }76  .img-airline {77    width: 36px;78    height: 36px;79    background: #E0E0E0;80    border: 1px solid #BDBDBD;81    display: flex;82    justify-content: center;83    align-items: center;84    color: #757575;85    font-size: 16px;86    border-radius: 6px;87  }88  .details-link {89    margin-top: 18px;90    color: #3b6df5;91    font-size: 28px;92  }93  .divider {94    position: absolute;95    left: 0;96    right: 0;97    height: 1px;98    background: #DADCE0;99    top: 360px;100  }101 102  /* Instruction block */103  .instruction {104    position: absolute;105    top: 392px;106    left: 48px;107    right: 48px;108  }109  .instruction .headline {110    font-size: 36px;111    font-weight: 700;112    margin-bottom: 10px;113  }114  .instruction .sub {115    font-size: 28px;116    color: #6b7280;117  }118 119  /* Fare cards container */120  .cards {121    position: absolute;122    top: 540px;123    left: 36px;124    right: 36px;125    height: 1460px;126    display: flex;127    gap: 28px;128  }129  .fare-card {130    flex: 0 0 920px;131    border: 1px solid #E5E7EB;132    border-radius: 24px;133    background: #fff;134    box-shadow: 0 6px 16px rgba(0,0,0,0.06);135    padding: 44px;136    position: relative;137  }138  .peek-card {139    flex: 0 0 280px;140    border: 1px solid #E5E7EB;141    border-radius: 24px;142    background: #fafafa;143  }144 145  .price {146    font-size: 64px;147    font-weight: 800;148    letter-spacing: 0.4px;149  }150  .price-sub {151    margin-top: 6px;152    color: #6b7280;153    font-size: 26px;154  }155  .fare-name {156    margin-top: 30px;157    font-size: 34px;158    font-weight: 700;159  }160  .fare-cabin {161    font-size: 28px;162    color: #4b5563;163    margin-top: 6px;164  }165 166  .features {167    margin-top: 26px;168  }169  .feature {170    display: flex;171    align-items: center;172    gap: 16px;173    font-size: 28px;174    color: #1f2d3d;175    margin: 12px 0;176  }177  .feature .icon-dot {178    width: 22px; height: 22px;179  }180  .feature .xmark {181    font-size: 32px;182    color: #6b7280;183    width: 22px;184    display: inline-flex;185    justify-content: center;186  }187  .show-more {188    margin-top: 8px;189    color: #3b6df5;190    font-size: 28px;191  }192 193  .rule {194    height: 1px;195    background: #E5E7EB;196    margin: 40px 0 28px 0;197  }198 199  .carry-row {200    display: flex;201    justify-content: space-between;202    align-items: center;203    font-size: 30px;204    color: #374151;205    padding-bottom: 8px;206  }207  .carry-row .right {208    color: #374151;209  }210 211  .protection {212    display: flex;213    align-items: center;214    justify-content: space-between;215    margin-top: 28px;216  }217  .left-block {218    display: flex;219    align-items: center;220    gap: 16px;221  }222  .shield {223    width: 28px; height: 28px;224  }225  .prot-text {226    display: flex;227    flex-direction: column;228  }229  .prot-title {230    font-size: 28px;231    font-weight: 700;232  }233  .prot-link {234    font-size: 26px;235    color: #3b6df5;236    margin-top: 6px;237  }238  .prot-price {239    font-size: 28px;240    color: #374151;241    margin-right: 18px;242  }243 244  .toggle {245    width: 114px;246    height: 56px;247    background: #9aa0a6;248    border-radius: 28px;249    position: relative;250    display: inline-flex;251    align-items: center;252    padding: 4px;253  }254  .toggle .knob {255    width: 48px;256    height: 48px;257    background: #e5e7eb;258    border: 1px solid #cfd3da;259    border-radius: 50%;260    position: absolute;261    left: 6px;262    top: 4px;263    display: flex;264    align-items: center;265    justify-content: center;266    color: #6b7280;267    font-size: 26px;268    font-weight: 600;269  }270 271  .select-btn {272    position: absolute;273    left: 44px;274    right: 44px;275    bottom: 40px;276    height: 96px;277    background: #3b6df5;278    color: white;279    border-radius: 18px;280    display: flex;281    align-items: center;282    justify-content: center;283    font-size: 32px;284    font-weight: 700;285    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.2);286  }287 288  /* Home indicator */289  .home-indicator {290    position: absolute;291    bottom: 22px;292    left: 50%;293    transform: translateX(-50%);294    width: 240px;295    height: 10px;296    background: #1c1c1c;297    border-radius: 8px;298    opacity: 0.18;299  }300</style>301</head>302<body>303<div id="render-target">304 305  <!-- Status bar -->306  <div class="status-bar">307    <div>4:08</div>308    <div class="status-icons">309      <!-- Cloud icon -->310      <svg class="icon-cloud" viewBox="0 0 36 24">311        <path d="M10 16c-4 0-6-2-6-5s3-5 6-5c1.6-3 4.3-4 7-4 4.7 0 8 3.3 8 8 2 0 5 1.5 5 4s-2 5-6 5H10z" fill="#7c8899"></path>312      </svg>313      <!-- WiFi icon -->314      <svg class="icon-wifi" viewBox="0 0 36 24">315        <path d="M18 18c1.2 0 2.2 1 2.2 2.2S19.2 22.4 18 22.4s-2.2-1-2.2-2.2 1-2.2 2.2-2.2zm-7-5c4.6-4.6 12.4-4.6 17 0" stroke="#4b5563" stroke-width="2" fill="none" stroke-linecap="round"/>316        <path d="M6 9c6.6-6.6 17.4-6.6 24 0" stroke="#4b5563" stroke-width="2" fill="none" stroke-linecap="round"/>317      </svg>318      <!-- Battery icon -->319      <svg class="icon-battery" viewBox="0 0 36 24">320        <rect x="2" y="6" width="28" height="12" rx="2" ry="2" stroke="#4b5563" fill="none" stroke-width="2"/>321        <rect x="4" y="8" width="20" height="8" fill="#4b5563"/>322        <rect x="30" y="9" width="4" height="6" rx="1" fill="#4b5563"/>323      </svg>324    </div>325  </div>326 327  <!-- Close icon -->328  <div class="close-wrap">329    <svg viewBox="0 0 36 36">330      <line x1="6" y1="6" x2="30" y2="30"></line>331      <line x1="30" y1="6" x2="6" y2="30"></line>332    </svg>333  </div>334 335  <!-- Header -->336  <div class="header">337    <h1 class="title">Abu Dhabi to Mumbai</h1>338    <div class="subrow">339      <div class="img-airline">[IMG: Airline logo]</div>340      <div>Etihad Airways · Sat, Jul 22</div>341    </div>342    <div class="details-link">Show details</div>343  </div>344  <div class="divider"></div>345 346  <!-- Instruction -->347  <div class="instruction">348    <div class="headline">Select your fare to Mumbai</div>349    <div class="sub">Your selection applies to each traveler and all flights</div>350  </div>351 352  <!-- Cards -->353  <div class="cards">354    <div class="fare-card">355      <div class="price">$246</div>356      <div class="price-sub">$492.10 roundtrip for 2 travelers</div>357 358      <div class="fare-name">Economy Hbo</div>359      <div class="fare-cabin">Cabin: Economy</div>360 361      <div class="features">362        <div class="feature">363          <svg class="icon-dot" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9" fill="#6b7280"/></svg>364          <span>Seat choice</span>365        </div>366        <div class="feature">367          <span class="xmark">×</span>368          <span>Cancellation</span>369        </div>370        <div class="feature">371          <svg class="icon-dot" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9" fill="#6b7280"/></svg>372          <span>Changes</span>373        </div>374        <div class="show-more">Show more</div>375      </div>376 377      <div class="rule"></div>378 379      <div class="carry-row">380        <div>Carry-on:</div>381        <div class="right">Included up to 15 lb</div>382      </div>383 384      <div class="rule"></div>385 386      <div class="protection">387        <div class="left-block">388          <svg class="shield" viewBox="0 0 28 28">389            <path d="M14 2l9 4v7c0 6-5 10-9 13-4-3-9-7-9-13V6l9-4z" fill="#23395d"/>390          </svg>391          <div class="prot-text">392            <div class="prot-title">Price Drop Protection</div>393            <div class="prot-link">How it works</div>394          </div>395        </div>396        <div style="display:flex; align-items:center; gap:14px;">397          <div class="prot-price">$10</div>398          <div class="toggle">399            <div class="knob">×</div>400          </div>401        </div>402      </div>403 404      <div class="select-btn">Select</div>405    </div>406 407    <!-- Partial second card to the right -->408    <div class="peek-card"></div>409  </div>410 411  <!-- Home indicator -->412  <div class="home-indicator"></div>413 414</div>415</body>416</html>