GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Eurostar - Select outbound</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 border-radius: 38px;16 box-shadow: 0 10px 28px rgba(0,0,0,0.25);17 font-family: "Inter", Arial, sans-serif;18 color: #0c1d3a;19 }20 21 /* Top navy header */22 .header {23 background: #072e67;24 color: #fff;25 height: 470px;26 padding: 36px 42px 24px 42px;27 box-sizing: border-box;28 }29 .status-row {30 display: flex;31 align-items: center;32 justify-content: space-between;33 font-size: 34px;34 opacity: 0.9;35 margin-bottom: 36px;36 }37 .nav-line {38 display: flex;39 align-items: center;40 justify-content: space-between;41 }42 .back-icon {43 width: 60px; height: 60px;44 display: inline-block;45 }46 .brand-row {47 display: flex;48 align-items: center;49 margin-top: 28px;50 }51 .logo-placeholder {52 width: 280px; height: 80px;53 background: #E0E0E0; border: 1px solid #BDBDBD;54 display: flex; align-items: center; justify-content: center;55 color: #757575; border-radius: 6px;56 margin-right: 24px;57 font-size: 28px;58 }59 .cart-btn {60 margin-left: auto;61 background: #ffcc24;62 color: #0c1d3a;63 padding: 18px 26px;64 border-radius: 50px;65 font-weight: 700;66 display: flex; align-items: center; gap: 16px;67 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);68 }69 .cart-icon {70 width: 40px; height: 40px;71 }72 .route-row {73 display: flex;74 justify-content: space-between;75 margin-top: 34px;76 font-size: 36px;77 }78 .route-row .sub {79 font-size: 30px; opacity: 0.9;80 }81 .edit-icon {82 width: 42px; height: 42px; margin-left: 10px;83 }84 85 /* Date selector strip */86 .date-strip {87 background: #ffffff;88 display: flex;89 align-items: center;90 padding: 26px 20px;91 box-sizing: border-box;92 border-bottom: 1px solid #e6e6e6;93 }94 .date-arrow {95 width: 84px; height: 84px;96 background: #eaf2ff;97 border-radius: 18px;98 display: flex; align-items: center; justify-content: center;99 margin: 0 8px;100 }101 .date-list {102 flex: 1;103 display: flex;104 justify-content: space-around;105 }106 .date-item {107 text-align: center;108 width: 300px;109 }110 .date-item .day {111 font-size: 32px; color: #6b778c;112 }113 .date-item .price {114 font-size: 54px; font-weight: 800; margin-top: 10px; color: #222;115 }116 .date-item.active .day { color: #0a3e9b; font-weight: 700; }117 .date-item.active .price { color: #0a3e9b; }118 .date-item.active .underline {119 width: 180px; height: 12px; border-radius: 6px; background: #0a3e9b; margin: 16px auto 0;120 }121 122 /* Content area */123 .content {124 background: #f2f2f2;125 padding: 40px;126 box-sizing: border-box;127 }128 .title {129 text-align: center;130 font-family: Georgia, "Times New Roman", serif;131 font-size: 86px;132 color: #0c2c68;133 margin-top: 20px;134 }135 .subtitle {136 text-align: center;137 font-size: 48px;138 font-weight: 800;139 color: #0c2c68;140 margin-top: 12px;141 }142 .time-filters {143 margin-top: 34px;144 display: flex;145 justify-content: space-around;146 text-align: center;147 }148 .time-filter {149 display: flex; align-items: center; gap: 18px;150 color: #111;151 }152 .time-filter .label {153 font-size: 36px;154 font-weight: 600;155 }156 .time-filter .sub {157 font-size: 32px; color: #666; margin-top: 6px;158 }159 .clock-icon { width: 44px; height: 44px; }160 161 /* Product tabs */162 .product-tabs {163 margin-top: 36px;164 background: #ffffff;165 padding: 16px;166 border-radius: 28px;167 }168 .product-row {169 display: flex;170 gap: 0;171 overflow: hidden;172 border-radius: 22px;173 }174 .prod {175 flex: 1;176 padding: 30px 24px;177 color: #fff;178 display: flex; align-items: center; justify-content: center; gap: 16px;179 font-size: 38px; font-weight: 700;180 }181 .prod.teal { background: #0f6a66; }182 .prod.magenta { background: #7a004b; }183 .prod.navy { background: #0c2c68; }184 .info-icon { width: 40px; height: 40px; }185 186 /* Card styles */187 .card {188 margin-top: 34px;189 background: #fff;190 border-radius: 28px;191 padding: 0;192 overflow: hidden;193 box-shadow: 0 2px 0 rgba(0,0,0,0.08);194 }195 .card-topbar {196 display: flex;197 height: 16px;198 }199 .bar-teal { background: #0f6a66; width: 34%; }200 .bar-magenta { background: #7a004b; width: 33%; }201 .bar-navy { background: #0c2c68; width: 33%; }202 203 .card-grid {204 display: grid;205 grid-template-columns: 360px 360px 360px;206 gap: 0;207 }208 .cell {209 padding: 32px;210 box-sizing: border-box;211 border-right: 1px solid #ececec;212 min-height: 220px;213 }214 .cell:last-child { border-right: none; }215 .left-col .time {216 font-size: 56px;217 font-weight: 800;218 color: #0c1d3a;219 margin-bottom: 8px;220 }221 .arrow-row { display: flex; align-items: center; gap: 14px; }222 .duration {223 font-size: 32px; color: #333; margin-top: 16px;224 }225 .changes {226 font-size: 34px; color: #1162c8; margin-top: 14px; font-weight: 600;227 }228 .price-col {229 background: #e7f0ee;230 display: flex; align-items: center; justify-content: center;231 text-align: center;232 }233 .price {234 font-size: 64px; font-weight: 800; color: #0c1d3a;235 }236 .unavailable {237 display: flex; align-items: center; justify-content: center;238 color: #8b8b8b; font-size: 42px; font-weight: 700;239 }240 241 /* Bottom navigation */242 .bottom-nav {243 position: absolute;244 left: 0; right: 0; bottom: 84px;245 height: 176px;246 background: #ffffff;247 border-top: 1px solid #d9dfe8;248 display: flex; justify-content: space-around; align-items: center;249 }250 .nav-item {251 text-align: center; color: #0c2c68;252 }253 .nav-item .icon { width: 56px; height: 56px; margin: 0 auto 10px; display: block; }254 .nav-item .label { font-size: 34px; font-weight: 700; }255 .home-indicator {256 position: absolute; left: 50%; transform: translateX(-50%);257 bottom: 26px; width: 300px; height: 12px; border-radius: 8px; background: #000000; opacity: 0.1;258 }259</style>260</head>261<body>262<div id="render-target">263 264 <!-- Header -->265 <div class="header">266 <div class="status-row">267 <div>7:58</div>268 <div>• • •</div>269 <div>🔋 100%</div>270 </div>271 272 <div class="nav-line">273 <!-- Back icon -->274 <svg class="back-icon" viewBox="0 0 24 24">275 <path d="M15 4 L7 12 L15 20" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>276 </svg>277 278 <div class="brand-row" style="flex:1;">279 <div class="logo-placeholder">[IMG: eurostar logo]</div>280 281 <div class="cart-btn">282 <svg class="cart-icon" viewBox="0 0 24 24">283 <path d="M3 5h3l2 12h10l2-9H7" fill="none" stroke="#0c1d3a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>284 </svg>285 <span>$0.00</span>286 <svg viewBox="0 0 24 24" width="30" height="30">287 <path d="M8 10l4 4 4-4" fill="none" stroke="#0c1d3a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>288 </svg>289 </div>290 </div>291 </div>292 293 <div class="route-row">294 <div>295 <div style="font-weight:800;">Amsterdam Centraal –</div>296 <div style="font-weight:800;">London St Pancras Int'l</div>297 </div>298 <div style="text-align:right;">299 <div>Sun 5 Nov</div>300 <div class="sub">1 adult</div>301 </div>302 <svg class="edit-icon" viewBox="0 0 24 24">303 <path d="M4 20h4l10-10-4-4L4 16v4zM14 6l4 4" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>304 </svg>305 </div>306 </div>307 308 <!-- Date selector -->309 <div class="date-strip">310 <div class="date-arrow">311 <svg viewBox="0 0 24 24" width="48" height="48">312 <path d="M15 4 L7 12 L15 20" fill="none" stroke="#1a56d6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>313 </svg>314 </div>315 316 <div class="date-list">317 <div class="date-item">318 <div class="day">Sat, Nov 4</div>319 <div class="price">$260</div>320 </div>321 <div class="date-item active">322 <div class="day">Sun, Nov 5</div>323 <div class="price">$372</div>324 <div class="underline"></div>325 </div>326 <div class="date-item">327 <div class="day">Mon, Nov 6</div>328 <div class="price">$219</div>329 </div>330 </div>331 332 <div class="date-arrow">333 <svg viewBox="0 0 24 24" width="48" height="48">334 <path d="M9 4 L17 12 L9 20" fill="none" stroke="#1a56d6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>335 </svg>336 </div>337 </div>338 339 <!-- Content -->340 <div class="content">341 <div class="title">Select outbound</div>342 <div class="subtitle">Amsterdam → London</div>343 344 <div class="time-filters">345 <div class="time-filter">346 <svg class="clock-icon" viewBox="0 0 24 24">347 <circle cx="12" cy="12" r="9" fill="none" stroke="#0c2c68" stroke-width="2"/>348 <path d="M12 7v5l4 2" fill="none" stroke="#0c2c68" stroke-width="2" stroke-linecap="round"/>349 </svg>350 <div>351 <div class="label">Morning</div>352 <div class="sub">from $230</div>353 </div>354 </div>355 <div class="time-filter">356 <svg class="clock-icon" viewBox="0 0 24 24">357 <circle cx="12" cy="12" r="9" fill="none" stroke="#0c2c68" stroke-width="2"/>358 <path d="M12 7v5l4 2" fill="none" stroke="#0c2c68" stroke-width="2" stroke-linecap="round"/>359 </svg>360 <div>361 <div class="label">Afternoon</div>362 <div class="sub">from $440</div>363 </div>364 </div>365 <div class="time-filter">366 <svg class="clock-icon" viewBox="0 0 24 24">367 <circle cx="12" cy="12" r="9" fill="none" stroke="#0c2c68" stroke-width="2"/>368 <path d="M16 12l-4 0V7" fill="none" stroke="#0c2c68" stroke-width="2" stroke-linecap="round"/>369 </svg>370 <div>371 <div class="label">Evening</div>372 <div class="sub">from $372</div>373 </div>374 </div>375 </div>376 377 <div class="product-tabs">378 <div class="product-row">379 <div class="prod teal">380 <svg class="info-icon" viewBox="0 0 24 24">381 <circle cx="12" cy="12" r="9" fill="none" stroke="#ffffff" stroke-width="2"/>382 <path d="M12 10v6M12 7h0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>383 </svg>384 <span>Standard</span>385 </div>386 <div class="prod magenta">387 <svg class="info-icon" viewBox="0 0 24 24">388 <circle cx="12" cy="12" r="9" fill="none" stroke="#ffffff" stroke-width="2"/>389 <path d="M12 10v6M12 7h0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>390 </svg>391 <span>Standard Premier</span>392 </div>393 <div class="prod navy">394 <svg class="info-icon" viewBox="0 0 24 24">395 <circle cx="12" cy="12" r="9" fill="none" stroke="#ffffff" stroke-width="2"/>396 <path d="M12 10v6M12 7h0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>397 </svg>398 <span>Business Premier</span>399 </div>400 </div>401 </div>402 403 <!-- First card -->404 <div class="card">405 <div class="card-topbar">406 <div class="bar-teal"></div>407 <div class="bar-magenta"></div>408 <div class="bar-navy"></div>409 </div>410 <div class="card-grid">411 <div class="cell left-col">412 <div class="time">07:45</div>413 <div class="arrow-row">414 <svg viewBox="0 0 24 24" width="34" height="34">415 <circle cx="12" cy="12" r="10" fill="none" stroke="#0c2c68" stroke-width="2"/>416 </svg>417 <svg viewBox="0 0 60 24" width="120" height="24">418 <path d="M2 12h46" stroke="#1a56d6" stroke-width="2" />419 <path d="M52 6l8 6-8 6" fill="none" stroke="#1a56d6" stroke-width="2" stroke-linejoin="round"/>420 </svg>421 </div>422 <div class="time" style="margin-top: 8px;">11:57</div>423 <div class="duration">5 hr 12 min</div>424 <div class="changes">1 change ▼</div>425 </div>426 <div class="cell price-col">427 <div class="price">$230</div>428 </div>429 <div class="cell unavailable">Not available</div>430 </div>431 </div>432 433 <!-- Second card -->434 <div class="card">435 <div class="card-topbar">436 <div class="bar-teal" style="width:33%;"></div>437 <div class="bar-magenta" style="width:33%;"></div>438 <div class="bar-navy" style="width:34%;"></div>439 </div>440 <div class="card-grid">441 <div class="cell left-col">442 <div class="time">09:45</div>443 <div class="arrow-row">444 <svg viewBox="0 0 24 24" width="34" height="34">445 <circle cx="12" cy="12" r="10" fill="none" stroke="#0c2c68" stroke-width="2"/>446 </svg>447 <svg viewBox="0 0 60 24" width="120" height="24">448 <path d="M2 12h46" stroke="#1a56d6" stroke-width="2" />449 <path d="M52 6l8 6-8 6" fill="none" stroke="#1a56d6" stroke-width="2" stroke-linejoin="round"/>450 </svg>451 </div>452 <div class="time" style="margin-top: 8px;">13:57</div>453 <div class="duration">5 hr 12 min</div>454 <div class="changes" style="color:#b9c1cc;">1 change</div>455 </div>456 <div class="cell unavailable">Not available</div>457 <div class="cell unavailable">Not available</div>458 </div>459 </div>460 461 </div>462 463 <!-- Bottom navigation -->464 <div class="bottom-nav">465 <div class="nav-item">466 <svg class="icon" viewBox="0 0 24 24">467 <path d="M3 11l9-7 9 7v9h-6v-6H9v6H3z" fill="none" stroke="#0c2c68" stroke-width="2" stroke-linejoin="round"/>468 </svg>469 <div class="label">Home</div>470 </div>471 <div class="nav-item">472 <svg class="icon" viewBox="0 0 24 24">473 <path d="M4 6h16M4 12h16M4 18h10" fill="none" stroke="#0c2c68" stroke-width="2" stroke-linecap="round"/>474 </svg>475 <div class="label">Book</div>476 </div>477 <div class="nav-item">478 <svg class="icon" viewBox="0 0 24 24">479 <path d="M5 4h14v16H5z" fill="none" stroke="#0c2c68" stroke-width="2"/>480 <path d="M5 8h14" stroke="#0c2c68" stroke-width="2"/>481 </svg>482 <div class="label">Your bookings</div>483 </div>484 <div class="nav-item">485 <svg class="icon" viewBox="0 0 24 24">486 <circle cx="5" cy="12" r="2" fill="#0c2c68"/>487 <circle cx="12" cy="12" r="2" fill="#0c2c68"/>488 <circle cx="19" cy="12" r="2" fill="#0c2c68"/>489 </svg>490 <div class="label">More</div>491 </div>492 </div>493 <div class="home-indicator"></div>494 495</div>496</body>497</html>