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>My booking - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    color: #1f2937;16  }17 18  /* Top status and app bars */19  .status-bar {20    height: 90px;21    background: #ffffff;22    opacity: 0.98;23    display: flex;24    align-items: center;25    padding: 0 32px;26    color: #6b7280;27    font-size: 32px;28    letter-spacing: 1px;29  }30  .app-bar {31    height: 120px;32    display: flex;33    align-items: center;34    padding: 0 28px;35    border-bottom: 1px solid #ececec;36  }37  .app-bar .title {38    font-size: 54px;39    font-weight: 700;40    margin-left: 18px;41  }42  .app-actions {43    margin-left: auto;44    display: flex;45    gap: 28px;46  }47  .icon-btn {48    width: 72px; height: 72px;49    display: flex; align-items: center; justify-content: center;50    border-radius: 50%;51  }52 53  /* Content area */54  .content {55    padding: 36px 40px 260px 40px;56  }57  .route-card {58    padding: 16px 0 24px 0;59    border-bottom: 1px solid #eff0f2;60  }61  .route-row {62    display: grid;63    grid-template-columns: 1fr 110px 1fr;64    align-items: center;65    column-gap: 12px;66  }67  .city {68    font-size: 60px;69    font-weight: 700;70    color: #1f2937;71  }72  .arrow {73    text-align: center;74    color: #6b7280;75    font-size: 60px;76  }77  .date-time {78    margin-top: 8px;79    font-size: 34px;80    color: #6b7280;81  }82  .time-blue { color: #1a73e8; font-weight: 600; }83  .duration-pill {84    display: inline-flex;85    align-items: center;86    gap: 10px;87    padding: 8px 14px;88    border-radius: 22px;89    background: #f3f4f6;90    color: #6b7280;91    font-size: 30px;92    margin-top: 12px;93  }94  .details-btn {95    margin: 32px 0 12px;96    background: #f3f5f7;97    color: #374151;98    border-radius: 20px;99    text-align: center;100    padding: 28px 20px;101    font-size: 40px;102    font-weight: 600;103  }104 105  .section-title {106    margin-top: 22px;107    font-size: 48px;108    font-weight: 800;109  }110  .section-sub {111    margin-top: 6px;112    font-size: 32px;113    color: #6b7280;114  }115 116  /* Traveler cards */117  .traveler-card {118    margin-top: 28px;119    padding: 28px;120    border: 4px solid #1a73e8;121    border-radius: 26px;122    display: flex;123    align-items: flex-start;124    gap: 22px;125    background: #ffffff;126    box-shadow: 0 2px 0 rgba(26,115,232,0.08);127  }128  .traveler-card:nth-of-type(2) {129    border-color: #0e7490; /* slight different tone for visual variety */130  }131  .check-circle {132    width: 56px; height: 56px; border-radius: 50%;133    background: #1a73e8; color: #fff;134    display: flex; align-items: center; justify-content: center;135    margin-top: 6px;136    flex-shrink: 0;137    box-shadow: inset 0 0 0 3px #e6f0ff;138    font-size: 34px; font-weight: 900;139  }140  .traveler-info { flex: 1; }141  .traveler-name {142    font-size: 44px; font-weight: 700; color: #111827;143  }144  .traveler-dob { font-size: 32px; color: #6b7280; margin-top: 6px; }145  .edit-link {146    font-size: 36px;147    color: #0f766e;148    font-weight: 700;149    margin-left: auto;150    padding-top: 8px;151  }152  .add-traveler {153    margin: 34px 0;154    background: #e8edef;155    color: #0f766e;156    font-weight: 700;157    border-radius: 20px;158    text-align: center;159    padding: 26px 20px;160    font-size: 40px;161  }162 163  /* Bottom summary bar */164  .summary {165    position: absolute;166    left: 0; right: 0; bottom: 70px;167    background: #ffffff;168    border-top-left-radius: 36px;169    border-top-right-radius: 36px;170    box-shadow: 0 -10px 30px rgba(0,0,0,0.08);171    padding: 26px 30px 30px;172  }173  .summary-top {174    height: 10px; width: 180px; background: #e5e7eb;175    border-radius: 8px; margin: 8px auto 26px;176  }177  .summary-row {178    display: flex; align-items: center;179    font-size: 40px; margin-bottom: 20px;180  }181  .summary-row .amount {182    margin-left: auto; font-weight: 800;183  }184  .continue-btn {185    background: #0f7b6f;186    color: #fff; text-align: center;187    padding: 34px 20px;188    font-size: 44px;189    border-radius: 18px;190    font-weight: 700;191  }192 193  /* Home indicator */194  .home-indicator {195    position: absolute;196    bottom: 18px; left: 50%;197    transform: translateX(-50%);198    width: 240px; height: 10px;199    background: #e5e7eb;200    border-radius: 8px;201  }202 203  /* Modal overlay */204  .overlay {205    position: absolute;206    inset: 0;207    background: rgba(0,0,0,0.45);208  }209  .dialog {210    width: 920px;211    background: #ffffff;212    border-radius: 20px;213    box-shadow: 0 12px 40px rgba(0,0,0,0.28);214    position: absolute;215    left: 50%; top: 47%;216    transform: translate(-50%, -50%);217    padding: 36px 36px 26px;218  }219  .dialog p {220    font-size: 42px;221    color: #111827;222    margin: 0 0 26px 0;223    line-height: 1.3;224  }225  .dialog .actions {226    display: flex; justify-content: flex-end; gap: 46px;227    padding-top: 8px;228  }229  .dialog .text-btn {230    font-size: 40px; font-weight: 800; color: #0f766e;231  }232  /* Util icon styles */233  .icon {234    width: 48px; height: 48px;235  }236</style>237</head>238<body>239<div id="render-target">240 241  <!-- Status bar (placeholder) -->242  <div class="status-bar">243    <div>8:10</div>244    <div style="margin-left: 20px;">83°</div>245    <div style="margin-left: auto;">◦ ◦ ◦</div>246  </div>247 248  <!-- App bar -->249  <div class="app-bar">250    <div class="icon-btn" aria-label="Back">251      <svg class="icon" viewBox="0 0 24 24" fill="#111827">252        <path d="M15.5 4.5 7 12l8.5 7.5-1.5 1.5L4 12l10-9 1.5 1.5z"/>253      </svg>254    </div>255    <div class="title">My booking</div>256    <div class="app-actions">257      <div class="icon-btn" aria-label="Share">258        <svg class="icon" viewBox="0 0 24 24" fill="#111827">259          <path d="M16 5a3 3 0 1 0 2.9 2.3L8.9 12.7a3 3 0 1 0 0 2.6l10-5.4A3 3 0 1 0 16 5z"/>260        </svg>261      </div>262      <div class="icon-btn" aria-label="Help">263        <svg class="icon" viewBox="0 0 24 24" fill="#111827">264          <circle cx="12" cy="12" r="10"></circle>265          <path d="M11.9 17h.2c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 .8 1zM12 6a4 4 0 0 0-4 3h2a2 2 0 0 1 4 .2c0 1.1-.7 1.6-1.6 2.2-.9.6-1.4 1.1-1.4 2.6h2c0-.8.2-1 .9-1.5.9-.6 2.1-1.4 2.1-3.3A3.9 3.9 0 0 0 12 6z" fill="#fff"/>266        </svg>267      </div>268    </div>269  </div>270 271  <!-- Content -->272  <div class="content">273    <div class="route-card">274      <div class="route-row">275        <div>276          <div class="city">Paris</div>277          <div class="date-time">Fri, Oct 20</div>278          <div class="date-time time-blue">8:00 AM</div>279        </div>280        <div class="arrow">→</div>281        <div style="text-align: right;">282          <div class="city">Rome</div>283          <div class="date-time">Fri, Oct 20</div>284          <div class="date-time time-blue">10:00 AM</div>285        </div>286      </div>287      <div class="duration-pill" style="width: fit-content;">288        <svg viewBox="0 0 24 24" width="28" height="28" fill="#6b7280">289          <circle cx="12" cy="12" r="9" stroke="none"></circle>290          <path d="M12 7v5l4 2" stroke="#fff" stroke-width="2" fill="none"/>291        </svg>292        2h293      </div>294    </div>295 296    <div class="route-card" style="border-bottom: 0;">297      <div class="route-row">298        <div>299          <div class="city">Rome</div>300          <div class="date-time">Sun, Oct 22</div>301          <div class="date-time time-blue">6:50 AM</div>302        </div>303        <div class="arrow">→</div>304        <div style="text-align: right;">305          <div class="city">Paris</div>306          <div class="date-time">Sun, Oct 22</div>307          <div class="date-time time-blue">9:05 AM</div>308        </div>309      </div>310      <div class="duration-pill" style="width: fit-content;">311        <svg viewBox="0 0 24 24" width="28" height="28" fill="#6b7280">312          <circle cx="12" cy="12" r="9" stroke="none"></circle>313          <path d="M12 7v5l4 2" stroke="#fff" stroke-width="2" fill="none"/>314        </svg>315        2h 15m316      </div>317 318      <div class="details-btn">Show details</div>319    </div>320 321    <div class="section-title">Who’s traveling?</div>322    <div class="section-sub">Select travelers</div>323 324    <div class="traveler-card">325      <div class="check-circle">✓</div>326      <div class="traveler-info">327        <div class="traveler-name">Claire Blanc</div>328        <div class="traveler-dob">May 12, 1979</div>329      </div>330      <div class="edit-link">Edit</div>331    </div>332 333    <div class="traveler-card">334      <div class="check-circle">✓</div>335      <div class="traveler-info">336        <div class="traveler-name">Marc Blanc</div>337        <div class="traveler-dob">Mar 8, 2005</div>338      </div>339      <div class="edit-link">Edit</div>340    </div>341 342    <div class="add-traveler">Add new traveler</div>343  </div>344 345  <!-- Bottom summary -->346  <div class="summary">347    <div class="summary-top"></div>348    <div class="summary-row">349      <div>Total due</div>350      <div class="amount">CHF915.80</div>351    </div>352    <div class="continue-btn">Continue</div>353  </div>354 355  <div class="home-indicator"></div>356 357  <!-- Modal overlay and dialog -->358  <div class="overlay"></div>359  <div class="dialog" role="dialog" aria-modal="true">360    <p>Do you really want to leave your reservation before it's finished?</p>361    <div class="actions">362      <div class="text-btn">NO</div>363      <div class="text-btn">YES</div>364    </div>365  </div>366 367</div>368</body>369</html>