Histórico da Página

HTML
<!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;:#f5f6f8;
}

.qa-container{
    max-width:1200px;
    margin:0auto;
    padding:20px;
}

.qa-title{
    font-size:26px;
    font-weight:bold;
    color:#1f2d3d;
}
h1 {

.qa-subtitle{
    color:#5f6b7a;
    margin-bottom:20px; }30px;
}

/* GRID */
.grid{
  {  display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:20px;
    margin-bottom:30px;
}

/* CARD */
.card{
   { background:#fff;#ffffff;
    border:1px solid #e0e6ed;
    border-radius:10px;
    padding:15px20px;
    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.1508);
    transform: translateY(-3px);
}

/* BOTÃO */
.card img { width:80px; margin-bottom:10px; }
.card h3 { margin:10px 0 5px; a{
    text-decoration:none;
    color:#ffffff;
    background:#0055a5;
    padding:12px 18px;
    border-radius:6px;
    display:inline-block;
    font-weight:bold;
    font-size:16px14px; 
}

.card p {  a:hover{
    background:#003f7d;
}

/* TITULO SEÇÃO */
.section-title{
    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); 20px;
    font-weight:bold;
    color:#1f2d3d;
    margin:30px 0 15px 0;
    border-left:5px solid #0055a5;
    padding-left:10px;
}

/* GRAFICO AREA */
.chart-box{
    background:#ffffff;
    border:1px solid #e0e6ed;
    border-radius:10px;
    padding:20px;
    margin-top:20px;
    text-align:center;
    color:#5f6b7a;
}
</style>

</head>

<body>



<h1>🎯 Central QA</h1>
<p>Hub<div class="qa-container">

    <div class="qa-title">🧪 QA HUB – OPERAÇÃO</div>
    <div class="qa-subtitle">
        Core Vendas | Construção e Projetos<br>
        Central operacional de qualidade, testes, controle e indicadores</p>


indicadores
    </div>

    <!-- ACESSOS RÁPIDOS -->
    <div class="section-title">🚀 Acessos Operacionais</div>
    <div class="grid">
        <div class="card"><a onclickhref="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>


"#">Iniciar Testes</a></div>
        <div class="card"><a href="#">Abrir Defeito</a></div>
        <div class="card"><a href="#">Checklist Ativo</a></div>
        <div class="card"><a href="#">Documentos QA</a></div>
        <div class="card"><a href="#">IA QA</a></div>
        <div class="card"><a href="#">Indicadores</a></div>
    </div>

    <!-- EXECUÇÃO -->
    <div class="section-title">🧪 Execução de Testes</div>
    <div class="grid">
        <div class="card"><a href="#">Sistêmico</a></div>
        <div class="card"><a href="#">Integração</a></div>
        <div class="card"><a href="#">Regressão</a></div>
        <div class="card"><a href="#">Release</a></div>
        <div class="card"><a href="#">Exploratório</a></div>
        <div class="card"><a href="#">Automatizado</a></div>
    </div>

    <!-- CHECKLISTS -->
    <div class="section-title">📋 Checklists Operacionais</div>
    <div class="grid">
        <div class="card"><a href="#">Checklist Sistêmico</a></div>
        <div class="card"><a onclickhref="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>


#">Checklist Regressão</a></div>
        <div class="card"><a href="#">Checklist Release</a></div>
        <div class="card"><a href="#">Checklist Validação</a></div>
        <div class="card"><a href="#">Checklist Homologação</a></div>
        <div class="card"><a href="#">Checklist Técnico</a></div>
    </div>

    <!-- DEFEITOS -->
    <div class="section-title">🐞 Defeitos</div>
    <div class="grid">
        <div class="card"><a onclickhref="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>
"#">Abertura de Defeito</a></div>
        <div class="card"><a href="#">Templates</a></div>
        <div class="card"><a href="#">Evidências</a></div>
        <div class="card"><a href="#">Padrões</a></div>
        <div class="card"><a href="#">Classificação</a></div>
        <div class="card"><a href="#">Controle</a></div>
    </div>

    <!-- IA QA -->
    <div class="section-title">🤖 IA QA</div>
    <div class="grid">
        <div class="card"><a href="#">Gerar Casos de Teste</a></div>
        <div class="card"><a href="#">Criar Cenários</a></div>
        <div class="card"><a href="#">Analisar Requisitos</a></div>
        <div class="card"><a href="#">Análise de Impacto</a></div>
        <div class="card"><a href="#">Testes Exploratórios</a></div>
        <div class="card"><a href="#">Apoio Defeitos</a></div>
    </div>

    <!-- INDICADORES -->
    <div class="section-title">📊 Indicadores Operacionais</div>
    <div class="grid">
        <div class="card"><a href="#">Bugs por Módulo</a></div>
        <div class="card"><a href="#">Bugs por Severidade</a></div>
        <div class="card"><a href="#">SLA Correção</a></div>
        <div class="card"><a href="#">Lead Time</a></div>
        <div class="card"><a href="#">Reabertura</a></div>
        <div class="card"><a href="#">Cobertura Testes</a></div>
    </div>

    <!-- EVOLUÇÃO -->
    <div class="section-title">📈 Evolução de Casos Específicos</div>
    <div class="chart-box">
        Área reservada para gráficos de evolução:<br><br>
        • Casos críticos<br>
        • Bugs reincidentes<br>
        • Falhas estruturais<br>
        • Pontos de risco sistêmico<br><br>
        <strong>(Gráfico real será integrado aqui futuramente)</strong>
    </div>

</div>

</body>
</html>
Atalhos

Páginas filhas

Versões comparadas

Versão antiga 2

Nova versão 3

Chave
