GD-ML/AndroidCode
13.4k
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>Calendar UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #212121;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 100%;25 height: 120px;26 background: #000000;27 color: #ffffff;28 display: flex;29 align-items: center;30 justify-content: space-between;31 padding: 0 36px;32 box-sizing: border-box;33 font-weight: 600;34 letter-spacing: 0.5px;35 }36 .status-icons {37 display: flex;38 gap: 20px;39 align-items: center;40 }41 .status-dot { width: 14px; height: 14px; background: #ffffff; border-radius: 50%; opacity: 0.9; }42 .battery {43 width: 34px; height: 18px; border: 2px solid #fff; border-radius: 4px; position: relative;44 }45 .battery::after {46 content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 6px; background: #fff; border-radius: 2px;47 }48 .battery .level { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 22px; background: #fff; }49 50 /* Header */51 .header {52 position: absolute;53 top: 120px;54 left: 0;55 right: 0;56 background: #ffffff;57 padding: 24px 36px 24px 36px;58 box-sizing: border-box;59 border-bottom: 1px solid #eeeeee;60 }61 .title-row {62 display: flex;63 align-items: center;64 gap: 18px;65 margin-bottom: 20px;66 }67 .title-row .title {68 font-size: 46px;69 font-weight: 700;70 }71 .icon-btn {72 width: 72px; height: 72px; border: none; background: transparent; padding: 0; display: flex; align-items: center; justify-content: center;73 }74 .icon-btn svg { width: 40px; height: 40px; stroke: #2b2b2b; }75 76 .selection-row {77 display: grid;78 grid-template-columns: 1fr 80px 1fr;79 align-items: center;80 padding: 10px 0 18px;81 }82 .sel-block .label {83 font-size: 30px;84 color: #7a7a7a;85 margin-bottom: 8px;86 font-weight: 600;87 }88 .sel-block .date {89 font-size: 52px;90 font-weight: 800;91 color: #2b2b2b;92 }93 .arrow {94 display: flex; align-items: center; justify-content: center;95 }96 .arrow svg { width: 42px; height: 42px; fill: none; stroke: #5f6368; stroke-width: 4px; }97 98 /* Calendar area */99 .calendar {100 position: absolute;101 top: 360px;102 left: 0;103 right: 0;104 bottom: 220px; /* space above button */105 overflow-y: auto;106 padding: 10px 36px 20px;107 box-sizing: border-box;108 }109 110 .month {111 margin-bottom: 36px;112 }113 .month-title {114 text-align: center;115 font-size: 40px;116 font-weight: 600;117 color: #4b4b4b;118 margin: 24px 0 16px;119 }120 .dow {121 display: grid;122 grid-template-columns: repeat(7, 1fr);123 text-align: center;124 font-size: 30px;125 color: #9aa0a6;126 margin-bottom: 12px;127 }128 .grid {129 display: grid;130 grid-template-columns: repeat(7, 1fr);131 grid-auto-rows: 140px;132 border-top: 1px solid #efefef;133 border-bottom: 1px solid #efefef;134 }135 .grid .day {136 position: relative;137 border-top: 1px solid #f1f1f1;138 display: flex;139 align-items: center;140 justify-content: center;141 font-size: 36px;142 color: #9198a0;143 }144 .grid .day:nth-child(n+1) { border-left: none; }145 .grid .day.blank { color: #d5d9de; }146 .grid .day.dim { color: #c6cbd1; opacity: 0.7; }147 148 /* Selected range and circles */149 .day.selected .num {150 width: 96px; height: 96px; line-height: 96px;151 background: #4c86ff;152 color: #ffffff;153 border-radius: 50%;154 text-align: center;155 font-weight: 700;156 z-index: 2;157 }158 .day.start::after {159 content: "";160 position: absolute;161 top: 32px;162 left: calc(50% - 150px);163 width: 300px; /* spans two cells */164 height: 76px;165 background: #e0ecff;166 border-radius: 40px;167 z-index: 1;168 }169 170 /* OK button */171 .cta {172 position: absolute;173 left: 40px;174 right: 40px;175 bottom: 120px;176 height: 120px;177 background: #2f6ef5;178 color: #ffffff;179 border-radius: 60px;180 display: flex;181 align-items: center;182 justify-content: center;183 font-size: 42px;184 font-weight: 700;185 box-shadow: 0 6px 16px rgba(47,110,245,0.35);186 }187 188 /* System navigation bar (bottom black area) */189 .system-bar {190 position: absolute;191 left: 0; right: 0; bottom: 0;192 height: 120px;193 background: #000000;194 display: flex;195 align-items: center;196 justify-content: center;197 }198 .gesture-pill {199 width: 200px; height: 12px; background: #cccccc; border-radius: 6px; opacity: 0.8;200 }201</style>202</head>203<body>204<div id="render-target">205 206 <!-- Android status bar -->207 <div class="status-bar">208 <div>10:34</div>209 <div class="status-icons">210 <div class="status-dot"></div>211 <div class="status-dot" style="opacity:0.6;"></div>212 <div class="battery"><div class="level"></div></div>213 </div>214 </div>215 216 <!-- Header with close icon and selection summary -->217 <div class="header">218 <div class="title-row">219 <button class="icon-btn" aria-label="Close">220 <svg viewBox="0 0 24 24">221 <path d="M5 5 L19 19 M19 5 L5 19" stroke-width="2" stroke-linecap="round"/>222 </svg>223 </button>224 <div class="title">Calendar</div>225 </div>226 227 <div class="selection-row">228 <div class="sel-block">229 <div class="label">Check-in</div>230 <div class="date">Mon, Jan 15, 24</div>231 </div>232 <div class="arrow">233 <svg viewBox="0 0 24 24">234 <path d="M4 12 H18 M12 6 L18 12 L12 18" stroke-linecap="round" stroke-linejoin="round"/>235 </svg>236 </div>237 <div class="sel-block">238 <div class="label">Check-out</div>239 <div class="date">Tue, Jan 16, 24</div>240 </div>241 </div>242 </div>243 244 <!-- Calendar content -->245 <div class="calendar">246 <!-- December 2023 -->247 <div class="month">248 <div class="month-title">December 2023</div>249 <div class="dow">250 <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>251 </div>252 <div class="grid">253 <!-- Row 1: starts on Fri -->254 <div class="day blank"></div>255 <div class="day blank"></div>256 <div class="day blank"></div>257 <div class="day blank"></div>258 <div class="day blank"></div>259 <div class="day dim"><span class="num">1</span></div>260 <div class="day dim"><span class="num">2</span></div>261 262 <!-- Row 2 -->263 <div class="day dim"><span class="num">3</span></div>264 <div class="day dim"><span class="num">4</span></div>265 <div class="day dim"><span class="num">5</span></div>266 <div class="day dim"><span class="num">6</span></div>267 <div class="day dim"><span class="num">7</span></div>268 <div class="day dim"><span class="num">8</span></div>269 <div class="day dim"><span class="num">9</span></div>270 271 <!-- Row 3 -->272 <div class="day dim"><span class="num">10</span></div>273 <div class="day dim"><span class="num">11</span></div>274 <div class="day dim"><span class="num">12</span></div>275 <div class="day dim"><span class="num">13</span></div>276 <div class="day dim"><span class="num">14</span></div>277 <div class="day dim"><span class="num">15</span></div>278 <div class="day dim"><span class="num">16</span></div>279 280 <!-- Row 4 -->281 <div class="day dim"><span class="num">17</span></div>282 <div class="day dim"><span class="num">18</span></div>283 <div class="day dim"><span class="num">19</span></div>284 <div class="day dim"><span class="num">20</span></div>285 <div class="day dim"><span class="num">21</span></div>286 <div class="day dim"><span class="num">22</span></div>287 <div class="day dim"><span class="num">23</span></div>288 289 <!-- Row 5 -->290 <div class="day dim"><span class="num">24</span></div>291 <div class="day dim"><span class="num">25</span></div>292 <div class="day dim"><span class="num">26</span></div>293 <div class="day dim"><span class="num">27</span></div>294 <div class="day dim"><span class="num">28</span></div>295 <div class="day dim"><span class="num">29</span></div>296 <div class="day dim"><span class="num">30</span></div>297 298 <!-- Row 6 -->299 <div class="day dim"><span class="num">31</span></div>300 <div class="day blank"></div>301 <div class="day blank"></div>302 <div class="day blank"></div>303 <div class="day blank"></div>304 <div class="day blank"></div>305 <div class="day blank"></div>306 </div>307 </div>308 309 <!-- January 2024 -->310 <div class="month">311 <div class="month-title">January 2024</div>312 <div class="dow">313 <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>314 </div>315 <div class="grid">316 <!-- Row 1 (starts Monday) -->317 <div class="day blank"></div>318 <div class="day"><span class="num">1</span></div>319 <div class="day"><span class="num">2</span></div>320 <div class="day"><span class="num">3</span></div>321 <div class="day"><span class="num">4</span></div>322 <div class="day"><span class="num">5</span></div>323 <div class="day"><span class="num">6</span></div>324 325 <!-- Row 2 -->326 <div class="day"><span class="num">7</span></div>327 <div class="day"><span class="num">8</span></div>328 <div class="day"><span class="num">9</span></div>329 <div class="day"><span class="num">10</span></div>330 <div class="day"><span class="num">11</span></div>331 <div class="day"><span class="num">12</span></div>332 <div class="day"><span class="num">13</span></div>333 334 <!-- Row 3 -->335 <div class="day"><span class="num">14</span></div>336 <div class="day selected start"><span class="num">15</span></div>337 <div class="day selected"><span class="num">16</span></div>338 <div class="day"><span class="num">17</span></div>339 <div class="day"><span class="num">18</span></div>340 <div class="day"><span class="num">19</span></div>341 <div class="day"><span class="num">20</span></div>342 343 <!-- Row 4 -->344 <div class="day"><span class="num">21</span></div>345 <div class="day"><span class="num">22</span></div>346 <div class="day"><span class="num">23</span></div>347 <div class="day"><span class="num">24</span></div>348 <div class="day"><span class="num">25</span></div>349 <div class="day"><span class="num">26</span></div>350 <div class="day"><span class="num">27</span></div>351 352 <!-- Row 5 -->353 <div class="day"><span class="num">28</span></div>354 <div class="day"><span class="num">29</span></div>355 <div class="day"><span class="num">30</span></div>356 <div class="day"><span class="num">31</span></div>357 <div class="day blank"></div>358 <div class="day blank"></div>359 <div class="day blank"></div>360 </div>361 </div>362 </div>363 364 <!-- Confirmation Button -->365 <div class="cta">OK (1 Night)</div>366 367 <!-- System navigation bar -->368 <div class="system-bar">369 <div class="gesture-pill"></div>370 </div>371 372</div>373</body>374</html>