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 UI</title>7<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">8<style>9  body { margin: 0; padding: 0; background: transparent; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }10  #render-target {11    width: 1080px;12    height: 2400px;13    position: relative;14    overflow: hidden;15    background: #F3F4F7;16  }17 18  /* Hero */19  .hero {20    position: relative;21    width: 100%;22    height: 560px;23  }24  .hero .img {25    position: absolute;26    inset: 0;27    background: #E0E0E0;28    border-bottom: 1px solid #BDBDBD;29    display: flex; align-items: center; justify-content: center;30    color: #757575; font-weight: 600;31    letter-spacing: 0.2px;32  }33  .hero .shade {34    position: absolute; inset: 0;35    background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.55) 100%);36  }37  .hero .title {38    position: absolute;39    left: 44px;40    bottom: 44px;41    color: #fff;42    font-size: 82px;43    font-weight: 800;44    letter-spacing: -0.5px;45  }46 47  /* Main card area */48  .content {49    position: relative;50    background: #ffffff;51    border-top-left-radius: 24px;52    border-top-right-radius: 24px;53    margin-top: -16px;54    padding: 28px 32px 0 32px;55  }56 57  /* Tabs */58  .tabs {59    display: flex;60    align-items: center;61    justify-content: space-between;62    padding: 10px 12px 0 12px;63  }64  .tab {65    display: flex; align-items: center; gap: 16px;66    color: #A0A2AF;67    font-size: 46px;68    font-weight: 600;69  }70  .tab svg { width: 48px; height: 48px; }71  .tab.active { color: #231A46; }72  .underline {73    height: 8px;74    width: 360px;75    background: #231A46;76    border-radius: 4px;77    margin: 16px 0 18px 90px; /* roughly under "Planner" */78  }79 80  /* Input cards */81  .card {82    background: #fff;83    border: 1px solid #E6E6EA;84    border-radius: 24px;85    padding: 26px 28px;86    position: relative;87    box-shadow: 0 1px 0 rgba(0,0,0,0.02);88    margin: 14px 8px;89  }90  .line {91    display: flex; align-items: center; gap: 22px;92    padding: 14px 8px;93    color: #6E6A84;94    font-size: 44px;95    font-weight: 600;96  }97  .divider { height: 1px; background: #E8E7EE; margin: 10px 0 6px 78px; }98  .icon-round {99    width: 56px; height: 56px; border-radius: 50%;100    border: 4px solid #BFBBD2;101    display: inline-block;102  }103  .pin {104    width: 56px; height: 56px; border-radius: 50%;105    border: 4px solid transparent;106    position: relative;107  }108  .pin:before {109    content: "";110    position: absolute; left: 14px; top: 8px;111    width: 28px; height: 28px; border: 4px solid #BFBBD2; border-radius: 50%;112  }113  .pin:after {114    content: "";115    position: absolute; left: 26px; top: 36px;116    width: 4px; height: 16px; background: #BFBBD2; transform: rotate(25deg);117  }118  .swap {119    position: absolute;120    right: 20px; top: 50%;121    transform: translateY(-50%);122    width: 96px; height: 96px; border-radius: 50%;123    border: 1px solid #D9D8E5; background: #fff;124    display: flex; align-items: center; justify-content: center;125  }126  .swap svg { width: 44px; height: 44px; stroke: #8A86A3; }127 128  .row {129    display: flex; gap: 24px; padding: 0 8px; margin-top: 6px;130  }131  .small { flex: 1; padding: 26px 28px; }132 133  .filters {134    display: flex; align-items: center; justify-content: center; gap: 16px;135    color: #3F3A60; font-size: 44px; font-weight: 600;136  }137  .filters svg { width: 42px; height: 42px; }138 139  /* CTA */140  .cta {141    margin: 26px 16px 12px 16px;142    background: #F7B500;143    color: #1C153B;144    font-weight: 700;145    font-size: 48px;146    text-align: center;147    padding: 30px 24px;148    border-radius: 18px;149  }150  .link {151    text-align: center;152    color: #2B2452;153    font-size: 40px;154    text-decoration: underline;155    margin: 16px 0 26px 0;156    font-weight: 600;157  }158 159  /* Info section */160  .section {161    background: #F3F4F7;162    padding: 36px 24px 220px 24px;163    border-top: 1px solid #ECECF2;164  }165  .section h2 {166    margin: 8px 16px 24px 16px;167    color: #241947;168    font-size: 58px;169    font-weight: 800;170  }171  .notice {172    background: #FFE3CF;173    border: 1px solid #F3C5A6;174    border-radius: 26px;175    padding: 34px;176    margin: 0 16px;177    color: #241947;178  }179  .notice h3 {180    margin: 0 0 16px 0;181    font-size: 48px; font-weight: 800;182  }183  .notice p {184    font-size: 40px; line-height: 1.45; color: #2D2A3F; margin: 0 0 28px 0;185  }186  .notice .btn {187    display: inline-flex; align-items: center; gap: 18px;188    background: #231A46; color: #fff; border-radius: 14px;189    padding: 20px 28px; font-size: 44px; font-weight: 700;190  }191  .notice .btn svg { width: 44px; height: 44px; fill: none; stroke: #fff; }192 193  /* Bottom nav */194  .bottom-nav {195    position: absolute; left: 0; right: 0; bottom: 36px;196    background: #FFFFFF;197    border-top: 1px solid #ECECF2;198    height: 164px;199    display: flex; align-items: center; justify-content: space-around;200  }201  .nav-item {202    display: flex; flex-direction: column; align-items: center; gap: 12px;203    font-size: 34px; font-weight: 600;204    color: #A2A4B2;205  }206  .nav-item svg { width: 56px; height: 56px; }207  .nav-item.active { color: #231A46; }208  .home-indicator {209    position: absolute; left: 50%; transform: translateX(-50%);210    bottom: 8px; width: 360px; height: 12px; border-radius: 8px; background: #000; opacity: 0.22;211  }212</style>213</head>214<body>215<div id="render-target">216 217  <!-- Hero image -->218  <div class="hero">219    <div class="img">[IMG: Scenic railway in mountains]</div>220    <div class="shade"></div>221    <div class="title">Where to next?</div>222  </div>223 224  <!-- Main content -->225  <div class="content">226    <div class="tabs">227      <div class="tab active">228        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">229          <circle cx="12" cy="12" r="9"></circle>230          <path d="M12 7v6l4 2"></path>231        </svg>232        <span>Planner</span>233      </div>234      <div class="tab">235        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">236          <rect x="3" y="4" width="18" height="14" rx="2"></rect>237          <path d="M7 14h10M7 10h6"></path>238        </svg>239        <span>Departures</span>240      </div>241    </div>242    <div class="underline"></div>243 244    <!-- From/To card -->245    <div class="card">246      <div class="line">247        <span class="icon-round"></span>248        <span>From</span>249      </div>250      <div class="divider"></div>251      <div class="line">252        <span class="pin"></span>253        <span>To</span>254      </div>255 256      <div class="swap" aria-label="Swap">257        <svg viewBox="0 0 24 24" fill="none" stroke-width="2">258          <path d="M8 4v12M5 7l3-3 3 3" stroke="currentColor"></path>259          <path d="M16 20V8M13 17l3 3 3-3" stroke="currentColor"></path>260        </svg>261      </div>262    </div>263 264    <!-- Departure and Filters -->265    <div class="row">266      <div class="card small" style="flex: 1.6; display:flex; align-items:center; gap:18px; color:#3F3A60; font-size:44px; font-weight:600;">267        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#8A86A3" stroke-width="2">268          <rect x="3" y="4" width="18" height="17" rx="2"></rect>269          <path d="M8 3v4M16 3v4M3 10h18"></path>270        </svg>271        <span>Departure: Now</span>272      </div>273 274      <div class="card small" style="flex: 1;">275        <div class="filters">276          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">277            <path d="M4 6h16M7 12h10M9 18h6"></path>278          </svg>279          <span>Filters</span>280        </div>281      </div>282    </div>283 284    <div class="cta">Plan my journey</div>285    <div class="link">About the timetable</div>286  </div>287 288  <!-- Info section -->289  <div class="section">290    <h2>Before you go</h2>291    <div class="notice">292      <h3>Busy trains in the summer</h3>293      <p>Reserve your seats early to secure your plans. Prefer a less busy trip? Travel on reservation-free routes or after the summer.</p>294      <div class="btn">295        <svg viewBox="0 0 24 24">296          <rect x="3" y="7" width="18" height="12" rx="2"></rect>297          <path d="M7 7V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2"></path>298        </svg>299        <span>Book seats</span>300      </div>301    </div>302  </div>303 304  <!-- Bottom navigation -->305  <div class="bottom-nav">306    <div class="nav-item active">307      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">308        <circle cx="12" cy="12" r="9"></circle>309        <path d="M12 7v6l4 2"></path>310      </svg>311      <div>Planner</div>312    </div>313    <div class="nav-item">314      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">315        <path d="M3 12l8-8 8 8v7a1 1 0 0 1-1 1h-4v-6H8v6H4a1 1 0 0 1-1-1z"></path>316      </svg>317      <div>My Trip</div>318    </div>319    <div class="nav-item">320      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">321        <rect x="6" y="3" width="12" height="18" rx="2"></rect>322        <path d="M9 7h6M9 11h6M9 15h6"></path>323      </svg>324      <div>My Pass</div>325    </div>326    <div class="nav-item">327      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">328        <path d="M4 6h16M4 12h16M4 18h16"></path>329      </svg>330      <div>More</div>331    </div>332  </div>333  <div class="home-indicator"></div>334 335</div>336</body>337</html>