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>Choose Date</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: #1b2a57;17  }18 19  /* Status bar */20  .statusbar {21    height: 96px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #202b4d;27    font-weight: 600;28    font-size: 34px;29    opacity: 0.9;30  }31  .status-right {32    display: flex;33    gap: 20px;34    align-items: center;35    color: #4b567b;36    font-weight: 600;37  }38  .battery {39    width: 40px; height: 22px; border: 3px solid #4b567b; border-radius: 6px; position: relative;40  }41  .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #4b567b; border-radius: 1px; }42  .battery .level { position: absolute; left: 3px; top: 3px; bottom: 3px; right: 8px; background: #4b567b; border-radius: 3px; }43  .percent { font-size: 30px; margin-left: 8px; }44 45  /* Header */46  .header {47    padding: 10px 40px 0 40px;48  }49  .title-row {50    display: flex;51    align-items: center;52    gap: 22px;53    margin-top: 6px;54  }55  .title {56    font-size: 70px;57    font-weight: 800;58    letter-spacing: 0.2px;59  }60  .icon-btn {61    width: 70px; height: 70px; border-radius: 18px;62    display: flex; align-items: center; justify-content: center;63    color: #223166;64  }65 66  /* Chips */67  .chips {68    display: flex;69    gap: 26px;70    margin-top: 34px;71  }72  .chip {73    padding: 28px 34px;74    border-radius: 28px;75    font-size: 38px;76    line-height: 1;77    background: #EEF2F8;78    color: #2b3a6b;79    border: 3px solid #C6D0E3;80    box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;81  }82  .chip.secondary {83    border-color: transparent;84    color: #9AA6C1;85    background: #F1F4F8;86  }87 88  /* Weekdays */89  .weekdays {90    display: grid;91    grid-template-columns: repeat(7, 1fr);92    padding: 30px 40px 16px 40px;93    gap: 0;94    text-align: center;95    color: #9AA6C1;96    font-weight: 700;97    font-size: 34px;98  }99 100  /* Month header band */101  .month-band {102    background: #F3F5FA;103    color: #9AA6C1;104    font-weight: 800;105    letter-spacing: 2px;106    padding: 26px 40px;107    font-size: 32px;108  }109 110  /* Calendar grid */111  .month {112    padding: 26px 40px 40px 40px;113  }114  .grid {115    display: grid;116    grid-template-columns: repeat(7, 1fr);117    gap: 18px 18px;118  }119  .day {120    height: 128px;121    border-radius: 22px;122    display: flex;123    align-items: center;124    justify-content: center;125    font-size: 44px;126    color: #2b3a6b;127    position: relative;128  }129  .day.disabled {130    color: #D6DCE8;131  }132  .day.selected {133    color: #ffffff;134    font-weight: 800;135  }136  .day.selected::before {137    content: "";138    position: absolute;139    width: 132px; height: 132px;140    border-radius: 50%;141    background: #6F8FC4;142    z-index: -1;143  }144 145  /* Bottom confirm sheet */146  .bottom-sheet {147    position: absolute;148    left: 0; right: 0;149    bottom: 120px;150    padding: 28px 32px 36px 32px;151    background: #ffffff;152    border-top: 1px solid #E8ECF4;153    box-shadow: 0 -6px 18px rgba(0,0,0,0.05);154  }155  .btn-confirm {156    width: 100%;157    background: #E36F6A;158    color: #fff;159    border: none;160    border-radius: 28px;161    height: 132px;162    font-size: 46px;163    font-weight: 700;164    letter-spacing: 0.3px;165  }166 167  /* Bottom system bar */168  .system-bar {169    position: absolute;170    left: 0; right: 0; bottom: 0;171    height: 120px;172    background: #0f1a3b;173    display: flex;174    align-items: center;175    justify-content: center;176  }177  .home-pill {178    width: 220px; height: 12px; border-radius: 8px; background: #cfd5e6;179    opacity: 0.9;180  }181</style>182</head>183<body>184<div id="render-target">185 186  <!-- Status bar -->187  <div class="statusbar">188    <div>9:00</div>189    <div class="status-right">190      <span style="font-size:28px; opacity:.8;">◦</span>191      <div class="battery"><div class="level"></div></div>192      <div class="percent">100%</div>193    </div>194  </div>195 196  <!-- Header and chips -->197  <div class="header">198    <div class="title-row">199      <div class="icon-btn" aria-label="Close">200        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#1b2a57" stroke-width="2.6" stroke-linecap="round">201          <path d="M5 5 L19 19"></path>202          <path d="M19 5 L5 19"></path>203        </svg>204      </div>205      <div class="title">Choose date</div>206    </div>207 208    <div class="chips">209      <div class="chip">Wed, Nov 22</div>210      <div class="chip secondary">+ Add Return</div>211    </div>212  </div>213 214  <!-- Weekdays -->215  <div class="weekdays">216    <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>217  </div>218 219  <!-- November -->220  <div class="month-band">NOVEMBER 2023</div>221  <div class="month">222    <div class="grid">223      <!-- Row 1 -->224      <div class="day disabled">29</div>225      <div class="day disabled">30</div>226      <div class="day disabled">31</div>227      <div class="day disabled">1</div>228      <div class="day disabled">2</div>229      <div class="day disabled">3</div>230      <div class="day disabled">4</div>231      <!-- Row 2 -->232      <div class="day disabled">5</div>233      <div class="day disabled">6</div>234      <div class="day disabled">7</div>235      <div class="day disabled">8</div>236      <div class="day disabled">9</div>237      <div class="day disabled">10</div>238      <div class="day disabled">11</div>239      <!-- Row 3 -->240      <div class="day disabled">12</div>241      <div class="day disabled">13</div>242      <div class="day disabled">14</div>243      <div class="day disabled">15</div>244      <div class="day disabled">16</div>245      <div class="day disabled">17</div>246      <div class="day disabled">18</div>247      <!-- Row 4 -->248      <div class="day">19</div>249      <div class="day">20</div>250      <div class="day">21</div>251      <div class="day selected">22</div>252      <div class="day">23</div>253      <div class="day">24</div>254      <div class="day">25</div>255      <!-- Row 5 -->256      <div class="day">26</div>257      <div class="day">27</div>258      <div class="day">28</div>259      <div class="day">29</div>260      <div class="day">30</div>261      <div class="day disabled"></div>262      <div class="day disabled"></div>263    </div>264  </div>265 266  <!-- December -->267  <div class="month-band">DECEMBER 2023</div>268  <div class="month">269    <div class="grid">270      <!-- Row 1 -->271      <div class="day disabled"></div>272      <div class="day disabled"></div>273      <div class="day disabled"></div>274      <div class="day disabled"></div>275      <div class="day">1</div>276      <div class="day">2</div>277      <div class="day">3</div>278      <!-- Row 2 -->279      <div class="day">4</div>280      <div class="day">5</div>281      <div class="day">6</div>282      <div class="day">7</div>283      <div class="day">8</div>284      <div class="day">9</div>285      <div class="day">10</div>286      <!-- Row 3 -->287      <div class="day">11</div>288      <div class="day">12</div>289      <div class="day">13</div>290      <div class="day">14</div>291      <div class="day">15</div>292      <div class="day">16</div>293      <div class="day">17</div>294      <!-- Row 4 -->295      <div class="day">18</div>296      <div class="day">19</div>297      <div class="day">20</div>298      <div class="day">21</div>299      <div class="day">22</div>300      <div class="day">23</div>301      <div class="day">24</div>302    </div>303  </div>304 305  <!-- Bottom confirm button -->306  <div class="bottom-sheet">307    <button class="btn-confirm">Confirm</button>308  </div>309 310  <!-- System bar -->311  <div class="system-bar">312    <div class="home-pill"></div>313  </div>314</div>315</body>316</html>