GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Live Tracker UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;15    color: #111;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    background: #000;22    color: #fff;23    display: flex;24    align-items: center;25    padding: 0 36px;26    box-sizing: border-box;27    font-weight: 600;28    font-size: 36px;29    letter-spacing: 0.5px;30    justify-content: space-between;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .status-dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: 0.9; }38 39  /* Header / top section */40  .top-area {41    padding: 36px;42    box-sizing: border-box;43  }44  .top-row {45    display: flex;46    align-items: center;47    justify-content: space-between;48    margin-bottom: 20px;49  }50  .title-wrap {51    display: flex;52    align-items: center;53    gap: 28px;54  }55  .title-text {56    display: flex;57    flex-direction: column;58    gap: 4px;59  }60  .title-text h1 {61    margin: 0;62    font-size: 48px;63    font-weight: 800;64    letter-spacing: 0.2px;65  }66  .subtitle {67    color: #6b7280;68    font-size: 34px;69    font-weight: 500;70  }71 72  .rail-row {73    margin-top: 24px;74    display: flex;75    align-items: center;76    justify-content: space-between;77  }78  .rail-left {79    display: flex;80    align-items: center;81    gap: 22px;82    font-size: 40px;83    font-weight: 600;84  }85  .rail-right {86    display: flex;87    align-items: center;88    gap: 16px;89  }90 91  .share-btn {92    margin-top: 26px;93    border: 1px solid #DADCE0;94    border-radius: 20px;95    height: 120px;96    display: flex;97    align-items: center;98    justify-content: space-between;99    padding: 0 32px;100    box-sizing: border-box;101    font-size: 40px;102    font-weight: 600;103    color: #111;104    background: #fff;105    box-shadow: 0 1px 0 #eee inset;106  }107 108  /* Timeline */109  .timeline {110    position: relative;111    padding: 24px 36px 0 36px;112    box-sizing: border-box;113  }114  .line {115    position: absolute;116    left: 100px;117    top: 40px;118    bottom: 580px;119    width: 6px;120    background: #6b7280;121    border-radius: 3px;122    opacity: 0.7;123  }124  .stop {125    position: relative;126    padding-left: 160px;127    margin: 44px 0 60px 0;128  }129  .stop .dot {130    position: absolute;131    left: 86px;132    top: 4px;133    width: 36px;134    height: 36px;135    background: #6b7280;136    border-radius: 50%;137  }138  .stop .time {139    font-size: 56px;140    font-weight: 800;141    color: #1f2937;142    letter-spacing: 0.3px;143  }144  .stop .place {145    font-size: 48px;146    font-weight: 700;147    margin-left: 28px;148  }149 150  /* Change card */151  .change-card {152    margin: 20px 36px;153    background: #f3f4f6;154    border-radius: 28px;155    padding: 32px;156    box-sizing: border-box;157    display: flex;158    align-items: center;159    gap: 28px;160  }161  .change-text {162    display: flex;163    flex-direction: column;164    gap: 8px;165  }166  .change-title {167    font-size: 42px;168    font-weight: 800;169  }170  .change-sub {171    font-size: 34px;172    color: #6b7280;173    font-weight: 600;174  }175 176  /* Second rail row */177  .rail-row.secondary {178    margin: 24px 36px 0 36px;179  }180  .rail-sub {181    font-size: 34px;182    color: #6b7280;183    font-weight: 600;184    margin-top: 4px;185  }186 187  /* Link row with ellipsis */188  .link-row {189    display: flex;190    align-items: center;191    gap: 28px;192    padding: 24px 36px;193    color: #1a73e8;194    font-size: 38px;195    font-weight: 600;196  }197 198  /* second timeline section */199  .timeline2 {200    position: relative;201    padding: 10px 36px 0 36px;202    box-sizing: border-box;203  }204  .line2 {205    position: absolute;206    left: 100px;207    top: 0;208    bottom: 440px;209    width: 6px;210    background: #6b7280;211    border-radius: 3px;212    opacity: 0.7;213  }214 215  /* Bottom sheet button */216  .bottom-sheet {217    position: absolute;218    left: 0;219    right: 0;220    bottom: 100px;221    padding: 0 36px;222    box-sizing: border-box;223  }224  .track-btn {225    height: 120px;226    border: 1px solid #DADCE0;227    border-radius: 24px;228    background: #fff;229    display: flex;230    align-items: center;231    justify-content: center;232    font-size: 44px;233    font-weight: 800;234    box-shadow: 0 8px 16px rgba(0,0,0,0.08);235  }236 237  /* Simple image placeholders */238  .img-placeholder {239    width: 140px;240    height: 56px;241    background: #E0E0E0;242    border: 1px solid #BDBDBD;243    display: flex;244    justify-content: center;245    align-items: center;246    color: #757575;247    font-size: 28px;248    border-radius: 8px;249  }250 251  /* Icon base */252  .icon-btn { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; }253  .small-icon { width: 48px; height: 48px; }254</style>255</head>256<body>257<div id="render-target">258 259  <!-- Status bar -->260  <div class="status-bar">261    <div>10:27</div>262    <div class="status-right">263      <div class="status-dot"></div>264      <div class="status-dot"></div>265      <div class="status-dot"></div>266    </div>267  </div>268 269  <!-- Header area -->270  <div class="top-area">271    <div class="top-row">272      <div class="title-wrap">273        <div class="icon-btn">274          <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#111" stroke-width="2.8" stroke-linecap="round">275            <path d="M5 5L19 19M19 5L5 19"></path>276          </svg>277        </div>278        <div class="title-text">279          <h1>Live tracker</h1>280          <div class="subtitle">6h 21m, 2 changes</div>281        </div>282      </div>283      <div class="icon-btn">284        <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#111" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">285          <path d="M3 12a9 9 0 0115-6M21 12a9 9 0 01-15 6"></path>286          <path d="M3 4v6h6M21 20v-6h-6"></path>287        </svg>288      </div>289    </div>290 291    <div class="rail-row">292      <div class="rail-left">293        <svg class="small-icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">294          <rect x="6" y="6" width="12" height="10" rx="2"></rect>295          <circle cx="9" cy="18" r="1.4"></circle>296          <circle cx="15" cy="18" r="1.4"></circle>297          <path d="M8 9h8M8 12h8"></path>298        </svg>299        <div>IC 528</div>300      </div>301      <div class="rail-right">302        <div class="img-placeholder" style="width:120px;height:48px;">[IMG: NS logo]</div>303      </div>304    </div>305 306    <div class="share-btn">307      <span>Share journey</span>308      <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">309        <circle cx="18" cy="5" r="3"></circle>310        <circle cx="6" cy="12" r="3"></circle>311        <circle cx="18" cy="19" r="3"></circle>312        <path d="M8.7 11l7-4M8.7 13l7 4"></path>313      </svg>314    </div>315  </div>316 317  <!-- First timeline section -->318  <div class="timeline">319    <div class="line"></div>320 321    <div class="stop">322      <div class="dot"></div>323      <span class="time">10:36 AM</span>324      <span class="place">Gouda</span>325    </div>326 327    <div class="stop" style="margin-top: 80px;">328      <div class="dot"></div>329      <span class="time">10:55 AM</span>330      <span class="place">Rotterdam Centraal</span>331    </div>332  </div>333 334  <!-- Change card -->335  <div class="change-card">336    <svg viewBox="0 0 24 24" width="52" height="52" fill="none" stroke="#111" stroke-width="2.4" stroke-linecap="round">337      <path d="M6 4v16M18 8v8"></path>338      <path d="M3 12h6M15 12h6"></path>339    </svg>340    <div class="change-text">341      <div class="change-title">Change at Rotterdam Centraal</div>342      <div class="change-sub">1h 3m to change</div>343    </div>344  </div>345 346  <!-- Second rail row -->347  <div class="rail-row secondary">348    <div class="rail-left">349      <svg class="small-icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">350        <rect x="6" y="6" width="12" height="10" rx="2"></rect>351        <circle cx="9" cy="18" r="1.4"></circle>352        <circle cx="15" cy="18" r="1.4"></circle>353        <path d="M8 9h8M8 12h8"></path>354      </svg>355      <div>356        <div style="font-weight:700;">ER 9340</div>357        <div class="rail-sub">to Paris Gare du Nord</div>358      </div>359    </div>360    <div class="rail-right">361      <div class="img-placeholder" style="width:180px;height:56px;">[IMG: eurostar logo]</div>362    </div>363  </div>364 365  <!-- Link row -->366  <div class="link-row">367    <svg viewBox="0 0 24 24" width="36" height="36" fill="#6b7280">368      <circle cx="12" cy="4" r="2"></circle>369      <circle cx="12" cy="12" r="2"></circle>370      <circle cx="12" cy="20" r="2"></circle>371    </svg>372    <span>View earlier stops</span>373  </div>374 375  <!-- Second timeline part -->376  <div class="timeline2">377    <div class="line2"></div>378 379    <div class="stop" style="margin-top: 40px;">380      <div class="dot"></div>381      <span class="time">11:58 AM</span>382      <span class="place">Rotterdam Centraal</span>383    </div>384 385    <div style="padding-left: 160px; margin-top: 18px; color: #1a73e8; font-size: 36px; font-weight: 600;">386      View stops387    </div>388  </div>389 390  <!-- Bottom sheet button -->391  <div class="bottom-sheet">392    <div class="track-btn">Track</div>393  </div>394 395</div>396</body>397</html>