GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Time 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; color: #1e1d25; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #f7f6f9;13    border-radius: 28px;14    box-shadow: 0 12px 24px rgba(0,0,0,0.15);15  }16 17  /* Hero / Background */18  .hero {19    position: relative;20    width: 100%;21    height: 520px;22    overflow: hidden;23  }24  .hero .img {25    position: absolute; left: 0; top: 0;26    width: 100%; height: 100%;27    background: #E0E0E0;28    border-bottom: 1px solid #BDBDBD;29    display: flex; align-items: center; justify-content: center;30    color: #757575; font-weight: 600;31    letter-spacing: 0.4px;32  }33  .hero .overlay-title {34    position: absolute; left: 40px; bottom: 36px;35    font-size: 64px; font-weight: 700; color: rgba(255,255,255,0.9);36    text-shadow: 0 2px 6px rgba(0,0,0,0.35);37  }38 39  /* Dim overlay behind modal */40  .scrim {41    position: absolute; left: 0; top: 0; right: 0; bottom: 0;42    background: rgba(0,0,0,0.45);43  }44 45  /* Modal card */46  .modal {47    position: absolute;48    left: 60px; right: 60px;49    top: 660px;50    background: #ffffff;51    border-radius: 16px;52    box-shadow: 0 14px 40px rgba(0,0,0,0.35);53    padding: 48px 56px;54  }55 56  .tab-header {57    display: flex; justify-content: space-between; align-items: flex-end;58    margin-bottom: 28px;59  }60  .tab {61    font-size: 36px; font-weight: 700; letter-spacing: 0.6px;62    color: #a2a0a8;63  }64  .tab.active {65    color: #2b224b;66  }67  .tab-underline {68    width: 360px; height: 4px; background: #2b224b; border-radius: 2px;69    margin-top: 18px;70  }71 72  .time-picker {73    display: grid; grid-template-columns: 1fr 120px 1fr auto; align-items: center;74    column-gap: 28px;75    margin-top: 8px;76  }77  .time-col {78    text-align: center;79  }80  .time-above, .time-below {81    font-size: 36px; color: #b7bac6;82    margin: 24px 0;83  }84  .time-value {85    font-size: 64px; font-weight: 700; color: #24213d;86    letter-spacing: 2px;87    display: inline-block;88    padding: 10px 18px;89    border-bottom: 6px solid #2b224b;90    border-top: 6px solid transparent;91    border-radius: 6px;92  }93  .colon {94    font-size: 64px; font-weight: 700; color: #24213d; text-align: center;95  }96 97  .now-btn {98    justify-self: end;99    background: #F3BE2D;100    color: #231f2f;101    font-weight: 700;102    font-size: 34px;103    padding: 22px 36px;104    border-radius: 14px;105    border: none;106  }107 108  .divider {109    height: 2px; background: #ededf2; margin: 40px 0 28px;110  }111 112  .date-row {113    display: grid; grid-template-columns: 60px 1fr 60px; align-items: center;114    margin: 12px 0 32px;115  }116  .date-text {117    text-align: center; font-size: 40px; font-weight: 700; color: #252042;118  }119  .chev {120    width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;121    border-radius: 999px; color: #E3A91A;122  }123  .chev svg { width: 36px; height: 36px; }124 125  .footer-divider {126    height: 2px; background: #ededf2; margin: 28px 0 36px;127  }128 129  .action-row {130    display: flex; justify-content: space-between; align-items: center;131    gap: 24px;132  }133  .btn-outline {134    flex: 0 0 340px;135    text-align: center;136    font-weight: 800; font-size: 36px;137    color: #2b224b;138    padding: 22px 0;139    border: 2px solid #e2e1e8;140    border-radius: 14px;141    background: #ffffff;142  }143  .btn-primary {144    flex: 0 0 340px;145    text-align: center;146    font-weight: 800; font-size: 36px;147    color: #2b224b;148    padding: 22px 0;149    border-radius: 14px;150    background: #F3BE2D;151    border: none;152    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12);153  }154 155  /* Bottom navigation */156  .bottom-nav {157    position: absolute; left: 0; bottom: 0; width: 100%; height: 170px;158    background: #ffffff;159    border-top: 1px solid #e5e5ea;160    display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;161    padding-bottom: 26px;162  }163  .nav-item {164    text-align: center; color: #7a7a8b;165  }166  .nav-item .label { font-size: 32px; margin-top: 10px; }167  .nav-item.active { color: #2b224b; }168  .nav-icon svg { width: 48px; height: 48px; }169</style>170</head>171<body>172<div id="render-target">173  <div class="hero">174    <div class="img">[IMG: Scenic Mountain Railway]</div>175    <div class="overlay-title">Where to next?</div>176  </div>177 178  <!-- Background content preview (card button) -->179  <div style="position:absolute; left:40px; top:1020px; width:1000px; height:200px; background: #f0e8db; border-radius: 22px; box-shadow: 0 8px 24px rgba(0,0,0,0.08);">180    <div style="position:absolute; left:40px; top:40px; width:300px; height:80px; background:#22183d; border-radius: 16px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:34px;">Book seats</div>181  </div>182 183  <!-- Dim overlay -->184  <div class="scrim"></div>185 186  <!-- Modal -->187  <div class="modal">188    <div class="tab-header">189      <div>190        <div class="tab active">DEPARTURE</div>191        <div class="tab-underline"></div>192      </div>193      <div class="tab">ARRIVAL</div>194    </div>195 196    <div class="time-picker">197      <div class="time-col">198        <div class="time-above">10</div>199        <div class="time-value">11</div>200        <div class="time-below">12</div>201      </div>202 203      <div class="colon">:</div>204 205      <div class="time-col">206        <div class="time-above">40</div>207        <div class="time-value">41</div>208        <div class="time-below">42</div>209      </div>210 211      <button class="now-btn">Now</button>212    </div>213 214    <div class="divider"></div>215 216    <div class="date-row">217      <div class="chev">218        <svg viewBox="0 0 24 24" fill="#E3A91A">219          <path d="M15.5 5l-7 7 7 7" stroke="#E3A91A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>220        </svg>221      </div>222      <div class="date-text">Mon 25 Sep 2023</div>223      <div class="chev">224        <svg viewBox="0 0 24 24" fill="#E3A91A">225          <path d="M8.5 5l7 7-7 7" stroke="#E3A91A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>226        </svg>227      </div>228    </div>229 230    <div class="footer-divider"></div>231 232    <div class="action-row">233      <div class="btn-outline">CANCEL</div>234      <div style="flex:1"></div>235      <div class="btn-primary">DONE</div>236    </div>237  </div>238 239  <!-- Bottom navigation -->240  <div class="bottom-nav">241    <div class="nav-item active">242      <div class="nav-icon">243        <svg viewBox="0 0 24 24" fill="#2b224b">244          <circle cx="12" cy="12" r="9" stroke="#2b224b" stroke-width="2" fill="none"/>245          <path d="M12 7v6l4 2" stroke="#2b224b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>246        </svg>247      </div>248      <div class="label">Planner</div>249    </div>250    <div class="nav-item">251      <div class="nav-icon">252        <svg viewBox="0 0 24 24" fill="#7a7a8b">253          <path d="M3 11h18M12 3v18" stroke="#7a7a8b" stroke-width="2" fill="none" stroke-linecap="round"/>254        </svg>255      </div>256      <div class="label">My Trip</div>257    </div>258    <div class="nav-item">259      <div class="nav-icon">260        <svg viewBox="0 0 24 24" fill="#7a7a8b">261          <rect x="5" y="3" width="14" height="18" rx="2" stroke="#7a7a8b" stroke-width="2" fill="none"/>262          <circle cx="12" cy="9" r="3" stroke="#7a7a8b" stroke-width="2" fill="none"/>263        </svg>264      </div>265      <div class="label">My Pass</div>266    </div>267    <div class="nav-item">268      <div class="nav-icon">269        <svg viewBox="0 0 24 24" fill="#7a7a8b">270          <path d="M4 6h16M4 12h16M4 18h16" stroke="#7a7a8b" stroke-width="2" stroke-linecap="round"/>271        </svg>272      </div>273      <div class="label">More</div>274    </div>275  </div>276</div>277</body>278</html>