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>Train Results - Amsterdam to London</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #F4F4F5;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;16    color: #1E1E1E;17  }18 19  /* Status bar */20  .status-bar {21    height: 96px;22    padding: 20px 32px 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #6B6B6B;27    font-weight: 600;28    font-size: 36px;29  }30  .status-left {31    display: flex;32    align-items: center;33    gap: 18px;34  }35  .sb-dot {36    width: 38px; height: 32px; background:#BDBDBD; border-radius: 6px;37  }38  .status-right {39    display: flex; align-items: center; gap: 20px;40  }41  .sb-icon { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #9E9E9E; }42  .sb-battery {43    width: 36px; height: 22px; border: 3px solid #9E9E9E; border-radius: 4px; position: relative;44  }45  .sb-battery::after{46    content:""; position:absolute; right:-6px; top:6px; width:6px; height:10px; background:#9E9E9E; border-radius:2px;47  }48 49  /* App header */50  .app-header {51    position: relative;52    background:#FFFFFF;53    padding: 16px 32px 10px 32px;54    border-bottom-left-radius: 24px;55    border-bottom-right-radius: 24px;56  }57  .header-row {58    display: flex; align-items: center; justify-content: center;59    padding: 8px 0 6px 0;60  }61  .back-btn {62    position: absolute; left: 24px; top: 16px;63    width: 88px; height: 88px; display:flex; align-items:center; justify-content:center;64  }65  .back-btn svg { width: 44px; height: 44px; }66  .title {67    font-size: 54px; font-weight: 800; color:#232323;68  }69 70  /* Date selector */71  .date-row {72    margin-top: 10px;73    display: flex; align-items: center; gap: 30px;74    padding: 10px 12px 22px 12px;75    overflow: hidden;76  }77  .date-item {78    width: 148px;79    text-align: center;80    color:#3E3E3E;81  }82  .date-item .day { font-size: 36px; font-weight: 700; }83  .date-item .wk { font-size: 28px; color:#9E9E9E; margin-top: 6px; }84  .date-item.active {85    background: #FFEFE2;86    color:#FF7D28;87    border-radius: 28px;88    padding: 16px 0;89    width: 160px;90  }91  .date-right {92    margin-left:auto; display:flex; align-items:center; gap:20px; padding-right:6px;93  }94  .vert-divider { width:2px; height:70px; background:#E0E0E0; }95  .cal-box {96    width: 88px; height: 88px; border-radius: 22px; border: 2px solid #E0E0E0;97    display:flex; align-items:center; justify-content:center;98  }99  .cal-box svg { width: 44px; height: 44px; fill:#6B6B6B; }100 101  /* Promo card */102  .promo {103    margin: 22px 32px;104    background:#FFFFFF; border-radius: 26px;105    border: 3px solid #5A8CFF;106    padding: 28px 34px;107    color:#2F6BFF; font-size: 36px; font-weight: 600;108    display:flex; align-items:center; justify-content: space-between;109  }110  .promo .chev {111    width: 48px; height: 48px; display:flex; align-items:center; justify-content:center;112  }113  .promo .chev svg { width: 30px; height: 30px; fill:#2F6BFF; }114 115  /* Result card */116  .card {117    margin: 22px 32px 0 32px;118    background:#FFFFFF; border-radius: 34px;119    box-shadow: 0 6px 20px rgba(0,0,0,0.06);120    padding: 28px 30px;121  }122  .brand {123    display:flex; align-items:center; gap:16px; margin-bottom: 18px;124  }125  .brand .logo {126    width: 200px; height: 56px; background:#E0E0E0; border:1px solid #BDBDBD;127    display:flex; align-items:center; justify-content:center; color:#757575; font-size: 28px; border-radius: 10px;128  }129 130  .times {131    display:grid; grid-template-columns: 1fr 220px 1fr; align-items:center;132    column-gap: 10px; margin: 4px 0 10px 0;133  }134  .t-big { font-size: 72px; font-weight: 800; }135  .duration {136    text-align: center; color:#9E9E9E; font-size: 28px; position: relative;137  }138  .duration::before, .duration::after {139    content:""; position:absolute; top:36px; width:84px; height:2px; background:#E0E0E0;140  }141  .duration::before { left:-90px; }142  .duration::after { right:-90px; }143  .stations {144    display:grid; grid-template-columns: 1fr 1fr; column-gap: 20px; margin-top: 8px;145    color:#6B6B6B; font-size: 34px; line-height: 1.35;146  }147  .card-bottom {148    margin-top: 22px; display:flex; align-items:center;149  }150  .pill {151    background:#EEF2F5; color:#3A3A3A; font-weight: 600;152    border-radius: 30px; padding: 16px 26px; display:inline-flex; align-items:center; gap:16px;153    font-size: 32px;154  }155  .pill svg { width: 24px; height: 24px; }156  .price {157    margin-left:auto; font-size: 44px; font-weight: 800; color:#F06424;158  }159  .price small { font-size: 28px; color:#9E9E9E; font-weight:600; margin-left: 8px; }160 161  .end-text {162    text-align:center; margin: 44px 0 0 0; color:#B8B8B8; font-size: 40px; font-weight: 700;163  }164 165  /* Bottom floating controls */166  .bottom-bar {167    position: absolute; left: 72px; right: 72px; bottom: 150px;168    background:#FFFFFF; border-radius: 60px; box-shadow: 0 14px 30px rgba(0,0,0,0.12);169    display:flex; align-items:center; justify-content:center; gap: 34px;170    padding: 26px 34px; font-size: 36px; color:#3E3E3E; font-weight: 700;171  }172  .bottom-item { display:flex; align-items:center; gap:18px; }173  .v-sep { width: 2px; height: 48px; background:#E0E0E0; }174  .icon {175    width: 36px; height: 36px; display:inline-flex; align-items:center; justify-content:center;176  }177  .muted { color:#8F8F8F; }178 179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Status bar -->185  <div class="status-bar">186    <div class="status-left">187      <div>12:28</div>188      <div class="sb-dot"></div>189    </div>190    <div class="status-right">191      <div class="sb-icon"></div>192      <div class="sb-icon" style="border-radius:4px;"></div>193      <div class="sb-battery"></div>194    </div>195  </div>196 197  <!-- Header with title -->198  <div class="app-header">199    <div class="header-row">200      <div class="back-btn" aria-label="Back">201        <svg viewBox="0 0 24 24"><path d="M15.5 4.5 7 12l8.5 7.5" stroke="#333" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>202      </div>203      <div class="title">Amsterdam ⇌ London</div>204    </div>205 206    <!-- Dates -->207    <div class="date-row">208      <div class="date-item">209        <div class="day">26 Oct</div>210        <div class="wk">Thu</div>211      </div>212      <div class="date-item active">213        <div class="day">27 Oct</div>214        <div class="wk" style="color:#FF7D28;">Fri</div>215      </div>216      <div class="date-item">217        <div class="day">28 Oct</div>218        <div class="wk">Sat</div>219      </div>220      <div class="date-item">221        <div class="day">29 Oct</div>222        <div class="wk">Sun</div>223      </div>224      <div class="date-item">225        <div class="day">30 Oct</div>226        <div class="wk">Mon</div>227      </div>228      <div class="date-item">229        <div class="day">31 Oct</div>230        <div class="wk">Tue</div>231      </div>232 233      <div class="date-right">234        <div class="vert-divider"></div>235        <div class="cal-box" aria-label="Calendar">236          <svg viewBox="0 0 24 24">237            <path d="M7 2v3m10-3v3M3 9h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z" stroke="#6B6B6B" stroke-width="1.8" fill="none" stroke-linecap="round"/>238          </svg>239        </div>240      </div>241    </div>242  </div>243 244  <!-- Promo banner -->245  <div class="promo">246    <div>Free 4G eSIM for your Europe train tickets!</div>247    <div class="chev">248      <svg viewBox="0 0 24 24"><path d="M8 4l8 8-8 8" fill="none" stroke="#2F6BFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>249    </div>250  </div>251 252  <!-- Result card -->253  <div class="card">254    <div class="brand">255      <div class="logo">[IMG: eurostar]</div>256    </div>257 258    <div class="times">259      <div class="t-big">07:47</div>260      <div class="duration">4h 13m</div>261      <div class="t-big">11:00</div>262    </div>263 264    <div class="stations">265      <div>Amsterdam<br>Central</div>266      <div>London St Pancras<br>International</div>267    </div>268 269    <div class="card-bottom">270      <div class="pill">271        <svg viewBox="0 0 24 24"><path d="M3 6h4l2 12h10l2-8H8" fill="none" stroke="#6B6B6B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>272        <span>0 transfers</span>273        <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#6B6B6B" stroke-width="2" stroke-linecap="round"/></svg>274      </div>275      <div class="price">US$ 402.49 <small>/pax</small></div>276    </div>277  </div>278 279  <div class="end-text">You've Klooked to the end</div>280 281  <!-- Bottom floating filter/sort -->282  <div class="bottom-bar">283    <div class="bottom-item">284      <span class="icon">285        <svg viewBox="0 0 24 24"><path d="M3 6h18M6 12h12M10 18h4" stroke="#6B6B6B" stroke-width="2" stroke-linecap="round"/></svg>286      </span>287      <span>Filters</span>288    </div>289    <div class="v-sep"></div>290    <div class="bottom-item">291      <span class="icon">292        <svg viewBox="0 0 24 24"><path d="M7 4h10M9 9h6M11 14h2M8 20l4-4 4 4" stroke="#6B6B6B" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>293      </span>294      <span>Sort: Time</span>295    </div>296  </div>297 298</div>299</body>300</html>