GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Tasks UI</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: #121717;15    color: #E6ECEB;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    height: 80px;22    padding: 0 40px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #E9EFEF;27    font-size: 34px;28    letter-spacing: 0.5px;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 24px;34  }35  .sb-dot {36    width: 10px; height: 10px; background: #C9D3D2; border-radius: 50%;37    display: inline-block; margin: 0 4px;38  }39  .icon-wifi, .icon-battery {40    width: 40px; height: 40px;41  }42 43  /* App header */44  .app-header {45    padding: 10px 40px 0 40px;46  }47  .headline {48    font-size: 76px;49    font-weight: 500;50    margin: 10px 0 20px 0;51    letter-spacing: 0.2px;52  }53  .header-row {54    display: flex;55    align-items: center;56    justify-content: space-between;57  }58  .avatar {59    width: 84px; height: 84px; background: #C44B21; border-radius: 50%;60    color: #fff; display: flex; align-items: center; justify-content: center;61    font-weight: 700; font-size: 42px;62  }63 64  /* Tabs */65  .tabs {66    margin-top: 10px;67    display: flex;68    align-items: center;69    gap: 46px;70    padding: 0 40px;71    border-bottom: 2px solid rgba(255,255,255,0.08);72  }73  .tab {74    color: #B6C0BF;75    font-size: 36px;76    padding: 26px 0;77    position: relative;78    display: flex;79    align-items: center;80    gap: 14px;81  }82  .tab.active {83    color: #9DEBE3;84  }85  .tab.active::after {86    content: "";87    position: absolute;88    bottom: -2px; left: 0;89    width: 160px; height: 6px; background: #35CFC1; border-radius: 6px;90  }91  .star-tab {92    width: 36px; height: 36px;93  }94 95  /* Content list */96  .content {97    padding: 30px 40px 0 40px;98    font-size: 42px;99    line-height: 1.4;100  }101  .section-label {102    color: #E79A9A;103    font-size: 36px;104    margin: 24px 0 18px 0;105  }106  .section-label.blue { color: #7EB5FF; }107  .date-label {108    color: #A8B3B2;109    font-size: 38px;110    margin: 40px 0 14px 0;111  }112 113  .task {114    display: flex;115    align-items: flex-start;116    justify-content: space-between;117    padding: 18px 0 36px 0;118  }119  .task-left {120    display: flex;121    gap: 26px;122    align-items: flex-start;123    width: 880px;124  }125  .checkbox {126    width: 48px; height: 48px; border-radius: 50%;127    border: 3px solid #8AA1A0; box-sizing: border-box; margin-top: 6px;128  }129  .task-title {130    font-size: 44px;131    color: #E8EEED;132  }133  .chip {134    margin-top: 16px;135    display: inline-flex;136    align-items: center;137    gap: 16px;138    padding: 14px 24px;139    border-radius: 20px;140    border: 2px solid #6D8080;141    color: #CFE5E3;142    font-size: 34px;143  }144  .icon-repeat {145    width: 34px; height: 34px;146  }147  .task-star {148    width: 46px; height: 46px; opacity: 0.5;149    margin-right: 12px;150  }151 152  .divider {153    height: 2px; background: rgba(255,255,255,0.08); margin: 30px 0;154  }155 156  /* Completed row */157  .completed-row {158    display: flex; justify-content: space-between; align-items: center;159    color: #E6ECEB; font-size: 40px; padding: 22px 0;160    border-top: 2px solid rgba(255,255,255,0.1);161  }162  .chev {163    width: 34px; height: 34px;164  }165 166  /* Bottom bar and FAB */167  .bottom-bar {168    position: absolute; left: 0; right: 0; bottom: 0;169    height: 210px; background: #172323;170    border-top: 2px solid rgba(255,255,255,0.06);171  }172  .bottom-actions {173    position: absolute; left: 44px; bottom: 86px;174    display: flex; gap: 80px; align-items: center;175  }176  .bicon { width: 56px; height: 56px; opacity: 0.9; }177  .fab {178    position: absolute; right: 44px; bottom: 44px;179    width: 162px; height: 162px; background: #2A4D4B;180    border-radius: 36px;181    display: flex; align-items: center; justify-content: center;182  }183  .fab-plus {184    width: 64px; height: 64px;185  }186 187  /* Gesture bar */188  .gesture {189    position: absolute; bottom: 24px; left: 50%;190    transform: translateX(-50%);191    width: 360px; height: 12px; border-radius: 8px; background: #EDEFF0; opacity: 0.9;192  }193</style>194</head>195<body>196<div id="render-target">197  <!-- Status bar -->198  <div class="status-bar">199    <div>9:01 <span class="sb-dot"></span><span class="sb-dot"></span><span class="sb-dot"></span><span class="sb-dot"></span> •</div>200    <div class="status-right">201      <svg class="icon-wifi" viewBox="0 0 24 24" fill="#EAEFEF"><path d="M12 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-6-6 2 2a8 8 0 0 1 12 0l2-2a11 11 0 0 0-16 0Zm-4-4 2 2a14 14 0 0 1 20 0l2-2a17 17 0 0 0-24 0Z"/></svg>202      <svg class="icon-battery" viewBox="0 0 24 24" fill="#EAEFEF"><path d="M17 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v-2h-9a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h9V6Z"/><rect x="6" y="8" width="9" height="8" fill="#EAEFEF"/></svg>203    </div>204  </div>205 206  <!-- App Header -->207  <div class="app-header">208    <div class="header-row">209      <div class="headline">Tasks</div>210      <div class="avatar">C</div>211    </div>212  </div>213 214  <!-- Tabs -->215  <div class="tabs">216    <div class="tab">217      <svg class="star-tab" viewBox="0 0 24 24" fill="none" stroke="#9BA9A8" stroke-width="2"><path d="M12 3l2.7 5.6 6.3.9-4.5 4.4 1 6.2L12 17l-5.5 3 1-6.2L3 9.5l6.3-.9L12 3z"/></svg>218    </div>219    <div class="tab active">My Tasks</div>220    <div class="tab">Work</div>221    <div class="tab">Personal</div>222    <div class="tab">+ New list</div>223  </div>224 225  <!-- Content -->226  <div class="content">227    <div class="section-label">Past</div>228    <div class="task">229      <div class="task-left">230        <div class="checkbox"></div>231        <div>232          <div class="task-title">Gym session</div>233          <div class="chip">234            Yesterday235            <svg class="icon-repeat" viewBox="0 0 24 24" fill="#CFE5E3"><path d="M12 6V3l4 4-4 4V8a4 4 0 1 0 4 4h2a6 6 0 1 1-6-6Z"/></svg>236          </div>237        </div>238      </div>239      <svg class="task-star" viewBox="0 0 24 24" fill="none" stroke="#A7B2B1" stroke-width="2"><path d="M12 3l2.7 5.6 6.3.9-4.5 4.4 1 6.2L12 17l-5.5 3 1-6.2L3 9.5l6.3-.9L12 3z"/></svg>240    </div>241 242    <div class="section-label blue">Today</div>243    <div class="task">244      <div class="task-left">245        <div class="checkbox"></div>246        <div>247          <div class="task-title">Task update</div>248          <div class="chip">249            10:30 AM250            <svg class="icon-repeat" viewBox="0 0 24 24" fill="#CFE5E3"><path d="M12 6V3l4 4-4 4V8a4 4 0 1 0 4 4h2a6 6 0 1 1-6-6Z"/></svg>251          </div>252        </div>253      </div>254      <svg class="task-star" viewBox="0 0 24 24" fill="none" stroke="#A7B2B1" stroke-width="2"><path d="M12 3l2.7 5.6 6.3.9-4.5 4.4 1 6.2L12 17l-5.5 3 1-6.2L3 9.5l6.3-.9L12 3z"/></svg>255    </div>256 257    <div class="date-label">Sun, Aug 6</div>258    <div class="task">259      <div class="task-left">260        <div class="checkbox"></div>261        <div>262          <div class="task-title">Potluck Lunch</div>263        </div>264      </div>265      <svg class="task-star" viewBox="0 0 24 24" fill="none" stroke="#A7B2B1" stroke-width="2"><path d="M12 3l2.7 5.6 6.3.9-4.5 4.4 1 6.2L12 17l-5.5 3 1-6.2L3 9.5l6.3-.9L12 3z"/></svg>266    </div>267 268    <div class="date-label">Tue, Aug 8</div>269    <div class="task">270      <div class="task-left">271        <div class="checkbox"></div>272        <div>273          <div class="task-title">Meeting with Alex</div>274        </div>275      </div>276      <svg class="task-star" viewBox="0 0 24 24" fill="none" stroke="#A7B2B1" stroke-width="2"><path d="M12 3l2.7 5.6 6.3.9-4.5 4.4 1 6.2L12 17l-5.5 3 1-6.2L3 9.5l6.3-.9L12 3z"/></svg>277    </div>278 279    <div class="completed-row">280      <div>Completed (1)</div>281      <svg class="chev" viewBox="0 0 24 24" fill="#D7E1E0"><path d="M6 9l6 6 6-6H6z"/></svg>282    </div>283  </div>284 285  <!-- Bottom actions -->286  <div class="bottom-bar">287    <div class="bottom-actions">288      <svg class="bicon" viewBox="0 0 24 24" fill="#D7E1E0"><path d="M3 3h8v8H3V3Zm10 0h8v8h-8V3ZM3 13h8v8H3v-8Zm10 0h8v8h-8v-8Z"/></svg>289      <svg class="bicon" viewBox="0 0 24 24" fill="#D7E1E0"><path d="M7 3h4v4H7V3Zm6 14h4v4h-4v-4ZM4 11h16v2H4v-2Zm2 7 4-4H6v4Zm12-6-4-4h4v4Z"/></svg>290      <svg class="bicon" viewBox="0 0 24 24" fill="#D7E1E0"><circle cx="5" cy="12" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="19" cy="12" r="2.2"/></svg>291    </div>292    <div class="fab">293      <svg class="fab-plus" viewBox="0 0 24 24" fill="#CFF2F0"><path d="M10 4h4v6h6v4h-6v6h-4v-6H4v-4h6V4z"/></svg>294    </div>295  </div>296 297  <div class="gesture"></div>298</div>299</body>300</html>