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 {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13    color: #222;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #F5F5F5;21  }22 23  /* Hero */24  .hero {25    width: 100%;26    height: 540px;27    position: relative;28  }29  .hero .img {30    width: 100%;31    height: 100%;32    background: #E0E0E0;33    border-bottom: 1px solid #BDBDBD;34    display: flex;35    align-items: center;36    justify-content: center;37    color: #666;38    font-size: 36px;39    letter-spacing: 0.3px;40  }41 42  /* Search Card */43  .card {44    position: relative;45    margin: -60px 24px 16px 24px; /* overlap hero slightly */46    background: #FFFFFF;47    border-radius: 20px;48    box-shadow: 0 6px 18px rgba(0,0,0,0.12);49    padding: 28px;50  }51  .field {52    border: 2px solid #CFCFCF;53    border-radius: 16px;54    padding: 18px 24px 22px 24px;55    margin-bottom: 22px;56    position: relative;57    background: #fff;58  }59  .field-label {60    font-size: 26px;61    color: #6A6A6A;62    margin-bottom: 6px;63  }64  .field-value {65    font-size: 44px;66    color: #222;67  }68 69  .row {70    display: flex;71    gap: 22px;72  }73  .row .field {74    flex: 1;75    margin-bottom: 0;76  }77 78  /* Swap circular button */79  .swap {80    position: absolute;81    top: 172px; /* between From and To fields */82    right: 24px;83    width: 104px;84    height: 104px;85    border-radius: 52px;86    background: #FFFFFF;87    border: 2px solid #CFCFCF;88    display: flex;89    align-items: center;90    justify-content: center;91    box-shadow: 0 2px 6px rgba(0,0,0,0.08);92  }93  .swap svg { width: 54px; height: 54px; }94 95  /* Plus icon in Return field */96  .plus {97    position: absolute;98    right: 20px;99    top: 50%;100    transform: translateY(-50%);101  }102 103  /* Search button */104  .search-btn {105    width: 100%;106    background: #F6C647;107    color: #2D2D2D;108    border: none;109    border-radius: 16px;110    padding: 30px 20px;111    font-size: 34px;112    font-weight: 800;113    letter-spacing: 4px;114    box-shadow: 0 6px 14px rgba(246,198,71,0.5);115    margin-top: 8px;116  }117 118  /* Inspiration Card */119  .promo-card {120    margin: 16px 24px 190px 24px; /* leave space above bottom bar */121    background: #FFFFFF;122    border-radius: 18px;123    box-shadow: 0 6px 16px rgba(0,0,0,0.10);124    overflow: hidden;125  }126  .promo-header {127    padding: 28px;128  }129  .promo-title {130    font-size: 52px;131    font-weight: 800;132    color: #2B2B2B;133    margin-bottom: 8px;134  }135  .promo-sub {136    font-size: 30px;137    color: #666;138  }139  .map {140    height: 470px;141    margin: 0 0 20px 0;142    background: #E0E0E0;143    border-top: 1px solid #BDBDBD;144    border-bottom: 1px solid #BDBDBD;145    display: flex;146    align-items: center;147    justify-content: center;148    color: #666;149    font-size: 34px;150  }151 152  /* Bottom Navigation */153  .tabbar {154    position: absolute;155    bottom: 0;156    left: 0;157    width: 100%;158    height: 160px;159    background: #FFFFFF;160    border-top: 1px solid #D8D8D8;161    display: flex;162    justify-content: space-around;163    align-items: center;164  }165  .tab {166    display: flex;167    flex-direction: column;168    align-items: center;169    gap: 10px;170    color: #7A7A7A;171    font-size: 28px;172  }173  .tab svg { width: 52px; height: 52px; }174  .tab.active {175    color: #10A800;176    font-weight: 700;177  }178  .active .icon-bg {179    position: absolute;180    width: 84px;181    height: 84px;182    background: rgba(16,168,0,0.14);183    border-radius: 50%;184    transform: translateY(-6px);185    z-index: 0;186  }187  .tab .icon-wrap {188    position: relative;189    width: 84px;190    height: 84px;191    display: flex;192    align-items: center;193    justify-content: center;194  }195 196  .accent { color: #10A800; fill: #10A800; }197</style>198</head>199<body>200<div id="render-target">201  <!-- Hero image placeholder -->202  <div class="hero">203    <div class="img">[IMG: FlixBus on highway at sunset]</div>204  </div>205 206  <!-- Search Card -->207  <div class="card">208    <div class="field">209      <div class="field-label">From</div>210      <div class="field-value">Antwerp</div>211    </div>212 213    <div class="field">214      <div class="field-label">To</div>215      <div class="field-value">Brussels</div>216    </div>217 218    <!-- Swap button -->219    <div class="swap">220      <svg viewBox="0 0 24 24">221        <g fill="none" stroke="#10A800" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">222          <path d="M7 16V5"></path>223          <path d="M3 9l4-4 4 4"></path>224          <path d="M17 8v11"></path>225          <path d="M21 15l-4 4-4-4"></path>226        </g>227      </svg>228    </div>229 230    <div class="row" style="margin-top: 8px; margin-bottom: 22px;">231      <div class="field">232        <div class="field-label">Departing</div>233        <div class="field-value" style="font-size:38px">Nov 14, 2023</div>234      </div>235      <div class="field" style="position: relative;">236        <div class="field-label">Return</div>237        <div class="field-value" style="font-size:38px; color:#8B8B8B;">Tap to add</div>238        <div class="plus">239          <svg viewBox="0 0 24 24" width="46" height="46">240            <path d="M12 5v14M5 12h14" stroke="#10A800" stroke-width="2.5" stroke-linecap="round"/>241          </svg>242        </div>243      </div>244    </div>245 246    <div class="field">247      <div class="field-label">Passengers/Bikes</div>248      <div class="field-value" style="font-size:38px">1 adult</div>249    </div>250 251    <button class="search-btn">SEARCH</button>252  </div>253 254  <!-- Inspiration Section -->255  <div class="promo-card">256    <div class="promo-header">257      <div class="promo-title">Get inspired for your next trip</div>258      <div class="promo-sub">Explore FlixBus connections and prices</div>259    </div>260    <div class="map">[IMG: Map of Europe with green pins]</div>261  </div>262 263  <!-- Bottom Navigation -->264  <div class="tabbar">265    <div class="tab active">266      <div class="icon-wrap">267        <div class="icon-bg"></div>268        <svg viewBox="0 0 24 24" class="accent" style="position: relative; z-index:1;">269          <circle cx="11" cy="11" r="6" fill="none" stroke="#10A800" stroke-width="2"/>270          <path d="M20 20l-4-4" stroke="#10A800" stroke-width="2" stroke-linecap="round"/>271        </svg>272      </div>273      <div>Booking</div>274    </div>275    <div class="tab">276      <svg viewBox="0 0 24 24">277        <path d="M4 7h12a2 2 0 012 2v6a2 2 0 01-2 2H4V7z" fill="none" stroke="#777" stroke-width="2"/>278        <path d="M6 7V5M18 7V5" stroke="#777" stroke-width="2" stroke-linecap="round"/>279        <circle cx="9" cy="12" r="1.2" fill="#777"/>280        <circle cx="13" cy="12" r="1.2" fill="#777"/>281      </svg>282      <div>Tickets</div>283    </div>284    <div class="tab">285      <svg viewBox="0 0 24 24">286        <path d="M12 21s6-6.4 6-10a6 6 0 10-12 0c0 3.6 6 10 6 10z" fill="none" stroke="#777" stroke-width="2"/>287        <circle cx="12" cy="11" r="2" fill="#777"/>288      </svg>289      <div>Stops</div>290    </div>291    <div class="tab">292      <svg viewBox="0 0 24 24">293        <circle cx="12" cy="12" r="10" fill="none" stroke="#777" stroke-width="2"/>294        <path d="M12 8v8M12 6h0" stroke="#777" stroke-width="2" stroke-linecap="round"/>295      </svg>296      <div>More</div>297    </div>298  </div>299</div>300</body>301</html>