Spaces:

jayedgar
/

generative-waves

Running

App Files Files Community

jayedgar commited on May 12

Commit

e4555de

verified ·

1 Parent(s): 471d979

Add 2 files

Browse files

Files changed (2) hide show

index.html +179 -213
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,27 +3,43 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TaskMaster - To-Do List App</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 */
-        .task-list::-webkit-scrollbar {
             width: 8px;
         }
-        .task-list::-webkit-scrollbar-track {
-            background: #f1f1f1;
             border-radius: 10px;
         }
-        .task-list::-webkit-scrollbar-thumb {
-            background: #888;
             border-radius: 10px;
         }
-        .task-list::-webkit-scrollbar-thumb:hover {
-            background: #555;
         }
-        /* Animation for task items */
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
@@ -33,120 +49,117 @@
             animation: fadeIn 0.3s ease-out forwards;
         }
-        /* Checkbox styling */
         .custom-checkbox {
             appearance: none;
             -webkit-appearance: none;
             width: 22px;
             height: 22px;
-            border: 2px solid #4f46e5;
-            border-radius: 4px;
             cursor: pointer;
             position: relative;
             transition: all 0.2s;
         }
         .custom-checkbox:checked {
-            background-color: #4f46e5;
         }
         .custom-checkbox:checked::after {
-            content: '\2713';
             position: absolute;
             color: white;
             font-size: 14px;
             left: 4px;
-            top: 1px;
-        }
-        /* Empty state styling */
-        .empty-state {
-            opacity: 0.6;
-            transition: all 0.3s;
-        }
-        .empty-state:hover {
-            opacity: 1;
-            transform: scale(1.02);
         }
     </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-3xl">
         <!-- Header -->
         <header class="mb-8 text-center">
-            <h1 class="text-4xl font-bold text-indigo-800 mb-2">TaskMaster</h1>
-            <p class="text-indigo-600">Organize your day, one task at a time</p>
         </header>
-        <!-- Main Content -->
-        <main class="bg-white rounded-xl shadow-lg overflow-hidden">
             <!-- Input Section -->
-            <div class="p-6 border-b border-gray-200">
-                <div class="flex gap-2">
                     <input
                         type="text"
                         id="taskInput"
-                        placeholder="What needs to be done?"
-                        class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
-                        autocomplete="off"
                     >
                     <button
                         id="addTaskBtn"
-                        class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200 flex items-center gap-2"
                     >
-                        <i class="fas fa-plus"></i> Add
                     </button>
                 </div>
-                <div class="flex justify-between mt-4">
-                    <div class="flex items-center gap-2">
-                        <span class="text-sm text-gray-600">Filter:</span>
-                        <select id="filterSelect" class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500">
-                            <option value="all">All Tasks</option>
-                            <option value="active">Active</option>
-                            <option value="completed">Completed</option>
-                        </select>
-                    </div>
                     <button
-                        id="clearCompletedBtn"
-                        class="text-sm text-indigo-600 hover:text-indigo-800 transition-colors duration-200"
                     >
-                        Clear Completed
                     </button>
                 </div>
             </div>
-            <!-- Task List -->
-            <div class="task-list max-h-96 overflow-y-auto p-4">
-                <div id="tasksContainer">
-                    <!-- Tasks will be added here dynamically -->
-                </div>
-                <!-- Empty State -->
-                <div id="emptyState" class="empty-state text-center py-12">
-                    <i class="fas fa-tasks text-6xl text-gray-300 mb-4"></i>
-                    <h3 class="text-xl text-gray-500 font-medium">No tasks yet</h3>
-                    <p class="text-gray-400 mt-1">Add your first task to get started!</p>
                 </div>
             </div>
-            <!-- Stats Footer -->
-            <div class="bg-gray-50 px-6 py-3 border-t border-gray-200 flex justify-between items-center">
-                <span id="taskCount" class="text-sm text-gray-600">0 tasks</span>
                 <button
-                    id="saveTasksBtn"
-                    class="text-sm bg-green-600 hover:bg-green-700 text-white px-4 py-1 rounded transition-colors duration-200 flex items-center gap-1"
                 >
-                    <i class="fas fa-save"></i> Save
                 </button>
             </div>
-        </main>
-        <!-- Footer -->
-        <footer class="mt-8 text-center text-gray-500 text-sm">
-            <p>Tasks are saved in your browser's local storage</p>
-        </footer>
     </div>
     <script>
