GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Travel UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#1f2a2e; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    height: 90px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color:#4b5560;24    font-size: 34px;25  }26  .status-right { display:flex; align-items:center; gap:22px; }27 28  /* Header */29  .main { padding: 0 56px; }30  .greeting {31    margin-top: 14px;32  }33  .greeting h1 {34    margin: 0;35    font-size: 72px;36    font-weight: 800;37    letter-spacing: -0.5px;38  }39  .greeting p {40    margin: 10px 0 0 0;41    font-size: 42px;42    color:#6b747b;43  }44 45  .top-right {46    position: absolute;47    top: 118px;48    right: 40px;49    display: flex;50    align-items: center;51    gap: 28px;52  }53  .bell-small svg { width: 48px; height: 48px; fill:#3d454b; }54  .avatar {55    width: 68px; height: 68px; border-radius: 50%;56    background: #fde9df; color:#c8683a;57    display:flex; align-items:center; justify-content:center;58    font-weight: 700;59  }60 61  /* Quick actions */62  .quick-actions {63    margin-top: 52px;64    display: flex;65    gap: 44px;66  }67  .qa {68    width: 180px; height: 180px; border-radius: 34px;69    background:#353f45; display:flex; align-items:center; justify-content:center;70  }71  .qa.orange { background:#ff6a00; }72  .qa svg { width: 92px; height: 92px; fill:#ffffff; }73 74  /* Search pill */75  .search-pill {76    margin-top: 54px;77    height: 120px;78    border-radius: 28px;79    background: #edf2f3;80    display: flex;81    align-items: center;82    padding: 0 34px;83    color:#4a5157;84    font-size: 40px;85  }86  .search-pill svg { width: 58px; height: 58px; fill:#667078; margin-right: 20px; }87 88  /* Sections */89  .section {90    margin-top: 68px;91  }92  .section .title-row {93    display: flex;94    align-items: center;95    justify-content: space-between;96  }97  .section h2 {98    margin: 0;99    font-size: 54px;100    font-weight: 800;101    color:#20262a;102  }103  .see-all {104    font-size: 38px;105    color:#1e88e5;106    font-weight: 600;107  }108 109  /* Recent list */110  .list { margin-top: 26px; }111  .list-item {112    display: flex;113    align-items: center;114    padding: 24px 0;115  }116  .thumb {117    width: 120px; height: 120px; border-radius: 26px;118    background: #E0E0E0; border: 1px solid #BDBDBD;119    display:flex; align-items:center; justify-content:center;120    color:#757575; font-size: 26px; text-align:center; padding: 8px;121  }122  .item-text { flex: 1; margin-left: 30px; }123  .item-title {124    font-size: 42px; font-weight: 700; color:#253036; line-height: 1.2;125    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;126    max-width: 760px;127  }128  .item-sub { font-size: 34px; color:#6f7c82; margin-top: 6px; }129  .bell {130    width: 56px; height: 56px; display:flex; align-items:center; justify-content:center;131  }132  .bell svg { width: 48px; height: 48px; fill:#5c676d; }133 134  /* Spacer before stays */135  .big-spacer { height: 120px; }136 137  /* Stays */138  .subtitle { font-size: 38px; color:#6f7b82; margin: 8px 0 0 0; }139  .cards {140    margin-top: 26px;141    display: flex;142    gap: 34px;143    overflow: hidden;144  }145  .card {146    width: 880px; height: 560px;147    border-radius: 34px;148    background:#E0E0E0; border:1px solid #BDBDBD;149    display:flex; align-items:center; justify-content:center;150    color:#757575; font-size: 38px; text-align:center; padding: 12px;151  }152 153  /* Bottom navigation */154  .bottom-nav {155    position: absolute;156    left: 0; right: 0;157    bottom: 110px;158    height: 180px;159    background: #ffffff;160    border-top: 1px solid #e6e6e6;161    display: flex;162    justify-content: space-around;163    align-items: center;164  }165  .nav-item {166    display:flex; flex-direction:column; align-items:center;167    color:#7a858c; font-size: 32px; gap: 12px;168  }169  .nav-item.active { color:#ff6a00; }170  .nav-item svg { width: 68px; height: 68px; fill: currentColor; }171 172  /* Home indicator */173  .home-indicator {174    position: absolute;175    left: 50%; transform: translateX(-50%);176    bottom: 26px;177    width: 320px; height: 12px;178    background: #000; opacity: .75; border-radius: 8px;179  }180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Fake status bar -->186  <div class="status-bar">187    <div>5:56</div>188    <div class="status-right">189      <span>•</span>190      <span>◉</span>191      <span>⌁</span>192      <span>▮</span>193    </div>194  </div>195 196  <div class="main">197    <div class="greeting">198      <h1>Hey, Cole</h1>199      <p>Where to next?</p>200    </div>201  </div>202 203  <div class="top-right">204    <div class="bell-small" aria-label="Notifications">205      <svg viewBox="0 0 24 24">206        <path d="M12 22a2.3 2.3 0 0 0 2-2h-4a2.3 2.3 0 0 0 2 2zM20 17H4c2-2 2-4 2-7a6 6 0 1 1 12 0c0 3 0 5 2 7z"/>207      </svg>208    </div>209    <div class="avatar">C</div>210  </div>211 212  <div class="main">213    <!-- Quick actions -->214    <div class="quick-actions">215      <div class="qa" title="Flights">216        <svg viewBox="0 0 24 24">217          <path d="M2 13l8 1 3 7 2-1-2-7 7 1 2-2-8-3-5-7-2 1 3 7-6 3z"/>218        </svg>219      </div>220      <div class="qa orange" title="Stays">221        <svg viewBox="0 0 24 24">222          <rect x="2" y="9" width="20" height="6" rx="1"></rect>223          <rect x="4" y="6" width="8" height="3"></rect>224          <rect x="14" y="6" width="6" height="3"></rect>225        </svg>226      </div>227      <div class="qa" title="Cars">228        <svg viewBox="0 0 24 24">229          <path d="M3 14l2-5h14l2 5v4h-2a2 2 0 1 1-4 0H9a2 2 0 1 1-4 0H3v-4zM7 9h10l1 3H6l1-3z"/>230        </svg>231      </div>232      <div class="qa" title="Beach">233        <svg viewBox="0 0 24 24">234          <path d="M12 2c5 0 8 4 9 8H3C4 6 7 2 12 2zM11 10v8h2v-8m-8 8h14v2H3z"/>235        </svg>236      </div>237    </div>238 239    <!-- Search field -->240    <div class="search-pill">241      <svg viewBox="0 0 24 24">242        <circle cx="11" cy="11" r="6"></circle>243        <line x1="16" y1="16" x2="22" y2="22" stroke="currentColor" stroke-width="2" />244      </svg>245      <span>Find a place to stay</span>246    </div>247 248    <!-- Recent searches -->249    <div class="section">250      <div class="title-row">251        <h2>Your recent searches</h2>252        <div class="see-all">See all</div>253      </div>254 255      <div class="list">256        <div class="list-item">257          <div class="thumb">[IMG: Honolulu Beach]</div>258          <div class="item-text">259            <div class="item-title">Honolulu (HNL), O'ahu, HI</div>260            <div class="item-sub">Jan 29 - Feb 5</div>261          </div>262          <div class="bell">263            <svg viewBox="0 0 24 24">264              <path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zM20 17H4c2-2 2-4 2-7a6 6 0 1 1 12 0c0 3 0 5 2 7z"/>265            </svg>266          </div>267        </div>268 269        <div class="list-item">270          <div class="thumb">[IMG: Hotel Lobby]</div>271          <div class="item-text">272            <div class="item-title">Courtyard by Marriott Waikiki Beach</div>273            <div class="item-sub">Jan 29 - Feb 5</div>274          </div>275          <div class="bell">276            <svg viewBox="0 0 24 24">277              <path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zM20 17H4c2-2 2-4 2-7a6 6 0 1 1 12 0c0 3 0 5 2 7z"/>278            </svg>279          </div>280        </div>281      </div>282    </div>283 284    <div class="big-spacer"></div>285 286    <!-- Stays near section -->287    <div class="section">288      <div class="title-row">289        <div>290          <h2>Stays near Honolulu</h2>291          <p class="subtitle">Mon, Jan 29 - Mon, Feb 5</p>292        </div>293        <div class="see-all">See all</div>294      </div>295 296      <div class="cards">297        <div class="card">[IMG: Modern suite with sofa and teal chair]</div>298        <div class="card">[IMG: Ocean-view room with balcony]</div>299      </div>300    </div>301  </div>302 303  <!-- Bottom navigation -->304  <div class="bottom-nav">305    <div class="nav-item active">306      <svg viewBox="0 0 24 24">307        <circle cx="11" cy="11" r="6"></circle>308        <line x1="16" y1="16" x2="22" y2="22" stroke="currentColor" stroke-width="2"/>309      </svg>310      <div>Search</div>311    </div>312    <div class="nav-item">313      <svg viewBox="0 0 24 24">314        <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/>315        <path d="M3 12h18M12 3v18" stroke="currentColor" stroke-width="2"/>316      </svg>317      <div>Explore</div>318    </div>319    <div class="nav-item">320      <svg viewBox="0 0 24 24">321        <path d="M12 21s-6-3.5-8-7.5C2 10 4.5 7 7.5 7c1.9 0 3.2 1 4.5 2.5C13.3 8 14.6 7 16.5 7 19.5 7 22 10 20 13.5 18 17.5 12 21 12 21z"/>322      </svg>323      <div>Trips</div>324    </div>325    <div class="nav-item">326      <svg viewBox="0 0 24 24">327        <circle cx="12" cy="8" r="4"></circle>328        <path d="M4 20c2-4 14-4 16 0" />329      </svg>330      <div>Profile</div>331    </div>332  </div>333 334  <div class="home-indicator"></div>335</div>336</body>337</html>