<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Central QA</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: Arial, sans-serif; background:#f2f4f8; margin:0; padding:20px; }
h1 { margin-bottom:20px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:20px; }
.card { background:#fff; border-radius:10px; padding:15px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.1); cursor:pointer; transition:0.2s; }
.card:hover { transform:scale(1.03); box-shadow:0 4px 10px rgba(0,0,0,0.15); }
.card img { width:80px; margin-bottom:10px; }
.card h3 { margin:10px 0 5px; font-size:16px; }
.card p { font-size:13px; color:#666; }
.chart-container { margin-top:40px; background:#fff; padding:20px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
</style>
</head>
<body>
<h1>🎯 Central QA</h1>
<p>Hub de qualidade, testes e indicadores</p>
<div class="grid">
<div class="card" onclick="window.open('https://link-docs.com')">
<img src="https://cdn-icons-png.flaticon.com/512/2991/2991148.png" />
<h3>Documentações</h3>
<p>Planos de teste, cenários e evidências</p>
</div>
<div class="card" onclick="window.open('https://jira.com')">
<img src="https://cdn-icons-png.flaticon.com/512/5968/5968875.png" />
<h3>Defeitos</h3>
<p>Gestão de bugs e falhas</p>
</div>
<div class="card" onclick="window.open('https://confluence.com')">
<img src="https://cdn-icons-png.flaticon.com/512/5968/5968866.png" />
<h3>Base de Conhecimento</h3>
<p>Regras, fluxos e padrões</p>
</div>
<div class="card" onclick="window.open('https://dashboard.com')">
<img src="https://cdn-icons-png.flaticon.com/512/1828/1828765.png" />
<h3>Indicadores QA</h3>
<p>Métricas e produtividade</p>
</div>
</div>
<div class="chart-container">
<h2>📈 Evolução de Casos Específicos</h2>
<canvas id="qaChart"></canvas>
</div>
<script>
const ctx = document.getElementById('qaChart');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun'],
datasets: [
{
label: 'Defeitos Críticos',
data: [12, 9, 15, 8, 6, 4],
borderWidth: 2,
tension: 0.3
},
{
label: 'Casos Automatizados',
data: [5, 12, 18, 25, 40, 55],
borderWidth: 2,
tension: 0.3
}
]
},
options: {
responsive: true,
plugins: {
legend: { position: 'top' }
}
}
});
</script>
</body>
</html> |