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>Itinerary - Vancouver</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F2F4F7;15 color: #1F2A37;16 }17 18 /* Top hero */19 .hero {20 position: relative;21 width: 100%;22 height: 720px;23 }24 .hero .img {25 width: 100%;26 height: 100%;27 background: #E0E0E0;28 border: 1px solid #BDBDBD;29 display: flex;30 align-items: center;31 justify-content: center;32 color: #555;33 font-size: 34px;34 letter-spacing: 0.3px;35 }36 .hero::after {37 /* dark gradient overlay for text readability */38 content: "";39 position: absolute;40 left: 0; right: 0; top: 0; bottom: 0;41 background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.35) 30%, rgba(0,0,0,0.55) 100%);42 pointer-events: none;43 }44 45 /* App bar icons */46 .top-actions {47 position: absolute;48 top: 44px;49 left: 40px;50 right: 40px;51 display: flex;52 align-items: center;53 justify-content: space-between;54 z-index: 2;55 }56 .circle-btn {57 width: 96px;58 height: 96px;59 border-radius: 48px;60 background: rgba(0,0,0,0.6);61 display: flex;62 align-items: center;63 justify-content: center;64 }65 .icon-btn {66 width: 96px;67 height: 96px;68 border-radius: 48px;69 background: rgba(255,255,255,0.25);70 display: flex;71 align-items: center;72 justify-content: center;73 margin-left: 14px;74 }75 .right-icons {76 display: flex;77 gap: 12px;78 }79 .icon svg { width: 44px; height: 44px; }80 .icon path { stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }81 82 /* Hero title */83 .hero-text {84 position: absolute;85 left: 40px;86 right: 40px;87 bottom: 190px;88 z-index: 2;89 color: #fff;90 }91 .hero-title {92 font-weight: 800;93 font-size: 68px;94 line-height: 1.1;95 margin: 0 0 18px 0;96 }97 .hero-sub {98 font-size: 34px;99 color: rgba(255,255,255,0.85);100 }101 102 /* Map view pill */103 .map-pill {104 position: absolute;105 left: 40px;106 bottom: 80px;107 z-index: 2;108 display: inline-flex;109 align-items: center;110 gap: 24px;111 background: #fff;112 color: #2B59F3;113 padding: 28px 36px;114 border-radius: 56px;115 box-shadow: 0 8px 24px rgba(0,0,0,0.25);116 font-weight: 700;117 font-size: 40px;118 }119 .map-pill .map-art {120 margin-left: 14px;121 width: 120px;122 height: 52px;123 border-radius: 16px;124 background:125 linear-gradient(45deg, #FCE38A 0%, #FFF3B0 100%);126 position: relative;127 opacity: 0.8;128 }129 .map-pill .map-art::before {130 content: "";131 position: absolute;132 left: 10px; right: 10px; top: 24px;133 height: 8px; border-radius: 4px; background: #D1D5F0;134 }135 .map-pill .map-art::after {136 content: "";137 position: absolute;138 left: 40px; top: 8px;139 width: 16px; height: 16px; border-radius: 50%;140 background: #FF6B6B;141 }142 .pin {143 width: 42px; height: 42px; border-radius: 21px; background: #E7EEFF;144 display: inline-flex; align-items: center; justify-content: center;145 margin-right: 6px;146 }147 .pin svg { width: 28px; height: 28px; }148 .pin path { fill: #2B59F3; }149 150 /* Main content area */151 .main {152 position: relative;153 margin-top: -36px;154 background: #ffffff;155 border-top-left-radius: 36px;156 border-top-right-radius: 36px;157 box-shadow: 0 -8px 24px rgba(0,0,0,0.12);158 padding-bottom: 120px;159 }160 161 /* Tabs */162 .tabs {163 padding: 32px 40px 16px 40px;164 display: flex;165 align-items: center;166 gap: 56px;167 font-size: 34px;168 color: #6B7280;169 position: relative;170 background: linear-gradient(to bottom, #FAFAFF 0%, #FFFFFF 80%);171 border-top-left-radius: 36px;172 border-top-right-radius: 36px;173 }174 .tab.active { color: #2B59F3; font-weight: 700; }175 .underline {176 position: absolute;177 left: 40px;178 bottom: 0;179 width: 120px;180 height: 6px;181 background: #2B59F3;182 border-radius: 3px;183 }184 .tabs .plus {185 margin-left: auto;186 width: 56px; height: 56px; border-radius: 28px; border: 2px solid #C7D2FE;187 display: flex; align-items: center; justify-content: center;188 }189 .tabs .plus svg { width: 28px; height: 28px; }190 .tabs .plus path { stroke: #2B59F3; stroke-width: 3; }191 192 /* Day section header */193 .day {194 padding: 28px 40px 20px 40px;195 border-top: 1px solid #E5E7EB;196 }197 .day-title {198 display: flex; align-items: center; justify-content: space-between;199 font-size: 48px; font-weight: 800; color: #111827;200 margin-bottom: 28px;201 }202 .day-title .sub { font-weight: 500; color: #4B5563; font-size: 42px; margin-left: 16px; }203 .left-tools { display: flex; align-items: center; gap: 18px; }204 .tool {205 width: 44px; height: 44px; border-radius: 22px; background: #EEF2FF;206 display: flex; align-items: center; justify-content: center;207 margin-right: 16px;208 }209 .tool svg { width: 28px; height: 28px; }210 .tool path { stroke: #64748B; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }211 .trash {212 width: 60px; height: 60px; border-radius: 14px; background: #F8FAFC; border: 1px solid #E5E7EB;213 display: flex; align-items: center; justify-content: center;214 }215 .trash svg { width: 34px; height: 34px; }216 .trash path { stroke: #9CA3AF; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }217 218 /* Attraction card */219 .card {220 background: #F9FAFB;221 border: 1px solid #E5E7EB;222 border-radius: 26px;223 overflow: hidden;224 box-shadow: 0 6px 16px rgba(0,0,0,0.08);225 }226 .card-img {227 position: relative;228 width: 100%;229 height: 520px;230 border-bottom: 1px solid #E5E7EB;231 }232 .card-img .img {233 width: 100%; height: 100%;234 background: #E0E0E0; border: 1px solid #BDBDBD;235 display: flex; align-items: center; justify-content: center; color: #555; font-size: 30px;236 }237 .img-overlay {238 position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 26px;239 display: flex; align-items: center; justify-content: space-between;240 color: #fff; font-size: 32px; font-weight: 600;241 background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.0));242 }243 .duration {244 display: inline-flex; align-items: center; gap: 12px; opacity: 0.95;245 }246 .duration .clock svg { width: 30px; height: 30px; }247 .duration .clock path { stroke: #fff; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }248 249 .card-body { padding: 28px; }250 .card-title {251 display: flex; align-items: center; gap: 16px;252 font-size: 46px; font-weight: 800; color: #111827; margin-bottom: 16px;253 }254 .chev svg { width: 28px; height: 28px; }255 .chev path { stroke: #6B7280; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }256 .rating {257 display: inline-flex; align-items: center; gap: 12px;258 margin-bottom: 16px;259 font-size: 32px; color: #334155;260 }261 .rating .chip {262 background: #2B59F3; color: #fff; font-weight: 800; padding: 8px 14px; border-radius: 16px;263 margin-right: 8px;264 }265 .desc {266 font-size: 32px; line-height: 1.45; color: #374151;267 }268 .show-more {269 color: #2B59F3; font-weight: 700; margin-left: 8px;270 }271 272 /* Add attractions button */273 .outline-btn {274 margin: 26px 0 18px 0;275 border: 3px solid #A7B8FF;276 border-radius: 22px;277 background: #fff;278 padding: 26px 32px;279 font-size: 40px; font-weight: 800; color: #3B64F4;280 display: flex; align-items: center; gap: 20px; justify-content: center;281 }282 .outline-btn .plus-icon {283 width: 56px; height: 56px; border-radius: 28px; border: 2px solid #A7B8FF;284 display: flex; align-items: center; justify-content: center;285 }286 .outline-btn .plus-icon svg { width: 28px; height: 28px; }287 .outline-btn .plus-icon path { stroke: #3B64F4; stroke-width: 3; }288 289 /* Subsequent days */290 .day.simple .day-title { margin-bottom: 20px; }291 .spacer { height: 20px; }292 293 /* Bottom safe area bar */294 .home-bar {295 position: absolute;296 bottom: 18px;297 left: 50%;298 transform: translateX(-50%);299 width: 320px;300 height: 14px;301 background: #000;302 border-radius: 7px;303 opacity: 0.75;304 }305</style>306</head>307<body>308<div id="render-target">309 310 <!-- Hero section -->311 <div class="hero">312 <div class="img">[IMG: Downtown Vancouver Cityscape]</div>313 314 <!-- Top actions -->315 <div class="top-actions">316 <div class="circle-btn icon">317 <svg viewBox="0 0 24 24">318 <path d="M15 5L8 12l7 7"></path>319 </svg>320 </div>321 <div class="right-icons">322 <div class="icon-btn icon">323 <!-- share icon -->324 <svg viewBox="0 0 24 24">325 <path d="M12 5v6m0-6l4 4M12 5l-4 4M5 13v6h14v-6"></path>326 </svg>327 </div>328 <div class="icon-btn icon">329 <!-- pencil/edit -->330 <svg viewBox="0 0 24 24">331 <path d="M4 20l4-1 11-11-3-3L5 16l-1 4z"></path>332 </svg>333 </div>334 </div>335 </div>336 337 <!-- Title -->338 <div class="hero-text">339 <h1 class="hero-title">4-day Itinerary for Vancouver</h1>340 <div class="hero-sub">Dec 16–Dec 19 (4 days) | 1 attraction</div>341 </div>342 343 <!-- Map view pill -->344 <div class="map-pill">345 <span class="pin">346 <svg viewBox="0 0 24 24">347 <path d="M12 21s7-7 7-11a7 7 0 10-14 0c0 4 7 11 7 11zm0-11a3 3 0 110-6 3 3 0 010 6z"></path>348 </svg>349 </span>350 Map View351 <div class="map-art"></div>352 </div>353 </div>354 355 <!-- Main content -->356 <div class="main">357 358 <!-- Tabs -->359 <div class="tabs">360 <div class="tab active">Dec 16</div>361 <div class="tab">Dec 17</div>362 <div class="tab">Dec 18</div>363 <div class="tab">Dec 19</div>364 <div class="plus">365 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg>366 </div>367 <div class="underline" style="width: 140px; left: 40px;"></div>368 </div>369 370 <!-- Day section: Dec 16 -->371 <div class="day">372 <div class="day-title">373 <div class="left-tools" style="gap: 20px;">374 <div class="tool">375 <!-- gear icon -->376 <svg viewBox="0 0 24 24">377 <path d="M12 15a3 3 0 100-6 3 3 0 000 6zm-9 0l2-1 1 2 2-1 1 2 2-1 1 2 2-1 1-2 2 1 1-2 2 1"></path>378 </svg>379 </div>380 <div>Sat, Dec 16 <span class="sub">Vancouver</span></div>381 </div>382 <div class="trash">383 <!-- trash icon -->384 <svg viewBox="0 0 24 24">385 <path d="M4 7h16M9 7V5h6v2M6 7l1 12h10l1-12"></path>386 </svg>387 </div>388 </div>389 390 <!-- Attraction card -->391 <div class="card">392 <div class="card-img">393 <div class="img">[IMG: Stanley Park Waterfront Skyline]</div>394 <div class="img-overlay">395 <div class="duration">396 <span class="clock">397 <svg viewBox="0 0 24 24">398 <path d="M12 3a9 9 0 100 18 9 9 0 000-18zM12 7v6l4 2"></path>399 </svg>400 </span>401 Suggested duration: 2–3 hours402 </div>403 <div style="opacity:0.9;">1/5</div>404 </div>405 </div>406 <div class="card-body">407 <div class="card-title">408 Stanley Park409 <span class="chev">410 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>411 </span>412 </div>413 <div class="rating">414 <span class="chip">4.8</span>415 <span>/5</span>416 <span style="color:#6B7280;">2,117 reviews</span>417 </div>418 <div class="desc">419 Located at the center of Vancouver, Stanley Park is an urban green boasting a sequoia forest, a never-ending waterfront causeway, Indian totem poles, and the Vancouver Aquarium. A tapestry of vegetation, the Park offers compelling views and is dubbed a “huge natural oxygen bar”. For locals, this is a perfect place...420 <span class="show-more">Show More</span>421 </div>422 </div>423 </div>424 425 <!-- Add attractions -->426 <div class="outline-btn">427 <div class="plus-icon">428 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg>429 </div>430 Add Attractions431 </div>432 </div>433 434 <!-- Day section: Dec 17 -->435 <div class="day simple">436 <div class="day-title">437 <div>Sun, Dec 17</div>438 </div>439 <div class="outline-btn">440 <div class="plus-icon">441 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg>442 </div>443 Add Attractions444 </div>445 </div>446 447 <!-- Day section: Dec 18 -->448 <div class="day simple">449 <div class="day-title">450 <div>Mon, Dec 18</div>451 <div class="trash">452 <svg viewBox="0 0 24 24"><path d="M4 7h16M9 7V5h6v2M6 7l1 12h10l1-12"></path></svg>453 </div>454 </div>455 <div class="outline-btn">456 <div class="plus-icon">457 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg>458 </div>459 Add Attractions460 </div>461 </div>462 463 <div class="spacer"></div>464 </div>465 466 <!-- bottom home indicator -->467 <div class="home-bar"></div>468</div>469</body>470</html>