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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #424242;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    background: #4e86ea;22    padding: 0 32px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    box-sizing: border-box;27  }28  .status-left { font-size: 42px; font-weight: 600; letter-spacing: 1px; }29  .status-right { display: flex; gap: 24px; align-items: center; }30  .status-icon svg { width: 36px; height: 36px; fill: #ffffff; opacity: 0.9; }31 32  /* App bar */33  .app-bar {34    height: 170px;35    background: #5ea2ff;36    display: flex;37    align-items: center;38    padding: 0 32px;39    box-sizing: border-box;40    justify-content: space-between;41  }42  .app-left {43    display: flex;44    align-items: center;45    gap: 24px;46  }47  .app-title { font-size: 58px; font-weight: 600; color: #fff; }48  .app-actions { display: flex; align-items: center; gap: 36px; }49  .icon-btn svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 6; }50 51  /* Section headers */52  .section-header {53    height: 86px;54    display: flex;55    align-items: center;56    padding: 0 32px;57    box-sizing: border-box;58    font-size: 44px;59    font-weight: 600;60  }61  .section-header.today { background: #e74d4d; color: #fff; }62  .section-header.next { background: #5ea2ff; color: #fff; }63 64  /* Task card */65  .task-card {66    position: relative;67    background: #2f2f2f;68    padding: 28px 32px;69    box-sizing: border-box;70    border-bottom: 1px solid rgba(255,255,255,0.08);71  }72  .task-title {73    font-size: 56px;74    font-weight: 600;75    color: #fff;76    margin: 8px 72px 16px 0;77  }78  .meta-row {79    display: flex;80    align-items: center;81    gap: 16px;82    color: #cfd8dc;83    margin: 8px 0;84    font-size: 36px;85  }86  .meta-row .meta {87    display: inline-flex;88    align-items: center;89    gap: 14px;90    margin-right: 36px;91  }92  .meta svg { width: 38px; height: 38px; fill: none; stroke: #cfd8dc; stroke-width: 5; opacity: 0.95; }93 94  .chevron {95    position: absolute;96    right: 24px;97    top: 28px;98    width: 56px;99    height: 56px;100    display: flex;101    align-items: center;102    justify-content: center;103    opacity: 0.8;104  }105  .chevron svg { width: 40px; height: 40px; fill: none; stroke: #b0bec5; stroke-width: 6; }106 107  /* Action toolbar */108  .action-toolbar {109    height: 96px;110    background: #5ea2ff;111    display: grid;112    grid-template-columns: repeat(4, 1fr);113    border-top: 1px solid rgba(255,255,255,0.15);114    border-bottom: 1px solid rgba(0,0,0,0.2);115  }116  .action-toolbar .tool {117    display: flex; align-items: center; justify-content: center;118    font-size: 36px; color: #fff; font-weight: 500;119    border-right: 1px solid rgba(0,0,0,0.18);120  }121  .action-toolbar .tool:last-child { border-right: none; }122 123  /* List item style for compact tasks in "Next 7 days" */124  .task-item {125    position: relative;126    background: #3a3a3a;127    padding: 22px 32px 28px 32px;128    box-sizing: border-box;129    border-bottom: 1px solid rgba(255,255,255,0.07);130  }131  .task-item .title {132    font-size: 52px;133    color: #fff;134    font-weight: 600;135    margin: 6px 72px 16px 0;136    text-transform: none;137  }138  .task-item .meta-row { font-size: 34px; color: #cfd8dc; }139  .task-item .chevron { top: 18px; }140 141  /* Floating action button */142  .fab {143    position: absolute;144    right: 48px;145    bottom: 330px;146    width: 140px;147    height: 140px;148    border-radius: 50%;149    background: radial-gradient(circle at 35% 25%, #7db9ff, #4e8ef5);150    box-shadow: 0 14px 28px rgba(0,0,0,0.35), 0 10px 10px rgba(0,0,0,0.22);151    display: flex; align-items: center; justify-content: center;152  }153  .fab svg { width: 80px; height: 80px; fill: none; stroke: #fff; stroke-width: 6; }154 155  /* Ad banner */156  .ad-banner {157    position: absolute;158    left: 40px;159    right: 40px;160    bottom: 120px;161    height: 164px;162    background: #ffffff;163    border: 2px solid #d0d0d0;164    border-radius: 8px;165    display: flex;166    align-items: center;167    padding: 18px 24px;168    box-sizing: border-box;169    gap: 24px;170    color: #222;171  }172  .ad-img {173    width: 140px; height: 120px;174    background: #E0E0E0;175    border: 1px solid #BDBDBD;176    display: flex; align-items: center; justify-content: center;177    color: #757575; font-size: 24px; text-align: center; padding: 6px;178  }179  .ad-text {180    flex: 1; font-size: 40px; color: #333; font-weight: 500;181  }182  .ad-btn {183    background: #111; color: #fff; font-size: 38px; font-weight: 700;184    border-radius: 56px; padding: 18px 44px; letter-spacing: 1px;185  }186 187  /* Navigation pill */188  .nav-pill {189    position: absolute;190    bottom: 34px;191    left: 50%;192    transform: translateX(-50%);193    width: 240px;194    height: 12px;195    background: #e8e8e8;196    border-radius: 8px;197    opacity: 0.9;198  }199</style>200</head>201<body>202  <div id="render-target">203 204    <!-- Status bar -->205    <div class="status-bar">206      <div class="status-left">6:36</div>207      <div class="status-right">208        <div class="status-icon" title="Wi‑Fi">209          <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M9 16c2-2 4-2 6 0"/><circle cx="12" cy="20" r="2" fill="#fff"/></svg>210        </div>211        <div class="status-icon" title="Signal">212          <svg viewBox="0 0 24 24"><rect x="3" y="14" width="3" height="7" fill="#fff"/><rect x="9" y="11" width="3" height="10" fill="#fff"/><rect x="15" y="8" width="3" height="13" fill="#fff"/></svg>213        </div>214        <div class="status-icon" title="Battery">215          <svg viewBox="0 0 26 24"><rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/><rect x="4" y="8" width="16" height="8" fill="#fff"/><rect x="22" y="10" width="2" height="4" fill="#fff"/></svg>216        </div>217      </div>218    </div>219 220    <!-- App bar -->221    <div class="app-bar">222      <div class="app-left">223        <!-- Hamburger -->224        <div class="icon-btn" title="Menu">225          <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>226        </div>227        <div class="app-title">Tasks</div>228      </div>229      <div class="app-actions">230        <!-- Alarm plus -->231        <div class="icon-btn" title="Add reminder">232          <svg viewBox="0 0 24 24">233            <circle cx="12" cy="13" r="7"></circle>234            <path d="M12 10v6M9 13h6"></path>235            <path d="M7 4L4 6M17 4l3 2"></path>236          </svg>237        </div>238        <!-- Check circle -->239        <div class="icon-btn" title="Mark done">240          <svg viewBox="0 0 24 24">241            <circle cx="12" cy="12" r="9"></circle>242            <path d="M8 12l3 3 5-6"></path>243          </svg>244        </div>245        <!-- Search -->246        <div class="icon-btn" title="Search">247          <svg viewBox="0 0 24 24">248            <circle cx="11" cy="11" r="7"></circle>249            <path d="M20 20l-4-4"></path>250          </svg>251        </div>252      </div>253    </div>254 255    <!-- Today header -->256    <div class="section-header today">Today</div>257 258    <!-- Today task card -->259    <div class="task-card">260      <div class="task-title">Buy groceries</div>261      <div class="meta-row">262        <span class="meta">263          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><path d="M12 8v5l3 2"></path></svg>264          <span>06:30 PM</span>265        </span>266        <span class="meta">267          <svg viewBox="0 0 24 24"><path d="M4 4h8v6H4z"></path><path d="M12 10l2-2 6 6-2 2"></path></svg>268          <span>Once</span>269        </span>270      </div>271      <div class="meta-row">272        <span class="meta">273          <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2" ry="2"></rect><path d="M3 9h18"></path><path d="M7 5v4M17 5v4"></path></svg>274          <span>Thu, Sep 28, 2023</span>275        </span>276      </div>277      <div class="chevron" title="Collapse">278        <svg viewBox="0 0 24 24"><path d="M6 14l6-6 6 6"></path></svg>279      </div>280    </div>281 282    <!-- Action toolbar -->283    <div class="action-toolbar">284      <div class="tool">Complete</div>285      <div class="tool">Edit</div>286      <div class="tool">Share</div>287      <div class="tool">Delete</div>288    </div>289 290    <!-- Next 7 days -->291    <div class="section-header next">Next 7 days</div>292 293    <!-- Upcoming task 1 -->294    <div class="task-item">295      <div class="title">Buy groceries</div>296      <div class="meta-row">297        <span class="meta">298          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><path d="M12 8v5l3 2"></path></svg>299          <span>06:25 PM</span>300        </span>301        <span class="meta">302          <svg viewBox="0 0 24 24"><path d="M4 4h8v6H4z"></path><path d="M12 10l2-2 6 6-2 2"></path></svg>303          <span>1 day</span>304        </span>305      </div>306      <div class="meta-row">307        <span class="meta">308          <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2" ry="2"></rect><path d="M3 9h18"></path><path d="M7 5v4M17 5v4"></path></svg>309          <span>Sat, Sep 30, 2023</span>310        </span>311      </div>312      <div class="chevron" title="Expand">313        <svg viewBox="0 0 24 24"><path d="M6 10l6 6 6-6"></path></svg>314      </div>315    </div>316 317    <!-- Upcoming task 2 -->318    <div class="task-item">319      <div class="title">swimming competition</div>320      <div class="meta-row">321        <span class="meta">322          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><path d="M12 8v5l3 2"></path></svg>323          <span>02:30 PM</span>324        </span>325        <span class="meta">326          <svg viewBox="0 0 24 24"><path d="M4 4h8v6H4z"></path><path d="M12 10l2-2 6 6-2 2"></path></svg>327          <span>Once</span>328        </span>329      </div>330      <div class="meta-row">331        <span class="meta">332          <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2" ry="2"></rect><path d="M3 9h18"></path><path d="M7 5v4M17 5v4"></path></svg>333          <span>Wed, Oct 04, 2023</span>334        </span>335      </div>336      <div class="chevron" title="Expand">337        <svg viewBox="0 0 24 24"><path d="M6 10l6 6 6-6"></path></svg>338      </div>339    </div>340 341    <!-- Spacer to push content -->342    <div style="height: 620px;"></div>343 344    <!-- Floating action button -->345    <div class="fab" title="Add reminder">346      <svg viewBox="0 0 24 24">347        <circle cx="12" cy="13" r="7"></circle>348        <path d="M12 10v6M9 13h6"></path>349        <path d="M7 4L4 6M17 4l3 2"></path>350      </svg>351    </div>352 353    <!-- Ad banner -->354    <div class="ad-banner">355      <div class="ad-img">[IMG: Avatar]</div>356      <div class="ad-text">Start chatting now!</div>357      <div class="ad-btn">OPEN</div>358    </div>359 360    <!-- Navigation pill -->361    <div class="nav-pill"></div>362 363  </div>364</body>365</html>