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>Travel Plans - Date Picker</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #eaf0f5;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 160px;24 background: #8e8e8e;25 color: #fff;26 font-family: "Segoe UI", Arial, sans-serif;27 font-weight: 600;28 }29 .status-inner {30 position: absolute;31 top: 40px;32 left: 40px;33 right: 40px;34 display: flex;35 justify-content: space-between;36 align-items: center;37 font-size: 38px;38 }39 .status-left, .status-right {40 display: flex;41 align-items: center;42 gap: 24px;43 }44 .status-icon svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 4; }45 46 /* Main card behind modal */47 .hero-card {48 position: absolute;49 top: 200px;50 left: 40px;51 width: 1000px;52 height: 980px;53 background: #ffffff;54 border-radius: 56px;55 box-shadow: 0 24px 48px rgba(0,0,0,0.12);56 padding: 60px 60px 40px;57 font-family: "Segoe UI", Arial, sans-serif;58 }59 .hero-title {60 text-align: center;61 color: #1f2a37;62 font-weight: 800;63 font-size: 64px;64 line-height: 1.1;65 margin-top: 40px;66 margin-bottom: 50px;67 }68 .form-row {69 display: grid;70 grid-template-columns: 1fr;71 gap: 26px;72 }73 .pill-field {74 background: #f5f7fb;75 border: 1px solid #d9dee6;76 border-radius: 28px;77 height: 120px;78 display: flex;79 align-items: center;80 padding: 0 36px;81 color: #3b4a5a;82 font-size: 36px;83 }84 .suggestions {85 position: absolute;86 bottom: 40px;87 left: 40px;88 right: 40px;89 display: flex;90 gap: 28px;91 align-items: center;92 }93 .suggestion-card {94 flex: 1;95 background: #f7f9fc;96 border: 1px solid #d9dee6;97 border-radius: 40px;98 height: 180px;99 padding: 28px 34px;100 box-shadow: inset 0 0 0 rgba(0,0,0,0);101 }102 .suggestion-card .sub { color: #5b6b7c; font-size: 34px; }103 .suggestion-card .main { color: #0b1f33; font-size: 48px; font-weight: 700; }104 .hero-image {105 width: 340px;106 height: 180px;107 background: #E0E0E0;108 border: 1px solid #BDBDBD;109 border-radius: 28px;110 display: flex;111 justify-content: center;112 align-items: center;113 color: #757575;114 }115 116 /* Bottom navigation */117 .bottom-nav {118 position: absolute;119 bottom: 0;120 left: 0;121 width: 1080px;122 height: 220px;123 background: #ffffff;124 border-top: 1px solid #e2e8f0;125 display: flex;126 justify-content: space-around;127 align-items: center;128 font-family: "Segoe UI", Arial, sans-serif;129 }130 .nav-item {131 display: flex;132 flex-direction: column;133 align-items: center;134 gap: 14px;135 color: #667085;136 font-size: 34px;137 font-weight: 700;138 }139 .nav-item .icon svg { width: 64px; height: 64px; stroke: #667085; stroke-width: 6; fill: none; }140 .nav-item.active { color: #0d8bff; }141 .nav-item.active .icon svg { stroke: #0d8bff; }142 143 /* Modal overlay */144 .overlay {145 position: absolute;146 inset: 0;147 background: rgba(0,0,0,0.18);148 z-index: 10;149 }150 151 /* Date picker modal */152 .date-modal {153 position: absolute;154 top: 720px;155 left: 80px;156 width: 920px;157 background: #ffffff;158 border-radius: 48px;159 overflow: hidden;160 box-shadow: 0 40px 90px rgba(0,0,0,0.25);161 z-index: 11;162 }163 .modal-header {164 background: #0d8bff;165 color: #fff;166 padding: 40px 56px 44px;167 border-bottom: 1px solid rgba(255,255,255,0.2);168 }169 .modal-header .label {170 font-size: 30px;171 letter-spacing: 1px;172 font-weight: 700;173 opacity: 0.95;174 }175 .modal-header .date-display {176 margin-top: 26px;177 font-size: 88px;178 font-weight: 800;179 line-height: 1.05;180 }181 .edit-icon {182 position: absolute;183 right: 40px;184 top: 40px;185 }186 .edit-icon svg { width: 54px; height: 54px; fill: none; stroke: #fff; stroke-width: 6; }187 188 .modal-body {189 padding: 36px 56px 30px;190 }191 .month-row {192 display: flex;193 align-items: center;194 justify-content: space-between;195 margin-bottom: 34px;196 }197 .month-left {198 display: flex;199 align-items: center;200 gap: 14px;201 font-size: 42px;202 color: #667085;203 font-weight: 800;204 }205 .chevron {206 width: 22px;207 height: 22px;208 border-right: 4px solid #9AA4B2;209 border-bottom: 4px solid #9AA4B2;210 transform: rotate(45deg);211 margin-left: 8px;212 }213 .month-right {214 display: flex;215 align-items: center;216 gap: 32px;217 }218 .arrows svg { width: 40px; height: 40px; fill: none; stroke: #9AA4B2; stroke-width: 6; }219 220 .dow {221 display: grid;222 grid-template-columns: repeat(7, 1fr);223 gap: 22px;224 margin-bottom: 24px;225 color: #111827;226 font-size: 40px;227 font-weight: 700;228 text-align: center;229 }230 231 .calendar-grid {232 display: grid;233 grid-template-columns: repeat(7, 1fr);234 gap: 22px;235 }236 .day {237 height: 104px;238 display: flex;239 align-items: center;240 justify-content: center;241 font-size: 40px;242 color: #3b4a5a;243 font-weight: 700;244 }245 .empty { color: transparent; }246 .outlined {247 border: 4px solid #3b4a5a;248 border-radius: 50%;249 width: 104px;250 height: 104px;251 box-sizing: border-box;252 }253 .selected {254 background: #0d8bff;255 color: #fff;256 border-radius: 50%;257 width: 104px;258 height: 104px;259 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.3);260 }261 262 .modal-actions {263 display: flex;264 justify-content: flex-end;265 gap: 40px;266 padding: 40px 56px 54px;267 font-size: 42px;268 font-weight: 800;269 }270 .modal-actions .btn {271 color: #0d8bff;272 cursor: default;273 }274</style>275</head>276<body>277<div id="render-target">278 279 <!-- Status bar -->280 <div class="status-bar">281 <div class="status-inner">282 <div class="status-left">283 <div>2:50</div>284 <div class="status-icon">285 <svg viewBox="0 0 24 24"><path d="M2 6h20v12H2z"/><path d="M2 6l10 7 10-7"/></svg>286 </div>287 <div class="status-icon">288 <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M8 20h8"/></svg>289 </div>290 </div>291 <div class="status-right">292 <div class="status-icon">293 <svg viewBox="0 0 24 24"><path d="M2 9c5.5-6 14.5-6 20 0"/><path d="M5 12c3.5-3.5 10.5-3.5 14 0"/><path d="M8 15c2-2 6-2 8 0"/></svg>294 </div>295 <div class="status-icon">296 <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2"/><rect x="20.5" y="9" width="2" height="6" rx="1"/></svg>297 </div>298 </div>299 </div>300 </div>301 302 <!-- Background hero card -->303 <div class="hero-card">304 <div class="hero-title">What are your travel plans?</div>305 <div class="form-row">306 <div class="pill-field">From • Boston</div>307 <div class="pill-field">To • New York</div>308 <div class="pill-field">Date • Nov 10, 2023</div>309 <div class="pill-field">Passengers • 1 Adult</div>310 </div>311 312 <div class="suggestions">313 <div class="suggestion-card">314 <div class="sub">Boston</div>315 <div class="main">New York</div>316 </div>317 <div class="suggestion-card">318 <div class="sub">Miami</div>319 <div class="main">Orlando</div>320 </div>321 <div class="hero-image">[IMG: Neon street / theater]</div>322 </div>323 </div>324 325 <!-- Bottom navigation -->326 <div class="bottom-nav">327 <div class="nav-item active">328 <div class="icon">329 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>330 </div>331 <div>SEARCH</div>332 </div>333 <div class="nav-item">334 <div class="icon">335 <svg viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="14" rx="3"/><path d="M8 9h8M8 13h8"/></svg>336 </div>337 <div>TRIPS</div>338 </div>339 <div class="nav-item">340 <div class="icon">341 <svg viewBox="0 0 24 24"><circle cx="12" cy="6" r="1.5"/><path d="M12 10v8"/><circle cx="12" cy="18" r="1.5"/></svg>342 </div>343 <div>HELP</div>344 </div>345 <div class="nav-item">346 <div class="icon">347 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg>348 </div>349 <div>PROFILE</div>350 </div>351 </div>352 353 <!-- Overlay + Date Picker Modal -->354 <div class="overlay"></div>355 356 <div class="date-modal">357 <div class="modal-header">358 <div class="label">SELECT DATE</div>359 <div class="date-display">Nov 10, 2023</div>360 <div class="edit-icon">361 <svg viewBox="0 0 24 24"><path d="M3 17l3-1 11-11-2-2-11 11-1 3z"/><path d="M14 4l6 6"/></svg>362 </div>363 </div>364 365 <div class="modal-body">366 <div class="month-row">367 <div class="month-left">November 2023 <span class="chevron" style="transform: rotate(-45deg);"></span></div>368 <div class="month-right">369 <div class="arrows">370 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>371 </div>372 <div class="arrows">373 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>374 </div>375 </div>376 </div>377 378 <div class="dow">379 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>380 </div>381 382 <div class="calendar-grid">383 <div class="day empty">0</div>384 <div class="day empty">0</div>385 <div class="day empty">0</div>386 <div class="day">1</div>387 <div class="day">2</div>388 <div class="day">3</div>389 <div class="day">4</div>390 391 <div class="day">5</div>392 <div class="day">6</div>393 <div class="day">7</div>394 <div class="day">8</div>395 <div class="day"><div class="outlined">9</div></div>396 <div class="day"><div class="selected">10</div></div>397 <div class="day">11</div>398 399 <div class="day">12</div>400 <div class="day">13</div>401 <div class="day">14</div>402 <div class="day">15</div>403 <div class="day">16</div>404 <div class="day">17</div>405 <div class="day">18</div>406 407 <div class="day">19</div>408 <div class="day">20</div>409 <div class="day">21</div>410 <div class="day">22</div>411 <div class="day">23</div>412 <div class="day">24</div>413 <div class="day">25</div>414 415 <div class="day">26</div>416 <div class="day">27</div>417 <div class="day">28</div>418 <div class="day">29</div>419 <div class="day">30</div>420 <div class="day empty">0</div>421 <div class="day empty">0</div>422 </div>423 </div>424 425 <div class="modal-actions">426 <div class="btn">Cancel</div>427 <div class="btn">OK</div>428 </div>429 </div>430 431</div>432</body>433</html>