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 UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1440px;11    height: 3120px;12    position: relative;13    overflow: hidden;14    background: #F3F6F7;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #222;17  }18 19  /* Top bars */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1440px;25    height: 110px;26    background: #2D0D84;27    color: #fff;28    display: flex;29    align-items: center;30    padding: 0 48px;31    box-sizing: border-box;32    font-size: 40px;33  }34  .status-bar .right-icons { margin-left: auto; display: flex; align-items: center; gap: 32px; }35  .app-bar {36    position: absolute;37    top: 110px;38    left: 0;39    width: 1440px;40    height: 180px;41    background: #2D0D84;42    color: #fff;43    display: flex;44    align-items: center;45    padding: 0 48px;46    box-sizing: border-box;47  }48  .app-bar .title { font-size: 70px; font-weight: 700; margin-left: 28px; }49  .app-bar .right { margin-left: auto; font-size: 50px; font-weight: 600; }50 51  .content {52    position: absolute;53    top: 290px;54    left: 0;55    right: 0;56    bottom: 0;57    padding: 48px;58    box-sizing: border-box;59  }60 61  /* Section: How to get your ticket */62  .section-title {63    background: #FFFFFF;64    border-bottom: 2px solid #E5E9EC;65    border-top-left-radius: 20px;66    border-top-right-radius: 20px;67    padding: 40px 32px;68    font-size: 60px;69    font-weight: 700;70    color: #222;71  }72  .ticket-card {73    margin-top: 30px;74    background: #EAF7F4;75    border: 1px solid #D6EAE5;76    border-radius: 24px;77    padding: 32px;78    box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset;79  }80  .img-placeholder {81    width: 100%;82    height: 260px;83    background: #E0E0E0;84    border: 1px solid #BDBDBD;85    color: #757575;86    display: flex;87    justify-content: center;88    align-items: center;89    border-radius: 16px;90    font-size: 44px;91  }92  .radio-row {93    display: flex;94    align-items: center;95    margin-top: 28px;96  }97  .radio {98    width: 48px; height: 48px; border-radius: 50%;99    border: 6px solid #12C4A6;100    display: inline-flex; align-items: center; justify-content: center;101    margin-right: 24px;102    box-sizing: border-box;103  }104  .radio::after {105    content: "";106    width: 18px; height: 18px; border-radius: 50%;107    background: #12C4A6;108    display: block;109  }110  .radio-title {111    font-size: 56px; font-weight: 700; color: #1F2B2B;112  }113  .info-icon { margin-left: auto; width: 56px; height: 56px; }114  .ticks { margin-top: 24px; }115  .tick-row {116    display: flex; align-items: center; gap: 16px;117    font-size: 46px; color: #2A3939; margin: 18px 0;118  }119  .tick-icon { width: 44px; height: 44px; }120  .popular-row { margin-top: 20px; display: flex; align-items: center; gap: 16px; font-size: 46px; font-weight: 700; color: #2A2A2A; }121  .thumb-icon { width: 48px; height: 48px; }122 123  .divider {124    margin: 48px 0;125    height: 2px;126    background: #E5E9EC;127  }128 129  /* To pay section */130  .to-pay-title {131    font-size: 84px;132    font-weight: 800;133    color: #2A2A2A;134    margin-bottom: 24px;135  }136  .fee-row, .total-row {137    display: flex;138    align-items: flex-end;139    padding: 12px 0;140    font-size: 46px;141    color: #3A3A3A;142  }143  .fee-row .amount, .total-row .amount { margin-left: auto; }144  .total-row {145    margin-top: 8px;146    font-weight: 800;147    font-size: 70px;148  }149  .lock-icon { width: 44px; height: 44px; margin-left: 18px; }150 151  .input-label { margin-top: 28px; font-size: 44px; color: #6A7778; }152  .input-field {153    margin-top: 12px;154    font-size: 50px;155    padding: 20px 0;156    border: none;157    border-bottom: 3px solid #C8CFD3;158    width: 100%;159    background: transparent;160    color: #00BDA4;161    outline: none;162  }163  .buttons { margin-top: 60px; }164  .btn {165    width: 100%;166    padding: 40px 24px;167    font-size: 60px;168    font-weight: 800;169    border-radius: 18px;170    border: none;171    cursor: pointer;172  }173  .btn-primary { background: #11C4A6; color: #FFFFFF; }174  .btn-paypal { background: #FFC857; color: #1A1A1A; margin-top: 28px; font-weight: 700; }175  .paypal-brand { color: #1058A8; font-weight: 900; letter-spacing: 0.5px; }176 177  .signin {178    margin-top: 48px;179    text-align: center;180    font-size: 44px;181    color: #2E3334;182  }183  .signin .link { font-weight: 800; color: #1E1E1E; }184 185  /* Bottom home indicator */186  .home-indicator {187    position: absolute;188    bottom: 24px;189    left: 50%;190    transform: translateX(-50%);191    width: 280px; height: 18px;192    border-radius: 9px;193    background: #FFFFFF;194    box-shadow: 0 0 0 14px rgba(0,0,0,0.9);195  }196</style>197</head>198<body>199<div id="render-target">200 201  <!-- Status bar -->202  <div class="status-bar">203    <div>1:43</div>204    <div class="right-icons">205      <!-- simple status glyphs -->206      <svg width="46" height="46" viewBox="0 0 24 24" fill="#fff"><circle cx="10" cy="12" r="6"/></svg>207      <svg width="46" height="46" viewBox="0 0 24 24" fill="#fff"><path d="M3 12h18" stroke="#fff" stroke-width="2"/></svg>208      <svg width="46" height="46" viewBox="0 0 24 24" fill="#fff"><path d="M5 4h14v16H5z"/></svg>209      <svg width="46" height="46" viewBox="0 0 24 24" fill="#fff"><path d="M17 3H7c-1.1 0-2 .9-2 2v14l7-3 7 3V5c0-1.1-.9-2-2-2z"/></svg>210      <svg width="46" height="46" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="2"/></svg>211    </div>212  </div>213 214  <!-- App bar -->215  <div class="app-bar">216    <!-- Back arrow -->217    <svg width="72" height="72" viewBox="0 0 48 48" fill="none">218      <path d="M28 10 L12 24 L28 38" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>219    </svg>220    <div class="title">Payment</div>221    <div class="right">Sign in</div>222  </div>223 224  <div class="content">225 226    <div class="section-title">How to get your ticket</div>227 228    <div class="ticket-card">229      <div class="img-placeholder">[IMG: QR code with hands]</div>230 231      <div class="radio-row">232        <div class="radio"></div>233        <div class="radio-title">eticket in-app or print at home</div>234        <!-- info icon -->235        <svg class="info-icon" viewBox="0 0 24 24">236          <circle cx="12" cy="12" r="10" fill="none" stroke="#566" stroke-width="2"/>237          <rect x="11" y="10" width="2" height="7" fill="#566"/>238          <circle cx="12" cy="7" r="1.6" fill="#566"/>239        </svg>240      </div>241 242      <div class="ticks">243        <div class="tick-row">244          <svg class="tick-icon" viewBox="0 0 24 24">245            <path d="M5 13l4 4 10-10" stroke="#12C4A6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>246          </svg>247          <div>Instant download</div>248        </div>249        <div class="tick-row">250          <svg class="tick-icon" viewBox="0 0 24 24">251            <path d="M5 13l4 4 10-10" stroke="#12C4A6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252          </svg>253          <div>Show the ticket on your device or print it out</div>254        </div>255      </div>256 257      <div class="popular-row">258        <svg class="thumb-icon" viewBox="0 0 24 24">259          <path d="M2 12h5v8H2zM9 20h9c1.1 0 2-.9 2-2v-6h-7l1-5-1-1-5 6v8z" fill="#2F3A3A"/>260        </svg>261        <div>Most popular</div>262      </div>263    </div>264 265    <div class="divider"></div>266 267    <div class="to-pay-title">To pay</div>268 269    <div class="fee-row">270      <div>National Express booking fee</div>271      <div class="amount">$1.92</div>272    </div>273 274    <div class="total-row">275      <div style="display:flex; align-items:center;">276        Total277        <svg class="lock-icon" viewBox="0 0 24 24">278          <path d="M6 10h12v10H6z" fill="#3A3A3A"/>279          <path d="M8 10V7a4 4 0 118 0v3" fill="none" stroke="#3A3A3A" stroke-width="2"/>280        </svg>281      </div>282      <div class="amount">$14.99</div>283    </div>284 285    <div class="input-label">Please enter traveller name</div>286    <input class="input-field" placeholder="enter traveller name" />287 288    <div class="buttons">289      <button class="btn btn-primary">Pay by card</button>290      <button class="btn btn-paypal">Pay with <span class="paypal-brand">PayPal</span></button>291    </div>292 293    <div class="signin">294      <span class="link">Sign in</span>  or  <span class="link">Create a Trainline account</span>295    </div>296  </div>297 298  <div class="home-indicator"></div>299</div>300</body>301</html>