@@ -156,94 +169,91 @@
             const addTaskBtn = document.getElementById('addTaskBtn');
             const tasksContainer = document.getElementById('tasksContainer');
             const emptyState = document.getElementById('emptyState');
-            const filterSelect = document.getElementById('filterSelect');
-            const clearCompletedBtn = document.getElementById('clearCompletedBtn');
-            const saveTasksBtn = document.getElementById('saveTasksBtn');
             const taskCount = document.getElementById('taskCount');
             let tasks = [];
-            // Load tasks from localStorage
-            function loadTasks() {
-                const savedTasks = localStorage.getItem('tasks');
-                if (savedTasks) {
-                    tasks = JSON.parse(savedTasks);
                     renderTasks();
-                }
-                updateEmptyState();
-                updateTaskCount();
-            }
-            // Save tasks to localStorage
-            function saveTasks() {
-                localStorage.setItem('tasks', JSON.stringify(tasks));
-                showNotification('Tasks saved successfully!', 'success');
-            }
-            // Add new task
             function addTask() {
-                const taskText = taskInput.value.trim();
-                if (taskText === '') {
-                    showNotification('Please enter a task', 'error');
-                    return;
-                }
                 const newTask = {
                     id: Date.now(),
-                    text: taskText,
                     completed: false,
-                    createdAt: new Date().toISOString()
                 };
                 tasks.unshift(newTask);
                 taskInput.value = '';
                 renderTasks();
-                updateEmptyState();
                 updateTaskCount();
                 saveTasks();
             }
