GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Train Details Screen</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #1C1830;13    color: #EDEAF7;14  }15  .status-bar {16    height: 90px;17    padding: 20px 32px 0 32px;18    box-sizing: border-box;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #DAD6F7;23    font-size: 30px;24    opacity: 0.95;25  }26  .status-icons { display: flex; gap: 18px; align-items: center; }27  .header {28    display: flex;29    align-items: center;30    padding: 16px 28px;31    gap: 18px;32  }33  .header .title {34    font-size: 46px;35    color: #DFDBFF;36  }37  .back-icon, .menu-icon {38    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; color: #D9D2FF;39  }40  .page-dots {41    display: flex; justify-content: center; gap: 18px;42    padding: 6px 0 18px;43  }44  .page-dots span {45    width: 16px; height: 16px; border-radius: 50%; background: #5C5673;46  }47  .page-dots span.active { background: #B9B2FF; }48  .big-title {49    padding: 20px 36px 12px 36px;50    font-size: 54px;51    line-height: 70px;52    font-weight: 700;53    color: #FFFFFF;54  }55  .time-card {56    margin: 24px 0 0 0;57    padding: 26px 36px;58    background: rgba(255,255,255,0.05);59    display: flex; align-items: center; justify-content: space-between;60    border-top: 1px solid rgba(255,255,255,0.06);61    border-bottom: 1px solid rgba(255,255,255,0.06);62  }63  .time-left { display: flex; flex-direction: column; gap: 6px; }64  .time-range { font-size: 46px; color: #FFFFFF; }65  .time-sub { font-size: 32px; color: #BDB8DB; }66  .duration { display: flex; align-items: center; gap: 12px; color: #CCC6EC; font-size: 34px; }67  .action-row {68    display: flex; justify-content: space-between;69    padding: 24px 36px;70  }71  .chip {72    display: flex; align-items: center; gap: 16px;73    color: #D8D3FA; font-size: 34px;74  }75  .update-line {76    padding: 18px 36px;77    color: #C7C1EB;78    font-size: 32px;79    border-bottom: 1px solid rgba(255,255,255,0.06);80  }81  .update-line b { color: #FFFFFF; }82  /* Timeline section */83  .timeline {84    padding: 24px 36px 0 36px;85  }86  .timepoint {87    display: grid;88    grid-template-columns: 90px auto 60px;89    align-items: start;90    color: #FFFFFF;91  }92  .timepoint .time { font-size: 42px; text-align: right; padding-right: 18px; color: #FFFFFF; }93  .timepoint .place { font-size: 42px; font-weight: 600; }94  .timepoint .arrow { display: flex; align-items: center; justify-content: center; }95  .vertical-line {96    position: absolute; left: 120px; top: 980px; width: 6px; height: 390px; background: #AFA9D8;97  }98  .timeline .meta {99    margin-left: 144px;100    margin-top: 18px;101    margin-right: 36px;102    padding: 18px;103    background: rgba(255,255,255,0.06);104    border-radius: 12px;105    color: #F2EDFF;106    font-size: 30px;107  }108  .tag {109    display: inline-block;110    background: #273155;111    color: #D8DFFF;112    padding: 10px 16px;113    border-radius: 10px;114    font-weight: bold;115    margin-right: 14px;116  }117  .arrival {118    display: grid;119    grid-template-columns: 90px auto;120    align-items: center;121    padding: 26px 36px 20px;122    color: #FFFFFF;123    font-size: 42px;124  }125  .disclaimer {126    background: #D8D7DC;127    color: #1E1A33;128    padding: 28px 36px 200px;129    font-size: 34px;130    line-height: 48px;131  }132  .disclaimer a { color: #1B2B6B; text-decoration: underline; }133  /* Bottom button */134  .bottom-bar {135    position: absolute; bottom: 0; left: 0; width: 100%;136    background: #E1B044;137    padding: 24px 36px 30px;138    box-sizing: border-box;139  }140  .save-btn {141    width: 100%;142    background: #D6A53D;143    color: #261A00;144    font-size: 42px;145    font-weight: 700;146    padding: 28px 24px;147    border-radius: 16px;148    display: flex; gap: 18px; align-items: center; justify-content: center;149    letter-spacing: .3px;150  }151  /* Utility icons */152  svg { display: block; }153  .icon { width: 42px; height: 42px; }154  .small-icon { width: 36px; height: 36px; }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Status Bar -->161  <div class="status-bar">162    <div>7:01</div>163    <div class="status-icons">164      <!-- simple circle sun -->165      <svg class="small-icon" viewBox="0 0 24 24" fill="#F5D76E"><circle cx="12" cy="12" r="5"></circle></svg>166      <!-- wifi -->167      <svg class="small-icon" viewBox="0 0 24 24" fill="#D8D3FA">168        <path d="M12 18l2 2-2 2-2-2 2-2zm0-4c2.2 0 4.2.9 5.7 2.3l-1.4 1.4C15.2 16.6 13.7 16 12 16s-3.2.6-4.3 1.7l-1.4-1.4C7.8 14.9 9.8 14 12 14zM12 8c4 0 7.7 1.6 10.4 4.3l-1.4 1.4C18.8 11.5 15.5 10 12 10S5.2 11.5 3 13.7L1.6 12.3C4.3 9.6 8 8 12 8z"/>169      </svg>170      <!-- battery -->171      <svg class="small-icon" viewBox="0 0 24 24" fill="#D8D3FA"><path d="M16 7H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h13c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm2 4h3v2h-3v-2z"/></svg>172    </div>173  </div>174 175  <!-- Header -->176  <div class="header">177    <div class="back-icon">178      <svg class="icon" viewBox="0 0 24 24" fill="#D9D2FF"><path d="M15.4 3.4L7 11.8l8.4 8.4 1.4-1.4-7-7 7-7-1.4-1.4z"/></svg>179    </div>180    <div class="title">Details</div>181    <div style="margin-left:auto" class="menu-icon">182      <svg class="icon" viewBox="0 0 24 24" fill="#D9D2FF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>183    </div>184  </div>185 186  <!-- Page dots -->187  <div class="page-dots">188    <span class="active"></span>189    <span></span><span></span><span></span><span></span>190  </div>191 192  <!-- Big Title -->193  <div class="big-title">194    Amsterdam Centraal - Rotterdam Centraal195  </div>196 197  <!-- Time card -->198  <div class="time-card">199    <div class="time-left">200      <div class="time-range">06:55 - 07:36</div>201      <div class="time-sub">Sat 21 Oct</div>202    </div>203    <div class="duration">204      <svg class="icon" viewBox="0 0 24 24" fill="#C9C2EE"><path d="M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm1 12V6h-2v8h7v-2h-5z"/></svg>205      0h 41m206    </div>207  </div>208 209  <!-- Actions -->210  <div class="action-row">211    <div class="chip">212      <svg class="icon" viewBox="0 0 24 24" fill="#D9D2FF"><path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h10v2H4v-2z"/></svg>213      View as list214    </div>215    <div class="chip">216      <svg class="icon" viewBox="0 0 24 24" fill="#D9D2FF"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>217      View on map218    </div>219  </div>220 221  <div class="update-line">222    Last timetable update: <b>12 October 2023</b>223  </div>224 225  <!-- Timeline -->226  <div class="timeline">227    <div class="timepoint">228      <div class="time">06:55</div>229      <div class="place">Amsterdam Centraal</div>230      <div class="arrow">231        <svg class="icon" viewBox="0 0 24 24" fill="#D9D2FF"><path d="M7 10l5 5 5-5H7z"/></svg>232      </div>233    </div>234 235    <div class="meta">236      <div style="color:#FFCC73; display:flex; align-items:center; gap:10px; margin-bottom:10px;">237        <svg class="small-icon" viewBox="0 0 24 24" fill="#FFCC73"><circle cx="12" cy="12" r="10"/></svg>238        Supplement required — learn more239      </div>240      <div style="margin:10px 0;">241        <span class="tag">IC 1014</span>242        Train243      </div>244      <div style="color:#EAE6FF;">Direction Rotterdam Centraal</div>245    </div>246  </div>247 248  <div class="vertical-line"></div>249 250  <div class="arrival">251    <div class="time">07:36</div>252    <div>Rotterdam Centraal</div>253  </div>254 255  <!-- Disclaimer -->256  <div class="disclaimer">257    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.258  </div>259 260  <!-- Bottom Save Button -->261  <div class="bottom-bar">262    <div class="save-btn">263      <svg class="icon" viewBox="0 0 24 24" fill="#3A2A00"><path d="M6 2h12v20l-6-4-6 4V2z"/></svg>264      Save journey265    </div>266  </div>267 268</div>269</body>270</html>