bigtux/ophion
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
d58ac37e39f8643c6a64babedac288be25058790
ophion/web/index.html
bigtux d58ac37e39 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
2026-02-05 22:45:05 -03:00

212 lines
12 KiB
HTML
Raw Blame History

<!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">&lt;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 View Git Blame Copy Permalink