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>Trip Planner - Modal</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, system-ui, sans-serif;13    color: #1d2742;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #F6F7FB;21  }22 23  /* Status bar simulation */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    height: 120px;29    width: 100%;30    background: #F6F7FB;31    display: flex;32    align-items: center;33    justify-content: space-between;34    padding: 0 36px;35    box-sizing: border-box;36    color: #131a33;37    font-weight: 600;38    letter-spacing: 0.5px;39    font-size: 40px;40  }41  .status-icons {42    display: flex;43    align-items: center;44    gap: 28px;45  }46  .icon-dot {47    width: 16px; height: 16px; background:#1d2742; border-radius:50%;48    opacity: 0.6;49  }50  .wifi {51    width: 48px; height: 32px; position: relative;52  }53  .wifi::before, .wifi::after {54    content: "";55    position: absolute;56    border: 3px solid #1d2742;57    border-color: #1d2742 transparent transparent transparent;58    border-radius: 50%;59  }60  .wifi::before { width: 44px; height: 44px; top: -6px; left: 0; opacity: 0.7; }61  .wifi::after { width: 28px; height: 28px; top: 4px; left: 8px; opacity: 0.9; }62  .battery {63    width: 54px; height: 28px; border: 3px solid #1d2742; border-radius:6px; position: relative;64  }65  .battery::before {66    content:"";67    position:absolute; right:-8px; top:8px; width:6px; height:12px; background:#1d2742; border-radius:2px;68  }69  .battery::after {70    content:"";71    position:absolute; left:4px; top:4px; width:38px; height:18px; background:#1d2742;72  }73 74  /* App content */75  .page {76    position: absolute;77    top: 140px;78    left: 0;79    right: 0;80    padding: 0 48px 48px;81    box-sizing: border-box;82  }83  .close-btn {84    width: 72px; height: 72px;85    display: flex; align-items: center; justify-content: center;86    color: #1d2742; font-size: 64px; line-height: 1;87    margin-left: 8px;88  }89 90  .title {91    margin-top: 40px;92    font-size: 56px;93    font-weight: 800;94    line-height: 1.2;95    color: #162342;96  }97 98  .field-label {99    margin-top: 28px;100    font-size: 30px;101    color: #5b647a;102  }103  .input {104    margin-top: 14px;105    border: 2px solid #c9cedb;106    border-radius: 22px;107    height: 140px;108    display: flex; align-items: center;109    padding: 0 24px;110    box-sizing: border-box;111    background: #ffffff;112  }113  .search-icon {114    width: 56px; height: 56px; margin-right: 18px;115  }116  .search-icon svg { width: 100%; height: 100%; }117  .chip {118    display: inline-flex;119    align-items: center;120    gap: 14px;121    padding: 20px 28px;122    background: #e9edf5;123    color: #243154;124    border-radius: 24px;125    font-size: 36px;126    font-weight: 600;127  }128  .chip .close-x {129    width: 28px; height: 28px; border-radius: 50%;130    background: #c0c6d6; color: #ffffff; font-size: 24px; line-height: 28px; text-align: center;131  }132 133  .subtitle {134    margin-top: 38px;135    font-size: 32px;136    color: #27335a;137    font-weight: 700;138  }139  .chip-grid {140    margin-top: 18px;141    display: flex; flex-wrap: wrap;142    gap: 22px;143  }144  .chip.secondary {145    background: #eef1f7;146    font-weight: 600;147    color: #2f3b63;148    padding: 18px 26px;149  }150 151  .option-card {152    margin-top: 34px;153    border: 2px solid #c9cedb;154    border-radius: 18px;155    height: 140px;156    display: flex; align-items: center;157    padding: 0 26px;158    box-sizing: border-box;159    background: #ffffff;160    gap: 24px;161  }162  .opt-icon {163    width: 64px; height: 64px; color:#1d2742;164  }165  .opt-label {166    font-size: 32px; color: #2c375d; font-weight: 700;167  }168 169  /* CTA section near bottom */170  .cta-note {171    text-align: center;172    margin-top: 520px;173    font-size: 28px;174    color: #3b4a7a;175    opacity: 0.85;176  }177  .cta-btn {178    margin: 22px auto 18px;179    width: 940px;180    height: 120px;181    border-radius: 22px;182    background: #273d96;183    color: #ffffff;184    display: flex; align-items: center; justify-content: center;185    font-size: 40px; font-weight: 700;186    box-shadow: 0 8px 16px rgba(39,61,150,0.25);187  }188  .cta-link {189    text-align: center;190    font-size: 36px;191    color: #283258;192    font-weight: 600;193  }194 195  /* Bottom gesture bar simulation */196  .gesture-bar {197    position: absolute;198    bottom: 0; left: 0; width: 100%; height: 132px;199    background: #000;200    display: flex; align-items: center; justify-content: center;201  }202  .gesture-pill {203    width: 220px; height: 16px; background:#fff; border-radius: 10px; opacity: 0.9;204  }205 206  /* Modal overlay */207  .overlay {208    position: absolute;209    left: 0; top: 0; width: 100%; height: 100%;210    background: rgba(0,0,0,0.38);211  }212  .modal {213    position: absolute;214    left: 50%;215    transform: translateX(-50%);216    top: 840px;217    width: 900px;218    background: #ffffff;219    border-radius: 26px;220    box-shadow: 0 40px 90px rgba(0,0,0,0.35);221    padding: 48px 44px 40px;222    box-sizing: border-box;223  }224  .modal-title {225    text-align: center;226    font-size: 48px;227    font-weight: 800;228    color: #1d2742;229    margin-bottom: 24px;230  }231  .picker {232    margin-top: 16px;233  }234  .picker-row {235    text-align: center;236    font-size: 44px;237    padding: 34px 0;238    color: #b7bfd3;239    font-weight: 700;240  }241  .picker-row.selected {242    color: #19233f;243  }244  .separator {245    height: 2px;246    background: #d9deeb;247    margin: 0 8px;248  }249  .modal-actions {250    display: flex;251    justify-content: flex-end;252    gap: 40px;253    margin-top: 24px;254  }255  .btn-text {256    font-size: 40px;257    font-weight: 700;258    color: #7a8299;259  }260  .btn-primary {261    color: #2a56ff;262  }263</style>264</head>265<body>266<div id="render-target">267  <!-- Status bar -->268  <div class="status-bar">269    <div>12:25</div>270    <div class="status-icons">271      <div class="icon-dot"></div>272      <div class="icon-dot" style="opacity:.45;"></div>273      <div class="icon-dot" style="opacity:.45;"></div>274      <div class="icon-dot" style="opacity:.45;"></div>275      <div class="wifi"></div>276      <div class="battery"></div>277    </div>278  </div>279 280  <!-- Page content -->281  <div class="page">282    <div class="close-btn">×</div>283 284    <div class="title">Create an itinerary for your next trip with ease!</div>285 286    <div class="field-label">Add destinations</div>287    <div class="input">288      <div class="search-icon">289        <svg viewBox="0 0 24 24">290          <circle cx="10" cy="10" r="7" stroke="#1d2742" stroke-width="2.2" fill="none"></circle>291          <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#1d2742" stroke-width="2.2" stroke-linecap="round"></line>292        </svg>293      </div>294      <div class="chip">295        Vancouver296        <div class="close-x">×</div>297      </div>298    </div>299 300    <div class="subtitle">You may be interested in the following destinations</div>301    <div class="chip-grid">302      <div class="chip secondary">Vancouver</div>303      <div class="chip secondary">Dubai</div>304      <div class="chip secondary">Faridabad</div>305      <div class="chip secondary">Phnom Penh</div>306    </div>307 308    <div class="option-card">309      <div class="opt-icon">310        <svg viewBox="0 0 24 24">311          <circle cx="12" cy="12" r="9" stroke="#1d2742" stroke-width="2" fill="none"></circle>312          <line x1="12" y1="12" x2="12" y2="6" stroke="#1d2742" stroke-width="2" stroke-linecap="round"></line>313          <line x1="12" y1="12" x2="18" y2="12" stroke="#1d2742" stroke-width="2" stroke-linecap="round"></line>314        </svg>315      </div>316      <div class="opt-label">Trip length</div>317    </div>318 319    <div class="option-card">320      <div class="opt-icon">321        <svg viewBox="0 0 24 24">322          <rect x="3" y="5" width="18" height="16" rx="2" ry="2" stroke="#1d2742" stroke-width="2" fill="none"></rect>323          <line x1="3" y1="9" x2="21" y2="9" stroke="#1d2742" stroke-width="2"></line>324          <line x1="8" y1="3" x2="8" y2="7" stroke="#1d2742" stroke-width="2" stroke-linecap="round"></line>325          <line x1="16" y1="3" x2="16" y2="7" stroke="#1d2742" stroke-width="2" stroke-linecap="round"></line>326        </svg>327      </div>328      <div class="opt-label">Start date</div>329    </div>330 331    <div class="cta-note">You can always edit it later</div>332    <div class="cta-btn">Create Itinerary With AI</div>333    <div class="cta-link">Create Itinerary Manually</div>334  </div>335 336  <!-- Dim overlay and modal -->337  <div class="overlay"></div>338  <div class="modal">339    <div class="modal-title">Trip length</div>340    <div class="picker">341      <div class="picker-row">2</div>342      <div class="separator"></div>343      <div class="picker-row selected">3</div>344      <div class="separator"></div>345      <div class="picker-row">4</div>346    </div>347    <div class="modal-actions">348      <div class="btn-text">Cancel</div>349      <div class="btn-text btn-primary">Done</div>350    </div>351  </div>352 353  <!-- Bottom gesture bar -->354  <div class="gesture-bar">355    <div class="gesture-pill"></div>356  </div>357</div>358</body>359</html>