Spaces:

adminSanderson
/

123-1

Running

App Files Files Community

adminSanderson commited on Apr 6

Commit

772404f

verified ·

1 Parent(s): df1efe7

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +539 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: 123 1
-emoji: 👁
-colorFrom: yellow
 colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: 123-1
+emoji: 🐳
+colorFrom: green
 colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,539 @@
-<!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">
+<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>