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<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">8<style>9  body { margin: 0; padding: 0; background: transparent; font-family: 'Poppins', Arial, sans-serif; }10  #render-target {11    width: 1080px;12    height: 2400px;13    position: relative;14    overflow: hidden;15    background: #F7F8FC;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    background: #3E4B81;22    color: #fff;23    padding: 0 40px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    box-sizing: border-box;28  }29  .status-left, .status-right {30    display: flex;31    align-items: center;32    gap: 22px;33    font-weight: 600;34  }35  .status-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.95; }36 37  /* Hero illustration area */38  .hero {39    height: 480px;40    background: linear-gradient(180deg, #6D82B9 0%, #9EB6E6 60%, #BFD1F3 100%);41    position: relative;42  }43  .hero .img-placeholder {44    position: absolute;45    left: 40px;46    right: 40px;47    top: 30px;48    bottom: 30px;49    background: #E0E0E0;50    border: 1px solid #BDBDBD;51    border-radius: 16px;52    color: #757575;53    display: flex;54    align-items: center;55    justify-content: center;56    font-weight: 600;57    letter-spacing: 0.2px;58  }59 60  /* White sheet content */61  .sheet {62    background: #FFFFFF;63    border-top-left-radius: 36px;64    border-top-right-radius: 36px;65    margin-top: -24px;66    padding: 36px 36px 24px;67    box-sizing: border-box;68  }69  .title {70    font-size: 62px;71    line-height: 1.15;72    font-weight: 700;73    color: #223165;74    margin: 18px 8px 28px;75  }76 77  .field {78    background: #EEF2F8;79    border-radius: 26px;80    height: 120px;81    display: flex;82    align-items: center;83    padding: 0 30px;84    box-sizing: border-box;85    margin: 16px 8px;86    color: #253368;87    font-size: 38px;88    font-weight: 600;89  }90  .field .icon {91    width: 56px; height: 56px; margin-right: 26px; display: inline-flex; align-items: center; justify-content: center;92  }93  .field .trailing {94    margin-left: auto;95    opacity: 0.7;96  }97  .field.light {98    color: #98A4C0;99    font-weight: 600;100  }101 102  .field-row {103    display: flex;104    gap: 24px;105    margin: 8px 8px;106  }107  .field.half { flex: 1; }108 109  .passengers { margin: 8px 8px 30px; }110 111  .cta {112    margin: 18px 8px 12px;113    height: 120px;114    border-radius: 26px;115    background: #E97674;116    color: #FFFFFF;117    display: flex;118    align-items: center;119    justify-content: center;120    font-size: 42px;121    font-weight: 700;122  }123 124  /* Hotels section */125  .section {126    padding: 22px 36px 0;127  }128  .section h2 {129    font-size: 48px;130    color: #17255A;131    margin: 24px 0 10px;132    line-height: 1.2;133    font-weight: 700;134  }135  .divider {136    height: 2px;137    background: #E9EDF5;138    margin: 10px 0 20px;139  }140  .cards {141    display: flex;142    gap: 26px;143    overflow-x: auto;144    padding-bottom: 18px;145  }146  .hotel-card {147    width: 312px;148    flex: 0 0 auto;149  }150  .photo {151    width: 100%;152    height: 220px;153    background: #E0E0E0;154    border: 1px solid #BDBDBD;155    border-radius: 20px;156    color: #757575;157    display: flex;158    align-items: center;159    justify-content: center;160    position: relative;161    font-weight: 600;162  }163  .badge {164    position: absolute;165    top: 12px;166    left: 12px;167    background: #2E7D32;168    color: #fff;169    font-size: 28px;170    padding: 10px 16px;171    border-radius: 12px;172    font-weight: 700;173    opacity: 0.95;174  }175  .caption {176    margin-top: 12px;177    color: #1F2B5A;178    font-weight: 700;179    font-size: 32px;180    white-space: nowrap;181    overflow: hidden;182    text-overflow: ellipsis;183  }184 185  /* Bottom tab bar */186  .tabbar {187    position: absolute;188    left: 0;189    right: 0;190    bottom: 110px;191    height: 140px;192    background: #FFFFFF;193    border-top: 1px solid #E0E4EF;194    display: flex;195    align-items: center;196    justify-content: space-around;197  }198  .tab {199    display: flex;200    flex-direction: column;201    align-items: center;202    gap: 8px;203    color: #9FA8C8;204    font-size: 26px;205    font-weight: 600;206  }207  .tab.active { color: #EF8683; }208  .tab .tab-icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; }209 210  /* Home indicator */211  .home-indicator {212    position: absolute;213    bottom: 40px;214    left: 50%;215    transform: translateX(-50%);216    width: 360px;217    height: 12px;218    border-radius: 8px;219    background: #D1D5DF;220    opacity: 0.9;221  }222</style>223</head>224<body>225<div id="render-target">226 227  <!-- Top status bar -->228  <div class="status-bar">229    <div class="status-left">230      <div style="font-size:36px;">8:56</div>231      <span class="status-icon">232        <svg width="30" height="30" viewBox="0 0 24 24" fill="none">233          <circle cx="12" cy="12" r="9" stroke="white" stroke-width="2"/>234          <path d="M12 6v6l4 2" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>235        </svg>236      </span>237      <span class="status-icon">238        <svg width="30" height="30" viewBox="0 0 24 24" fill="none">239          <path d="M3 10h18l-2 9H5L3 10z" stroke="white" stroke-width="2" stroke-linejoin="round"/>240          <path d="M7 10V6a5 5 0 019 0v4" stroke="white" stroke-width="2"/>241        </svg>242      </span>243      <span class="status-icon">244        <svg width="30" height="30" viewBox="0 0 24 24" fill="none">245          <path d="M2 16l20-6-7 10-3-6-4 2-2-6z" stroke="white" stroke-width="2" stroke-linejoin="round"/>246        </svg>247      </span>248      <span style="font-size:36px;">•</span>249    </div>250    <div class="status-right">251      <span class="status-icon">252        <svg width="30" height="30" viewBox="0 0 24 24" fill="none">253          <circle cx="12" cy="12" r="9" stroke="white" stroke-width="2"/>254          <path d="M8 12h8" stroke="white" stroke-width="2" stroke-linecap="round"/>255        </svg>256      </span>257      <span class="status-icon">258        <svg width="28" height="28" viewBox="0 0 24 24" fill="white">259          <path d="M7 7h10v10H7z"/>260        </svg>261      </span>262      <div style="font-size:36px; font-weight:700;">100%</div>263    </div>264  </div>265 266  <!-- Hero illustration placeholder -->267  <div class="hero">268    <div class="img-placeholder">[IMG: Travel illustration with train, bus and plane]</div>269  </div>270 271  <!-- White sheet with content -->272  <div class="sheet">273    <div class="title">Where to, Fabio?</div>274 275    <!-- From -->276    <div class="field">277      <span class="icon">278        <svg width="46" height="46" viewBox="0 0 24 24" fill="none">279          <circle cx="12" cy="12" r="7.5" stroke="#253368" stroke-width="2"/>280          <circle cx="12" cy="12" r="2.2" fill="#253368"/>281        </svg>282      </span>283      <span>Newcastle-upon-Tyne United Kingd...</span>284      <span class="trailing">285        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">286          <path d="M7 8l5-5 5 5M7 16l5 5 5-5" stroke="#253368" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>287        </svg>288      </span>289    </div>290 291    <!-- To -->292    <div class="field">293      <span class="icon">294        <svg width="46" height="46" viewBox="0 0 24 24" fill="none">295          <path d="M12 21s7-4.5 7-10a7 7 0 10-14 0c0 5.5 7 10 7 10z" stroke="#253368" stroke-width="2"/>296          <circle cx="12" cy="11" r="2" fill="#253368"/>297        </svg>298      </span>299      <span>Penn Station USA</span>300    </div>301 302    <!-- Dates -->303    <div class="field-row">304      <div class="field half">305        <span class="icon">306          <svg width="46" height="46" viewBox="0 0 24 24" fill="none">307            <rect x="3" y="5" width="18" height="16" rx="2" stroke="#253368" stroke-width="2"/>308            <path d="M8 3v4M16 3v4M3 10h18" stroke="#253368" stroke-width="2"/>309          </svg>310        </span>311        Tue, Nov 21312      </div>313      <div class="field half light">314        <span class="icon">315          <svg width="46" height="46" viewBox="0 0 24 24" fill="none">316            <rect x="3" y="5" width="18" height="16" rx="2" stroke="#98A4C0" stroke-width="2"/>317            <path d="M8 3v4M16 3v4M3 10h18" stroke="#98A4C0" stroke-width="2"/>318          </svg>319        </span>320        + Add return321      </div>322    </div>323 324    <!-- Passengers -->325    <div class="field passengers">326      <span class="icon">327        <svg width="46" height="46" viewBox="0 0 24 24" fill="none">328          <circle cx="12" cy="8" r="3" stroke="#253368" stroke-width="2"/>329          <path d="M5 20c1.5-4 12.5-4 14 0" stroke="#253368" stroke-width="2" stroke-linecap="round"/>330        </svg>331      </span>332      1 Adult, No discount card333    </div>334 335    <!-- CTA -->336    <div class="cta">Search Omio</div>337 338    <!-- Hotels -->339    <div class="section">340      <h2>Need a place to stay in New Hyde Park, NY?</h2>341      <div class="divider"></div>342 343      <div class="cards">344        <div class="hotel-card">345          <div class="photo">346            [IMG: Hotel exterior]347            <div class="badge">Cheapest -9%</div>348          </div>349          <div class="caption">Meadowbrook Mot...</div>350        </div>351        <div class="hotel-card">352          <div class="photo">353            [IMG: Hotel room with city view]354            <div class="badge">-47%</div>355          </div>356          <div class="caption">Courtyard New Yor...</div>357        </div>358        <div class="hotel-card">359          <div class="photo">360            [IMG: Modern hotel entrance]361            <div class="badge">-44%</div>362          </div>363          <div class="caption">The Westi...</div>364        </div>365      </div>366    </div>367  </div>368 369  <!-- Bottom tab bar -->370  <div class="tabbar">371    <div class="tab active">372      <div class="tab-icon">373        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">374          <circle cx="11" cy="11" r="7" stroke="#EF8683" stroke-width="2"/>375          <path d="M20 20l-3.5-3.5" stroke="#EF8683" stroke-width="2" stroke-linecap="round"/>376        </svg>377      </div>378    </div>379    <div class="tab">380      <div class="tab-icon">381        <svg width="46" height="46" viewBox="0 0 24 24" fill="none">382          <path d="M3 7h18l-2 10H5L3 7z" stroke="#9FA8C8" stroke-width="2"/>383          <path d="M7 7V5a5 5 0 0110 0v2" stroke="#9FA8C8" stroke-width="2"/>384        </svg>385      </div>386    </div>387    <div class="tab">388      <div class="tab-icon">389        <svg width="46" height="46" viewBox="0 0 24 24" fill="none">390          <circle cx="12" cy="8" r="3" stroke="#9FA8C8" stroke-width="2"/>391          <path d="M5 20c1.5-4 12.5-4 14 0" stroke="#9FA8C8" stroke-width="2" stroke-linecap="round"/>392        </svg>393      </div>394    </div>395    <div class="tab">396      <div class="tab-icon">397        <svg width="12" height="12"><circle cx="6" cy="6" r="6" fill="#EF8683"/></svg>398      </div>399    </div>400  </div>401 402  <!-- Home indicator -->403  <div class="home-indicator"></div>404</div>405</body>406</html>