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 Mobile UI</title>7<style>8  :root{9    --teal:#0A5A66;10    --text:#2b2b2b;11    --muted:#6d6d6d;12    --bg:#F2F4F5;13    --card:#ffffff;14    --line:#D4D7DA;15    --shadow:0 6px 16px rgba(0,0,0,0.12);16    --orange:#B65A12;17  }18  body{ margin:0; padding:0; background:transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; color:var(--text); }19  #render-target{20    width:1080px; height:2400px;21    position:relative; overflow:hidden;22    background:var(--bg);23    border-radius:0;24    box-shadow:none;25  }26 27  /* Header */28  .header{29    position:relative;30    width:100%; height:310px;31    background:var(--teal);32    color:#fff;33  }34  .topbar{35    height:84px;36    display:flex; align-items:center; justify-content:space-between;37    padding:0 40px; font-weight:600; color:#fff;38    font-size:36px;39  }40  .status-right{ display:flex; align-items:center; gap:26px; }41  .logo-wrap{42    position:absolute; left:40px; top:110px;43    width:420px; height:100px;44    display:flex; align-items:center;45  }46  .img-placeholder{47    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;48    display:flex; align-items:center; justify-content:center;49    font-size:28px; border-radius:6px;50  }51 52  /* Search Card */53  .card{54    background:var(--card);55    width:1000px; margin:20px 40px 0;56    border:1px solid #E3E6E8; border-radius:14px;57    box-shadow:0 2px 4px rgba(0,0,0,0.06);58    padding:26px 26px 30px;59  }60  .field{ position:relative; margin-bottom:26px; }61  .field-label{62    display:flex; align-items:center; gap:18px;63    color:var(--muted); font-size:28px; letter-spacing:0.5px;64    margin:0 8px 12px;65  }66  .field-label .line{67    flex:1; height:1px; background:#CFD4D8; transform:translateY(1px);68  }69  .input{70    border:2px solid #C9CDD1; border-radius:16px;71    padding:34px; height:130px;72    font-size:46px; line-height:62px; color:#333;73    display:flex; align-items:center; justify-content:flex-start;74    background:#fff;75  }76 77  .row{ display:flex; gap:24px; }78  .row .col{ flex:1; }79 80  /* Swap button between From/To */81  .swap-btn{82    position:absolute; right:26px; top:160px;83    width:120px; height:120px; border-radius:60px;84    border:3px solid #55767C; background:#fff;85    display:flex; align-items:center; justify-content:center;86    box-shadow:var(--shadow);87  }88  .swap-btn svg{ width:70px; height:70px; }89  .swap-btn path{ stroke:#0A5A66; stroke-width:10; fill:none; }90 91  /* Return plus icon */92  .plus-btn{93    position:absolute; right:40px; top:76px;94    width:64px; height:64px; border-radius:32px;95    border:2px solid #889097; display:flex; align-items:center; justify-content:center;96    color:#0A5A66; background:#fff;97  }98  .plus-btn svg{ width:36px; height:36px; }99  .plus-btn path{ stroke:#0A5A66; stroke-width:10; }100 101  /* Search button */102  .search-btn{103    margin-top:8px;104    height:110px; border-radius:12px;105    background:var(--orange); color:#fff;106    display:flex; align-items:center; justify-content:center;107    font-size:40px; letter-spacing:4px; font-weight:700;108    box-shadow:0 6px 12px rgba(0,0,0,0.15);109  }110 111  /* What's New card */112  .news-card{ margin-top:24px; }113  .overline{114    color:#798087; font-size:26px; letter-spacing:3px;115    font-weight:700; margin-bottom:12px;116  }117  .news-title{ font-size:56px; font-weight:800; margin:8px 0 20px; }118  .hero-img{ width:100%; height:520px; }119  .news-text{ font-size:38px; color:#5a5a5a; margin-top:26px; line-height:1.4; }120  .link{ margin-top:26px; color:#0A5A66; font-size:36px; font-weight:700; }121 122  /* Bottom Nav */123  .bottom-nav{124    position:absolute; left:0; bottom:0;125    width:100%; height:220px; background:#fff;126    border-top:1px solid #E0E3E6; box-shadow:0 -6px 12px rgba(0,0,0,0.08);127  }128  .nav-items{ display:flex; height:100%; align-items:center; justify-content:space-around; }129  .nav-item{ display:flex; flex-direction:column; align-items:center; gap:18px; color:#70747a; }130  .nav-item svg{ width:64px; height:64px; }131  .nav-item.active{ color:#0A5A66; }132  .nav-item.active .icon-wrap{133    width:92px; height:92px; border-radius:46px; background:#E7F3F5;134    display:flex; align-items:center; justify-content:center;135  }136  .nav-label{ font-size:30px; font-weight:600; }137 138  /* Android gesture pill (visual only) */139  .gesture-pill{140    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);141    width:240px; height:16px; background:#0d0d0d; border-radius:10px; opacity:0.25;142  }143</style>144</head>145<body>146<div id="render-target">147 148  <div class="header">149    <div class="topbar">150      <div>10:23</div>151      <div class="status-right">152        <!-- simple status icons -->153        <svg viewBox="0 0 64 64" width="48" height="48">154          <path d="M4 44c8-8 20-18 28-18s20 10 28 18" stroke="#fff" stroke-width="6" fill="none" />155          <circle cx="32" cy="26" r="5" fill="#fff"/>156        </svg>157        <svg viewBox="0 0 80 40" width="52" height="40">158          <rect x="4" y="6" width="60" height="28" rx="6" stroke="#fff" stroke-width="6" fill="none"/>159          <rect x="10" y="12" width="40" height="16" fill="#fff"/>160          <rect x="66" y="14" width="8" height="12" rx="2" fill="#fff"/>161        </svg>162      </div>163    </div>164    <div class="logo-wrap">165      <div class="img-placeholder" style="width:420px; height:100px;">[IMG: Greyhound logo]</div>166    </div>167  </div>168 169  <!-- Search widget card -->170  <div class="card search-card">171    <div class="field">172      <div class="field-label"><span>From</span><div class="line"></div></div>173      <div class="input">Hamilton, ON</div>174    </div>175 176    <div class="field" style="margin-bottom:34px;">177      <div class="field-label"><span>To</span><div class="line"></div></div>178      <div class="input">Richmond, VA</div>179      <div class="swap-btn" aria-label="Swap From/To">180        <svg viewBox="0 0 100 100">181          <path d="M34 66 L50 50 L66 66" />182          <path d="M34 34 L50 50 L66 34" />183        </svg>184      </div>185    </div>186 187    <div class="row">188      <div class="col field">189        <div class="field-label"><span>Departing</span><div class="line"></div></div>190        <div class="input">Oct 26, 2023</div>191      </div>192      <div class="col field" style="position:relative;">193        <div class="field-label"><span>Return</span><div class="line"></div></div>194        <div class="input">Tap to add</div>195        <div class="plus-btn" aria-label="Add return">196          <svg viewBox="0 0 100 100">197            <path d="M50 20 L50 80 M20 50 L80 50" />198          </svg>199        </div>200      </div>201    </div>202 203    <div class="field">204      <div class="field-label"><span>Passengers/Bikes</span><div class="line"></div></div>205      <div class="input">3 adults</div>206    </div>207 208    <div class="search-btn">SEARCH</div>209  </div>210 211  <!-- News card -->212  <div class="card news-card">213    <div class="overline">WHAT'S NEW?</div>214    <div class="news-title">Greyhound and Flix join forces!</div>215    <div class="img-placeholder hero-img">[IMG: Two buses (Greyhound & FlixBus)]</div>216    <div class="news-text">Our network has expanded! See how this benefits you.</div>217    <div class="link">FIND OUT MORE</div>218  </div>219 220  <!-- Bottom navigation -->221  <div class="bottom-nav">222    <div class="nav-items">223      <div class="nav-item active">224        <div class="icon-wrap">225          <svg viewBox="0 0 100 100">226            <circle cx="46" cy="46" r="26" stroke="#0A5A66" stroke-width="8" fill="none"/>227            <line x1="64" y1="64" x2="86" y2="86" stroke="#0A5A66" stroke-width="10" stroke-linecap="round"/>228          </svg>229        </div>230        <div class="nav-label">Booking</div>231      </div>232 233      <div class="nav-item">234        <svg viewBox="0 0 100 100">235          <rect x="16" y="26" width="68" height="40" rx="8" stroke="#81868C" stroke-width="8" fill="none"/>236          <circle cx="30" cy="46" r="6" fill="#81868C"/>237          <circle cx="70" cy="46" r="6" fill="#81868C"/>238        </svg>239        <div class="nav-label">Tickets</div>240      </div>241 242      <div class="nav-item">243        <svg viewBox="0 0 100 100">244          <path d="M50 16c-16 0-28 12-28 28 0 22 28 40 28 40s28-18 28-40c0-16-12-28-28-28z" stroke="#81868C" stroke-width="8" fill="none"/>245          <circle cx="50" cy="44" r="8" fill="#81868C"/>246        </svg>247        <div class="nav-label">Stops</div>248      </div>249 250      <div class="nav-item">251        <svg viewBox="0 0 100 100">252          <circle cx="50" cy="50" r="34" stroke="#81868C" stroke-width="8" fill="none"/>253          <rect x="46" y="42" width="8" height="24" fill="#81868C"/>254          <circle cx="50" cy="32" r="6" fill="#81868C"/>255        </svg>256        <div class="nav-label">More</div>257      </div>258    </div>259  </div>260 261  <div class="gesture-pill"></div>262</div>263</body>264</html>