feat: Add AI engine and complete documentation
- Add AI engine with OpenAI integration - Anomaly detection - Log analysis with pattern clustering - Capacity prediction - Complete installation manual (Portuguese) - Docker monitoring guide - APM integration guide (Node.js, Python, Go) - Alert configuration guide
This commit is contained in:
211
web/index.html
Normal file
211
web/index.html
Normal file
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OPHION - Open Source Observability Platform</title>
|
||||
<meta name="description" content="Monitore sua infraestrutura com métricas, logs e alertas. Alternativa open source ao Datadog e New Relic.">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.gradient-bg { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); }
|
||||
.glow { box-shadow: 0 0 60px rgba(34, 197, 94, 0.3); }
|
||||
.snake-gradient { background: linear-gradient(90deg, #22c55e, #10b981, #059669); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="gradient-bg text-white min-h-screen">
|
||||
<!-- Nav -->
|
||||
<nav class="container mx-auto px-6 py-6 flex justify-between items-center">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-3xl">🐍</span>
|
||||
<span class="text-2xl font-bold snake-gradient">OPHION</span>
|
||||
</div>
|
||||
<div class="hidden md:flex space-x-8">
|
||||
<a href="#features" class="hover:text-green-400 transition">Features</a>
|
||||
<a href="#pricing" class="hover:text-green-400 transition">Pricing</a>
|
||||
<a href="https://github.com/bigtux/ophion" class="hover:text-green-400 transition">GitHub</a>
|
||||
<a href="#docs" class="hover:text-green-400 transition">Docs</a>
|
||||
</div>
|
||||
<div class="flex space-x-4">
|
||||
<a href="/login" class="px-4 py-2 rounded-lg hover:bg-slate-700 transition">Login</a>
|
||||
<a href="/register" class="px-4 py-2 bg-green-600 rounded-lg hover:bg-green-500 transition">Start Free</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="container mx-auto px-6 py-20 text-center">
|
||||
<div class="inline-block px-4 py-1 bg-green-900/50 rounded-full text-green-400 text-sm mb-6">
|
||||
🎉 Open Source & Self-Hosted Available
|
||||
</div>
|
||||
<h1 class="text-5xl md:text-7xl font-extrabold mb-6">
|
||||
Observability<br>
|
||||
<span class="snake-gradient">Made Simple</span>
|
||||
</h1>
|
||||
<p class="text-xl text-slate-400 max-w-2xl mx-auto mb-10">
|
||||
Métricas, logs, traces e alertas em uma única plataforma.
|
||||
Alternativa open source ao Datadog por 1/10 do preço.
|
||||
</p>
|
||||
<div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4">
|
||||
<a href="/register" class="px-8 py-4 bg-green-600 rounded-xl text-lg font-semibold hover:bg-green-500 transition glow">
|
||||
Começar Grátis →
|
||||
</a>
|
||||
<a href="#demo" class="px-8 py-4 border border-slate-600 rounded-xl text-lg font-semibold hover:border-green-500 transition">
|
||||
Ver Demo
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-slate-500 mt-6">Setup em 5 minutos • Não precisa de cartão</p>
|
||||
</section>
|
||||
|
||||
<!-- Stats -->
|
||||
<section class="container mx-auto px-6 py-16">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
||||
<div>
|
||||
<div class="text-4xl font-bold snake-gradient">10TB+</div>
|
||||
<div class="text-slate-400">Métricas/dia</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-4xl font-bold snake-gradient">99.9%</div>
|
||||
<div class="text-slate-400">Uptime</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-4xl font-bold snake-gradient"><100ms</div>
|
||||
<div class="text-slate-400">Latência</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-4xl font-bold snake-gradient">∞</div>
|
||||
<div class="text-slate-400">Usuários</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features -->
|
||||
<section id="features" class="container mx-auto px-6 py-20">
|
||||
<h2 class="text-4xl font-bold text-center mb-16">Tudo que você precisa</h2>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700 hover:border-green-500 transition">
|
||||
<div class="text-4xl mb-4">📊</div>
|
||||
<h3 class="text-xl font-semibold mb-2">Infrastructure Monitoring</h3>
|
||||
<p class="text-slate-400">CPU, memória, disco e rede em tempo real. Suporte a Docker, K8s e cloud.</p>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700 hover:border-green-500 transition">
|
||||
<div class="text-4xl mb-4">📝</div>
|
||||
<h3 class="text-xl font-semibold mb-2">Log Management</h3>
|
||||
<p class="text-slate-400">Centralize todos os seus logs. Busca poderosa e alertas por padrões.</p>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700 hover:border-green-500 transition">
|
||||
<div class="text-4xl mb-4">🔍</div>
|
||||
<h3 class="text-xl font-semibold mb-2">Distributed Tracing</h3>
|
||||
<p class="text-slate-400">Rastreie requests entre serviços. Identifique gargalos rapidamente.</p>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700 hover:border-green-500 transition">
|
||||
<div class="text-4xl mb-4">📈</div>
|
||||
<h3 class="text-xl font-semibold mb-2">Custom Dashboards</h3>
|
||||
<p class="text-slate-400">Crie dashboards personalizados. Drag-and-drop, widgets flexíveis.</p>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700 hover:border-green-500 transition">
|
||||
<div class="text-4xl mb-4">🚨</div>
|
||||
<h3 class="text-xl font-semibold mb-2">Smart Alerts</h3>
|
||||
<p class="text-slate-400">Telegram, Slack, Email, PagerDuty. Escalação e silenciamento inteligente.</p>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700 hover:border-green-500 transition">
|
||||
<div class="text-4xl mb-4">🔐</div>
|
||||
<h3 class="text-xl font-semibold mb-2">Enterprise Security</h3>
|
||||
<p class="text-slate-400">SSO, RBAC, audit logs. Compliance com LGPD e SOC2.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing -->
|
||||
<section id="pricing" class="container mx-auto px-6 py-20">
|
||||
<h2 class="text-4xl font-bold text-center mb-4">Preços Transparentes</h2>
|
||||
<p class="text-slate-400 text-center mb-16">Sem surpresas. Sem cobrança por usuário.</p>
|
||||
<div class="grid md:grid-cols-4 gap-6 max-w-6xl mx-auto">
|
||||
<div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700">
|
||||
<h3 class="text-lg font-semibold text-slate-400">Community</h3>
|
||||
<div class="text-4xl font-bold my-4">Grátis</div>
|
||||
<p class="text-slate-400 mb-6">Self-hosted</p>
|
||||
<ul class="space-y-3 text-sm text-slate-300">
|
||||
<li>✓ Todas as features</li>
|
||||
<li>✓ Usuários ilimitados</li>
|
||||
<li>✓ Hosts ilimitados</li>
|
||||
<li>✓ 7 dias retenção</li>
|
||||
<li>✓ Comunidade</li>
|
||||
</ul>
|
||||
<a href="https://github.com/bigtux/ophion" class="block mt-8 py-3 text-center border border-slate-600 rounded-lg hover:border-green-500 transition">Download</a>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700">
|
||||
<h3 class="text-lg font-semibold text-slate-400">Starter</h3>
|
||||
<div class="text-4xl font-bold my-4">R$ 97<span class="text-lg text-slate-400">/mês</span></div>
|
||||
<p class="text-slate-400 mb-6">Para pequenas equipes</p>
|
||||
<ul class="space-y-3 text-sm text-slate-300">
|
||||
<li>✓ 5 hosts</li>
|
||||
<li>✓ 10GB logs/mês</li>
|
||||
<li>✓ 14 dias retenção</li>
|
||||
<li>✓ Alertas Telegram</li>
|
||||
<li>✓ Suporte email</li>
|
||||
</ul>
|
||||
<a href="/register" class="block mt-8 py-3 text-center bg-slate-700 rounded-lg hover:bg-slate-600 transition">Começar</a>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 p-8 rounded-2xl border-2 border-green-500 relative">
|
||||
<div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-green-500 px-3 py-1 rounded-full text-xs font-semibold">POPULAR</div>
|
||||
<h3 class="text-lg font-semibold text-green-400">Pro</h3>
|
||||
<div class="text-4xl font-bold my-4">R$ 297<span class="text-lg text-slate-400">/mês</span></div>
|
||||
<p class="text-slate-400 mb-6">Para empresas</p>
|
||||
<ul class="space-y-3 text-sm text-slate-300">
|
||||
<li>✓ 20 hosts</li>
|
||||
<li>✓ 50GB logs/mês</li>
|
||||
<li>✓ 30 dias retenção</li>
|
||||
<li>✓ APM completo</li>
|
||||
<li>✓ Suporte prioritário</li>
|
||||
</ul>
|
||||
<a href="/register" class="block mt-8 py-3 text-center bg-green-600 rounded-lg hover:bg-green-500 transition">Começar</a>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700">
|
||||
<h3 class="text-lg font-semibold text-slate-400">Enterprise</h3>
|
||||
<div class="text-4xl font-bold my-4">Custom</div>
|
||||
<p class="text-slate-400 mb-6">Para grandes empresas</p>
|
||||
<ul class="space-y-3 text-sm text-slate-300">
|
||||
<li>✓ Hosts ilimitados</li>
|
||||
<li>✓ Retenção custom</li>
|
||||
<li>✓ SSO / SAML</li>
|
||||
<li>✓ On-premise</li>
|
||||
<li>✓ SLA 99.99%</li>
|
||||
</ul>
|
||||
<a href="mailto:contato@ophion.com.br" class="block mt-8 py-3 text-center border border-slate-600 rounded-lg hover:border-green-500 transition">Contato</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="container mx-auto px-6 py-20 text-center">
|
||||
<div class="bg-gradient-to-r from-green-900/50 to-slate-800/50 rounded-3xl p-12 border border-green-800">
|
||||
<h2 class="text-4xl font-bold mb-4">Pronto para começar?</h2>
|
||||
<p class="text-slate-400 mb-8">Setup em 5 minutos. Cancele quando quiser.</p>
|
||||
<a href="/register" class="inline-block px-8 py-4 bg-green-600 rounded-xl text-lg font-semibold hover:bg-green-500 transition">
|
||||
Criar Conta Grátis →
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="container mx-auto px-6 py-12 border-t border-slate-800">
|
||||
<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">
|
||||
<span class="text-2xl">🐍</span>
|
||||
<span class="text-xl font-bold">OPHION</span>
|
||||
</div>
|
||||
<div class="flex space-x-8 text-slate-400">
|
||||
<a href="#" class="hover:text-white transition">Termos</a>
|
||||
<a href="#" class="hover:text-white transition">Privacidade</a>
|
||||
<a href="#" class="hover:text-white transition">Status</a>
|
||||
<a href="https://github.com/bigtux/ophion" class="hover:text-white transition">GitHub</a>
|
||||
</div>
|
||||
<div class="text-slate-500 mt-4 md:mt-0">
|
||||
Made with 🖤 in Brazil
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user