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>Select Trip UI</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#ECF6FB; color:#1E3D53; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;12  }13 14  /* Top header */15  .topbar {16    height:180px; background:#E7F2F7; display:flex; align-items:center;17    padding:32px 40px; box-sizing:border-box;18  }19  .title { font-size:52px; font-weight:700; margin-left:18px; }20  .righticons { margin-left:auto; display:flex; align-items:center; gap:22px; }21  .currency-pill {22    display:flex; align-items:center; gap:12px; font-size:40px; color:#324B5E;23  }24  .flag {25    font-size:42px; line-height:42px;26  }27  .icon-btn {28    width:62px; height:62px; border-radius:16px; display:flex; align-items:center; justify-content:center;29  }30  .x-icon svg { width:42px; height:42px; }31  .x-icon line { stroke:#5B7C90; stroke-width:6; stroke-linecap:round; }32 33  /* Trip summary card */34  .trip-card {35    width:1000px; margin:26px auto 18px; background:#FFF; border-radius:48px;36    box-shadow:0 8px 20px rgba(24,80,121,0.12); padding:38px 36px; box-sizing:border-box;37  }38  .trip-title { text-align:center; font-weight:700; font-size:40px; line-height:1.25; color:#233D55; }39  .trip-meta { display:flex; justify-content:center; gap:40px; margin-top:24px; color:#4E6C82; font-size:34px; }40  .trip-meta .meta { display:flex; align-items:center; gap:14px; }41  .meta svg { width:40px; height:40px; }42 43  /* Day selector */44  .days { display:flex; justify-content:space-between; align-items:center; margin-top:34px; padding:0 12px; }45  .day {46    width:150px; text-align:center; color:#7A95A8; font-size:30px; padding:8px 0;47    border-right:1px solid #E5EDF2;48  }49  .day:last-child { border-right:none; }50  .day .num { display:block; margin-top:8px; font-weight:700; font-size:38px; }51  .day.selected {52    background:#D9ECFF; border-radius:28px; color:#1676D1; padding:18px 0;53    box-shadow: inset 0 0 0 1px rgba(22,118,209,0.08);54  }55 56  /* Info card */57  .info-card {58    width:1000px; margin:26px auto; background:#DDEEF8; border-radius:40px; padding:34px 36px;59    box-sizing:border-box; color:#2B4A63; position:relative;60  }61  .info-illustration {62    width:180px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:14px;63    display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; margin:0 auto 18px;64  }65  .info-card h3 { text-align:center; font-size:40px; margin:12px 0 8px; font-weight:800; }66  .info-card p { text-align:center; font-size:32px; color:#5F7F93; margin:0; }67 68  /* Ticket cards */69  .ticket {70    width:1000px; margin:24px auto; background:#FFF; border-radius:36px;71    box-shadow:0 8px 16px rgba(21,77,115,0.12); padding:34px; box-sizing:border-box; position:relative;72  }73  .ticket-head { display:flex; align-items:center; }74  .brand {75    font-weight:900; font-size:56px; letter-spacing:1px;76    color:#6FD000; /* FLIXBUS green */77  }78  .brand .accent { color:#FFA800; }79  .qr {80    margin-left:auto; width:56px; height:56px; border:2px solid #BFD6E6; border-radius:12px; position:relative;81  }82  .qr::before, .qr::after {83    content:""; position:absolute; width:16px; height:16px; border:2px solid #BFD6E6; top:6px; left:6px;84  }85  .qr::after { left:auto; right:6px; bottom:auto; }86  .ticket-body { display:flex; align-items:flex-start; gap:28px; margin-top:18px; }87  .col { flex:1; }88  .time { font-size:44px; font-weight:800; color:#233D55; }89  .place { font-size:38px; margin-top:6px; color:#2C4962; }90  .sub { font-size:28px; letter-spacing:1px; color:#8AA5B8; margin-top:4px; text-transform:uppercase; }91  .arrow {92    width:160px; display:flex; align-items:center; justify-content:center; margin-top:28px;93  }94  .arrow svg { width:140px; height:20px; }95  .ticket-footer { display:flex; align-items:center; margin-top:26px; }96  .footer-icons { display:flex; align-items:center; gap:22px; color:#3D5D74; font-size:34px; }97  .pricebtn {98    margin-left:auto; padding:18px 28px; border:2px solid #3EA3FF; color:#1676D1;99    border-radius:24px; font-size:36px; font-weight:700; display:flex; align-items:center; gap:12px; background:#F7FBFF;100  }101 102  /* Small chip buttons overlapping second card */103  .chip {104    position:absolute; left:30px; top:120px; padding:22px 32px; border-radius:30px; background:#FFF;105    box-shadow:0 10px 22px rgba(21,77,115,0.16); display:flex; align-items:center; gap:16px; color:#385B72; font-size:34px;106  }107  .chip + .chip { top:210px; }108  .chip svg { width:38px; height:38px; }109 110  /* Home indicator */111  .home-indicator {112    position:absolute; bottom:22px; left:50%; transform:translateX(-50%);113    width:320px; height:10px; background:#0C0C0C; border-radius:10px; opacity:0.14;114  }115</style>116</head>117<body>118<div id="render-target">119 120  <!-- Header -->121  <div class="topbar">122    <div class="icon-btn x-icon">123      <svg viewBox="0 0 24 24">124        <line x1="4" y1="4" x2="20" y2="20"></line>125        <line x1="20" y1="4" x2="4" y2="20"></line>126      </svg>127    </div>128    <div class="title">Select trip</div>129    <div class="righticons">130      <div class="currency-pill"><span class="flag">🇺🇸</span><span>$</span></div>131    </div>132  </div>133 134  <!-- Trip summary card with day selector -->135  <div class="trip-card">136    <div class="trip-title">Brussels City Center - Midi<br>Train station → Antwerp Train station</div>137    <div class="trip-meta">138      <span class="meta">139        <svg viewBox="0 0 24 24">140          <rect x="3" y="5" width="18" height="16" rx="3" ry="3" fill="none" stroke="#5B7C90" stroke-width="2"></rect>141          <line x1="7" y1="3" x2="7" y2="8" stroke="#5B7C90" stroke-width="2"></line>142          <line x1="17" y1="3" x2="17" y2="8" stroke="#5B7C90" stroke-width="2"></line>143        </svg> Nov 14144      </span>145      <span class="meta">146        <svg viewBox="0 0 24 24">147          <circle cx="12" cy="8" r="4" fill="none" stroke="#5B7C90" stroke-width="2"></circle>148          <path d="M4 21c2-5 14-5 16 0" fill="none" stroke="#5B7C90" stroke-width="2"></path>149        </svg> 1 passenger150      </span>151    </div>152 153    <div class="days">154      <div class="day">155        SUN<span class="num">12</span>156      </div>157      <div class="day">158        MON<span class="num">13</span>159      </div>160      <div class="day selected">161        TUE<span class="num">14</span>162      </div>163      <div class="day">164        WED<span class="num">15</span>165      </div>166      <div class="day">167        THU<span class="num">16</span>168      </div>169      <div class="day">170        FRI<span class="num">17</span>171      </div>172    </div>173  </div>174 175  <!-- No results message -->176  <div class="info-card">177    <div class="info-illustration">[IMG: No trips illustration]</div>178    <h3>Sorry, we couldn't find any departures for this trip.</h3>179    <p>Here are alternatives we could find:</p>180  </div>181 182  <!-- First ticket -->183  <div class="ticket">184    <div class="ticket-head">185      <div class="brand">FLIX<span class="accent">BUS</span></div>186      <div class="qr"></div>187    </div>188 189    <div class="ticket-body">190      <div class="col">191        <div class="time">1:55 AM</div>192        <div class="place">Midi</div>193        <div class="sub">BRUSSELS</div>194      </div>195      <div class="arrow">196        <svg viewBox="0 0 120 20">197          <line x1="4" y1="10" x2="100" y2="10" stroke="#AFC4D4" stroke-width="3" stroke-dasharray="8 8"></line>198          <polygon points="100,5 118,10 100,15" fill="#AFC4D4"></polygon>199        </svg>200      </div>201      <div class="col">202        <div class="time">3:15 AM</div>203        <div class="place">Antwerp Rooseveltplaats</div>204        <div class="sub">ANTWERP</div>205      </div>206    </div>207 208    <div class="ticket-footer">209      <div class="footer-icons">210        <span>211          <svg viewBox="0 0 24 24" width="38" height="38">212            <rect x="3" y="7" width="16" height="10" rx="2" ry="2" fill="none" stroke="#5B7C90" stroke-width="2"></rect>213            <circle cx="7" cy="19" r="2" fill="#5B7C90"></circle>214            <circle cx="17" cy="19" r="2" fill="#5B7C90"></circle>215          </svg> Bus216        </span>217        <span>218          <svg viewBox="0 0 24 24" width="38" height="38">219            <circle cx="12" cy="12" r="9" fill="none" stroke="#5B7C90" stroke-width="2"></circle>220            <line x1="12" y1="12" x2="16" y2="14" stroke="#5B7C90" stroke-width="2"></line>221            <line x1="12" y1="6" x2="12" y2="12" stroke="#5B7C90" stroke-width="2"></line>222          </svg> 1h 20m223        </span>224      </div>225      <div class="pricebtn">$4226        <svg viewBox="0 0 24 24" width="34" height="34">227          <path d="M7 17l10-10M14 7h6v6" fill="none" stroke="#1676D1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>228        </svg>229      </div>230    </div>231  </div>232 233  <!-- Second ticket with floating chips -->234  <div class="ticket">235    <div class="ticket-head">236      <div class="brand">FLIX<span class="accent">BUS</span></div>237      <div class="qr"></div>238    </div>239 240    <div class="ticket-body">241      <div class="col">242        <div class="time">8:15 AM</div>243        <div class="place">Brux-Nord</div>244        <div class="sub">BRUSSELS</div>245      </div>246      <div class="arrow">247        <svg viewBox="0 0 120 20">248          <line x1="4" y1="10" x2="100" y2="10" stroke="#AFC4D4" stroke-width="3" stroke-dasharray="8 8"></line>249          <polygon points="100,5 118,10 100,15" fill="#AFC4D4"></polygon>250        </svg>251      </div>252      <div class="col">253        <div class="time">9:15 AM</div>254        <div class="place">Antwerp Rooseveltplaats</div>255        <div class="sub">ANTWERP</div>256      </div>257    </div>258 259    <div class="ticket-footer">260      <div class="footer-icons">261        <span>262          <svg viewBox="0 0 24 24" width="38" height="38">263            <rect x="3" y="7" width="16" height="10" rx="2" ry="2" fill="none" stroke="#5B7C90" stroke-width="2"></rect>264            <circle cx="7" cy="19" r="2" fill="#5B7C90"></circle>265            <circle cx="17" cy="19" r="2" fill="#5B7C90"></circle>266          </svg> Bus267        </span>268        <span>269          <svg viewBox="0 0 24 24" width="38" height="38">270            <circle cx="12" cy="12" r="9" fill="none" stroke="#5B7C90" stroke-width="2"></circle>271            <line x1="12" y1="12" x2="16" y2="14" stroke="#5B7C90" stroke-width="2"></line>272            <line x1="12" y1="6" x2="12" y2="12" stroke="#5B7C90" stroke-width="2"></line>273          </svg> 1h 00m274        </span>275      </div>276      <div class="pricebtn">$4277        <svg viewBox="0 0 24 24" width="34" height="34">278          <path d="M7 17l10-10M14 7h6v6" fill="none" stroke="#1676D1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>279        </svg>280      </div>281    </div>282 283    <!-- Floating chips -->284    <div class="chip">285      <svg viewBox="0 0 24 24">286        <path d="M3 18h18M6 12h12M9 6h6" stroke="#5B7C90" stroke-width="2" stroke-linecap="round"></path>287      </svg>288      Filters289    </div>290    <div class="chip">291      <svg viewBox="0 0 24 24">292        <path d="M8 6l-5 6h9l-5 6" stroke="#5B7C90" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>293      </svg>294      Earliest295    </div>296  </div>297 298  <div class="home-indicator"></div>299</div>300</body>301</html>