GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Tasks - Calendar Dialog</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0d3567; /* overall app background (navy header look) */13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 90px;22 background: #0d3567;23 color: #ffffff;24 display: flex;25 align-items: center;26 padding: 0 30px;27 font-size: 32px;28 letter-spacing: 0.5px;29 }30 .status-icons {31 margin-left: auto;32 display: flex;33 gap: 20px;34 align-items: center;35 }36 .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; display: inline-block; opacity: 0.9; }37 .wifi {38 width: 28px; height: 28px;39 border: 3px solid #fff; border-radius: 50%; position: relative;40 }41 .wifi::after {42 content: ""; position: absolute; width: 10px; height: 10px; border: 3px solid #fff; border-radius: 50%;43 top: 6px; left: 6px;44 }45 .battery {46 width: 28px; height: 16px; border: 3px solid #fff; border-radius: 4px; position: relative;47 }48 .battery::after { content: ""; position: absolute; right: -6px; top: 4px; width: 6px; height: 8px; background: #fff; }49 50 /* App header */51 .app-header {52 position: absolute;53 top: 90px;54 left: 0;55 width: 1080px;56 height: 150px;57 background: #0b3a6f;58 color: #ffffff;59 display: flex;60 align-items: center;61 padding: 0 30px;62 }63 .hamburger {64 width: 60px; height: 60px; margin-right: 20px;65 }66 .hamburger svg { width: 100%; height: 100%; }67 .title {68 font-size: 64px;69 font-weight: 700;70 letter-spacing: 0.5px;71 }72 .header-icons {73 margin-left: auto;74 display: flex;75 gap: 30px;76 }77 .icon-btn {78 width: 72px; height: 72px;79 }80 .icon-btn svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 4; }81 82 /* Content area under header */83 .content {84 position: absolute;85 top: 240px;86 left: 0;87 width: 1080px;88 height: 2160px;89 background: #121212;90 color: #eaeaea;91 }92 .section-label {93 background: #ffcc4a;94 color: #1a1a1a;95 font-weight: 700;96 font-size: 48px;97 padding: 24px 30px;98 }99 .task-card {100 padding: 26px 30px;101 border-bottom: 1px solid #2c2c2c;102 background: #1b1b1b;103 color: #fff;104 }105 .task-title { font-size: 54px; margin-bottom: 12px; }106 .task-meta { font-size: 32px; color: #cfcfcf; display: flex; gap: 24px; align-items: center; }107 .small-icon {108 width: 32px; height: 32px; margin-right: 8px;109 }110 111 /* Ad banner at bottom */112 .ad-banner {113 position: absolute;114 bottom: 60px;115 left: 0;116 width: 1080px;117 height: 180px;118 background: #ffffff;119 border-top: 1px solid #e0e0e0;120 display: flex;121 align-items: center;122 padding: 0 30px;123 color: #0b3a6f;124 font-size: 46px;125 }126 .ad-img {127 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;128 display: flex; justify-content: center; align-items: center; color: #757575; margin-right: 24px; border-radius: 24px;129 }130 .ad-status { color: #2e7d32; font-size: 36px; margin-left: 12px; }131 .ad-open {132 margin-left: auto;133 background: #1db954;134 color: #fff; font-weight: 700;135 padding: 22px 44px; border-radius: 50px; font-size: 44px;136 }137 138 /* Bottom navigation pill */139 .nav-pill {140 position: absolute;141 bottom: 16px;142 left: 50%;143 transform: translateX(-50%);144 width: 240px; height: 16px; background: #dcdcdc; border-radius: 12px;145 }146 147 /* Calendar dialog */148 .dialog {149 position: absolute;150 left: 115px; /* center visually */151 top: 520px;152 width: 850px;153 background: #424242;154 color: #fff;155 border-radius: 18px;156 box-shadow: 0 24px 48px rgba(0,0,0,0.6);157 overflow: hidden;158 }159 .dialog-header {160 padding: 36px 40px 28px 40px;161 background: #4a4a4a;162 }163 .year {164 font-size: 40px;165 color: #cfcfcf;166 margin-bottom: 12px;167 }168 .picked-date {169 font-size: 88px;170 font-weight: 700;171 }172 .dialog-body {173 background: #2e2e2e;174 padding: 26px 36px 20px 36px;175 }176 .month-row {177 display: flex; align-items: center; justify-content: center;178 margin-bottom: 24px;179 position: relative;180 font-size: 42px;181 font-weight: 700;182 }183 .arrow-left, .arrow-right {184 position: absolute; top: 50%; transform: translateY(-50%);185 width: 60px; height: 60px;186 }187 .arrow-left { left: 0; }188 .arrow-right { right: 0; }189 .weekday-row {190 display: grid;191 grid-template-columns: repeat(7, 1fr);192 font-size: 34px; color: #bdbdbd;193 text-align: center;194 margin-bottom: 14px;195 }196 .days-grid {197 display: grid;198 grid-template-columns: repeat(7, 1fr);199 gap: 26px 0;200 text-align: center;201 font-size: 42px;202 color: #ffffff;203 padding: 10px 0 20px 0;204 }205 .day { padding: 16px 0; }206 .selected {207 width: 90px; height: 90px; margin: 0 auto;208 background: #1e74ff;209 border-radius: 50%;210 display: flex; align-items: center; justify-content: center;211 font-weight: 700;212 }213 .dialog-footer {214 display: flex; justify-content: space-between; align-items: center;215 padding: 26px 40px 34px 40px;216 background: #424242;217 font-size: 44px;218 color: #ffffff;219 }220 .btn-cancel { color: #ffffff; opacity: 0.9; }221 .btn-ok { margin-left: auto; }222</style>223</head>224<body>225<div id="render-target">226 <!-- Status bar -->227 <div class="status-bar">228 6:48229 <div class="status-icons">230 <span class="dot"></span>231 <span class="dot"></span>232 <span class="dot"></span>233 <span class="dot"></span>234 <span class="dot"></span>235 <div class="wifi"></div>236 <div class="battery"></div>237 </div>238 </div>239 240 <!-- App header -->241 <div class="app-header">242 <div class="hamburger">243 <svg viewBox="0 0 24 24">244 <rect x="2" y="4" width="20" height="3" fill="#fff"></rect>245 <rect x="2" y="10.5" width="20" height="3" fill="#fff"></rect>246 <rect x="2" y="17" width="20" height="3" fill="#fff"></rect>247 </svg>248 </div>249 <div class="title">Tasks</div>250 <div class="header-icons">251 <!-- add-alarm -->252 <div class="icon-btn">253 <svg viewBox="0 0 24 24">254 <circle cx="12" cy="13" r="7" stroke="#fff"></circle>255 <line x1="12" y1="9" x2="12" y2="17" stroke="#fff"></line>256 <line x1="8" y1="13" x2="16" y2="13" stroke="#fff"></line>257 <path d="M3 6 L7 3" stroke="#fff"></path>258 <path d="M21 6 L17 3" stroke="#fff"></path>259 </svg>260 </div>261 <!-- check -->262 <div class="icon-btn">263 <svg viewBox="0 0 24 24">264 <circle cx="12" cy="12" r="10" stroke="#fff"></circle>265 <path d="M7 12 L10 15 L17 8" stroke="#fff" fill="none"></path>266 </svg>267 </div>268 <!-- search -->269 <div class="icon-btn">270 <svg viewBox="0 0 24 24">271 <circle cx="11" cy="11" r="7" stroke="#fff"></circle>272 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#fff"></line>273 </svg>274 </div>275 </div>276 </div>277 278 <!-- Content area -->279 <div class="content">280 <div class="section-label">Tomorrow</div>281 282 <div class="task-card">283 <div class="task-title">Catch Subway</div>284 <div class="task-meta">285 <svg class="small-icon" viewBox="0 0 24 24">286 <circle cx="12" cy="12" r="10" stroke="#cfcfcf" fill="none"></circle>287 <path d="M12 6 L12 12 L16 14" stroke="#cfcfcf" fill="none"></path>288 </svg> 08:00 AM289 <svg class="small-icon" viewBox="0 0 24 24">290 <path d="M8 3 H16 V7 H21 V21 H3 V7 H8 Z" stroke="#cfcfcf" fill="none"></path>291 </svg> 1 day292 <svg class="small-icon" viewBox="0 0 24 24">293 <rect x="3" y="5" width="18" height="16" stroke="#cfcfcf" fill="none"></rect>294 <line x1="8" y1="2" x2="8" y2="8" stroke="#cfcfcf"></line>295 <line x1="16" y1="2" x2="16" y2="8" stroke="#cfcfcf"></line>296 </svg> Thu, Sep 28, 2023297 </div>298 </div>299 300 <div class="task-card">301 <div class="task-title">Yoga Class</div>302 <div class="task-meta">303 <svg class="small-icon" viewBox="0 0 24 24">304 <circle cx="12" cy="12" r="10" stroke="#cfcfcf" fill="none"></circle>305 <path d="M12 6 L12 12 L16 14" stroke="#cfcfcf" fill="none"></path>306 </svg> 06:00 PM307 </div>308 </div>309 310 <div class="task-card">311 <div class="task-title">Dance Practice</div>312 <div class="task-meta">313 <svg class="small-icon" viewBox="0 0 24 24">314 <rect x="3" y="5" width="18" height="16" stroke="#cfcfcf" fill="none"></rect>315 </svg> Wed, Oct 4, 2023316 </div>317 </div>318 </div>319 320 <!-- Calendar dialog -->321 <div class="dialog">322 <div class="dialog-header">323 <div class="year">2023</div>324 <div class="picked-date">Sat, Oct 7</div>325 </div>326 327 <div class="dialog-body">328 <div class="month-row">329 <div class="arrow-left">330 <svg viewBox="0 0 24 24">331 <path d="M15 4 L7 12 L15 20" stroke="#fff" fill="none" stroke-width="2"></path>332 </svg>333 </div>334 October 2023335 <div class="arrow-right">336 <svg viewBox="0 0 24 24">337 <path d="M9 4 L17 12 L9 20" stroke="#fff" fill="none" stroke-width="2"></path>338 </svg>339 </div>340 </div>341 342 <div class="weekday-row">343 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>344 </div>345 346 <div class="days-grid">347 <div class="day">1</div>348 <div class="day">2</div>349 <div class="day">3</div>350 <div class="day">4</div>351 <div class="day">5</div>352 <div class="day">6</div>353 <div class="day"><div class="selected">7</div></div>354 355 <div class="day">8</div>356 <div class="day">9</div>357 <div class="day">10</div>358 <div class="day">11</div>359 <div class="day">12</div>360 <div class="day">13</div>361 <div class="day">14</div>362 363 <div class="day">15</div>364 <div class="day">16</div>365 <div class="day">17</div>366 <div class="day">18</div>367 <div class="day">19</div>368 <div class="day">20</div>369 <div class="day">21</div>370 371 <div class="day">22</div>372 <div class="day">23</div>373 <div class="day">24</div>374 <div class="day">25</div>375 <div class="day">26</div>376 <div class="day">27</div>377 <div class="day">28</div>378 379 <div class="day">29</div>380 <div class="day">30</div>381 <div class="day">31</div>382 <div class="day"></div>383 <div class="day"></div>384 <div class="day"></div>385 <div class="day"></div>386 </div>387 </div>388 389 <div class="dialog-footer">390 <div class="btn-cancel">CANCEL</div>391 <div class="btn-ok">OK</div>392 </div>393 </div>394 395 <!-- Ad banner -->396 <div class="ad-banner">397 <div class="ad-img">[IMG: App Icon]</div>398 Omio <span class="ad-status">✓ Installed</span>399 <div class="ad-open">Open</div>400 </div>401 402 <div class="nav-pill"></div>403</div>404</body>405</html>