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; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F3F7F8;15  }16 17  /* Status bar */18  .status-bar {19    height: 140px;20    display: flex;21    align-items: center;22    padding: 32px 40px;23    color: #8D97A6;24    font-size: 36px;25  }26  .status-left { display: flex; align-items: center; gap: 26px; }27  .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }28 29  /* Chips */30  .chip-row {31    display: flex;32    align-items: center;33    gap: 22px;34    padding: 10px 40px 0;35  }36  .chip {37    background: #E7EEF7;38    color: #7D8B9B;39    border-radius: 40px;40    padding: 18px 34px;41    font-size: 36px;42    font-weight: 600;43  }44  .chip.active {45    background: #88ABFF;46    color: #FFFFFF;47  }48 49  /* Section header */50  .section-title {51    display: flex;52    align-items: center;53    gap: 12px;54    padding: 34px 40px 10px;55    color: #3F4A55;56    font-size: 56px;57    font-weight: 800;58  }59 60  /* Task cards */61  .task-card {62    margin: 18px 40px;63    background: #ECF2F3;64    border-radius: 28px;65    padding: 34px 40px;66    display: flex;67    align-items: center;68    box-shadow: 0 2px 0 rgba(0,0,0,0.02);69  }70  .checkbox {71    width: 60px;72    height: 60px;73    border-radius: 50%;74    box-sizing: border-box;75    border: 5px solid #AEB7C1;76    margin-right: 36px;77    background: transparent;78  }79  .task-text { flex: 1; }80  .task-title {81    margin: 0;82    font-size: 44px;83    color: #1F2A35;84    letter-spacing: 0.2px;85    font-weight: 600;86  }87  .task-date {88    margin: 8px 0 0;89    font-size: 32px;90    color: #99A7B3;91    font-weight: 500;92  }93  .flag {94    width: 64px;95    height: 64px;96    color: #AEB7C1;97    opacity: 0.9;98  }99 100  /* Floating action button */101  .fab {102    position: absolute;103    right: 64px;104    bottom: 330px;105    width: 160px;106    height: 160px;107    border-radius: 50%;108    background: #88ABFF;109    box-shadow: 0 14px 22px rgba(0,0,0,0.16);110    display: flex;111    align-items: center;112    justify-content: center;113  }114 115  /* Bottom navigation */116  .bottom-nav {117    position: absolute;118    left: 0;119    bottom: 0;120    width: 100%;121    height: 220px;122    background: #FFFFFF;123    border-top: 1px solid #E2E7EC;124    display: flex;125    justify-content: space-around;126    align-items: center;127  }128  .nav-item {129    width: 200px;130    display: flex;131    flex-direction: column;132    align-items: center;133    gap: 16px;134    color: #A3ACB6;135    font-size: 32px;136    font-weight: 600;137  }138  .nav-item.active { color: #2F74FF; }139  .nav-icon { width: 64px; height: 64px; }140  .red-dot {141    position: absolute;142    top: -6px;143    right: -6px;144    width: 16px; height: 16px; background: #FF5A5A; border-radius: 50%;145  }146 147  /* Home indicator */148  .home-indicator {149    position: absolute;150    bottom: 16px;151    left: 50%;152    transform: translateX(-50%);153    width: 320px;154    height: 12px;155    background: #DADDE2;156    border-radius: 8px;157  }158</style>159</head>160<body>161<div id="render-target">162 163  <!-- Status Bar -->164  <div class="status-bar">165    <div class="status-left">166      <span style="color:#3B4450;font-weight:700;">12:29</span>167      <!-- small icons -->168      <svg width="32" height="32" viewBox="0 0 24 24" fill="none">169        <circle cx="12" cy="12" r="9" stroke="#97A3B1" stroke-width="2"/>170        <path d="M12 6v6l4 2" stroke="#97A3B1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>171      </svg>172      <svg width="32" height="32" viewBox="0 0 24 24" fill="none">173        <circle cx="12" cy="12" r="9" stroke="#97A3B1" stroke-width="2"/>174        <path d="M8 12l2 2 5-5" stroke="#97A3B1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>175      </svg>176      <svg width="32" height="32" viewBox="0 0 24 24" fill="none">177        <path d="M4 7h16M4 12h16M4 17h16" stroke="#97A3B1" stroke-width="2" stroke-linecap="round"/>178      </svg>179      <svg width="32" height="32" viewBox="0 0 24 24" fill="none">180        <path d="M4 8c4 0 6-4 8-4s4 4 8 4c-1 8-6 12-8 12S5 16 4 8z" stroke="#97A3B1" stroke-width="2" fill="none"/>181      </svg>182      <svg width="6" height="6"><circle cx="3" cy="3" r="3" fill="#97A3B1"/></svg>183    </div>184    <div class="status-right">185      <svg width="32" height="32" viewBox="0 0 24 24" fill="none">186        <path d="M7 4h10v16H7z" stroke="#97A3B1" stroke-width="2"/>187        <path d="M9 4V2h6v2" stroke="#97A3B1" stroke-width="2"/>188      </svg>189      <svg width="30" height="30" viewBox="0 0 24 24" fill="none">190        <circle cx="12" cy="5" r="2" fill="#97A3B1"/>191        <circle cx="12" cy="12" r="2" fill="#97A3B1"/>192        <circle cx="12" cy="19" r="2" fill="#97A3B1"/>193      </svg>194    </div>195  </div>196 197  <!-- Chips -->198  <div class="chip-row">199    <div class="chip">All</div>200    <div class="chip">Work</div>201    <div class="chip active">Personal</div>202    <div class="chip">Wishlist</div>203    <svg width="30" height="30" viewBox="0 0 24 24" fill="none">204      <circle cx="12" cy="5" r="2" fill="#9AA4AF"/>205      <circle cx="12" cy="12" r="2" fill="#9AA4AF"/>206      <circle cx="12" cy="19" r="2" fill="#9AA4AF"/>207    </svg>208  </div>209 210  <!-- Section Title -->211  <div class="section-title">212    <span>Future</span>213    <svg width="36" height="36" viewBox="0 0 24 24" fill="none">214      <path d="M6 14l6-6 6 6" stroke="#9AA4AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>215    </svg>216  </div>217 218  <!-- Task Cards -->219  <div class="task-card">220    <div class="checkbox"></div>221    <div class="task-text">222      <h3 class="task-title">Order a new car key</h3>223      <div class="task-date">08-05</div>224    </div>225    <svg class="flag" viewBox="0 0 24 24" fill="none">226      <path d="M6 21V5a2 2 0 012-2h7l-1.5 3L17 9H8" stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>227    </svg>228  </div>229 230  <div class="task-card">231    <div class="checkbox"></div>232    <div class="task-text">233      <h3 class="task-title">Help sasha with math test</h3>234      <div class="task-date">08-01</div>235    </div>236    <svg class="flag" viewBox="0 0 24 24" fill="none">237      <path d="M6 21V5a2 2 0 012-2h7l-1.5 3L17 9H8" stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>238    </svg>239  </div>240 241  <div class="task-card">242    <div class="checkbox"></div>243    <div class="task-text">244      <h3 class="task-title">Buy groceries</h3>245      <div class="task-date">07-29</div>246    </div>247    <svg class="flag" viewBox="0 0 24 24" fill="none">248      <path d="M6 21V5a2 2 0 012-2h7l-1.5 3L17 9H8" stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>249    </svg>250  </div>251 252  <div class="task-card">253    <div class="checkbox"></div>254    <div class="task-text">255      <h3 class="task-title">Buy a present for Bill</h3>256      <div class="task-date">08-17</div>257    </div>258    <svg class="flag" viewBox="0 0 24 24" fill="none">259      <path d="M6 21V5a2 2 0 012-2h7l-1.5 3L17 9H8" stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>260    </svg>261  </div>262 263  <!-- Floating Action Button -->264  <div class="fab">265    <svg width="80" height="80" viewBox="0 0 24 24" fill="none">266      <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>267    </svg>268  </div>269 270  <!-- Bottom Navigation -->271  <div class="bottom-nav">272    <div class="nav-item" style="position:relative;">273      <div style="position:relative;">274        <svg class="nav-icon" viewBox="0 0 24 24" fill="none">275          <path d="M3 7h18M3 12h18M3 17h18" stroke="#9FA7B2" stroke-width="2" stroke-linecap="round"/>276        </svg>277        <span class="red-dot"></span>278      </div>279      <div>Menu</div>280    </div>281 282    <div class="nav-item active">283      <svg class="nav-icon" viewBox="0 0 24 24" fill="none">284        <rect x="4" y="5" width="16" height="14" rx="3" stroke="#2F74FF" stroke-width="2"/>285        <path d="M8 9h8M8 13h8" stroke="#2F74FF" stroke-width="2" stroke-linecap="round"/>286      </svg>287      <div>Tasks</div>288    </div>289 290    <div class="nav-item">291      <svg class="nav-icon" viewBox="0 0 24 24" fill="none">292        <rect x="3" y="4" width="18" height="16" rx="3" stroke="#A3ACB6" stroke-width="2"/>293        <path d="M3 9h18" stroke="#A3ACB6" stroke-width="2"/>294        <path d="M8 13h2M14 13h2" stroke="#A3ACB6" stroke-width="2" stroke-linecap="round"/>295      </svg>296      <div>Calendar</div>297    </div>298 299    <div class="nav-item">300      <svg class="nav-icon" viewBox="0 0 24 24" fill="none">301        <circle cx="12" cy="8" r="4" stroke="#A3ACB6" stroke-width="2"/>302        <path d="M4 20c2.5-4 13.5-4 16 0" stroke="#A3ACB6" stroke-width="2" stroke-linecap="round"/>303      </svg>304      <div>Mine</div>305    </div>306  </div>307 308  <!-- Home Indicator -->309  <div class="home-indicator"></div>310</div>311</body>312</html>