GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Outbound Trip UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #F4F5F6;15 border-radius: 0;16 box-shadow: none;17 }18 19 /* Top green header */20 .topbar {21 position: relative;22 width: 100%;23 background: #9AD83A;24 padding-bottom: 24px;25 }26 .status {27 height: 70px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 padding: 12px 40px 0 40px;32 color: #fff;33 font-size: 34px;34 letter-spacing: 0.5px;35 opacity: 0.95;36 }37 .nav {38 display: flex;39 align-items: center;40 justify-content: space-between;41 padding: 18px 40px 10px 40px;42 }43 .nav-left {44 display: flex;45 align-items: center;46 gap: 28px;47 }48 .nav-title {49 color: #2B2B2B;50 font-weight: 700;51 font-size: 56px;52 }53 .nav-right {54 color: #2B2B2B;55 font-weight: 700;56 font-size: 40px;57 letter-spacing: 1px;58 }59 .tabs {60 display: flex;61 gap: 40px;62 padding: 18px 40px 22px 40px;63 color: rgba(0,0,0,0.6);64 font-size: 34px;65 text-transform: uppercase;66 letter-spacing: 2px;67 white-space: nowrap;68 }69 .tab {70 padding-bottom: 16px;71 }72 .tab.active {73 color: #2B2B2B;74 border-bottom: 6px solid #2B2B2B;75 }76 77 /* Info notice */78 .notice {79 margin: 24px 28px 12px 28px;80 background: #fff;81 border: 1px solid #D3D3D3;82 border-radius: 18px;83 padding: 24px 26px;84 display: flex;85 align-items: center;86 gap: 20px;87 color: #333;88 font-size: 34px;89 }90 .notice b { font-weight: 800; }91 .notice-icon {92 width: 54px;93 height: 54px;94 }95 96 .earlier {97 text-align: center;98 color: #1F8F2D;99 font-weight: 800;100 font-size: 36px;101 letter-spacing: 1px;102 margin: 18px 0 10px 0;103 }104 105 /* Cards */106 .card {107 margin: 18px 28px;108 background: #fff;109 border: 1px solid #D4D4D4;110 border-radius: 22px;111 overflow: hidden;112 }113 .card-inner {114 padding: 28px 30px;115 }116 .row {117 display: flex;118 align-items: center;119 justify-content: space-between;120 }121 .times {122 width: 270px;123 color: #222;124 font-weight: 800;125 }126 .time {127 font-size: 46px;128 line-height: 58px;129 }130 .ampm {131 font-size: 26px;132 font-weight: 600;133 margin-left: 8px;134 color: #6B6B6B;135 }136 137 .timeline {138 width: 60px;139 display: flex;140 align-items: center;141 justify-content: center;142 }143 .timeline svg { width: 20px; height: 120px; }144 145 .stations {146 flex: 1;147 padding-left: 18px;148 color: #2B2B2B;149 }150 .station {151 font-size: 40px;152 line-height: 56px;153 font-weight: 600;154 }155 .expand {156 width: 40px;157 height: 40px;158 margin-left: 10px;159 }160 161 .price-area {162 width: 220px;163 text-align: right;164 }165 .price {166 font-size: 56px;167 font-weight: 800;168 color: #333;169 }170 .price .cents {171 font-size: 26px;172 vertical-align: super;173 font-weight: 700;174 }175 .cta {176 margin-top: 16px;177 margin-left: auto;178 width: 100px;179 height: 100px;180 background: #97D63A;181 border-radius: 50%;182 display: flex;183 align-items: center;184 justify-content: center;185 }186 .divider {187 margin: 18px 0;188 height: 1px;189 background: #E6E6E6;190 }191 192 .meta {193 display: flex;194 align-items: center;195 gap: 22px;196 }197 .chip {198 display: inline-flex;199 align-items: center;200 gap: 12px;201 background: #F7F7F7;202 border: 1px solid #DADADA;203 border-radius: 24px;204 padding: 10px 16px;205 color: #333;206 font-size: 32px;207 }208 .chip svg { width: 30px; height: 30px; }209 .small {210 color: #777;211 font-size: 30px;212 }213 .meta-icons {214 display: inline-flex;215 align-items: center;216 gap: 18px;217 margin-left: 12px;218 }219 .meta-icons svg { width: 34px; height: 34px; }220 221 /* Bottom gesture bar */222 .gesture {223 position: absolute;224 bottom: 28px;225 left: 50%;226 transform: translateX(-50%);227 width: 380px;228 height: 14px;229 background: #000;230 opacity: 0.8;231 border-radius: 10px;232 }233</style>234</head>235<body>236<div id="render-target">237 238 <!-- Top area -->239 <div class="topbar">240 <div class="status">241 <div>3:58</div>242 <div>243 <!-- simple status icons -->244 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">245 <rect x="2" y="6" width="14" height="12" stroke="#fff" stroke-width="2"></rect>246 <rect x="17" y="9" width="5" height="6" fill="#fff"></rect>247 </svg>248 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" style="margin-left:14px;">249 <path d="M3 8h18v8H3z" stroke="#fff" stroke-width="2"></path>250 <rect x="19.5" y="5" width="2" height="2.8" fill="#fff"></rect>251 </svg>252 </div>253 </div>254 255 <div class="nav">256 <div class="nav-left">257 <!-- Back arrow -->258 <svg width="44" height="44" viewBox="0 0 24 24">259 <path d="M15 19L8 12l7-7" stroke="#2B2B2B" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>260 </svg>261 <div class="nav-title">Outbound trip</div>262 </div>263 <div class="nav-right">FILTER</div>264 </div>265 266 <div class="tabs">267 <div class="tab">SUN, NOV 19</div>268 <div class="tab active">MON, NOV 20</div>269 <div class="tab">TUE, NOV 21</div>270 <div class="tab">WED, NOV 22</div>271 </div>272 </div>273 274 <!-- Notice -->275 <div class="notice">276 <svg class="notice-icon" viewBox="0 0 24 24">277 <circle cx="12" cy="12" r="11" fill="none" stroke="#666" stroke-width="2"></circle>278 <rect x="11" y="10" width="2" height="7" fill="#666"></rect>279 <circle cx="12" cy="6.3" r="1.3" fill="#666"></circle>280 </svg>281 <div>All transactions will incur a <b>$3.99</b> service fee.</div>282 </div>283 284 <div class="earlier">SHOW EARLIER TRIPS (1)</div>285 286 <!-- Trip Card 1 -->287 <div class="card">288 <div class="card-inner">289 <div class="row">290 <div class="times">291 <div class="time">7:50<span class="ampm">AM</span></div>292 <div class="time" style="color:#6B6B6B;">8:50<span class="ampm">AM</span></div>293 </div>294 295 <div class="timeline">296 <svg viewBox="0 0 10 120">297 <circle cx="5" cy="18" r="5" fill="#A0A0A0"></circle>298 <rect x="4.3" y="28" width="1.4" height="64" fill="#A0A0A0"></rect>299 <circle cx="5" cy="100" r="5" fill="#A0A0A0"></circle>300 </svg>301 </div>302 303 <div class="stations">304 <div class="station">Antwerp Rooseveltplaats</div>305 <div class="station" style="color:#6B6B6B;">Brussels-North station</div>306 </div>307 308 <svg class="expand" viewBox="0 0 24 24">309 <path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"></path>310 </svg>311 312 <div class="price-area">313 <div class="price">$2<span class="cents">.99</span></div>314 <div class="cta">315 <svg width="40" height="40" viewBox="0 0 24 24">316 <path d="M9 6l6 6-6 6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>317 </svg>318 </div>319 </div>320 </div>321 322 <div class="divider"></div>323 324 <div class="meta">325 <div class="chip">326 <svg viewBox="0 0 24 24">327 <rect x="3" y="7" width="16" height="9" stroke="#999" fill="none" stroke-width="2"></rect>328 <circle cx="7" cy="18" r="1.8" fill="#999"></circle>329 <circle cx="15" cy="18" r="1.8" fill="#999"></circle>330 </svg>331 <span>Direct</span>332 <svg viewBox="0 0 24 24">333 <path d="M7 10l5 5 5-5" stroke="#999" stroke-width="2" fill="none" stroke-linecap="round"></path>334 </svg>335 </div>336 <div class="small">1:00 Hrs.</div>337 <div class="meta-icons">338 <!-- WiFi -->339 <svg viewBox="0 0 24 24">340 <path d="M4 9c4-4 12-4 16 0M7 12c3-3 7-3 10 0M10 15c2-2 2-2 4 0" stroke="#9A9A9A" stroke-width="2" fill="none" stroke-linecap="round"></path>341 <circle cx="12" cy="18" r="1.6" fill="#9A9A9A"></circle>342 </svg>343 <!-- plug/charging simple icon -->344 <svg viewBox="0 0 24 24">345 <path d="M9 3v6M15 3v6M7 7h10v12H7z" stroke="#9A9A9A" stroke-width="2" fill="none"></path>346 </svg>347 </div>348 </div>349 </div>350 </div>351 352 <!-- Trip Card 2 -->353 <div class="card">354 <div class="card-inner">355 <div class="row">356 <div class="times">357 <div class="time">8:10<span class="ampm">AM</span></div>358 <div class="time" style="color:#6B6B6B;">9:00<span class="ampm">AM</span></div>359 </div>360 361 <div class="timeline">362 <svg viewBox="0 0 10 120">363 <circle cx="5" cy="18" r="5" fill="#A0A0A0"></circle>364 <rect x="4.3" y="28" width="1.4" height="64" fill="#A0A0A0"></rect>365 <circle cx="5" cy="100" r="5" fill="#A0A0A0"></circle>366 </svg>367 </div>368 369 <div class="stations">370 <div class="station">Antwerp Rooseveltplaats</div>371 <div class="station" style="color:#6B6B6B;">Brussels-North station</div>372 </div>373 374 <svg class="expand" viewBox="0 0 24 24">375 <path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"></path>376 </svg>377 378 <div class="price-area">379 <div class="price">$2<span class="cents">.99</span></div>380 <div class="cta">381 <svg width="40" height="40" viewBox="0 0 24 24">382 <path d="M9 6l6 6-6 6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>383 </svg>384 </div>385 </div>386 </div>387 388 <div class="divider"></div>389 390 <div class="meta">391 <div class="chip">392 <svg viewBox="0 0 24 24">393 <rect x="3" y="7" width="16" height="9" stroke="#999" fill="none" stroke-width="2"></rect>394 <circle cx="7" cy="18" r="1.8" fill="#999"></circle>395 <circle cx="15" cy="18" r="1.8" fill="#999"></circle>396 </svg>397 <span>Direct</span>398 <svg viewBox="0 0 24 24">399 <path d="M7 10l5 5 5-5" stroke="#999" stroke-width="2" fill="none" stroke-linecap="round"></path>400 </svg>401 </div>402 <div class="small">0:50 Hrs.</div>403 <div class="meta-icons">404 <svg viewBox="0 0 24 24">405 <path d="M4 9c4-4 12-4 16 0M7 12c3-3 7-3 10 0M10 15c2-2 2-2 4 0" stroke="#9A9A9A" stroke-width="2" fill="none" stroke-linecap="round"></path>406 <circle cx="12" cy="18" r="1.6" fill="#9A9A9A"></circle>407 </svg>408 <svg viewBox="0 0 24 24">409 <path d="M9 3v6M15 3v6M7 7h10v12H7z" stroke="#9A9A9A" stroke-width="2" fill="none"></path>410 </svg>411 </div>412 </div>413 </div>414 </div>415 416 <!-- Trip Card 3 -->417 <div class="card">418 <div class="card-inner">419 <div class="row">420 <div class="times">421 <div class="time">8:30<span class="ampm">AM</span></div>422 <div class="time" style="color:#6B6B6B;">9:30<span class="ampm">AM</span></div>423 </div>424 425 <div class="timeline">426 <svg viewBox="0 0 10 120">427 <circle cx="5" cy="18" r="5" fill="#A0A0A0"></circle>428 <rect x="4.3" y="28" width="1.4" height="64" fill="#A0A0A0"></rect>429 <circle cx="5" cy="100" r="5" fill="#A0A0A0"></circle>430 </svg>431 </div>432 433 <div class="stations">434 <div class="station">Antwerp Rooseveltplaats</div>435 <div class="station" style="color:#6B6B6B;">Brussels-North station</div>436 </div>437 438 <svg class="expand" viewBox="0 0 24 24">439 <path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"></path>440 </svg>441 442 <div class="price-area">443 <div class="price">$2<span class="cents">.99</span></div>444 <div class="cta">445 <svg width="40" height="40" viewBox="0 0 24 24">446 <path d="M9 6l6 6-6 6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>447 </svg>448 </div>449 </div>450 </div>451 452 <div class="divider"></div>453 454 <div class="meta">455 <div class="chip">456 <svg viewBox="0 0 24 24">457 <rect x="3" y="7" width="16" height="9" stroke="#999" fill="none" stroke-width="2"></rect>458 <circle cx="7" cy="18" r="1.8" fill="#999"></circle>459 <circle cx="15" cy="18" r="1.8" fill="#999"></circle>460 </svg>461 <span>Direct</span>462 <svg viewBox="0 0 24 24">463 <path d="M7 10l5 5 5-5" stroke="#999" stroke-width="2" fill="none" stroke-linecap="round"></path>464 </svg>465 </div>466 <div class="small">1:00 Hrs.</div>467 <div class="meta-icons">468 <svg viewBox="0 0 24 24">469 <path d="M4 9c4-4 12-4 16 0M7 12c3-3 7-3 10 0M10 15c2-2 2-2 4 0" stroke="#9A9A9A" stroke-width="2" fill="none" stroke-linecap="round"></path>470 <circle cx="12" cy="18" r="1.6" fill="#9A9A9A"></circle>471 </svg>472 <svg viewBox="0 0 24 24">473 <path d="M9 3v6M15 3v6M7 7h10v12H7z" stroke="#9A9A9A" stroke-width="2" fill="none"></path>474 </svg>475 </div>476 </div>477 </div>478 </div>479 480 <!-- Trip Card 4 -->481 <div class="card">482 <div class="card-inner">483 <div class="row">484 <div class="times">485 <div class="time">8:40<span class="ampm">AM</span></div>486 <div class="time" style="color:#6B6B6B;">10:00<span class="ampm">AM</span></div>487 </div>488 489 <div class="timeline">490 <svg viewBox="0 0 10 120">491 <circle cx="5" cy="18" r="5" fill="#A0A0A0"></circle>492 <rect x="4.3" y="28" width="1.4" height="64" fill="#A0A0A0"></rect>493 <circle cx="5" cy="100" r="5" fill="#A0A0A0"></circle>494 </svg>495 </div>496 497 <div class="stations">498 <div class="station">Antwerp Rooseveltplaats</div>499 <div class="station" style="color:#6B6B6B;">Brussels-North station</div>500 </div>501 502 <svg class="expand" viewBox="0 0 24 24">503 <path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"></path>504 </svg>505 506 <div class="price-area">507 <div class="price">$2<span class="cents">.99</span></div>508 <div class="cta">509 <svg width="40" height="40" viewBox="0 0 24 24">510 <path d="M9 6l6 6-6 6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>511 </svg>512 </div>513 </div>514 </div>515 516 <div class="divider"></div>517 518 <div class="meta">519 <div class="chip">520 <svg viewBox="0 0 24 24">521 <rect x="3" y="7" width="16" height="9" stroke="#999" fill="none" stroke-width="2"></rect>522 <circle cx="7" cy="18" r="1.8" fill="#999"></circle>523 <circle cx="15" cy="18" r="1.8" fill="#999"></circle>524 </svg>525 <span>Direct</span>526 <svg viewBox="0 0 24 24">527 <path d="M7 10l5 5 5-5" stroke="#999" stroke-width="2" fill="none" stroke-linecap="round"></path>528 </svg>529 </div>530 <div class="small">1:20 Hrs.</div>531 <div class="meta-icons">532 <svg viewBox="0 0 24 24">533 <path d="M4 9c4-4 12-4 16 0M7 12c3-3 7-3 10 0M10 15c2-2 2-2 4 0" stroke="#9A9A9A" stroke-width="2" fill="none" stroke-linecap="round"></path>534 <circle cx="12" cy="18" r="1.6" fill="#9A9A9A"></circle>535 </svg>536 <svg viewBox="0 0 24 24">537 <path d="M9 3v6M15 3v6M7 7h10v12H7z" stroke="#9A9A9A" stroke-width="2" fill="none"></path>538 </svg>539 </div>540 </div>541 </div>542 </div>543 544 <!-- Bottom gesture bar -->545 <div class="gesture"></div>546</div>547</body>548</html>