GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Date Picker UI</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;11 }12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 background: #FFFFFF;18 }19 20 /* Status bar */21 .status-bar {22 height: 110px;23 padding: 0 40px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #222;28 font-weight: 600;29 font-size: 42px;30 }31 .status-icons {32 display: flex;33 align-items: center;34 gap: 24px;35 }36 .dot {37 width: 22px;38 height: 22px;39 background: #333;40 border-radius: 50%;41 display: inline-block;42 }43 .wifi {44 width: 42px; height: 42px;45 }46 .battery {47 width: 54px; height: 30px;48 }49 50 /* Header */51 .header {52 padding: 10px 40px 0 40px;53 }54 .top-row {55 display: flex;56 align-items: center;57 gap: 24px;58 }59 .title {60 font-size: 72px;61 font-weight: 800;62 color: #172A5A;63 }64 .icon-btn {65 width: 72px;66 height: 72px;67 display: flex;68 align-items: center;69 justify-content: center;70 border-radius: 36px;71 }72 .icon-btn svg { width: 44px; height: 44px; }73 74 /* Input pills */75 .pill-row {76 padding-top: 30px;77 display: flex;78 gap: 36px;79 }80 .pill {81 flex: 1;82 min-height: 120px;83 border: 2px solid #C7D0E6;84 background: #F0F3FA;85 border-radius: 24px;86 display: flex;87 align-items: center;88 justify-content: space-between;89 padding: 0 36px;90 color: #314A7E;91 font-size: 46px;92 font-weight: 600;93 }94 .pill .clear {95 width: 44px; height: 44px;96 }97 98 /* Weekday row */99 .weekday-row {100 margin: 32px 40px 20px;101 display: grid;102 grid-template-columns: repeat(7, 1fr);103 color: #8494B7;104 font-size: 38px;105 font-weight: 700;106 letter-spacing: 2px;107 text-align: center;108 }109 110 /* Month sections */111 .month-label {112 padding: 24px 40px;113 background: #F3F5F9;114 color: #7E90B1;115 font-size: 40px;116 font-weight: 800;117 text-transform: uppercase;118 }119 .calendar {120 padding: 20px 40px 30px;121 display: grid;122 grid-template-columns: repeat(7, 1fr);123 gap: 8px;124 }125 .day {126 height: 150px;127 display: flex;128 align-items: center;129 justify-content: center;130 color: #2F4573;131 font-size: 46px;132 font-weight: 600;133 position: relative;134 }135 .day.disabled {136 color: #C3CCDD;137 }138 .day.selected {139 color: #FFFFFF;140 font-weight: 800;141 }142 .day.selected::after {143 content: "";144 position: absolute;145 width: 160px;146 height: 160px;147 background: #6389C2;148 border-radius: 50%;149 z-index: 1;150 }151 .day.selected span {152 position: relative;153 z-index: 2;154 }155 156 /* Confirm button */157 .confirm-wrap {158 position: absolute;159 left: 0; right: 0;160 bottom: 160px;161 padding: 0 26px;162 }163 .confirm-btn {164 height: 140px;165 border-radius: 28px;166 background: #E56F6A;167 color: #FFFFFF;168 font-size: 56px;169 font-weight: 800;170 display: flex;171 align-items: center;172 justify-content: center;173 box-shadow: 0 8px 14px rgba(229,111,106,0.35);174 }175 176 /* Bottom gesture bar */177 .gesture {178 position: absolute;179 bottom: 60px;180 left: 50%;181 transform: translateX(-50%);182 width: 520px;183 height: 12px;184 background: #D9DEE8;185 border-radius: 12px;186 }187</style>188</head>189<body>190<div id="render-target">191 192 <!-- Status Bar -->193 <div class="status-bar">194 <div>9:57</div>195 <div class="status-icons">196 <span class="dot"></span>197 <span class="dot"></span>198 <span class="dot"></span>199 <span class="dot"></span>200 <svg class="wifi" viewBox="0 0 24 24">201 <path d="M12 18.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5.7-1.5 1.5-1.5zm-4.5-4c2.9-2.3 8.1-2.3 11 0l-1.3 1.3c-2.1-1.7-6.3-1.7-8.4 0L7.5 14.5zm-3.7-3.8C8.1 6 16 6 20.2 10.7l-1.3 1.3c-3.6-3.7-10.2-3.7-13.8 0L3.8 10.7z" fill="#333"/>202 </svg>203 <svg class="battery" viewBox="0 0 30 18">204 <rect x="1" y="2" width="24" height="14" rx="3" fill="#444" />205 <rect x="3" y="4" width="18" height="10" fill="#9EE07A" />206 <rect x="25" y="6" width="4" height="6" rx="2" fill="#444" />207 </svg>208 </div>209 </div>210 211 <!-- Header -->212 <div class="header">213 <div class="top-row">214 <div class="icon-btn">215 <svg viewBox="0 0 24 24">216 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#2F4573" stroke-width="2" stroke-linecap="round"/>217 </svg>218 </div>219 <div class="title">Choose date</div>220 </div>221 222 <div class="pill-row">223 <div class="pill">224 <span>Thu, Nov 30</span>225 </div>226 <div class="pill">227 <span>Thu, Nov 30</span>228 <svg class="clear" viewBox="0 0 24 24">229 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#2F4573" stroke-width="2" stroke-linecap="round"/>230 </svg>231 </div>232 </div>233 </div>234 235 <!-- Weekday Row -->236 <div class="weekday-row">237 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>238 </div>239 240 <!-- November -->241 <div class="month-label">November 2023</div>242 <div class="calendar">243 <div class="day disabled"><span>1</span></div>244 <div class="day disabled"><span>2</span></div>245 <div class="day disabled"><span>3</span></div>246 <div class="day disabled"><span>4</span></div>247 <div class="day"><span>5</span></div>248 <div class="day"><span>6</span></div>249 <div class="day"><span>7</span></div>250 <div class="day"><span>8</span></div>251 <div class="day"><span>9</span></div>252 <div class="day"><span>10</span></div>253 <div class="day"><span>11</span></div>254 <div class="day"><span>12</span></div>255 <div class="day"><span>13</span></div>256 <div class="day"><span>14</span></div>257 <div class="day"><span>15</span></div>258 <div class="day"><span>16</span></div>259 <div class="day"><span>17</span></div>260 <div class="day"><span>18</span></div>261 <div class="day"><span>19</span></div>262 <div class="day"><span>20</span></div>263 <div class="day"><span>21</span></div>264 <div class="day"><span>22</span></div>265 <div class="day"><span>23</span></div>266 <div class="day"><span>24</span></div>267 <div class="day"><span>25</span></div>268 <div class="day"><span>26</span></div>269 <div class="day"><span>27</span></div>270 <div class="day"><span>28</span></div>271 <div class="day"><span>29</span></div>272 <div class="day selected"><span>30</span></div>273 </div>274 275 <!-- December -->276 <div class="month-label">December 2023</div>277 <div class="calendar">278 <div class="day disabled"><span></span></div>279 <div class="day disabled"><span></span></div>280 <div class="day disabled"><span></span></div>281 <div class="day disabled"><span></span></div>282 <div class="day"><span>1</span></div>283 <div class="day"><span>2</span></div>284 <div class="day"><span>3</span></div>285 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 <div class="day"><span>8</span></div>291 <div class="day"><span>9</span></div>292 <div class="day"><span>10</span></div>293 294 <div class="day"><span>11</span></div>295 <div class="day"><span>12</span></div>296 <div class="day"><span>13</span></div>297 <div class="day"><span>14</span></div>298 <div class="day"><span>15</span></div>299 <div class="day"><span>16</span></div>300 <div class="day"><span>17</span></div>301 302 <div class="day"><span>18</span></div>303 <div class="day"><span>19</span></div>304 <div class="day"><span>20</span></div>305 <div class="day"><span>21</span></div>306 <div class="day"><span>22</span></div>307 <div class="day"><span>23</span></div>308 <div class="day disabled"><span></span></div>309 </div>310 311 <!-- Confirm button -->312 <div class="confirm-wrap">313 <div class="confirm-btn">Confirm</div>314 </div>315 316 <!-- Bottom gesture indicator -->317 <div class="gesture"></div>318 319</div>320</body>321</html>