GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Flight Details UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #f3f3f3;14    border-radius: 28px;15    box-shadow: 0 8px 24px rgba(0,0,0,0.15);16  }17 18  /* Top title area */19  .top-area {20    padding: 40px 48px 24px 48px;21    color: #202124;22  }23  .top-nav {24    display: flex;25    align-items: center;26    gap: 20px;27  }28  .icon-btn {29    width: 64px;30    height: 64px;31    border-radius: 32px;32    display: inline-flex;33    justify-content: center;34    align-items: center;35    cursor: default;36  }37  .icon {38    width: 40px;39    height: 40px;40    fill: #3c4043;41  }42  .title {43    font-size: 48px;44    font-weight: 700;45    margin: 18px 0 22px 0;46  }47 48  .chips {49    display: flex;50    gap: 20px;51  }52  .chip {53    display: inline-flex;54    align-items: center;55    gap: 16px;56    background: #d81b60;57    color: #fff;58    border-radius: 40px;59    padding: 18px 28px;60    font-size: 30px;61    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);62  }63  .chip .icon { fill: #fff; width: 36px; height: 36px; }64 65  /* Bottom sheet */66  .sheet {67    position: absolute;68    left: 24px;69    right: 24px;70    top: 340px;71    height: 1650px;72    background: #fff;73    border-radius: 40px;74    box-shadow: 0 12px 40px rgba(0,0,0,0.2);75  }76  .sheet-header {77    display: flex;78    align-items: center;79    justify-content: space-between;80    padding: 28px 36px;81    border-bottom: 1px solid #eee;82  }83  .sheet-title {84    font-size: 44px;85    font-weight: 700;86    color: #202124;87  }88  .sheet-content {89    padding: 20px 36px 120px 36px;90  }91  .subtitle {92    font-size: 38px;93    color: #3c4043;94    margin: 20px 0 28px 0;95  }96 97  /* Timeline */98  .timeline {99    position: relative;100    display: grid;101    grid-template-columns: 180px 30px 1fr;102    row-gap: 30px;103  }104  .time {105    font-size: 34px;106    color: #5f6368;107    text-align: right;108    padding-top: 12px;109  }110  .line {111    position: relative;112    width: 30px;113  }114  .line::before {115    content: "";116    position: absolute;117    left: 14px;118    top: 0;119    bottom: 0;120    width: 2px;121    background: #333;122  }123  .marker-dot, .marker-circle {124    position: absolute;125    left: 6px;126    width: 16px;127    height: 16px;128    border-radius: 50%;129    background: #333;130  }131  .marker-circle {132    background: #fff;133    border: 2px solid #333;134  }135  .segment-solid {136    position: absolute;137    left: 14px;138    top: 20px;139    width: 2px;140    height: 140px;141    background: #333;142  }143  .segment-dashed {144    position: absolute;145    left: 14px;146    top: 20px;147    width: 2px;148    height: 140px;149    background-image: linear-gradient(#bbb 50%, rgba(255,255,255,0) 0%);150    background-size: 2px 12px;151    background-repeat: repeat-y;152  }153 154  .airport {155    font-size: 40px;156    color: #202124;157    line-height: 1.25;158  }159  .info-card {160    margin-top: 20px;161    background: #f2f2f2;162    border-radius: 24px;163    padding: 26px 28px;164    display: flex;165    align-items: center;166    gap: 18px;167    color: #3c4043;168    font-size: 34px;169  }170  .airline-card {171    margin-top: 20px;172    background: #fff;173    border: 1px solid #e5e5e5;174    border-radius: 24px;175    padding: 24px 28px;176    box-shadow: 0 1px 0 rgba(0,0,0,0.04);177  }178  .airline-row {179    display: flex;180    align-items: center;181    gap: 18px;182    margin-bottom: 18px;183  }184  .img-placeholder {185    width: 72px;186    height: 48px;187    background: #E0E0E0;188    border: 1px solid #BDBDBD;189    display: flex;190    justify-content: center;191    align-items: center;192    color: #757575;193    font-size: 22px;194    border-radius: 6px;195  }196  .bullet-list {197    margin: 0;198    padding-left: 34px;199    color: #6b6f72;200    font-size: 34px;201  }202  .muted {203    color: #6b6f72;204    font-size: 30px;205  }206 207  /* Bottom price bar */208  .bottom-bar {209    position: absolute;210    left: 0;211    right: 0;212    bottom: 0;213    height: 220px;214    background: #ffffff;215    border-top-left-radius: 28px;216    border-top-right-radius: 28px;217    box-shadow: 0 -8px 20px rgba(0,0,0,0.08);218    display: flex;219    align-items: center;220    justify-content: space-between;221    padding: 40px 48px;222  }223  .price {224    font-size: 44px;225    font-weight: 800;226    color: #202124;227  }228  .price .per {229    font-weight: 500;230    color: #6b6f72;231    font-size: 34px;232  }233  .total {234    margin-top: 10px;235    color: #6b6f72;236    font-size: 32px;237  }238  .cta {239    background: #ff007a;240    color: #fff;241    font-size: 40px;242    font-weight: 700;243    border: none;244    border-radius: 26px;245    padding: 26px 60px;246    box-shadow: 0 10px 24px rgba(255,0,122,0.35);247  }248 249  /* Small helper */250  .plus-day {251    font-size: 28px;252    color: #6b6f72;253    margin: 6px 0;254  }255</style>256</head>257<body>258<div id="render-target">259 260  <!-- Top area with title and chips -->261  <div class="top-area">262    <div class="top-nav">263      <div class="icon-btn">264        <svg class="icon" viewBox="0 0 24 24">265          <path d="M15.5 4.5L7 12l8.5 7.5" stroke="#3c4043" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>266        </svg>267      </div>268    </div>269    <div class="title">Sao Paulo - New York</div>270    <div class="chips">271      <div class="chip">272        <svg class="icon" viewBox="0 0 24 24">273          <rect x="3" y="5" width="18" height="16" rx="2" ry="2"></rect>274          <rect x="6" y="2" width="3" height="4"></rect>275          <rect x="15" y="2" width="3" height="4"></rect>276        </svg>277        <span>Tue, 14 Nov</span>278      </div>279      <div class="chip">280        <svg class="icon" viewBox="0 0 24 24">281          <circle cx="12" cy="8.5" r="4.5"></circle>282          <path d="M4 21c0-4.4 4.1-7 8-7s8 2.6 8 7" fill="none" stroke="#fff" stroke-width="2"/>283        </svg>284        <span>2</span>285      </div>286    </div>287  </div>288 289  <!-- Bottom sheet -->290  <div class="sheet">291    <div class="sheet-header">292      <div class="icon-btn">293        <svg class="icon" viewBox="0 0 24 24">294          <path d="M5 5l14 14M19 5L5 19" stroke="#3c4043" stroke-width="2.5" stroke-linecap="round"/>295        </svg>296      </div>297      <div class="sheet-title">Flight details</div>298      <div class="icon-btn">299        <svg class="icon" viewBox="0 0 24 24">300          <circle cx="18" cy="5" r="2.5"></circle>301          <circle cx="6" cy="12" r="2.5"></circle>302          <circle cx="18" cy="19" r="2.5"></circle>303          <path d="M16 6l-8 5m8 7l-8-5" stroke="#3c4043" stroke-width="2" fill="none" stroke-linecap="round"/>304        </svg>305      </div>306    </div>307 308    <div class="sheet-content">309      <div class="subtitle">International</div>310 311      <div class="timeline">312 313        <!-- First flight segment -->314        <div class="time">18:55</div>315        <div class="line">316          <div class="marker-circle" style="top:0;"></div>317          <div class="segment-solid"></div>318        </div>319        <div>320          <div class="airline-card">321            <div class="airline-row">322              <div class="img-placeholder">[IMG: Airline logo - Avianca]</div>323              <div style="font-size:36px; color:#202124; font-weight:600;">Avianca</div>324            </div>325            <ul class="bullet-list">326              <li>Flight AV184</li>327              <li>Economy</li>328            </ul>329          </div>330        </div>331 332        <!-- Connection info at BOG -->333        <div class="time">20:40</div>334        <div class="line">335          <div class="marker-circle" style="top:0;"></div>336          <div class="segment-dashed"></div>337        </div>338        <div>339          <div class="airport">(BOG) Bogota El Dorado</div>340          <div class="info-card">341            <svg class="icon" viewBox="0 0 24 24" style="fill:none;stroke:#6b6f72;stroke-width:2">342              <circle cx="12" cy="12" r="9"></circle>343              <path d="M12 8v8M12 6h.01" stroke-linecap="round"></path>344            </svg>345            <div>Connection time 2h 15m</div>346          </div>347        </div>348 349        <!-- Second flight segment -->350        <div class="time">22:55</div>351        <div class="line">352          <div class="marker-circle" style="top:0;"></div>353          <div class="segment-solid"></div>354        </div>355        <div>356          <div class="airport">(BOG) Bogota El Dorado</div>357          <div class="airline-card">358            <div class="airline-row">359              <div class="img-placeholder">[IMG: Airline logo - Avianca]</div>360              <div style="font-size:36px; color:#202124; font-weight:600;">Avianca</div>361            </div>362            <ul class="bullet-list">363              <li>Flight AV20</li>364              <li>Economy</li>365            </ul>366          </div>367        </div>368 369        <!-- Arrival -->370        <div class="time">371          <div class="plus-day">+1 DAY</div>372          04:55373        </div>374        <div class="line">375          <div class="marker-dot" style="top:0;"></div>376        </div>377        <div>378          <div class="airport">(JFK) New York John F. Kennedy</div>379        </div>380 381      </div>382    </div>383  </div>384 385  <!-- Bottom price and CTA bar -->386  <div class="bottom-bar">387    <div>388      <div class="price">€387.00 <span class="per">/ traveller</span></div>389      <div class="total">€774.00 Total</div>390    </div>391    <button class="cta">Continue</button>392  </div>393 394</div>395</body>396</html>