GD-ML/AndroidCode

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 - Day View</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F4F6FB;15    color: #243045;16  }17 18  .status-bar {19    height: 96px;20    background: #ffffff;21    display: flex;22    align-items: center;23    padding: 0 32px;24    box-sizing: border-box;25  }26  .status-left { font-weight: 600; font-size: 34px; color: #2D2D2D; }27  .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; color: #7C8797; }28  .dot { width: 12px; height: 12px; background: #7C8797; border-radius: 50%; display: inline-block; }29 30  .app-bar {31    height: 120px;32    background: #ffffff;33    box-shadow: 0 2px 10px rgba(0,0,0,0.06);34    display: flex;35    align-items: center;36    padding: 0 28px;37    box-sizing: border-box;38  }39  .nav-left {40    width: 80px;41    display: flex;42    align-items: center;43    justify-content: center;44  }45  .nav-actions {46    margin-left: auto;47    display: flex;48    align-items: center;49    gap: 36px;50    padding-right: 8px;51  }52  .icon-btn svg { width: 46px; height: 46px; fill: none; stroke: #2F3A63; stroke-width: 3.5; }53 54  .tabs {55    height: 114px;56    background: linear-gradient(180deg, #F8FAFF 0%, #F4F6FB 100%);57    display: flex;58    align-items: center;59    padding: 0 40px;60    gap: 56px;61    border-bottom: 1px solid rgba(47,58,99,0.08);62    box-sizing: border-box;63  }64  .tab {65    font-size: 40px;66    color: #6A7593;67    position: relative;68    padding-bottom: 20px;69  }70  .tab.selected {71    color: #5A6CF3;72    font-weight: 700;73  }74  .tab.selected::after {75    content: "";76    position: absolute;77    left: 0; right: 0; bottom: 6px;78    height: 6px;79    background: #5A6CF3;80    border-radius: 3px;81  }82  .tab-add {83    margin-left: auto;84  }85  .tab-add svg { width: 44px; height: 44px; stroke: #5A6CF3; }86 87  .content {88    position: absolute;89    top: 330px; /* after status + appbar + tabs */90    left: 0; right: 0; bottom: 0;91    overflow: hidden;92  }93  .scroll {94    height: 100%;95    overflow-y: auto;96    padding: 28px 48px 120px;97    box-sizing: border-box;98  }99 100  .add-attractions {101    border: 3px solid #5A6CF3;102    color: #5A6CF3;103    height: 150px;104    border-radius: 24px;105    display: flex;106    align-items: center;107    justify-content: center;108    gap: 22px;109    font-size: 46px;110    font-weight: 700;111    background: #ffffff;112  }113  .add-attractions .plus {114    width: 60px; height: 60px; border-radius: 50%;115    border: 3px solid #5A6CF3;116    display: flex; align-items: center; justify-content: center;117  }118  .add-attractions .plus svg { width: 36px; height: 36px; stroke: #5A6CF3; }119 120  .section-header {121    display: flex; align-items: center;122    margin: 40px 0 24px;123  }124  .section-header h2 {125    margin: 0 18px 0 18px;126    font-size: 56px;127    font-weight: 800;128    color: #2D3558;129  }130  .section-sub {131    font-size: 40px; color: #5D6A7E; font-weight: 600; margin-left: -6px;132  }133  .section-icons {134    margin-left: auto; display: flex; align-items: center; gap: 28px;135  }136  .mini-icon svg { width: 40px; height: 40px; stroke: #9AA5B5; stroke-width: 3.2; }137 138  .card {139    background: #ffffff;140    border-radius: 24px;141    box-shadow: 0 8px 20px rgba(0,0,0,0.06);142    overflow: hidden;143    margin-bottom: 26px;144  }145  .card-media {146    height: 440px;147    background: #E0E0E0;148    border-bottom: 1px solid #BDBDBD;149    position: relative;150    display: flex; align-items: center; justify-content: center;151    color: #757575; font-size: 36px; font-weight: 600;152  }153  .media-overlay {154    position: absolute; left: 0; right: 0; bottom: 0;155    padding: 18px 24px;156    display: flex; align-items: center; justify-content: space-between;157    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 75%);158    color: #fff;159    font-size: 34px;160  }161  .media-overlay .clock { display: flex; align-items: center; gap: 12px; }162  .media-overlay .badge {163    background: rgba(18,26,44,0.75); padding: 10px 16px; border-radius: 10px; font-size: 30px;164  }165  .card-body { padding: 26px 28px 30px; }166  .card-title {167    display: flex; align-items: center; gap: 12px; margin-bottom: 10px;168  }169  .card-title h3 {170    margin: 0; font-size: 48px; font-weight: 800; color: #243045;171  }172  .chev svg { width: 34px; height: 34px; stroke: #6E7892; stroke-width: 3.5; }173  .rating-row { display: flex; align-items: center; gap: 16px; margin: 8px 0 12px; }174  .rating-pill {175    background: #2F6BFF; color: #fff; border-radius: 14px;176    padding: 6px 14px; font-size: 34px; font-weight: 800;177  }178  .rating-row span { font-size: 34px; color: #6A7593; }179  .desc {180    font-size: 34px; line-height: 1.45; color: #556070;181  }182  .show-more { color: #5A6CF3; font-weight: 700; white-space: nowrap; }183  .desc-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }184 185  .bottom-gesture {186    position: absolute; left: 50%; transform: translateX(-50%);187    bottom: 24px; width: 360px; height: 12px; background: #0E0E10; border-radius: 10px; opacity: 0.8;188  }189</style>190</head>191<body>192<div id="render-target">193  <!-- Status bar -->194  <div class="status-bar">195    <div class="status-left">12:30</div>196    <div class="status-right">197      <span class="dot"></span>198      <span class="dot" style="opacity:.6;"></span>199      <span class="dot" style="opacity:.4;"></span>200      <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#7C8797" stroke-width="2.2"><path d="M2 8h20M5 12h14M8 16h8"/></svg>201      <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#7C8797" stroke-width="2.2"><path d="M6 22h12l-1-7H7l-1 7z"/><path d="M9 11V6a3 3 0 1 1 6 0v5"/></svg>202    </div>203  </div>204 205  <!-- App bar -->206  <div class="app-bar">207    <div class="nav-left icon-btn" title="Back">208      <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#2F3A63" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/></svg>209    </div>210    <div class="nav-actions">211      <div class="icon-btn" title="Location">212        <svg viewBox="0 0 24 24"><path d="M12 21s7-7 7-11a7 7 0 1 0-14 0c0 4 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>213      </div>214      <div class="icon-btn" title="Share">215        <svg viewBox="0 0 24 24"><path d="M16 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM6 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM16 22a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/><path d="M8 12l6-4m-6 4l6 4" stroke-linecap="round"/></svg>216      </div>217      <div class="icon-btn" title="Edit">218        <svg viewBox="0 0 24 24"><path d="M4 20l4.5-1L20 7.5 16.5 4 5 15.5 4 20zM14 6l4 4"/></svg>219      </div>220    </div>221  </div>222 223  <!-- Date tabs -->224  <div class="tabs">225    <div class="tab selected">Dec 16</div>226    <div class="tab">Dec 17</div>227    <div class="tab">Dec 18</div>228    <div class="tab">Dec 19</div>229    <div class="tab-add">230      <svg viewBox="0 0 24 24" fill="none" stroke="#5A6CF3" stroke-width="2.5">231        <circle cx="12" cy="12" r="10"/>232        <path d="M12 7v10M7 12h10"/>233      </svg>234    </div>235  </div>236 237  <!-- Content area -->238  <div class="content">239    <div class="scroll">240 241      <div class="add-attractions">242        <div class="plus">243          <svg viewBox="0 0 24 24" fill="none" stroke="#5A6CF3" stroke-width="3">244            <path d="M12 5v14M5 12h14" stroke-linecap="round"/>245          </svg>246        </div>247        <div>Add Attractions</div>248      </div>249 250      <!-- Section: Sun, Dec 17 -->251      <div class="section-header">252        <div class="mini-icon" title="Settings">253          <svg viewBox="0 0 24 24"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.07a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.07a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06A2 2 0 1 1 7.02 2.4l.06.06c.49.49 1.2.64 1.82.33H9a1.65 1.65 0 0 0 1-1.51V1a2 2 0 1 1 4 0v.07c0 .66.39 1.26 1 1.51.62.31 1.33.16 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06c-.49.49-.64 1.2-.33 1.82.25.61.85 1 1.51 1H21a2 2 0 1 1 0 4h-.07c-.66 0-1.26.39-1.51 1z" stroke="none"/></svg>254        </div>255        <h2>Sun, Dec 17 <span class="section-sub">Vancouver</span></h2>256        <div class="section-icons">257          <div class="mini-icon" title="Delete">258            <svg viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/></svg>259          </div>260        </div>261      </div>262 263      <div class="card">264        <div class="card-media">265          [IMG: Queen Elizabeth Park garden]266          <div class="media-overlay">267            <div class="clock">268              <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2" stroke-linecap="round"/></svg>269              <span>Suggested duration: 2–3 hours</span>270            </div>271            <div class="badge">1/5</div>272          </div>273        </div>274        <div class="card-body">275          <div class="card-title">276            <h3>Queen Elizabeth Park</h3>277            <span class="chev"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#6E7892" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>278          </div>279          <div class="rating-row">280            <div class="rating-pill">4.5/5</div>281            <span>175 reviews</span>282          </div>283          <div class="desc">284            The 52-hectare green space is the Canadian Botanical Display Garden and Vancouver's largest urban park. The evergreen greenery and sea of flowers make this one of Vancouver's most popular outdoor locations for wedding photos. The famous Four Seasons Restaurant is built on a prominent cliff in the park and has a good ni...285          </div>286          <div class="desc-line" style="margin-top: 8px;">287            <span></span>288            <span class="show-more">Show More</span>289          </div>290        </div>291      </div>292 293      <div class="add-attractions" style="margin-top: 18px;">294        <div class="plus">295          <svg viewBox="0 0 24 24" fill="none" stroke="#5A6CF3" stroke-width="3">296            <path d="M12 5v14M5 12h14" stroke-linecap="round"/>297          </svg>298        </div>299        <div>Add Attractions</div>300      </div>301 302      <!-- Section: Mon, Dec 18 -->303      <div class="section-header" style="margin-top: 46px;">304        <div class="mini-icon">305          <svg viewBox="0 0 24 24"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.07a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.07a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06A2 2 0 1 1 7.02 2.4l.06.06c.49.49 1.2.64 1.82.33H9a1.65 1.65 0 0 0 1-1.51V1a2 2 0 1 1 4 0v.07c0 .66.39 1.26 1 1.51.62.31 1.33.16 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06c-.49.49-.64 1.2-.33 1.82.25.61.85 1 1.51 1H21a2 2 0 1 1 0 4h-.07c-.66 0-1.26.39-1.51 1z" stroke="none"/></svg>306        </div>307        <h2>Mon, Dec 18 <span class="section-sub">Vancouver</span></h2>308        <div class="section-icons">309          <div class="mini-icon">310            <svg viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/></svg>311          </div>312        </div>313      </div>314 315      <div class="card" style="margin-bottom: 140px;">316        <div class="card-media" style="height: 420px;">317          [IMG: Gastown steam clock night scene]318          <div class="media-overlay">319            <div class="clock">320              <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2" stroke-linecap="round"/></svg>321              <span>Suggested duration: 1–2 hours</span>322            </div>323            <div class="badge">1/3</div>324          </div>325        </div>326        <div class="card-body">327          <div class="card-title">328            <h3>Gastown Steam Clock</h3>329            <span class="chev"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#6E7892" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>330          </div>331          <div class="rating-row">332            <div class="rating-pill">4.6/5</div>333            <span>3,200 reviews</span>334          </div>335          <div class="desc-line">336            <div class="desc">Historic Gastown landmark famous for its steam-powered clock and warm evening lights.</div>337            <span class="show-more">Show More</span>338          </div>339        </div>340      </div>341 342    </div>343  </div>344 345  <div class="bottom-gesture"></div>346</div>347</body>348</html>