GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Travel Search UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: linear-gradient(180deg, #3f4b83 0, #5b6fb0 340px, #e9eefb 340px, #e9eefb 100%);13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 112px;22    background: #3f4b83;23    color: #fff;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28    font-weight: 600;29  }30  .status-left { display: flex; align-items: center; gap: 20px; }31  .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }32  .dot-icon { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.9); opacity: 0.9; }33 34  /* Hero illustration placeholder */35  .hero {36    position: absolute;37    left: 0;38    top: 112px;39    width: 1080px;40    height: 520px;41    display: flex;42    align-items: center;43    justify-content: center;44    color: #ffffff;45  }46  .hero .img {47    width: 100%;48    height: 100%;49    border: 1px solid #BDBDBD33;50    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));51    display: flex;52    align-items: center;53    justify-content: center;54    color: #f0f3ff;55    font-weight: 600;56    letter-spacing: 0.5px;57  }58 59  /* Main white sheet */60  .sheet {61    position: absolute;62    top: 560px;63    left: 0;64    width: 1080px;65    height: 1840px;66    background: #ffffff;67    border-top-left-radius: 26px;68    border-top-right-radius: 26px;69    box-shadow: 0 -6px 24px rgba(0,0,0,0.12);70  }71  .content {72    padding: 36px 40px 0 40px;73  }74  .title {75    font-size: 64px;76    font-weight: 800;77    color: #112664;78    margin: 12px 0 28px 0;79  }80 81  /* Input rows */82  .field {83    height: 120px;84    background: #F2F4FB;85    border-radius: 24px;86    display: flex;87    align-items: center;88    padding: 0 28px;89    box-sizing: border-box;90    color: #1a2f6b;91    font-size: 40px;92    margin-bottom: 26px;93  }94  .icon {95    width: 64px;96    height: 64px;97    display: inline-flex;98    align-items: center;99    justify-content: center;100    margin-right: 22px;101  }102  .right-icon {103    margin-left: auto;104    width: 64px;105    height: 64px;106    display: inline-flex;107    align-items: center;108    justify-content: center;109    opacity: 0.85;110  }111 112  .row {113    display: flex;114    gap: 28px;115    margin-bottom: 26px;116  }117  .half {118    flex: 1;119    height: 120px;120    background: #F2F4FB;121    border-radius: 24px;122    display: flex;123    align-items: center;124    padding: 0 28px;125    box-sizing: border-box;126    color: #1a2f6b;127    font-size: 40px;128    position: relative;129  }130  .clear-x {131    position: absolute;132    right: 24px;133    width: 40px;134    height: 40px;135    display: inline-flex;136    align-items: center;137    justify-content: center;138    opacity: 0.7;139  }140 141  .btn {142    height: 120px;143    background: #EB7D72;144    color: #ffffff;145    border-radius: 20px;146    display: flex;147    align-items: center;148    justify-content: center;149    font-weight: 700;150    font-size: 44px;151    margin: 22px 0 8px 0;152    box-shadow: 0 8px 16px rgba(235,125,114,0.35);153  }154 155  .section-title {156    font-size: 48px;157    color: #0f2a65;158    font-weight: 800;159    margin: 48px 0 16px 0;160  }161 162  .promo-row {163    display: flex;164    gap: 28px;165    padding-bottom: 20px;166  }167  .promo-card {168    flex: 1;169    height: 360px;170    background: #E0E0E0;171    border: 1px solid #BDBDBD;172    border-radius: 20px;173    color: #616161;174    display: flex;175    align-items: center;176    justify-content: center;177    text-align: center;178    padding: 18px;179    box-sizing: border-box;180    font-size: 38px;181    line-height: 1.2;182  }183 184  /* Bottom nav */185  .bottom-nav {186    position: absolute;187    bottom: 0;188    left: 0;189    width: 1080px;190    height: 160px;191    background: #0f1f43;192    display: flex;193    align-items: center;194    justify-content: space-around;195    color: #c9d2ff;196  }197  .nav-item { display: flex; align-items: center; justify-content: center; width: 160px; height: 100%; position: relative; }198  .active { color: #EC7E73; }199  .notif-dot {200    position: absolute;201    top: 44px;202    right: 44px;203    width: 18px;204    height: 18px;205    background: #EC7E73;206    border-radius: 50%;207  }208  .home-indicator {209    position: absolute;210    bottom: 160px;211    left: 50%;212    transform: translateX(-50%);213    width: 360px;214    height: 10px;215    border-radius: 6px;216    background: #cfd4e6;217    opacity: 0.9;218  }219 220  /* Helpers */221  .muted { color: #384c8a; opacity: 0.9; }222</style>223</head>224<body>225<div id="render-target">226 227  <!-- Status bar -->228  <div class="status-bar">229    <div class="status-left">230      <div style="font-size:44px;">10:00</div>231      <div class="dot-icon"></div>232      <div class="dot-icon"></div>233      <div class="dot-icon"></div>234      <div class="dot-icon"></div>235      <div style="width:8px; height:8px; background:#fff; border-radius:50%;"></div>236    </div>237    <div class="status-right">238      <!-- wifi -->239      <svg width="46" height="32" viewBox="0 0 24 14" fill="none">240        <path d="M2 6c5-5 15-5 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>241        <path d="M5 9c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>242        <path d="M9 12c2-2 4-2 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>243      </svg>244      <!-- battery -->245      <svg width="56" height="32" viewBox="0 0 28 14" fill="none">246        <rect x="1" y="2" width="22" height="10" rx="2" stroke="#fff" stroke-width="2"/>247        <rect x="3" y="4" width="18" height="6" fill="#fff"/>248        <rect x="24" y="5" width="3" height="4" rx="1" fill="#fff"/>249      </svg>250    </div>251  </div>252 253  <!-- Hero illustration -->254  <div class="hero">255    <div class="img">[IMG: Scenic travel illustration with plane, bus, bridge and high-speed train]</div>256  </div>257 258  <!-- White sheet with search form -->259  <div class="sheet">260    <div class="content">261      <div class="title">Where to, Maria?</div>262 263      <!-- From field -->264      <div class="field">265        <div class="icon">266          <svg width="48" height="48" viewBox="0 0 24 24" fill="none">267            <circle cx="12" cy="12" r="8" stroke="#334d9b" stroke-width="2"/>268            <circle cx="12" cy="12" r="3" fill="#334d9b"/>269          </svg>270        </div>271        <div>London United Kingdom</div>272        <div class="right-icon">273          <!-- swap vertical -->274          <svg width="48" height="48" viewBox="0 0 24 24" fill="none">275            <path d="M8 3v14m0 0-3-3m3 3 3-3" stroke="#334d9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>276            <path d="M16 21V7m0 0-3 3m3-3 3 3" stroke="#334d9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>277          </svg>278        </div>279      </div>280 281      <!-- To field -->282      <div class="field">283        <div class="icon">284          <!-- location pin -->285          <svg width="48" height="48" viewBox="0 0 24 24" fill="none">286            <path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z" stroke="#334d9b" stroke-width="2"/>287            <circle cx="12" cy="10" r="3" fill="#334d9b"/>288          </svg>289        </div>290        <div>Brinnington United Kingdom</div>291      </div>292 293      <!-- Dates -->294      <div class="row">295        <div class="half">296          <div class="icon" style="margin-right:18px;">297            <!-- calendar -->298            <svg width="48" height="48" viewBox="0 0 24 24" fill="none">299              <rect x="3" y="5" width="18" height="16" rx="2" stroke="#334d9b" stroke-width="2"/>300              <path d="M3 9h18" stroke="#334d9b" stroke-width="2"/>301              <path d="M8 3v4M16 3v4" stroke="#334d9b" stroke-width="2" stroke-linecap="round"/>302            </svg>303          </div>304          <div>Wed, Nov 15</div>305        </div>306        <div class="half">307          <div class="icon" style="margin-right:18px;">308            <!-- calendar -->309            <svg width="48" height="48" viewBox="0 0 24 24" fill="none">310              <rect x="3" y="5" width="18" height="16" rx="2" stroke="#334d9b" stroke-width="2"/>311              <path d="M3 9h18" stroke="#334d9b" stroke-width="2"/>312              <path d="M8 3v4M16 3v4" stroke="#334d9b" stroke-width="2" stroke-linecap="round"/>313            </svg>314          </div>315          <div>Mon, Nov 20</div>316          <div class="clear-x">317            <svg width="36" height="36" viewBox="0 0 24 24" fill="none">318              <path d="M6 6l12 12M18 6L6 18" stroke="#334d9b" stroke-width="2" stroke-linecap="round"/>319            </svg>320          </div>321        </div>322      </div>323 324      <!-- Passengers -->325      <div class="field">326        <div class="icon">327          <!-- user icon -->328          <svg width="48" height="48" viewBox="0 0 24 24" fill="none">329            <circle cx="12" cy="8" r="4" stroke="#334d9b" stroke-width="2"/>330            <path d="M4 20c2-4 6-5 8-5s6 1 8 5" stroke="#334d9b" stroke-width="2" stroke-linecap="round"/>331          </svg>332        </div>333        <div>1 Adult, No discount card</div>334      </div>335 336      <!-- Button -->337      <div class="btn">Search Omio</div>338 339      <!-- Stay section -->340      <div class="section-title">Need a place to stay?</div>341      <div class="promo-row">342        <div class="promo-card">[IMG: Book now, pay later]</div>343        <div class="promo-card">[IMG: Free cancelation on most stays]</div>344        <div class="promo-card">[IMG: Get 10% with mobile app]</div>345      </div>346    </div>347  </div>348 349  <div class="home-indicator"></div>350 351  <!-- Bottom navigation -->352  <div class="bottom-nav">353    <div class="nav-item active">354      <!-- search icon -->355      <svg width="72" height="72" viewBox="0 0 24 24" fill="none">356        <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/>357        <path d="M20 20l-4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>358      </svg>359    </div>360    <div class="nav-item">361      <!-- ticket icon -->362      <svg width="84" height="84" viewBox="0 0 24 24" fill="none">363        <rect x="3" y="6" width="18" height="12" rx="2" stroke="#c9d2ff" stroke-width="2"/>364        <path d="M9 6v12M15 6v12" stroke="#c9d2ff" stroke-width="2" stroke-dasharray="2 3"/>365        <circle cx="12" cy="12" r="1.5" fill="#c9d2ff"/>366      </svg>367    </div>368    <div class="nav-item">369      <!-- profile -->370      <svg width="72" height="72" viewBox="0 0 24 24" fill="none">371        <circle cx="12" cy="9" r="4" stroke="#c9d2ff" stroke-width="2"/>372        <path d="M4 21c2.5-5 13.5-5 16 0" stroke="#c9d2ff" stroke-width="2" stroke-linecap="round"/>373      </svg>374      <div class="notif-dot"></div>375    </div>376  </div>377 378</div>379</body>380</html>