GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1440, initial-scale=1.0" />6<title>Payment</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1440px;16    height: 3120px;17    position: relative;18    overflow: hidden;19    background: #F3F6F8;20    color: #0F172A;21  }22 23  /* Top app bar */24  .appbar {25    position: relative;26    width: 100%;27    height: 240px;28    background: #25006B;29    color: #fff;30    box-shadow: 0 2px 8px rgba(0,0,0,0.15);31  }32  .status {33    height: 100px;34    padding: 0 48px;35    display: flex;36    align-items: center;37    justify-content: space-between;38    font-size: 42px;39    opacity: 0.95;40  }41  .status .left,42  .status .right {43    display: flex;44    align-items: center;45    gap: 28px;46  }47  .nav {48    height: 140px;49    display: flex;50    align-items: center;51    padding: 0 48px;52    justify-content: space-between;53  }54  .nav .title {55    display: flex;56    align-items: center;57    gap: 28px;58    font-weight: 700;59    font-size: 64px;60  }61  .nav .signin {62    font-size: 48px;63    font-weight: 600;64  }65  .icon {66    width: 64px;67    height: 64px;68    display: inline-flex;69    align-items: center;70    justify-content: center;71    fill: currentColor;72  }73 74  /* Content area */75  .content {76    padding: 40px 40px 220px;77  }78 79  /* Ticket card */80  .card {81    background: #fff;82    border-radius: 28px;83    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);84    border: 1px solid #E6ECF2;85    overflow: hidden;86  }87  .card-header {88    display: grid;89    grid-template-columns: 140px 1fr auto;90    align-items: center;91    gap: 32px;92    padding: 40px 40px 28px 0;93  }94  .leg-chip {95    height: 140px;96    background: #0E2C8A;97    border-top-right-radius: 16px;98    border-bottom-right-radius: 16px;99    display: flex;100    align-items: center;101    justify-content: center;102    color: #fff;103  }104  .hdr-main {105    display: flex;106    align-items: center;107    gap: 20px;108    font-size: 54px;109    font-weight: 700;110    color: #111827;111  }112  .hdr-main .meta {113    color: #6B7280;114    font-weight: 500;115    font-size: 44px;116  }117  .price {118    padding-right: 32px;119    font-weight: 800;120    font-size: 56px;121    color: #111827;122  }123  .rule {124    margin: 0 40px 12px 180px;125    color: #6B7280;126    font-size: 40px;127  }128  .divider {129    height: 1px;130    background: repeating-linear-gradient(90deg, #E5E7EB, #E5E7EB 24px, transparent 24px, transparent 40px);131    margin: 16px 32px;132    border-radius: 1px;133  }134  .card-body {135    display: grid;136    grid-template-columns: 1fr 1fr;137    gap: 24px;138    padding: 10px 48px 40px 48px;139  }140  .time-row {141    display: flex;142    align-items: baseline;143    gap: 18px;144  }145  .time {146    font-size: 96px;147    font-weight: 800;148    color: #172554;149  }150  .arrow-mid {151    color: #64748B;152    font-size: 72px;153    font-weight: 800;154    margin: 0 12px;155  }156  .place,157  .meta-light {158    color: #6B7280;159    font-size: 44px;160    line-height: 1.35;161  }162  .strong {163    font-size: 48px;164    font-weight: 800;165    color: #111827;166  }167 168  /* Passenger row */169  .row {170    margin-top: 32px;171    background: #fff;172    border-top: 1px solid #E6ECF2;173    border-bottom: 1px solid #E6ECF2;174    padding: 44px 36px;175    display: flex;176    align-items: center;177    gap: 24px;178    font-size: 48px;179  }180  .row .muted {181    color: #111827;182    font-weight: 600;183  }184 185  /* Section header */186  .section-title {187    margin: 40px 36px 24px;188    font-size: 56px;189    font-weight: 800;190    color: #0B1220;191  }192 193  /* How to get your ticket card */194  .how-card {195    background: #E9FBF3;196    border: 1px solid #C7F0DC;197    border-radius: 28px;198    padding: 24px;199    margin: 0 24px;200    box-shadow: 0 6px 18px rgba(2, 122, 72, 0.08);201  }202  .how-image {203    width: 100%;204    height: 360px;205    background: #E0E0E0;206    border: 1px solid #BDBDBD;207    border-radius: 20px;208    color: #757575;209    display: flex;210    align-items: center;211    justify-content: center;212    font-size: 48px;213    margin-bottom: 24px;214  }215  .how-header {216    display: grid;217    grid-template-columns: 40px 1fr 40px;218    align-items: center;219    gap: 20px;220    margin: 10px 8px 8px;221  }222  .dot {223    width: 28px;224    height: 28px;225    background: #34D399;226    border-radius: 50%;227  }228  .how-title {229    font-size: 56px;230    font-weight: 800;231    color: #0B1220;232  }233  .how-info {234    width: 40px;235    height: 40px;236    color: #0B1220;237    opacity: 0.7;238  }239  .checks {240    margin: 12px 20px 8px 76px;241    color: #0F5132;242    font-size: 46px;243  }244  .checks .item {245    display: flex;246    align-items: center;247    gap: 18px;248    margin: 16px 0;249  }250  .thumb {251    display: flex;252    align-items: center;253    gap: 18px;254    margin: 22px 0 10px 76px;255    font-size: 48px;256    font-weight: 800;257    color: #111827;258  }259  .thumb .icon {260    color: #111827;261    width: 56px;262    height: 56px;263  }264 265  /* Gesture bar at bottom */266  .home-indicator {267    position: absolute;268    left: 50%;269    transform: translateX(-50%);270    bottom: 36px;271    width: 420px;272    height: 12px;273    background: #111827;274    border-radius: 10px;275    opacity: 0.75;276  }277</style>278</head>279<body>280<div id="render-target">281  <div class="appbar">282    <div class="status">283      <div class="left">284        <span>1:43</span>285        <svg class="icon" viewBox="0 0 24 24"><path fill="#fff" d="M19 5H8a2 2 0 0 0-2 2v1H5a2 2 0 0 0-2 2v6a3 3 0 0 0 3 3h13a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3zm2 10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10h2V8a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v7z"/></svg>286        <svg class="icon" viewBox="0 0 24 24"><path fill="#fff" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 11h-2V6h2v7zm0 5h-2v-2h2v2z"/></svg>287        <svg class="icon" viewBox="0 0 24 24"><path fill="#fff" d="M3 12a9 9 0 1 1 18 0A9 9 0 0 1 3 12zm9-7a7 7 0 1 0 0 14 7 7 0 0 0 0-14z"/></svg>288      </div>289      <div class="right">290        <svg class="icon" viewBox="0 0 24 24"><path fill="#fff" d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zM19 16V9a7 7 0 1 0-14 0v7l-2 2v1h18v-1l-2-2z"/></svg>291        <svg class="icon" viewBox="0 0 24 24"><path fill="#fff" d="M21.5 7H20V5.5A2.5 2.5 0 0 0 17.5 3h-11A2.5 2.5 0 0 0 4 5.5V7H2.5C1.7 7 1 7.7 1 8.5v7C1 16.3 1.7 17 2.5 17H4v1.5C4 20 5 21 6.5 21h11c1.5 0 2.5-1 2.5-2.5V17h1.5c.8 0 1.5-.7 1.5-1.5v-7C23 7.7 22.3 7 21.5 7zM6 5.5c0-.3.2-.5.5-.5h11c.3 0 .5.2.5.5V7H6V5.5zm12 13c0 .3-.2.5-.5.5h-11c-.3 0-.5-.2-.5-.5V17h12v1.5z"/></svg>292        <svg class="icon" viewBox="0 0 24 24"><path fill="#fff" d="M16 4l-6 16h-2l6-16h2z"/></svg>293      </div>294    </div>295    <div class="nav">296      <div class="title">297        <svg class="icon" viewBox="0 0 24 24"><path fill="#fff" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>298        <span>Payment</span>299      </div>300      <div class="signin">Sign in</div>301    </div>302  </div>303 304  <div class="content">305    <div class="card">306      <div class="card-header">307        <div class="leg-chip">308          <svg class="icon" viewBox="0 0 24 24"><path d="M10 8H4V6h6v2zm0 5H4v-2h6v2zm4 2h6v2h-6v-2zm6-7h-6V6h6v2z" fill="#fff"/></svg>309        </div>310        <div class="hdr-main">311          <svg class="icon" viewBox="0 0 24 24"><path d="M3 13h18l-1-5H4l-1 5zm18 2H3v3h2v2h2v-2h10v2h2v-2h2v-3zM6 6h12l1 2H5l1-2z" fill="#111827"/></svg>312          <span>Coach Single</span>313          <svg class="icon" viewBox="0 0 24 24"><path d="M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9a10 10 0 1 0 0 20 10 10 0 0 0 0-20z" fill="#6B7280"/></svg>314          <span class="meta">Restricted fare - not amendable and not refundable</span>315        </div>316        <div class="price">$13.07</div>317      </div>318      <div class="divider"></div>319      <div class="card-body">320        <div>321          <div class="time-row">322            <div class="time">9:40 AM</div>323            <div class="arrow-mid">→</div>324            <div class="time" style="color:#0F172A;opacity:.35">11:20 AM</div>325          </div>326          <div class="place" style="margin-top:12px;">327            Brighton Coach Station<br/>Harbour Parade328          </div>329          <div class="strong" style="margin-top:22px;">2h 40m, Direct</div>330          <div class="meta-light" style="margin-top:18px;">Specified coach only</div>331        </div>332        <div style="display:flex;flex-direction:column;">333          <div class="time" style="visibility:hidden;">0</div>334          <div class="place" style="margin-top:12px;">London Victoria</div>335          <div class="meta-light" style="margin-top:22px;">032 National Express</div>336        </div>337      </div>338    </div>339 340    <div class="row">341      <svg class="icon" viewBox="0 0 24 24"><path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5z" fill="#111827"/></svg>342      <span class="muted">1 Adult</span>343    </div>344 345    <div class="section-title">How to get your ticket</div>346 347    <div class="how-card">348      <div class="how-image">[IMG: Phone with QR code ticket]</div>349      <div class="how-header">350        <div class="dot"></div>351        <div class="how-title">eticket in-app or print at home</div>352        <svg class="how-info" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill="currentColor"/></svg>353      </div>354      <div class="checks">355        <div class="item">356          <svg class="icon" viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z" fill="#10B981"/></svg>357          <span>Instant download</span>358        </div>359        <div class="item">360          <svg class="icon" viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z" fill="#10B981"/></svg>361          <span>Show the ticket on your device or print it out</span>362        </div>363      </div>364      <div class="thumb">365        <svg class="icon" viewBox="0 0 24 24"><path d="M9 21V9l5-5 1 1v3h4a2 2 0 0 1 2 2v3l-4 8H9z" fill="#111827"/></svg>366        <span>Most popular</span>367      </div>368    </div>369  </div>370 371  <div class="home-indicator"></div>372</div>373</body>374</html>