267 lines
7.7 KiB
HTML
267 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pt-br">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Focus Agenda</title>
|
||
|
||
<link rel="stylesheet" href="calendario.css">
|
||
|
||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- HEADER -->
|
||
<div id="header">
|
||
<h1 id="title">Focus Agenda</h1>
|
||
</div>
|
||
|
||
<!-- BARRA ESQUERDA -->
|
||
<div id="barraesquerda">
|
||
|
||
<!-- MINI CALENDÁRIO -->
|
||
<div id="calendario">
|
||
<div class="calendariotop">
|
||
<div id="mes"></div>
|
||
|
||
<div id="calendarseta">
|
||
<button class="ant">‹</button>
|
||
<button class="prox">›</button>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="calendariodia">
|
||
<thead>
|
||
<tr>
|
||
<th>DOM</th>
|
||
<th>SEG</th>
|
||
<th>TER</th>
|
||
<th>QUA</th>
|
||
<th>QUI</th>
|
||
<th>SEX</th>
|
||
<th>SAB</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="dias"></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- AGENDA -->
|
||
<div id="agenda"></div>
|
||
|
||
<!-- FERIADOS -->
|
||
<div id="feriados"></div>
|
||
|
||
</div>
|
||
|
||
<!-- CONTEÚDO PRINCIPAL -->
|
||
<div class="main">
|
||
|
||
<!-- TOPBAR (igual ao print) -->
|
||
<div class="topbar">
|
||
<h1>Calendario</h1>
|
||
|
||
<div class="user-area">
|
||
<img src="imagens/sino.png" class="icone-img" alt="Notificações">
|
||
|
||
<div class="perfil">
|
||
<div class="avatar"></div>
|
||
<div class="info">
|
||
<span class="nome">Usuario</span>
|
||
<span class="cargo">Admin</span>
|
||
</div>
|
||
</div>
|
||
|
||
<img src="imagens/engrenagem.png" class="icone-img" alt="Configurações">
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- MÊS -->
|
||
<div class="month-title">
|
||
<span>‹</span>
|
||
Janeiro, 2025
|
||
<span>›</span>
|
||
</div>
|
||
|
||
<!-- CALENDÁRIO GRANDE -->
|
||
<div class="calendar-area" id="calendarArea"></div>
|
||
|
||
</div>
|
||
|
||
<!-- SCRIPT -->
|
||
<script>
|
||
/* ===== MINI CALENDÁRIO ===== */
|
||
|
||
let dataAtual = new Date();
|
||
|
||
function renderCalendario() {
|
||
const mesEl = document.getElementById("mes");
|
||
const diasEl = document.getElementById("dias");
|
||
|
||
const meses = [
|
||
"Janeiro", "Fevereiro", "Março", "Abril",
|
||
"Maio", "Junho", "Julho", "Agosto",
|
||
"Setembro", "Outubro", "Novembro", "Dezembro"
|
||
];
|
||
|
||
let ano = dataAtual.getFullYear();
|
||
let mes = dataAtual.getMonth();
|
||
|
||
mesEl.textContent = `${meses[mes]} ${ano}`;
|
||
|
||
let primeiroDia = new Date(ano, mes, 1).getDay();
|
||
let ultimoDia = new Date(ano, mes + 1, 0).getDate();
|
||
let ultimoDiaMesAnterior = new Date(ano, mes, 0).getDate();
|
||
|
||
diasEl.innerHTML = "";
|
||
|
||
let diaAtual = 1;
|
||
let diaSeguinte = 1;
|
||
|
||
let totalCelulas = primeiroDia + ultimoDia;
|
||
let totalLinhas = Math.ceil(totalCelulas / 7);
|
||
if (totalLinhas < 4) totalLinhas = 4;
|
||
|
||
for (let semana = 0; semana < totalLinhas; semana++) {
|
||
let linha = document.createElement("tr");
|
||
|
||
for (let diaSemana = 0; diaSemana < 7; diaSemana++) {
|
||
let pos = semana * 7 + diaSemana;
|
||
|
||
if (pos < primeiroDia) {
|
||
let dia = ultimoDiaMesAnterior - (primeiroDia - pos - 1);
|
||
linha.innerHTML += `<td class="outromes">${dia}</td>`;
|
||
}
|
||
else if (diaAtual <= ultimoDia) {
|
||
let hoje = new Date();
|
||
|
||
let classeHoje =
|
||
diaAtual === hoje.getDate() &&
|
||
mes === hoje.getMonth() &&
|
||
ano === hoje.getFullYear()
|
||
? "today"
|
||
: "";
|
||
|
||
linha.innerHTML += `<td class="${classeHoje}">${diaAtual}</td>`;
|
||
diaAtual++;
|
||
}
|
||
else {
|
||
linha.innerHTML += `<td class="outromes">${diaSeguinte}</td>`;
|
||
diaSeguinte++;
|
||
}
|
||
}
|
||
|
||
diasEl.appendChild(linha);
|
||
}
|
||
}
|
||
|
||
document.querySelector(".prox").onclick = () => {
|
||
dataAtual.setMonth(dataAtual.getMonth() + 1);
|
||
renderCalendario();
|
||
};
|
||
|
||
document.querySelector(".ant").onclick = () => {
|
||
dataAtual.setMonth(dataAtual.getMonth() - 1);
|
||
renderCalendario();
|
||
};
|
||
|
||
/* ===== CALENDÁRIO GRANDE ===== */
|
||
|
||
function renderCalendarioGrande() {
|
||
const area = document.getElementById("calendarArea");
|
||
area.innerHTML = "";
|
||
|
||
for (let i = 0; i < 35; i++) {
|
||
area.innerHTML += `<div class="dia-box"></div>`;
|
||
}
|
||
}
|
||
|
||
/* ===== DADOS ===== */
|
||
|
||
let agendaData = [
|
||
{
|
||
hora: "08:15 – 09:15",
|
||
titulo: "Coçar oq fazer",
|
||
link: "https://youtube.com",
|
||
cor: "azul"
|
||
},
|
||
{
|
||
hora: "09:00 – 10:00",
|
||
titulo: "COMO QUE DIMINUI A FONTE?",
|
||
link: "https://sccor.com",
|
||
cor: "azul"
|
||
},
|
||
{
|
||
hora: "11:00 – 11:45",
|
||
titulo: "Pintar boobie-goods",
|
||
cor: "rosa"
|
||
},
|
||
{
|
||
hora: "18:20 – 23:00",
|
||
titulo: "Ir pro curso (infelizmente)",
|
||
link: "dom 4, BBP",
|
||
cor: "azul"
|
||
}
|
||
];
|
||
|
||
let feriadosData = [
|
||
{ texto: "15 – Proclamação da República" },
|
||
{ texto: "20 – Dia Nacional da Consciência Negra" }
|
||
];
|
||
|
||
/* ===== RENDER AGENDA ===== */
|
||
|
||
function renderAgenda() {
|
||
const container = document.getElementById("agenda");
|
||
|
||
container.innerHTML = `
|
||
<div class="agenda-header">
|
||
<strong>HOJE</strong> ${new Date().toLocaleDateString()}
|
||
</div>
|
||
`;
|
||
|
||
agendaData.forEach(ev => {
|
||
container.innerHTML += `
|
||
<div class="evento ${ev.cor}">
|
||
<div class="hora">${ev.hora}</div>
|
||
<div class="titulo">${ev.titulo}</div>
|
||
${ev.link ? `<div class="link">${ev.link}</div>` : ""}
|
||
</div>
|
||
`;
|
||
});
|
||
}
|
||
|
||
/* ===== RENDER FERIADOS ===== */
|
||
|
||
function renderFeriados() {
|
||
const container = document.getElementById("feriados");
|
||
|
||
container.innerHTML = `
|
||
<div class="feriados-header">FERIADOS 🎉</div>
|
||
`;
|
||
|
||
feriadosData.forEach(f => {
|
||
container.innerHTML += `
|
||
<div class="feriado">
|
||
<span class="dot"></span>
|
||
<span>${f.texto}</span>
|
||
</div>
|
||
`;
|
||
});
|
||
}
|
||
|
||
/* ===== INICIAR ===== */
|
||
|
||
renderCalendario();
|
||
renderCalendarioGrande();
|
||
renderAgenda();
|
||
renderFeriados();
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |