Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Assistant | Your Intelligent Helper</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"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: .15em solid #6366f1; | |
| white-space: nowrap; | |
| margin: 0 auto; | |
| letter-spacing: .15em; | |
| animation: | |
| typing 3.5s steps(40, end), | |
| blink-caret .75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #6366f1; } | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(99, 102, 241, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50 font-sans antialiased"> | |
| <!-- Header with animated gradient --> | |
| <header class="gradient-bg text-white shadow-xl relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="absolute top-0 left-0 w-64 h-64 rounded-full bg-purple-300 mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div> | |
| <div class="absolute top-0 right-0 w-64 h-64 rounded-full bg-pink-300 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div> | |
| <div class="absolute bottom-0 right-0 w-64 h-64 rounded-full bg-blue-300 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div> | |
| </div> | |
| <div class="container mx-auto px-6 py-16 relative z-10"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="mb-10 md:mb-0 md:w-2/3"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 leading-tight">Your Personal <span class="text-indigo-200">AI Assistant</span></h1> | |
| <p class="text-xl md:text-2xl opacity-90 mb-6">Intelligent, helpful, and always available</p> | |
| <button id="tryMeBtn" class="bg-white text-indigo-600 px-8 py-3 rounded-full font-semibold hover:bg-indigo-50 transition-all duration-300 transform hover:scale-105 shadow-lg"> | |
| Try Me Now <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| <div class="w-48 h-48 md:w-64 md:h-64 rounded-full bg-white bg-opacity-20 flex items-center justify-center border-4 border-white border-opacity-30 floating"> | |
| <i class="fas fa-robot text-7xl md:text-8xl text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Floating chat button --> | |
| <div id="chatBtn" class="fixed bottom-8 right-8 w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center text-white text-2xl shadow-xl cursor-pointer transform hover:scale-110 transition-transform duration-300 glow hidden"> | |
| <i class="fas fa-comment-dots"></i> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-6 py-16"> | |
| <!-- Introduction Section --> | |
| <section class="mb-20"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Meet Your New <span class="text-indigo-600">AI Companion</span></h2> | |
| <div class="w-24 h-1 bg-indigo-500 mx-auto mb-6"></div> | |
| <p class="text-gray-600 max-w-3xl mx-auto text-lg"> | |
| I'm not just a program—I'm your intelligent partner ready to assist with any task, answer any question, | |
| and help you be more productive and creative. | |
| </p> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-xl p-8 mb-12 relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-indigo-500 to-purple-500"></div> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Why Choose Me?</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-bolt text-indigo-600"></i> | |
| </div> | |
| <span class="text-gray-700">Instant responses to your questions</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-infinity text-indigo-600"></i> | |
| </div> | |
| <span class="text-gray-700">Vast knowledge across countless topics</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-clock text-indigo-600"></i> | |
| </div> | |
| <span class="text-gray-700">Available 24/7 whenever you need help</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-brain text-indigo-600"></i> | |
| </div> | |
| <span class="text-gray-700">Continuously learning and improving</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="md:w-1/2 bg-gray-50 rounded-xl p-6 border border-gray-200"> | |
| <div class="typewriter text-xl font-mono text-indigo-600 mb-4"> | |
| How can I help you today? | |
| </div> | |
| <div class="bg-white rounded-lg p-4 shadow-sm mb-4"> | |
| <p class="text-gray-700 italic">"Explain quantum computing like I'm 5 years old"</p> | |
| </div> | |
| <div class="bg-indigo-50 rounded-lg p-4 shadow-sm"> | |
| <p class="text-gray-800">Quantum computing is like having a magical box that can look at all your toys at once, instead of one at a time like regular computers!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="mb-20"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-12">What I Can Do For You</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Card 1 --> | |
| <div class="bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 card-hover"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-xl flex items-center justify-center mb-6 mx-auto"> | |
| <i class="fas fa-lightbulb text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center text-gray-800 mb-4">Creative Brainstorming</h3> | |
| <p class="text-gray-600 text-center"> | |
| Generate ideas for projects, names, stories, or anything else you need creative input on. | |
| </p> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 card-hover"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-xl flex items-center justify-center mb-6 mx-auto"> | |
| <i class="fas fa-code text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center text-gray-800 mb-4">Code Assistance</h3> | |
| <p class="text-gray-600 text-center"> | |
| Explain concepts, debug code, suggest improvements, or generate code in multiple languages. | |
| </p> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 card-hover"> | |
| <div class="bg-purple-100 w-16 h-16 rounded-xl flex items-center justify-center mb-6 mx-auto"> | |
| <i class="fas fa-book text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center text-gray-800 mb-4">Learning & Education</h3> | |
| <p class="text-gray-600 text-center"> | |
| Break down complex topics, create study guides, or quiz you on any subject. | |
| </p> | |
| </div> | |
| <!-- Card 4 --> | |
| <div class="bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 card-hover"> | |
| <div class="bg-pink-100 w-16 h-16 rounded-xl flex items-center justify-center mb-6 mx-auto"> | |
| <i class="fas fa-pen-fancy text-pink-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center text-gray-800 mb-4">Content Creation</h3> | |
| <p class="text-gray-600 text-center"> | |
| Write emails, articles, social media posts, poems, and more tailored to your needs. | |
| </p> | |
| </div> | |
| <!-- Card 5 --> | |
| <div class="bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 card-hover"> | |
| <div class="bg-green-100 w-16 h-16 rounded-xl flex items-center justify-center mb-6 mx-auto"> | |
| <i class="fas fa-chart-line text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center text-gray-800 mb-4">Productivity Boost</h3> | |
| <p class="text-gray-600 text-center"> | |
| Help with planning, organization, time management, and decision making. | |
| </p> | |
| </div> | |
| <!-- Card 6 --> | |
| <div class="bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 card-hover"> | |
| <div class="bg-yellow-100 w-16 h-16 rounded-xl flex items-center justify-center mb-6 mx-auto"> | |
| <i class="fas fa-globe text-yellow-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center text-gray-800 mb-4">Language Support</h3> | |
| <p class="text-gray-600 text-center"> | |
| Translate text, explain grammar, or help with language learning in multiple languages. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="mb-20"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-12">What People Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg border-t-4 border-indigo-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Sarah K.</h4> | |
| <p class="text-gray-500 text-sm">Web Developer</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "This AI has saved me countless hours debugging code. It explains concepts clearly and suggests solutions I wouldn't have thought of." | |
| </p> | |
| <div class="flex mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg border-t-4 border-indigo-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Michael T.</h4> | |
| <p class="text-gray-500 text-sm">Student</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "As a student, this has been invaluable for understanding complex topics. It breaks things down in ways that make sense to me." | |
| </p> | |
| <div class="flex mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg border-t-4 border-indigo-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Lisa M.</h4> | |
| <p class="text-gray-500 text-sm">Content Creator</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "I use this daily for content ideas and drafts. It's like having a creative partner who's always available with fresh perspectives." | |
| </p> | |
| <div class="flex mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="gradient-bg text-white rounded-3xl shadow-2xl p-12 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Experience AI Assistance?</h2> | |
| <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto"> | |
| Start your journey with an intelligent assistant that's available anytime, anywhere. | |
| </p> | |
| <button id="startNowBtn" class="bg-white text-indigo-600 px-10 py-4 rounded-full font-bold text-lg hover:bg-indigo-50 transition-all duration-300 transform hover:scale-105 shadow-xl"> | |
| Start Now <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <span class="text-xl font-bold">AI Assistant</span> | |
| </div> | |
| <p class="text-gray-400 mt-2">Your intelligent partner for all tasks</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 AI Assistant. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Simple Chat Modal --> | |
| <div id="chatModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-2xl w-full max-w-md mx-4 overflow-hidden"> | |
| <div class="bg-indigo-600 text-white p-4 flex justify-between items-center"> | |
| <h3 class="font-bold text-lg">AI Assistant</h3> | |
| <button id="closeChatBtn" class="text-white hover:text-indigo-200"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 h-64 overflow-y-auto bg-gray-50"> | |
| <div class="flex mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs"> | |
| <p>Hello! How can I help you today?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex"> | |
| <input type="text" placeholder="Type your message..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700 transition-colors"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Show chat button when "Try Me" is clicked | |
| document.getElementById('tryMeBtn').addEventListener('click', function() { | |
| document.getElementById('chatBtn').classList.remove('hidden'); | |
| document.getElementById('chatModal').classList.remove('hidden'); | |
| }); | |
| // Show chat modal when chat button is clicked | |
| document.getElementById('chatBtn').addEventListener('click', function() { | |
| document.getElementById('chatModal').classList.remove('hidden'); | |
| }); | |
| // Close chat modal | |
| document.getElementById('closeChatBtn').addEventListener('click', function() { | |
| document.getElementById('chatModal').classList.add('hidden'); | |
| }); | |
| // Start Now button also shows chat | |
| document.getElementById('startNowBtn').addEventListener('click', function() { | |
| document.getElementById('chatBtn').classList.remove('hidden'); | |
| document.getElementById('chatModal').classList.remove('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| document.getElementById('chatModal').addEventListener('click', function(e) { | |
| if (e.target === this) { | |
| this.classList.add('hidden'); | |
| } | |
| }); | |
| </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=MansoorSarookh/firstexperience" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |