Spaces:

adminSanderson
/

123-1

Running

File size: 23,037 Bytes

772404f

<!DOCTYPE html>
<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>&copy; 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>