GD-ML/AndroidCode

1<html>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: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #F6F6F6;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    color: #FFFFFF;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 40px;27    z-index: 5;28    pointer-events: none;29  }30  .status-left { font-size: 46px; font-weight: 600; display: flex; align-items: center; gap: 22px; }31  .status-right { display: flex; align-items: center; gap: 26px; font-size: 38px; font-weight: 600; }32 33  /* Hero image */34  .hero {35    position: absolute;36    top: 0;37    left: 0;38    width: 1080px;39    height: 760px;40    background: #E0E0E0;41    border-bottom: 1px solid #BDBDBD;42    display: flex;43    align-items: flex-end;44    justify-content: center;45    color: #757575;46    letter-spacing: 0.5px;47  }48  .hero span { margin-bottom: 18px; }49 50  /* Search card */51  .search-card {52    position: absolute;53    left: 30px;54    top: 560px;55    width: 1020px;56    height: 240px;57    background: #FFFFFF;58    border-radius: 18px;59    box-shadow: 0 2px 0 rgba(0,0,0,0.04);60    border: 1px solid #ECECEC;61    z-index: 6;62  }63  .search-content {64    position: relative;65    padding: 40px 180px 40px 110px;66    height: 100%;67  }68  .city {69    font-size: 48px;70    color: #222;71  }72  .divider {73    height: 2px;74    background: #E7E7E7;75    margin: 34px 0;76  }77 78  /* Left timeline (dot, line, triangle) */79  .timeline {80    position: absolute;81    left: 44px;82    top: 32px;83    bottom: 32px;84    width: 24px;85  }86  .dot {87    width: 28px; height: 28px; background: #CFCFCF; border-radius: 50%;88    margin-left: 4px;89  }90  .vline {91    position: absolute;92    top: 40px;93    bottom: 64px;94    left: 16px;95    width: 2px;96    background: #DADADA;97  }98  .triangle {99    width: 0; height: 0;100    border-left: 20px solid transparent;101    border-right: 20px solid transparent;102    border-top: 34px solid #DB4D8D;103    position: absolute;104    bottom: 20px;105    left: 6px;106  }107 108  /* Floating search button */109  .fab {110    position: absolute;111    right: -20px;112    bottom: -40px;113    width: 160px;114    height: 160px;115    border-radius: 50%;116    background: #D65793;117    box-shadow: 0 6px 18px rgba(214,87,147,0.35);118    display: flex;119    align-items: center;120    justify-content: center;121  }122 123  /* Sections */124  .section {125    position: absolute;126    left: 30px;127    right: 30px;128    top: 860px;129  }130  .section .title-row {131    display: flex;132    align-items: center;133    justify-content: space-between;134    margin-bottom: 22px;135  }136  .section h2 {137    margin: 0;138    font-size: 64px;139    color: #1C1C1C;140    letter-spacing: 0.4px;141  }142  .show-all {143    font-size: 42px;144    color: #D65793;145    font-weight: 700;146    letter-spacing: 3px;147  }148 149  .list {150    margin-top: 10px;151  }152  .list-item {153    display: flex;154    align-items: center;155    justify-content: space-between;156    padding: 34px 8px;157    border-bottom: 1px solid #EFEFEF;158  }159  .list-item span {160    font-size: 54px;161    color: #2A2A2A;162  }163 164  /* Featured trips */165  .featured {166    position: absolute;167    left: 30px;168    right: 30px;169    top: 1380px;170  }171  .featured h2 {172    margin: 0 0 24px 0;173    font-size: 64px;174    color: #1C1C1C;175  }176  .cards {177    display: flex;178    gap: 26px;179  }180  .card {181    background: #E0E0E0;182    border: 1px solid #BDBDBD;183    border-radius: 16px;184    height: 520px;185    width: 680px;186    display: flex;187    align-items: center;188    justify-content: center;189    color: #757575;190    font-size: 40px;191  }192 193  /* Bottom nav */194  .bottom-nav {195    position: absolute;196    left: 0;197    bottom: 0;198    width: 1080px;199    height: 210px;200    background: #FFFFFF;201    border-top: 1px solid #EAEAEA;202    display: flex;203    justify-content: space-around;204    align-items: center;205    z-index: 8;206  }207  .nav-item {208    width: 33.33%;209    display: flex;210    flex-direction: column;211    align-items: center;212    gap: 14px;213    color: #6B6B6B;214    font-size: 42px;215  }216  .nav-item.active { color: #D65793; }217 218  /* Gesture bar */219  .gesture {220    position: absolute;221    left: 240px;222    bottom: 18px;223    width: 600px;224    height: 14px;225    background: #222;226    border-radius: 12px;227    opacity: 0.85;228    z-index: 9;229  }230 231  /* Utility icon sizing */232  .icon-40 { width: 40px; height: 40px; }233  .icon-54 { width: 54px; height: 54px; }234  .icon-60 { width: 60px; height: 60px; }235</style>236</head>237<body>238<div id="render-target">239 240  <!-- Hero area -->241  <div class="hero">242    <span>[IMG: Mountain lake landscape]</span>243  </div>244 245  <!-- Status Bar -->246  <div class="status-bar">247    <div class="status-left">248      <span>8:53</span>249      <!-- Warning icon -->250      <svg class="icon-40" viewBox="0 0 24 24">251        <path fill="#FFFFFF" d="M1 21h22L12 2 1 21zm12-3h-2v2h2v-2zm0-8h-2v6h2V10z"/>252      </svg>253    </div>254    <div class="status-right">255      <!-- Wifi -->256      <svg class="icon-54" viewBox="0 0 24 24">257        <path fill="#FFFFFF" d="M12 18.5c.8 0 1.5.7 1.5 1.5S12.8 21.5 12 21.5 10.5 20.8 10.5 20s.7-1.5 1.5-1.5zM2 9c5.5-5 14.5-5 20 0l-1.5 1.7C16 6.6 8 6.6 3.5 10.7L2 9zm4 4c3.7-3.3 8.3-3.3 12 0l-1.6 1.7c-2.7-2.4-6-2.4-8.8 0L6 13z"/>258      </svg>259      <!-- Battery -->260      <svg class="icon-60" viewBox="0 0 24 24">261        <path fill="#FFFFFF" d="M17 6h2a2 2 0 012 2v8a2 2 0 01-2 2h-2v-1h-1V7h1V6zM3 7h12v10H3V7z"/>262      </svg>263      <span>100%</span>264    </div>265  </div>266 267  <!-- Search Card -->268  <div class="search-card">269    <div class="timeline">270      <div class="dot"></div>271      <div class="vline"></div>272      <div class="triangle"></div>273    </div>274    <div class="search-content">275      <div class="city">Berlin</div>276      <div class="divider"></div>277      <div class="city" style="color:#303030;">Ulm</div>278    </div>279    <div class="fab">280      <svg viewBox="0 0 24 24" width="84" height="84">281        <path fill="#FFFFFF" d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zM10 15a5 5 0 110-10 5 5 0 010 10z"/>282      </svg>283    </div>284  </div>285 286  <!-- Searches Section -->287  <div class="section">288    <div class="title-row">289      <h2>Searches</h2>290      <div class="show-all">SHOW ALL</div>291    </div>292    <div class="list">293      <div class="list-item">294        <span>Dubai to Vienna</span>295        <svg class="icon-60" viewBox="0 0 24 24">296          <path fill="#9E9E9E" d="M9 6l6 6-6 6-1.4-1.4L12.2 12 7.6 7.4 9 6z"/>297        </svg>298      </div>299      <div class="list-item">300        <span>Ulm to Berlin</span>301        <svg class="icon-60" viewBox="0 0 24 24">302          <path fill="#9E9E9E" d="M9 6l6 6-6 6-1.4-1.4L12.2 12 7.6 7.4 9 6z"/>303        </svg>304      </div>305      <div class="list-item">306        <span>Dubai to Hungary</span>307        <svg class="icon-60" viewBox="0 0 24 24">308          <path fill="#9E9E9E" d="M9 6l6 6-6 6-1.4-1.4L12.2 12 7.6 7.4 9 6z"/>309        </svg>310      </div>311      <div class="list-item">312        <span>Vienna to Washington</span>313        <svg class="icon-60" viewBox="0 0 24 24">314          <path fill="#9E9E9E" d="M9 6l6 6-6 6-1.4-1.4L12.2 12 7.6 7.4 9 6z"/>315        </svg>316      </div>317    </div>318  </div>319 320  <!-- Featured Trips -->321  <div class="featured">322    <h2>Featured Trips</h2>323    <div class="cards">324      <div class="card">[IMG: Paris Eiffel Tower]</div>325      <div class="card">[IMG: European Palace City]</div>326    </div>327  </div>328 329  <!-- Bottom Navigation -->330  <div class="bottom-nav">331    <div class="nav-item active">332      <svg viewBox="0 0 24 24" width="72" height="72">333        <path fill="#D65793" d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zM10 15a5 5 0 110-10 5 5 0 010 10z"/>334      </svg>335      <div>Search</div>336    </div>337    <div class="nav-item">338      <svg viewBox="0 0 24 24" width="72" height="72">339        <path fill="#6B6B6B" d="M4 10h16v8H4v-8zm1-6h14v4H5V4zm-2 9h1v6H3v-6zm17 0h1v6h-1v-6z"/>340      </svg>341      <div>Hotels</div>342    </div>343    <div class="nav-item">344      <svg viewBox="0 0 24 24" width="72" height="72">345        <path fill="#6B6B6B" d="M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z"/>346      </svg>347      <div>Profile</div>348    </div>349  </div>350 351  <!-- Gesture bar -->352  <div class="gesture"></div>353</div>354</body>355</html>