Spaces:
Running
Running
File size: 8,339 Bytes
d482bcf f65cca9 59c2b00 f65cca9 d482bcf | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visual Orchestrator | CodeWizard</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Fira Code', monospace;
color: white;
overflow-x: hidden;
}
.visual-card {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(16px);
border: 1px solid rgba(124, 58, 237, 0.3);
transition: all 0.3s ease;
}
.visual-card:hover {
border-color: rgba(124, 58, 237, 0.6);
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(124, 58, 237, 0.2);
}
.visual-pulse {
animation: pulse 4s infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7); }
50% { box-shadow: 0 0 0 20px rgba(124, 58, 237, 0); }
}
.pixel-btn {
font-family: 'Fira Code', monospace;
background: linear-gradient(135deg, #6e8efb, #a777e3);
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.pixel-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body id="visual-bg">
<!-- Navigation -->
<nav class="relative z-10 py-6 px-6 md:px-12 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="cpu" class="text-purple-400"></i>
<span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-500">CodeWizard</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="hover:text-purple-300 transition">Home</a>
<a href="quantum.html" class="hover:text-purple-300 transition">Quantum Lab</a>
<a href="hexa.html" class="hover:text-purple-300 transition">HEXA Modularizer</a>
<a href="game.html" class="hover:text-purple-300 transition">Game Lab</a>
<a href="#" class="hover:text-purple-300 transition text-purple-300">Visual Orchestrator</a>
</div>
<button class="md:hidden">
<i data-feather="menu"></i>
</button>
</nav>
<!-- Main Content -->
<main class="relative z-10 container mx-auto px-6 md:px-12 py-16">
<div class="text-center mb-20">
<h1 class="text-4xl md:text-6xl font-bold mb-6">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-500">Visual</span> Agent Orchestrator
</h1>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Interactive interface to manage and visualize your AI agents in real-time
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
<!-- Agent Manager -->
<div class="visual-card rounded-xl p-8">
<div class="flex justify-center mb-6">
<div class="w-24 h-24 rounded-full visual-pulse flex items-center justify-center bg-gradient-to-br from-purple-900 to-blue-900">
<i data-feather="users" class="text-purple-400 w-12 h-12"></i>
</div>
</div>
<h3 class="text-2xl font-bold text-center mb-4">Agent Manager</h3>
<p class="text-gray-300 mb-6">Monitor and control all your AI agents from one central dashboard.</p>
<button class="w-full py-3 rounded-lg bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 transition font-medium pixel-btn">
Launch Dashboard
</button>
</div>
<!-- Workflow Designer -->
<div class="visual-card rounded-xl p-8">
<div class="flex justify-center mb-6">
<div class="w-24 h-24 rounded-lg bg-gradient-to-br from-purple-900 to-blue-900 flex items-center justify-center">
<i data-feather="git-branch" class="text-blue-400 w-12 h-12"></i>
</div>
</div>
<h3 class="text-2xl font-bold text-center mb-4">Workflow Designer</h3>
<p class="text-gray-300 mb-6">Drag-and-drop interface to design complex AI workflows.</p>
<button class="w-full py-3 rounded-lg bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 transition font-medium pixel-btn">
Design Workflow
</button>
</div>
<!-- Performance Monitor -->
<div class="visual-card rounded-xl p-8">
<div class="flex justify-center mb-6">
<div class="w-24 h-24 rounded-lg bg-gradient-to-br from-purple-900 to-blue-900 flex items-center justify-center">
<i data-feather="activity" class="text-pink-400 w-12 h-12"></i>
</div>
</div>
<h3 class="text-2xl font-bold text-center mb-4">Performance Monitor</h3>
<p class="text-gray-300 mb-6">Real-time analytics and metrics for all your agents.</p>
<button class="w-full py-3 rounded-lg bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 transition font-medium pixel-btn">
View Analytics
</button>
</div>
</div>
<!-- Visual Terminal -->
<div class="visual-card rounded-xl p-8 max-w-4xl mx-auto">
<div class="flex mb-6">
<div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
<div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
<div class="w-3 h-3 rounded-full bg-pink-500"></div>
</div>
<div class="font-mono">
<div class="flex items-center mb-4">
<span class="text-purple-400 mr-2">visual></span>
<span class="text-white">connect agents --all</span>
</div>
<div class="text-blue-300 mb-2">> Connecting to agent network...</div>
<div class="text-blue-300 mb-2">> Found 7 active agents</div>
<div class="text-purple-300 mb-2">> Orchestrator: All agents synchronized</div>
<div class="text-green-300 mb-4">> Ready for visual commands</div>
<div class="flex items-center">
<span class="text-purple-400 mr-2">visual></span>
<span class="text-white flex-1 border-b border-purple-400">_</span>
</div>
</div>
</div>
</main>
<footer class="relative z-10 py-12 px-6 md:px-12 bg-gray-900/50 mt-20">
<div class="container mx-auto text-center">
<p class="text-gray-400">© 2023 CodeWizard Visual Orchestrator. All agents are operational.</p>
</div>
</footer>
<script>
// Initialize Vanta.js visual network background
VANTA.NET({
el: "#visual-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x7b5bfb,
backgroundColor: 0x0,
points: 12.00,
maxDistance: 22.00,
spacing: 18.00
});
// Initialize feather icons
document.addEventListener('DOMContentLoaded', () => {
feather.replace();
});
</script>
</body>
</html> |