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; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14 color: #222;15 }16 17 /* Status bar (mock) */18 .status-bar {19 height: 120px;20 background: #000;21 }22 23 /* App bar */24 .app-bar {25 height: 200px;26 background: #fff;27 box-shadow: 0 2px 0 rgba(0,0,0,0.06);28 display: flex;29 align-items: center;30 padding: 0 40px;31 gap: 24px;32 }33 .app-bar .title {34 font-size: 46px;35 font-weight: 600;36 }37 .icon-btn {38 width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;39 border-radius: 32px; color: #222;40 }41 .icon-btn svg { width: 40px; height: 40px; }42 43 /* Check-in/out summary */44 .summary {45 display: grid;46 grid-template-columns: 1fr 120px 1fr;47 align-items: center;48 padding: 34px 56px 24px 56px;49 gap: 12px;50 background: #fff;51 }52 .summary .col {53 display: flex;54 flex-direction: column;55 }56 .label {57 font-size: 34px;58 color: #7a7a7a;59 margin-bottom: 6px;60 }61 .date {62 font-size: 56px;63 font-weight: 700;64 color: #2c2c2c;65 }66 .arrow {67 display: flex; align-items: center; justify-content: center;68 }69 .arrow svg { width: 44px; height: 44px; color: #777; }70 71 /* Calendar */72 .calendar {73 padding: 10px 28px 0 28px;74 }75 .month {76 text-align: center;77 font-size: 40px;78 color: #6f6f6f;79 margin: 24px 0 8px 0;80 }81 .weekdays {82 display: grid; grid-template-columns: repeat(7, 1fr);83 padding: 0 12px;84 }85 .weekdays div {86 text-align: center; color: #8f8f8f; font-size: 30px; padding: 18px 0;87 }88 89 .week {90 display: grid;91 grid-template-columns: repeat(7, 1fr);92 position: relative;93 padding: 6px 12px;94 border-top: 1px solid #eee;95 min-height: 130px;96 }97 .day {98 display: flex; align-items: center; justify-content: center;99 height: 120px;100 }101 .day .num {102 color: #a9a9a9; font-size: 36px;103 width: 96px; height: 96px; border-radius: 48px;104 display: inline-flex; align-items: center; justify-content: center;105 }106 .day .num.dim { color: #d2d2d2; }107 .range {108 grid-column: 3 / 5; /* between 17 and 18 */109 align-self: center;110 height: 74px;111 background: #e4edff;112 border-radius: 40px;113 z-index: 0;114 }115 .selected {116 background: #4177ff; color: #fff !important;117 }118 119 /* Bottom button */120 .bottom-cta {121 position: absolute; left: 40px; right: 40px; bottom: 160px;122 height: 120px; background: #3d6ef7; color: #fff;123 border-radius: 60px; display: flex; align-items: center; justify-content: center;124 font-size: 42px; font-weight: 600;125 box-shadow: 0 6px 18px rgba(61,110,247,0.35);126 }127 128 /* Gesture area (mock) */129 .gesture-bar {130 position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: #000;131 }132 .gesture-pill {133 position: absolute; left: 50%; transform: translateX(-50%);134 bottom: 40px; width: 240px; height: 12px; background: #bdbdbd; border-radius: 8px;135 opacity: 0.9;136 }137</style>138</head>139<body>140<div id="render-target">141 <div class="status-bar"></div>142 143 <div class="app-bar">144 <div class="icon-btn" aria-label="Close">145 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">146 <path d="M5 5 L19 19"></path>147 <path d="M19 5 L5 19"></path>148 </svg>149 </div>150 <div class="title">Calendar</div>151 </div>152 153 <div class="summary">154 <div class="col">155 <div class="label">Check-in</div>156 <div class="date">Tue, Oct 17</div>157 </div>158 <div class="arrow">159 <svg viewBox="0 0 24 24" fill="currentColor">160 <path d="M8 4 L16 12 L8 20"></path>161 </svg>162 </div>163 <div class="col" style="align-items: flex-end;">164 <div class="label">Check-out</div>165 <div class="date">Wed, Oct 18</div>166 </div>167 </div>168 169 <div class="calendar">170 <!-- October -->171 <div class="month">October 2023</div>172 <div class="weekdays">173 <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>174 </div>175 176 <div class="week" style="border-top:none;">177 <div class="day"><span class="num dim">1</span></div>178 <div class="day"><span class="num dim">2</span></div>179 <div class="day"><span class="num dim">3</span></div>180 <div class="day"><span class="num dim">4</span></div>181 <div class="day"><span class="num dim">5</span></div>182 <div class="day"><span class="num dim">6</span></div>183 <div class="day"><span class="num dim">7</span></div>184 </div>185 186 <div class="week">187 <div class="day"><span class="num">8</span></div>188 <div class="day"><span class="num">9</span></div>189 <div class="day"><span class="num">10</span></div>190 <div class="day"><span class="num">11</span></div>191 <div class="day"><span class="num">12</span></div>192 <div class="day"><span class="num">13</span></div>193 <div class="day"><span class="num">14</span></div>194 </div>195 196 <div class="week">197 <div class="range"></div>198 <div class="day"><span class="num">15</span></div>199 <div class="day"><span class="num">16</span></div>200 <div class="day"><span class="num selected">17</span></div>201 <div class="day"><span class="num selected">18</span></div>202 <div class="day"><span class="num">19</span></div>203 <div class="day"><span class="num">20</span></div>204 <div class="day"><span class="num">21</span></div>205 </div>206 207 <div class="week">208 <div class="day"><span class="num">22</span></div>209 <div class="day"><span class="num">23</span></div>210 <div class="day"><span class="num">24</span></div>211 <div class="day"><span class="num">25</span></div>212 <div class="day"><span class="num">26</span></div>213 <div class="day"><span class="num">27</span></div>214 <div class="day"><span class="num">28</span></div>215 </div>216 217 <div class="week" style="border-bottom: 1px solid #eee;">218 <div class="day"><span class="num">29</span></div>219 <div class="day"><span class="num">30</span></div>220 <div class="day"><span class="num">31</span></div>221 <div class="day"><span class="num" style="opacity:0;"></span></div>222 <div class="day"><span class="num" style="opacity:0;"></span></div>223 <div class="day"><span class="num" style="opacity:0;"></span></div>224 <div class="day"><span class="num" style="opacity:0;"></span></div>225 </div>226 227 <!-- November -->228 <div class="month" style="margin-top: 28px;">November 2023</div>229 <div class="weekdays">230 <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>231 </div>232 233 <div class="week" style="border-top:none;">234 <div class="day"><span class="num">1</span></div>235 <div class="day"><span class="num">2</span></div>236 <div class="day"><span class="num">3</span></div>237 <div class="day"><span class="num">4</span></div>238 <div class="day"><span class="num" style="opacity:0;"></span></div>239 <div class="day"><span class="num" style="opacity:0;"></span></div>240 <div class="day"><span class="num" style="opacity:0;"></span></div>241 </div>242 243 <div class="week">244 <div class="day"><span class="num">5</span></div>245 <div class="day"><span class="num">6</span></div>246 <div class="day"><span class="num">7</span></div>247 <div class="day"><span class="num">8</span></div>248 <div class="day"><span class="num">9</span></div>249 <div class="day"><span class="num">10</span></div>250 <div class="day"><span class="num">11</span></div>251 </div>252 253 <div class="week">254 <div class="day"><span class="num">12</span></div>255 <div class="day"><span class="num">13</span></div>256 <div class="day"><span class="num">14</span></div>257 <div class="day"><span class="num">15</span></div>258 <div class="day"><span class="num">16</span></div>259 <div class="day"><span class="num">17</span></div>260 <div class="day"><span class="num">18</span></div>261 </div>262 263 <div class="week">264 <div class="day"><span class="num">19</span></div>265 <div class="day"><span class="num">20</span></div>266 <div class="day"><span class="num">21</span></div>267 <div class="day"><span class="num">22</span></div>268 <div class="day"><span class="num">23</span></div>269 <div class="day"><span class="num">24</span></div>270 <div class="day"><span class="num">25</span></div>271 </div>272 </div>273 274 <div class="bottom-cta">OK (1 Night)</div>275 276 <div class="gesture-bar">277 <div class="gesture-pill"></div>278 </div>279</div>280</body>281</html>