-            // Render tasks based on filter
             function renderTasks() {
                 tasksContainer.innerHTML = '';
-                const filter = filterSelect.value;
-                let filteredTasks = tasks;
-                if (filter === 'active') {
-                    filteredTasks = tasks.filter(task => !task.completed);
-                } else if (filter === 'completed') {
-                    filteredTasks = tasks.filter(task => task.completed);
-                }
                 if (filteredTasks.length === 0) {
                     updateEmptyState();
                     return;
                 }
                 filteredTasks.forEach(task => {
                     const taskElement = document.createElement('div');
-                    taskElement.className = `task-item bg-white mb-2 p-3 rounded-lg border border-gray-200 hover:border-indigo-300 transition-colors duration-200 flex items-center justify-between ${task.completed ? 'opacity-70' : ''}`;
                     taskElement.innerHTML = `
-                        <div class="flex items-center gap-3">
                             <input
                                 type="checkbox"
-                                class="custom-checkbox"
                                 ${task.completed ? 'checked' : ''}
                                 data-id="${task.id}"
                             >
-                            <span class="${task.completed ? 'line-through text-gray-500' : 'text-gray-800'}">${task.text}</span>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <span class="text-xs text-gray-400">${formatDate(task.createdAt)}</span>
-                            <button
-                                class="delete-btn text-red-500 hover:text-red-700 p-1 rounded-full transition-colors duration-200"
-                                data-id="${task.id}"
-                            >
-                                <i class="fas fa-trash-alt"></i>
-                            </button>
                         </div>
                     `;
                     tasksContainer.appendChild(taskElement);
@@ -251,7 +261,7 @@
                 // Add event listeners to new elements
                 document.querySelectorAll('.custom-checkbox').forEach(checkbox => {
-                    checkbox.addEventListener('change', toggleTaskStatus);
                 });
                 document.querySelectorAll('.delete-btn').forEach(btn => {
@@ -259,10 +269,9 @@
                 });
             }
-            // Toggle task completed status
-            function toggleTaskStatus(e) {
                 const taskId = parseInt(e.target.dataset.id);
-                const task = tasks.find(task => task.id === taskId);
                 if (task) {
                     task.completed = e.target.checked;
@@ -272,124 +281,81 @@
                 }
             }
-            // Delete task
             function deleteTask(e) {
                 const taskId = parseInt(e.currentTarget.dataset.id);
                 tasks = tasks.filter(task => task.id !== taskId);
                 renderTasks();
-                updateEmptyState();
                 updateTaskCount();
                 saveTasks();
             }
-            // Clear completed tasks
-            function clearCompleted() {
                 tasks = tasks.filter(task => !task.completed);
                 renderTasks();
-                updateEmptyState();
                 updateTaskCount();
                 saveTasks();
             }
-            // Update empty state visibility
-            function updateEmptyState() {
-                const filter = filterSelect.value;
-                let hasTasks = false;
-                if (filter === 'all') {
-                    hasTasks = tasks.length > 0;
-                } else if (filter === 'active') {
-                    hasTasks = tasks.some(task => !task.completed);
-                } else if (filter === 'completed') {
-                    hasTasks = tasks.some(task => task.completed);
-                }
-                emptyState.style.display = hasTasks ? 'none' : 'block';
-            }
-            // Update task count
             function updateTaskCount() {
                 const totalTasks = tasks.length;
-                const completedTasks = tasks.filter(task => task.completed).length;
-                const activeTasks = totalTasks - completedTasks;
-                let countText = '';
-                if (filterSelect.value === 'all') {
-                    countText = `${totalTasks} ${totalTasks === 1 ? 'task' : 'tasks'} (${activeTasks} active, ${completedTasks} completed)`;
-                } else if (filterSelect.value === 'active') {
-                    countText = `${activeTasks} ${activeTasks === 1 ? 'task' : 'tasks'} remaining`;
                 } else {
-                    countText = `${completedTasks} ${completedTasks === 1 ? 'task' : 'tasks'} completed`;
                 }
-                taskCount.textContent = countText;
             }
-            // Format date for display
-            function formatDate(dateString) {
-                const date = new Date(dateString);
-                return date.toLocaleDateString('en-US', {
-                    month: 'short',
-                    day: 'numeric',
-                    hour: '2-digit',
-                    minute: '2-digit'
                 });
             }
-            // Show notification
-            function showNotification(message, type) {
-                const notification = document.createElement('div');
-                notification.className = `fixed top-4 right-4 px-4 py-2 rounded-lg shadow-lg text-white ${
-                    type === 'success' ? 'bg-green-500' : 'bg-red-500'
-                } animate-fade-in-out`;
-                notification.textContent = message;
-                document.body.appendChild(notification);
                 setTimeout(() => {
-                    notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
-                    setTimeout(() => {
-                        notification.remove();
-                    }, 300);
-                }, 3000);
             }
-            // Event Listeners
-            addTaskBtn.addEventListener('click', addTask);
-            taskInput.addEventListener('keypress', function(e) {
-                if (e.key === 'Enter') {
-                    addTask();
-                }
-            });
-            filterSelect.addEventListener('change', function() {
-                renderTasks();
-                updateEmptyState();
-                updateTaskCount();
-            });
-            clearCompletedBtn.addEventListener('click', clearCompleted);
-            saveTasksBtn.addEventListener('click', saveTasks);
-            // Initialize
-            loadTasks();
-            // Add animation styles dynamically
-            const style = document.createElement('style');
-            style.textContent = `
-                @keyframes fade-in-out {
-                    0% { opacity: 0; transform: translateY(-10px); }
-                    10% { opacity: 1; transform: translateY(0); }
-                    90% { opacity: 1; transform: translateY(0); }
-                    100% { opacity: 0; transform: translateY(-10px); }
-                }
-                .animate-fade-in-out {
-                    animation: fade-in-out 3s ease forwards;
                 }
-            `;
-            document.head.appendChild(style);
         });
     </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=jayedgar/generative-waves" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nebula Tasks | Modern To-Do App</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 gradient animation */
+        @keyframes gradientBG {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .gradient-bg {
+            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+            background-size: 400% 400%;
+            animation: gradientBG 15s ease infinite;
+        }
         /* Custom scrollbar */
+        ::-webkit-scrollbar {
             width: 8px;
         }
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.1);
             border-radius: 10px;
         }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.3);
             border-radius: 10px;
         }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.5);
         }
+        /* Task item animation */
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
             animation: fadeIn 0.3s ease-out forwards;
         }
+        /* Checkbox style */
         .custom-checkbox {
             appearance: none;
             -webkit-appearance: none;
             width: 22px;
             height: 22px;
+            border: 2px solid rgba(255, 255, 255, 0.7);
+            border-radius: 6px;
             cursor: pointer;
             position: relative;
             transition: all 0.2s;
         }
         .custom-checkbox:checked {
+            background-color: rgba(255, 255, 255, 0.3);
+            border-color: rgba(255, 255, 255, 0.7);
         }
         .custom-checkbox:checked::after {
+            content: '✓';
             position: absolute;
             color: white;
             font-size: 14px;
             left: 4px;
+            top: 0;
         }
     </style>
 </head>
