GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Date Picker UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #f7f7f7;14  }15 16  /* Status bar */17  .status-bar {18    height: 96px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #222;24    font-weight: 600;25    font-size: 40px;26  }27  .status-left { display: flex; align-items: center; gap: 18px; }28  .status-right { display: flex; align-items: center; gap: 24px; }29  .icon {30    width: 36px;31    height: 36px;32  }33 34  /* Close button */35  .close-wrap {36    position: absolute;37    top: 112px;38    left: 36px;39    width: 96px;40    height: 96px;41    border-radius: 48px;42    background: #ffffff;43    box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);44    display: flex;45    align-items: center;46    justify-content: center;47  }48  .close-wrap svg { width: 40px; height: 40px; stroke: #222; stroke-width: 8; }49 50  /* Top tabs */51  .tabs {52    margin: 116px 36px 0 156px; /* push to the right of close */53    display: flex;54    gap: 48px;55    align-items: flex-end;56  }57  .tab {58    font-size: 54px;59    font-weight: 700;60    color: #6e6e6e;61    padding-bottom: 14px;62  }63  .tab.active {64    color: #121212;65    border-bottom: 10px solid #121212;66    line-height: 1;67  }68 69  /* Search bar */70  .search-bar {71    margin: 36px 36px 0 36px;72    height: 140px;73    border-radius: 36px;74    background: #ffffff;75    display: flex;76    align-items: center;77    justify-content: space-between;78    padding: 0 40px;79    box-shadow: inset 0 0 0 2px #e6e6e6;80    font-size: 44px;81  }82  .search-placeholder { color: #8a8a8a; }83  .search-value { color: #222; font-weight: 600; }84 85  /* Main card */86  .card {87    margin: 36px 24px 0 24px;88    background: #ffffff;89    border-radius: 44px;90    box-shadow: 0 8px 28px rgba(0,0,0,0.08);91    padding: 56px 44px 36px 44px;92  }93  .title {94    font-size: 80px;95    line-height: 1.1;96    font-weight: 800;97    color: #1a1a1a;98    margin: 0 0 48px 0;99  }100 101  /* Segmented control */102  .segmented {103    width: 100%;104    background: #efefef;105    border-radius: 56px;106    height: 120px;107    display: flex;108    align-items: center;109    padding: 12px;110    gap: 12px;111  }112  .seg-btn {113    flex: 1;114    height: 96px;115    border-radius: 48px;116    display: flex; align-items: center; justify-content: center;117    font-size: 44px;118    font-weight: 700;119    color: #5e5e5e;120  }121  .seg-btn.active {122    background: #ffffff;123    color: #111;124    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);125  }126 127  /* Week header */128  .weekdays {129    display: grid;130    grid-template-columns: repeat(7, 1fr);131    margin-top: 44px;132    padding-bottom: 18px;133    border-bottom: 2px solid #ececec;134    color: #6a6a6a;135    font-size: 36px;136    font-weight: 600;137    text-align: center;138  }139 140  /* Small previous-month row */141  .prev-row {142    display: grid;143    grid-template-columns: repeat(7, 1fr);144    gap: 0;145    margin-top: 28px;146    color: #6a6a6a;147    font-size: 44px;148    text-align: center;149  }150 151  .month-label {152    margin-top: 44px;153    font-size: 56px;154    font-weight: 800;155    color: #1d1d1d;156  }157 158  /* Calendar grid */159  .calendar-grid {160    margin-top: 24px;161    display: grid;162    grid-template-columns: repeat(7, 1fr);163    row-gap: 28px;164    column-gap: 0;165    text-align: center;166    align-items: center;167  }168  .day {169    height: 120px;170    position: relative;171    display: flex;172    align-items: center;173    justify-content: center;174    font-size: 48px;175    color: #222;176    font-weight: 600;177  }178  /* selected range background (2-7) */179  .range {180    background: #e9e9e9;181    border-radius: 28px;182  }183  .circle {184    width: 132px; height: 132px;185    border-radius: 66px;186    background: #000;187    color: #fff;188    display: flex; align-items: center; justify-content: center;189    font-weight: 800;190    font-size: 48px;191    position: absolute;192  }193 194  /* Chips */195  .chips {196    margin-top: 42px;197    display: flex;198    gap: 24px;199    flex-wrap: wrap;200  }201  .chip {202    padding: 28px 40px;203    border-radius: 54px;204    background: #ffffff;205    border: 2px solid #d6d6d6;206    color: #222;207    font-weight: 700;208    font-size: 40px;209  }210  .chip.active {211    border-color: #222;212  }213 214  /* Card footer */215  .card-footer {216    margin-top: 38px;217    display: flex;218    align-items: center;219    justify-content: space-between;220  }221  .reset {222    color: #111;223    font-size: 44px;224    font-weight: 800;225    text-decoration: underline;226  }227  .next-btn {228    background: #000;229    color: #fff;230    border: none;231    border-radius: 28px;232    height: 120px;233    width: 240px;234    font-size: 48px;235    font-weight: 800;236  }237 238  /* Bottom home indicator */239  .home-indicator {240    position: absolute;241    bottom: 18px;242    left: 50%;243    transform: translateX(-50%);244    width: 420px;245    height: 12px;246    background: #1a1a1a;247    opacity: 0.25;248    border-radius: 8px;249  }250</style>251</head>252<body>253<div id="render-target">254 255  <!-- Status bar -->256  <div class="status-bar">257    <div class="status-left">258      <div>12:55</div>259      <svg class="icon" viewBox="0 0 24 24" fill="none">260        <rect x="3" y="3" width="18" height="18" rx="2" stroke="#444" stroke-width="2"/>261        <path d="M7 7h2v2H7zM11 7h2v2h-2zM15 7h2v2h-2z" fill="#444"/>262      </svg>263      <svg class="icon" viewBox="0 0 24 24" fill="none">264        <path d="M3 15c3-6 15-6 18 0" stroke="#444" stroke-width="2" stroke-linecap="round"/>265        <circle cx="18" cy="9" r="2" fill="#444"/>266      </svg>267    </div>268    <div class="status-right">269      <svg class="icon" viewBox="0 0 24 24" fill="none">270        <path d="M3 18c4-4 14-4 18 0" stroke="#444" stroke-width="2" stroke-linecap="round"/>271        <path d="M6 14c3-3 9-3 12 0" stroke="#444" stroke-width="2" stroke-linecap="round"/>272        <path d="M9 10c2-2 4-2 6 0" stroke="#444" stroke-width="2" stroke-linecap="round"/>273      </svg>274      <svg class="icon" viewBox="0 0 24 24" fill="none">275        <rect x="3" y="6" width="16" height="12" rx="2" stroke="#444" stroke-width="2"/>276        <rect x="19" y="9" width="2" height="6" fill="#444"/>277      </svg>278    </div>279  </div>280 281  <!-- Close button -->282  <div class="close-wrap">283    <svg viewBox="0 0 24 24" fill="none">284      <path d="M4 4l16 16M20 4L4 20" />285    </svg>286  </div>287 288  <!-- Tabs -->289  <div class="tabs">290    <div class="tab active">Stays</div>291    <div class="tab">Experiences</div>292  </div>293 294  <!-- Search bar -->295  <div class="search-bar">296    <div class="search-placeholder">Where</div>297    <div class="search-value">Newark</div>298  </div>299 300  <!-- Card -->301  <div class="card">302    <div class="title">When's your trip?</div>303 304    <div class="segmented">305      <div class="seg-btn active">Dates</div>306      <div class="seg-btn">Months</div>307      <div class="seg-btn">Flexible</div>308    </div>309 310    <div class="weekdays">311      <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>312    </div>313 314    <div class="prev-row">315      <div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div style="position:relative;">316        <!-- Circle for July 1st visible at right side -->317        <div class="circle">1</div>318      </div>319    </div>320 321    <div class="month-label">July 2023</div>322 323    <div class="calendar-grid">324      <div class="day range">2</div>325      <div class="day range">3</div>326      <div class="day range">4</div>327      <div class="day range">5</div>328      <div class="day range">6</div>329      <div class="day range" style="position:relative;">330        <div class="circle">7</div>331      </div>332      <div class="day">8</div>333 334      <div class="day">9</div>335      <div class="day">10</div>336      <div class="day">11</div>337      <div class="day">12</div>338      <div class="day">13</div>339      <div class="day">14</div>340      <div class="day">15</div>341 342      <div class="day">16</div>343      <div class="day">17</div>344      <div class="day">18</div>345      <div class="day">19</div>346      <div class="day">20</div>347      <div class="day">21</div>348      <div class="day">22</div>349    </div>350 351    <div class="chips">352      <div class="chip active">Exact dates</div>353      <div class="chip">+ 1 day</div>354      <div class="chip">+ 2 days</div>355      <div class="chip">+ 3 days</div>356    </div>357 358    <div class="card-footer">359      <div class="reset">Reset</div>360      <button class="next-btn">Next</button>361    </div>362  </div>363 364  <div class="home-indicator"></div>365</div>366</body>367</html>