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>Route information</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #222; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #E7F1FA;15  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    background: #000;21    color: #fff;22    position: relative;23    padding: 0 40px;24    display: flex;25    align-items: center;26    justify-content: space-between;27  }28  .status-time {29    font-size: 42px;30    letter-spacing: 1px;31    margin-left: 12px;32  }33  .status-icons {34    display: flex;35    gap: 24px;36    align-items: center;37  }38  .status-icons svg { fill: #fff; opacity: 0.95; }39 40  /* App bar */41  .app-bar {42    height: 170px;43    background: #3E4956;44    color: #fff;45    display: flex;46    align-items: center;47    padding: 0 32px;48    box-sizing: border-box;49  }50  .app-bar .title {51    font-size: 56px;52    font-weight: 600;53    margin-left: 18px;54  }55  .app-bar .spacer { flex: 1; }56  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }57 58  /* Content area */59  .content {60    padding: 28px 30px 20px;61    box-sizing: border-box;62  }63  .card {64    background: #fff;65    border-radius: 28px;66    padding: 34px 36px;67    margin: 20px 0;68    box-shadow: 0 1px 0 rgba(0,0,0,0.02);69  }70 71  /* Schedule block */72  .schedule { padding-top: 28px; padding-bottom: 28px; }73  .row {74    display: grid;75    grid-template-columns: 160px 70px 1fr 380px;76    align-items: center;77    column-gap: 22px;78    margin: 8px 0;79  }80  .time {81    font-size: 60px;82    font-weight: 700;83    color: #0F1923;84  }85  .city {86    font-size: 56px;87    font-weight: 600;88    color: #0F1923;89  }90  .station {91    font-size: 32px;92    color: #8B96A3;93  }94  .dot {95    width: 32px; height: 32px; border-radius: 50%;96    border: 6px solid #9BA7B4;97    box-sizing: border-box;98    position: relative;99    margin-left: 8px;100  }101  .dot.active {102    border-color: #19A6FF;103  }104  .dot.active::after {105    content: "";106    position: absolute;107    width: 16px; height: 16px; border-radius: 50%;108    background: #19A6FF;109    top: 50%; left: 50%; transform: translate(-50%, -50%);110  }111  .divider {112    height: 2px;113    background: #E6EEF6;114    margin: 26px 0;115  }116 117  /* Rating row */118  .rating-row {119    display: flex;120    align-items: center;121    justify-content: space-between;122  }123  .rating-left { display: flex; align-items: center; gap: 16px; }124  .stars { display: flex; gap: 8px; align-items: center; }125  .stars svg { width: 44px; height: 44px; }126  .carrier { color: #6E7A86; font-size: 36px; }127 128  .center-link {129    text-align: center;130    color: #1AA6FF;131    font-size: 44px;132    margin-top: 18px;133    text-decoration: underline;134  }135  .chevron {136    display: flex; justify-content: center; padding: 8px 0 6px;137  }138 139  /* Transport photos */140  .photos-title {141    text-align: center;142    font-size: 48px;143    font-weight: 600;144    color: #28323C;145    margin-bottom: 22px;146  }147  .photos {148    display: flex;149    gap: 26px;150    justify-content: space-between;151  }152  .img-ph {153    background: #E0E0E0;154    border: 1px solid #BDBDBD;155    border-radius: 10px;156    width: 476px;157    height: 300px;158    display: flex;159    align-items: center;160    justify-content: center;161    color: #757575;162    font-size: 28px;163    text-align: center;164  }165 166  /* Info card typography */167  .label {168    font-size: 48px;169    font-weight: 600;170    color: #2B3640;171    margin-bottom: 14px;172  }173  .big-number {174    font-size: 54px;175    font-weight: 700;176    margin: 6px 0 6px;177  }178  .muted {179    color: #8B96A3;180    font-size: 34px;181  }182 183  /* Bonus card */184  .bonus {185    display: flex;186    align-items: center;187    gap: 22px;188  }189  .bonus .text { font-size: 44px; }190  .accent { color: #1AA6FF; font-weight: 700; }191  .subnote { margin-top: 18px; font-size: 34px; color: #8B96A3; }192 193  /* Next button */194  .next-wrap { padding: 12px 6px 0; }195  .next-btn {196    width: 100%;197    height: 150px;198    border-radius: 28px;199    background: linear-gradient(180deg, #12A9FF 0%, #0E96FF 100%);200    box-shadow: 0 10px 0 rgba(0,0,0,0.06);201    display: flex; align-items: center; justify-content: center;202    color: #fff;203    font-size: 56px; font-weight: 700;204  }205 206  /* Home indicator */207  .home-indicator {208    position: absolute;209    bottom: 18px;210    left: 50%;211    transform: translateX(-50%);212    width: 360px;213    height: 16px;214    background: #DADDE1;215    border-radius: 8px;216  }217</style>218</head>219<body>220<div id="render-target">221 222  <!-- Status bar -->223  <div class="status-bar">224    <div class="status-time">11:05</div>225    <div class="status-icons">226      <!-- simple wifi/triangle/battery style icons -->227      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 3C7.5 3 3.5 4.7 1 7l2 2c2.1-2 5.2-3 9-3s6.9 1 9 3l2-2C20.5 4.7 16.5 3 12 3zM12 9c-3.1 0-5.6 1-7.5 2.6L7 14c1.2-1 2.9-1.6 5-1.6s3.8.6 5 1.6l2.5-2.4C17.6 10 15.1 9 12 9zM12 15c-1.7 0-3 .7-3.9 1.6L12 21l3.9-4.4C15 15.7 13.7 15 12 15z"/></svg>228      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2 1 21h22L12 2zm0 4.7L19.3 19H4.7L12 6.7z"/></svg>229      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M16 4h-1V2H9v2H8C6.9 4 6 4.9 6 6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H8V6h8v12z"/></svg>230    </div>231  </div>232 233  <!-- App bar -->234  <div class="app-bar">235    <div class="icon-btn">236      <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>237    </div>238    <div class="title">Route information</div>239    <div class="spacer"></div>240    <div class="icon-btn">241      <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.2 3.2 0 0 0 0-1.39l7.02-4.11A2.99 2.99 0 1 0 15 5c0 .23.03.45.08.66L8.05 9.77A2.99 2.99 0 1 0 9 12c0-.23-.03-.45-.08-.66l7.11 4.17c.05.17.08.35.08.54a3 3 0 1 0 2.89-2.97z"/></svg>242    </div>243  </div>244 245  <!-- Content -->246  <div class="content">247 248    <!-- Schedule Card -->249    <div class="card schedule">250      <div class="row">251        <div class="time">08:10</div>252        <div class="dot"></div>253        <div class="city">Antwerp</div>254        <div class="station">Antwerp Rooseveltplaats</div>255      </div>256      <div class="row">257        <div class="time">09:00</div>258        <div class="dot active"></div>259        <div class="city">Brussels</div>260        <div class="station">Brussels-North station</div>261      </div>262 263      <div class="divider"></div>264 265      <div class="rating-row">266        <div class="rating-left">267          <!-- simple bus icon -->268          <svg width="72" height="36" viewBox="0 0 64 24" fill="#6F7D89">269            <path d="M6 6h34c4 0 6 2 10 6v6h-4a5 5 0 1 1-10 0H20a5 5 0 1 1-10 0H6V6zm40 6h10c-3-3-5-4-8-4H42v4z"/>270          </svg>271          <div class="stars">272            <!-- 4 blue stars and 1 light -->273            <svg viewBox="0 0 24 24"><path fill="#1AA6FF" d="m12 17.3-6.18 3.7 1.64-7.03L2 9.24l7.19-.62L12 2l2.81 6.62 7.19.62-5.46 4.73 1.64 7.03z"/></svg>274            <svg viewBox="0 0 24 24"><path fill="#1AA6FF" d="m12 17.3-6.18 3.7 1.64-7.03L2 9.24l7.19-.62L12 2l2.81 6.62 7.19.62-5.46 4.73 1.64 7.03z"/></svg>275            <svg viewBox="0 0 24 24"><path fill="#1AA6FF" d="m12 17.3-6.18 3.7 1.64-7.03L2 9.24l7.19-.62L12 2l2.81 6.62 7.19.62-5.46 4.73 1.64 7.03z"/></svg>276            <svg viewBox="0 0 24 24"><path fill="#1AA6FF" d="m12 17.3-6.18 3.7 1.64-7.03L2 9.24l7.19-.62L12 2l2.81 6.62 7.19.62-5.46 4.73 1.64 7.03z"/></svg>277            <svg viewBox="0 0 24 24"><path fill="#B7E4FF" d="m12 17.3-6.18 3.7 1.64-7.03L2 9.24l7.19-.62L12 2l2.81 6.62 7.19.62-5.46 4.73 1.64 7.03z"/></svg>278          </div>279        </div>280        <div class="carrier">FlixBus</div>281      </div>282 283      <div class="center-link">To show the detailed timetable</div>284      <div class="chevron">285        <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#6FA4C7" d="M7 10l5 5 5-5H7z"/></svg>286      </div>287    </div>288 289    <!-- Transport photos -->290    <div class="card">291      <div class="photos-title">Transport photos</div>292      <div class="photos">293        <div class="img-ph">[IMG: Green coach bus exterior]</div>294        <div class="img-ph">[IMG: Two green buses front view]</div>295      </div>296    </div>297 298    <!-- Information -->299    <div class="card">300      <div class="label">Information:</div>301      <div class="big-number">299</div>302      <div class="muted">Important Information:</div>303    </div>304 305    <!-- Bonuses -->306    <div class="card">307      <div class="bonus">308        <svg width="54" height="54" viewBox="0 0 24 24" fill="#6E7A86"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm0 2a8 8 0 1 1 0 16A8 8 0 0 1 12 4zm0 2.5A5.5 5.5 0 1 0 12 18a5.5 5.5 0 0 0 0-11z"/></svg>309        <div class="text">You can get <span class="accent">6</span> bonuses</div>310      </div>311      <div class="subnote">Only registered users can use bonuses for payment</div>312    </div>313 314    <!-- Ticket return conditions -->315    <div class="card">316      <div class="label">Ticket return conditions:</div>317      <div class="big-number">299</div>318      <div class="muted">until 15 min before departure - 1.99 EUR</div>319      <div class="muted">less than 15 min before departure - Ticket is not refundable</div>320    </div>321 322    <!-- Next button -->323    <div class="next-wrap">324      <div class="next-btn">Next</div>325    </div>326  </div>327 328  <div class="home-indicator"></div>329</div>330</body>331</html>