GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Calendar UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #ffffff;14 font-family: Arial, Helvetica, sans-serif;15 color: #222;16 }17 18 /* Top status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 90px;25 background: #2b2b2b;26 color: #fff;27 display: flex;28 align-items: center;29 padding: 0 32px;30 box-sizing: border-box;31 font-size: 30px;32 letter-spacing: 0.2px;33 }34 .status-left { flex: 1; }35 .status-right {36 display: flex;37 align-items: center;38 gap: 22px;39 }40 .icon {41 width: 36px;42 height: 36px;43 display: inline-flex;44 align-items: center;45 justify-content: center;46 fill: currentColor;47 }48 49 /* App bar */50 .app-bar {51 position: absolute;52 top: 90px;53 left: 0;54 width: 1080px;55 height: 150px;56 background: #333333;57 color: #fff;58 display: flex;59 align-items: center;60 box-sizing: border-box;61 padding: 0 28px;62 }63 .app-left, .app-right { display: flex; align-items: center; }64 .app-left { gap: 24px; }65 .app-right { margin-left: auto; gap: 34px; }66 .title-wrap {67 display: flex;68 flex-direction: column;69 gap: 8px;70 line-height: 1.2;71 }72 .title-row {73 display: flex;74 align-items: center;75 gap: 12px;76 font-size: 36px;77 font-weight: 600;78 }79 .subtitle {80 font-size: 28px;81 color: #cfcfcf;82 }83 84 /* Tabs */85 .tabs {86 position: absolute;87 top: 240px;88 left: 0;89 width: 1080px;90 height: 120px;91 background: #fff;92 border-bottom: 1px solid #e7e7e7;93 display: flex;94 align-items: flex-end;95 padding: 0 40px;96 box-sizing: border-box;97 gap: 80px;98 }99 .tab {100 font-size: 34px;101 color: #6d6d6d;102 padding-bottom: 24px;103 }104 .tab.active {105 color: #1a73e8;106 border-bottom: 6px solid #1a73e8;107 }108 109 /* Date controls row */110 .date-controls {111 position: absolute;112 top: 360px;113 left: 0;114 width: 1080px;115 height: 130px;116 background: #fff;117 display: flex;118 align-items: center;119 gap: 40px;120 padding: 0 40px;121 box-sizing: border-box;122 }123 .chip-group {124 display: flex;125 align-items: center;126 gap: 20px;127 }128 .chip {129 height: 90px;130 min-width: 420px;131 background: #f5f6f7;132 border: 1px solid #e0e3e7;133 border-radius: 16px;134 display: flex;135 align-items: center;136 justify-content: center;137 gap: 16px;138 font-size: 32px;139 color: #333;140 box-shadow: 0 1px 0 rgba(0,0,0,0.03);141 }142 .chip .arrow-btn {143 width: 60px;144 height: 60px;145 border-radius: 12px;146 background: #f0f2f4;147 border: 1px solid #e1e5ea;148 display: inline-flex;149 align-items: center;150 justify-content: center;151 margin: 0 14px;152 }153 154 /* DOW header */155 .dow {156 position: absolute;157 top: 490px;158 left: 0;159 width: 1080px;160 height: 80px;161 background: #fff;162 border-top: 1px solid #e9eaec;163 border-bottom: 1px solid #e9eaec;164 display: grid;165 grid-template-columns: repeat(7, 1fr);166 align-items: center;167 box-sizing: border-box;168 padding: 0 60px;169 color: #9aa0a6;170 font-size: 28px;171 letter-spacing: 1px;172 }173 .dow div { text-align: center; }174 175 /* Calendar area */176 .calendar-area {177 position: absolute;178 top: 570px;179 left: 0;180 width: 1080px;181 height: 1520px;182 overflow: hidden;183 background: #fff;184 }185 .month {186 width: 980px;187 margin: 40px auto 20px auto;188 }189 .month-title {190 text-align: center;191 font-size: 44px;192 margin: 24px 0 20px;193 color: #222;194 }195 .grid {196 position: relative;197 display: grid;198 grid-template-columns: repeat(7, 1fr);199 grid-auto-rows: 120px;200 gap: 0;201 }202 .day, .empty {203 display: flex;204 align-items: center;205 justify-content: center;206 font-size: 34px;207 }208 .day { color: #333; z-index: 2; }209 .muted { color: #b8bdc2; }210 .separator { width: 1080px; height: 1px; background: #ececec; margin: 20px 0; }211 212 /* Selection overlay for January */213 .selection {214 grid-column: 1 / span 5;215 grid-row: 1;216 background: #e8f0fe;217 border-radius: 60px;218 z-index: 1;219 margin: 24px 0;220 }221 .start-circle, .end-circle {222 grid-row: 1;223 width: 96px;224 height: 96px;225 border-radius: 50%;226 z-index: 1;227 align-self: center;228 justify-self: center;229 margin-top: 0;230 }231 .start-circle {232 grid-column: 1;233 background: #1a73e8;234 }235 .end-circle {236 grid-column: 5;237 background: transparent;238 border: 6px solid #1a73e8;239 box-sizing: border-box;240 }241 242 /* Bottom action bar */243 .action-bar {244 position: absolute;245 bottom: 120px;246 left: 0;247 width: 1080px;248 height: 160px;249 background: #ffffff;250 border-top: 1px solid #e8e8e8;251 box-shadow: 0 -2px 6px rgba(0,0,0,0.06);252 display: flex;253 align-items: center;254 padding: 0 40px;255 box-sizing: border-box;256 gap: 26px;257 }258 .nights {259 font-size: 34px;260 color: #5f6368;261 margin-right: auto;262 }263 .btn {264 height: 96px;265 padding: 0 46px;266 border-radius: 48px;267 font-size: 34px;268 display: inline-flex;269 align-items: center;270 justify-content: center;271 cursor: default;272 }273 .btn.outline {274 border: 1px solid #d0d4d9;275 color: #1a73e8;276 background: #fff;277 }278 .btn.primary {279 background: #1a73e8;280 color: #fff;281 }282 283 /* System navigation bar */284 .nav-bar {285 position: absolute;286 bottom: 0;287 left: 0;288 width: 1080px;289 height: 120px;290 background: #1f1f1f;291 display: flex;292 align-items: center;293 justify-content: center;294 }295 .home-pill {296 width: 220px;297 height: 14px;298 border-radius: 10px;299 background: #bdbdbd;300 }301</style>302</head>303<body>304<div id="render-target">305 306 <!-- Status bar -->307 <div class="status-bar">308 <div class="status-left">2:06</div>309 <div class="status-right">310 <!-- simple icons -->311 <svg class="icon" viewBox="0 0 24 24"><path d="M4 16h16v2H4zm2-4h12v2H6zm3-4h6v2H9z"/></svg>312 <svg class="icon" viewBox="0 0 24 24"><path d="M3 9l9-6 9 6v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9z"/></svg>313 <span style="font-size:28px;">100%</span>314 </div>315 </div>316 317 <!-- App bar -->318 <div class="app-bar">319 <div class="app-left">320 <!-- Close icon -->321 <svg class="icon" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>322 <div class="title-wrap">323 <div class="title-row">324 <!-- Lock icon -->325 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3a5 5 0 0 0-5 5v3H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V8a5 5 0 0 0-5-5zm-3 8V8a3 3 0 0 1 6 0v3H9z" fill="#fff"/></svg>326 <span>Change search criteria</span>327 </div>328 <div class="subtitle">google.com</div>329 </div>330 </div>331 <div class="app-right">332 <!-- Share -->333 <svg class="icon" viewBox="0 0 24 24"><path d="M18 8a3 3 0 1 0-2.8-4H15a3 3 0 0 0 .2 1L8 10a3 3 0 0 0-2-.8A3 3 0 1 0 9 12l7-5a3 3 0 0 0 2 .9zM6 18a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm12 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg>334 <!-- Bookmark -->335 <svg class="icon" viewBox="0 0 24 24"><path d="M6 4h12v16l-6-4-6 4z" fill="#fff"/></svg>336 <!-- More -->337 <svg class="icon" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#fff"/><circle cx="12" cy="12" r="2" fill="#fff"/><circle cx="19" cy="12" r="2" fill="#fff"/></svg>338 </div>339 </div>340 341 <!-- Tabs -->342 <div class="tabs">343 <div class="tab">Search</div>344 <div class="tab active">Dates</div>345 <div class="tab">Guests</div>346 </div>347 348 <!-- Date controls row -->349 <div class="date-controls">350 <div class="chip-group">351 <div class="chip">352 <div class="arrow-btn">353 <svg class="icon" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" fill="none" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"/></svg>354 </div>355 <span>Mon, 1 Jan</span>356 <div class="arrow-btn">357 <svg class="icon" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"/></svg>358 </div>359 </div>360 </div>361 <div class="chip-group">362 <div class="chip">363 <div class="arrow-btn">364 <svg class="icon" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" fill="none" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"/></svg>365 </div>366 <span>Fri, 5 Jan</span>367 <div class="arrow-btn">368 <svg class="icon" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"/></svg>369 </div>370 </div>371 </div>372 </div>373 374 <!-- DOW -->375 <div class="dow">376 <div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div><div>S</div>377 </div>378 379 <!-- Calendar content -->380 <div class="calendar-area">381 <!-- December -->382 <div class="month">383 <div class="month-title">December</div>384 <div class="grid">385 <div class="empty"></div><div class="empty"></div><div class="empty"></div><div class="empty"></div>386 <div class="day muted">1</div><div class="day muted">2</div><div class="day muted">3</div>387 <div class="day muted">4</div><div class="day muted">5</div><div class="day muted">6</div><div class="day muted">7</div><div class="day muted">8</div><div class="day muted">9</div><div class="day muted">10</div>388 <div class="day muted">11</div><div class="day muted">12</div><div class="day muted">13</div><div class="day muted">14</div><div class="day muted">15</div><div class="day muted">16</div><div class="day muted">17</div>389 <div class="day muted">18</div><div class="day muted">19</div><div class="day muted">20</div><div class="day muted">21</div><div class="day muted">22</div><div class="day muted">23</div><div class="day muted">24</div>390 <div class="day muted">25</div><div class="day muted">26</div><div class="day muted">27</div><div class="day muted">28</div><div class="day muted">29</div><div class="day muted">30</div><div class="day muted">31</div>391 </div>392 </div>393 394 <div class="separator"></div>395 396 <!-- January -->397 <div class="month">398 <div class="month-title">January 2024</div>399 <div class="grid" style="margin-top: 10px;">400 <!-- Selection overlay row -->401 <div class="selection"></div>402 <div class="start-circle"></div>403 <div class="end-circle"></div>404 405 <!-- Week 1 -->406 <div class="day">1</div><div class="day">2</div><div class="day">3</div><div class="day">4</div><div class="day">5</div><div class="day">6</div><div class="day">7</div>407 <!-- Week 2 -->408 <div class="day">8</div><div class="day">9</div><div class="day">10</div><div class="day">11</div><div class="day">12</div><div class="day">13</div><div class="day">14</div>409 <!-- Week 3 -->410 <div class="day">15</div><div class="day">16</div><div class="day">17</div><div class="day">18</div><div class="day">19</div><div class="day">20</div><div class="day">21</div>411 <!-- Week 4 -->412 <div class="day">22</div><div class="day">23</div><div class="day">24</div><div class="day">25</div><div class="day">26</div><div class="day">27</div><div class="day">28</div>413 <!-- Week 5 -->414 <div class="day">29</div><div class="day">30</div><div class="day">31</div><div class="empty"></div><div class="empty"></div><div class="empty"></div><div class="empty"></div>415 </div>416 </div>417 </div>418 419 <!-- Bottom action bar -->420 <div class="action-bar">421 <div class="nights">4 nights</div>422 <div class="btn outline">Reset</div>423 <div class="btn primary">Done</div>424 </div>425 426 <!-- System navigation bar -->427 <div class="nav-bar">428 <div class="home-pill"></div>429 </div>430 431</div>432</body>433</html>