Spaces:

federi
/

taskflow

Running

App Files Files Community

federi commited on Apr 17

Commit

3b10dbb

verified ·

1 Parent(s): bdfc7d7

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +1331 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Taskflow
-emoji: ⚡
 colorFrom: yellow
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: taskflow
+emoji: 🐳
 colorFrom: yellow
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1331 @@
-<!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="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TaskFlow - Gestione Attività</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+        /* Animation for task completion */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .task-item {
+            animation: fadeIn 0.3s ease-out forwards;
+        }
+        /* Calendar day highlight */
+        .current-day {
+            background-color: #3b82f6;
+            color: white;
+            border-radius: 50%;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 font-sans">
+    <div class="flex h-screen overflow-hidden">
+        <!-- Sidebar -->
+        <div class="hidden md:flex md:flex-shrink-0">
+            <div class="flex flex-col w-64 bg-indigo-700 text-white">
+                <div class="flex items-center justify-center h-16 px-4">
+                    <div class="flex items-center">
+                        <i class="fas fa-tasks text-2xl mr-2"></i>
+                        <span class="text-xl font-semibold">TaskFlow</span>
+                    </div>
+                </div>
+                <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
+                    <div class="space-y-1">
+                        <button id="all-tasks-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-800 rounded-md group">
+                            <i class="fas fa-list mr-3"></i>
+                            Tutte le attività
+                        </button>
+                        <button id="today-tasks-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:text-white hover:bg-indigo-600 rounded-md group">
+                            <i class="fas fa-calendar-day mr-3"></i>
+                            Oggi
+                        </button>
+                        <button id="upcoming-tasks-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:text-white hover:bg-indigo-600 rounded-md group">
+                            <i class="fas fa-calendar-week mr-3"></i>
+                            Prossimi
+                        </button>
+                        <button id="important-tasks-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:text-white hover:bg-indigo-600 rounded-md group">
+                            <i class="fas fa-star mr-3"></i>
+                            Importanti
+                        </button>
+                        <button id="completed-tasks-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:text-white hover:bg-indigo-600 rounded-md group">
+                            <i class="fas fa-check-circle mr-3"></i>
+                            Completate
+                        </button>
+                    </div>
+                    <div class="mt-8">
+                        <h3 class="px-4 text-xs font-semibold text-indigo-200 uppercase tracking-wider">Categorie</h3>
+                        <div class="mt-2 space-y-1" id="categories-list">
+                            <!-- Categories will be added dynamically -->
+                        </div>
+                        <div class="mt-2">
+                            <button id="add-category-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:text-white hover:bg-indigo-600 rounded-md group">
+                                <i class="fas fa-plus mr-3"></i>
+                                Aggiungi categoria
+                            </button>
+                        </div>
+                    </div>
+                    <div class="mt-auto mb-4">
+                        <div class="flex items-center px-4 py-2 text-sm text-indigo-200">
+                            <i class="fas fa-moon mr-3"></i>
+                            Modalità scura
+                            <label class="ml-auto relative inline-flex items-center cursor-pointer">
+                                <input type="checkbox" id="dark-mode-toggle" class="sr-only peer">
+                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Mobile sidebar -->
+        <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg z-10">
+            <div class="flex justify-around">
+                <button id="mobile-all-tasks" class="p-4 text-indigo-600">
+                    <i class="fas fa-list text-xl"></i>
+                </button>
+                <button id="mobile-today-tasks" class="p-4 text-gray-500">
+                    <i class="fas fa-calendar-day text-xl"></i>
+                </button>
+                <button id="mobile-add-task" class="p-4 text-gray-500">
+                    <i class="fas fa-plus-circle text-2xl text-indigo-600"></i>
+                </button>
+                <button id="mobile-upcoming-tasks" class="p-4 text-gray-500">
+                    <i class="fas fa-calendar-week text-xl"></i>
+                </button>
+                <button id="mobile-important-tasks" class="p-4 text-gray-500">
+                    <i class="fas fa-star text-xl"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Main content -->
+        <div class="flex flex-col flex-1 overflow-hidden">
+            <!-- Top navigation -->
+            <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
+                <div class="flex items-center">
+                    <button id="sidebar-toggle" class="md:hidden text-gray-500 focus:outline-none">
+                        <i class="fas fa-bars text-xl"></i>
+                    </button>
+                    <h1 id="current-view" class="ml-4 text-lg font-semibold text-gray-900">Tutte le attività</h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div class="relative">
+                        <button id="search-btn" class="p-1 text-gray-500 hover:text-gray-700">
+                            <i class="fas fa-search"></i>
+                        </button>
+                        <div id="search-container" class="hidden absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg z-10">
+                            <input type="text" id="search-input" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Cerca attività...">
+                        </div>
+                    </div>
+                    <button id="add-task-btn" class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                        <i class="fas fa-plus mr-2"></i>
+                        <span class="hidden md:inline">Nuova attività</span>
+                    </button>
+                </div>
+            </div>
+            <!-- Content area -->
+            <div class="flex flex-1 overflow-hidden">
+                <!-- Task list -->
+                <div class="flex-1 overflow-y-auto p-4">
+                    <div id="task-list-container">
+                        <div id="no-tasks-message" class="flex flex-col items-center justify-center h-64 text-gray-500">
+                            <i class="fas fa-tasks text-5xl mb-4"></i>
+                            <p class="text-xl">Nessuna attività trovata</p>
+                            <button id="add-first-task-btn" class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
+                                Aggiungi la tua prima attività
+                            </button>
+                        </div>
+                        <div id="task-list" class="space-y-3">
+                            <!-- Tasks will be added dynamically -->
+                        </div>
+                    </div>
+                </div>
+                <!-- Calendar and task details (hidden on mobile) -->
+                <div class="hidden lg:flex lg:flex-col w-80 border-l border-gray-200 bg-white">
+                    <div class="p-4 border-b border-gray-200">
+                        <h2 class="text-lg font-semibold">Calendario</h2>
+                        <div class="mt-4">
+                            <div class="flex justify-between items-center mb-4">
+                                <button id="prev-month" class="p-1 rounded-full hover:bg-gray-100">
+                                    <i class="fas fa-chevron-left"></i>
+                                </button>
+                                <h3 id="current-month" class="font-medium">Settembre 2023</h3>
+                                <button id="next-month" class="p-1 rounded-full hover:bg-gray-100">
+                                    <i class="fas fa-chevron-right"></i>
+                                </button>
+                            </div>
+                            <div id="calendar" class="grid grid-cols-7 gap-1">
+                                <!-- Calendar days will be added dynamically -->
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex-1 overflow-y-auto p-4">
+                        <h2 class="text-lg font-semibold mb-4">Dettagli attività</h2>
+                        <div id="task-details" class="hidden">
+                            <h3 id="task-detail-title" class="text-xl font-semibold mb-2"></h3>
+                            <div class="flex items-center text-sm text-gray-500 mb-4">
+                                <i class="far fa-calendar-alt mr-2"></i>
+                                <span id="task-detail-date"></span>
+                            </div>
+                            <div class="mb-4">
+                                <span id="task-detail-category" class="inline-block px-2 py-1 text-xs font-semibold rounded-full"></span>
+                            </div>
+                            <p id="task-detail-description" class="text-gray-700 mb-4"></p>
+                            <div class="flex space-x-2">
+                                <button id="edit-task-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
+                                    Modifica
+                                </button>
+                                <button id="delete-task-btn" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">
+                                    Elimina
+                                </button>
+                            </div>
+                        </div>
+                        <div id="no-task-selected" class="flex flex-col items-center justify-center h-64 text-gray-500">
+                            <i class="fas fa-info-circle text-5xl mb-4"></i>
+                            <p class="text-center">Seleziona un'attività per visualizzare i dettagli</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Add/Edit Task Modal -->
+    <div id="task-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
+        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+            </div>
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                    <div class="sm:flex sm:items-start">
+                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+                            <h3 id="modal-title" class="text-lg leading-6 font-medium text-gray-900 mb-4">
+                                Nuova attività
+                            </h3>
+                            <form id="task-form" class="space-y-4">
+                                <input type="hidden" id="task-id">
+                                <div>
+                                    <label for="task-title" class="block text-sm font-medium text-gray-700">Titolo</label>
+                                    <input type="text" id="task-title" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
+                                </div>
+                                <div>
+                                    <label for="task-description" class="block text-sm font-medium text-gray-700">Descrizione</label>
+                                    <textarea id="task-description" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></textarea>
+                                </div>
+                                <div class="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <label for="task-date" class="block text-sm font-medium text-gray-700">Data</label>
+                                        <input type="date" id="task-date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+                                    </div>
+                                    <div>
+                                        <label for="task-time" class="block text-sm font-medium text-gray-700">Ora</label>
+                                        <input type="time" id="task-time" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+                                    </div>
+                                </div>
+                                <div>
+                                    <label for="task-category" class="block text-sm font-medium text-gray-700">Categoria</label>
+                                    <div class="flex mt-1">
+                                        <select id="task-category" class="flex-1 border border-gray-300 rounded-l-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+                                            <option value="">Nessuna categoria</option>
+                                        </select>
+                                        <button type="button" id="new-category-btn" class="inline-flex items-center px-3 py-2 border border-l-0 border-gray-300 bg-gray-50 text-gray-500 hover:bg-gray-100 rounded-r-md">
+                                            <i class="fas fa-plus"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="flex items-center">
+                                    <input type="checkbox" id="task-important" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
+                                    <label for="task-important" class="ml-2 block text-sm text-gray-700">Contrassegna come importante</label>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                    <button type="button" id="save-task-btn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
+                        Salva
+                    </button>
+                    <button type="button" id="cancel-task-btn" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+                        Annulla
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Add Category Modal -->
+    <div id="category-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
+        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+            </div>
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full">
+                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                    <div class="sm:flex sm:items-start">
+                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+                            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
+                                Nuova categoria
+                            </h3>
+                            <form id="category-form" class="space-y-4">
+                                <div>
+                                    <label for="category-name" class="block text-sm font-medium text-gray-700">Nome categoria</label>
+                                    <input type="text" id="category-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
+                                </div>
+                                <div>
+                                    <label for="category-color" class="block text-sm font-medium text-gray-700">Colore</label>
+                                    <select id="category-color" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+                                        <option value="bg-red-500 text-red-100">Rosso</option>
+                                        <option value="bg-blue-500 text-blue-100">Blu</option>
+                                        <option value="bg-green-500 text-green-100">Verde</option>
+                                        <option value="bg-yellow-500 text-yellow-100">Giallo</option>
+                                        <option value="bg-purple-500 text-purple-100">Viola</option>
+                                        <option value="bg-pink-500 text-pink-100">Rosa</option>
+                                        <option value="bg-indigo-500 text-indigo-100">Indaco</option>
+                                        <option value="bg-gray-500 text-gray-100">Grigio</option>
+                                    </select>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                    <button type="button" id="save-category-btn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
+                        Salva
+                    </button>
+                    <button type="button" id="cancel-category-btn" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+                        Annulla
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // State management
+        const state = {
+            tasks: [],
+            categories: [
+                { id: 1, name: "Lavoro", color: "bg-blue-500 text-blue-100" },
+                { id: 2, name: "Personale", color: "bg-green-500 text-green-100" },
+                { id: 3, name: "Studio", color: "bg-purple-500 text-purple-100" }
+            ],
+            currentView: 'all',
+            selectedTask: null,
+            currentMonth: new Date().getMonth(),
+            currentYear: new Date().getFullYear(),
+            darkMode: false
+        };
+        // DOM Elements
+        const elements = {
+            // Sidebar
+            sidebarToggle: document.getElementById('sidebar-toggle'),
+            // Views
+            currentView: document.getElementById('current-view'),
+            allTasksBtn: document.getElementById('all-tasks-btn'),
+            todayTasksBtn: document.getElementById('today-tasks-btn'),
+            upcomingTasksBtn: document.getElementById('upcoming-tasks-btn'),
+            importantTasksBtn: document.getElementById('important-tasks-btn'),
+            completedTasksBtn: document.getElementById('completed-tasks-btn'),
+            // Mobile views
+            mobileAllTasks: document.getElementById('mobile-all-tasks'),
+            mobileTodayTasks: document.getElementById('mobile-today-tasks'),
+            mobileUpcomingTasks: document.getElementById('mobile-upcoming-tasks'),
+            mobileImportantTasks: document.getElementById('mobile-important-tasks'),
+            mobileAddTask: document.getElementById('mobile-add-task'),
+            // Task list
+            taskListContainer: document.getElementById('task-list-container'),
+            noTasksMessage: document.getElementById('no-tasks-message'),
+            taskList: document.getElementById('task-list'),
+            addFirstTaskBtn: document.getElementById('add-first-task-btn'),
+            // Task details
+            taskDetails: document.getElementById('task-details'),
+            noTaskSelected: document.getElementById('no-task-selected'),
+            taskDetailTitle: document.getElementById('task-detail-title'),
+            taskDetailDate: document.getElementById('task-detail-date'),
+            taskDetailCategory: document.getElementById('task-detail-category'),
+            taskDetailDescription: document.getElementById('task-detail-description'),
+            editTaskBtn: document.getElementById('edit-task-btn'),
+            deleteTaskBtn: document.getElementById('delete-task-btn'),
+            // Calendar
+            calendar: document.getElementById('calendar'),
+            currentMonthDisplay: document.getElementById('current-month'),
+            prevMonth: document.getElementById('prev-month'),
+            nextMonth: document.getElementById('next-month'),
+            // Search
+            searchBtn: document.getElementById('search-btn'),
+            searchContainer: document.getElementById('search-container'),
+            searchInput: document.getElementById('search-input'),
+            // Add task
+            addTaskBtn: document.getElementById('add-task-btn'),
+            // Task modal
+            taskModal: document.getElementById('task-modal'),
+            modalTitle: document.getElementById('modal-title'),
+            taskForm: document.getElementById('task-form'),
+            taskId: document.getElementById('task-id'),
+            taskTitle: document.getElementById('task-title'),
+            taskDescription: document.getElementById('task-description'),
+            taskDate: document.getElementById('task-date'),
+            taskTime: document.getElementById('task-time'),
+            taskCategory: document.getElementById('task-category'),
+            taskImportant: document.getElementById('task-important'),
+            newCategoryBtn: document.getElementById('new-category-btn'),
+            saveTaskBtn: document.getElementById('save-task-btn'),
+            cancelTaskBtn: document.getElementById('cancel-task-btn'),
+            // Categories
+            categoriesList: document.getElementById('categories-list'),
+            addCategoryBtn: document.getElementById('add-category-btn'),
+            // Category modal
+            categoryModal: document.getElementById('category-modal'),
+            categoryForm: document.getElementById('category-form'),
+            categoryName: document.getElementById('category-name'),
+            categoryColor: document.getElementById('category-color'),
+            saveCategoryBtn: document.getElementById('save-category-btn'),
+            cancelCategoryBtn: document.getElementById('cancel-category-btn'),
+            // Dark mode
+            darkModeToggle: document.getElementById('dark-mode-toggle')
+        };
+        // Initialize the app
+        function init() {
+            // Load sample tasks if none exist
+            if (state.tasks.length === 0) {
+                loadSampleTasks();
+            }
+            // Set up event listeners
+            setupEventListeners();
+            // Render initial views
+            renderCategories();
+            renderTaskCategories();
+            renderCalendar();
+            renderTasks();
+            // Set current date in date picker
+            const today = new Date();
+            const formattedDate = today.toISOString().split('T')[0];
+            elements.taskDate.value = formattedDate;
+            // Check for dark mode preference
+            checkDarkModePreference();
+        }
+        // Load sample tasks
+        function loadSampleTasks() {
+            const sampleTasks = [
+                {
+                    id: 1,
+                    title: "Completare il progetto TaskFlow",
+                    description: "Implementare tutte le funzionalità principali del task manager",
+                    date: "2023-09-15",
+                    time: "15:00",
+                    category: 1,
+                    important: true,
+                    completed: false
+                },
+                {
+                    id: 2,
+                    title: "Fare la spesa settimanale",
+                    description: "Acquistare frutta, verdura e altri generi alimentari",
+                    date: "2023-09-10",
+                    time: "10:00",
+                    category: 2,
+                    important: false,
+                    completed: false
+                },
+                {
+                    id: 3,
+                    title: "Studiare per l'esame di JavaScript",
+                    description: "Rivedere i concetti avanzati di JavaScript e fare esercizi pratici",
+                    date: "2023-09-20",
+                    time: "14:00",
+                    category: 3,
+                    important: true,
+                    completed: false
+                },
+                {
+                    id: 4,
+                    title: "Incontrare il team di sviluppo",
+                    description: "Discutere i progressi del progetto e pianificare le prossime attività",
+                    date: "2023-09-12",
+                    time: "09:30",
+                    category: 1,
+                    important: true,
+                    completed: false
+                },
+                {
+                    id: 5,
+                    title: "Andare in palestra",
+                    description: "Allenamento completo di 1 ora",
+                    date: "2023-09-08",
+                    time: "18:00",
+                    category: 2,
+                    important: false,
+                    completed: true
+                }
+            ];
+            state.tasks = sampleTasks;
+        }
+        // Set up event listeners
+        function setupEventListeners() {
+            // Sidebar toggle
+            elements.sidebarToggle.addEventListener('click', toggleSidebar);
+            // View buttons
+            elements.allTasksBtn.addEventListener('click', () => switchView('all'));
+            elements.todayTasksBtn.addEventListener('click', () => switchView('today'));
+            elements.upcomingTasksBtn.addEventListener('click', () => switchView('upcoming'));
+            elements.importantTasksBtn.addEventListener('click', () => switchView('important'));
+            elements.completedTasksBtn.addEventListener('click', () => switchView('completed'));
+            // Mobile view buttons
+            elements.mobileAllTasks.addEventListener('click', () => switchView('all'));
+            elements.mobileTodayTasks.addEventListener('click', () => switchView('today'));
+            elements.mobileUpcomingTasks.addEventListener('click', () => switchView('upcoming'));
+            elements.mobileImportantTasks.addEventListener('click', () => switchView('important'));
+            elements.mobileAddTask.addEventListener('click', openAddTaskModal);
+            // Add task buttons
+            elements.addTaskBtn.addEventListener('click', openAddTaskModal);
+            elements.addFirstTaskBtn.addEventListener('click', openAddTaskModal);
+            // Task modal
+            elements.saveTaskBtn.addEventListener('click', saveTask);
+            elements.cancelTaskBtn.addEventListener('click', closeTaskModal);
+            elements.newCategoryBtn.addEventListener('click', openAddCategoryModal);
+            // Category modal
+            elements.addCategoryBtn.addEventListener('click', openAddCategoryModal);
+            elements.saveCategoryBtn.addEventListener('click', saveCategory);
+            elements.cancelCategoryBtn.addEventListener('click', closeCategoryModal);
+            // Search
+            elements.searchBtn.addEventListener('click', toggleSearch);
+            elements.searchInput.addEventListener('input', handleSearch);
+            // Calendar navigation
+            elements.prevMonth.addEventListener('click', goToPreviousMonth);
+            elements.nextMonth.addEventListener('click', goToNextMonth);
+            // Dark mode toggle
+            elements.darkModeToggle.addEventListener('change', toggleDarkMode);
+        }
+        // Toggle sidebar on mobile
+        function toggleSidebar() {
+            const sidebar = document.querySelector('.md\\:hidden');
+            if (sidebar) {
+                sidebar.classList.toggle('hidden');
+            }
+        }
+        // Switch between views
+        function switchView(view) {
+            state.currentView = view;
+            // Update active button in sidebar
+            updateActiveViewButton();
+            // Update current view title
+            updateViewTitle();
+            // Render tasks for the selected view
+            renderTasks();
+            // Close search if open
+            elements.searchContainer.classList.add('hidden');
+        }
+        // Update active view button in sidebar
+        function updateActiveViewButton() {
+            // Reset all buttons
+            const viewButtons = [
+                elements.allTasksBtn,
+                elements.todayTasksBtn,
+                elements.upcomingTasksBtn,
+                elements.importantTasksBtn,
+                elements.completedTasksBtn
+            ];
+            viewButtons.forEach(button => {
+                button.classList.remove('bg-indigo-800', 'text-white');
+                button.classList.add('text-indigo-100', 'hover:text-white', 'hover:bg-indigo-600');
+            });
+            // Set active button
+            let activeButton;
+            switch (state.currentView) {
+                case 'all':
+                    activeButton = elements.allTasksBtn;
+                    break;
+                case 'today':
+                    activeButton = elements.todayTasksBtn;
+                    break;
+                case 'upcoming':
+                    activeButton = elements.upcomingTasksBtn;
+                    break;
+                case 'important':
+                    activeButton = elements.importantTasksBtn;
+                    break;
+                case 'completed':
+                    activeButton = elements.completedTasksBtn;
+                    break;
+            }
+            if (activeButton) {
+                activeButton.classList.remove('text-indigo-100', 'hover:text-white', 'hover:bg-indigo-600');
+                activeButton.classList.add('bg-indigo-800', 'text-white');
+            }
+            // Update mobile buttons
+            const mobileButtons = [
+                elements.mobileAllTasks,
+                elements.mobileTodayTasks,
+                elements.mobileUpcomingTasks,
+                elements.mobileImportantTasks
+            ];
+            mobileButtons.forEach(button => {
+                button.classList.remove('text-indigo-600');
+                button.classList.add('text-gray-500');
+            });
+            let mobileActiveButton;
+            switch (state.currentView) {
+                case 'all':
+                    mobileActiveButton = elements.mobileAllTasks;
+                    break;
+                case 'today':
+                    mobileActiveButton = elements.mobileTodayTasks;
+                    break;
+                case 'upcoming':
+                    mobileActiveButton = elements.mobileUpcomingTasks;
+                    break;
+                case 'important':
+                    mobileActiveButton = elements.mobileImportantTasks;
+                    break;
+            }
+            if (mobileActiveButton) {
+                mobileActiveButton.classList.remove('text-gray-500');
+                mobileActiveButton.classList.add('text-indigo-600');
+            }
+        }
+        // Update view title
+        function updateViewTitle() {
+            let title;
+            switch (state.currentView) {
+                case 'all':
+                    title = 'Tutte le attività';
+                    break;
+                case 'today':
+                    title = 'Attività di oggi';
+                    break;
+                case 'upcoming':
+                    title = 'Prossime attività';
+                    break;
+                case 'important':
+                    title = 'Attività importanti';
+                    break;
+                case 'completed':
+                    title = 'Attività completate';
+                    break;
+                default:
+                    title = 'Tutte le attività';
+            }
+            elements.currentView.textContent = title;
+        }
+        // Render tasks based on current view
+        function renderTasks() {
+            let filteredTasks = [];
+            switch (state.currentView) {
+                case 'all':
+                    filteredTasks = state.tasks.filter(task => !task.completed);
+                    break;
+                case 'today':
+                    const today = new Date().toISOString().split('T')[0];
+                    filteredTasks = state.tasks.filter(task => task.date === today && !task.completed);
+                    break;
+                case 'upcoming':
+                    const todayDate = new Date();
+                    todayDate.setHours(0, 0, 0, 0);
+                    filteredTasks = state.tasks.filter(task => {
+                        const taskDate = new Date(task.date);
+                        return taskDate >= todayDate && !task.completed;
+                    });
+                    break;
+                case 'important':
+                    filteredTasks = state.tasks.filter(task => task.important && !task.completed);
+                    break;
+                case 'completed':
+                    filteredTasks = state.tasks.filter(task => task.completed);
+                    break;
+            }
+            // Sort tasks by date and time
+            filteredTasks.sort((a, b) => {
+                const dateA = new Date(`${a.date}T${a.time || '00:00'}`);
+                const dateB = new Date(`${b.date}T${b.time || '00:00'}`);
+                return dateA - dateB;
+            });
+            // Clear task list
+            elements.taskList.innerHTML = '';
+            if (filteredTasks.length === 0) {
+                elements.noTasksMessage.classList.remove('hidden');
+                elements.taskListContainer.classList.add('flex', 'items-center', 'justify-center');
+            } else {
+                elements.noTasksMessage.classList.add('hidden');
+                elements.taskListContainer.classList.remove('flex', 'items-center', 'justify-center');
+                // Add tasks to the list
+                filteredTasks.forEach(task => {
+                    const taskElement = createTaskElement(task);
+                    elements.taskList.appendChild(taskElement);
+                });
+            }
+        }
+        // Create task element
+        function createTaskElement(task) {
+            const taskElement = document.createElement('div');
+            taskElement.className = 'task-item bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer';
+            taskElement.dataset.taskId = task.id;
+            // Format date
+            const taskDate = new Date(task.date);
+            const formattedDate = taskDate.toLocaleDateString('it-IT', {
+                weekday: 'short',
+                day: 'numeric',
+                month: 'short'
+            });
+            // Format time if exists
+            let timeHtml = '';
+            if (task.time) {
+                timeHtml = `<span class="text-gray-500 ml-2">${task.time}</span>`;
+            }
+            // Get category
+            let categoryHtml = '';
+            if (task.category) {
+                const category = state.categories.find(cat => cat.id === task.category);
+                if (category) {
+                    categoryHtml = `<span class="inline-block px-2 py-1 text-xs font-semibold rounded-full ${category.color}">${category.name}</span>`;
+                }
+            }
+            // Important icon
+            const importantIcon = task.important ? '<i class="fas fa-star text-yellow-500 mr-2"></i>' : '';
+            taskElement.innerHTML = `
+                <div class="flex items-start justify-between">
+                    <div class="flex items-center">
+                        <button class="complete-task-btn mr-3 p-1 rounded-full border border-gray-300 hover:bg-gray-100">
+                            <i class="fas fa-check text-gray-400"></i>
+                        </button>
+                        <div>
+                            <h3 class="font-medium text-gray-900">${importantIcon}${task.title}</h3>
+                            <div class="flex items-center mt-1 text-sm text-gray-500">
+                                <i class="far fa-calendar-alt mr-1"></i>
+                                <span>${formattedDate}</span>
+                                ${timeHtml}
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        ${categoryHtml}
+                    </div>
+                </div>
+            `;
+            // Add event listeners
+            const completeBtn = taskElement.querySelector('.complete-task-btn');
+            completeBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                toggleTaskCompletion(task.id);
+            });
+            taskElement.addEventListener('click', () => showTaskDetails(task.id));
+            return taskElement;
+        }
+        // Toggle task completion
+        function toggleTaskCompletion(taskId) {
+            const taskIndex = state.tasks.findIndex(task => task.id === taskId);
+            if (taskIndex !== -1) {
+                state.tasks[taskIndex].completed = !state.tasks[taskIndex].completed;
+                renderTasks();
+                // If viewing completed tasks, keep the task in the list
+                if (state.currentView === 'completed' && state.tasks[taskIndex].completed) {
+                    // Do nothing, task will stay in the list
+                } else {
+                    // Otherwise, remove the task from the current view
+                    const taskElement = document.querySelector(`.task-item[data-task-id="${taskId}"]`);
+                    if (taskElement) {
+                        taskElement.remove();
+                        // Show no tasks message if list is empty
+                        if (elements.taskList.children.length === 0) {
+                            elements.noTasksMessage.classList.remove('hidden');
+                            elements.taskListContainer.classList.add('flex', 'items-center', 'justify-center');
+                        }
+                    }
+                }
+                // Update task details if the task is selected
+                if (state.selectedTask && state.selectedTask.id === taskId) {
+                    showTaskDetails(taskId);
+                }
+            }
+        }
+        // Show task details
+        function showTaskDetails(taskId) {
+            const task = state.tasks.find(task => task.id === taskId);
+            if (task) {
+                state.selectedTask = task;
+                // Format date
+                const taskDate = new Date(task.date);
+                const formattedDate = taskDate.toLocaleDateString('it-IT', {
+                    weekday: 'long',
+                    day: 'numeric',
+                    month: 'long',
+                    year: 'numeric'
+                });
+                // Format time if exists
+                let timeHtml = '';
+                if (task.time) {
+                    timeHtml = ` alle ${task.time}`;
+                }
+                // Get category
+                let categoryHtml = '';
+                if (task.category) {
+                    const category = state.categories.find(cat => cat.id === task.category);
+                    if (category) {
+                        categoryHtml = `<span class="${category.color}">${category.name}</span>`;
+                    }
+                }
+                // Important icon
+                const importantIcon = task.important ? '<i class="fas fa-star text-yellow-500 mr-2"></i>' : '';
+                // Update task details
+                elements.taskDetailTitle.innerHTML = `${importantIcon}${task.title}`;
+                elements.taskDetailDate.textContent = `${formattedDate}${timeHtml}`;
+                if (categoryHtml) {
+                    elements.taskDetailCategory.innerHTML = categoryHtml;
+                    elements.taskDetailCategory.classList.remove('hidden');
+                } else {
+                    elements.taskDetailCategory.classList.add('hidden');
+                }
+                elements.taskDetailDescription.textContent = task.description || 'Nessuna descrizione fornita';
+                // Show details and hide placeholder
+                elements.taskDetails.classList.remove('hidden');
+                elements.noTaskSelected.classList.add('hidden');
+            }
+        }
+        // Open add task modal
+        function openAddTaskModal() {
+            elements.modalTitle.textContent = 'Nuova attività';
+            elements.taskId.value = '';
+            elements.taskTitle.value = '';
+            elements.taskDescription.value = '';
+            // Set today's date as default
+            const today = new Date();
+            const formattedDate = today.toISOString().split('T')[0];
+            elements.taskDate.value = formattedDate;
+            elements.taskTime.value = '';
+            elements.taskCategory.value = '';
+            elements.taskImportant.checked = false;
+            elements.taskModal.classList.remove('hidden');
+        }
+        // Open edit task modal
+        function openEditTaskModal(taskId) {
+            const task = state.tasks.find(task => task.id === taskId);
+            if (task) {
+                elements.modalTitle.textContent = 'Modifica attività';
+                elements.taskId.value = task.id;
+                elements.taskTitle.value = task.title;
+                elements.taskDescription.value = task.description || '';
+                elements.taskDate.value = task.date;
+                elements.taskTime.value = task.time || '';
+                elements.taskCategory.value = task.category || '';
+                elements.taskImportant.checked = task.important || false;
+                elements.taskModal.classList.remove('hidden');
+            }
+        }
+        // Close task modal
+        function closeTaskModal() {
+            elements.taskModal.classList.add('hidden');
+        }
+        // Save task
+        function saveTask() {
+            const title = elements.taskTitle.value.trim();
+            if (!title) {
+                alert('Il titolo è obbligatorio');
+                return;
+            }
+            const taskData = {
+                id: elements.taskId.value ? parseInt(elements.taskId.value) : Date.now(),
+                title: title,
+                description: elements.taskDescription.value.trim(),
+                date: elements.taskDate.value,
+                time: elements.taskTime.value || null,
+                category: elements.taskCategory.value ? parseInt(elements.taskCategory.value) : null,
+                important: elements.taskImportant.checked,
+                completed: false
+            };
+            if (elements.taskId.value) {
+                // Update existing task
+                const taskIndex = state.tasks.findIndex(task => task.id === taskData.id);
+                if (taskIndex !== -1) {
+                    state.tasks[taskIndex] = {
+                        ...state.tasks[taskIndex],
+                        ...taskData
+                    };
+                }
+            } else {
+                // Add new task
+                state.tasks.push(taskData);
+            }
+            closeTaskModal();
+            renderTasks();
+            // If we're editing, update the task details
+            if (state.selectedTask && state.selectedTask.id === taskData.id) {
+                showTaskDetails(taskData.id);
+            }
+        }
+        // Delete task
+        function deleteTask() {
+            if (state.selectedTask) {
+                if (confirm('Sei sicuro di voler eliminare questa attività?')) {
+                    const taskId = state.selectedTask.id;
+                    state.tasks = state.tasks.filter(task => task.id !== taskId);
+                    // Remove task from list
+                    const taskElement = document.querySelector(`.task-item[data-task-id="${taskId}"]`);
+                    if (taskElement) {
+                        taskElement.remove();
+                    }
+                    // Hide task details
+                    elements.taskDetails.classList.add('hidden');
+                    elements.noTaskSelected.classList.remove('hidden');
+                    state.selectedTask = null;
+                    // Show no tasks message if list is empty
+                    if (elements.taskList.children.length === 0) {
+                        elements.noTasksMessage.classList.remove('hidden');
+                        elements.taskListContainer.classList.add('flex', 'items-center', 'justify-center');
+                    }
+                    renderTasks();
+                }
+            }
+        }
+        // Render categories in sidebar and task form
+        function renderCategories() {
+            // Clear categories list
+            elements.categoriesList.innerHTML = '';
+            // Add categories to sidebar
+            state.categories.forEach(category => {
+                const categoryElement = document.createElement('button');
+                categoryElement.className = 'flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:text-white hover:bg-indigo-600 rounded-md group';
+                categoryElement.dataset.categoryId = category.id;
+                categoryElement.innerHTML = `
+                    <span class="inline-block w-3 h-3 rounded-full ${category.color.replace('text-', 'bg-').split(' ')[0]} mr-3"></span>
+                    ${category.name}
+                `;
+                categoryElement.addEventListener('click', () => filterByCategory(category.id));
+                elements.categoriesList.appendChild(categoryElement);
+            });
+        }
+        // Render task categories in select dropdown
+        function renderTaskCategories() {
+            // Clear select
+            elements.taskCategory.innerHTML = '<option value="">Nessuna categoria</option>';
+            // Add categories to select
+            state.categories.forEach(category => {
+                const option = document.createElement('option');
+                option.value = category.id;
+                option.textContent = category.name;
+                elements.taskCategory.appendChild(option);
+            });
+        }
+        // Filter tasks by category
+        function filterByCategory(categoryId) {
+            state.currentView = 'category';
+            state.selectedCategory = categoryId;
+            // Update view title
+            const category = state.categories.find(cat => cat.id === categoryId);
+            elements.currentView.textContent = `Categoria: ${category.name}`;
+            // Render tasks
+            renderTasksByCategory(categoryId);
+            // Update active buttons
+            updateActiveViewButton();
+        }
+        // Render tasks by category
+        function renderTasksByCategory(categoryId) {
+            const filteredTasks = state.tasks.filter(task =>
+                task.category === categoryId && !task.completed
+            );
+            // Clear task list
+            elements.taskList.innerHTML = '';
+            if (filteredTasks.length === 0) {
+                elements.noTasksMessage.classList.remove('hidden');
+                elements.taskListContainer.classList.add('flex', 'items-center', 'justify-center');
+            } else {
+                elements.noTasksMessage.classList.add('hidden');
+                elements.taskListContainer.classList.remove('flex', 'items-center', 'justify-center');
+                // Add tasks to the list
+                filteredTasks.forEach(task => {
+                    const taskElement = createTaskElement(task);
+                    elements.taskList.appendChild(taskElement);
+                });
+            }
+        }
+        // Open add category modal
+        function openAddCategoryModal() {
+            elements.categoryName.value = '';
+            elements.categoryColor.value = 'bg-blue-500 text-blue-100';
+            elements.categoryModal.classList.remove('hidden');
+            // Close task modal if open
+            closeTaskModal();
+        }
+        // Close category modal
+        function closeCategoryModal() {
+            elements.categoryModal.classList.add('hidden');
+        }
+        // Save category
+        function saveCategory() {
+            const name = elements.categoryName.value.trim();
+            if (!name) {
+                alert('Il nome della categoria è obbligatorio');
+                return;
+            }
+            const categoryData = {
+                id: Date.now(),
+                name: name,
+                color: elements.categoryColor.value
+            };
+            state.categories.push(categoryData);
+            closeCategoryModal();
+            renderCategories();
+            renderTaskCategories();
+        }
+        // Toggle search
+        function toggleSearch() {
+            elements.searchContainer.classList.toggle('hidden');
+            if (!elements.searchContainer.classList.contains('hidden')) {
+                elements.searchInput.focus();
+            }
+        }
+        // Handle search
+        function handleSearch() {
+            const query = elements.searchInput.value.toLowerCase();
+            if (query === '') {
+                renderTasks();
+                return;
+            }
+            const filteredTasks = state.tasks.filter(task =>
+                task.title.toLowerCase().includes(query) ||
+                (task.description && task.description.toLowerCase().includes(query))
+            );
+            // Clear task list
+            elements.taskList.innerHTML = '';
+            if (filteredTasks.length === 0) {
+                elements.noTasksMessage.classList.remove('hidden');
+                elements.taskListContainer.classList.add('flex', 'items-center', 'justify-center');
+            } else {
+                elements.noTasksMessage.classList.add('hidden');
+                elements.taskListContainer.classList.remove('flex', 'items-center', 'justify-center');
+                // Add tasks to the list
+                filteredTasks.forEach(task => {
+                    const taskElement = createTaskElement(task);
+                    elements.taskList.appendChild(taskElement);
+                });
+            }
+        }
+        // Render calendar
+        function renderCalendar() {
+            // Clear calendar
+            elements.calendar.innerHTML = '';
+            // Set month and year in header
+            const monthNames = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'];
+            elements.currentMonthDisplay.textContent = `${monthNames[state.currentMonth]} ${state.currentYear}`;
+            // Get first day of month and total days in month
+            const firstDay = new Date(state.currentYear, state.currentMonth, 1).getDay();
+            const daysInMonth = new Date(state.currentYear, state.currentMonth + 1, 0).getDate();
+            // Adjust first day (Sunday = 0 in JavaScript, but we want Monday as first day)
+            const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1;
+            // Add day names
+            const dayNames = ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'];
+            dayNames.forEach(day => {
+                const dayElement = document.createElement('div');
+                dayElement.className = 'text-center text-sm font-medium text-gray-500 py-1';
+                dayElement.textContent = day;
+                elements.calendar.appendChild(dayElement);
+            });
+            // Add empty cells for days before the first day of the month
+            for (let i = 0; i < adjustedFirstDay; i++) {
+                const emptyElement = document.createElement('div');
+                emptyElement.className = 'h-8';
+                elements.calendar.appendChild(emptyElement);
+            }
+            // Add day cells
+            const today = new Date();
+            const currentDay = today.getDate();
+            const currentMonth = today.getMonth();
+            const currentYear = today.getFullYear();
+            for (let day = 1; day <= daysInMonth; day++) {
+                const dayElement = document.createElement('div');
+                dayElement.className = 'text-center py-1 cursor-pointer hover:bg-gray-100';
+                // Highlight current day
+                if (day === currentDay && state.currentMonth === currentMonth && state.currentYear === currentYear) {
+                    dayElement.classList.add('current-day');
+                }
+                dayElement.textContent = day;
+                // Add event listener
+                dayElement.addEventListener('click', () => {
+                    filterByDate(day);
+                });
+                elements.calendar.appendChild(dayElement);
+            }
+            // Add tasks indicators
+            state.tasks.forEach(task => {
+                if (!task.completed) {
+                    const taskDate = new Date(task.date);
+                    if (taskDate.getMonth() === state.currentMonth && taskDate.getFullYear() === state.currentYear) {
+                        const day = taskDate.getDate();
+                        const dayElement = elements.calendar.children[adjustedFirstDay + day + 6]; // +6 for day names
+                        if (dayElement) {
+                            const indicator = document.createElement('div');
+                            indicator.className = 'w-1 h-1 mx-auto rounded-full bg-indigo-500';
+                            dayElement.appendChild(indicator);
+                        }
+                    }
+                }
+            });
+        }
+        // Filter by date
+        function filterByDate(day) {
+            const date = new Date(state.currentYear, state.currentMonth, day);
+            const formattedDate = date.toISOString().split('T')[0];
+            state.currentView = 'date';
+            elements.currentView.textContent = `Attività per ${day}/${state.currentMonth + 1}/${state.currentYear}`;
+            const filteredTasks = state.tasks.filter(task =>
+                task.date === formattedDate && !task.completed
+            );
+            // Clear task list
+            elements.taskList.innerHTML = '';
+            if (filteredTasks.length === 0) {
+                elements.noTasksMessage.classList.remove('hidden');
+                elements.taskListContainer.classList.add('flex', 'items-center', 'justify-center');
+            } else {
+                elements.noTasksMessage.classList.add('hidden');
+                elements.taskListContainer.classList.remove('flex', 'items-center', 'justify-center');
+                // Add tasks to the list
+                filteredTasks.forEach(task => {
+                    const taskElement = createTaskElement(task);
+                    elements.taskList.appendChild(taskElement);
+                });
+            }
+            // Update active buttons
+            updateActiveViewButton();
+        }
+        // Go to previous month
+        function goToPreviousMonth() {
+            if (state.currentMonth === 0) {
+                state.currentMonth = 11;
+                state.currentYear--;
+            } else {
+                state.currentMonth--;
+            }
+            renderCalendar();
+        }
+        // Go to next month
+        function goToNextMonth() {
+            if (state.currentMonth === 11) {
+                state.currentMonth = 0;
+                state.currentYear++;
+            } else {
+                state.currentMonth++;
+            }
+            renderCalendar();
+        }
+        // Check dark mode preference
+        function checkDarkModePreference() {
+            const darkModePref = localStorage.getItem('darkMode') === 'true';
+            if (darkModePref) {
+                enableDarkMode();
+            } else {
+                disableDarkMode();
+            }
+        }
+        // Toggle dark mode
+        function toggleDarkMode() {
+            if (state.darkMode) {
+                disableDarkMode();
+            } else {
+                enableDarkMode();
+            }
+        }
+        // Enable dark mode
+        function enableDarkMode() {
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('darkMode', 'true');
+            state.darkMode = true;
+            elements.darkModeToggle.checked = true;
+        }
+        // Disable dark mode
+        function disableDarkMode() {
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('darkMode', 'false');
+            state.darkMode = false;
+            elements.darkModeToggle.checked = false;
+        }
+        // Initialize the app when DOM is loaded
+        document.addEventListener('DOMContentLoaded', init);
+        // Add event listeners for task details buttons
+        document.addEventListener('click', function(e) {
+            if (e.target.id === 'edit-task-btn') {
+                openEditTaskModal(state.selectedTask.id);
+            } else if (e.target.id === 'delete-task-btn') {
+                deleteTask();
+            }
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=federi/taskflow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Creare una web application per la gestione delle attività (task manager) che permetta agli utenti di visualizzare, creare e gestire le proprie attività con integrazione al calendario per promemoria e pianificazione.