Skip to content

feat: add static dashboard #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danielsrbueno merged 1 commit into from
May 2, 2026
Merged

feat: add static dashboard #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
251 changes: 251 additions & 0 deletions public/dashboard/alertas/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,251 @@
<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alertas | CompostEco</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="../public/images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/bold/style.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css" />
</head>

<body onload="loadAlerts()" class="page-body">

<aside class="sidebar">

<div class="group">
<p class="label">Produtor</p>
<div class="item">
<i class="ph ph-farm icon"></i>
<p class="medium">Fazendinha LTDA</p>
</div>
</div>

<div class="group">
<p class="label">Dashboard</p>
<div class="nav">
<div class="item" onclick="window.location.href='../index.html'">
<i class="ph ph-chart-line icon"></i>
<p>Visão Geral</p>
</div>
<div class="item active">
<i class="ph ph-warning icon"></i>
<p>Alertas</p>
</div>
<div class="item" onclick="window.location.href='../historico/index.html'">
<i class="ph ph-clock-counter-clockwise icon"></i>
<p>Histórico</p>
</div>
</div>
</div>

<div class="group">
<p class="label">Composteiras</p>
<div class="nav">
<div class="item" onclick="window.location.href='../composteira/index.html'">
<i class="ph ph-cube icon"></i>
<p>Composteira 1</p>
</div>
<div class="item">
<i class="ph ph-cube icon"></i>
<p>Composteira 2</p>
</div>
<div class="item">
<i class="ph ph-cube icon"></i>
<p>Composteira 3</p>
</div>
</div>
</div>

<div class="group">
<p class="label">Suporte</p>
<div class="nav">
<div class="item">
<i class="ph ph-headset icon"></i>
<p class="text">Suporte</p>
</div>
</div>
</div>

<div class="sidebar-user">
<div class="avatar">JL</div>
<span>Júlia Lima</span>
<i class="ph ph-sign-out signout-icon" onclick="window.location.href='../../login/index.html'"></i>
</div>

</aside>

<main class="main-content">

<div onclick="toggleShowInfo()" class="info-toggle">
<i class="ph-bold ph-question-mark info-toggle-icon"></i>
</div>

<div id="infoCard" class="info-card">
<i class="ph-bold ph-x close-icon" onclick="toggleShowInfo()"></i>
<h1 class="heading">
<i class="ph-bold ph-thermometer icon"></i>Temperatura
</h1>
<p class="text">
A temperatura interna afeta diretamente o metabolismo e a reprodução das minhocas.
<span class="text-ideal">Ideal (Zona de Conforto): 20°C a 25°C.</span>
É nesta faixa que as minhocas processam o resíduo com máxima eficiência.
<span class="text-alert">Alerta: 26°C a 30°C.</span>
O metabolismo acelera demais, e o oxigênio diminui. Recomenda-se aumentar a ventilação ou sombrear o local.
<span class="text-critical">Crítico: Abaixo de 19°C ou acima de 35°C.</span>
Risco iminente de morte da colônia. Temperaturas altas superaquecem as minhocas, e, temperaturas baixas as
tornam inativas.
</p>
<h1 class="heading spaced">
<i class="ph-bold ph-drop icon"></i>Umidade
</h1>
<p class="text">
A umidade é vital, pois, as minhocas respiram através da pele, que precisa estar sempre úmida.
<span class="text-ideal">Ideal (Zona de Conforto): 70% a 85%.</span>
O material deve parecer uma esponja espremida, úmido ao toque, mas, sem escorrer água livremente.
<span class="text-alert">Alerta: 60% (Seco) ou 90% (Encharcado).</span>
Se estiver seco, as minhocas sofrem estresse hídrico, se estiver muito úmido, falta oxigênio, e, surge mau
cheiro.
<span class="text-critical">Crítico: Abaixo de 50% ou Saturação Total.</span>
A falta de umidade resseca a pele das minhocas, impedindo a respiração. O excesso total causa anaerobiose (falta
de ar).
</p>
</div>

<h1 class="title-page">Alertas</h1>

<section class="alerts-section">

<div class="alert urgent">
<div class="heading">
<i class="ph-bold ph-warning-octagon icon"></i>
<h1 class="title">Composteira 2 com alta temperatura</h1>
<p class="date">5 minutos atrás</p>
</div>
<p class="desc">
Foi detectado 37°C às 14:10 do dia 01/05/2026 na Composteira 2. A temperatura está em nível crítico, com risco
iminente de morte das minhocas.
</p>
</div>