+<body class="gradient-bg min-h-screen text-white font-sans">
     <div class="container mx-auto px-4 py-8 max-w-3xl">
         <!-- Header -->
         <header class="mb-8 text-center">
+            <h1 class="text-4xl font-bold mb-2 flex items-center justify-center">
+                <i class="fas fa-meteor mr-3 text-yellow-300"></i>
+                Nebula Tasks
+            </h1>
+            <p class="opacity-80">Organize your cosmic to-dos</p>
         </header>
+        <!-- Main Card -->
+        <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
             <!-- Input Section -->
+            <div class="p-6 border-b border-white border-opacity-20">
+                <div class="flex gap-3">
                     <input
                         type="text"
                         id="taskInput"
+                        placeholder="Add a new task..."
+                        class="flex-1 bg-white bg-opacity-20 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70"
                     >
                     <button
                         id="addTaskBtn"
+                        class="bg-white bg-opacity-30 hover:bg-opacity-40 text-white px-5 rounded-lg transition-all duration-200 flex items-center justify-center"
                     >
+                        <i class="fas fa-plus mr-2"></i> Add
                     </button>
                 </div>
+            </div>
+            <!-- Filter Controls -->
+            <div class="px-6 py-3 flex justify-between items-center bg-white bg-opacity-5">
+                <div class="text-sm opacity-80">
+                    <span id="taskCount">0</span> tasks
+                </div>
+                <div class="flex gap-2">
+                    <button
+                        data-filter="all"
+                        class="filter-btn px-3 py-1 text-xs rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition"
+                    >
+                        All
+                    </button>
+                    <button
+                        data-filter="active"
+                        class="filter-btn px-3 py-1 text-xs rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 transition"
+                    >
+                        Active
+                    </button>
                     <button
+                        data-filter="completed"
+                        class="filter-btn px-3 py-1 text-xs rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 transition"
                     >
+                        Completed
                     </button>
                 </div>
             </div>
+            <!-- Tasks List -->
+            <div id="tasksContainer" class="max-h-96 overflow-y-auto px-6">
+                <!-- Tasks will be added here dynamically -->
+                <div id="emptyState" class="py-10 text-center opacity-70">
+                    <i class="fas fa-tasks text-4xl mb-3 opacity-50"></i>
+                    <p>No tasks yet. Add one above!</p>
                 </div>
             </div>
+            <!-- Footer Actions -->
+            <div class="p-4 bg-white bg-opacity-5 flex justify-between items-center text-sm">
                 <button
+                    id="clearCompletedBtn"
+                    class="opacity-70 hover:opacity-100 transition"
                 >
+                    Clear completed
+                </button>
+                <button
+                    id="saveAllBtn"
+                    class="bg-blue-500 bg-opacity-80 hover:bg-opacity-100 px-3 py-1 rounded-lg flex items-center transition"
+                >
+                    <i class="fas fa-save mr-2"></i> Save All
                 </button>
             </div>
+        </div>
     </div>
     <script>
             const addTaskBtn = document.getElementById('addTaskBtn');
             const tasksContainer = document.getElementById('tasksContainer');
             const emptyState = document.getElementById('emptyState');
             const taskCount = document.getElementById('taskCount');
+            const filterButtons = document.querySelectorAll('.filter-btn');
+            const clearCompletedBtn = document.getElementById('clearCompletedBtn');
+            const saveAllBtn = document.getElementById('saveAllBtn');
+            // State
             let tasks = [];
+            let currentFilter = 'all';
+            // Initialize the app
+            loadTasks();
+            updateTaskCount();
+            updateEmptyState();
+            updateActiveFilterButton();
+            // Event Listeners
+            addTaskBtn.addEventListener('click', addTask);
+            taskInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') addTask();
+            });
+            filterButtons.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    currentFilter = this.dataset.filter;
                     renderTasks();
