GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Date Picker UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: "Segoe UI", Roboto, Arial, sans-serif;11    color: #122053;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #ffffff;19  }20 21  /* Status bar */22  .status-bar {23    height: 90px;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #2e2e2e;29    font-weight: 600;30    font-size: 40px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 22px;36  }37  .dot-icon {38    width: 28px;39    height: 28px;40    background: #777;41    border-radius: 50%;42  }43  .signal {44    width: 30px; height: 30px; border-radius: 3px; background:#777;45  }46 47  /* Header */48  .header {49    display: flex;50    align-items: center;51    gap: 24px;52    padding: 24px 36px 10px 36px;53  }54  .back-btn {55    width: 60px; height: 60px; border-radius: 16px;56    display: flex; align-items: center; justify-content: center;57  }58  .back-btn svg { width: 36px; height: 36px; }59  .title {60    font-size: 72px;61    font-weight: 800;62    letter-spacing: 0.5px;63  }64 65  /* Date inputs */66  .input-row {67    display: flex;68    gap: 24px;69    padding: 24px 36px;70  }71  .pill {72    flex: 1;73    height: 120px;74    border: 2px solid #BDC7DE;75    background: #F6F8FC;76    border-radius: 28px;77    display: flex; align-items: center; justify-content: space-between;78    padding: 0 36px;79    font-size: 46px;80    color: #10235E;81  }82  .pill .inline-x {83    width: 46px; height: 46px;84  }85 86  /* Week row */87  .week-row {88    display: grid;89    grid-template-columns: repeat(7, 1fr);90    padding: 10px 36px 0 36px;91    gap: 0;92    color: #91A0BB;93    font-size: 36px;94    font-weight: 600;95    letter-spacing: 6px;96    text-align: center;97  }98  .week-row div { padding: 20px 0; }99 100  /* Month label */101  .month-label {102    margin: 24px 0 12px 0;103    padding: 20px 36px;104    background: #F0F3F8;105    color: #6C7A95;106    font-weight: 700;107    font-size: 36px;108    letter-spacing: 2px;109  }110 111  /* Calendar grid */112  .calendar {113    padding: 0 36px 30px 36px;114  }115  .grid {116    display: grid;117    grid-template-columns: repeat(7, 1fr);118    gap: 18px 18px;119  }120  .day {121    height: 138px;122    display: flex;123    align-items: center;124    justify-content: center;125    font-size: 48px;126    color: #243B7A;127    position: relative;128  }129  .day.muted {130    color: #C9D1E4;131  }132  .day.selected {133    color: #ffffff;134    font-weight: 700;135  }136  .day.selected::before {137    content: "";138    position: absolute;139    width: 166px;140    height: 166px;141    border-radius: 50%;142    background: #658BC6;143    z-index: -1;144  }145 146  /* Confirm button */147  .confirm-wrap {148    position: absolute;149    bottom: 140px;150    left: 0; right: 0;151    padding: 0 36px;152  }153  .confirm-btn {154    height: 140px;155    background: #E67571;156    color: #ffffff;157    border-radius: 28px;158    font-size: 52px;159    font-weight: 800;160    border: none;161    width: 100%;162    letter-spacing: 1px;163  }164 165  /* Gesture bar */166  .gesture-bar {167    position: absolute;168    bottom: 36px;169    left: 50%;170    transform: translateX(-50%);171    width: 420px;172    height: 16px;173    background: #C8CDD4;174    border-radius: 10px;175  }176</style>177</head>178<body>179<div id="render-target">180 181  <!-- Top Status Bar -->182  <div class="status-bar">183    <div>9:59</div>184    <div class="status-icons">185      <div class="dot-icon"></div>186      <div class="dot-icon"></div>187      <div class="dot-icon"></div>188      <div class="dot-icon"></div>189      <div class="signal"></div>190      <div class="dot-icon" style="width:30px;height:30px;"></div>191    </div>192  </div>193 194  <!-- Header -->195  <div class="header">196    <div class="back-btn">197      <svg viewBox="0 0 24 24">198        <path d="M18 6 L6 18 M6 6 L18 18" stroke="#273761" stroke-width="3" stroke-linecap="round"/>199      </svg>200    </div>201    <div class="title">Choose date</div>202  </div>203 204  <!-- Date input pills -->205  <div class="input-row">206    <div class="pill">207      <span>Wed, Nov 15</span>208      <span></span>209    </div>210    <div class="pill">211      <span>Wed, Nov 15</span>212      <svg class="inline-x" viewBox="0 0 24 24">213        <path d="M6 6 L18 18 M18 6 L6 18" stroke="#7F8CB0" stroke-width="3" stroke-linecap="round"/>214      </svg>215    </div>216  </div>217 218  <!-- Week letters -->219  <div class="week-row">220    <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>221  </div>222 223  <!-- November 2023 -->224  <div class="month-label">NOVEMBER 2023</div>225  <div class="calendar">226    <div class="grid">227      <!-- Row 1: Sun-Mon-Tue blank; Wed-Thu-Fri-Sat show 1-4 muted -->228      <div class="day"></div>229      <div class="day"></div>230      <div class="day"></div>231      <div class="day muted">1</div>232      <div class="day muted">2</div>233      <div class="day muted">3</div>234      <div class="day muted">4</div>235 236      <!-- Row 2: 5-11 -->237      <div class="day">5</div>238      <div class="day">6</div>239      <div class="day">7</div>240      <div class="day">8</div>241      <div class="day">9</div>242      <div class="day">10</div>243      <div class="day">11</div>244 245      <!-- Row 3: 12-18 -->246      <div class="day">12</div>247      <div class="day">13</div>248      <div class="day">14</div>249      <div class="day selected">15</div>250      <div class="day">16</div>251      <div class="day">17</div>252      <div class="day">18</div>253 254      <!-- Row 4: 19-25 -->255      <div class="day">19</div>256      <div class="day">20</div>257      <div class="day">21</div>258      <div class="day">22</div>259      <div class="day">23</div>260      <div class="day">24</div>261      <div class="day">25</div>262 263      <!-- Row 5: 26-30 -->264      <div class="day">26</div>265      <div class="day">27</div>266      <div class="day">28</div>267      <div class="day">29</div>268      <div class="day">30</div>269      <div class="day"></div>270      <div class="day"></div>271    </div>272  </div>273 274  <!-- December 2023 -->275  <div class="month-label">DECEMBER 2023</div>276  <div class="calendar">277    <div class="grid">278      <!-- Row 1: Dec starts on Friday (1), Saturday (2) -->279      <div class="day"></div>280      <div class="day"></div>281      <div class="day"></div>282      <div class="day"></div>283      <div class="day"></div>284      <div class="day muted">1</div>285      <div class="day muted">2</div>286 287      <!-- Row 2: 3-9 -->288      <div class="day">3</div>289      <div class="day">4</div>290      <div class="day">5</div>291      <div class="day">6</div>292      <div class="day">7</div>293      <div class="day">8</div>294      <div class="day">9</div>295 296      <!-- Row 3: 10-16 -->297      <div class="day">10</div>298      <div class="day">11</div>299      <div class="day">12</div>300      <div class="day">13</div>301      <div class="day">14</div>302      <div class="day">15</div>303      <div class="day">16</div>304 305      <!-- Row 4: 17-23 -->306      <div class="day">17</div>307      <div class="day">18</div>308      <div class="day">19</div>309      <div class="day">20</div>310      <div class="day">21</div>311      <div class="day">22</div>312      <div class="day">23</div>313 314      <!-- Extra space to mimic scroll -->315      <div class="day"></div>316      <div class="day"></div>317      <div class="day"></div>318      <div class="day"></div>319      <div class="day"></div>320      <div class="day"></div>321      <div class="day"></div>322    </div>323  </div>324 325  <!-- Bottom confirm button -->326  <div class="confirm-wrap">327    <button class="confirm-btn">Confirm</button>328  </div>329 330  <!-- Gesture Bar -->331  <div class="gesture-bar"></div>332 333</div>334</body>335</html>