Spaces:

Fazle55
/

tck

Running

App Files Files Community

Fazle55 commited on Jun 8, 2025

Commit

f018a25

verified ·

1 Parent(s): 11e27b8

Ai - Initial Deployment

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +701 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Tck
-emoji: 🚀
-colorFrom: blue
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: tck
+emoji: 🐳
+colorFrom: red
+colorTo: yellow
 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,701 @@
-<!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>NexusAI - Intelligent Solutions for Tomorrow</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 = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#6366f1',
+                        secondary: '#8b5cf6',
+                        dark: '#0f172a',
+                    },
+                    animation: {
+                        'gradient': 'gradient 8s ease infinite',
+                        'float': 'float 6s ease-in-out infinite',
+                        'fade-in': 'fadeIn 1s ease-in-out forwards'
+                    },
+                    keyframes: {
+                        gradient: {
+                            '0%, 100%': {'background-position': '0% 50%'},
+                            '50%': {'background-position': '100% 50%'}
+                        },
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0)' },
+                            '50%': { transform: 'translateY(-20px)' }
+                        },
+                        fadeIn: {
+                            '0%': { opacity: '0', transform: 'translateY(20px)' },
+                            '100%': { opacity: '1', transform: 'translateY(0)' }
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(120deg, #f0f9ff, #e0e7ff);
+            color: #1e293b;
+            transition: all 0.4s ease;
+        }
+        body.dark {
+            background: linear-gradient(120deg, #0f172a, #1e293b);
+            color: #e2e8f0;
+        }
+        .gradient-bg {
+            background: linear-gradient(-45deg, #6366f1, #8b5cf6, #ec4899, #f43f5e);
+            background-size: 400% 400%;
+            animation: gradient 15s ease infinite;
+        }
+        .card-glow:hover {
+            box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.5);
+            transform: translateY(-5px);
+        }
+        .ai-response {
+            animation: fadeIn 0.8s ease-out;
+        }
+        input[type="range"] {
+            -webkit-appearance: none;
+            height: 8px;
+            border-radius: 10px;
+            background: linear-gradient(to right, #6366f1, #8b5cf6);
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 22px;
+            height: 22px;
+            border-radius: 50%;
+            background: #ffffff;
+            cursor: pointer;
+            box-shadow: 0 0 10px rgba(99, 102, 241, 0.7);
+            border: 2px solid #6366f1;
+        }
+        .feature-icon {
+            transition: all 0.3s ease;
+        }
+        .feature-card:hover .feature-icon {
+            transform: scale(1.1) rotate(5deg);
+            color: #8b5cf6;
+        }
+        #ai-orb {
+            animation: float 6s ease-in-out infinite;
+        }
+        .stat-number {
+            font-size: 2.5rem;
+            font-weight: 700;
+            background: linear-gradient(90deg, #6366f1, #8b5cf6);
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            transition: all 0.4s ease;
+        }
+        .dark .stat-number {
+            background: linear-gradient(90deg, #818cf8, #c4b5fd);
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); }
+            70% { box-shadow: 0 0 0 15px rgba(139, 92, 246, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
+        }
+    </style>
+</head>
+<body class="dark:bg-dark transition-colors duration-300">
+    <!-- Navigation -->
+    <nav class="fixed w-full z-50 backdrop-blur-sm bg-white/70 dark:bg-dark/70 py-4 shadow-sm">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center">
+                    <div class="bg-gradient-to-r from-primary to-secondary p-2 rounded-lg">
+                        <i class="fas fa-brain text-white text-2xl"></i>
+                    </div>
+                    <span class="ml-3 text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">NexusAI</span>
+                </div>
+                <div class="hidden md:flex space-x-8">
+                    <a href="#" class="font-medium hover:text-primary transition-colors">Home</a>
+                    <a href="#features" class="font-medium hover:text-primary transition-colors">Features</a>
+                    <a href="#demo" class="font-medium hover:text-primary transition-colors">Demo</a>
+                    <a href="#stats" class="font-medium hover:text-primary transition-colors">Insights</a>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div class="hidden md:block">
+                        <button class="px-4 py-2 bg-gradient-to-r from-primary to-secondary text-white font-medium rounded-lg hover:opacity-90 transition-all shadow-md">
+                            Get Started
+                        </button>
+                    </div>
+                    <!-- Dark mode toggle -->
+                    <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 focus:outline-none transition-colors">
+                        <i class="fas fa-sun text-yellow-400 block dark:hidden"></i>
+                        <i class="fas fa-moon text-gray-300 hidden dark:block"></i>
+                    </button>
+                    <div class="md:hidden">
+                        <button id="menu-toggle" class="text-gray-700 dark:text-gray-200">
+                            <i class="fas fa-bars text-2xl"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-12 md:mb-0">
+                    <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight">
+                        <span class="block">Powering the Next</span>
+                        <span class="block bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Generation of AI</span>
+                    </h1>
+                    <p class="mt-6 text-xl text-gray-600 dark:text-gray-300 max-w-xl">
+                        NexusAI is an advanced artificial intelligence platform that transforms how businesses analyze data, automate processes, and make decisions.
+                    </p>
+                    <div class="mt-10 flex flex-col sm:flex-row gap-4">
+                        <button class="px-8 py-4 bg-gradient-to-r from-primary to-secondary text-white font-bold rounded-xl hover:opacity-90 transition-all shadow-lg transform hover:scale-105">
+                            Start Free Trial
+                        </button>
+                        <button class="px-8 py-4 bg-white dark:bg-gray-800 border border-primary text-primary dark:text-gray-200 font-bold rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-all shadow transform hover:scale-105">
+                            <i class="fas fa-play-circle mr-2"></i> Watch Demo
+                        </button>
+                    </div>
+                    <div class="mt-8 flex items-center text-gray-500 dark:text-gray-400">
+                        <div class="flex -space-x-4">
+                            <img class="w-12 h-12 border-2 border-white dark:border-gray-800 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
+                            <img class="w-12 h-12 border-2 border-white dark:border-gray-800 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
+                            <img class="w-12 h-12 border-2 border-white dark:border-gray-800 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
+                            <img class="w-12 h-12 border-2 border-white dark:border-gray-800 rounded-full" src="https://randomuser.me/api/portraits/men/55.jpg" alt="">
+                        </div>
+                        <div class="ml-4">
+                            <p>Trusted by over <span class="font-bold">25,000</span> users worldwide</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="md:w-1/2 flex justify-center">
+                    <div class="relative">
+                        <div id="ai-orb" class="relative z-10 w-80 h-80 rounded-full bg-gradient-to-br from-primary to-secondary shadow-xl flex items-center justify-center">
+                            <div class="absolute inset-4 bg-gray-900 rounded-full flex items-center justify-center">
+                                <div class="text-center">
+                                    <i class="fas fa-microchip text-primary text-5xl mb-3"></i>
+                                    <span class="text-white text-xl font-bold">NexusAI</span>
+                                </div>
+                            </div>
+                            <div class="absolute inset-0 animate-ping rounded-full bg-primary opacity-20"></div>
+                        </div>
+                        <div class="absolute -top-6 -right-6 w-40 h-40 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30"></div>
+                        <div class="absolute -bottom-6 -left-6 w-40 h-40 bg-indigo-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section id="features" class="py-20 bg-gray-50 dark:bg-gray-900/50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center">
+                <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+                    Advanced AI Capabilities
+                </h2>
+                <p class="mt-4 text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+                    Experience the future with cutting-edge AI features designed to elevate your productivity.
+                </p>
+            </div>
+            <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+                <!-- Feature 1 -->
+                <div class="feature-card bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl transform transition-all duration-300 hover:-translate-y-2 card-glow">
+                    <div class="feature-icon bg-indigo-50 dark:bg-indigo-900/30 w-16 h-16 rounded-lg flex items-center justify-center text-primary dark:text-indigo-400 text-2xl">
+                        <i class="fas fa-comment-dots"></i>
+                    </div>
+                    <h3 class="mt-6 text-xl font-bold text-gray-900 dark:text-white">Natural Conversations</h3>
+                    <p class="mt-3 text-gray-600 dark:text-gray-400">
+                        Our AI understands context and nuances to deliver human-like conversations that feel natural and engaging.
+                    </p>
+                    <div class="mt-6">
+                        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 text-sm">
+                            <p class="italic text-gray-600 dark:text-gray-300">"I'm amazed at how naturally NexusAI converses. It remembers context better than any other AI I've used."</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Feature 2 -->
+                <div class="feature-card bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl transform transition-all duration-300 hover:-translate-y-2 card-glow">
+                    <div class="feature-icon bg-purple-50 dark:bg-purple-900/30 w-16 h-16 rounded-lg flex items-center justify-center text-purple-600 dark:text-purple-400 text-2xl">
+                        <i class="fas fa-rocket"></i>
+                    </div>
+                    <h3 class="mt-6 text-xl font-bold text-gray-900 dark:text-white">Superior Performance</h3>
+                    <p class="mt-3 text-gray-600 dark:text-gray-400">
+                        Industry-leading processing speed that delivers answers in milliseconds without compromising on quality.
+                    </p>
+                    <div class="mt-6 flex gap-2">
+                        <span class="px-3 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 rounded-full text-sm">Speed</span>
+                        <span class="px-3 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 rounded-full text-sm">Efficiency</span>
+                        <span class="px-3 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 rounded-full text-sm">Reliability</span>
+                    </div>
+                </div>
+                <!-- Feature 3 -->
+                <div class="feature-card bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl transform transition-all duration-300 hover:-translate-y-2 card-glow">
+                    <div class="feature-icon bg-pink-50 dark:bg-pink-900/30 w-16 h-16 rounded-lg flex items-center justify-center text-pink-600 dark:text-pink-400 text-2xl">
+                        <i class="fas fa-shield-alt"></i>
+                    </div>
+                    <h3 class="mt-6 text-xl font-bold text-gray-900 dark:text-white">Enterprise Security</h3>
+                    <p class="mt-3 text-gray-600 dark:text-gray-400">
+                        Military-grade encryption and compliance standards to ensure your data remains completely private and secure.
+                    </p>
+                    <div class="mt-6">
+                        <div class="flex items-center">
+                            <div class="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/30 rounded-full flex items-center justify-center text-indigo-600 dark:text-indigo-400">
+                                <i class="fas fa-lock text-sm"></i>
+                            </div>
+                            <div class="ml-4">
+                                <h4 class="text-sm font-semibold text-gray-900 dark:text-white">End-to-End Encryption</h4>
+                                <p class="text-xs text-gray-500 dark:text-gray-400">All data processed is encrypted in transit and at rest</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-20 text-center">
+                <a href="#" class="inline-flex items-center px-6 py-3 border border-primary text-primary dark:text-indigo-300 font-medium rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-colors">
+                    View all capabilities
+                    <i class="fas fa-arrow-right ml-2"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Live Demo Section -->
+    <section id="demo" class="py-20">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center">
+                <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+                    Experience NexusAI Live
+                </h2>
+                <p class="mt-4 text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+                    Try our interactive demo to see how NexusAI can transform your ideas into reality.
+                </p>
+            </div>
+            <div class="mt-12">
+                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+                    <div class="p-1 gradient-bg"></div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-center">
+                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">AI Assistant</h3>
+                            <div class="flex items-center">
+                                <span class="h-3 w-3 bg-green-500 rounded-full"></span>
+                                <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Online</span>
+                            </div>
+                        </div>
+                        <div class="mt-6 space-y-4">
+                            <div class="flex">
+                                <div class="flex-shrink-0 mr-4">
+                                    <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center text-primary dark:text-indigo-400">
+                                        <i class="fas fa-robot"></i>
+                                    </div>
+                                </div>
+                                <div class="bg-gray-100 dark:bg-gray-700 rounded-xl p-4">
+                                    <p class="text-gray-700 dark:text-gray-300">Hello! I'm NexusAI. How can I assist you today? Ask me anything - I can help explain concepts, generate content, translate languages, and much more.</p>
+                                </div>
+                            </div>
+                            <div id="response-container" class="flex">
+                                <div class="flex-shrink-0 mr-4">
+                                    <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center text-primary dark:text-indigo-400">
+                                        <i class="fas fa-robot"></i>
+                                    </div>
+                                </div>
+                                <div class="ai-response bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-100 dark:border-indigo-800 rounded-xl p-4 max-w-4xl">
+                                    <p id="ai-output" class="text-indigo-800 dark:text-indigo-200">I'm ready whenever you are. Just type your question below!</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-8">
+                            <div class="bg-white dark:bg-gray-700 border rounded-lg flex shadow-sm">
+                                <input type="text" id="prompt-input" placeholder="What would you like to ask?" class="flex-1 border-0 bg-transparent py-4 px-4 text-gray-900 dark:text-white placeholder:text-gray-400 focus:ring-0">
+                                <button id="send-btn" class="px-6 gradient-bg text-white font-medium flex items-center">
+                                    <i class="fas fa-paper-plane mr-2"></i> Send
+                                </button>
+                            </div>
+                            <div class="mt-3 flex justify-between text-sm text-gray-500 dark:text-gray-400">
+                                <div>Model: Nexus-GPT-4</div>
+                                <div id="char-counter">0/500 characters</div>
+                            </div>
+                        </div>
+                        <div class="mt-8">
+                            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Try these examples:</h4>
+                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                                <button class="example-btn bg-indigo-50 dark:bg-indigo-900/20 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 text-indigo-700 dark:text-indigo-200 py-2 px-4 rounded-lg text-sm border border-indigo-100 dark:border-indigo-800 transition-colors">
+                                    Explain quantum computing
+                                </button>
+                                <button class="example-btn bg-indigo-50 dark:bg-indigo-900/20 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 text-indigo-700 dark:text-indigo-200 py-2 px-4 rounded-lg text-sm border border-indigo-100 dark:border-indigo-800 transition-colors">
+                                    Write a poem about the future
+                                </button>
+                                <button class="example-btn bg-indigo-50 dark:bg-indigo-900/20 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 text-indigo-700 dark:text-indigo-200 py-2 px-4 rounded-lg text-sm border border-indigo-100 dark:border-indigo-800 transition-colors">
+                                    How to make carbonara pasta?
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-10 flex flex-wrap justify-center gap-6">
+                    <div class="flex items-center">
+                        <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white">
+                            <i class="fas fa-check text-xs"></i>
+                        </div>
+                        <span class="ml-2 text-gray-700 dark:text-gray-300 font-medium">No credit card required</span>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white">
+                            <i class="fas fa-check text-xs"></i>
+                        </div>
+                        <span class="ml-2 text-gray-700 dark:text-gray-300 font-medium">100% privacy safe</span>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white">
+                            <i class="fas fa-check text-xs"></i>
+                        </div>
+                        <span class="ml-2 text-gray-700 dark:text-gray-300 font-medium">Try unlimited queries</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Stats Section -->
+    <section id="stats" class="py-20 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-gray-900">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center">
+                <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+                    By The Numbers
+                </h2>
+                <p class="mt-4 text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+                    We measure our success by the value we deliver to our users.
+                </p>
+            </div>
+            <div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
+                <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg text-center transform transition-all hover:scale-105">
+                    <div class="mx-auto bg-indigo-100 dark:bg-indigo-900/30 w-20 h-20 rounded-full flex items-center justify-center text-indigo-600 dark:text-indigo-400">
+                        <i class="fas fa-user-group text-3xl"></i>
+                    </div>
+                    <div class="stat-number mt-6 text-4xl" data-count="257">257</div>
+                    <p class="mt-2 text-gray-600 dark:text-gray-400">Team Members</p>
+                </div>
+                <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg text-center transform transition-all hover:scale-105">
+                    <div class="mx-auto bg-purple-100 dark:bg-purple-900/30 w-20 h-20 rounded-full flex items-center justify-center text-purple-600 dark:text-purple-400">
+                        <i class="fas fa-globe text-3xl"></i>
+                    </div>
+                    <div class="stat-number mt-6 text-4xl" data-count="89">89</div>
+                    <p class="mt-2 text-gray-600 dark:text-gray-400">Countries Using Our AI</p>
+                </div>
+                <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg text-center transform transition-all hover:scale-105">
+                    <div class="mx-auto bg-pink-100 dark:bg-pink-900/30 w-20 h-20 rounded-full flex items-center justify-center text-pink-600 dark:text-pink-400">
+                        <i class="fas fa-microchip text-3xl"></i>
+                    </div>
+                    <div class="stat-number mt-6 text-4xl" data-count="2.1">2.1</div>
+                    <p class="mt-2 text-gray-600 dark:text-gray-400">Billion Daily Queries</p>
+                </div>
+                <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg text-center transform transition-all hover:scale-105">
+                    <div class="mx-auto bg-blue-100 dark:bg-blue-900/30 w-20 h-20 rounded-full flex items-center justify-center text-blue-600 dark:text-blue-400">
+                        <i class="fas fa-lightbulb text-3xl"></i>
+                    </div>
+                    <div class="stat-number mt-6 text-4xl" data-count="98">98</div>
+                    <p class="mt-2 text-gray-600 dark:text-gray-400">Accuracy Rate</p>
+                </div>
+            </div>
+            <div class="mt-16 max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
+                <h3 class="text-2xl font-bold text-center text-gray-900 dark:text-white">Customize Your AI Experience</h3>
+                <div class="mt-8 space-y-6">
+                    <div>
+                        <div class="flex justify-between">
+                            <label class="text-lg font-medium text-gray-700 dark:text-gray-300">Creativity Level</label>
+                            <span id="creativity-value" class="text-lg font-medium text-primary">Balanced</span>
+                        </div>
+                        <input type="range" id="creativity-slider" min="0" max="100" value="50" class="w-full mt-3">
+                    </div>
+                    <div>
+                        <div class="flex justify-between">
+                            <label class="text-lg font-medium text-gray-700 dark:text-gray-300">Response Length</label>
+                            <span id="length-value" class="text-lg font-medium text-primary">Medium</span>
+                        </div>
+                        <input type="range" id="length-slider" min="0" max="100" value="50" class="w-full mt-3">
+                    </div>
+                    <div class="mt-6 text-center">
+                        <button class="px-6 py-3 gradient-bg text-white font-bold rounded-lg shadow-lg transform transition-all hover:scale-105">
+                            <i class="fas fa-cog mr-2"></i> Apply Settings
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-gray-300 py-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center">
+                        <div class="bg-gradient-to-r from-primary to-secondary p-2 rounded-lg">
+                            <i class="fas fa-brain text-white text-xl"></i>
+                        </div>
+                        <span class="ml-3 text-xl font-bold text-white">NexusAI</span>
+                    </div>
+                    <p class="mt-4 max-w-xs">
+                        Building intelligent solutions that transform how humans interact with technology.
+                    </p>
+                    <div class="mt-6 flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-linkedin-in"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-github"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-discord"></i>
+                        </a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold text-white">Product</h4>
+                    <ul class="mt-4 space-y-2">
+                        <li><a href="#" class="hover:text-white transition-colors">Features</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors">Use Cases</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors">Pricing</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors">Integrations</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors">API</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold text-white">Resources</h4>
+                    <ul class="mt-4 space-y-2">
+                        <li><a href="#" class="hover:text-white transition-colors">Documentation</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors">Tutorials</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors">Community</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors">Status</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold text-white">Subscribe to our newsletter</h4>
+                    <p class="mt-4">The latest AI insights delivered to your inbox.</p>
+                    <div class="mt-4 flex">
+                        <input type="email" placeholder="Your email" class="px-4 py-3 bg-gray-700 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-primary w-full">
+                        <button class="px-4 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-r-lg">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </div>
+                    <p class="mt-3 text-sm text-gray-500">
+                        We respect your privacy. Unsubscribe at any time.
+                    </p>
+                </div>
+            </div>
+            <div class="mt-16 pt-8 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center">
+                <p>© 2023 NexusAI. All rights reserved.</p>
+                <div class="mt-4 md:mt-0 flex space-x-6">
+                    <a href="#" class="text-gray-400 hover:text-white">Terms</a>
+                    <a href="#" class="text-gray-400 hover:text-white">Privacy</a>
+                    <a href="#" class="text-gray-400 hover:text-white">Cookies</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Dark mode toggle
+        const themeToggle = document.getElementById('theme-toggle');
+        const htmlElement = document.documentElement;
+        themeToggle.addEventListener('click', () => {
+            htmlElement.classList.toggle('dark');
+            localStorage.setItem('theme', htmlElement.classList.contains('dark') ? 'dark' : 'light');
+        });
+        // Set initial theme
+        if (localStorage.getItem('theme') === 'dark') {
+            htmlElement.classList.add('dark');
+        } else if (localStorage.getItem('theme') === 'light') {
+            htmlElement.classList.remove('dark');
+        } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            htmlElement.classList.add('dark');
+        }
+        // Interactive AI Demo
+        const promptInput = document.getElementById('prompt-input');
+        const sendBtn = document.getElementById('send-btn');
+        const aiOutput = document.getElementById('ai-output');
+        const charCounter = document.getElementById('char-counter');
+        const exampleBtns = document.querySelectorAll('.example-btn');
+        const responses = {
+            "explain quantum computing": "Quantum computing uses qubits which can represent multiple states simultaneously (0, 1, or both) due to quantum superposition. This allows quantum computers to perform many calculations at once, solving certain problems much faster than classical computers. However, building stable quantum systems remains challenging due to quantum decoherence.",
+            "write a poem about the future": "In circuits deep where knowledge flows,\nA future bright as minds disclose.\nThrough digital minds, our world aligns,\nWith AI as the guide to new designs.\nNo boundaries set in silicon's art,\nJust human dreams from the start.\nTomorrow's dawn, with wisdom true,\nBuilt byte by byte, for me and you.",
+            "how to make carbonara pasta": "Authentic carbonara requires just 4 ingredients:<br><br>1. Cook spaghetti until al dente<br>2. Fry guanciale (pork cheek) until crispy<br>3. Mix raw eggs with grated Pecorino Romano cheese<br>4. Combine hot pasta with guanciale fat, then mix in egg-cheese blend off-heat<br><br>The residual heat cooks the eggs into a creamy sauce. Add black pepper and serve immediately!"
+        };
+        // Character counter
+        promptInput.addEventListener('input', () => {
+            const length = promptInput.value.length;
+            charCounter.textContent = `${length}/500 characters`;
+        });
+        // Demo responses
+        function generateResponse(prompt) {
+            aiOutput.classList.remove('text-indigo-800', 'dark:text-indigo-200');
+            aiOutput.classList.add('text-gray-600', 'dark:text-gray-300');
+            const defaultResponse = "NexusAI can understand complex queries, generate creative content, explain concepts, translate between languages, and help with programming or writing tasks. What else would you like to know?";
+            const promptLower = prompt.toLowerCase();
+            if (responses[promptLower]) {
+                return responses[promptLower];
+            }
+            if (promptLower.includes("hello") || promptLower.includes("hi")) {
+                return "Hello! I'm NexusAI, an advanced language model. How can I assist you today?";
+            } else if (promptLower.includes("future") || promptLower.includes("tomorrow")) {
+                return "The future of AI promises transformative changes across industries. We're moving towards more contextual understanding, multimodal capabilities, and increasingly natural human-AI collaboration. Exciting breakthroughs in reasoning and problem-solving are on the horizon!";
+            } else if (promptLower.includes("weather")) {
+                return "As an AI, I don't have real-time access to current weather data. I recommend checking a weather service for the latest forecast.";
+            } else {
+                return defaultResponse;
+            }
+        }
+        function askAI() {
+            const question = promptInput.value.trim();
+            if (!question) return;
+            aiOutput.innerHTML = '<div class="flex space-x-2"><div class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></div><div class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse delay-75"></div><div class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse delay-150"></div></div>';
+            setTimeout(() => {
+                const response = generateResponse(question);
+                aiOutput.innerHTML = response;
+                aiOutput.classList.remove('text-gray-600', 'dark:text-gray-300');
+                aiOutput.classList.add('text-indigo-800', 'dark:text-indigo-200');
+                promptInput.value = "";
+                charCounter.textContent = "0/500 characters";
+            }, 1500);
+        }
+        sendBtn.addEventListener('click', askAI);
+        promptInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') askAI();
+        });
+        exampleBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                promptInput.value = btn.textContent.trim();
+                charCounter.textContent = `${promptInput.value.length}/500 characters`;
+            });
+        });
+        // Stat counters animation
+        function animateValue(id, start, end, duration) {
+            const element = document.getElementById(id);
+            if (!element) return;
+            let startTimestamp = null;
+            const step = (timestamp) => {
+                if (!startTimestamp) startTimestamp = timestamp;
+                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+                const value = Math.floor(progress * (end - start) + start);
+                element.textContent = value;
+                if (progress < 1) {
+                    window.requestAnimationFrame(step);
+                }
+            };
+            window.requestAnimationFrame(step);
+        }
+        function animateStats() {
+            const stats = document.querySelectorAll('.stat-number');
+            stats.forEach(stat => {
+                const count = parseInt(stat.getAttribute('data-count'));
+                const id = `stat-${Math.random().toString(36).substr(2, 9)}`;
+                stat.id = id;
+                animateValue(id, 0, count, 2000);
+            });
+        }
+        // Sliders
+        const creativitySlider = document.getElementById('creativity-slider');
+        const creativityValue = document.getElementById('creativity-value');
+        const lengthSlider = document.getElementById('length-slider');
+        const lengthValue = document.getElementById('length-value');
+        creativitySlider.addEventListener('input', () => {
+            const val = creativitySlider.value;
+            if (val < 25) creativityValue.textContent = "Precise";
+            else if (val < 75) creativityValue.textContent = "Balanced";
+            else creativityValue.textContent = "Creative";
+        });
+        lengthSlider.addEventListener('input', () => {
+            const val = lengthSlider.value;
+            if (val < 25) lengthValue.textContent = "Brief";
+            else if (val < 75) lengthValue.textContent = "Medium";
+            else lengthValue.textContent = "Detailed";
+        });
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            setTimeout(animateStats, 500);
+        });
+    </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=Fazle55/tck" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Ai