GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Route Information UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #eaf3ff;13    color: #1f2a35;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    background: #0b0b0b;24    color: #ffffff;25    font-size: 40px;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30  }31  .status-bar .left { flex: 1; }32  .status-bar .center { flex: 1; text-align: center; opacity: 0; }33  .status-bar .right { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 18px; }34  .status-icon {35    width: 40px; height: 40px; display: inline-block;36  }37 38  /* App bar */39  .app-bar {40    position: absolute;41    top: 110px;42    left: 0;43    width: 1080px;44    height: 170px;45    background: #2f3f55;46    color: #ffffff;47    display: flex;48    align-items: center;49    padding: 0 36px;50    box-sizing: border-box;51    box-shadow: 0 2px 6px rgba(0,0,0,0.2);52  }53  .app-bar .title {54    font-size: 60px;55    font-weight: 600;56    margin-left: 18px;57  }58  .app-bar .spacer { flex: 1; }59  .icon-btn {60    width: 72px; height: 72px; display: flex; justify-content: center; align-items: center; border-radius: 36px;61  }62 63  /* Cards */64  .card {65    position: relative;66    margin: 36px;67    margin-top: 320px; /* space beneath app bar */68    background: #ffffff;69    border-radius: 26px;70    box-shadow: 0 8px 14px rgba(0,0,0,0.06);71    padding: 36px;72    box-sizing: border-box;73  }74  .card + .card { margin-top: 24px; }75 76  .route-header {77    display: flex;78    align-items: center;79    font-size: 52px;80    font-weight: 700;81    color: #1f2a35;82  }83  .route-sub {84    margin-top: 10px;85    display: flex;86    justify-content: space-between;87    font-size: 40px;88    color: #3b5068;89  }90  .duration {91    display: flex; align-items: center; gap: 12px;92  }93  .divider {94    height: 2px; background: #e6edf7; margin: 28px 0;95  }96 97  /* Timeline */98  .timeline {99    position: relative;100    padding-left: 72px;101  }102  .tl-row {103    display: flex;104    align-items: center;105    margin: 30px 0;106  }107  .tl-time {108    width: 150px;109    font-size: 48px;110    font-weight: 700;111    color: #152235;112  }113  .tl-dot {114    width: 42px; height: 42px; border-radius: 50%;115    border: 7px solid #2f3f55;116    box-sizing: border-box;117    margin: 0 24px 0 0;118  }119  .tl-dot.blue {120    border-color: #2e82ff;121  }122  .tl-content {123    font-size: 54px;124    font-weight: 700;125    color: #152235;126  }127  .tl-sub {128    font-size: 40px;129    color: #5f6e83;130    margin-left: 216px;131  }132  .tl-line {133    position: absolute;134    left: 132px;135    top: 20px;136    width: 4px;137    height: 230px;138    background: #d7deea;139  }140 141  .railway-line {142    display: flex; justify-content: space-between; align-items: center;143    margin-top: 30px;144    font-size: 40px; color: #2f3f55;145  }146  .train-icon {147    width: 140px; height: 48px; border-radius: 8px; background: #dfe6f2;148  }149 150  .note {151    margin-top: 34px;152    text-align: center;153    font-size: 44px;154    color: #5a6b84;155  }156  .link {157    margin-top: 22px;158    text-align: center;159    font-size: 48px;160    color: #2e82ff;161    font-weight: 600;162  }163  .caret {164    width: 20px; height: 20px; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 22px solid #4c5f7a;165    margin: 18px auto 0 auto;166  }167 168  /* Info card */169  .info-title {170    font-size: 56px;171    font-weight: 700;172    color: #1f2a35;173    margin-bottom: 12px;174  }175  .info-text {176    font-size: 40px;177    line-height: 1.45;178    color: #3b5068;179  }180 181  /* Organized transfer */182  .transfer-row {183    display: flex; align-items: center; gap: 20px;184  }185  .pill {186    width: 66px; height: 44px; border-radius: 22px; background: #e5f7e9; border: 2px solid #3ec06b; display: flex; align-items: center; justify-content: center;187  }188  .pill-dot {189    width: 26px; height: 26px; border-radius: 50%; background: #3ec06b;190  }191  .transfer-title {192    font-size: 54px; font-weight: 700; color: #1f2a35;193  }194  .transfer-text {195    margin-top: 24px; font-size: 40px; line-height: 1.5; color: #3b5068;196  }197 198  /* Bottom button */199  .bottom-bar {200    position: absolute;201    bottom: 0;202    left: 0;203    width: 1080px;204    height: 220px;205    display: flex;206    align-items: center;207    justify-content: center;208    padding-bottom: 40px;209    box-sizing: border-box;210    background: linear-gradient(to top, rgba(234,243,255,1), rgba(234,243,255,0.6));211  }212  .primary-btn {213    width: 1000px;214    height: 140px;215    background: #4da6ff;216    border-radius: 28px;217    display: flex; align-items: center; justify-content: center;218    color: #ffffff; font-size: 58px; font-weight: 700;219    box-shadow: 0 8px 12px rgba(0,0,0,0.1);220  }221</style>222</head>223<body>224<div id="render-target">225 226  <!-- Status bar -->227  <div class="status-bar">228    <div class="left">8:45</div>229    <div class="center"></div>230    <div class="right">231      <!-- simple warning icon -->232      <svg class="status-icon" viewBox="0 0 24 24">233        <polygon points="12,2 22,20 2,20" fill="#ffcc00"></polygon>234      </svg>235      <!-- battery -->236      <svg class="status-icon" viewBox="0 0 28 18">237        <rect x="1" y="3" width="22" height="12" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>238        <rect x="3" y="5" width="18" height="8" fill="#ffffff"></rect>239        <rect x="24" y="6" width="3" height="6" fill="#ffffff"></rect>240      </svg>241      <span style="font-size:36px">100%</span>242    </div>243  </div>244 245  <!-- App bar -->246  <div class="app-bar">247    <div class="icon-btn">248      <svg width="54" height="54" viewBox="0 0 24 24">249        <path d="M15 19l-7-7 7-7" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>250      </svg>251    </div>252    <div class="title">Route information</div>253    <div class="spacer"></div>254    <div class="icon-btn">255      <svg width="54" height="54" viewBox="0 0 24 24">256        <path d="M18 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 14a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 22a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill="#ffffff"/>257        <path d="M8 11l8-5M8 13l8 5" stroke="#ffffff" stroke-width="2" fill="none"/>258      </svg>259    </div>260  </div>261 262  <!-- Route card -->263  <div class="card" style="margin-top: 320px;">264    <div class="route-header">Route</div>265    <div class="route-sub">266      <div>Sun 11/5</div>267      <div class="duration">268        <svg width="40" height="40" viewBox="0 0 24 24">269          <circle cx="12" cy="12" r="9" fill="none" stroke="#2f3f55" stroke-width="2"></circle>270          <path d="M12 6v6l4 2" stroke="#2f3f55" stroke-width="2" fill="none" stroke-linecap="round"/>271        </svg>272        <span>Duration 5 h 40 min</span>273      </div>274    </div>275    <div class="divider"></div>276 277    <div class="timeline">278      <div class="tl-line"></div>279      <div class="tl-row">280        <div class="tl-time">10:04</div>281        <div class="tl-dot"></div>282        <div class="tl-content">BERLIN <span style="font-size:36px; color:#6b7c93; font-weight:600; margin-left:16px;">BERLIN</span></div>283      </div>284      <div class="tl-sub">Transfer 18 min Augsburg Hbf</div>285      <div class="tl-row">286        <div class="tl-time">15:44</div>287        <div class="tl-dot blue"></div>288        <div class="tl-content">ULM <span style="font-size:36px; color:#6b7c93; font-weight:600; margin-left:16px;">ULM</span></div>289      </div>290 291      <div class="railway-line">292        <div class="train-icon"></div>293        <div>Czech Railways</div>294      </div>295 296      <div class="note">Расписание недоступно</div>297      <div class="link">To conceal the detailed timetable</div>298      <div class="caret"></div>299    </div>300  </div>301 302  <!-- Information card -->303  <div class="card">304    <div class="info-title">Information:</div>305    <div class="info-text">306      No seat numbering plans available. Even without a seat reservation your tickets are still valid, and you can sit in any vacant unreserved seat.307    </div>308  </div>309 310  <!-- Organized transfer card -->311  <div class="card">312    <div class="transfer-row">313      <div class="pill"><div class="pill-dot"></div></div>314      <div class="transfer-title">Organized transfer</div>315    </div>316    <div class="transfer-text">317      The carrier controls the timely transfer of the passenger to another mode of vehicle. If the passenger is late, the carrier can wait.318    </div>319  </div>320 321  <!-- Bottom button -->322  <div class="bottom-bar">323    <div class="primary-btn">Next</div>324  </div>325 326</div>327</body>328</html>