Spaces:
Running
Running
can you change the color into dark green brown like military uniform style with modern design but all is good only the color - Follow Up Deployment
dc649cd verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tactical Aggregation System</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: { | |
| tactical: { | |
| 50: '#f0f5f0', | |
| 100: '#e1ebe0', | |
| 200: '#c3d6c1', | |
| 300: '#a5c2a2', | |
| 400: '#87ae83', | |
| 500: '#698964', | |
| 600: '#556f50', | |
| 700: '#41543c', | |
| 800: '#2d3928', | |
| 900: '#191e14', | |
| }, | |
| digital: { | |
| 50: '#f0f7fa', | |
| 100: '#d4ebf1', | |
| 200: '#a9d7e3', | |
| 300: '#7ec3d5', | |
| 400: '#53afc7', | |
| 500: '#289bb9', | |
| 600: '#207c94', | |
| 700: '#185d6f', | |
| 800: '#103e4a', | |
| 900: '#081f25', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap'); | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background: linear-gradient(to bottom, #111418, #0c0f12); | |
| color: #E0E0E0; | |
| background-attachment: fixed; | |
| } | |
| h1, h2, h3, h4, .nav-link, .btn { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .camo-bg { | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(40, 55, 40, 0.2) 0%, transparent 15%), | |
| radial-gradient(circle at 90% 30%, rgba(30, 45, 35, 0.2) 0%, transparent 15%), | |
| radial-gradient(circle at 50% 80%, rgba(35, 50, 40, 0.2) 0%, transparent 15%); | |
| background-color: #0c1419; | |
| border: 1px solid rgba(64, 100, 86, 0.3); | |
| } | |
| .terminal-card { | |
| box-shadow: | |
| 0 0 15px rgba(0, 200, 150, 0.2), | |
| 0 0 30px rgba(0, 120, 150, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .terminal-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: | |
| 0 5px 20px rgba(0, 200, 150, 0.4), | |
| 0 0 40px rgba(0, 150, 200, 0.2); | |
| } | |
| .tech-border { | |
| border: 1px solid rgba(64, 180, 170, 0.4); | |
| } | |
| .command-box { | |
| background: rgba(15, 25, 30, 0.7); | |
| border: 1px solid rgba(64, 180, 170, 0.3); | |
| } | |
| .graph-container { | |
| background: linear-gradient(to bottom, #0b1217, #091016); | |
| border: 1px solid rgba(64, 180, 170, 0.2); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .ping { | |
| animation: ping 1.5s cubic-bezier(0,0,0.2,1) infinite; | |
| } | |
| @keyframes ping { | |
| 75%, 100% { | |
| transform: scale(1.5); | |
| opacity: 0; | |
| } | |
| } | |
| .map-grid { | |
| display: grid; | |
| grid-template-columns: repeat(6, 1fr); | |
| grid-template-rows: repeat(4, 1fr); | |
| grid-gap: 2px; | |
| height: 220px; | |
| } | |
| .grid-item { | |
| background: rgba(20, 40, 50, 0.5); | |
| border-radius: 2px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .active-grid { | |
| background: rgba(24, 165, 145, 0.4); | |
| box-shadow: 0 0 8px rgba(0, 200, 150, 0.3); | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 5px rgba(0, 200, 150, 0.3); | |
| } | |
| 50% { | |
| box-shadow: 0 0 15px rgba(0, 200, 150, 0.6); | |
| } | |
| 100% { | |
| box-shadow: 0 0 5px rgba(0, 200, 150, 0.3); | |
| } | |
| } | |
| .nav-link { | |
| position: relative; | |
| padding: 0.5rem 0; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background: linear-gradient(90deg, transparent, #00d2aa, transparent); | |
| transition: width 0.3s; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="camo-bg fixed w-full z-50 border-b border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-satellite text-digital-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold tracking-wide text-white">INTEGRATE.IO</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2">Dashboard</a> | |
| <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2">Modules</a> | |
| <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2">Networks</a> | |
| <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2">Analytics</a> | |
| <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2">Settings</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="md:hidden text-gray-400 hover:text-white"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <button class="ml-4 hidden md:inline-flex items-center px-4 py-2 border border-digital-600 rounded-md text-digital-300 hover:bg-digital-900 hover:text-white"> | |
| <i class="fas fa-user-shield mr-2"></i> | |
| Secure Access | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden camo-bg absolute top-16 left-0 w-full border-t border-gray-800 hidden" id="mobileMenu"> | |
| <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-white bg-digital-900">Dashboard</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-gray-300 hover:bg-digital-900 hover:text-white">Modules</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-gray-300 hover:bg-digital-900 hover:text-white">Networks</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-gray-300 hover:bg-digital-900 hover:text-white">Analytics</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-gray-300 hover:bg-digital-900 hover:text-white">Settings</a> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <div class="relative pt-24 pb-20 px-4 sm:px-6 lg:pt-32 lg:pb-28 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="relative"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-white"> | |
| <span class="block">Tactical</span> | |
| <span class="block bg-gradient-to-r from-digital-400 to-digital-500 bg-clip-text text-transparent"> | |
| Aggregation System | |
| </span> | |
| </h1> | |
| <p class="mt-6 max-w-lg mx-auto text-lg text-gray-400"> | |
| Unify your data streams with precision and reliability. | |
| The next-gen integration platform for mission-critical operations. | |
| </p> | |
| <div class="mt-10 max-w-md mx-auto sm:max-w-none sm:flex sm:justify-center"> | |
| <div class="rounded-md shadow"> | |
| <div class="command-box rounded-lg overflow-hidden flex items-center"> | |
| <div class="bg-digital-600 py-3 px-4"> | |
| <i class="fas fa-terminal text-white"></i> | |
| </div> | |
| <div class="py-3 px-4 font-mono text-gray-300 flex-grow overflow-x-auto"> | |
| $ git clone https://huggingface.co/spaces/Squadrongrit/aggregation-system | |
| </div> | |
| <button class="bg-digital-600 hover:bg-digital-500 py-3 px-4 transition duration-300"> | |
| <i class="fas fa-copy text-white"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="camo-bg rounded-2xl p-6 md:p-8 terminal-card"> | |
| <div class="flex flex-wrap -mx-4"> | |
| <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0"> | |
| <h3 class="text-2xl font-bold text-white flex items-center"> | |
| <i class="fas fa-project-diagram text-digital-400 mr-3"></i> | |
| Integrated Data Modules | |
| </h3> | |
| <p class="mt-3 text-gray-400"> | |
| Seamlessly integrate diverse data sources with our modular framework. | |
| Pre-configured adapters for all major platforms with real-time synchronization. | |
| </p> | |
| <div class="mt-8 space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-2 h-2 rounded-full bg-digital-500 mr-3 relative"> | |
| <div class="absolute inset-0 rounded-full bg-digital-500 ping"></div> | |
| </div> | |
| </div> | |
| <p class="text-gray-400"> | |
| Cross-platform compatibility with zero configuration overhead | |
| </p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-2 h-2 rounded-full bg-digital-500 mr-3 relative"> | |
| <div class="absolute inset-0 rounded-full bg-digital-500 ping"></div> | |
| </div> | |
| </div> | |
| <p class="text-gray-400"> | |
| Secure encrypted connections for all data transfers | |
| </p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-2 h-2 rounded-full bg-digital-500 mr-3 relative"> | |
| <div class="absolute inset-0 rounded-full bg-digital-500 ping"></div> | |
| </div> | |
| </div> | |
| <p class="text-gray-400"> | |
| Real-time monitoring and automatic failover capabilities | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-full lg:w-1/2 px-4"> | |
| <div class="graph-container p-4 h-full"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <h4 class="text-white text-lg font-semibold flex items-center"> | |
| <i class="fas fa-chart-network text-digital-400 mr-2"></i> | |
| System Activity Map | |
| </h4> | |
| <div class="text-green-500 text-sm mt-1 flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div> | |
| All systems operational | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-500"> | |
| Last updated: <span class="text-gray-300">12:45:23 UTC</span> | |
| </div> | |
| </div> | |
| <div class="map-grid"> | |
| <div class="grid-item active-grid"></div> | |
| <div class="grid-item"></div> | |
| <div class="grid-item active-grid"></div> | |
| <div class="grid-item"></div> | |
| <div class="grid-item active-grid"></div> | |
| <div class="grid-item"></div> | |
| <div class="grid-item"></div> | |
| <div class="grid-item active-grid"></div> | |
| <div class="grid-item"></div> | |
| <div class="grid-item active-grid"></div> | |
| <div class="grid-item"></div> | |
| <div class="grid-item"></div> | |
| <div class="grid-item active-grid"></div> | |
| <div class="grid-item"></div> | |
| <div class="grid-item active-grid"></div> | |
| <div class="grid-item"></div> | |
| <div class="grid-item"></div> | |
| <div class="grid-item active-grid"></div> | |
| <div class="grid-item"></div> | |
| <div class="grid-item"></div> | |
| <div class="grid-item"></div> | |
| <div class="grid-item active-grid"></div> | |
| <div class="grid-item active-grid"></div> | |
| <div class="grid-item"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-bold text-white"> | |
| <i class="fas fa-code text-digital-400 mr-2"></i> | |
| Integrated System Capabilities | |
| </h2> | |
| <p class="mt-4 max-w-2xl mx-auto text-lg text-gray-400"> | |
| Our aggregation platform provides all the tools you need for resilient, secure data operations | |
| </p> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="camo-bg rounded-2xl p-6 tech-border terminal-card"> | |
| <div class="w-12 h-12 rounded-md bg-digital-900 flex items-center justify-center text-digital-400 text-xl mb-5"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Secure Integration</h3> | |
| <p class="text-gray-400"> | |
| Built-in encryption protocols and zero-trust architecture ensure your data remains protected at every stage of integration. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="camo-bg rounded-2xl p-6 tech-border terminal-card"> | |
| <div class="w-12 h-12 rounded-md bg-digital-900 flex items-center justify-center text-digital-400 text-xl mb-5"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Real-time Processing</h3> | |
| <p class="text-gray-400"> | |
| High-velocity data streams processed with sub-millisecond latency for immediate insights when timing is critical. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="camo-bg rounded-2xl p-6 tech-border terminal-card"> | |
| <div class="w-12 h-12 rounded-md bg-digital-900 flex items-center justify-center text-digital-400 text-xl mb-5"> | |
| <i class="fas fa-expand-arrows-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Scalable Infrastructure</h3> | |
| <p class="text-gray-400"> | |
| Horizontally scalable architecture grows with your needs. Handle from small datasets to petabytes of information seamlessly. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="camo-bg rounded-2xl p-6 tech-border terminal-card"> | |
| <div class="w-12 h-12 rounded-md bg-digital-900 flex items-center justify-center text-digital-400 text-xl mb-5"> | |
| <i class="fas fa-network-wired"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Multi-source Connectivity</h3> | |
| <p class="text-gray-400"> | |
| Pre-configured connectors for databases, APIs, IoT devices, and legacy systems for unified access to all your data streams. | |
| </p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="camo-bg rounded-2xl p-6 tech-border terminal-card"> | |
| <div class="w-12 h-12 rounded-md bg-digital-900 flex items-center justify-center text-digital-400 text-xl mb-5"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Adaptive Intelligence</h3> | |
| <p class="text-gray-400"> | |
| Self-learning algorithms optimize data routing and throughput based on usage patterns and system conditions. | |
| </p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="camo-bg rounded-2xl p-6 tech-border terminal-card"> | |
| <div class="w-12 h-12 rounded-md bg-digital-900 flex items-center justify-center text-digital-400 text-xl mb-5"> | |
| <i class="fas fa-eye"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Comprehensive Monitoring</h3> | |
| <p class="text-gray-400"> | |
| Real-time health dashboards with detailed analytics, anomaly detection and automated alerting systems. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Deployment Section --> | |
| <div class="py-16 px-4 sm:px-6 lg:px-8 camo-bg"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-3xl font-bold text-white"> | |
| <i class="fas fa-upload text-digital-400 mr-3"></i> | |
| Rapid Deployment Options | |
| </h2> | |
| <p class="mt-4 max-w-2xl mx-auto text-lg text-gray-400"> | |
| Choose the integration method that works best with your existing infrastructure | |
| </p> | |
| </div> | |
| <div class="mt-16"> | |
| <div class="flex flex-col lg:flex-row lg:space-x-8"> | |
| <div class="flex-1 mb-10 lg:mb-0"> | |
| <div class="tech-border rounded-xl bg-gray-900/20 p-6"> | |
| <div class="flex justify-between mb-6"> | |
| <h3 class="text-xl font-bold text-white flex items-center"> | |
| <i class="fas fa-cloud text-digital-300 mr-2"></i> | |
| Cloud Deployment | |
| </h3> | |
| <span class="bg-digital-800 text-digital-300 text-xs px-3 py-1 rounded-full"> | |
| Popular | |
| </span> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1 mr-3 text-digital-400"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="text-gray-400"> | |
| Fully managed service with automatic scaling | |
| </p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1 mr-3 text-digital-400"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="text-gray-400"> | |
| Global edge network for low-latency access | |
| </p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1 mr-3 text-digital-400"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="text-gray-400"> | |
| 99.99% uptime SLA with 24/7 monitoring | |
| </p> | |
| </div> | |
| </div> | |
| <button class="mt-8 w-full bg-digital-700 hover:bg-digital-600 text-white py-3 px-4 rounded-lg transition duration-300"> | |
| Deploy Now | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="tech-border rounded-xl bg-gray-900/20 p-6"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold text-white flex items-center"> | |
| <i class="fas fa-server text-digital-300 mr-2"></i> | |
| On-Premises Deployment | |
| </h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1 mr-3 text-digital-400"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="text-gray-400"> | |
| Complete control over infrastructure and data | |
| </p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1 mr-3 text-digital-400"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="text-gray-400"> | |
| Air-gapped deployment capabilities | |
| </p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1 mr-3 text-digital-400"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="text-gray-400"> | |
| Customizable hardware configurations | |
| </p> | |
| </div> | |
| </div> | |
| <button class="mt-8 w-full bg-gray-800 hover:bg-gray-700 text-white py-3 px-4 rounded-lg transition duration-300"> | |
| Request Access | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 border-t border-gray-800 pt-12 pb-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-satellite text-digital-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold tracking-wide text-white">INTEGRATE.IO</span> | |
| </div> | |
| <p class="mt-4 text-gray-400"> | |
| Unified data aggregation platform for mission-critical applications. | |
| </p> | |
| <div class="mt-4 flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-digital-300"> | |
| <i class="fab fa-github fa-lg"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-digital-300"> | |
| <i class="fab fa-twitter fa-lg"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-digital-300"> | |
| <i class="fab fa-linkedin fa-lg"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Platform</h3> | |
| <ul class="mt-4 space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Core Systems</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Networks</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Modules</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Extensions</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Resources</h3> | |
| <ul class="mt-4 space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">API Reference</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Support Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Status</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Enterprise</h3> | |
| <ul class="mt-4 space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Solutions</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Industries</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Partners</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact Sales</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 text-sm text-gray-500 text-center"> | |
| © 2023 Integrate.IO. All rights reserved. Secure and reliable data aggregation systems. | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.querySelector('button[class*="md:hidden"]'); | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Terminal copy functionality | |
| const copyButton = document.querySelector('.command-box button'); | |
| copyButton.addEventListener('click', () => { | |
| const commandText = document.querySelector('.command-box .font-mono').textContent; | |
| navigator.clipboard.writeText(commandText); | |
| const originalHTML = copyButton.innerHTML; | |
| copyButton.innerHTML = '<i class="fas fa-check text-white"></i>'; | |
| setTimeout(() => { | |
| copyButton.innerHTML = originalHTML; | |
| }, 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=Squadrongrit/cd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |