Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Employee Suite - Integrations & Deployment</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, #6e8efb, #a777e3); | |
| } | |
| .integration-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .status-badge { | |
| transition: all 0.3s ease; | |
| } | |
| .not-responding { | |
| background-color: #fee2e2 ; | |
| color: #dc2626 ; | |
| border-left: 4px solid #dc2626; | |
| } | |
| .connection-test-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .connection-test-btn:hover { | |
| transform: scale(1.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-robot text-3xl"></i> | |
| <h1 class="text-2xl font-bold">AI Employee Suite</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-gray-200">Dashboard</a> | |
| <a href="#" class="hover:text-gray-200">Modules</a> | |
| <a href="#" class="font-bold border-b-2 border-white">Integrations</a> | |
| <a href="#" class="hover:text-gray-200">Settings</a> | |
| </nav> | |
| <button class="md:hidden text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Status Alert --> | |
| <div id="statusAlert" class="hidden bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6 rounded-r"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-triangle text-yellow-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-yellow-700"> | |
| <span class="font-semibold">Connection Issues Detected</span> Some AI modules are not responding properly. | |
| <button id="refreshAllBtn" class="ml-2 text-yellow-700 underline font-medium">Refresh All Connections</button> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Integrations Section --> | |
| <section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="gradient-bg p-6 text-white"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h2 class="text-2xl font-bold">AI Module Integrations</h2> | |
| <p class="opacity-90">Connect with your favorite tools and services</p> | |
| </div> | |
| <button id="testAllConnections" class="bg-white text-purple-600 hover:bg-purple-50 px-4 py-2 rounded-lg font-medium flex items-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> Test All Connections | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Integration Table --> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">AI Module</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Integration Tools</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Response Time</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="integrationTableBody"> | |
| <!-- Voice AI --> | |
| <tr id="voiceAI" class="integration-row"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-phone-volume text-blue-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Voice AI</div> | |
| <div class="text-xs text-gray-500">Call handling, voicemail</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">Twilio</span> | |
| <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs font-medium">Plivo</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-check-circle mr-1"></i> Connected | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="text-sm text-gray-700">320ms</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="connection-test-btn bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1 rounded text-xs font-medium mr-2"> | |
| <i class="fas fa-bolt mr-1"></i> Test | |
| </button> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button> | |
| <button class="text-gray-600 hover:text-gray-900">Disconnect</button> | |
| </td> | |
| </tr> | |
| <!-- Conversation AI --> | |
| <tr id="conversationAI" class="integration-row not-responding"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-comments text-purple-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Conversation AI</div> | |
| <div class="text-xs text-gray-500">Website/live chat</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium">Lovable.dev</span> | |
| <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs font-medium">Dialogflow</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 pulse"> | |
| <i class="fas fa-exclamation-triangle mr-1"></i> Not Responding | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="text-sm text-gray-700">Timeout</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="connection-test-btn bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1 rounded text-xs font-medium mr-2"> | |
| <i class="fas fa-bolt mr-1"></i> Test | |
| </button> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button> | |
| <button class="text-gray-600 hover:text-gray-900">Disconnect</button> | |
| </td> | |
| </tr> | |
| <!-- Reviews AI --> | |
| <tr id="reviewsAI" class="integration-row"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-star text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Reviews AI</div> | |
| <div class="text-xs text-gray-500">Review generation</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs font-medium">Google API</span> | |
| <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs font-medium">Yelp API</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-check-circle mr-1"></i> Connected | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="text-sm text-gray-700">420ms</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="connection-test-btn bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1 rounded text-xs font-medium mr-2"> | |
| <i class="fas fa-bolt mr-1"></i> Test | |
| </button> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button> | |
| <button class="text-gray-600 hover:text-gray-900">Disconnect</button> | |
| </td> | |
| </tr> | |
| <!-- Funnel AI --> | |
| <tr id="funnelAI" class="integration-row not-responding"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-funnel-dollar text-yellow-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Funnel AI</div> | |
| <div class="text-xs text-gray-500">Landing page automation</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">GoHighLevel</span> | |
| <span class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-xs font-medium">WordPress</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 pulse"> | |
| <i class="fas fa-exclamation-triangle mr-1"></i> Not Responding | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="text-sm text-gray-700">Timeout</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="connection-test-btn bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1 rounded text-xs font-medium mr-2"> | |
| <i class="fas fa-bolt mr-1"></i> Test | |
| </button> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button> | |
| <button class="text-gray-600 hover:text-gray-900">Disconnect</button> | |
| </td> | |
| </tr> | |
| <!-- Content AI --> | |
| <tr id="contentAI" class="integration-row"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-pen-fancy text-indigo-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Content AI</div> | |
| <div class="text-xs text-gray-500">Blog/social media</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium">OpenAI GPT</span> | |
| <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs font-medium">Jasper</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-check-circle mr-1"></i> Connected | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="text-sm text-gray-700">580ms</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="connection-test-btn bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1 rounded text-xs font-medium mr-2"> | |
| <i class="fas fa-bolt mr-1"></i> Test | |
| </button> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button> | |
| <button class="text-gray-600 hover:text-gray-900">Disconnect</button> | |
| </td> | |
| </tr> | |
| <!-- Workflow AI --> | |
| <tr id="workflowAI" class="integration-row"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-red-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-tasks text-red-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Workflow AI</div> | |
| <div class="text-xs text-gray-500">CRM/email automation</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">Zapier</span> | |
| <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs font-medium">Make</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-check-circle mr-1"></i> Connected | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="text-sm text-gray-700">210ms</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="connection-test-btn bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1 rounded text-xs font-medium mr-2"> | |
| <i class="fas fa-bolt mr-1"></i> Test | |
| </button> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button> | |
| <button class="text-gray-600 hover:text-gray-900">Disconnect</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Connection Troubleshooting --> | |
| <div class="mt-8 bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center"> | |
| <i class="fas fa-tools text-yellow-500 mr-2"></i> Connection Troubleshooting | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Common Issues</h4> | |
| <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1"> | |
| <li>API key expired</li> | |
| <li>Service rate limits</li> | |
| <li>Network connectivity</li> | |
| <li>Incorrect configuration</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Quick Fixes</h4> | |
| <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1"> | |
| <li>Refresh API tokens</li> | |
| <li>Check service status</li> | |
| <li>Verify network settings</li> | |
| <li>Review documentation</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Need Help?</h4> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg font-medium w-full mb-2"> | |
| <i class="fas fa-question-circle mr-2"></i> Support Center | |
| </button> | |
| <button class="bg-white border border-purple-600 text-purple-600 hover:bg-purple-50 py-2 px-4 rounded-lg font-medium w-full"> | |
| <i class="fas fa-book mr-2"></i> Documentation | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t mt-12"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> | |
| <i class="fas fa-robot text-purple-600"></i> | |
| <span class="font-medium">AI Employee Suite</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-600 hover:text-gray-900">Privacy</a> | |
| <a href="#" class="text-gray-600 hover:text-gray-900">Terms</a> | |
| <a href="#" class="text-gray-600 hover:text-gray-900">Docs</a> | |
| <a href="#" class="text-gray-600 hover:text-gray-900">Support</a> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-center md:text-left text-sm text-gray-500"> | |
| © 2023 AI Employee Suite. All rights reserved. | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Show status alert if any modules are not responding | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const notRespondingModules = document.querySelectorAll('.not-responding'); | |
| if (notRespondingModules.length > 0) { | |
| document.getElementById('statusAlert').classList.remove('hidden'); | |
| } | |
| }); | |
| // Test connection for individual module | |
| document.querySelectorAll('.connection-test-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const row = this.closest('.integration-row'); | |
| const statusBadge = row.querySelector('.status-badge'); | |
| const responseTime = row.querySelector('td:nth-child(4) span'); | |
| // Show testing state | |
| statusBadge.innerHTML = '<i class="fas fa-sync-alt fa-spin mr-1"></i> Testing...'; | |
| statusBadge.className = 'status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800'; | |
| // Simulate API test | |
| setTimeout(() => { | |
| if (row.classList.contains('not-responding')) { | |
| // 30% chance to fix the connection | |
| if (Math.random() < 0.3) { | |
| row.classList.remove('not-responding'); | |
| statusBadge.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Connected'; | |
| statusBadge.className = 'status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800'; | |
| responseTime.textContent = (Math.floor(Math.random() * 500) + 100) + 'ms'; | |
| // Update status alert if all fixed | |
| if (document.querySelectorAll('.not-responding').length === 0) { | |
| document.getElementById('statusAlert').classList.add('hidden'); | |
| } | |
| } else { | |
| statusBadge.innerHTML = '<i class="fas fa-exclamation-triangle mr-1"></i> Not Responding'; | |
| statusBadge.className = 'status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 pulse'; | |
| responseTime.textContent = 'Timeout'; | |
| } | |
| } else { | |
| // For working connections, just update response time | |
| statusBadge.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Connected'; | |
| statusBadge.className = 'status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800'; | |
| responseTime.textContent = (Math.floor(Math.random() * 500) + 100) + 'ms'; | |
| } | |
| }, 1000); | |
| }); | |
| }); | |
| // Test all connections | |
| document.getElementById('testAllConnections').addEventListener('click', function() { | |
| const btn = this; | |
| const originalText = btn.innerHTML; | |
| // Show loading state | |
| btn.innerHTML = '<i class="fas fa-sync-alt fa-spin mr-2"></i> Testing All...'; | |
| btn.disabled = true; | |
| // Test each connection | |
| const testButtons = document.querySelectorAll('.connection-test-btn'); | |
| let testsCompleted = 0; | |
| testButtons.forEach(testBtn => { | |
| testBtn.click(); | |
| testsCompleted++; | |
| if (testsCompleted === testButtons.length) { | |
| setTimeout(() => { | |
| btn.innerHTML = originalText; | |
| btn.disabled = false; | |
| // Check if any modules are still not responding | |
| const notRespondingModules = document.querySelectorAll('.not-responding'); | |
| if (notRespondingModules.length > 0) { | |
| document.getElementById('statusAlert').classList.remove('hidden'); | |
| } else { | |
| document.getElementById('statusAlert').classList.add('hidden'); | |
| } | |
| }, 1500); | |
| } | |
| }); | |
| }); | |
| // Refresh all connections | |
| document.getElementById('refreshAllBtn').addEventListener('click', function() { | |
| const notRespondingModules = document.querySelectorAll('.not-responding'); | |
| notRespondingModules.forEach(module => { | |
| const statusBadge = module.querySelector('.status-badge'); | |
| const responseTime = module.querySelector('td:nth-child(4) span'); | |
| // Show refreshing state | |
| statusBadge.innerHTML = '<i class="fas fa-sync-alt fa-spin mr-1"></i> Refreshing...'; | |
| statusBadge.className = 'status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800'; | |
| // Simulate refresh with 70% success rate | |
| setTimeout(() => { | |
| if (Math.random() < 0.7) { | |
| module.classList.remove('not-responding'); | |
| statusBadge.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Connected'; | |
| statusBadge.className = 'status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800'; | |
| responseTime.textContent = (Math.floor(Math.random() * 500) + 100) + 'ms'; | |
| // Update status alert if all fixed | |
| if (document.querySelectorAll('.not-responding').length === 0) { | |
| document.getElementById('statusAlert').classList.add('hidden'); | |
| } | |
| } else { | |
| statusBadge.innerHTML = '<i class="fas fa-exclamation-triangle mr-1"></i> Not Responding'; | |
| statusBadge.className = 'status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 pulse'; | |
| responseTime.textContent = 'Timeout'; | |
| } | |
| }, 1500); | |
| }); | |
| }); | |
| </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=abdelhak66/customer-support" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |