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 Search UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #16244A;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 100%;29    height: 120px;30    background: #2E3A6F;31    color: #ffffff;32    display: flex;33    align-items: center;34    justify-content: space-between;35    padding: 0 40px;36    box-sizing: border-box;37    font-weight: 600;38    letter-spacing: 0.5px;39  }40  .status-right {41    display: flex;42    gap: 28px;43    align-items: center;44  }45  .status-icon svg {46    width: 36px;47    height: 36px;48    fill: none;49    stroke: #ffffff;50    stroke-width: 2.5;51  }52 53  /* Hero image placeholder */54  .hero {55    position: absolute;56    top: 120px;57    left: 0;58    width: 100%;59    height: 540px;60    background: #E0E0E0;61    border-bottom: 1px solid #BDBDBD;62    display: flex;63    align-items: center;64    justify-content: center;65    color: #757575;66    font-size: 34px;67    box-sizing: border-box;68  }69  /* subtle blue overlay to mimic tinted illustration */70  .hero::after {71    content: "";72    position: absolute;73    inset: 0;74    background: linear-gradient(180deg, rgba(60,86,148,0.5) 0%, rgba(60,86,148,0.35) 40%, rgba(60,86,148,0.15) 100%);75    pointer-events: none;76  }77  .hero-title {78    position: absolute;79    bottom: 40px;80    left: 40px;81    font-size: 64px;82    font-weight: 800;83    color: #ffffff;84    z-index: 1;85  }86 87  /* Main card */88  .card {89    position: absolute;90    top: 660px; /* 120 + 540 */91    left: 0;92    width: 100%;93    background: #ffffff;94    border-top-left-radius: 28px;95    border-top-right-radius: 28px;96    box-sizing: border-box;97    padding: 40px;98  }99 100  .field {101    background: #EEF1F7;102    border-radius: 28px;103    padding: 36px 32px;104    display: flex;105    align-items: center;106    gap: 28px;107    font-size: 40px;108    color: #8A96B5;109    margin-bottom: 28px;110  }111  .field .icon {112    width: 52px;113    height: 52px;114  }115  .field .icon svg {116    width: 52px;117    height: 52px;118    stroke: #8A96B5;119    fill: none;120    stroke-width: 3;121  }122 123  .date-row {124    display: flex;125    gap: 28px;126    margin-bottom: 28px;127  }128  .date-row .field {129    flex: 1;130    padding: 34px 32px;131  }132 133  .button {134    margin-top: 20px;135    background: #F8B9BE;136    color: #ffffff;137    height: 120px;138    border-radius: 28px;139    display: flex;140    align-items: center;141    justify-content: center;142    font-size: 44px;143    font-weight: 700;144  }145 146  /* How it works section */147  .how {148    margin-top: 60px;149  }150  .how-title {151    font-size: 56px;152    font-weight: 800;153    margin: 0 0 20px 0;154  }155  .how-divider {156    height: 2px;157    background: #E6EAF4;158    margin: 16px 0 12px 0;159  }160  .steps {161    position: relative;162    padding-left: 120px;163    margin-top: 10px;164  }165  .steps::before {166    content: "";167    position: absolute;168    left: 80px;169    top: 0;170    bottom: 0;171    border-left: 3px dashed #E6EAF4;172  }173  .step {174    padding: 36px 0;175    border-bottom: 2px solid #E6EAF4;176  }177  .step:last-child {178    border-bottom: none;179  }180  .step-icon {181    position: absolute;182    left: 40px;183    width: 80px;184    height: 80px;185    background: #EEF1F7;186    border-radius: 50%;187    display: flex;188    align-items: center;189    justify-content: center;190  }191  .step-icon svg {192    width: 44px;193    height: 44px;194    stroke: #8A96B5;195    stroke-width: 3;196    fill: none;197  }198  .step-title {199    font-size: 44px;200    font-weight: 800;201    margin-bottom: 10px;202    color: #1B2A5A;203  }204  .step-desc {205    font-size: 36px;206    line-height: 1.4;207    color: #65739A;208  }209 210  /* Bottom navigation */211  .bottom-nav {212    position: absolute;213    bottom: 100px;214    left: 0;215    width: 100%;216    height: 160px;217    background: #ffffff;218    border-top: 2px solid #E6EAF4;219    display: flex;220    align-items: center;221    justify-content: space-around;222  }223  .nav-item {224    display: flex;225    flex-direction: column;226    align-items: center;227    color: #8A96B5;228    gap: 10px;229  }230  .nav-icon svg {231    width: 60px;232    height: 60px;233    stroke: #8A96B5;234    stroke-width: 3;235    fill: none;236  }237  .nav-item.active .nav-icon svg {238    stroke: #F2828A;239  }240  .home-indicator {241    position: absolute;242    bottom: 30px;243    left: 50%;244    transform: translateX(-50%);245    width: 320px;246    height: 12px;247    background: #D9DEE8;248    border-radius: 12px;249  }250</style>251</head>252<body>253<div id="render-target">254 255  <!-- Status bar -->256  <div class="status-bar">257    <div>5:54</div>258    <div class="status-right">259      <div class="status-icon">260        <!-- small flame/bell style simplified -->261        <svg viewBox="0 0 24 24"><path d="M12 2c4 4 1 7 4 9 2 1 3 3 3 5H5c0-2 1-4 3-5 3-2 0-5 4-9z"/><circle cx="12" cy="20" r="2"/></svg>262      </div>263      <div class="status-icon">264        <!-- temperature sun -->265        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M19.1 4.9l-2.8 2.8M6.3 16.3l-2.8 2.8"/></svg>266      </div>267      <div class="status-icon">268        <!-- battery -->269        <svg viewBox="0 0 26 24"><rect x="2" y="6" width="18" height="12" rx="2"/><rect x="21" y="9" width="3" height="6"/></svg>270      </div>271    </div>272  </div>273 274  <!-- Hero image placeholder -->275  <div class="hero">276    [IMG: Travel illustration - train, bus and airplane]277    <div class="hero-title">Where to, Jane ?</div>278  </div>279 280  <!-- Main card content -->281  <div class="card">282    <!-- Origin field -->283    <div class="field">284      <div class="icon">285        <svg viewBox="0 0 24 24">286          <circle cx="12" cy="12" r="7"/>287          <circle cx="12" cy="12" r="3"/>288        </svg>289      </div>290      <div>City, station, airport or port</div>291    </div>292 293    <!-- Destination field -->294    <div class="field">295      <div class="icon">296        <svg viewBox="0 0 24 24">297          <path d="M12 2c4 0 7 3 7 7 0 6-7 13-7 13S5 15 5 9c0-4 3-7 7-7z"/>298          <circle cx="12" cy="9" r="3.2"/>299        </svg>300      </div>301      <div>City, station, airport or port</div>302    </div>303 304    <!-- Date row -->305    <div class="date-row">306      <div class="field">307        <div class="icon">308          <svg viewBox="0 0 24 24">309            <rect x="3" y="4" width="18" height="16" rx="2"/>310            <path d="M7 2v4M17 2v4M3 10h18"/>311          </svg>312        </div>313        <div>Wed, Sep 13</div>314      </div>315      <div class="field">316        <div class="icon">317          <svg viewBox="0 0 24 24">318            <rect x="3" y="4" width="18" height="16" rx="2"/>319            <path d="M7 2v4M17 2v4M3 10h18"/>320          </svg>321        </div>322        <div>+ Add return</div>323      </div>324    </div>325 326    <!-- Passenger field -->327    <div class="field">328      <div class="icon">329        <svg viewBox="0 0 24 24">330          <circle cx="12" cy="8" r="4"/>331          <path d="M4 22c0-4.4 4-8 8-8s8 3.6 8 8"/>332        </svg>333      </div>334      <div>1 Adult, No discount card</div>335    </div>336 337    <div class="button">Search Omio</div>338 339    <!-- How it works -->340    <div class="how">341      <div class="how-title">How it works</div>342      <div class="how-divider"></div>343 344      <div class="steps">345        <div class="step-icon" style="top: 16px;">346          <svg viewBox="0 0 24 24">347            <circle cx="11" cy="11" r="7"/>348            <path d="M16 16l5 5"/>349          </svg>350        </div>351        <div class="step">352          <div class="step-title">Search</div>353          <div class="step-desc">354            Find trains, buses, flights and ferries across Europe, Canada and the US.355          </div>356        </div>357 358        <div class="step-icon" style="top: 176px;">359          <svg viewBox="0 0 24 24">360            <rect x="4" y="6" width="16" height="12" rx="2"/>361            <path d="M8 6v-2h8v2M6 12h12"/>362          </svg>363        </div>364        <div class="step">365          <div class="step-title">Compare</div>366          <div class="step-desc">367            Choose the fastest and cheapest routes from our 1000+ official partners.368          </div>369        </div>370      </div>371    </div>372  </div>373 374  <!-- Bottom navigation -->375  <div class="bottom-nav">376    <div class="nav-item active">377      <div class="nav-icon">378        <svg viewBox="0 0 24 24">379          <circle cx="11" cy="11" r="6"/>380          <path d="M16 16l6 6"/>381        </svg>382      </div>383    </div>384    <div class="nav-item">385      <div class="nav-icon">386        <svg viewBox="0 0 24 24">387          <rect x="4" y="6" width="16" height="12" rx="2"/>388          <path d="M8 6v-2h8v2M6 12h12"/>389        </svg>390      </div>391    </div>392    <div class="nav-item">393      <div class="nav-icon">394        <svg viewBox="0 0 24 24">395          <circle cx="12" cy="8" r="4"/>396          <path d="M4 22c0-4.4 4-8 8-8s8 3.6 8 8"/>397        </svg>398      </div>399    </div>400  </div>401 402  <div class="home-indicator"></div>403</div>404</body>405</html>