GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Journey Details UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">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: #f2f2f5;14 color: #111;15 }16 17 /* Top dark area */18 .dark-header {19 position: absolute;20 left: 0;21 top: 0;22 width: 1080px;23 height: 980px;24 background: #1f1735;25 color: #fff;26 }27 28 /* Status bar */29 .status-bar {30 height: 90px;31 padding: 0 36px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 color: #eae6ff;36 font-size: 40px;37 letter-spacing: 0.5px;38 }39 .status-left, .status-right { display: flex; align-items: center; gap: 20px; }40 .icon {41 width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center;42 }43 .icon svg { width: 44px; height: 44px; fill: #eae6ff; }44 45 /* App bar */46 .app-bar {47 height: 120px;48 padding: 0 30px;49 display: flex;50 align-items: center;51 justify-content: space-between;52 }53 .app-bar .title { font-size: 60px; font-weight: 600; color: #fff; }54 .app-actions { display: flex; align-items: center; gap: 28px; }55 .app-actions .dotmenu svg { width: 44px; height: 44px; }56 57 /* Carousel dots */58 .dots {59 margin: 26px 0 10px 0;60 display: flex; align-items: center; justify-content: center; gap: 22px;61 }62 .dot { width: 18px; height: 18px; border-radius: 50%; background: #5e5582; }63 .dot.active { background: #ffffff; }64 65 /* Big title */66 .big-title {67 padding: 30px 40px 20px 40px;68 font-size: 66px;69 font-weight: 700;70 color: #fff;71 line-height: 1.2;72 }73 74 /* Journey time strip */75 .time-strip {76 margin: 24px 0 0 0;77 background: #2a2148;78 padding: 34px 40px;79 display: flex; align-items: center; justify-content: space-between;80 color: #e7e2ff;81 font-size: 44px;82 }83 .time-strip .sub { margin-top: 12px; font-size: 34px; color: #c9c3e9; }84 .duration { display: flex; align-items: center; gap: 14px; font-size: 40px; }85 .duration .clock svg { width: 42px; height: 42px; fill: #c9c3e9; }86 87 /* Actions row */88 .actions-row {89 background: #231b3f;90 padding: 30px 40px;91 display: flex; align-items: center; gap: 60px;92 color: #eae6ff;93 }94 .action-btn {95 display: flex; align-items: center; gap: 20px;96 color: #eae6ff; font-size: 42px;97 }98 .action-btn svg { width: 50px; height: 50px; fill: #eae6ff; }99 100 /* Update banner */101 .update-banner {102 background: #efeef4;103 color: #312b4c;104 font-size: 40px;105 padding: 28px 40px;106 }107 108 /* White content area */109 .content {110 background: #ffffff;111 position: absolute;112 left: 0; top: 980px;113 width: 1080px;114 height: 1120px;115 color: #1c1c1c;116 }117 118 .timeline {119 position: relative;120 padding: 40px 40px 0 140px;121 font-size: 44px;122 }123 124 /* Vertical line */125 .timeline:before {126 content: "";127 position: absolute;128 left: 120px;129 top: 40px;130 bottom: 140px;131 width: 8px;132 background: #2a2148;133 border-radius: 4px;134 }135 136 .node {137 position: relative;138 padding-bottom: 24px;139 }140 .node .time {141 position: absolute;142 left: -110px; top: 0;143 width: 100px; text-align: right;144 font-weight: 700; color: #2a2148;145 }146 .node .bullet {147 position: absolute;148 left: -20px; top: 4px;149 width: 32px; height: 32px; border-radius: 50%;150 background: #fff; border: 10px solid #2a2148;151 box-sizing: border-box;152 }153 .node .place {154 font-weight: 700;155 color: #2a2148;156 }157 .dropdown {158 display: inline-flex; align-items: center; gap: 10px; margin-left: 14px;159 color: #2a2148;160 }161 .dropdown svg { width: 28px; height: 28px; fill: #2a2148; }162 163 /* Supplement box */164 .supplement {165 margin: 24px 0 18px 0;166 background: #f7f3ff;167 border: 1px solid #e0dbff;168 padding: 24px 26px;169 color: #4f3a7d;170 font-size: 36px;171 border-radius: 14px;172 display: flex; align-items: center; gap: 18px;173 }174 .badge {175 background: #1f1735;176 color: #fff;177 padding: 14px 22px;178 border-radius: 16px;179 display: inline-block;180 font-weight: 700;181 font-size: 40px;182 margin: 10px 0;183 }184 .row { display: flex; align-items: center; gap: 18px; font-size: 42px; color: #2a2148; }185 186 .footer-node { margin-top: 32px; }187 .footer-node .bullet {188 border-color: #2a2148;189 }190 191 /* Disclaimer area */192 .disclaimer {193 position: absolute;194 left: 0; bottom: 0;195 width: 100%;196 background: #efeff3;197 color: #2a2148;198 padding: 40px;199 font-size: 38px;200 line-height: 1.4;201 }202 .disclaimer a { color: #2a2148; font-weight: 700; text-decoration: underline; }203 204 /* Save button */205 .save-bar {206 position: absolute;207 left: 0; bottom: 120px;208 width: 100%;209 display: flex; justify-content: center;210 }211 .save-btn {212 width: 1000px;213 height: 120px;214 background: #f6be3c;215 color: #1f1735;216 font-size: 48px;217 font-weight: 700;218 border-radius: 26px;219 display: flex; align-items: center; justify-content: center; gap: 22px;220 box-shadow: 0 6px 0 rgba(0,0,0,0.08);221 }222 223 .bookmark-icon {224 width: 46px; height: 46px;225 }226 .bookmark-icon svg { width: 46px; height: 46px; fill: #1f1735; }227 228</style>229</head>230<body>231<div id="render-target">232 233 <!-- Top dark header -->234 <div class="dark-header">235 236 <!-- Status bar -->237 <div class="status-bar">238 <div class="status-left">239 <div>7:03</div>240 <div class="icon">241 <!-- sun icon -->242 <svg viewBox="0 0 24 24"><path d="M12 5a1 1 0 0 1 1-1h0a1 1 0 1 1-2 0h0a1 1 0 0 1 1 1zm0 16a1 1 0 0 1 1-1h0a1 1 0 1 1-2 0h0a1 1 0 0 1 1 1zm9-7a1 1 0 0 1-1 1h0a1 1 0 1 1 0-2h0a1 1 0 0 1 1 1zM4 12a1 1 0 0 1-1 1h0a1 1 0 1 1 0-2h0a1 1 0 0 1 1 1zm12.95 6.364a1 1 0 0 1-1.415 0h0a1 1 0 1 1 1.415-1.414h0a1 1 0 0 1 0 1.414zM7.465 7.465a1 1 0 0 1-1.415 0h0a1 1 0 1 1 1.415-1.415h0a1 1 0 0 1 0 1.415zm10.485-3.03a1 1 0 0 1 0 1.414h0a1 1 0 1 1-1.415-1.414h0a1 1 0 0 1 1.415 0zM7.465 16.95a1 1 0 0 1 0 1.415h0a1 1 0 1 1-1.415-1.415h0a1 1 0 0 1 1.415 0zM12 8.5a3.5 3.5 0 1 1 0 7h0a3.5 3.5 0 0 1 0-7z"/></svg>243 </div>244 </div>245 <div class="status-right">246 <div class="icon">247 <!-- WiFi icon -->248 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 5c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 5 2 2 2-2c-2-2-4-2-6 0z"/></svg>249 </div>250 <div class="icon">251 <!-- battery icon -->252 <svg viewBox="0 0 24 24"><path d="M18 7h2v10h-2V7z"/><rect x="3" y="6" width="14" height="12" rx="2" ry="2" fill="none" stroke="#eae6ff" stroke-width="2"/><rect x="5" y="8" width="10" height="8" fill="#eae6ff"/></svg>253 </div>254 </div>255 </div>256 257 <!-- App bar -->258 <div class="app-bar">259 <div class="app-actions">260 <div class="icon">261 <!-- Back arrow -->262 <svg viewBox="0 0 24 24"><path d="M15 19 8 12l7-7" stroke="#eae6ff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>263 </div>264 <div class="title">Details</div>265 </div>266 <div class="dotmenu icon">267 <!-- More vertical dots -->268 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>269 </div>270 </div>271 272 <!-- Dots -->273 <div class="dots">274 <div class="dot active"></div>275 <div class="dot"></div>276 <div class="dot"></div>277 <div class="dot"></div>278 <div class="dot"></div>279 <div class="dot"></div>280 </div>281 282 <!-- Big title -->283 <div class="big-title">Amsterdam Centraal - Rotterdam Centraal</div>284 285 <!-- Journey time strip -->286 <div class="time-strip">287 <div>288 <div>06:55 - 07:36</div>289 <div class="sub">Sat 21 Oct</div>290 </div>291 <div class="duration">292 <div class="clock">293 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#c9c3e9" stroke-width="2" fill="none"/><path d="M12 7v6l4 2" stroke="#c9c3e9" stroke-width="2" fill="none" stroke-linecap="round"/></svg>294 </div>295 <div>0h 41m</div>296 </div>297 </div>298 299 <!-- Actions row -->300 <div class="actions-row">301 <div class="action-btn">302 <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h10v2H4z"/></svg>303 <span>View as list</span>304 </div>305 <div class="action-btn">306 <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 0-5 2.5 2.5 0 0 1 0 5z"/></svg>307 <span>View on map</span>308 </div>309 </div>310 311 <!-- Update banner -->312 <div class="update-banner">Last timetable update: 12 October 2023</div>313 </div>314 315 <!-- Main content area -->316 <div class="content">317 <div class="timeline">318 <!-- Start node -->319 <div class="node">320 <div class="time">06:55</div>321 <div class="bullet"></div>322 <div class="place">Amsterdam Centraal</div>323 <span class="dropdown">324 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>325 </span>326 327 <div class="supplement">328 <div class="icon">329 <!-- info badge -->330 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#f4a62a"/><rect x="11" y="10" width="2" height="7" fill="#fff"/><rect x="11" y="7" width="2" height="2" fill="#fff"/></svg>331 </div>332 <div>Supplement required. <a href="#" style="color:#1f1735; font-weight:700; text-decoration:underline;">Read more</a></div>333 </div>334 335 <div class="row"><span class="badge">IC 1014</span><span>Train</span></div>336 <div class="row">Direction <strong>Rotterdam Centraal</strong></div>337 </div>338 339 <!-- End node -->340 <div class="node footer-node" style="margin-top: 60px;">341 <div class="time">07:36</div>342 <div class="bullet" style="border-width: 10px;"></div>343 <div class="place">Rotterdam Centraal</div>344 </div>345 </div>346 347 <!-- Disclaimer area -->348 <div class="disclaimer">349 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 <a href="#">carrier’s website</a> or train station boards.350 </div>351 </div>352 353 <!-- Save journey button -->354 <div class="save-bar">355 <div class="save-btn">356 <div class="bookmark-icon">357 <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4z"/></svg>358 </div>359 <span>Save journey</span>360 </div>361 </div>362 363</div>364</body>365</html>