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>FlixBus Booking UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Common */18  .container { padding: 0 32px; }19  .card {20    background: #fff;21    border-radius: 18px;22    box-shadow: 0 4px 14px rgba(0,0,0,0.12);23  }24  .label-inline {25    position: absolute;26    top: -14px;27    left: 24px;28    background: #fff;29    padding: 0 12px;30    font-size: 26px;31    color: #666;32  }33  .field {34    position: relative;35    border: 2px solid #CFCFCF;36    border-radius: 16px;37    padding: 28px;38    margin-top: 32px;39  }40  .field .value-main {41    font-size: 44px;42    color: #222;43    line-height: 1.2;44  }45  .row {46    display: flex;47    gap: 24px;48  }49  .row .field { flex: 1; }50  .muted { color: #666; }51  .btn-primary {52    height: 120px;53    background: #FFCC45;54    border-radius: 16px;55    display: flex;56    align-items: center;57    justify-content: center;58    color: #3b3b3b;59    font-weight: 700;60    letter-spacing: 4px;61    font-size: 34px;62    border: none;63  }64  .section-title {65    font-size: 46px;66    font-weight: 700;67    color: #2c2c2c;68    margin: 0;69    padding: 32px 32px 8px 32px;70  }71  .section-sub {72    font-size: 30px;73    color: #666;74    padding: 0 32px 24px 32px;75    margin: 0;76  }77 78  /* Image placeholders */79  .img-placeholder {80    background: #E0E0E0;81    border: 1px solid #BDBDBD;82    color: #757575;83    display: flex;84    justify-content: center;85    align-items: center;86    text-align: center;87  }88 89  /* Top hero */90  #hero {91    width: 1080px;92    height: 520px;93  }94 95  /* Swap circle */96  .swap-circle {97    position: absolute;98    right: 36px;99    top: 256px;100    width: 120px;101    height: 120px;102    background: #fff;103    border: 2px solid #CFCFCF;104    border-radius: 60px;105    box-shadow: 0 2px 8px rgba(0,0,0,0.08);106    display: flex;107    align-items: center;108    justify-content: center;109  }110  .swap-circle svg { width: 64px; height: 64px; }111 112  /* Plus icon inside Return field */113  .field .inline-icon {114    position: absolute;115    right: 22px;116    top: 34px;117    width: 48px;118    height: 48px;119    display: flex;120    align-items: center;121    justify-content: center;122  }123 124  /* Bottom navigation */125  .bottom-nav {126    position: absolute;127    bottom: 0;128    left: 0;129    width: 1080px;130    height: 190px;131    background: #fff;132    border-top: 1px solid #D6D6D6;133    display: flex;134    align-items: center;135    justify-content: space-around;136  }137  .nav-item {138    width: 240px;139    height: 160px;140    display: flex;141    flex-direction: column;142    align-items: center;143    justify-content: center;144    color: #8A8A8A;145    font-size: 28px;146  }147  .nav-item svg { width: 56px; height: 56px; }148  .nav-item.active { color: #1FA02F; }149  .nav-item.active svg path { fill: #1FA02F; stroke: #1FA02F; }150</style>151</head>152<body>153<div id="render-target">154 155  <!-- Hero image -->156  <div id="hero" class="img-placeholder">157    [IMG: Scenic bus on highway at sunset]158  </div>159 160  <!-- Search card overlapping hero -->161  <div class="container" style="margin-top:-40px;">162    <div class="card" style="padding: 24px 24px 28px 24px;">163 164      <!-- From -->165      <div class="field">166        <div class="label-inline">From</div>167        <div class="value-main">Bruges</div>168      </div>169 170      <!-- To -->171      <div class="field">172        <div class="label-inline">To</div>173        <div class="value-main">Ghent</div>174      </div>175 176      <!-- Swap circle with arrows -->177      <div class="swap-circle">178        <svg viewBox="0 0 24 24">179          <path d="M8 16 l0 -7 l-2 2 m2 -2 l2 2" fill="none" stroke="#1FA02F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>180          <path d="M16 8 l0 7 l2 -2 m-2 2 l-2 -2" fill="none" stroke="#1FA02F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>181        </svg>182      </div>183 184      <!-- Dates row -->185      <div class="row">186        <div class="field">187          <div class="label-inline">Departing</div>188          <div class="value-main" style="font-size:38px;">Nov 14, 2023</div>189        </div>190        <div class="field">191          <div class="label-inline">Return</div>192          <div class="value-main muted" style="font-size:38px;">Tap to add</div>193          <div class="inline-icon">194            <svg viewBox="0 0 24 24">195              <path d="M12 5 v14 M5 12 h14" stroke="#1FA02F" stroke-width="2" stroke-linecap="round"></path>196            </svg>197          </div>198        </div>199      </div>200 201      <!-- Passengers -->202      <div class="field">203        <div class="label-inline">Passengers/Bikes</div>204        <div class="value-main" style="font-size:40px;">1 adult</div>205      </div>206 207      <!-- Search button -->208      <div style="padding: 24px 8px 8px 8px;">209        <div class="btn-primary">SEARCH</div>210      </div>211 212    </div>213  </div>214 215  <!-- Inspiration card -->216  <div class="container" style="margin-top:24px;">217    <div class="card">218      <h2 class="section-title">Get inspired for your next trip</h2>219      <p class="section-sub">Explore FlixBus connections and prices</p>220      <div class="img-placeholder" style="width:100%; height:520px;">221        [IMG: Map of Europe with green location pins]222      </div>223    </div>224  </div>225 226  <!-- Bottom navigation bar -->227  <div class="bottom-nav">228    <div class="nav-item active">229      <svg viewBox="0 0 24 24">230        <circle cx="10" cy="10" r="6" fill="none" stroke="#1FA02F" stroke-width="2"></circle>231        <path d="M15 15 l6 6" stroke="#1FA02F" stroke-width="2" stroke-linecap="round"></path>232      </svg>233      <div>Booking</div>234    </div>235    <div class="nav-item">236      <svg viewBox="0 0 24 24">237        <path d="M5 4 h14 v16 h-14 z" fill="none" stroke="#8A8A8A" stroke-width="2"></path>238        <path d="M5 8 h14" stroke="#8A8A8A" stroke-width="2"></path>239        <path d="M8 4 v-2 h8 v2" stroke="#8A8A8A" stroke-width="2"></path>240      </svg>241      <div>Tickets</div>242    </div>243    <div class="nav-item">244      <svg viewBox="0 0 24 24">245        <path d="M12 2 a8 8 0 0 1 8 8 c0 5 -8 12 -8 12 s-8 -7 -8 -12 a8 8 0 0 1 8 -8 z" fill="none" stroke="#8A8A8A" stroke-width="2"></path>246        <circle cx="12" cy="10" r="3" fill="#8A8A8A"></circle>247      </svg>248      <div>Stops</div>249    </div>250    <div class="nav-item">251      <svg viewBox="0 0 24 24">252        <circle cx="12" cy="12" r="10" fill="none" stroke="#8A8A8A" stroke-width="2"></circle>253        <path d="M12 8 v8" stroke="#8A8A8A" stroke-width="2" stroke-linecap="round"></path>254        <circle cx="12" cy="6" r="1.5" fill="#8A8A8A"></circle>255      </svg>256      <div>More</div>257    </div>258  </div>259 260</div>261</body>262</html>