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>Found routes</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #e8f2fb;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #1c2b36;17  }18 19  /* Status bar mock */20  .status-bar {21    height: 120px;22    background: #000;23  }24 25  /* Header */26  .app-bar {27    height: 160px;28    background: #2f3c49;29    display: flex;30    align-items: center;31    padding: 0 40px;32    color: #eef5fb;33  }34  .app-bar .left {35    display: flex;36    align-items: center;37    gap: 24px;38    flex: 1;39  }40  .app-title {41    font-size: 48px;42    font-weight: 600;43    letter-spacing: 0.2px;44  }45  .app-actions {46    display: flex;47    gap: 36px;48    align-items: center;49  }50  .icon {51    width: 48px;52    height: 48px;53    fill: #dbe6ef;54  }55  .icon.chevron {56    width: 56px;57    height: 56px;58    fill: #eef5fb;59  }60 61  /* Filter chips row */62  .filters {63    padding: 28px 32px 8px;64    display: flex;65    gap: 24px;66    align-items: center;67  }68  .chip {69    background: #ffffff;70    border-radius: 28px;71    padding: 26px 40px;72    min-width: 260px;73    display: flex;74    align-items: center;75    justify-content: space-between;76    box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset, 0 1px 0 rgba(0,0,0,0.04);77    color: #2b3b47;78    font-size: 36px;79    font-weight: 600;80  }81  .chip small {82    font-weight: 500;83    color: #6b7c89;84  }85  .chip-icon {86    width: 84px;87    height: 84px;88    border-radius: 24px;89    background: #ffffff;90    box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset, 0 1px 0 rgba(0,0,0,0.04);91    display: flex;92    align-items: center;93    justify-content: center;94    margin-left: auto;95  }96 97  /* Cards list */98  .list {99    padding: 8px 28px 28px;100  }101  .card {102    background: #ffffff;103    border-radius: 28px;104    margin-bottom: 34px;105    box-shadow: 0 1px 0 rgba(0,0,0,0.06);106    overflow: hidden;107  }108  .card-header {109    padding: 28px 32px 14px;110    display: flex;111    align-items: center;112    gap: 24px;113    color: #708394;114    font-size: 34px;115    font-weight: 600;116  }117  .clock {118    width: 36px;119    height: 36px;120    fill: #9fb1c0;121  }122 123  .segment {124    display: grid;125    grid-template-columns: 150px 60px 1fr;126    padding: 10px 32px 8px;127    align-items: start;128    column-gap: 20px;129  }130  .time {131    font-size: 58px;132    font-weight: 700;133    color: #0f1f2a;134    line-height: 1.1;135  }136  .stops {137    display: flex;138    flex-direction: column;139    align-items: center;140    padding-top: 6px;141    gap: 34px;142  }143  .dot {144    width: 30px;145    height: 30px;146    border-radius: 50%;147    border: 6px solid #2b3b47;148    background: #ffffff;149  }150  .dot.blue {151    border-color: #0a87ff;152  }153  .dot.green {154    border-color: #2ecc71;155    background: #2ecc71;156    width: 28px;157    height: 28px;158    border: 0;159  }160  .city {161    font-size: 50px;162    font-weight: 700;163    color: #1f2e39;164    line-height: 1.2;165  }166  .subcity {167    font-size: 30px;168    color: #8aa1b2;169    margin-left: 12px;170    font-weight: 600;171  }172  .transfer {173    margin-top: 10px;174    display: flex;175    align-items: center;176    gap: 16px;177  }178  .pill {179    background: #38c172;180    color: #fff;181    padding: 8px 18px;182    border-radius: 16px;183    font-size: 30px;184    font-weight: 700;185  }186  .link {187    color: #0a87ff;188    font-size: 32px;189    font-weight: 700;190  }191 192  .divider {193    height: 2px;194    background: #e8edf2;195    margin: 18px 32px 12px;196  }197 198  .train-img {199    margin: 10px 32px 0;200    width: 220px;201    height: 60px;202    background: #E0E0E0;203    border: 1px solid #BDBDBD;204    display: flex;205    align-items: center;206    justify-content: center;207    color: #757575;208    font-size: 26px;209    border-radius: 8px;210  }211 212  .price-bar {213    background: #0a92ff;214    color: #ffffff;215    font-weight: 800;216    font-size: 44px;217    text-align: center;218    padding: 34px 20px;219    border-bottom-left-radius: 28px;220    border-bottom-right-radius: 28px;221    margin-top: 18px;222  }223</style>224</head>225<body>226<div id="render-target">227 228  <div class="status-bar"></div>229 230  <div class="app-bar">231    <div class="left">232      <svg class="icon chevron" viewBox="0 0 24 24"><path d="M15.4 19.4 8 12l7.4-7.4 1.4 1.4L10.8 12l6 6z"/></svg>233      <div class="app-title">Found routes</div>234    </div>235    <div class="app-actions">236      <svg class="icon" viewBox="0 0 24 24"><path d="M12 3a7 7 0 0 0-7 7v3l-2 2v1h18v-1l-2-2v-3a7 7 0 0 0-7-7zm0 16a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>237      <svg class="icon" viewBox="0 0 24 24"><path d="M18 8a3 3 0 1 0-2.8-4H9a3 3 0 1 0 0 2h6.2A3 3 0 0 0 18 8zM6 10a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm12 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg>238    </div>239  </div>240 241  <div class="filters">242    <div class="chip">243      <span><small>^</small> Time</span>244      <svg class="icon" viewBox="0 0 24 24"><path d="M7 14l5-5 5 5z"/></svg>245    </div>246    <div class="chip">247      <span><small>^</small> Price</span>248      <svg class="icon" viewBox="0 0 24 24"><path d="M7 14l5-5 5 5z"/></svg>249    </div>250    <div class="chip-icon">251      <svg class="icon" viewBox="0 0 24 24"><path d="M3 7h18v2H3V7zm4 4h10v2H7v-2zm-2 4h14v2H5v-2z"/></svg>252    </div>253  </div>254 255  <div class="list">256 257    <!-- Card 1 -->258    <div class="card">259      <div class="card-header">260        <div>Sun 11/5</div>261        <svg class="clock" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.4l4 2.3-.9 1.6L11 13V6h2v6.4z"/></svg>262        <div>Duration 6 h 30 min</div>263      </div>264 265      <div class="segment">266        <div class="time">05:04</div>267        <div class="stops">268          <div class="dot"></div>269          <div class="dot green"></div>270          <div class="dot blue"></div>271        </div>272        <div>273          <div class="city">Berlin <span class="subcity">Berlin</span></div>274          <div class="transfer">275            <span class="pill">1 transfer</span>276            <span class="link">Show</span>277          </div>278        </div>279      </div>280 281      <div class="segment" style="padding-top:0">282        <div class="time">11:34</div>283        <div></div>284        <div class="city">Ulm <span class="subcity">Ulm</span></div>285      </div>286 287      <div class="divider"></div>288 289      <div class="train-img">[IMG: Train icon]</div>290 291      <div class="price-bar">from 90.42 EUR</div>292    </div>293 294    <!-- Card 2 -->295    <div class="card">296      <div class="card-header">297        <div>Sun 11/5</div>298        <svg class="clock" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.4l4 2.3-.9 1.6L11 13V6h2v6.4z"/></svg>299        <div>Duration 10 h 59 min</div>300      </div>301 302      <div class="segment">303        <div class="time">00:11</div>304        <div class="stops">305          <div class="dot"></div>306          <div class="dot green"></div>307          <div class="dot blue"></div>308        </div>309        <div>310          <div class="city">Berlin <span class="subcity">Berlin</span></div>311          <div class="transfer">312            <span class="pill">1 transfer</span>313            <span class="link">Show</span>314          </div>315        </div>316      </div>317 318      <div class="segment" style="padding-top:0">319        <div class="time">11:10</div>320        <div></div>321        <div class="city">Ulm <span class="subcity">Ulm</span></div>322      </div>323 324      <div class="divider"></div>325 326      <div class="train-img">[IMG: Train icon]</div>327 328      <div class="price-bar">from 94.63 EUR</div>329    </div>330 331    <!-- Card 3 -->332    <div class="card">333      <div class="card-header">334        <div>Sun 11/5</div>335        <svg class="clock" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.4l4 2.3-.9 1.6L11 13V6h2v6.4z"/></svg>336        <div>Duration 5 h 44 min</div>337      </div>338 339      <div class="segment">340        <div class="time">06:00</div>341        <div class="stops">342          <div class="dot"></div>343          <div class="dot green"></div>344          <div class="dot blue"></div>345        </div>346        <div>347          <div class="city">Berlin <span class="subcity">Berlin</span></div>348          <div class="transfer">349            <span class="pill">1 transfer</span>350            <span class="link">Show</span>351          </div>352        </div>353      </div>354 355      <div class="segment" style="padding-top:0">356        <div class="time">11:44</div>357        <div></div>358        <div class="city">Ulm <span class="subcity">Ulm</span></div>359      </div>360 361      <div class="divider"></div>362 363      <div class="train-img">[IMG: Train icon]</div>364 365      <div class="price-bar">from 105.16 EUR</div>366    </div>367 368  </div>369 370</div>371</body>372</html>