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>Tasks - Date Picker</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0f1216;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0; left: 0; right: 0;21 height: 120px;22 background: #0b3c69;23 color: #ffffff;24 display: flex;25 align-items: center;26 padding: 0 36px;27 font-weight: 600;28 letter-spacing: 0.3px;29 }30 .status-left { font-size: 44px; }31 .status-right {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 24px;36 }37 .ico { display: inline-flex; align-items: center; justify-content: center; }38 .ico svg { display: block; }39 40 /* App bar */41 .app-bar {42 position: absolute;43 top: 120px; left: 0; right: 0;44 height: 160px;45 background: #0e5b93;46 color: #cfe6ff;47 display: flex;48 align-items: center;49 padding: 0 36px;50 }51 .app-title {52 font-size: 72px;53 font-weight: 700;54 margin-left: 24px;55 }56 .app-actions {57 margin-left: auto;58 display: flex;59 gap: 36px;60 }61 .app-actions .ico svg { stroke: #cfe6ff; }62 63 /* Notification permission bar */64 .notif-bar {65 position: absolute;66 top: 280px; left: 0; right: 0;67 height: 96px;68 background: #1c1f23;69 display: flex;70 align-items: center;71 padding: 0 36px;72 }73 .notif-text {74 display: flex;75 align-items: center;76 gap: 18px;77 color: #e24b4b;78 font-size: 40px;79 }80 .notif-btn {81 margin-left: auto;82 background: #1976d2;83 color: #e8f1ff;84 padding: 16px 28px;85 border-radius: 8px;86 font-size: 40px;87 box-shadow: 0 2px 0 rgba(255,255,255,0.06) inset, 0 2px 6px rgba(0,0,0,0.3);88 }89 90 /* Underlying content placeholders */91 .content {92 position: absolute;93 top: 376px; left: 0; right: 0; bottom: 240px;94 background: #0e1014;95 padding: 24px 36px;96 }97 .list-card {98 background: #14171c;99 border-radius: 12px;100 box-shadow: 0 10px 24px rgba(0,0,0,0.4);101 height: 160px;102 margin-bottom: 24px;103 display: flex;104 align-items: center;105 padding: 0 24px;106 color: #b8bec7;107 font-size: 44px;108 }109 .list-card .ico svg { stroke: #b8bec7; }110 .list-card .label { margin-left: 20px; }111 112 /* Overlay and dialog */113 .overlay {114 position: absolute;115 inset: 0;116 background: rgba(0,0,0,0.6);117 }118 .calendar-dialog {119 position: absolute;120 left: 50%;121 top: 540px;122 transform: translateX(-50%);123 width: 860px;124 background: #4a4d50;125 border-radius: 16px;126 box-shadow: 0 26px 64px rgba(0,0,0,0.75);127 color: #ffffff;128 }129 .cal-header {130 padding: 28px 36px 24px;131 border-bottom: 1px solid rgba(255,255,255,0.08);132 }133 .cal-year { font-size: 44px; opacity: 0.9; }134 .cal-day { font-size: 88px; font-weight: 700; margin-top: 10px; }135 136 .cal-body { padding: 12px 36px 24px; }137 .cal-title {138 display: flex;139 align-items: center;140 justify-content: center;141 gap: 24px;142 font-size: 44px;143 color: #e8eaed;144 margin-bottom: 16px;145 }146 .cal-title .chev { position: absolute; }147 .chev-left { left: 36px; }148 .chev-right { right: 36px; }149 .weekday-row {150 display: grid;151 grid-template-columns: repeat(7, 1fr);152 color: #cfd6dc;153 font-size: 36px;154 text-align: center;155 margin: 16px 0 12px;156 }157 .day-grid {158 display: grid;159 grid-template-columns: repeat(7, 1fr);160 gap: 6px;161 }162 .day {163 height: 108px;164 display: flex;165 align-items: center;166 justify-content: center;167 font-size: 42px;168 color: #e8eaed;169 position: relative;170 }171 .day.muted { opacity: 0.35; }172 .day .dot {173 position: absolute;174 bottom: 16px;175 width: 8px; height: 8px;176 border-radius: 50%;177 background: #1e88e5;178 opacity: 0.0;179 }180 .day.marked .dot { opacity: 0.8; }181 .day.selected {182 color: #ffffff;183 font-weight: 700;184 }185 .day.selected::before {186 content: "";187 position: absolute;188 width: 86px; height: 86px;189 border-radius: 50%;190 background: #0b74c9;191 z-index: -1;192 }193 194 .cal-actions {195 display: flex;196 justify-content: space-between;197 padding: 28px 36px 36px;198 font-size: 44px;199 letter-spacing: 1px;200 color: #ffffff;201 }202 203 /* Bottom ad banner */204 .ad-banner {205 position: absolute;206 left: 0; right: 0; bottom: 96px;207 height: 160px;208 background: #154b7c;209 display: flex;210 align-items: center;211 padding: 12px 24px;212 }213 .ad-image {214 width: calc(100% - 80px);215 height: 100%;216 background: #E0E0E0;217 border: 1px solid #BDBDBD;218 display: flex;219 justify-content: center;220 align-items: center;221 color: #757575;222 font-size: 42px;223 border-radius: 10px;224 }225 .ad-close {226 margin-left: 16px;227 width: 56px; height: 56px;228 border-radius: 8px;229 background: #e0e0e0;230 border: 1px solid #bdbdbd;231 display: flex;232 align-items: center;233 justify-content: center;234 }235 236 /* Home indicator */237 .home-pill {238 position: absolute;239 left: 50%;240 bottom: 24px;241 transform: translateX(-50%);242 width: 240px;243 height: 12px;244 background: #ffffff;245 opacity: 0.7;246 border-radius: 8px;247 }248</style>249</head>250<body>251<div id="render-target">252 253 <!-- Status Bar -->254 <div class="status-bar">255 <div class="status-left">6:15</div>256 <div class="status-right">257 <span class="ico">258 <svg width="44" height="44" viewBox="0 0 24 24"><circle cx="10" cy="10" r="3" fill="#ffffff"/></svg>259 </span>260 <span class="ico">261 <svg width="44" height="44" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#ffffff"/></svg>262 </span>263 <span class="ico">264 <svg width="44" height="44" viewBox="0 0 24 24"><circle cx="6" cy="6" r="3" fill="#ffffff"/></svg>265 </span>266 <span class="ico">267 <svg width="44" height="44" viewBox="0 0 24 24"><circle cx="18" cy="6" r="3" fill="#ffffff"/></svg>268 </span>269 <span class="ico">270 <svg width="44" height="44" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#ffffff"/></svg>271 </span>272 <span class="ico">273 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M3 18h18" stroke="#ffffff" stroke-width="2"/></svg>274 </span>275 <span class="ico">276 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M16 3v18" stroke="#ffffff" stroke-width="2"/></svg>277 </span>278 </div>279 </div>280 281 <!-- App Bar -->282 <div class="app-bar">283 <span class="ico">284 <svg width="72" height="72" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#cfe6ff" stroke-width="2.6" stroke-linecap="round"/></svg>285 </span>286 <div class="app-title">Tasks</div>287 <div class="app-actions">288 <span class="ico">289 <svg width="68" height="68" viewBox="0 0 24 24">290 <circle cx="12" cy="12" r="9" fill="none" stroke="#cfe6ff" stroke-width="2"/>291 <path d="M12 7v10M7 12h10" stroke="#cfe6ff" stroke-width="2" stroke-linecap="round"/>292 </svg>293 </span>294 <span class="ico">295 <svg width="68" height="68" viewBox="0 0 24 24">296 <circle cx="12" cy="12" r="9" fill="none" stroke="#cfe6ff" stroke-width="2"/>297 <path d="M7 12l3 3 7-7" stroke="#cfe6ff" stroke-width="2" stroke-linecap="round" fill="none"/>298 </svg>299 </span>300 <span class="ico">301 <svg width="68" height="68" viewBox="0 0 24 24">302 <circle cx="11" cy="11" r="6" fill="none" stroke="#cfe6ff" stroke-width="2"/>303 <path d="M20 20l-4-4" stroke="#cfe6ff" stroke-width="2" stroke-linecap="round"/>304 </svg>305 </span>306 </div>307 </div>308 309 <!-- Notification permission bar -->310 <div class="notif-bar">311 <div class="notif-text">312 <span class="ico">313 <svg width="48" height="48" viewBox="0 0 24 24">314 <circle cx="12" cy="12" r="10" fill="#e24b4b"/>315 <path d="M12 7v6M12 16h0.01" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>316 </svg>317 </span>318 <span>Please allow app to send you notification</span>319 </div>320 <div class="notif-btn">Enable</div>321 </div>322 323 <!-- Underlying content (dimmed by overlay) -->324 <div class="content">325 <div class="list-card">326 <span class="ico"><svg width="56" height="56" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2" fill="none" stroke="#b8bec7" stroke-width="2"/></svg></span>327 <div class="label">Upcoming Task Placeholder</div>328 </div>329 <div class="list-card">330 <span class="ico"><svg width="56" height="56" viewBox="0 0 24 24"><path d="M12 6v6l4 2" stroke="#b8bec7" stroke-width="2" fill="none" stroke-linecap="round"/></svg></span>331 <div class="label">Reminder Placeholder</div>332 </div>333 <div class="list-card">334 <span class="ico"><svg width="56" height="56" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#b8bec7" stroke-width="2"/></svg></span>335 <div class="label">Repeat Placeholder</div>336 </div>337 </div>338 339 <!-- Overlay and Calendar Dialog -->340 <div class="overlay"></div>341 <div class="calendar-dialog">342 <div class="cal-header">343 <div class="cal-year">2023</div>344 <div class="cal-day">Sat, Oct 14</div>345 </div>346 347 <div class="cal-body">348 <div class="cal-title">349 <div class="chev chev-left ico">350 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#e8eaed" stroke-width="2" stroke-linecap="round" fill="none"/></svg>351 </div>352 October 2023353 <div class="chev chev-right ico">354 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#e8eaed" stroke-width="2" stroke-linecap="round" fill="none"/></svg>355 </div>356 </div>357 358 <div class="weekday-row">359 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>360 </div>361 362 <div class="day-grid">363 <!-- Row 1: starts on Sunday -->364 <div class="day">1</div><div class="day">2</div><div class="day">3</div><div class="day">4</div><div class="day">5</div><div class="day">6</div><div class="day">7</div>365 <!-- Row 2 -->366 <div class="day">8</div><div class="day">9</div><div class="day">10</div><div class="day">11</div><div class="day">12</div><div class="day">13</div><div class="day selected">14</div>367 <!-- Row 3 -->368 <div class="day">15</div><div class="day">16</div><div class="day">17</div><div class="day">18</div><div class="day">19</div><div class="day">20</div><div class="day">21</div>369 <!-- Row 4 -->370 <div class="day">22</div><div class="day">23</div><div class="day">24</div><div class="day">25</div><div class="day">26</div><div class="day">27</div><div class="day">28</div>371 <!-- Row 5 -->372 <div class="day">29</div><div class="day">30</div><div class="day">31</div>373 <div class="day muted"></div><div class="day muted"></div><div class="day muted"></div><div class="day muted"></div>374 </div>375 </div>376 377 <div class="cal-actions">378 <div>CANCEL</div>379 <div>OK</div>380 </div>381 </div>382 383 <!-- Bottom ad banner -->384 <div class="ad-banner">385 <div class="ad-image">[IMG: Coconut Water Ad]</div>386 <div class="ad-close">387 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#555" stroke-width="2" stroke-linecap="round"/></svg>388 </div>389 </div>390 391 <!-- Home indicator -->392 <div class="home-pill"></div>393</div>394</body>395</html>