GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Journey Details - Mock UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #1b2a4a; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #F2F4F8;13    border-radius: 34px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);14  }15  /* Top app bar */16  .topbar {17    position: relative;18    background: #172B63;19    height: 360px;20    color: #fff;21    padding: 24px 40px 0 40px;22  }23  .status-row {24    display: flex; align-items: center; gap: 18px;25    font-weight: 600; font-size: 34px;26    opacity: 0.95;27  }28  .status-icons { margin-left: auto; display: flex; align-items: center; gap: 26px; }29  .title-wrap {30    display: flex; align-items: center; margin-top: 36px;31  }32  .icon-btn {33    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;34    border-radius: 36px; background: rgba(255,255,255,0.1);35  }36  .screen-title {37    margin-left: 24px; margin-right: 24px;38  }39  .screen-title h1 {40    margin: 0; font-size: 48px; line-height: 1.25; font-weight: 800; letter-spacing: 0.2px;41    color: #fff;42  }43  .screen-title .sub {44    margin-top: 8px; font-size: 28px; color: #C9D4F2; font-weight: 600;45  }46  .share-btn { margin-left: auto; }47 48  /* Route card overlapping the header */49  .route-card {50    position: absolute; left: 40px; right: 40px; top: 300px;51    background: #fff; border-radius: 20px;52    box-shadow: 0 10px 20px rgba(20,35,75,0.15);53    padding: 30px 34px;54    display: flex; align-items: center; gap: 22px;55  }56  .time {57    font-size: 44px; font-weight: 800; color: #23335C;58  }59  .pin {60    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;61  }62  .place {63    font-size: 42px; font-weight: 800; color: #23335C;64    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;65  }66 67  /* Info box */68  .content {69    padding: 180px 40px 40px 40px; /* push below the overlapping card */70  }71  .info-box {72    background: #EAF2FF; color: #172B63;73    border: 2px solid #92AED8; border-radius: 22px;74    padding: 28px;75  }76  .info-head {77    display: flex; align-items: center; gap: 18px;78    font-size: 38px; font-weight: 800;79    margin-bottom: 16px;80  }81  .info-desc {82    font-size: 32px; line-height: 1.45; color: #24355F; font-weight: 600;83  }84 85  /* Section headings */86  .section-title {87    font-size: 44px; font-weight: 800; color: #172B63; margin: 36px 0 22px 0;88  }89 90  /* Fare cards */91  .fare-row {92    display: flex; gap: 22px;93  }94  .fare-card {95    flex: 1; border-radius: 22px; padding: 28px;96    border: 2px solid #9FB6DA; background: #DAE7FF;97  }98  .fare-card.disabled {99    background: #F4F5F8; border-color: #E0E3EA; color: #C8CDD8;100  }101  .fare-name {102    font-size: 36px; font-weight: 800; color: #172B63; margin-bottom: 12px;103  }104  .fare-price {105    font-size: 34px; font-weight: 800; color: #2A4A82;106  }107  .fare-note {108    font-size: 32px; font-weight: 700; color: #B7BDCB;109  }110 111  /* Fare terms */112  .terms {113    margin-top: 14px;114    font-size: 32px; line-height: 1.6; color: #24375F; font-weight: 600;115  }116 117  /* Summary card */118  .summary {119    margin-top: 36px; background: #fff; border-radius: 18px;120    box-shadow: 0 4px 10px rgba(0,0,0,0.06);121    padding: 30px 34px;122    border-top: 2px solid #E5E8EF;123  }124  .sum-row {125    display: flex; align-items: center;126    font-size: 34px; color: #23335C; font-weight: 700;127    padding: 10px 0;128  }129  .sum-row .label { opacity: 0.8; }130  .sum-row .value { margin-left: auto; color: #23335C; }131  .sum-total {132    display: flex; align-items: baseline; padding-top: 18px; border-top: 2px solid #E5E8EF;133  }134  .sum-total .label {135    font-size: 36px; font-weight: 800; color: #172B63;136  }137  .sum-total .sub {138    font-size: 30px; font-weight: 700; color: #8FA0BF; margin-left: 10px;139  }140  .sum-total .value {141    margin-left: auto; font-size: 44px; font-weight: 900; color: #172B63;142  }143 144  /* CTA button */145  .cta-area { padding: 28px 40px 120px 40px; }146  .cta-btn {147    width: 100%; height: 120px; background: #EA6D6A; color: #fff;148    border: none; border-radius: 28px; font-size: 40px; font-weight: 800;149    box-shadow: 0 10px 18px rgba(234,109,106,0.3);150  }151 152  /* Bottom navigation / home indicator */153  .bottom-bar {154    position: absolute; left: 0; right: 0; bottom: 0;155    height: 120px; background: #0E1D47;156  }157  .home-indicator {158    position: absolute; left: 50%; transform: translateX(-50%);159    bottom: 30px; width: 320px; height: 12px; border-radius: 12px; background: #D9DDE7;160    opacity: 0.85;161  }162 163  /* Simple SVG coloring */164  svg { display: block; }165  .icon-white path, .icon-white circle { stroke: #fff; fill: none; }166  .icon-fill-white path { fill: #fff; }167  .icon-pin path { fill: #EA6D6A; }168  .icon-info circle { fill: #F7B94E; }169  .icon-info rect { fill: #172B63; }170</style>171</head>172<body>173<div id="render-target">174 175  <div class="topbar">176    <div class="status-row">177      <div>9:26</div>178      <div class="status-icons">179        <!-- simple status icons -->180        <svg width="32" height="32" class="icon-fill-white" viewBox="0 0 24 24"><path d="M12 2a7 7 0 100 14 7 7 0 000-14zm0 0"/></svg>181        <svg width="32" height="32" class="icon-white" viewBox="0 0 24 24"><path d="M4 12h16M12 4v16"/></svg>182        <svg width="32" height="32" class="icon-fill-white" viewBox="0 0 24 24"><path d="M12 2l4 8-8 0z"/></svg>183        <svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="#C9D4F2"/></svg>184        <svg width="36" height="36" class="icon-white" viewBox="0 0 24 24"><circle cx="12" cy="8" r="3" fill="#fff"/><path d="M5 22c0-4 3-7 7-7s7 3 7 7" stroke="#fff" stroke-width="2" fill="none"/></svg>185        <svg width="36" height="36" class="icon-fill-white" viewBox="0 0 24 24"><path d="M6 8h12v2H6zm2 4h10v2H8zm4 4h6v2h-6z"/></svg>186        <div style="font-size:28px; font-weight:800;">100%</div>187      </div>188    </div>189 190    <div class="title-wrap">191      <div class="icon-btn">192        <!-- back arrow -->193        <svg width="32" height="32" viewBox="0 0 24 24">194          <path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>195        </svg>196      </div>197      <div class="screen-title">198        <h1>New York, NY › New Hyde Park, NY</h1>199        <div class="sub">Wed, Nov 22, 1 passenger</div>200      </div>201      <div class="icon-btn share-btn">202        <!-- share icon -->203        <svg width="32" height="32" viewBox="0 0 24 24">204          <path d="M18 8a3 3 0 10-3-3M6 14a3 3 0 10-3-3M18 20a3 3 0 10-3-3" stroke="#fff" stroke-width="2" fill="none"/>205          <path d="M15 6L9 10M9 14l6 4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>206        </svg>207      </div>208    </div>209  </div>210 211  <!-- Route card overlapping -->212  <div class="route-card">213    <div class="time">3:35 PM</div>214    <div class="pin">215      <!-- location pin -->216      <svg width="40" height="40" class="icon-pin" viewBox="0 0 24 24">217        <path d="M12 2c-3.3 0-6 2.7-6 6 0 4.7 6 12 6 12s6-7.3 6-12c0-3.3-2.7-6-6-6zm0 8a2 2 0 110-4 2 2 0 010 4z"/>218      </svg>219    </div>220    <div class="place">New York, Hillside Ave / 219...</div>221  </div>222 223  <div class="content">224    <div class="info-box">225      <div class="info-head">226        <!-- info icon -->227        <svg width="46" height="46" class="icon-info" viewBox="0 0 24 24">228          <circle cx="12" cy="12" r="11"/>229          <rect x="11" y="7" width="2" height="2" rx="1"/>230          <rect x="11" y="10" width="2" height="8" rx="1"/>231        </svg>232        <div>Journey information</div>233      </div>234      <div class="info-desc">235        This bus arrives at New York, Hillside Ave / 219th St (Queens Village), New York, NY, about 5 km from New Hyde Park, NY.236      </div>237    </div>238 239    <div class="section-title">Fare conditions</div>240 241    <div class="fare-row">242      <div class="fare-card">243        <div class="fare-name">Standard</div>244        <div class="fare-price">+$0</div>245      </div>246      <div class="fare-card disabled">247        <div class="fare-note">There is only 1 fare available for this journey</div>248      </div>249    </div>250 251    <div class="section-title" style="margin-top: 34px;">Fare terms</div>252    <div class="terms">253      Standard<br>254      Ticket is only valid for the chosen bus/train. Ticket can be cancelled up to 30 days before departure for free. A fee of up to €5 will be charged when cancelling 15 minutes before departure. Ticket will be refunded as a coupon for the ticket price and will be valid for 12 months. Visit the Flixbus website for more information.255    </div>256 257    <div class="summary">258      <div class="sum-row">259        <div class="label">Tickets (1 passenger)</div>260        <div class="value">$12.99</div>261      </div>262      <div class="sum-total">263        <div class="label">Total</div>264        <div class="sub">(taxes included)</div>265        <div class="value">$12.99</div>266      </div>267    </div>268 269    <div class="cta-area">270      <button class="cta-btn">Go to Flixbus</button>271    </div>272  </div>273 274  <div class="bottom-bar">275    <div class="home-indicator"></div>276  </div>277 278</div>279</body>280</html>