GD-ML/AndroidCode
13.4k
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>Travel details UI</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: #ffffff;15 }16 17 /* Status bar */18 .statusbar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 background: #7E7E7E;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 36px;29 box-sizing: border-box;30 font-size: 42px;31 }32 .statusbar .left { flex: 0 0 auto; }33 .statusbar .right {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 28px;38 }39 .status-icon { width: 40px; height: 40px; }40 41 /* App bar */42 .appbar {43 position: absolute;44 top: 120px;45 left: 0;46 width: 1080px;47 height: 160px;48 background: #0F72C7;49 color: #fff;50 display: flex;51 align-items: center;52 box-sizing: border-box;53 padding: 0 28px;54 }55 .appbar .title {56 font-size: 56px;57 font-weight: 600;58 margin-left: 20px;59 }60 .appbar .spacer { flex: 1; }61 .appbar .dots {62 display: flex;63 gap: 16px;64 margin-right: 12px;65 }66 .dot {67 width: 18px; height: 18px; background: #fff; border-radius: 50%;68 }69 70 /* Map placeholder */71 .map {72 position: absolute;73 top: 280px;74 left: 0;75 width: 1080px;76 height: 1000px;77 box-sizing: border-box;78 background: #E0E0E0;79 border: 1px solid #BDBDBD;80 display: flex;81 justify-content: center;82 align-items: center;83 color: #757575;84 font-size: 38px;85 text-align: center;86 }87 88 /* Floating cards */89 .card {90 position: absolute;91 left: 40px;92 width: 1000px;93 background: #fff;94 border-radius: 28px;95 box-shadow: 0 10px 24px rgba(0,0,0,0.15);96 box-sizing: border-box;97 padding: 36px 40px;98 color: #0F72C7;99 }100 .card.top { top: 1020px; }101 .route-row {102 display: flex;103 align-items: center;104 font-size: 50px;105 font-weight: 700;106 color: #0F72C7;107 }108 .route-row .via { margin-right: 24px; }109 .route-line {110 display: flex; align-items: center; gap: 10px; margin-right: 24px;111 }112 .route-circle {113 width: 20px; height: 20px; border-radius: 50%; background: #0F72C7;114 }115 .route-seg {116 width: 80px; height: 6px; background: #0F72C7; border-radius: 3px;117 }118 .route-dest {119 margin-left: auto;120 color: #0F72C7;121 font-size: 50px; font-weight: 700;122 }123 124 .card.info { top: 1220px; color: #1A1A1A; }125 .info-row {126 display: flex; align-items: center; justify-content: space-between;127 }128 .date-text {129 font-size: 40px; font-weight: 700; color: #2A2A2A;130 }131 .mini-icons {132 display: flex; align-items: center; gap: 36px;133 color: #2A2A2A;134 font-size: 34px;135 }136 .circle-icon {137 display: inline-flex; align-items: center; justify-content: center;138 width: 60px; height: 60px; border-radius: 30px; border: 2px solid #DADADA;139 color: #0F72C7;140 margin-right: 8px;141 }142 143 /* Timeline section */144 #timeline {145 position: absolute;146 top: 1420px;147 left: 0;148 width: 1080px;149 height: 740px;150 background: #F5F6F7;151 box-sizing: border-box;152 padding: 40px 40px 20px 40px;153 }154 .timeline-card {155 background: #fff;156 border-radius: 28px;157 box-shadow: 0 8px 12px rgba(0,0,0,0.08);158 padding: 24px 24px 8px 24px;159 }160 .vertical-line {161 position: absolute;162 left: 260px;163 top: 50px;164 width: 6px;165 height: 670px;166 background: #1E88E5;167 border-radius: 3px;168 }169 .marker {170 position: absolute;171 left: 247px;172 width: 32px; height: 32px;173 border-radius: 50%;174 background: #fff;175 border: 6px solid #1E88E5;176 }177 .marker.m1 { top: 80px; }178 .marker.m2 { top: 200px; }179 .marker.m3 { top: 290px; }180 .marker.m4 { top: 380px; }181 182 .row {183 display: flex; align-items: center;184 padding: 24px 0;185 border-bottom: 1px solid #ECECEC;186 }187 .row:last-child { border-bottom: none; }188 .time {189 width: 180px;190 font-size: 56px; font-weight: 700; color: #0F72C7;191 }192 .bullet-space { width: 120px; }193 .row .label {194 font-size: 46px; font-weight: 700; color: #2A2A2A;195 }196 .sub {197 font-size: 38px; color: #666; margin-left: 18px;198 }199 .right-chevron {200 margin-left: auto; color: #9A9A9A;201 }202 203 /* Bottom navigation */204 #bottom-nav {205 position: absolute;206 left: 0;207 bottom: 80px;208 width: 1080px;209 height: 220px;210 background: #FFFFFF;211 box-shadow: 0 -6px 12px rgba(0,0,0,0.08);212 display: flex; align-items: center; justify-content: space-around;213 box-sizing: border-box;214 padding: 18px 20px;215 border-top: 1px solid #E5E5E5;216 }217 .tab {218 width: 184px;219 height: 160px;220 border-radius: 24px;221 display: flex; flex-direction: column; align-items: center; justify-content: center;222 color: #2A2A2A;223 gap: 12px;224 font-size: 32px;225 }226 .tab.active {227 background: #E8F2FF;228 color: #0F72C7;229 border: 2px solid #BBD8FF;230 }231 .tab svg { width: 56px; height: 56px; }232 233 /* Gesture handle */234 .handle {235 position: absolute;236 bottom: 22px;237 left: 50%;238 transform: translateX(-50%);239 width: 240px; height: 12px;240 background: #000000;241 opacity: 0.18;242 border-radius: 6px;243 }244</style>245</head>246<body>247<div id="render-target">248 249 <!-- Status bar -->250 <div class="statusbar">251 <div class="left">12:14</div>252 <div class="right">253 <!-- simple status icons -->254 <svg class="status-icon" viewBox="0 0 24 24">255 <path d="M3 12l7 7 11-11" stroke="#fff" stroke-width="3" fill="none"/>256 </svg>257 <svg class="status-icon" viewBox="0 0 24 24">258 <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="3" fill="none"/>259 <path d="M12 6v6l4 2" stroke="#fff" stroke-width="3" fill="none"/>260 </svg>261 <svg class="status-icon" viewBox="0 0 24 24">262 <rect x="3" y="6" width="18" height="12" stroke="#fff" stroke-width="3" fill="none"/>263 <rect x="6" y="9" width="12" height="6" fill="#fff"/>264 </svg>265 <span style="font-size: 38px;">100%</span>266 </div>267 </div>268 269 <!-- App bar -->270 <div class="appbar">271 <svg width="60" height="60" viewBox="0 0 24 24">272 <path d="M15 6L9 12l6 6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>273 </svg>274 <div class="title">Travel details</div>275 <div class="spacer"></div>276 <div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>277 </div>278 279 <!-- Map placeholder -->280 <div class="map">281 [IMG: Map - Amsterdam with route]282 </div>283 284 <!-- Floating route summary card -->285 <div class="card top">286 <div class="route-row">287 <div class="via">Via</div>288 <div class="route-line">289 <div class="route-circle"></div>290 <div class="route-seg"></div>291 <div class="route-circle"></div>292 </div>293 <div class="route-dest">Amstelpark Amsterdam</div>294 </div>295 </div>296 297 <!-- Floating info card -->298 <div class="card info">299 <div class="info-row">300 <div class="date-text">Mon, August 14, 11:38 - 12:50</div>301 <div class="mini-icons">302 <span class="circle-icon">303 <svg viewBox="0 0 24 24">304 <circle cx="12" cy="12" r="9" stroke="#0F72C7" stroke-width="2" fill="none"/>305 <path d="M12 7v6l4 2" stroke="#0F72C7" stroke-width="2" fill="none"/>306 </svg>307 </span>308 <span>1:12</span>309 <span class="circle-icon">310 <svg viewBox="0 0 24 24"><path d="M4 16l6-6 4 4 6-6" stroke="#0F72C7" stroke-width="2" fill="none"/></svg>311 </span>312 <span>1x</span>313 <span class="circle-icon">314 <svg viewBox="0 0 24 24">315 <circle cx="10" cy="8" r="3" stroke="#0F72C7" stroke-width="2" fill="none"/>316 <path d="M4 20h16" stroke="#0F72C7" stroke-width="2"/>317 </svg>318 </span>319 </div>320 </div>321 </div>322 323 <!-- Timeline details -->324 <div id="timeline">325 <div class="vertical-line"></div>326 <div class="marker m1"></div>327 <div class="marker m2"></div>328 <div class="marker m3"></div>329 <div class="marker m4"></div>330 331 <div class="timeline-card">332 <div class="row">333 <div class="time">11:38</div>334 <div class="bullet-space"></div>335 <div class="label" style="color:#0F72C7;">Via</div>336 </div>337 <div class="row">338 <div class="time"></div>339 <div class="bullet-space"></div>340 <svg width="54" height="54" viewBox="0 0 24 24" style="margin-right:18px;">341 <path d="M8 20v-6H6l2-4 4 3 2-5 2 4h2l-2 8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>342 </svg>343 <div class="label">Walk</div>344 <div class="sub">8 min</div>345 <div class="right-chevron">346 <svg width="40" height="40" viewBox="0 0 24 24">347 <path d="M9 6l6 6-6 6" stroke="#9A9A9A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>348 </svg>349 </div>350 </div>351 352 <div class="row">353 <div class="time">11:46</div>354 <div class="bullet-space"></div>355 <div class="label">Prins Hendrikkade Amsterdam</div>356 </div>357 358 <div class="row">359 <div class="time">11:46</div>360 <div class="bullet-space"></div>361 <div class="label">Prins Hendrikkade Amsterdam</div>362 </div>363 364 <div class="row">365 <div class="time"></div>366 <div class="bullet-space"></div>367 <div class="label">GVB bus 22 - Direction Muidenpoort</div>368 </div>369 </div>370 </div>371 372 <!-- Bottom navigation -->373 <div id="bottom-nav">374 <div class="tab active">375 <svg viewBox="0 0 24 24">376 <path d="M5 20l6-6 8 8" stroke="#0F72C7" stroke-width="2" fill="none"/>377 <circle cx="8" cy="8" r="3" fill="#0F72C7"/>378 <circle cx="17" cy="13" r="3" fill="#0F72C7"/>379 </svg>380 <div>Travel advice</div>381 </div>382 <div class="tab">383 <svg viewBox="0 0 24 24">384 <path d="M12 3l10 18H2L12 3z" stroke="#2A2A2A" stroke-width="2" fill="none"/>385 <circle cx="12" cy="16" r="2" fill="#2A2A2A"/>386 </svg>387 <div>Disruptions</div>388 </div>389 <div class="tab">390 <svg viewBox="0 0 24 24">391 <circle cx="12" cy="12" r="8" stroke="#2A2A2A" stroke-width="2" fill="none"/>392 <path d="M12 7v5l4 2" stroke="#2A2A2A" stroke-width="2" fill="none"/>393 </svg>394 <div>Departures</div>395 </div>396 <div class="tab">397 <svg viewBox="0 0 24 24">398 <path d="M4 7h16l-2 10H6L4 7z" stroke="#2A2A2A" stroke-width="2" fill="none"/>399 <circle cx="9" cy="19" r="2" fill="#2A2A2A"/>400 <circle cx="15" cy="19" r="2" fill="#2A2A2A"/>401 </svg>402 <div>Shop</div>403 </div>404 <div class="tab">405 <svg viewBox="0 0 24 24">406 <path d="M4 6h16M4 12h16M4 18h16" stroke="#2A2A2A" stroke-width="2"/>407 </svg>408 <div>More</div>409 </div>410 </div>411 412 <!-- Gesture handle -->413 <div class="handle"></div>414 415</div>416</body>417</html>