GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Travel App UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #ffffff;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15    color: #333;16  }17 18  /* Top App Bar */19  .appbar {20    position: relative;21    height: 260px;22    background: #0A8FD8;23  }24  .status {25    height: 64px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 32px;30    color: #ffffff;31    font-weight: 600;32    font-size: 30px;33  }34  .status-right {35    display: flex;36    gap: 26px;37    align-items: center;38  }39  .status svg { fill: #ffffff; }40 41  .search-row {42    position: absolute;43    bottom: 22px;44    left: 32px;45    right: 32px;46    display: flex;47    align-items: center;48  }49  .search {50    flex: 1;51    height: 110px;52    background: #ffffff;53    border-radius: 56px;54    box-shadow: 0 8px 18px rgba(0,0,0,0.18);55    display: flex;56    align-items: center;57    padding: 0 38px;58    font-size: 34px;59    color: #8a8a8a;60  }61  .search svg {62    width: 42px; height: 42px; margin-right: 20px; fill: #8a8a8a;63  }64  .actions {65    margin-left: 18px;66    display: flex;67    gap: 22px;68  }69  .action-icon {70    width: 94px; height: 94px;71    border-radius: 47px;72    background: rgba(255,255,255,0.15);73    border: 2px solid rgba(255,255,255,0.55);74    display: flex; align-items: center; justify-content: center;75  }76  .action-icon svg { width: 46px; height: 46px; fill: #ffffff; }77 78  /* Hero image strip */79  .hero-strip {80    display: flex;81    gap: 26px;82    padding: 24px 32px 0;83  }84  .hero-card {85    width: 506px; height: 312px;86    background: #E0E0E0;87    border: 1px solid #BDBDBD;88    border-radius: 24px;89    color: #757575;90    display: flex;91    justify-content: center;92    align-items: center;93    box-shadow: 0 6px 12px rgba(0,0,0,0.08);94    font-size: 30px;95    text-align: center;96  }97 98  /* Sections */99  .section {100    padding: 36px 32px 0;101  }102  .section h2 {103    font-size: 56px;104    margin: 0 0 8px;105    color: #222;106    letter-spacing: 0.2px;107  }108  .section .sub {109    font-size: 32px;110    color: #8a8a8a;111  }112 113  .card-row {114    display: flex;115    gap: 26px;116    padding: 22px 32px 0;117  }118  .tip-card {119    width: 324px; height: 388px;120    background: #E0E0E0;121    border: 1px solid #BDBDBD;122    border-radius: 24px;123    color: #757575;124    display: flex;125    justify-content: center;126    align-items: center;127    text-align: center;128    box-shadow: 0 6px 12px rgba(0,0,0,0.08);129    font-size: 28px;130    padding: 16px;131  }132 133  /* Best Bites banner */134  .banner {135    width: 916px; height: 460px;136    margin: 24px auto 0;137    background: #E0E0E0;138    border: 1px solid #BDBDBD;139    border-radius: 26px;140    color: #757575;141    display: flex;142    align-items: center;143    justify-content: center;144    font-size: 32px;145    box-shadow: 0 6px 12px rgba(0,0,0,0.08);146  }147  .desc {148    width: 916px;149    margin: 20px auto 0;150    font-size: 32px;151    color: #666;152    line-height: 1.4;153  }154  .cta {155    width: 220px; height: 86px;156    margin: 22px auto 0;157    background: #1089E3;158    color: #ffffff;159    border-radius: 44px;160    display: flex; align-items: center; justify-content: center;161    font-weight: 700;162    font-size: 32px;163    gap: 16px;164    box-shadow: 0 6px 12px rgba(16,137,227,0.35);165  }166  .cta svg { width: 30px; height: 30px; fill: #ffffff; }167 168  /* Bottom navigation */169  .bottom-nav {170    position: absolute;171    left: 0; right: 0; bottom: 0;172    height: 180px;173    background: #ffffff;174    border-top: 1px solid #e6e6e6;175    display: flex;176    justify-content: space-around;177    align-items: center;178  }179  .nav-item {180    width: 160px;181    height: 140px;182    display: flex;183    flex-direction: column;184    align-items: center;185    justify-content: center;186    color: #7a7a7a;187    font-size: 28px;188    gap: 12px;189  }190  .nav-item svg { width: 44px; height: 44px; fill: #7a7a7a; }191  .nav-item.active { color: #1295d8; font-weight: 700; }192  .nav-item.active svg { fill: #1295d8; }193 194  /* Utility image placeholder style */195  .img-label { padding: 0 20px; }196 197</style>198</head>199<body>200<div id="render-target">201 202  <!-- Top Bar -->203  <div class="appbar">204    <div class="status">205      <div>1:32</div>206      <div class="status-right">207        <!-- Network bars -->208        <svg viewBox="0 0 24 24" width="34" height="34">209          <path d="M3 18h3v3H3v-3zm5-4h3v7H8v-7zm5-4h3v11h-3V10zm5-4h3v15h-3V6z"></path>210        </svg>211        <!-- Wifi -->212        <svg viewBox="0 0 24 24" width="34" height="34">213          <path d="M2 8c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 8zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4l2 2 2-2c-2-2-4-2-6 0z"></path>214        </svg>215        <!-- Battery -->216        <svg viewBox="0 0 24 24" width="34" height="34">217          <path d="M20 7h2v10h-2V7zM3 7h16v10H3V7zm2 2v6h12V9H5z"></path>218        </svg>219      </div>220    </div>221 222    <div class="search-row">223      <div class="search">224        <svg viewBox="0 0 24 24">225          <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"></path>226        </svg>227        <div>Search for items, destinations...</div>228      </div>229      <div class="actions">230        <div class="action-icon">231          <!-- Bell -->232          <svg viewBox="0 0 24 24">233            <path d="M12 2a6 6 0 00-6 6v4l-2 2v2h16v-2l-2-2V8a6 6 0 00-6-6zm0 20a3 3 0 003-3H9a3 3 0 003 3z"></path>234          </svg>235        </div>236        <div class="action-icon">237          <!-- Chat -->238          <svg viewBox="0 0 24 24">239            <path d="M4 4h16v12H7l-3 3V4z"></path>240          </svg>241        </div>242      </div>243    </div>244  </div>245 246  <!-- Hero images row -->247  <div class="hero-strip">248    <div class="hero-card">249      <div class="img-label">[IMG: Boats on turquoise water]</div>250    </div>251    <div class="hero-card">252      <div class="img-label">[IMG: Palm trees against blue sky]</div>253    </div>254  </div>255 256  <!-- Travel Tips section -->257  <div class="section">258    <h2>Travel Tips</h2>259    <div class="sub">Tried-and-true tips to make you a savvy traveler</div>260  </div>261  <div class="card-row">262    <div class="tip-card">263      [IMG: Traveling with Toddlers – 6 Survival Tips]264    </div>265    <div class="tip-card">266      [IMG: Divide & Rule – Family Travel Tip]267    </div>268    <div class="tip-card">269      [IMG: Family Travel Tip – Plan & Play]270    </div>271  </div>272 273  <!-- Best Bites section -->274  <div class="section" style="padding-top: 42px;">275    <h2>Best Bites</h2>276    <div class="sub">For the best eats money can buy</div>277  </div>278  <div class="banner">[IMG: Food feature – Hong Kong & Macau]</div>279  <div class="desc">Rave about how affordable it is to get a 3 Michelin Star experience in two cities.</div>280  <div class="cta">281    <svg viewBox="0 0 24 24">282      <path d="M12 5v10l-4-4H6l6 6 6-6h-2l-4 4V5z"></path>283    </svg>284    <span>More</span>285  </div>286 287  <!-- Bottom navigation -->288  <div class="bottom-nav">289    <div class="nav-item active">290      <svg viewBox="0 0 24 24">291        <path d="M12 3l9 8h-3v9H6v-9H3l9-8z"></path>292      </svg>293      <div>Home</div>294    </div>295    <div class="nav-item">296      <svg viewBox="0 0 24 24">297        <path d="M12 20a8 8 0 100-16 8 8 0 000 16zm-1-5l5-3-5-3v6z"></path>298      </svg>299      <div>Explore</div>300    </div>301    <div class="nav-item">302      <svg viewBox="0 0 24 24">303        <path d="M4 4h16v16H4V4zm3 3v10h10V7H7zm2 2h6v6H9V9z"></path>304      </svg>305      <div>Bookings</div>306    </div>307    <div class="nav-item">308      <svg viewBox="0 0 24 24">309        <path d="M6 4h12v18l-6-3-6 3V4z"></path>310      </svg>311      <div>Saved</div>312    </div>313    <div class="nav-item">314      <svg viewBox="0 0 24 24">315        <path d="M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-5 0-8 3-8 6h16c0-3-3-6-8-6z"></path>316      </svg>317      <div>My Account</div>318    </div>319  </div>320 321</div>322</body>323</html>