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 - Personal</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F5FAFB;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #2b3a42;17  }18 19  /* Status bar */20  .status {21    position: absolute;22    top: 28px;23    left: 40px;24    right: 40px;25    height: 80px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #5d6b75;30    font-weight: 600;31    letter-spacing: 0.5px;32  }33  .status .time { font-size: 36px; }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .icon-24 { width: 36px; height: 36px; }40  .icon-24 svg { width: 100%; height: 100%; fill: none; stroke: #5d6b75; stroke-width: 2.4; }41 42  /* Tabs */43  .tabs {44    position: absolute;45    top: 180px;46    left: 40px;47    right: 40px;48    display: flex;49    align-items: center;50    gap: 20px;51  }52  .pill {53    padding: 22px 34px;54    border-radius: 40px;55    background: #E6EDF3;56    color: #5c6f7b;57    font-size: 34px;58    line-height: 1;59    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);60  }61  .pill.active {62    background: #86A8FF;63    color: #fff;64    font-weight: 600;65  }66  .tabs .spacer { flex: 1; }67  .more-btn {68    width: 72px;69    height: 72px;70    border-radius: 24px;71    display: flex;72    align-items: center;73    justify-content: center;74  }75  .more-btn svg { fill: #8696a0; }76 77  /* Dropdown menu card */78  .menu-card {79    position: absolute;80    top: 420px;81    right: 110px;82    width: 480px;83    background: #ffffff;84    border-radius: 28px;85    box-shadow: 0 14px 40px rgba(0,0,0,0.12);86    z-index: 5;87    padding: 24px 0;88  }89  .menu-item {90    padding: 24px 36px;91    font-size: 36px;92    color: #2b3a42;93  }94  .menu-item + .menu-item { border-top: 1px solid rgba(0,0,0,0.04); }95 96  /* Section header */97  .section {98    position: absolute;99    top: 340px;100    left: 40px;101    right: 40px;102    font-size: 44px;103    font-weight: 700;104    color: #2b3a42;105    display: flex;106    align-items: center;107    gap: 12px;108  }109  .section .caret {110    width: 20px; height: 20px;111    border: 10px solid transparent;112    border-bottom-color: #7d8e99;113    transform: rotate(180deg);114    margin-top: 8px;115  }116 117  /* Task list */118  .list {119    position: absolute;120    top: 420px;121    left: 40px;122    right: 40px;123  }124  .task {125    position: relative;126    background: #ECF3F4;127    border-radius: 28px;128    padding: 36px 120px 32px 120px;129    margin-bottom: 28px;130    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);131  }132  .check {133    position: absolute;134    left: 32px;135    top: 40px;136    width: 54px; height: 54px;137    border-radius: 50%;138    border: 4px solid #9fb0ba;139    background: transparent;140  }141  .task-title {142    font-size: 42px;143    font-weight: 600;144    color: #2b3a42;145    margin-bottom: 10px;146    white-space: nowrap;147    overflow: hidden;148    text-overflow: ellipsis;149  }150  .task-date {151    font-size: 32px;152    color: #8fa0aa;153  }154  .flag {155    position: absolute;156    right: 36px;157    top: 44px;158    width: 42px; height: 42px;159  }160  .flag svg { width: 100%; height: 100%; fill: #b9c6ce; }161 162  /* Floating action button */163  .fab {164    position: absolute;165    right: 120px;166    bottom: 360px;167    width: 160px;168    height: 160px;169    border-radius: 50%;170    background: #7FAAFB;171    box-shadow: 0 24px 40px rgba(126,160,224,0.5), inset 0 0 0 24px rgba(255,255,255,0.18);172    display: flex;173    align-items: center;174    justify-content: center;175  }176  .fab svg { width: 72px; height: 72px; stroke: #ffffff; stroke-width: 10; }177 178  /* Bottom navigation */179  #bottom-nav {180    position: absolute;181    left: 0; right: 0; bottom: 120px;182    height: 200px;183    background: #ffffff;184    box-shadow: 0 -6px 20px rgba(0,0,0,0.06);185    display: flex;186    align-items: center;187    justify-content: space-around;188  }189  .nav-item {190    width: 25%;191    text-align: center;192    color: #9aa7af;193    font-size: 32px;194  }195  .nav-item .nicon { margin: 0 auto 12px; width: 58px; height: 58px; }196  .nav-item .nicon svg { width: 100%; height: 100%; stroke: #a7b4bc; stroke-width: 2.6; fill: none; }197  .nav-item.active { color: #4285f4; font-weight: 600; }198  .nav-item.active .nicon svg { stroke: #4285f4; }199  .red-dot {200    position: absolute;201    left: 120px;202    bottom: 208px;203    width: 16px; height: 16px;204    background: #ff4d4f;205    border-radius: 50%;206  }207 208  /* Home indicator */209  .home-indicator {210    position: absolute;211    left: 50%;212    bottom: 52px;213    transform: translateX(-50%);214    width: 400px;215    height: 16px;216    background: #000;217    opacity: 0.85;218    border-radius: 10px;219  }220</style>221</head>222<body>223<div id="render-target">224 225  <!-- Status bar -->226  <div class="status">227    <div class="time">12:29</div>228    <div class="status-icons">229      <!-- trophy/star -->230      <div class="icon-24">231        <svg viewBox="0 0 24 24"><path d="M12 3l2.4 5h5.6l-4.5 3.2 1.7 5.3L12 14.7 6.8 16.5l1.7-5.3L4 8h5.6L12 3z"/></svg>232      </div>233      <!-- bell -->234      <div class="icon-24">235        <svg viewBox="0 0 24 24"><path d="M12 3c-3 0-5 2-5 5v4l-2 3h14l-2-3V8c0-3-2-5-5-5z"/><circle cx="12" cy="19" r="2"/></svg>236      </div>237      <!-- check -->238      <div class="icon-24">239        <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg>240      </div>241      <!-- twitter like bird (simple) -->242      <div class="icon-24">243        <svg viewBox="0 0 24 24"><path d="M22 6c-1 .5-2 .8-3 1 1-1 1.5-2 1.7-3.2-1 .7-2 1.2-3.2 1.5-2-2-5.8-.4-5.5 2.9-4.8-.3-7.9-2.4-10-5.2C2.2 6.9 3.6 8 5 8.5c-1 .1-1.7-.1-2.3-.6.1 2 1.7 3.3 3.7 3.6-.8.2-1.6.2-2.4 0 .7 1.6 2.3 2.6 4.2 2.6C7.7 15.3 5.7 16 4 16c1.9 1.2 4.1 1.8 6.3 1.8 7.6 0 11.8-6.3 11.4-12.8z"/></svg>244      </div>245      <!-- dot -->246      <div style="width:8px;height:8px;border-radius:50%;background:#5d6b75;"></div>247      <!-- copy/clipboard -->248      <div class="icon-24">249        <svg viewBox="0 0 24 24"><path d="M9 3h6l1 2h3v16H5V5h3l1-2z"/></svg>250      </div>251    </div>252  </div>253 254  <!-- Tabs -->255  <div class="tabs">256    <div class="pill">All</div>257    <div class="pill">Work</div>258    <div class="pill active">Personal</div>259    <div class="pill">Wishlist</div>260    <div class="spacer"></div>261    <div class="more-btn">262      <svg width="40" height="40" viewBox="0 0 24 24">263        <circle cx="12" cy="5" r="2"/>264        <circle cx="12" cy="12" r="2"/>265        <circle cx="12" cy="19" r="2"/>266      </svg>267    </div>268  </div>269 270  <!-- Section header -->271  <div class="section">272    Future273    <div class="caret"></div>274  </div>275 276  <!-- Task list -->277  <div class="list">278    <div class="task">279      <div class="check"></div>280      <div class="task-title">Order a new car key</div>281      <div class="task-date">08-05</div>282      <div class="flag">283        <svg viewBox="0 0 24 24"><path d="M6 21V5h9l-1.5 3L18 11H6z"/></svg>284      </div>285    </div>286 287    <div class="task">288      <div class="check"></div>289      <div class="task-title">Help sasha with math test</div>290      <div class="task-date">08-01</div>291      <div class="flag">292        <svg viewBox="0 0 24 24"><path d="M6 21V5h9l-1.5 3L18 11H6z"/></svg>293      </div>294    </div>295 296    <div class="task">297      <div class="check"></div>298      <div class="task-title">Buy groceries</div>299      <div class="task-date">07-29</div>300      <div class="flag">301        <svg viewBox="0 0 24 24"><path d="M6 21V5h9l-1.5 3L18 11H6z"/></svg>302      </div>303    </div>304 305    <div class="task">306      <div class="check"></div>307      <div class="task-title">Buy a present for Bill</div>308      <div class="task-date">08-17</div>309      <div class="flag">310        <svg viewBox="0 0 24 24"><path d="M6 21V5h9l-1.5 3L18 11H6z"/></svg>311      </div>312    </div>313  </div>314 315  <!-- Dropdown menu card -->316  <div class="menu-card">317    <div class="menu-item">Manage Categories</div>318    <div class="menu-item">Search</div>319    <div class="menu-item">Sort by</div>320    <div class="menu-item">Print</div>321    <div class="menu-item">Upgrade to PRO</div>322  </div>323 324  <!-- Floating action button -->325  <div class="fab">326    <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>327  </div>328 329  <!-- Bottom navigation -->330  <div id="bottom-nav">331    <div class="nav-item">332      <div class="nicon">333        <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h12M4 18h8"/></svg>334      </div>335      Menu336    </div>337    <div class="nav-item active">338      <div class="nicon">339        <svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2"/><path d="M8 9h8M8 13h8"/></svg>340      </div>341      Tasks342    </div>343    <div class="nav-item">344      <div class="nicon">345        <svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2"/><path d="M8 3v4M16 3v4M7 10h10M7 14h6"/></svg>346      </div>347      Calendar348    </div>349    <div class="nav-item">350      <div class="nicon">351        <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c2-4 6-5 8-5s6 1 8 5"/></svg>352      </div>353      Mine354    </div>355  </div>356  <div class="red-dot"></div>357 358  <!-- Home indicator -->359  <div class="home-indicator"></div>360</div>361</body>362</html>