Hugging Face's logo

Spaces:
nkjoy
/
deepsite
Running

App Files Community
deepsite / index.html
kcrazy's picture
kcrazy
Add 2 files
00c845d verified
raw
history blame contribute delete
20.5 kB
 <!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>
/* Custom CSS for animations and special effects */
@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 -->
<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 Content -->
<main class="flex-grow container mx-auto px-4 py-8">
<!-- Search and Filter -->
<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>
<!-- Tabs -->
<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>
<!-- Tools Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="tools-container">
<!-- Tool cards will be dynamically inserted here -->
</div>
<!-- Empty State -->
<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 -->
<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>&copy; 2023 Browser Tools Pro. All rights reserved.</p>
</div>
</div>
</footer>
</div>
<script>
// Sample tools data
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"
}
];
// DOM elements
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');
// Current filter state
let currentFilter = 'all';
let currentTab = 'all';
let searchQuery = '';
// Initialize the app
function init() {
renderTools();
setupEventListeners();
}
// Set up event listeners
function setupEventListeners() {
// Search box
searchBox.addEventListener('input', (e) => {
searchQuery = e.target.value.toLowerCase();
renderTools();
});
// Filter buttons
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();
});
});
// Tab buttons
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();
});
});
}
// Render tools based on current filters
function renderTools() {
toolsContainer.innerHTML = '';
let filteredTools = [...tools];
// Apply tab filter
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);
}
// Apply category filter
if (currentFilter !== 'all') {
filteredTools = filteredTools.filter(tool => tool.category === currentFilter);
}
// Apply search query
if (searchQuery) {
filteredTools = filteredTools.filter(tool =>
tool.name.toLowerCase().includes(searchQuery) ||
tool.description.toLowerCase().includes(searchQuery)
);
}
// Show empty state if no tools found
if (filteredTools.length === 0) {
emptyState.classList.remove('hidden');
return;
} else {
emptyState.classList.add('hidden');
}
// Render tool cards
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);
});
// Add event listeners to favorite buttons
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');
}
});
});
// Add event listeners to use buttons
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}...`);
// In a real app, this would open the selected tool
});
});
}
// Helper functions
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';
}
// Initialize the app
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>