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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #f3f4f5;12  }13 14  /* Header */15  .app-header {16    position: relative;17    width: 100%;18    height: 270px;19    background: #0c5160;20    color: #fff;21  }22  .status-bar {23    height: 60px;24    padding: 18px 28px 0 28px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    font-weight: 600;29    font-size: 36px;30    letter-spacing: 0.5px;31  }32  .status-left, .status-right { display: flex; align-items: center; gap: 22px; }33  .status-icon { width: 36px; height: 36px; opacity: 0.9; }34  .gh-logo-wrap {35    position: absolute;36    left: 40px;37    bottom: 40px;38  }39  .gh-logo {40    width: 380px; height: 80px;41    background: #E0E0E0; border: 1px solid #BDBDBD;42    display: flex; align-items: center; justify-content: center;43    color: #757575; font-style: italic; font-size: 36px; letter-spacing: 1px;44  }45 46  /* Cards */47  .card {48    width: 1006px;49    margin: 24px auto;50    background: #fff;51    border-radius: 16px;52    box-shadow: 0 2px 0 rgba(0,0,0,0.08), 0 6px 18px rgba(0,0,0,0.08);53  }54 55  /* Search form */56  .search-card { padding: 26px; position: relative; }57  .field {58    border: 2px solid #D4D4D4;59    border-radius: 16px;60    padding: 24px;61    margin-bottom: 22px;62  }63  .field-row { display: flex; gap: 22px; }64  .field.half { width: calc(50% - 11px); }65  .label {66    font-size: 26px; color: #7a7d80; margin-bottom: 12px; letter-spacing: 0.05em;67  }68  .value {69    font-size: 44px; color: #2b2d30;70  }71  .swap-btn {72    position: absolute;73    right: 26px; top: 170px;74    width: 110px; height: 110px; border-radius: 55px;75    border: 3px solid #c8c9cb; background: #fff;76    display: flex; align-items: center; justify-content: center;77    box-shadow: 0 2px 8px rgba(0,0,0,0.08);78  }79  .swap-btn svg { width: 60px; height: 60px; }80  .plus-btn {81    position: absolute; right: 52px; top: 372px;82    width: 52px; height: 52px; border-radius: 26px;83    border: 2px solid #c8c9cb; display: flex; align-items: center; justify-content: center; color: #0c5160; font-size: 40px; font-weight: 600;84  }85 86  .search-button {87    margin-top: 8px;88    width: 100%; height: 120px; border-radius: 12px;89    background: #b55a11; color: #fff; font-size: 44px; letter-spacing: 0.12em; font-weight: 700;90    border: none; box-shadow: 0 8px 0 rgba(0,0,0,0.06), 0 10px 22px rgba(0,0,0,0.15);91  }92 93  /* What's New card */94  .news-card { padding: 26px; }95  .news-eyebrow { font-size: 26px; color: #7a7d80; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 12px; }96  .news-title { font-size: 54px; color: #2b2d30; font-weight: 700; margin-bottom: 22px; }97  .news-image {98    width: 954px; height: 480px; background: #E0E0E0; border: 1px solid #BDBDBD;99    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;100    margin: 0 auto 24px;101  }102  .news-text { font-size: 36px; color: #5a5e62; line-height: 1.4; margin-bottom: 16px; }103  .news-link { font-size: 36px; color: #0c5160; font-weight: 700; text-decoration: none; }104 105  /* Bottom nav */106  .bottom-nav {107    position: absolute; left: 0; right: 0; bottom: 78px;108    height: 160px; background: #fff; border-top: 1px solid #ddd;109    display: flex; align-items: center; justify-content: space-around;110  }111  .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 25%; }112  .nav-icon-wrap {113    width: 88px; height: 88px; border-radius: 44px; display: flex; align-items: center; justify-content: center;114  }115  .nav-item.active .nav-icon-wrap { background: rgba(12,81,96,0.12); }116  .nav-item span { font-size: 30px; color: #4b4f53; }117  .nav-item.active span { color: #0c5160; font-weight: 700; }118  .home-indicator {119    position: absolute; left: 50%; transform: translateX(-50%);120    bottom: 22px; width: 300px; height: 12px; border-radius: 6px; background: #1f1f1f; opacity: 0.25;121  }122</style>123</head>124<body>125<div id="render-target">126 127  <!-- Header -->128  <div class="app-header">129    <div class="status-bar">130      <div class="status-left">131        <div>10:15</div>132        <!-- simple status glyphs -->133        <svg class="status-icon" viewBox="0 0 24 24">134          <path fill="#fff" d="M12 2a4 4 0 0 0-4 4h2a2 2 0 0 1 2-2V2z"/>135        </svg>136        <svg class="status-icon" viewBox="0 0 24 24">137          <path fill="#fff" d="M3 12h18M3 12c3-6 15-6 18 0" stroke="#fff" stroke-width="2" fill="none"/>138        </svg>139        <svg class="status-icon" viewBox="0 0 24 24">140          <path fill="#fff" d="M4 12h16M8 6l8 12" stroke="#fff" stroke-width="2" fill="none"/>141        </svg>142        <svg class="status-icon" viewBox="0 0 24 24">143          <circle cx="12" cy="12" r="2" fill="#fff"/>144        </svg>145      </div>146      <div class="status-right">147        <svg class="status-icon" viewBox="0 0 24 24">148          <path d="M3 18h18l-6-8-4 5-3-3z" fill="#fff"/>149        </svg>150        <svg class="status-icon" viewBox="0 0 24 24">151          <rect x="5" y="3" width="14" height="18" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"/>152          <rect x="8" y="6" width="8" height="12" fill="#fff"/>153        </svg>154      </div>155    </div>156    <div class="gh-logo-wrap">157      <div class="gh-logo">[IMG: Greyhound Logo]</div>158    </div>159  </div>160 161  <!-- Search form card -->162  <div class="card search-card">163    <div class="label">From</div>164    <div class="field">165      <div class="value">San Francisco, CA</div>166    </div>167 168    <div class="label">To</div>169    <div class="field">170      <div class="value">Albenga</div>171    </div>172 173    <div class="field-row">174      <div class="field half">175        <div class="label">Departing</div>176        <div class="value">Oct 25, 2023</div>177      </div>178      <div class="field half" style="position: relative;">179        <div class="label">Return</div>180        <div class="value" style="color:#7a7d80;">Tap to add</div>181      </div>182    </div>183 184    <div class="label">Passengers/Bikes</div>185    <div class="field">186      <div class="value">1 adult</div>187    </div>188 189    <button class="search-button">SEARCH</button>190 191    <!-- swap and plus buttons -->192    <div class="swap-btn" aria-label="Swap">193      <svg viewBox="0 0 24 24">194        <path d="M7 16l-3-3 3-3" stroke="#0c5160" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>195        <path d="M17 8l3 3-3 3" stroke="#0c5160" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>196        <path d="M6 13h7M18 11h-7" stroke="#0c5160" stroke-width="2" fill="none" stroke-linecap="round"/>197      </svg>198    </div>199    <div class="plus-btn" aria-label="Add return">+</div>200  </div>201 202  <!-- News card -->203  <div class="card news-card">204    <div class="news-eyebrow">What's new?</div>205    <div class="news-title">Greyhound and Flix join forces!</div>206    <div class="news-image">[IMG: Greyhound and FlixBus coaches]</div>207    <div class="news-text">Our network has expanded! See how this benefits you.</div>208    <a href="#" class="news-link">FIND OUT MORE</a>209  </div>210 211  <!-- Bottom navigation -->212  <div class="bottom-nav">213    <div class="nav-item active">214      <div class="nav-icon-wrap">215        <svg viewBox="0 0 24 24" width="42" height="42">216          <circle cx="10" cy="10" r="7" stroke="#0c5160" stroke-width="2" fill="none"/>217          <path d="M16 16l5 5" stroke="#0c5160" stroke-width="2" fill="none" stroke-linecap="round"/>218        </svg>219      </div>220      <span>Booking</span>221    </div>222    <div class="nav-item">223      <div class="nav-icon-wrap">224        <svg viewBox="0 0 24 24" width="42" height="42">225          <rect x="4" y="5" width="16" height="12" rx="2" fill="none" stroke="#6b6e72" stroke-width="2"/>226          <circle cx="8" cy="11" r="1.6" fill="#6b6e72"/>227          <circle cx="12" cy="11" r="1.6" fill="#6b6e72"/>228          <circle cx="16" cy="11" r="1.6" fill="#6b6e72"/>229        </svg>230      </div>231      <span>Tickets</span>232    </div>233    <div class="nav-item">234      <div class="nav-icon-wrap">235        <svg viewBox="0 0 24 24" width="42" height="42">236          <path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z" fill="none" stroke="#6b6e72" stroke-width="2"/>237          <circle cx="12" cy="9" r="2.2" fill="#6b6e72"/>238        </svg>239      </div>240      <span>Stops</span>241    </div>242    <div class="nav-item">243      <div class="nav-icon-wrap">244        <svg viewBox="0 0 24 24" width="42" height="42">245          <circle cx="12" cy="12" r="10" stroke="#6b6e72" stroke-width="2" fill="none"/>246          <path d="M12 7.5v0.1" stroke="#6b6e72" stroke-width="3" stroke-linecap="round"/>247          <path d="M12 11v6" stroke="#6b6e72" stroke-width="2" stroke-linecap="round"/>248        </svg>249      </div>250      <span>More</span>251    </div>252  </div>253 254  <div class="home-indicator"></div>255</div>256</body>257</html>