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: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #f4f7fb;15  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    background: #404e8c;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 36px;25    font-weight: 600;26    font-size: 34px;27    letter-spacing: 0.5px;28  }29  .status-spacer { flex: 1; }30  .sb-icon {31    width: 40px; height: 40px; border: 2px solid rgba(255,255,255,0.85);32    border-radius: 50%; margin-left: 22px;33  }34 35  /* Hero illustration placeholder */36  .hero {37    height: 560px;38    background: #E0E0E0;39    border-bottom-left-radius: 36px;40    border-bottom-right-radius: 36px;41    border-bottom: 1px solid #BDBDBD;42    display: flex;43    align-items: center;44    justify-content: center;45    color: #757575;46    font-size: 36px;47  }48 49  /* White panel with form */50  .panel {51    position: relative;52    margin-top: -10px;53    background: #ffffff;54    border-top-left-radius: 42px;55    border-top-right-radius: 42px;56    padding: 40px 36px 24px;57    box-shadow: 0 -6px 18px rgba(22,34,78,0.04);58  }59  .title {60    font-size: 64px;61    font-weight: 800;62    color: #1d2a5e;63    margin: 8px 6px 26px;64  }65 66  .field {67    height: 120px;68    background: #edf1f7;69    border-radius: 26px;70    display: flex;71    align-items: center;72    padding: 0 28px;73    margin: 18px 0;74    color: #24335f;75    font-size: 40px;76    font-weight: 700;77    letter-spacing: 0.2px;78  }79  .field .icon {80    width: 64px; height: 64px; margin-right: 24px; flex: 0 0 auto;81  }82  .field .hint { color: #98a2b8; font-weight: 700; }83  .field .right {84    margin-left: auto;85    opacity: 0.7;86  }87 88  .two-col {89    display: grid;90    grid-template-columns: 1fr 1fr;91    gap: 22px;92  }93 94  .search-btn {95    height: 120px;96    background: #e87574;97    color: #fff;98    border-radius: 28px;99    display: flex;100    align-items: center;101    justify-content: center;102    font-size: 44px;103    font-weight: 800;104    margin: 26px 0 12px;105    box-shadow: 0 10px 18px rgba(232,117,116,0.35);106  }107 108  .section {109    padding: 32px 36px 0;110    background: #ffffff;111  }112  .section h2 {113    font-size: 48px;114    color: #102257;115    margin: 18px 0 18px;116    font-weight: 900;117    line-height: 1.2;118  }119  .divider {120    height: 2px; background: #e7ebf1; margin: 8px 0 22px;121  }122 123  .cards {124    display: flex;125    overflow-x: auto;126    padding-bottom: 12px;127  }128  .card {129    width: 320px;130    margin-right: 24px;131  }132  .card .photo {133    width: 100%;134    height: 210px;135    background: #E0E0E0;136    border: 1px solid #BDBDBD;137    border-radius: 26px;138    color: #757575;139    display: flex; align-items: center; justify-content: center;140    position: relative;141    font-size: 28px;142  }143  .badge {144    position: absolute; top: 14px; left: 14px;145    background: #2e7d5b;146    color: #eafff4;147    padding: 10px 16px;148    border-radius: 12px;149    font-size: 30px;150    font-weight: 800;151  }152  .card .name {153    margin-top: 14px;154    font-size: 34px;155    font-weight: 800;156    color: #14215c;157    white-space: nowrap;158    overflow: hidden;159    text-overflow: ellipsis;160  }161 162  /* Bottom navigation */163  .bottom-nav {164    position: absolute;165    left: 0; right: 0; bottom: 120px;166    height: 170px;167    background: #ffffff;168    border-top: 1px solid #e5e8ef;169    display: flex;170    align-items: center;171    justify-content: space-around;172    padding: 0 40px;173  }174  .bn-item { text-align: center; color: #9aa5bf; }175  .bn-item .ico {176    width: 64px; height: 64px; margin: 0 auto 10px;177  }178  .bn-item.active { color: #ef8e98; }179  .bn-item.blue { color: #7e8fb8; }180 181  .safe-area {182    position: absolute;183    left: 0; right: 0; bottom: 0;184    height: 120px;185    background: #0e1a2c;186    display: flex; align-items: center; justify-content: center;187  }188  .home-indicator {189    width: 240px; height: 12px; background: #bcc6d6; border-radius: 10px;190    opacity: 0.8;191  }192 193  /* Hide scrollbar (visual only) */194  .cards::-webkit-scrollbar { height: 0; }195</style>196</head>197<body>198<div id="render-target">199 200  <!-- Status bar -->201  <div class="status-bar">202    8:57203    <div class="status-spacer"></div>204    <div class="sb-icon"></div>205    <div class="sb-icon"></div>206    <div class="sb-icon"></div>207  </div>208 209  <!-- Top illustration -->210  <div class="hero">[IMG: Travel illustration with plane, bus and train]</div>211 212  <!-- Main white panel -->213  <div class="panel">214    <div class="title">Where to, Fabio?</div>215 216    <div class="field">217      <svg class="icon" viewBox="0 0 24 24">218        <circle cx="12" cy="12" r="9" fill="none" stroke="#7f8db0" stroke-width="2"></circle>219        <circle cx="12" cy="12" r="4" fill="#7f8db0"></circle>220      </svg>221      <div>New York USA</div>222      <div class="right">223        <svg width="60" height="60" viewBox="0 0 24 24">224          <path d="M7 4v8l-3-3m3-5h10M17 20v-8l3 3m-3 5H7" fill="none" stroke="#7f8db0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>225        </svg>226      </div>227    </div>228 229    <div class="field">230      <svg class="icon" viewBox="0 0 24 24">231        <path d="M12 2C8.7 2 6 4.7 6 8c0 4.5 6 12 6 12s6-7.5 6-12c0-3.3-2.7-6-6-6z" fill="none" stroke="#7f8db0" stroke-width="2"/>232        <circle cx="12" cy="8" r="2.5" fill="#7f8db0"/>233      </svg>234      <div>Penn Station USA</div>235    </div>236 237    <div class="two-col">238      <div class="field" style="margin:0;">239        <svg class="icon" viewBox="0 0 24 24">240          <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="none" stroke="#7f8db0" stroke-width="2"/>241          <path d="M3 9h18M8 3v4M16 3v4" stroke="#7f8db0" stroke-width="2" fill="none"/>242        </svg>243        <div>Tue, Nov 21</div>244      </div>245      <div class="field" style="margin:0; color:#9aa5bf;">246        <svg class="icon" viewBox="0 0 24 24">247          <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="none" stroke="#b8c0d6" stroke-width="2"/>248          <path d="M3 9h18M8 3v4M16 3v4" stroke="#b8c0d6" stroke-width="2" fill="none"/>249        </svg>250        <div class="hint">+ Add return</div>251      </div>252    </div>253 254    <div class="field">255      <svg class="icon" viewBox="0 0 24 24">256        <circle cx="12" cy="8" r="4" fill="none" stroke="#7f8db0" stroke-width="2"/>257        <path d="M4 20c1.5-4 6.5-6 8-6s6.5 2 8 6" fill="none" stroke="#7f8db0" stroke-width="2" stroke-linecap="round"/>258      </svg>259      <div>1 Adult, No discount card</div>260    </div>261 262    <div class="search-btn">Search Omio</div>263  </div>264 265  <!-- Recommendation section -->266  <div class="section">267    <h2>Need a place to stay in New Hyde Park, NY?</h2>268    <div class="divider"></div>269 270    <div class="cards">271      <div class="card">272        <div class="photo">273          [IMG: Hotel photo]274          <div class="badge">Cheapest • -9%</div>275        </div>276        <div class="name">Meadowbrook Motel</div>277      </div>278 279      <div class="card">280        <div class="photo">281          [IMG: Hotel photo]282          <div class="badge">-47%</div>283        </div>284        <div class="name">Courtyard New York</div>285      </div>286 287      <div class="card">288        <div class="photo">289          [IMG: Hotel photo]290          <div class="badge">-44%</div>291        </div>292        <div class="name">The Westin NYC</div>293      </div>294    </div>295  </div>296 297  <!-- Bottom navigation -->298  <div class="bottom-nav">299    <div class="bn-item active">300      <svg class="ico" viewBox="0 0 24 24">301        <circle cx="11" cy="11" r="7" fill="none" stroke="#ef8e98" stroke-width="2"/>302        <path d="M16.5 16.5L21 21" stroke="#ef8e98" stroke-width="2" stroke-linecap="round"/>303      </svg>304      <div>Search</div>305    </div>306    <div class="bn-item blue">307      <svg class="ico" viewBox="0 0 24 24">308        <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#7e8fb8" stroke-width="2"/>309        <path d="M7 12h10M3 12c2 0 2-2 4-2m10 4c2 0 2 2 4 2" stroke="#7e8fb8" stroke-width="2" fill="none" stroke-linecap="round"/>310      </svg>311      <div>Tickets</div>312    </div>313    <div class="bn-item">314      <svg class="ico" viewBox="0 0 24 24">315        <circle cx="12" cy="8" r="4" fill="none" stroke="#9aa5bf" stroke-width="2"/>316        <path d="M4 20c1.5-4 6.5-6 8-6s6.5 2 8 6" fill="none" stroke="#9aa5bf" stroke-width="2" stroke-linecap="round"/>317      </svg>318      <div>Account</div>319    </div>320    <div class="bn-item">321      <svg class="ico" viewBox="0 0 24 24">322        <path d="M4 6h16M4 12h16M4 18h10" stroke="#9aa5bf" stroke-width="2" fill="none" stroke-linecap="round"/>323      </svg>324      <div>More</div>325    </div>326  </div>327 328  <div class="safe-area">329    <div class="home-indicator"></div>330  </div>331</div>332</body>333</html>