Spaces:

akhaliq
/

anycoder-ab5b78bc

Running

App Files Files Community

akhaliq HF Staff commited on 20 days ago

Commit

c2c74f9

verified ·

1 Parent(s): ad945a4

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +1415 -19

index.html CHANGED Viewed

@@ -1,19 +1,1415 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>FlowTask - Advanced Todo Manager</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    :root {
+      --apple-blue: #007AFF;
+      --apple-blue-dark: #0051D5;
+      --apple-green: #34C759;
+      --apple-red: #FF3B30;
+      --apple-orange: #FF9500;
+      --apple-yellow: #FFCC00;
+      --apple-purple: #AF52DE;
+      --apple-gray: #8E8E93;
+      --apple-gray-light: #C7C7CC;
+      --apple-gray-ultralight: #F2F2F7;
+      --apple-background: #FFFFFF;
+      --apple-surface: #F9F9F9;
+      --apple-border: rgba(0, 0, 0, 0.1);
+      --apple-text-primary: #000000;
+      --apple-text-secondary: #3C3C43;
+      --apple-text-tertiary: #3C3C4399;
+      --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
+      --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.07);
+      --shadow-heavy: 0 10px 15px rgba(0, 0, 0, 0.1);
+      --radius-small: 8px;
+      --radius-medium: 12px;
+      --radius-large: 20px;
+      --radius-xl: 28px;
+      --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    [data-theme="dark"] {
+      --apple-blue: #0A84FF;
+      --apple-blue-dark: #409CFF;
+      --apple-green: #30D158;
+      --apple-red: #FF453A;
+      --apple-orange: #FF9F0A;
+      --apple-yellow: #FFD60A;
+      --apple-purple: #BF5AF2;
+      --apple-gray: #8E8E93;
+      --apple-gray-light: #48484A;
+      --apple-gray-ultralight: #1C1C1E;
+      --apple-background: #000000;
+      --apple-surface: #1C1C1E;
+      --apple-border: rgba(255, 255, 255, 0.08);
+      --apple-text-primary: #FFFFFF;
+      --apple-text-secondary: #EBEBF5;
+      --apple-text-tertiary: #EBEBF599;
+      --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.3);
+      --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.2);
+      --shadow-heavy: 0 10px 15px rgba(0, 0, 0, 0.3);
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
+      background: var(--apple-surface);
+      min-height: 100vh;
+      color: var(--apple-text-primary);
+      transition: background-color var(--transition-medium);
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    .apple-bg {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(135deg, var(--apple-surface) 0%, var(--apple-background) 100%);
+      z-index: -1;
+    }
+    [data-theme="dark"] .apple-bg {
+      background: linear-gradient(135deg, #000000 0%, #1C1C1E 100%);
+    }
+    .apple-blur {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: radial-gradient(ellipse at top, rgba(0, 122, 255, 0.1) 0%, transparent 50%);
+      z-index: -1;
+      opacity: 0.5;
+    }
+    [data-theme="dark"] .apple-blur {
+      background: radial-gradient(ellipse at top, rgba(10, 132, 255, 0.15) 0%, transparent 50%);
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    header {
+      text-align: center;
+      padding: 40px 0;
+      position: relative;
+    }
+    .header-content {
+      display: inline-block;
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      background: rgba(255, 255, 255, 0.7);
+      border-radius: var(--radius-xl);
+      padding: 30px 50px;
+      border: 1px solid var(--apple-border);
+      box-shadow: var(--shadow-medium);
+    }
+    [data-theme="dark"] .header-content {
+      background: rgba(28, 28, 30, 0.7);
+    }
+    h1 {
+      font-size: 2.5rem;
+      font-weight: 700;
+      margin-bottom: 8px;
+      letter-spacing: -0.02em;
+      background: linear-gradient(135deg, var(--apple-blue) 0%, var(--apple-purple) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .subtitle {
+      font-size: 1rem;
+      color: var(--apple-text-secondary);
+      font-weight: 400;
+      margin-bottom: 20px;
+    }
+    .header-actions {
+      display: flex;
+      justify-content: center;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+    .apple-btn {
+      background: var(--apple-background);
+      border: 1px solid var(--apple-border);
+      color: var(--apple-text-primary);
+      padding: 10px 20px;
+      border-radius: var(--radius-large);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+      font-size: 0.9rem;
+      font-weight: 500;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .apple-btn:hover {
+      background: var(--apple-gray-ultralight);
+      transform: scale(1.02);
+      box-shadow: var(--shadow-medium);
+    }
+    [data-theme="dark"] .apple-btn:hover {
+      background: var(--apple-gray-light);
+    }
+    .main-content {
+      display: grid;
+      grid-template-columns: 1fr 380px;
+      gap: 30px;
+      margin-top: 40px;
+    }
+    @media (max-width: 1024px) {
+      .main-content {
+        grid-template-columns: 1fr;
+      }
+    }
+    .apple-card {
+      background: var(--apple-background);
+      border-radius: var(--radius-large);
+      padding: 30px;
+      box-shadow: var(--shadow-light);
+      border: 1px solid var(--apple-border);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+    }
+    .input-group {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 24px;
+    }
+    .apple-input {
+      flex: 1;
+      padding: 14px 20px;
+      border: 1px solid var(--apple-border);
+      border-radius: var(--radius-medium);
+      font-size: 1rem;
+      transition: all var(--transition-fast);
+      background: var(--apple-surface);
+      color: var(--apple-text-primary);
+    }
+    .apple-input:focus {
+      outline: none;
+      border-color: var(--apple-blue);
+      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
+    }
+    .apple-input::placeholder {
+      color: var(--apple-text-tertiary);
+    }
+    .input-options {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 24px;
+      flex-wrap: wrap;
+    }
+    .apple-select {
+      padding: 10px 16px;
+      border: 1px solid var(--apple-border);
+      border-radius: var(--radius-small);
+      background: var(--apple-surface);
+      color: var(--apple-text-primary);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+      font-size: 0.9rem;
+    }
+    .apple-select:focus {
+      outline: none;
+      border-color: var(--apple-blue);
+    }
+    .apple-btn-primary {
+      background: var(--apple-blue);
+      color: white;
+      border: none;
+      padding: 14px 28px;
+      border-radius: var(--radius-medium);
+      font-weight: 600;
+      transition: all var(--transition-fast);
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+    .apple-btn-primary:hover {
+      background: var(--apple-blue-dark);
+      transform: translateY(-1px);
+      box-shadow: var(--shadow-medium);
+    }
+    .apple-search {
+      position: relative;
+      margin-bottom: 24px;
+    }
+    .apple-search-input {
+      width: 100%;
+      padding: 12px 45px 12px 20px;
+      border: 1px solid var(--apple-border);
+      border-radius: var(--radius-medium);
+      background: var(--apple-surface);
+      color: var(--apple-text-primary);
+      transition: all var(--transition-fast);
+    }
+    .apple-search-input:focus {
+      outline: none;
+      border-color: var(--apple-blue);
+      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
+    }
+    .apple-search-icon {
+      position: absolute;
+      right: 15px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--apple-gray);
+      pointer-events: none;
+    }
+    .apple-tabs {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 24px;
+      padding: 4px;
+      background: var(--apple-surface);
+      border-radius: var(--radius-medium);
+    }
+    .apple-tab {
+      flex: 1;
+      padding: 10px 16px;
+      background: transparent;
+      border: none;
+      color: var(--apple-text-secondary);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+      font-weight: 500;
+      border-radius: var(--radius-small);
+      font-size: 0.9rem;
+    }
+    .apple-tab:hover {
+      background: var(--apple-gray-ultralight);
+    }
+    [data-theme="dark"] .apple-tab:hover {
+      background: var(--apple-gray-light);
+    }
+    .apple-tab.active {
+      background: var(--apple-background);
+      color: var(--apple-blue);
+      box-shadow: var(--shadow-light);
+    }
+    .todo-list {
+      list-style: none;
+      max-height: 500px;
+      overflow-y: auto;
+      padding-right: 5px;
+    }
+    .todo-list::-webkit-scrollbar {
+      width: 6px;
+    }
+    .todo-list::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .todo-list::-webkit-scrollbar-thumb {
+      background: var(--apple-gray-light);
+      border-radius: 10px;
+    }
+    .todo-item {
+      background: var(--apple-surface);
+      border: 1px solid var(--apple-border);
+      border-radius: var(--radius-medium);
+      padding: 16px;
+      margin-bottom: 12px;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      transition: all var(--transition-fast);
+      cursor: move;
+      position: relative;
+    }
+    .todo-item:hover {
+      transform: translateX(4px);
+      box-shadow: var(--shadow-medium);
+      border-color: var(--apple-gray-light);
+    }
+    .todo-item.dragging {
+      opacity: 0.5;
+      transform: rotate(2deg);
+    }
+    .todo-item.completed {
+      opacity: 0.6;
+    }
+    .todo-item.completed .todo-text {
+      text-decoration: line-through;
+      color: var(--apple-text-tertiary);
+    }
+    .apple-checkbox {
+      width: 22px;
+      height: 22px;
+      cursor: pointer;
+      accent-color: var(--apple-blue);
+    }
+    .todo-content {
+      flex: 1;
+    }
+    .todo-text {
+      font-size: 1rem;
+      margin-bottom: 6px;
+      color: var(--apple-text-primary);
+      font-weight: 400;
+    }
+    .todo-meta {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      font-size: 0.85rem;
+      color: var(--apple-text-tertiary);
+    }
+    .priority-badge {
+      padding: 3px 10px;
+      border-radius: var(--radius-small);
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .priority-high {
+      background: rgba(255, 59, 48, 0.15);
+      color: var(--apple-red);
+    }
+    .priority-medium {
+      background: rgba(255, 149, 0, 0.15);
+      color: var(--apple-orange);
+    }
+    .priority-low {
+      background: rgba(0, 122, 255, 0.15);
+      color: var(--apple-blue);
+    }
+    .category-tag {
+      padding: 3px 10px;
+      border-radius: var(--radius-small);
+      font-size: 0.75rem;
+      background: rgba(175, 82, 222, 0.15);
+      color: var(--apple-purple);
+      font-weight: 500;
+    }
+    .todo-actions {
+      display: flex;
+      gap: 8px;
+    }
+    .action-btn {
+      width: 36px;
+      height: 36px;
+      border: none;
+      background: transparent;
+      color: var(--apple-gray);
+      cursor: pointer;
+      border-radius: var(--radius-small);
+      transition: all var(--transition-fast);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .action-btn:hover {
+      background: var(--apple-gray-ultralight);
+      color: var(--apple-blue);
+    }
+    [data-theme="dark"] .action-btn:hover {
+      background: var(--apple-gray-light);
+    }
+    .action-btn.delete:hover {
+      color: var(--apple-red);
+    }
+    .sidebar {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+    .stats-card {
+      background: var(--apple-background);
+      border-radius: var(--radius-large);
+      padding: 28px;
+      box-shadow: var(--shadow-light);
+      border: 1px solid var(--apple-border);
+    }
+    .stats-title {
+      font-size: 1.2rem;
+      font-weight: 600;
+      margin-bottom: 20px;
+      color: var(--apple-text-primary);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .stat-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid var(--apple-border);
+    }
+    .stat-item:last-child {
+      border-bottom: none;
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+    .stat-label {
+      color: var(--apple-text-secondary);
+      font-size: 0.9rem;
+      font-weight: 400;
+    }
+    .stat-value {
+      font-size: 1.8rem;
+      font-weight: 700;
+      color: var(--apple-blue);
+    }
+    .progress-bar {
+      width: 100%;
+      height: 6px;
+      background: var(--apple-gray-ultralight);
+      border-radius: 10px;
+      overflow: hidden;
+      margin-top: 10px;
+    }
+    .progress-fill {
+      height: 100%;
+      background: linear-gradient(90deg, var(--apple-blue) 0%, var(--apple-purple) 100%);
+      border-radius: 10px;
+      transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .apple-btn-danger {
+      background: var(--apple-red);
+      color: white;
+      border: none;
+      padding: 14px 28px;
+      border-radius: var(--radius-medium);
+      font-weight: 600;
+      transition: all var(--transition-fast);
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      width: 100%;
+      justify-content: center;
+    }
+    .apple-btn-danger:hover {
+      background: #E6362F;
+      transform: translateY(-1px);
+      box-shadow: var(--shadow-medium);
+    }
+    .empty-state {
+      text-align: center;
+      padding: 80px 20px;
+      color: var(--apple-text-tertiary);
+    }
+    .empty-icon {
+      font-size: 4rem;
+      margin-bottom: 20px;
+      opacity: 0.3;
+      color: var(--apple-gray);
+    }
+    .empty-state h3 {
+      font-size: 1.3rem;
+      font-weight: 600;
+      margin-bottom: 8px;
+      color: var(--apple-text-secondary);
+    }
+    .apple-toast {
+      position: fixed;
+      bottom: 30px;
+      right: 30px;
+      background: var(--apple-background);
+      padding: 16px 24px;
+      border-radius: var(--radius-large);
+      box-shadow: var(--shadow-heavy);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      transform: translateX(400px);
+      transition: transform var(--transition-medium);
+      z-index: 1000;
+      border: 1px solid var(--apple-border);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+    }
+    .apple-toast.show {
+      transform: translateX(0);
+    }
+    .toast-icon {
+      font-size: 1.3rem;
+    }
+    .apple-toast.success .toast-icon {
+      color: var(--apple-green);
+    }
+    .apple-toast.error .toast-icon {
+      color: var(--apple-red);
+    }
+    .apple-modal {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.3);
+      display: none;
+      align-items: center;
+      justify-content: center;
+      z-index: 2000;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    }
+    .apple-modal.active {
+      display: flex;
+    }
+    .modal-content {
+      background: var(--apple-background);
+      border-radius: var(--radius-xl);
+      padding: 32px;
+      max-width: 500px;
+      width: 90%;
+      box-shadow: var(--shadow-heavy);
+      border: 1px solid var(--apple-border);
+      animation: modalSlideIn var(--transition-medium);
+    }
+    .modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 24px;
+    }
+    .modal-title {
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: var(--apple-text-primary);
+    }
+    .modal-close {
+      background: none;
+      border: none;
+      font-size: 1.5rem;
+      cursor: pointer;
+      color: var(--apple-gray);
+      transition: color var(--transition-fast);
+      width: 32px;
+      height: 32px;
+      border-radius: var(--radius-small);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .modal-close:hover {
+      color: var(--apple-red);
+      background: var(--apple-gray-ultralight);
+    }
+    [data-theme="dark"] .modal-close:hover {
+      background: var(--apple-gray-light);
+    }
+    .modal-body {
+      margin-bottom: 24px;
+    }
+    .modal-input {
+      width: 100%;
+      padding: 14px;
+      border: 1px solid var(--apple-border);
+      border-radius: var(--radius-medium);
+      background: var(--apple-surface);
+      color: var(--apple-text-primary);
+      margin-bottom: 16px;
+      transition: all var(--transition-fast);
+    }
+    .modal-input:focus {
+      outline: none;
+      border-color: var(--apple-blue);
+      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
+    }
+    .modal-footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: 12px;
+    }
+    .apple-btn-secondary {
+      background: var(--apple-gray-ultralight);
+      color: var(--apple-text-primary);
+      border: 1px solid var(--apple-border);
+      padding: 12px 24px;
+      border-radius: var(--radius-medium);
+      font-weight: 500;
+      transition: all var(--transition-fast);
+      cursor: pointer;
+    }
+    .apple-btn-secondary:hover {
+      background: var(--apple-gray-light);
+      color: var(--apple-text-primary);
+    }
+    [data-theme="dark"] .apple-btn-secondary {
+      background: var(--apple-gray-light);
+    }
+    [data-theme="dark"] .apple-btn-secondary:hover {
+      background: var(--apple-gray);
+    }
+    .built-with {
+      color: var(--apple-text-secondary);
+      text-decoration: none;
+      transition: all var(--transition-fast);
+      display: inline-block;
+      margin-top: 12px;
+      font-size: 0.9rem;
+      opacity: 0.8;
+    }
+    .built-with:hover {
+      opacity: 1;
+      color: var(--apple-blue);
+    }
+    @keyframes modalSlideIn {
+      from {
+        opacity: 0;
+        transform: scale(0.95) translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+      }
+    }
+    @media (max-width: 640px) {
+      h1 {
+        font-size: 2rem;
+      }
+      .header-content {
+        padding: 20px 30px;
+      }
+      .input-group {
+        flex-direction: column;
+      }
+      .apple-tabs {
+        overflow-x: auto;
+      }
+      .todo-item {
+        flex-wrap: wrap;
+      }
+      .todo-actions {
+        width: 100%;
+        justify-content: flex-end;
+      }
+      .apple-toast {
+        right: 20px;
+        left: 20px;
+        bottom: 20px;
+      }
+    }
+    /* Animations */
+    @keyframes slideDown {
+      from {
+        opacity: 0;
+        transform: translateY(-20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    @keyframes slideUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    @keyframes slideIn {
+      from {
+        opacity: 0;
+        transform: translateX(-10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="apple-bg"></div>
+  <div class="apple-blur"></div>
+  <header>
+    <div class="header-content">
+      <h1>FlowTask</h1>
+      <p class="subtitle">Organize your life with elegance</p>
+      <div class="header-actions">
+        <button class="apple-btn" onclick="toggleTheme()">
+          <i class="fas fa-moon"></i> <span id="themeText">Dark</span>
+        </button>
+        <button class="apple-btn" onclick="exportTodos()">
+          <i class="fas fa-download"></i> Export
+        </button>
+        <button class="apple-btn" onclick="document.getElementById('importFile').click()">
+          <i class="fas fa-upload"></i> Import
+        </button>
+        <input type="file" id="importFile" style="display: none;" accept=".json" onchange="importTodos(event)">
+      </div>
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
+        Built with anycoder
+      </a>
+    </div>
+  </header>
+  <div class="container">
+    <div class="main-content">
+      <section class="apple-card">
+        <div class="input-group">
+          <input type="text" class="apple-input" id="todoInput" placeholder="What needs to be done today?" onkeypress="handleKeyPress(event)">
+          <button class="apple-btn-primary" onclick="addTodo()">
+            <i class="fas fa-plus"></i> Add Task
+          </button>
+        </div>
+        <div class="input-options">
+          <select class="apple-select" id="prioritySelect">
+            <option value="low">Low</option>
+            <option value="medium" selected>Medium</option>
+            <option value="high">High</option>
+          </select>
+          <select class="apple-select" id="categorySelect">
+            <option value="personal">Personal</option>
+            <option value="work">Work</option>
+            <option value="shopping">Shopping</option>
+            <option value="health">Health</option>
+            <option value="education">Education</option>
+            <option value="other">Other</option>
+          </select>
+          <input type="date" class="apple-select" id="dueDateInput">
+        </div>
+        <div class="apple-search">
+          <input type="text" class="apple-search-input" id="searchInput" placeholder="Search tasks..." oninput="searchTodos()">
+          <i class="fas fa-search apple-search-icon"></i>
+        </div>
+        <div class="apple-tabs">
+          <button class="apple-tab active" onclick="filterTodos('all')">All Tasks</button>
+          <button class="apple-tab" onclick="filterTodos('active')">Active</button>
+          <button class="apple-tab" onclick="filterTodos('completed')">Completed</button>
+          <button class="apple-tab" onclick="filterTodos('today')">Due Today</button>
+        </div>
+        <ul class="todo-list" id="todoList"></ul>
+        <div class="empty-state" id="emptyState" style="display: none;">
+          <div class="empty-icon">
+            <i class="fas fa-clipboard-list"></i>
+          </div>
+          <h3>No tasks yet</h3>
+          <p>Start adding tasks to organize your day!</p>
+        </div>
+      </section>
+      <aside class="sidebar">
+        <div class="stats-card">
+          <h3 class="stats-title">📊 Statistics</h3>
+          <div class="stat-item">
+            <span class="stat-label">Total Tasks</span>
+            <span class="stat-value" id="totalTasks">0</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-label">Completed</span>
+            <span class="stat-value" id="completedTasks">0</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-label">Active</span>
+            <span class="stat-value" id="activeTasks">0</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-label">Progress</span>
+            <div style="flex: 1; margin-left: 20px;">
+              <div class="progress-bar">
+                <div class="progress-fill" id="progressFill" style="width: 0%"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="stats-card">
+          <h3 class="stats-title">🏆 Productivity</h3>
+          <div class="stat-item">
+            <span class="stat-label">Tasks Completed Today</span>
+            <span class="stat-value" id="todayCompleted">0</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-label">Streak Days</span>
+            <span class="stat-value" id="streakDays">0</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-label">Completion Rate</span>
+            <span class="stat-value" id="completionRate">0%</span>
+          </div>
+        </div>
+        <button class="apple-btn-danger" onclick="clearCompleted()">
+          <i class="fas fa-trash"></i> Clear Completed
+        </button>
+      </aside>
+    </div>
+  </div>
+  <div class="apple-toast" id="toast">
+    <i class="toast-icon fas"></i>
+    <span id="toastMessage"></span>
+  </div>
+  <div class="apple-modal" id="editModal">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2 class="modal-title">Edit Task</h2>
+        <button class="modal-close" onclick="closeEditModal()">
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+      <div class="modal-body">
+        <input type="text" class="modal-input" id="editInput" placeholder="Task description">
+        <select class="modal-input" id="editPriority">
+          <option value="low">Low Priority</option>
+          <option value="medium">Medium Priority</option>
+          <option value="high">High Priority</option>
+        </select>
+        <select class="modal-input" id="editCategory">
+          <option value="personal">Personal</option>
+          <option value="work">Work</option>
+          <option value="shopping">Shopping</option>
+          <option value="health">Health</option>
+          <option value="education">Education</option>
+          <option value="other">Other</option>
+        </select>
+        <input type="date" class="modal-input" id="editDueDate">
+      </div>
+      <div class="modal-footer">
+        <button class="apple-btn-secondary" onclick="closeEditModal()">Cancel</button>
+        <button class="apple-btn-primary" onclick="saveEdit()">
+          <i class="fas fa-save"></i> Save Changes
+        </button>
+      </div>
+    </div>
+  </div>
+  <script>
+    let todos = JSON.parse(localStorage.getItem('todos')) || [];
+    let currentFilter = 'all';
+    let editingTodo = null;
+    let draggedItem = null;
+    // Initialize
+    document.addEventListener('DOMContentLoaded', () => {
+      renderTodos();
+      updateStats();
+      // Set today's date as default
+      const today = new Date().toISOString().split('T')[0];
+      document.getElementById('dueDateInput').value = today;
+      // Check for saved theme
+      const savedTheme = localStorage.getItem('theme') || 'light';
+      document.documentElement.setAttribute('data-theme', savedTheme);
+      updateThemeButton(savedTheme);
+    });
+    function addTodo() {
+      const input = document.getElementById('todoInput');
+      const text = input.value.trim();
+      if (text === '') {
+        showToast('Please enter a task', 'error');
+        return;
+      }
+      const todo = {
+        id: Date.now(),
+        text: text,
+        completed: false,
+        priority: document.getElementById('prioritySelect').value,
+        category: document.getElementById('categorySelect').value,
+        dueDate: document.getElementById('dueDateInput').value,
+        createdAt: new Date().toISOString(),
+        completedAt: null
+      };
+      todos.unshift(todo);
+      saveTodos();
+      renderTodos();
+      updateStats();
+      input.value = '';
+      showToast('Task added successfully!', 'success');
+      // Reset date to today
+      const today = new Date().toISOString().split('T')[0];
+      document.getElementById('dueDateInput').value = today;
+    }
+    function handleKeyPress(event) {
+      if (event.key === 'Enter') {
+        addTodo();
+      }
+    }
+    function toggleTodo(id) {
+      const todo = todos.find(t => t.id === id);
+      if (todo) {
+        todo.completed = !todo.completed;
+        todo.completedAt = todo.completed ? new Date().toISOString() : null;
+        saveTodos();
+        renderTodos();
+        updateStats();
+        if (todo.completed) {
+          showToast('Task completed! 🎉', 'success');
+          updateStreak();
+        }
+      }
+    }
+    function deleteTodo(id) {
+      todos = todos.filter(t => t.id !== id);
+      saveTodos();
+      renderTodos();
+      updateStats();
+      showToast('Task deleted', 'success');
+    }
+    function editTodo(id) {
+      const todo = todos.find(t => t.id === id);
+      if (todo) {
+        editingTodo = todo;
+        document.getElementById('editInput').value = todo.text;
+        document.getElementById('editPriority').value = todo.priority;
+        document.getElementById('editCategory').value = todo.category;
+        document.getElementById('editDueDate').value = todo.dueDate;
+        document.getElementById('editModal').classList.add('active');
+      }
+    }
+    function saveEdit() {
+      if (editingTodo) {
+        editingTodo.text = document.getElementById('editInput').value;
+        editingTodo.priority = document.getElementById('editPriority').value;
+        editingTodo.category = document.getElementById('editCategory').value;
+        editingTodo.dueDate = document.getElementById('editDueDate').value;
+        saveTodos();
+        renderTodos();
+        updateStats();
+        closeEditModal();
+        showToast('Task updated successfully!', 'success');
+      }
+    }
+    function closeEditModal() {
+      document.getElementById('editModal').classList.remove('active');
+      editingTodo = null;
+    }
+    function filterTodos(filter) {
+      currentFilter = filter;
+      // Update active tab
+      document.querySelectorAll('.apple-tab').forEach(tab => {
+        tab.classList.remove('active');
+      });
+      event.target.classList.add('active');
+      renderTodos();
+    }
+    function searchTodos() {
+      renderTodos();
+    }
+    function renderTodos() {
+      const todoList = document.getElementById('todoList');
+      const emptyState = document.getElementById('emptyState');
+      const searchTerm = document.getElementById('searchInput').value.toLowerCase();
+      let filteredTodos = todos;
+      // Apply filter
+      if (currentFilter === 'active') {
+        filteredTodos = todos.filter(t => !t.completed);
+      } else if (currentFilter === 'completed') {
+        filteredTodos = todos.filter(t => t.completed);
+      } else if (currentFilter === 'today') {
+        const today = new Date().toISOString().split('T')[0];
+        filteredTodos = todos.filter(t => t.dueDate === today);
+      }
+      // Apply search
+      if (searchTerm) {
+        filteredTodos = filteredTodos.filter(t =>
+          t.text.toLowerCase().includes(searchTerm) ||
+          t.category.toLowerCase().includes(searchTerm)
+        );
+      }
+      if (filteredTodos.length === 0) {
+        todoList.style.display = 'none';
+        emptyState.style.display = 'block';
+        return;
+      }
+      todoList.style.display = 'block';
+      emptyState.style.display = 'none';
+      todoList.innerHTML = filteredTodos.map(todo => {
+        const isOverdue = new Date(todo.dueDate) < new Date() && !todo.completed;
+        const dueDateFormatted = new Date(todo.dueDate).toLocaleDateString('en-US', {
+          month: 'short',
+          day: 'numeric'
+        });
+        return `
+          <li class="todo-item ${todo.completed ? 'completed' : ''}"
+              draggable="true"
+              ondragstart="handleDragStart(event, ${todo.id})"
+              ondragover="handleDragOver(event)"
+              ondrop="handleDrop(event, ${todo.id})"
+              ondragend="handleDragEnd(event)">
+            <input type="checkbox"
+                   class="apple-checkbox"
+                   ${todo.completed ? 'checked' : ''}
+                   onchange="toggleTodo(${todo.id})">
+            <div class="todo-content">
+              <div class="todo-text">${todo.text}</div>
+              <div class="todo-meta">
+                <span class="priority-badge priority-${todo.priority}">
+                  ${todo.priority}
+                </span>
+                <span class="category-tag">
+                  <i class="fas fa-tag"></i> ${todo.category}
+                </span>
+                <span style="color: ${isOverdue ? 'var(--apple-red)' : 'var(--apple-text-tertiary)'}">
+                  <i class="fas fa-calendar"></i> ${dueDateFormatted}
+                  ${isOverdue ? ' (Overdue)' : ''}
+                </span>
+              </div>
+            </div>
+            <div class="todo-actions">
+              <button class="action-btn" onclick="editTodo(${todo.id})">
+                <i class="fas fa-edit"></i>
+              </button>
+              <button class="action-btn delete" onclick="deleteTodo(${todo.id})">
+                <i class="fas fa-trash"></i>
+              </button>
+            </div>
+          </li>
+        `;
+      }).join('');
+    }
+    function handleDragStart(event, id) {
+      draggedItem = id;
+      event.dataTransfer.effectAllowed = 'move';
+      event.target.classList.add('dragging');
+    }
+    function handleDragOver(event) {
+      event.preventDefault();
+      event.dataTransfer.dropEffect = 'move';
+    }
+    function handleDrop(event, targetId) {
+      event.preventDefault();
+      if (draggedItem !== targetId) {
+        const draggedIndex = todos.findIndex(t => t.id === draggedItem);
+        const targetIndex = todos.findIndex(t => t.id === targetId);
+        if (draggedIndex !== -1 && targetIndex !== -1) {
+          const [removed] = todos.splice(draggedIndex, 1);
+          todos.splice(targetIndex, 0, removed);
+          saveTodos();
+          renderTodos();
+        }
+      }
+    }
+    function handleDragEnd(event) {
+      event.target.classList.remove('dragging');
+      draggedItem = null;
+    }
+    function clearCompleted() {
+      const completedCount = todos.filter(t => t.completed).length;
+      if (completedCount === 0) {
+        showToast('No completed tasks to clear', 'error');
+        return;
+      }
+      todos = todos.filter(t => !t.completed);
+      saveTodos();
+      renderTodos();
+      updateStats();
+      showToast(`Cleared ${completedCount} completed tasks`, 'success');
+    }
+    function updateStats() {
+      const total = todos.length;
+      const completed = todos.filter(t => t.completed).length;
+      const active = total - completed;
+      const today = new Date().toISOString().split('T')[0];
+      const todayCompleted = todos.filter(t =>
+        t.completed && t.completedAt && t.completedAt.split('T')[0] === today
+      ).length;
+      document.getElementById('totalTasks').textContent = total;
+      document.getElementById('completedTasks').textContent = completed;
+      document.getElementById('activeTasks').textContent = active;
+      document.getElementById('todayCompleted').textContent = todayCompleted;
+      const progress = total > 0 ? (completed / total * 100) : 0;
+      document.getElementById('progressFill').style.width = `${progress}%`;
+      const completionRate = total > 0 ? Math.round(progress) : 0;
+      document.getElementById('completionRate').textContent = `${completionRate}%`;
+      updateStreak();
+    }
+    function updateStreak() {
+      // Simple streak calculation - can be enhanced
+      const today = new Date();
+      let streak = 0;
+      for (let i = 0; i < 30; i++) {
+        const checkDate = new Date(today);
+        checkDate.setDate(today.getDate() - i);
+        const dateStr = checkDate.toISOString().split('T')[0];
+        const hasCompletedOnDate = todos.some(t =>
+          t.completedAt && t.completedAt.split('T')[0] === dateStr
+        );
+        if (hasCompletedOnDate) {
+          streak++;
+        } else if (i > 0) {
+          break;
+        }
+      }
+      document.getElementById('streakDays').textContent = streak;
+    }
+    function toggleTheme() {
+      const currentTheme = document.documentElement.getAttribute('data-theme');
+      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', newTheme);
+      localStorage.setItem('theme', newTheme);
+      updateThemeButton(newTheme);
+    }
+    function updateThemeButton(theme) {
+      const themeText = document.getElementById('themeText');
+      const themeIcon = document.querySelector('.apple-btn i');
+      if (theme === 'dark') {
+        themeText.textContent = 'Light';
+        themeIcon.className = 'fas fa-sun';
+      } else {
+        themeText.textContent = 'Dark';
+        themeIcon.className = 'fas fa-moon';
+      }
+    }
+    function exportTodos() {
+      const dataStr = JSON.stringify(todos, null, 2);
+      const dataBlob = new Blob([dataStr], { type: 'application/json' });
+      const url = URL.createObjectURL(dataBlob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `todos-${new Date().toISOString().split('T')[0]}.json`;
+      link.click();
+      URL.revokeObjectURL(url);
+      showToast('Tasks exported successfully!', 'success');
+    }
+    function importTodos(event) {
+      const file = event.target.files[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = function(e) {
+        try {
+          const imported = JSON.parse(e.target.result);
+          todos = [...todos, ...imported];
+          saveTodos();
+          renderTodos();
+          updateStats();
+          showToast('Tasks imported successfully!', 'success');
+        } catch (error) {
+          showToast('Invalid file format', 'error');
+        }
+      };
+      reader.readAsText(file);
+      event.target.value = '';
+    }
+    function showToast(message, type = 'success') {
+      const toast = document.getElementById('toast');
+      const toastMessage = document.getElementById('toastMessage');
+      const toastIcon = toast.querySelector('.toast-icon');
+      toastMessage.textContent = message;
+      toast.className = `apple-toast ${type} show`;
+      if (type === 'success') {
+        toastIcon.className = 'toast-icon fas fa-check-circle';
+      } else if (type === 'error') {
+        toastIcon.className = 'toast-icon fas fa-exclamation-circle';
+      }
+      setTimeout(() => {
+        toast.classList.remove('show');
+      }, 3000);
+    }
+    function saveTodos() {
+      localStorage.setItem('todos', JSON.stringify(todos));
+    }
+    // Keyboard shortcuts
+    document.addEventListener('keydown', (e) => {
+      if (e.ctrlKey || e.metaKey) {
+        switch(e.key) {
+          case 'k':
+            e.preventDefault();
+            document.getElementById('searchInput').focus();
+            break;
+          case 'n':
+            e.preventDefault();
+            document.getElementById('todoInput').focus();
+            break;
+          case 'd':
+            e.preventDefault();
+            toggleTheme();
+            break;
+        }
+      }
+    });
+  </