| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ToolLink Saver</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> |
| .tool-card:hover .tool-actions { |
| opacity: 1; |
| } |
| |
| .rating-stars input { |
| display: none; |
| } |
| |
| .rating-stars label { |
| cursor: pointer; |
| font-size: 1.5rem; |
| color: #d1d5db; |
| } |
| |
| .rating-stars input:checked ~ label { |
| color: #f59e0b; |
| } |
| |
| .rating-stars label:hover, |
| .rating-stars label:hover ~ label { |
| color: #f59e0b; |
| } |
| |
| .tag:hover { |
| transform: translateY(-2px); |
| } |
| |
| .screenshot-container { |
| background-color: #f3f4f6; |
| background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%, #e5e7eb), |
| linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%, #e5e7eb); |
| background-size: 20px 20px; |
| background-position: 0 0, 10px 10px; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="container mx-auto px-4 py-8"> |
| |
| <header class="mb-10"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <h1 class="text-3xl font-bold text-indigo-700"> |
| <i class="fas fa-link mr-2"></i>ToolLink Saver |
| </h1> |
| <p class="text-gray-600">Guarda y organiza tus herramientas favoritas</p> |
| </div> |
| <button id="addToolBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg flex items-center transition-colors"> |
| <i class="fas fa-plus mr-2"></i> Nueva Herramienta |
| </button> |
| </div> |
| </header> |
|
|
| |
| <main> |
| |
| <div class="bg-white rounded-lg shadow-md p-4 mb-8"> |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> |
| <div class="w-full md:w-1/2"> |
| <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Buscar</label> |
| <div class="relative"> |
| <input type="text" id="search" placeholder="Buscar herramientas..." 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> |
| <div class="w-full md:w-1/4"> |
| <label for="categoryFilter" class="block text-sm font-medium text-gray-700 mb-1">Categoría</label> |
| <select id="categoryFilter" 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="">Todas</option> |
| <option value="Desarrollo">Desarrollo</option> |
| <option value="Diseño">Diseño</option> |
| <option value="Productividad">Productividad</option> |
| <option value="Marketing">Marketing</option> |
| <option value="IA">IA</option> |
| </select> |
| </div> |
| <div class="w-full md:w-1/4"> |
| <label for="tagFilter" class="block text-sm font-medium text-gray-700 mb-1">Tag</label> |
| <select id="tagFilter" 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="">Todos</option> |
| |
| </select> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="toolsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="text-center py-10 text-gray-500" id="emptyState"> |
| <i class="fas fa-box-open text-5xl mb-4 text-gray-300"></i> |
| <h3 class="text-xl font-medium">No hay herramientas guardadas</h3> |
| <p class="mt-2">Comienza agregando tu primera herramienta</p> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <div id="addToolModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden"> |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-2xl font-bold text-gray-800">Agregar Nueva Herramienta</h2> |
| <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times text-xl"></i> |
| </button> |
| </div> |
| |
| <form id="toolForm" class="space-y-4"> |
| <div> |
| <label for="toolUrl" class="block text-sm font-medium text-gray-700 mb-1">URL de la herramienta*</label> |
| <input type="url" id="toolUrl" 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" placeholder="https://ejemplo.com"> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div> |
| <label for="toolTitle" class="block text-sm font-medium text-gray-700 mb-1">Título*</label> |
| <input type="text" id="toolTitle" 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" placeholder="Nombre de la herramienta"> |
| </div> |
| |
| <div> |
| <label for="toolCategory" class="block text-sm font-medium text-gray-700 mb-1">Categoría*</label> |
| <select id="toolCategory" 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"> |
| <option value="">Seleccionar categoría</option> |
| <option value="Desarrollo">Desarrollo</option> |
| <option value="Diseño">Diseño</option> |
| <option value="Productividad">Productividad</option> |
| <option value="Marketing">Marketing</option> |
| <option value="IA">IA</option> |
| <option value="Otros">Otros</option> |
| </select> |
| </div> |
| </div> |
| |
| <div> |
| <label for="toolDescription" class="block text-sm font-medium text-gray-700 mb-1">Descripción</label> |
| <textarea id="toolDescription" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Breve descripción de la herramienta..."></textarea> |
| </div> |
| |
| <div> |
| <label for="toolTags" class="block text-sm font-medium text-gray-700 mb-1">Tags (separados por comas)</label> |
| <input type="text" id="toolTags" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="web, diseño, ui"> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Calificación</label> |
| <div class="rating-stars flex justify-center space-x-1"> |
| <input type="radio" id="star5" name="rating" value="5"> |
| <label for="star5"><i class="fas fa-star"></i></label> |
| |
| <input type="radio" id="star4" name="rating" value="4"> |
| <label for="star4"><i class="fas fa-star"></i></label> |
| |
| <input type="radio" id="star3" name="rating" value="3"> |
| <label for="star3"><i class="fas fa-star"></i></label> |
| |
| <input type="radio" id="star2" name="rating" value="2"> |
| <label for="star2"><i class="fas fa-star"></i></label> |
| |
| <input type="radio" id="star1" name="rating" value="1"> |
| <label for="star1"><i class="fas fa-star"></i></label> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Screenshot</label> |
| <div id="screenshotContainer" class="screenshot-container rounded-lg border border-gray-300 p-4 flex items-center justify-center h-48"> |
| <p class="text-gray-500 text-center">El screenshot se generará automáticamente al guardar</p> |
| </div> |
| </div> |
| |
| <div class="flex justify-end space-x-3 pt-4"> |
| <button type="button" id="cancelBtn" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancelar</button> |
| <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center"> |
| <i class="fas fa-save mr-2"></i> Guardar |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const addToolBtn = document.getElementById('addToolBtn'); |
| const addToolModal = document.getElementById('addToolModal'); |
| const closeModalBtn = document.getElementById('closeModalBtn'); |
| const cancelBtn = document.getElementById('cancelBtn'); |
| const toolForm = document.getElementById('toolForm'); |
| const toolsGrid = document.getElementById('toolsGrid'); |
| const emptyState = document.getElementById('emptyState'); |
| const searchInput = document.getElementById('search'); |
| const categoryFilter = document.getElementById('categoryFilter'); |
| const tagFilter = document.getElementById('tagFilter'); |
| |
| |
| let tools = JSON.parse(localStorage.getItem('tools')) || []; |
| let allTags = new Set(); |
| |
| |
| initApp(); |
| |
| |
| addToolBtn.addEventListener('click', () => addToolModal.classList.remove('hidden')); |
| closeModalBtn.addEventListener('click', () => addToolModal.classList.add('hidden')); |
| cancelBtn.addEventListener('click', () => addToolModal.classList.add('hidden')); |
| |
| toolForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| saveTool(); |
| }); |
| |
| searchInput.addEventListener('input', filterTools); |
| categoryFilter.addEventListener('change', filterTools); |
| tagFilter.addEventListener('change', filterTools); |
| |
| |
| function initApp() { |
| if (tools.length > 0) { |
| emptyState.classList.add('hidden'); |
| renderTools(tools); |
| updateTagFilter(); |
| } |
| } |
| |
| function saveTool() { |
| const toolUrl = document.getElementById('toolUrl').value; |
| const toolTitle = document.getElementById('toolTitle').value; |
| const toolDescription = document.getElementById('toolDescription').value; |
| const toolCategory = document.getElementById('toolCategory').value; |
| const toolTags = document.getElementById('toolTags').value; |
| const rating = document.querySelector('input[name="rating"]:checked')?.value || 0; |
| |
| |
| const screenshot = `https://api.screenshotone.com/take?url=${encodeURIComponent(toolUrl)}&access_key=demo`; |
| |
| const newTool = { |
| id: Date.now(), |
| url: toolUrl, |
| title: toolTitle, |
| description: toolDescription, |
| category: toolCategory, |
| tags: toolTags.split(',').map(tag => tag.trim()).filter(tag => tag !== ''), |
| rating: parseInt(rating), |
| screenshot: screenshot, |
| createdAt: new Date().toISOString() |
| }; |
| |
| tools.unshift(newTool); |
| localStorage.setItem('tools', JSON.stringify(tools)); |
| |
| |
| if (emptyState.classList.contains('hidden')) { |
| renderTools(tools); |
| } else { |
| emptyState.classList.add('hidden'); |
| renderTools(tools); |
| } |
| |
| |
| updateTagFilter(); |
| |
| |
| toolForm.reset(); |
| addToolModal.classList.add('hidden'); |
| } |
| |
| function renderTools(toolsToRender) { |
| toolsGrid.innerHTML = ''; |
| |
| toolsToRender.forEach(tool => { |
| const toolCard = document.createElement('div'); |
| toolCard.className = 'bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow tool-card relative'; |
| |
| |
| let stars = ''; |
| for (let i = 0; i < 5; i++) { |
| if (i < tool.rating) { |
| stars += '<i class="fas fa-star text-yellow-400"></i>'; |
| } else { |
| stars += '<i class="far fa-star text-yellow-400"></i>'; |
| } |
| } |
| |
| |
| let tagsHtml = ''; |
| if (tool.tags && tool.tags.length > 0) { |
| tool.tags.forEach(tag => { |
| allTags.add(tag); |
| tagsHtml += `<span class="tag inline-block bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full mr-1 mb-1 transition-transform">${tag}</span>`; |
| }); |
| } |
| |
| toolCard.innerHTML = ` |
| <div class="screenshot-container h-40 overflow-hidden relative"> |
| <img src="${tool.screenshot}" alt="${tool.title}" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div> |
| </div> |
| <div class="p-4"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="font-bold text-lg text-gray-800 truncate">${tool.title}</h3> |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">${tool.category}</span> |
| </div> |
| <p class="text-gray-600 text-sm mb-3 line-clamp-2">${tool.description || 'Sin descripción'}</p> |
| <div class="flex items-center mb-3"> |
| ${stars} |
| <span class="text-gray-500 text-sm ml-2">${tool.rating}/5</span> |
| </div> |
| <div class="flex flex-wrap mb-2"> |
| ${tagsHtml} |
| </div> |
| <div class="flex justify-between items-center pt-2 border-t border-gray-100"> |
| <a href="${tool.url}" target="_blank" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center"> |
| <i class="fas fa-external-link-alt mr-1"></i> Visitar |
| </a> |
| <div class="tool-actions opacity-0 transition-opacity flex space-x-2"> |
| <button class="text-gray-500 hover:text-indigo-600" onclick="editTool(${tool.id})"> |
| <i class="fas fa-edit"></i> |
| </button> |
| <button class="text-gray-500 hover:text-red-600" onclick="deleteTool(${tool.id})"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| `; |
| |
| toolsGrid.appendChild(toolCard); |
| }); |
| } |
| |
| function updateTagFilter() { |
| tagFilter.innerHTML = '<option value="">Todos</option>'; |
| allTags.forEach(tag => { |
| const option = document.createElement('option'); |
| option.value = tag; |
| option.textContent = tag; |
| tagFilter.appendChild(option); |
| }); |
| } |
| |
| function filterTools() { |
| const searchTerm = searchInput.value.toLowerCase(); |
| const selectedCategory = categoryFilter.value; |
| const selectedTag = tagFilter.value; |
| |
| const filteredTools = tools.filter(tool => { |
| const matchesSearch = tool.title.toLowerCase().includes(searchTerm) || |
| tool.description.toLowerCase().includes(searchTerm); |
| const matchesCategory = selectedCategory === '' || tool.category === selectedCategory; |
| const matchesTag = selectedTag === '' || (tool.tags && tool.tags.includes(selectedTag)); |
| |
| return matchesSearch && matchesCategory && matchesTag; |
| }); |
| |
| renderTools(filteredTools); |
| |
| if (filteredTools.length === 0) { |
| emptyState.classList.remove('hidden'); |
| } else { |
| emptyState.classList.add('hidden'); |
| } |
| } |
| |
| |
| window.editTool = function(id) { |
| const tool = tools.find(t => t.id === id); |
| if (tool) { |
| document.getElementById('toolUrl').value = tool.url; |
| document.getElementById('toolTitle').value = tool.title; |
| document.getElementById('toolDescription').value = tool.description || ''; |
| document.getElementById('toolCategory').value = tool.category; |
| document.getElementById('toolTags').value = tool.tags.join(', '); |
| |
| |
| if (tool.rating > 0) { |
| document.getElementById(`star${tool.rating}`).checked = true; |
| } |
| |
| |
| const screenshotContainer = document.getElementById('screenshotContainer'); |
| screenshotContainer.innerHTML = `<img src="${tool.screenshot}" alt="${tool.title}" class="max-h-full max-w-full">`; |
| |
| |
| toolForm.dataset.editingId = id; |
| document.querySelector('#addToolModal h2').textContent = 'Editar Herramienta'; |
| |
| addToolModal.classList.remove('hidden'); |
| } |
| }; |
| |
| window.deleteTool = function(id) { |
| if (confirm('¿Estás seguro de que quieres eliminar esta herramienta?')) { |
| tools = tools.filter(tool => tool.id !== id); |
| localStorage.setItem('tools', JSON.stringify(tools)); |
| |
| if (tools.length === 0) { |
| emptyState.classList.remove('hidden'); |
| toolsGrid.innerHTML = ''; |
| } else { |
| renderTools(tools); |
| } |
| |
| updateTagFilter(); |
| } |
| }; |
| }); |
| </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=ARX88/toolvault" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
