Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Nexus - Discover Cutting-Edge AI Applications</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', | |
| secondary: '#8b5cf6', | |
| dark: '#1e293b', | |
| light: '#f8fafc', | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-slow': 'pulse 5s infinite', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .search-highlight { | |
| background-color: rgba(251, 191, 36, 0.3); | |
| padding: 0 2px; | |
| border-radius: 2px; | |
| } | |
| .category-chip { | |
| transition: all 0.3s ease; | |
| } | |
| .category-chip:hover { | |
| transform: scale(1.05); | |
| } | |
| .category-chip.active { | |
| background-color: #6366f1; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-dark min-h-screen"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-robot text-3xl"></i> | |
| <h1 class="text-2xl font-bold">AI Nexus</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-gray-200 font-medium">Home</a> | |
| <a href="#" class="hover:text-gray-200 font-medium">Categories</a> | |
| <a href="#" class="hover:text-gray-200 font-medium">Trending</a> | |
| <a href="#" class="hover:text-gray-200 font-medium">Submit App</a> | |
| </nav> | |
| <button class="md:hidden text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="text-center py-12"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">Discover the Future of AI</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Explore our curated collection of cutting-edge AI web applications that are transforming industries.</p> | |
| <div class="max-w-2xl mx-auto relative"> | |
| <input type="text" id="searchInput" placeholder="Search AI applications..." class="w-full px-6 py-4 rounded-full shadow-lg focus:outline-none focus:ring-2 focus:ring-primary text-dark"> | |
| <button class="absolute right-2 top-2 bg-primary text-white p-2 rounded-full hover:bg-indigo-700 transition"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-12"> | |
| <!-- Categories --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Browse by Category</h2> | |
| <div class="flex flex-wrap justify-center gap-4 mb-8" id="categoryContainer"> | |
| <!-- Categories will be added by JavaScript --> | |
| </div> | |
| <div class="text-center"> | |
| <button id="showAllBtn" class="px-6 py-2 bg-primary text-white rounded-full hover:bg-indigo-700 transition">Show All</button> | |
| </div> | |
| </section> | |
| <!-- Featured Apps --> | |
| <section class="mb-16"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold">Featured AI Apps</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-gray-200 rounded-full hover:bg-gray-300 transition">Newest</button> | |
| <button class="px-4 py-2 bg-gray-200 rounded-full hover:bg-gray-300 transition">Popular</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="featuredApps"> | |
| <!-- Featured apps will be added by JavaScript --> | |
| </div> | |
| </section> | |
| <!-- All Apps --> | |
| <section> | |
| <h2 class="text-3xl font-bold mb-8">All AI Applications</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" id="allApps"> | |
| <!-- All apps will be added by JavaScript --> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-indigo-700 transition flex items-center mx-auto"> | |
| Load More <i class="fas fa-arrow-down ml-2"></i> | |
| </button> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Newsletter --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <div class="max-w-2xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-4">Stay Updated</h2> | |
| <p class="mb-8">Subscribe to our newsletter to get the latest AI tools and updates delivered to your inbox.</p> | |
| <div class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg text-dark focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <button class="px-6 py-3 bg-white text-primary font-bold rounded-lg hover:bg-gray-100 transition">Subscribe</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-robot mr-2"></i> AI Nexus | |
| </h3> | |
| <p class="text-gray-400">The premier directory for discovering innovative AI web applications.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Explore</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition">Categories</a></li> | |
| <li><a href="#" class="hover:text-white transition">Trending</a></li> | |
| <li><a href="#" class="hover:text-white transition">New Releases</a></li> | |
| <li><a href="#" class="hover:text-white transition">Developer Tools</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Company</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="hover:text-white transition">Contact</a></li> | |
| <li><a href="#" class="hover:text-white transition">Submit App</a></li> | |
| <li><a href="#" class="hover:text-white transition">Careers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-discord"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-700 text-center text-gray-400"> | |
| <p>© 2023 AI Nexus. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Sample data for AI applications | |
| const aiApps = [ | |
| { | |
| id: 1, | |
| name: "ChatGPT Pro", | |
| description: "Advanced conversational AI with multi-language support and context-aware responses.", | |
| category: "Chatbots", | |
| price: "Freemium", | |
| rating: 4.9, | |
| url: "#", | |
| featured: true, | |
| logo: "fas fa-comments", | |
| color: "text-blue-500" | |
| }, | |
| { | |
| id: 2, | |
| name: "DALL-E Creator", | |
| description: "Generate stunning AI artwork from text descriptions with unprecedented quality.", | |
| category: "Image Generation", | |
| price: "Paid", | |
| rating: 4.8, | |
| url: "#", | |
| featured: true, | |
| logo: "fas fa-paint-brush", | |
| color: "text-purple-500" | |
| }, | |
| { | |
| id: 3, | |
| name: "CodePilot", | |
| description: "AI pair programmer that helps you write better code faster with intelligent suggestions.", | |
| category: "Developer Tools", | |
| price: "Freemium", | |
| rating: 4.7, | |
| url: "#", | |
| featured: true, | |
| logo: "fas fa-code", | |
| color: "text-green-500" | |
| }, | |
| { | |
| id: 4, | |
| name: "VoiceClone", | |
| description: "Create realistic voice replicas with just a few minutes of sample audio.", | |
| category: "Voice Synthesis", | |
| price: "Paid", | |
| rating: 4.5, | |
| url: "#", | |
| featured: false, | |
| logo: "fas fa-microphone", | |
| color: "text-red-500" | |
| }, | |
| { | |
| id: 5, | |
| name: "DeepAnalyze", | |
| description: "Powerful data analysis tool that uncovers insights from your datasets automatically.", | |
| category: "Data Science", | |
| price: "Freemium", | |
| rating: 4.6, | |
| url: "#", | |
| featured: false, | |
| logo: "fas fa-chart-line", | |
| color: "text-yellow-500" | |
| }, | |
| { | |
| id: 6, | |
| name: "LegalMind", | |
| description: "AI-powered legal research assistant that helps you find relevant case law instantly.", | |
| category: "Legal", | |
| price: "Subscription", | |
| rating: 4.4, | |
| url: "#", | |
| featured: false, | |
| logo: "fas fa-gavel", | |
| color: "text-indigo-500" | |
| }, | |
| { | |
| id: 7, | |
| name: "MediScan", | |
| description: "Analyze medical images with AI to detect anomalies and assist diagnosis.", | |
| category: "Healthcare", | |
| price: "Enterprise", | |
| rating: 4.9, | |
| url: "#", | |
| featured: false, | |
| logo: "fas fa-heartbeat", | |
| color: "text-pink-500" | |
| }, | |
| { | |
| id: 8, | |
| name: "VideoGenius", | |
| description: "Automatically edit and enhance your videos with AI-powered tools.", | |
| category: "Video Editing", | |
| price: "Freemium", | |
| rating: 4.3, | |
| url: "#", | |
| featured: false, | |
| logo: "fas fa-video", | |
| color: "text-blue-400" | |
| }, | |
| { | |
| id: 9, | |
| name: "ResumeAI", | |
| description: "Create the perfect resume tailored to each job application with intelligent suggestions.", | |
| category: "Career", | |
| price: "Freemium", | |
| rating: 4.2, | |
| url: "#", | |
| featured: false, | |
| logo: "fas fa-file-alt", | |
| color: "text-teal-500" | |
| }, | |
| { | |
| id: 10, | |
| name: "MusicMind", | |
| description: "Compose original music in any style with AI assistance and customization.", | |
| category: "Creative", | |
| price: "Subscription", | |
| rating: 4.7, | |
| url: "#", | |
| featured: false, | |
| logo: "fas fa-music", | |
| color: "text-orange-500" | |
| }, | |
| { | |
| id: 11, | |
| name: "LangBridge", | |
| description: "Real-time translation tool with natural-sounding voice output in 50+ languages.", | |
| category: "Language", | |
| price: "Freemium", | |
| rating: 4.5, | |
| url: "#", | |
| featured: false, | |
| logo: "fas fa-language", | |
| color: "text-cyan-500" | |
| }, | |
| { | |
| id: 12, | |
| name: "MarketPredict", | |
| description: "AI-powered stock market analysis and prediction tool for investors.", | |
| category: "Finance", | |
| price: "Paid", | |
| rating: 4.6, | |
| url: "#", | |
| featured: false, | |
| logo: "fas fa-chart-pie", | |
| color: "text-green-400" | |
| } | |
| ]; | |
| // Get all unique categories | |
| const categories = [...new Set(aiApps.map(app => app.category))]; | |
| // DOM elements | |
| const categoryContainer = document.getElementById('categoryContainer'); | |
| const featuredAppsContainer = document.getElementById('featuredApps'); | |
| const allAppsContainer = document.getElementById('allApps'); | |
| const searchInput = document.getElementById('searchInput'); | |
| const showAllBtn = document.getElementById('showAllBtn'); | |
| // Render categories | |
| function renderCategories() { | |
| categoryContainer.innerHTML = ''; | |
| categories.forEach(category => { | |
| const chip = document.createElement('button'); | |
| chip.className = 'category-chip px-4 py-2 bg-gray-200 rounded-full hover:bg-gray-300 transition'; | |
| chip.textContent = category; | |
| chip.dataset.category = category; | |
| chip.addEventListener('click', () => { | |
| // Remove active class from all chips | |
| document.querySelectorAll('.category-chip').forEach(c => c.classList.remove('active')); | |
| // Add active class to clicked chip | |
| chip.classList.add('active'); | |
| filterAppsByCategory(category); | |
| }); | |
| categoryContainer.appendChild(chip); | |
| }); | |
| } | |
| // Render featured apps | |
| function renderFeaturedApps() { | |
| featuredAppsContainer.innerHTML = ''; | |
| const featuredApps = aiApps.filter(app => app.featured); | |
| featuredApps.forEach(app => { | |
| const card = createAppCard(app, true); | |
| featuredAppsContainer.appendChild(card); | |
| }); | |
| } | |
| // Render all apps | |
| function renderAllApps() { | |
| allAppsContainer.innerHTML = ''; | |
| aiApps.forEach(app => { | |
| const card = createAppCard(app, false); | |
| allAppsContainer.appendChild(card); | |
| }); | |
| } | |
| // Create app card element | |
| function createAppCard(app, isFeatured) { | |
| const card = document.createElement('div'); | |
| card.className = `bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 ${isFeatured ? 'card-hover' : ''}`; | |
| card.innerHTML = ` | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="${app.color} text-3xl mr-4"> | |
| <i class="${app.logo}"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-xl">${app.name}</h3> | |
| <div class="flex items-center"> | |
| ${generateStars(app.rating)} | |
| <span class="text-gray-500 ml-2">${app.rating}</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4">${app.description}</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">${app.category}</span> | |
| <span class="font-medium ${app.price === 'Freemium' ? 'text-green-500' : app.price === 'Paid' ? 'text-blue-500' : 'text-purple-500'}">${app.price}</span> | |
| </div> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50"> | |
| <a href="${app.url}" class="block text-center w-full py-2 bg-primary text-white rounded-lg hover:bg-indigo-700 transition">Visit App</a> | |
| </div> | |
| `; | |
| return card; | |
| } | |
| // Generate star rating HTML | |
| function generateStars(rating) { | |
| let stars = ''; | |
| const fullStars = Math.floor(rating); | |
| const hasHalfStar = rating % 1 >= 0.5; | |
| for (let i = 0; i < fullStars; i++) { | |
| stars += '<i class="fas fa-star text-yellow-400"></i>'; | |
| } | |
| if (hasHalfStar) { | |
| stars += '<i class="fas fa-star-half-alt text-yellow-400"></i>'; | |
| } | |
| const emptyStars = 5 - Math.ceil(rating); | |
| for (let i = 0; i < emptyStars; i++) { | |
| stars += '<i class="far fa-star text-yellow-400"></i>'; | |
| } | |
| return stars; | |
| } | |
| // Filter apps by category | |
| function filterAppsByCategory(category) { | |
| const filteredApps = aiApps.filter(app => app.category === category); | |
| allAppsContainer.innerHTML = ''; | |
| filteredApps.forEach(app => { | |
| const card = createAppCard(app, false); | |
| allAppsContainer.appendChild(card); | |
| }); | |
| } | |
| // Search functionality | |
| searchInput.addEventListener('input', (e) => { | |
| const searchTerm = e.target.value.toLowerCase(); | |
| if (searchTerm.length > 0) { | |
| const filteredApps = aiApps.filter(app => | |
| app.name.toLowerCase().includes(searchTerm) || | |
| app.description.toLowerCase().includes(searchTerm) || | |
| app.category.toLowerCase().includes(searchTerm) | |
| ); | |
| allAppsContainer.innerHTML = ''; | |
| filteredApps.forEach(app => { | |
| const highlightedCard = highlightSearchTerm(app, searchTerm); | |
| allAppsContainer.appendChild(highlightedCard); | |
| }); | |
| } else { | |
| renderAllApps(); | |
| } | |
| }); | |
| // Highlight search term in results | |
| function highlightSearchTerm(app, searchTerm) { | |
| const card = createAppCard(app, false); | |
| // Highlight in name | |
| const nameElement = card.querySelector('h3'); | |
| nameElement.innerHTML = nameElement.textContent.replace( | |
| new RegExp(searchTerm, 'gi'), | |
| match => `<span class="search-highlight">${match}</span>` | |
| ); | |
| // Highlight in description | |
| const descElement = card.querySelector('p'); | |
| descElement.innerHTML = descElement.textContent.replace( | |
| new RegExp(searchTerm, 'gi'), | |
| match => `<span class="search-highlight">${match}</span>` | |
| ); | |
| // Highlight in category | |
| const categoryElement = card.querySelector('span:first-of-type'); | |
| categoryElement.innerHTML = categoryElement.textContent.replace( | |
| new RegExp(searchTerm, 'gi'), | |
| match => `<span class="search-highlight">${match}</span>` | |
| ); | |
| return card; | |
| } | |
| // Show all apps | |
| showAllBtn.addEventListener('click', () => { | |
| // Remove active class from all chips | |
| document.querySelectorAll('.category-chip').forEach(c => c.classList.remove('active')); | |
| renderAllApps(); | |
| }); | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| renderCategories(); | |
| renderFeaturedApps(); | |
| renderAllApps(); | |
| }); | |
| </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=adminSanderson/123-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |