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>Travel Planner Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #2a2343; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F5F6FA;15  }16 17  /* Hero */18  .hero {19    position: relative;20    height: 540px;21    overflow: hidden;22  }23  .img-placeholder {24    width: 100%;25    height: 100%;26    background: #E0E0E0;27    border-bottom: 1px solid #BDBDBD;28    display: flex;29    align-items: center;30    justify-content: center;31    color: #757575;32    font-size: 36px;33    letter-spacing: 0.2px;34  }35  .hero-title {36    position: absolute;37    left: 40px;38    bottom: 40px;39    font-size: 88px;40    font-weight: 800;41    color: #ffffff;42    text-shadow: 0 3px 14px rgba(0,0,0,0.45);43  }44 45  /* Tabs */46  .tabs-wrap {47    background: #ffffff;48    box-shadow: 0 1px 0 #e7e7ee;49  }50  .tabs {51    display: flex;52    align-items: center;53    justify-content: space-between;54    padding: 32px 40px 16px 40px;55  }56  .tab {57    display: flex;58    align-items: center;59    gap: 18px;60    font-size: 44px;61    color: #9a96aa;62    font-weight: 700;63  }64  .tab svg { width: 52px; height: 52px; }65  .tab.active { color: #2a2343; }66  .underline {67    height: 8px;68    width: 300px;69    background: #2a2343;70    border-radius: 4px;71    margin-left: 128px; /* aligns under "Planner" text */72  }73 74  /* Cards and inputs */75  .content {76    padding: 28px 40px 220px 40px; /* bottom padding leaves room above bottom nav */77  }78  .card {79    background: #ffffff;80    border: 1px solid #E6E6EF;81    border-radius: 28px;82    box-shadow: 0 2px 0 rgba(0,0,0,0.02);83  }84  .fromto {85    position: relative;86    padding: 36px 36px 32px 36px;87    margin-top: 28px;88  }89  .fromto .row {90    display: flex;91    align-items: center;92    gap: 22px;93    height: 92px;94  }95  .fromto .label {96    font-size: 44px;97    color: #6c6880;98  }99  .fromto .divider {100    height: 1px;101    background: #E6E2EE;102    margin: 8px 0 8px 72px;103  }104  .icon-pin, .icon-circle {105    width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;106  }107  .icon-circle {108    border: 3px solid #bcb8cd; border-radius: 50%;109  }110  .swap {111    position: absolute;112    right: 18px;113    top: 50%;114    transform: translateY(-50%);115    width: 120px; height: 120px;116    border-radius: 60px;117    border: 1px solid #E6E6EF;118    background: #ffffff;119    display: flex; align-items: center; justify-content: center;120  }121 122  .row2 {123    display: flex; gap: 24px; margin-top: 22px;124  }125  .small {126    flex: 1;127    padding: 28px 30px;128    display: flex; align-items: center; gap: 22px;129  }130  .small span {131    font-size: 40px; color: #6c6880; font-weight: 600;132  }133  .cta {134    width: 100%;135    margin-top: 28px;136    height: 120px;137    background: #FFC107;138    color: #2a2343;139    border: none;140    border-radius: 22px;141    font-size: 44px;142    font-weight: 800;143    cursor: pointer;144    box-shadow: 0 6px 0 rgba(0,0,0,0.06);145  }146  .link {147    text-align: center;148    margin: 36px 0 18px;149  }150  .link a {151    color: #2a2343;152    font-size: 40px;153    text-decoration: underline;154    font-weight: 600;155  }156 157  /* Section: Before you go */158  .section-title {159    font-size: 56px;160    font-weight: 800;161    margin: 24px 0 18px 0;162    color: #2a2343;163  }164  .info-card {165    background: #F7E3D2;166    border-radius: 28px;167    padding: 36px;168    border: 1px solid #F1D3C0;169  }170  .info-title {171    font-size: 46px; font-weight: 800; margin-bottom: 16px;172  }173  .info-text {174    font-size: 36px; line-height: 1.45; color: #47425f;175  }176  .dark-btn {177    margin-top: 28px;178    background: #1E1637;179    color: #ffffff;180    border: none;181    height: 110px;182    padding: 0 36px;183    border-radius: 18px;184    font-size: 42px;185    font-weight: 800;186    display: inline-flex; align-items: center; gap: 18px;187  }188  .dark-btn svg { width: 50px; height: 50px; }189 190  /* Bottom navigation */191  .bottom-nav {192    position: absolute;193    left: 0; right: 0; bottom: 0;194    height: 170px;195    background: #ffffff;196    border-top: 1px solid #E6E6EF;197    display: flex; align-items: center; justify-content: space-around;198  }199  .nav-item {200    display: flex; flex-direction: column; align-items: center; gap: 14px;201    color: #9a96aa; font-size: 34px; font-weight: 700;202  }203  .nav-item svg { width: 60px; height: 60px; }204  .nav-item.active { color: #2a2343; }205</style>206</head>207<body>208<div id="render-target">209 210  <!-- Hero with scenic image placeholder -->211  <div class="hero">212    <div class="img-placeholder">[IMG: Scenic mountain train]</div>213    <div class="hero-title">Where to next?</div>214  </div>215 216  <!-- Tabs -->217  <div class="tabs-wrap">218    <div class="tabs">219      <div class="tab active">220        <svg viewBox="0 0 24 24" fill="none" stroke="#2a2343" stroke-width="2">221          <circle cx="12" cy="12" r="9"></circle>222          <path d="M12 7v6l4 2"></path>223        </svg>224        <span>Planner</span>225      </div>226      <div class="tab">227        <svg viewBox="0 0 24 24" fill="none" stroke="#9a96aa" stroke-width="2">228          <rect x="3" y="7" width="18" height="8" rx="2"></rect>229          <path d="M6 10h3M11 10h3M16 10h2M6 17h12"></path>230        </svg>231        <span>Departures</span>232      </div>233    </div>234    <div class="underline"></div>235  </div>236 237  <div class="content">238    <!-- From / To Card -->239    <div class="card fromto">240      <div class="row">241        <span class="icon-circle"></span>242        <span class="label">From</span>243      </div>244      <div class="divider"></div>245      <div class="row">246        <span class="icon-pin">247          <svg viewBox="0 0 24 24" fill="none" stroke="#bcb8cd" stroke-width="2">248            <path d="M12 21s-7-6-7-11a7 7 0 1 1 14 0c0 5-7 11-7 11z"></path>249            <circle cx="12" cy="10" r="2"></circle>250          </svg>251        </span>252        <span class="label">To</span>253      </div>254      <button class="swap" aria-label="Swap">255        <svg viewBox="0 0 24 24" fill="none" stroke="#6c6880" stroke-width="2">256          <path d="M7 15v-6m0 0l-3 3m3-3l3 3"></path>257          <path d="M17 9v6m0 0l-3-3m3 3l3-3"></path>258        </svg>259      </button>260    </div>261 262    <!-- Departure and Filters -->263    <div class="row2">264      <div class="card small">265        <svg viewBox="0 0 24 24" fill="none" stroke="#6c6880" stroke-width="2">266          <rect x="3" y="5" width="18" height="16" rx="2"></rect>267          <path d="M3 9h18M8 3v4M16 3v4"></path>268        </svg>269        <span>Departure: Now</span>270      </div>271      <div class="card small" style="justify-content:center;">272        <svg viewBox="0 0 24 24" fill="none" stroke="#6c6880" stroke-width="2">273          <path d="M4 7h10M14 7v10M20 17H10M10 17V7"></path>274        </svg>275        <span>Filters</span>276      </div>277    </div>278 279    <!-- CTA -->280    <button class="cta">Plan my journey</button>281 282    <!-- Link -->283    <div class="link"><a href="#">About the timetable</a></div>284 285    <!-- Before you go -->286    <div class="section-title">Before you go</div>287    <div class="card info-card">288      <div class="info-title">Busy trains in the summer</div>289      <div class="info-text">290        Reserve your seats early to secure your plans. Prefer a less busy trip? Travel on reservation-free routes or after the summer.291      </div>292      <button class="dark-btn">293        <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">294          <rect x="4" y="8" width="10" height="6" rx="1"></rect>295          <path d="M5 14v3M13 14v3M16 8h4v6M18 17h2"></path>296        </svg>297        <span>Book seats</span>298      </button>299    </div>300  </div>301 302  <!-- Bottom Navigation -->303  <div class="bottom-nav">304    <div class="nav-item active">305      <svg viewBox="0 0 24 24" fill="none" stroke="#2a2343" stroke-width="2">306        <circle cx="12" cy="12" r="9"></circle>307        <path d="M12 7v6l4 2"></path>308      </svg>309      <div>Planner</div>310    </div>311    <div class="nav-item">312      <svg viewBox="0 0 24 24" fill="none" stroke="#9a96aa" stroke-width="2">313        <path d="M6 18l3-3 3 3"></path>314        <rect x="5" y="6" width="14" height="10" rx="2"></rect>315      </svg>316      <div>My Trip</div>317    </div>318    <div class="nav-item">319      <svg viewBox="0 0 24 24" fill="none" stroke="#9a96aa" stroke-width="2">320        <rect x="6" y="4" width="12" height="16" rx="2"></rect>321        <circle cx="12" cy="10" r="2"></circle>322      </svg>323      <div>My Pass</div>324    </div>325    <div class="nav-item">326      <svg viewBox="0 0 24 24" fill="none" stroke="#9a96aa" stroke-width="2">327        <path d="M4 7h16M4 12h16M4 17h16"></path>328      </svg>329      <div>More</div>330    </div>331  </div>332 333</div>334</body>335</html>