+                    updateActiveFilterButton();
+                });
+            });
+            clearCompletedBtn.addEventListener('click', clearCompletedTasks);
+            saveAllBtn.addEventListener('click', saveTasks);
+            // Functions
             function addTask() {
+                const text = taskInput.value.trim();
+                if (text === '') return;
                 const newTask = {
                     id: Date.now(),
+                    text: text,
                     completed: false,
+                    createdAt: new Date()
                 };
                 tasks.unshift(newTask);
                 taskInput.value = '';
                 renderTasks();
                 updateTaskCount();
+                updateEmptyState();
                 saveTasks();
             }
             function renderTasks() {
                 tasksContainer.innerHTML = '';
+                const filteredTasks = tasks.filter(task => {
+                    if (currentFilter === 'active') return !task.completed;
+                    if (currentFilter === 'completed') return task.completed;
+                    return true;
+                });
                 if (filteredTasks.length === 0) {
                     updateEmptyState();
                     return;
                 }
+                emptyState.style.display = 'none';
                 filteredTasks.forEach(task => {
                     const taskElement = document.createElement('div');
+                    taskElement.className = `task-item py-3 px-2 flex items-center border-b border-white border-opacity-10 hover:bg-white hover:bg-opacity-5 transition ${task.completed ? 'opacity-70' : ''}`;
                     taskElement.innerHTML = `
+                        <div class="flex items-center flex-1">
                             <input
                                 type="checkbox"
+                                class="custom-checkbox mr-3"
                                 ${task.completed ? 'checked' : ''}
                                 data-id="${task.id}"
                             >
+                            <span class="${task.completed ? 'line-through opacity-80' : ''}">${task.text}</span>
                         </div>
+                        <button class="delete-btn p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition" data-id="${task.id}">
+                            <i class="fas fa-trash-alt opacity-70 hover:opacity-100"></i>
+                        </button>
                     `;
                     tasksContainer.appendChild(taskElement);
                 // Add event listeners to new elements
                 document.querySelectorAll('.custom-checkbox').forEach(checkbox => {
+                    checkbox.addEventListener('change', toggleTaskComplete);
                 });
                 document.querySelectorAll('.delete-btn').forEach(btn => {
                 });
             }
+            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;
                 }
             }
             function deleteTask(e) {
                 const taskId = parseInt(e.currentTarget.dataset.id);
                 tasks = tasks.filter(task => task.id !== taskId);
                 renderTasks();
                 updateTaskCount();
+                updateEmptyState();
                 saveTasks();
             }
+            function clearCompletedTasks() {
                 tasks = tasks.filter(task => !task.completed);
                 renderTasks();
                 updateTaskCount();
+                updateEmptyState();
                 saveTasks();
             }
             function updateTaskCount() {
+                const activeTasks = tasks.filter(task => !task.completed).length;
                 const totalTasks = tasks.length;
+                taskCount.textContent = `${activeTasks} active of ${totalTasks}`;
+            }
+            function updateEmptyState() {
+                const filteredTasks = tasks.filter(task => {
+                    if (currentFilter === 'active') return !task.completed;
+                    if (currentFilter === 'completed') return task.completed;
+                    return true;
+                });
+                if (filteredTasks.length === 0) {
+                    emptyState.style.display = 'block';
                 } else {
+                    emptyState.style.display = 'none';
                 }
             }
+            function updateActiveFilterButton() {
+                filterButtons.forEach(btn => {
+                    if (btn.dataset.filter === currentFilter) {
+                        btn.classList.remove('bg-opacity-10');
+                        btn.classList.add('bg-opacity-20');
+                    } else {
+                        btn.classList.remove('bg-opacity-20');
+                        btn.classList.add('bg-opacity-10');
+                    }
                 });
             }
+            function saveTasks() {
+                localStorage.setItem('nebula-tasks', JSON.stringify(tasks));
+                // Show save confirmation
+                const originalText = saveAllBtn.innerHTML;
+                saveAllBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Saved!';
+                saveAllBtn.classList.remove('bg-blue-500');
+                saveAllBtn.classList.add('bg-green-500');
                 setTimeout(() => {
+                    saveAllBtn.innerHTML = originalText;
+                    saveAllBtn.classList.remove('bg-green-500');
+                    saveAllBtn.classList.add('bg-blue-500');
+                }, 1500);
             }
+            function loadTasks() {
+                const savedTasks = localStorage.getItem('nebula-tasks');
+                if (savedTasks) {
+                    tasks = JSON.parse(savedTasks);
+                    renderTasks();
                 }
+            }
         });
     </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=jayedgar/generative-waves" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
1	- Create a responsive to-do list web app with save/delete features


1	+ Create a responsive to-do list web app with save/delete features
2	+ Create a responsive to-do list web app with save/delete features , with a cool background