GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Travel Search UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #f5f7fb;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #3c4774;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 40px;28    box-sizing: border-box;29  }30  .status-left { font-size: 40px; font-weight: 600; }31  .status-right {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 28px;36  }37  .status-icon { width: 42px; height: 42px; opacity: 0.95; }38 39  /* Hero section */40  .hero {41    position: absolute;42    top: 120px;43    left: 0;44    width: 1080px;45    height: 640px;46    background: linear-gradient(180deg, #55659a 0%, #7fa1c8 60%, #88a9cf 100%);47  }48  .hero-illustration {49    position: absolute;50    left: 40px;51    top: 80px;52    width: 1000px;53    height: 420px;54    background: #E0E0E0;55    border: 1px solid #BDBDBD;56    display: flex;57    justify-content: center;58    align-items: center;59    color: #757575;60    font-size: 30px;61    border-radius: 18px;62  }63  .hero-title {64    position: absolute;65    bottom: 40px;66    left: 40px;67    color: #fff;68    font-size: 72px;69    font-weight: 800;70    letter-spacing: 0.5px;71  }72 73  /* Search Card */74  .search-card {75    position: absolute;76    top: 740px;77    left: 0;78    width: 1080px;79    background: #ffffff;80    border-top-left-radius: 32px;81    border-top-right-radius: 32px;82    box-shadow: 0 -8px 24px rgba(25, 50, 93, 0.15);83    padding: 40px 40px 0 40px;84    box-sizing: border-box;85  }86  .field {87    width: 100%;88    height: 140px;89    background: #eef2f7;90    border-radius: 28px;91    display: flex;92    align-items: center;93    padding: 0 36px;94    box-sizing: border-box;95    margin-bottom: 28px;96    color: #273a65;97    font-size: 44px;98    font-weight: 600;99  }100  .field .icon {101    width: 56px;102    height: 56px;103    margin-right: 28px;104    flex-shrink: 0;105  }106  .swap {107    margin-left: auto;108    width: 64px;109    height: 64px;110  }111 112  .date-row {113    display: flex;114    gap: 24px;115    margin-bottom: 28px;116  }117  .field.small {118    height: 140px;119    flex: 1;120    font-size: 42px;121  }122  .btn {123    width: 100%;124    height: 140px;125    background: #ec7f76;126    color: #fff;127    font-size: 50px;128    font-weight: 700;129    border-radius: 28px;130    display: flex;131    align-items: center;132    justify-content: center;133    margin: 12px 0 40px 0;134  }135 136  /* Stay section */137  .stay-section {138    padding: 40px;139    box-sizing: border-box;140    background: #ffffff;141    position: absolute;142    top: 1420px;143    left: 0;144    width: 1080px;145  }146  .stay-title {147    font-size: 56px;148    color: #1e2c55;149    font-weight: 800;150    margin-bottom: 28px;151  }152  .cards {153    display: flex;154    gap: 28px;155  }156  .stay-card {157    flex: 1;158    background: #f1f4f9;159    border-radius: 22px;160    padding: 28px;161    box-sizing: border-box;162    text-align: center;163  }164  .stay-img {165    width: 100%;166    height: 320px;167    background: #E0E0E0;168    border: 1px solid #BDBDBD;169    border-radius: 16px;170    display: flex;171    align-items: center;172    justify-content: center;173    color: #757575;174    font-size: 28px;175    margin-bottom: 22px;176  }177  .stay-card h4 {178    margin: 0;179    font-size: 44px;180    color: #0f2250;181  }182  .stay-card p {183    margin: 8px 0 0 0;184    color: #51608b;185    font-size: 34px;186  }187 188  /* Bottom navigation */189  .bottom-nav {190    position: absolute;191    bottom: 0;192    left: 0;193    width: 1080px;194    height: 170px;195    background: #ffffff;196    border-top: 1px solid #dfe5ef;197    display: flex;198    align-items: center;199    justify-content: space-around;200    box-sizing: border-box;201    padding-bottom: 16px;202  }203  .nav-item {204    display: flex;205    flex-direction: column;206    align-items: center;207    gap: 16px;208    color: #8c99bf;209    font-size: 30px;210  }211  .nav-item.active { color: #ec7f76; }212  .nav-icon {213    width: 64px;214    height: 64px;215  }216</style>217</head>218<body>219<div id="render-target">220 221  <!-- Status Bar -->222  <div class="status-bar">223    <div class="status-left">12:00</div>224    <div class="status-right">225      <!-- simple icons -->226      <svg class="status-icon" viewBox="0 0 24 24">227        <path fill="#fff" d="M3 9l9-6 9 6v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z"/>228      </svg>229      <svg class="status-icon" viewBox="0 0 24 24">230        <path fill="#fff" d="M4 18h16v2H4zm2-4h12v2H6zm2-4h8v2H8z"/>231      </svg>232    </div>233  </div>234 235  <!-- Hero -->236  <div class="hero">237    <div class="hero-illustration">[IMG: Travel illustration with plane, bus and fast train]</div>238    <div class="hero-title">Where to?</div>239  </div>240 241  <!-- Search Card -->242  <div class="search-card">243    <div class="field">244      <!-- circle icon -->245      <svg class="icon" viewBox="0 0 24 24">246        <circle cx="12" cy="12" r="9" fill="none" stroke="#394a7a" stroke-width="2"/>247      </svg>248      Aalst Belgium249      <svg class="swap" viewBox="0 0 24 24">250        <path fill="#51608b" d="M7 10l-3-3 3-3v2h10v2H7v2zm10 4l3 3-3 3v-2H7v-2h10v-2z"/>251      </svg>252    </div>253 254    <div class="field">255      <!-- map pin -->256      <svg class="icon" viewBox="0 0 24 24">257        <path fill="#394a7a" d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>258      </svg>259      Brussels-Central Belgium260    </div>261 262    <div class="date-row">263      <div class="field small">264        <svg class="icon" viewBox="0 0 24 24">265          <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="none" stroke="#394a7a" stroke-width="2"/>266          <path d="M7 3v4M17 3v4" stroke="#394a7a" stroke-width="2"/>267        </svg>268        Tue, Nov 28269      </div>270      <div class="field small">271        <svg class="icon" viewBox="0 0 24 24">272          <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="none" stroke="#394a7a" stroke-width="2"/>273          <path d="M7 3v4M17 3v4" stroke="#394a7a" stroke-width="2"/>274        </svg>275        + Add return276      </div>277    </div>278 279    <div class="field">280      <svg class="icon" viewBox="0 0 24 24">281        <path fill="#394a7a" d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm-9 9a9 9 0 0 1 18 0H3z"/>282      </svg>283      1 Adult, No discount card284    </div>285 286    <div class="btn">Search Omio</div>287  </div>288 289  <!-- Stay Section -->290  <div class="stay-section">291    <div class="stay-title">Need a place to stay?</div>292    <div class="cards">293      <div class="stay-card">294        <div class="stay-img">[IMG: Hotel receptionist with traveler]</div>295        <h4>Book now,</h4>296        <p>pay later</p>297      </div>298      <div class="stay-card">299        <div class="stay-img">[IMG: Phone showing cancelled badge]</div>300        <h4>Free cancelation</h4>301        <p>on most stays</p>302      </div>303      <div class="stay-card">304        <div class="stay-img">[IMG: Mobile wallet and 10% badge]</div>305        <h4>Get 10%</h4>306        <p>with mobile</p>307      </div>308    </div>309  </div>310 311  <!-- Bottom Navigation -->312  <div class="bottom-nav">313    <div class="nav-item active">314      <svg class="nav-icon" viewBox="0 0 24 24">315        <circle cx="12" cy="12" r="9" fill="#ec7f76"/>316      </svg>317      <span>Search</span>318    </div>319    <div class="nav-item">320      <svg class="nav-icon" viewBox="0 0 24 24">321        <path d="M4 12h16M4 18h10" stroke="#8c99bf" stroke-width="2"/>322      </svg>323      <span>Trips</span>324    </div>325    <div class="nav-item">326      <svg class="nav-icon" viewBox="0 0 24 24">327        <path d="M12 2l8 6v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8l8-6z" fill="#8c99bf"/>328      </svg>329      <span>Profile</span>330    </div>331  </div>332 333</div>334</body>335</html>