GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Itinerary UI Replica</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F3F5F9;14    border-radius: 0;15  }16 17  /* Top hero */18  .hero {19    position: relative;20    width: 1080px;21    height: 640px;22    overflow: hidden;23  }24  .hero .img {25    position: absolute;26    left: 0; top: 0;27    width: 100%; height: 100%;28    background: #E0E0E0;29    border-bottom: 1px solid #BDBDBD;30    display: flex; align-items: center; justify-content: center;31    color: #757575; font-weight: 600;32  }33  .hero:after {34    content: "";35    position: absolute; left: 0; right: 0; bottom: 0; height: 55%;36    background: linear-gradient(to top, rgba(19,25,33,0.65), rgba(19,25,33,0.0));37    pointer-events: none;38  }39 40  /* Top controls */41  .top-icons {42    position: absolute; top: 32px; left: 24px; right: 24px;43    display: flex; align-items: center; justify-content: space-between;44    z-index: 5;45  }46  .left-back {47    width: 80px; height: 80px; border-radius: 40px;48    background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center;49  }50  .icon-btn {51    width: 80px; height: 80px; border-radius: 40px;52    background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center;53    margin-left: 16px;54  }55  .right-actions { display: flex; gap: 16px; }56 57  .hero-content {58    position: absolute; left: 40px; right: 40px; bottom: 40px; z-index: 3; color: #fff;59  }60  .hero-title {61    font-size: 64px; font-weight: 800; line-height: 1.1; margin: 0 0 10px 0;62  }63  .hero-sub {64    font-size: 32px; opacity: 0.9; margin-bottom: 28px;65  }66  .map-btn {67    display: inline-flex; align-items: center; gap: 18px;68    background: #fff; color: #2F5BFF;69    padding: 26px 34px;70    border-radius: 60px;71    box-shadow: 0 10px 24px rgba(0,0,0,0.25);72    font-size: 34px; font-weight: 700;73  }74  .map-btn .mini-map {75    width: 120px; height: 60px; border-radius: 30px; overflow: hidden; position: relative;76    background: #F2F2F2; border: 1px solid #D0D0D0;77  }78  .mini-map:before { /* simple diagonal "road" */79    content: ""; position: absolute; left: -10px; top: 35px; width: 160px; height: 14px;80    background: #E6DCC8; transform: rotate(-15deg);81  }82  .mini-map:after { /* blue route */83    content: ""; position: absolute; left: 0; top: 18px; width: 160px; height: 8px;84    background: #6EA8FF; transform: rotate(12deg);85  }86 87  /* Date tabs */88  .tabs {89    position: relative;90    background: linear-gradient(to bottom, #FFF, #F8F7FB);91    border-top-left-radius: 28px; border-top-right-radius: 28px;92    margin-top: -12px;93    padding: 20px 24px 0 24px;94  }95  .tab-row {96    display: flex; align-items: center; gap: 60px;97    overflow: hidden; white-space: nowrap;98    padding: 24px 20px 22px 20px;99    border-bottom: 1px solid #D9DCE4;100  }101  .tab {102    font-size: 34px; color: #6C6F77;103  }104  .tab.active {105    color: #2F5BFF; font-weight: 700; position: relative;106  }107  .tab.active:after {108    content: ""; position: absolute; left: 0; bottom: -24px; width: 120px; height: 6px;109    background: #2F5BFF; border-radius: 3px;110  }111  .add-day {112    margin-left: auto; color: #4860FF; border: 1px solid #BDC6FF;113    width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center;114  }115 116  /* Content area */117  .content {118    padding: 24px;119  }120 121  .day-header {122    display: flex; align-items: center; justify-content: space-between;123    margin: 10px 12px 18px 12px;124  }125  .day-left {126    display: flex; align-items: center; gap: 18px;127  }128  .day-title {129    font-size: 48px; font-weight: 800; color: #1E2432;130  }131  .day-title small {132    font-weight: 500; color: #4A5160;133  }134  .day-actions { display: flex; align-items: center; gap: 20px; }135 136  .card {137    background: #FFFFFF;138    border-radius: 28px;139    box-shadow: 0 6px 18px rgba(24,33,48,0.08);140    overflow: hidden;141    margin: 0 12px 26px 12px;142    border: 1px solid #E6E9EF;143  }144  .card .photo {145    height: 430px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;146    display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 600;147  }148  .photo .overlay {149    position: absolute; left: 34px; bottom: 22px; color: #fff;150    font-size: 30px; display: flex; align-items: center; gap: 14px;151    background: rgba(22,27,34,0.45); padding: 10px 16px; border-radius: 16px;152  }153  .photo .count {154    position: absolute; right: 26px; bottom: 24px; color: #fff; font-size: 28px;155    background: rgba(22,27,34,0.45); padding: 8px 14px; border-radius: 12px;156  }157 158  .card-body {159    padding: 24px 28px 30px 28px;160  }161  .card-title {162    display: flex; align-items: center; justify-content: space-between;163  }164  .card-title .name {165    font-size: 46px; font-weight: 800; color: #1B2433;166  }167  .rating-row {168    margin-top: 16px; display: flex; align-items: center; gap: 18px;169    color: #5A6273; font-size: 30px;170  }171  .rating-badge {172    background: #2F5BFF; color: #fff; font-weight: 800; font-size: 30px;173    padding: 8px 16px; border-radius: 20px;174  }175  .desc {176    margin-top: 14px; font-size: 30px; line-height: 1.45; color: #3A4152;177  }178  .show-more {179    color: #2F5BFF; font-weight: 700; white-space: nowrap;180  }181 182  /* Add attractions button */183  .add-attractions {184    margin: 16px 12px 40px 12px;185    border: 2px solid #6C63FF; border-radius: 26px;186    background: #fff; color: #474FFF;187    padding: 28px; font-size: 40px; font-weight: 700;188    display: flex; align-items: center; justify-content: center; gap: 20px;189  }190 191  /* Next day header */192  .next-day {193    margin: 6px 12px 18px 12px;194    display: flex; align-items: center; justify-content: space-between;195  }196 197  /* Bottom home indicator (iOS style) */198  .home-indicator-wrap {199    position: absolute; bottom: 0; left: 0; right: 0; height: 110px; background: #000;200    display: flex; align-items: center; justify-content: center;201  }202  .home-indicator {203    width: 360px; height: 10px; background: #fff; border-radius: 10px; opacity: 0.9;204  }205 206  /* Simple SVG icon styles */207  svg { display: block; }208</style>209</head>210<body>211<div id="render-target">212 213  <div class="hero">214    <div class="img">[IMG: Vancouver downtown street skyline]</div>215 216    <div class="top-icons">217      <div class="left-back">218        <svg width="40" height="40" viewBox="0 0 24 24">219          <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>220        </svg>221      </div>222      <div class="right-actions">223        <div class="icon-btn">224          <svg width="40" height="40" viewBox="0 0 24 24">225            <path d="M18 8l-8 8M6 10v4h4" stroke="#25304A" stroke-width="2" fill="none" stroke-linecap="round"/>226            <circle cx="18" cy="6" r="3" fill="#25304A"/>227          </svg>228        </div>229        <div class="icon-btn">230          <svg width="40" height="40" viewBox="0 0 24 24">231            <path d="M4 20l4-1 11-11-3-3L5 16l-1 4z" stroke="#25304A" stroke-width="2" fill="none" stroke-linejoin="round"/>232            <path d="M14 5l3 3" stroke="#25304A" stroke-width="2" fill="none"/>233          </svg>234        </div>235      </div>236    </div>237 238    <div class="hero-content">239      <div class="hero-title">4-day Itinerary for Vancouver</div>240      <div class="hero-sub">Dec 16–Dec 19 (4 days) | 2 attractions</div>241      <div class="map-btn">242        <svg width="40" height="40" viewBox="0 0 24 24">243          <path d="M12 3c3.9 0 7 3.1 7 7 0 5.2-7 11-7 11S5 15.2 5 10c0-3.9 3.1-7 7-7zm0 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" fill="#2F5BFF"/>244        </svg>245        <span>Map View</span>246        <div class="mini-map"></div>247      </div>248    </div>249  </div>250 251  <div class="tabs">252    <div class="tab-row">253      <div class="tab active">Dec 16</div>254      <div class="tab">Dec 17</div>255      <div class="tab">Dec 18</div>256      <div class="tab">Dec 19</div>257      <div class="add-day">258        <svg width="34" height="34" viewBox="0 0 24 24">259          <path d="M12 5v14M5 12h14" stroke="#4860FF" stroke-width="2" stroke-linecap="round"/>260        </svg>261      </div>262    </div>263  </div>264 265  <div class="content">266    <div class="day-header">267      <div class="day-left">268        <svg width="44" height="44" viewBox="0 0 24 24">269          <path d="M12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm8 1.5h-3a7 7 0 0 1-10 0H4" stroke="#6A7286" stroke-width="2" fill="none" stroke-linecap="round"/>270        </svg>271        <div class="day-title">Sat, Dec 16 <small>Vancouver</small></div>272      </div>273      <div class="day-actions">274        <svg width="44" height="44" viewBox="0 0 24 24">275          <path d="M6 7h12l-1 12H7L6 7zm3-3h6l1 3H8l1-3z" stroke="#9AA2B1" stroke-width="2" fill="none"/>276        </svg>277      </div>278    </div>279 280    <div class="card">281      <div class="photo">282        [IMG: Stanley Park panorama]283        <div class="overlay">284          <svg width="30" height="30" viewBox="0 0 24 24">285            <path d="M12 7v5l3 3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>286            <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" fill="none"/>287          </svg>288          <span>Suggested duration: 2–3 hours</span>289        </div>290        <div class="count">1/5</div>291      </div>292      <div class="card-body">293        <div class="card-title">294          <div class="name">Stanley Park</div>295          <svg width="40" height="40" viewBox="0 0 24 24">296            <path d="M9 6l6 6-6 6" stroke="#7D8699" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>297          </svg>298        </div>299        <div class="rating-row">300          <div class="rating-badge">4.8/5</div>301          <div>2,117 reviews</div>302        </div>303        <div class="desc">304          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...305          <span class="show-more">Show More</span>306        </div>307      </div>308    </div>309 310    <div class="add-attractions">311      <svg width="40" height="40" viewBox="0 0 24 24">312        <path d="M12 5v14M5 12h14" stroke="#5A63FF" stroke-width="2" stroke-linecap="round"/>313      </svg>314      <span>Add Attractions</span>315    </div>316 317    <div class="next-day">318      <div class="day-title">Sun, Dec 17 <small>Vancouver</small></div>319      <svg width="44" height="44" viewBox="0 0 24 24">320        <path d="M6 7h12l-1 12H7L6 7zm3-3h6l1 3H8l1-3z" stroke="#9AA2B1" stroke-width="2" fill="none"/>321      </svg>322    </div>323 324    <div class="card" style="height: 420px;">325      <div class="photo" style="height: 300px;">326        [IMG: Garden scenery – Vancouver]327      </div>328      <div class="card-body" style="padding-top: 16px;">329        <div class="name" style="font-size: 42px;">Queen Elizabeth Park</div>330        <div class="desc" style="font-size: 30px; margin-top: 10px; color: #556076;">331          Beautifully landscaped gardens with panoramic city views.332        </div>333      </div>334    </div>335 336  </div>337 338  <div class="home-indicator-wrap">339    <div class="home-indicator"></div>340  </div>341 342</div>343</body>344</html>