GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Journey 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; height: 3120px;9 position: relative; overflow: hidden;10 background: #140C39;11 color: #fff;12 }13 14 /* Header / App bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0;17 height: 120px; padding: 0 60px;18 display: flex; align-items: center; justify-content: space-between;19 color: #fff; font-weight: 600; font-size: 48px;20 }21 .status-icons { display: flex; align-items: center; gap: 36px; }22 .app-bar {23 position: absolute; top: 120px; left: 0; right: 0;24 height: 180px; display: flex; align-items: center;25 padding: 0 60px; color: #fff;26 }27 .app-title { font-size: 88px; font-weight: 700; margin-left: 30px; }28 .icon-btn { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }29 .route-bar {30 position: absolute; top: 300px; left: 0; right: 0;31 height: 160px; padding: 30px 60px 0;32 color: #fff; font-size: 60px; font-weight: 600;33 }34 .dots {35 position: absolute; top: 430px; left: 60px;36 display: flex; gap: 24px;37 }38 .dot { width: 28px; height: 28px; border-radius: 50%; background: #4B3E8A; }39 .dot.active { background: #8A7CE0; }40 41 /* Menu panel */42 .menu-panel {43 position: absolute; top: 250px; right: 80px;44 width: 560px; background: #fff; color: #222;45 border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.4);46 overflow: hidden;47 }48 .menu-item { padding: 44px 48px; font-size: 56px; border-bottom: 1px solid #eee; }49 .menu-item:last-child { border-bottom: none; }50 .menu-item:hover { background: #f5f5f5; }51 52 /* Main content area */53 .content {54 position: absolute; top: 520px; left: 0; right: 0; bottom: 0;55 background: #F7F7FB; color: #111;56 border-top-left-radius: 40px; border-top-right-radius: 40px;57 padding-bottom: 200px;58 }59 .content-inner { padding: 60px; }60 61 .list-toggle {62 display: flex; align-items: center; gap: 28px;63 font-size: 56px; color: #222; font-weight: 700;64 padding-bottom: 30px;65 }66 .small-muted { color: #7A7A90; font-size: 44px; }67 68 /* Timeline sections */69 .section {70 background: #fff; border-radius: 28px;71 box-shadow: 0 6px 14px rgba(0,0,0,0.06);72 padding: 50px; margin-bottom: 30px;73 }74 75 .timeline-row {76 display: grid; grid-template-columns: 220px 1fr;77 align-items: start; gap: 30px;78 }79 .time-col { font-size: 56px; font-weight: 700; color: #0F0F20; }80 .station-label {81 display: flex; align-items: center; gap: 20px;82 font-size: 56px; font-weight: 700;83 }84 .circle {85 width: 30px; height: 30px; border-radius: 50%;86 border: 8px solid #2B1E6A; background: #fff;87 }88 .vertical {89 position: absolute; left: 140px; top: 60px; bottom: 60px;90 width: 0; border-left: 16px solid #2B1E6A;91 }92 93 .change-row {94 display: flex; align-items: center; gap: 24px;95 margin-top: 24px; color: #606070; font-size: 48px; font-weight: 700;96 }97 98 .train-card {99 position: relative;100 margin-top: 10px;101 padding-top: 20px;102 }103 .train-line {104 position: absolute; left: 140px; top: 20px; bottom: 20px;105 border-left: 16px solid #2B1E6A;106 }107 .badge {108 display: inline-block; background: #0E195E; color: #fff;109 padding: 14px 22px; border-radius: 16px; font-size: 46px; font-weight: 800;110 margin-right: 20px;111 }112 .train-desc { font-size: 48px; color: #141421; font-weight: 700; }113 .dir { font-size: 46px; color: #3A3850; margin-top: 12px; }114 .between { height: 28px; }115 116 /* Info box and save button */117 .info-box {118 background: #ECECF2; border-radius: 28px;119 padding: 50px; color: #26263A; font-size: 44px; line-height: 1.5;120 margin-top: 40px;121 }122 .info-box a { color: #0D3AA8; text-decoration: underline; }123 124 .save-btn {125 position: absolute; left: 60px; right: 60px; bottom: 60px;126 height: 160px; background: #F5C242; border-radius: 32px;127 display: flex; align-items: center; justify-content: center;128 color: #262200; font-size: 64px; font-weight: 800;129 box-shadow: 0 10px 20px rgba(0,0,0,0.15);130 }131 .save-btn .bookmark {132 width: 64px; height: 64px; margin-right: 24px;133 }134 135 /* Simple icons */136 .svg { width: 80px; height: 80px; }137 .back-svg { width: 80px; height: 80px; }138</style>139</head>140<body>141<div id="render-target">142 143 <!-- Status bar -->144 <div class="status-bar">145 <div>11:30</div>146 <div class="status-icons">147 <!-- Search icon -->148 <svg class="svg" viewBox="0 0 24 24">149 <circle cx="10" cy="10" r="6" stroke="#fff" stroke-width="2" fill="none"></circle>150 <line x1="14" y1="14" x2="21" y2="21" stroke="#fff" stroke-width="2"></line>151 </svg>152 <!-- Ticket icon (simple square) -->153 <svg class="svg" viewBox="0 0 24 24">154 <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>155 <circle cx="8" cy="12" r="1.5" fill="#fff"></circle>156 <circle cx="16" cy="12" r="1.5" fill="#fff"></circle>157 </svg>158 <!-- Coffee icon (cup) -->159 <svg class="svg" viewBox="0 0 24 24">160 <rect x="5" y="9" width="12" height="8" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>161 <line x1="17" y1="11" x2="21" y2="11" stroke="#fff" stroke-width="2"></line>162 </svg>163 <!-- Signal dot -->164 <svg class="svg" viewBox="0 0 24 24">165 <circle cx="12" cy="12" r="3" fill="#fff"></circle>166 </svg>167 <!-- Wi-Fi -->168 <svg class="svg" viewBox="0 0 24 24">169 <path d="M2 9c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none"/>170 <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none"/>171 <path d="M8 15c2-2 6-2 8 0" stroke="#fff" stroke-width="2" fill="none"/>172 <circle cx="12" cy="18" r="1.5" fill="#fff"/>173 </svg>174 <!-- Battery -->175 <svg class="svg" viewBox="0 0 24 24">176 <rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>177 <rect x="4" y="8" width="10" height="8" fill="#fff"/>178 <rect x="20" y="10" width="2" height="4" fill="#fff"/>179 </svg>180 </div>181 </div>182 183 <!-- App bar -->184 <div class="app-bar">185 <div class="icon-btn">186 <!-- Back arrow -->187 <svg class="back-svg" viewBox="0 0 24 24">188 <path d="M15 5 L7 12 L15 19" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>189 </svg>190 </div>191 <div class="app-title">Details</div>192 <div style="margin-left:auto" class="icon-btn">193 <!-- More (vertical dots) -->194 <svg class="svg" viewBox="0 0 24 24">195 <circle cx="12" cy="5" r="2" fill="#fff"></circle>196 <circle cx="12" cy="12" r="2" fill="#fff"></circle>197 <circle cx="12" cy="19" r="2" fill="#fff"></circle>198 </svg>199 </div>200 </div>201 202 <!-- Route title -->203 <div class="route-bar">204 Southampton Central - Berl…205 </div>206 207 <!-- Pagination dots -->208 <div class="dots">209 <div class="dot"></div>210 <div class="dot"></div>211 <div class="dot active"></div>212 <div class="dot"></div>213 </div>214 215 <!-- Menu panel showing Share options -->216 <div class="menu-panel">217 <div class="menu-item">Share as image</div>218 <div class="menu-item">Share as link</div>219 </div>220 221 <!-- Main content -->222 <div class="content">223 <div class="content-inner">224 225 <!-- View as list -->226 <div class="list-toggle">227 <svg class="svg" viewBox="0 0 24 24">228 <rect x="3" y="5" width="18" height="3" fill="#2B1E6A"></rect>229 <rect x="3" y="11" width="18" height="3" fill="#2B1E6A"></rect>230 <rect x="3" y="17" width="18" height="3" fill="#2B1E6A"></rect>231 </svg>232 <div>View as list</div>233 </div>234 235 <!-- Section 1: Start station -->236 <div class="section">237 <div class="timeline-row">238 <div class="time-col">02:24</div>239 <div class="station-label">240 <div class="circle"></div>241 <div>Duisburg Hbf</div>242 </div>243 </div>244 <div class="change-row">245 <svg class="svg" viewBox="0 0 24 24">246 <path d="M3 7h18M6 12h12M9 17h6" stroke="#606070" stroke-width="2" fill="none"/>247 </svg>248 <div>Change trains</div>249 <div class="small-muted">0h 27m</div>250 </div>251 </div>252 253 <!-- Section 2: ICE 920 -->254 <div class="section train-card">255 <div class="train-line"></div>256 <div class="timeline-row">257 <div class="time-col">02:51<br><span class="small-muted" style="font-size:44px;">3h 59m</span></div>258 <div>259 <div class="station-label">260 <div class="circle"></div>261 <div>Duisburg Hbf</div>262 </div>263 <div class="between"></div>264 <div class="train-desc"><span class="badge">ICE 920</span>High-speed train</div>265 <div class="dir">Direction Hamburg-Altona</div>266 <div class="between"></div>267 <div class="station-label">268 <div class="circle"></div>269 <div>06:50 Hamburg Hbf</div>270 </div>271 </div>272 </div>273 </div>274 275 <!-- Section 3: Change -->276 <div class="section">277 <div class="change-row">278 <svg class="svg" viewBox="0 0 24 24">279 <path d="M3 7h18M6 12h12M9 17h6" stroke="#606070" stroke-width="2" fill="none"/>280 </svg>281 <div>Change trains</div>282 <div class="small-muted">0h 45m</div>283 </div>284 </div>285 286 <!-- Section 4: ICE 703 to Berlin -->287 <div class="section train-card">288 <div class="train-line"></div>289 <div class="timeline-row">290 <div class="time-col">07:35<br><span class="small-muted" style="font-size:44px;">1h 47m</span></div>291 <div>292 <div class="station-label">293 <div class="circle"></div>294 <div>Hamburg Hbf</div>295 </div>296 <div class="between"></div>297 <div class="train-desc"><span class="badge">ICE 703</span>High-speed train</div>298 <div class="dir">Direction Muenchen Hbf</div>299 <div class="between"></div>300 <div class="station-label">301 <div class="circle"></div>302 <div>09:22 Berlin Hbf (Tief)</div>303 </div>304 </div>305 </div>306 </div>307 308 <!-- Info box -->309 <div class="info-box">310 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.311 </div>312 313 </div>314 315 <!-- Save journey button -->316 <div class="save-btn">317 <svg class="bookmark" viewBox="0 0 24 24">318 <path d="M6 4h12v16l-6-4-6 4z" fill="none" stroke="#262200" stroke-width="2"></path>319 </svg>320 Save journey321 </div>322 </div>323 324</div>325</body>326</html>