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>Date Picker UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: Arial, Helvetica, sans-serif;16 color: #0E2A55;17 }18 19 /* Top status bar (subtle) */20 .status-bar {21 height: 96px;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #6F7B94;27 font-size: 30px;28 }29 .status-right {30 display: flex;31 gap: 18px;32 align-items: center;33 }34 .status-dot {35 width: 22px; height: 22px; border-radius: 50%; background: #6F7B94;36 display: inline-block;37 }38 39 /* Header */40 .header {41 padding: 24px 48px 16px 48px;42 display: flex;43 align-items: center;44 gap: 24px;45 }46 .header h1 {47 margin: 0;48 font-size: 64px;49 font-weight: 800;50 color: #0C1F44;51 letter-spacing: 0.2px;52 }53 .icon-close {54 width: 48px; height: 48px;55 }56 .icon-close svg { width: 48px; height: 48px; }57 .icon-close path { stroke: #26365E; stroke-width: 6; stroke-linecap: round; }58 59 /* Date input row */60 .date-row {61 padding: 10px 48px 8px 48px;62 display: flex;63 gap: 24px;64 }65 .input-pill {66 flex: 1;67 height: 118px;68 border: 2px solid #CBD3E6;69 border-radius: 24px;70 padding: 0 32px;71 display: flex;72 align-items: center;73 font-size: 36px;74 color: #243A6A;75 box-sizing: border-box;76 }77 .input-pill.secondary {78 background: #F1F3F8;79 border-color: #E3E6EF;80 color: #A3ADC7;81 }82 83 /* Weekday row */84 .weekday-row {85 padding: 6px 48px 24px 48px;86 display: grid;87 grid-template-columns: repeat(7, 1fr);88 color: #A5AEC7;89 font-size: 30px;90 letter-spacing: 4px;91 text-align: center;92 }93 94 /* Section bar */95 .section-bar {96 background: #EEF2F6;97 height: 80px;98 display: flex;99 align-items: center;100 padding: 0 48px;101 color: #A5AEC7;102 font-weight: 700;103 font-size: 28px;104 letter-spacing: 1px;105 text-transform: uppercase;106 }107 108 /* Calendar grid */109 .calendar {110 padding: 24px 48px 40px 48px;111 }112 .grid {113 display: grid;114 grid-template-columns: repeat(7, 1fr);115 gap: 18px 18px;116 }117 .day {118 height: 128px;119 border-radius: 16px;120 display: flex;121 align-items: center;122 justify-content: center;123 color: #2E3F70;124 font-size: 36px;125 font-weight: 600;126 }127 .day.muted { color: #D2D7E6; }128 .day.selected {129 position: relative;130 color: #ffffff;131 font-weight: 700;132 }133 .day.selected::before {134 content: "";135 position: absolute;136 width: 124px;137 height: 124px;138 border-radius: 50%;139 background: #5F87C6;140 box-shadow: 0 6px 10px rgba(95,135,198,0.25);141 z-index: 0;142 }143 .day.selected span {144 position: relative;145 z-index: 1;146 }147 148 /* Bottom confirm bar */149 .bottom-sheet {150 position: absolute;151 left: 0;152 right: 0;153 bottom: 120px; /* sit above nav bar */154 height: 220px;155 background: #FFFFFF;156 box-shadow: 0 -6px 12px rgba(0,0,0,0.06);157 display: flex;158 align-items: center;159 justify-content: center;160 padding: 0 24px;161 }162 .confirm-btn {163 width: 100%;164 max-width: 1032px;165 height: 140px;166 background: #FF6F6A;167 border-radius: 32px;168 color: #FFFFFF;169 font-size: 44px;170 font-weight: 800;171 display: flex;172 align-items: center;173 justify-content: center;174 letter-spacing: 0.5px;175 }176 177 /* Bottom navigation bar */178 .nav-bar {179 position: absolute;180 left: 0; right: 0; bottom: 0;181 height: 120px;182 background: #0B1E45;183 display: flex;184 align-items: center;185 justify-content: center;186 }187 .home-indicator {188 width: 240px; height: 12px; border-radius: 6px; background: #D8DCE8;189 opacity: 0.85;190 }191</style>192</head>193<body>194<div id="render-target">195 196 <!-- Status Bar -->197 <div class="status-bar">198 <div>5:59</div>199 <div class="status-right">200 <span>28°</span>201 <div class="status-dot"></div>202 <div class="status-dot" style="background:#94A0BB;"></div>203 </div>204 </div>205 206 <!-- Header -->207 <div class="header">208 <div class="icon-close" aria-label="Close">209 <svg viewBox="0 0 48 48">210 <path d="M10 10 L38 38 M38 10 L10 38" fill="none"></path>211 </svg>212 </div>213 <h1>Choose date</h1>214 </div>215 216 <!-- Date input row -->217 <div class="date-row">218 <div class="input-pill">Fri, Sep 15</div>219 <div class="input-pill secondary">+ Add Return</div>220 </div>221 222 <!-- Weekday Row -->223 <div class="weekday-row">224 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>225 </div>226 227 <!-- September -->228 <div class="section-bar">September 2023</div>229 <div class="calendar">230 <div class="grid">231 <!-- Row 1 (starts Friday) -->232 <div class="day muted"></div>233 <div class="day muted"></div>234 <div class="day muted"></div>235 <div class="day muted"></div>236 <div class="day"><span>1</span></div>237 <div class="day"><span>2</span></div>238 <div class="day"><span>3</span></div>239 240 <!-- Row 2 -->241 <div class="day"><span>4</span></div>242 <div class="day"><span>5</span></div>243 <div class="day"><span>6</span></div>244 <div class="day"><span>7</span></div>245 <div class="day"><span>8</span></div>246 <div class="day"><span>9</span></div>247 <div class="day"><span>10</span></div>248 249 <!-- Row 3 -->250 <div class="day"><span>11</span></div>251 <div class="day"><span>12</span></div>252 <div class="day"><span>13</span></div>253 <div class="day"><span>14</span></div>254 <div class="day selected"><span>15</span></div>255 <div class="day"><span>16</span></div>256 <div class="day"><span>17</span></div>257 258 <!-- Row 4 -->259 <div class="day"><span>18</span></div>260 <div class="day"><span>19</span></div>261 <div class="day"><span>20</span></div>262 <div class="day"><span>21</span></div>263 <div class="day"><span>22</span></div>264 <div class="day"><span>23</span></div>265 <div class="day"><span>24</span></div>266 267 <!-- Row 5 -->268 <div class="day"><span>25</span></div>269 <div class="day"><span>26</span></div>270 <div class="day"><span>27</span></div>271 <div class="day"><span>28</span></div>272 <div class="day"><span>29</span></div>273 <div class="day"><span>30</span></div>274 <div class="day muted"></div>275 </div>276 </div>277 278 <!-- October -->279 <div class="section-bar">October 2023</div>280 <div class="calendar">281 <div class="grid">282 <!-- Row 1 (starts Sunday) -->283 <div class="day"><span>1</span></div>284 <div class="day"><span>2</span></div>285 <div class="day"><span>3</span></div>286 <div class="day"><span>4</span></div>287 <div class="day"><span>5</span></div>288 <div class="day"><span>6</span></div>289 <div class="day"><span>7</span></div>290 291 <!-- Row 2 -->292 <div class="day"><span>8</span></div>293 <div class="day"><span>9</span></div>294 <div class="day"><span>10</span></div>295 <div class="day"><span>11</span></div>296 <div class="day"><span>12</span></div>297 <div class="day"><span>13</span></div>298 <div class="day"><span>14</span></div>299 300 <!-- Row 3 -->301 <div class="day"><span>15</span></div>302 <div class="day"><span>16</span></div>303 <div class="day"><span>17</span></div>304 <div class="day"><span>18</span></div>305 <div class="day"><span>19</span></div>306 <div class="day"><span>20</span></div>307 <div class="day"><span>21</span></div>308 309 <!-- Row 4 -->310 <div class="day"><span>22</span></div>311 <div class="day"><span>23</span></div>312 <div class="day"><span>24</span></div>313 <div class="day"><span>25</span></div>314 <div class="day"><span>26</span></div>315 <div class="day"><span>27</span></div>316 <div class="day"><span>28</span></div>317 318 <!-- Row 5 -->319 <div class="day"><span>29</span></div>320 <div class="day"><span>30</span></div>321 <div class="day"><span>31</span></div>322 <div class="day muted"></div>323 <div class="day muted"></div>324 <div class="day muted"></div>325 <div class="day muted"></div>326 </div>327 </div>328 329 <!-- Bottom Sheet with Confirm -->330 <div class="bottom-sheet">331 <div class="confirm-btn">Confirm</div>332 </div>333 334 <!-- Bottom Navigation Bar -->335 <div class="nav-bar">336 <div class="home-indicator"></div>337 </div>338 339</div>340</body>341</html>