GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Calendar UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15    color: #0f172a;16  }17 18  /* Status bar */19  .statusbar {20    height: 110px;21    padding: 24px 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #111827;26    font-size: 36px;27    box-sizing: border-box;28  }29  .sb-icons { display: flex; align-items: center; gap: 22px; }30  .sb-icons svg { width: 42px; height: 42px; }31 32  /* App bar */33  .appbar {34    height: 140px;35    box-sizing: border-box;36    padding: 0 28px;37    position: relative;38    display: flex;39    align-items: center;40    justify-content: center;41  }42  .appbar .back {43    position: absolute;44    left: 28px;45    top: 50%;46    transform: translateY(-50%);47    width: 64px; height: 64px;48    display: flex; align-items: center; justify-content: center;49  }50  .title {51    font-size: 54px;52    font-weight: 600;53    letter-spacing: 0.2px;54    color: #111827;55  }56 57  .divider { height: 1px; background: #e5e7eb; }58 59  /* Weekdays header */60  .weekdays {61    height: 100px;62    display: grid;63    grid-template-columns: repeat(7, 1fr);64    align-items: center;65    text-align: center;66    color: #6b7280;67    font-size: 32px;68    box-sizing: border-box;69    padding: 0 60px;70    border-bottom: 1px solid #eef2f7;71  }72  .weekdays .wd { font-weight: 500; }73 74  /* Month sections */75  .month-title {76    text-align: center;77    font-size: 46px;78    font-weight: 500;79    color: #111827;80    margin: 46px 0 20px;81  }82  .calendar {83    display: grid;84    grid-template-columns: repeat(7, 1fr);85    gap: 8px;86    padding: 0 60px;87    box-sizing: border-box;88  }89  .day {90    height: 120px;91    position: relative;92    display: flex;93    align-items: center;94    justify-content: center;95    font-size: 40px;96    color: #cbd5e1;97  }98  .day.enabled { color: #1f2937; }99  .day.empty { color: transparent; }100  .day.dim { color: #d6dbe3; }101  .day.selected {102    color: #ffffff;103    font-weight: 600;104  }105  .day.selected::before {106    content: "";107    position: absolute;108    width: 120px;109    height: 120px;110    left: 50%;111    top: 50%;112    transform: translate(-50%, -50%);113    background: #1a73e8;114    border-radius: 28px;115  }116 117  /* Floating image placeholder (round sticker) */118  .sticker {119    position: absolute;120    right: 54px;121    top: 1550px;122    width: 140px;123    height: 140px;124    background: #E0E0E0;125    border: 1px solid #BDBDBD;126    border-radius: 50%;127    display: flex;128    align-items: center;129    justify-content: center;130    color: #757575;131    font-size: 26px;132    text-align: center;133    line-height: 1.1;134  }135 136  /* Date input section */137  .date-inputs {138    position: absolute;139    left: 0;140    right: 0;141    bottom: 360px;142    border-top: 1px solid #eaeef4;143    padding: 24px 40px 0 40px;144    box-sizing: border-box;145  }146  .fields {147    display: grid;148    grid-template-columns: 1fr 1fr;149    gap: 36px;150    padding: 16px 20px;151  }152  .field {153    height: 150px;154    border: 1.8px solid #e5e7eb;155    border-radius: 26px;156    box-sizing: border-box;157    padding: 22px 30px;158    background: #ffffff;159  }160  .field .label {161    font-size: 28px;162    color: #6b7280;163    margin-bottom: 12px;164  }165  .field .value {166    font-size: 40px;167    color: #111827;168  }169  .field.active {170    border-color: #1a73e8;171    box-shadow: 0 0 0 3px rgba(26,115,232,0.12) inset;172  }173  .field.active .label { color: #1a73e8; }174 175  /* Actions */176  .actions {177    position: absolute;178    left: 40px;179    right: 40px;180    bottom: 200px;181    display: flex;182    justify-content: space-between;183    align-items: center;184  }185  .btn {186    height: 120px;187    min-width: 330px;188    border-radius: 28px;189    display: flex;190    align-items: center;191    justify-content: center;192    font-size: 44px;193    font-weight: 600;194    box-sizing: border-box;195  }196  .btn.clear {197    background: #FFE9DB;198    color: #f97316;199  }200  .btn.select {201    background: #eceff3;202    color: #9aa6b2;203  }204 205  /* Home indicator */206  .home-indicator {207    position: absolute;208    left: 0; right: 0; bottom: 0;209    height: 120px;210    background: #000000;211    display: flex;212    align-items: center;213    justify-content: center;214  }215  .home-indicator .bar {216    width: 240px;217    height: 12px;218    background: #ffffff;219    opacity: 0.9;220    border-radius: 6px;221  }222</style>223</head>224<body>225<div id="render-target">226 227  <!-- Status bar -->228  <div class="statusbar">229    <div>10:51</div>230    <div class="sb-icons">231      <!-- Wi-Fi icon -->232      <svg viewBox="0 0 24 24">233        <path d="M2 8c5-4 15-4 20 0" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>234        <path d="M5 11c4-3 10-3 14 0" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>235        <path d="M8 14c3-2 5-2 8 0" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>236        <circle cx="12" cy="17.5" r="1.5" fill="#374151"/>237      </svg>238      <!-- Battery icon -->239      <svg viewBox="0 0 24 24">240        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#374151" stroke-width="2" fill="none"/>241        <rect x="20" y="10" width="2" height="4" fill="#374151"/>242        <rect x="4" y="8" width="12" height="8" fill="#374151"/>243      </svg>244    </div>245  </div>246 247  <!-- App bar -->248  <div class="appbar">249    <div class="back">250      <svg viewBox="0 0 24 24">251        <path d="M15 5L8 12l7 7" stroke="#374151" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252      </svg>253    </div>254    <div class="title">Select Check-out Date</div>255  </div>256  <div class="divider"></div>257 258  <!-- Weekdays -->259  <div class="weekdays">260    <div class="wd">Sun</div>261    <div class="wd">Mon</div>262    <div class="wd">Tue</div>263    <div class="wd">Wed</div>264    <div class="wd">Thu</div>265    <div class="wd">Fri</div>266    <div class="wd">Sat</div>267  </div>268 269  <!-- December 2023 -->270  <div class="month-title">December 2023</div>271  <div class="calendar">272    <!-- Row 1 -->273    <div class="day empty"></div>274    <div class="day empty"></div>275    <div class="day empty"></div>276    <div class="day empty"></div>277    <div class="day empty"></div>278    <div class="day dim">1</div>279    <div class="day dim">2</div>280    <!-- Row 2 -->281    <div class="day dim">3</div>282    <div class="day dim">4</div>283    <div class="day dim">5</div>284    <div class="day dim">6</div>285    <div class="day dim">7</div>286    <div class="day dim">8</div>287    <div class="day dim">9</div>288    <!-- Row 3 -->289    <div class="day dim">10</div>290    <div class="day dim">11</div>291    <div class="day dim">12</div>292    <div class="day dim">13</div>293    <div class="day dim">14</div>294    <div class="day dim">15</div>295    <div class="day dim">16</div>296    <!-- Row 4 -->297    <div class="day enabled">17</div>298    <div class="day enabled">18</div>299    <div class="day enabled">19</div>300    <div class="day enabled">20</div>301    <div class="day enabled">21</div>302    <div class="day enabled">22</div>303    <div class="day selected">23</div>304    <!-- Row 5 -->305    <div class="day enabled">24</div>306    <div class="day enabled">25</div>307    <div class="day enabled">26</div>308    <div class="day enabled">27</div>309    <div class="day enabled">28</div>310    <div class="day enabled">29</div>311    <div class="day enabled">30</div>312    <!-- Row 6 -->313    <div class="day enabled">31</div>314    <div class="day empty"></div>315    <div class="day empty"></div>316    <div class="day empty"></div>317    <div class="day empty"></div>318    <div class="day empty"></div>319    <div class="day empty"></div>320  </div>321 322  <!-- January 2024 -->323  <div class="month-title" style="margin-top: 80px;">January 2024</div>324  <div class="calendar">325    <!-- Row 1: Sun empty, 1..6 -->326    <div class="day empty"></div>327    <div class="day enabled">1</div>328    <div class="day enabled">2</div>329    <div class="day enabled">3</div>330    <div class="day enabled">4</div>331    <div class="day enabled">5</div>332    <div class="day enabled">6</div>333    <!-- Row 2: 7..13 -->334    <div class="day enabled">7</div>335    <div class="day enabled">8</div>336    <div class="day enabled">9</div>337    <div class="day enabled">10</div>338    <div class="day enabled">11</div>339    <div class="day enabled">12</div>340    <div class="day enabled">13</div>341  </div>342 343  <!-- Round sticker / image placeholder -->344  <div class="sticker">[IMG: Round sticker]</div>345 346  <!-- Date inputs -->347  <div class="date-inputs">348    <div class="fields">349      <div class="field">350        <div class="label">Check-in date</div>351        <div class="value">Sat, 23 Dec</div>352      </div>353      <div class="field active">354        <div class="label">Check-out date</div>355        <div class="value"></div>356      </div>357    </div>358  </div>359 360  <!-- Actions -->361  <div class="actions">362    <div class="btn clear">Clear</div>363    <div class="btn select">Select</div>364  </div>365 366  <!-- Home indicator bar -->367  <div class="home-indicator">368    <div class="bar"></div>369  </div>370 371</div>372</body>373</html>