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>Greyhound Booking UI Mock</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    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #f5f5f5;15    border-radius: 0;16  }17 18  /* Header */19  .app-header {20    position: relative;21    width: 100%;22    height: 220px;23    background: #0B5662; /* deep teal */24    color: #fff;25    padding: 32px 36px 24px 36px;26    box-sizing: border-box;27  }28  .status-row {29    height: 42px;30    margin-bottom: 22px;31    opacity: 0.9;32    display: flex;33    justify-content: space-between;34    align-items: center;35    font-size: 28px;36    letter-spacing: 0.5px;37  }38  .logo-wrap {39    display: flex;40    align-items: center;41    gap: 18px;42  }43  .greyhound-logo {44    width: 330px;45    height: 64px;46    background: #E0E0E0;47    border: 1px solid #BDBDBD;48    display: flex;49    justify-content: center;50    align-items: center;51    color: #757575;52    border-radius: 6px;53    font-size: 26px;54  }55 56  /* Cards */57  .card {58    background: #fff;59    border-radius: 16px;60    box-shadow: 0 2px 4px rgba(0,0,0,0.08);61    margin: 18px 24px;62    padding: 22px;63    box-sizing: border-box;64  }65 66  /* Form */67  .form-card { position: relative; padding: 28px; }68  .field {69    margin-bottom: 22px;70  }71  .field .label {72    font-size: 26px;73    color: #7a7a7a;74    margin: 6px 8px 8px;75    letter-spacing: 0.4px;76  }77  .input-box {78    border: 2px solid #cfcfcf;79    border-radius: 14px;80    padding: 26px 28px;81    font-size: 44px;82    color: #333;83    background: #fff;84  }85  .row {86    display: flex;87    gap: 18px;88  }89  .row .col {90    flex: 1;91  }92 93  /* Swap circle between From/To */94  .swap-circle {95    position: absolute;96    right: 32px;97    top: 274px;98    width: 120px;99    height: 120px;100    border-radius: 60px;101    border: 3px solid #184e57;102    background: #fff;103    display: flex;104    justify-content: center;105    align-items: center;106    box-shadow: 0 2px 4px rgba(0,0,0,0.12);107  }108  .swap-circle svg { width: 64px; height: 64px; }109  .add-icon {110    position: absolute;111    right: 56px;112    top: 540px;113    width: 48px; height: 48px;114    color: #0B5662;115  }116 117  /* Search button */118  .search-btn {119    background: #B45A12;120    color: #fff;121    font-weight: 700;122    letter-spacing: 2px;123    text-align: center;124    padding: 32px 20px;125    border-radius: 12px;126    margin: 18px 8px 8px;127    box-shadow: 0 4px 6px rgba(0,0,0,0.15);128    font-size: 36px;129  }130 131  /* What's New card */132  .whats-new .kicker {133    color: #7a7a7a;134    font-size: 26px;135    letter-spacing: 2px;136    text-transform: uppercase;137    margin-bottom: 10px;138  }139  .whats-new h1 {140    font-size: 60px;141    line-height: 1.15;142    color: #222;143    margin: 0 0 20px;144    font-weight: 700;145  }146  .hero-img {147    width: 100%;148    height: 540px;149    background: #E0E0E0;150    border: 1px solid #BDBDBD;151    color: #757575;152    display: flex;153    justify-content: center;154    align-items: center;155    border-radius: 10px;156    margin: 10px 0 20px;157    font-size: 32px;158  }159  .whats-new .desc {160    font-size: 36px;161    color: #4c4c4c;162    line-height: 1.4;163    margin: 8px 0 18px;164  }165  .whats-new .link {166    color: #0B5662;167    font-size: 36px;168    font-weight: 600;169    text-decoration: underline;170  }171 172  /* Bottom navigation */173  .bottom-bar {174    position: absolute;175    left: 0; right: 0; bottom: 0;176    height: 170px;177    background: #ffffff;178    box-shadow: 0 -3px 6px rgba(0,0,0,0.08);179    display: flex;180    justify-content: space-around;181    align-items: center;182    padding-bottom: 8px;183  }184  .nav-item {185    display: flex;186    flex-direction: column;187    align-items: center;188    gap: 12px;189    color: #777;190    font-size: 28px;191  }192  .nav-item.active { color: #0B5662; font-weight: 700; }193  .nav-item svg { width: 56px; height: 56px; }194  .pill {195    width: 96px; height: 96px;196    background: rgba(11,86,98,0.12);197    border-radius: 48px;198    display: flex;199    justify-content: center;200    align-items: center;201  }202</style>203</head>204<body>205<div id="render-target">206 207  <!-- Header -->208  <div class="app-header">209    <div class="status-row">210      <div>10:16</div>211      <div>• • •</div>212    </div>213    <div class="logo-wrap">214      <div class="greyhound-logo">[IMG: Greyhound logo]</div>215    </div>216  </div>217 218  <!-- Booking form card -->219  <div class="card form-card">220    <div class="field">221      <div class="label">From</div>222      <div class="input-box">Hamilton, ON</div>223    </div>224 225    <div class="field">226      <div class="label">To</div>227      <div class="input-box">Albenga</div>228    </div>229 230    <div class="swap-circle" aria-label="Swap From/To">231      <svg viewBox="0 0 24 24">232        <path d="M7 15l-3-3 3-3" fill="none" stroke="#0B5662" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>233        <path d="M10 12H4" fill="none" stroke="#0B5662" stroke-width="2" stroke-linecap="round"></path>234        <path d="M17 9l3 3-3 3" fill="none" stroke="#0B5662" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>235        <path d="M14 12h6" fill="none" stroke="#0B5662" stroke-width="2" stroke-linecap="round"></path>236      </svg>237    </div>238 239    <div class="row">240      <div class="field col">241        <div class="label">Departing</div>242        <div class="input-box">Oct 25, 2023</div>243      </div>244      <div class="field col" style="position: relative;">245        <div class="label">Return</div>246        <div class="input-box">Tap to add</div>247        <div class="add-icon" aria-hidden="true">248          <svg viewBox="0 0 24 24">249            <path d="M12 5v14M5 12h14" stroke="#0B5662" stroke-width="3" stroke-linecap="round"></path>250          </svg>251        </div>252      </div>253    </div>254 255    <div class="field">256      <div class="label">Passengers/Bikes</div>257      <div class="input-box">1 adult</div>258    </div>259 260    <div class="search-btn">SEARCH</div>261  </div>262 263  <!-- What's New card -->264  <div class="card whats-new" style="margin-top: 12px;">265    <div class="kicker">WHAT'S NEW?</div>266    <h1>Greyhound and Flix join forces!</h1>267    <div class="hero-img">[IMG: Greyhound and Flix buses at sunset]</div>268    <div class="desc">Our network has expanded! See how this benefits you.</div>269    <div class="link">FIND OUT MORE</div>270  </div>271 272  <!-- Bottom navigation bar -->273  <div class="bottom-bar">274    <div class="nav-item active">275      <div class="pill">276        <svg viewBox="0 0 24 24">277          <circle cx="11" cy="11" r="8" fill="none" stroke="#0B5662" stroke-width="2"></circle>278          <path d="M21 21l-4.3-4.3" stroke="#0B5662" stroke-width="2" stroke-linecap="round"></path>279        </svg>280      </div>281      <div>Booking</div>282    </div>283    <div class="nav-item">284      <svg viewBox="0 0 24 24">285        <path d="M4 7h16v10H4z" fill="none" stroke="#777" stroke-width="2"></path>286        <path d="M7 7v-2h10v2" fill="none" stroke="#777" stroke-width="2"></path>287        <circle cx="8" cy="12" r="1.5" fill="#777"></circle>288        <circle cx="16" cy="12" r="1.5" fill="#777"></circle>289      </svg>290      <div>Tickets</div>291    </div>292    <div class="nav-item">293      <svg viewBox="0 0 24 24">294        <path d="M12 3C8.7 3 6 5.7 6 9c0 5.3 6 12 6 12s6-6.7 6-12c0-3.3-2.7-6-6-6z" fill="none" stroke="#777" stroke-width="2"></path>295        <circle cx="12" cy="9" r="2.5" fill="#777"></circle>296      </svg>297      <div>Stops</div>298    </div>299    <div class="nav-item">300      <svg viewBox="0 0 24 24">301        <circle cx="12" cy="12" r="9" fill="none" stroke="#777" stroke-width="2"></circle>302        <path d="M12 8v8M12 6h0" stroke="#777" stroke-width="2" stroke-linecap="round"></path>303      </svg>304      <div>More</div>305    </div>306  </div>307 308</div>309</body>310</html>