GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>My Trips - UI Recreation</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Segoe UI", Roboto, Arial, sans-serif;13 color: #1e2a37;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #f4f7fb;21 }22 23 /* Status bar */24 .status-bar {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 88px;30 display: flex;31 align-items: center;32 padding: 0 36px;33 color: #ffffff;34 z-index: 4;35 }36 .status-left,37 .status-right {38 display: flex;39 align-items: center;40 gap: 22px;41 }42 .status-left { flex: 1; }43 .status-time {44 font-weight: 600;45 letter-spacing: 1px;46 font-size: 32px;47 }48 49 /* Hero */50 .hero {51 position: relative;52 width: 1080px;53 height: 520px;54 background: linear-gradient(180deg, #3ab6ff 0%, #65a9ff 60%, rgba(101,169,255,0.85) 100%);55 overflow: hidden;56 }57 .hero-image {58 position: absolute;59 left: 0;60 right: 0;61 bottom: -10px;62 height: 280px;63 margin: 0 24px;64 background: rgba(255,255,255,0.15);65 border: 1px solid rgba(255,255,255,0.35);66 display: flex;67 align-items: center;68 justify-content: center;69 color: rgba(255,255,255,0.9);70 font-weight: 600;71 border-radius: 18px;72 backdrop-filter: blur(1px);73 }74 .hero-title {75 position: absolute;76 left: 44px;77 top: 132px;78 font-size: 86px;79 line-height: 1;80 font-weight: 800;81 color: #ffffff;82 letter-spacing: 0.5px;83 }84 .hero-dot {85 display: inline-block;86 width: 18px;87 height: 18px;88 background: #ffc44d;89 border-radius: 50%;90 margin-left: 10px;91 vertical-align: 18px;92 }93 94 .quick-actions {95 position: absolute;96 top: 250px;97 left: 32px;98 right: 32px;99 display: flex;100 gap: 22px;101 padding: 0 8px;102 }103 .pill {104 display: inline-flex;105 align-items: center;106 gap: 16px;107 background: rgba(255,255,255,0.25);108 color: #eaf6ff;109 padding: 22px 30px;110 border-radius: 20px;111 border: 1px solid rgba(255,255,255,0.35);112 backdrop-filter: blur(2px);113 font-weight: 700;114 font-size: 34px;115 white-space: nowrap;116 }117 .pill svg { fill: #eaf6ff; }118 119 .pill.small {120 padding: 22px;121 width: 72px;122 justify-content: center;123 }124 125 /* Content wrapper (rounded top) */126 .content {127 position: absolute;128 top: 470px;129 left: 0;130 right: 0;131 bottom: 170px;132 overflow-y: hidden;133 }134 135 .section-card {136 background: #ffffff;137 border-radius: 36px;138 margin: 24px;139 padding: 36px;140 box-shadow: 0 6px 20px rgba(16,36,94,0.05);141 }142 143 .section-header {144 display: flex;145 align-items: center;146 justify-content: space-between;147 margin-bottom: 24px;148 }149 .section-title {150 font-size: 54px;151 font-weight: 800;152 color: #223449;153 }154 .chev {155 width: 22px;156 height: 22px;157 border-right: 6px solid #96a3b6;158 border-top: 6px solid #96a3b6;159 transform: rotate(45deg);160 margin-right: 8px;161 }162 163 /* Horizontal scroll rows */164 .h-scroll {165 display: flex;166 gap: 28px;167 overflow-x: auto;168 padding-bottom: 8px;169 scrollbar-width: none;170 }171 .h-scroll::-webkit-scrollbar { display: none; }172 173 /* Itinerary tiles */174 .tile {175 width: 450px;176 border-radius: 28px;177 background: #f1f4f9;178 border: 1px solid #e4e8ef;179 overflow: hidden;180 flex: 0 0 auto;181 }182 .tile.add {183 background: #f3f6fb;184 display: flex;185 align-items: center;186 justify-content: center;187 height: 320px;188 }189 .add-inner {190 display: flex;191 flex-direction: column;192 align-items: center;193 color: #5b78a0;194 gap: 16px;195 font-weight: 700;196 font-size: 38px;197 }198 .add-icon {199 width: 84px;200 height: 84px;201 border-radius: 50%;202 border: 6px solid #86a7ff;203 color: #86a7ff;204 display: flex;205 align-items: center;206 justify-content: center;207 }208 .add-icon svg { width: 44px; height: 44px; fill: #86a7ff; }209 210 .tile .img {211 height: 220px;212 background: #E0E0E0;213 border-bottom: 1px solid #BDBDBD;214 display: flex;215 align-items: center;216 justify-content: center;217 color: #757575;218 font-weight: 600;219 }220 .tile .text {221 padding: 22px 26px 26px;222 background: #f6f8fc;223 }224 .tile .title {225 font-size: 40px;226 font-weight: 800;227 color: #243854;228 margin-bottom: 10px;229 }230 .tile .meta {231 font-size: 32px;232 color: #7e8ba0;233 font-weight: 600;234 }235 236 /* Subsection label */237 .subnote {238 text-align: center;239 color: #73829b;240 font-weight: 800;241 font-size: 40px;242 padding: 12px 0 6px;243 }244 245 /* Destination block */246 .dest-block {247 background: #ffffff;248 border-radius: 36px;249 margin: 24px;250 padding: 32px;251 box-shadow: 0 6px 20px rgba(16,36,94,0.05);252 }253 .dest-head {254 display: flex;255 align-items: center;256 justify-content: space-between;257 margin-bottom: 20px;258 }259 .dest-title {260 font-size: 60px;261 font-weight: 900;262 color: #1e2a37;263 }264 .card-row {265 display: flex;266 gap: 28px;267 overflow-x: auto;268 padding: 8px;269 scrollbar-width: none;270 }271 .card-row::-webkit-scrollbar { display: none; }272 273 .dest-card {274 position: relative;275 width: 480px;276 height: 690px;277 border-radius: 28px;278 overflow: hidden;279 background: #f2f4f8;280 border: 1px solid #e3e7ef;281 flex: 0 0 auto;282 }283 .dest-img {284 position: absolute;285 inset: 0;286 background: #E0E0E0;287 border: 1px solid #BDBDBD;288 display: flex;289 align-items: center;290 justify-content: center;291 color: #575757;292 font-weight: 600;293 font-size: 36px;294 }295 .ribbon {296 position: absolute;297 top: 22px;298 left: 22px;299 background: #eec6a0;300 color: #5a3b1b;301 font-weight: 900;302 padding: 12px 20px;303 border-radius: 16px;304 font-size: 32px;305 display: inline-flex;306 align-items: center;307 gap: 12px;308 }309 .caption-pill {310 position: absolute;311 left: 26px;312 right: 26px;313 bottom: 24px;314 background: #ffffff;315 color: #1e2a37;316 border-radius: 20px;317 padding: 22px 24px;318 font-weight: 800;319 font-size: 40px;320 box-shadow: 0 6px 16px rgba(21,53,133,0.15);321 }322 323 .pager {324 width: 120px;325 height: 10px;326 background: #dfe6f4;327 border-radius: 10px;328 margin: 16px auto 0;329 position: relative;330 overflow: hidden;331 }332 .pager .active {333 width: 36%;334 height: 100%;335 background: #3f76ff;336 border-radius: 10px;337 position: absolute;338 left: 32%;339 }340 341 /* Bottom nav */342 .bottom-nav {343 position: absolute;344 left: 0;345 right: 0;346 bottom: 38px;347 height: 148px;348 background: #ffffff;349 border-top: 1px solid #e6ebf3;350 display: flex;351 align-items: center;352 justify-content: space-around;353 padding-bottom: 18px;354 }355 .nav-item {356 display: flex;357 flex-direction: column;358 align-items: center;359 gap: 10px;360 color: #8a97ac;361 font-weight: 800;362 font-size: 30px;363 }364 .nav-item.active {365 color: #2a62ff;366 }367 .nav-icon {368 width: 60px; height: 60px;369 }370 .bag-dot {371 position: absolute;372 width: 16px; height: 16px; border-radius: 50%;373 background: #ffc44d;374 right: -2px; top: -2px;375 }376 377 .home-indicator {378 position: absolute;379 bottom: 10px;380 left: 50%;381 transform: translateX(-50%);382 width: 360px;383 height: 12px;384 background: #b9c0cc;385 border-radius: 8px;386 opacity: 0.9;387 }388</style>389</head>390<body>391<div id="render-target">392 <!-- Status bar -->393 <div class="status-bar">394 <div class="status-left">395 <div class="status-time">12:23</div>396 <div style="font-weight:700;">ib</div>397 <div style="font-weight:900;">N</div>398 <div style="width:10px;height:10px;background:#ffffff;border-radius:50%;opacity:0.7;"></div>399 </div>400 <div class="status-right">401 <!-- Signal -->402 <svg width="36" height="36" viewBox="0 0 24 24" fill="#ffffff"><path d="M2 18h2v2H2v-2zm4-4h2v6H6v-6zm4-4h2v10h-2V10zm4-4h2v14h-2V6zm4-3h2v17h-2V3z"/></svg>403 <!-- Wifi -->404 <svg width="36" height="36" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 18.5l3.5 3.5-3.5 3.5-3.5-3.5L12 18.5z" fill="none"/><path d="M12 18c-1.1 0-2 .9-2 2 0 .6.3 1.2.7 1.6L12 22.9l1.3-1.3c.4-.4.7-1 .7-1.6 0-1.1-.9-2-2-2zm0-6c-3 0-5.7 1.2-7.7 3.2l1.4 1.4C7.3 14.9 9.5 14 12 14s4.7.9 6.3 2.6l1.4-1.4C17.7 13.2 15 12 12 12zm0-6C6.8 6 2.3 8.1 0 11.1l1.6 1.2C3.6 9.7 7.5 8 12 8s8.4 1.7 10.4 4.3L24 11.1C21.7 8.1 17.2 6 12 6z" /></svg>405 <!-- Battery -->406 <svg width="48" height="26" viewBox="0 0 30 16" fill="none">407 <rect x="1" y="1" width="24" height="14" rx="3" stroke="#fff" stroke-width="2"></rect>408 <rect x="3" y="3" width="18" height="10" rx="2" fill="#fff"></rect>409 <rect x="26" y="5" width="3" height="6" rx="1.5" fill="#fff"></rect>410 </svg>411 </div>412 </div>413 414 <!-- Hero -->415 <div class="hero">416 <div class="hero-title">My Trips<span class="hero-dot"></span></div>417 <div class="quick-actions">418 <div class="pill">419 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M20 6H4c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H4V8h16v8zM6 10h5v4H6v-4z"/></svg>420 <span>All Bookings</span>421 </div>422 <div class="pill">423 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.02-4.11a3 3 0 10-.93-1.49L8.07 9.81a3 3 0 100 4.38l7.02 4.11c.5.48 1.18.78 1.91.78a3 3 0 100-6z"/></svg>424 <span>My Itineraries</span>425 </div>426 <div class="pill">427 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm13 6H4v12h16V8z"/></svg>428 <span>Checklist</span>429 </div>430 <div class="pill small" title="Currency">431 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 3a5 5 0 00-5 5h2a3 3 0 116 0c0 1.7-1.5 2.5-3.3 3.3C9.9 12.4 8 13.3 8 16v1h8v-2h-5.6c.2-.6 1.1-1 2.3-1.5 2.2-.9 5.3-2.1 5.3-5.5A5 5 0 0012 3z"/></svg>432 </div>433 </div>434 <div class="hero-image">[IMG: Scenic Mountains Hero]</div>435 </div>436 437 <!-- Content -->438 <div class="content">439 <div class="section-card">440 <div class="section-header">441 <div class="section-title">My Itineraries</div>442 <div class="chev"></div>443 </div>444 445 <div class="h-scroll">446 <div class="tile add">447 <div class="add-inner">448 <div class="add-icon">449 <svg viewBox="0 0 24 24"><path d="M11 5h2v14h-2V5zm-6 6h14v2H5v-2z"/></svg>450 </div>451 <div>Add</div>452 </div>453 </div>454 455 <div class="tile">456 <div class="img">[IMG: City Street]</div>457 <div class="text">458 <div class="title">4-day Itinerary for Van...</div>459 <div class="meta">4 days • 4 attractions</div>460 </div>461 </div>462 463 <div class="tile">464 <div class="img">[IMG: Coastal Skyline]</div>465 <div class="text">466 <div class="title">4-day Itinerary for...</div>467 <div class="meta">4 days • 6 attractions</div>468 </div>469 </div>470 </div>471 </div>472 473 <div class="subnote">Options for Your Next Journey</div>474 475 <div class="dest-block">476 <div class="dest-head">477 <div class="dest-title">Vancouver</div>478 <div class="chev"></div>479 </div>480 <div class="card-row">481 <div class="dest-card">482 <div class="dest-img">[IMG: Friends Raising Hands on Boat]</div>483 <div class="ribbon">484 <svg width="26" height="26" viewBox="0 0 24 24" fill="#5a3b1b"><path d="M7 2l2 4 4 .6-3 2.9.7 4.5L7 12l-3.7 2 1-4.5-3-2.9L5 6z"/></svg>485 Trip.Best486 </div>487 <div class="caption-pill">Top 19 Best Things to Do in Vancouver</div>488 </div>489 490 <div class="dest-card">491 <div class="dest-img">[IMG: Luxury Poolside Hotel]</div>492 <div class="ribbon">493 <svg width="26" height="26" viewBox="0 0 24 24" fill="#5a3b1b"><path d="M7 2l2 4 4 .6-3 2.9.7 4.5L7 12l-3.7 2 1-4.5-3-2.9L5 6z"/></svg>494 Trip.Best495 </div>496 <div class="caption-pill">Top 6 Premium Hotels in Vancouver</div>497 </div>498 499 <div class="dest-card">500 <div class="dest-img">[IMG: Urban Park]</div>501 <div class="ribbon">502 <svg width="26" height="26" viewBox="0 0 24 24" fill="#5a3b1b"><path d="M7 2l2 4 4 .6-3 2.9.7 4.5L7 12l-3.7 2 1-4.5-3-2.9L5 6z"/></svg>503 Trip.Best504 </div>505 <div class="caption-pill">Vancouver Travel Guide</div>506 </div>507 </div>508 509 <div class="pager"><div class="active"></div></div>510 </div>511 512 <div class="dest-block" style="padding: 30px 32px;">513 <div class="dest-head">514 <div class="dest-title">Dubai</div>515 <div class="chev"></div>516 </div>517 <div style="height: 220px; border-radius: 28px; border: 1px dashed #c9d2e3; background:#f7f9fc; display:flex; align-items:center; justify-content:center; color:#96a3b6; font-weight:700;">518 More recommendations coming soon519 </div>520 </div>521 </div>522 523 <!-- Bottom Nav -->524 <div class="bottom-nav">525 <div class="nav-item">526 <svg class="nav-icon" viewBox="0 0 24 24" fill="#8a97ac"><path d="M12 3l10 9h-3v9H5v-9H2l10-9z"/></svg>527 <div>Home</div>528 </div>529 <div class="nav-item">530 <svg class="nav-icon" viewBox="0 0 24 24" fill="#8a97ac"><path d="M3 6h18v4H3V6zm0 6h12v6H3v-6z"/></svg>531 <div>Deals</div>532 </div>533 <div class="nav-item active" style="position: relative;">534 <svg class="nav-icon" viewBox="0 0 24 24" fill="#2a62ff">535 <path d="M7 7h10l1 12H6L7 7zm2-3h6v2H9V4z"/>536 </svg>537 <div class="bag-dot"></div>538 <div>My Trips</div>539 </div>540 <div class="nav-item">541 <svg class="nav-icon" viewBox="0 0 24 24" fill="#8a97ac"><circle cx="9" cy="8" r="4"/><path d="M4 20c0-3.3 2.7-6 6-6h0c3.3 0 6 2.7 6 6H4z"/></svg>542 <div>Account</div>543 </div>544 </div>545 <div class="home-indicator"></div>546</div>547</body>548</html>