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>Bus Booking UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #f6f6f6;13    border-radius: 28px;14    box-shadow: 0 10px 30px rgba(0,0,0,0.15);15    color: #212121;16  }17 18  .hero {19    width: 1080px; height: 520px;20    background: #E0E0E0;21    border: 1px solid #BDBDBD;22    display: flex; align-items: center; justify-content: center;23    color: #616161; font-weight: 600;24  }25 26  .card {27    position: relative;28    margin: 0 28px;29    background: #ffffff;30    border-radius: 18px;31    box-shadow: 0 3px 12px rgba(0,0,0,0.12);32  }33 34  .form-card {35    margin-top: -18px;36    padding: 24px;37  }38 39  .field {40    position: relative;41    margin-bottom: 22px;42  }43  .field-label {44    font-size: 26px;45    color: #757575;46    margin-bottom: 12px;47  }48  .input {49    border: 2px solid #cfcfcf;50    border-radius: 16px;51    padding: 26px 28px;52    font-size: 42px;53    color: #212121;54    background: #fff;55  }56  .input.small {57    font-size: 34px;58    padding: 24px 26px;59  }60 61  .row {62    display: flex; gap: 28px;63  }64  .col {65    flex: 1;66  }67 68  .swap-btn {69    position: absolute;70    right: 24px;71    top: 160px;72    width: 112px; height: 112px;73    border-radius: 50%;74    background: #fff;75    border: 2px solid #cfcfcf;76    box-shadow: 0 2px 8px rgba(0,0,0,0.12);77    display: flex; align-items: center; justify-content: center;78  }79  .swap-btn svg { width: 56px; height: 56px; }80 81  .plus-btn {82    position: absolute;83    right: 18px; top: 72px;84    width: 56px; height: 56px;85    border-radius: 50%;86    border: 2px solid #cfcfcf;87    background: #fff;88    display: flex; align-items: center; justify-content: center;89  }90 91  .search-btn {92    margin: 18px 0 8px;93    background: #ffcd4f;94    border: none;95    border-radius: 14px;96    height: 112px;97    font-size: 36px;98    letter-spacing: 3px;99    font-weight: 700;100    color: #333;101    box-shadow: 0 3px 10px rgba(0,0,0,0.15);102  }103 104  .insp-card {105    margin-top: 22px;106    padding-bottom: 0;107    overflow: hidden;108  }109  .insp-header {110    padding: 26px 28px 10px 28px;111  }112  .insp-title {113    font-size: 46px; font-weight: 700; margin: 0 0 8px 0;114  }115  .insp-sub {116    font-size: 30px; color: #616161; margin: 0 0 18px 0;117  }118  .map-img {119    width: 100%; height: 420px;120    background: #E0E0E0;121    border-top: 1px solid #BDBDBD;122    display: flex; align-items: center; justify-content: center;123    color: #616161; font-weight: 600;124    border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;125  }126 127  .nav {128    position: absolute; left: 0; right: 0; bottom: 0;129    height: 160px; background: #fff;130    border-top: 1px solid #e0e0e0;131    display: flex; align-items: center; justify-content: space-around;132    box-shadow: 0 -3px 12px rgba(0,0,0,0.08);133  }134  .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }135  .nav-item svg { width: 56px; height: 56px; }136  .nav-label { font-size: 28px; color: #757575; }137  .active .nav-label { color: #1a8e27; font-weight: 700; }138  .active svg path { fill: #1a8e27; }139 140  /* fine label lines inside inputs */141  .label-row {142    display: flex; align-items: center; gap: 16px;143    color: #757575; font-size: 26px;144    margin-bottom: 8px;145  }146  .label-row .line {147    flex: 1; height: 2px; background: #cfcfcf;148  }149</style>150</head>151<body>152<div id="render-target">153 154  <div class="hero">[IMG: Bus on highway at sunset]</div>155 156  <div class="card form-card">157    <div class="swap-btn" aria-label="Swap From/To">158      <svg viewBox="0 0 24 24">159        <path d="M7 17v-8l-2 2v-4l4 4h-2v6h0zm10-10v8l2-2v4l-4-4h2v-6h0" fill="#169c2a"/>160      </svg>161    </div>162 163    <div class="field">164      <div class="label-row"><span>From</span><div class="line"></div></div>165      <div class="input">Antwerp</div>166    </div>167 168    <div class="field">169      <div class="label-row"><span>To</span><div class="line"></div></div>170      <div class="input">Brussels</div>171    </div>172 173    <div class="row">174      <div class="field col">175        <div class="label-row"><span>Departing</span><div class="line"></div></div>176        <div class="input small">Nov 20, 2023</div>177      </div>178      <div class="field col" style="position: relative;">179        <div class="label-row"><span>Return</span><div class="line"></div></div>180        <div class="input small" style="color:#757575;">Tap to add</div>181        <div class="plus-btn" aria-label="Add return">182          <svg viewBox="0 0 24 24">183            <path d="M11 5h2v14h-2zM5 11h14v2H5z" fill="#169c2a"/>184          </svg>185        </div>186      </div>187    </div>188 189    <div class="field">190      <div class="label-row"><span>Passengers/Bikes</span><div class="line"></div></div>191      <div class="input">1 adult</div>192    </div>193 194    <button class="search-btn">SEARCH</button>195  </div>196 197  <div class="card insp-card">198    <div class="insp-header">199      <h2 class="insp-title">Get inspired for your next trip</h2>200      <p class="insp-sub">Explore FlixBus connections and prices</p>201    </div>202    <div class="map-img">[IMG: Map with green pins]</div>203  </div>204 205  <div class="nav">206    <div class="nav-item active">207      <svg viewBox="0 0 24 24">208        <path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 0 0 16 8.5 6.5 6.5 0 1 0 9.5 15c1.7 0 3.3-.6 4.5-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z" fill="#757575"/>209      </svg>210      <div class="nav-label">Booking</div>211    </div>212    <div class="nav-item">213      <svg viewBox="0 0 24 24">214        <path d="M4 5h12l2 4v10H6L4 15V5zm2 2v6l2 4h10V9l-1.2-2H6z" fill="#757575"/>215      </svg>216      <div class="nav-label">Tickets</div>217    </div>218    <div class="nav-item">219      <svg viewBox="0 0 24 24">220        <path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#757575"/>221      </svg>222      <div class="nav-label">Stops</div>223    </div>224    <div class="nav-item">225      <svg viewBox="0 0 24 24">226        <path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill="#757575"/>227      </svg>228      <div class="nav-label">More</div>229    </div>230  </div>231 232</div>233</body>234</html>