Spaces:

RODRIGUE55
/

deepseek-v2

Running

App Files Files Community

RODRIGUE55 commited on Jul 22, 2025

Commit

37679c0

verified ·

1 Parent(s): a6e2cbe

creer moi une application - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +466 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Deepseek V2
-emoji: 🏆
-colorFrom: indigo
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: deepseek-v2
+emoji: 🐳
+colorFrom: green
+colorTo: pink
 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,466 @@
-<!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="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TaskMaster - Gestionnaire de Tâches</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>
+        /* Animation personnalisée */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .fade-in {
+            animation: fadeIn 0.3s ease-out forwards;
+        }
+        /* Style personnalisé pour les cases à cocher */
+        .custom-checkbox {
+            appearance: none;
+            -webkit-appearance: none;
+            width: 20px;
+            height: 20px;
+            border: 2px solid #4f46e5;
+            border-radius: 4px;
+            outline: none;
+            cursor: pointer;
+            position: relative;
+        }
+        .custom-checkbox:checked {
+            background-color: #4f46e5;
+        }
+        .custom-checkbox:checked::after {
+            content: '\f00c';
+            font-family: 'Font Awesome 6 Free';
+            font-weight: 900;
+            color: white;
+            position: absolute;
+            left: 2px;
+            top: -1px;
+        }
+        /* Effet de survol pour les tâches */
+        .task-item:hover {
+            transform: translateX(5px);
+            transition: transform 0.2s ease;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-indigo-50 to-purple-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+        <!-- En-tête -->
+        <header class="flex justify-between items-center mb-8">
+            <div>
+                <h1 class="text-3xl font-bold text-indigo-800">TaskMaster</h1>
+                <p class="text-indigo-600">Votre assistant de productivité</p>
+            </div>
+            <div class="flex items-center space-x-4">
+                <button id="theme-toggle" class="p-2 rounded-full bg-indigo-100 text-indigo-700 hover:bg-indigo-200 transition">
+                    <i class="fas fa-moon"></i>
+                </button>
+                <div class="relative">
+                    <button id="user-menu" class="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center">
+                        <i class="fas fa-user"></i>
+                    </button>
+                    <div id="dropdown-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
+                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50">Profil</a>
+                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50">Paramètres</a>
+                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50">Déconnexion</a>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <!-- Statistiques -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+            <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-indigo-500">
+                <h3 class="text-gray-500 text-sm font-medium">Tâches totales</h3>
+                <p id="total-tasks" class="text-2xl font-bold text-indigo-800">0</p>
+            </div>
+            <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-green-500">
+                <h3 class="text-gray-500 text-sm font-medium">Terminées</h3>
+                <p id="completed-tasks" class="text-2xl font-bold text-green-600">0</p>
+            </div>
+            <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-yellow-500">
+                <h3 class="text-gray-500 text-sm font-medium">En retard</h3>
+                <p id="overdue-tasks" class="text-2xl font-bold text-yellow-600">0</p>
+            </div>
+        </div>
+        <!-- Formulaire d'ajout de tâche -->
+        <div class="bg-white rounded-xl shadow-md p-6 mb-8">
+            <h2 class="text-xl font-semibold text-gray-800 mb-4">Ajouter une nouvelle tâche</h2>
+            <form id="task-form" class="space-y-4">
+                <div>
+                    <label for="task-title" class="block text-sm font-medium text-gray-700 mb-1">Titre de la tâche</label>
+                    <input type="text" id="task-title" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                </div>
+                <div>
+                    <label for="task-description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+                    <textarea id="task-description" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <label for="task-date" class="block text-sm font-medium text-gray-700 mb-1">Date d'échéance</label>
+                        <input type="date" id="task-date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                    </div>
+                    <div>
+                        <label for="task-priority" class="block text-sm font-medium text-gray-700 mb-1">Priorité</label>
+                        <select id="task-priority" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                            <option value="low">Faible</option>
+                            <option value="medium" selected>Moyenne</option>
+                            <option value="high">Élevée</option>
+                        </select>
+                    </div>
+                </div>
+                <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition flex items-center justify-center space-x-2">
+                    <i class="fas fa-plus"></i>
+                    <span>Ajouter la tâche</span>
+                </button>
+            </form>
+        </div>
+        <!-- Filtres et recherche -->
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
+            <div class="flex space-x-2">
+                <button id="filter-all" class="px-4 py-1 bg-indigo-600 text-white rounded-full text-sm">Toutes</button>
+                <button id="filter-active" class="px-4 py-1 bg-white border border-gray-300 rounded-full text-sm hover:bg-gray-50">Actives</button>
+                <button id="filter-completed" class="px-4 py-1 bg-white border border-gray-300 rounded-full text-sm hover:bg-gray-50">Terminées</button>
+            </div>
+            <div class="relative w-full md:w-auto">
+                <input type="text" id="task-search" placeholder="Rechercher des tâches..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+            </div>
+        </div>
+        <!-- Liste des tâches -->
+        <div class="bg-white rounded-xl shadow-md overflow-hidden">
+            <div id="task-list" class="divide-y divide-gray-200">
+                <!-- Les tâches seront ajoutées ici dynamiquement -->
+                <div class="p-4 text-center text-gray-500">
+                    Aucune tâche pour le moment. Ajoutez votre première tâche !
+                </div>
+            </div>
+        </div>
+        <!-- Modal de confirmation -->
+        <div id="confirm-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+            <div class="bg-white rounded-lg p-6 max-w-md w-full fade-in">
+                <h3 class="text-lg font-medium text-gray-900 mb-4">Confirmer la suppression</h3>
+                <p class="text-gray-600 mb-6">Êtes-vous sûr de vouloir supprimer cette tâche ? Cette action est irréversible.</p>
+                <div class="flex justify-end space-x-3">
+                    <button id="cancel-delete" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Annuler</button>
+                    <button id="confirm-delete" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">Supprimer</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Variables globales
+        let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
+        let currentFilter = 'all';
+        let taskToDelete = null;
+        let darkMode = false;
+        // DOM Elements
+        const taskForm = document.getElementById('task-form');
+        const taskList = document.getElementById('task-list');
+        const totalTasksEl = document.getElementById('total-tasks');
+        const completedTasksEl = document.getElementById('completed-tasks');
+        const overdueTasksEl = document.getElementById('overdue-tasks');
+        const filterAllBtn = document.getElementById('filter-all');
+        const filterActiveBtn = document.getElementById('filter-active');
+        const filterCompletedBtn = document.getElementById('filter-completed');
+        const taskSearch = document.getElementById('task-search');
+        const confirmModal = document.getElementById('confirm-modal');
+        const cancelDeleteBtn = document.getElementById('cancel-delete');
+        const confirmDeleteBtn = document.getElementById('confirm-delete');
+        const themeToggleBtn = document.getElementById('theme-toggle');
+        const userMenuBtn = document.getElementById('user-menu');
+        const dropdownMenu = document.getElementById('dropdown-menu');
+        // Événements
+        document.addEventListener('DOMContentLoaded', () => {
+            renderTasks();
+            updateStats();
+            // Vérifier le thème dans le localStorage
+            if (localStorage.getItem('darkMode') === 'true') {
+                toggleDarkMode();
+            }
+        });
+        taskForm.addEventListener('submit', addTask);
+        filterAllBtn.addEventListener('click', () => setFilter('all'));
+        filterActiveBtn.addEventListener('click', () => setFilter('active'));
+        filterCompletedBtn.addEventListener('click', () => setFilter('completed'));
+        taskSearch.addEventListener('input', searchTasks);
+        cancelDeleteBtn.addEventListener('click', hideModal);
+        confirmDeleteBtn.addEventListener('click', deleteTask);
+        themeToggleBtn.addEventListener('click', toggleDarkMode);
+        userMenuBtn.addEventListener('click', toggleDropdown);
+        // Fermer le dropdown quand on clique ailleurs
+        document.addEventListener('click', (e) => {
+            if (!userMenuBtn.contains(e.target) && !dropdownMenu.contains(e.target)) {
+                dropdownMenu.classList.add('hidden');
+            }
+        });
+        // Fonctions
+        function addTask(e) {
+            e.preventDefault();
+            const title = document.getElementById('task-title').value;
+            const description = document.getElementById('task-description').value;
+            const date = document.getElementById('task-date').value;
+            const priority = document.getElementById('task-priority').value;
+            const newTask = {
+                id: Date.now(),
+                title,
+                description,
+                date,
+                priority,
+                completed: false,
+                createdAt: new Date().toISOString()
+            };
+            tasks.unshift(newTask);
+            saveTasks();
+            renderTasks();
+            updateStats();
+            // Réinitialiser le formulaire
+            taskForm.reset();
+            // Animation de la nouvelle tâche
+            const firstTask = taskList.firstElementChild;
+            if (firstTask) {
+                firstTask.classList.add('fade-in');
+            }
+        }
+        function renderTasks(filteredTasks = null) {
+            const tasksToRender = filteredTasks || filterTasks();
+            if (tasksToRender.length === 0) {
+                taskList.innerHTML = `
+                    <div class="p-4 text-center text-gray-500">
+                        ${currentFilter === 'all'
+                            ? 'Aucune tâche pour le moment. Ajoutez votre première tâche !'
+                            : currentFilter === 'active'
+                                ? 'Aucune tâche active.'
+                                : 'Aucune tâche terminée.'}
+                    </div>
+                `;
+                return;
+            }
+            taskList.innerHTML = '';
+            tasksToRender.forEach(task => {
+                const isOverdue = !task.completed && task.date && new Date(task.date) < new Date();
+                const priorityColors = {
+                    low: 'bg-blue-100 text-blue-800',
+                    medium: 'bg-yellow-100 text-yellow-800',
+                    high: 'bg-red-100 text-red-800'
+                };
+                const taskElement = document.createElement('div');
+                taskElement.className = `p-4 task-item ${task.completed ? 'bg-gray-50' : 'bg-white'} ${isOverdue ? 'border-l-4 border-red-500' : ''}`;
+                taskElement.dataset.id = task.id;
+                taskElement.innerHTML = `
+                    <div class="flex items-start space-x-3">
+                        <div class="flex-shrink-0 pt-1">
+                            <input type="checkbox" ${task.completed ? 'checked' : ''}
+                                   class="custom-checkbox toggle-complete"
+                                   data-id="${task.id}">
+                        </div>
+                        <div class="flex-1 min-w-0">
+                            <div class="flex justify-between items-start">
+                                <h3 class="${task.completed ? 'line-through text-gray-500' : 'text-gray-900'} font-medium">
+                                    ${task.title}
+                                </h3>
+                                <div class="flex space-x-2">
+                                    <span class="text-xs px-2 py-1 rounded-full ${priorityColors[task.priority]}">
+                                        ${task.priority === 'low' ? 'Faible' : task.priority === 'medium' ? 'Moyenne' : 'Élevée'}
+                                    </span>
+                                    <button class="text-gray-400 hover:text-red-500 delete-task" data-id="${task.id}">
+                                        <i class="fas fa-trash"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            ${task.description ? `<p class="mt-1 text-sm ${task.completed ? 'text-gray-400' : 'text-gray-600'}">${task.description}</p>` : ''}
+                            <div class="mt-2 flex flex-wrap items-center text-xs text-gray-500 space-x-3">
+                                <div>
+                                    <i class="far fa-calendar-alt mr-1"></i>
+                                    ${task.date ? new Date(task.date).toLocaleDateString('fr-FR') : 'Pas de date'}
+                                </div>
+                                <div>
+                                    <i class="far fa-clock mr-1"></i>
+                                    ${new Date(task.createdAt).toLocaleDateString('fr-FR')}
+                                </div>
+                                ${isOverdue ? '<span class="text-red-500"><i class="fas fa-exclamation-circle mr-1"></i> En retard</span>' : ''}
+                            </div>
+                        </div>
+                    </div>
+                `;
+                taskList.appendChild(taskElement);
+            });
+            // Ajouter les événements aux nouveaux éléments
+            document.querySelectorAll('.toggle-complete').forEach(checkbox => {
+                checkbox.addEventListener('change', toggleTaskComplete);
+            });
+            document.querySelectorAll('.delete-task').forEach(button => {
+                button.addEventListener('click', showDeleteConfirmation);
+            });
+        }
+        function toggleTaskComplete(e) {
+            const taskId = parseInt(e.target.dataset.id);
+            const task = tasks.find(t => t.id === taskId);
+            if (task) {
+                task.completed = e.target.checked;
+                saveTasks();
+                renderTasks();
+                updateStats();
+            }
+        }
+        function showDeleteConfirmation(e) {
+            e.stopPropagation();
+            taskToDelete = parseInt(e.target.closest('button').dataset.id);
+            confirmModal.classList.remove('hidden');
+        }
+        function hideModal() {
+            confirmModal.classList.add('hidden');
+            taskToDelete = null;
+        }
+        function deleteTask() {
+            tasks = tasks.filter(task => task.id !== taskToDelete);
+            saveTasks();
+            renderTasks();
+            updateStats();
+            hideModal();
+        }
+        function setFilter(filter) {
+            currentFilter = filter;
+            // Mettre à jour les boutons actifs
+            filterAllBtn.className = 'px-4 py-1 rounded-full text-sm';
+            filterActiveBtn.className = 'px-4 py-1 rounded-full text-sm';
+            filterCompletedBtn.className = 'px-4 py-1 rounded-full text-sm';
+            if (filter === 'all') {
+                filterAllBtn.className += ' bg-indigo-600 text-white';
+                filterActiveBtn.className += ' bg-white border border-gray-300 hover:bg-gray-50';
+                filterCompletedBtn.className += ' bg-white border border-gray-300 hover:bg-gray-50';
+            } else if (filter === 'active') {
+                filterActiveBtn.className += ' bg-indigo-600 text-white';
+                filterAllBtn.className += ' bg-white border border-gray-300 hover:bg-gray-50';
+                filterCompletedBtn.className += ' bg-white border border-gray-300 hover:bg-gray-50';
+            } else {
+                filterCompletedBtn.className += ' bg-indigo-600 text-white';
+                filterAllBtn.className += ' bg-white border border-gray-300 hover:bg-gray-50';
+                filterActiveBtn.className += ' bg-white border border-gray-300 hover:bg-gray-50';
+            }
+            renderTasks();
+        }
+        function filterTasks() {
+            let filtered = [...tasks];
+            if (currentFilter === 'active') {
+                filtered = filtered.filter(task => !task.completed);
+            } else if (currentFilter === 'completed') {
+                filtered = filtered.filter(task => task.completed);
+            }
+            return filtered;
+        }
+        function searchTasks() {
+            const searchTerm = taskSearch.value.toLowerCase();
+            if (!searchTerm) {
+                renderTasks();
+                return;
+            }
+            const filtered = filterTasks().filter(task =>
+                task.title.toLowerCase().includes(searchTerm) ||
+                (task.description && task.description.toLowerCase().includes(searchTerm))
+            );
+            renderTasks(filtered);
+        }
+        function updateStats() {
+            totalTasksEl.textContent = tasks.length;
+            const completed = tasks.filter(task => task.completed).length;
+            completedTasksEl.textContent = completed;
+            const overdue = tasks.filter(task =>
+                !task.completed &&
+                task.date &&
+                new Date(task.date) < new Date()
+            ).length;
+            overdueTasksEl.textContent = overdue;
+        }
+        function saveTasks() {
+            localStorage.setItem('tasks', JSON.stringify(tasks));
+        }
+        function toggleDarkMode() {
+            darkMode = !darkMode;
+            if (darkMode) {
+                document.documentElement.classList.add('dark');
+                themeToggleBtn.innerHTML = '<i class="fas fa-sun"></i>';
+                localStorage.setItem('darkMode', 'true');
+            } else {
+                document.documentElement.classList.remove('dark');
+                themeToggleBtn.innerHTML = '<i class="fas fa-moon"></i>';
+                localStorage.setItem('darkMode', 'false');
+            }
+        }
+        function toggleDropdown() {
+            dropdownMenu.classList.toggle('hidden');
+        }
+        // Ajouter des classes dark mode à Tailwind
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        dark: {
+                            100: '#1E293B',
+                            200: '#0F172A',
+                            300: '#0F172A',
+                        }
+                    }
+                }
+            }
+        }
+    </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=RODRIGUE55/deepseek-v2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>