GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Train Journey Details UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #1a1536; /* deep purple app background */13    color: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    height: 80px;19    padding: 18px 24px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #ffffff;24    font-size: 36px;25    opacity: 0.95;26  }27  .status-icons { display: flex; gap: 24px; align-items: center; }28  .sun {29    width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; opacity: 0.9;30  }31  .wifi, .battery {32    width: 34px; height: 24px; border: 2px solid #fff; border-radius: 4px;33  }34  .wifi { border-radius: 50% 50% 4px 4px; width: 34px; height: 22px; }35 36  /* App bar */37  .app-bar {38    height: 110px;39    display: flex;40    align-items: center;41    padding: 0 28px;42    gap: 24px;43  }44  .app-title { font-size: 56px; font-weight: 600; }45  .icon-btn {46    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;47    border-radius: 12px;48  }49  .spacer { flex: 1; }50 51  /* Large heading */52  .screen-heading {53    padding: 18px 32px 12px 32px;54    font-size: 64px;55    font-weight: 700;56    line-height: 1.05;57  }58 59  /* Time and duration row */60  .time-row {61    margin: 22px 0 0 0;62    padding: 24px 32px;63    display: flex;64    align-items: center;65    justify-content: space-between;66    font-size: 40px;67    border-top: 2px solid rgba(255,255,255,0.08);68    border-bottom: 2px solid rgba(255,255,255,0.08);69  }70  .time-left { display: flex; flex-direction: column; gap: 8px; }71  .time-left .main { font-size: 44px; font-weight: 600; }72  .time-right { display: flex; align-items: center; gap: 16px; color: #cfc9ff; }73  .clock {74    width: 36px; height: 36px; border: 3px solid #cfc9ff; border-radius: 50%;75    position: relative;76  }77  .clock:before { content: ""; position: absolute; width: 2px; height: 12px; background: #cfc9ff; left: 16px; top: 6px; }78  .clock:after { content: ""; position: absolute; width: 12px; height: 2px; background: #cfc9ff; left: 16px; top: 16px; }79 80  /* Tabs */81  .tabs {82    display: flex;83    gap: 40px;84    padding: 26px 32px;85  }86  .tab {87    display: flex;88    align-items: center;89    gap: 16px;90    font-size: 40px;91    color: #e9e6ff;92  }93  .tab svg { width: 42px; height: 42px; fill: #e9e6ff; }94 95  /* Update info strip */96  .update-strip {97    text-align: center;98    font-size: 36px;99    padding: 24px;100    color: #e9e6ff;101  }102  .update-strip b { color: #ffffff; }103 104  /* Timeline */105  .timeline {106    position: relative;107    margin: 20px 0 0 0;108    padding-left: 160px;109    padding-right: 40px;110  }111  .vline {112    position: absolute; left: 130px; top: 0; width: 6px; height: 640px; background: #7a6fb0; border-radius: 3px;113  }114  .stop {115    position: relative;116    min-height: 160px;117    padding-bottom: 10px;118  }119  .stop .bullet {120    position: absolute; left: 120px; top: 24px;121    width: 28px; height: 28px; border-radius: 50%; border: 6px solid #ffffff; background: #1a1536;122    box-shadow: 0 0 0 6px #7a6fb0 inset;123  }124  .stop .time {125    position: absolute; left: 32px; top: 18px; font-size: 44px; font-weight: 600;126  }127  .stop .title {128    font-size: 48px; font-weight: 700; margin-top: 12px;129  }130 131  .supplement {132    margin-top: 18px;133    background: rgba(255,255,255,0.08);134    border: 1px solid rgba(255,255,255,0.18);135    border-radius: 16px;136    padding: 18px 22px;137    font-size: 34px; color: #ffe08a;138  }139  .supplement b { color: #ffe08a; }140 141  .train-row {142    margin-top: 22px;143    display: flex;144    align-items: center;145    gap: 18px;146    font-size: 38px;147  }148  .pill {149    background: #0f0a2d;150    padding: 14px 22px;151    border-radius: 18px;152    border: 1px solid #6f64ad;153    font-weight: 700;154    font-size: 38px;155  }156  .direction { margin-top: 12px; font-size: 40px; color: #e9e6ff; }157  .arrival { font-size: 48px; font-weight: 700; margin-top: 20px; }158 159  /* Disclaimer area */160  .disclaimer {161    margin-top: 60px;162    background: #ecebf4;163    color: #1a1633;164    padding: 40px 36px;165    font-size: 34px;166    line-height: 1.5;167    border-top-left-radius: 24px;168    border-top-right-radius: 24px;169  }170  .disclaimer a { color: #1a1633; font-weight: 700; text-decoration: underline; }171 172  /* Save button */173  .save-bar {174    position: absolute;175    bottom: 100px;176    width: 100%;177    display: flex;178    justify-content: center;179  }180  .save-btn {181    width: 960px;182    background: #f4b63d;183    color: #2b1f4f;184    font-size: 44px;185    font-weight: 700;186    padding: 28px 24px;187    border-radius: 26px;188    display: flex;189    align-items: center;190    justify-content: center;191    gap: 18px;192    box-shadow: 0 6px 0 rgba(0,0,0,0.2) inset;193  }194 195  /* Share menu popup */196  .share-menu {197    position: absolute;198    right: 40px;199    top: 210px;200    width: 520px;201    background: #ffffff;202    color: #1a1633;203    border-radius: 22px;204    box-shadow: 0 16px 40px rgba(0,0,0,0.4);205    overflow: hidden;206  }207  .share-item {208    padding: 34px 32px;209    font-size: 40px;210    border-bottom: 1px solid #e5e5e5;211  }212  .share-item:last-child { border-bottom: 0; }213 214  /* Simple icons */215  svg { display: block; }216 217</style>218</head>219<body>220<div id="render-target">221 222  <!-- Status bar -->223  <div class="status-bar">224    <div>7:01</div>225    <div class="status-icons">226      <div class="sun"></div>227      <div class="wifi"></div>228      <div class="battery"></div>229    </div>230  </div>231 232  <!-- App bar -->233  <div class="app-bar">234    <div class="icon-btn">235      <svg width="48" height="48" viewBox="0 0 24 24">236        <path fill="#fff" d="M15.5 19L8.5 12l7-7-1.4-1.4L5.7 12l8.4 8.4z"/>237      </svg>238    </div>239    <div class="app-title">Details</div>240    <div class="spacer"></div>241    <div class="icon-btn">242      <svg width="48" height="48" viewBox="0 0 24 24">243        <circle cx="12" cy="5" r="2" fill="#fff"></circle>244        <circle cx="12" cy="12" r="2" fill="#fff"></circle>245        <circle cx="12" cy="19" r="2" fill="#fff"></circle>246      </svg>247    </div>248  </div>249 250  <!-- Share menu popup -->251  <div class="share-menu">252    <div class="share-item">Share as image</div>253    <div class="share-item">Share as link</div>254  </div>255 256  <!-- Heading -->257  <div class="screen-heading">258    Amsterdam Centraal<br>Centraal259  </div>260 261  <!-- Time & duration row -->262  <div class="time-row">263    <div class="time-left">264      <div class="main">06:55 - 07:36</div>265      <div>Sat 21 Oct</div>266    </div>267    <div class="time-right">268      <div class="clock"></div>269      <div>0h 41m</div>270    </div>271  </div>272 273  <!-- Tabs -->274  <div class="tabs">275    <div class="tab">276      <svg viewBox="0 0 24 24">277        <rect x="3" y="5" width="18" height="2"></rect>278        <rect x="3" y="11" width="18" height="2"></rect>279        <rect x="3" y="17" width="18" height="2"></rect>280      </svg>281      <div>View as list</div>282    </div>283    <div class="tab" style="margin-left: 60px;">284      <svg viewBox="0 0 24 24">285        <path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 14 6 14s6-8.8 6-14c0-3.3-2.7-6-6-6zm0 8.5c-1.3 0-2.5-1.1-2.5-2.5S10.7 5.5 12 5.5s2.5 1.1 2.5 2.5S13.3 10.5 12 10.5z" fill="#e9e6ff"/>286      </svg>287      <div>View on map</div>288    </div>289  </div>290 291  <!-- Update strip -->292  <div class="update-strip">293    Last timetable update: <b>12 October 2023</b>294  </div>295 296  <!-- Timeline route -->297  <div class="timeline">298    <div class="vline"></div>299 300    <!-- Departure stop -->301    <div class="stop">302      <div class="bullet"></div>303      <div class="time">06:55</div>304      <div class="title">Amsterdam Centraal</div>305 306      <div class="supplement">307        ⚠ Supplement required. <span style="color:#ffffff; text-decoration: underline;">Read more</span>308      </div>309 310      <div class="train-row">311        <div class="pill">IC 1014</div>312        <div>Train</div>313      </div>314 315      <div class="direction">Direction <b>Rotterdam Centraal</b></div>316    </div>317 318    <!-- Arrival stop -->319    <div class="stop" style="margin-top: 60px;">320      <div class="bullet" style="top: 10px; border-color:#ffffff;"></div>321      <div class="time">07:36</div>322      <div class="arrival">Rotterdam Centraal</div>323    </div>324  </div>325 326  <!-- Disclaimer text -->327  <div class="disclaimer">328    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 <a href="#">carrier’s website</a> or train station boards.329  </div>330 331  <!-- Save journey button -->332  <div class="save-bar">333    <div class="save-btn">334      <svg width="40" height="40" viewBox="0 0 24 24">335        <path fill="#2b1f4f" d="M6 2h12v20l-6-4-6 4z"/>336      </svg>337      <div>Save journey</div>338    </div>339  </div>340 341</div>342</body>343</html>