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>Date Picker Mock - Mobile</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 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #f5f6f7;20 color: #1b2f36;21 }22 23 /* Top system/status bar */24 .status-bar {25 position: absolute;26 top: 0;27 left: 0;28 right: 0;29 height: 140px;30 background: #083b46;31 color: #fff;32 display: flex;33 align-items: center;34 padding: 0 40px;35 box-sizing: border-box;36 }37 .status-left {38 font-weight: 600;39 font-size: 40px;40 letter-spacing: 0.5px;41 }42 .status-right {43 margin-left: auto;44 display: flex;45 align-items: center;46 gap: 28px;47 }48 .status-icon {49 width: 40px;50 height: 40px;51 opacity: 0.95;52 }53 54 /* App header area */55 .app-header {56 position: absolute;57 top: 140px;58 left: 0;59 right: 0;60 height: 280px;61 background: #083b46;62 padding: 36px 40px;63 box-sizing: border-box;64 }65 .logo-placeholder {66 width: 360px;67 height: 90px;68 background: #E0E0E0;69 border: 1px solid #BDBDBD;70 color: #757575;71 display: flex;72 align-items: center;73 justify-content: center;74 border-radius: 6px;75 font-size: 30px;76 letter-spacing: 1px;77 opacity: 0.85;78 }79 80 /* Content area with cards */81 .content {82 position: absolute;83 top: 420px;84 left: 0;85 right: 0;86 bottom: 190px;87 padding: 36px;88 box-sizing: border-box;89 overflow: hidden;90 }91 .card {92 background: #ffffff;93 border-radius: 22px;94 border: 1px solid #e3e3e3;95 box-shadow: 0 2px 6px rgba(0,0,0,0.06);96 padding: 28px;97 box-sizing: border-box;98 }99 .form-card {100 padding: 28px;101 }102 .field {103 border: 2px solid #d9d9d9;104 border-radius: 18px;105 padding: 34px;106 margin-bottom: 22px;107 color: #6a6f73;108 font-size: 40px;109 background: #fff;110 position: relative;111 }112 .field .label {113 display: block;114 color: #60757c;115 font-size: 28px;116 margin-bottom: 10px;117 opacity: 0.9;118 }119 .swap-btn {120 position: absolute;121 right: 24px;122 top: 140px;123 width: 120px;124 height: 120px;125 background: #ffffff;126 border-radius: 60px;127 border: 2px solid #d6d6d6;128 display: flex;129 align-items: center;130 justify-content: center;131 box-shadow: 0 4px 10px rgba(0,0,0,0.08);132 }133 134 .cta {135 margin-top: 22px;136 width: 300px;137 height: 110px;138 border-radius: 16px;139 background: #b85e23;140 color: #fff;141 display: flex;142 align-items: center;143 justify-content: center;144 font-weight: 600;145 font-size: 36px;146 }147 148 .promo-card {149 margin-top: 28px;150 padding: 0;151 overflow: hidden;152 }153 .promo-image {154 height: 400px;155 background: #E0E0E0;156 border-bottom: 1px solid #BDBDBD;157 display: flex;158 align-items: center;159 justify-content: center;160 color: #757575;161 font-size: 34px;162 }163 .promo-body {164 padding: 28px;165 color: #5f6a6f;166 font-size: 36px;167 }168 169 /* Bottom navigation */170 .bottom-nav {171 position: absolute;172 left: 0;173 right: 0;174 bottom: 100px;175 height: 160px;176 background: #ffffff;177 border-top: 1px solid #e3e3e3;178 display: flex;179 justify-content: space-around;180 align-items: center;181 }182 .nav-item {183 display: flex;184 flex-direction: column;185 align-items: center;186 color: #9aa5aa;187 font-size: 32px;188 gap: 14px;189 }190 .nav-item.active {191 color: #0c5160;192 font-weight: 600;193 }194 .home-indicator {195 position: absolute;196 bottom: 36px;197 left: 50%;198 transform: translateX(-50%);199 width: 300px;200 height: 12px;201 background: #cfd3d7;202 border-radius: 12px;203 }204 205 /* Overlay and date modal */206 .overlay {207 position: absolute;208 inset: 0;209 background: rgba(0,0,0,0.35);210 }211 .date-modal {212 position: absolute;213 left: 80px;214 top: 520px;215 width: 920px;216 height: 1200px;217 background: #ffffff;218 border-radius: 24px;219 box-shadow: 0 20px 60px rgba(0,0,0,0.25);220 overflow: hidden;221 display: flex;222 flex-direction: column;223 }224 .date-top {225 background: #0c5160;226 color: #ffffff;227 padding: 36px 40px 28px;228 }229 .date-top .subtitle {230 text-transform: uppercase;231 letter-spacing: 4px;232 opacity: 0.9;233 font-size: 28px;234 margin-bottom: 18px;235 }236 .date-top .big-date {237 font-size: 82px;238 font-weight: 700;239 display: flex;240 align-items: center;241 justify-content: space-between;242 }243 .date-body {244 background: #ffffff;245 flex: 1;246 display: flex;247 flex-direction: column;248 padding: 30px 36px 0;249 }250 .month-row {251 display: flex;252 align-items: center;253 gap: 20px;254 margin-bottom: 24px;255 }256 .month-name {257 font-size: 40px;258 color: #6f7a80;259 font-weight: 700;260 letter-spacing: 1px;261 }262 .spacer {263 flex: 1;264 }265 .icon-btn {266 width: 64px;267 height: 64px;268 border-radius: 12px;269 display: flex;270 align-items: center;271 justify-content: center;272 color: #4d636c;273 }274 .dow {275 display: grid;276 grid-template-columns: repeat(7, 1fr);277 gap: 16px;278 color: #9aa5aa;279 text-align: center;280 font-weight: 700;281 letter-spacing: 2px;282 margin-bottom: 8px;283 }284 .days {285 display: grid;286 grid-template-columns: repeat(7, 1fr);287 gap: 16px;288 padding: 16px 0 0;289 color: #8f999f;290 font-size: 40px;291 }292 .day {293 height: 96px;294 display: flex;295 align-items: center;296 justify-content: center;297 border-radius: 48px;298 }299 .day.selected {300 background: #0c5160;301 color: #ffffff;302 font-weight: 700;303 }304 .dialog-actions {305 display: flex;306 justify-content: flex-end;307 align-items: center;308 gap: 60px;309 padding: 26px 40px 34px;310 border-top: 1px solid rgba(0,0,0,0.06);311 }312 .action {313 color: #0c5160;314 font-weight: 800;315 letter-spacing: 4px;316 text-transform: uppercase;317 font-size: 38px;318 }319 320 /* Simple helper */321 .muted {322 color: #c5c9cc;323 }324</style>325</head>326<body>327<div id="render-target">328 329 <!-- Status bar -->330 <div class="status-bar">331 <div class="status-left">10:19</div>332 <div class="status-right">333 <!-- simple status icons -->334 <svg class="status-icon" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><circle cx="12" cy="12" r="9"/></svg>335 <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="5" y="3" width="14" height="18" rx="3"/><path d="M9 7h6"/></svg>336 <svg class="status-icon" viewBox="0 0 24 24" fill="#fff"><path d="M4 12h16l-6 4v4l-4-2v-2z"/></svg>337 <svg class="status-icon" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="3"/><path d="M2 12h4M18 12h4M12 2v4M12 18v4" stroke="#fff" stroke-width="2" fill="none"/></svg>338 <svg class="status-icon" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="2"/></svg>339 <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M2 18c2-3 6-6 10-6s8 3 10 6"/><path d="M6 18c1.5-2 4.5-4 6-4s4.5 2 6 4"/></svg>340 <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="7" y="3" width="10" height="18" rx="2"/><rect x="10" y="1" width="4" height="2" fill="#fff" stroke="none"/></svg>341 </div>342 </div>343 344 <!-- App header with logo -->345 <div class="app-header">346 <div class="logo-placeholder">[IMG: Greyhound Logo]</div>347 </div>348 349 <!-- Background content -->350 <div class="content">351 <div class="card form-card">352 <div class="field">353 <span class="label">From</span>354 Hamilton, ON355 </div>356 <div class="field">357 <span class="label">To</span>358 Richmond, ON359 </div>360 <div class="swap-btn">361 <svg width="64" height="64" viewBox="0 0 24 24" fill="#0c5160">362 <path d="M7 4l-3 3 3 3V8h7V6H7V4zM17 20l3-3-3-3v2h-7v2h7v2z"/>363 </svg>364 </div>365 <div class="field">366 <span class="label">Date</span>367 Oct 25, 2023368 </div>369 <div class="field">370 <span class="label">Passengers</span>371 1 Adult372 </div>373 <div class="cta">Search</div>374 </div>375 376 <div class="card promo-card">377 <div class="promo-image">[IMG: City Skyline / Bus Road]</div>378 <div class="promo-body">379 Our network has expanded! See how this benefits you.380 </div>381 </div>382 </div>383 384 <!-- Bottom Navigation -->385 <div class="bottom-nav">386 <div class="nav-item active">387 <svg width="64" height="64" viewBox="0 0 24 24" fill="#0c5160"><path d="M12 2l9 7v11H3V9l9-7z"/></svg>388 <div>Booking</div>389 </div>390 <div class="nav-item">391 <svg width="64" height="64" viewBox="0 0 24 24" fill="#9aa5aa"><path d="M3 6h18v12H3z"/><path d="M3 10h18" fill="none" stroke="#9aa5aa" stroke-width="2"/></svg>392 <div>Tickets</div>393 </div>394 <div class="nav-item">395 <svg width="64" height="64" viewBox="0 0 24 24" fill="#9aa5aa"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>396 <div>Stops</div>397 </div>398 <div class="nav-item">399 <svg width="64" height="64" viewBox="0 0 24 24" fill="#9aa5aa"><circle cx="12" cy="12" r="10"/><rect x="11" y="10" width="2" height="7" fill="#fff"/><rect x="11" y="7" width="2" height="2" fill="#fff"/></svg>400 <div>More</div>401 </div>402 </div>403 <div class="home-indicator"></div>404 405 <!-- Modal Overlay and Date Picker -->406 <div class="overlay"></div>407 <div class="date-modal">408 <div class="date-top">409 <div class="subtitle">Select Date</div>410 <div class="big-date">411 <span>Oct 25, 2023</span>412 <svg width="64" height="64" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">413 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z"/>414 </svg>415 </div>416 </div>417 <div class="date-body">418 <div class="month-row">419 <div class="month-name">OCTOBER 2023</div>420 <svg width="28" height="28" viewBox="0 0 24 24" fill="#6f7a80"><path d="M7 10l5 5 5-5H7z"/></svg>421 <div class="spacer"></div>422 <div class="icon-btn">423 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#6f7a80" stroke-width="2">424 <path d="M15 18l-6-6 6-6"/>425 </svg>426 </div>427 <div class="icon-btn">428 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#6f7a80" stroke-width="2">429 <path d="M9 6l6 6-6 6"/>430 </svg>431 </div>432 </div>433 434 <div class="dow">435 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>436 </div>437 438 <div class="days">439 <div class="day muted">1</div>440 <div class="day muted">2</div>441 <div class="day muted">3</div>442 <div class="day muted">4</div>443 <div class="day muted">5</div>444 <div class="day muted">6</div>445 <div class="day muted">7</div>446 447 <div class="day muted">8</div>448 <div class="day muted">9</div>449 <div class="day muted">10</div>450 <div class="day muted">11</div>451 <div class="day muted">12</div>452 <div class="day muted">13</div>453 <div class="day muted">14</div>454 455 <div class="day muted">15</div>456 <div class="day muted">16</div>457 <div class="day muted">17</div>458 <div class="day muted">18</div>459 <div class="day muted">19</div>460 <div class="day muted">20</div>461 <div class="day muted">21</div>462 463 <div class="day muted">22</div>464 <div class="day muted">23</div>465 <div class="day muted">24</div>466 <div class="day selected">25</div>467 <div class="day muted">26</div>468 <div class="day muted">27</div>469 <div class="day muted">28</div>470 471 <div class="day muted">29</div>472 <div class="day muted">30</div>473 <div class="day muted">31</div>474 <div class="day"></div>475 <div class="day"></div>476 <div class="day"></div>477 <div class="day"></div>478 </div>479 480 <div class="dialog-actions">481 <div class="action">Cancel</div>482 <div class="action">OK</div>483 </div>484 </div>485 </div>486 487</div>488</body>489</html>