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 Mock</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: #faf9fb;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #1f1a3d;17  }18 19  /* Background content (beneath modal) */20  .hero {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 640px;26  }27  .hero .img {28    position: absolute;29    inset: 0;30    background: #E0E0E0;31    border: 1px solid #BDBDBD;32    display: flex;33    align-items: center;34    justify-content: center;35    color: #757575;36    font-size: 36px;37  }38  .hero .headline {39    position: absolute;40    left: 48px;41    bottom: 40px;42    font-size: 80px;43    font-weight: 700;44    color: rgba(255,255,255,0.9);45    text-shadow: 0 2px 8px rgba(0,0,0,0.4);46  }47 48  .content-card {49    position: absolute;50    top: 760px;51    left: 48px;52    width: 984px;53    height: 520px;54    background: #ffffff;55    border-radius: 28px;56    box-shadow: 0 12px 40px rgba(0,0,0,0.08);57  }58  .content-card .cta {59    position: absolute;60    left: 48px;61    bottom: 48px;62    width: 360px;63    height: 88px;64    border-radius: 18px;65    background: #241a48;66    color: #fff;67    display: flex;68    align-items: center;69    justify-content: center;70    font-weight: 700;71    font-size: 36px;72  }73 74  /* Overlay and modal */75  .overlay {76    position: absolute;77    inset: 0;78    background: rgba(0,0,0,0.45);79  }80  .modal {81    position: absolute;82    left: 72px;83    top: 520px;84    width: 936px;85    height: 1200px;86    background: #ffffff;87    border-radius: 24px;88    box-shadow: 0 24px 64px rgba(0,0,0,0.35);89  }90 91  .tabs {92    display: flex;93    justify-content: space-between;94    padding: 48px 64px 16px 64px;95    align-items: flex-end;96  }97  .tab {98    font-size: 44px;99    font-weight: 700;100    letter-spacing: 1px;101  }102  .tab.inactive {103    color: #9b9aaa;104    font-weight: 700;105  }106  .tab-underline {107    margin-left: 64px;108    width: 420px;109    height: 4px;110    background: #2a224b;111  }112 113  .time-section {114    padding: 36px 64px 0 64px;115  }116  .time-wheel {117    width: 100%;118    display: grid;119    grid-template-rows: auto 18px auto 18px auto;120    row-gap: 18px;121    justify-items: start;122  }123  .row {124    width: 100%;125    display: flex;126    align-items: center;127  }128  .row.center { justify-content: flex-start; }129  .tiny {130    color: #b8bccb;131    font-size: 40px;132    letter-spacing: 2px;133  }134  .tiny .spacer { width: 120px; display: inline-block; }135  .rule {136    height: 4px;137    background: #2a224b;138    border-radius: 2px;139  }140  .rule.rule-left { width: 240px; margin-right: 48px; }141  .rule.rule-right { width: 240px; margin-left: 48px; }142  .time-value {143    font-size: 88px;144    font-weight: 800;145    color: #1f1a3d;146    letter-spacing: 2px;147  }148  .time-value .colon {149    font-weight: 700;150    margin: 0 24px;151  }152 153  .now-chip {154    margin-left: auto;155    background: #f3bb1a;156    color: #231f20;157    padding: 16px 28px;158    font-weight: 700;159    border-radius: 14px;160    font-size: 40px;161    box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;162  }163 164  .divider {165    margin: 48px 0 0 0;166    height: 2px;167    background: #eee;168  }169 170  .date-row {171    display: flex;172    align-items: center;173    justify-content: space-between;174    padding: 40px 40px;175    color: #1f1a3d;176    font-size: 46px;177    font-weight: 700;178  }179  .date-row .arrow {180    width: 64px;181    height: 64px;182    display: inline-flex;183    align-items: center;184    justify-content: center;185    color: #e5b31a;186  }187  .date-row .text {188    color: #1f1a3d;189  }190  .divider.bottom { margin: 0 0 36px 0; }191 192  .actions {193    position: absolute;194    bottom: 40px;195    right: 40px;196    left: 40px;197    display: flex;198    justify-content: flex-end;199    gap: 28px;200  }201  .btn {202    height: 108px;203    padding: 0 44px;204    border-radius: 16px;205    display: inline-flex;206    align-items: center;207    justify-content: center;208    font-size: 44px;209    font-weight: 800;210    letter-spacing: 1px;211    cursor: default;212  }213  .btn.outline {214    background: #ffffff;215    border: 2px solid #e6e3ef;216    color: #2a2350;217  }218  .btn.filled {219    background: #f3bb1a;220    color: #231f20;221    border: 2px solid #f3bb1a;222  }223 224  /* Simple bottom navbar mock (background content) */225  .navbar {226    position: absolute;227    bottom: 0;228    left: 0;229    width: 1080px;230    height: 160px;231    background: #ffffff;232    border-top: 1px solid #e7e6f0;233    display: flex;234    align-items: center;235    justify-content: space-around;236    color: #8785a0;237    font-size: 32px;238  }239  .nav-item {240    display: flex;241    flex-direction: column;242    align-items: center;243    gap: 12px;244  }245  .nav-item.active { color: #211a45; font-weight: 700; }246  .icon {247    width: 48px;248    height: 48px;249  }250  /* Simple helpers */251  .flex-grow { flex: 1; }252</style>253</head>254<body>255<div id="render-target">256  <!-- Background content -->257  <div class="hero">258    <div class="img">[IMG: Scenic railway valley]</div>259    <div class="headline">Where to next?</div>260  </div>261 262  <div class="content-card">263    <div class="cta">Book seats</div>264  </div>265 266  <div class="navbar">267    <div class="nav-item active">268      <svg class="icon" viewBox="0 0 24 24" fill="#211a45"><path d="M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0-5a1 1 0 0 1 1 1v2h-2V3a1 1 0 0 1 1-1zM4 13H2v-2h2v2zm18 0h-2v-2h2v2zm-9 8a1 1 0 0 1-1-1v-2h2v2a1 1 0 0 1-1 1z"/></svg>269      <div>Planner</div>270    </div>271    <div class="nav-item">272      <svg class="icon" viewBox="0 0 24 24" fill="#8785a0"><path d="M3 6h18v12H3zM6 9h12v6H6z"/></svg>273      <div>My Trip</div>274    </div>275    <div class="nav-item">276      <svg class="icon" viewBox="0 0 24 24" fill="#8785a0"><path d="M4 4h16v16H4zM8 8h8v8H8z"/></svg>277      <div>My Pass</div>278    </div>279    <div class="nav-item">280      <svg class="icon" viewBox="0 0 24 24" fill="#8785a0"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>281      <div>More</div>282    </div>283  </div>284 285  <!-- Modal overlay -->286  <div class="overlay"></div>287  <div class="modal">288    <div class="tabs">289      <div class="tab">DEPARTURE</div>290      <div class="tab inactive">ARRIVAL</div>291    </div>292    <div class="tab-underline"></div>293 294    <div class="time-section">295      <div class="time-wheel">296        <div class="row center tiny">297          <span style="width:240px; display:inline-block; text-align:center;">10</span>298          <span class="spacer"></span>299          <span style="width:240px; display:inline-block; text-align:center;">44</span>300        </div>301 302        <div class="row">303          <div class="rule rule-left"></div>304          <div class="flex-grow"></div>305          <div class="rule rule-right"></div>306        </div>307 308        <div class="row center">309          <div class="time-value" style="width:240px; text-align:center;">11</div>310          <div class="time-value colon">:</div>311          <div class="time-value" style="width:240px; text-align:center;">45</div>312          <div class="now-chip">Now</div>313        </div>314 315        <div class="row">316          <div class="rule rule-left"></div>317          <div class="flex-grow"></div>318          <div class="rule rule-right"></div>319        </div>320 321        <div class="row center tiny">322          <span style="width:240px; display:inline-block; text-align:center;">12</span>323          <span class="spacer"></span>324          <span style="width:240px; display:inline-block; text-align:center;">46</span>325        </div>326      </div>327 328      <div class="divider"></div>329 330      <div class="date-row">331        <div class="arrow">332          <svg viewBox="0 0 24 24" width="48" height="48">333            <path d="M15 18l-6-6 6-6" fill="none" stroke="#e5b31a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>334          </svg>335        </div>336        <div class="text">Mon 25 Sep 2023</div>337        <div class="arrow">338          <svg viewBox="0 0 24 24" width="48" height="48">339            <path d="M9 6l6 6-6 6" fill="none" stroke="#e5b31a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>340          </svg>341        </div>342      </div>343 344      <div class="divider bottom"></div>345    </div>346 347    <div class="actions">348      <div class="btn outline">CANCEL</div>349      <div class="btn filled">DONE</div>350    </div>351  </div>352</div>353</body>354</html>