|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Browser Tools Pro</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> |
|
|
|
@keyframes toolSlideIn { |
|
from { transform: translateY(20px); opacity: 0; } |
|
to { transform: translateY(0); opacity: 1; } |
|
} |
|
|
|
.tool-card { |
|
animation: toolSlideIn 0.3s ease-out forwards; |
|
opacity: 0; |
|
animation-delay: calc(var(--order) * 0.1s); |
|
} |
|
|
|
.gradient-bg { |
|
background: linear-gradient(135deg, #6e8efb, #a777e3); |
|
} |
|
|
|
.tab-active { |
|
position: relative; |
|
} |
|
|
|
.tab-active::after { |
|
content: ''; |
|
position: absolute; |
|
bottom: -1px; |
|
left: 0; |
|
right: 0; |
|
height: 3px; |
|
background: #6e8efb; |
|
border-radius: 3px 3px 0 0; |
|
} |
|
|
|
.tool-icon { |
|
transition: all 0.2s ease; |
|
} |
|
|
|
.tool-card:hover .tool-icon { |
|
transform: scale(1.1); |
|
} |
|
|
|
.search-box:focus { |
|
box-shadow: 0 0 0 3px rgba(110, 142, 251, 0.3); |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-100 font-sans"> |
|
<div class="min-h-screen flex flex-col"> |
|
|
|
<header class="gradient-bg text-white shadow-lg"> |
|
<div class="container mx-auto px-4 py-6"> |
|
<div class="flex justify-between items-center"> |
|
<div class="flex items-center space-x-3"> |
|
<i class="fas fa-tools text-2xl"></i> |
|
<h1 class="text-2xl font-bold">Browser Tools Pro</h1> |
|
</div> |
|
<div class="flex items-center space-x-4"> |
|
<button class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition"> |
|
<i class="fas fa-sign-in-alt mr-2"></i>Sign In |
|
</button> |
|
<button class="bg-indigo-800 text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-900 transition"> |
|
<i class="fas fa-user-plus mr-2"></i>Register |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
|
|
<main class="flex-grow container mx-auto px-4 py-8"> |
|
|
|
<div class="mb-8"> |
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> |
|
<div class="relative flex-grow max-w-2xl"> |
|
<input type="text" |
|
placeholder="Search tools..." |
|
class="search-box w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-indigo-500 transition"> |
|
<i class="fas fa-search absolute left-3 top-3.5 text-gray-400"></i> |
|
</div> |
|
<div class="flex space-x-2 overflow-x-auto pb-2"> |
|
<button class="filter-btn px-4 py-2 bg-white rounded-lg border border-gray-300 hover:bg-gray-50 transition whitespace-nowrap" data-filter="all"> |
|
All Tools |
|
</button> |
|
<button class="filter-btn px-4 py-2 bg-white rounded-lg border border-gray-300 hover:bg-gray-50 transition whitespace-nowrap" data-filter="dev"> |
|
<i class="fas fa-code mr-2 text-blue-500"></i>Developer |
|
</button> |
|
<button class="filter-btn px-4 py-2 bg-white rounded-lg border border-gray-300 hover:bg-gray-50 transition whitespace-nowrap" data-filter="seo"> |
|
<i class="fas fa-chart-line mr-2 text-green-500"></i>SEO |
|
</button> |
|
<button class="filter-btn px-4 py-2 bg-white rounded-lg border border-gray-300 hover:bg-gray-50 transition whitespace-nowrap" data-filter="design"> |
|
<i class="fas fa-paint-brush mr-2 text-purple-500"></i>Design |
|
</button> |
|
<button class="filter-btn px-4 py-2 bg-white rounded-lg border border-gray-300 hover:bg-gray-50 transition whitespace-nowrap" data-filter="security"> |
|
<i class="fas fa-shield-alt mr-2 text-red-500"></i>Security |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-8 border-b border-gray-200"> |
|
<div class="flex space-x-8"> |
|
<button class="tab-btn py-2 px-1 font-medium text-gray-500 hover:text-indigo-600 transition tab-active" data-tab="all"> |
|
All Tools |
|
</button> |
|
<button class="tab-btn py-2 px-1 font-medium text-gray-500 hover:text-indigo-600 transition" data-tab="favorites"> |
|
<i class="fas fa-star mr-2 text-yellow-400"></i>Favorites |
|
</button> |
|
<button class="tab-btn py-2 px-1 font-medium text-gray-500 hover:text-indigo-600 transition" data-tab="recent"> |
|
<i class="fas fa-history mr-2 text-blue-400"></i>Recently Used |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="tools-container"> |
|
|
|
</div> |
|
|
|
|
|
<div id="empty-state" class="hidden text-center py-16"> |
|
<i class="fas fa-search text-5xl text-gray-300 mb-4"></i> |
|
<h3 class="text-xl font-medium text-gray-500">No tools found</h3> |
|
<p class="text-gray-400 mt-2">Try adjusting your search or filter to find what you're looking for.</p> |
|
</div> |
|
</main> |
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
<div class="container mx-auto px-4"> |
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
<div> |
|
<h3 class="text-lg font-semibold mb-4">Browser Tools Pro</h3> |
|
<p class="text-gray-400">Powerful tools to enhance your browsing experience and productivity.</p> |
|
</div> |
|
<div> |
|
<h4 class="font-medium mb-4">Categories</h4> |
|
<ul class="space-y-2 text-gray-400"> |
|
<li><a href="#" class="hover:text-white transition">Developer Tools</a></li> |
|
<li><a href="#" class="hover:text-white transition">SEO Tools</a></li> |
|
<li><a href="#" class="hover:text-white transition">Design Tools</a></li> |
|
<li><a href="#" class="hover:text-white transition">Security Tools</a></li> |
|
</ul> |
|
</div> |
|
<div> |
|
<h4 class="font-medium mb-4">Resources</h4> |
|
<ul class="space-y-2 text-gray-400"> |
|
<li><a href="#" class="hover:text-white transition">Documentation</a></li> |
|
<li><a href="#" class="hover:text-white transition">API</a></li> |
|
<li><a href="#" class="hover:text-white transition">Blog</a></li> |
|
<li><a href="#" class="hover:text-white transition">Support</a></li> |
|
</ul> |
|
</div> |
|
<div> |
|
<h4 class="font-medium mb-4">Connect</h4> |
|
<div class="flex space-x-4"> |
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a> |
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github text-xl"></i></a> |
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-discord text-xl"></i></a> |
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube text-xl"></i></a> |
|
</div> |
|
<div class="mt-6"> |
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition"> |
|
<i class="fas fa-download mr-2"></i>Download Extension |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> |
|
<p>© 2023 Browser Tools Pro. All rights reserved.</p> |
|
</div> |
|
</div> |
|
</footer> |
|
</div> |
|
|
|
<script> |
|
|
|
const tools = [ |
|
{ |
|
id: 1, |
|
name: "JSON Formatter", |
|
description: "Format and validate JSON data with syntax highlighting", |
|
category: "dev", |
|
icon: "fas fa-brackets-curly", |
|
color: "text-blue-500", |
|
bgColor: "bg-blue-50", |
|
favorite: true, |
|
lastUsed: "2023-07-15" |
|
}, |
|
{ |
|
id: 2, |
|
name: "Color Picker", |
|
description: "Pick colors from any webpage and get HEX, RGB values", |
|
category: "design", |
|
icon: "fas fa-eye-dropper", |
|
color: "text-purple-500", |
|
bgColor: "bg-purple-50", |
|
favorite: false, |
|
lastUsed: "2023-07-10" |
|
}, |
|
{ |
|
id: 3, |
|
name: "SEO Analyzer", |
|
description: "Analyze webpage SEO factors and get improvement suggestions", |
|
category: "seo", |
|
icon: "fas fa-chart-pie", |
|
color: "text-green-500", |
|
bgColor: "bg-green-50", |
|
favorite: true, |
|
lastUsed: "2023-07-12" |
|
}, |
|
{ |
|
id: 4, |
|
name: "Password Generator", |
|
description: "Generate strong, secure passwords with customizable options", |
|
category: "security", |
|
icon: "fas fa-key", |
|
color: "text-red-500", |
|
bgColor: "bg-red-50", |
|
favorite: false, |
|
lastUsed: "2023-06-28" |
|
}, |
|
{ |
|
id: 5, |
|
name: "Base64 Encoder", |
|
description: "Encode and decode Base64 strings quickly", |
|
category: "dev", |
|
icon: "fas fa-lock", |
|
color: "text-blue-500", |
|
bgColor: "bg-blue-50", |
|
favorite: false, |
|
lastUsed: "2023-07-05" |
|
}, |
|
{ |
|
id: 6, |
|
name: "Responsive Tester", |
|
description: "Test how your website looks on different screen sizes", |
|
category: "design", |
|
icon: "fas fa-mobile-alt", |
|
color: "text-purple-500", |
|
bgColor: "bg-purple-50", |
|
favorite: true, |
|
lastUsed: "2023-07-14" |
|
}, |
|
{ |
|
id: 7, |
|
name: "Meta Tag Inspector", |
|
description: "View and analyze meta tags of any webpage", |
|
category: "seo", |
|
icon: "fas fa-tags", |
|
color: "text-green-500", |
|
bgColor: "bg-green-50", |
|
favorite: false, |
|
lastUsed: "2023-06-30" |
|
}, |
|
{ |
|
id: 8, |
|
name: "SSL Checker", |
|
description: "Verify SSL certificate details for any website", |
|
category: "security", |
|
icon: "fas fa-lock-open", |
|
color: "text-red-500", |
|
bgColor: "bg-red-50", |
|
favorite: false, |
|
lastUsed: "2023-07-01" |
|
} |
|
]; |
|
|
|
|
|
const toolsContainer = document.getElementById('tools-container'); |
|
const searchBox = document.querySelector('.search-box'); |
|
const filterButtons = document.querySelectorAll('.filter-btn'); |
|
const tabButtons = document.querySelectorAll('.tab-btn'); |
|
const emptyState = document.getElementById('empty-state'); |
|
|
|
|
|
let currentFilter = 'all'; |
|
let currentTab = 'all'; |
|
let searchQuery = ''; |
|
|
|
|
|
function init() { |
|
renderTools(); |
|
setupEventListeners(); |
|
} |
|
|
|
|
|
function setupEventListeners() { |
|
|
|
searchBox.addEventListener('input', (e) => { |
|
searchQuery = e.target.value.toLowerCase(); |
|
renderTools(); |
|
}); |
|
|
|
|
|
filterButtons.forEach(button => { |
|
button.addEventListener('click', () => { |
|
filterButtons.forEach(btn => btn.classList.remove('bg-indigo-100', 'border-indigo-300')); |
|
button.classList.add('bg-indigo-100', 'border-indigo-300'); |
|
currentFilter = button.dataset.filter; |
|
renderTools(); |
|
}); |
|
}); |
|
|
|
|
|
tabButtons.forEach(button => { |
|
button.addEventListener('click', () => { |
|
tabButtons.forEach(btn => btn.classList.remove('tab-active', 'text-indigo-600')); |
|
button.classList.add('tab-active', 'text-indigo-600'); |
|
currentTab = button.dataset.tab; |
|
renderTools(); |
|
}); |
|
}); |
|
} |
|
|
|
|
|
function renderTools() { |
|
toolsContainer.innerHTML = ''; |
|
|
|
let filteredTools = [...tools]; |
|
|
|
|
|
if (currentTab === 'favorites') { |
|
filteredTools = filteredTools.filter(tool => tool.favorite); |
|
} else if (currentTab === 'recent') { |
|
filteredTools = filteredTools.sort((a, b) => new Date(b.lastUsed) - new Date(a.lastUsed)).slice(0, 4); |
|
} |
|
|
|
|
|
if (currentFilter !== 'all') { |
|
filteredTools = filteredTools.filter(tool => tool.category === currentFilter); |
|
} |
|
|
|
|
|
if (searchQuery) { |
|
filteredTools = filteredTools.filter(tool => |
|
tool.name.toLowerCase().includes(searchQuery) || |
|
tool.description.toLowerCase().includes(searchQuery) |
|
); |
|
} |
|
|
|
|
|
if (filteredTools.length === 0) { |
|
emptyState.classList.remove('hidden'); |
|
return; |
|
} else { |
|
emptyState.classList.add('hidden'); |
|
} |
|
|
|
|
|
filteredTools.forEach((tool, index) => { |
|
const toolCard = document.createElement('div'); |
|
toolCard.className = `tool-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition`; |
|
toolCard.style.setProperty('--order', index); |
|
|
|
toolCard.innerHTML = ` |
|
<div class="p-6"> |
|
<div class="flex items-start justify-between"> |
|
<div class="${tool.bgColor} p-3 rounded-lg"> |
|
<i class="${tool.icon} ${tool.color} text-xl tool-icon"></i> |
|
</div> |
|
<button class="favorite-btn text-gray-300 hover:text-yellow-400 transition ${tool.favorite ? 'text-yellow-400' : ''}" data-id="${tool.id}"> |
|
<i class="fas fa-star"></i> |
|
</button> |
|
</div> |
|
<div class="mt-4"> |
|
<h3 class="text-lg font-semibold text-gray-800">${tool.name}</h3> |
|
<p class="mt-2 text-gray-600">${tool.description}</p> |
|
</div> |
|
<div class="mt-6 flex justify-between items-center"> |
|
<span class="text-xs px-2 py-1 rounded-full ${getCategoryClass(tool.category)}"> |
|
${getCategoryName(tool.category)} |
|
</span> |
|
<button class="use-btn bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition"> |
|
Use Tool |
|
</button> |
|
</div> |
|
</div> |
|
`; |
|
|
|
toolsContainer.appendChild(toolCard); |
|
}); |
|
|
|
|
|
document.querySelectorAll('.favorite-btn').forEach(button => { |
|
button.addEventListener('click', (e) => { |
|
e.stopPropagation(); |
|
const toolId = parseInt(button.dataset.id); |
|
const tool = tools.find(t => t.id === toolId); |
|
if (tool) { |
|
tool.favorite = !tool.favorite; |
|
button.classList.toggle('text-yellow-400'); |
|
button.classList.toggle('text-gray-300'); |
|
} |
|
}); |
|
}); |
|
|
|
|
|
document.querySelectorAll('.use-btn').forEach(button => { |
|
button.addEventListener('click', (e) => { |
|
e.stopPropagation(); |
|
const toolCard = e.target.closest('.tool-card'); |
|
const toolName = toolCard.querySelector('h3').textContent; |
|
alert(`Launching ${toolName}...`); |
|
|
|
}); |
|
}); |
|
} |
|
|
|
|
|
function getCategoryName(category) { |
|
const names = { |
|
'dev': 'Developer', |
|
'seo': 'SEO', |
|
'design': 'Design', |
|
'security': 'Security' |
|
}; |
|
return names[category] || 'Other'; |
|
} |
|
|
|
function getCategoryClass(category) { |
|
const classes = { |
|
'dev': 'bg-blue-100 text-blue-800', |
|
'seo': 'bg-green-100 text-green-800', |
|
'design': 'bg-purple-100 text-purple-800', |
|
'security': 'bg-red-100 text-red-800' |
|
}; |
|
return classes[category] || 'bg-gray-100 text-gray-800'; |
|
} |
|
|
|
|
|
init(); |
|
</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=kcrazy/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
</html> |