<div class="alert urgent">
<div class="heading">
<i class="ph-bold ph-warning-octagon icon"></i>
<h1 class="title">Composteira 3 com baixa umidade</h1>
<p class="date">10 minutos atrás</p>
</div>
<p class="desc">
Foi detectado 48% de umidade às 14:00 do dia 01/05/2026 na Composteira 3. A umidade está crítica, podendo
impedir a respiração das minhocas.
</p>
</div>

<div class="alert danger">
<div class="heading">
<i class="ph-bold ph-warning icon"></i>
<h1 class="title">Composteira 1 com alta temperatura</h1>
<p class="date">20 minutos atrás</p>
</div>
<p class="desc">
Foi detectado 29°C às 13:50 do dia 01/05/2026 na Composteira 1. A temperatura está acima do ideal e pode
reduzir o oxigênio disponível.
</p>
</div>

<div class="alert danger">
<div class="heading">
<i class="ph-bold ph-warning icon"></i>
<h1 class="title">Composteira 1 com alta umidade</h1>
<p class="date">30 minutos atrás</p>
</div>
<p class="desc">
Foi detectado 91% de umidade às 13:40 do dia 01/05/2026 na Composteira 1. O excesso de água pode causar falta
de oxigenação e mau cheiro.
</p>
</div>

<div class="alert danger">
<div class="heading">
<i class="ph-bold ph-warning icon"></i>
<h1 class="title">Composteira 2 com alta umidade e temperatura</h1>
<p class="date">45 minutos atrás</p>
</div>
<p class="desc">
Foi detectado 31°C e 90% de umidade às 13:25 do dia 01/05/2026 na Composteira 2. As condições favorecem
superaquecimento e falta de oxigênio.
</p>
</div>

<div class="alert moderate">
<div class="heading">
<i class="ph-bold ph-warning-diamond icon"></i>
<h1 class="title">Composteira 2 com baixa temperatura</h1>
<p class="date">1 hora atrás</p>
</div>
<p class="desc">
Foi detectado 18°C às 13:00 do dia 01/05/2026 na Composteira 2. A atividade das minhocas pode estar reduzida.
</p>
</div>

<div class="alert moderate">
<div class="heading">
<i class="ph-bold ph-warning-diamond icon"></i>
<h1 class="title">Composteira 3 com baixa umidade</h1>
<p class="date">1 hora e 20 minutos atrás</p>
</div>
<p class="desc">
Foi detectado 60% de umidade às 12:40 do dia 01/05/2026 na Composteira 3. O material está seco e pode causar
estresse hídrico nas minhocas.
</p>
</div>

<div class="alert moderate">
<div class="heading">
<i class="ph-bold ph-warning-diamond icon"></i>
<h1 class="title">Composteira 1 com alta temperatura</h1>
<p class="date">2 horas atrás</p>
</div>
<p class="desc">
Foi detectado 27°C às 12:10 do dia 01/05/2026 na Composteira 1. A temperatura está em nível de alerta,
exigindo atenção.
</p>
</div>

<div class="alert normal">
<div class="heading">
<i class="ph-bold ph-info icon"></i>
<h1 class="title">Composteira 2 próxima do limite ideal</h1>
<p class="date">3 horas atrás</p>
</div>
<p class="desc">
Foi detectado 25°C e 85% de umidade às 11:00 do dia 01/05/2026 na Composteira 2. Os valores estão no limite
superior da zona ideal.
</p>
</div>

<div class="alert normal">
<div class="heading">
<i class="ph-bold ph-info icon"></i>
<h1 class="title">Composteira 3 em condição estável</h1>
<p class="date">4 horas atrás</p>
</div>
<p class="desc">
Foi detectado 22°C e 75% de umidade às 10:00 do dia 01/05/2026 na Composteira 3. As condições estão ideais
para a atividade das minhocas.
</p>
</div>

</section>
</main>

<script src="script.js"></script>
</body>

</html>
12 changes: 12 additions & 0 deletions public/dashboard/alertas/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
let showInfo = false
function toggleShowInfo() {
const infoCard = document.getElementById('infoCard')
showInfo = !showInfo
infoCard.style.display = showInfo ? 'flex' : 'none'
}

function getAlerts() {}

function loadAlerts () {
getAlerts()
}
Loading