GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Train Booking 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: #16285A; /* overall navy background like screenshot top */13 }14 15 /* Header/Navy area */16 .status-bar {17 position: absolute;18 top: 40px;19 left: 60px;20 right: 60px;21 height: 120px;22 color: #fff;23 display: flex;24 align-items: center;25 justify-content: space-between;26 font-weight: 600;27 font-size: 52px;28 letter-spacing: 0.5px;29 }30 .status-icons {31 display: flex;32 align-items: center;33 gap: 32px;34 }35 .icon-circle {36 width: 48px; height: 48px; border-radius: 50%; border: 4px solid #fff; opacity: 0.9;37 }38 .battery {39 width: 40px; height: 60px; border: 5px solid #fff; border-radius: 8px; position: relative;40 }41 .battery::after {42 content: ""; position: absolute; right: -14px; top: 16px; width: 12px; height: 26px; background: #fff; border-radius: 4px;43 }44 .wifi {45 width: 60px; height: 60px; position: relative;46 }47 .wifi::before, .wifi::after {48 content: ""; position: absolute; left: 0; right: 0; margin: auto; border: 5px solid #fff; border-top: none; border-left-color: transparent; border-right-color: transparent; width: 60px; height: 30px; border-radius: 0 0 60px 60px;49 }50 .wifi::after { width: 34px; height: 20px; top: 18px; }51 52 .header-area {53 position: absolute;54 top: 160px;55 left: 40px;56 right: 40px;57 height: 420px;58 color: #fff;59 }60 61 .top-row {62 display: flex;63 align-items: center;64 justify-content: space-between;65 }66 .left-back {67 display: flex;68 align-items: center;69 gap: 24px;70 }71 .back-btn {72 width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;73 }74 .back-btn svg { width: 64px; height: 64px; fill: none; stroke: #fff; stroke-width: 16px; }75 .share-btn {76 width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;77 }78 .share-btn svg { width: 64px; height: 64px; fill: none; stroke: #AFC3FF; stroke-width: 12px; opacity: 0.9; }79 80 .title {81 margin-top: 40px;82 font-size: 76px;83 font-weight: 800;84 }85 .subtitle {86 margin-top: 24px;87 font-size: 48px;88 opacity: 0.85;89 }90 91 /* Light content background below header */92 .content-bg {93 position: absolute;94 top: 620px;95 left: 0;96 right: 0;97 bottom: 0;98 background: #F2F4F8;99 border-top-left-radius: 36px;100 border-top-right-radius: 36px;101 }102 103 /* Train card */104 .card {105 position: absolute;106 top: 660px;107 left: 60px;108 width: 1320px;109 background: #fff;110 border-radius: 40px;111 box-shadow: 0 16px 40px rgba(0,0,0,0.15);112 padding: 54px 60px;113 }114 .card-row {115 display: flex;116 align-items: center;117 justify-content: space-between;118 color: #1F2A55;119 }120 .label-outbound {121 display: flex;122 align-items: center;123 gap: 22px;124 font-size: 42px;125 letter-spacing: 0.5px;126 color: #6089FF;127 font-weight: 700;128 text-transform: uppercase;129 }130 .label-outbound .check {131 width: 44px; height: 44px; border-radius: 50%; border: 6px solid #84B3FF;132 }133 .time-line {134 margin-top: 30px;135 font-size: 68px;136 font-weight: 800;137 color: #0f1e55;138 }139 .route {140 margin-top: 18px;141 font-size: 46px;142 color: #2e3a6a;143 }144 .brand-duration {145 margin-top: 26px;146 display: flex;147 align-items: center;148 justify-content: space-between;149 color: #5a6b97;150 font-size: 44px;151 }152 .brand {153 display: flex; align-items: center; gap: 18px;154 }155 .brand .logo {156 width: 96px; height: 64px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 700; border-radius: 12px;157 }158 .chevron {159 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;160 }161 .chevron svg { width: 52px; height: 52px; fill: none; stroke: #2e3a6a; stroke-width: 16px; }162 163 /* Skeleton placeholders */164 .skeleton-area {165 position: absolute;166 top: 980px;167 left: 60px;168 width: 1320px;169 padding-bottom: 60px;170 }171 .sk-line {172 height: 100px;173 background: #E6E7EA;174 border-radius: 24px;175 margin-bottom: 40px;176 }177 .sk-line.small { width: 740px; }178 .sk-line.medium { width: 1000px; }179 .sk-line.long { width: 1320px; }180 .divider {181 height: 6px;182 background: #D8DBE2;183 width: 100%;184 margin: 36px 0;185 }186 187 /* Summary section */188 .summary {189 position: absolute;190 bottom: 640px;191 left: 60px;192 width: 1320px;193 color: #1F2A55;194 }195 .summary-row {196 font-size: 52px;197 display: flex;198 align-items: center;199 justify-content: space-between;200 margin-bottom: 28px;201 }202 .summary-row .light { color: #5b6a95; font-weight: 600; }203 .summary-row .amount { font-weight: 800; }204 .total-row {205 font-size: 64px;206 display: flex;207 align-items: center;208 justify-content: space-between;209 font-weight: 900;210 margin-top: 18px;211 }212 .total-row .muted { color: #6d7ca8; font-weight: 700; }213 .ticket-note {214 margin-top: 46px;215 font-size: 50px;216 color: #3b4a7a;217 }218 219 .cta {220 position: absolute;221 bottom: 420px;222 left: 60px;223 width: 1320px;224 height: 170px;225 background: #EA6C6C;226 color: #fff;227 border-radius: 36px;228 display: flex;229 align-items: center;230 justify-content: center;231 font-size: 60px;232 font-weight: 800;233 box-shadow: 0 10px 24px rgba(234,108,108,0.5);234 }235 236 /* Bottom home indicator */237 .home-indicator {238 position: absolute;239 bottom: 120px;240 left: 0;241 right: 0;242 height: 16px;243 width: 420px;244 margin: 0 auto;245 background: #C7CBD9;246 border-radius: 12px;247 }248</style>249</head>250<body>251<div id="render-target">252 253 <!-- Status bar -->254 <div class="status-bar">255 <div>12:47</div>256 <div class="status-icons">257 <div class="icon-circle"></div>258 <div class="icon-circle"></div>259 <div class="wifi"></div>260 <div class="battery"></div>261 </div>262 </div>263 264 <!-- Header title -->265 <div class="header-area">266 <div class="top-row">267 <div class="left-back">268 <div class="back-btn">269 <svg viewBox="0 0 24 24"><path d="M15 19L8 12l7-7" /></svg>270 </div>271 </div>272 <div class="share-btn">273 <svg viewBox="0 0 24 24">274 <circle cx="6" cy="12" r="3"></circle>275 <circle cx="18" cy="6" r="3"></circle>276 <circle cx="18" cy="18" r="3"></circle>277 <path d="M8.7 11.2 L15.3 7.8"></path>278 <path d="M8.7 12.8 L15.3 16.2"></path>279 </svg>280 </div>281 </div>282 <div class="title">Southampton › Salisbury</div>283 <div class="subtitle">Thu, Nov 2, 1 passenger</div>284 </div>285 286 <!-- Light content background -->287 <div class="content-bg"></div>288 289 <!-- Train card -->290 <div class="card">291 <div class="card-row">292 <div class="label-outbound">293 <div class="check"></div>294 <div>Outbound</div>295 </div>296 <div class="chevron">297 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>298 </div>299 </div>300 <div class="time-line">Thu, Nov 02 8:10 AM - 8:39 AM</div>301 <div class="route">Southampton Central › Salisbury</div>302 <div class="brand-duration">303 <div class="brand">304 <div class="logo">[IMG: GWR]</div>305 </div>306 <div>0h 29m • 0 transfers</div>307 </div>308 </div>309 310 <!-- Skeleton placeholders area -->311 <div class="skeleton-area">312 <div class="sk-line small"></div>313 <div class="divider"></div>314 <div class="sk-line medium"></div>315 <div class="sk-line long" style="height: 86px;"></div>316 <div class="sk-line medium" style="height: 86px;"></div>317 318 <div class="sk-line long" style="height: 86px; margin-top: 24px;"></div>319 <div class="sk-line long" style="height: 86px;"></div>320 <div class="sk-line long" style="height: 86px;"></div>321 <div class="sk-line long" style="height: 160px;"></div>322 </div>323 324 <!-- Summary -->325 <div class="summary">326 <div class="summary-row">327 <div class="light">Tickets (1 passenger)</div>328 <div class="amount">$15.53</div>329 </div>330 <div class="total-row">331 <div class="muted">Total (taxes included)</div>332 <div>$15.53</div>333 </div>334 <div class="ticket-note">One-way ticket for 1 passenger</div>335 </div>336 337 <!-- CTA -->338 <div class="cta">Go to passenger details</div>339 340 <!-- Home indicator -->341 <div class="home-indicator"></div>342</div>343</body>344</html>