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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #212121;16 }17 18 /* Status bar (OS) */19 .status-bar {20 height: 110px;21 background: #303030;22 color: #eaeaea;23 display: flex;24 align-items: center;25 padding: 0 28px;26 font-size: 38px;27 letter-spacing: 0.5px;28 }29 .status-bar .right {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 22px;34 font-size: 34px;35 }36 .battery {37 width: 48px; height: 24px; border: 3px solid #eaeaea; border-radius: 4px; position: relative;38 }39 .battery::after { /* cap */40 content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #eaeaea; border-radius: 2px;41 }42 .battery .level { position: absolute; left: 2px; top: 2px; bottom: 2px; right: 10px; background: #eaeaea; }43 44 /* App bar */45 .app-bar {46 height: 160px;47 background: #3a3a3a;48 color: #fff;49 display: flex;50 align-items: center;51 padding: 0 24px;52 box-sizing: border-box;53 }54 .app-left {55 display: flex; align-items: center; gap: 18px; margin-right: 20px;56 }57 .app-title {58 display: flex; flex-direction: column; justify-content: center;59 }60 .app-title .main { font-size: 44px; font-weight: 600; line-height: 1.1; }61 .app-title .sub { font-size: 28px; color: #cfcfcf; margin-top: 6px; }62 .app-right {63 margin-left: auto; display: flex; align-items: center; gap: 26px;64 }65 .icon-btn svg { width: 48px; height: 48px; fill: #eaeaea; }66 .icon-btn.more { transform: rotate(90deg); }67 68 /* Tabs */69 .tabs {70 height: 120px;71 background: #ffffff;72 display: flex;73 align-items: flex-end;74 padding: 0 40px;75 border-bottom: 1px solid #e6e6e6;76 }77 .tab {78 margin-right: 64px;79 font-size: 36px;80 color: #777;81 padding: 28px 6px 22px;82 position: relative;83 }84 .tab.active {85 color: #1a73e8;86 }87 .tab.active::after {88 content: ""; position: absolute; left: 0; right: 0; bottom: 0;89 height: 6px; background: #1a73e8; border-radius: 6px;90 }91 92 /* Controls for start/end date */93 .controls {94 background: #f6f7f9;95 border-bottom: 1px solid #e7e7e7;96 border-top: 1px solid #e7e7e7;97 padding: 20px 24px;98 display: flex; gap: 24px; align-items: center; justify-content: space-between;99 }100 .pill {101 background: #ffffff;102 border: 1px solid #e2e2e2;103 box-shadow: 0 1px 0 rgba(0,0,0,0.04);104 border-radius: 20px;105 height: 90px; min-width: 430px;106 padding: 0 20px;107 display: flex; align-items: center; justify-content: space-between;108 font-size: 36px; color: #4a4a4a;109 }110 .chev {111 width: 44px; height: 44px;112 }113 114 /* Weekday header */115 .weekdays {116 height: 90px;117 background: #f2f4f7;118 display: grid; grid-template-columns: repeat(7, 1fr);119 align-items: center; text-align: center;120 font-size: 30px; color: #818181;121 border-bottom: 1px solid #e7e7e7;122 }123 124 /* Calendar */125 .calendar {126 background: #fff;127 height: 1640px;128 overflow: hidden;129 padding-bottom: 10px;130 }131 .month {132 padding: 40px 48px 10px;133 }134 .month-title {135 font-size: 54px;136 font-weight: 500;137 color: #2b2b2b;138 text-align: center;139 margin: 10px 0 26px;140 }141 .grid {142 display: grid;143 grid-template-columns: repeat(7, 1fr);144 gap: 10px;145 padding: 0 8px;146 }147 .day {148 height: 120px;149 display: flex; align-items: center; justify-content: center;150 border-radius: 16px;151 font-size: 34px; color: #4b4b4b;152 }153 .day.muted { color: #c7c7c7; }154 .day.range { background: #e9f1ff; }155 .day.selected .circle {156 width: 94px; height: 94px; background: #1a73e8; color: #fff; border-radius: 50%;157 display: flex; align-items: center; justify-content: center; font-weight: 600;158 }159 .day.end .circle {160 width: 94px; height: 94px; border: 4px solid #1a73e8; color: #1a73e8; border-radius: 50%;161 display: flex; align-items: center; justify-content: center; font-weight: 600; background: #fff;162 }163 164 /* Bottom actions */165 .actions {166 position: absolute; left: 0; right: 0; bottom: 90px;167 height: 140px;168 background: #ffffff;169 border-top: 1px solid #e6e6e6;170 display: flex; align-items: center; justify-content: space-between;171 padding: 0 28px;172 }173 .actions .label { font-size: 40px; color: #333; font-weight: 600; }174 .btns { display: flex; gap: 18px; }175 .btn {176 height: 92px; min-width: 200px; border-radius: 46px; border: 1px solid #d9d9d9;177 font-size: 36px; padding: 0 36px; display: flex; align-items: center; justify-content: center; color: #1a73e8; background: #fff;178 box-shadow: 0 1px 0 rgba(0,0,0,0.04);179 }180 .btn.primary {181 background: #1a73e8; color: #fff; border-color: #1a73e8;182 }183 184 /* System gesture bar */185 .system-bar {186 position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: #2f2f2f;187 display: flex; align-items: center; justify-content: center;188 }189 .gesture-pill {190 width: 200px; height: 12px; background: #8e8e8e; border-radius: 8px;191 }192 193 /* Simple SVG icon defaults */194 svg { display: block; }195</style>196</head>197<body>198<div id="render-target">199 200 <!-- Android status bar -->201 <div class="status-bar">202 <div>2:05</div>203 <div class="right">204 <div>◦</div>205 <div>◦</div>206 <div>◦</div>207 <div style="display:flex;align-items:center;gap:8px;">208 <span>100%</span>209 <div class="battery"><div class="level"></div></div>210 </div>211 </div>212 </div>213 214 <!-- App bar -->215 <div class="app-bar">216 <div class="app-left">217 <!-- Close icon (X) -->218 <div class="icon-btn">219 <svg viewBox="0 0 24 24">220 <path fill="#eaeaea" d="M6 6l12 12M18 6L6 18" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>221 </svg>222 </div>223 <!-- Lock -->224 <div class="icon-btn">225 <svg viewBox="0 0 24 24">226 <path d="M6 10V7a6 6 0 0112 0v3" fill="none" stroke="#eaeaea" stroke-width="2"/>227 <rect x="4" y="10" width="16" height="10" rx="2" fill="none" stroke="#eaeaea" stroke-width="2"/>228 </svg>229 </div>230 <div class="app-title">231 <div class="main">Change search criteria</div>232 <div class="sub">google.com</div>233 </div>234 </div>235 <div class="app-right">236 <!-- Share -->237 <div class="icon-btn">238 <svg viewBox="0 0 24 24">239 <path d="M16 7a3 3 0 100-6 3 3 0 000 6zM6 14a3 3 0 100-6 3 3 0 000 6zM18 23a3 3 0 100-6 3 3 0 000 6z" fill="#eaeaea"/>240 <path d="M8 10l6-3M8 12l6 4" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>241 </svg>242 </div>243 <!-- Bookmark -->244 <div class="icon-btn">245 <svg viewBox="0 0 24 24">246 <path d="M6 3h12v18l-6-4-6 4V3z" fill="#eaeaea"/>247 </svg>248 </div>249 <!-- More (vertical dots) -->250 <div class="icon-btn">251 <svg viewBox="0 0 24 24">252 <circle cx="12" cy="5" r="2" fill="#eaeaea"/>253 <circle cx="12" cy="12" r="2" fill="#eaeaea"/>254 <circle cx="12" cy="19" r="2" fill="#eaeaea"/>255 </svg>256 </div>257 </div>258 </div>259 260 <!-- Tabs -->261 <div class="tabs">262 <div class="tab">Search</div>263 <div class="tab active">Dates</div>264 <div class="tab">Guests</div>265 </div>266 267 <!-- Controls -->268 <div class="controls">269 <div class="pill">270 <svg class="chev" viewBox="0 0 24 24">271 <path d="M15 18l-6-6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>272 </svg>273 <div>Sat, 30 Dec</div>274 <svg class="chev" viewBox="0 0 24 24">275 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>276 </svg>277 </div>278 <div class="pill">279 <svg class="chev" viewBox="0 0 24 24">280 <path d="M15 18l-6-6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>281 </svg>282 <div>Sun, 31 Dec</div>283 <svg class="chev" viewBox="0 0 24 24">284 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>285 </svg>286 </div>287 </div>288 289 <!-- Weekday header -->290 <div class="weekdays">291 <div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div><div>S</div>292 </div>293 294 <!-- Calendar content -->295 <div class="calendar">296 <!-- December -->297 <div class="month">298 <div class="month-title">December</div>299 <div class="grid">300 <div class="day muted"></div>301 <div class="day muted"></div>302 <div class="day muted"></div>303 <div class="day muted"></div>304 <div class="day"><span>1</span></div>305 <div class="day"><span>2</span></div>306 <div class="day"><span>3</span></div>307 308 <div class="day"><span>4</span></div>309 <div class="day"><span>5</span></div>310 <div class="day"><span>6</span></div>311 <div class="day"><span>7</span></div>312 <div class="day"><span>8</span></div>313 <div class="day"><span>9</span></div>314 <div class="day"><span>10</span></div>315 316 <div class="day"><span>11</span></div>317 <div class="day"><span>12</span></div>318 <div class="day"><span>13</span></div>319 <div class="day"><span>14</span></div>320 <div class="day"><span>15</span></div>321 <div class="day"><span>16</span></div>322 <div class="day"><span>17</span></div>323 324 <div class="day muted"><span>18</span></div>325 <div class="day"><span>19</span></div>326 <div class="day"><span>20</span></div>327 <div class="day"><span>21</span></div>328 <div class="day"><span>22</span></div>329 <div class="day"><span>23</span></div>330 <div class="day"><span>24</span></div>331 332 <div class="day"><span>25</span></div>333 <div class="day"><span>26</span></div>334 <div class="day"><span>27</span></div>335 <div class="day"><span>28</span></div>336 <div class="day"><span>29</span></div>337 <!-- 30-31 selection -->338 <div class="day range selected"><div class="circle">30</div></div>339 <div class="day range end"><div class="circle">31</div></div>340 </div>341 </div>342 343 <!-- January -->344 <div class="month">345 <div class="month-title">January 2024</div>346 <div class="grid">347 <div class="day"><span>1</span></div>348 <div class="day"><span>2</span></div>349 <div class="day"><span>3</span></div>350 <div class="day"><span>4</span></div>351 <div class="day"><span>5</span></div>352 <div class="day"><span>6</span></div>353 <div class="day"><span>7</span></div>354 355 <div class="day"><span>8</span></div>356 <div class="day"><span>9</span></div>357 <div class="day"><span>10</span></div>358 <div class="day"><span>11</span></div>359 <div class="day"><span>12</span></div>360 <div class="day"><span>13</span></div>361 <div class="day"><span>14</span></div>362 363 <div class="day"><span>15</span></div>364 <div class="day"><span>16</span></div>365 <div class="day"><span>17</span></div>366 <div class="day"><span>18</span></div>367 <div class="day"><span>19</span></div>368 <div class="day"><span>20</span></div>369 <div class="day"><span>21</span></div>370 371 <div class="day"><span>22</span></div>372 <div class="day"><span>23</span></div>373 <div class="day"><span>24</span></div>374 <div class="day"><span>25</span></div>375 <div class="day"><span>26</span></div>376 <div class="day"><span>27</span></div>377 <div class="day"><span>28</span></div>378 </div>379 </div>380 </div>381 382 <!-- Bottom actions -->383 <div class="actions">384 <div class="label">1 night</div>385 <div class="btns">386 <div class="btn">Reset</div>387 <div class="btn primary">Done</div>388 </div>389 </div>390 391 <!-- System gesture area -->392 <div class="system-bar">393 <div class="gesture-pill"></div>394 </div>395</div>396</body>397</html>