GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Travel details UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0; left: 0;20    width: 1080px; height: 120px;21    background: #7A7A7A;22    color: #fff;23    font-size: 40px;24  }25  .status-left { position: absolute; left: 40px; top: 36px; font-weight: 500; }26  .status-right { position: absolute; right: 40px; top: 30px; display: flex; align-items: center; gap: 28px; }27  .status-right svg { width: 48px; height: 48px; fill: #fff; }28 29  /* App bar */30  .app-bar {31    position: absolute;32    top: 120px; left: 0;33    width: 1080px; height: 150px;34    background: #0A6EC8;35    color: #fff;36  }37  .app-bar .title {38    position: absolute; left: 120px; top: 48px;39    font-size: 56px; font-weight: 600;40  }41  .app-bar .back {42    position: absolute; left: 40px; top: 54px;43  }44  .app-bar .menu {45    position: absolute; right: 40px; top: 54px; display: flex; gap: 16px;46  }47  .app-bar svg { width: 54px; height: 54px; fill: #fff; }48 49  /* Map placeholder */50  .map {51    position: absolute;52    top: 270px; left: 0;53    width: 1080px; height: 1150px;54    background: #E0E0E0;55    border-top: 1px solid #BDBDBD;56    border-bottom: 1px solid #BDBDBD;57    display: flex; align-items: center; justify-content: center;58    color: #757575; font-size: 40px; font-weight: 500;59  }60 61  /* Floating cards */62  .card {63    position: absolute;64    left: 40px;65    width: 1000px;66    background: #fff;67    border-radius: 32px;68    box-shadow: 0 12px 24px rgba(0,0,0,0.18);69  }70  .route-card {71    top: 1040px; height: 240px;72    display: flex; flex-direction: column; align-items: center; justify-content: center;73    gap: 26px; text-align: center;74  }75  .route-row {76    width: 900px; display: flex; align-items: center; justify-content: center; gap: 28px;77    color: #0A6EC8; font-weight: 700; font-size: 46px;78  }79  .route-row .line {80    display: flex; align-items: center; gap: 20px;81  }82  .route-row .dot {83    width: 20px; height: 20px; background: #0A6EC8; border-radius: 50%;84  }85  .route-row .segment {86    width: 140px; height: 8px; background: #0A6EC8; border-radius: 6px;87  }88  .route-card .subtitle {89    color: #4a4a4a; font-size: 34px; font-weight: 500;90  }91 92  .info-card {93    top: 1298px; height: 150px; display: flex; align-items: center; justify-content: space-between;94    padding: 0 36px; font-size: 36px; color: #2d2d2d;95  }96  .info-left { font-weight: 600; }97  .info-right { display: flex; align-items: center; gap: 40px; color: #555; }98  .info-right .metric { display: flex; align-items: center; gap: 14px; font-weight: 600; }99  .info-right svg { width: 40px; height: 40px; fill: #6b6b6b; }100 101  /* Details list section */102  .details {103    position: absolute;104    top: 1458px; left: 0;105    width: 1080px; height: 720px;106    background: #F2F3F5;107    border-top-left-radius: 32px;108    border-top-right-radius: 32px;109  }110  .details-inner {111    position: absolute; left: 40px; right: 40px; top: 40px;112    background: transparent;113  }114  .timeline {115    position: absolute; left: 220px; top: 0; bottom: 0;116    width: 6px; background: #0A6EC8; border-radius: 4px;117  }118  .tl-dot {119    position: absolute; left: 210px; width: 26px; height: 26px; background: #fff; border: 6px solid #0A6EC8; border-radius: 50%;120  }121  .tl-dot.dot1 { top: 40px; }122  .tl-dot.dot2 { top: 240px; }123  .tl-dot.dot3 { top: 380px; }124  .item {125    display: flex; align-items: flex-start; gap: 28px;126    padding: 24px 0; border-bottom: 1px solid #E5E6E8;127  }128  .time {129    width: 160px; font-size: 56px; font-weight: 700; color: #1676C7;130  }131  .content {132    flex: 1;133  }134  .title {135    font-size: 54px; font-weight: 800; color: #1676C7;136  }137  .sub {138    display: flex; align-items: center; gap: 18px;139    font-size: 36px; color: #2c2c2c; margin-top: 10px;140  }141  .sub .bold { font-weight: 800; }142  .people { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; }143  .people svg { width: 38px; height: 38px; fill: #7f7f7f; }144  .chev { margin-left: auto; }145  .station-title {146    font-size: 50px; font-weight: 700; color: #2d2d2d;147  }148 149  /* Bottom nav */150  .bottom-nav {151    position: absolute; bottom: 80px; left: 0;152    width: 1080px; height: 180px; background: #fff; border-top: 1px solid #E0E0E0;153    display: flex; align-items: center; justify-content: space-around;154  }155  .nav-item {156    width: 200px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;157    color: #5b5b5b; font-size: 34px; font-weight: 600;158  }159  .nav-item svg { width: 50px; height: 50px; fill: #5b5b5b; }160  .nav-item.active {161    background: #E8F2FD; border-radius: 20px; color: #0A6EC8;162  }163  .nav-item.active svg { fill: #0A6EC8; }164 165  /* Home indicator */166  .home-indicator {167    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);168    width: 300px; height: 12px; background: #000; opacity: 0.75; border-radius: 6px;169  }170</style>171</head>172<body>173<div id="render-target">174 175  <!-- Status bar -->176  <div class="status-bar">177    <div class="status-left">12:21</div>178    <div class="status-right">179      <!-- Location icon -->180      <svg viewBox="0 0 24 24"><path d="M12 2c-3.3 0-6 2.7-6 6 0 4.4 6 14 6 14s6-9.6 6-14c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5z"/></svg>181      <!-- Do not disturb icon -->182      <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm-6 9h12v2H6z"/></svg>183      <!-- Battery icon + percent -->184      <svg viewBox="0 0 24 24"><path d="M20 7h1v10h-1v1H3V6h17v1zM5 8v8h13V8H5z"/></svg>185      <div style="font-size:38px; font-weight:700;">100%</div>186    </div>187  </div>188 189  <!-- App bar -->190  <div class="app-bar">191    <div class="back">192      <svg viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7-1.5 1.5L5.5 12l8.5-8.5z"/></svg>193    </div>194    <div class="title">Travel details</div>195    <div class="menu">196      <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>197    </div>198  </div>199 200  <!-- Map placeholder -->201  <div class="map">[IMG: Map of Amsterdam route]</div>202 203  <!-- Floating route card -->204  <div class="card route-card">205    <div class="route-row">206      <div style="max-width: 360px; text-align: right;">Amsterdam<br>Bijlmer ArenA</div>207      <div class="line">208        <div class="dot"></div>209        <div class="segment"></div>210        <div class="segment"></div>211        <div class="dot"></div>212      </div>213      <div style="max-width: 300px; text-align: left;">Amstelpark</div>214    </div>215    <div class="subtitle"></div>216  </div>217 218  <!-- Floating info card -->219  <div class="card info-card">220    <div class="info-left">Wed, August 16, 03:12 - 03:35</div>221    <div class="info-right">222      <div class="metric">223        <svg viewBox="0 0 24 24"><path d="M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1zm1 11V5h-2v8h7v-2h-5z"/></svg>224        <span>0:23</span>225      </div>226      <div class="metric">227        <svg viewBox="0 0 24 24"><path d="M6 7h12v2H6zm0 4h12v2H6zm0 4h12v2H6z"/></svg>228        <span>0x</span>229      </div>230      <div class="metric">231        <svg viewBox="0 0 24 24"><path d="M6 7a3 3 0 1 1 6 0H6zm9 0a3 3 0 1 1 6 0h-6zM3 21v-2c0-2.2 1.8-4 4-4h4c2.2 0 4 1.8 4 4v2H3zm11 0v-2c0-1.1.9-2 2-2h3c1.1 0 2 .9 2 2v2h-7z"/></svg>232        <span>Accessible</span>233      </div>234    </div>235  </div>236 237  <!-- Details section -->238  <div class="details">239    <div class="details-inner">240      <div class="timeline"></div>241      <div class="tl-dot dot1"></div>242      <div class="tl-dot dot2"></div>243      <div class="tl-dot dot3"></div>244 245      <!-- Item 1 -->246      <div class="item" style="padding-top: 10px;">247        <div class="time">03:12</div>248        <div class="content">249          <div class="title">Amsterdam Bijlmer ArenA</div>250          <div class="sub">251            <!-- Metro icon -->252            <svg viewBox="0 0 24 24" style="width:50px; height:50px; fill:#0A6EC8;"><path d="M7 3h10a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3l2 3h-2l-2-3H9l-2 3H5l2-3a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3zm0 3v6h10V6H7z"/></svg>253            <span class="bold">GVB metro 50</span>254            <span>Direction Isolatorweg</span>255            <div class="people">256              <svg viewBox="0 0 24 24"><path d="M7 7a3 3 0 1 0 .001 6.001A3 3 0 0 0 7 7zm10 0a3 3 0 1 0 .001 6.001A3 3 0 0 0 17 7zM2 20v-1c0-2.2 1.8-4 4-4h2c2.2 0 4 1.8 4 4v1H2zm10 0v-1c0-1.7 1.3-3 3-3h2c1.7 0 3 1.3 3 3v1h-8z"/></svg>257              <svg viewBox="0 0 24 24"><path d="M7 7a3 3 0 1 0 .001 6.001A3 3 0 0 0 7 7zM2 20v-1c0-2.2 1.8-4 4-4h2c2.2 0 4 1.8 4 4v1H2z"/></svg>258              <svg viewBox="0 0 24 24"><circle cx="17" cy="10" r="3"/><path d="M12 20v-1c0-1.7 1.3-3 3-3h2c1.7 0 3 1.3 3 3v1h-8z"/></svg>259            </div>260            <span style="color:#666;">5 stops (9 min)</span>261            <div class="chev">262              <svg viewBox="0 0 24 24" style="width:46px; height:46px; fill:#999;"><path d="M9 5l7 7-7 7-1.5-1.5L13 12 7.5 6.5z"/></svg>263            </div>264          </div>265        </div>266      </div>267 268      <!-- Item 2 -->269      <div class="item">270        <div class="time">03:21</div>271        <div class="content">272          <div class="station-title">Station RAI Amsterdam</div>273        </div>274      </div>275 276      <!-- Item 3 -->277      <div class="item">278        <div class="time">03:21</div>279        <div class="content">280          <div class="station-title">Station RAI Amsterdam</div>281        </div>282      </div>283    </div>284  </div>285 286  <!-- Bottom navigation -->287  <div class="bottom-nav">288    <div class="nav-item">289      <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5z"/></svg>290      <div>Travel advice</div>291    </div>292    <div class="nav-item">293      <svg viewBox="0 0 24 24"><path d="M12 2l10 18H2L12 2zm-1 6h2v6h-2zm0 8h2v2h-2z"/></svg>294      <div>Disruptions</div>295    </div>296    <div class="nav-item">297      <svg viewBox="0 0 24 24"><path d="M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1zm1 11V5h-2v8h7v-2h-5z"/></svg>298      <div>Departures</div>299    </div>300    <div class="nav-item">301      <svg viewBox="0 0 24 24"><path d="M7 6h10l1 4H6l1-4zm-1 6h12l-1 6H7l-1-6zm3 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8 0a2 2 0 1 0 .001-4.001A2 2 0 0 0 17 21z"/></svg>302      <div>Shop</div>303    </div>304    <div class="nav-item active">305      <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>306      <div>More</div>307    </div>308  </div>309 310  <!-- Home indicator -->311  <div class="home-indicator"></div>312 313</div>314</body>315</html>