create a modem task magaer app with animation effect and light and dark mode toggle

README.md

@@ -1,10 +1,13 @@
 ---
-title: Modem Magic Manager
-emoji: 🔥
-colorFrom: gray
-colorTo: indigo
+title: Modem Magic Manager ✨
+colorFrom: red
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,30 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    transition: all 0.3s ease;
+                }
+            </style>
+            <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-6 mt-8">
+                <div class="container mx-auto px-4 text-center text-gray-600 dark:text-gray-300">
+                    <p>© ${new Date().getFullYear()} Modem Magic Manager. All rights reserved.</p>
+                    <div class="flex justify-center space-x-4 mt-2">
+                        <a href="#" class="hover:text-primary-500 transition-colors">
+                            <i data-feather="github"></i>
+                        </a>
+                        <a href="#" class="hover:text-primary-500 transition-colors">
+                            <i data-feather="twitter"></i>
+                        </a>
+                        <a href="#" class="hover:text-primary-500 transition-colors">
+                            <i data-feather="mail"></i>
+                        </a>
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,54 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .theme-toggle {
+                    transition: all 0.3s ease;
+                }
+                .theme-toggle:hover {
+                    transform: rotate(30deg);
+                }
+            </style>
+            <nav class="bg-white dark:bg-gray-800 shadow-sm">
+                <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+                    <div class="flex items-center space-x-2">
+                        <i data-feather="wifi" class="text-primary-500"></i>
+                        <span class="text-xl font-bold text-gray-800 dark:text-white">Modem Magic</span>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <button id="themeToggle" class="theme-toggle p-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200">
+                            <i data-feather="moon"></i>
+                        </button>
+                    </div>
+                </div>
+            </nav>
+        `;
+
+        // Theme toggle functionality
+        const themeToggle = this.shadowRoot.getElementById('themeToggle');
+        themeToggle.addEventListener('click', () => {
+            const html = document.documentElement;
+            if (html.classList.contains('dark')) {
+                html.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+                themeToggle.innerHTML = `<i data-feather="sun"></i>`;
+            } else {
+                html.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+                themeToggle.innerHTML = `<i data-feather="moon"></i>`;
+            }
+            feather.replace();
+        });
+
+        // Initialize theme icon
+        const html = document.documentElement;
+        if (html.classList.contains('dark')) {
+            themeToggle.innerHTML = `<i data-feather="moon"></i>`;
+        } else {
+            themeToggle.innerHTML = `<i data-feather="sun"></i>`;
+        }
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,86 @@
-<!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" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modem Magic Manager</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#6366f1',
+                        },
+                        secondary: {
+                            500: '#10b981',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-300 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <div class="flex justify-between items-center mb-8">
+            <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Modem Tasks</h1>
+            <button id="addTaskBtn" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-all hover:scale-105">
+                <i data-feather="plus"></i> Add Task
+            </button>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <!-- Task cards will be inserted here by JavaScript -->
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <!-- Add Task Modal -->
+    <div id="taskModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md animate-fade-in">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Add New Task</h2>
+                <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+            <form id="taskForm" class="space-y-4">
+                <div>
+                    <label for="taskName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Task Name</label>
+                    <input type="text" id="taskName" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:text-white" required>
+                </div>
+                <div>
+                    <label for="taskDescription" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Description</label>
+                    <textarea id="taskDescription" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:text-white"></textarea>
+                </div>
+                <div>
+                    <label for="taskPriority" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Priority</label>
+                    <select id="taskPriority" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:text-white">
+                        <option value="low">Low</option>
+                        <option value="medium">Medium</option>
+                        <option value="high">High</option>
+                    </select>
+                </div>
+                <button type="submit" class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 px-4 rounded-md transition-colors">Add Task</button>
+            </form>
+        </div>
+    </div>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,151 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // DOM Elements
+    const addTaskBtn = document.getElementById('addTaskBtn');
+    const taskModal = document.getElementById('taskModal');
+    const closeModalBtn = document.getElementById('closeModalBtn');
+    const taskForm = document.getElementById('taskForm');
+    const tasksContainer = document.querySelector('.grid');
+    
+    // Sample tasks data
+    let tasks = [
+        {
+            id: 1,
+            name: 'Configure Modem Settings',
+            description: 'Update the modem firmware and configure security settings',
+            priority: 'high',
+            completed: false,
+            date: new Date()
+        },
+        {
+            id: 2,
+            name: 'Check Network Speed',
+            description: 'Run speed tests at different times of day',
+            priority: 'medium',
+            completed: false,
+            date: new Date()
+        },
+        {
+            id: 3,
+            name: 'Document Configuration',
+            description: 'Create documentation for current modem setup',
+            priority: 'low',
+            completed: true,
+            date: new Date()
+        }
+    ];
+
+    // Event Listeners
+    addTaskBtn.addEventListener('click', openModal);
+    closeModalBtn.addEventListener('click', closeModal);
+    taskForm.addEventListener('submit', handleTaskSubmit);
+
+    // Render initial tasks
+    renderTasks();
+
+    // Functions
+    function openModal() {
+        taskModal.classList.remove('hidden');
+    }
+
+    function closeModal() {
+        taskModal.classList.add('hidden');
+    }
+
+    function handleTaskSubmit(e) {
+        e.preventDefault();
+        
+        const taskName = document.getElementById('taskName').value;
+        const taskDescription = document.getElementById('taskDescription').value;
+        const taskPriority = document.getElementById('taskPriority').value;
+        
+        const newTask = {
+            id: Date.now(),
+            name: taskName,
+            description: taskDescription,
+            priority: taskPriority,
+            completed: false,
+            date: new Date()
+        };
+        
+        tasks.unshift(newTask);
+        renderTasks();
+        closeModal();
+        taskForm.reset();
+    }
+
+    function renderTasks() {
+        tasksContainer.innerHTML = '';
+        
+        tasks.forEach(task => {
+            const taskCard = document.createElement('div');
+            taskCard.className = `task-card bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 ${task.priority}-priority ${task.completed ? 'completed' : ''}`;
+            
+            taskCard.innerHTML = `
+                <div class="flex justify-between items-start mb-2">
+                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">${task.name}</h3>
+                    <span class="text-xs px-2 py-1 rounded-full ${getPriorityClass(task.priority)}">
+                        ${task.priority}
+                    </span>
+                </div>
+                <p class="text-gray-600 dark:text-gray-300 mb-4">${task.description}</p>
+                <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
+                    <span>${formatDate(task.date)}</span>
+                    <div class="flex gap-2">
+                        <button class="task-complete-btn p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700" data-id="${task.id}">
+                            <i data-feather="${task.completed ? 'check-circle' : 'circle'}" class="${task.completed ? 'text-green-500' : 'text-gray-400'}"></i>
+                        </button>
+                        <button class="task-delete-btn p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700" data-id="${task.id}">
+                            <i data-feather="trash-2" class="text-red-400"></i>
+                        </button>
+                    </div>
+                </div>
+            `;
+            
+            tasksContainer.appendChild(taskCard);
+        });
+        
+        // Add event listeners to new buttons
+        document.querySelectorAll('.task-complete-btn').forEach(btn => {
+            btn.addEventListener('click', toggleTaskComplete);
+        });
+        
+        document.querySelectorAll('.task-delete-btn').forEach(btn => {
+            btn.addEventListener('click', deleteTask);
+        });
+        
+        feather.replace();
+    }
+
+    function toggleTaskComplete(e) {
+        const taskId = parseInt(e.currentTarget.getAttribute('data-id'));
+        const taskIndex = tasks.findIndex(task => task.id === taskId);
+        
+        if (taskIndex !== -1) {
+            tasks[taskIndex].completed = !tasks[taskIndex].completed;
+            renderTasks();
+        }
+    }
+
+    function deleteTask(e) {
+        const taskId = parseInt(e.currentTarget.getAttribute('data-id'));
+        tasks = tasks.filter(task => task.id !== taskId);
+        renderTasks();
+    }
+
+    function getPriorityClass(priority) {
+        switch(priority) {
+            case 'high': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
+            case 'medium': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
+            case 'low': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+            default: return '';
+        }
+    }
+
+    function formatDate(date) {
+        return new Date(date).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric'
+        });
+    }
+});

style.css

@@ -1,28 +1,54 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+@keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.animate-fade-in {
+    animation: fadeIn 0.3s ease-out forwards;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.task-card {
+    transition: all 0.3s ease;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.task-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
 }
+
+.dark .task-card:hover {
+    box-shadow: 0 10px 25px -5px rgba(255, 255, 255, 0.1);
+}
+
+.priority-high {
+    border-left: 4px solid #ef4444;
+}
+
+.priority-medium {
+    border-left: 4px solid #f59e0b;
+}
+
+.priority-low {
+    border-left: 4px solid #10b981;
+}
+
+.completed {
+    position: relative;
+}
+
+.completed::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(16, 185, 129, 0.1);
+    z-index: 1;
+    border-radius: 0.5rem;
+}