GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Time Picker Modal UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #f7f6fb;14  }15 16  /* Background content */17  .hero {18    position: absolute;19    left: 0;20    top: 0;21    width: 1080px;22    height: 640px;23  }24  .img-placeholder {25    width: 100%;26    height: 100%;27    background: #E0E0E0;28    border: 1px solid #BDBDBD;29    display: flex;30    justify-content: center;31    align-items: center;32    color: #757575;33    font-size: 28px;34  }35  .hero-title {36    position: absolute;37    left: 40px;38    bottom: 36px;39    font-size: 80px;40    color: rgba(255,255,255,0.85);41    font-weight: 700;42    text-shadow: 0 2px 4px rgba(0,0,0,0.35);43  }44 45  /* Dim overlay under modal */46  .overlay {47    position: absolute;48    left: 0;49    top: 640px;50    width: 1080px;51    height: 1760px;52    background: rgba(0,0,0,0.35);53  }54 55  /* Modal / dialog */56  .dialog {57    position: absolute;58    left: 70px;59    top: 820px;60    width: 940px;61    background: #ffffff;62    border-radius: 18px;63    box-shadow: 0 20px 40px rgba(0,0,0,0.35);64    padding: 54px 60px 40px;65  }66  .dialog-header {67    display: flex;68    justify-content: space-between;69    align-items: center;70    margin-bottom: 34px;71  }72  .tab {73    font-size: 40px;74    font-weight: 700;75    letter-spacing: 0.5px;76  }77  .tab.active { color: #241c3f; }78  .tab.inactive { color: #8d8893; }79  .active-underline {80    width: 360px;81    height: 4px;82    background: #2b204e;83    margin-top: 16px;84  }85 86  /* Time picker area */87  .time-picker {88    position: relative;89    margin-top: 18px;90    margin-bottom: 44px;91  }92  .time-rows {93    display: grid;94    grid-template-columns: 1fr 140px 1fr 1fr;95    grid-template-areas: "hour-top colon minute-top now";96    gap: 0;97    align-items: center;98  }99  .row {100    text-align: center;101    color: #c8c9d3;102    font-size: 44px;103    padding: 18px 0;104  }105  .row.main {106    color: #1f1b3d;107    font-size: 64px;108    font-weight: 700;109    padding: 20px 0;110  }111  .colon {112    grid-area: colon;113    text-align: center;114    color: #1f1b3d;115    font-size: 64px;116    font-weight: 700;117  }118  .now-btn {119    grid-area: now;120    justify-self: end;121    background: #f2b431;122    color: #2b204e;123    font-weight: 700;124    font-size: 36px;125    padding: 20px 36px;126    border-radius: 16px;127    box-shadow: 0 2px 0 rgba(0,0,0,0.1);128  }129  /* decorative lines above/below hours and minutes */130  .picker-lines {131    display: grid;132    grid-template-columns: 1fr 140px 1fr 1fr;133    align-items: center;134    margin-bottom: 6px;135  }136  .line {137    height: 6px;138    background: #2b204e;139    border-radius: 3px;140    margin: 0 80px 0 80px;141  }142  .line.right { margin-left: 60px; margin-right: 80px; }143  .spacer { height: 12px; }144 145  /* Divider */146  .divider {147    height: 2px;148    background: #ececf2;149    margin: 28px -60px;150  }151 152  /* Date row */153  .date-row {154    display: flex;155    align-items: center;156    justify-content: space-between;157    color: #1f1b3d;158    font-size: 44px;159    padding: 12px 0;160  }161  .date-text { font-weight: 600; }162  .arrow-btn {163    width: 64px;164    height: 64px;165    display: inline-flex;166    align-items: center;167    justify-content: center;168    border-radius: 32px;169  }170  .arrow-btn svg { width: 36px; height: 36px; }171  .arrow-left svg path,172  .arrow-right svg path { fill: #f2b431; }173 174  /* Footer buttons */175  .dialog-footer {176    display: flex;177    justify-content: flex-end;178    gap: 24px;179    margin-top: 36px;180  }181  .btn {182    font-size: 40px;183    font-weight: 800;184    padding: 26px 40px;185    border-radius: 16px;186  }187  .btn.cancel {188    background: #ffffff;189    color: #2b204e;190    border: 2px solid #e2e1ea;191  }192  .btn.done {193    background: #f2b431;194    color: #2b204e;195    border: none;196    box-shadow: 0 2px 0 rgba(0,0,0,0.1);197  }198 199  /* Bottom navigation mock */200  .bottom-nav {201    position: absolute;202    left: 0;203    bottom: 0;204    width: 1080px;205    height: 170px;206    background: #ffffff;207    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);208    display: flex;209    justify-content: space-around;210    align-items: center;211  }212  .nav-item {213    display: flex;214    flex-direction: column;215    align-items: center;216    color: #2b204e;217    font-size: 36px;218  }219  .nav-item .label { margin-top: 12px; opacity: 0.9; }220  .nav-icon { width: 56px; height: 56px; }221  .nav-icon path { fill: #2b204e; opacity: 0.9; }222</style>223</head>224<body>225<div id="render-target">226 227  <!-- Hero with image placeholder -->228  <div class="hero">229    <div class="img-placeholder">[IMG: Scenic mountain valley with train]</div>230    <div class="hero-title">Where to next?</div>231  </div>232 233  <!-- Dark overlay beneath the modal -->234  <div class="overlay"></div>235 236  <!-- Time Picker Modal -->237  <div class="dialog">238    <div class="dialog-header">239      <div style="width:50%;">240        <div class="tab active">DEPARTURE</div>241        <div class="active-underline"></div>242      </div>243      <div class="tab inactive">ARRIVAL</div>244    </div>245 246    <!-- Decorative lines above current hour/minute row -->247    <div class="picker-lines">248      <div class="line"></div>249      <div class="spacer"></div>250      <div class="line right"></div>251      <div class="spacer"></div>252    </div>253 254    <div class="time-rows">255      <div class="row">10</div>256      <div class="colon"></div>257      <div class="row">21</div>258      <div class="now-btn">Now</div>259    </div>260 261    <div class="time-rows">262      <div class="row main">11</div>263      <div class="colon">:</div>264      <div class="row main">22</div>265      <div></div>266    </div>267 268    <div class="picker-lines">269      <div class="line"></div>270      <div class="spacer"></div>271      <div class="line right"></div>272      <div class="spacer"></div>273    </div>274 275    <div class="time-rows">276      <div class="row">12</div>277      <div class="colon"></div>278      <div class="row">23</div>279      <div></div>280    </div>281 282    <div class="divider"></div>283 284    <div class="date-row">285      <div class="arrow-btn arrow-left">286        <svg viewBox="0 0 24 24">287          <path d="M15.5 4.5L7 12l8.5 7.5-1.8 2.1L3.5 12l10.2-9.6 1.8 2.1z"></path>288        </svg>289      </div>290      <div class="date-text">Fri 08 Sep 2023</div>291      <div class="arrow-btn arrow-right">292        <svg viewBox="0 0 24 24">293          <path d="M8.5 19.5L17 12 8.5 4.5l1.8-2.1L20.5 12 10.3 21.6 8.5 19.5z"></path>294        </svg>295      </div>296    </div>297 298    <div class="divider"></div>299 300    <div class="dialog-footer">301      <div class="btn cancel">CANCEL</div>302      <div class="btn done">DONE</div>303    </div>304  </div>305 306  <!-- Bottom navigation mock -->307  <div class="bottom-nav">308    <div class="nav-item">309      <svg class="nav-icon" viewBox="0 0 24 24">310        <path d="M12 2a9 9 0 100 18 9 9 0 000-18zm1 4h-2v7l6 3 .9-1.8-4.9-2.5V6z"></path>311      </svg>312      <div class="label">Planner</div>313    </div>314    <div class="nav-item">315      <svg class="nav-icon" viewBox="0 0 24 24">316        <path d="M3 21h18v-2H3v2zm2-5h14V4H5v12zm2-10h10v8H7V6z"></path>317      </svg>318      <div class="label">My Trip</div>319    </div>320    <div class="nav-item">321      <svg class="nav-icon" viewBox="0 0 24 24">322        <path d="M6 2h12v4H6V2zm0 6h12v14H6V8zm2 3h8v2H8v-2zm0 4h8v2H8v-2z"></path>323      </svg>324      <div class="label">My Pass</div>325    </div>326    <div class="nav-item">327      <svg class="nav-icon" viewBox="0 0 24 24">328        <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"></path>329      </svg>330      <div class="label">More</div>331    </div>332  </div>333 334</div>335</body>336</html>