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>Fare Conditions - Mobile UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #1d2e5b;16  }17 18  /* Top header */19  .header-wrap {20    background: #112a64;21    color: #fff;22    padding-top: 30px;23  }24  .status-bar {25    height: 72px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 38px;30    opacity: 0.95;31  }32  .status-left { font-weight: 600; font-size: 34px; letter-spacing: 0.5px; display:flex; gap:18px; align-items:center; }33  .status-right { display: flex; gap: 26px; align-items: center; }34  .status-dot {35    width: 22px; height: 22px; border-radius: 50%; background: #fff; opacity: 0.9;36  }37  .battery {38    width: 36px; height: 22px; border: 2px solid #fff; border-radius: 4px; position: relative;39  }40  .battery:after {41    content: ""; position: absolute; right: -6px; top: 6px; width: 4px; height: 8px; background: #fff; border-radius: 1px;42  }43  .battery-fill { width: 26px; height: 14px; background: #fff; position: absolute; left: 2px; top: 2px; border-radius: 2px; }44 45  .app-bar {46    padding: 18px 38px 36px 38px;47  }48  .app-bar .row {49    display: flex;50    align-items: center;51    justify-content: space-between;52  }53  .app-title {54    display: flex;55    align-items: center;56    gap: 22px;57  }58  .title-text {59    display: flex;60    flex-direction: column;61  }62  .route {63    font-size: 44px;64    font-weight: 700;65    white-space: nowrap;66  }67  .subtitle {68    font-size: 28px;69    opacity: 0.85;70    margin-top: 6px;71  }72  .icon {73    width: 48px;74    height: 48px;75    fill: #ffffff;76  }77 78  /* Content */79  .content {80    padding: 32px 40px 280px 40px;81    background: #ffffff;82  }83 84  .section-title {85    font-size: 44px;86    font-weight: 800;87    color: #12306a;88    margin: 28px 0 22px 0;89  }90  .divider {91    height: 2px;92    background: #e7e9f0;93    margin: 12px -40px 24px -40px;94  }95 96  .fare-cards {97    display: grid;98    grid-template-columns: 1fr 1fr;99    gap: 24px;100    margin: 8px 0 34px 0;101  }102  .card {103    border: 3px solid #d6deed;104    border-radius: 22px;105    padding: 28px;106    min-height: 220px;107    display: flex;108    flex-direction: column;109    justify-content: space-between;110  }111  .card.selected {112    background: #e7f1ff;113    border-color: #7ea8e8;114  }115  .card.disabled {116    background: #fafbfe;117    color: #c8cfe1;118  }119  .card h4 {120    font-size: 36px;121    margin: 0 0 8px 0;122    color: #19407a;123  }124  .chip-row {125    display: flex;126    align-items: center;127    gap: 14px;128    color: #4a67a1;129    font-size: 30px;130  }131  .price-note {132    font-size: 34px;133    font-weight: 800;134    color: #2b4f96;135  }136 137  .terms-title {138    font-size: 40px;139    font-weight: 800;140    color: #12306a;141    margin: 28px 0 18px 0;142  }143  .terms-body {144    color: #4a5e90;145    font-size: 32px;146    line-height: 1.55;147  }148 149  /* Passenger section */150  .passenger-card {151    margin-top: 40px;152    padding-top: 10px;153  }154  .passenger-header {155    display: flex;156    align-items: center;157    justify-content: space-between;158    padding: 22px 0;159    font-size: 36px;160    color: #3a4e89;161  }162  .passenger-title {163    display: flex;164    align-items: center;165    gap: 16px;166  }167  .list {168    margin: 10px 0 0 14px;169    color: #4a5e90;170    font-size: 32px;171  }172  .list .dot {173    width: 10px; height: 10px; background: #4a5e90; border-radius: 50%; display:inline-block; margin-right: 14px;174  }175 176  .line {177    display: flex;178    align-items: center;179    justify-content: space-between;180    font-size: 34px;181    color: #3a4e89;182    margin-top: 30px;183  }184  .total {185    margin-top: 16px;186    display: flex;187    align-items: baseline;188    justify-content: space-between;189  }190  .total .label {191    font-size: 36px;192    color: #12306a;193    font-weight: 700;194  }195  .total .small {196    font-weight: 500;197    opacity: 0.7;198  }199  .total .amount {200    font-size: 44px;201    font-weight: 900;202    color: #12306a;203  }204 205  .section-shadow {206    height: 16px;207    background: linear-gradient(to bottom, rgba(17,42,100,0) 0%, rgba(0,0,0,0.05) 100%);208    margin: 26px -40px 0 -40px;209  }210 211  /* Sticky bottom area */212  .sticky {213    position: absolute;214    left: 0;215    right: 0;216    bottom: 0;217    background: #eef1f6;218    padding: 26px 40px 48px 40px;219    box-shadow: 0 -2px 8px rgba(0,0,0,0.06) inset;220  }221  .cta {222    height: 116px;223    background: #ff6f70;224    color: #ffffff;225    border-radius: 26px;226    display: flex;227    align-items: center;228    justify-content: center;229    font-size: 38px;230    font-weight: 700;231    letter-spacing: 0.3px;232  }233 234  /* Simple utility icons */235  .person-icon, .arrow-up {236    width: 40px; height: 40px; fill: #3a4e89;237  }238</style>239</head>240<body>241<div id="render-target">242 243  <div class="header-wrap">244    <!-- Status bar -->245    <div class="status-bar">246      <div class="status-left">247        <span>5:22</span>248        <span>◦</span>249        <span>✉️</span>250      </div>251      <div class="status-right">252        <div class="status-dot"></div>253        <div class="battery"><div class="battery-fill"></div></div>254      </div>255    </div>256 257    <!-- App bar -->258    <div class="app-bar">259      <div class="row">260        <div class="app-title">261          <!-- Back icon -->262          <svg class="icon" viewBox="0 0 24 24">263            <path d="M15.5 4.5L7 12l8.5 7.5" stroke="#fff" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>264          </svg>265          <div class="title-text">266            <div class="route">Amsterda... › Rotterdam Centraal</div>267            <div class="subtitle">Fri, Oct 20, 1 passenger</div>268          </div>269        </div>270        <!-- Share icon -->271        <svg class="icon" viewBox="0 0 24 24" opacity="0.7">272          <path d="M18 8a3 3 0 10-2.9-3.6l-7 3.5a3 3 0 100 4.2l7 3.5A3 3 0 1016 14" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>273        </svg>274      </div>275    </div>276  </div>277 278  <div class="content">279    <div class="divider"></div>280 281    <div class="section-title">Fare conditions</div>282 283    <div class="fare-cards">284      <div class="card selected">285        <div>286          <h4>Standard</h4>287          <div class="chip-row">288            <svg width="28" height="28" viewBox="0 0 24 24" fill="#4a67a1">289              <path d="M3 7a2 2 0 012-2h10a2 2 0 012 2v7a2 2 0 01-2 2H5a2 2 0 01-2-2V7zm14 0H5v7h12V7z"/>290            </svg>291            <span>Semi refundable</span>292          </div>293        </div>294        <div class="price-note">+$0</div>295      </div>296 297      <div class="card disabled">298        <div style="font-size:34px; line-height:1.35; color:#d1d7e8;">299          There is only 1 fare available for this journey300        </div>301      </div>302    </div>303 304    <div class="terms-title">Fare terms</div>305    <div class="terms-body">306      <strong style="color:#2b4f96;">Standard</strong><br>307      Ticket is only valid for the chosen route and departure date on any train except high-speed trains.<br>308      This ticket can be refunded for free up until the day before departure. This ticket cannot be refunded on the departure date. Exchanges are only possible through cancellation and re-booking.309    </div>310 311    <div class="section-shadow"></div>312 313    <div class="passenger-card">314      <div class="passenger-header">315        <div class="passenger-title">316          <svg class="person-icon" viewBox="0 0 24 24">317            <path d="M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4.2 0-7.5 2.1-7.5 4.7V21h15v-2.3C19.5 16.1 16.2 14 12 14z"/>318          </svg>319          <span>1 passenger</span>320        </div>321        <svg class="arrow-up" viewBox="0 0 24 24">322          <path d="M6 14l6-6 6 6" fill="none" stroke="#3a4e89" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>323        </svg>324      </div>325 326      <div class="list">327        <span class="dot"></span>328        Adult 1329      </div>330 331      <div class="line">332        <div>Tickets  × 1</div>333        <div>$23.34</div>334      </div>335 336      <div class="total">337        <div class="label">Total <span class="small">(taxes included)</span></div>338        <div class="amount">$23.34</div>339      </div>340    </div>341  </div>342 343  <div class="sticky">344    <div class="cta">Go to passenger details</div>345  </div>346 347</div>348</body>349</html>