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; }9  * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }10  #render-target {11    width: 1080px;12    height: 2400px;13    position: relative;14    overflow: hidden;15    background: #FFFFFF;16  }17 18  /* Top hero image placeholder */19  .hero {20    width: 100%;21    height: 460px;22    background: #E0E0E0;23    border-bottom: 1px solid #BDBDBD;24    display: flex;25    align-items: center;26    justify-content: center;27    color: #757575;28    font-size: 34px;29    letter-spacing: 0.3px;30  }31 32  /* Booking card */33  .card {34    width: 1004px;35    margin: -40px auto 24px auto; /* slight overlap on hero */36    background: #fff;37    border-radius: 18px;38    box-shadow: 0 6px 16px rgba(0,0,0,0.12);39    padding: 26px 26px 28px 26px;40    position: relative;41  }42 43  .field {44    border: 2px solid #CFCFCF;45    border-radius: 16px;46    padding: 18px 24px 26px 24px;47    margin-bottom: 22px;48    background: #fff;49  }50 51  .field-label {52    font-size: 26px;53    color: #767676;54    margin-bottom: 12px;55  }56 57  .field-value {58    font-size: 46px;59    color: #222;60  }61 62  /* Row for Departing / Return */63  .row {64    display: flex;65    gap: 22px;66  }67  .row .field {68    flex: 1;69    margin-bottom: 0;70  }71  .row .field .field-value { font-size: 38px; }72 73  /* Swap circle button */74  .swap-btn {75    position: absolute;76    right: 34px;77    top: 168px;78    width: 104px;79    height: 104px;80    border-radius: 50%;81    background: #fff;82    border: 2px solid #CFCFCF;83    box-shadow: 0 6px 16px rgba(0,0,0,0.12);84    display: flex;85    align-items: center;86    justify-content: center;87    gap: 8px;88  }89  .swap-btn svg { width: 40px; height: 40px; }90  .green { color: #19A61A; fill: #19A61A; }91 92  /* Return plus icon */93  .return-plus {94    position: absolute;95    right: 40px;96    top: 476px;97    width: 40px;98    height: 40px;99    color: #19A61A;100  }101 102  /* Passengers field value size */103  .passengers .field-value { font-size: 42px; }104 105  /* Search button */106  .search-btn {107    width: 952px;108    height: 120px;109    margin: 26px auto 0 auto;110    background: #F6C44A;111    border: none;112    border-radius: 14px;113    color: #2D2D2D;114    font-size: 38px;115    letter-spacing: 3px;116    font-weight: 700;117    box-shadow: 0 6px 12px rgba(0,0,0,0.12);118    display: flex;119    align-items: center;120    justify-content: center;121  }122 123  /* Inspiration card */124  .card-secondary {125    width: 1004px;126    margin: 8px auto 0 auto;127    background: #fff;128    border-radius: 18px;129    box-shadow: 0 6px 16px rgba(0,0,0,0.10);130    padding: 26px;131  }132  .card-secondary h2 {133    margin: 0 0 10px 0;134    font-size: 44px;135    color: #2B2B2B;136  }137  .card-secondary p {138    margin: 0 0 22px 0;139    font-size: 28px;140    color: #6F6F6F;141  }142  .map-placeholder {143    width: 952px;144    height: 420px;145    background: #E0E0E0;146    border: 1px solid #BDBDBD;147    border-radius: 14px;148    display: flex;149    align-items: center;150    justify-content: center;151    color: #757575;152    font-size: 30px;153  }154 155  /* Bottom navigation bar */156  .bottom-nav {157    position: absolute;158    bottom: 0;159    left: 0;160    width: 1080px;161    height: 170px;162    background: #fff;163    border-top: 1px solid #D7D7D7;164    display: flex;165    justify-content: space-around;166    align-items: center;167  }168  .nav-item {169    width: 220px;170    display: flex;171    flex-direction: column;172    align-items: center;173    gap: 14px;174    color: #8A8A8A;175    font-size: 28px;176  }177  .nav-item svg { width: 48px; height: 48px; }178  .nav-item.active { color: #19A61A; }179  .nav-item.active svg { fill: #19A61A; color: #19A61A; }180 181</style>182</head>183<body>184<div id="render-target">185 186  <div class="hero">[IMG: FlixBus on highway at sunset]</div>187 188  <div class="card">189    <div class="field">190      <div class="field-label">From</div>191      <div class="field-value">Antwerp</div>192    </div>193 194    <div class="field" style="margin-top: 8px;">195      <div class="field-label">To</div>196      <div class="field-value">Ghent</div>197    </div>198 199    <div class="swap-btn">200      <!-- Up arrow -->201      <svg viewBox="0 0 100 100" class="green">202        <path d="M50 75 V30 M50 30 L38 42 M50 30 L62 42" stroke="currentColor" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>203      </svg>204      <!-- Down arrow -->205      <svg viewBox="0 0 100 100" class="green">206        <path d="M50 25 V70 M50 70 L62 58 M50 70 L38 58" stroke="currentColor" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>207      </svg>208    </div>209 210    <div class="row" style="margin-top: 10px;">211      <div class="field">212        <div class="field-label">Departing</div>213        <div class="field-value">Nov 14, 2023</div>214      </div>215      <div class="field">216        <div class="field-label">Return</div>217        <div class="field-value" style="color:#909090;">Tap to add</div>218      </div>219      <svg class="return-plus" viewBox="0 0 100 100">220        <path d="M50 20 V80 M20 50 H80" stroke="#19A61A" stroke-width="12" stroke-linecap="round"/>221      </svg>222    </div>223 224    <div class="field passengers" style="margin-top: 22px;">225      <div class="field-label">Passengers/Bikes</div>226      <div class="field-value">1 adult</div>227    </div>228 229    <div class="search-btn">SEARCH</div>230  </div>231 232  <div class="card-secondary">233    <h2>Get inspired for your next trip</h2>234    <p>Explore FlixBus connections and prices</p>235    <div class="map-placeholder">[IMG: Europe map with location pins]</div>236  </div>237 238  <!-- Bottom Navigation -->239  <div class="bottom-nav">240    <div class="nav-item active">241      <svg viewBox="0 0 100 100">242        <circle cx="42" cy="42" r="24" fill="currentColor"></circle>243        <path d="M60 60 L82 82" stroke="currentColor" stroke-width="10" stroke-linecap="round" fill="none"></path>244      </svg>245      <div>Booking</div>246    </div>247    <div class="nav-item">248      <svg viewBox="0 0 100 100">249        <rect x="18" y="26" width="64" height="44" rx="8" ry="8" stroke="currentColor" stroke-width="8" fill="none"></rect>250        <circle cx="30" cy="48" r="4" fill="currentColor"></circle>251        <circle cx="70" cy="48" r="4" fill="currentColor"></circle>252      </svg>253      <div>Tickets</div>254    </div>255    <div class="nav-item">256      <svg viewBox="0 0 100 100">257        <path d="M50 16 C35 16 24 28 24 42 C24 62 50 84 50 84 C50 84 76 62 76 42 C76 28 65 16 50 16 Z" stroke="currentColor" stroke-width="8" fill="none"></path>258        <circle cx="50" cy="42" r="10" fill="currentColor"></circle>259      </svg>260      <div>Stops</div>261    </div>262    <div class="nav-item">263      <svg viewBox="0 0 100 100">264        <circle cx="50" cy="50" r="34" stroke="currentColor" stroke-width="8" fill="none"></circle>265        <rect x="47" y="40" width="6" height="26" fill="currentColor"></rect>266        <circle cx="50" cy="30" r="4" fill="currentColor"></circle>267      </svg>268      <div>More</div>269    </div>270  </div>271 272</div>273</body>274</html>