| <!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 Powerful AI Tools</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: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| }, |
| dark: { |
| 900: '#0f172a', |
| 800: '#1e293b', |
| 700: '#334155', |
| 600: '#475569', |
| } |
| }, |
| animation: { |
| 'float': 'float 3s ease-in-out infinite', |
| 'fade-in': 'fadeIn 0.5s ease-in', |
| }, |
| keyframes: { |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-10px)' }, |
| }, |
| fadeIn: { |
| '0%': { opacity: '0' }, |
| '100%': { opacity: '1' }, |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #0f172a; |
| color: #e2e8f0; |
| scroll-behavior: smooth; |
| } |
| |
| .gradient-text { |
| background: linear-gradient(90deg, #8b5cf6, #3b82f6); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #8b5cf6, #3b82f6); |
| } |
| |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3); |
| } |
| |
| .parallax-bg { |
| background-attachment: fixed; |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: cover; |
| } |
| |
| .toggle-checkbox:checked { |
| right: 0; |
| border-color: #8b5cf6; |
| } |
| |
| .toggle-checkbox:checked + .toggle-label { |
| background-color: #8b5cf6; |
| } |
| |
| .chat-bubble { |
| border-radius: 1.25rem; |
| max-width: 80%; |
| } |
| |
| .user-bubble { |
| border-bottom-right-radius: 0.25rem; |
| background: linear-gradient(135deg, #8b5cf6, #3b82f6); |
| } |
| |
| .ai-bubble { |
| border-bottom-left-radius: 0.25rem; |
| background-color: #1e293b; |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: #1e293b; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: #8b5cf6; |
| border-radius: 4px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: #7c3aed; |
| } |
| |
| |
| @keyframes cardEntrance { |
| from { |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| .animate-card { |
| animation: cardEntrance 0.5s ease-out forwards; |
| } |
| |
| |
| .card-delay-1 { animation-delay: 0.1s; } |
| .card-delay-2 { animation-delay: 0.2s; } |
| .card-delay-3 { animation-delay: 0.3s; } |
| .card-delay-4 { animation-delay: 0.4s; } |
| .card-delay-5 { animation-delay: 0.5s; } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <nav class="bg-dark-900/80 backdrop-blur-md fixed w-full z-50 border-b border-dark-700"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <span class="text-2xl font-bold gradient-text">AI Nexus</span> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-10 flex items-baseline space-x-4"> |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-dark-700">Home</a> |
| <a href="#chat" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-dark-700">Chat</a> |
| <a href="#tools" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-dark-700">AI Tools</a> |
| <a href="#community" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-dark-700">Community</a> |
| </div> |
| </div> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-4 flex items-center md:ml-6"> |
| <button id="theme-toggle" class="p-2 rounded-full text-gray-400 hover:text-white focus:outline-none"> |
| <i class="fas fa-moon"></i> |
| </button> |
| <button id="language-toggle" class="ml-2 p-2 rounded-full text-gray-400 hover:text-white focus:outline-none"> |
| <i class="fas fa-globe"></i> EN |
| </button> |
| <button onclick="openLoginModal()" class="ml-4 px-4 py-2 rounded-md text-sm font-medium text-white gradient-bg hover:opacity-90 transition"> |
| <i class="fab fa-telegram mr-2"></i> Login with Telegram |
| </button> |
| </div> |
| </div> |
| <div class="-mr-2 flex md:hidden"> |
| <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-dark-700 focus:outline-none"> |
| <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> |
| </svg> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="mobile-menu" class="hidden md:hidden"> |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-dark-700">Home</a> |
| <a href="#chat" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-dark-700">Chat</a> |
| <a href="#tools" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-dark-700">AI Tools</a> |
| <a href="#community" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-dark-700">Community</a> |
| </div> |
| <div class="pt-4 pb-3 border-t border-dark-700"> |
| <div class="flex items-center px-5"> |
| <button id="mobile-theme-toggle" class="p-2 rounded-full text-gray-400 hover:text-white focus:outline-none"> |
| <i class="fas fa-moon"></i> |
| </button> |
| <button id="mobile-language-toggle" class="ml-2 p-2 rounded-full text-gray-400 hover:text-white focus:outline-none"> |
| <i class="fas fa-globe"></i> EN |
| </button> |
| </div> |
| <div class="mt-3 px-2 space-y-1"> |
| <button onclick="openLoginModal()" class="block w-full px-3 py-2 rounded-md text-base font-medium text-white gradient-bg hover:opacity-90 transition"> |
| <i class="fab fa-telegram mr-2"></i> Login with Telegram |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <header class="pt-24 pb-16 md:pt-32 md:pb-24 parallax-bg" style="background-image: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9)), url('https://images.unsplash.com/photo-1677442135136-760c813a743d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6"> |
| <span class="gradient-text">Discover</span> the Best AI Tools |
| </h1> |
| <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10"> |
| Explore our curated collection of cutting-edge AI tools to boost your productivity and creativity. |
| </p> |
| |
| |
| <div class="max-w-2xl mx-auto"> |
| <div class="relative"> |
| <input type="text" placeholder="Search AI tools..." class="w-full px-6 py-4 rounded-full bg-dark-800 border border-dark-700 focus:outline-none focus:ring-2 focus:ring-purple-500 text-white"> |
| <button class="absolute right-2 top-2 gradient-bg text-white px-6 py-2 rounded-full hover:opacity-90 transition"> |
| <i class="fas fa-search"></i> Search |
| </button> |
| </div> |
| <div class="flex items-center justify-between mt-4 px-2"> |
| <div class="flex items-center"> |
| <span class="text-sm text-gray-400 mr-2">Adult Mode:</span> |
| <div class="relative inline-block w-12 mr-4 align-middle select-none"> |
| <input type="checkbox" id="adult-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/> |
| <label for="adult-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label> |
| </div> |
| |
| <span class="text-sm text-gray-400 mr-2">Blur NSFW:</span> |
| <div class="relative inline-block w-12 align-middle select-none"> |
| <input type="checkbox" id="blur-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/> |
| <label for="blur-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label> |
| </div> |
| </div> |
| <div> |
| <button class="text-sm text-purple-400 hover:text-purple-300 flex items-center"> |
| <i class="fas fa-sliders-h mr-1"></i> Advanced Filters |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main> |
| |
| <section id="tools" class="py-16 bg-dark-900"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> |
| <span class="gradient-text">AI Tools</span> Collection |
| </h2> |
| <p class="text-lg text-gray-400 max-w-2xl mx-auto"> |
| Browse through hundreds of AI tools categorized for your convenience |
| </p> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <h3 class="text-lg font-medium text-gray-300 mb-3">Select Model:</h3> |
| <div class="flex flex-wrap gap-3"> |
| <button class="px-4 py-2 rounded-full bg-dark-800 text-gray-300 hover:bg-dark-700 hover:text-white transition active-model"> |
| GPT-4 |
| </button> |
| <button class="px-4 py-2 rounded-full bg-dark-800 text-gray-300 hover:bg-dark-700 hover:text-white transition"> |
| GPT-3.5 |
| </button> |
| <button class="px-4 py-2 rounded-full bg-dark-800 text-gray-300 hover:bg-dark-700 hover:text-white transition"> |
| LLaMA 2 |
| </button> |
| <button class="px-4 py-2 rounded-full bg-dark-800 text-gray-300 hover:bg-dark-700 hover:text-white transition"> |
| Claude 2 |
| </button> |
| <button class="px-4 py-2 rounded-full bg-dark-800 text-gray-300 hover:bg-dark-700 hover:text-white transition"> |
| PaLM 2 |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <h3 class="text-lg font-medium text-gray-300 mb-3">Filter By:</h3> |
| <div class="flex flex-wrap gap-3"> |
| <button class="px-4 py-2 rounded-full gradient-bg text-white hover:opacity-90 transition"> |
| <i class="fas fa-star mr-2"></i> Featured |
| </button> |
| <button class="px-4 py-2 rounded-full bg-dark-800 text-gray-300 hover:bg-dark-700 hover:text-white transition"> |
| <i class="fas fa-fire mr-2"></i> Popular |
| </button> |
| <button class="px-4 py-2 rounded-full bg-dark-800 text-gray-300 hover:bg-dark-700 hover:text-white transition"> |
| <i class="fas fa-bolt mr-2"></i> New |
| </button> |
| <button class="px-4 py-2 rounded-full bg-dark-800 text-gray-300 hover:bg-dark-700 hover:text-white transition"> |
| <i class="fas fa-users mr-2"></i> Trending |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <h3 class="text-lg font-medium text-gray-300 mb-3">Categories:</h3> |
| <div class="flex flex-wrap gap-3"> |
| <button class="px-4 py-2 rounded-full gradient-bg text-white hover:opacity-90 transition"> |
| All |
| </button> |
| <button class="px-4 py-2 rounded-full bg-dark-800 text-gray-300 hover:bg-dark-700 hover:text-white transition"> |
| <i class="fas fa-pen-fancy mr-2"></i> Writing |
| </button> |
| <button class="px-4 py-2 rounded-full bg-dark-800 text-gray-300 hover:bg-dark-700 hover:text-white transition"> |
| <i class="fas fa-paint-brush mr-2"></i> Art |
| </button> |
| <button class="px-4 py-2 rounded-full bg-dark-800 text-gray-300 hover:bg-dark-700 hover:text-white transition"> |
| <i class="fas fa-video mr-2"></i> Video |
| </button> |
| <button class="px-4 py-2 rounded-full bg-dark-800 text-gray-300 hover:bg-dark-700 hover:text-white transition"> |
| <i class="fas fa-music mr-2"></i> Audio |
| </button> |
| <button class="px-4 py-2 rounded-full bg-dark-800 text-gray-300 hover:bg-dark-700 hover:text-white transition"> |
| <i class="fas fa-code mr-2"></i> Coding |
| </button> |
| <button class="px-4 py-2 rounded-full bg-dark-800 text-gray-300 hover:bg-dark-700 hover:text-white transition"> |
| <i class="fas fa-robot mr-2"></i> Chatbots |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> |
| |
| <div class="bg-dark-800 rounded-xl overflow-hidden shadow-lg card-hover animate-card card-delay-1"> |
| <div class="p-5"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center text-white mr-4"> |
| <i class="fas fa-pen-fancy text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-white">AI Writer Pro</h3> |
| </div> |
| <p class="text-gray-400 mb-6">Advanced AI writing assistant for content creation, blogging, and copywriting.</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-purple-400"><i class="fas fa-bolt mr-1"></i> GPT-4</span> |
| <button class="px-4 py-2 rounded-lg gradient-bg text-white hover:opacity-90 transition text-sm"> |
| Try Now |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-dark-800 rounded-xl overflow-hidden shadow-lg card-hover animate-card card-delay-2"> |
| <div class="p-5"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center text-white mr-4"> |
| <i class="fas fa-paint-brush text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-white">ArtGen Studio</h3> |
| </div> |
| <p class="text-gray-400 mb-6">Create stunning digital art with AI-powered image generation and editing tools.</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-purple-400"><i class="fas fa-bolt mr-1"></i> Stable Diffusion</span> |
| <button class="px-4 py-2 rounded-lg gradient-bg text-white hover:opacity-90 transition text-sm"> |
| Try Now |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-dark-800 rounded-xl overflow-hidden shadow-lg card-hover animate-card card-delay-3"> |
| <div class="p-5"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center text-white mr-4"> |
| <i class="fas fa-video text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-white">VideoAI</h3> |
| </div> |
| <p class="text-gray-400 mb-6">Automated video editing, enhancement and generation powered by artificial intelligence.</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-purple-400"><i class="fas fa-bolt mr-1"></i> Custom Model</span> |
| <button class="px-4 py-2 rounded-lg gradient-bg text-white hover:opacity-90 transition text-sm"> |
| Try Now |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-dark-800 rounded-xl overflow-hidden shadow-lg card-hover animate-card card-delay-4"> |
| <div class="p-5"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center text-white mr-4"> |
| <i class="fas fa-robot text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-white">ChatMaster</h3> |
| </div> |
| <p class="text-gray-400 mb-6">Advanced conversational AI with customizable personalities and deep knowledge.</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-purple-400"><i class="fas fa-bolt mr-1"></i> GPT-4</span> |
| <button class="px-4 py-2 rounded-lg gradient-bg text-white hover:opacity-90 transition text-sm"> |
| Try Now |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-dark-800 rounded-xl overflow-hidden shadow-lg card-hover animate-card card-delay-5"> |
| <div class="p-5"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center text-white mr-4"> |
| <i class="fas fa-music text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-white">MelodyAI</h3> |
| </div> |
| <p class="text-gray-400 mb-6">Generate original music tracks and sound effects with AI composition tools.</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-purple-400"><i class="fas fa-bolt mr-1"></i> Jukebox</span> |
| <button class="px-4 py-2 rounded-lg gradient-bg text-white hover:opacity-90 transition text-sm"> |
| Try Now |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-dark-800 rounded-xl overflow-hidden shadow-lg card-hover animate-card"> |
| <div class="p-5"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center text-white mr-4"> |
| <i class="fas fa-code text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-white">CodePilot</h3> |
| </div> |
| <p class="text-gray-400 mb-6">AI pair programmer that helps you write better code faster with intelligent suggestions.</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-purple-400"><i class="fas fa-bolt mr-1"></i> Codex</span> |
| <button class="px-4 py-2 rounded-lg gradient-bg text-white hover:opacity-90 transition text-sm"> |
| Try Now |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-dark-800 rounded-xl overflow-hidden shadow-lg card-hover animate-card"> |
| <div class="p-5"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center text-white mr-4"> |
| <i class="fas fa-chart-line text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-white">DataSense</h3> |
| </div> |
| <p class="text-gray-400 mb-6">AI-powered data analysis and visualization tool for business intelligence.</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-purple-400"><i class="fas fa-bolt mr-1"></i> Custom Model</span> |
| <button class="px-4 py-2 rounded-lg gradient-bg text-white hover:opacity-90 transition text-sm"> |
| Try Now |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-dark-800 rounded-xl overflow-hidden shadow-lg card-hover animate-card"> |
| <div class="p-5"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center text-white mr-4"> |
| <i class="fas fa-language text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-white">TranslatePro</h3> |
| </div> |
| <p class="text-gray-400 mb-6">Advanced AI translation supporting 100+ languages with context-aware accuracy.</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-purple-400"><i class="fas fa-bolt mr-1"></i> NLLB</span> |
| <button class="px-4 py-2 rounded-lg gradient-bg text-white hover:opacity-90 transition text-sm"> |
| Try Now |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <button class="px-6 py-3 rounded-full gradient-bg text-white hover:opacity-90 transition font-medium"> |
| <i class="fas fa-plus mr-2"></i> Load More Tools |
| </button> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="chat" class="py-16 bg-dark-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> |
| <span class="gradient-text">AI Chat</span> Experience |
| </h2> |
| <p class="text-lg text-gray-400 max-w-2xl mx-auto"> |
| Interact with advanced AI characters and experience natural conversations |
| </p> |
| </div> |
| |
| <div class="flex flex-col lg:flex-row gap-8"> |
| |
| <div class="lg:w-1/4"> |
| <div class="bg-dark-700 rounded-xl p-6 sticky top-24"> |
| <h3 class="text-xl font-semibold text-white mb-4">AI Characters</h3> |
| <div class="space-y-3"> |
| |
| <div class="flex items-center p-3 rounded-lg bg-dark-800 hover:bg-dark-600 cursor-pointer transition selected-character"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Character" class="w-12 h-12 rounded-full object-cover mr-3"> |
| <div> |
| <h4 class="font-medium text-white">Dr. Sarah Chen</h4> |
| <p class="text-sm text-gray-400">Medical Researcher</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-center p-3 rounded-lg bg-dark-800 hover:bg-dark-600 cursor-pointer transition"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Character" class="w-12 h-12 rounded-full object-cover mr-3"> |
| <div> |
| <h4 class="font-medium text-white">Professor James Wilson</h4> |
| <p class="text-sm text-gray-400">History Expert</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-center p-3 rounded-lg bg-dark-800 hover:bg-dark-600 cursor-pointer transition"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Character" class="w-12 h-12 rounded-full object-cover mr-3"> |
| <div> |
| <h4 class="font-medium text-white">Emma, the Creative Writer</h4> |
| <p class="text-sm text-gray-400">Storytelling AI</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-center p-3 rounded-lg bg-dark-800 hover:bg-dark-600 cursor-pointer transition"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Character" class="w-12 h-12 rounded-full object-cover mr-3"> |
| <div> |
| <h4 class="font-medium text-white">CodeMaster Alex</h4> |
| <p class="text-sm text-gray-400">Programming Assistant</p> |
| </div> |
| </div> |
| |
| |
| <button class="w-full mt-4 p-3 rounded-lg border-2 border-dashed border-dark-600 hover:border-purple-500 text-gray-400 hover:text-purple-400 transition flex items-center justify-center"> |
| <i class="fas fa-plus mr-2"></i> Add Custom Character |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="lg:w-3/4"> |
| <div class="bg-dark-700 rounded-xl overflow-hidden"> |
| |
| <div class="bg-dark-800 p-4 border-b border-dark-600 flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Character" class="w-10 h-10 rounded-full object-cover mr-3"> |
| <div> |
| <h4 class="font-medium text-white">Dr. Sarah Chen</h4> |
| <p class="text-xs text-gray-400">Medical Researcher | GPT-4</p> |
| </div> |
| <div class="ml-auto flex space-x-2"> |
| <button class="p-2 rounded-full text-gray-400 hover:text-white hover:bg-dark-700 transition"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| <button class="p-2 rounded-full text-gray-400 hover:text-white hover:bg-dark-700 transition"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="h-96 overflow-y-auto p-4 space-y-4"> |
| |
| <div class="flex"> |
| <div class="flex-shrink-0 mr-3"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="AI" class="w-8 h-8 rounded-full object-cover"> |
| </div> |
| <div> |
| <div class="ai-bubble chat-bubble px-4 py-3"> |
| <p class="text-white">Hello! I'm Dr. Sarah Chen, a medical researcher specializing in neurology. How can I assist you today? Would you like to discuss recent medical advancements, health concerns, or something else?</p> |
| </div> |
| <div class="flex items-center mt-2 space-x-3 text-xs text-gray-500"> |
| <span>10:24 AM</span> |
| <button class="hover:text-purple-400 transition"> |
| <i class="fas fa-reply"></i> |
| </button> |
| <button class="hover:text-purple-400 transition"> |
| <i class=" |
| </html> |
