GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Train Search - Amsterdam to London</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #F3F3F4;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15    color: #222;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    background: #ffffff;22    padding: 0 40px;23    display: flex;24    align-items: center;25    justify-content: space-between;26  }27  .status-left {28    font-weight: 600;29    font-size: 42px;30    color: #444;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .dot {38    width: 44px; height: 44px; background:#AFAFAF; border-radius: 10px;39  }40 41  /* Header */42  .header {43    background: #ffffff;44    padding: 10px 40px 28px 40px;45    box-shadow: 0 1px 0 rgba(0,0,0,0.05);46  }47  .header-row {48    display: flex;49    align-items: center;50    justify-content: center;51    position: relative;52    margin-top: 6px;53  }54  .back-btn {55    position: absolute;56    left: 0;57    top: 0;58    width: 80px; height: 80px;59    display: flex; align-items: center; justify-content: center;60    cursor: default;61  }62  .title {63    font-size: 54px;64    font-weight: 800;65    color: #1E1E1E;66    letter-spacing: 0.2px;67  }68 69  /* Dates row */70  .dates {71    display: flex;72    align-items: center;73    gap: 32px;74    padding: 26px 40px 28px 40px;75    background: #ffffff;76  }77  .date-item {78    display: flex;79    flex-direction: column;80    align-items: center;81    width: 130px;82    color: #3c3c3c;83  }84  .date-item .day {85    font-size: 38px; font-weight: 700;86  }87  .date-item .dow {88    margin-top: 6px;89    font-size: 28px; color: #9C9C9C;90  }91  .date-item.active {92    background: #FFEFE4;93    border-radius: 30px;94    padding: 18px 22px;95  }96  .divider-vert {97    width: 2px; height: 60px; background: #E4E4E4; margin-left: auto;98  }99  .icon-btn {100    width: 84px; height: 84px; margin-left: 24px;101    border-radius: 24px;102    display: flex; align-items: center; justify-content: center;103    border: 2px solid #E6E6E6;104  }105 106  /* Promo */107  .promo {108    margin: 24px 40px;109    background: #ffffff;110    border-radius: 28px;111  }112  .promo-inner {113    border: 3px solid #7EB3FF;114    color: #2D6CF6;115    border-radius: 26px;116    padding: 28px 34px;117    display: flex;118    align-items: center;119    font-size: 36px;120    font-weight: 600;121    justify-content: space-between;122  }123 124  /* Card */125  .card {126    margin: 18px 40px 0 40px;127    background: #ffffff;128    border-radius: 32px;129    box-shadow: 0 8px 26px rgba(0,0,0,0.06);130    padding: 34px;131  }132  .brand {133    width: 240px; height: 60px;134    background: #E0E0E0; border: 1px solid #BDBDBD;135    display: flex; align-items: center; justify-content: center;136    color: #757575; border-radius: 10px;137    font-size: 26px;138    margin-bottom: 18px;139  }140  .times {141    display: grid;142    grid-template-columns: 1fr 220px 1fr;143    align-items: center;144    gap: 12px;145    margin: 8px 0 16px 0;146  }147  .time {148    font-size: 64px; font-weight: 800;149  }150  .duration {151    text-align: center;152    color: #9A9A9A; font-size: 28px; font-weight: 600;153    position: relative;154  }155  .duration:before, .duration:after {156    content: "";157    position: absolute; top: 50%; width: 160px; height: 2px; background: #E5E5E5;158  }159  .duration:before { left: -176px; }160  .duration:after { right: -176px; }161 162  .stations {163    display: grid;164    grid-template-columns: 1fr 1fr;165    gap: 20px;166    color: #666;167    font-size: 36px;168    line-height: 1.25;169  }170  .pill {171    margin-top: 28px;172    display: inline-flex;173    align-items: center;174    gap: 12px;175    background: #EEF1F4;176    color: #32363A;177    padding: 16px 24px;178    border-radius: 999px;179    font-weight: 700;180    font-size: 30px;181  }182  .price {183    float: right;184    margin-top: -10px;185    text-align: right;186  }187  .price .amount {188    color: #EB6D2A;189    font-size: 48px;190    font-weight: 800;191  }192  .price .unit {193    color: #9B9B9B;194    font-size: 30px;195    margin-left: 6px;196  }197 198  .end-text {199    text-align: center;200    margin: 48px 0 0;201    color: #B7B7B7;202    font-size: 40px;203    font-weight: 700;204  }205 206  /* Bottom floating controls */207  .floating-controls {208    position: absolute;209    left: 50%;210    transform: translateX(-50%);211    bottom: 190px;212    width: 760px;213    background: #ffffff;214    border-radius: 100px;215    box-shadow: 0 10px 30px rgba(0,0,0,0.15);216    padding: 26px 34px;217    display: flex; align-items: center; justify-content: space-between;218    font-size: 36px; font-weight: 700; color: #3a3a3a;219  }220  .split {221    width: 2px; height: 44px; background: #E8E8E8;222  }223  .control {224    display: flex; align-items: center; gap: 16px;225  }226 227  /* Bottom system bar */228  .system-bottom {229    position: absolute; bottom: 0; left: 0; right: 0;230    height: 120px; background: #000;231  }232  .home-indicator {233    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);234    width: 220px; height: 10px; background: #E6E6E6; border-radius: 8px; opacity: 0.9;235  }236</style>237</head>238<body>239<div id="render-target">240 241  <!-- Status Bar -->242  <div class="status-bar">243    <div class="status-left">12:29</div>244    <div class="status-icons">245      <div style="opacity:.85;">246        <svg width="40" height="40" viewBox="0 0 24 24" fill="#9C9C9C" xmlns="http://www.w3.org/2000/svg">247          <circle cx="12" cy="3" r="2"/>248          <path d="M6 7h12v10a4 4 0 0 1-4 4H10a4 4 0 0 1-4-4V7z" fill="#C8C8C8"/>249        </svg>250      </div>251      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">252        <path d="M2 18h2a8 8 0 0 1 8-8V8a10 10 0 0 0-10 10z" fill="#9C9C9C"/>253        <path d="M2 14h2a12 12 0 0 1 12-12V0A14 14 0 0 0 2 14z" fill="#C1C1C1"/>254      </svg>255      <svg width="54" height="54" viewBox="0 0 24 24" fill="none">256        <rect x="2" y="6" width="18" height="12" rx="3" stroke="#9C9C9C" stroke-width="2"/>257        <rect x="20" y="9" width="2" height="6" rx="1" fill="#9C9C9C"/>258        <rect x="4" y="8" width="14" height="8" rx="2" fill="#C1C1C1"/>259      </svg>260    </div>261  </div>262 263  <!-- Header -->264  <div class="header">265    <div class="header-row">266      <div class="back-btn" aria-hidden="true">267        <svg width="54" height="54" viewBox="0 0 24 24" fill="none">268          <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>269        </svg>270      </div>271      <div class="title">Amsterdam ⇌ London</div>272    </div>273 274    <!-- Dates -->275    <div class="dates">276      <div class="date-item">277        <div class="day">26 Oct</div>278        <div class="dow">Thu</div>279      </div>280      <div class="date-item active">281        <div class="day" style="color:#F1792D;">27 Oct</div>282        <div class="dow" style="color:#D38864;">Fri</div>283      </div>284      <div class="date-item">285        <div class="day">28 Oct</div>286        <div class="dow">Sat</div>287      </div>288      <div class="date-item">289        <div class="day">29 Oct</div>290        <div class="dow">Sun</div>291      </div>292      <div class="date-item">293        <div class="day">30 Oct</div>294        <div class="dow">Mon</div>295      </div>296      <div class="date-item">297        <div class="day">31 Oct</div>298        <div class="dow">Tue</div>299      </div>300      <div class="divider-vert"></div>301      <div class="icon-btn" aria-hidden="true">302        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">303          <rect x="3" y="5" width="18" height="16" rx="2" stroke="#3C3C3C" stroke-width="2"/>304          <path d="M8 3v4M16 3v4" stroke="#3C3C3C" stroke-width="2" stroke-linecap="round"/>305          <path d="M3 10h18" stroke="#3C3C3C" stroke-width="2"/>306        </svg>307      </div>308    </div>309  </div>310 311  <!-- Promo banner -->312  <div class="promo">313    <div class="promo-inner">314      <div>Free 4G eSIM for your Europe train tickets!</div>315      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">316        <path d="M9 6l6 6-6 6" stroke="#2D6CF6" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>317      </svg>318    </div>319  </div>320 321  <!-- Ticket card -->322  <div class="card">323    <div class="brand">[IMG: eurostar logo]</div>324 325    <div class="times">326      <div class="time">07:47</div>327      <div class="duration">4h 13m</div>328      <div class="time" style="text-align:right;">11:00</div>329    </div>330 331    <div class="stations">332      <div>333        Amsterdam<br>Central334      </div>335      <div style="text-align:right;">336        London St Pancras<br>International337      </div>338    </div>339 340    <div class="pill">341      <div style="width:18px;height:18px;border-radius:50%;background:#9BA9B6;"></div>342      0 transfers343      <svg width="26" height="26" viewBox="0 0 24 24" fill="none">344        <path d="M8 10l4 4 4-4" stroke="#5F6A72" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>345      </svg>346    </div>347 348    <div class="price">349      <span class="amount">US$ 402.49</span>350      <span class="unit">/pax</span>351    </div>352    <div style="clear: both;"></div>353  </div>354 355  <div class="end-text">You've Klooked to the end</div>356 357  <!-- Floating controls -->358  <div class="floating-controls">359    <div class="control">360      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">361        <path d="M3 4h18l-8 9v6l-2-1v-5L3 4z" stroke="#444" stroke-width="2" stroke-linejoin="round"/>362      </svg>363      Filters364    </div>365    <div class="split"></div>366    <div class="control">367      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">368        <path d="M7 15l5 5 5-5M7 9l5-5 5 5" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>369      </svg>370      Sort: Time371    </div>372  </div>373 374  <!-- Bottom system bar -->375  <div class="system-bottom">376    <div class="home-indicator"></div>377  </div>378 379</div>380</body>381</html>