GD-ML/AndroidCode
13.4k
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>Calendar Modal UI</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#f5f5f7;13 }14 15 /* Status bar */16 .statusbar {17 position:absolute; top:24px; left:24px; right:24px;18 height:42px; display:flex; align-items:center; justify-content:space-between;19 z-index:2; color:#fff; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial;20 font-weight:600;21 }22 .status-left { display:flex; align-items:center; gap:18px; }23 .status-dots { display:flex; gap:10px; }24 .dot {25 width:20px; height:20px; border-radius:50%; background:#fff; opacity:0.9;26 border:1px solid rgba(0,0,0,0.1);27 }28 .status-right { display:flex; align-items:center; gap:18px; }29 .status-icon { width:30px; height:30px; opacity:0.95; }30 31 /* Hero image and heading */32 .hero {33 position:relative; width:100%; height:760px;34 }35 .hero .img {36 position:absolute; inset:0;37 background:#E0E0E0; border:1px solid #BDBDBD;38 display:flex; justify-content:center; align-items:center; color:#757575;39 font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial;40 font-size:32px; letter-spacing:0.2px;41 }42 .hero .title {43 position:absolute; bottom:36px; left:32px;44 font-size:86px; line-height:1.05; color:rgba(255,255,255,0.92);45 font-weight:800; text-shadow:0 2px 8px rgba(0,0,0,0.35);46 font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial;47 }48 49 /* Underlying content card (dimmed by scrim when modal open) */50 .content-area {51 position:absolute; top:840px; left:24px; right:24px;52 }53 .card {54 background:#ffffff; border-radius:28px; box-shadow:0 12px 28px rgba(0,0,0,0.1);55 padding:36px; min-height:520px;56 }57 .card .section {58 background:#f7efe6; border-radius:22px; padding:32px; margin-top:24px;59 }60 .btn {61 display:inline-flex; align-items:center; gap:18px;62 background:#20123f; color:#fff; border-radius:16px;63 padding:26px 34px; font-size:36px; font-weight:700;64 margin-top:26px;65 }66 .btn svg { width:46px; height:46px; fill:#fff; }67 68 /* Bottom navigation */69 .bottom-bar {70 position:absolute; left:0; right:0; bottom:140px;71 height:170px; background:#fff; border-top:1px solid #e6e6ea;72 display:flex; justify-content:space-around; align-items:center;73 font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial;74 }75 .tab { display:flex; flex-direction:column; align-items:center; gap:16px; }76 .tab svg { width:58px; height:58px; }77 .tab span { font-size:32px; color:#7c7c88; font-weight:700; }78 .tab.active span { color:#20123f; }79 .tab.active svg { fill:#20123f; }80 .tab svg { fill:#9da0ad; }81 82 /* Gesture pill area */83 .gesture-area {84 position:absolute; left:0; right:0; bottom:0; height:140px; background:#000;85 display:flex; align-items:center; justify-content:center;86 }87 .pill {88 width:220px; height:18px; border-radius:10px; background:#e6e6e6;89 }90 91 /* Scrim */92 .scrim {93 position:absolute; inset:0; background:rgba(0,0,0,0.45); z-index:5;94 }95 96 /* Modal */97 .modal {98 position:absolute; left:50%; top:50%;99 transform:translate(-50%, -50%);100 width:880px; border-radius:22px; overflow:hidden;101 box-shadow:0 28px 60px rgba(0,0,0,0.35);102 z-index:6; background:#fff;103 }104 .modal-header {105 background:#1b123f; color:#fff; padding:32px 36px 28px;106 font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial;107 }108 .modal-header .year { font-size:36px; opacity:0.85; font-weight:700; }109 .modal-header .date-title {110 margin-top:10px; font-size:84px; font-weight:800; letter-spacing:0.5px;111 }112 .modal-body {113 background:#fff; padding:34px 40px 24px;114 font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial;115 }116 .month-row {117 display:flex; align-items:center; justify-content:space-between;118 margin-bottom:28px; color:#333; font-weight:800; font-size:40px;119 }120 .arrow {121 width:44px; height:44px; display:flex; align-items:center; justify-content:center;122 border-radius:10px; color:#1b123f;123 }124 .dow {125 display:grid; grid-template-columns:repeat(7, 1fr);126 color:#8f8f98; font-size:28px; font-weight:700; text-align:center;127 margin:0 6px 14px;128 }129 .grid {130 display:grid; grid-template-columns:repeat(7, 1fr);131 gap:22px 0; text-align:center;132 }133 .cell {134 height:108px; display:flex; align-items:center; justify-content:center;135 font-size:40px; color:#52525a; font-weight:600;136 }137 .cell .circle {138 width:96px; height:96px; border-radius:50%;139 display:flex; align-items:center; justify-content:center;140 }141 .cell.selected .circle { background:#1b123f; color:#fff; font-weight:800; }142 .modal-footer {143 margin-top:24px; padding:18px 6px 36px;144 display:flex; justify-content:space-between; align-items:center;145 }146 .action {147 font-size:38px; letter-spacing:4px; font-weight:800; color:#1b123f;148 }149</style>150</head>151<body>152<div id="render-target">153 154 <!-- Status bar -->155 <div class="statusbar">156 <div class="status-left">157 <div style="font-size:32px;">1:09</div>158 <div class="status-dots">159 <div class="dot"></div>160 <div class="dot" style="border-radius:4px;"></div>161 <div class="dot" style="border-radius:4px;"></div>162 </div>163 <div style="font-size:26px; opacity:0.85;">oyo</div>164 </div>165 <div class="status-right">166 <!-- Wi-Fi -->167 <svg class="status-icon" viewBox="0 0 24 24">168 <path fill="#fff" d="M12 18.5c.9 0 1.7.7 1.7 1.5S12.9 21.5 12 21.5s-1.7-.7-1.7-1.5.8-1.5 1.7-1.5zm8.3-9.1C16.2 6.2 7.8 6.2 3.7 9.4l-1.3-1.6C6.9 4.7 17.1 4.6 21.6 7.8l-1.3 1.6zm-3.2 3.7c-3.9-2.7-9.2-2.7-13.1 0l-1.3-1.6c4.9-3.3 10.8-3.3 15.7 0l-1.3 1.6zm-3.2 3.7c-2.3-1.6-5.3-1.6-7.6 0l-1.3-1.6c3-2.1 7.1-2.1 10.1 0l-1.2 1.6z"/>169 </svg>170 <!-- Battery -->171 <svg class="status-icon" viewBox="0 0 28 24">172 <path fill="#fff" d="M22 5h2a2 2 0 0 1 2 2v2h2v6h-2v2a2 2 0 0 1-2 2h-2V5zm-2 0H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14V5zM8 9h10v4H8V9z"/>173 </svg>174 </div>175 </div>176 177 <!-- Hero background -->178 <div class="hero">179 <div class="img">[IMG: Scenic valley with train]</div>180 <div class="title">Where to next?</div>181 </div>182 183 <!-- Underlying content -->184 <div class="content-area">185 <div class="card">186 <div style="height:18px; width:160px; background:#2c2550; border-radius:6px; margin-bottom:36px;"></div>187 <div class="section">188 <div style="font-size:38px; color:#444; font-weight:800; margin-bottom:18px;">Plan your journey</div>189 <div style="font-size:30px; color:#666; line-height:1.5;">190 Pick a date, choose your route and reserve seats easily. This is placeholder content behind the modal.191 </div>192 <div class="btn">193 <svg viewBox="0 0 24 24">194 <path d="M4 3h16v2H4V3zm0 4h16v9H4V7zm2 11h12v2H6v-2z"/>195 </svg>196 <span>Book seats</span>197 </div>198 </div>199 </div>200 </div>201 202 <!-- Bottom navigation -->203 <div class="bottom-bar">204 <div class="tab active">205 <svg viewBox="0 0 24 24">206 <path d="M12 1a1 1 0 0 1 1 1v10l5 3-.8 1.4L11 13V2a1 1 0 0 1 1-1zm0 2a9 9 0 1 0 0 18 9 9 0 0 0 0-18z"/>207 </svg>208 <span>Planner</span>209 </div>210 <div class="tab">211 <svg viewBox="0 0 24 24">212 <path d="M12 2c3.3 0 6 2.7 6 6 0 4.5-6 12-6 12S6 12.5 6 8c0-3.3 2.7-6 6-6zm0 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/>213 </svg>214 <span>My Trip</span>215 </div>216 <div class="tab">217 <svg viewBox="0 0 24 24">218 <path d="M4 3h16v14H4V3zm2 2v10h12V5H6zm-2 16h16v2H4v-2z"/>219 </svg>220 <span>My Pass</span>221 </div>222 <div class="tab">223 <svg viewBox="0 0 24 24">224 <path d="M3 5h18v2H3V5zm0 6h18v2H3v-2zm0 6h18v2H3v-2z"/>225 </svg>226 <span>More</span>227 </div>228 </div>229 230 <!-- Gesture pill -->231 <div class="gesture-area">232 <div class="pill"></div>233 </div>234 235 <!-- Scrim over content -->236 <div class="scrim"></div>237 238 <!-- Calendar modal -->239 <div class="modal">240 <div class="modal-header">241 <div class="year">2023</div>242 <div class="date-title">Thu, Aug 10</div>243 </div>244 <div class="modal-body">245 <div class="month-row">246 <div class="arrow">247 <svg viewBox="0 0 24 24">248 <path fill="#1b123f" d="M15.5 6l-6 6 6 6-1.5 1.5L6.5 12l7.5-7.5L15.5 6z"/>249 </svg>250 </div>251 <div>August 2023</div>252 <div class="arrow">253 <svg viewBox="0 0 24 24">254 <path fill="#1b123f" d="M8.5 6l6 6-6 6 1.5 1.5L17.5 12 10 4.5 8.5 6z"/>255 </svg>256 </div>257 </div>258 259 <div class="dow">260 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>261 </div>262 263 <div class="grid">264 <!-- Row 1 -->265 <div class="cell"><div>1</div></div>266 <div class="cell"><div>2</div></div>267 <div class="cell"><div>3</div></div>268 <div class="cell"><div>4</div></div>269 <div class="cell"><div>5</div></div>270 <div class="cell"><div>6</div></div>271 <div class="cell"><div>7</div></div>272 <!-- Row 2 -->273 <div class="cell"><div>8</div></div>274 <div class="cell"><div>9</div></div>275 <div class="cell selected"><div class="circle">10</div></div>276 <div class="cell"><div>11</div></div>277 <div class="cell"><div>12</div></div>278 <div class="cell"><div>13</div></div>279 <div class="cell"><div>14</div></div>280 <!-- Row 3 -->281 <div class="cell"><div>15</div></div>282 <div class="cell"><div>16</div></div>283 <div class="cell"><div>17</div></div>284 <div class="cell"><div>18</div></div>285 <div class="cell"><div>19</div></div>286 <div class="cell"><div>20</div></div>287 <div class="cell"><div>21</div></div>288 <!-- Row 4 -->289 <div class="cell"><div>22</div></div>290 <div class="cell"><div>23</div></div>291 <div class="cell"><div>24</div></div>292 <div class="cell"><div>25</div></div>293 <div class="cell"><div>26</div></div>294 <div class="cell"><div>27</div></div>295 <div class="cell"><div>28</div></div>296 <!-- Row 5 -->297 <div class="cell"><div>29</div></div>298 <div class="cell"><div>30</div></div>299 <div class="cell"><div>31</div></div>300 <div class="cell"></div>301 <div class="cell"></div>302 <div class="cell"></div>303 <div class="cell"></div>304 </div>305 306 <div class="modal-footer">307 <div class="action">CANCEL</div>308 <div class="action">OK</div>309 </div>310 </div>311 </div>312 313</div>314</body>315</html>