| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NexusAI | Web3 AI Solutions</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: '#6d28d9', |
| secondary: '#8b5cf6', |
| dark: '#0f172a', |
| light: '#f8fafc', |
| accent: '#10b981' |
| }, |
| fontFamily: { |
| sans: ['Inter', 'sans-serif'], |
| mono: ['Space Mono', 'monospace'] |
| }, |
| animation: { |
| 'float': 'float 6s ease-in-out infinite', |
| 'pulse-slow': 'pulse 5s infinite', |
| 'gradient': 'gradient 8s ease infinite' |
| }, |
| keyframes: { |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-20px)' }, |
| }, |
| gradient: { |
| '0%, 100%': { 'background-position': '0% 50%' }, |
| '50%': { 'background-position': '100% 50%' }, |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #0f172a; |
| color: #f8fafc; |
| overflow-x: hidden; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(-45deg, #6d28d9, #8b5cf6, #10b981, #3b82f6); |
| background-size: 400% 400%; |
| animation: gradient 15s ease infinite; |
| } |
| |
| .glow { |
| box-shadow: 0 0 20px rgba(139, 92, 246, 0.5); |
| } |
| |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 20px 25px -5px rgba(139, 92, 246, 0.3), 0 10px 10px -5px rgba(139, 92, 246, 0.1); |
| } |
| |
| .neon-text { |
| text-shadow: 0 0 5px rgba(139, 92, 246, 0.7); |
| } |
| |
| .particles { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <canvas id="particles" class="particles"></canvas> |
| |
| |
| <header class="fixed w-full z-50 bg-dark/80 backdrop-blur-md border-b border-gray-800"> |
| <nav 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 flex items-center"> |
| <i class="fas fa-robot text-secondary text-2xl mr-2"></i> |
| <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-secondary to-accent">NexusAI</span> |
| </div> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-10 flex items-baseline space-x-8"> |
| <a href="#home" class="text-light hover:text-secondary px-3 py-2 rounded-md text-sm font-medium transition">Home</a> |
| <a href="#services" class="text-light hover:text-secondary px-3 py-2 rounded-md text-sm font-medium transition">Services</a> |
| <a href="#about" class="text-light hover:text-secondary px-3 py-2 rounded-md text-sm font-medium transition">About</a> |
| <a href="#token" class="text-light hover:text-secondary px-3 py-2 rounded-md text-sm font-medium transition">Token</a> |
| <a href="#contact" class="text-light hover:text-secondary px-3 py-2 rounded-md text-sm font-medium transition">Contact</a> |
| </div> |
| </div> |
| <div class="hidden md:block"> |
| <button id="connectWallet" class="ml-4 px-4 py-2 bg-gradient-to-r from-secondary to-primary rounded-md text-sm font-medium text-white hover:opacity-90 transition"> |
| Connect Wallet |
| </button> |
| </div> |
| <div class="md:hidden"> |
| <button id="mobileMenuButton" class="text-light hover:text-secondary focus:outline-none"> |
| <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
| </svg> |
| </button> |
| </div> |
| </div> |
| </nav> |
| |
| |
| <div id="mobileMenu" class="hidden md:hidden bg-dark/95 backdrop-blur-lg"> |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
| <a href="#home" class="text-light hover:text-secondary block px-3 py-2 rounded-md text-base font-medium">Home</a> |
| <a href="#services" class="text-light hover:text-secondary block px-3 py-2 rounded-md text-base font-medium">Services</a> |
| <a href="#about" class="text-light hover:text-secondary block px-3 py-2 rounded-md text-base font-medium">About</a> |
| <a href="#token" class="text-light hover:text-secondary block px-3 py-2 rounded-md text-base font-medium">Token</a> |
| <a href="#contact" class="text-light hover:text-secondary block px-3 py-2 rounded-md text-base font-medium">Contact</a> |
| <button id="connectWalletMobile" class="w-full mt-2 px-4 py-2 bg-gradient-to-r from-secondary to-primary rounded-md text-base font-medium text-white hover:opacity-90 transition"> |
| Connect Wallet |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="home" class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight"> |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-secondary to-accent">AI-Powered</span><br> |
| <span class="neon-text">Web3 Solutions</span> |
| </h1> |
| <p class="text-lg text-gray-300 mb-8 max-w-lg"> |
| NexusAI combines cutting-edge artificial intelligence with blockchain technology to deliver decentralized, secure, and intelligent solutions for the future. |
| </p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button class="px-6 py-3 bg-gradient-to-r from-secondary to-primary rounded-md font-medium text-white hover:opacity-90 transition"> |
| Explore Services |
| </button> |
| <button class="px-6 py-3 border border-secondary rounded-md font-medium text-white hover:bg-secondary/20 transition"> |
| Whitepaper |
| </button> |
| </div> |
| <div class="mt-10 flex items-center space-x-6"> |
| <div class="flex items-center"> |
| <div class="flex -space-x-2"> |
| <img class="w-10 h-10 rounded-full border-2 border-dark" src="https://randomuser.me/api/portraits/women/1.jpg" alt=""> |
| <img class="w-10 h-10 rounded-full border-2 border-dark" src="https://randomuser.me/api/portraits/men/1.jpg" alt=""> |
| <img class="w-10 h-10 rounded-full border-2 border-dark" src="https://randomuser.me/api/portraits/women/2.jpg" alt=""> |
| </div> |
| <span class="ml-4 text-sm text-gray-300">Join 10,000+ AI pioneers</span> |
| </div> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative w-full max-w-md"> |
| <div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse-slow"></div> |
| <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-emerald-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse-slow"></div> |
| <div class="relative bg-dark/50 border border-gray-800 rounded-2xl p-6 backdrop-blur-md glow"> |
| <div class="flex items-center mb-4"> |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| <span class="ml-2 text-sm text-gray-400">AI Terminal</span> |
| </div> |
| <div class="font-mono text-sm text-gray-300 mb-4"> |
| <p class="text-emerald-400">$ Welcome to NexusAI Terminal</p> |
| <p class="text-emerald-400">$ Initializing AI protocols...</p> |
| <p class="text-emerald-400">> Connecting to Web3 network ✓</p> |
| <p class="text-emerald-400">> Loading smart contracts ✓</p> |
| <p class="text-emerald-400">> Syncing neural models ✓</p> |
| <p class="mt-2 text-white">System ready. Awaiting commands.</p> |
| </div> |
| <div class="flex"> |
| <input type="text" class="flex-1 bg-gray-900 border border-gray-700 rounded-l-md px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-secondary" placeholder="Ask the AI..."> |
| <button class="bg-secondary px-4 py-2 rounded-r-md text-white"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-dark/50 border-y border-gray-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <h2 class="text-center text-gray-400 mb-10 uppercase text-sm tracking-wider">Trusted by leading innovators</h2> |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-center"> |
| <div class="flex justify-center"> |
| <img src="https://via.placeholder.com/150x60/6d28d9/ffffff?text=Polygon" alt="Polygon" class="h-8 opacity-70 hover:opacity-100 transition"> |
| </div> |
| <div class="flex justify-center"> |
| <img src="https://via.placeholder.com/150x60/3b82f6/ffffff?text=Chainlink" alt="Chainlink" class="h-8 opacity-70 hover:opacity-100 transition"> |
| </div> |
| <div class="flex justify-center"> |
| <img src="https://via.placeholder.com/150x60/10b981/ffffff?text=Filecoin" alt="Filecoin" class="h-8 opacity-70 hover:opacity-100 transition"> |
| </div> |
| <div class="flex justify-center"> |
| <img src="https://via.placeholder.com/150x60/8b5cf6/ffffff?text=TheGraph" alt="The Graph" class="h-8 opacity-70 hover:opacity-100 transition"> |
| </div> |
| <div class="flex justify-center"> |
| <img src="https://via.placeholder.com/150x60/ec4899/ffffff?text=Arweave" alt="Arweave" class="h-8 opacity-70 hover:opacity-100 transition"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <span class="text-secondary font-mono text-sm uppercase tracking-wider">Services</span> |
| <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">AI Solutions for the Decentralized Future</h2> |
| <p class="text-gray-400 max-w-2xl mx-auto"> |
| We provide a comprehensive suite of AI services integrated with blockchain technology to power the next generation of decentralized applications. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-dark/50 border border-gray-800 rounded-xl p-8 card-hover"> |
| <div class="w-14 h-14 bg-secondary/10 rounded-lg flex items-center justify-center mb-6"> |
| <i class="fas fa-brain text-secondary text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Decentralized AI Models</h3> |
| <p class="text-gray-400 mb-4"> |
| Train and deploy AI models on the blockchain with our decentralized machine learning platform. |
| </p> |
| <ul class="space-y-2 text-gray-400"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>Fully verifiable model training</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>On-chain inference</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>Model ownership NFTs</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="bg-dark/50 border border-gray-800 rounded-xl p-8 card-hover"> |
| <div class="w-14 h-14 bg-secondary/10 rounded-lg flex items-center justify-center mb-6"> |
| <i class="fas fa-robot text-secondary text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">AI Agent Framework</h3> |
| <p class="text-gray-400 mb-4"> |
| Build autonomous AI agents that can interact with smart contracts and decentralized applications. |
| </p> |
| <ul class="space-y-2 text-gray-400"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>Multi-agent systems</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>On-chain decision making</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>Tokenized incentives</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="bg-dark/50 border border-gray-800 rounded-xl p-8 card-hover"> |
| <div class="w-14 h-14 bg-secondary/10 rounded-lg flex items-center justify-center mb-6"> |
| <i class="fas fa-shield-alt text-secondary text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">AI Security Audits</h3> |
| <p class="text-gray-400 mb-4"> |
| Protect your smart contracts and dApps with our AI-powered security analysis tools. |
| </p> |
| <ul class="space-y-2 text-gray-400"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>Vulnerability detection</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>Anomaly monitoring</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>Attack simulation</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="bg-dark/50 border border-gray-800 rounded-xl p-8 card-hover"> |
| <div class="w-14 h-14 bg-secondary/10 rounded-lg flex items-center justify-center mb-6"> |
| <i class="fas fa-chart-line text-secondary text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Predictive Analytics</h3> |
| <p class="text-gray-400 mb-4"> |
| Leverage blockchain data with our predictive models for DeFi, NFTs, and market trends. |
| </p> |
| <ul class="space-y-2 text-gray-400"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>Price forecasting</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>Risk assessment</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>On-chain pattern recognition</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="bg-dark/50 border border-gray-800 rounded-xl p-8 card-hover"> |
| <div class="w-14 h-14 bg-secondary/10 rounded-lg flex items-center justify-center mb-6"> |
| <i class="fas fa-language text-secondary text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Natural Language Processing</h3> |
| <p class="text-gray-400 mb-4"> |
| Integrate advanced NLP capabilities into your dApps for human-like interactions. |
| </p> |
| <ul class="space-y-2 text-gray-400"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>Smart contract documentation</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>Decentralized chatbots</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>Content moderation</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="bg-dark/50 border border-gray-800 rounded-xl p-8 card-hover"> |
| <div class="w-14 h-14 bg-secondary/10 rounded-lg flex items-center justify-center mb-6"> |
| <i class="fas fa-cubes text-secondary text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Custom AI Solutions</h3> |
| <p class="text-gray-400 mb-4"> |
| Tailored AI implementations for your specific Web3 project requirements. |
| </p> |
| <ul class="space-y-2 text-gray-400"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>Consulting services</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>Custom model development</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-secondary mr-2"></i> |
| <span>Integration support</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 bg-gradient-to-b from-dark to-gray-900"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex flex-col lg:flex-row items-center"> |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> |
| <span class="text-secondary font-mono text-sm uppercase tracking-wider">About Us</span> |
| <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">Pioneering the Convergence of AI and Web3</h2> |
| <p class="text-gray-400 mb-6"> |
| NexusAI was founded in 2022 with a vision to democratize artificial intelligence through blockchain technology. We believe in an open, decentralized future where AI models are transparent, verifiable, and accessible to all. |
| </p> |
| <div class="space-y-4"> |
| <div class="flex"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="flex items-center justify-center h-8 w-8 rounded-md bg-secondary/10 text-secondary"> |
| <i class="fas fa-bullseye"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Our Mission</h4> |
| <p class="text-gray-400 mt-1"> |
| To build the infrastructure for decentralized artificial intelligence that is secure, transparent, and aligned with user sovereignty. |
| </p> |
| </div> |
| </div> |
| <div class="flex"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="flex items-center justify-center h-8 w-8 rounded-md bg-secondary/10 text-secondary"> |
| <i class="fas fa-eye"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Our Vision</h4> |
| <p class="text-gray-400 mt-1"> |
| A world where AI models are community-owned, training data is fairly compensated, and intelligence is a public good. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="lg:w-1/2 relative"> |
| <div class="relative bg-dark/50 border border-gray-800 rounded-2xl p-6 glow"> |
| <div class="flex items-center mb-4"> |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| <span class="ml-2 text-sm text-gray-400">NexusAI Network Status</span> |
| </div> |
| <div class="grid grid-cols-2 gap-4 mb-6"> |
| <div class="bg-gray-900/50 rounded-lg p-4 border border-gray-800"> |
| <div class="text-gray-400 text-sm mb-1">Active Nodes</div> |
| <div class="text-2xl font-bold text-secondary">1,284</div> |
| <div class="text-green-500 text-xs mt-1">+12.4% this month</div> |
| </div> |
| <div class="bg-gray-900/50 rounded-lg p-4 border border-gray-800"> |
| <div class="text-gray-400 text-sm mb-1">Models Deployed</div> |
| <div class="text-2xl font-bold text-secondary">4,721</div> |
| <div class="text-green-500 text-xs mt-1">+28.7% this month</div> |
| </div> |
| <div class="bg-gray-900/50 rounded-lg p-4 border border-gray-800"> |
| <div class="text-gray-400 text-sm mb-1">Inference Tasks</div> |
| <div class="text-2xl font-bold text-secondary">2.1M</div> |
| <div class="text-green-500 text-xs mt-1">+42.3% this month</div> |
| </div> |
| <div class="bg-gray-900/50 rounded-lg p-4 border border-gray-800"> |
| <div class="text-gray-400 text-sm mb-1">Token Holders</div> |
| <div class="text-2xl font-bold text-secondary">18,492</div> |
| <div class="text-green-500 text-xs mt-1">+8.9% this month</div> |
| </div> |
| </div> |
| <div class="h-40 bg-gray-900 rounded-lg border border-gray-800 p-4"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="text-gray-400 text-sm">Network Activity</span> |
| <span class="text-secondary text-xs">Last 30 days</span> |
| </div> |
| <canvas id="networkChart" class="w-full h-full"></canvas> |
| </div> |
| </div> |
| <div class="absolute -z-10 top-10 left-10 w-64 h-64 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse-slow"></div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="token" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <span class="text-secondary font-mono text-sm uppercase tracking-wider">Tokenomics</span> |
| <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">The NEXUS Token</h2> |
| <p class="text-gray-400 max-w-2xl mx-auto"> |
| Powering the decentralized AI economy with our utility token that enables access, governance, and rewards within the NexusAI ecosystem. |
| </p> |
| </div> |
| |
| <div class="flex flex-col lg:flex-row gap-12 items-center"> |
| <div class="lg:w-1/2"> |
| <div class="bg-dark/50 border border-gray-800 rounded-xl p-8 glow"> |
| <div class="flex justify-between items-center mb-8"> |
| <div> |
| <div class="text-gray-400">NexusAI Token</div> |
| <div class="text-2xl font-bold">NEXUS</div> |
| </div> |
| <div class="bg-secondary/10 text-secondary px-4 py-2 rounded-full text-sm font-medium"> |
| ERC-20 |
| </div> |
| </div> |
| |
| <div class="space-y-6"> |
| <div> |
| <div class="flex justify-between text-gray-400 text-sm mb-2"> |
| <span>Total Supply</span> |
| <span>1,000,000,000 NEXUS</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-secondary h-2 rounded-full" style="width: 100%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between text-gray-400 text-sm mb-2"> |
| <span>Circulating Supply</span> |
| <span>320,450,000 NEXUS (32%)</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-secondary h-2 rounded-full" style="width: 32%"></div> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="bg-gray-900/50 rounded-lg p-4 border border-gray-800"> |
| <div class="text-gray-400 text-sm mb-1">Current Price</div> |
| <div class="text-xl font-bold">$0.42</div> |
| </div> |
| <div class="bg-gray-900/50 rounded-lg p-4 border border-gray-800"> |
| <div class="text-gray-400 text-sm mb-1">Market Cap</div> |
| <div class="text-xl font-bold">$134.5M</div> |
| </div> |
| </div> |
| |
| <div class="pt-4"> |
| <h4 class="text-lg font-medium mb-3">Token Allocation</h4> |
| <div class="space-y-3"> |
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span class="text-gray-400">Ecosystem Development</span> |
| <span class="text-gray-300">40%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 40%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span class="text-gray-400">Team & Advisors</span> |
| <span class="text-gray-300">20%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 20%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span class="text-gray-400">Community Rewards</span> |
| <span class="text-gray-300">15%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-emerald-500 h-2 rounded-full" style="width: 15%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span class="text-gray-400">Public Sale</span> |
| <span class="text-gray-300">10%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 10%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span class="text-gray-400">Private Sale</span> |
| <span class="text-gray-300">10%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-pink-500 h-2 rounded-full" style="width: 10%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span class="text-gray-400">Liquidity</span> |
| <span class="text-gray-300">5%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-cyan-500 h-2 rounded-full" style="width: 5%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <div class="space-y-8"> |
| <div> |
| <h3 class="text-2xl font-bold mb-4">Token Utility</h3> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="flex items-center justify-center h-8 w-8 rounded-md bg-secondary/10 text-secondary"> |
| <i class="fas fa-bolt"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Access to AI Services</h4> |
| <p class="text-gray-400 mt-1"> |
| Pay for AI model inference, training, and other services using NEXUS tokens. |
| </p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="flex items-center justify-center h-8 w-8 rounded-md bg-secondary/10 text-secondary"> |
| <i class="fas fa-vote-yea"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Governance</h4> |
| <p class="text-gray-400 mt-1"> |
| Stake tokens to participate in protocol governance and decision making. |
| </p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="flex items-center justify-center h-8 w-8 rounded-md bg-secondary/10 text-secondary"> |
| <i class="fas fa-coins"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Staking Rewards</h4> |
| <p class="text-gray-400 mt-1"> |
| Earn rewards by staking tokens to secure the network and provide liquidity. |
| </p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="flex items-center justify-center h-8 w-8 rounded-md bg-secondary/10 text-secondary"> |
| <i class="fas fa-percentage"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Fee Discounts</h4> |
| <p class="text-gray-400 mt-1"> |
| Receive discounts on platform fees when paying with NEXUS tokens. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-2xl font-bold mb-4">Available On</h3> |
| <div class="flex flex-wrap gap-3"> |
| <a href="#" class="px-4 py-2 bg-gray-900 rounded-lg border border-gray-800 flex items-center hover:bg-gray-800 transition"> |
| <img src="https://via.placeholder.com/40/6d28d9/ffffff?text=U" alt="Uniswap" class="w-6 h-6 mr-2"> |
| <span>Uniswap</span> |
| </a> |
| <a href="#" class="px-4 py-2 bg-gray-900 rounded-lg border border-gray-800 flex items-center hover:bg-gray-800 transition"> |
| <img src="https://via.placeholder.com/40/3b82f6/ffffff?text=S" alt="SushiSwap" class="w-6 h-6 mr-2"> |
| <span>SushiSwap</span> |
| </a> |
| <a href="#" class="px-4 py-2 bg-gray-900 rounded-lg border border-gray-800 flex items-center hover:bg-gray-800 transition"> |
| <img src="https://via.placeholder.com/40/10b981/ffffff?text=K" alt="KuCoin" class="w-6 h-6 mr-2"> |
| <span>KuCoin</span> |
| </a> |
| <a href="#" class="px-4 py-2 bg-gray-900 rounded-lg border border-gray-800 flex items-center hover:bg-gray-800 transition"> |
| <img src="https://via.placeholder.com/40/8b5cf6/ffffff?text=G" alt="Gate.io" class="w-6 h-6 mr-2"> |
| <span>Gate.io</span> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 gradient-bg"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Build the Future with Decentralized AI?</h2> |
| <p class="text-lg text-white/90 mb-8 max-w-3xl mx-auto"> |
| Join thousands of developers and businesses leveraging NexusAI's platform to create intelligent, transparent, and secure Web3 applications. |
| </p> |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button class="px-8 py-3 bg-white text-dark rounded-md font-bold hover:bg-gray-100 transition"> |
| Get Started for Free |
| </button> |
| <button class="px-8 py-3 border border-white text-white rounded-md font-bold hover:bg-white/10 transition"> |
| Contact Sales |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
| <div class="flex flex-col lg:flex-row gap-12"> |
| <div class="lg:w-1/2"> |
| <span class="text-secondary font-mono text-sm uppercase tracking-wider">Contact Us</span> |
| <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">Get In Touch</h2> |
| <p class="text-gray-400 mb-8 max-w-lg"> |
| Have questions about our services or want to discuss a potential project? Reach out to our team and we'll get back to you as soon as possible. |
| </p> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="flex items-center justify-center h-10 w-10 rounded-md bg-secondary/10 text-secondary"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Email</h4> |
| <a href="mailto:contact@nexusai.xyz" class="text-gray-400 hover:text-secondary transition">contact@nexusai.xyz</a> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="flex items-center justify-center h-10 w-10 rounded-md bg-secondary/10 text-secondary"> |
| <i class="fas fa-comment-dots"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Community</h4> |
| <div class="flex space-x-4 mt-2"> |
| <a href="#" class="text-gray-400 hover:text-secondary transition"> |
| <i class="fab fa-discord text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-secondary transition"> |
| <i class="fab fa-telegram text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-secondary transition"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-secondary transition"> |
| <i class="fab fa-github text-xl"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="flex items-center justify-center h-10 w-10 rounded-md bg-secondary/10 text-secondary"> |
| <i class="fas fa-map-marker-alt"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Office</h4> |
| <p class="text-gray-400">Decentralized · Global</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <div class="bg-dark/50 border border-gray-800 rounded-xl p-8"> |
| <h3 class="text-xl font-bold mb-6">Send Us a Message</h3> |
| <form> |
| <div class="space-y-6"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Name</label> |
| <input type="text" id="name" class="w-full bg-gray-900 border border-gray-800 rounded-md px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-secondary"> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label> |
| <input type="email" id="email" class="w-full bg-gray-900 border border-gray-800 rounded-md px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-secondary"> |
| </div> |
| <div> |
| <label for="subject" class="block text-sm font-medium text-gray-300 mb-1">Subject</label> |
| <select id="subject" class="w-full bg-gray-900 border border-gray-800 rounded-md px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-secondary"> |
| <option>General Inquiry</option> |
| <option>Technical Support</option> |
| <option>Business Partnership</option> |
| <option>Press/Media</option> |
| <option>Other</option> |
| </select> |
| </div> |
| <div> |
| <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Message</label> |
| <textarea id="message" rows="4" class="w-full bg-gray-900 border border-gray-800 rounded-md px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-secondary"></textarea> |
| </div> |
| <div> |
| <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-secondary to-primary rounded-md font-medium text-white hover:opacity-90 transition"> |
| Send Message |
| </button> |
| </div> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-dark/90 border-t border-gray-800 py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">NexusAI</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition">About</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition">Careers</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition">Blog</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition">Press</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Services</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition">AI Models</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition">AI Agents</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition">Security Audits</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition">Predictive Analytics</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Developers</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition">Documentation</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition">API Reference</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition">GitHub</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition">Forum</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Legal</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition">Privacy Policy</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition">Terms of Service</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition">Cookie Policy</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-secondary transition">Disclaimer</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <i class="fas fa-robot text-secondary text-xl mr-2"></i> |
| <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-secondary to-accent">NexusAI</span> |
| </div> |
| <div class="text-gray-400 text-sm"> |
| © 2023 NexusAI. All rights reserved. |
| </div> |
| <div class="flex space-x-6 mt-4 md:mt-0"> |
| <a href="#" class="text-gray-400 hover:text-secondary transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-secondary transition"> |
| <i class="fab fa-discord"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-secondary transition"> |
| <i class="fab fa-telegram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-secondary transition"> |
| <i class="fab fa-github"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-secondary transition"> |
| <i class="fab fa-medium"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="walletModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
| <div class="absolute inset-0 bg-gray-900/80 backdrop-blur-sm"></div> |
| </div> |
| |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
| |
| <div class="inline-block align-bottom bg-dark rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full border border-gray-800"> |
| <div class="px-6 py-4 border-b border-gray-800"> |
| <h3 class="text-lg font-medium text-center">Connect Wallet</h3> |
| </div> |
| <div class="px-6 py-6"> |
| <div class="space-y-4"> |
| <button id="metamaskBtn" class="w-full flex items-center justify-between px-6 py-4 bg-gray-900/50 border border-gray-800 rounded-lg hover:bg-gray-800 transition"> |
| <span>MetaMask</span> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg" alt="MetaMask" class="h-8"> |
| </button> |
| <button id="walletConnectBtn" class="w-full flex items-center justify-between px-6 py-4 bg-gray-900/50 border border-gray-800 rounded-lg hover:bg-gray-800 transition"> |
| <span>WalletConnect</span> |
| <img src="https://assets.website-files.com/5f3c19f18169b62a0d0bf387/60d33be7d5878f1b81a1be87_WalletConnect-Logotype-Blue.svg" alt="WalletConnect" class="h-6"> |
| </button> |
| <button id="coinbaseBtn" class="w-full flex items-center justify-between px-6 py-4 bg-gray-900/50 border border-gray-800 rounded-lg hover:bg-gray-800 transition"> |
| <span>Coinbase Wallet</span> |
| <img src="https://altcoinsbox.com/wp-content/uploads/2023/01/coinbase-wallet-logo.png" alt="Coinbase Wallet" class="h-6"> |
| </button> |
| </div> |
| <p class="text-gray-400 text-sm mt-6 text-center"> |
| By connecting a wallet, you agree to our <a href="#" class="text-secondary">Terms of Service</a> and <a href="#" class="text-secondary">Privacy Policy</a>. |
| </p> |
| </div> |
| <div class="px-6 py-4 border-t border-gray-800 flex justify-center"> |
| <button id="closeWalletModal" class="px-4 py-2 text-gray-400 hover:text-white transition"> |
| Close |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script> |
| |
| const mobileMenuButton = document.getElementById('mobileMenuButton'); |
| const mobileMenu = document.getElementById('mobileMenu'); |
| |
| mobileMenuButton.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| const connectWallet = document.getElementById('connectWallet'); |
| const connectWalletMobile = document.getElementById('connectWalletMobile'); |
| const walletModal = document.getElementById('walletModal'); |
| const closeWalletModal = document.getElementById('closeWalletModal'); |
| |
| function toggleWalletModal() { |
| walletModal.classList.toggle('hidden'); |
| } |
| |
| connectWallet.addEventListener('click', toggleWalletModal); |
| connectWalletMobile.addEventListener('click', toggleWalletModal); |
| closeWalletModal.addEventListener('click', toggleWalletModal); |
| |
| |
| const metamaskBtn = document.getElementById('metamaskBtn'); |
| const walletConnectBtn = document.getElementById('walletConnectBtn'); |
| const coinbaseBtn = document.getElementById('coinbaseBtn'); |
| |
| function connectWalletHandler(walletName) { |
| alert(`Connecting to ${walletName}...`); |
| |
| walletModal.classList.add('hidden'); |
| } |
| |
| metamaskBtn.addEventListener('click', () => connectWalletHandler('MetaMask')); |
| walletConnectBtn.addEventListener('click', () => connectWalletHandler('WalletConnect')); |
| coinbaseBtn.addEventListener('click', () => connectWalletHandler('Coinbase Wallet')); |
| |
| |
| const networkChartCtx = document.getElementById('networkChart').getContext('2d'); |
| const networkChart = new Chart(networkChartCtx, { |
| type: 'line', |
| data: { |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], |
| datasets: [{ |
| label: 'API Calls (thousands)', |
| data: [12, 19, 15, 27, 34, 42, 51, 68, 72, 85, 92, 107], |
| borderColor: '#8b5cf6', |
| backgroundColor: 'rgba(139, 92, 246, 0.1)', |
| borderWidth: 2, |
| fill: true, |
| tension: 0.4 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| display: false |
| } |
| }, |
| scales: { |
| x: { |
| grid: { |
| display: false, |
| drawBorder: false |
| }, |
| ticks: { |
| color: '#6b7280' |
| } |
| }, |
| y: { |
| grid: { |
| color: 'rgba(255, 255, 255, 0.05)', |
| drawBorder: false |
| }, |
| ticks: { |
| color: '#6b7280' |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const canvas = document.getElementById('particles'); |
| const ctx = canvas.getContext('2d'); |
| |
| canvas.width = window.innerWidth; |
| canvas.height = window.innerHeight; |
| |
| const particles = []; |
| const particleCount = window.innerWidth < 768 ? 30 : 60; |
| |
| for (let i = 0; i < particleCount; i++) { |
| particles.push({ |
| x: Math.random() * canvas.width, |
| y: Math.random() * canvas.height, |
| size: Math.random() * 3 + 1, |
| speedX: Math.random() * 1 - 0.5, |
| speedY: Math.random() * 1 - 0.5 |
| }); |
| } |
| |
| function animateParticles() { |
| ctx.clearRect(0, 0, canvas.width, canvas.height); |
| |
| for (let i = 0; i < particles.length; i++) { |
| const p = particles[i]; |
| |
| ctx.beginPath(); |
| ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); |
| ctx.fillStyle = 'rgba(139, 92, 246, 0.5)'; |
| ctx.fill(); |
| |
| p.x += p.speedX; |
| p.y += p.speedY; |
| |
| if (p.x > canvas.width || p.x < 0) p.speedX *= -1; |
| if (p.y > canvas.height || p.y < 0) p.speedY *= -1; |
| } |
| |
| requestAnimationFrame(animateParticles); |
| } |
| |
| animateParticles(); |
| |
| |
| window.addEventListener('resize', () => { |
| canvas.width = window.innerWidth; |
| canvas.height = window.innerHeight; |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| |
| |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.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=Sharvil9/1stshot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
