GD-ML/AndroidCode

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 Modal</title>6<style>7  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #0f1217;14    color: #fff;15  }16 17  /* Top app bar */18  .appbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 170px;24    background: #0b3a6f;25    box-shadow: 0 2px 6px rgba(0,0,0,0.4);26  }27 28  .appbar .title {29    position: absolute;30    left: 140px;31    top: 92px;32    font-size: 60px;33    font-weight: 700;34    letter-spacing: 0.5px;35  }36 37  .icon-btn {38    position: absolute;39    width: 70px; height: 70px;40    display: flex; align-items: center; justify-content: center;41    color: #cfe0ff;42  }43  .hamburger { left: 30px; top: 92px; }44  .icon-plus { right: 250px; top: 84px; }45  .icon-check { right: 150px; top: 84px; }46  .icon-search { right: 50px; top: 84px; }47 48  /* Content area */49  .content {50    position: absolute;51    top: 170px;52    left: 0;53    right: 0;54    bottom: 0;55    background: #121417;56  }57 58  .section-header {59    width: 100%;60    background: #d3a20f;61    color: #1d1200;62    font-weight: 700;63    font-size: 52px;64    padding: 24px 36px;65  }66 67  .task-card {68    margin: 24px 28px;69    background: #1c1f24;70    border-radius: 12px;71    padding: 28px;72    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);73  }74  .task-title { font-size: 52px; font-weight: 700; margin-bottom: 12px; }75  .task-meta { display: flex; gap: 22px; color: #c7c7c7; font-size: 36px; align-items: center; }76 77  /* Overlay for date picker */78  .overlay {79    position: absolute;80    left: 0; top: 0; right: 0; bottom: 0;81    background: rgba(0,0,0,0.6);82  }83 84  .dialog {85    position: absolute;86    width: 880px;87    height: 1000px;88    left: 100px;89    top: 520px;90    background: #3f3f3f;91    border-radius: 10px;92    overflow: hidden;93    box-shadow: 0 20px 60px rgba(0,0,0,0.6);94  }95 96  .dialog-header {97    padding: 28px 34px 10px;98    color: #fff;99  }100  .year-text { font-size: 40px; opacity: 0.9; }101  .date-large { font-size: 92px; font-weight: 700; margin-top: 10px; }102 103  .calendar {104    background: #2e2e2e;105    padding: 28px 28px 10px;106    height: 640px;107  }108 109  .cal-top {110    display: flex; align-items: center; justify-content: space-between;111    color: #ddd; font-size: 44px; margin-bottom: 18px;112  }113  .nav-btn {114    width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;115    border-radius: 50%;116    color: #eee;117  }118 119  .dow {120    display: grid;121    grid-template-columns: repeat(7, 1fr);122    gap: 8px;123    text-align: center;124    color: #bfc4c7;125    font-size: 36px;126    margin-bottom: 10px;127  }128  .days {129    display: grid;130    grid-template-columns: repeat(7, 1fr);131    gap: 8px;132    text-align: center;133  }134 135  .day {136    height: 86px;137    display: flex; align-items: center; justify-content: center;138    color: #e6e6e6;139    font-size: 40px;140    border-radius: 50%;141  }142 143  .muted { opacity: 0.5; }144 145  .selected {146    background: #2a74ff;147    color: #fff;148  }149 150  .dialog-actions {151    position: absolute;152    bottom: 0; left: 0; right: 0;153    padding: 26px 36px 34px;154    display: flex; justify-content: space-between;155    background: #3f3f3f;156    font-size: 44px; color: #fff; letter-spacing: 1px;157  }158 159  /* Bottom ad bar placeholder */160  .adbar {161    position: absolute;162    left: 0; right: 0; bottom: 0;163    height: 140px;164    background: #e0e0e0;165    border-top: 1px solid #bdbdbd;166    display: flex; align-items: center; justify-content: space-between;167    padding: 0 28px;168    color: #555;169    font-size: 40px;170  }171  .ad-pill {172    background: #1db954; color: #fff; padding: 20px 46px; border-radius: 36px; font-weight: 700;173  }174 175  /* Simple inline icon styling */176  svg { width: 46px; height: 46px; fill: currentColor; }177</style>178</head>179<body>180<div id="render-target">181  <!-- App bar -->182  <div class="appbar">183    <div class="icon-btn hamburger">184      <!-- Hamburger icon -->185      <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="2"></rect><rect x="3" y="11" width="18" height="2"></rect><rect x="3" y="17" width="18" height="2"></rect></svg>186    </div>187    <div class="title">Tasks</div>188    <div class="icon-btn icon-plus">189      <!-- Plus in circle -->190      <svg viewBox="0 0 24 24">191        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle>192        <rect x="11" y="6" width="2" height="12" fill="currentColor"></rect>193        <rect x="6" y="11" width="12" height="2" fill="currentColor"></rect>194      </svg>195    </div>196    <div class="icon-btn icon-check">197      <!-- Check circle -->198      <svg viewBox="0 0 24 24">199        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle>200        <path d="M7 12l3 3 7-7" stroke="currentColor" stroke-width="2" fill="none"></path>201      </svg>202    </div>203    <div class="icon-btn icon-search">204      <!-- Search icon -->205      <svg viewBox="0 0 24 24">206        <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2" fill="none"></circle>207        <path d="M21 21l-4.2-4.2" stroke="currentColor" stroke-width="2" fill="none"></path>208      </svg>209    </div>210  </div>211 212  <!-- Content area -->213  <div class="content">214    <div class="section-header">Tomorrow</div>215 216    <div class="task-card">217      <div class="task-title">Catch Subway</div>218      <div class="task-meta">219        <span>08:00 AM</span>220        <span>•</span>221        <span>1 day</span>222        <span>• Thu, Sep 28, 2023</span>223      </div>224    </div>225 226    <div class="task-card">227      <div class="task-title">Yoga</div>228      <div class="task-meta">229        <span>06:00 PM</span>230        <span>• Once</span>231      </div>232    </div>233 234    <div class="task-card">235      <div class="task-title">Dance</div>236      <div class="task-meta">237        <span>10:30 PM</span>238        <span>• Mon, Dec 25, 2023</span>239      </div>240    </div>241 242    <div class="task-card">243      <div class="task-title">Cooking Lunch</div>244      <div class="task-meta">245        <span>02:00 PM</span>246        <span>• Once</span>247      </div>248    </div>249  </div>250 251  <!-- Modal overlay with date picker -->252  <div class="overlay"></div>253  <div class="dialog">254    <div class="dialog-header">255      <div class="year-text">2023</div>256      <div class="date-large">Wed, Sep 27</div>257    </div>258 259    <div class="calendar">260      <div class="cal-top">261        <div class="nav-btn">262          <!-- left chevron -->263          <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" fill="none" stroke="currentColor" stroke-width="2"/></svg>264        </div>265        <div>September 2023</div>266        <div class="nav-btn">267          <!-- right chevron -->268          <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>269        </div>270      </div>271 272      <div class="dow">273        <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>274      </div>275 276      <div class="days">277        <!-- Row 1 (placeholders for spacing of first week) -->278        <div class="day muted"> </div>279        <div class="day muted"> </div>280        <div class="day muted"> </div>281        <div class="day muted"> </div>282        <div class="day">1</div>283        <div class="day">2</div>284        <div class="day">3</div>285 286        <!-- Row 2 -->287        <div class="day">4</div>288        <div class="day">5</div>289        <div class="day">6</div>290        <div class="day">7</div>291        <div class="day">8</div>292        <div class="day">9</div>293        <div class="day">10</div>294 295        <!-- Row 3 -->296        <div class="day">11</div>297        <div class="day">12</div>298        <div class="day">13</div>299        <div class="day">14</div>300        <div class="day">15</div>301        <div class="day">16</div>302        <div class="day">17</div>303 304        <!-- Row 4 -->305        <div class="day">18</div>306        <div class="day">19</div>307        <div class="day">20</div>308        <div class="day">21</div>309        <div class="day">22</div>310        <div class="day">23</div>311        <div class="day">24</div>312 313        <!-- Row 5 -->314        <div class="day">25</div>315        <div class="day">26</div>316        <div class="day selected">27</div>317        <div class="day">28</div>318        <div class="day">29</div>319        <div class="day">30</div>320        <div class="day muted"> </div>321      </div>322    </div>323 324    <div class="dialog-actions">325      <div>CANCEL</div>326      <div>OK</div>327    </div>328  </div>329 330  <!-- Bottom Ad -->331  <div class="adbar">332    <div>[IMG: App Promotion Banner]</div>333    <div class="ad-pill">Open</div>334  </div>335</div>336</body>337</html>