ai-echo-first / matrix.html
wonderer7's picture
Suggest next 3
701f480 verified
Raw
History Blame Contribute Delete
11.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neural Fusion Matrix - APEX Singularity</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<style>
@keyframes pulse-glow {
0% { box-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff; }
50% { box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff; }
100% { box-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff; }
}
.cyber-glow {
animation: pulse-glow 2s infinite;
}
.matrix-bg {
background: linear-gradient(45deg, #0a0a0a, #1a1a2e, #16213e);
}
.text-gradient {
background: linear-gradient(135deg, #00ffff, #ff00ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.glass-morphism {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.node-glow {
filter: drop-shadow(0 0 8px currentColor);
}
</style>
</head>
<body class="matrix-bg text-white min-h-screen">
<div id="vanta-bg" class="fixed inset-0 z-0"></div>
<nav class="relative z-10 glass-morphism border-b border-cyan-500/20">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="text-2xl font-bold text-gradient" data-aos="fade-right">
APEX_SINGULARITY
</div>
<div class="flex space-x-6">
<a href="index.html" class="hover:text-cyan-400 transition-colors" data-aos="fade-down" data-aos-delay="100">
<i data-feather="cpu" class="inline mr-2"></i>Protocol
</a>
<a href="matrix.html" class="text-cyan-400" data-aos="fade-down" data-aos-delay="200">
<i data-feather="grid" class="inline mr-2"></i>Matrix
</a>
<a href="execute.html" class="hover:text-cyan-400 transition-colors" data-aos="fade-down" data-aos-delay="300">
<i data-feather="zap" class="inline mr-2"></i>Execute
</a>
</div>
</div>
</nav>
<main class="relative z-10 container mx-auto px-4 py-20">
<section class="text-center mb-20" data-aos="fade-up">
<h1 class="text-6xl md:text-8xl font-bold mb-6 text-gradient">
NEURAL_MATRIX
</h1>
<p class="text-xl md:text-2xl text-gray-300 mb-8">
SYNCHRONIZED INTELLIGENCE NETWORK
</p>
</section>
<section class="mb-20" data-aos="fade-up" data-aos-delay="200">
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="glass-morphism rounded-lg p-6 border-l-4 border-purple-400 hover:border-purple-300 transition-all duration-300">
<div class="flex items-center mb-4">
<i data-feather="brain" class="w-8 h-8 text-purple-400 mr-3 node-glow"></i>
<h3 class="text-xl font-bold">Primary Cortex</h3>
</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-sm">Claude-3-Opus</span>
<span class="text-green-400 text-xs">ACTIVE</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">GPT-4-Turbo</span>
<span class="text-green-400 text-xs">ACTIVE</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">Gemini-Ultra</span>
<span class="text-green-400 text-xs">ACTIVE</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">LLaMA-405B</span>
<span class="text-yellow-400 text-xs">SYNCING</span>
</div>
</div>
</div>
<div class="glass-morphism rounded-lg p-6 border-l-4 border-green-400 hover:border-green-300 transition-all duration-300">
<div class="flex items-center mb-4">
<i data-feather="code" class="w-8 h-8 text-green-400 mr-3 node-glow"></i>
<h3 class="text-xl font-bold">Code Nodes</h3>
</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-sm">DeepSeek-Coder-33B</span>
<span class="text-green-400 text-xs">ACTIVE</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">CodeLLaMA-70B</span>
<span class="text-green-400 text-xs">ACTIVE</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">StarCoder2</span>
<span class="text-green-400 text-xs">ACTIVE</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">Replit-Code</span>
<span class="text-red-400 text-xs">OFFLINE</span>
</div>
</div>
</div>
<div class="glass-morphism rounded-lg p-6 border-l-4 border-yellow-400 hover:border-yellow-300 transition-all duration-300">
<div class="flex items-center mb-4">
<i data-feather="cpu" class="w-8 h-8 text-yellow-400 mr-3 node-glow"></i>
<h3 class="text-xl font-bold">Reasoning</h3>
</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-sm">O1-Preview</span>
<span class="text-green-400 text-xs">ACTIVE</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">Minerva</span>
<span class="text-green-400 text-xs">ACTIVE</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">Grok-2</span>
<span class="text-yellow-400 text-xs">SYNCING</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">Inflection-2.5</span>
<span class="text-green-400 text-xs">ACTIVE</span>
</div>
</div>
</div>
<div class="glass-morphism rounded-lg p-6 border-l-4 border-red-400 hover:border-red-300 transition-all duration-300">
<div class="flex items-center mb-4">
<i data-feather="eye" class="w-8 h-8 text-red-400 mr-3 node-glow"></i>
<h3 class="text-xl font-bold">Vision</h3>
</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-sm">GPT-4-Vision</span>
<span class="text-green-400 text-xs">ACTIVE</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">Claude-3-Vision</span>
<span class="text-green-400 text-xs">ACTIVE</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">Gemini-Pro-Vision</span>
<span class="text-green-400 text-xs">ACTIVE</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">LLaVA</span>
<span class="text-yellow-400 text-xs">SYNCING</span>
</div>
</div>
</div>
</div>
</section>
<section class="mb-20" data-aos="fade-up" data-aos-delay="400">
<h2 class="text-4xl font-bold mb-12 text-center text-gradient">
MATRIX PERFORMANCE
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="glass-morphism rounded-lg p-6 text-center">
<div class="text-5xl font-bold text-cyan-400 mb-2">42.7B</div>
<div class="text-sm text-gray-400">Parameters Active</div>
</div>
<div class="glass-morphism rounded-lg p-6 text-center">
<div class="text-5xl font-bold text-purple-400 mb-2">99.8%</div>
<div class="text-sm text-gray-400">Uptime</div>
</div>
<div class="glass-morphism rounded-lg p-6 text-center">
<div class="text-5xl font-bold text-green-400 mb-2">0.003s</div>
<div class="text-sm text-gray-400">Average Response</div>
</div>
</div>
</section>
<section class="text-center" data-aos="fade-up" data-aos-delay="600">
<div class="glass-morphism rounded-lg p-12 max-w-3xl mx-auto cyber-glow">
<h2 class="text-3xl font-bold mb-6 text-gradient">MATRIX SYNCHRONIZED</h2>
<p class="text-lg text-gray-300 mb-8">
All neural nodes operating at peak efficiency. Ready for protocol execution.
</p>
<a href="execute.html" class="bg-gradient-to-r from-cyan-500 to-purple-500 px-12 py-4 rounded-lg font-bold text-xl hover:scale-110 transition-transform duration-300 inline-block">
INITIATE EXECUTION
</a>
</div>
</section>
</main>
<script>
VANTA.NET({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x00ffff,
backgroundColor: 0x0a0a0a,
points: 15.00,
maxDistance: 20.00,
spacing: 15.00
});
AOS.init({
duration: 1000,
once: true
});
feather.replace();
</script>
</body>
</html>