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 App UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top App Bar */18  .appbar {19    background: #1E88E5;20    height: 320px;21    padding: 40px 40px 0 40px;22    box-sizing: border-box;23    color: #fff;24  }25  .search-row {26    display: flex;27    align-items: center;28    gap: 24px;29    margin-top: 24px;30  }31  .search-box {32    flex: 1;33    height: 110px;34    background: #ffffff;35    border-radius: 56px;36    box-shadow: 0 6px 16px rgba(0,0,0,0.25);37    display: flex;38    align-items: center;39    padding: 0 32px;40    box-sizing: border-box;41  }42  .search-box svg { width: 46px; height: 46px; stroke: #707070; }43  .search-placeholder {44    color: #707070;45    font-size: 34px;46    margin-left: 20px;47  }48  .icon-btn {49    width: 100px;50    height: 100px;51    border-radius: 50%;52    background: rgba(255,255,255,0.95);53    border: none;54    box-shadow: 0 6px 14px rgba(0,0,0,0.18);55    display: flex;56    align-items: center;57    justify-content: center;58    padding: 0;59  }60  .icon-btn svg { width: 44px; height: 44px; stroke: #1E88E5; fill: none; }61 62  /* Hero image cards under app bar */63  .hero-cards {64    display: flex;65    gap: 24px;66    padding: 0 32px;67    margin-top: -24px; /* let cards tuck under the floating search bar */68    box-sizing: border-box;69  }70  .hero-card {71    width: 508px;72    height: 340px;73    background: #E0E0E0;74    border: 1px solid #BDBDBD;75    border-radius: 22px;76    box-shadow: 0 4px 10px rgba(0,0,0,0.12);77    display: flex;78    justify-content: center;79    align-items: center;80    color: #757575;81    font-size: 28px;82  }83 84  /* Sections */85  .section {86    padding: 36px 32px;87    box-sizing: border-box;88  }89  .section h2 {90    font-size: 54px;91    margin: 24px 0 8px 4px;92    color: #333;93  }94  .section .sub {95    font-size: 34px;96    color: #8a8a8a;97    margin: 0 0 24px 4px;98  }99 100  .card-row {101    display: flex;102    gap: 28px;103    margin-top: 10px;104  }105  .tip-card {106    width: 492px;107    height: 390px;108    background: #E0E0E0;109    border: 1px solid #BDBDBD;110    border-radius: 22px;111    box-shadow: 0 4px 10px rgba(0,0,0,0.12);112    display: flex;113    align-items: center;114    justify-content: center;115    color: #757575;116    font-size: 28px;117    text-align: center;118  }119 120  .featured-card {121    width: 1000px;122    height: 420px;123    background: #E0E0E0;124    border: 1px solid #BDBDBD;125    border-radius: 22px;126    box-shadow: 0 4px 10px rgba(0,0,0,0.12);127    display: flex;128    align-items: center;129    justify-content: center;130    color: #757575;131    font-size: 28px;132    margin: 16px auto 18px auto;133  }134  .desc {135    font-size: 32px;136    color: #707070;137    padding: 0 40px;138    box-sizing: border-box;139    line-height: 1.35;140  }141 142  .more-btn {143    width: 260px;144    height: 104px;145    background: #1976D2;146    color: #fff;147    border-radius: 52px;148    display: flex;149    align-items: center;150    justify-content: center;151    gap: 18px;152    margin: 26px auto 0 auto;153    box-shadow: 0 6px 16px rgba(0,0,0,0.25);154    font-size: 36px;155    font-weight: 600;156  }157  .more-btn svg { width: 40px; height: 40px; fill: none; stroke: #ffffff; }158 159  /* Bottom Navigation */160  .tabbar {161    position: absolute;162    left: 0; right: 0; bottom: 0;163    height: 170px;164    background: #F7F7F7;165    border-top: 2px solid #E0E0E0;166    display: flex;167    align-items: center;168    justify-content: space-around;169    padding-bottom: 8px;170    box-sizing: border-box;171  }172  .tab-item {173    width: 180px;174    text-align: center;175    color: #7b7b7b;176    font-size: 28px;177  }178  .tab-item svg { width: 54px; height: 54px; stroke: #7b7b7b; fill: none; }179  .tab-item.active { color: #1E88E5; }180  .tab-item.active svg { stroke: #1E88E5; }181 182  /* Safe area spacer so content doesn't overlap tabbar visually */183  .spacer-bottom { height: 190px; }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- App Bar with Search -->190  <div class="appbar">191    <div class="search-row">192      <div class="search-box">193        <!-- Search icon -->194        <svg viewBox="0 0 24 24">195          <circle cx="10" cy="10" r="6" stroke-width="2"></circle>196          <path d="M15 15 L22 22" stroke-width="2"></path>197        </svg>198        <div class="search-placeholder">Search for items, destinations...</div>199      </div>200      <!-- Bell icon -->201      <button class="icon-btn" aria-label="Notifications">202        <svg viewBox="0 0 24 24">203          <path d="M12 3 C8.5 3 7 6 7 8 v4 l-2 3 h14 l-2-3 V8 C17 6 15.5 3 12 3" stroke-width="2"></path>204          <path d="M10 18 C10.5 19 11.5 19 12 19 C12.5 19 13.5 19 14 18" stroke-width="2"></path>205        </svg>206      </button>207      <!-- Chat icon -->208      <button class="icon-btn" aria-label="Messages">209        <svg viewBox="0 0 24 24">210          <path d="M4 4 h16 v12 H8 l-4 4 V4" stroke-width="2"></path>211        </svg>212      </button>213    </div>214  </div>215 216  <!-- Top hero cards -->217  <div class="hero-cards">218    <div class="hero-card">[IMG: Aerial beach with boats]</div>219    <div class="hero-card">[IMG: Palm trees against blue sky]</div>220  </div>221 222  <!-- Travel Tips section -->223  <section class="section">224    <h2>Travel Tips</h2>225    <div class="sub">Tried-and-true tips to make you a savvy traveler</div>226    <div class="card-row">227      <div class="tip-card">[IMG: Tip Card - Pack Extra, Just In Case]</div>228      <div class="tip-card">[IMG: Tip Card - Bring Snacks]</div>229    </div>230  </section>231 232  <!-- Best Bites section -->233  <section class="section">234    <h2>Best Bites</h2>235    <div class="sub">For the best eats money can buy</div>236    <div class="card-row" style="justify-content: center;">237      <div class="featured-card">[IMG: The Michelin guide - Hong Kong & Macau dish]</div>238    </div>239    <div class="desc">Rave about how affordable it is to get a 3 Michelin Star experience in two cities</div>240    <div class="more-btn">241      <svg viewBox="0 0 24 24">242        <path d="M12 5 v14 M5 12 l7 7 7-7" stroke-width="2"></path>243      </svg>244      <span>More</span>245    </div>246  </section>247 248  <div class="spacer-bottom"></div>249 250  <!-- Bottom Navigation -->251  <div class="tabbar">252    <div class="tab-item active">253      <svg viewBox="0 0 24 24">254        <path d="M3 11 L12 3 21 11 V21 H14 V15 H10 V21 H3 Z" stroke-width="2"></path>255      </svg>256      <div>Home</div>257    </div>258    <div class="tab-item">259      <svg viewBox="0 0 24 24">260        <circle cx="12" cy="12" r="7" stroke-width="2"></circle>261        <path d="M12 9 L14.5 12 L9.5 12 Z" stroke-width="2"></path>262      </svg>263      <div>Explore</div>264    </div>265    <div class="tab-item">266      <svg viewBox="0 0 24 24">267        <path d="M4 5 h16 v14 H4 Z" stroke-width="2"></path>268        <path d="M4 9 h16" stroke-width="2"></path>269        <path d="M8 3 v4 M16 3 v4" stroke-width="2"></path>270      </svg>271      <div>Bookings</div>272    </div>273    <div class="tab-item">274      <svg viewBox="0 0 24 24">275        <path d="M7 2 h10 v20 l-5-3 -5 3 Z" stroke-width="2"></path>276      </svg>277      <div>Saved</div>278    </div>279    <div class="tab-item">280      <svg viewBox="0 0 24 24">281        <circle cx="12" cy="8" r="4" stroke-width="2"></circle>282        <path d="M4 21 c2-5 14-5 16 0" stroke-width="2"></path>283      </svg>284      <div>My Account</div>285    </div>286  </div>287 288</div>289</body>290</html>