GD-ML/AndroidCode

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 UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #EDEDED;16  }17 18  /* Status + App Bar */19  .status-bar {20    height: 90px;21    background: #0e3a66;22  }23  .appbar {24    height: 190px;25    background: #0e3a66;26    display: flex;27    align-items: center;28    padding: 0 40px;29    color: #d7e7ff;30  }31  .appbar .left {32    display: flex;33    align-items: center;34    gap: 28px;35    flex: 1;36  }37  .appbar-title {38    font-size: 64px;39    font-weight: 600;40    letter-spacing: 0.5px;41  }42  .appbar .actions {43    display: flex;44    align-items: center;45    gap: 40px;46  }47  .icon {48    width: 64px;49    height: 64px;50    fill: #c9deff;51    opacity: 0.9;52  }53 54  /* Content area */55  .content {56    position: relative;57    height: calc(2400px - 280px);58    overflow: hidden;59    background: #121212;60  }61  .scroll {62    height: 100%;63    overflow-y: auto;64    padding-bottom: 240px;65  }66 67  /* Section headers */68  .section-header {69    padding: 18px 40px;70    font-size: 46px;71    font-weight: 600;72    letter-spacing: 0.2px;73  }74  .section-today {75    background: #c62828;76    color: #ffffff;77  }78  .section-next {79    background: #1565c0;80    color: #ffffff;81  }82 83  /* Task card */84  .task-card {85    margin: 18px 32px 26px 32px;86    background: #1b1b1b;87    border-radius: 16px;88    box-shadow: 0 4px 14px rgba(0,0,0,0.5);89    border: 1px solid #2a2a2a;90  }91  .task-body {92    padding: 26px 32px 12px 32px;93  }94  .task-title {95    font-size: 60px;96    font-weight: 600;97    margin: 6px 0 22px 0;98    color: #f0f0f0;99  }100  .task-meta {101    display: flex;102    flex-direction: column;103    gap: 16px;104    color: #b9b9b9;105    font-size: 40px;106  }107  .meta-row {108    display: flex;109    align-items: center;110    gap: 16px;111  }112  .meta-row svg {113    width: 44px;114    height: 44px;115    fill: #9aa3ab;116  }117  .task-actions {118    display: flex;119    justify-content: space-around;120    padding: 20px 0;121    background: #0f4f8c;122    border-radius: 0 0 16px 16px;123    border-top: 1px solid #204a71;124  }125  .task-actions span {126    color: #e6f1ff;127    font-size: 42px;128  }129 130  /* Floating action button */131  .fab {132    position: absolute;133    right: 48px;134    bottom: 210px;135    width: 150px;136    height: 150px;137    background: radial-gradient(circle at 30% 30%, #3aa0ff, #0f67b9);138    border-radius: 50%;139    display: flex;140    align-items: center;141    justify-content: center;142    box-shadow: 0 14px 28px rgba(0,0,0,0.45);143    border: 3px solid rgba(255,255,255,0.12);144  }145  .fab svg { width: 80px; height: 80px; fill: #eaf3ff; }146 147  /* Ad banner placeholder */148  .ad-banner {149    position: absolute;150    bottom: 90px;151    left: 24px;152    right: 24px;153    height: 140px;154    background: #E0E0E0;155    border: 1px solid #BDBDBD;156    color: #555;157    display: flex;158    align-items: center;159    justify-content: center;160    font-size: 40px;161    border-radius: 8px;162  }163 164  /* Gesture pill */165  .gesture-pill {166    position: absolute;167    bottom: 22px;168    left: 50%;169    transform: translateX(-50%);170    width: 280px;171    height: 14px;172    background: #f0f0f0;173    border-radius: 12px;174    opacity: 0.9;175  }176 177  /* Modal overlay */178  .dim {179    position: absolute;180    inset: 0;181    background: rgba(0,0,0,0.55);182  }183  .modal {184    position: absolute;185    left: 60px;186    right: 60px;187    top: 930px;188    background: #3f3f3f;189    border-radius: 12px;190    color: #fff;191    box-shadow: 0 20px 50px rgba(0,0,0,0.6);192  }193  .modal .text {194    padding: 42px 44px 16px 44px;195    font-size: 48px;196    line-height: 1.3;197  }198  .modal .btn-row {199    display: flex;200    justify-content: flex-end;201    gap: 60px;202    padding: 0 44px 36px 44px;203  }204  .modal .btn-row button {205    background: transparent;206    color: #ffffff;207    border: none;208    font-size: 46px;209    letter-spacing: 1px;210    padding: 12px 8px;211    cursor: default;212  }213</style>214</head>215<body>216<div id="render-target">217 218  <div class="status-bar"></div>219 220  <div class="appbar">221    <div class="left">222      <!-- Hamburger -->223      <svg class="icon" viewBox="0 0 24 24">224        <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"></path>225      </svg>226      <div class="appbar-title">Tasks</div>227    </div>228    <div class="actions">229      <!-- Alarm plus -->230      <svg class="icon" viewBox="0 0 24 24">231        <path d="M7 4l-2-2L3.6 3.4 6 5zm10 0l2-2 1.4 1.4L18 5zM12 7a7 7 0 100 14 7 7 0 000-14zm1 6h3v2h-3v3h-2v-3H8v-2h3V10h2z"></path>232      </svg>233      <!-- Check circle -->234      <svg class="icon" viewBox="0 0 24 24">235        <path d="M12 2a10 10 0 100 20 10 10 0 000-20zm-1 14l-3-3 1.4-1.4L11 12.2l4.6-4.6L17 9l-6 7z"></path>236      </svg>237      <!-- Search -->238      <svg class="icon" viewBox="0 0 24 24">239        <path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 10-1.06 1.06l.27.28v.79L20 21l1-1-5.5-5zM6.5 11a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0z"></path>240      </svg>241    </div>242  </div>243 244  <div class="content">245    <div class="scroll">246      <div class="section-header section-today">Today</div>247 248      <div class="task-card">249        <div class="task-body">250          <div class="task-title">Buy groceries</div>251          <div class="task-meta">252            <div class="meta-row">253              <!-- clock -->254              <svg viewBox="0 0 24 24">255                <path d="M12 2a10 10 0 100 20A10 10 0 0012 2zm1 11H7v-2h4V5h2v8z"></path>256              </svg>257              <span>06:30 PM</span>258              <!-- repeat -->259              <svg viewBox="0 0 24 24">260                <path d="M7 7h9V4l4 4-4 4V9H7a3 3 0 000 6h5v2H7a5 5 0 010-10z"></path>261              </svg>262              <span>Once</span>263            </div>264            <div class="meta-row">265              <!-- calendar -->266              <svg viewBox="0 0 24 24">267                <path d="M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm13 7H4v11h16V9z"></path>268              </svg>269              <span>Thu, Sep 28, 2023</span>270            </div>271          </div>272        </div>273        <div class="task-actions">274          <span>Complete</span>275          <span>Edit</span>276          <span>Share</span>277          <span>Delete</span>278        </div>279      </div>280 281      <div class="section-header section-next">Next 7 days</div>282 283      <div class="task-card" style="opacity:0.85;">284        <div class="task-body">285          <div class="task-title">Buy groceries</div>286          <div class="task-meta">287            <div class="meta-row">288              <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20A10 10 0 0012 2zm1 11H7v-2h4V5h2v8z"></path></svg>289              <span>06:25 PM</span>290              <svg viewBox="0 0 24 24"><path d="M7 7h9V4l4 4-4 4V9H7a3 3 0 000 6h5v2H7a5 5 0 010-10z"></path></svg>291              <span>1 day</span>292            </div>293            <div class="meta-row">294              <svg viewBox="0 0 24 24"><path d="M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm13 7H4v11h16V9z"></path></svg>295              <span>Sat, Sep 30, 2023</span>296            </div>297          </div>298        </div>299      </div>300 301      <div class="task-card" style="opacity:0.75;">302        <div class="task-body">303          <div class="task-title">swimming competition</div>304          <div class="task-meta">305            <div class="meta-row">306              <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20A10 10 0 0012 2zm1 11H7v-2h4V5h2v8z"></path></svg>307              <span>08:00 AM</span>308            </div>309            <div class="meta-row">310              <svg viewBox="0 0 24 24"><path d="M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm13 7H4v11h16V9z"></path></svg>311              <span>Sun, Oct 1, 2023</span>312            </div>313          </div>314        </div>315      </div>316 317      <!-- Spacer to mirror scroll content -->318      <div style="height: 320px;"></div>319    </div>320 321    <!-- Floating action button -->322    <div class="fab" title="Add alarm task">323      <svg viewBox="0 0 24 24">324        <path d="M7 4l-2-2L3.6 3.4 6 5zm10 0l2-2 1.4 1.4L18 5zM12 7a7 7 0 100 14 7 7 0 000-14zm1 6h3v2h-3v3h-2v-3H8v-2h3V10h2z"></path>325      </svg>326    </div>327 328    <!-- Ad banner placeholder -->329    <div class="ad-banner">[IMG: Ad Banner - Install Prompt]</div>330 331    <!-- Modal overlay and dialog -->332    <div class="dim"></div>333    <div class="modal">334      <div class="text">Are you sure? You want to complete this task.</div>335      <div class="btn-row">336        <button>NO</button>337        <button>YES</button>338      </div>339    </div>340 341    <!-- Gesture pill -->342    <div class="gesture-pill"></div>343  </div>344</div>345</body>346</html>