GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Travel Search UI</title>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: linear-gradient(180deg, #394F8A 0%, #3F5AA8 18%, #4C74C3 38%, #F6F8FF 60%);14  }15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 110px;22    background: #394F8A;23    color: #E8EEFF;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28    letter-spacing: 1px;29    font-weight: 600;30  }31  .status-left { font-size: 38px; }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 26px;37  }38  /* Simple icons */39  .wifi-icon, .battery-icon, .caret {40    display: inline-block;41  }42  .caret { width: 28px; height: 18px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 18px solid #E8EEFF; margin-left: 14px; }43  .wifi-icon svg, .battery-icon svg { display:block }44  /* Hero illustration area */45  .hero {46    position: absolute;47    top: 110px;48    left: 0;49    width: 1080px;50    height: 410px;51    padding: 24px 40px 0;52    box-sizing: border-box;53  }54  .hero .img {55    width: 100%;56    height: 100%;57    background: #E0E0E0;58    border: 1px solid #BDBDBD;59    color: #757575;60    display: flex;61    align-items: center;62    justify-content: center;63    font-size: 36px;64    border-radius: 18px;65  }66  /* Card / panel */67  .panel {68    position: absolute;69    top: 430px;70    left: 0;71    width: 1080px;72    background: #ffffff;73    border-top-left-radius: 28px;74    border-top-right-radius: 28px;75    box-shadow: 0 -6px 14px rgba(0,0,0,0.1);76    padding: 44px 32px 0;77    box-sizing: border-box;78  }79  .title {80    font-size: 64px;81    margin: 0 10px 28px;82    color: #0f2a66;83    font-weight: 800;84  }85  .field {86    background: #F4F6FB;87    border-radius: 26px;88    padding: 36px 34px;89    display: flex;90    align-items: center;91    gap: 26px;92    margin: 18px 10px;93    box-sizing: border-box;94    color: #1d3d83;95    font-size: 44px;96  }97  .field .right-action {98    margin-left: auto;99    opacity: .6;100  }101  .icon {102    width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center;103  }104  .date-row {105    display: flex;106    gap: 26px;107    padding: 0 10px;108    margin-top: 6px;109  }110  .half {111    flex: 1;112    background: #F4F6FB;113    border-radius: 26px;114    padding: 36px 34px;115    display: flex;116    align-items: center;117    gap: 26px;118    color: #1d3d83;119    font-size: 44px;120    box-sizing: border-box;121  }122  .pass-row { margin: 16px 10px; }123  .search-btn {124    margin: 32px 10px 24px;125    background: #FF7069;126    color: #fff;127    border: none;128    width: calc(100% - 20px);129    height: 120px;130    border-radius: 26px;131    font-size: 48px;132    font-weight: 700;133    letter-spacing: .5px;134  }135  /* Stay section */136  .stay-title {137    font-size: 54px;138    color: #0f2a66;139    margin: 24px 18px;140    font-weight: 800;141  }142  .promo-row {143    display: flex;144    gap: 24px;145    padding: 0 18px 180px;146    box-sizing: border-box;147  }148  .promo-card {149    flex: 1;150    background: #ffffff;151    border-radius: 22px;152    box-shadow: 0 8px 18px rgba(0,0,0,0.06);153    padding: 20px;154    display: flex;155    flex-direction: column;156    gap: 20px;157  }158  .promo-img {159    height: 240px;160    background: #E0E0E0;161    border: 1px solid #BDBDBD;162    color: #757575;163    display: flex;164    align-items: center;165    justify-content: center;166    border-radius: 14px;167    font-size: 32px;168  }169  .promo-title {170    font-size: 46px;171    color: #0f2a66;172    font-weight: 800;173    line-height: 1.1;174  }175  .promo-sub {176    font-size: 36px;177    color: #3b4f8d;178  }179  /* Bottom nav bar */180  .bottom-bar {181    position: absolute;182    bottom: 0;183    left: 0;184    width: 1080px;185    height: 150px;186    background: #ffffff;187    border-top-left-radius: 20px;188    border-top-right-radius: 20px;189    box-shadow: 0 -6px 16px rgba(0,0,0,0.08);190    display: flex;191    align-items: center;192    justify-content: space-around;193  }194  .nav-item {195    display: flex;196    flex-direction: column;197    align-items: center;198    gap: 10px;199    color: #7e95c5;200    font-size: 28px;201  }202  .nav-item .dot {203    width: 18px; height: 18px; background: #FF7069; border-radius: 50%; position: absolute; margin-left: 58px; margin-top: -10px;204  }205  /* small help text styling inside fields */206  .muted { opacity: .7; }207</style>208</head>209<body>210<div id="render-target">211 212  <!-- Status Bar -->213  <div class="status-bar">214    <div class="status-left">11:59</div>215    <div class="caret"></div>216    <div class="caret" style="transform: scaleY(-1);"></div>217    <div class="status-right">218      <!-- WiFi -->219      <div class="wifi-icon">220        <svg width="48" height="36" viewBox="0 0 48 36">221          <path d="M24 30c2 0 3 1 3 3s-1 3-3 3-3-1-3-3 1-3 3-3z" fill="#E8EEFF"/>222          <path d="M9 18c9-8 21-8 30 0" stroke="#E8EEFF" stroke-width="4" fill="none" stroke-linecap="round"/>223          <path d="M15 24c6-5 12-5 18 0" stroke="#E8EEFF" stroke-width="4" fill="none" stroke-linecap="round"/>224        </svg>225      </div>226      <!-- Battery -->227      <div class="battery-icon">228        <svg width="56" height="28" viewBox="0 0 56 28">229          <rect x="2" y="4" width="46" height="20" rx="4" fill="none" stroke="#E8EEFF" stroke-width="4"/>230          <rect x="6" y="8" width="36" height="12" rx="2" fill="#E8EEFF"/>231          <rect x="50" y="9" width="6" height="10" rx="2" fill="#E8EEFF"/>232        </svg>233      </div>234    </div>235  </div>236 237  <!-- Hero -->238  <div class="hero">239    <div class="img">[IMG: Transport illustration with plane, bus and train]</div>240  </div>241 242  <!-- Main Panel -->243  <div class="panel">244    <div class="title">Where to?</div>245 246    <!-- From -->247    <div class="field">248      <div class="icon">249        <svg width="54" height="54" viewBox="0 0 54 54">250          <circle cx="27" cy="27" r="20" fill="none" stroke="#2f55a0" stroke-width="6"/>251          <circle cx="27" cy="27" r="8" fill="#2f55a0"/>252        </svg>253      </div>254      <div>Aalst Belgium</div>255      <div class="right-action">256        <svg width="56" height="56" viewBox="0 0 56 56">257          <path d="M16 22h24l-8-8m8 20H16l8 8" stroke="#2f55a0" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>258        </svg>259      </div>260    </div>261 262    <!-- To -->263    <div class="field">264      <div class="icon">265        <svg width="54" height="54" viewBox="0 0 54 54">266          <path d="M27 6c-8 0-14 6-14 14 0 11 14 28 14 28s14-17 14-28c0-8-6-14-14-14zm0 20a6 6 0 1 1 0-12 6 6 0 0 1 0 12z" fill="#2f55a0"/>267      </svg>268      </div>269      <div>Brussels-Central Belgium</div>270    </div>271 272    <!-- Dates -->273    <div class="date-row">274      <div class="half">275        <div class="icon">276          <svg width="54" height="54" viewBox="0 0 54 54">277            <rect x="6" y="12" width="42" height="34" rx="6" fill="none" stroke="#2f55a0" stroke-width="5"/>278            <path d="M6 22h42" stroke="#2f55a0" stroke-width="5"/>279            <rect x="14" y="28" width="10" height="10" fill="#2f55a0"/>280          </svg>281        </div>282        <div>Sat, Nov 4</div>283      </div>284      <div class="half">285        <div class="icon">286          <svg width="54" height="54" viewBox="0 0 54 54">287            <rect x="6" y="12" width="42" height="34" rx="6" fill="none" stroke="#2f55a0" stroke-width="5"/>288            <path d="M6 22h42" stroke="#2f55a0" stroke-width="5"/>289          </svg>290        </div>291        <div class="muted">+ Add return</div>292      </div>293    </div>294 295    <!-- Passengers -->296    <div class="field pass-row">297      <div class="icon">298        <svg width="54" height="54" viewBox="0 0 54 54">299          <circle cx="27" cy="18" r="10" fill="#2f55a0"/>300          <rect x="12" y="30" width="30" height="16" rx="8" fill="#2f55a0"/>301        </svg>302      </div>303      <div>1 Adult, No discount card</div>304    </div>305 306    <button class="search-btn">Search Omio</button>307 308    <div class="stay-title">Need a place to stay?</div>309 310    <div class="promo-row">311      <div class="promo-card">312        <div class="promo-title">Book now,</div>313        <div class="promo-sub">pay later</div>314        <div class="promo-img">[IMG: Hotel promo]</div>315      </div>316      <div class="promo-card">317        <div class="promo-title">Free cancelation</div>318        <div class="promo-sub">on most stays</div>319        <div class="promo-img">[IMG: Cancel phone graphic]</div>320      </div>321      <div class="promo-card">322        <div class="promo-title">Get 10%</div>323        <div class="promo-sub">with mobile</div>324        <div class="promo-img">[IMG: Mobile perks]</div>325      </div>326    </div>327 328  </div>329 330  <!-- Bottom navigation bar -->331  <div class="bottom-bar">332    <div class="nav-item">333      <svg width="72" height="72" viewBox="0 0 72 72">334        <circle cx="32" cy="32" r="24" stroke="#FF7069" stroke-width="6" fill="none"/>335        <line x1="52" y1="52" x2="68" y2="68" stroke="#FF7069" stroke-width="6" stroke-linecap="round"/>336      </svg>337    </div>338    <div class="nav-item">339      <svg width="72" height="72" viewBox="0 0 72 72">340        <rect x="10" y="14" width="52" height="44" rx="10" stroke="#7e95c5" stroke-width="6" fill="none"/>341        <circle cx="26" cy="36" r="6" fill="#7e95c5"/>342        <circle cx="46" cy="36" r="6" fill="#7e95c5"/>343      </svg>344    </div>345    <div class="nav-item" style="position: relative;">346      <svg width="72" height="72" viewBox="0 0 72 72">347        <circle cx="36" cy="26" r="14" fill="#7e95c5"/>348        <rect x="16" y="40" width="40" height="18" rx="9" fill="#7e95c5"/>349      </svg>350      <div class="dot"></div>351    </div>352  </div>353 354</div>355</body>356</html>