GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Enter your dates</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #000000;13 color: #ffffff;14 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;15 }16 17 /* Top status bar */18 .status {19 position: absolute;20 top: 0;21 left: 0;22 right: 0;23 height: 120px;24 padding: 0 40px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #eaeaea;29 font-size: 36px;30 letter-spacing: 0.5px;31 }32 .status .icons {33 display: flex;34 align-items: center;35 gap: 22px;36 }37 .dot { width: 12px; height: 12px; border-radius: 50%; background: #dcdcdc; opacity: .85; display: inline-block; }38 .battery {39 width: 56px; height: 28px; border: 3px solid #eaeaea; border-radius: 6px; position: relative;40 }41 .battery:after {42 content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 16px; background: #eaeaea; border-radius: 2px;43 }44 .battery .level { position: absolute; left: 4px; top: 4px; bottom: 4px; right: 14px; background: #eaeaea; }45 46 /* Modal/panel */47 .panel {48 position: absolute;49 left: 30px;50 right: 30px;51 top: 140px;52 bottom: 120px;53 background: #151515;54 border-radius: 34px;55 box-shadow: 0 30px 80px rgba(0,0,0,0.45);56 overflow: hidden;57 }58 .panel-inner {59 position: absolute;60 inset: 0;61 padding: 48px 36px 0 36px;62 overflow-y: auto;63 }64 65 .top-row {66 position: relative;67 padding: 6px 0 22px 0;68 text-align: center;69 }70 .back {71 position: absolute;72 left: 0;73 top: 0;74 width: 86px; height: 86px;75 display: flex; align-items: center; justify-content: center;76 }77 .back svg { width: 40px; height: 40px; fill: none; stroke: #ffffff; stroke-width: 6; }78 79 .title {80 font-size: 56px;81 font-weight: 700;82 color: #f5f5f5;83 }84 85 .month-block {86 background: #202020;87 border-radius: 26px;88 padding: 28px 26px 36px 26px;89 margin-bottom: 24px;90 }91 .month-title {92 text-align: center;93 color: #d9d9d9;94 font-weight: 700;95 font-size: 38px;96 margin: 6px 0 26px 0;97 letter-spacing: .3px;98 }99 .weekdays, .days {100 display: grid;101 grid-template-columns: repeat(7, 1fr);102 column-gap: 18px;103 row-gap: 18px;104 }105 .weekdays div {106 color: #9e9ea4;107 font-size: 26px;108 text-align: center;109 }110 .day {111 height: 112px;112 border-radius: 56px;113 display: flex;114 align-items: center;115 justify-content: center;116 font-size: 34px;117 color: #e1e1e1;118 }119 .muted { color: #6f7076; }120 .selected-outline {121 border: 4px solid #e25b98;122 color: #ffffff;123 }124 125 /* Range styling */126 .in-range { background: #352633; color: #ffffff; border-radius: 28px; }127 .range-start {128 background: #e25b98; color:#fff; border-radius: 56px;129 }130 .range-mid { background: #352633; color:#fff; border-radius: 28px; }131 .range-end {132 background: #e25b98; color:#fff; border-radius: 56px;133 }134 135 /* Bottom action area */136 .actions {137 position: sticky;138 bottom: 0;139 background: #1b1b1b;140 border-top: 1px solid #2a2a2a;141 margin-top: 24px;142 padding: 28px 26px 34px 26px;143 border-bottom-left-radius: 34px;144 border-bottom-right-radius: 34px;145 }146 .summary {147 display: grid;148 grid-template-columns: 1fr 1fr 1fr auto;149 align-items: center;150 column-gap: 20px;151 }152 .summary .item-title {153 color: #a9a9aa;154 font-size: 26px;155 margin-bottom: 4px;156 }157 .summary .item-value {158 color: #ffffff;159 font-weight: 700;160 font-size: 36px;161 }162 .cancel-link {163 margin-top: 22px;164 color: #d7d7d8;165 font-size: 32px;166 }167 .apply-btn {168 background: #ec5aa0;169 color: #fff;170 font-weight: 800;171 letter-spacing: .5px;172 padding: 26px 44px;173 border-radius: 20px;174 font-size: 36px;175 border: none;176 }177 178 /* Home indicator */179 .home-indicator {180 position: absolute;181 left: 50%;182 transform: translateX(-50%);183 bottom: 24px;184 width: 360px;185 height: 10px;186 background: #e7e7e7;187 border-radius: 8px;188 opacity: .95;189 }190</style>191</head>192<body>193<div id="render-target">194 195 <!-- Status bar -->196 <div class="status">197 <div class="time">3:40</div>198 <div class="icons">199 <span class="dot"></span>200 <span class="dot"></span>201 <span class="dot"></span>202 <div class="battery"><div class="level"></div></div>203 <div style="font-size:26px; opacity:.9;">97%</div>204 </div>205 </div>206 207 <!-- Calendar panel -->208 <div class="panel">209 <div class="panel-inner">210 211 <div class="top-row">212 <div class="back">213 <svg viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7"/></svg>214 </div>215 <div class="title">Enter your dates</div>216 </div>217 218 <!-- October 2023 -->219 <div class="month-block">220 <div class="weekdays">221 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>222 </div>223 224 <div class="month-title">October 2023</div>225 226 <div class="days">227 <!-- Week 1 -->228 <div class="day">1</div>229 <div class="day">2</div>230 <div class="day">3</div>231 <div class="day">4</div>232 <div class="day">5</div>233 <div class="day">6</div>234 <div class="day">7</div>235 <!-- Week 2 -->236 <div class="day">8</div>237 <div class="day">9</div>238 <div class="day">10</div>239 <div class="day">11</div>240 <div class="day">12</div>241 <div class="day">13</div>242 <div class="day">14</div>243 <!-- Week 3 -->244 <div class="day">15</div>245 <div class="day">16</div>246 <div class="day">17</div>247 <div class="day">18</div>248 <div class="day">19</div>249 <div class="day">20</div>250 <div class="day">21</div>251 <!-- Week 4 -->252 <div class="day">22</div>253 <div class="day">23</div>254 <div class="day">24</div>255 <div class="day">25</div>256 <div class="day">26</div>257 <div class="day selected-outline">27</div>258 <div class="day">28</div>259 <!-- Week 5 -->260 <div class="day">29</div>261 <div class="day">30</div>262 <div class="day">31</div>263 <div class="day muted"></div>264 <div class="day muted"></div>265 <div class="day muted"></div>266 <div class="day muted"></div>267 </div>268 </div>269 270 <!-- November 2023 -->271 <div class="month-block">272 <div class="month-title">November 2023</div>273 274 <div class="days">275 <!-- First row (Nov 1 starts on Wed) -->276 <div class="day muted"></div>277 <div class="day muted"></div>278 <div class="day range-start">1</div>279 <div class="day range-mid">2</div>280 <div class="day range-mid">3</div>281 <div class="day range-end">4</div>282 <div class="day">5</div>283 <!-- Row 2 -->284 <div class="day">6</div>285 <div class="day">7</div>286 <div class="day">8</div>287 <div class="day">9</div>288 <div class="day">10</div>289 <div class="day">11</div>290 <div class="day">12</div>291 <!-- Row 3 -->292 <div class="day">13</div>293 <div class="day">14</div>294 <div class="day">15</div>295 <div class="day">16</div>296 <div class="day">17</div>297 <div class="day">18</div>298 <div class="day">19</div>299 <!-- Row 4 -->300 <div class="day">20</div>301 <div class="day">21</div>302 <div class="day">22</div>303 <div class="day">23</div>304 <div class="day">24</div>305 <div class="day">25</div>306 <div class="day">26</div>307 <!-- Row 5 -->308 <div class="day">27</div>309 <div class="day">28</div>310 <div class="day">29</div>311 <div class="day">30</div>312 <div class="day muted"></div>313 <div class="day muted"></div>314 <div class="day muted"></div>315 </div>316 317 <!-- Action area inside same block -->318 <div class="actions">319 <div class="summary">320 <div>321 <div class="item-title">Check-in</div>322 <div class="item-value">01 Nov</div>323 </div>324 <div>325 <div class="item-title">Check-out</div>326 <div class="item-value">04 Nov</div>327 </div>328 <div>329 <div class="item-title">Nights</div>330 <div class="item-value">3</div>331 </div>332 <div style="text-align:right;">333 <button class="apply-btn">Apply</button>334 </div>335 </div>336 <div class="cancel-link">Cancel dates</div>337 </div>338 </div>339 340 </div>341 </div>342 343 <div class="home-indicator"></div>344</div>345</body>346</html>