GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Date Picker</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #F6F6F6;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 100px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 40px;26    color: #1f1f1f;27    font-weight: 600;28    font-size: 36px;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 22px;34  }35  .icon {36    width: 44px;37    height: 44px;38  }39 40  /* Close button */41  .close-btn {42    position: absolute;43    top: 150px;44    left: 40px;45    width: 110px;46    height: 110px;47    background: #FFFFFF;48    border-radius: 55px;49    box-shadow: 0 2px 8px rgba(0,0,0,0.08);50    display: flex;51    align-items: center;52    justify-content: center;53  }54  .close-btn svg { width: 40px; height: 40px; }55 56  /* Header tabs */57  .tabs {58    position: absolute;59    top: 150px;60    left: 240px;61    width: 800px;62    display: flex;63    gap: 50px;64    align-items: center;65  }66  .tab {67    font-size: 54px;68    font-weight: 700;69    color: #222;70    position: relative;71  }72  .tab.inactive { color: #777; font-weight: 600; }73  .tab.active::after {74    content: "";75    position: absolute;76    left: 0;77    bottom: -16px;78    width: 120%;79    height: 8px;80    background: #000;81    border-radius: 4px;82  }83 84  /* Search bar */85  .search-bar {86    position: absolute;87    top: 260px;88    left: 40px;89    width: 1000px;90    height: 130px;91    background: #FFFFFF;92    border-radius: 65px;93    box-shadow: 0 2px 8px rgba(0,0,0,0.06);94    display: flex;95    align-items: center;96    justify-content: space-between;97    padding: 0 46px;98    font-size: 44px;99    color: #333;100  }101  .search-placeholder { color: #777; }102  .search-value { color: #222; font-weight: 600; }103 104  /* Card */105  .card {106    position: absolute;107    top: 420px;108    left: 40px;109    width: 1000px;110    height: 1760px;111    background: #FFFFFF;112    border-radius: 60px;113    box-shadow: 0 8px 24px rgba(0,0,0,0.08);114    padding: 50px 50px 40px 50px;115  }116 117  .card-title {118    font-size: 72px;119    font-weight: 800;120    color: #222;121    margin-bottom: 40px;122  }123 124  .seg-control {125    width: 900px;126    height: 120px;127    background: #EFEFEF;128    border-radius: 60px;129    display: flex;130    align-items: center;131    gap: 20px;132    padding: 10px;133    margin-bottom: 40px;134  }135  .seg-btn {136    flex: 1;137    height: 100px;138    border-radius: 50px;139    display: flex;140    align-items: center;141    justify-content: center;142    font-size: 44px;143    font-weight: 700;144    color: #666;145  }146  .seg-btn.active {147    background: #FFFFFF;148    color: #222;149    box-shadow: 0 2px 8px rgba(0,0,0,0.06);150  }151 152  .weekday-row {153    display: grid;154    grid-template-columns: repeat(7, 1fr);155    color: #666;156    font-size: 36px;157    font-weight: 600;158    padding: 20px 0;159    border-bottom: 2px solid #EEE;160    margin-bottom: 20px;161  }162  .weekdays {163    text-align: center;164  }165 166  .pre-month {167    display: grid;168    grid-template-columns: repeat(7, 1fr);169    gap: 0;170    padding-top: 10px;171    padding-bottom: 20px;172    color: #222;173    font-size: 40px;174    text-align: center;175  }176 177  .month-title {178    font-size: 54px;179    font-weight: 800;180    color: #222;181    margin: 20px 0 30px 0;182  }183 184  .calendar {185    display: grid;186    grid-template-columns: repeat(7, 1fr);187    row-gap: 40px;188    column-gap: 0;189  }190  .day {191    height: 110px;192    display: flex;193    align-items: center;194    justify-content: center;195    font-size: 46px;196    color: #222;197  }198 199  /* Selected day bubble (big black) */200  .selected-bubble {201    position: absolute;202    width: 140px;203    height: 140px;204    background: #000000;205    border-radius: 70px;206    right: 70px; /* near Saturday column */207    top: 930px;  /* positioned near the first row of July */208    display: flex;209    align-items: center;210    justify-content: center;211    color: #FFFFFF;212    font-size: 52px;213    font-weight: 800;214    box-shadow: 0 10px 20px rgba(0,0,0,0.25);215  }216 217  /* Chips */218  .chips {219    position: absolute;220    left: 50px;221    bottom: 240px;222    width: 900px;223    display: flex;224    gap: 26px;225    flex-wrap: nowrap;226  }227  .chip {228    padding: 26px 44px;229    border: 2px solid #D8D8D8;230    border-radius: 60px;231    font-size: 40px;232    color: #333;233    background: #FFFFFF;234  }235  .chip.selected {236    border-color: #222;237    font-weight: 700;238  }239 240  /* Bottom actions */241  .bottom-actions {242    position: absolute;243    left: 50px;244    bottom: 100px;245    width: 900px;246    display: flex;247    align-items: center;248    justify-content: space-between;249  }250  .reset-link {251    font-size: 44px;252    color: #222;253    text-decoration: underline;254    font-weight: 700;255  }256  .next-btn {257    width: 260px;258    height: 120px;259    background: #000;260    border-radius: 30px;261    color: #FFF;262    font-size: 44px;263    font-weight: 800;264    display: flex;265    align-items: center;266    justify-content: center;267  }268 269  /* Home indicator */270  .home-indicator {271    position: absolute;272    bottom: 20px;273    left: 50%;274    transform: translateX(-50%);275    width: 300px;276    height: 14px;277    background: #000;278    border-radius: 7px;279    opacity: 0.8;280  }281 282  /* Utility alignment for grid text */283  .center { text-align: center; }284</style>285</head>286<body>287<div id="render-target">288 289  <!-- Status bar -->290  <div class="status-bar">291    <div>12:53</div>292    <div class="status-icons">293      <!-- small calendar icon -->294      <svg class="icon" viewBox="0 0 24 24">295        <rect x="3" y="5" width="18" height="16" fill="#888" rx="2"></rect>296        <rect x="3" y="9" width="18" height="1" fill="#fff"></rect>297      </svg>298      <!-- cloud icon -->299      <svg class="icon" viewBox="0 0 24 24">300        <path d="M7 17h10a4 4 0 0 0 0-8 5 5 0 0 0-9.5-2A4 4 0 0 0 7 17z" fill="#888"></path>301      </svg>302      <!-- wifi icon -->303      <svg class="icon" viewBox="0 0 24 24">304        <path d="M2 8c5-4 15-4 20 0" stroke="#555" stroke-width="2" fill="none"/>305        <path d="M5 12c3-3 11-3 14 0" stroke="#555" stroke-width="2" fill="none"/>306        <circle cx="12" cy="17" r="2" fill="#555"/>307      </svg>308      <!-- battery icon -->309      <svg class="icon" viewBox="0 0 26 24">310        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#555" stroke-width="2" fill="none"/>311        <rect x="4" y="8" width="14" height="8" fill="#555"/>312        <rect x="20" y="9" width="4" height="6" fill="#555"/>313      </svg>314    </div>315  </div>316 317  <!-- Close button -->318  <div class="close-btn">319    <svg viewBox="0 0 24 24">320      <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2" stroke-linecap="round"/>321    </svg>322  </div>323 324  <!-- Tabs -->325  <div class="tabs">326    <div class="tab active">Stays</div>327    <div class="tab inactive">Experiences</div>328  </div>329 330  <!-- Search bar -->331  <div class="search-bar">332    <div class="search-placeholder">Where</div>333    <div class="search-value">Newark</div>334  </div>335 336  <!-- Main card -->337  <div class="card">338    <div class="card-title">When's your trip?</div>339 340    <div class="seg-control">341      <div class="seg-btn active">Dates</div>342      <div class="seg-btn">Months</div>343      <div class="seg-btn">Flexible</div>344    </div>345 346    <!-- Weekday header -->347    <div class="weekday-row">348      <div class="weekdays">Sun</div>349      <div class="weekdays">Mon</div>350      <div class="weekdays">Tue</div>351      <div class="weekdays">Wed</div>352      <div class="weekdays">Thu</div>353      <div class="weekdays">Fri</div>354      <div class="weekdays">Sat</div>355    </div>356 357    <!-- Previous month tail -->358    <div class="pre-month">359      <div>25</div>360      <div>26</div>361      <div>27</div>362      <div>28</div>363      <div>29</div>364      <div>30</div>365      <div></div>366    </div>367 368    <!-- Month name -->369    <div class="month-title">July 2023</div>370 371    <!-- Calendar days -->372    <div class="calendar">373      <!-- Row starting with Sunday (2..8), with 1 on Saturday handled by bubble -->374      <div class="day">2</div>375      <div class="day">3</div>376      <div class="day">4</div>377      <div class="day">5</div>378      <div class="day">6</div>379      <div class="day">7</div>380      <div class="day">8</div>381 382      <div class="day">9</div>383      <div class="day">10</div>384      <div class="day">11</div>385      <div class="day">12</div>386      <div class="day">13</div>387      <div class="day">14</div>388      <div class="day">15</div>389 390      <div class="day">16</div>391      <div class="day">17</div>392      <div class="day">18</div>393      <div class="day">19</div>394      <div class="day">20</div>395      <div class="day">21</div>396      <div class="day">22</div>397    </div>398 399    <!-- Big selected bubble representing July 1 -->400    <div class="selected-bubble">1</div>401 402    <!-- Chips -->403    <div class="chips">404      <div class="chip selected">Exact dates</div>405      <div class="chip">+ 1 day</div>406      <div class="chip">+ 2 days</div>407      <div class="chip">+ 3 days</div>408    </div>409 410    <!-- Bottom actions -->411    <div class="bottom-actions">412      <div class="reset-link">Reset</div>413      <div class="next-btn">Next</div>414    </div>415  </div>416 417  <!-- Home indicator -->418  <div class="home-indicator"></div>419</div>420</body>421</html>