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 {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #333;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #F4F5F6;21  }22 23  /* Top app bar */24  .app-bar {25    position: relative;26    width: 100%;27    height: 300px;28    background: #0A5D69;29    color: #fff;30  }31  .status-row {32    height: 96px;33    display: flex;34    align-items: center;35    padding: 0 36px;36    font-weight: 600;37    font-size: 36px;38    letter-spacing: 0.5px;39  }40  .status-row .spacer {41    flex: 1;42  }43  .status-icon {44    width: 42px;45    height: 42px;46    margin-left: 22px;47    border-radius: 50%;48    border: 2px solid rgba(255,255,255,0.8);49  }50  .brand-row {51    height: 204px;52    display: flex;53    align-items: center;54    padding: 0 36px;55  }56  .brand-placeholder {57    width: 420px;58    height: 120px;59    background: #E0E0E0;60    border: 1px solid #BDBDBD;61    display: flex;62    align-items: center;63    justify-content: center;64    color: #757575;65    border-radius: 6px;66  }67 68  /* Card common */69  .card {70    background: #fff;71    margin: 18px 24px;72    border-radius: 12px;73    box-shadow: 0 2px 0 rgba(0,0,0,0.06), 0 6px 12px rgba(0,0,0,0.08);74  }75 76  /* Search card & fields */77  .search-card {78    margin-top: 18px;79    padding: 28px;80    position: relative;81  }82  .field {83    position: relative;84    border: 2px solid #CFCFCF;85    border-radius: 16px;86    margin-bottom: 28px;87    padding: 42px 28px 28px 28px;88    background: #fff;89  }90  .label {91    position: absolute;92    top: -12px;93    left: 22px;94    display: flex;95    align-items: center;96    width: calc(100% - 44px);97  }98  .label span {99    font-size: 26px;100    color: #7A7A7A;101    background: #fff;102    padding-right: 10px;103  }104  .label .line {105    height: 2px;106    flex: 1;107    background: #CFCFCF;108    margin-left: 10px;109  }110  .value {111    font-size: 44px;112    color: #2E2E2E;113  }114 115  /* Row of two small fields */116  .row {117    display: flex;118    gap: 26px;119  }120  .small-field {121    flex: 1;122  }123 124  /* Swap circular button */125  .swap-btn {126    position: absolute;127    right: 46px;128    top: 256px; /* between From and To fields */129    width: 120px;130    height: 120px;131    border-radius: 60px;132    background: #fff;133    border: 3px solid #9FB7BC;134    box-shadow: 0 3px 8px rgba(0,0,0,0.12);135    display: flex;136    align-items: center;137    justify-content: center;138  }139  .swap-btn svg path {140    stroke: #0A5D69;141    stroke-width: 10;142    fill: none;143    stroke-linecap: round;144    stroke-linejoin: round;145  }146 147  /* Add/plus in Return field */148  .return-extra {149    position: absolute;150    right: 24px;151    top: 50%;152    transform: translateY(-50%);153  }154  .plus-icon {155    width: 54px;156    height: 54px;157  }158  .plus-icon path {159    stroke: #0A5D69;160    stroke-width: 10;161    fill: none;162    stroke-linecap: round;163  }164 165  /* Search button */166  .search-btn {167    margin-top: 10px;168    width: 100%;169    height: 120px;170    background: #B55A12;171    border-radius: 12px;172    color: #fff;173    font-weight: 800;174    font-size: 42px;175    letter-spacing: 3px;176    display: flex;177    align-items: center;178    justify-content: center;179    box-shadow: 0 6px 10px rgba(0,0,0,0.12);180  }181 182  /* What's new card */183  .news-card {184    padding: 30px;185  }186  .news-overline {187    font-size: 28px;188    letter-spacing: 1.5px;189    color: #7A7A7A;190    text-transform: uppercase;191    margin-bottom: 12px;192  }193  .news-title {194    font-size: 58px;195    font-weight: 700;196    color: #262626;197    margin-bottom: 24px;198    line-height: 1.2;199  }200  .news-image {201    width: 100%;202    height: 540px;203    background: #E0E0E0;204    border: 1px solid #BDBDBD;205    display: flex;206    align-items: center;207    justify-content: center;208    color: #757575;209    border-radius: 10px;210    margin-bottom: 26px;211  }212  .news-text {213    font-size: 36px;214    color: #5A5A5A;215    line-height: 1.4;216    margin-bottom: 18px;217  }218  .news-link {219    font-size: 36px;220    color: #0A5D69;221    font-weight: 700;222  }223 224  /* Bottom navigation */225  .bottom-nav {226    position: absolute;227    bottom: 0;228    left: 0;229    width: 100%;230    height: 190px;231    background: #FFFFFF;232    border-top: 2px solid #E5E5E5;233    display: flex;234    align-items: center;235    justify-content: space-around;236    padding-bottom: 10px;237  }238  .nav-item {239    width: 220px;240    display: flex;241    flex-direction: column;242    align-items: center;243    color: #8B8B8B;244    font-size: 30px;245  }246  .nav-item.active {247    color: #0A5D69;248  }249  .nav-icon {250    width: 90px;251    height: 90px;252    margin-bottom: 10px;253  }254  .nav-item.active .nav-icon {255    background: rgba(10,93,105,0.12);256    border-radius: 45px;257  }258  .nav-icon svg path, .nav-icon svg circle {259    stroke: #7F7F7F;260    stroke-width: 8;261    fill: none;262  }263  .nav-item.active .nav-icon svg path,264  .nav-item.active .nav-icon svg circle {265    stroke: #0A5D69;266  }267</style>268</head>269<body>270<div id="render-target">271  <div class="app-bar">272    <div class="status-row">273      <div>10:18</div>274      <div class="spacer"></div>275      <div class="status-icon"></div>276      <div class="status-icon"></div>277    </div>278    <div class="brand-row">279      <div class="brand-placeholder">[IMG: Greyhound logo]</div>280    </div>281  </div>282 283  <div class="card search-card">284    <div class="field">285      <div class="label"><span>From</span><div class="line"></div></div>286      <div class="value">Hamilton, ON</div>287    </div>288 289    <div class="field">290      <div class="label"><span>To</span><div class="line"></div></div>291      <div class="value">Richmond, VA</div>292    </div>293 294    <div class="row">295      <div class="field small-field">296        <div class="label"><span>Departing</span><div class="line"></div></div>297        <div class="value">Oct 25, 2023</div>298      </div>299      <div class="field small-field" style="position: relative;">300        <div class="label"><span>Return</span><div class="line"></div></div>301        <div class="value" style="color:#7A7A7A;">Tap to add</div>302        <div class="return-extra">303          <svg class="plus-icon" viewBox="0 0 100 100">304            <path d="M50 20 L50 80 M20 50 L80 50" />305          </svg>306        </div>307      </div>308    </div>309 310    <div class="field">311      <div class="label"><span>Passengers/Bikes</span><div class="line"></div></div>312      <div class="value">1 adult</div>313    </div>314 315    <div class="search-btn">SEARCH</div>316 317    <div class="swap-btn" title="Swap From/To">318      <svg width="90" height="90" viewBox="0 0 100 100">319        <!-- Up arrow -->320        <path d="M32 70 L32 30 M20 42 L32 30 L44 42" />321        <!-- Down arrow -->322        <path d="M68 30 L68 70 M56 58 L68 70 L80 58" />323      </svg>324    </div>325  </div>326 327  <div class="card news-card">328    <div class="news-overline">WHAT'S NEW?</div>329    <div class="news-title">Greyhound and Flix join forces!</div>330    <div class="news-image">[IMG: Buses - Greyhound and FlixBus]</div>331    <div class="news-text">Our network has expanded! See how this benefits you.</div>332    <div class="news-link">FIND OUT MORE</div>333  </div>334 335  <div class="bottom-nav">336    <div class="nav-item active">337      <div class="nav-icon">338        <svg viewBox="0 0 100 100">339          <circle cx="44" cy="44" r="22"></circle>340          <path d="M72 72 L90 90"></path>341        </svg>342      </div>343      <div>Booking</div>344    </div>345    <div class="nav-item">346      <div class="nav-icon">347        <svg viewBox="0 0 100 100">348          <path d="M20 30 L80 30 L80 70 L20 70 Z"></path>349          <path d="M35 30 L35 20 M65 30 L65 20"></path>350          <path d="M35 50 L65 50"></path>351        </svg>352      </div>353      <div>Tickets</div>354    </div>355    <div class="nav-item">356      <div class="nav-icon">357        <svg viewBox="0 0 100 100">358          <path d="M50 20 C65 20 78 33 78 48 C78 66 50 90 50 90 C50 90 22 66 22 48 C22 33 35 20 50 20 Z"></path>359          <circle cx="50" cy="48" r="10"></circle>360        </svg>361      </div>362      <div>Stops</div>363    </div>364    <div class="nav-item">365      <div class="nav-icon">366        <svg viewBox="0 0 100 100">367          <circle cx="50" cy="50" r="32"></circle>368          <path d="M50 30 L50 54"></path>369          <path d="M50 66 L50 70"></path>370        </svg>371      </div>372      <div>More</div>373    </div>374  </div>375</div>376</body>377</html>