GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Calendar UI</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;12 color: #212121;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #FFFFFF;20 }21 22 /* Status bar */23 .status-bar {24 height: 120px;25 background: #000000;26 color: #FFFFFF;27 display: flex;28 align-items: center;29 padding: 0 36px;30 font-weight: 600;31 font-size: 36px;32 }33 .status-right {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 22px;38 }39 .status-icon {40 width: 36px; height: 36px;41 display: inline-flex; align-items: center; justify-content: center;42 }43 44 /* Header */45 .header {46 background: #FFFFFF;47 padding: 30px 48px 24px 48px;48 box-shadow: 0 1px 0 rgba(0,0,0,0.08);49 }50 .title-row {51 display: flex;52 align-items: center;53 gap: 24px;54 margin-top: 8px;55 margin-bottom: 28px;56 }57 .title-row .title {58 font-size: 46px;59 font-weight: 700;60 color: #222;61 }62 .icon-btn {63 width: 64px; height: 64px;64 display: inline-flex; align-items: center; justify-content: center;65 }66 .summary {67 display: flex;68 align-items: center;69 justify-content: space-between;70 padding: 12px 0 22px;71 }72 .summary .item {73 width: 44%;74 }75 .summary .label {76 font-size: 28px;77 color: #707070;78 font-weight: 600;79 margin-bottom: 6px;80 }81 .summary .date-text {82 font-size: 46px;83 font-weight: 800;84 color: #1F2937;85 }86 .summary .arrow {87 width: 12%;88 display: flex;89 align-items: center;90 justify-content: center;91 }92 .divider {93 height: 1px;94 background: #EAEAEA;95 }96 97 /* Calendar section */98 .calendar {99 padding: 32px 48px 0 48px;100 }101 .month-title {102 font-size: 40px;103 color: #444;104 font-weight: 600;105 text-align: center;106 margin: 22px 0 12px;107 }108 .daynames {109 display: grid;110 grid-template-columns: repeat(7, 1fr);111 padding: 16px 0 18px;112 color: #8D8D8D;113 font-size: 32px;114 text-align: center;115 }116 .week {117 position: relative;118 display: grid;119 grid-template-columns: repeat(7, 1fr);120 align-items: center;121 min-height: 120px;122 border-top: 1px solid #F0F0F0;123 }124 .week:last-child {125 border-bottom: 1px solid #F0F0F0;126 }127 .day {128 text-align: center;129 color: #6B7280;130 font-size: 40px;131 line-height: 1;132 position: relative;133 z-index: 1;134 }135 .day.muted {136 color: #CFCFCF;137 }138 .day .number {139 display: inline-block;140 padding: 10px 0;141 }142 .day.selected .number {143 width: 88px;144 height: 88px;145 line-height: 88px;146 border-radius: 44px;147 background: #4E81F7;148 color: #FFFFFF;149 font-weight: 700;150 }151 /* range highlight (between selected dates) */152 .week .range {153 position: absolute;154 top: 18px;155 left: calc(14.2857% * 4);156 width: calc(14.2857% * 2);157 height: 88px;158 border-radius: 24px;159 background: #D6E4FF;160 z-index: 0;161 }162 163 /* Bottom CTA */164 .cta {165 position: absolute;166 left: 48px;167 right: 48px;168 bottom: 140px;169 height: 120px;170 background: #3F79F6;171 border-radius: 60px;172 color: #FFFFFF;173 font-size: 40px;174 font-weight: 700;175 display: flex;176 align-items: center;177 justify-content: center;178 box-shadow: 0 6px 16px rgba(63,121,246,0.24);179 }180 181 /* Bottom gesture / nav area to match screenshot */182 .bottom-bar {183 position: absolute;184 bottom: 0;185 left: 0; right: 0;186 height: 120px;187 background: #000000;188 }189 .gesture-pill {190 position: absolute;191 bottom: 36px;192 left: 50%;193 transform: translateX(-50%);194 width: 240px;195 height: 14px;196 background: #EDEDED;197 border-radius: 7px;198 opacity: 0.85;199 }200</style>201</head>202<body>203<div id="render-target">204 205 <!-- Status bar -->206 <div class="status-bar">207 <div>10:33</div>208 <div class="status-right">209 <span class="status-icon">210 <svg width="28" height="28" viewBox="0 0 24 24" fill="#FFFFFF"><circle cx="12" cy="12" r="9"/></svg>211 </span>212 <span class="status-icon">213 <svg width="28" height="28" viewBox="0 0 24 24" fill="#FFFFFF"><circle cx="12" cy="12" r="3"/></svg>214 </span>215 <span class="status-icon">216 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">217 <rect x="3" y="5" width="18" height="14" rx="2"></rect>218 <line x1="21" y1="9" x2="23" y2="9" stroke-width="3"></line>219 </svg>220 </span>221 </div>222 </div>223 224 <!-- Header -->225 <div class="header" style="margin-top: 0;">226 <div class="title-row">227 <div class="icon-btn">228 <svg width="34" height="34" viewBox="0 0 24 24" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round">229 <line x1="5" y1="5" x2="19" y2="19"></line>230 <line x1="19" y1="5" x2="5" y2="19"></line>231 </svg>232 </div>233 <div class="title">Calendar</div>234 </div>235 236 <div class="summary">237 <div class="item">238 <div class="label">Check-in</div>239 <div class="date-text">Thu, Dec 07</div>240 </div>241 <div class="arrow">242 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#7A7A7A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">243 <polyline points="9 18 15 12 9 6"></polyline>244 </svg>245 </div>246 <div class="item" style="text-align: right;">247 <div class="label">Check-out</div>248 <div class="date-text">Fri, Dec 08</div>249 </div>250 </div>251 <div class="divider"></div>252 </div>253 254 <!-- Calendar: December 2023 -->255 <div class="calendar">256 <div class="month-title">December 2023</div>257 <div class="daynames">258 <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>259 </div>260 261 <div class="week">262 <div class="day muted"><span class="number"></span></div>263 <div class="day muted"><span class="number"></span></div>264 <div class="day muted"><span class="number"></span></div>265 <div class="day muted"><span class="number"></span></div>266 <div class="day muted"><span class="number"></span></div>267 <div class="day muted"><span class="number">1</span></div>268 <div class="day muted"><span class="number">2</span></div>269 </div>270 271 <div class="week">272 <!-- range background between 7 and 8 -->273 <div class="range"></div>274 <div class="day"><span class="number">3</span></div>275 <div class="day"><span class="number">4</span></div>276 <div class="day"><span class="number">5</span></div>277 <div class="day"><span class="number">6</span></div>278 <div class="day selected"><span class="number">7</span></div>279 <div class="day selected"><span class="number">8</span></div>280 <div class="day"><span class="number">9</span></div>281 </div>282 283 <div class="week">284 <div class="day"><span class="number">10</span></div>285 <div class="day"><span class="number">11</span></div>286 <div class="day"><span class="number">12</span></div>287 <div class="day"><span class="number">13</span></div>288 <div class="day"><span class="number">14</span></div>289 <div class="day"><span class="number">15</span></div>290 <div class="day"><span class="number">16</span></div>291 </div>292 293 <div class="week">294 <div class="day"><span class="number">17</span></div>295 <div class="day"><span class="number">18</span></div>296 <div class="day"><span class="number">19</span></div>297 <div class="day"><span class="number">20</span></div>298 <div class="day"><span class="number">21</span></div>299 <div class="day"><span class="number">22</span></div>300 <div class="day"><span class="number">23</span></div>301 </div>302 303 <div class="week">304 <div class="day"><span class="number">24</span></div>305 <div class="day"><span class="number">25</span></div>306 <div class="day"><span class="number">26</span></div>307 <div class="day"><span class="number">27</span></div>308 <div class="day"><span class="number">28</span></div>309 <div class="day"><span class="number">29</span></div>310 <div class="day"><span class="number">30</span></div>311 </div>312 313 <div class="week">314 <div class="day"><span class="number">31</span></div>315 <div class="day muted"><span class="number"></span></div>316 <div class="day muted"><span class="number"></span></div>317 <div class="day muted"><span class="number"></span></div>318 <div class="day muted"><span class="number"></span></div>319 <div class="day muted"><span class="number"></span></div>320 <div class="day muted"><span class="number"></span></div>321 </div>322 323 <!-- Separator between months -->324 <div class="divider" style="margin: 32px 0;"></div>325 326 <!-- Calendar: January 2024 -->327 <div class="month-title">January 2024</div>328 <div class="daynames">329 <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>330 </div>331 332 <div class="week">333 <div class="day muted"><span class="number"></span></div>334 <div class="day"><span class="number">1</span></div>335 <div class="day"><span class="number">2</span></div>336 <div class="day"><span class="number">3</span></div>337 <div class="day"><span class="number">4</span></div>338 <div class="day"><span class="number">5</span></div>339 <div class="day"><span class="number">6</span></div>340 </div>341 342 <div class="week">343 <div class="day"><span class="number">7</span></div>344 <div class="day"><span class="number">8</span></div>345 <div class="day"><span class="number">9</span></div>346 <div class="day"><span class="number">10</span></div>347 <div class="day"><span class="number">11</span></div>348 <div class="day"><span class="number">12</span></div>349 <div class="day"><span class="number">13</span></div>350 </div>351 352 <div class="week">353 <div class="day"><span class="number">14</span></div>354 <div class="day"><span class="number">15</span></div>355 <div class="day"><span class="number">16</span></div>356 <div class="day"><span class="number">17</span></div>357 <div class="day"><span class="number">18</span></div>358 <div class="day"><span class="number">19</span></div>359 <div class="day"><span class="number">20</span></div>360 </div>361 </div>362 363 <!-- CTA -->364 <div class="cta">OK (1 Night)</div>365 366 <!-- Bottom gesture/nav area -->367 <div class="bottom-bar">368 <div class="gesture-pill"></div>369 </div>370</div>371</body>372</html>