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>Tasks - Date Picker</title>6<style>7 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #0f2d57;14 color: #fff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 height: 88px;23 width: 100%;24 background: #103563;25 display: flex;26 align-items: center;27 padding: 0 28px;28 box-sizing: border-box;29 }30 .status-left { font-weight: 600; font-size: 40px; letter-spacing: 1px; opacity: .95; }31 .status-dots { display: inline-flex; gap: 16px; margin-left: 20px; }32 .status-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; opacity: .9; }33 .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 36px; opacity: .95; }34 .icon-battery { width: 36px; height: 20px; border: 3px solid #fff; position: relative; border-radius: 4px; }35 .icon-battery::after { content: ""; position: absolute; right: -8px; top: 5px; width: 6px; height: 10px; background: #fff; border-radius: 1px; }36 .icon-battery .fill { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 70%; background: #fff; }37 38 /* App bar */39 .app-bar {40 position: absolute;41 top: 88px;42 left: 0;43 right: 0;44 height: 132px;45 background: #0f3a73;46 display: flex;47 align-items: center;48 padding: 0 28px;49 box-sizing: border-box;50 box-shadow: 0 2px 0 rgba(0,0,0,.25) inset;51 }52 .hamburger, .top-icon {53 width: 64px;54 height: 64px;55 }56 .title {57 font-size: 72px;58 font-weight: 700;59 margin-left: 28px;60 letter-spacing: 1px;61 }62 .actions { margin-left: auto; display: flex; align-items: center; gap: 36px; }63 64 /* Content background (list area) */65 .content {66 position: absolute;67 top: 220px;68 left: 0;69 right: 0;70 bottom: 0;71 background: #0b1a25;72 padding-bottom: 220px;73 }74 .section-header {75 background: #c89100;76 color: #111;77 font-weight: 800;78 letter-spacing: 1px;79 font-size: 56px;80 padding: 24px 30px;81 }82 .task-card {83 background: #111821;84 margin: 14px 0;85 padding: 26px 30px;86 color: #d9e1ea;87 font-size: 54px;88 display: flex;89 align-items: center;90 box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06);91 }92 .task-time { font-size: 36px; opacity: 0.7; margin-left: 18px; }93 .task-meta { margin-left: auto; font-size: 34px; opacity: 0.65; }94 95 /* Floating action button */96 .fab {97 position: absolute;98 right: 46px;99 bottom: 300px;100 width: 150px;101 height: 150px;102 background: #2d7dd2;103 border-radius: 50%;104 box-shadow: 0 12px 24px rgba(0,0,0,0.45);105 display: flex;106 justify-content: center;107 align-items: center;108 }109 .fab svg { width: 72px; height: 72px; fill: #e8f1ff; }110 111 /* Bottom ad banner */112 .ad {113 position: absolute;114 left: 0; right: 0; bottom: 0;115 height: 210px;116 background: #ffffff;117 display: flex;118 align-items: center;119 padding: 0 26px;120 box-sizing: border-box;121 color: #14213d;122 box-shadow: 0 -2px 8px rgba(0,0,0,0.2);123 }124 .ad-icon {125 width: 140px; height: 140px; border-radius: 28px;126 background: #E0E0E0; border: 1px solid #BDBDBD;127 display: flex; justify-content: center; align-items: center; color: #757575;128 font-size: 28px; text-align: center;129 }130 .ad-text { margin-left: 24px; }131 .ad-title { font-size: 60px; font-weight: 700; color: #0d2646; }132 .ad-sub { font-size: 40px; color: #2a8c3e; margin-top: 6px; }133 .ad-btn {134 margin-left: auto; background: #1fa457; color: #fff;135 padding: 24px 56px; border-radius: 60px; font-size: 54px; font-weight: 700;136 }137 138 /* Gesture bar */139 .gesture {140 position: absolute;141 bottom: 230px;142 left: 50%;143 transform: translateX(-50%);144 width: 300px;145 height: 12px;146 background: #fff;147 border-radius: 8px;148 opacity: .9;149 }150 151 /* Modal date picker */152 .overlay {153 position: absolute;154 inset: 0;155 background: rgba(0,0,0,0.45);156 }157 .date-modal {158 position: absolute;159 left: 115px;160 top: 515px;161 width: 850px;162 background: #424242;163 color: #fff;164 border-radius: 10px;165 box-shadow: 0 24px 60px rgba(0,0,0,0.6);166 overflow: hidden;167 }168 .modal-top {169 padding: 28px 30px 14px 30px;170 background: #424242;171 }172 .modal-year { color: #cfcfcf; font-size: 44px; margin-bottom: 10px; }173 .modal-big-date { font-size: 88px; font-weight: 700; letter-spacing: 1px; }174 175 .calendar {176 background: #3a3a3a;177 padding: 30px;178 box-sizing: border-box;179 }180 .cal-header {181 display: flex; align-items: center; justify-content: center;182 margin-bottom: 26px;183 position: relative;184 font-size: 44px; font-weight: 700;185 }186 .chev {187 position: absolute; top: 0; bottom: 0; margin: auto 0;188 width: 60px; height: 60px; display: flex; justify-content: center; align-items: center;189 opacity: .95; cursor: default;190 }191 .chev.left { left: 0; }192 .chev.right { right: 0; }193 .dow {194 display: grid;195 grid-template-columns: repeat(7, 1fr);196 text-align: center;197 font-size: 36px;198 color: #e1e1e1;199 opacity: .95;200 padding: 10px 0 18px;201 }202 .grid {203 display: grid;204 grid-template-columns: repeat(7, 1fr);205 grid-auto-rows: 96px;206 gap: 4px;207 text-align: center;208 }209 .cell {210 display: flex; align-items: center; justify-content: center;211 font-size: 40px; color: #fff; border-radius: 8px;212 }213 .cell:hover { background: rgba(255,255,255,0.06); }214 .cal-actions {215 display: flex; justify-content: flex-end; gap: 46px;216 padding: 28px 30px 36px;217 font-size: 46px; font-weight: 700;218 }219 .btn-gray { color: #e0e0e0; }220 .btn-blue { color: #9bd1ff; }221 /* subtle divider */222 .divider { height: 1px; background: rgba(255,255,255,0.07); }223 /* helper icon styles */224 svg.line { stroke:#fff; stroke-width:6; fill:none; stroke-linecap:round; }225</style>226</head>227<body>228<div id="render-target">229 230 <!-- Status bar -->231 <div class="status-bar">232 <div class="status-left">6:48</div>233 <div class="status-dots">234 <div class="status-dot"></div>235 <div class="status-dot"></div>236 <div class="status-dot"></div>237 <div class="status-dot"></div>238 <div class="status-dot"></div>239 <div class="status-dot" style="opacity:.6;"></div>240 </div>241 <div class="status-right">242 <svg width="34" height="28" viewBox="0 0 24 24" class="line"><path d="M2 18h2a16 16 0 0 1 16-16v2A14 14 0 0 0 4 18z"/></svg>243 <div class="icon-battery"><div class="fill"></div></div>244 </div>245 </div>246 247 <!-- App bar -->248 <div class="app-bar">249 <svg class="hamburger" viewBox="0 0 24 24" class="top-icon">250 <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z" fill="#fff"/>251 </svg>252 <div class="title">Tasks</div>253 <div class="actions">254 <!-- alarm plus -->255 <svg viewBox="0 0 24 24" class="top-icon">256 <path fill="#fff" d="M7.9 3.5 6.5 2 3.7 4.8l1.4 1.4L7.9 3.5zM20.3 4.8 17.5 2l-1.4 1.5 2.8 2.7 1.4-1.4zM12 6a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm1 6h3v2h-3v3h-2v-3H8v-2h3V9h2v3z"/>257 </svg>258 <!-- check circle -->259 <svg viewBox="0 0 24 24" class="top-icon">260 <path fill="#fff" d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm-1 14-4-4 1.4-1.4L11 12.2l5.6-5.6L18 8l-7 8z"/>261 </svg>262 <!-- search -->263 <svg viewBox="0 0 24 24" class="top-icon">264 <path fill="#fff" d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8L20 22l2-2-6.5-6zm-6 0A4.5 4.5 0 1 1 10 5a4.5 4.5 0 0 1-.5 9z"/>265 </svg>266 </div>267 </div>268 269 <!-- Content area mock -->270 <div class="content">271 <div class="section-header">Tomorrow</div>272 <div class="task-card">273 Catch Subway274 <div class="task-time">08:00 AM • 1 day</div>275 <div class="task-meta">Thu, Sep 28, 2023</div>276 </div>277 <div class="task-card">Yoga Class<div class="task-time">06:00 PM</div></div>278 <div class="task-card">Dance<div class="task-time">07:30 PM</div></div>279 <div class="task-card">Content Plan<div class="task-time">Due 10:00 PM</div></div>280 <div class="task-card">Christmas<div class="task-meta">Mon, Dec 25, 2023</div></div>281 <div class="task-card">Cooking Lunch<div class="task-time">02:00 PM • Once</div></div>282 </div>283 284 <!-- Floating action button -->285 <div class="fab" title="Add reminder">286 <svg viewBox="0 0 24 24">287 <path d="M12 8a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm1 4h-2v3H8v2h3v3h2v-3h3v-2h-3v-3z"/>288 <path d="M6.3 6.1 4.9 4.7 2.1 7.5l1.4 1.4 2.8-2.8zm16.2 1.4-2.8-2.8-1.4 1.4 2.8 2.8 1.4-1.4z" />289 </svg>290 </div>291 292 <!-- Modal overlay and date picker -->293 <div class="overlay"></div>294 <div class="date-modal">295 <div class="modal-top">296 <div class="modal-year">2023</div>297 <div class="modal-big-date">Wed, Sep 27</div>298 </div>299 <div class="divider"></div>300 <div class="calendar">301 <div class="cal-header">302 <div class="chev left">303 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M15 18 9 12l6-6" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>304 </div>305 October 2023306 <div class="chev right">307 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M9 6 15 12 9 18" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>308 </div>309 </div>310 <div class="dow">311 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>312 </div>313 <div class="grid">314 <!-- Row 1 -->315 <div class="cell">1</div>316 <div class="cell">2</div>317 <div class="cell">3</div>318 <div class="cell">4</div>319 <div class="cell">5</div>320 <div class="cell">6</div>321 <div class="cell">7</div>322 <!-- Row 2 -->323 <div class="cell">8</div>324 <div class="cell">9</div>325 <div class="cell">10</div>326 <div class="cell">11</div>327 <div class="cell">12</div>328 <div class="cell">13</div>329 <div class="cell">14</div>330 <!-- Row 3 -->331 <div class="cell">15</div>332 <div class="cell">16</div>333 <div class="cell">17</div>334 <div class="cell">18</div>335 <div class="cell">19</div>336 <div class="cell">20</div>337 <div class="cell">21</div>338 <!-- Row 4 -->339 <div class="cell">22</div>340 <div class="cell">23</div>341 <div class="cell">24</div>342 <div class="cell">25</div>343 <div class="cell">26</div>344 <div class="cell" style="background:#2c84d8;border-radius:10px;">27</div>345 <div class="cell">28</div>346 <!-- Row 5 -->347 <div class="cell">29</div>348 <div class="cell">30</div>349 <div class="cell">31</div>350 <div class="cell"></div>351 <div class="cell"></div>352 <div class="cell"></div>353 <div class="cell"></div>354 </div>355 </div>356 <div class="cal-actions">357 <div class="btn-gray">CANCEL</div>358 <div class="btn-blue">OK</div>359 </div>360 </div>361 362 <!-- Ad banner -->363 <div class="ad">364 <div class="ad-icon">[IMG: App Icon]</div>365 <div class="ad-text">366 <div class="ad-title">Omio</div>367 <div class="ad-sub">Installed</div>368 </div>369 <div class="ad-btn">Open</div>370 </div>371 372 <div class="gesture"></div>373</div>374</body>375</html>