GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Calendar UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #F3F5FA;13    border-radius: 0;14  }15 16  /* Status and header */17  .status-bar {18    height: 110px;19    background: #EDF2F7;20    display: flex;21    align-items: center;22    padding: 0 40px;23    color: #2D3748;24    font-weight: 600;25    font-size: 36px;26    border-bottom: 1px solid #E6ECF2;27  }28  .status-bar .right {29    margin-left: auto;30    display: flex;31    align-items: center;32    gap: 22px;33  }34  .header {35    height: 190px;36    background: #EDF2F7;37    display: flex;38    align-items: center;39    padding: 0 40px;40    border-bottom: 1px solid #E6ECF2;41    box-sizing: border-box;42  }43  .back-btn {44    width: 80px;45    height: 80px;46    display: inline-flex;47    align-items: center;48    justify-content: center;49    margin-right: 24px;50  }51  .title-wrap {52    display: flex;53    flex-direction: column;54    gap: 10px;55  }56  .title {57    font-size: 48px;58    color: #0E2E7A;59    font-weight: 700;60  }61  .subtitle {62    font-size: 34px;63    color: #3E5A88;64    font-weight: 600;65  }66 67  /* Content area */68  .content {69    position: absolute;70    top: 300px; /* status + header */71    left: 0;72    right: 0;73    bottom: 180px; /* space for bottom nav */74    background: #FFFFFF;75    overflow-y: auto;76    padding-bottom: 40px;77  }78 79  .month {80    padding: 36px 40px 20px 40px;81    border-bottom: 1px solid #F0F3F7;82  }83  .month:last-child { border-bottom: none; }84  .month-title {85    color: #0E2E7A;86    font-weight: 800;87    font-size: 44px;88    letter-spacing: 1px;89    margin-bottom: 26px;90  }91  .weekdays {92    display: grid;93    grid-template-columns: repeat(7, 1fr);94    color: #3C60A6;95    font-weight: 700;96    font-size: 32px;97    margin-bottom: 20px;98  }99  .weekday { text-align: left; }100 101  .dates {102    display: grid;103    grid-template-columns: repeat(7, 1fr);104    gap: 22px 24px;105    padding-bottom: 30px;106  }107  .date {108    height: 120px;109    border-radius: 28px;110    display: flex;111    align-items: center;112    justify-content: center;113    font-size: 40px;114    color: #121212;115  }116  .empty { opacity: 0; }117  .disabled { color: #B6C0CE; }118  .selected {119    background: #E7A33A;120    color: #FFFFFF;121    font-weight: 700;122  }123 124  /* Bottom Tab Bar */125  .tabbar {126    position: absolute;127    bottom: 0;128    left: 0;129    right: 0;130    height: 180px;131    background: #FFFFFF;132    border-top: 1px solid #E6ECF2;133    box-shadow: 0 -6px 16px rgba(0,0,0,0.06);134    display: flex;135    align-items: center;136    justify-content: space-around;137    padding: 24px 40px 26px;138    box-sizing: border-box;139  }140  .tab {141    display: flex;142    flex-direction: column;143    align-items: center;144    gap: 16px;145    color: #3C60A6;146    font-size: 34px;147    font-weight: 700;148  }149  .tab .label { font-size: 34px; }150  .tab svg { width: 64px; height: 64px; }151  .tab.active { color: #1F7BD7; }152 153  /* Helper for section at bottom showing next month title */154  .footer-month {155    padding: 8px 40px 18px 40px;156    color: #0E2E7A;157    font-size: 44px;158    font-weight: 800;159  }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Status bar -->166  <div class="status-bar">167    <div>3:31</div>168    <div class="right">169      <!-- simple icons -->170      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#A0AEC0"/></svg>171      <svg viewBox="0 0 24 24"><path d="M2 18h20v2H2zM4 14h16v2H4zM6 10h12v2H6zM8 6h8v2H8z" fill="#718096"/></svg>172      <svg viewBox="0 0 24 24">173        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#4A5568"/>174        <rect x="20.5" y="9" width="1.5" height="6" fill="#4A5568"/>175      </svg>176    </div>177  </div>178 179  <!-- Header -->180  <div class="header">181    <div class="back-btn">182      <svg viewBox="0 0 24 24">183        <path d="M15 4L7 12l8 8" stroke="#1F3D7A" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>184      </svg>185    </div>186    <div class="title-wrap">187      <div class="title">Select return date</div>188      <div class="subtitle">Departing on 2023-11-15</div>189    </div>190  </div>191 192  <!-- Scrollable content -->193  <div class="content">194    <!-- November 2023 -->195    <div class="month">196      <div class="month-title">NOVEMBER 2023</div>197      <div class="weekdays">198        <div class="weekday">Mon</div>199        <div class="weekday">Tue</div>200        <div class="weekday">Wed</div>201        <div class="weekday">Thu</div>202        <div class="weekday">Fri</div>203        <div class="weekday">Sat</div>204        <div class="weekday">Sun</div>205      </div>206      <div class="dates">207        <!-- Nov 2023 starts on Wednesday -->208        <div class="date empty">0</div>209        <div class="date empty">0</div>210        <div class="date">1</div>211        <div class="date">2</div>212        <div class="date">3</div>213        <div class="date">4</div>214        <div class="date">5</div>215 216        <div class="date">6</div>217        <div class="date selected">7</div>218        <div class="date">8</div>219        <div class="date">9</div>220        <div class="date">10</div>221        <div class="date disabled">11</div>222        <div class="date disabled">12</div>223 224        <div class="date disabled">13</div>225        <div class="date disabled">14</div>226        <div class="date">15</div>227        <div class="date">16</div>228        <div class="date">17</div>229        <div class="date">18</div>230        <div class="date">19</div>231 232        <div class="date">20</div>233        <div class="date">21</div>234        <div class="date">22</div>235        <div class="date">23</div>236        <div class="date">24</div>237        <div class="date">25</div>238        <div class="date">26</div>239 240        <div class="date">27</div>241        <div class="date">28</div>242        <div class="date">29</div>243        <div class="date">30</div>244        <div class="date empty">0</div>245        <div class="date empty">0</div>246        <div class="date empty">0</div>247      </div>248    </div>249 250    <!-- December 2023 -->251    <div class="month">252      <div class="month-title">DECEMBER 2023</div>253      <div class="weekdays">254        <div class="weekday">Mon</div>255        <div class="weekday">Tue</div>256        <div class="weekday">Wed</div>257        <div class="weekday">Thu</div>258        <div class="weekday">Fri</div>259        <div class="weekday">Sat</div>260        <div class="weekday">Sun</div>261      </div>262      <div class="dates">263        <!-- Dec 2023 starts on Friday -->264        <div class="date empty">0</div>265        <div class="date empty">0</div>266        <div class="date empty">0</div>267        <div class="date empty">0</div>268        <div class="date">1</div>269        <div class="date">2</div>270        <div class="date">3</div>271 272        <div class="date">4</div>273        <div class="date">5</div>274        <div class="date">6</div>275        <div class="date">7</div>276        <div class="date">8</div>277        <div class="date">9</div>278        <div class="date">10</div>279 280        <div class="date">11</div>281        <div class="date">12</div>282        <div class="date">13</div>283        <div class="date">14</div>284        <div class="date">15</div>285        <div class="date">16</div>286        <div class="date">17</div>287 288        <div class="date">18</div>289        <div class="date">19</div>290        <div class="date">20</div>291        <div class="date">21</div>292        <div class="date">22</div>293        <div class="date">23</div>294        <div class="date">24</div>295 296        <div class="date">25</div>297        <div class="date">26</div>298        <div class="date">27</div>299        <div class="date">28</div>300        <div class="date">29</div>301        <div class="date">30</div>302        <div class="date">31</div>303      </div>304    </div>305 306    <div class="footer-month">JANUARY 2024</div>307  </div>308 309  <!-- Bottom navigation -->310  <div class="tabbar">311    <div class="tab active">312      <svg viewBox="0 0 24 24">313        <circle cx="10" cy="10" r="6" stroke="#1F7BD7" stroke-width="2" fill="none"/>314        <line x1="15" y1="15" x2="22" y2="22" stroke="#1F7BD7" stroke-width="2" stroke-linecap="round"/>315      </svg>316      <div class="label">Search</div>317    </div>318    <div class="tab">319      <svg viewBox="0 0 24 24">320        <rect x="5" y="4" width="14" height="16" rx="2" ry="2" fill="none" stroke="#3C60A6" stroke-width="2"/>321        <path d="M7 9h10M7 13h10" stroke="#3C60A6" stroke-width="2"/>322      </svg>323      <div class="label">Booking</div>324    </div>325    <div class="tab">326      <svg viewBox="0 0 24 24">327        <rect x="4" y="6" width="16" height="2" fill="#3C60A6"/>328        <rect x="4" y="11" width="16" height="2" fill="#3C60A6"/>329        <rect x="4" y="16" width="16" height="2" fill="#3C60A6"/>330      </svg>331      <div class="label">Menu</div>332    </div>333  </div>334 335</div>336</body>337</html>