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: "Segoe UI", Arial, sans-serif; }7 #render-target {8 position: relative;9 width: 1440px;10 height: 3120px;11 overflow: hidden;12 background: #1a1540;13 color: #fff;14 }15 16 /* Header / App bar */17 .status-bar {18 height: 100px;19 padding: 0 50px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 font-size: 40px;24 opacity: 0.9;25 }26 .left-icons, .right-icons { display:flex; align-items:center; gap:32px; }27 .icon-circle { width:46px; height:46px; border-radius:50%; border:2px solid #cfc8ff; opacity:0.8; }28 .icon-dot { width:10px; height:10px; border-radius:50%; background:#cfc8ff; }29 .wifi-icon, .battery-icon {30 width:58px; height:28px; border:3px solid #cfc8ff; border-radius:6px; position:relative;31 }32 .battery-icon:after {33 content:""; position:absolute; right:-10px; top:6px; width:10px; height:16px; background:#cfc8ff; border-radius:3px;34 }35 .kebab {36 width:10px; height:50px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; margin-left:20px;37 }38 .kebab span { width:10px; height:10px; background:#cfc8ff; border-radius:50%; }39 40 .app-bar {41 padding: 30px 50px 20px 50px;42 display:flex;43 align-items:center;44 gap: 28px;45 }46 .back-btn {47 width:70px; height:70px;48 }49 .back-btn svg { width:70px; height:70px; }50 .title { font-size: 84px; font-weight: 700; letter-spacing: 0.5px; }51 52 .dots { display:flex; gap:26px; padding: 20px 50px; }53 .dot { width:26px; height:26px; border-radius:50%; background:#6b5ea8; }54 .dot.active { background:#bdb1ff; }55 .route-title { padding: 16px 50px 30px 50px; font-size: 50px; font-weight: 600; }56 57 .tools {58 padding: 26px 50px 40px;59 display:flex; gap:50px; align-items:center; color:#eae6ff;60 font-size: 42px;61 }62 .tool {63 display:flex; align-items:center; gap:22px;64 background: rgba(255,255,255,0.08);65 padding: 18px 26px; border-radius:16px;66 border:1px solid rgba(255,255,255,0.15);67 }68 .tool svg { width:50px; height:50px; fill:#eae6ff; }69 70 /* Content area */71 .content {72 position: absolute;73 top: 640px;74 left: 0;75 right: 0;76 bottom: 0;77 background: #f3f4f8;78 color: #1e1e1e;79 border-top-left-radius: 28px;80 border-top-right-radius: 28px;81 padding-bottom: 220px;82 overflow: hidden;83 }84 85 .list-section { padding-top: 40px; }86 87 .row {88 background:#fff;89 padding: 36px 60px;90 border-bottom: 1px solid #e5e7ef;91 }92 .stop-row {93 display:flex; align-items:center; gap:28px;94 font-size: 48px; color:#1c1c1c;95 }96 .time { width:160px; text-align:left; font-weight:700; color:#0b153d; }97 .station { font-weight:700; }98 .circle {99 width:34px; height:34px; border-radius:50%; border:6px solid #1a1540;100 }101 .arrow-small {102 margin-left:auto; width:38px; height:38px;103 border-right: 6px solid #8b8b8b; border-bottom: 6px solid #8b8b8b; transform: rotate(45deg);104 }105 106 .change-row {107 display:flex; align-items:center; gap:24px; padding: 28px 60px; font-size:42px; color:#6a6d78; background:#fbfbfd;108 border-bottom:1px solid #e5e7ef;109 }110 .swap-icon {111 width:50px; height:50px; position:relative;112 }113 .swap-icon:before, .swap-icon:after {114 content:""; position:absolute; width:44px; height:0; border-top:6px solid #8a8ea8;115 }116 .swap-icon:before { top:8px; left:3px; transform: rotate(20deg); }117 .swap-icon:after { bottom:8px; left:3px; transform: rotate(-20deg); }118 119 .segment {120 position:relative;121 background:#fff;122 padding: 32px 60px 24px 60px;123 border-bottom:1px solid #e5e7ef;124 }125 .segment .rail {126 position:absolute; left:196px; top:90px; width:0; height:360px; border-left: 10px solid #1a1540;127 }128 .badge {129 display:inline-block; background:#1a1540; color:#fff; font-weight:800; font-size:44px; padding: 8px 20px; border-radius:16px; margin-right:20px;130 }131 .sub { font-size:44px; color:#272a3a; }132 .light { color:#666a7a; }133 134 /* Info panel */135 .info {136 background:#f0f1f6;137 color:#1c1c1c;138 padding: 36px 60px;139 font-size: 42px;140 line-height: 1.45;141 border-top:1px solid #e1e4ef;142 }143 .info a { color:#1a1540; font-weight:700; text-decoration: none; }144 145 /* Save button */146 .save-wrap {147 position:absolute; left:0; right:0; bottom:70px;148 display:flex; justify-content:center;149 }150 .save-btn {151 width: 1300px; height: 140px; background:#ffcc4d; color:#1c1c1c; font-size:54px; font-weight:800; border-radius:28px;152 display:flex; align-items:center; justify-content:center; gap:24px; box-shadow: 0 8px 20px rgba(0,0,0,0.15);153 }154 .bookmark {155 width:54px; height:54px; border:6px solid #1c1c1c; border-top-left-radius:10px; border-top-right-radius:10px; position:relative;156 }157 .bookmark:after { content:""; position:absolute; bottom:-6px; left:10px; width:24px; height:24px; background:#1c1c1c; }158 159</style>160</head>161<body>162<div id="render-target">163 164 <!-- Top status -->165 <div class="status-bar">166 <div class="left-icons">167 <div style="color:#eae6ff;">11:32</div>168 <!-- simple search icon -->169 <svg width="46" height="46" viewBox="0 0 24 24">170 <circle cx="10" cy="10" r="7" stroke="#cfc8ff" stroke-width="2" fill="none"></circle>171 <line x1="15" y1="15" x2="22" y2="22" stroke="#cfc8ff" stroke-width="2"></line>172 </svg>173 <div class="icon-circle"></div>174 <div class="icon-dot"></div>175 </div>176 <div class="right-icons">177 <div class="wifi-icon"></div>178 <div class="battery-icon"></div>179 <div class="kebab">180 <span></span><span></span><span></span>181 </div>182 </div>183 </div>184 185 <!-- App bar -->186 <div class="app-bar">187 <div class="back-btn">188 <svg viewBox="0 0 24 24">189 <path d="M15 18 L9 12 L15 6" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>190 </svg>191 </div>192 <div class="title">Details</div>193 </div>194 195 <!-- Dots indicator -->196 <div class="dots">197 <div class="dot active"></div>198 <div class="dot"></div>199 <div class="dot"></div>200 <div class="dot"></div>201 <div class="dot"></div>202 <div class="dot"></div>203 </div>204 205 <div class="route-title">Southampton Central - Berlin Hbf (Tief)</div>206 207 <div class="tools">208 <div class="tool">209 <svg viewBox="0 0 24 24">210 <rect x="3" y="5" width="18" height="2"></rect>211 <rect x="3" y="11" width="18" height="2"></rect>212 <rect x="3" y="17" width="18" height="2"></rect>213 </svg>214 <div>View as list</div>215 </div>216 <div class="tool">217 <svg viewBox="0 0 24 24">218 <path d="M12 3 C8 3 5 6 5 10 C5 14 10 20 12 21 C14 20 19 14 19 10 C19 6 16 3 12 3 Z" fill="#eae6ff"></path>219 </svg>220 <div>View on map</div>221 </div>222 </div>223 224 <!-- Content area -->225 <div class="content">226 <div class="list-section">227 228 <!-- First stop -->229 <div class="row">230 <div class="stop-row">231 <div class="time">02:24</div>232 <div class="circle"></div>233 <div class="station">Duisburg Hbf</div>234 </div>235 </div>236 237 <!-- Change trains -->238 <div class="change-row">239 <div style="width:160px; font-weight:700; color:#0b153d;">0h 27m</div>240 <div class="swap-icon"></div>241 <div>Change trains</div>242 </div>243 244 <!-- Segment ICE 920 -->245 <div class="segment">246 <div class="rail"></div>247 <div class="stop-row" style="padding-bottom:18px;">248 <div class="time">02:51</div>249 <div class="circle"></div>250 <div class="station">Duisburg Hbf</div>251 <div class="arrow-small"></div>252 </div>253 <div class="sub">254 <span class="badge">ICE 920</span>255 High-speed train256 </div>257 <div class="light" style="font-size:42px; padding-top:10px;">Direction Hamburg-Altona</div>258 <div class="stop-row" style="padding-top:40px;">259 <div class="time">06:50</div>260 <div class="circle"></div>261 <div class="station">Hamburg Hbf</div>262 </div>263 </div>264 265 <!-- Change trains -->266 <div class="change-row">267 <div style="width:160px; font-weight:700; color:#0b153d;">0h 45m</div>268 <div class="swap-icon"></div>269 <div>Change trains</div>270 </div>271 272 <!-- Segment ICE 703 -->273 <div class="segment" style="padding-bottom:36px;">274 <div class="rail" style="height:260px;"></div>275 <div class="stop-row" style="padding-bottom:18px;">276 <div class="time">07:35</div>277 <div class="circle"></div>278 <div class="station">Hamburg Hbf</div>279 <div class="arrow-small"></div>280 </div>281 <div class="sub">282 <span class="badge">ICE 703</span>283 High-speed train284 </div>285 <div class="light" style="font-size:42px; padding-top:10px;">Direction Muenchen Hbf</div>286 <div class="stop-row" style="padding-top:40px;">287 <div class="time">09:22</div>288 <div class="circle"></div>289 <div class="station">Berlin Hbf (Tief)</div>290 </div>291 </div>292 293 <!-- Info -->294 <div class="info">295 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.296 </div>297 298 </div>299 300 <!-- Save button -->301 <div class="save-wrap">302 <div class="save-btn">303 <div class="bookmark"></div>304 <div>Save journey</div>305 </div>306 </div>307 308 </div>309 310</div>311</body>312</html>