GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Train Booking UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1440px;9    height: 3120px;10    position: relative;11    overflow: hidden;12    background: #0E2A66; /* deep navy header background */13    color: #0A1A33;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1440px;22    height: 120px;23    padding: 0 70px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #ffffff;29    font-weight: 600;30    letter-spacing: 0.5px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 40px;36  }37  .status-icon {38    width: 42px; height: 42px;39    border-radius: 50%;40    border: 2px solid rgba(255,255,255,0.8);41  }42 43  /* Header */44  .header {45    position: absolute;46    top: 120px;47    left: 0;48    width: 1440px;49    height: 280px;50    padding: 0 50px;51    box-sizing: border-box;52    color: #ffffff;53  }54  .header-top {55    height: 120px;56    display: flex;57    align-items: center;58    justify-content: space-between;59  }60  .header-title {61    margin-top: 10px;62  }63  .header-title h1 {64    margin: 0;65    font-size: 56px;66    font-weight: 800;67  }68  .header-title .subtitle {69    margin-top: 10px;70    font-size: 34px;71    opacity: 0.85;72  }73  .icon-btn {74    width: 96px; height: 96px;75    display: flex; align-items: center; justify-content: center;76  }77  .icon svg { fill: none; stroke: #ffffff; stroke-width: 60; }78 79  /* Content sheet */80  .sheet {81    position: absolute;82    top: 360px;83    left: 0;84    width: 1440px;85    height: 2760px;86    background: #F5F7FB;87    border-top-left-radius: 36px;88    border-top-right-radius: 36px;89    box-shadow: 0 -12px 24px rgba(0,0,0,0.2) inset;90  }91  .content {92    padding: 60px;93    box-sizing: border-box;94    color: #12213E;95  }96 97  /* Fare cards */98  .fare-grid {99    display: grid;100    grid-template-columns: 1fr 1fr;101    gap: 40px;102  }103  .fare-card {104    background: #E6F0FF;105    border: 2px solid #C9D8F7;106    border-radius: 26px;107    padding: 46px;108    box-sizing: border-box;109    min-height: 460px;110  }111  .fare-card h3 {112    margin: 0 0 20px 0;113    font-size: 48px;114    color: #0F2B66;115  }116  .fare-features {117    margin-top: 12px;118    font-size: 32px;119    color: #32528A;120    line-height: 1.6;121  }122  .fare-price {123    margin-top: 28px;124    font-size: 44px;125    font-weight: 700;126    color: #0F2B66;127  }128  .fare-card.disabled {129    background: #F0F2F7;130    border: 2px dashed #D2D6E4;131    color: #8A93A8;132  }133  .fare-card.disabled .msg {134    font-size: 42px;135    line-height: 1.4;136  }137 138  /* Section titles */139  .section-title {140    margin: 60px 0 26px 0;141    font-size: 44px;142    font-weight: 800;143    color: #0F2B66;144  }145 146  /* Fare terms text */147  .terms {148    font-size: 36px;149    line-height: 1.6;150    color: #1B2D52;151  }152 153  /* Seat reservation */154  .seat-row {155    display: flex;156    align-items: center;157    justify-content: space-between;158    background: #FFFFFF;159    border: 2px solid #E1E6F2;160    border-radius: 26px;161    padding: 40px;162    font-size: 42px;163  }164  .seat-row .price {165    color: #0F2B66;166    font-weight: 800;167    margin-right: 20px;168  }169  .toggle {170    width: 160px; height: 80px;171    background: #E9EDF7;172    border-radius: 80px;173    position: relative;174    box-shadow: inset 0 0 0 2px #D5DCEF;175  }176  .toggle::after {177    content: "";178    width: 72px; height: 72px;179    background: #FFFFFF;180    border-radius: 50%;181    position: absolute;182    top: 4px; left: 6px;183    box-shadow: 0 2px 6px rgba(0,0,0,0.2);184  }185 186  .info-card {187    margin-top: 30px;188    background: #FFFFFF;189    border: 2px solid #E1E6F2;190    border-radius: 26px;191    padding: 34px 40px;192    display: flex; align-items: center;193    gap: 26px;194    font-size: 38px;195    color: #1B2D52;196  }197  .info-icon {198    width: 56px; height: 56px; border-radius: 50%;199    border: 3px solid #8AA3D7;200    display: flex; align-items: center; justify-content: center;201    color: #8AA3D7; font-weight: 800;202  }203  .small-note {204    margin-top: 28px;205    font-size: 34px;206    color: #546488;207  }208 209  /* Ticket type */210  .ticket-type {211    margin-top: 40px;212    background: #FFFFFF;213    border: 2px solid #DDE5F4;214    border-radius: 26px;215    padding: 40px;216    font-size: 42px;217    color: #0F2B66;218  }219  .ticket-type .row {220    display: flex; align-items: center; gap: 26px;221  }222  .phone-box {223    width: 120px; height: 120px; border-radius: 20px;224    border: 2px dashed #B5C4E8;225    background: #E0E6F7;226  }227 228  /* Bottom button */229  .bottom-area {230    position: absolute;231    left: 0;232    bottom: 140px;233    width: 100%;234    padding: 0 60px;235    box-sizing: border-box;236  }237  .minor-text {238    font-size: 36px;239    color: #1B2D52;240    margin-bottom: 26px;241  }242  .cta {243    width: 100%;244    height: 160px;245    background: #EB6B6B;246    color: #FFFFFF;247    font-size: 54px;248    font-weight: 800;249    border: none;250    border-radius: 36px;251    box-shadow: 0 6px 24px rgba(235, 107, 107, 0.5);252  }253 254  /* Android navigation pill */255  .nav-pill {256    position: absolute;257    bottom: 36px;258    left: 50%;259    transform: translateX(-50%);260    width: 500px;261    height: 14px;262    background: #C8CFDD;263    border-radius: 10px;264  }265 266  /* Simple inline icon helpers */267  .chevron-left, .share-icon {268    width: 72px; height: 72px;269  }270</style>271</head>272<body>273<div id="render-target">274 275  <!-- Status bar -->276  <div class="status-bar">277    <div class="status-left">278      <span style="font-size: 52px;">12:47</span>279    </div>280    <div class="status-right">281      <div class="status-icon"></div>282      <div class="status-icon"></div>283      <div class="status-icon"></div>284      <div class="status-icon"></div>285    </div>286  </div>287 288  <!-- Header -->289  <div class="header">290    <div class="header-top">291      <div class="icon-btn">292        <svg class="chevron-left" viewBox="0 0 100 100">293          <polyline points="65,15 30,50 65,85" stroke="#ffffff" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"/>294        </svg>295      </div>296      <div class="icon-btn">297        <svg class="share-icon" viewBox="0 0 100 100">298          <circle cx="20" cy="50" r="12" stroke="#ffffff" stroke-width="10" fill="none"/>299          <circle cx="80" cy="20" r="12" stroke="#ffffff" stroke-width="10" fill="none"/>300          <circle cx="80" cy="80" r="12" stroke="#ffffff" stroke-width="10" fill="none"/>301          <polyline points="32,50 68,26 68,74" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round"/>302        </svg>303      </div>304    </div>305    <div class="header-title">306      <h1>Southampton › Salisbury</h1>307      <div class="subtitle">Thu, Nov 2, 1 passenger</div>308    </div>309  </div>310 311  <!-- Content sheet -->312  <div class="sheet">313    <div class="content">314 315      <!-- Fare selection cards -->316      <div class="fare-grid">317        <div class="fare-card">318          <h3>Anytime Day<br>Single</h3>319          <div class="fare-features">320            <div>• Semi refundable</div>321            <div>• Non exchangeable</div>322          </div>323          <div class="fare-price">+$0</div>324        </div>325 326        <div class="fare-card disabled">327          <div class="msg">There is only 1 fare available for this journey</div>328        </div>329      </div>330 331      <!-- Fare terms -->332      <div class="section-title">Fare terms</div>333      <div class="terms">334        <div style="font-weight:800;">Anytime Day Single</div>335        <div>Valid on any train on the date shown on the ticket, and up to 04:29 the following day, subject to any operator or route restrictions.</div>336        <div>Completely unused tickets can be cancelled for a fee of £10.00 before the day of departure and from 2 to 28 days after the day of departure.</div>337      </div>338 339      <!-- Seat reservation -->340      <div class="section-title" style="display:flex; align-items:center; justify-content:space-between;">341        <span>Seat reservation</span>342        <span class="price">+$0</span>343      </div>344      <div class="seat-row">345        <div>Treat yourself to a comfortable seat or cabin for this 0 h 29 m journey.</div>346        <div class="toggle"></div>347      </div>348      <div class="small-note">This is a non-refundable fee.</div>349 350      <!-- Choose ticket type -->351      <div class="section-title">Choose a ticket type</div>352      <div class="ticket-type">353        <div class="row">354          <div class="phone-box"></div>355          <div>Ticket on my phone</div>356        </div>357      </div>358 359    </div>360 361    <!-- Bottom action area -->362    <div class="bottom-area">363      <div class="minor-text">One-way ticket for 1 passenger</div>364      <button class="cta">Go to passenger details</button>365    </div>366 367  </div>368 369  <!-- Navigation pill -->370  <div class="nav-pill"></div>371 372</div>373</body>374</html>