GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Calendar UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #ffffff;20 color: #1f1f1f;21 }22 23 /* Status bar */24 .status-bar {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 150px;30 background: #000;31 color: #fff;32 display: flex;33 align-items: center;34 padding: 0 40px;35 box-sizing: border-box;36 font-weight: 600;37 letter-spacing: 0.5px;38 }39 .status-left {40 font-size: 44px;41 }42 .status-right {43 margin-left: auto;44 display: flex;45 align-items: center;46 gap: 28px;47 }48 .status-icon {49 width: 40px;50 height: 40px;51 display: inline-flex;52 align-items: center;53 justify-content: center;54 }55 56 /* Header with title and check-in/out summary */57 .header {58 position: absolute;59 top: 150px;60 left: 0;61 width: 1080px;62 background: #fff;63 box-sizing: border-box;64 padding: 28px 40px 24px 40px;65 border-bottom: 1px solid #ECECEC;66 }67 .title-row {68 display: flex;69 align-items: center;70 gap: 28px;71 margin-bottom: 20px;72 }73 .title-row .title {74 font-size: 48px;75 font-weight: 600;76 color: #2c2c2c;77 }78 .icon-btn {79 width: 56px;80 height: 56px;81 display: inline-flex;82 align-items: center;83 justify-content: center;84 }85 86 .date-summary {87 display: grid;88 grid-template-columns: 1fr 100px 1fr;89 align-items: center;90 gap: 20px;91 padding-top: 10px;92 padding-bottom: 18px;93 }94 .summary-block {95 display: flex;96 flex-direction: column;97 }98 .summary-label {99 font-size: 34px;100 color: #5d5d5d;101 font-weight: 600;102 margin-bottom: 8px;103 }104 .summary-date {105 font-size: 56px;106 font-weight: 700;107 color: #1f1f1f;108 letter-spacing: 0.2px;109 }110 .arrow-mid {111 display: flex;112 align-items: center;113 justify-content: center;114 }115 116 /* Calendar area */117 .content {118 position: absolute;119 top: 150px; /* status bar height */120 left: 0;121 width: 1080px;122 height: calc(2400px - 150px);123 overflow: hidden;124 }125 .calendar-wrap {126 position: absolute;127 top: 220px; /* below header */128 left: 0;129 right: 0;130 bottom: 220px; /* leave room for bottom button area */131 overflow-y: auto;132 padding: 10px 32px 10px 32px;133 box-sizing: border-box;134 }135 136 .month-section {137 margin-bottom: 40px;138 }139 .month-title {140 text-align: center;141 font-size: 44px;142 color: #4b4b4b;143 font-weight: 600;144 margin: 24px 0;145 }146 .weekday-row {147 display: grid;148 grid-template-columns: repeat(7, 1fr);149 font-size: 34px;150 color: #8a8a8a;151 text-align: center;152 padding: 18px 12px;153 }154 155 .days-grid {156 display: grid;157 grid-template-columns: repeat(7, 1fr);158 }159 .day {160 height: 130px;161 display: flex;162 align-items: center;163 justify-content: center;164 font-size: 40px;165 color: #9aa0a6; /* muted */166 position: relative;167 border-top: 1px solid #EFEFEF;168 }169 .day.blank {170 color: transparent;171 }172 .day.faded {173 color: #cfcfcf;174 }175 .day.selected {176 color: #ffffff;177 font-weight: 700;178 }179 .day.selected::before {180 content: "";181 position: absolute;182 width: 120px;183 height: 120px;184 border-radius: 60px;185 background: #3F72F8;186 box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset;187 }188 189 /* Bottom action button */190 .bottom-action {191 position: absolute;192 left: 0;193 right: 0;194 bottom: 150px; /* above gesture bar */195 display: flex;196 justify-content: center;197 padding-bottom: 10px;198 }199 .primary-btn {200 width: 920px;201 height: 120px;202 background: #3F72F8;203 color: #fff;204 border-radius: 60px;205 display: flex;206 align-items: center;207 justify-content: center;208 font-size: 46px;209 font-weight: 700;210 box-shadow: 0 4px 12px rgba(63,114,248,0.35);211 }212 213 /* Gesture/navigation bar */214 .nav-bar {215 position: absolute;216 left: 0;217 bottom: 0;218 width: 1080px;219 height: 190px;220 background: #000;221 display: flex;222 align-items: center;223 justify-content: center;224 }225 .home-indicator {226 width: 300px;227 height: 16px;228 border-radius: 8px;229 background: #e6e6e6;230 opacity: 0.9;231 }232</style>233</head>234<body>235<div id="render-target">236 237 <!-- Status bar -->238 <div class="status-bar">239 <div class="status-left">10:33</div>240 <div class="status-right">241 <!-- Simple status icons -->242 <div class="status-icon">243 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">244 <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2"></circle>245 </svg>246 </div>247 <div class="status-icon">248 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">249 <rect x="3" y="5" width="18" height="14" rx="2" stroke="#fff" stroke-width="2"></rect>250 <rect x="6" y="8" width="12" height="8" fill="#fff"></rect>251 </svg>252 </div>253 <div class="status-icon">254 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">255 <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2"></circle>256 <circle cx="12" cy="12" r="4" fill="#fff"></circle>257 </svg>258 </div>259 <div class="status-icon">260 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">261 <path d="M20 8v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>262 <rect x="7" y="4" width="10" height="6" rx="1" stroke="#fff" stroke-width="2"></rect>263 </svg>264 </div>265 </div>266 </div>267 268 <!-- Header -->269 <div class="header">270 <div class="title-row">271 <div class="icon-btn">272 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">273 <path d="M6 6l12 12M18 6L6 18" stroke="#2c2c2c" stroke-width="2" stroke-linecap="round"></path>274 </svg>275 </div>276 <div class="title">Calendar</div>277 </div>278 <div class="date-summary">279 <div class="summary-block">280 <div class="summary-label">Check-in</div>281 <div class="summary-date">Mon, Jan 15, 24</div>282 </div>283 <div class="arrow-mid">284 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">285 <path d="M5 12h12M13 6l6 6-6 6" stroke="#2c2c2c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>286 </svg>287 </div>288 <div class="summary-block" style="align-items:flex-end; text-align:right;">289 <div class="summary-label">Check-out</div>290 <div class="summary-date" style="color:#bdbdbd; font-weight:700;">—</div>291 </div>292 </div>293 </div>294 295 <!-- Scrollable calendar content -->296 <div class="content">297 <div class="calendar-wrap">298 299 <!-- December 2023 -->300 <div class="month-section">301 <div class="month-title">December 2023</div>302 <div class="weekday-row">303 <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>304 </div>305 <div class="days-grid">306 <!-- Row 1 -->307 <div class="day blank"></div>308 <div class="day blank"></div>309 <div class="day blank"></div>310 <div class="day blank"></div>311 <div class="day faded">1</div>312 <div class="day faded">2</div>313 <!-- Row 2 -->314 <div class="day faded">3</div>315 <div class="day faded">4</div>316 <div class="day faded">5</div>317 <div class="day faded">6</div>318 <div class="day faded">7</div>319 <div class="day faded">8</div>320 <div class="day faded">9</div>321 <!-- Row 3 -->322 <div class="day faded">10</div>323 <div class="day faded">11</div>324 <div class="day faded">12</div>325 <div class="day faded">13</div>326 <div class="day faded">14</div>327 <div class="day faded">15</div>328 <div class="day faded">16</div>329 <!-- Row 4 -->330 <div class="day faded">17</div>331 <div class="day faded">18</div>332 <div class="day faded">19</div>333 <div class="day faded">20</div>334 <div class="day faded">21</div>335 <div class="day faded">22</div>336 <div class="day faded">23</div>337 <!-- Row 5 -->338 <div class="day faded">24</div>339 <div class="day faded">25</div>340 <div class="day faded">26</div>341 <div class="day faded">27</div>342 <div class="day faded">28</div>343 <div class="day faded">29</div>344 <div class="day faded">30</div>345 <!-- Row 6 -->346 <div class="day faded">31</div>347 <div class="day blank"></div>348 <div class="day blank"></div>349 <div class="day blank"></div>350 <div class="day blank"></div>351 <div class="day blank"></div>352 <div class="day blank"></div>353 </div>354 </div>355 356 <!-- January 2024 -->357 <div class="month-section">358 <div class="month-title">January 2024</div>359 <div class="weekday-row">360 <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>361 </div>362 <div class="days-grid">363 <!-- Row 1 -->364 <div class="day blank"></div>365 <div class="day">1</div>366 <div class="day">2</div>367 <div class="day">3</div>368 <div class="day">4</div>369 <div class="day">5</div>370 <div class="day">6</div>371 <!-- Row 2 -->372 <div class="day">7</div>373 <div class="day">8</div>374 <div class="day">9</div>375 <div class="day">10</div>376 <div class="day">11</div>377 <div class="day">12</div>378 <div class="day">13</div>379 <!-- Row 3 -->380 <div class="day">14</div>381 <div class="day selected">15</div>382 <div class="day">16</div>383 <div class="day">17</div>384 <div class="day">18</div>385 <div class="day">19</div>386 <div class="day">20</div>387 <!-- Row 4 -->388 <div class="day">21</div>389 <div class="day">22</div>390 <div class="day">23</div>391 <div class="day">24</div>392 <div class="day">25</div>393 <div class="day">26</div>394 <div class="day">27</div>395 <!-- Row 5 -->396 <div class="day">28</div>397 <div class="day">29</div>398 <div class="day">30</div>399 <div class="day">31</div>400 <div class="day blank"></div>401 <div class="day blank"></div>402 <div class="day blank"></div>403 </div>404 </div>405 406 </div>407 </div>408 409 <!-- Bottom action button -->410 <div class="bottom-action">411 <div class="primary-btn">OK (1 Night)</div>412 </div>413 414 <!-- Gesture bar -->415 <div class="nav-bar">416 <div class="home-indicator"></div>417 </div>418 419</div>420</body>421</html>