GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1440, initial-scale=1.0">5<title>Journey Details</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1440px;10    height: 3120px;11    position: relative;12    overflow: hidden;13    background: #f2f3f6;14    color: #111;15  }16 17  /* Header */18  .header {19    position: relative;20    width: 100%;21    height: 520px;22    background: #1a1640;23    color: #fff;24    padding: 40px 56px;25    box-sizing: border-box;26  }27  .nav-row {28    display: flex;29    align-items: center;30    gap: 28px;31    margin-top: 20px;32  }33  .back-icon {34    width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;35  }36  .title {37    font-size: 72px;38    font-weight: 700;39    letter-spacing: 0.4px;40  }41  .dots {42    margin-top: 36px;43    display: flex; gap: 22px; align-items: center;44  }45  .dot {46    width: 18px; height: 18px; border-radius: 50%;47    background: rgba(255,255,255,0.35);48  }49  .dot.active { background: rgba(255,255,255,0.8); }50  .route {51    margin-top: 36px;52    font-size: 46px;53    opacity: 0.95;54  }55 56  /* Tabs */57  .tabs {58    display: flex;59    justify-content: space-between;60    padding: 28px 56px;61    background: #ececf2;62    align-items: center;63  }64  .tab {65    display: flex; align-items: center; gap: 18px;66    color: #222;67    font-size: 40px;68    font-weight: 600;69  }70  .tab svg { width: 42px; height: 42px; fill: #222; }71 72  /* Timeline list */73  .timeline {74    padding: 10px 40px 0 40px;75  }76  .block {77    background: #fff;78    border-radius: 12px;79    padding: 38px 28px;80    margin: 18px 0;81    box-shadow: 0 1px 0 rgba(0,0,0,0.06);82  }83  .row {84    display: flex;85  }86  .time-col {87    width: 200px;88    text-align: left;89    color: #222;90    font-weight: 700;91    font-size: 44px;92  }93  .content-col {94    flex: 1;95    padding-left: 10px;96  }97  .station {98    font-size: 44px;99    color: #0f1520;100    font-weight: 700;101  }102  .minor {103    font-size: 36px;104    color: #667085;105    display: flex; align-items: center; gap: 16px;106    margin-top: 16px;107  }108  .minor svg { width: 40px; height: 40px; fill: #667085; }109 110  /* Train section with vertical rail */111  .train {112    position: relative;113    padding: 24px 24px 16px 24px;114    margin-top: 16px;115  }116  .rail {117    position: absolute;118    left: 56px; top: 24px; bottom: 24px;119    width: 8px; background: #2a1f68; border-radius: 4px;120  }121  .rail .circle {122    position: absolute; left: -8px; width: 24px; height: 24px; border-radius: 50%;123    background: #fff; border: 6px solid #2a1f68;124  }125  .rail .circle.start { top: -2px; }126  .rail .circle.end { bottom: -2px; }127 128  .train-content {129    margin-left: 120px;130  }131  .train-row {132    display: flex; align-items: center; gap: 20px;133  }134  .badge {135    background: #0f1d5a;136    color: #fff;137    padding: 8px 14px;138    border-radius: 10px;139    font-weight: 800;140    font-size: 34px;141  }142  .train-title {143    font-size: 42px;144    color: #1d2633;145    font-weight: 700;146  }147  .train-sub {148    margin-left: 120px;149    margin-top: 12px;150    font-size: 36px;151    color: #3c4858;152  }153  .stop-time {154    font-size: 44px;155    font-weight: 700;156    width: 200px;157    color: #222;158  }159  .stop-name {160    font-size: 44px;161    font-weight: 700;162    color: #0f1520;163  }164 165  /* Notice and button */166  .notice {167    margin: 30px 40px 0 40px;168    background: #f2f2f7;169    border-radius: 12px;170    padding: 28px;171    color: #333;172    font-size: 36px;173    line-height: 1.45;174  }175  .notice a { color: #0b4e9b; text-decoration: underline; }176 177  .save-bar {178    position: absolute;179    bottom: 64px;180    left: 40px;181    right: 40px;182    height: 140px;183    background: #e5b640;184    color: #1b1300;185    border-radius: 24px;186    font-size: 52px;187    font-weight: 700;188    display: flex; align-items: center; justify-content: center; gap: 24px;189    box-shadow: 0 8px 16px rgba(0,0,0,0.15);190  }191  .bookmark {192    width: 50px; height: 50px; fill: #1b1300;193  }194</style>195</head>196<body>197<div id="render-target">198 199  <div class="header">200    <div class="nav-row">201      <div class="back-icon">202        <svg viewBox="0 0 24 24">203          <path fill="#fff" d="M15.5 4l-8 8 8 8 1.4-1.4L10.3 12l6.6-6.6L15.5 4z"/>204        </svg>205      </div>206      <div class="title">Details</div>207    </div>208 209    <div class="dots">210      <div class="dot active"></div>211      <div class="dot"></div>212      <div class="dot"></div>213      <div class="dot"></div>214      <div class="dot"></div>215      <div class="dot"></div>216    </div>217 218    <div class="route">Southampton Central - Berlin Hbf (Tief)</div>219  </div>220 221  <div class="tabs">222    <div class="tab">223      <svg viewBox="0 0 24 24">224        <path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"/>225      </svg>226      <div>View as list</div>227    </div>228    <div class="tab">229      <svg viewBox="0 0 24 24">230        <path d="M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/>231      </svg>232      <div>View on map</div>233    </div>234  </div>235 236  <div class="timeline">237 238    <!-- First stop: Change trains -->239    <div class="block">240      <div class="row">241        <div class="time-col">02:24</div>242        <div class="content-col">243          <div class="station">Duisburg Hbf</div>244          <div class="minor">245            <svg viewBox="0 0 24 24">246              <path d="M7 7h4V5H5v6h2V7zm10 10h-4v2h6v-6h-2v4zM7 13H5v6h6v-2H7v-4zm12-8h-6v2h4v4h2V5z"/>247            </svg>248            <span>Change trains • 0h 27m</span>249          </div>250        </div>251      </div>252    </div>253 254    <!-- Train segment 1 -->255    <div class="block">256      <div class="train">257        <div class="rail">258          <div class="circle start"></div>259          <div class="circle end"></div>260        </div>261 262        <div class="row">263          <div class="time-col">02:51</div>264          <div class="train-content">265            <div class="station">Duisburg Hbf</div>266            <div class="train-row" style="margin-top:20px;">267              <div class="badge">ICE 920</div>268              <div class="train-title">High-speed train</div>269            </div>270            <div class="train-sub">Direction Hamburg-Altona</div>271          </div>272        </div>273 274        <div class="row" style="margin-top:36px;">275          <div class="time-col">06:50</div>276          <div class="train-content">277            <div class="station">Hamburg Hbf</div>278          </div>279        </div>280      </div>281 282      <div class="minor" style="margin-left:210px; margin-top:16px;">283        <svg viewBox="0 0 24 24">284          <path d="M7 7h4V5H5v6h2V7zm10 10h-4v2h6v-6h-2v4zM7 13H5v6h6v-2H7v-4zm12-8h-6v2h4v4h2V5z"/>285        </svg>286        <span>Change trains • 0h 45m</span>287      </div>288    </div>289 290    <!-- Train segment 2 -->291    <div class="block">292      <div class="train">293        <div class="rail">294          <div class="circle start"></div>295          <div class="circle end"></div>296        </div>297 298        <div class="row">299          <div class="time-col">07:35</div>300          <div class="train-content">301            <div class="station">Hamburg Hbf</div>302            <div class="train-row" style="margin-top:20px;">303              <div class="badge">ICE 703</div>304              <div class="train-title">High-speed train</div>305            </div>306            <div class="train-sub">Direction Muenchen Hbf</div>307          </div>308        </div>309 310        <div class="row" style="margin-top:36px;">311          <div class="time-col">09:22</div>312          <div class="train-content">313            <div class="station">Berlin Hbf (Tief)</div>314          </div>315        </div>316      </div>317    </div>318 319  </div>320 321  <div class="notice">322    Our timetable may not be 100% accurate because we rely on weekly updates from railway carriers. Changes, delays, or cancellations won’t be reflected. For the latest timetable info, please check the carrier’s website or train station boards.323  </div>324 325  <div class="save-bar">326    <svg class="bookmark" viewBox="0 0 24 24">327      <path d="M6 2h12v20l-6-4-6 4V2z"/>328    </svg>329    <div>Save journey</div>330  </div>331 332</div>333</body>334</html>