| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Integrations | VAI</title> |
| <link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/42"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| .glass-panel { |
| backdrop-filter: blur(16px); |
| background: rgba(16, 21, 27, 0.7); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| } |
| |
| .integration-card { |
| transition: all 0.3s ease; |
| } |
| |
| .integration-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px -5px rgba(63, 242, 140, 0.1); |
| } |
| |
| .connected-badge { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { box-shadow: 0 0 0 0 rgba(63, 242, 140, 0.4); } |
| 70% { box-shadow: 0 0 0 10px rgba(63, 242, 140, 0); } |
| 100% { box-shadow: 0 0 0 0 rgba(63, 242, 140, 0); } |
| } |
| </style> |
| </head> |
| <body class="bg-dark-900 text-gray-200 font-sans min-h-screen overflow-x-hidden" id="vanta-bg"> |
| <script> |
| VANTA.GLOBE({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: "#3FF28C", |
| backgroundColor: "#10151B", |
| size: 0.8 |
| }) |
| </script> |
|
|
| <div class="container mx-auto px-4 py-8 max-w-7xl"> |
| |
| <header class="flex justify-between items-center mb-12"> |
| <div class="flex items-center space-x-2"> |
| <img src="https://static.photos/technology/200x200/42" alt="VAI Logo" class="w-10 h-10 rounded-lg"> |
| <h1 class="text-2xl font-bold text-primary-500">VAI</h1> |
| </div> |
| |
| <nav class="hidden md:flex space-x-6"> |
| <a href="index.html" class="hover:text-primary-500 transition">Home</a> |
| <a href="dashboard.html" class="hover:text-primary-500 transition">Dashboard</a> |
| <a href="agents.html" class="hover:text-primary-500 transition">Agents</a> |
| <a href="integrations.html" class="text-primary-500 hover:text-primary-400 transition">Integrations</a> |
| </nav> |
| |
| <div class="flex items-center space-x-4"> |
| <button class="p-2 rounded-full bg-dark-800 hover:bg-dark-700 transition"> |
| <i data-feather="settings"></i> |
| </button> |
| <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition"> |
| <i data-feather="plus" class="mr-2"></i> New Agent |
| </button> |
| </div> |
| </header> |
|
|
| |
| <section class="mb-8"> |
| <div class="flex justify-between items-center mb-8"> |
| <div> |
| <h2 class="text-3xl font-bold mb-2">Connected Services</h2> |
| <p class="text-gray-400">Connect your favorite tools to automate workflows</p> |
| </div> |
| <div class="relative"> |
| <input type="text" placeholder="Search integrations..." class="bg-dark-800 border border-gray-700 rounded-lg px-4 py-2 pl-10 focus:outline-none focus:ring-1 focus:ring-primary-500"> |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-500"></i> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-12"> |
| <h3 class="text-xl font-bold mb-6">Your Active Connections</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="integration-card glass-panel rounded-xl p-6 border border-green-400/20 hover:border-green-400/40 transition"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="flex items-center space-x-3"> |
| <img src="https://static.photos/technology/200x200/42" alt="GPT" class="w-12 h-12 rounded-lg"> |
| <div> |
| <h3 class="font-bold">GPT-4</h3> |
| <span class="text-xs text-green-400 flex items-center"> |
| <span class="w-2 h-2 rounded-full bg-green-400 mr-1 connected-badge"></span> |
| Connected |
| </span> |
| </div> |
| </div> |
| <div class="dropdown relative"> |
| <button class="text-gray-400 hover:text-green-400"> |
| <i data-feather="more-vertical"></i> |
| </button> |
| </div> |
| </div> |
| <p class="text-sm text-gray-300 mb-4">AI model for text generation and analysis</p> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>API calls: 142 today</span> |
| <span>Last used: 2 min ago</span> |
| </div> |
| </div> |
|
|
| |
| <div class="integration-card glass-panel rounded-xl p-6 border border-blue-400/20 hover:border-blue-400/40 transition"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="flex items-center space-x-3"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Gmail_icon_%282020%29.svg" alt="Gmail" class="w-12 h-12 rounded-lg"> |
| <div> |
| <h3 class="font-bold">Gmail</h3> |
| <span class="text-xs text-blue-400 flex items-center"> |
| <span class="w-2 h-2 rounded-full bg-blue-400 mr-1 connected-badge"></span> |
| Connected |
| </span> |
| </div> |
| </div> |
| <div class="dropdown relative"> |
| <button class="text-gray-400 hover:text-blue-400"> |
| <i data-feather="more-vertical"></i> |
| </button> |
| </div> |
| </div> |
| <p class="text-sm text-gray-300 mb-4">Email processing and automation</p> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>Processed: 24 emails</span> |
| <span>Last sync: 5 min ago</span> |
| </div> |
| </div> |
|
|
| |
| <div class="integration-card glass-panel rounded-xl p-6 border border-purple-500/20 hover:border-purple-500/40 transition"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="flex items-center space-x-3"> |
| <img src="https://static.photos/technology/200x200/43" alt="Rube.app" class="w-12 h-12 rounded-lg"> |
| <div> |
| <h3 class="font-bold">Rube.app</h3> |
| <span class="text-xs text-purple-500 flex items-center"> |
| <span class="w-2 h-2 rounded-full bg-purple-500 mr-1 connected-badge"></span> |
| Connected |
| </span> |
| </div> |
| </div> |
| <div class="dropdown relative"> |
| <button class="text-gray-400 hover:text-purple-500"> |
| <i data-feather="more-vertical"></i> |
| </button> |
| </div> |
| </div> |
| <p class="text-sm text-gray-300 mb-4">Workflow automation platform</p> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>Workflows: 3 active</span> |
| <span>Last run: 1 hour ago</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <h3 class="text-xl font-bold mb-6">Available Integrations</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| |
| <div class="integration-card glass-panel rounded-xl p-6 border border-gray-700 hover:border-primary-500/30 transition"> |
| <div class="flex justify-between items-start mb-4"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Slack_icon_2019.svg" alt="Slack" class="w-12 h-12 rounded-lg"> |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded">Popular</span> |
| </div> |
| <h3 class="font-bold mb-2">Slack</h3> |
| <p class="text-sm text-gray-300 mb-4">Team communication and notifications</p> |
| <button class="w-full px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition"> |
| Connect |
| </button> |
| </div> |
|
|
| |
| <div class="integration-card glass-panel rounded-xl p-6 border border-gray-700 hover:border-primary-500/30 transition"> |
| <div class="flex justify-between items-start mb-4"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Notion_app_logo.png" alt="Notion" class="w-12 h-12 rounded-lg"> |
| </div> |
| <h3 class="font-bold mb-2">Notion</h3> |
| <p class="text-sm text-gray-300 mb-4">Knowledge management and databases</p> |
| <button class="w-full px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition"> |
| Connect |
| </button> |
| </div> |
|
|
| |
| <div class="integration-card glass-panel rounded-xl p-6 border border-gray-700 hover:border-primary-500/30 transition"> |
| <div class="flex justify-between items-start mb-4"> |
| <img src="https://static.photos/technology/200x200/44" alt="Zapier" class="w-12 h-12 rounded-lg"> |
| </div> |
| <h3 class="font-bold mb-2">Zapier</h3> |
| <p class="text-sm text-gray-300 mb-4">Connect with 5000+ apps</p> |
| <button class="w-full px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition"> |
| Connect |
| </button> |
| </div> |
|
|
| |
| <div class="integration-card glass-panel rounded-xl p-6 border border-gray-700 hover:border-primary-500/30 transition"> |
| <div class="flex justify-between items-start mb-4"> |
| <img src="https://static.photos/technology/200x200/45" alt="Make" class="w-12 h-12 rounded-lg"> |
| </div> |
| <h3 class="font-bold mb-2">Make</h3> |
| <p class="text-sm text-gray-300 mb-4">Advanced automation scenarios</p> |
| <button class="w-full px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition"> |
| Connect |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="glass-panel rounded-2xl p-8 mb-8"> |
| <h3 class="text-2xl font-bold mb-4">Custom API Integration</h3> |
| <p class="text-gray-400 mb-6">Connect to any service with a REST API</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <h4 class="font-medium mb-3">API Configuration</h4> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm text-gray-400 mb-1">API Name</label> |
| <input type="text" class="w-full bg-dark-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-primary-500" placeholder="My Custom API"> |
| </div> |
| <div> |
| <label class="block text-sm text-gray-400 mb-1">Base URL</label> |
| <input type="text" class="w-full bg-dark-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-primary-500" placeholder="https://api.example.com/v1"> |
| </div> |
| <div> |
| <label class="block text-sm text-gray-400 mb-1">Authentication</label> |
| <select class="w-full bg-dark-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-primary-500"> |
| <option>API Key</option> |
| <option>OAuth 2.0</option> |
| <option>Bearer Token</option> |
| <option>Basic Auth</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="font-medium mb-3">API Key</h4> |
| <div class="bg-dark-800 rounded-lg p-4 border border-gray-700 mb-4"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="text-sm text-gray-400">Key</span> |
| <button class="text-xs text-primary-500 hover:text-primary-400"> |
| <i data-feather="eye" class="w-3 h-3 mr-1"></i> Show |
| </button> |
| </div> |
| <input type="password" value="sk_test_51MZ..." class="w-full bg-transparent border-none focus:outline-none font-mono text-sm"> |
| </div> |
| |
| <div class="flex space-x-4"> |
| <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition"> |
| Test Connection |
| </button> |
| <button class="px-4 py-2 border border-gray-700 hover:bg-dark-800 rounded-lg transition"> |
| Save Configuration |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="border-t border-gray-800 pt-8 pb-12"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 VAI. All rights reserved.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-500 hover:text-primary-500 transition"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="text-gray-500 hover:text-primary-500 transition"> |
| <i data-feather="linkedin"></i> |
| </a> |
| <a href="#" class="text-gray-500 hover:text-primary-500 transition"> |
| <i data-feather="github"></i> |
| </a> |
| </div> |
| </div> |
| </footer> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| document.querySelectorAll('.integration-card button').forEach(button => { |
| button.addEventListener('click', function() { |
| const card = this.closest('.integration-card'); |
| const serviceName = card.querySelector('h3').textContent; |
| |
| |
| alert(`Connecting to ${serviceName}... This would initiate OAuth or show API key input.`); |
| |
| |
| setTimeout(() => { |
| const statusBadge = card.querySelector('.text-xs'); |
| statusBadge.innerHTML = '<span class="w-2 h-2 rounded-full bg-green-400 mr-1 connected-badge"></span> Connected'; |
| statusBadge.className = 'text-xs text-green-400 flex items-center'; |
| |
| const connectButton = card.querySelector('button'); |
| if (connectButton) { |
| connectButton.textContent = 'Configure'; |
| connectButton.className = 'w-full px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition'; |
| } |
| }, 1500); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
