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 { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F6F8FC;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0; width: 1080px; height: 140px;21    background: #3E4B7B;22    color: #ffffff;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 40px;27    box-sizing: border-box;28    font-weight: 600;29    letter-spacing: 0.2px;30  }31  .sb-left, .sb-right { display: flex; align-items: center; gap: 26px; font-size: 34px; }32  .sb-icon svg { width: 40px; height: 40px; fill: none; stroke: #ffffff; stroke-width: 3; }33 34  /* Hero illustration area */35  .hero {36    position: absolute;37    top: 140px; left: 0;38    width: 1080px; height: 640px;39  }40  .hero .img {41    width: 100%; height: 100%;42    background: #E0E0E0;43    border: 1px solid #BDBDBD;44    display: flex; align-items: center; justify-content: center;45    color: #757575; font-size: 34px;46  }47  .hero-title {48    position: absolute;49    bottom: 30px; left: 50px;50    font-size: 64px;51    color: #ffffff;52    font-weight: 800;53    text-shadow: 0 2px 6px rgba(0,0,0,0.15);54  }55 56  /* Main white card */57  .card {58    position: absolute;59    top: 730px; left: 0;60    width: 1080px;61    background: #ffffff;62    border-top-left-radius: 32px;63    border-top-right-radius: 32px;64    box-shadow: 0 -8px 24px rgba(0,0,0,0.06);65    padding: 40px 50px 0;66    box-sizing: border-box;67  }68 69  .input-row {70    width: 980px; height: 120px;71    background: #EEF1F7;72    border-radius: 28px;73    display: flex; align-items: center;74    padding: 0 32px;75    margin: 22px 0;76    box-sizing: border-box;77    color: #1E2D5D;78    font-size: 38px; font-weight: 600;79  }80  .input-row .left {81    display: flex; align-items: center; gap: 26px;82    flex: 1;83  }84  .input-row .right {85    width: 100px; display: flex; align-items: center; justify-content: flex-end;86  }87  .i-icon {88    width: 54px; height: 54px; border-radius: 14px;89    display: flex; align-items: center; justify-content: center;90    color: #6E7AA6;91  }92  .i-icon svg { width: 42px; height: 42px; stroke: #6E7AA6; fill: none; stroke-width: 3; }93 94  .row-grid {95    width: 980px;96    display: grid;97    grid-template-columns: 1fr 1fr;98    gap: 28px;99    margin: 8px 0 22px;100  }101  .input-row.small { width: 100%; }102 103  /* Search button */104  .search-btn {105    width: 980px; height: 120px;106    background: #F56C70;107    border-radius: 28px;108    color: #ffffff;109    font-size: 40px;110    font-weight: 700;111    display: flex; align-items: center; justify-content: center;112    margin: 26px 0 40px;113    box-shadow: 0 6px 16px rgba(245,108,112,0.35);114    cursor: pointer;115  }116 117  /* How it works section */118  .section {119    padding: 10px 50px 30px;120  }121  .section h2 {122    color: #152854;123    font-size: 48px;124    font-weight: 800;125    margin: 20px 0 14px;126  }127  .divider { width: 980px; height: 2px; background: #E6EBF5; margin: 16px 0 24px; }128  .features {129    width: 980px;130    border-left: 2px dashed #E6EBF5;131    padding-left: 30px;132  }133  .feature {134    display: flex; align-items: flex-start; gap: 26px;135    padding: 22px 0;136    border-bottom: 2px solid #E6EBF5;137  }138  .feature:last-child { border-bottom: none; }139  .feat-icon {140    width: 72px; height: 72px;141    border-radius: 50%;142    border: 2px solid #D7DEEE;143    display: flex; align-items: center; justify-content: center;144    color: #7686B0;145    background: #ffffff;146  }147  .feat-icon svg { width: 44px; height: 44px; stroke: #7686B0; fill: none; stroke-width: 3; }148  .feat-text h3 {149    margin: 0; font-size: 40px; color: #22335E; font-weight: 800;150  }151  .feat-text p {152    margin: 8px 0 0; font-size: 34px; color: #51608E; line-height: 1.45;153  }154 155  /* Bottom navigation */156  .bottom-nav {157    position: absolute;158    bottom: 160px; left: 0;159    width: 1080px; height: 160px;160    background: #ffffff;161    border-top: 1px solid #E5EAF4;162    display: flex; align-items: center; justify-content: space-around;163  }164  .nav-item {165    width: 180px; height: 120px;166    display: flex; align-items: center; justify-content: center;167    position: relative;168  }169  .nav-item svg { width: 56px; height: 56px; stroke: #9AA7C9; fill: none; stroke-width: 3; }170  .nav-search svg { stroke: #F56C70; }171  .profile-dot {172    position: absolute; top: 24px; right: 30px;173    width: 20px; height: 20px; background: #FF6161; border-radius: 50%;174  }175 176  /* Gesture area */177  .gesture-area {178    position: absolute; bottom: 0; left: 0;179    width: 1080px; height: 160px;180    background: #0D1B3D;181    display: flex; align-items: center; justify-content: center;182  }183  .gesture-handle {184    width: 220px; height: 12px; background: #E8EAEE; border-radius: 12px;185    opacity: 0.85;186  }187</style>188</head>189<body>190<div id="render-target">191 192  <!-- Status Bar -->193  <div class="status-bar">194    <div class="sb-left">195      <div>5:59</div>196      <div>28°</div>197      <div class="sb-icon">198        <!-- simple phone-outline icon -->199        <svg viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2"></rect><rect x="10" y="18" width="4" height="1"></rect></svg>200      </div>201    </div>202    <div class="sb-right">203      <div class="sb-icon">204        <!-- wifi icon -->205        <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0"></path><path d="M5 12c3-3 11-3 14 0"></path><path d="M8 16c2-2 6-2 8 0"></path><circle cx="12" cy="19" r="1.5" fill="#ffffff" stroke="none"></circle></svg>206      </div>207      <div class="sb-icon">208        <!-- battery icon -->209        <svg viewBox="0 0 28 24"><rect x="2" y="6" width="22" height="12" rx="2"></rect><rect x="24" y="9" width="2" height="6"></rect></svg>210      </div>211    </div>212  </div>213 214  <!-- Hero Illustration -->215  <div class="hero">216    <div class="img">[IMG: Travel illustration with plane, bus and train]</div>217    <div class="hero-title">Where to, Jane ?</div>218  </div>219 220  <!-- Main Card -->221  <div class="card">222 223    <!-- Origin -->224    <div class="input-row">225      <div class="left">226        <div class="i-icon">227          <svg viewBox="0 0 24 24"><circle cx="12" cy="10" r="4"></circle><path d="M12 2v4"></path><path d="M12 14v8"></path></svg>228        </div>229        <div>New York, NY USA</div>230      </div>231      <div class="right">232        <!-- swap vertical -->233        <svg viewBox="0 0 24 24"><path d="M8 3l-3 3 3 3"></path><path d="M5 6h9"></path><path d="M16 21l3-3-3-3"></path><path d="M19 18H10"></path></svg>234      </div>235    </div>236 237    <!-- Destination -->238    <div class="input-row">239      <div class="left">240        <div class="i-icon">241          <!-- location pin -->242          <svg viewBox="0 0 24 24"><path d="M12 22s-7-6-7-11a7 7 0 1 1 14 0c0 5-7 11-7 11z"></path><circle cx="12" cy="11" r="3"></circle></svg>243        </div>244        <div>Delaware, OH USA</div>245      </div>246    </div>247 248    <!-- Dates -->249    <div class="row-grid">250      <div class="input-row small">251        <div class="left">252          <div class="i-icon">253            <!-- calendar -->254            <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="16" y1="2" x2="16" y2="6"></line></svg>255          </div>256          <div>Wed, Sep 13</div>257        </div>258      </div>259      <div class="input-row small">260        <div class="left">261          <div class="i-icon">262            <!-- calendar -->263            <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="16" y1="2" x2="16" y2="6"></line></svg>264          </div>265          <div style="color:#7A87AF; font-weight:700;">+ Add return</div>266        </div>267      </div>268    </div>269 270    <!-- Passengers -->271    <div class="input-row">272      <div class="left">273        <div class="i-icon">274          <!-- user -->275          <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 20c2-4 14-4 16 0"></path></svg>276        </div>277        <div>1 Adult, No discount card</div>278      </div>279    </div>280 281    <!-- Search Button -->282    <div class="search-btn">Search Omio</div>283 284    <!-- How it works -->285    <div class="section">286      <h2>How it works</h2>287      <div class="divider"></div>288      <div class="features">289        <div class="feature">290          <div class="feat-icon">291            <!-- magnifier -->292            <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"></circle><line x1="16" y1="16" x2="21" y2="21"></line></svg>293          </div>294          <div class="feat-text">295            <h3>Search</h3>296            <p>Find trains, buses, flights and ferries across Europe, Canada and the US.</p>297          </div>298        </div>299        <div class="feature">300          <div class="feat-icon">301            <!-- ticket -->302            <svg viewBox="0 0 24 24"><path d="M3 8h18v4a3 3 0 0 1 0 6H3v-4a3 3 0 0 0 0-6z"></path></svg>303          </div>304          <div class="feat-text">305            <h3>Compare</h3>306            <p>Choose the fastest and cheapest routes from our 1000+ official partners.</p>307          </div>308        </div>309      </div>310    </div>311 312  </div>313 314  <!-- Bottom Navigation -->315  <div class="bottom-nav">316    <div class="nav-item nav-search">317      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"></circle><line x1="16" y1="16" x2="21" y2="21"></line></svg>318    </div>319    <div class="nav-item">320      <svg viewBox="0 0 24 24"><path d="M3 8h18v4a3 3 0 0 1 0 6H3v-4a3 3 0 0 0 0-6z"></path></svg>321    </div>322    <div class="nav-item">323      <div class="profile-dot"></div>324      <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 20c2-4 14-4 16 0"></path></svg>325    </div>326  </div>327 328  <!-- Gesture Bar -->329  <div class="gesture-area">330    <div class="gesture-handle"></div>331  </div>332 333</div>334</body>335</html>