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: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #eaf3fd;15    color: #2f3b47;16  }17 18  /* Status bar (OS) */19  .status-bar {20    height: 110px;21    background: #000;22    color: #fff;23    display: flex;24    align-items: center;25    padding: 0 36px;26    font-size: 42px;27    letter-spacing: 1px;28    box-sizing: border-box;29  }30  .status-bar .time { flex: 1; text-align: left; }31  .status-icons {32    display: flex; gap: 26px; align-items: center;33  }34  .status-icons .dot {35    width: 24px; height: 24px; background: #fff; border-radius: 50%;36  }37  .battery {38    width: 48px; height: 26px; border: 3px solid #fff; border-radius: 6px; position: relative;39  }40  .battery:after {41    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #fff; border-radius: 2px;42  }43  .battery .level {44    position: absolute; top: 2px; left: 2px; height: 18px; width: 32px; background: #fff;45  }46 47  /* App bar */48  .app-bar {49    height: 150px;50    background: #3f4b5a;51    display: flex;52    align-items: center;53    padding: 0 34px;54    box-sizing: border-box;55    color: #fff;56  }57  .app-bar .title {58    font-size: 56px;59    font-weight: 600;60    margin-left: 24px;61    flex: 1;62  }63  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }64 65  /* Content */66  .content { padding: 26px; padding-bottom: 160px; box-sizing: border-box; }67  .card {68    background: #ffffff;69    border-radius: 28px;70    padding: 36px;71    box-sizing: border-box;72    margin: 26px 0;73    box-shadow: 0 1px 0 rgba(0,0,0,0.02);74  }75 76  .time-row {77    display: grid;78    grid-template-columns: 170px 56px 1fr;79    align-items: center;80    gap: 22px;81    margin: 8px 0;82  }83  .time-row .time {84    font-size: 64px;85    font-weight: 700;86    letter-spacing: 1px;87  }88  .bullet {89    width: 34px; height: 34px; border-radius: 50%;90    border: 5px solid #a8b2bd;91    position: relative;92  }93  .bullet.active { border-color: #18a7ff; }94  .bullet.active:after {95    content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #18a7ff; top: 50%; left: 50%; transform: translate(-50%, -50%);96  }97  .city-wrap { display: flex; align-items: baseline; gap: 22px; }98  .city { font-size: 56px; font-weight: 600; }99  .station { font-size: 36px; color: #8c96a2; }100 101  .divider { height: 2px; background: #e6edf6; margin: 28px 0; }102 103  .rating-row {104    display: flex; align-items: center; justify-content: space-between;105    font-size: 40px;106  }107  .rating {108    display: flex; align-items: center; gap: 6px;109    font-size: 46px;110  }111  .star { color: #18a7ff; }112  .star.gray { color: #c8d2dd; }113  .brand { color: #6c7784; font-size: 38px; }114 115  .link-center {116    text-align: center;117    color: #10a8ff;118    font-size: 48px;119    margin: 18px 0 6px;120    text-decoration: underline;121  }122  .chevron {123    width: 36px; height: 36px; margin: 8px auto 0; opacity: 0.7;124  }125 126  .photos-title { text-align: center; font-size: 48px; font-weight: 600; margin-bottom: 26px; }127  .photos-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }128  .img-ph {129    height: 300px;130    background: #E0E0E0;131    border: 1px solid #BDBDBD;132    border-radius: 12px;133    display: flex; align-items: center; justify-content: center;134    color: #757575; text-align: center; padding: 10px;135    font-size: 34px;136  }137 138  .info-title { font-size: 48px; font-weight: 600; margin-bottom: 12px; }139  .info-value { font-size: 54px; font-weight: 700; margin: 4px 0 6px; }140  .muted { color: #8d98a4; font-size: 40px; }141 142  .bonuses-row { display: flex; gap: 24px; align-items: center; }143  .bonuses-icon {144    width: 60px; height: 60px; border-radius: 50%;145    background: linear-gradient(145deg, #ecf4ff, #d7e6ff);146    border: 2px solid #c6d9f3;147    display: grid; place-items: center;148  }149  .bonuses-title { font-size: 48px; }150  .bonuses-title .highlight { color: #10a8ff; font-weight: 700; }151  .subnote { margin-top: 18px; color: #8d98a4; font-size: 38px; }152 153  .cta {154    position: absolute; left: 26px; right: 26px; bottom: 130px;155    height: 128px; background: linear-gradient(180deg, #11adff, #0093ff);156    color: #fff; border-radius: 32px; display: flex; align-items: center; justify-content: center;157    font-size: 52px; font-weight: 700;158    box-shadow: 0 8px 20px rgba(0,144,255,0.35);159  }160 161  .nav-pill {162    position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%);163    width: 300px; height: 14px; background: #d5d9e0; border-radius: 10px;164  }165</style>166</head>167<body>168<div id="render-target">169  <!-- Status bar -->170  <div class="status-bar">171    <div class="time">11:07</div>172    <div class="status-icons">173      <div class="dot"></div>174      <div class="battery"><div class="level"></div></div>175    </div>176  </div>177 178  <!-- App bar -->179  <div class="app-bar">180    <div class="icon-btn" aria-label="Back">181      <!-- back arrow -->182      <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff">183        <path d="M14.5 3.5L6 12l8.5 8.5-1.4 1.4L3.2 12l9.9-9.9 1.4 1.4z"/>184      </svg>185    </div>186    <div class="title">Route information</div>187    <div class="icon-btn" aria-label="Share">188      <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff">189        <path d="M18 16a3 3 0 0 0-2.4 1.2L8.9 13a3.3 3.3 0 0 0 0-2l6.6-4.2A3 3 0 1 0 15 5a3 3 0 0 0 .1.7l-6.6 4.2a3 3 0 1 0 0 4.2l6.6 4.2A3 3 0 1 0 18 16z"/>190      </svg>191    </div>192  </div>193 194  <div class="content">195    <!-- Card: route data -->196    <div class="card">197      <div class="time-row">198        <div class="time">08:10</div>199        <div class="bullet"></div>200        <div class="city-wrap">201          <div class="city">Antwerp</div>202          <div class="station">Antwerp Rooseveltplaats</div>203        </div>204      </div>205      <div class="time-row">206        <div class="time">09:00</div>207        <div class="bullet active"></div>208        <div class="city-wrap">209          <div class="city">Brussels</div>210          <div class="station">Brussels‑North station</div>211        </div>212      </div>213 214      <div class="divider"></div>215 216      <div class="rating-row">217        <div style="display:flex; align-items:center; gap:16px;">218          <!-- simple bus icon -->219          <svg width="92" height="36" viewBox="0 0 92 36" fill="#6c7784">220            <rect x="4" y="8" width="64" height="18" rx="3"></rect>221            <rect x="68" y="12" width="18" height="14" rx="2"></rect>222            <circle cx="22" cy="30" r="4"></circle>223            <circle cx="58" cy="30" r="4"></circle>224          </svg>225        </div>226        <div class="rating" aria-label="Rating: 4 of 5">227          <span class="star">★</span>228          <span class="star">★</span>229          <span class="star">★</span>230          <span class="star">★</span>231          <span class="star gray">★</span>232        </div>233        <div class="brand">FlixBus</div>234      </div>235 236      <div class="link-center">To show the detailed timetable</div>237      <div class="chevron">238        <svg width="36" height="36" viewBox="0 0 24 24" fill="#7f8a97">239          <path d="M6 9l6 6 6-6-1.4-1.4L12 12.2 7.4 7.6 6 9z"/>240        </svg>241      </div>242    </div>243 244    <!-- Card: photos -->245    <div class="card">246      <div class="photos-title">Transport photos</div>247      <div class="photos-row">248        <div class="img-ph">[IMG: Green FlixBus coach in front of station]</div>249        <div class="img-ph">[IMG: Two green buses front view with MEINFERNBUS.DE]</div>250      </div>251    </div>252 253    <!-- Card: Information -->254    <div class="card">255      <div class="info-title">Information:</div>256      <div class="info-value">299</div>257      <div class="muted">Important Information:</div>258    </div>259 260    <!-- Card: Bonuses -->261    <div class="card">262      <div class="bonuses-row">263        <div class="bonuses-icon">264          <svg width="30" height="30" viewBox="0 0 24 24" fill="#6eaefc">265            <circle cx="12" cy="12" r="10" fill="#cfe4ff"></circle>266            <circle cx="12" cy="12" r="4" fill="#6eaefc"></circle>267          </svg>268        </div>269        <div class="bonuses-title">You can get <span class="highlight">6</span> bonuses</div>270      </div>271      <div class="subnote">Only registered users can use bonuses for payment</div>272    </div>273 274    <!-- Card: Ticket return conditions -->275    <div class="card">276      <div class="info-title">Ticket return conditions:</div>277      <div class="info-value">299</div>278      <div class="muted">until 15 min before departure - 1.99 EUR</div>279      <div class="muted">less than 15 min before departure - Ticket is not refundable</div>280    </div>281  </div>282 283  <!-- Bottom action -->284  <div class="cta">Next</div>285  <div class="nav-pill"></div>286</div>287</body>288</html>