GD-ML/AndroidCode
13.4k
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>Calendar Modal UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13 color: #212121;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #f6f5f7;21 }22 23 /* Status bar */24 .status-bar {25 position: absolute;26 top: 0;27 left: 0;28 right: 0;29 height: 90px;30 display: flex;31 align-items: center;32 padding: 0 28px;33 color: #ffffff;34 z-index: 1;35 }36 .status-left {37 font-weight: 600;38 font-size: 38px;39 letter-spacing: 1px;40 }41 .status-right {42 margin-left: auto;43 display: flex;44 align-items: center;45 gap: 26px;46 }47 .dot {48 width: 18px; height: 18px; background: rgba(255,255,255,0.9); border-radius: 50%;49 }50 .wifi {51 width: 40px; height: 28px;52 }53 .battery {54 width: 44px; height: 24px;55 }56 57 /* Hero image placeholder */58 .hero {59 position: absolute;60 top: 0;61 left: 0;62 width: 1080px;63 height: 520px;64 background: #E0E0E0;65 border-bottom: 1px solid #BDBDBD;66 display: flex;67 align-items: flex-end;68 justify-content: flex-start;69 }70 .hero::after {71 content: "";72 position: absolute;73 inset: 0;74 background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.35));75 }76 .hero .img-label {77 position: relative;78 z-index: 0;79 width: 100%;80 text-align: center;81 color: #757575;82 font-size: 30px;83 padding-bottom: 10px;84 }85 .hero-title {86 position: absolute;87 left: 44px;88 bottom: 46px;89 font-size: 86px;90 color: rgba(255,255,255,0.9);91 font-weight: 700;92 letter-spacing: 1px;93 z-index: 2;94 }95 96 /* Underlying content cards */97 .content {98 position: absolute;99 top: 520px;100 left: 0;101 right: 0;102 padding: 36px;103 }104 .card {105 background: #ffffff;106 border-radius: 24px;107 box-shadow: 0 8px 30px rgba(0,0,0,0.08);108 padding: 36px;109 margin-bottom: 28px;110 }111 .row {112 display: flex;113 align-items: center;114 gap: 24px;115 }116 .icon-placeholder {117 width: 100px;118 height: 100px;119 background: #E0E0E0;120 border: 1px solid #BDBDBD;121 color: #757575;122 display: flex;123 justify-content: center;124 align-items: center;125 border-radius: 16px;126 font-size: 24px;127 }128 .btn {129 margin-top: 26px;130 background: #22153e;131 color: #fff;132 padding: 26px 40px;133 border-radius: 18px;134 display: inline-flex;135 align-items: center;136 gap: 18px;137 font-weight: 700;138 letter-spacing: 1px;139 }140 .btn .seat-icon {141 width: 38px; height: 38px; fill: #fff;142 }143 144 /* Bottom navigation */145 .bottom-nav {146 position: absolute;147 left: 0; right: 0; bottom: 90px;148 height: 170px;149 background: #ffffff;150 border-top: 1px solid #eee;151 display: flex;152 justify-content: space-around;153 align-items: center;154 }155 .nav-item {156 display: flex;157 flex-direction: column;158 align-items: center;159 gap: 14px;160 color: #888;161 font-size: 28px;162 }163 .nav-item.active {164 color: #22153e;165 font-weight: 700;166 }167 .nav-icon {168 width: 54px; height: 54px; fill: currentColor;169 }170 .gesture {171 position: absolute;172 left: 50%;173 transform: translateX(-50%);174 bottom: 24px;175 width: 300px;176 height: 12px;177 background: #ffffff;178 border-radius: 12px;179 opacity: 0.9;180 }181 182 /* Scrim for modal */183 .scrim {184 position: absolute;185 inset: 0;186 background: rgba(0,0,0,0.45);187 }188 189 /* Calendar dialog */190 .dialog {191 position: absolute;192 top: 520px;193 left: 50%;194 transform: translateX(-50%);195 width: 860px;196 background: #fff;197 border-radius: 18px;198 box-shadow: 0 18px 80px rgba(0,0,0,0.5);199 overflow: hidden;200 }201 .dialog-header {202 background: #1b1236;203 color: #fff;204 padding: 30px 40px 40px 40px;205 }206 .dialog-header .year {207 font-size: 34px;208 opacity: 0.9;209 }210 .dialog-header .date-title {211 margin-top: 10px;212 font-size: 86px;213 font-weight: 800;214 letter-spacing: 1px;215 }216 .dialog-body {217 padding: 30px 36px 26px 36px;218 }219 .month-row {220 display: flex;221 align-items: center;222 justify-content: space-between;223 padding: 10px 6px 18px 6px;224 }225 .month-row .month-label {226 font-size: 40px;227 font-weight: 700;228 color: #333;229 }230 .chev-btn {231 width: 56px; height: 56px;232 border-radius: 50%;233 display: flex;234 align-items: center; justify-content: center;235 color: #333;236 }237 .weekday {238 display: grid;239 grid-template-columns: repeat(7, 1fr);240 color: #8a8a8a;241 font-weight: 600;242 font-size: 28px;243 padding: 6px 8px 18px 8px;244 text-align: center;245 }246 .days {247 display: grid;248 grid-template-columns: repeat(7, 1fr);249 gap: 26px 0;250 text-align: center;251 font-size: 40px;252 color: #333;253 padding: 0 8px 18px 8px;254 }255 .day {256 height: 84px;257 display: flex;258 align-items: center;259 justify-content: center;260 }261 .day.blank {262 color: transparent;263 }264 .day.selected {265 color: #fff;266 position: relative;267 font-weight: 800;268 }269 .day.selected::before {270 content: "";271 position: absolute;272 width: 108px; height: 108px;273 border-radius: 50%;274 background: #1b1236;275 z-index: -1;276 }277 .dialog-footer {278 display: flex;279 justify-content: space-between;280 padding: 24px 40px 36px 40px;281 color: #1b1236;282 font-weight: 800;283 letter-spacing: 4px;284 font-size: 36px;285 }286</style>287</head>288<body>289<div id="render-target">290 291 <!-- Hero image and status bar area -->292 <div class="hero">293 <div class="img-label">[IMG: Mountain landscape with train]</div>294 </div>295 296 <div class="status-bar">297 <div class="status-left">11:29</div>298 <div class="status-right">299 <div class="dot"></div>300 <div class="dot"></div>301 <div class="dot"></div>302 <!-- wifi -->303 <svg class="wifi" viewBox="0 0 24 24">304 <path fill="#fff" d="M12 18.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm-4-3a7 7 0 018 0l-1.6 1.2a5 5 0 00-4.8 0L8 15.5zm-3.7-3.5a12 12 0 0115.4 0l-1.6 1.2a10 10 0 00-12.2 0L4.3 12z" />305 </svg>306 <!-- battery -->307 <svg class="battery" viewBox="0 0 28 14">308 <rect x="1" y="3" width="22" height="8" fill="none" stroke="#fff" stroke-width="2" rx="2"/>309 <rect x="3" y="5" width="14" height="4" fill="#fff"/>310 <rect x="24" y="5" width="3" height="4" fill="#fff" rx="1"/>311 </svg>312 </div>313 </div>314 315 <!-- Underlying content -->316 <div class="content">317 <div class="card">318 <div class="row">319 <div class="icon-placeholder">Pick</div>320 <div style="flex:1;">321 <div style="height: 28px; width: 60%; background:#eee; border-radius:8px; margin-bottom:18px;"></div>322 <div style="height: 28px; width: 40%; background:#eee; border-radius:8px;"></div>323 <div class="btn">324 <svg class="seat-icon" viewBox="0 0 24 24">325 <path d="M7 13h10V7a2 2 0 10-4 0v4H7V7a2 2 0 10-4 0v9h2v-3h2v3h10v-3h2v3h2v2H3v-2h4z" />326 </svg>327 Book seats328 </div>329 </div>330 </div>331 </div>332 <div class="card" style="height: 300px;">333 <div style="height:100%; display:flex; align-items:center; justify-content:center; color:#aaa;">334 Additional content335 </div>336 </div>337 </div>338 339 <!-- Scrim -->340 <div class="scrim"></div>341 342 <!-- Calendar dialog -->343 <div class="dialog">344 <div class="dialog-header">345 <div class="year">2023</div>346 <div class="date-title">Mon, Sep 25</div>347 </div>348 <div class="dialog-body">349 <div class="month-row">350 <div class="chev-btn">351 <svg width="34" height="34" viewBox="0 0 24 24">352 <path d="M15 18l-6-6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>353 </svg>354 </div>355 <div class="month-label">September 2023</div>356 <div class="chev-btn">357 <svg width="34" height="34" viewBox="0 0 24 24">358 <path d="M9 6l6 6-6 6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>359 </svg>360 </div>361 </div>362 <div class="weekday">363 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>364 </div>365 <div class="days">366 <!-- Week 1 blanks until Fri -->367 <div class="day blank">0</div>368 <div class="day blank">0</div>369 <div class="day blank">0</div>370 <div class="day blank">0</div>371 <div class="day blank">0</div>372 <div class="day">1</div>373 <div class="day">2</div>374 375 <!-- Week 2 -->376 <div class="day">3</div>377 <div class="day">4</div>378 <div class="day">5</div>379 <div class="day">6</div>380 <div class="day">7</div>381 <div class="day">8</div>382 <div class="day">9</div>383 384 <!-- Week 3 -->385 <div class="day">10</div>386 <div class="day">11</div>387 <div class="day">12</div>388 <div class="day">13</div>389 <div class="day">14</div>390 <div class="day">15</div>391 <div class="day">16</div>392 393 <!-- Week 4 -->394 <div class="day">17</div>395 <div class="day">18</div>396 <div class="day">19</div>397 <div class="day">20</div>398 <div class="day">21</div>399 <div class="day">22</div>400 <div class="day">23</div>401 402 <!-- Week 5 -->403 <div class="day">24</div>404 <div class="day selected">25</div>405 <div class="day">26</div>406 <div class="day">27</div>407 <div class="day">28</div>408 <div class="day">29</div>409 <div class="day">30</div>410 </div>411 </div>412 <div class="dialog-footer">413 <div>CANCEL</div>414 <div>OK</div>415 </div>416 </div>417 418 <!-- Bottom nav -->419 <div class="bottom-nav">420 <div class="nav-item active">421 <svg class="nav-icon" viewBox="0 0 24 24">422 <path d="M13 3a9 9 0 108 9h-2a7 7 0 11-7-7V3z"/>423 </svg>424 <div>Planner</div>425 </div>426 <div class="nav-item">427 <svg class="nav-icon" viewBox="0 0 24 24">428 <path d="M6 2h12v2H6V2zm0 4h12v16H6V6zm2 2v12h8V8H8z"/>429 </svg>430 <div>My Trip</div>431 </div>432 <div class="nav-item">433 <svg class="nav-icon" viewBox="0 0 24 24">434 <path d="M12 2a7 7 0 017 7c0 5.25-7 13-7 13S5 14.25 5 9a7 7 0 017-7zm0 4a3 3 0 100 6 3 3 0 000-6z"/>435 </svg>436 <div>My Pass</div>437 </div>438 <div class="nav-item">439 <svg class="nav-icon" viewBox="0 0 24 24">440 <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>441 </svg>442 <div>More</div>443 </div>444 </div>445 <div class="gesture"></div>446</div>447</body>448</html>