Create a fully functional 50+ online tools website

README.md

@@ -1,10 +1,13 @@
 ---
-title: Tooltopia Hub
-emoji: 👁
-colorFrom: red
-colorTo: gray
+title: Tooltopia Hub ️
+colorFrom: blue
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,53 @@
+class FooterComponent extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .footer-link:hover {
+                    color: var(--primary-500);
+                }
+            </style>
+            <footer class="bg-gray-800/50 border-t border-gray-800 mt-16">
+                <div class="container mx-auto px-6 py-12">
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                        <div>
+                            <h3 class="text-lg font-semibold mb-4">Tooltopia Hub</h3>
+                            <p class="text-gray-400">Your one-stop destination for all online tools. Free, fast, and easy to use.</p>
+                        </div>
+                        <div>
+                            <h4 class="text-md font-semibold mb-4">Categories</h4>
+                            <ul class="space-y-2">
+                                <li><a href="#" class="footer-link text-gray-400 hover:text-primary-500">Developer Tools</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 hover:text-primary-500">Media Tools</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 hover:text-primary-500">Document Tools</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 hover:text-primary-500">Web Tools</a></li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h4 class="text-md font-semibold mb-4">Company</h4>
+                            <ul class="space-y-2">
+                                <li><a href="#" class="footer-link text-gray-400 hover:text-primary-500">About Us</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 hover:text-primary-500">Contact</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 hover:text-primary-500">Privacy Policy</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 hover:text-primary-500">Terms of Service</a></li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h4 class="text-md font-semibold mb-4">Connect</h4>
+                            <div class="flex space-x-4">
+                                <a href="#" class="text-gray-400 hover:text-primary-500"><i data-feather="twitter"></i></a>
+                                <a href="#" class="text-gray-400 hover:text-primary-500"><i data-feather="github"></i></a>
+                                <a href="#" class="text-gray-400 hover:text-primary-500"><i data-feather="linkedin"></i></a>
+                                <a href="#" class="text-gray-400 hover:text-primary-500"><i data-feather="facebook"></i></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
+                        © ${new Date().getFullYear()} Tooltopia Hub. All rights reserved.
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+customElements.define('footer-component', FooterComponent);

components/header.js

@@ -0,0 +1,43 @@
+class HeaderComponent extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    backdrop-filter: blur(10px);
+                }
+                .nav-link:hover {
+                    color: var(--primary-500);
+                }
+            </style>
+            <header class="sticky top-0 z-50 border-b border-gray-800">
+                <nav class="bg-gray-900/80 py-4 px-6">
+                    <div class="container mx-auto flex justify-between items-center">
+                        <a href="/" class="flex items-center space-x-2">
+                            <i data-feather="tool" class="text-primary-500"></i>
+                            <span class="text-xl font-bold">Tooltopia Hub</span>
+                        </a>
+                        
+                        <div class="hidden md:flex items-center space-x-8">
+                            <a href="#" class="nav-link text-gray-300 hover:text-primary-500">All Tools</a>
+                            <a href="#" class="nav-link text-gray-300 hover:text-primary-500">Categories</a>
+                            <a href="#" class="nav-link text-gray-300 hover:text-primary-500">Favorites</a>
+                            <a href="#" class="nav-link text-gray-300 hover:text-primary-500">About</a>
+                        </div>
+                        
+                        <div class="flex items-center space-x-4">
+                            <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-800">
+                                <i data-feather="moon" class="hidden dark:block"></i>
+                                <i data-feather="sun" class="block dark:hidden"></i>
+                            </button>
+                            <button class="md:hidden p-2 rounded-full hover:bg-gray-800">
+                                <i data-feather="menu"></i>
+                            </button>
+                        </div>
+                    </div>
+                </nav>
+            </header>
+        `;
+    }
+}
+customElements.define('header-component', HeaderComponent);

components/search.js

@@ -0,0 +1,31 @@
+class SearchComponent extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .search-input:focus {
+                    outline: 2px solid var(--primary-500);
+                    outline-offset: 2px;
+                }
+            </style>
+            <div class="mb-12 max-w-2xl mx-auto">
+                <div class="relative">
+                    <input 
+                        type="text" 
+                        placeholder="Search for tools..." 
+                        class="search-input w-full bg-gray-800 border border-gray-700 rounded-full py-3 px-6 pl-12 text-gray-200 focus:border-primary-500 focus:ring-0"
+                    >
+                    <i data-feather="search" class="absolute left-4 top-3.5 text-gray-500"></i>
+                </div>
+                <div class="flex flex-wrap justify-center mt-4 gap-2">
+                    <button class="px-4 py-1.5 rounded-full bg-gray-800 hover:bg-gray-700 text-sm">All</button>
+                    <button class="px-4 py-1.5 rounded-full bg-gray-800 hover:bg-gray-700 text-sm">Developer</button>
+                    <button class="px-4 py-1.5 rounded-full bg-gray-800 hover:bg-gray-700 text-sm">Media</button>
+                    <button class="px-4 py-1.5 rounded-full bg-gray-800 hover:bg-gray-700 text-sm">Documents</button>
+                    <button class="px-4 py-1.5 rounded-full bg-gray-800 hover:bg-gray-700 text-sm">Utilities</button>
+                </div>
+            </div>
+        `;
+    }
+}
+customElements.define('search-component', SearchComponent);

