GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Date Picker UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;15 color: #2b3761;16 }17 18 /* Status bar */19 .status-bar {20 height: 96px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #2b2b2b;26 font-size: 36px;27 letter-spacing: 0.5px;28 }29 .sb-right {30 display: flex;31 align-items: center;32 gap: 24px;33 }34 .icon-wifi, .icon-battery {35 width: 40px; height: 40px;36 }37 .icon-battery rect { stroke: #333; }38 .icon-wifi path { stroke: #333; }39 40 /* Header */41 .header {42 padding: 12px 48px 24px 48px;43 display: flex;44 align-items: center;45 gap: 24px;46 }47 .close-btn {48 width: 64px; height: 64px;49 display: flex;50 align-items: center; justify-content: center;51 border-radius: 16px;52 color: #192a56;53 }54 .title {55 font-size: 68px;56 font-weight: 800;57 color: #0f2b67;58 }59 60 /* Pills */61 .pill-row {62 padding: 16px 48px 8px 48px;63 display: flex;64 gap: 24px;65 }66 .pill {67 flex: 1;68 height: 100px;69 background: #EEF1F6;70 border: 2px solid #D6DEE9;71 border-radius: 24px;72 display: flex;73 align-items: center;74 padding: 0 28px;75 font-size: 40px;76 color: #5b6788;77 box-sizing: border-box;78 }79 .pill.secondary {80 color: #8a93aa;81 opacity: 0.9;82 }83 84 /* Weekdays */85 .weekdays {86 padding: 12px 48px 8px 48px;87 display: grid;88 grid-template-columns: repeat(7, 1fr);89 text-align: center;90 color: #9AA7BE;91 font-size: 34px;92 letter-spacing: 6px;93 }94 95 /* Month section */96 .month {97 padding: 24px 48px 8px 48px;98 }99 .month-label {100 color: #A6B1C7;101 font-size: 34px;102 font-weight: 700;103 letter-spacing: 2px;104 margin-bottom: 12px;105 }106 107 .calendar {108 display: grid;109 grid-template-columns: repeat(7, 1fr);110 gap: 22px 18px;111 }112 .day {113 height: 140px;114 display: flex;115 align-items: center;116 justify-content: center;117 color: #394a7a;118 font-size: 46px;119 position: relative;120 }121 .day.muted {122 color: #C6D0E3;123 }124 .day .bullet {125 width: 120px;126 height: 120px;127 border-radius: 60px;128 background: transparent;129 display: flex;130 align-items: center;131 justify-content: center;132 }133 .day.selected .bullet {134 background: #6F8EC7;135 color: #FFFFFF;136 font-weight: 700;137 }138 139 /* Bottom confirm area */140 .confirm-wrap {141 position: absolute;142 left: 0;143 right: 0;144 bottom: 140px;145 padding: 0 26px;146 }147 .confirm-btn {148 height: 118px;149 border-radius: 28px;150 background: #E66D69;151 color: #FFFFFF;152 font-size: 48px;153 font-weight: 700;154 display: flex;155 align-items: center;156 justify-content: center;157 box-shadow: 0 6px 18px rgba(230, 109, 105, 0.35);158 }159 160 .bottom-bar {161 position: absolute;162 left: 0; right: 0; bottom: 0;163 height: 140px;164 background: #0E1831;165 }166 .home-indicator {167 position: absolute;168 left: 50%;169 transform: translateX(-50%);170 bottom: 40px;171 width: 420px;172 height: 10px;173 background: #D7D9E2;174 border-radius: 8px;175 opacity: 0.9;176 }177</style>178</head>179<body>180<div id="render-target">181 182 <!-- Status Bar -->183 <div class="status-bar">184 <div class="sb-left">11:59</div>185 <div class="sb-right">186 <svg class="icon-wifi" viewBox="0 0 24 24" fill="none">187 <path d="M3 8c6-5 12-5 18 0" stroke-width="2"/>188 <path d="M6 12c4-3 8-3 12 0" stroke-width="2"/>189 <path d="M10 16c2-1 4-1 6 0" stroke-width="2"/>190 <circle cx="12" cy="19" r="1.5" fill="#333"></circle>191 </svg>192 <svg class="icon-battery" viewBox="0 0 28 16" fill="none">193 <rect x="1" y="3" width="22" height="10" rx="2" stroke-width="2" />194 <rect x="3" y="5" width="15" height="6" fill="#333"></rect>195 <rect x="23" y="6" width="3" height="4" fill="#333"></rect>196 </svg>197 </div>198 </div>199 200 <!-- Header -->201 <div class="header">202 <div class="close-btn">203 <svg width="42" height="42" viewBox="0 0 24 24">204 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#24345C" stroke-width="2" stroke-linecap="round"/>205 </svg>206 </div>207 <div class="title">Choose date</div>208 </div>209 210 <!-- Pills -->211 <div class="pill-row">212 <div class="pill">Tue, Nov 28</div>213 <div class="pill secondary">+ Add Return</div>214 </div>215 216 <!-- Weekdays -->217 <div class="weekdays">218 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>219 </div>220 221 <!-- November -->222 <div class="month">223 <div class="month-label">NOVEMBER 2023</div>224 <div class="calendar">225 <!-- Row: leading days -->226 <div></div><div></div><div class="day muted"><div class="bullet">1</div></div>227 <div class="day muted"><div class="bullet">2</div></div>228 <div class="day muted"><div class="bullet">3</div></div>229 <div class="day muted"><div class="bullet">4</div></div>230 <div></div>231 232 <!-- Row 2 -->233 <div class="day"><div class="bullet">5</div></div>234 <div class="day"><div class="bullet">6</div></div>235 <div class="day"><div class="bullet">7</div></div>236 <div class="day"><div class="bullet">8</div></div>237 <div class="day"><div class="bullet">9</div></div>238 <div class="day"><div class="bullet">10</div></div>239 <div class="day"><div class="bullet">11</div></div>240 241 <!-- Row 3 -->242 <div class="day"><div class="bullet">12</div></div>243 <div class="day"><div class="bullet">13</div></div>244 <div class="day"><div class="bullet">14</div></div>245 <div class="day"><div class="bullet">15</div></div>246 <div class="day"><div class="bullet">16</div></div>247 <div class="day"><div class="bullet">17</div></div>248 <div class="day"><div class="bullet">18</div></div>249 250 <!-- Row 4 -->251 <div class="day"><div class="bullet">19</div></div>252 <div class="day"><div class="bullet">20</div></div>253 <div class="day"><div class="bullet">21</div></div>254 <div class="day"><div class="bullet">22</div></div>255 <div class="day"><div class="bullet">23</div></div>256 <div class="day"><div class="bullet">24</div></div>257 <div class="day"><div class="bullet">25</div></div>258 259 <!-- Row 5 -->260 <div class="day"><div class="bullet">26</div></div>261 <div class="day"><div class="bullet">27</div></div>262 <div class="day selected"><div class="bullet">28</div></div>263 <div class="day"><div class="bullet">29</div></div>264 <div class="day"><div class="bullet">30</div></div>265 <div></div><div></div>266 </div>267 </div>268 269 <!-- December -->270 <div class="month" style="margin-top: 24px;">271 <div class="month-label">DECEMBER 2023</div>272 <div class="calendar">273 <div class="day muted"><div class="bullet">1</div></div>274 <div class="day muted"><div class="bullet">2</div></div>275 <div></div><div></div><div></div><div></div><div></div>276 277 <div class="day"><div class="bullet">3</div></div>278 <div class="day"><div class="bullet">4</div></div>279 <div class="day"><div class="bullet">5</div></div>280 <div class="day"><div class="bullet">6</div></div>281 <div class="day"><div class="bullet">7</div></div>282 <div class="day"><div class="bullet">8</div></div>283 <div class="day"><div class="bullet">9</div></div>284 285 <div class="day"><div class="bullet">10</div></div>286 <div class="day"><div class="bullet">11</div></div>287 <div class="day"><div class="bullet">12</div></div>288 <div class="day"><div class="bullet">13</div></div>289 <div class="day"><div class="bullet">14</div></div>290 <div class="day"><div class="bullet">15</div></div>291 <div class="day"><div class="bullet">16</div></div>292 293 <div class="day"><div class="bullet">17</div></div>294 <div class="day"><div class="bullet">18</div></div>295 <div class="day"><div class="bullet">19</div></div>296 <div class="day"><div class="bullet">20</div></div>297 <div class="day"><div class="bullet">21</div></div>298 <div class="day"><div class="bullet">22</div></div>299 <div class="day"><div class="bullet">23</div></div>300 </div>301 </div>302 303 <!-- Confirm button -->304 <div class="confirm-wrap">305 <div class="confirm-btn">Confirm</div>306 </div>307 308 <!-- Bottom nav area -->309 <div class="bottom-bar">310 <div class="home-indicator"></div>311 </div>312</div>313</body>314</html>