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>Select Dates UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #0b2540; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top status bar */18 .status-bar {19 height: 120px;20 background: #c7cdd6;21 display: flex;22 align-items: center;23 padding: 0 40px;24 color: #ffffff;25 font-size: 40px;26 justify-content: space-between;27 letter-spacing: 0.5px;28 }29 30 /* Header */31 .header {32 height: 160px;33 display: flex;34 align-items: center;35 padding: 0 40px;36 border-bottom: 1px solid #edf1f7;37 }38 .header-title {39 font-size: 60px;40 font-weight: 700;41 color: #102a43;42 margin-left: 24px;43 }44 .icon-btn {45 width: 72px; height: 72px; display: inline-flex; justify-content: center; align-items: center; cursor: default;46 }47 .icon {48 width: 48px; height: 48px;49 stroke: #102a43; stroke-width: 6; stroke-linecap: round;50 }51 52 /* Weekday row */53 .weekdays {54 display: grid;55 grid-template-columns: repeat(7, 1fr);56 padding: 24px 40px 28px;57 font-size: 36px;58 color: #64748b;59 border-bottom: 1px solid #edf1f7;60 }61 .weekdays .sun, .weekdays .sat { color: #3e66ff; }62 63 /* Month sections */64 .month {65 padding: 30px 32px 10px;66 }67 .month-title {68 text-align: center;69 font-size: 56px;70 font-weight: 700;71 color: #102a43;72 margin: 18px 0 20px;73 }74 75 /* Calendar grid */76 .calendar-grid {77 display: grid;78 grid-template-columns: repeat(7, 1fr);79 gap: 8px;80 padding: 0 8px;81 }82 .day {83 height: 110px;84 position: relative;85 display: flex;86 align-items: center;87 justify-content: center;88 color: #1f3b57;89 font-size: 44px;90 font-weight: 600;91 }92 .day.disabled { opacity: 0.28; font-weight: 600; }93 .day.sun { color: #3e66ff; }94 .day .dot {95 position: absolute;96 width: 10px; height: 10px; border-radius: 50%;97 background: #ff8a00;98 bottom: 18px; left: 50%; transform: translateX(-50%);99 }100 101 /* Selection styling */102 .day-inner {103 width: 96px; height: 96px;104 border-radius: 24px;105 display: flex; align-items: center; justify-content: center;106 }107 .selected.start .day-inner,108 .selected.end .day-inner {109 background: #3e66ff;110 color: #ffffff;111 }112 .range {113 background: #e9efff;114 border-radius: 18px;115 }116 .today { font-weight: 900; }117 118 /* Legend / divider */119 .legend {120 display: flex;121 align-items: center;122 gap: 16px;123 color: #153e75;124 font-size: 40px;125 padding: 26px 40px;126 }127 .legend .bullet {128 width: 14px; height: 14px; background: #ff8a00; border-radius: 50%;129 }130 .divider { height: 1px; background: #e9edf3; margin: 8px 32px 0; }131 132 /* Bottom summary */133 .summary {134 border-top: 1px solid #e9edf3;135 padding: 26px 40px 0;136 }137 .summary-row {138 display: grid;139 grid-template-columns: 1fr 1fr;140 align-items: baseline;141 gap: 20px;142 }143 .label {144 font-size: 34px; color: #8c9aa8; font-weight: 600;145 }146 .value-left {147 font-size: 64px; font-weight: 800; color: #3e66ff; margin: 8px 0 26px;148 }149 .value-right {150 font-size: 64px; font-weight: 800; color: #102a43; text-align: right; margin: 8px 0 26px;151 }152 153 .btn-wrap { padding: 12px 32px 18px; }154 .primary-btn {155 height: 120px; background: #3e66ff; color: #ffffff; font-size: 52px; font-weight: 800;156 border-radius: 22px; display: flex; align-items: center; justify-content: center;157 }158 159 /* Bottom gesture area */160 .gesture {161 position: absolute;162 bottom: 0; left: 0; right: 0;163 height: 110px; background: #000000;164 display: flex; align-items: center; justify-content: center;165 }166 .gesture .pill {167 width: 220px; height: 10px; border-radius: 8px; background: #dddddd;168 }169</style>170</head>171<body>172<div id="render-target">173 <!-- Top status -->174 <div class="status-bar">175 <div>8:16</div>176 <div>100%</div>177 </div>178 179 <!-- Header -->180 <div class="header">181 <div class="icon-btn" aria-label="Close">182 <svg class="icon" viewBox="0 0 24 24" fill="none">183 <path d="M4 4 L20 20 M20 4 L4 20"></path>184 </svg>185 </div>186 <div class="header-title">Select Dates</div>187 </div>188 189 <!-- Weekdays -->190 <div class="weekdays">191 <div class="sun">Sun</div>192 <div>Mon</div>193 <div>Tue</div>194 <div>Wed</div>195 <div>Thu</div>196 <div>Fri</div>197 <div class="sat">Sat</div>198 </div>199 200 <!-- October -->201 <div class="month">202 <div class="month-title">Oct 2023</div>203 204 <div class="calendar-grid">205 <!-- Row 1: Oct starts on Sun -->206 <div class="day sun disabled"><div class="day-inner">1</div></div>207 <div class="day disabled"><div class="day-inner">2</div></div>208 <div class="day disabled"><div class="day-inner">3</div></div>209 <div class="day disabled"><div class="day-inner">4</div></div>210 <div class="day disabled"><div class="day-inner">5</div></div>211 <div class="day disabled"><div class="day-inner">6</div></div>212 <div class="day sat disabled"><div class="day-inner">7</div></div>213 214 <!-- Row 2 -->215 <div class="day sun"><div class="day-inner">8</div></div>216 <div class="day">217 <div class="day-inner">9</div>218 <span class="dot"></span>219 </div>220 <div class="day"><div class="day-inner">10</div></div>221 <div class="day"><div class="day-inner">11</div></div>222 <div class="day"><div class="day-inner">12</div></div>223 <div class="day"><div class="day-inner">13</div></div>224 <div class="day sat"><div class="day-inner">14</div></div>225 226 <!-- Row 3 -->227 <div class="day sun"><div class="day-inner">15</div></div>228 <div class="day" style="opacity:0.35;"><div class="day-inner">16</div></div>229 <div class="day" style="opacity:0.35;"><div class="day-inner">17</div></div>230 <div class="day today"><div class="day-inner">18</div></div>231 <div class="day selected start"><div class="day-inner">19</div></div>232 <div class="day range"><div class="day-inner">20</div></div>233 <div class="day selected end sat"><div class="day-inner">21</div></div>234 235 <!-- Row 4 -->236 <div class="day sun" style="color:#3e66ff;"><div class="day-inner">22</div></div>237 <div class="day"><div class="day-inner">23</div></div>238 <div class="day"><div class="day-inner">24</div></div>239 <div class="day"><div class="day-inner">25</div></div>240 <div class="day"><div class="day-inner">26</div></div>241 <div class="day"><div class="day-inner">27</div></div>242 <div class="day sat"><div class="day-inner">28</div></div>243 244 <!-- Row 5 -->245 <div class="day sun" style="color:#3e66ff;"><div class="day-inner">29</div></div>246 <div class="day"><div class="day-inner">30</div></div>247 <div class="day"><div class="day-inner">31</div></div>248 <div class="day"></div>249 <div class="day"></div>250 <div class="day"></div>251 <div class="day"></div>252 </div>253 254 <div class="legend">255 <span class="bullet"></span>256 <span>Oct 9 Columbus Day</span>257 </div>258 <div class="divider"></div>259 </div>260 261 <!-- November -->262 <div class="month">263 <div class="month-title">Nov 2023</div>264 265 <div class="calendar-grid">266 <!-- Nov 1 starts on Wed -->267 <div class="day sun"></div>268 <div class="day"></div>269 <div class="day"></div>270 <div class="day"><div class="day-inner">1</div></div>271 <div class="day"><div class="day-inner">2</div></div>272 <div class="day"><div class="day-inner">3</div></div>273 <div class="day sat"><div class="day-inner">4</div></div>274 275 <div class="day sun" style="color:#6f8cff;"><div class="day-inner">5</div></div>276 <div class="day"><div class="day-inner">6</div></div>277 <div class="day"><div class="day-inner">7</div></div>278 <div class="day"><div class="day-inner">8</div></div>279 <div class="day"><div class="day-inner">9</div></div>280 <div class="day">281 <div class="day-inner">10</div>282 <span class="dot"></span>283 </div>284 <div class="day sat" style="position:relative;">285 <div class="day-inner">11</div>286 <span class="dot"></span>287 </div>288 289 <div class="day sun" style="color:#6f8cff;"><div class="day-inner">12</div></div>290 <div class="day"><div class="day-inner">13</div></div>291 <div class="day"><div class="day-inner">14</div></div>292 <div class="day"><div class="day-inner">15</div></div>293 <div class="day"><div class="day-inner">16</div></div>294 <div class="day"><div class="day-inner">17</div></div>295 <div class="day sat"><div class="day-inner">18</div></div>296 297 <div class="day sun" style="color:#6f8cff;"><div class="day-inner">19</div></div>298 <div class="day"><div class="day-inner">20</div></div>299 <div class="day"><div class="day-inner">21</div></div>300 <div class="day"><div class="day-inner">22</div></div>301 <div class="day"><div class="day-inner">23</div></div>302 <div class="day">303 <div class="day-inner">24</div>304 <span class="dot"></span>305 </div>306 <div class="day sat"><div class="day-inner">25</div></div>307 308 <div class="day sun" style="color:#6f8cff;"><div class="day-inner">26</div></div>309 <div class="day"><div class="day-inner">27</div></div>310 <div class="day"><div class="day-inner">28</div></div>311 <div class="day"><div class="day-inner">29</div></div>312 <div class="day"><div class="day-inner">30</div></div>313 <div class="day"></div>314 <div class="day"></div>315 </div>316 </div>317 318 <!-- Bottom summary and action -->319 <div class="summary">320 <div class="summary-row">321 <div class="label">Local time</div>322 <div class="label" style="text-align:right;">Local time</div>323 </div>324 <div class="summary-row">325 <div class="value-left">Thu, Oct 19</div>326 <div class="value-right">Sat, Oct 21</div>327 </div>328 <div class="btn-wrap">329 <div class="primary-btn">Done</div>330 </div>331 </div>332 333 <!-- Gesture bar -->334 <div class="gesture">335 <div class="pill"></div>336 </div>337</div>338</body>339</html>