GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Greyhound Booking UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #f3f3f3; border-radius: 0; box-shadow: none;11  }12 13  /* Top app bar */14  .top-bar {15    position: relative;16    width: 100%;17    height: 250px;18    background: #0a5964;19    color: #fff;20  }21  .logo {22    position: absolute;23    left: 42px;24    bottom: 32px;25    width: 400px;26    height: 90px;27    background: #E0E0E0;28    border: 1px solid #BDBDBD;29    display: flex; align-items: center; justify-content: center;30    color: #757575; font-size: 32px; letter-spacing: 1px;31  }32 33  /* Cards */34  .card {35    background: #ffffff;36    border-radius: 18px;37    box-shadow: 0 2px 8px rgba(0,0,0,0.12);38    margin: 24px 28px;39    padding: 30px 28px;40  }41 42  /* Form styles */43  .input-wrap { margin-bottom: 26px; }44  .label-row {45    display: flex; align-items: center; gap: 12px;46    color: #6e6e6e; font-size: 28px; margin: 6px 4px 14px 4px;47  }48  .label-row .line { flex: 1; border-top: 2px solid #d3d3d3; height: 0; }49  .field {50    border: 2px solid #cfcfcf; border-radius: 16px;51    padding: 28px; color: #333; font-size: 40px; line-height: 1.2;52    display: flex; align-items: center; justify-content: space-between;53  }54 55  .two-cols { display: flex; gap: 26px; }56  .two-cols .col { flex: 1; }57 58  .swap-circle {59    position: absolute; right: 46px; top: 290px;60    width: 128px; height: 128px; border-radius: 64px;61    background: #ffffff; border: 4px solid #cfd8dc;62    display: flex; align-items: center; justify-content: center;63    box-shadow: 0 2px 6px rgba(0,0,0,0.08);64  }65  .search-btn {66    margin-top: 14px;67    height: 140px; border-radius: 14px; background: #b15512;68    color: #fff; font-size: 42px; font-weight: 700; letter-spacing: 4px;69    display: flex; align-items: center; justify-content: center;70    box-shadow: 0 4px 8px rgba(0,0,0,0.18);71  }72 73  /* News section */74  .news-title {75    color: #7a7a7a; font-size: 26px; letter-spacing: 2px; margin: 4px 0 18px 6px;76  }77  .news-heading {78    font-size: 56px; color: #222; margin: 0 6px 22px 6px; font-weight: 700;79  }80  .banner {81    width: 100%; height: 520px;82    background: #E0E0E0; border: 1px solid #BDBDBD;83    display: flex; align-items: center; justify-content: center;84    color: #757575; font-size: 34px; margin-bottom: 24px;85  }86  .news-text { font-size: 34px; color: #555; line-height: 1.5; margin: 0 6px 18px 6px; }87  .news-link { font-size: 36px; color: #0a5964; font-weight: 700; letter-spacing: 2px; margin: 12px 6px; }88 89  /* Bottom navigation */90  .bottom-nav {91    position: absolute; left: 0; bottom: 0;92    width: 100%; height: 200px; background: #ffffff; border-top: 1px solid #ddd;93    display: flex; align-items: center; justify-content: space-around;94  }95  .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }96  .nav-label { font-size: 32px; color: #7a7a7a; }97  .nav-item.active .nav-label { color: #0a5964; font-weight: 700; }98  .home-indicator {99    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);100    width: 300px; height: 12px; border-radius: 6px; background: #cfcfcf;101  }102</style>103</head>104<body>105<div id="render-target">106 107  <div class="top-bar">108    <div class="logo">[IMG: Greyhound logo]</div>109  </div>110 111  <div class="card" style="position: relative;">112    <div class="input-wrap">113      <div class="label-row"><span>From</span><span class="line"></span></div>114      <div class="field">Hamilton, ON</div>115    </div>116 117    <div class="input-wrap">118      <div class="label-row"><span>To</span><span class="line"></span></div>119      <div class="field">Richmond, VA</div>120    </div>121 122    <div class="swap-circle">123      <svg width="70" height="70" viewBox="0 0 24 24">124        <!-- Up arrow -->125        <path d="M12 5 L8 9 L10 9 L10 17 L12 17 L12 9 L14 9 Z" fill="#0a5964"/>126        <!-- Down arrow -->127        <path d="M12 19 L16 15 L14 15 L14 7 L12 7 L12 15 L10 15 Z" fill="#0a5964"/>128      </svg>129    </div>130 131    <div class="two-cols">132      <div class="col input-wrap">133        <div class="label-row"><span>Departing</span><span class="line"></span></div>134        <div class="field">Oct 26, 2023</div>135      </div>136      <div class="col input-wrap">137        <div class="label-row"><span>Return</span><span class="line"></span></div>138        <div class="field">139          <span>Tap to add</span>140          <svg width="44" height="44" viewBox="0 0 24 24">141            <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z" fill="#0a5964"/>142          </svg>143        </div>144      </div>145    </div>146 147    <div class="input-wrap">148      <div class="label-row"><span>Passengers/Bikes</span><span class="line"></span></div>149      <div class="field">1 adult</div>150    </div>151 152    <div class="search-btn">SEARCH</div>153  </div>154 155  <div class="card">156    <div class="news-title">WHAT'S NEW?</div>157    <div class="news-heading">Greyhound and Flix join forces!</div>158    <div class="banner">[IMG: Greyhound and FlixBus coaches on road]</div>159    <div class="news-text">Our network has expanded! See how this benefits you.</div>160    <div class="news-link">FIND OUT MORE</div>161  </div>162 163  <div class="bottom-nav">164    <div class="nav-item active">165      <svg width="72" height="72" viewBox="0 0 24 24">166        <circle cx="12" cy="12" r="10" fill="#0a5964"/>167        <circle cx="12" cy="12" r="5" fill="#ffffff"/>168      </svg>169      <div class="nav-label">Booking</div>170    </div>171    <div class="nav-item">172      <svg width="72" height="72" viewBox="0 0 24 24">173        <path d="M4 7h14v10H4z" fill="#d0d0d0"/>174        <circle cx="7" cy="12" r="1.6" fill="#ffffff"/>175        <circle cx="15" cy="12" r="1.6" fill="#ffffff"/>176      </svg>177      <div class="nav-label">Tickets</div>178    </div>179    <div class="nav-item">180      <svg width="72" height="72" viewBox="0 0 24 24">181        <path d="M12 3c-3.3 0-6 2.6-6 5.8 0 4.4 6 11.2 6 11.2s6-6.8 6-11.2C18 5.6 15.3 3 12 3z" fill="#d0d0d0"/>182        <circle cx="12" cy="9" r="2.6" fill="#ffffff"/>183      </svg>184      <div class="nav-label">Stops</div>185    </div>186    <div class="nav-item">187      <svg width="72" height="72" viewBox="0 0 24 24">188        <circle cx="12" cy="12" r="10" fill="#d0d0d0"/>189        <rect x="11" y="7" width="2" height="2.6" fill="#ffffff"/>190        <rect x="11" y="10.5" width="2" height="6.5" fill="#ffffff"/>191      </svg>192      <div class="nav-label">More</div>193    </div>194    <div class="home-indicator"></div>195  </div>196 197</div>198</body>199</html>