GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>New Task - Date Picker</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #fff;14 font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15 }16 17 /* Top status bar */18 .statusbar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 100px;24 color: #e0e0e0;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 36px;29 font-size: 32px;30 letter-spacing: 0.5px;31 }32 .status-left { display: flex; align-items: center; gap: 20px; }33 .status-right { display: flex; align-items: center; gap: 22px; }34 .icon-small svg { width: 34px; height: 34px; fill: #e0e0e0; }35 36 /* App bar */37 .appbar {38 position: absolute;39 top: 100px;40 left: 0;41 width: 1080px;42 height: 120px;43 display: flex;44 align-items: center;45 gap: 26px;46 padding: 0 30px;47 }48 .appbar .title {49 font-size: 64px;50 font-weight: 700;51 color: #cfcfcf;52 }53 .back-btn {54 width: 72px;55 height: 72px;56 display: flex;57 align-items: center;58 justify-content: center;59 }60 .back-btn svg { width: 58px; height: 58px; fill: #cfcfcf; }61 62 /* Content labels and fields */63 .content {64 position: absolute;65 top: 260px;66 left: 30px;67 right: 30px;68 color: #ffd56a;69 }70 .label {71 font-size: 40px;72 font-weight: 600;73 margin-bottom: 18px;74 color: #e2b249;75 letter-spacing: 0.5px;76 }77 .input {78 height: 120px;79 border: 3px solid #e2b249;80 border-radius: 16px;81 display: flex;82 align-items: center;83 padding: 0 28px;84 color: #d9d9d9;85 font-size: 44px;86 background: #1a1a1a;87 }88 89 .section {90 margin-top: 42px;91 }92 .section .heading {93 font-size: 44px;94 color: #e2b249;95 margin-bottom: 16px;96 }97 98 /* Notes area */99 .notes-area {100 position: absolute;101 bottom: 170px;102 left: 30px;103 right: 30px;104 }105 .notes-label {106 font-size: 44px;107 color: #e2b249;108 margin-bottom: 14px;109 }110 .notes-box {111 height: 260px;112 border: 2px solid #3a3a3a;113 border-radius: 18px;114 background: #141414;115 color: #9e9e9e;116 font-size: 44px;117 padding: 26px;118 }119 .float-action {120 position: absolute;121 bottom: 210px;122 right: 54px;123 width: 140px;124 height: 140px;125 border-radius: 50%;126 background: #b6831f;127 display: flex;128 align-items: center;129 justify-content: center;130 box-shadow: 0 8px 24px rgba(0,0,0,0.45);131 }132 .float-action svg { width: 72px; height: 72px; fill: #121212; }133 134 /* Scrim for modal */135 .scrim {136 position: absolute;137 inset: 0;138 background: rgba(0,0,0,0.55);139 }140 141 /* Date Picker Modal */142 .date-modal {143 position: absolute;144 top: 460px;145 left: 80px;146 width: 920px;147 border-radius: 34px;148 overflow: hidden;149 box-shadow: 0 24px 60px rgba(0,0,0,0.6);150 }151 .date-header {152 background: #e2ad3c;153 padding: 34px 36px 40px 36px;154 color: #1c1c1c;155 }156 .date-header .sub {157 font-size: 28px;158 letter-spacing: 2px;159 color: #2a1a00;160 margin-bottom: 22px;161 text-transform: uppercase;162 opacity: 0.9;163 }164 .date-header .selected-date {165 font-size: 92px;166 font-weight: 800;167 color: #1b1b1b;168 display: flex;169 align-items: center;170 justify-content: space-between;171 }172 .date-header .edit-icon svg {173 width: 58px;174 height: 58px;175 fill: #1b1b1b;176 }177 178 .date-body {179 background: #2c2c2c;180 padding: 26px 34px 30px 34px;181 color: #d9d9d9;182 }183 .month-row {184 display: flex;185 align-items: center;186 justify-content: space-between;187 font-size: 44px;188 margin-bottom: 24px;189 }190 .month-row .controls {191 display: flex;192 align-items: center;193 gap: 30px;194 }195 .month-row .controls .arrow {196 width: 56px;197 height: 56px;198 display: inline-flex;199 align-items: center;200 justify-content: center;201 background: #3a3a3a;202 border-radius: 12px;203 }204 .month-row .controls svg { width: 34px; height: 34px; fill: #e2b249; }205 206 .dow {207 display: grid;208 grid-template-columns: repeat(7, 1fr);209 gap: 16px;210 text-align: center;211 font-size: 36px;212 color: #cfcfcf;213 margin-bottom: 16px;214 opacity: 0.9;215 }216 .calendar {217 display: grid;218 grid-template-columns: repeat(7, 1fr);219 gap: 22px;220 text-align: center;221 font-size: 44px;222 padding-bottom: 26px;223 }224 .day {225 height: 88px;226 display: flex;227 align-items: center;228 justify-content: center;229 color: #e0e0e0;230 }231 .empty { opacity: 0; }232 .selected {233 width: 88px;234 height: 88px;235 border-radius: 50%;236 background: #e2ad3c;237 color: #1b1b1b;238 font-weight: 800;239 display: inline-flex;240 align-items: center;241 justify-content: center;242 }243 .actions {244 display: flex;245 align-items: center;246 justify-content: space-between;247 padding: 26px 10px 10px 10px;248 font-size: 44px;249 color: #e2ad3c;250 letter-spacing: 2px;251 }252</style>253</head>254<body>255<div id="render-target">256 257 <!-- Status bar -->258 <div class="statusbar">259 <div class="status-left">260 <div>10:16</div>261 <div class="icon-small">262 <svg viewBox="0 0 24 24"><circle cx="4" cy="12" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="20" cy="12" r="2"></circle></svg>263 </div>264 </div>265 <div class="status-right">266 <!-- Wifi -->267 <div class="icon-small">268 <svg viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 8zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4l2 2 2-2c-1-1-3-1-4 0z"></path></svg>269 </div>270 <!-- Battery -->271 <div class="icon-small">272 <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect><rect x="20" y="10" width="2" height="4"></rect><rect x="4" y="8" width="14" height="8" fill="#e0e0e0"></rect></svg>273 </div>274 </div>275 </div>276 277 <!-- App bar -->278 <div class="appbar">279 <div class="back-btn">280 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>281 </div>282 <div class="title">New Task</div>283 </div>284 285 <!-- Main content -->286 <div class="content">287 <div class="label">What needs to be done?</div>288 <div class="input">Buy New Balance Hiking shoes</div>289 290 <div class="section">291 <div class="heading">Priority</div>292 <div style="height:90px;width:220px;background:#1b1b1b;border-radius:12px;border:2px solid #2f2f2f;"></div>293 </div>294 295 <div class="section">296 <div class="heading">Subtasks</div>297 <div style="height:72px;width:72px;border-radius:12px;background:#1b1b1b;border:2px dashed #444;display:flex;align-items:center;justify-content:center;color:#777;font-size:46px;">+</div>298 </div>299 300 <div class="section">301 <div class="heading">Due date</div>302 <div style="height:90px;width:160px;background:#1b1b1b;border-radius:12px;border:2px solid #2f2f2f;"></div>303 </div>304 305 <div class="section">306 <div class="heading">Reminder</div>307 <div style="height:90px;width:160px;background:#1b1b1b;border-radius:12px;border:2px solid #2f2f2f;"></div>308 </div>309 310 <div class="section">311 <div class="heading">Repeat</div>312 <div style="height:90px;width:220px;background:#1b1b1b;border-radius:12px;border:2px solid #2f2f2f;"></div>313 </div>314 315 <div class="section">316 <div class="heading">List</div>317 <div style="height:90px;width:420px;background:#1b1b1b;border-radius:12px;border:2px solid #2f2f2f;"></div>318 </div>319 </div>320 321 <!-- Notes area -->322 <div class="notes-area">323 <div class="notes-label">Notes</div>324 <div class="notes-box">Add some notes!</div>325 </div>326 <div class="float-action">327 <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z"></path></svg>328 </div>329 330 <!-- Scrim behind modal -->331 <div class="scrim"></div>332 333 <!-- Date Picker Modal -->334 <div class="date-modal">335 <div class="date-header">336 <div class="sub">Select a date</div>337 <div class="selected-date">338 <span>Dec 21, 2023</span>339 <span class="edit-icon">340 <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>341 </span>342 </div>343 </div>344 345 <div class="date-body">346 <div class="month-row">347 <div style="display:flex;align-items:center;gap:12px;">348 <span style="font-size:44px;">December 2023</span>349 <svg viewBox="0 0 24 24" style="width:18px;height:18px;fill:#bdbdbd;"><path d="M7 10l5 5 5-5z"></path></svg>350 </div>351 <div class="controls">352 <div class="arrow">353 <svg viewBox="0 0 24 24"><path d="M14 7l-5 5 5 5" stroke="#e2b249" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>354 </div>355 <div class="arrow">356 <svg viewBox="0 0 24 24"><path d="M10 7l5 5-5 5" stroke="#e2b249" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>357 </div>358 </div>359 </div>360 361 <div class="dow">362 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>363 </div>364 365 <!-- December 2023 calendar (starts Friday) -->366 <div class="calendar">367 <div class="day empty"></div>368 <div class="day empty"></div>369 <div class="day empty"></div>370 <div class="day empty"></div>371 <div class="day empty"></div>372 <div class="day">1</div>373 <div class="day">2</div>374 375 <div class="day">3</div>376 <div class="day">4</div>377 <div class="day">5</div>378 <div class="day">6</div>379 <div class="day">7</div>380 <div class="day">8</div>381 <div class="day">9</div>382 383 <div class="day">10</div>384 <div class="day">11</div>385 <div class="day">12</div>386 <div class="day">13</div>387 <div class="day">14</div>388 <div class="day">15</div>389 <div class="day">16</div>390 391 <div class="day">17</div>392 <div class="day">18</div>393 <div class="day">19</div>394 <div class="day">20</div>395 <div class="day"><span class="selected">21</span></div>396 <div class="day">22</div>397 <div class="day">23</div>398 399 <div class="day">24</div>400 <div class="day">25</div>401 <div class="day">26</div>402 <div class="day">27</div>403 <div class="day">28</div>404 <div class="day">29</div>405 <div class="day">30</div>406 407 <div class="day">31</div>408 <div class="day empty"></div>409 <div class="day empty"></div>410 <div class="day empty"></div>411 <div class="day empty"></div>412 <div class="day empty"></div>413 <div class="day empty"></div>414 </div>415 416 <div class="actions">417 <div>Cancel</div>418 <div>OK</div>419 </div>420 </div>421 </div>422 423</div>424</body>425</html>