Raptor Admin Dashboard - Copy this Html, Tailwind Component to your project
in to do note <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Todo List App</title> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { primary: '#b066f8', } } } } </script> <style> .completed { text-decoration: line-through; color: #6b7280; } </style> </head> <body class="bg-purple-50 flex items-center justify-center min-h-screen p-4"> <div class="bg-white rounded-lg shadow-lg w-full max-w-md p-6"> <div class="flex gap-2 mb-6"> <input type="text" placeholder="What do you need to do today?" class="flex-1 border border-gray-200 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30"> <button class="bg-primary text-white px-6 py-2 rounded-md hover:bg-primary/90 transition-colors">Add</button> </div> <div class="space-y-3"> <!-- Unchecked item --> <div class="flex items-center justify-between"> <div class="flex items-center gap-2"> <div class="w-6 h-6 border-2 border-primary rounded flex items-center justify-center"> <input type="checkbox" class="opacity-0 absolute"> </div> <span>Pick up kids from school</span> </div> <button class="w-6 h-6 rounded-full border border-gray-200 flex items-center justify-center text-gray-400 hover:bg-gray-100"> × </button> </div> <!-- Checked item --> <div class="flex items-center justify-between"> <div class="flex items-center gap-2"> <div class="w-6 h-6 bg-primary rounded flex items-center justify-center text-white"> <input type="checkbox" checked class="opacity-0 absolute"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </div> <span class="completed">Prepare for presentation</span> </div> <button class="w-6 h-6 rounded-full border border-gray-200 flex items-center justify-center text-gray-400 hover:bg-gray-100"> × </button> </div> <!-- Unchecked item --> <div class="flex items-center justify-between"> <div class="flex items-center gap-2"> <div class="w-6 h-6 border-2 border-primary rounded flex items-center justify-center"> <input type="checkbox" class="opacity-0 absolute"> </div> <span>Print Statements</span> </div> <button class="w-6 h-6 rounded-full border border-gray-200 flex items-center justify-center text-gray-400 hover:bg-gray-100"> × </button> </div> <!-- Unchecked item --> <div class="flex items-center justify-between"> <div class="flex items-center gap-2"> <div class="w-6 h-6 border-2 border-primary rounded flex items-center justify-center"> <input type="checkbox" class="opacity-0 absolute"> </div> <span>Create invoice</span> </div> <button class="w-6 h-6 rounded-full border border-gray-200 flex items-center justify-center text-gray-400 hover:bg-gray-100"> × </button> </div> <!-- Checked item --> <div class="flex items-center justify-between"> <div class="flex items-center gap-2"> <div class="w-6 h-6 bg-primary rounded flex items-center justify-center text-white"> <input type="checkbox" checked class="opacity-0 absolute"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </div> <span class="completed">Call John</span> </div> <button class="w-6 h-6 rounded-full border border-gray-200 flex items-center justify-center text-gray-400 hover:bg-gray-100"> × </button> </div> <!-- Unchecked item --> <div class="flex items-center justify-between"> <div class="flex items-center gap-2"> <div class="w-6 h-6 border-2 border-primary rounded flex items-center justify-center"> <input type="checkbox" class="opacity-0 absolute"> </div> <span>Meeting with Alisa</span> </div> <button class="w-6 h-6 rounded-full border border-gray-200 flex items-center justify-center text-gray-400 hover:bg-gray-100"> × </button> </div> </div> </div> <script> // Add basic functionality document.addEventListener('DOMContentLoaded', function() { const checkboxContainers = document.querySelectorAll('.w-6.h-6'); checkboxContainers.forEach(container => { container.addEventListener('click', function() { const checkbox = this.querySelector('input[type="checkbox"]'); const textSpan = this.parentElement.querySelector('span'); checkbox.checked = !checkbox.checked; if (checkbox.checked) { this.classList.add('bg-primary', 'text-white'); this.classList.remove('border-2', 'border-primary'); this.innerHTML = ` <input type="checkbox" checked class="opacity-0 absolute"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> `; textSpan.classList.add('completed'); } else { this.classList.remove('bg-primary', 'text-white'); this.classList.add('border-2', 'border-primary'); this.innerHTML = `<input type="checkbox" class="opacity-0 absolute">`; textSpan.classList.remove('completed'); } }); }); // Handle delete buttons const deleteButtons = document.querySelectorAll('.w-6.h-6.rounded-full'); deleteButtons.forEach(button => { button.addEventListener('click', function() { this.closest('div.flex.items-center.justify-between').remove(); }); }); // Add new todo const addButton = document.querySelector('button.bg-primary'); const input = document.querySelector('input[type="text"]'); addButton.addEventListener('click', function() { if (input.value.trim() === '') return; const todoList = document.querySelector('.space-y-3'); const newTodo = document.createElement('div'); newTodo.className = 'flex items-center justify-between'; newTodo.innerHTML = ` <div class="flex items-center gap-2"> <div class="w-6 h-6 border-2 border-primary rounded flex items-center justify-center"> <input type="checkbox" class="opacity-0 absolute"> </div> <span>${input.value}</span> </div> <button class="w-6 h-6 rounded-full border border-gray-200 flex items-center justify-center text-gray-400 hover:bg-gray-100"> × </button> `; todoList.appendChild(newTodo); input.value = ''; // Reattach event listeners const newCheckbox = newTodo.querySelector('.w-6.h-6'); newCheckbox.addEventListener('click', function() { const checkbox = this.querySelector('input[type="checkbox"]'); const textSpan = this.parentElement.querySelector('span'); checkbox.checked = !checkbox.checked; if (checkbox.checked) { this.classList.add('bg-primary', 'text-white'); this.classList.remove('border-2', 'border-primary'); this.innerHTML = ` <input type="checkbox" checked class="opacity-0 absolute"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> `; textSpan.classList.add('completed'); } else { this.classList.remove('bg-primary', 'text-white'); this.classList.add('border-2', 'border-primary'); this.innerHTML = `<input type="checkbox" class="opacity-0 absolute">`; textSpan.classList.remove('completed'); } }); const newDeleteButton = newTodo.querySelector('.w-6.h-6.rounded-full'); newDeleteButton.addEventListener('click', function() { this.closest('div.flex.items-center.justify-between').remove(); }); }); // Allow pressing Enter to add a todo input.addEventListener('keypress', function(e) { if (e.key === 'Enter') { addButton.click(); } }); }); </script> </body> </html> use this code