GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Time & Date Picker Modal</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #f6f5f8;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15    color: #1d1d1d;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 18px;22    left: 24px;23    right: 24px;24    height: 48px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #ffffff;29    z-index: 1;30  }31  .status-right {32    display: flex;33    gap: 18px;34    align-items: center;35  }36  .status-icon { width: 22px; height: 22px; opacity: 0.95; }37 38  /* Hero background */39  .hero {40    position: absolute;41    top: 72px;42    left: 0;43    width: 1080px;44    height: 640px;45    background: #E0E0E0;46    border-top: 0;47    border-bottom: 1px solid #BDBDBD;48    display: flex;49    align-items: flex-end;50    justify-content: flex-start;51    overflow: hidden;52  }53  .hero span {54    margin: 0 0 28px 48px;55    font-size: 78px;56    font-weight: 700;57    color: rgba(255,255,255,0.8);58    text-shadow: 0 2px 8px rgba(0,0,0,0.35);59  }60  .hero::before {61    content: "[IMG: Scenic Mountain Landscape]";62    position: absolute;63    inset: 0;64    display: flex;65    align-items: center;66    justify-content: center;67    color: #757575;68    font-weight: 600;69    font-size: 26px;70  }71  .hero::after {72    content: "";73    position: absolute;74    inset: 0;75    background: linear-gradient(to bottom, rgba(0,0,0,0.28), rgba(0,0,0,0.10));76    pointer-events: none;77  }78 79  /* Background content preview (beneath modal) */80  .content-card {81    position: absolute;82    top: 862px;83    left: 48px;84    width: 984px;85    height: 300px;86    background: #ffffff;87    border-radius: 16px;88    box-shadow: 0 6px 18px rgba(0,0,0,0.06);89  }90  .content-card .cta {91    position: absolute;92    bottom: 24px;93    left: 24px;94    width: 300px;95    height: 84px;96    background: #221a3f;97    color: #ffffff;98    border-radius: 12px;99    display: flex;100    align-items: center;101    justify-content: center;102    font-size: 32px;103    font-weight: 700;104  }105 106  /* Bottom navigation */107  .bottom-nav {108    position: absolute;109    bottom: 60px;110    left: 0;111    width: 1080px;112    height: 140px;113    background: rgba(255,255,255,0.92);114    border-top: 1px solid #e7e7ea;115    display: flex;116    justify-content: space-around;117    align-items: center;118  }119  .nav-item {120    display: flex;121    flex-direction: column;122    align-items: center;123    gap: 8px;124    color: #2a2146;125    font-size: 28px;126  }127  .nav-item svg { width: 40px; height: 40px; opacity: 0.75; }128 129  /* Modal overlay & card */130  .overlay {131    position: absolute;132    inset: 0;133    background: rgba(0,0,0,0.35);134  }135  .modal {136    position: absolute;137    top: 780px;138    left: 60px;139    width: 960px;140    background: #ffffff;141    border-radius: 18px;142    box-shadow: 0 24px 44px rgba(0,0,0,0.30);143    overflow: hidden;144  }145  .modal-inner { padding: 44px 54px 36px 54px; }146  .modal-header {147    display: flex;148    justify-content: space-between;149    align-items: flex-end;150  }151  .tab-title {152    font-size: 38px;153    font-weight: 800;154    letter-spacing: 0.5px;155  }156  .tab-title.active { color: #2a2146; }157  .tab-title.inactive { color: #a3a3aa; font-weight: 700; }158  .active-underline {159    width: 360px;160    height: 4px;161    background: #2a2146;162    border-radius: 2px;163    margin-top: 22px;164  }165 166  /* Time selector */167  .time-row {168    margin-top: 64px;169    display: flex;170    align-items: center;171    gap: 40px;172  }173  .time-column {174    width: 220px;175    text-align: center;176  }177  .time-fade {178    font-size: 36px;179    color: #c7c9d6;180    margin: 16px 0;181    height: 42px;182    line-height: 42px;183  }184  .time-current {185    font-size: 56px;186    font-weight: 800;187    color: #2a2146;188    height: 66px;189    line-height: 66px;190    margin: 8px 0;191    border-bottom: 6px solid #2a2146;192    display: inline-block;193    padding: 0 12px;194    border-radius: 2px;195  }196  .colon {197    font-size: 56px;198    font-weight: 800;199    color: #2a2146;200    margin-top: -8px;201  }202  .now-btn {203    margin-left: auto;204    width: 170px;205    height: 80px;206    background: #f7b81f;207    color: #2a2146;208    font-weight: 800;209    border-radius: 12px;210    display: flex;211    align-items: center;212    justify-content: center;213    font-size: 32px;214    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);215  }216 217  .divider {218    height: 1px;219    background: #ececef;220    margin: 40px -54px 24px -54px;221  }222 223  /* Date row */224  .date-row {225    display: flex;226    align-items: center;227    justify-content: space-between;228    padding: 12px 0 20px 0;229  }230  .date-text {231    font-size: 36px;232    font-weight: 700;233    color: #2a2146;234  }235  .chev {236    width: 42px;237    height: 42px;238  }239  .date-divider {240    height: 1px;241    background: #ececef;242    margin: 20px -54px 0 -54px;243  }244 245  /* Action buttons */246  .actions {247    padding: 28px 54px 44px 54px;248    display: flex;249    justify-content: flex-end;250    gap: 24px;251  }252  .btn {253    height: 92px;254    padding: 0 48px;255    border-radius: 14px;256    font-size: 34px;257    font-weight: 800;258    display: inline-flex;259    align-items: center;260    justify-content: center;261    box-shadow: 0 2px 0 rgba(0,0,0,0.05);262  }263  .btn.cancel {264    background: #ffffff;265    color: #2a2146;266    border: 2px solid #e5e5ea;267  }268  .btn.done {269    background: #f7b81f;270    color: #2a2146;271    border: none;272  }273</style>274</head>275<body>276<div id="render-target">277 278  <!-- Status bar -->279  <div class="status-bar">280    <div style="font-size:32px; font-weight:700;">11:32</div>281    <div class="status-right">282      <!-- simple dots to mimic indicators -->283      <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#ffffff"/></svg>284      <svg class="status-icon" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="3" fill="#ffffff"/></svg>285      <!-- wifi -->286      <svg class="status-icon" viewBox="0 0 24 24">287        <path d="M12 18l2 2-2 2-2-2 2-2z" fill="#ffffff"/>288        <path d="M3 9c5-5 13-5 18 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>289        <path d="M6 12c3-3 9-3 12 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>290      </svg>291      <!-- battery -->292      <svg class="status-icon" viewBox="0 0 28 24">293        <rect x="2" y="6" width="20" height="12" rx="2" stroke="#ffffff" stroke-width="2" fill="none"/>294        <rect x="4" y="8" width="14" height="8" rx="1" fill="#ffffff"/>295        <rect x="22" y="10" width="4" height="4" rx="1" fill="#ffffff"/>296      </svg>297    </div>298  </div>299 300  <!-- Hero background with title -->301  <div class="hero">302    <span>Where to next?</span>303  </div>304 305  <!-- A sample content card in the background -->306  <div class="content-card">307    <div class="cta">Book seats</div>308  </div>309 310  <!-- Modal overlay and card -->311  <div class="overlay"></div>312  <div class="modal">313    <div class="modal-inner">314      <div class="modal-header">315        <div>316          <div class="tab-title active">DEPARTURE</div>317          <div class="active-underline"></div>318        </div>319        <div class="tab-title inactive">ARRIVAL</div>320      </div>321 322      <div class="time-row">323        <div class="time-column">324          <div class="time-fade">10</div>325          <div class="time-current">11</div>326          <div class="time-fade">12</div>327        </div>328 329        <div class="colon">:</div>330 331        <div class="time-column">332          <div class="time-fade">33</div>333          <div class="time-current">34</div>334          <div class="time-fade">35</div>335        </div>336 337        <div class="now-btn">Now</div>338      </div>339 340      <div class="divider"></div>341 342      <div class="date-row">343        <svg class="chev" viewBox="0 0 24 24">344          <path d="M15 5l-7 7 7 7" stroke="#f7b81f" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>345        </svg>346        <div class="date-text">Mon 25 Sep 2023</div>347        <svg class="chev" viewBox="0 0 24 24">348          <path d="M9 5l7 7-7 7" stroke="#f7b81f" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>349        </svg>350      </div>351 352      <div class="date-divider"></div>353    </div>354 355    <div class="actions">356      <div class="btn cancel">CANCEL</div>357      <div class="btn done">DONE</div>358    </div>359  </div>360 361  <!-- Bottom navigation bar -->362  <div class="bottom-nav">363    <div class="nav-item">364      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#2a2146"/></svg>365      <div>Planner</div>366    </div>367    <div class="nav-item">368      <svg viewBox="0 0 24 24"><path d="M4 18h16v-8H4z" fill="#c9c6d6"/><path d="M8 10l4-4 4 4" stroke="#2a2146" stroke-width="2" fill="none"/></svg>369      <div>My Trip</div>370    </div>371    <div class="nav-item">372      <svg viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="2" fill="#c9c6d6"/><circle cx="12" cy="12" r="3" fill="#2a2146"/></svg>373      <div>My Pass</div>374    </div>375    <div class="nav-item">376      <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16" stroke="#2a2146" stroke-width="2" stroke-linecap="round"/></svg>377      <div>More</div>378    </div>379  </div>380 381</div>382</body>383</html>