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, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0F1424;15    border-radius: 48px;16    box-shadow: 0 30px 80px rgba(0,0,0,0.45);17    color: #DDE3EF;18  }19  .status-bar {20    position: absolute;21    top: 24px;22    left: 36px;23    right: 36px;24    height: 72px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #E7ECF7;29    font-weight: 600;30    letter-spacing: 0.2px;31  }32  .status-left { display: flex; align-items: center; gap: 18px; font-size: 34px; }33  .status-right { display: flex; align-items: center; gap: 28px; }34  .chip {35    background: rgba(255,255,255,0.12);36    color: #FFFFFF;37    padding: 8px 14px;38    border-radius: 20px;39    font-size: 24px;40    line-height: 1;41  }42 43  .content { position: absolute; top: 190px; left: 48px; right: 48px; }44  h1 { margin: 0 0 14px 0; font-size: 74px; line-height: 1.05; color: #FFFFFF; font-weight: 800; }45  .subhead { font-size: 34px; color: #AAB4C8; margin-bottom: 36px; }46 47  .card {48    background: #121933;49    border: 2px solid #2A314A;50    border-radius: 36px;51    overflow: hidden;52    position: relative;53    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);54  }55 56  .image-placeholder {57    width: 100%;58    height: 420px;59    background: #E0E0E0;60    border-top: 1px solid #BDBDBD;61    border-bottom: 1px solid #BDBDBD;62    display: flex;63    align-items: center;64    justify-content: center;65    color: #757575;66    font-weight: 600;67    letter-spacing: 0.2px;68  }69 70  .overlay-text {71    position: absolute;72    left: 32px;73    bottom: 28px;74    color: #FFFFFF;75  }76  .overlay-text .title { font-size: 54px; font-weight: 800; margin-bottom: 8px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }77  .overlay-text .date { font-size: 32px; color: #DDE3EF; text-shadow: 0 2px 10px rgba(0,0,0,0.4); }78 79  .section-title { margin-top: 48px; font-size: 56px; font-weight: 800; color: #FFFFFF; }80 81  .guide-card { margin-top: 24px; }82  .guide-top {83    padding: 32px;84  }85  .tag {86    font-size: 26px;87    letter-spacing: 1.2px;88    color: #C8D1E6;89    font-weight: 700;90  }91  .guide-title { font-size: 54px; color: #FFFFFF; font-weight: 800; margin-top: 8px; }92  .guide-desc { font-size: 34px; color: #C7CDDB; margin-top: 8px; }93 94  .link-row {95    margin-top: 24px;96    color: #89A7FF;97    font-size: 34px;98    display: inline-flex;99    align-items: center;100    gap: 10px;101    font-weight: 600;102  }103 104  .discover-title { margin-top: 36px; font-size: 48px; font-weight: 800; color: #FFFFFF; }105 106  .chips-row {107    display: flex;108    gap: 26px;109    margin-top: 24px;110    padding-bottom: 160px;111  }112  .circle-chip {113    width: 150px;114    height: 150px;115    border-radius: 75px;116    border: 2px solid #2C3551;117    background: #0D152C;118    position: relative;119    display: flex;120    align-items: center;121    justify-content: center;122  }123  .circle-chip svg { width: 86px; height: 86px; }124  .circle-chip .label {125    position: absolute;126    bottom: -44px;127    width: 100%;128    text-align: center;129    font-size: 26px;130    color: #B7C0D8;131  }132 133  .fab {134    position: absolute;135    right: 56px;136    top: 1160px;137    width: 116px;138    height: 116px;139    border-radius: 58px;140    background: #263465;141    box-shadow: 0 10px 24px rgba(0,0,0,0.35);142    display: flex;143    align-items: center;144    justify-content: center;145  }146  .fab svg { width: 60px; height: 60px; }147 148  .bottom-nav {149    position: absolute;150    left: 0;151    right: 0;152    bottom: 80px;153    height: 190px;154    background: #121731;155    border-top: 1px solid #2A3252;156    display: flex;157    align-items: center;158    justify-content: space-around;159    padding: 18px 40px 0;160  }161  .nav-item {162    display: flex;163    flex-direction: column;164    align-items: center;165    gap: 14px;166    color: #BFC7DC;167    font-size: 28px;168  }169  .nav-item svg { width: 56px; height: 56px; }170  .nav-item.active { color: #6EA1FF; }171  .home-indicator {172    position: absolute;173    bottom: 22px;174    left: 50%;175    transform: translateX(-50%);176    width: 400px;177    height: 10px;178    background: #D8DAE2;179    opacity: 0.35;180    border-radius: 6px;181  }182</style>183</head>184<body>185<div id="render-target">186 187  <!-- Status Bar -->188  <div class="status-bar">189    <div class="status-left">190      <span style="font-weight:700;">11:06</span>191      <span class="chip">S</span>192      <span class="chip">G</span>193      <span class="chip">75°</span>194    </div>195    <div class="status-right">196      <!-- WiFi Icon -->197      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">198        <path d="M2 8c5-4 15-4 20 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>199        <path d="M5 11c4-3 10-3 14 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>200        <path d="M8 14c2-2 6-2 8 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>201        <circle cx="12" cy="18" r="1.6" fill="#FFFFFF"/>202      </svg>203      <!-- Battery Icon -->204      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">205        <rect x="2" y="6" width="18" height="12" rx="2" stroke="#FFFFFF" stroke-width="2"/>206        <rect x="21" y="9" width="2" height="6" rx="1" fill="#FFFFFF"/>207        <rect x="4" y="8" width="14" height="8" rx="1" fill="#FFFFFF"/>208      </svg>209    </div>210  </div>211 212  <!-- Main Content -->213  <div class="content">214    <h1>Your recent searches</h1>215    <div class="subhead">Destinations you previously searched</div>216 217    <!-- Recent Search Card -->218    <div class="card" style="border-radius: 34px;">219      <div class="image-placeholder">[IMG: London cityscape skyline]</div>220      <div class="overlay-text">221        <div class="title">London</div>222        <div class="date">Mon, Oct 30</div>223      </div>224    </div>225 226    <div class="section-title">More to explore in London</div>227 228    <!-- Travel Guide Card -->229    <div class="card guide-card">230      <div class="guide-top">231        <div class="tag">TRAVEL GUIDE</div>232        <div class="guide-title">London</div>233        <div class="guide-desc">Thames treasures, Royal landmarks, West End shows</div>234      </div>235      <div class="image-placeholder" style="height: 540px;">[IMG: London canal boats]</div>236    </div>237 238    <div class="link-row">239      See all travel guides240      <svg width="28" height="28" viewBox="0 0 24 24" fill="none">241        <path d="M8 5l8 7-8 7" stroke="#89A7FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>242      </svg>243    </div>244 245    <div class="discover-title">Discover your new favorite stay</div>246 247    <!-- Category Chips -->248    <div class="chips-row">249      <div class="circle-chip">250        <!-- Cabin / Home icon -->251        <svg viewBox="0 0 24 24" fill="none">252          <path d="M3 11l9-7 9 7" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>253          <rect x="6" y="11" width="12" height="9" rx="1.5" stroke="#FFFFFF" stroke-width="2"/>254          <path d="M10 15h4" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>255        </svg>256        <div class="label">Cabin</div>257      </div>258 259      <div class="circle-chip">260        <!-- Boat icon -->261        <svg viewBox="0 0 24 24" fill="none">262          <path d="M6 12h12l-2 5H8l-2-5z" stroke="#FFFFFF" stroke-width="2" />263          <path d="M12 4l3 6H9l3-6z" stroke="#FFFFFF" stroke-width="2" />264          <path d="M3 18c3 3 15 3 18 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>265        </svg>266        <div class="label">Boat</div>267      </div>268 269      <div class="circle-chip">270        <!-- Arch window icon -->271        <svg viewBox="0 0 24 24" fill="none">272          <path d="M6 20V11a6 6 0 0112 0v9" stroke="#FFFFFF" stroke-width="2"/>273          <path d="M12 11v9M6 15h12" stroke="#FFFFFF" stroke-width="2"/>274        </svg>275        <div class="label">Loft</div>276      </div>277 278      <div class="circle-chip">279        <!-- House roof icon -->280        <svg viewBox="0 0 24 24" fill="none">281          <path d="M3 12l9-6 9 6" stroke="#FFFFFF" stroke-width="2" />282          <path d="M7 12v7h10v-7" stroke="#FFFFFF" stroke-width="2"/>283        </svg>284        <div class="label">House</div>285      </div>286 287      <div class="circle-chip">288        <!-- Bridge / Hut icon -->289        <svg viewBox="0 0 24 24" fill="none">290          <path d="M4 13l8-5 8 5" stroke="#FFFFFF" stroke-width="2"/>291          <path d="M6 13v6h12v-6" stroke="#FFFFFF" stroke-width="2"/>292          <path d="M9 16h6" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>293        </svg>294        <div class="label">Lodge</div>295      </div>296    </div>297  </div>298 299  <!-- Floating chat button -->300  <div class="fab">301    <svg viewBox="0 0 24 24" fill="none">302      <path d="M4 5h16v12H9l-5 4V5z" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round"/>303      <path d="M8 10h8M8 13h6" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>304    </svg>305  </div>306 307  <!-- Bottom Navigation -->308  <div class="bottom-nav">309    <div class="nav-item active">310      <svg viewBox="0 0 24 24" fill="none">311        <path d="M3 11l9-7 9 7" stroke="#6EA1FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>312        <rect x="6" y="11" width="12" height="9" rx="1.5" stroke="#6EA1FF" stroke-width="2"/>313      </svg>314      Home315    </div>316    <div class="nav-item">317      <svg viewBox="0 0 24 24" fill="none">318        <circle cx="11" cy="11" r="6" stroke="#BFC7DC" stroke-width="2"/>319        <path d="M20 20l-4-4" stroke="#BFC7DC" stroke-width="2" stroke-linecap="round"/>320      </svg>321      Search322    </div>323    <div class="nav-item">324      <svg viewBox="0 0 24 24" fill="none">325        <rect x="5" y="7" width="14" height="12" rx="2" stroke="#BFC7DC" stroke-width="2"/>326        <path d="M8 7V5h8v2" stroke="#BFC7DC" stroke-width="2"/>327      </svg>328      Trips329    </div>330    <div class="nav-item">331      <svg viewBox="0 0 24 24" fill="none">332        <path d="M12 5a5 5 0 015 5v6H7v-6a5 5 0 015-5z" stroke="#BFC7DC" stroke-width="2"/>333        <circle cx="12" cy="18" r="1.4" fill="#BFC7DC"/>334      </svg>335      Notifications336    </div>337    <div class="nav-item">338      <svg viewBox="0 0 24 24" fill="none">339        <circle cx="12" cy="8" r="4" stroke="#BFC7DC" stroke-width="2"/>340        <path d="M4 21c1.5-4 6-6 8-6s6.5 2 8 6" stroke="#BFC7DC" stroke-width="2" stroke-linecap="round"/>341      </svg>342      Account343    </div>344  </div>345 346  <div class="home-indicator"></div>347</div>348</body>349</html>