GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Train Details UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1440px;9 height: 3120px;10 position: relative;11 overflow: hidden;12 background: #1d1740; /* dark app background */13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1440px;22 height: 120px;23 padding: 0 40px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #ffffff;28 font-weight: 600;29 font-size: 44px;30 letter-spacing: 1px;31 }32 .status-icons {33 display: flex;34 align-items: center;35 gap: 36px;36 }37 .icon { display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center; }38 39 /* App header */40 .header {41 position: absolute;42 top: 120px;43 left: 0;44 width: 1440px;45 height: 190px;46 padding: 0 40px;47 display: flex;48 align-items: center;49 gap: 28px;50 }51 .back-icon {52 width: 70px; height: 70px; display: inline-flex; align-items: center; justify-content: center;53 border-radius: 50%;54 }55 .title { font-size: 86px; font-weight: 700; }56 57 /* Carousel dots */58 .dots {59 position: absolute;60 top: 320px;61 left: 0;62 width: 100%;63 display: flex;64 justify-content: center;65 gap: 26px;66 }67 .dot {68 width: 24px; height: 24px; border-radius: 50%;69 background: #514b78;70 }71 .dot.active { background: #8a82c2; }72 73 /* Route title */74 .route-title {75 position: absolute;76 top: 390px;77 left: 40px;78 right: 40px;79 font-size: 56px;80 line-height: 72px;81 font-weight: 600;82 }83 84 /* Quick actions */85 .actions {86 position: absolute;87 top: 520px;88 left: 0;89 width: 100%;90 padding: 40px;91 display: flex;92 justify-content: space-between;93 align-items: center;94 }95 .action-item {96 display: flex; align-items: center; gap: 24px;97 color: #ffffff; opacity: 0.96;98 font-size: 46px; font-weight: 600;99 }100 .action-icon {101 width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;102 background: rgba(255,255,255,0.08); border-radius: 16px;103 }104 105 /* Content panel */106 .panel {107 position: absolute;108 top: 640px;109 left: 0;110 width: 100%;111 height: 1900px;112 background: #ffffff;113 color: #1e1e1e;114 border-top-left-radius: 0;115 border-top-right-radius: 0;116 box-shadow: 0 -12px 20px rgba(0,0,0,0.25);117 }118 119 .segment {120 padding: 70px 60px;121 border-bottom: 1px solid #e8e8ef;122 }123 .segment.flex { display: flex; }124 125 /* Timeline layout */126 .time-col {127 width: 240px;128 position: relative;129 padding-top: 8px;130 }131 .time-text { font-size: 60px; font-weight: 700; color: #1e1e1e; }132 .station {133 font-size: 56px; font-weight: 700; color: #1e1e1e;134 }135 .dot-outline {136 width: 36px; height: 36px; border: 6px solid #211b55; border-radius: 50%;137 position: absolute; left: 180px; top: 6px; background: #fff;138 }139 140 /* Vertical timeline line inside multi-stop segments */141 .v-line {142 position: absolute; left: 195px; top: 40px; bottom: 40px;143 width: 6px; background: #241c64;144 }145 146 .muted { color: #6f6f7f; font-size: 44px; }147 .change-row {148 display: flex; align-items: center; gap: 24px; margin-top: 26px;149 color: #6f6f7f; font-size: 48px; font-weight: 600;150 }151 .chip {152 display: inline-block; background: #1d1740; color: #fff;153 font-size: 44px; font-weight: 800; padding: 12px 22px;154 border-radius: 18px; margin-right: 26px;155 }156 .train-line { font-size: 48px; font-weight: 700; color: #1d1740; }157 .direction { font-size: 48px; color: #1e1e1e; }158 .caret { position: absolute; right: 40px; top: 90px; width: 36px; height: 36px; border-right: 6px solid #463e91; border-bottom: 6px solid #463e91; transform: rotate(-45deg); }159 160 /* Disclaimer */161 .disclaimer {162 position: absolute;163 bottom: 240px;164 left: 40px;165 right: 40px;166 color: #1e1e1e;167 background: #f3f3f8;168 border-radius: 20px;169 padding: 40px;170 font-size: 44px;171 line-height: 64px;172 }173 .disclaimer b { font-weight: 800; }174 175 /* Save button */176 .save-bar {177 position: absolute;178 bottom: 80px;179 left: 40px;180 right: 40px;181 height: 140px;182 background: #f2b736;183 border-radius: 26px;184 display: flex; align-items: center; justify-content: center;185 gap: 28px;186 color: #1e1e1e;187 font-size: 56px; font-weight: 800;188 }189 .bookmark {190 width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;191 }192 193 /* Overflow dots menu */194 .more-menu {195 position: absolute;196 top: 158px;197 right: 40px;198 display: flex; flex-direction: column; gap: 10px;199 }200 .more-dot {201 width: 14px; height: 14px; background: #fff; border-radius: 50%;202 opacity: 0.95;203 }204</style>205</head>206<body>207<div id="render-target">208 209 <!-- Status Bar -->210 <div class="status-bar">211 <div>11:29</div>212 <div class="status-icons">213 <div class="icon">214 <svg width="50" height="50" viewBox="0 0 24 24" fill="none">215 <circle cx="10" cy="10" r="7" stroke="#ffffff" stroke-width="2"/>216 <line x1="16" y1="16" x2="22" y2="22" stroke="#ffffff" stroke-width="2"/>217 </svg>218 </div>219 <div class="icon">220 <svg width="50" height="50" viewBox="0 0 24 24" fill="none">221 <path d="M3 7h18v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7z" stroke="#ffffff" stroke-width="2"/>222 <path d="M7 3h10v4H7z" stroke="#ffffff" stroke-width="2"/>223 </svg>224 </div>225 <div class="icon">226 <svg width="50" height="50" viewBox="0 0 24 24" fill="none">227 <rect x="2" y="7" width="18" height="10" stroke="#ffffff" stroke-width="2"/>228 <rect x="21" y="10" width="2" height="4" fill="#ffffff"/>229 </svg>230 </div>231 </div>232 </div>233 234 <!-- Header -->235 <div class="header">236 <div class="back-icon">237 <svg width="70" height="70" viewBox="0 0 24 24" fill="none">238 <path d="M15 6l-6 6 6 6" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>239 </svg>240 </div>241 <div class="title">Details</div>242 </div>243 244 <!-- More menu dots -->245 <div class="more-menu">246 <div class="more-dot"></div>247 <div class="more-dot"></div>248 <div class="more-dot"></div>249 </div>250 251 <!-- Dots -->252 <div class="dots">253 <div class="dot active"></div>254 <div class="dot"></div>255 <div class="dot"></div>256 <div class="dot"></div>257 <div class="dot"></div>258 <div class="dot"></div>259 <div class="dot"></div>260 </div>261 262 <!-- Route title -->263 <div class="route-title">Southampton Central - Berlin Hbf (Tief)</div>264 265 <!-- Actions -->266 <div class="actions">267 <div class="action-item">268 <div class="action-icon">269 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">270 <path d="M4 7h16M4 12h16M4 17h16" stroke="#fff" stroke-width="2" stroke-linecap="round"/>271 </svg>272 </div>273 <div>View as list</div>274 </div>275 <div class="action-item">276 <div class="action-icon">277 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">278 <path d="M12 3a6 6 0 0 1 6 6c0 4.5-6 12-6 12S6 13.5 6 9a6 6 0 0 1 6-6z" stroke="#fff" stroke-width="2"/>279 <circle cx="12" cy="9" r="2" fill="#fff"/>280 </svg>281 </div>282 <div>View on map</div>283 </div>284 </div>285 286 <!-- Content Panel -->287 <div class="panel">288 289 <!-- Segment 1 -->290 <div class="segment flex">291 <div class="time-col">292 <div class="time-text">02:24</div>293 <div class="dot-outline"></div>294 </div>295 <div style="flex:1;">296 <div class="station">Duisburg Hbf</div>297 <div class="change-row">298 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">299 <path d="M4 7h10l-3-3M20 17H10l3 3" stroke="#6f6f7f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>300 </svg>301 <span>0h 27m</span>302 <span>Change trains</span>303 </div>304 </div>305 </div>306 307 <!-- Segment 2: Duisburg to Hamburg -->308 <div class="segment flex" style="position: relative;">309 <div class="time-col" style="padding-bottom: 40px;">310 <div class="time-text">02:51</div>311 <div class="dot-outline" style="top:10px;"></div>312 <div class="v-line"></div>313 <div class="time-text" style="margin-top: 310px; color:#1e1e1e;">06:50</div>314 <div class="dot-outline" style="top:340px;"></div>315 </div>316 <div style="flex:1; position: relative;">317 <div class="station" style="margin-top: 4px;">Duisburg Hbf</div>318 <div class="caret"></div>319 <div style="margin-top: 36px;">320 <span class="chip">ICE 920</span>321 <span class="train-line">High-speed train</span>322 </div>323 <div class="direction" style="margin-top: 16px;">Direction Hamburg-Altona</div>324 <div class="station" style="margin-top: 180px;">Hamburg Hbf</div>325 </div>326 </div>327 328 <!-- Change trains 2 -->329 <div class="segment">330 <div class="change-row">331 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">332 <path d="M4 7h10l-3-3M20 17H10l3 3" stroke="#6f6f7f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>333 </svg>334 <span>0h 45m</span>335 <span>Change trains</span>336 </div>337 </div>338 339 <!-- Segment 3: Hamburg to Berlin -->340 <div class="segment flex" style="position: relative;">341 <div class="time-col" style="padding-bottom: 40px;">342 <div class="time-text">07:35</div>343 <div class="dot-outline" style="top:10px;"></div>344 <div class="v-line"></div>345 <div class="time-text" style="margin-top: 250px; color:#1e1e1e;">09:22</div>346 <div class="dot-outline" style="top:280px;"></div>347 </div>348 <div style="flex:1; position: relative;">349 <div class="station">Hamburg Hbf</div>350 <div class="caret" style="top: 80px;"></div>351 <div style="margin-top: 36px;">352 <span class="chip">ICE 703</span>353 <span class="train-line">High-speed train</span>354 </div>355 <div class="direction" style="margin-top: 16px;">Direction Muenchen Hbf</div>356 <div class="station" style="margin-top: 140px;">Berlin Hbf (Tief)</div>357 </div>358 </div>359 360 <!-- Disclaimer box -->361 <div class="disclaimer">362 Our timetable may not be 100% accurate because we rely on weekly updates from railway carriers. Changes, delays, or cancellations won’t be reflected. For the latest timetable info, please check the carrier’s website or train station boards.363 </div>364 365 </div>366 367 <!-- Save Journey Button -->368 <div class="save-bar">369 <div class="bookmark">370 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">371 <path d="M6 4h12v16l-6-4-6 4V4z" stroke="#1e1e1e" stroke-width="2" fill="none"/>372 </svg>373 </div>374 <div>Save journey</div>375 </div>376 377</div>378</body>379</html>