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>Multiple Arrival Cities</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #0f2b46;16  }17 18  .page {19    padding: 64px 56px 0;20    box-sizing: border-box;21  }22 23  /* Header */24  .header {25    display: flex;26    align-items: center;27    justify-content: space-between;28    height: 110px;29  }30  .header-left {31    display: flex;32    align-items: center;33    gap: 20px;34  }35  .icon-btn {36    width: 64px;37    height: 64px;38    border-radius: 50%;39    display: grid;40    place-items: center;41    background: transparent;42    border: none;43    padding: 0;44  }45  .title {46    font-size: 46px;47    font-weight: 700;48    letter-spacing: 0.2px;49  }50  .switch {51    width: 120px;52    height: 56px;53    border-radius: 28px;54    background: #e6e9ef;55    position: relative;56    display: inline-block;57  }58  .switch .knob {59    width: 54px;60    height: 54px;61    background: #ffffff;62    border-radius: 50%;63    position: absolute;64    top: 1px;65    right: 1px; /* looks like toggled to the right */66    box-shadow: 0 2px 6px rgba(0,0,0,0.15);67  }68  .header-label {69    font-size: 42px;70    font-weight: 700;71    margin-right: 18px;72  }73  .header-right {74    display: flex;75    align-items: center;76  }77 78  /* Search */79  .search-bar {80    margin-top: 26px;81    border: 2px solid #e3e8ef;82    border-radius: 18px;83    height: 112px;84    display: flex;85    align-items: center;86    padding: 0 26px;87    box-sizing: border-box;88    color: #9aa8b6;89    font-size: 40px;90    gap: 18px;91  }92  .search-placeholder { color: #b1bdc8; }93 94  /* Explore */95  .section-title {96    font-size: 46px;97    font-weight: 700;98    margin-top: 46px;99    margin-bottom: 20px;100  }101  .explore-grid {102    display: grid;103    grid-template-columns: 1.35fr 1fr;104    gap: 28px;105  }106  .img-card {107    position: relative;108    height: 226px;109    border-radius: 16px;110    overflow: hidden;111  }112  .image-placeholder {113    width: 100%;114    height: 100%;115    background: #E0E0E0;116    border: 1px solid #BDBDBD;117    border-radius: 16px;118    display: flex;119    justify-content: center;120    align-items: center;121    color: #757575;122    font-size: 34px;123    text-align: center;124  }125  .img-card .overlay-label {126    position: absolute;127    left: 20px;128    bottom: 16px;129    color: #ffffff;130    font-size: 40px;131    font-weight: 600;132    text-shadow: 0 2px 6px rgba(0,0,0,0.35);133  }134 135  .stack {136    display: grid;137    grid-template-rows: 1fr 1fr;138    gap: 28px;139  }140  .pill-card {141    background: #f5f8fc;142    border-radius: 16px;143    height: 106px;144    display: flex;145    align-items: center;146    padding: 0 22px;147    gap: 16px;148    font-size: 40px;149    color: #0f2b46;150  }151  .pill-card svg { opacity: 0.9; }152 153  .show-more {154    margin: 24px 0 8px;155    text-align: center;156    font-size: 38px;157    color: #3f67ff;158    font-weight: 600;159    display: flex;160    justify-content: center;161    align-items: center;162    gap: 10px;163  }164  .show-more .circle {165    width: 38px;166    height: 38px;167    border: 2px solid #3f67ff;168    border-radius: 50%;169    display: grid;170    place-items: center;171  }172 173  /* City grids */174  .group-title {175    font-size: 46px;176    font-weight: 800;177    margin-top: 36px;178    margin-bottom: 18px;179  }180  .city-grid {181    display: grid;182    grid-template-columns: repeat(3, 1fr);183    gap: 26px;184  }185  .city {186    background: #f6f9fc;187    border-radius: 14px;188    height: 116px;189    display: grid;190    place-items: center;191    font-size: 40px;192    color: #102e4a;193    border: 1px solid #eef2f6;194  }195 196  .hint {197    text-align: center;198    margin: 36px 0 0;199    color: #9aa7b5;200    font-size: 34px;201  }202 203  /* Bottom gesture area */204  .nav-area {205    position: absolute;206    bottom: 0;207    left: 0;208    width: 1080px;209    height: 130px;210    background: #000000;211    display: grid;212    place-items: center;213  }214  .gesture-pill {215    width: 210px;216    height: 12px;217    background: #d8dadd;218    border-radius: 6px;219    opacity: 0.85;220  }221 222  /* Subtle X icon stroke */223  .x-icon { width: 40px; height: 40px; }224</style>225</head>226<body>227<div id="render-target">228  <div class="page">229 230    <div class="header">231      <div class="header-left">232        <button class="icon-btn" aria-label="Close">233          <svg class="x-icon" viewBox="0 0 24 24" fill="none" stroke="#0f2b46" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">234            <line x1="5" y1="5" x2="19" y2="19"></line>235            <line x1="19" y1="5" x2="5" y2="19"></line>236          </svg>237        </button>238      </div>239      <div class="header-right">240        <div class="header-label">Multiple Arrival Cities</div>241        <div class="switch" aria-hidden="true">242          <div class="knob"></div>243        </div>244      </div>245    </div>246 247    <div class="search-bar">248      <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#8ea0b0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">249        <circle cx="11" cy="11" r="7"></circle>250        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>251      </svg>252      <div class="search-placeholder">Country, city, or airport</div>253    </div>254 255    <div class="section-title">Explore the world</div>256    <div class="explore-grid">257      <div class="img-card">258        <div class="image-placeholder">[IMG: World Map]</div>259        <div class="overlay-label">Anywhere</div>260      </div>261      <div class="stack">262        <div class="pill-card">263          <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#0f2b46" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">264            <path d="M12 22V12"></path>265            <path d="M7 22V10"></path>266            <path d="M17 22V14"></path>267            <path d="M3 10l9-7 9 7"></path>268          </svg>269          <div>Nature</div>270        </div>271        <div class="pill-card">272          <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#0f2b46" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">273            <path d="M2 20h20"></path>274            <path d="M3 16s2-2 5-2 5 2 5 2"></path>275            <path d="M14 12l3-5 3 5"></path>276          </svg>277          <div>Beaches</div>278        </div>279      </div>280    </div>281 282    <div class="show-more">283      <span>Show More</span>284      <span class="circle">285        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#3f67ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">286          <polyline points="6 9 12 15 18 9"></polyline>287        </svg>288      </span>289    </div>290 291    <div class="group-title">Asia</div>292    <div class="city-grid">293      <div class="city">Hong Kong</div>294      <div class="city">Taipei</div>295      <div class="city">Shanghai</div>296      <div class="city">Tokyo</div>297      <div class="city">Seoul</div>298      <div class="city">Bangkok</div>299      <div class="city">Singapore</div>300      <div class="city">Kuala Lumpur</div>301      <div class="city">Manila</div>302    </div>303 304    <div class="group-title">Europe</div>305    <div class="city-grid">306      <div class="city">London</div>307      <div class="city">Paris</div>308      <div class="city">Frankfurt</div>309      <div class="city">Rome</div>310      <div class="city">Amsterdam</div>311      <div class="city">Madrid</div>312    </div>313 314    <div class="group-title">North America</div>315    <div class="city-grid">316      <div class="city">New York</div>317      <div class="city">San Francisco</div>318      <div class="city">Los Angeles</div>319      <div class="city">Chicago</div>320      <div class="city">Vancouver</div>321      <div class="city">Toronto</div>322    </div>323 324    <div class="hint">For more cities, please use the search box.</div>325 326  </div>327 328  <div class="nav-area">329    <div class="gesture-pill"></div>330  </div>331</div>332</body>333</html>