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>Payment - Train</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #12295F; /* dark app background */15    color: #0E1D4F;16  }17 18  /* Top bars */19  .status-bar {20    height: 96px;21    background: #445C93;22    color: #fff;23    display: flex;24    align-items: center;25    padding: 0 36px;26    font-weight: 600;27    letter-spacing: 0.5px;28    font-size: 34px;29  }30  .status-bar .right {31    margin-left: auto;32    display: flex;33    align-items: center;34    gap: 24px;35  }36  .app-bar {37    height: 240px;38    background: #12295F;39    color: #fff;40    padding: 24px 36px 0 36px;41    position: relative;42  }43  .app-title {44    margin-top: 36px;45    font-size: 46px;46    font-weight: 800;47  }48  .app-subtitle {49    margin-top: 8px;50    color: #C7D3F2;51    font-size: 30px;52    font-weight: 600;53  }54  .icon-btn {55    position: absolute;56    top: 96px;57    width: 72px; height: 72px;58    display: flex; align-items: center; justify-content: center;59    cursor: default;60  }61  .icon-back { left: 18px; }62  .icon-share { right: 24px; }63 64  /* Trip card overlapping header */65  .trip-card {66    position: relative;67    margin: 18px 36px 16px 36px;68    background: #fff;69    border-radius: 28px;70    padding: 36px;71    box-shadow: 0 8px 24px rgba(0,0,0,0.18);72  }73  .label-chip {74    display: inline-flex;75    align-items: center;76    gap: 14px;77    color: #6AA7F7;78    font-weight: 800;79    font-size: 26px;80    letter-spacing: 1.2px;81  }82  .trip-time {83    margin-top: 14px;84    font-size: 44px;85    font-weight: 900;86    color: #102A66;87  }88  .trip-route {89    margin-top: 10px;90    font-size: 32px;91    color: #3A4A7A;92    display: flex;93    align-items: center;94    justify-content: space-between;95  }96  .trip-meta {97    margin-top: 18px;98    display: flex;99    align-items: center;100    gap: 18px;101  }102  .meta-right {103    margin-left: auto;104    color: #7A88AB;105    font-weight: 700;106  }107  .meta-foot {108    margin-top: 10px;109    color: #8C97B7;110    font-size: 28px;111  }112 113  /* White content area */114  .content {115    position: absolute;116    top: 330px;117    left: 0;118    right: 0;119    bottom: 140px;120    background: #FFFFFF;121    border-top-left-radius: 24px;122    border-top-right-radius: 24px;123    overflow-y: auto;124    padding-bottom: 140px;125  }126  .section {127    padding: 24px 36px;128  }129  .section h2 {130    margin: 24px 0 10px 0;131    font-size: 44px;132    color: #0E2A6D;133  }134  .divider {135    height: 16px;136    background: #EEF1F6;137    margin: 16px -36px;138  }139 140  /* Passenger block */141  .passenger-block {142    background: #fff;143    border-radius: 18px;144  }145  .passenger-row {146    display: flex; align-items: center;147    justify-content: space-between;148    color: #22366E;149    font-size: 34px;150    padding: 12px 0 18px 0;151    font-weight: 700;152  }153  .pill-grey {154    color: #8C97B7;155    font-size: 26px;156    font-weight: 800;157    letter-spacing: 1px;158  }159  .info-note {160    border: 2px solid #B9CBEF;161    background: #F5F8FF;162    color: #1C2F64;163    border-radius: 18px;164    padding: 24px;165    display: flex;166    gap: 18px;167    font-size: 32px;168    align-items: center;169  }170 171  /* Payment */172  .label {173    color: #7C8AB0;174    font-size: 30px;175    margin: 24px 0 16px 0;176    font-weight: 700;177  }178  .pay-methods {179    display: flex;180    align-items: center;181    gap: 24px;182    margin-top: 8px;183  }184  .radio {185    width: 56px; height: 56px;186  }187  .brand {188    width: 120px; height: 72px;189    background: #fff; border: 2px solid #C7D0E6; border-radius: 10px;190    display: flex; align-items: center; justify-content: center;191    font-weight: 900; color: #24408E;192    letter-spacing: 1px; font-size: 30px;193  }194  .brand.mc { color: #E34B36; }195  .brand.jcb { color: #0C8D4C; }196 197  .input {198    background: #EFF2F7;199    border-radius: 22px;200    height: 116px;201    display: flex;202    align-items: center;203    padding: 0 32px;204    color: #5C6991;205    font-size: 36px;206    font-weight: 700;207  }208  .row {209    display: flex; gap: 36px;210  }211  .col { flex: 1; }212 213  /* Bottom bar */214  .bottom-bar {215    position: absolute;216    bottom: 0; left: 0; right: 0;217    height: 140px;218    background: #0C1C48;219    display: flex; align-items: center; justify-content: center;220  }221  .home-indicator {222    width: 320px; height: 12px;223    background: #D7DBE5; border-radius: 8px;224    opacity: 0.9;225  }226 227  /* Utility placeholder image */228  .img-ph {229    width: 96px; height: 48px;230    background: #E0E0E0; border: 1px solid #BDBDBD;231    color: #757575; display: flex; align-items: center; justify-content: center;232    font-size: 22px; padding: 6px 8px; border-radius: 8px;233  }234</style>235</head>236<body>237<div id="render-target">238 239  <!-- Status bar -->240  <div class="status-bar">241    5:11242    <div class="right">243      <!-- simple sun icon -->244      <svg width="38" height="38" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="4"/><path d="M12 1v3M12 20v3M1 12h3M20 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M19.8 4.2l-2.1 2.1M6.3 17.7L4.2 19.8" stroke="#fff" stroke-width="2"/></svg>245      <!-- mail icon -->246      <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">247        <rect x="3" y="5" width="18" height="14" rx="2"></rect>248        <path d="M3 7l9 6 9-6"></path>249      </svg>250      <!-- device icon -->251      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">252        <rect x="7" y="4" width="10" height="16" rx="2"></rect>253        <circle cx="12" cy="18" r="1" fill="#fff" stroke="none"></circle>254      </svg>255      <!-- wifi -->256      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">257        <path d="M2 8a16 16 0 0 1 20 0"></path>258        <path d="M5 12a11 11 0 0 1 14 0"></path>259        <path d="M8.5 15.5a6 6 0 0 1 7 0"></path>260        <circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"></circle>261      </svg>262      <!-- battery -->263      <svg width="46" height="46" viewBox="0 0 26 24" fill="none" stroke="#fff" stroke-width="2">264        <rect x="1" y="5" width="20" height="14" rx="2"></rect>265        <rect x="3" y="7" width="16" height="10" fill="#fff" stroke="none"></rect>266        <rect x="21.5" y="9" width="3" height="6" rx="1"></rect>267      </svg>268    </div>269  </div>270 271  <!-- App bar -->272  <div class="app-bar">273    <div class="icon-btn icon-back">274      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#C7D3F2" stroke-width="3">275        <path d="M15 18l-6-6 6-6"></path>276      </svg>277    </div>278    <div class="icon-btn icon-share">279      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#C7D3F2" stroke-width="2.2">280        <circle cx="5" cy="12" r="2"></circle>281        <circle cx="19" cy="5" r="2"></circle>282        <circle cx="19" cy="19" r="2"></circle>283        <path d="M7 12l9-6M7 12l9 6"></path>284      </svg>285    </div>286    <div class="app-title">Amsterda… › Rotterdam Centraal</div>287    <div class="app-subtitle">Fri, Oct 20, 1 passenger</div>288 289    <!-- Trip card -->290    <div class="trip-card">291      <div class="label-chip">292        <svg width="26" height="26" viewBox="0 0 24 24" fill="#6AA7F7"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="5" fill="#fff"/></svg>293        OUTBOUND294      </div>295      <div class="trip-time">Fri, Oct 20  1:38 PM – 2:19 PM</div>296      <div class="trip-route">297        <span>Amsterdam Centraal  -  Rotterdam Centraal</span>298        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#7F8FC1" stroke-width="2"><path d="M8 10l4 4 4-4"/></svg>299      </div>300      <div class="trip-meta">301        <div class="img-ph" style="width:120px;height:54px;">[IMG: NS logo]</div>302        <div class="meta-right">0h41m • 0 transfers</div>303      </div>304      <div class="meta-foot">Flight partially operated by NS International | IC Direct</div>305    </div>306  </div>307 308  <!-- White content area -->309  <div class="content">310    <div class="divider"></div>311    <div class="section passenger-block">312      <h2>Passenger details</h2>313      <hr style="border:none;border-top:1px solid #E6EAF4; margin: 8px -36px 26px -36px;">314      <div class="passenger-row">315        <div>Natalie Lasrson</div>316        <div class="pill-grey">ADULT</div>317      </div>318      <div class="info-note">319        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#5575C9" stroke-width="2">320          <rect x="3" y="5" width="18" height="14" rx="2"></rect>321          <path d="M7 5v14M17 5v14M3 9h18"></path>322        </svg>323        <div>324          <div style="font-weight:800;">Your ticket will be sent to:</div>325          <div style="margin-top:4px; color:#324880; font-weight:800;">natalie.larson1998@gmail.com</div>326        </div>327      </div>328    </div>329 330    <div class="divider"></div>331 332    <div class="section">333      <h2>Select payment method</h2>334 335      <div class="pay-methods">336        <!-- radio -->337        <svg class="radio" viewBox="0 0 24 24">338          <circle cx="12" cy="12" r="10" fill="none" stroke="#C7D0E6" stroke-width="3"></circle>339          <circle cx="12" cy="12" r="6" fill="#6AA7F7"></circle>340        </svg>341        <div class="brand">VISA</div>342        <div class="brand mc">MC</div>343        <div class="brand mc">MC</div>344        <div class="brand jcb">JCB</div>345      </div>346 347      <div class="label">Name on card</div>348      <div class="input">Natalie Lasrson</div>349 350      <div class="label">Card number</div>351      <div class="input"></div>352 353      <div class="row">354        <div class="col">355          <div class="label">Expiration date</div>356          <div class="input" style="color:#9CA4C1;font-weight:700;">MM / YY</div>357        </div>358        <div class="col">359          <div class="label">CVV</div>360          <div class="input"></div>361        </div>362      </div>363 364      <hr style="border:none;border-top:1px solid #E6EAF4; margin: 36px -36px 24px -36px;">365    </div>366  </div>367 368  <!-- Bottom bar -->369  <div class="bottom-bar">370    <div class="home-indicator"></div>371  </div>372 373</div>374</body>375</html>