GD-ML/AndroidCode
13.4k
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: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 0;15 box-shadow: none;16 color: #1b1b1b;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 120px;26 background: #7A7A7A;27 color: #fff;28 font-size: 34px;29 display: flex;30 align-items: center;31 padding: 0 40px;32 box-sizing: border-box;33 }34 .status-bar .time { font-weight: 600; }35 .status-icons { margin-left: auto; display: flex; align-items: center; gap: 28px; }36 .status-dot {37 width: 24px; height: 24px; border-radius: 50%; background: #fff; opacity: 0.9;38 }39 40 /* App bar */41 .app-bar {42 position: absolute;43 top: 120px;44 left: 0;45 width: 1080px;46 height: 160px;47 background: #0B76C9;48 color: #fff;49 display: flex;50 align-items: center;51 box-sizing: border-box;52 padding: 0 40px;53 }54 .app-title {55 flex: 1;56 text-align: center;57 font-size: 54px;58 font-weight: 600;59 letter-spacing: 0.3px;60 }61 .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }62 .ellipsis { display: flex; gap: 14px; }63 .ellipsis span { width: 16px; height: 16px; background: #fff; border-radius: 50%; display: inline-block; }64 65 /* Map placeholder */66 .map {67 position: absolute;68 top: 280px;69 left: 0;70 width: 1080px;71 height: 1200px;72 background: #E0E0E0;73 border: 1px solid #BDBDBD;74 display: flex;75 align-items: center;76 justify-content: center;77 color: #757575;78 font-size: 36px;79 }80 81 /* Floating route cards */82 .route-card {83 position: absolute;84 left: 40px;85 width: 1000px;86 background: #fff;87 border-radius: 28px;88 box-shadow: 0 8px 20px rgba(0,0,0,0.18);89 }90 .route-card.top {91 top: 1140px;92 height: 220px;93 display: flex;94 align-items: center;95 justify-content: center;96 text-align: center;97 }98 .route-card.top .route-line {99 display: inline-flex;100 align-items: center;101 gap: 24px;102 font-size: 46px;103 font-weight: 700;104 color: #1b5ea9;105 }106 .route-card.top .dot {107 width: 22px; height: 22px; border-radius: 50%; background: #1b5ea9; display: inline-block;108 }109 .route-card.top .bar {110 width: 120px; height: 6px; background: #1b5ea9; border-radius: 3px; display: inline-block;111 }112 113 .route-card.bottom {114 top: 1380px;115 height: 160px;116 padding: 28px 40px;117 box-sizing: border-box;118 display: flex;119 align-items: center;120 justify-content: space-between;121 gap: 24px;122 }123 .route-meta {124 font-size: 34px;125 color: #2a2a2a;126 font-weight: 600;127 }128 .meta-icons { display: flex; align-items: center; gap: 36px; }129 .meta-icons svg { width: 44px; height: 44px; fill: none; stroke: #6b6b6b; stroke-width: 5; }130 131 /* Timeline area */132 .timeline {133 position: absolute;134 top: 1540px;135 left: 0;136 width: 1080px;137 height: 620px;138 background: #F4F6F8;139 box-sizing: border-box;140 padding: 40px;141 }142 .timeline-item {143 position: relative;144 padding-left: 140px;145 margin-bottom: 36px;146 }147 .timeline-time {148 position: absolute;149 top: 0;150 left: 40px;151 width: 90px;152 font-size: 48px;153 font-weight: 700;154 color: #1769c0;155 text-align: right;156 }157 .timeline-line {158 position: absolute;159 left: 140px;160 top: 20px;161 width: 8px;162 height: 460px;163 background: #1e88e5;164 border-radius: 4px;165 }166 .timeline-dot {167 position: absolute;168 left: 132px;169 top: 18px;170 width: 24px; height: 24px; border-radius: 50%; border: 6px solid #1e88e5; background: #fff;171 }172 .timeline-title {173 font-size: 54px;174 font-weight: 700;175 color: #1e3d73;176 margin-bottom: 16px;177 }178 .timeline-sub {179 font-size: 36px;180 color: #4d4d4d;181 display: flex;182 align-items: center;183 gap: 16px;184 }185 .metro-icon {186 width: 72px; height: 72px; border: 2px solid #1e88e5; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; color: #1e88e5; margin-right: 18px;187 font-size: 30px; font-weight: 700;188 }189 .right-arrow {190 margin-left: auto;191 }192 .right-arrow svg { width: 40px; height: 40px; fill: none; stroke: #6b6b6b; stroke-width: 6; }193 194 .stop {195 position: relative;196 padding-left: 140px;197 margin-top: 28px;198 }199 .stop .time { position: absolute; left: 40px; top: 0; width: 90px; font-size: 42px; color: #2a2a2a; text-align: right; }200 .stop .circle {201 position: absolute; left: 132px; top: 8px;202 width: 24px; height: 24px; border-radius: 50%; border: 6px solid #1e88e5; background: #fff;203 }204 .stop .name { font-size: 44px; color: #2a2a2a; font-weight: 600; }205 206 /* Bottom navigation */207 .bottom-nav {208 position: absolute;209 bottom: 0;210 left: 0;211 width: 1080px;212 height: 240px;213 background: #ffffff;214 border-top: 1px solid #E0E0E0;215 display: flex;216 align-items: center;217 justify-content: space-around;218 box-sizing: border-box;219 padding-bottom: 40px;220 }221 .nav-item {222 width: 180px;223 height: 160px;224 display: flex;225 flex-direction: column;226 align-items: center;227 justify-content: center;228 gap: 12px;229 color: #707070;230 font-size: 30px;231 }232 .nav-item svg { width: 64px; height: 64px; stroke: #707070; fill: none; stroke-width: 5; }233 .nav-item.active { color: #0B76C9; }234 .nav-item.active .menu-box {235 width: 92px; height: 92px; background: #E9F3FC; border: 2px solid #0B76C9; border-radius: 12px; display: flex; align-items: center; justify-content: center;236 }237 .home-indicator {238 position: absolute;239 bottom: 18px;240 left: 50%;241 transform: translateX(-50%);242 width: 220px; height: 12px;243 background: #000;244 opacity: 0.24;245 border-radius: 6px;246 }247</style>248</head>249<body>250<div id="render-target">251 252 <!-- Status Bar -->253 <div class="status-bar">254 <div class="time">12:17</div>255 <div class="status-icons">256 <div class="status-dot"></div>257 <div class="status-dot"></div>258 <div class="status-dot"></div>259 <div class="status-dot"></div>260 <div class="status-dot"></div>261 <div style="font-size:32px;">100%</div>262 </div>263 </div>264 265 <!-- App Bar -->266 <div class="app-bar">267 <div class="icon-btn">268 <svg viewBox="0 0 48 48">269 <path d="M30 10 L16 24 L30 38" stroke="#fff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>270 </svg>271 </div>272 <div class="app-title">Travel details</div>273 <div class="ellipsis">274 <span></span><span></span><span></span>275 </div>276 </div>277 278 <!-- Map Placeholder -->279 <div class="map">[IMG: Map - Amsterdam route]</div>280 281 <!-- Floating route summary card -->282 <div class="route-card top">283 <div class="route-line">284 <span>Amsterdam Bijlmer ArenA</span>285 <span class="dot"></span>286 <span class="bar"></span>287 <span class="dot"></span>288 <span>Amstelpark</span>289 </div>290 </div>291 292 <!-- Floating route meta card -->293 <div class="route-card bottom">294 <div class="route-meta">Wed, August 16, 03:12 - 03:35</div>295 <div class="meta-icons">296 <!-- clock -->297 <svg viewBox="0 0 48 48">298 <circle cx="24" cy="24" r="18"></circle>299 <path d="M24 12 V24 L33 29" stroke-linecap="round"></path>300 </svg>301 <!-- repeat count -->302 <svg viewBox="0 0 48 48">303 <path d="M8 16 H30 L24 10 M40 32 H18 L24 38" stroke-linecap="round" stroke-linejoin="round"></path>304 </svg>305 <!-- accessibility -->306 <svg viewBox="0 0 48 48">307 <circle cx="24" cy="10" r="4"></circle>308 <path d="M10 18 H38 M24 18 V36 M18 24 L12 36 M30 24 L36 36" stroke-linecap="round"></path>309 </svg>310 </div>311 </div>312 313 <!-- Timeline content -->314 <div class="timeline">315 <div class="timeline-item">316 <div class="timeline-time">03:12</div>317 <div class="timeline-dot"></div>318 <div class="timeline-line"></div>319 <div class="timeline-title">Amsterdam Bijlmer ArenA</div>320 <div class="timeline-sub">321 <div class="metro-icon">🚇</div>322 <div><b>GVB metro 50</b> Direction Isolatorweg — 5 stops (9 min)</div>323 <div class="right-arrow">324 <svg viewBox="0 0 48 48"><path d="M18 10 L32 24 L18 38" stroke-linecap="round" stroke-linejoin="round"></path></svg>325 </div>326 </div>327 </div>328 329 <div class="stop">330 <div class="time">03:21</div>331 <div class="circle"></div>332 <div class="name">Station RAI Amsterdam</div>333 </div>334 335 <div class="stop">336 <div class="time">03:21</div>337 <div class="circle"></div>338 <div class="name">Station RAI Amsterdam</div>339 </div>340 </div>341 342 <!-- Bottom navigation -->343 <div class="bottom-nav">344 <div class="nav-item">345 <svg viewBox="0 0 48 48">346 <path d="M24 6 L10 20 V40 H20 V28 H28 V40 H38 V20 Z" stroke-linejoin="round"></path>347 </svg>348 <div>Travel advice</div>349 </div>350 <div class="nav-item">351 <svg viewBox="0 0 48 48">352 <path d="M24 6 L6 42 H42 Z" stroke-linejoin="round"></path>353 <circle cx="24" cy="32" r="2"></circle>354 <path d="M24 18 V26"></path>355 </svg>356 <div>Disruptions</div>357 </div>358 <div class="nav-item">359 <svg viewBox="0 0 48 48">360 <circle cx="24" cy="24" r="16"></circle>361 <path d="M24 12 V24 H34" stroke-linecap="round"></path>362 </svg>363 <div>Departures</div>364 </div>365 <div class="nav-item">366 <svg viewBox="0 0 48 48">367 <path d="M6 12 H14 L18 28 H38 L36 20 H20" stroke-linecap="round" stroke-linejoin="round"></path>368 <circle cx="20" cy="38" r="3"></circle>369 <circle cx="34" cy="38" r="3"></circle>370 </svg>371 <div>Shop</div>372 </div>373 <div class="nav-item active">374 <div class="menu-box">375 <svg viewBox="0 0 48 48">376 <path d="M10 14 H38 M10 24 H38 M10 34 H38" stroke="#0B76C9" stroke-width="5" stroke-linecap="round"></path>377 </svg>378 </div>379 <div>More</div>380 </div>381 </div>382 383 <div class="home-indicator"></div>384</div>385</body>386</html>