components/tool-card.js

@@ -0,0 +1,35 @@
+class ToolCard extends HTMLElement {
+    connectedCallback() {
+        const icon = this.getAttribute('icon') || 'tool';
+        const title = this.getAttribute('title') || 'Tool';
+        const category = this.getAttribute('category') || 'General';
+        
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .tool-card {
+                    transition: transform 0.3s ease, box-shadow 0.3s ease;
+                }
+                .tool-icon {
+                    background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
+                }
+            </style>
+            <a href="#" class="tool-card block bg-gray-800 rounded-xl p-6 hover:shadow-lg">
+                <div class="flex items-center mb-4">
+                    <div class="tool-icon rounded-lg p-3 mr-4">
+                        <i data-feather="${icon}" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold">${title}</h3>
+                </div>
+                <p class="text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                <div class="flex justify-between items-center">
+                    <span class="text-xs px-3 py-1 rounded-full bg-gray-700 text-gray-300">${category}</span>
+                    <button class="text-primary-500 hover:text-primary-400">
+                        <i data-feather="arrow-right"></i>
+                    </button>
+                </div>
+            </a>
+        `;
+    }
+}
+customElements.define('tool-card', ToolCard);

index.html

@@ -1,19 +1,68 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tooltopia Hub - 50+ Online Tools</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#6366f1',
+                        },
+                        secondary: {
+                            500: '#10b981',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <header-component></header-component>
+    
+    <main class="container mx-auto px-4 py-8">
+        <section class="mb-12">
+            <h1 class="text-4xl font-bold mb-6 text-center">50+ Powerful Online Tools</h1>
+            <p class="text-xl text-gray-400 text-center max-w-3xl mx-auto">All your essential tools in one place - free, fast, and easy to use!</p>
+        </section>
+
+        <search-component></search-component>
+
+        <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            <tool-card icon="code" title="HTML Formatter" category="Developer"></tool-card>
+            <tool-card icon="image" title="Image Compressor" category="Media"></tool-card>
+            <tool-card icon="file-text" title="PDF to Word" category="Documents"></tool-card>
+            <tool-card icon="link" title="URL Shortener" category="Web"></tool-card>
+            <tool-card icon="lock" title="Password Generator" category="Security"></tool-card>
+            <tool-card icon="hash" title="Base64 Encoder" category="Developer"></tool-card>
+            <tool-card icon="calendar" title="Date Calculator" category="Utilities"></tool-card>
+            <tool-card icon="dollar-sign" title="Currency Converter" category="Finance"></tool-card>
+        </section>
+
+        <div class="mt-12 text-center">
+            <button class="bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-6 rounded-full transition-all">
+                Load More Tools
+            </button>
+        </div>
+    </main>
+
+    <footer-component></footer-component>
+
+    <script src="components/header.js"></script>
+    <script src="components/search.js"></script>
+    <script src="components/tool-card.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,30 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize tool data
+    const tools = [
+        { icon: 'code', title: 'HTML Formatter', category: 'Developer' },
+        { icon: 'image', title: 'Image Compressor', category: 'Media' },
+        { icon: 'file-text', title: 'PDF to Word', category: 'Documents' },
+        { icon: 'link', title: 'URL Shortener', category: 'Web' },
+        { icon: 'lock', title: 'Password Generator', category: 'Security' },
+        { icon: 'hash', title: 'Base64 Encoder', category: 'Developer' },
+        { icon: 'calendar', title: 'Date Calculator', category: 'Utilities' },
+        { icon: 'dollar-sign', title: 'Currency Converter', category: 'Finance' },
+        // Add more tools as needed
+    ];
+
+    // Theme toggle functionality
+    const themeToggle = document.getElementById('theme-toggle');
+    if (themeToggle) {
+        themeToggle.addEventListener('click', () => {
+            document.documentElement.classList.toggle('dark');
+            localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+        });
+    }
+
+    // Check for saved theme preference
+    if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark');
+    } else {
+        document.documentElement.classList.remove('dark');
+    }
+});

style.css

@@ -1,28 +1,33 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+.tool-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Smooth transitions */
+* {
+    transition: all 0.2s ease;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-track {
+    background: #1e293b;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 4px;
 }
+
+::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
+}