GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Train Ticket UI</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;11 }12 #render-target {13 position: relative;14 width: 1440px;15 height: 3120px;16 overflow: hidden;17 background: #182B68; /* deep navy header background */18 color: #0E1638;19 }20 21 /* Status bar */22 .status-bar {23 position: absolute;24 top: 24px;25 left: 36px;26 right: 36px;27 height: 64px;28 display: flex;29 align-items: center;30 color: #ffffff;31 font-weight: 600;32 font-size: 46px;33 letter-spacing: 0.5px;34 }35 .status-right {36 margin-left: auto;37 display: flex;38 align-items: center;39 gap: 32px;40 }41 .status-icon {42 width: 44px;43 height: 44px;44 }45 46 /* Top navigation */47 .top-nav {48 position: absolute;49 top: 116px;50 left: 36px;51 right: 36px;52 height: 96px;53 display: flex;54 align-items: center;55 color: #ffffff;56 }57 .nav-btn {58 width: 72px;59 height: 72px;60 display: flex;61 align-items: center;62 justify-content: center;63 border-radius: 18px;64 background: rgba(255,255,255,0.08);65 margin-right: 24px;66 }67 .share-btn {68 margin-left: auto;69 }70 71 /* Title */72 .page-title {73 position: absolute;74 top: 220px;75 left: 96px;76 color: #ffffff;77 font-size: 58px;78 font-weight: 700;79 }80 .page-subtitle {81 position: absolute;82 top: 300px;83 left: 96px;84 color: #D6DEF2;85 font-size: 36px;86 font-weight: 500;87 }88 89 /* Content area below header */90 .content-area {91 position: absolute;92 left: 0;93 right: 0;94 top: 420px;95 bottom: 0;96 background: #F4F6FA;97 border-top-left-radius: 36px;98 border-top-right-radius: 36px;99 }100 101 /* Journey card */102 .journey-card {103 position: absolute;104 top: 32px;105 left: 36px;106 width: 1368px;107 background: #ffffff;108 border-radius: 28px;109 box-shadow: 0 8px 24px rgba(0,0,0,0.08);110 padding: 48px 48px;111 color: #0E1638;112 }113 .journey-top {114 display: flex;115 align-items: center;116 gap: 24px;117 color: #5B79C6;118 font-weight: 700;119 font-size: 36px;120 }121 .dot {122 width: 28px;123 height: 28px;124 border-radius: 50%;125 background: #5B79C6;126 margin-right: 12px;127 display: inline-block;128 }129 .journey-main {130 display: flex;131 align-items: center;132 margin-top: 28px;133 gap: 28px;134 }135 .journey-time {136 font-size: 54px;137 font-weight: 800;138 color: #0E1638;139 }140 .journey-route {141 font-size: 40px;142 color: #2E3A77;143 margin-top: 12px;144 }145 .journey-meta {146 margin-left: auto;147 text-align: right;148 color: #59608A;149 font-size: 36px;150 }151 .journey-arrow {152 margin-left: 18px;153 width: 44px;154 height: 44px;155 }156 157 /* Sections */158 .section {159 position: relative;160 margin: 370px 36px 0 36px;161 }162 .section-title {163 font-size: 52px;164 font-weight: 800;165 color: #0E1638;166 margin-bottom: 32px;167 }168 169 .cards-row {170 display: flex;171 gap: 36px;172 }173 .card {174 flex: 1;175 min-height: 460px;176 background: #ffffff;177 border-radius: 26px;178 box-shadow: 0 6px 20px rgba(0,0,0,0.06);179 padding: 42px;180 }181 .card.disabled {182 background: #F1F3F6;183 color: #92A1B8;184 border: 2px dashed #D7DEE8;185 }186 .card-title {187 font-size: 46px;188 font-weight: 800;189 color: #17305C;190 margin-bottom: 28px;191 }192 .feature {193 display: flex;194 align-items: center;195 gap: 18px;196 color: #2E3A77;197 font-size: 36px;198 margin: 14px 0;199 }200 .currency {201 position: absolute;202 bottom: 40px;203 left: 42px;204 font-weight: 800;205 font-size: 42px;206 color: #17305C;207 }208 209 .fare-terms {210 margin: 80px 36px 240px 36px;211 font-size: 40px;212 color: #2E3A77;213 }214 215 /* Bottom sticky button */216 .bottom-bar {217 position: absolute;218 left: 0;219 right: 0;220 bottom: 0;221 height: 220px;222 background: #F4F6FA;223 }224 .cta {225 position: absolute;226 left: 96px;227 right: 96px;228 bottom: 48px;229 height: 140px;230 border-radius: 28px;231 background: #E87474;232 color: #ffffff;233 display: flex;234 align-items: center;235 justify-content: center;236 font-size: 48px;237 font-weight: 800;238 box-shadow: 0 12px 30px rgba(232,116,116,0.4);239 }240 241 /* Simple icons */242 .svg-icon {243 width: 40px;244 height: 40px;245 fill: #2E3A77;246 }247 .svg-icon.light {248 fill: #ffffff;249 }250</style>251</head>252<body>253<div id="render-target">254 255 <!-- Status bar -->256 <div class="status-bar">257 12:47258 <div class="status-right">259 <!-- simple circle icons to mimic status -->260 <svg class="status-icon" viewBox="0 0 24 24">261 <path class="svg-icon light" d="M2 12h20v2H2zM4 8h16v2H4zM6 4h12v2H6z"></path>262 </svg>263 <svg class="status-icon" viewBox="0 0 24 24">264 <path class="svg-icon light" d="M3 7l9-5 9 5v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7z"></path>265 </svg>266 </div>267 </div>268 269 <!-- Top navigation -->270 <div class="top-nav">271 <div class="nav-btn">272 <svg class="svg-icon light" viewBox="0 0 24 24">273 <path d="M15.5 19.5L8 12l7.5-7.5" stroke="white" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>274 </svg>275 </div>276 <div class="share-btn nav-btn">277 <svg class="svg-icon light" viewBox="0 0 24 24">278 <path d="M18 8a3 3 0 1 0-2.9-3.8L7.7 8.8a3 3 0 1 0 0 6.4l7.4 4.6A3 3 0 1 0 17 18" stroke="white" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>279 </svg>280 </div>281 </div>282 283 <!-- Title -->284 <div class="page-title">Southampton › Salisbury</div>285 <div class="page-subtitle">Thu, Nov 02, 1 passenger</div>286 287 <!-- Content area -->288 <div class="content-area">289 290 <!-- Journey card -->291 <div class="journey-card">292 <div class="journey-top">293 <span class="dot"></span> OUTBOUND294 </div>295 296 <div class="journey-main">297 <div>298 <div class="journey-time">Thu, Nov 02 8:10 AM - 8:39 AM</div>299 <div class="journey-route">Southampton Central › Salisbury</div>300 <div style="margin-top:22px; display:flex; align-items:center; gap:14px; color:#0E1638; font-weight:700;">301 <div style="width:56px; height:32px; background:#1E3A8A; border-radius:8px; color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px;">GWR</div>302 </div>303 </div>304 <div class="journey-meta">305 0h 29m • 0 transfers306 </div>307 <svg class="journey-arrow" viewBox="0 0 24 24">308 <path d="M8 10l4 4 4-4" fill="none" stroke="#1D2B5B" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>309 </svg>310 </div>311 </div>312 313 <!-- Sections -->314 <div class="section" style="margin-top: 380px;">315 <div class="section-title">Class conditions</div>316 <div class="cards-row">317 <!-- Active class card -->318 <div class="card">319 <div class="card-title">Standard</div>320 <div class="feature">321 <svg class="svg-icon" viewBox="0 0 24 24">322 <path d="M4 9h16v6H4zM7 15v4h10v-4" fill="none" stroke="#2E3A77" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>323 </svg>324 Free Wi‑Fi325 </div>326 <div class="feature">327 <svg class="svg-icon" viewBox="0 0 24 24">328 <path d="M7 4v9M17 4v9M4 13h16M12 18v2" fill="none" stroke="#2E3A77" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>329 </svg>330 Power plugs331 </div>332 <div class="currency">+$0</div>333 </div>334 335 <!-- Disabled class card -->336 <div class="card disabled">337 <div style="font-size:42px; font-weight:700; margin-top:40px;">There is only 1 class available for this journey</div>338 </div>339 </div>340 </div>341 342 <div class="section" style="margin-top: 120px;">343 <div class="section-title">Fare conditions</div>344 <div class="cards-row">345 <!-- Fare card -->346 <div class="card">347 <div class="card-title">Anytime Day<br>Single</div>348 <div class="feature">349 <svg class="svg-icon" viewBox="0 0 24 24">350 <path d="M4 6h16v12H4zM8 10h8" fill="none" stroke="#2E3A77" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>351 </svg>352 Semi refundable353 </div>354 <div class="feature">355 <svg class="svg-icon" viewBox="0 0 24 24">356 <path d="M5 5l14 14M19 5L5 19" stroke="#C25555" stroke-width="2.6" stroke-linecap="round"/>357 </svg>358 Non exchangeable359 </div>360 <div class="currency">+$0</div>361 </div>362 363 <!-- Disabled fare card -->364 <div class="card disabled">365 <div style="font-size:42px; font-weight:700; margin-top:40px;">There is only 1 fare available for this journey</div>366 </div>367 </div>368 </div>369 370 <!-- Fare terms short text -->371 <div class="fare-terms">372 <div style="font-weight:800; color:#0E1638; font-size:46px; margin-bottom:18px;">Fare terms</div>373 <div>Anytime Day Single — One‑way ticket for 1 passenger. Valid on any service on the selected date. Some refunds may be available according to operator rules.</div>374 </div>375 376 <!-- Bottom bar with CTA -->377 <div class="bottom-bar">378 <div class="cta">Go to passenger details</div>379 </div>380 381 </div>382</div>383</body>384</html>