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 Picker Modal UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #f6f6f8;15  }16 17  /* Top status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    height: 110px;23    width: 100%;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #ffffff;29    z-index: 2;30  }31  .status-left {32    font-size: 46px;33    font-weight: 600;34    letter-spacing: 0.5px;35  }36  .status-right {37    display: flex;38    gap: 26px;39    align-items: center;40  }41  .dot {42    width: 26px;43    height: 26px;44    background: #fff;45    border-radius: 50%;46    opacity: 0.95;47  }48  .wifi svg, .battery svg {49    display: block;50  }51 52  /* Hero banner behind modal */53  .hero {54    position: absolute;55    top: 0;56    left: 0;57    width: 1080px;58    height: 760px;59    background: #E0E0E0;60    border-bottom: 1px solid #BDBDBD;61    display: flex;62    align-items: flex-end;63    justify-content: flex-start;64    color: #757575;65    z-index: 1;66  }67  .hero::after {68    content: "";69    position: absolute;70    inset: 0;71    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.0) 100%);72    pointer-events: none;73  }74  .hero-label {75    position: absolute;76    top: 24px;77    left: 24px;78    font-size: 28px;79    color: #757575;80  }81  .hero-title {82    position: absolute;83    bottom: 34px;84    left: 40px;85    font-size: 90px;86    font-weight: 700;87    color: rgba(255,255,255,0.85);88  }89 90  /* Underlying page card */91  .under-card {92    position: absolute;93    top: 820px;94    left: 36px;95    right: 36px;96    height: 520px;97    background: #ffffff;98    border-radius: 28px;99    box-shadow: 0 20px 40px rgba(0,0,0,0.08);100    padding: 36px;101    z-index: 1;102  }103  .under-card .sub {104    font-size: 56px;105    color: #2B2249;106    font-weight: 700;107    margin-bottom: 26px;108  }109  .under-card .desc {110    font-size: 36px;111    color: #6f6f82;112    max-width: 880px;113    line-height: 1.4;114  }115  .under-card .book {116    position: absolute;117    bottom: 36px;118    left: 36px;119    background: #22183f;120    color: #fff;121    border-radius: 18px;122    padding: 28px 40px;123    font-size: 42px;124    display: inline-flex;125    align-items: center;126    gap: 20px;127  }128  .book svg { width: 42px; height: 42px; fill: #fff; }129 130  /* Dimming overlay */131  .scrim {132    position: absolute;133    inset: 0;134    background: rgba(0,0,0,0.35);135    z-index: 3;136  }137 138  /* Modal */139  .modal {140    position: absolute;141    top: 620px;142    left: 70px;143    width: 940px;144    background: #ffffff;145    border-radius: 22px;146    box-shadow: 0 24px 60px rgba(0,0,0,0.25);147    z-index: 4;148    padding: 48px 48px 44px;149  }150  .modal-header {151    display: flex;152    justify-content: space-between;153    align-items: flex-end;154    margin-bottom: 36px;155  }156  .tab {157    font-size: 46px;158    font-weight: 700;159    color: #2B2249;160  }161  .tab.inactive {162    color: #8c8c98;163    font-weight: 700;164  }165  .underline {166    height: 4px;167    width: 44%;168    background: #2B2249;169    margin-top: 26px;170  }171 172  /* Time picker area */173  .time-area {174    margin-top: 26px;175    margin-bottom: 30px;176  }177  .time-fade-row {178    display: flex;179    justify-content: center;180    gap: 220px;181    color: #bcc0d3;182    font-size: 40px;183    margin: 18px 0;184    font-weight: 600;185  }186  .time-main {187    display: flex;188    align-items: center;189    justify-content: center;190    gap: 22px;191    margin: 12px 0 6px;192  }193  .time-box {194    min-width: 200px;195    text-align: center;196  }197  .time-value {198    font-size: 80px;199    color: #2B2249;200    font-weight: 700;201    letter-spacing: 2px;202  }203  .colon {204    font-size: 80px;205    color: #2B2249;206    font-weight: 700;207    margin: 0 12px;208  }209  .time-underline {210    height: 6px;211    background: #2B2249;212    width: 200px;213    margin: 16px auto 0;214    border-radius: 3px;215  }216  .now-btn {217    margin-left: 40px;218    background: #f8b81f;219    color: #2B2249;220    font-weight: 800;221    font-size: 42px;222    border: none;223    border-radius: 18px;224    padding: 22px 34px;225    box-shadow: 0 6px 0 rgba(0,0,0,0.12);226  }227 228  .divider {229    height: 2px;230    background: #eeeeee;231    margin: 30px 0 20px;232  }233 234  /* Date row */235  .date-row {236    display: flex;237    align-items: center;238    justify-content: space-between;239    padding: 18px 0;240  }241  .date-text {242    font-size: 46px;243    color: #1e1b3b;244    font-weight: 700;245  }246  .chev {247    width: 54px; height: 54px;248  }249  .chev path { fill: #f8b81f; }250 251  /* Footer divider */252  .divider-light {253    height: 2px;254    background: #eeeeee;255    margin: 20px 0 24px;256  }257 258  /* Action buttons */259  .actions {260    display: flex;261    justify-content: flex-end;262    gap: 26px;263  }264  .btn-outline {265    background: #ffffff;266    border: 2px solid #e2e2ea;267    color: #3b2e63;268    font-size: 42px;269    font-weight: 800;270    padding: 24px 34px;271    border-radius: 16px;272    min-width: 220px;273    text-align: center;274  }275  .btn-primary {276    background: #f8b81f;277    border: none;278    color: #2B2249;279    font-size: 42px;280    font-weight: 800;281    padding: 24px 34px;282    border-radius: 16px;283    min-width: 220px;284    text-align: center;285    box-shadow: 0 8px 0 rgba(0,0,0,0.12);286  }287 288  /* Bottom navigation */289  .bottom-nav {290    position: absolute;291    bottom: 90px;292    left: 0;293    width: 100%;294    height: 160px;295    background: #ffffff;296    border-top: 1px solid #e6e6e6;297    display: flex;298    justify-content: space-around;299    align-items: center;300    z-index: 1;301  }302  .nav-item {303    display: flex;304    flex-direction: column;305    align-items: center;306    gap: 14px;307    color: #8d8d9b;308    font-size: 36px;309  }310  .nav-item.active { color: #2B2249; font-weight: 700; }311  .nav-item svg { width: 54px; height: 54px; fill: currentColor; }312 313  /* Gesture bar */314  .gesture {315    position: absolute;316    bottom: 24px;317    left: 50%;318    transform: translateX(-50%);319    width: 320px;320    height: 22px;321    background: #ffffff;322    border-radius: 14px;323    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.05);324  }325</style>326</head>327<body>328<div id="render-target">329 330  <!-- Background hero image -->331  <div class="hero">332    <div class="hero-label">[IMG: Scenic valley with train]</div>333    <div class="hero-title">Where to next?</div>334  </div>335 336  <!-- Status bar -->337  <div class="status-bar">338    <div class="status-left">11:32</div>339    <div class="status-right">340      <div class="dot"></div>341      <div class="dot"></div>342      <div class="dot"></div>343      <span style="color:#fff;font-weight:700;font-size:30px;">oyo</span>344      <div class="dot"></div>345      <div class="wifi">346        <svg width="54" height="54" viewBox="0 0 24 24">347          <path fill="#fff" d="M12 18.5c.7 0 1.3.6 1.3 1.3s-.6 1.2-1.3 1.2-1.3-.5-1.3-1.2.6-1.3 1.3-1.3zm-4.2-3.6l1.3 1.3c1.5-1.5 4.4-1.5 5.9 0l1.3-1.3c-2.2-2.1-6.2-2.1-8.5 0zm-3.1-3.1l1.3 1.3c3.3-3.3 9.2-3.3 12.5 0l1.3-1.3c-4-4-10.9-4-15.1 0z"/>348        </svg>349      </div>350      <div class="battery">351        <svg width="54" height="54" viewBox="0 0 24 24">352          <rect x="2" y="6" width="17" height="12" rx="2" fill="#fff"></rect>353          <rect x="20" y="10" width="2" height="4" fill="#fff"></rect>354        </svg>355      </div>356    </div>357  </div>358 359  <!-- Underlying content card -->360  <div class="under-card">361    <div class="sub">Benefits</div>362    <div class="desc">Plan and book your journey with ease. Compare options and secure seats for your preferred train.</div>363    <div class="book">364      <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm2 5h14l1 6H4l1-6zm3-7h8v2H8V4z"/></svg>365      Book seats366    </div>367  </div>368 369  <!-- Dimming overlay -->370  <div class="scrim"></div>371 372  <!-- Modal dialog -->373  <div class="modal">374    <div class="modal-header">375      <div style="flex:1;">376        <div class="tab">DEPARTURE</div>377        <div class="underline"></div>378      </div>379      <div class="tab inactive">ARRIVAL</div>380    </div>381 382    <div class="time-area">383      <div class="time-fade-row">384        <div>10</div>385        <div>43</div>386      </div>387 388      <div class="time-main">389        <div class="time-box">390          <div class="time-value">11</div>391          <div class="time-underline"></div>392        </div>393        <div class="colon">:</div>394        <div class="time-box">395          <div class="time-value">44</div>396          <div class="time-underline"></div>397        </div>398        <button class="now-btn">Now</button>399      </div>400 401      <div class="time-fade-row">402        <div>12</div>403        <div>45</div>404      </div>405    </div>406 407    <div class="divider"></div>408 409    <div class="date-row">410      <svg class="chev" viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7-1.5 1.5L6.5 12l7.5-8.5z"/></svg>411      <div class="date-text">Mon 25 Sep 2023</div>412      <svg class="chev" viewBox="0 0 24 24"><path d="M8.5 19l7-7-7-7L10 3.5 17.5 12 10 20.5z"/></svg>413    </div>414 415    <div class="divider-light"></div>416 417    <div class="actions">418      <div class="btn-outline">CANCEL</div>419      <div class="btn-primary">DONE</div>420    </div>421  </div>422 423  <!-- Bottom navigation -->424  <div class="bottom-nav">425    <div class="nav-item active">426      <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 110 8 4 4 0 010-8zm1-7h-2v4h2V1zm9 11h-4v2h4v-2zM3 12H-1v2h4v-2zm1.4-6.6L3 6l3 2 1.4-2.6-3-2zM18 6l-1.4-2.6-3 2L16 8l2-2z"/></svg>427      Planner428    </div>429    <div class="nav-item">430      <svg viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm2 5h14v9H5v-9zm4 2v5h2v-5H9zm4 0v5h2v-5h-2z"/></svg>431      My Trip432    </div>433    <div class="nav-item">434      <svg viewBox="0 0 24 24"><path d="M4 4h16v16H4V4zm4 3h8v2H8V7zm0 4h8v2H8v-2zm0 4h5v2H8v-2z"/></svg>435      My Pass436    </div>437    <div class="nav-item">438      <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>439      More440    </div>441  </div>442 443  <!-- Gesture bar -->444  <div class="gesture"></div>445</div>446</body>447</html>