GD-ML/AndroidCode

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>Ticket Options UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #222;14  }15  #render-target {16    position: relative;17    width: 1080px;18    height: 2400px;19    overflow: hidden;20    background: linear-gradient(180deg, #E26723 0%, #EA8040 18%, #F3A66B 32%, #F6B987 45%, #F4D7C2 60%, #F5F5F5 70%, #F5F5F5 100%);21    border-radius: 0;22    box-shadow: none;23  }24 25  /* Status bar */26  .status-bar {27    position: absolute;28    top: 24px;29    left: 36px;30    right: 36px;31    height: 48px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    color: rgba(255,255,255,0.95);36    font-size: 30px;37    letter-spacing: 0.5px;38  }39  .status-left {40    display: flex;41    align-items: center;42    gap: 18px;43  }44  .status-right {45    display: flex;46    align-items: center;47    gap: 22px;48  }49  .status-icon {50    width: 34px;51    height: 34px;52    display: inline-flex;53    align-items: center;54    justify-content: center;55  }56 57  /* Top header */58  .top-bar {59    position: absolute;60    top: 100px;61    left: 24px;62    right: 24px;63    height: 80px;64    display: flex;65    align-items: center;66    justify-content: center;67  }68  .back-btn {69    position: absolute;70    left: 8px;71    width: 72px;72    height: 72px;73    display: flex;74    align-items: center;75    justify-content: center;76  }77  .title {78    font-size: 48px;79    font-weight: 600;80    color: rgba(255,255,255,0.92);81  }82 83  /* Journey summary card */84  .journey-card {85    position: absolute;86    top: 220px;87    left: 36px;88    right: 36px;89    background: rgba(255,255,255,0.8);90    backdrop-filter: blur(2px);91    border-radius: 36px;92    padding: 36px 40px;93    box-shadow: 0 6px 12px rgba(0,0,0,0.06);94  }95  .journey-title {96    font-size: 42px;97    font-weight: 800;98    color: #1d1d1d;99    margin-bottom: 16px;100  }101  .journey-sub {102    font-size: 32px;103    color: #6b6b6b;104    line-height: 1.35;105  }106  .journey-card .chev-right {107    position: absolute;108    right: 28px;109    top: 40px;110    width: 52px;111    height: 52px;112    display: flex;113    align-items: center;114    justify-content: center;115  }116 117  /* Select tickets section */118  .tickets-section {119    position: absolute;120    top: 480px;121    left: 36px;122    right: 36px;123    background: rgba(255,255,255,0.75);124    border-radius: 32px;125    padding: 32px 32px 48px;126  }127  .tickets-title {128    font-size: 44px;129    font-weight: 700;130    color: #1f1f1f;131    margin-bottom: 24px;132  }133  .ticket-card {134    background: #fff;135    border-radius: 28px;136    border: 1px solid #E5E5E5;137    padding: 34px;138    display: flex;139    align-items: center;140    justify-content: space-between;141    box-shadow: 0 6px 10px rgba(0,0,0,0.04);142  }143  .price-line {144    font-size: 42px;145    font-weight: 800;146    color: #C8561D;147  }148  .per-pax {149    font-weight: 500;150    color: #6f6f6f;151    font-size: 32px;152    margin-left: 8px;153  }154  .policy {155    margin-top: 16px;156    font-size: 32px;157    color: #8a8a8a;158    display: inline-flex;159    align-items: center;160    gap: 8px;161  }162  .select-btn {163    background: #DA6A27;164    color: #fff;165    font-size: 36px;166    font-weight: 700;167    padding: 28px 40px;168    border-radius: 22px;169    border: none;170    cursor: default;171    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);172  }173 174  /* Bottom sheet */175  .bottom-sheet {176    position: absolute;177    left: 0;178    right: 0;179    bottom: 160px;180    top: 820px;181    background: #fff;182    border-top-left-radius: 44px;183    border-top-right-radius: 44px;184    box-shadow: 0 -10px 20px rgba(0,0,0,0.08);185    padding: 28px 36px 120px;186  }187  .sheet-header {188    text-align: center;189    font-size: 48px;190    font-weight: 800;191    color: #1d1d1d;192    margin: 20px 0 32px;193  }194 195  .sheet-filter {196    background: #EEF3FF;197    border-radius: 26px;198    padding: 26px 28px;199    display: flex;200    align-items: center;201    justify-content: space-between;202    color: #2F68FF;203    font-size: 34px;204    font-weight: 700;205    margin: 0 8px 14px;206  }207  .itinerary-label {208    color: #6b6b6b;209    font-weight: 600;210  }211  .itinerary-row {212    display: inline-flex;213    align-items: center;214    gap: 10px;215    color: #6b6b6b;216    font-size: 34px;217    font-weight: 600;218  }219 220  .details-card {221    background: #fff;222    border-radius: 28px;223    border: 1px solid #E7E7E7;224    padding: 34px 36px 40px;225    box-shadow: 0 8px 16px rgba(0,0,0,0.05);226    margin: 8px;227  }228  .train-number {229    font-size: 32px;230    color: #7a7a7a;231    margin-bottom: 26px;232  }233  .times-row {234    display: grid;235    grid-template-columns: 1fr 220px 1fr;236    align-items: center;237    margin-bottom: 22px;238  }239  .time-left,240  .time-right {241    font-size: 72px;242    font-weight: 800;243    color: #121212;244  }245  .duration {246    text-align: center;247    color: #9a9a9a;248    font-size: 30px;249    position: relative;250  }251  .duration:before,252  .duration:after {253    content: "";254    position: absolute;255    top: 50%;256    width: 180px;257    height: 1px;258    background: #E4E4E4;259  }260  .duration:before { left: -190px; }261  .duration:after { right: -190px; }262 263  .stations {264    display: grid;265    grid-template-columns: 1fr 1fr;266    font-size: 36px;267    color: #2b2b2b;268    margin-top: 6px;269    gap: 20px;270  }271  .station-right {272    text-align: right;273  }274 275  /* Gesture bar (bottom) */276  .system-bottom {277    position: absolute;278    left: 0;279    right: 0;280    bottom: 0;281    height: 160px;282    background: #000;283  }284  .home-pill {285    position: absolute;286    left: 50%;287    transform: translateX(-50%);288    bottom: 52px;289    width: 440px;290    height: 14px;291    background: #D0D0D0;292    border-radius: 8px;293  }294 295  /* Helper: chevron icons size */296  svg { display: block; }297</style>298</head>299<body>300<div id="render-target">301 302  <!-- Status bar -->303  <div class="status-bar">304    <div class="status-left">305      <div>12:30</div>306      <div class="status-icon" style="background:#3B1F12;border-radius:6px; width:26px; height:26px;"></div>307    </div>308    <div class="status-right">309      <!-- simple icons -->310      <div class="status-icon">311        <svg width="34" height="34" viewBox="0 0 24 24">312          <circle cx="12" cy="12" r="9" fill="none" stroke="rgba(255,255,255,0.9)" stroke-width="2"/>313        </svg>314      </div>315      <div class="status-icon">316        <svg width="34" height="34" viewBox="0 0 24 24">317          <path d="M3 16h18M6 12h12M9 8h6" stroke="rgba(255,255,255,0.9)" stroke-width="2" stroke-linecap="round"/>318        </svg>319      </div>320      <div class="status-icon">321        <svg width="34" height="34" viewBox="0 0 24 24">322          <rect x="3" y="6" width="16" height="12" rx="2" fill="none" stroke="rgba(255,255,255,0.9)" stroke-width="2"/>323          <path d="M21 10v4" stroke="rgba(255,255,255,0.9)" stroke-width="2" stroke-linecap="round"/>324          <path d="M8 12l2.5-4 2 8 2-4" stroke="rgba(255,255,255,0.9)" stroke-width="2" stroke-linecap="round" fill="none"/>325        </svg>326      </div>327    </div>328  </div>329 330  <!-- Top header -->331  <div class="top-bar">332    <div class="back-btn">333      <svg width="48" height="48" viewBox="0 0 24 24">334        <path d="M15 5l-7 7 7 7" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>335      </svg>336    </div>337    <div class="title">Ticket options</div>338  </div>339 340  <!-- Journey card -->341  <div class="journey-card">342    <div class="journey-title">27 Oct 2023, 07:47–11:00</div>343    <div class="journey-sub">Amsterdam Central - London St Pancras International · Eurostar 9119</div>344    <div class="chev-right">345      <svg width="36" height="36" viewBox="0 0 24 24">346        <path d="M9 5l7 7-7 7" fill="none" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>347      </svg>348    </div>349  </div>350 351  <!-- Select tickets section -->352  <div class="tickets-section">353    <div class="tickets-title">Select tickets</div>354    <div class="ticket-card">355      <div>356        <div><span class="price-line">US$ 402.49</span><span class="per-pax">/pax</span></div>357        <div class="policy">358          <span>Change & refund policies</span>359          <svg width="26" height="26" viewBox="0 0 24 24">360            <path d="M9 6l6 6-6 6" fill="none" stroke="#9b9b9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>361          </svg>362        </div>363      </div>364      <button class="select-btn">Select</button>365    </div>366  </div>367 368  <!-- Bottom sheet -->369  <div class="bottom-sheet">370    <div class="sheet-header">Train details</div>371 372    <div class="sheet-filter">373      <div>27 Oct 2023</div>374      <div class="itinerary-row"><span class="itinerary-label">Itinerary</span>375        <svg width="26" height="26" viewBox="0 0 24 24">376          <path d="M6 9l6 6 6-6" fill="none" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>377        </svg>378      </div>379    </div>380 381    <div class="details-card">382      <div class="train-number">Eurostar 9119</div>383      <div class="times-row">384        <div class="time-left">07:47</div>385        <div class="duration">4h 13m</div>386        <div class="time-right">11:00</div>387      </div>388      <div class="stations">389        <div class="station-left">Amsterdam Central</div>390        <div class="station-right">London St Pancras<br/>International</div>391      </div>392    </div>393  </div>394 395  <!-- System gesture bar -->396  <div class="system-bottom">397    <div class="home-pill"></div>398  </div>399</div>400</body>401</html>