GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Time & Date Picker Modal</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #f5f5f8;11 }12 13 /* Top hero image area */14 .hero {15 position: absolute; left: 0; top: 0; width: 100%; height: 640px;16 background: #E0E0E0; border-bottom: 1px solid #BDBDBD;17 display: flex; align-items: flex-end; justify-content: flex-start;18 box-sizing: border-box; padding: 40px 48px;19 }20 .hero .img-label {21 width: 100%; height: 100%;22 display: flex; align-items: center; justify-content: center;23 color: #757575; font-weight: 600; letter-spacing: 0.4px;24 }25 .hero-title {26 position: absolute; left: 48px; bottom: 40px;27 font-size: 72px; font-weight: 700; color: rgba(255,255,255,0.85);28 text-shadow: 0 2px 8px rgba(0,0,0,0.35);29 }30 31 /* Status bar */32 .status-bar {33 position: absolute; top: 24px; left: 32px; right: 32px; height: 40px;34 display: flex; align-items: center; color: #fff; z-index: 2;35 font-size: 28px; font-weight: 600;36 }37 .status-right {38 margin-left: auto; display: flex; align-items: center; gap: 18px;39 }40 .dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; opacity: 0.9; }41 .wifi-icon, .battery-icon {42 width: 32px; height: 22px; display: inline-block;43 }44 .wifi-icon svg path { fill: #ffffff; opacity: 0.95; }45 .battery-icon svg { fill: none; stroke: #ffffff; stroke-width: 2; }46 47 /* Background content stub */48 .content-card {49 position: absolute; left: 48px; top: 760px; right: 48px;50 background: #ffffff; border-radius: 20px; box-shadow: 0 6px 20px rgba(0,0,0,0.12);51 padding: 24px; height: 380px;52 }53 .book-btn {54 position: absolute; left: 64px; bottom: 48px;55 background: #20173e; color: #fff; font-size: 40px; font-weight: 700;56 padding: 26px 42px; border-radius: 16px; display: inline-flex; align-items: center; gap: 18px;57 }58 .book-icon {59 width: 52px; height: 52px; background: rgba(255,255,255,0.2); border-radius: 8px;60 }61 62 /* Dim overlay behind modal */63 .scrim {64 position: absolute; left: 0; top: 0; width: 100%; height: 100%;65 background: rgba(0,0,0,0.35);66 }67 68 /* Modal */69 .modal {70 position: absolute; left: 60px; right: 60px; top: 910px;71 background: #ffffff; border-radius: 16px;72 box-shadow: 0 10px 30px rgba(0,0,0,0.25);73 z-index: 3; overflow: hidden;74 }75 .modal-inner { padding: 40px 48px 32px; }76 .titles {77 display: flex; align-items: center; justify-content: space-between;78 }79 .title-left {80 font-size: 40px; font-weight: 800; color: #2c2246;81 letter-spacing: 0.6px;82 }83 .title-right {84 font-size: 40px; font-weight: 800; color: #9A9AA1;85 letter-spacing: 0.6px;86 }87 .title-underline {88 width: 380px; height: 4px; background: #2c2246; margin-top: 20px;89 }90 91 /* Time selector */92 .time-shelf { margin-top: 40px; }93 .time-row { display: flex; align-items: center; gap: 60px; }94 .time-row.prev, .time-row.next { justify-content: center; color: #c3c7d4; font-size: 44px; font-weight: 600; }95 .time-row.prev { margin-bottom: 18px; }96 .time-row.next { margin-top: 18px; }97 .time-row.current { justify-content: center; position: relative; }98 .time-field {99 width: 220px; text-align: center; position: relative;100 color: #2c2246; font-size: 64px; font-weight: 800;101 }102 .time-line-top, .time-line-bottom {103 height: 6px; background: #2c2246; border-radius: 3px; width: 100%;104 }105 .time-value { line-height: 80px; margin: 14px 0; }106 .colon { font-size: 64px; font-weight: 800; color: #2c2246; width: 40px; text-align: center; }107 .now-btn {108 position: absolute; right: 40px; align-self: center;109 background: #F7B500; color: #251b43; font-size: 40px; font-weight: 800;110 border: none; border-radius: 12px; padding: 18px 26px; box-shadow: 0 2px 6px rgba(0,0,0,0.2);111 }112 113 .divider { height: 2px; background: #ECEDEF; margin: 40px 0 24px; }114 115 /* Date row */116 .date-row { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }117 .date-text { font-size: 44px; font-weight: 700; color: #1d1f36; }118 .chev {119 width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;120 }121 .chev svg path { fill: #F7B500; }122 123 /* Actions */124 .actions { display: flex; align-items: center; justify-content: flex-end; gap: 28px; padding-top: 28px; }125 .btn {126 font-size: 40px; font-weight: 800; padding: 24px 36px; border-radius: 14px; border: none;127 }128 .btn.cancel {129 background: #ffffff; color: #3a3553; border: 2px solid #E0E0E0;130 }131 .btn.done {132 background: #F7B500; color: #2c2246;133 }134 135 /* Bottom navigation bar */136 .bottom-nav {137 position: absolute; left: 0; right: 0; bottom: 110px; height: 140px;138 background: #ffffff; border-top: 1px solid #E7E7EA; display: flex; justify-content: space-around; align-items: center;139 }140 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #2c2246; }141 .nav-item.inactive { color: #9A9AA1; }142 .nav-icon {143 width: 56px; height: 56px; border-radius: 12px; background: #f0f0f4;144 display: flex; align-items: center; justify-content: center;145 }146 .home-indicator {147 position: absolute; left: 50%; transform: translateX(-50%);148 bottom: 40px; width: 240px; height: 12px; background: #000; opacity: 0.1; border-radius: 6px;149 }150</style>151</head>152<body>153<div id="render-target">154 155 <!-- Hero image area -->156 <div class="hero">157 <div class="img-label">[IMG: Scenic valley with train]</div>158 <div class="hero-title">Where to next?</div>159 </div>160 161 <!-- Status bar -->162 <div class="status-bar">163 <div>11:31</div>164 <div class="status-right">165 <div class="dot"></div>166 <div class="dot"></div>167 <div class="dot"></div>168 <div class="dot"></div>169 <div class="wifi-icon">170 <svg viewBox="0 0 24 24">171 <path d="M12 18a2 2 0 1 0 0.001 0zM3 9c5.5-5 12.5-5 18 0l-1.8 2c-4.7-4.2-9.7-4.2-14.4 0L3 9zM6.5 12.5c3.9-3.4 7.1-3.4 11 0l-1.7 1.8c-2.8-2.5-4.8-2.5-7.6 0l-1.7-1.8z"></path>172 </svg>173 </div>174 <div class="battery-icon">175 <svg viewBox="0 0 32 22">176 <rect x="1" y="3" width="26" height="16" rx="3"></rect>177 <rect x="28" y="8" width="3" height="6" rx="1"></rect>178 </svg>179 </div>180 </div>181 </div>182 183 <!-- Background content card -->184 <div class="content-card">185 <div style="width: 100%; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 12px;">186 [IMG: Route card / planner details]187 </div>188 <div class="book-btn">189 <div class="book-icon"></div>190 <div>Book seats</div>191 </div>192 </div>193 194 <!-- Scrim to dim background -->195 <div class="scrim"></div>196 197 <!-- Modal dialog -->198 <div class="modal">199 <div class="modal-inner">200 <div class="titles">201 <div class="title-left">DEPARTURE</div>202 <div class="title-right">ARRIVAL</div>203 </div>204 <div class="title-underline"></div>205 206 <div class="time-shelf">207 <div class="time-row prev">208 <span>10</span>209 <span>30</span>210 </div>211 212 <div class="time-row current">213 <div class="time-field">214 <div class="time-line-top"></div>215 <div class="time-value">11</div>216 <div class="time-line-bottom"></div>217 </div>218 <div class="colon">:</div>219 <div class="time-field">220 <div class="time-line-top"></div>221 <div class="time-value">31</div>222 <div class="time-line-bottom"></div>223 </div>224 <button class="now-btn">Now</button>225 </div>226 227 <div class="time-row next">228 <span>12</span>229 <span>32</span>230 </div>231 </div>232 233 <div class="divider"></div>234 235 <div class="date-row">236 <div class="chev">237 <svg viewBox="0 0 24 24" width="28" height="28">238 <path d="M15.5 5l-7 7 7 7-2 2-9-9 9-9 2 2z"></path>239 </svg>240 </div>241 <div class="date-text">Mon 25 Sep 2023</div>242 <div class="chev">243 <svg viewBox="0 0 24 24" width="28" height="28">244 <path d="M8.5 19l7-7-7-7 2-2 9 9-9 9-2-2z"></path>245 </svg>246 </div>247 </div>248 249 <div class="divider"></div>250 251 <div class="actions">252 <button class="btn cancel">CANCEL</button>253 <button class="btn done">DONE</button>254 </div>255 </div>256 </div>257 258 <!-- Bottom navigation bar -->259 <div class="bottom-nav">260 <div class="nav-item">261 <div class="nav-icon">262 <svg viewBox="0 0 24 24" width="32" height="32">263 <circle cx="12" cy="12" r="10" fill="#2c2246"></circle>264 </svg>265 </div>266 <div style="font-size: 34px; font-weight: 700;">Planner</div>267 </div>268 <div class="nav-item inactive">269 <div class="nav-icon"></div>270 <div style="font-size: 34px; font-weight: 700;">My Trip</div>271 </div>272 <div class="nav-item inactive">273 <div class="nav-icon"></div>274 <div style="font-size: 34px; font-weight: 700;">My Pass</div>275 </div>276 <div class="nav-item inactive">277 <div class="nav-icon"></div>278 <div style="font-size: 34px; font-weight: 700;">More</div>279 </div>280 </div>281 282 <div class="home-indicator"></div>283 284</div>285</body>286</html>