GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Train Results</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14  }15  /* Top status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 90px;22    background: #1E0A77;23    color: #ffffff;24    display: flex;25    align-items: center;26    padding: 0 32px;27    box-sizing: border-box;28    font-size: 30px;29    letter-spacing: 0.3px;30  }31  .status-left { display: flex; align-items: center; gap: 22px; }32  .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }33  /* App bar */34  .app-bar {35    position: absolute;36    top: 90px;37    left: 0;38    width: 1080px;39    height: 140px;40    background: #1E0A77;41    color: #ffffff;42    display: flex;43    align-items: center;44    box-sizing: border-box;45    padding: 0 32px;46  }47  .back-icon { width: 56px; height: 56px; margin-right: 24px; }48  .route-title {49    font-size: 42px;50    font-weight: 500;51  }52 53  /* Date bar */54  .date-bar {55    position: absolute;56    top: 230px;57    left: 0;58    width: 1080px;59    height: 100px;60    background: #F1F1F1;61    color: #444;62    display: flex;63    align-items: center;64    box-sizing: border-box;65    padding: 0 32px;66    font-size: 34px;67  }68  .date-bar .right { margin-left: auto; color: #666; }69 70  /* Earlier trains bar */71  .earlier-bar {72    position: absolute;73    top: 330px;74    left: 0;75    width: 1080px;76    height: 110px;77    background: #FFFFFF;78    border-top: 1px solid #E0E0E0;79    border-bottom: 1px solid #E0E0E0;80    display: flex;81    align-items: center;82    box-sizing: border-box;83    padding: 0 32px;84    color: #505050;85    font-size: 36px;86  }87  .earlier-bar svg { margin-right: 18px; }88  /* List area */89  .list {90    position: absolute;91    top: 440px;92    left: 0;93    width: 1080px;94  }95  .result {96    box-sizing: border-box;97    padding: 32px;98    border-bottom: 1px solid #E5E5E5;99  }100  .row {101    display: grid;102    grid-template-columns: 360px 360px 1fr;103    align-items: center;104    column-gap: 16px;105  }106  .time {107    font-size: 56px;108    font-weight: 700;109    color: #222;110  }111  .arrow-mid {112    display: flex;113    align-items: center;114    gap: 16px;115  }116  .mid-time { font-size: 56px; font-weight: 700; color: #222; }117  .price {118    justify-self: end;119    display: flex;120    align-items: center;121    gap: 14px;122  }123  .price .amount { font-size: 42px; font-weight: 700; color: #222; }124  .price .small { font-size: 28px; color: #7A7A7A; }125  .stations {126    margin-top: 6px;127    display: grid;128    grid-template-columns: 360px 360px 1fr;129    column-gap: 16px;130    align-items: center;131  }132  .station { color: #7A7A7A; font-size: 32px; }133  .ticket-type {134    justify-self: end;135    text-align: right;136    color: #7A7A7A;137    font-size: 30px;138    display: flex;139    align-items: center;140    gap: 18px;141  }142  .ticket-type .icons { display: flex; gap: 18px; }143  .notice {144    color: #F6A700;145    font-size: 30px;146    margin-top: 20px;147  }148  .details-bar {149    margin-top: 18px;150    border-top: 1px solid #E5E5E5;151    border-bottom: 1px solid #E5E5E5;152    padding: 22px 0;153    display: flex;154    align-items: center;155    color: #3F3F3F;156    font-size: 34px;157  }158  .details-bar .left {159    display: flex;160    align-items: center;161    gap: 18px;162    padding-left: 6px;163  }164  .details-bar .right {165    margin-left: auto;166    color: #6F6F6F;167    display: flex;168    align-items: center;169    gap: 10px;170  }171  .chev-right {172    width: 28px; height: 28px;173  }174  .divider { height: 16px; background: #F7F7F7; border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; }175</style>176</head>177<body>178<div id="render-target">179  <!-- Status bar -->180  <div class="status-bar">181    <div class="status-left">182      <span>10:28</span>183      <!-- simple dots to suggest icons -->184      <svg width="30" height="30"><circle cx="15" cy="15" r="5" fill="#fff"/></svg>185      <svg width="30" height="30"><rect x="8" y="8" width="14" height="14" fill="#fff"/></svg>186      <svg width="30" height="30"><polygon points="5,25 15,5 25,25" fill="#fff"/></svg>187    </div>188    <div class="status-right">189      <!-- Wi-Fi icon -->190      <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M12 20a2 2 0 1 0 .001-4.001A2 2 0 0 0 12 20zm6.6-6.6a10 10 0 0 0-13.2 0l1.4 1.4a8 8 0 0 1 10.4 0l1.4-1.4zm3.4-3.4a15 15 0 0 0-19 0l1.4 1.4a13 13 0 0 1 16.2 0l1.4-1.4z"/></svg>191      <!-- Battery icon -->192      <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M16 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v2h-2v-2H6a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h8v0zm0 2H6v8h10V8z"/></svg>193    </div>194  </div>195 196  <!-- App bar -->197  <div class="app-bar">198    <svg class="back-icon" viewBox="0 0 24 24" fill="#fff"><path d="M15.5 4.5 7 12l8.5 7.5-1.5 1.5L4 12l10-10z"/></svg>199    <div class="route-title">Bristol Parkway ➜ London (Any)</div>200  </div>201 202  <!-- Date bar -->203  <div class="date-bar">204    <div>Sat, Nov 18, 2023</div>205    <div class="right">Return from</div>206  </div>207 208  <!-- Earlier trains -->209  <div class="earlier-bar">210    <svg width="32" height="32" viewBox="0 0 24 24" fill="#6F6F6F"><path d="M7 10l5 5 5-5H7z"/></svg>211    <div>Earlier trains</div>212  </div>213 214  <!-- Results list -->215  <div class="list">216    <!-- Result 1 -->217    <div class="result">218      <div class="row">219        <div class="time">10:57 AM</div>220        <div class="arrow-mid">221          <svg width="36" height="36" viewBox="0 0 24 24" fill="#7A7A7A"><path d="M4 12h14l-4-4v8l4-4H4z"/></svg>222          <div class="mid-time">12:14 PM</div>223        </div>224        <div class="price">225          <div class="amount">$87.11</div>226          <svg class="chev-right" viewBox="0 0 24 24" fill="#27AE60"><path d="M9 6l6 6-6 6z"/></svg>227        </div>228      </div>229      <div class="stations">230        <div class="station">Bristol Parkway</div>231        <div class="station">London Paddington</div>232        <div class="ticket-type">233          <div class="icons">234            <!-- Bike icon -->235            <svg width="36" height="36" viewBox="0 0 24 24" fill="#9A9A9A"><path d="M5 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm14 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM12 6h3l2 4h-2l-1-2h-2l-3 6H7l3-6H9l-1-2h4z"/></svg>236            <!-- Ticket icon -->237            <svg width="36" height="36" viewBox="0 0 24 24" fill="#9A9A9A"><path d="M3 6h18v5a2 2 0 1 1 0 4v5H3v-5a2 2 0 1 1 0-4V6zm4 3h6v2H7V9zm0 5h10v2H7v-2z"/></svg>238          </div>239          <div>Super Off-Peak</div>240        </div>241      </div>242      <div class="notice">Limited tickets left</div>243      <div class="details-bar">244        <div class="left">245          <!-- simple stop icon -->246          <svg width="34" height="34" viewBox="0 0 24 24" fill="#333"><circle cx="12" cy="12" r="3"/><path d="M12 2v7M12 22v-7" stroke="#333" stroke-width="2" fill="none"/></svg>247          <div>1h 17m, Direct</div>248        </div>249        <div class="right">View stops250          <svg width="28" height="28" viewBox="0 0 24 24" fill="#7A7A7A"><path d="M9 6l6 6-6 6z"/></svg>251        </div>252      </div>253    </div>254 255    <div class="divider"></div>256 257    <!-- Result 2 -->258    <div class="result">259      <div class="row">260        <div class="time">10:58 AM</div>261        <div class="arrow-mid">262          <svg width="36" height="36" viewBox="0 0 24 24" fill="#7A7A7A"><path d="M4 12h14l-4-4v8l4-4H4z"/></svg>263          <div class="mid-time">1:05 PM</div>264        </div>265        <div class="price">266          <div class="amount">$91.88</div>267          <svg class="chev-right" viewBox="0 0 24 24" fill="#27AE60"><path d="M9 6l6 6-6 6z"/></svg>268        </div>269      </div>270      <div class="stations">271        <div class="station">Bristol Parkway</div>272        <div class="station">London Paddington</div>273        <div class="ticket-type">274          <div class="icons">275            <svg width="36" height="36" viewBox="0 0 24 24" fill="#9A9A9A"><path d="M5 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm14 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM12 6h3l2 4h-2l-1-2h-2l-3 6H7l3-6H9l-1-2h4z"/></svg>276            <svg width="36" height="36" viewBox="0 0 24 24" fill="#9A9A9A"><path d="M3 6h18v5a2 2 0 1 1 0 4v5H3v-5a2 2 0 1 1 0-4V6zm4 3h6v2H7V9zm0 5h10v2H7v-2z"/></svg>277          </div>278          <div>Super Off-Peak</div>279        </div>280      </div>281      <div class="details-bar">282        <div class="left">283          <svg width="34" height="34" viewBox="0 0 24 24" fill="#333"><circle cx="12" cy="12" r="3"/><path d="M12 2v7M12 22v-7" stroke="#333" stroke-width="2" fill="none"/></svg>284          <div>2h 7m, 1 change</div>285        </div>286        <div class="right">View stops287          <svg width="28" height="28" viewBox="0 0 24 24" fill="#7A7A7A"><path d="M9 6l6 6-6 6z"/></svg>288        </div>289      </div>290    </div>291 292    <div class="divider"></div>293 294    <!-- Result 3 -->295    <div class="result">296      <div class="row">297        <div class="time">11:57 AM</div>298        <div class="arrow-mid">299          <svg width="36" height="36" viewBox="0 0 24 24" fill="#7A7A7A"><path d="M4 12h14l-4-4v8l4-4H4z"/></svg>300          <div class="mid-time">1:14 PM</div>301        </div>302        <div class="price">303          <div class="amount">$87.11</div>304          <svg class="chev-right" viewBox="0 0 24 24" fill="#27AE60"><path d="M9 6l6 6-6 6z"/></svg>305        </div>306      </div>307      <div class="stations">308        <div class="station">Bristol Parkway</div>309        <div class="station">London Paddington</div>310        <div class="ticket-type">311          <div class="icons">312            <svg width="36" height="36" viewBox="0 0 24 24" fill="#9A9A9A"><path d="M5 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm14 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM12 6h3l2 4h-2l-1-2h-2l-3 6H7l3-6H9l-1-2h4z"/></svg>313            <svg width="36" height="36" viewBox="0 0 24 24" fill="#9A9A9A"><path d="M3 6h18v5a2 2 0 1 1 0 4v5H3v-5a2 2 0 1 1 0-4V6zm4 3h6v2H7V9zm0 5h10v2H7v-2z"/></svg>314          </div>315          <div>Super Off-Peak</div>316        </div>317      </div>318      <div class="notice">Limited tickets left</div>319      <div class="details-bar">320        <div class="left">321          <svg width="34" height="34" viewBox="0 0 24 24" fill="#333"><circle cx="12" cy="12" r="3"/><path d="M12 2v7M12 22v-7" stroke="#333" stroke-width="2" fill="none"/></svg>322          <div>1h 17m, Direct</div>323        </div>324        <div class="right">View stops325          <svg width="28" height="28" viewBox="0 0 24 24" fill="#7A7A7A"><path d="M9 6l6 6-6 6z"/></svg>326        </div>327      </div>328    </div>329 330    <div class="divider"></div>331 332    <!-- Result 4 -->333    <div class="result">334      <div class="row">335        <div class="time">12:56 PM</div>336        <div class="arrow-mid">337          <svg width="36" height="36" viewBox="0 0 24 24" fill="#7A7A7A"><path d="M4 12h14l-4-4v8l4-4H4z"/></svg>338          <div class="mid-time">2:13 PM</div>339        </div>340        <div class="price">341          <div class="amount">$87.11</div>342          <svg class="chev-right" viewBox="0 0 24 24" fill="#27AE60"><path d="M9 6l6 6-6 6z"/></svg>343        </div>344      </div>345      <div class="stations">346        <div class="station">Bristol Parkway</div>347        <div class="station">London Paddington</div>348        <div class="ticket-type">349          <div class="icons">350            <svg width="36" height="36" viewBox="0 0 24 24" fill="#9A9A9A"><path d="M5 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm14 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM12 6h3l2 4h-2l-1-2h-2l-3 6H7l3-6H9l-1-2h4z"/></svg>351            <svg width="36" height="36" viewBox="0 0 24 24" fill="#9A9A9A"><path d="M3 6h18v5a2 2 0 1 1 0 4v5H3v-5a2 2 0 1 1 0-4V6zm4 3h6v2H7V9zm0 5h10v2H7v-2z"/></svg>352          </div>353          <div>Super Off-Peak</div>354        </div>355      </div>356      <div class="notice">Limited tickets left</div>357      <div class="details-bar">358        <div class="left">359          <svg width="34" height="34" viewBox="0 0 24 24" fill="#333"><circle cx="12" cy="12" r="3"/><path d="M12 2v7M12 22v-7" stroke="#333" stroke-width="2" fill="none"/></svg>360          <div>1h 17m, Direct</div>361        </div>362        <div class="right">View stops363          <svg width="28" height="28" viewBox="0 0 24 24" fill="#7A7A7A"><path d="M9 6l6 6-6 6z"/></svg>364        </div>365      </div>366    </div>367  </div>368</div>369</body>370</html>