GD-ML/AndroidCode

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>Select Dates UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #FFFFFF;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #16233B;17  }18 19  /* Status bar */20  .status-bar {21    height: 130px;22    background: #B7B7BC;23    display: flex;24    align-items: center;25    justify-content: flex-end;26    padding: 0 36px;27    box-sizing: border-box;28    color: #fff;29    font-size: 32px;30  }31 32  /* Header */33  .header {34    height: 170px;35    display: flex;36    align-items: center;37    padding: 0 40px;38    box-sizing: border-box;39    border-bottom: 1px solid #E6E8EE;40    background: #fff;41  }42  .close-wrap {43    width: 120px;44    height: 120px;45    display: flex;46    align-items: center;47    justify-content: center;48  }49  .header-title {50    font-size: 64px;51    font-weight: 700;52    color: #14233F;53    margin-left: 10px;54  }55 56  /* Days of week row */57  .dow {58    display: grid;59    grid-template-columns: repeat(7, 1fr);60    column-gap: 0;61    padding: 28px 40px 22px;62    font-size: 40px;63    color: #636C80;64  }65  .dow span:first-child,66  .dow span:last-child {67    color: #4C6FFF;68    font-weight: 600;69  }70  .divider {71    height: 2px;72    background: #ECEFF5;73    margin: 0 40px;74  }75 76  /* Month title */77  .month-title {78    text-align: center;79    font-size: 56px;80    font-weight: 700;81    color: #14233F;82    padding: 38px 0 14px;83  }84 85  /* Calendar grid */86  .calendar {87    display: grid;88    grid-template-columns: repeat(7, 1fr);89    row-gap: 50px;90    column-gap: 0;91    padding: 30px 70px 40px;92    box-sizing: border-box;93  }94  .day {95    height: 120px;96    display: flex;97    align-items: center;98    justify-content: center;99    position: relative;100    font-size: 52px;101    color: #16233B;102  }103  .day.muted { color: #CBD2E3; }104  .day.weekend { color: #6A7FE4; }105  .day.highlight {106    color: #4C6FFF;107    font-weight: 700;108  }109  .dot {110    position: absolute;111    top: 22px;112    left: 50%;113    transform: translateX(-50%);114    width: 16px;115    height: 16px;116    background: #F0862E;117    border-radius: 50%;118  }119 120  /* Holiday list */121  .holiday-list {122    padding: 20px 60px 40px;123    font-size: 40px;124    color: #1D2A43;125  }126  .holiday-item {127    display: flex;128    align-items: flex-start;129    margin: 14px 0;130  }131  .holiday-dot {132    width: 16px;133    height: 16px;134    background: #F0862E;135    border-radius: 50%;136    margin: 17px 16px 0 0;137  }138  .section-divider {139    height: 2px;140    background: #E8EBF2;141    margin: 24px 40px;142  }143 144  /* Bottom sheet */145  .bottom-sheet {146    position: absolute;147    left: 0;148    right: 0;149    bottom: 120px;150    background: #FFFFFF;151    border-top-left-radius: 22px;152    border-top-right-radius: 22px;153    box-shadow: 0 -8px 20px rgba(0,0,0,0.08);154    padding: 26px 36px 40px;155  }156  .meta {157    color: #9AA3B3;158    font-size: 36px;159    margin-bottom: 8px;160  }161  .selected-label {162    font-size: 64px;163    color: #4C6FFF;164    font-weight: 700;165    margin-bottom: 28px;166  }167  .confirm-btn {168    height: 130px;169    background: #DDE1EA;170    color: #8D95A6;171    border-radius: 18px;172    display: flex;173    align-items: center;174    justify-content: center;175    font-size: 52px;176    font-weight: 600;177  }178 179  /* Navigation bar */180  .nav-bar {181    position: absolute;182    left: 0;183    right: 0;184    bottom: 0;185    height: 120px;186    background: #000000;187    display: flex;188    align-items: center;189    justify-content: center;190  }191  .home-pill {192    width: 300px;193    height: 16px;194    border-radius: 10px;195    background: #E5E5E5;196  }197 198  /* Simple icon styling */199  .icon {200    width: 56px;201    height: 56px;202    stroke: #14233F;203    stroke-width: 10;204    stroke-linecap: round;205  }206</style>207</head>208<body>209<div id="render-target">210 211  <!-- Status Bar -->212  <div class="status-bar">213    <!-- Minimal placeholders for status icons -->214    <span style="margin-right: 18px;">⮝</span>215    <span style="margin-right: 18px;">●</span>216    <span style="margin-right: 18px;">🔍</span>217    <span style="margin-right: auto;">N</span>218    <span style="margin-right: 18px;">•</span>219    <span style="margin-right: 18px;">▴</span>220    <span>🔋</span>221  </div>222 223  <!-- Header -->224  <div class="header">225    <div class="close-wrap">226      <svg class="icon" viewBox="0 0 56 56">227        <path d="M8 8 L48 48 M48 8 L8 48" />228      </svg>229    </div>230    <div class="header-title">Select Dates</div>231  </div>232 233  <!-- Days of week -->234  <div class="dow">235    <span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span>236  </div>237  <div class="divider"></div>238 239  <!-- December -->240  <div class="month-title">Dec 2023</div>241  <div class="calendar">242    <!-- Row 1: Sun..Thu empty, Fri=1, Sat=2 -->243    <div class="day"></div>244    <div class="day"></div>245    <div class="day"></div>246    <div class="day"></div>247    <div class="day"></div>248    <div class="day muted">1</div>249    <div class="day muted weekend">2</div>250 251    <!-- Row 2: 3..9 -->252    <div class="day weekend muted">3</div>253    <div class="day muted">4</div>254    <div class="day muted">5</div>255    <div class="day highlight">6</div>256    <div class="day">7</div>257    <div class="day">8</div>258    <div class="day weekend">9</div>259 260    <!-- Row 3: 10..16 -->261    <div class="day weekend">10</div>262    <div class="day">11</div>263    <div class="day">12</div>264    <div class="day">13</div>265    <div class="day">14</div>266    <div class="day">15</div>267    <div class="day weekend">16</div>268 269    <!-- Row 4: 17..23 -->270    <div class="day weekend">17</div>271    <div class="day">18</div>272    <div class="day">19</div>273    <div class="day">20</div>274    <div class="day">21</div>275    <div class="day">22</div>276    <div class="day weekend">23</div>277 278    <!-- Row 5: 24..30 -->279    <div class="day weekend">24<div class="dot"></div></div>280    <div class="day">25<div class="dot"></div></div>281    <div class="day">26</div>282    <div class="day">27</div>283    <div class="day">28</div>284    <div class="day">29</div>285    <div class="day weekend">30</div>286 287    <!-- Row 6: 31 -->288    <div class="day weekend">31</div>289    <div class="day"></div>290    <div class="day"></div>291    <div class="day"></div>292    <div class="day"></div>293    <div class="day"></div>294    <div class="day"></div>295  </div>296 297  <!-- Holiday descriptions -->298  <div class="holiday-list">299    <div class="holiday-item">300      <div class="holiday-dot"></div>301      <div>Dec 24 Christmas Eve</div>302    </div>303    <div class="holiday-item">304      <div class="holiday-dot"></div>305      <div>Dec 25 Christmas Day</div>306    </div>307  </div>308 309  <div class="section-divider"></div>310 311  <!-- January -->312  <div class="month-title">Jan 2024</div>313  <div class="calendar" style="padding-bottom: 300px;">314    <!-- Jan 2024 starts on Monday -->315    <div class="day weekend"></div>316    <div class="day">1</div>317    <div class="day">2</div>318    <div class="day">3</div>319    <div class="day">4</div>320    <div class="day">5</div>321    <div class="day weekend">6</div>322 323    <div class="day weekend">7</div>324    <div class="day">8</div>325    <div class="day">9</div>326    <div class="day">10</div>327    <div class="day">11</div>328    <div class="day">12</div>329    <div class="day weekend">13</div>330  </div>331 332  <!-- Bottom sheet -->333  <div class="bottom-sheet">334    <div class="meta">Local time</div>335    <div class="selected-label">Start Date</div>336    <div class="confirm-btn">Confirm</div>337  </div>338 339  <!-- Navigation bar -->340  <div class="nav-bar">341    <div class="home-pill"></div>342  </div>343 344</div>345</body>346</html>