GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Time & Date Picker Modal</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #f4f1f7;15    border-radius: 0;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 110px;25    padding: 24px 36px;26    color: #ffffff;27    display: flex;28    align-items: center;29    justify-content: space-between;30    z-index: 2;31  }32  .status-right {33    display: flex;34    gap: 24px;35    align-items: center;36  }37  .status-dot {38    width: 22px;39    height: 22px;40    background: #fff;41    border-radius: 50%;42    opacity: 0.9;43  }44  .status-icon {45    width: 34px;46    height: 22px;47    border-radius: 3px;48    border: 3px solid #fff;49    position: relative;50    opacity: 0.95;51  }52  .status-icon::after {53    content: "";54    position: absolute;55    right: -12px;56    top: 6px;57    width: 6px;58    height: 10px;59    background: #fff;60    border-radius: 2px;61  }62 63  /* Background hero */64  .hero {65    position: absolute;66    top: 0;67    left: 0;68    width: 1080px;69    height: 620px;70    background: #E0E0E0;71    border-bottom: 1px solid #BDBDBD;72    display: flex;73    align-items: flex-end;74    justify-content: flex-start;75    color: #757575;76    z-index: 0;77  }78  .hero-label {79    margin: 0 0 22px 36px;80    font-size: 44px;81    font-weight: 600;82  }83 84  /* Underlying content placeholder */85  .content-card {86    position: absolute;87    top: 630px;88    left: 44px;89    width: 992px;90    height: 480px;91    background: #ffffff;92    border-radius: 20px;93    box-shadow: 0 18px 40px rgba(0,0,0,0.12);94    padding: 32px;95    z-index: 0;96  }97  .content-card .sub {98    width: 360px;99    height: 160px;100    background: #f2e9db;101    border-radius: 18px;102    margin-top: 24px;103  }104  .book-btn {105    position: absolute;106    bottom: 36px;107    left: 36px;108    height: 100px;109    width: 360px;110    background: #1f173e;111    color: #fff;112    border-radius: 20px;113    display: flex;114    align-items: center;115    justify-content: center;116    font-weight: 600;117    letter-spacing: 0.3px;118  }119 120  /* Dim overlay */121  .overlay {122    position: absolute;123    inset: 0;124    background: rgba(0,0,0,0.45);125    z-index: 1;126  }127 128  /* Modal */129  .modal {130    position: absolute;131    left: 60px;132    top: 820px;133    width: 960px;134    background: #ffffff;135    border-radius: 22px;136    box-shadow: 0 30px 60px rgba(0,0,0,0.40);137    z-index: 3;138    padding: 48px 56px 44px 56px;139  }140  .tabs {141    display: flex;142    justify-content: space-between;143    align-items: center;144    margin-bottom: 20px;145  }146  .tab {147    font-size: 44px;148    font-weight: 700;149    letter-spacing: 1px;150  }151  .tab.active { color: #231c44; }152  .tab.inactive { color: #8c8794; }153  .active-underline {154    width: 380px;155    height: 4px;156    background: #231c44;157    margin-top: 18px;158  }159 160  .time-picker {161    margin-top: 40px;162    display: grid;163    grid-template-columns: 1fr 140px;164    column-gap: 30px;165    align-items: center;166  }167 168  .time-columns {169    display: grid;170    grid-template-columns: 1fr 1fr;171    column-gap: 80px;172    align-items: center;173  }174  .t-col {175    text-align: center;176  }177  .t-fade { color: #c9cbd6; font-size: 42px; margin: 28px 0; }178  .t-current-wrap { position: relative; margin: 8px 0; }179  .t-line {180    position: absolute; left: 0; right: 0; top: -14px;181    border-bottom: 6px solid #2a224b;182    opacity: 0.9;183  }184  .t-line.bottom {185    top: auto; bottom: -14px;186  }187  .t-current {188    font-size: 74px; color: #201a43; font-weight: 700; letter-spacing: 1px;189  }190  .colon {191    position: absolute; left: 50%; transform: translateX(-50%);192    top: 18px; font-size: 64px; color: #201a43; font-weight: 700;193  }194 195  .now-btn {196    justify-self: end;197    background: #f4b325;198    color: #2a224b;199    border-radius: 16px;200    padding: 24px 34px;201    font-weight: 700;202    font-size: 38px;203    box-shadow: 0 6px 0 rgba(0,0,0,0.06);204  }205 206  .divider {207    height: 2px;208    background: #ececf0;209    margin: 44px 0;210  }211 212  .date-row {213    display: grid;214    grid-template-columns: 60px 1fr 60px;215    align-items: center;216    color: #1f173e;217  }218  .date-text {219    text-align: center;220    font-size: 44px;221    font-weight: 700;222  }223  .arrow {224    width: 48px;225    height: 48px;226    margin: 0 auto;227  }228  .arrow svg { width: 100%; height: 100%; }229  .arrow path { stroke: #f4b325; stroke-width: 14; fill: none; stroke-linecap: round; stroke-linejoin: round; }230 231  .modal-actions {232    margin-top: 34px;233    display: flex;234    justify-content: flex-end;235    gap: 24px;236  }237  .btn {238    padding: 28px 54px;239    font-size: 38px;240    font-weight: 800;241    border-radius: 16px;242  }243  .btn.outline {244    background: #ffffff;245    border: 3px solid #dedde6;246    color: #2a224b;247  }248  .btn.primary {249    background: #f4b325;250    color: #2a224b;251    border: none;252    box-shadow: 0 6px 0 rgba(0,0,0,0.06);253  }254 255  /* Bottom nav */256  .bottom-nav {257    position: absolute;258    bottom: 70px;259    left: 0;260    width: 1080px;261    height: 160px;262    display: flex;263    justify-content: space-around;264    align-items: center;265    color: #8b8797;266    z-index: 0;267  }268  .nav-item {269    display: flex;270    flex-direction: column;271    align-items: center;272    gap: 12px;273    font-size: 34px;274  }275  .nav-icon {276    width: 74px; height: 74px; border-radius: 20px;277    border: 3px solid #cfcadf;278  }279  .nav-item.active { color: #1f173e; }280  .gesture {281    position: absolute;282    bottom: 20px;283    left: 50%;284    transform: translateX(-50%);285    width: 240px;286    height: 14px;287    background: #ffffff;288    border-radius: 7px;289    opacity: 0.9;290  }291</style>292</head>293<body>294<div id="render-target">295 296  <!-- Top scenic banner -->297  <div class="hero">298    <div class="hero-label">[IMG: Scenic valley with train]</div>299  </div>300 301  <!-- Status bar -->302  <div class="status-bar">303    <div style="font-size:42px; font-weight:700;">11:31</div>304    <div class="status-right">305      <div class="status-dot"></div>306      <div class="status-dot"></div>307      <div style="color:#fff; font-weight:800; opacity:0.95;">oyo</div>308      <div class="status-dot"></div>309      <div class="status-icon"></div>310    </div>311  </div>312 313  <!-- Underlying content card -->314  <div class="content-card">315    <div style="font-size:48px; color:#251e45; font-weight:800;">Where to next?</div>316    <div class="sub"></div>317    <div class="book-btn">Book seats</div>318  </div>319 320  <!-- Dim overlay -->321  <div class="overlay"></div>322 323  <!-- Modal dialog -->324  <div class="modal">325    <div class="tabs">326      <div>327        <div class="tab active">DEPARTURE</div>328        <div class="active-underline"></div>329      </div>330      <div class="tab inactive">ARRIVAL</div>331    </div>332 333    <div class="time-picker">334      <div class="time-columns">335        <!-- Hours column -->336        <div class="t-col">337          <div class="t-fade">10</div>338          <div class="t-current-wrap">339            <div class="t-line"></div>340            <div class="t-current">11</div>341            <div class="t-line bottom"></div>342          </div>343          <div class="t-fade">12</div>344        </div>345 346        <!-- Minutes column -->347        <div class="t-col">348          <div class="t-fade">27</div>349          <div class="t-current-wrap">350            <div class="t-line"></div>351            <div class="t-current">28</div>352            <div class="t-line bottom"></div>353          </div>354          <div class="t-fade">29</div>355        </div>356 357        <!-- Central colon -->358        <div class="colon">:</div>359      </div>360 361      <div class="now-btn">Now</div>362    </div>363 364    <div class="divider"></div>365 366    <div class="date-row">367      <div class="arrow">368        <svg viewBox="0 0 48 48">369          <path d="M32 8 L16 24 L32 40"></path>370        </svg>371      </div>372      <div class="date-text">Mon 25 Sep 2023</div>373      <div class="arrow">374        <svg viewBox="0 0 48 48">375          <path d="M16 8 L32 24 L16 40"></path>376        </svg>377      </div>378    </div>379 380    <div class="divider"></div>381 382    <div class="modal-actions">383      <div class="btn outline">CANCEL</div>384      <div class="btn primary">DONE</div>385    </div>386  </div>387 388  <!-- Bottom navigation -->389  <div class="bottom-nav">390    <div class="nav-item active">391      <div class="nav-icon"></div>392      <div>Planner</div>393    </div>394    <div class="nav-item">395      <div class="nav-icon"></div>396      <div>My Trip</div>397    </div>398    <div class="nav-item">399      <div class="nav-icon"></div>400      <div>My Pass</div>401    </div>402    <div class="nav-item">403      <div class="nav-icon"></div>404      <div>More</div>405    </div>406  </div>407  <div class="gesture"></div>408 409</div>410</body>411</html>