Correção de bugs

Correção do CSS do login
Atualização do calendario
2026-03-24 20:27:51 -03:00 · 2026-03-24 19:44:21 -03:00 · 2026-03-23 09:40:59 -03:00 · 2026-03-23 08:50:26 -03:00 · 2026-03-23 06:55:02 -03:00 · 2026-03-14 15:48:13 -03:00
12 changed files with 1416 additions and 179 deletions
--- a/1
+++ b/1
--- a/cadastro.css
+++ b/cadastro.css
@@ -0,0 +1,103 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  font-family: 'Poppins', sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 20px 20px;
+  background: #f5f5f5;
+}
+
+#topo {
+  width: 100%;
+  height: 50px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to right, #c0392b 47%, #7a4951 73%, #114455 87%);
+  display: flex;
+  align-items: center;
+  z-index: 10;
+}
+
+#textotop {
+  padding-left: 20px;
+  font-size: clamp(22px, 5vw, 38px);
+  color: #fff;
+  font-weight: 500;
+}
+
+#log {
+  width: 100%;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.mens {
+  text-align: center;
+  color: #1f2937;
+}
+
+.campo {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+label {
+  font-weight: 700;
+  color: #1f2937;
+}
+
+#emailid,
+#senhaid,
+#nomeid,
+#csenhaid {
+  height: 46px;
+  width: 100%;
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #c7c7c7;
+  border-radius: 6px;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+#logbtn {
+  align-self: center;
+  width: 50%;
+  padding: 12px;
+  font-size: 18px;
+  font-weight: bold;
+  background-color: #c0392b;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+#logbtn:hover {
+  background-color: #a03224;
+}
+
+a {
+  color: #111;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
--- a/cadastro.html
+++ b/cadastro.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cadastro</title>
+    <link rel="stylesheet" href="cadastro.css">
+    <link rel="icon" href="imagens/icone.png">
+</head>
+<body>
+    <!-- Barrinha que fica no topo -->
+    <div id="topo">
+        <h1 id="textotop">Focus Agenda</h1>
+    </div>
+
+    <!-- Cadastro -->
+    <div id="log">
+        <h1 class="mens">Crie Sua Conta</h1>
+
+        <form id="cadastroForm" method="GET" action="login.html">
+            <div class="campo">
+                <label for="emailid">Email</label>
+                <input type="email" placeholder="Digite seu email" name="email" id="emailid" autocomplete="email" required>
+            </div>
+
+            <div class="campo">
+                <label for="nomeid">Nome</label>
+                <input type="text" placeholder="Nome de usuario" name="user" id="nomeid" autocomplete="name" required>
+            </div>
+
+            <div class="campo">
+                <label for="senhaid">Senha</label>
+                <input type="password" placeholder="Digite sua senha" name="senha" id="senhaid" autocomplete="new-password" required>
+            </div>
+
+            <div class="campo">
+                <label for="csenhaid">Confirmar Senha</label>
+                <input type="password" placeholder="Confirme sua senha" name="csenha" id="csenhaid" autocomplete="new-password" required>
+            </div>
+
+            <button type="submit" id="logbtn">Cadastrar</button>
+        </form>
+
+        <p class="mens"><a href="login.html" id="linklog">Ja tem uma conta?</a></p>
+    </div>
+
+    <script>
+        const cadastroForm = document.getElementById("cadastroForm");
+        const senhaInput = document.getElementById("senhaid");
+        const confirmarSenhaInput = document.getElementById("csenhaid");
+
+        cadastroForm.addEventListener("submit", (event) => {
+            if (senhaInput.value !== confirmarSenhaInput.value) {
+                event.preventDefault();
+                alert("As senhas nao conferem.");
+                confirmarSenhaInput.focus();
+            }
+        });
+    </script>
+</body>
+</html>
--- a/calendario.css
+++ b/calendario.css
@@ -0,0 +1,587 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Poppins', sans-serif;
+    background: #f5f5f5;
+}
+
+/* HEADER */
+#header {
+    width: 100%;
+    height: 50px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: linear-gradient(to right, #c0392b, #114455);
+    display: flex;
+    align-items: center;
+    z-index: 10;
+}
+
+#title {
+    color: #fff;
+    padding-left: 20px;
+    font-size: 28px;
+}
+
+/* BARRA ESQUERDA */
+#barraesquerda {
+    position: fixed;
+    top: 50px;
+    left: 0;
+    width: 320px;
+    height: calc(100vh - 50px);
+    background: #c0392b;
+    padding: 15px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    font-family: 'Inter', sans-serif;
+    overflow-y: auto;
+}
+
+#calendario {
+    margin-top: 10px;
+}
+
+.calendariotop {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+#mes {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+#calendarseta {
+    display: flex;
+    gap: 15px;
+}
+
+#calendarseta button {
+    background: transparent;
+    border: none;
+    color: #fff;
+    font-size: 26px;
+    cursor: pointer;
+    padding: 5px 10px;
+    transition: transform 0.2s ease;
+}
+
+#calendarseta button:hover {
+    transform: scale(1.2);
+}
+
+.calendariodia {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.calendariodia th {
+    font-size: 11px;
+    opacity: 0.8;
+}
+
+.calendariodia td {
+    text-align: center;
+    padding: 6px;
+    font-size: 12px;
+    border-radius: 50%;
+    position: relative;
+}
+
+.calendariodia td::after {
+    content: "";
+    width: 5px;
+    height: 5px;
+    background: #fff;
+    border-radius: 50%;
+    position: absolute;
+    bottom: -2px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.calendariodia td.today {
+    background: #114455;
+    color: #fff;
+    font-weight: 600;
+}
+
+.outromes {
+    opacity: 0.45;
+}
+
+/* AGENDA */
+.agenda-header {
+    margin-top: 15px;
+    border-top: 1px solid rgba(255, 255, 255, 0.3);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    padding: 8px 0;
+    font-size: 13px;
+}
+
+.agenda-empty {
+    margin-top: 10px;
+    font-size: 13px;
+    opacity: 0.85;
+}
+
+.evento {
+    margin-top: 10px;
+    padding-left: 10px;
+    border-left: 3px solid #fff;
+}
+
+.evento.azul,
+.calendar-event.azul {
+    border-color: #00c2ff;
+}
+
+.evento.verde,
+.calendar-event.verde {
+    border-color: #2ecc71;
+}
+
+.evento.vermelho,
+.calendar-event.vermelho {
+    border-color: #e74c3c;
+}
+
+.evento.roxo,
+.calendar-event.roxo {
+    border-color: #9b59b6;
+}
+
+.evento.laranja,
+.calendar-event.laranja {
+    border-color: #e67e22;
+}
+
+.evento.amarelo,
+.calendar-event.amarelo {
+    border-color: #f1c40f;
+}
+
+.evento.rosa,
+.calendar-event.rosa {
+    border-color: #ff6b81;
+}
+
+.evento.ciano,
+.calendar-event.ciano {
+    border-color: #1abc9c;
+}
+
+.evento.marinho,
+.calendar-event.marinho {
+    border-color: #2c3e50;
+}
+
+.evento.lilas,
+.calendar-event.lilas {
+    border-color: #a29bfe;
+}
+
+.evento.salmao,
+.calendar-event.salmao {
+    border-color: #fa8072;
+}
+
+.evento.menta,
+.calendar-event.menta {
+    border-color: #55efc4;
+}
+
+.hora {
+    font-size: 11px;
+    opacity: 0.8;
+}
+
+.titulo {
+    font-size: 13px;
+}
+
+.link {
+    font-size: 11px;
+    color: #ffdede;
+}
+
+/* FERIADOS */
+.feriados-header {
+    margin-top: 15px;
+    font-weight: 600;
+}
+
+.feriado {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+    font-size: 13px;
+}
+
+.dot {
+    width: 6px;
+    height: 6px;
+    background: #d4ff6a;
+    border-radius: 50%;
+    margin-top: 6px;
+    flex-shrink: 0;
+}
+
+/* MAIN */
+.main {
+    margin-left: 320px;
+    margin-top: 50px;
+    min-height: calc(100vh - 50px);
+    display: flex;
+    flex-direction: column;
+    background: #f5f5f5;
+}
+
+/* TOPBAR */
+.topbar {
+    min-height: 70px;
+    background: #eaeaea;
+    border-bottom: 3px solid #c0392b;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 25px;
+    gap: 12px;
+}
+
+.topbar h1 {
+    font-size: 24px;
+    color: #1f3b57;
+}
+
+.user-area {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.perfil {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: url('https://i.pravatar.cc/100') center/cover;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+}
+
+.nome {
+    font-weight: 600;
+    color: #1f3b57;
+}
+
+.cargo {
+    font-size: 12px;
+    color: #666;
+}
+
+.icone-img {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    object-fit: contain;
+    transition: transform 0.2s ease;
+}
+
+.icone-img:hover {
+    transform: scale(1.15);
+}
+
+/* HEADER CALENDARIO */
+.calendar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 20px;
+    background: #eee;
+    border-bottom: 1px solid #ccc;
+}
+
+.mes-nav {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: min(360px, 100%);
+    padding: 0 42px;
+}
+
+.titulo-mes {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1f3b57;
+    text-align: center;
+    width: 100%;
+}
+
+.seta {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    font-size: 22px;
+    cursor: pointer;
+    color: #c0392b;
+}
+
+.antGrande {
+    left: 8px;
+}
+
+.proxGrande {
+    right: 8px;
+}
+
+.view-switch {
+    display: flex;
+    gap: 10px;
+}
+
+.view-switch button {
+    border: none;
+    padding: 6px 14px;
+    border-radius: 8px;
+    background: transparent;
+    cursor: pointer;
+    font-weight: 500;
+    color: #1f3b57;
+}
+
+.view-switch .active {
+    background: #c0392b;
+    color: #fff;
+}
+
+/* CALENDARIO GRANDE */
+.calendar-area {
+    width: 100%;
+}
+
+.calendar-area.month-view {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: 40px repeat(6, 120px);
+}
+
+.dia-semana {
+    background: #f0f0f0;
+    text-align: center;
+    font-weight: 600;
+    font-size: 13px;
+    padding: 10px 0;
+    border: 1px solid #ddd;
+}
+
+.dia-box {
+    background: #fff;
+    border: 1px solid #ddd;
+    padding: 8px;
+    color: #1f2937;
+}
+
+.dia-box:hover {
+    background: #eaeaff;
+}
+
+.dia-box.today {
+    background: #fff5f2;
+    border-color: #c0392b;
+    font-weight: 700;
+    color: #c0392b;
+}
+
+.outro-mes {
+    opacity: 0.45;
+}
+
+.calendar-area.week-view {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(150px, 1fr));
+    gap: 0;
+    overflow-x: auto;
+    border-top: 1px solid #ddd;
+}
+
+.week-col {
+    min-height: 420px;
+    min-width: 150px;
+    border-right: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+}
+
+.week-col.today {
+    background: #fffaf8;
+}
+
+.week-col-head {
+    padding: 10px;
+    font-size: 13px;
+    font-weight: 700;
+    color: #1f3b57;
+    text-align: center;
+    border-bottom: 1px solid #ddd;
+    background: #f6f6f6;
+}
+
+.week-col-date {
+    display: block;
+    margin-top: 4px;
+    font-size: 11px;
+    font-weight: 500;
+    color: #6b7280;
+}
+
+.week-events {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.week-empty,
+.day-empty {
+    font-size: 13px;
+    color: #6b7280;
+}
+
+.calendar-area.day-view {
+    display: block;
+    padding: 16px;
+}
+
+.day-panel {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    padding: 14px;
+}
+
+.day-panel-header {
+    font-size: 15px;
+    font-weight: 700;
+    color: #1f3b57;
+    margin-bottom: 12px;
+}
+
+.day-events {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.calendar-event {
+    border-left: 3px solid #c0392b;
+    background: #fafafa;
+    border-radius: 6px;
+    padding: 8px 10px;
+}
+
+.calendar-event-hora {
+    font-size: 12px;
+    color: #6b7280;
+}
+
+.calendar-event-titulo {
+    font-size: 14px;
+    color: #1f2937;
+    margin-top: 2px;
+}
+
+/* RESPONSIVO */
+@media (max-width: 1024px) {
+    body {
+        padding-top: 50px;
+    }
+
+    #barraesquerda {
+        position: static;
+        top: auto;
+        width: 100%;
+        height: auto;
+        max-height: none;
+    }
+
+    .main {
+        margin-left: 0;
+        margin-top: 0;
+        min-height: auto;
+    }
+
+    .calendar-area.month-view {
+        grid-template-rows: 40px repeat(6, 90px);
+    }
+}
+
+@media (max-width: 700px) {
+    #title {
+        font-size: 22px;
+    }
+
+    .topbar {
+        padding: 12px 16px;
+        flex-wrap: wrap;
+    }
+
+    .topbar h1 {
+        font-size: 20px;
+    }
+
+    .calendar-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .mes-nav {
+        width: 100%;
+    }
+
+    .view-switch {
+        width: 100%;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+    }
+
+    .calendar-area.month-view {
+        grid-template-rows: 36px repeat(6, 72px);
+    }
+
+    .dia-box {
+        padding: 6px;
+        font-size: 14px;
+    }
+
+    .week-col {
+        min-height: 320px;
+    }
+
+    .calendar-area.day-view {
+        padding: 12px;
+    }
+}
--- a/calendario.html
+++ b/calendario.html
@@ -0,0 +1,526 @@
+<!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="icon" href="imagens/icone.png">
+    <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 CALENDARIO -->
+        <div id="calendario">
+            <div class="calendariotop">
+                <div id="mes"></div>
+                <div id="calendarseta">
+                    <button class="ant" aria-label="Mes anterior">&lsaquo;</button>
+                    <button class="prox" aria-label="Proximo mes">&rsaquo;</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>
+
+    <!-- CONTEUDO PRINCIPAL -->
+    <div class="main">
+        <div class="topbar">
+            <h1>Calendario</h1>
+
+            <div class="user-area">
+                <img src="imagens/sino.png" class="icone-img" alt="Notificacoes">
+
+                <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="Configuracoes">
+            </div>
+        </div>
+
+        <div class="calendar-header">
+            <div class="mes-nav">
+                <button class="seta antGrande" aria-label="Anterior">&lsaquo;</button>
+                <span class="titulo-mes">Janeiro, 2025</span>
+                <button class="seta proxGrande" aria-label="Proximo">&rsaquo;</button>
+            </div>
+
+            <div class="view-switch">
+                <button type="button" data-view="dia">Dia</button>
+                <button type="button" data-view="semana">Semana</button>
+                <button type="button" data-view="mes" class="active">Mes</button>
+            </div>
+        </div>
+
+        <!-- CALENDARIO GRANDE -->
+        <div class="calendar-area month-view" id="calendarArea"></div>
+    </div>
+
+    <script>
+        let dataMini = new Date();
+        let dataGrande = new Date();
+        let modoAtual = "mes";
+
+        const meses = [
+            "Janeiro", "Fevereiro", "Marco", "Abril",
+            "Maio", "Junho", "Julho", "Agosto",
+            "Setembro", "Outubro", "Novembro", "Dezembro"
+        ];
+
+        const nomesDiaLongo = [
+            "Domingo", "Segunda", "Terca", "Quarta", "Quinta", "Sexta", "Sabado"
+        ];
+
+        const nomesDiaCurto = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"];
+
+        function normalizarData(data) {
+            return new Date(data.getFullYear(), data.getMonth(), data.getDate());
+        }
+
+        function adicionarDias(data, quantidade) {
+            const novaData = new Date(data);
+            novaData.setDate(novaData.getDate() + quantidade);
+            return novaData;
+        }
+
+        function formatarISO(data) {
+            const ano = data.getFullYear();
+            const mes = String(data.getMonth() + 1).padStart(2, "0");
+            const dia = String(data.getDate()).padStart(2, "0");
+            return `${ano}-${mes}-${dia}`;
+        }
+
+        function formatarDataCurta(data) {
+            const dia = String(data.getDate()).padStart(2, "0");
+            const mes = String(data.getMonth() + 1).padStart(2, "0");
+            return `${dia}/${mes}`;
+        }
+
+        function obterInicioSemana(data) {
+            const inicio = normalizarData(data);
+            inicio.setDate(inicio.getDate() - inicio.getDay());
+            return inicio;
+        }
+
+        function extrairMinutos(horaIntervalo) {
+            const inicio = horaIntervalo.split("-")[0].trim();
+            const [hora, minuto] = inicio.split(":").map(Number);
+            return hora * 60 + minuto;
+        }
+
+        const hojeBase = normalizarData(new Date());
+
+        const agendaData = [
+            { data: formatarISO(hojeBase), hora: "08:15 - 09:15", titulo: "Planejamento do dia", cor: "vermelho" },
+            { data: formatarISO(hojeBase), hora: "10:00 - 11:00", titulo: "Reuniao rapida", cor: "rosa" },
+            { data: formatarISO(adicionarDias(hojeBase, 1)), hora: "14:00 - 15:00", titulo: "Revisar tarefas", cor: "azul" },
+            { data: formatarISO(adicionarDias(hojeBase, 3)), hora: "16:00 - 17:00", titulo: "Entrega parcial", cor: "verde" }
+        ];
+
+        const feriadosData = [
+            { texto: "01 - Ano Novo" }
+        ];
+
+        function obterEventosDaData(data) {
+            const chave = formatarISO(normalizarData(data));
+            return agendaData
+                .filter((evento) => evento.data === chave)
+                .sort((a, b) => extrairMinutos(a.hora) - extrairMinutos(b.hora));
+        }
+
+        function atualizarTituloGrande() {
+            const titulo = document.querySelector(".titulo-mes");
+
+            if (modoAtual === "mes") {
+                titulo.textContent = `${meses[dataGrande.getMonth()]}, ${dataGrande.getFullYear()}`;
+                return;
+            }
+
+            if (modoAtual === "semana") {
+                const inicio = obterInicioSemana(dataGrande);
+                const fim = adicionarDias(inicio, 6);
+                titulo.textContent = `Semana ${formatarDataCurta(inicio)} - ${formatarDataCurta(fim)}/${fim.getFullYear()}`;
+                return;
+            }
+
+            titulo.textContent = `${nomesDiaLongo[dataGrande.getDay()]}, ${formatarDataCurta(dataGrande)}/${dataGrande.getFullYear()}`;
+        }
+
+        function configurarArea(classeModo) {
+            const area = document.getElementById("calendarArea");
+            area.className = `calendar-area ${classeModo}`;
+            area.replaceChildren();
+            return area;
+        }
+
+        function criarCardEvento(evento) {
+            const card = document.createElement("div");
+            card.className = `calendar-event ${evento.cor}`;
+
+            const hora = document.createElement("div");
+            hora.className = "calendar-event-hora";
+            hora.textContent = evento.hora;
+
+            const titulo = document.createElement("div");
+            titulo.className = "calendar-event-titulo";
+            titulo.textContent = evento.titulo;
+
+            card.appendChild(hora);
+            card.appendChild(titulo);
+            return card;
+        }
+
+        /* MINI CALENDARIO */
+        function renderCalendarioMini() {
+            const mesEl = document.getElementById("mes");
+            const diasEl = document.getElementById("dias");
+
+            const ano = dataMini.getFullYear();
+            const mes = dataMini.getMonth();
+
+            mesEl.textContent = `${meses[mes]} ${ano}`;
+            diasEl.replaceChildren();
+
+            const primeiroDia = new Date(ano, mes, 1).getDay();
+            const ultimoDia = new Date(ano, mes + 1, 0).getDate();
+            const ultimoDiaMesAnterior = new Date(ano, mes, 0).getDate();
+
+            let diaAtualNum = 1;
+            let diaSeguinte = 1;
+
+            const totalCelulas = primeiroDia + ultimoDia;
+            let totalLinhas = Math.ceil(totalCelulas / 7);
+            if (totalLinhas < 4) totalLinhas = 4;
+
+            for (let semana = 0; semana < totalLinhas; semana++) {
+                const linha = document.createElement("tr");
+
+                for (let diaSemana = 0; diaSemana < 7; diaSemana++) {
+                    const pos = semana * 7 + diaSemana;
+                    const celula = document.createElement("td");
+
+                    if (pos < primeiroDia) {
+                        const dia = ultimoDiaMesAnterior - (primeiroDia - pos - 1);
+                        celula.className = "outromes";
+                        celula.textContent = String(dia);
+                    } else if (diaAtualNum <= ultimoDia) {
+                        const hoje = new Date();
+                        const isHoje =
+                            diaAtualNum === hoje.getDate() &&
+                            mes === hoje.getMonth() &&
+                            ano === hoje.getFullYear();
+
+                        if (isHoje) {
+                            celula.className = "today";
+                        }
+
+                        celula.textContent = String(diaAtualNum);
+                        diaAtualNum++;
+                    } else {
+                        celula.className = "outromes";
+                        celula.textContent = String(diaSeguinte);
+                        diaSeguinte++;
+                    }
+
+                    linha.appendChild(celula);
+                }
+
+                diasEl.appendChild(linha);
+            }
+        }
+
+        /* CALENDARIO GRANDE - MES */
+        function renderCalendarioMes() {
+            const area = configurarArea("month-view");
+            atualizarTituloGrande();
+
+            nomesDiaCurto.forEach((dia) => {
+                const el = document.createElement("div");
+                el.className = "dia-semana";
+                el.textContent = dia;
+                area.appendChild(el);
+            });
+
+            const ano = dataGrande.getFullYear();
+            const mes = dataGrande.getMonth();
+            const primeiroDia = new Date(ano, mes, 1).getDay();
+            const ultimoDia = new Date(ano, mes + 1, 0).getDate();
+            const ultimoMesAnterior = new Date(ano, mes, 0).getDate();
+
+            const totalCelulasMes = 42;
+            let proximoDia = 1;
+
+            for (let i = 0; i < totalCelulasMes; i++) {
+                const box = document.createElement("div");
+                box.className = "dia-box";
+
+                if (i < primeiroDia) {
+                    box.classList.add("outro-mes");
+                    box.textContent = String(ultimoMesAnterior - (primeiroDia - i - 1));
+                } else if (i < primeiroDia + ultimoDia) {
+                    const diaAtual = i - primeiroDia + 1;
+                    box.textContent = String(diaAtual);
+
+                    const hoje = new Date();
+                    const isHoje =
+                        diaAtual === hoje.getDate() &&
+                        mes === hoje.getMonth() &&
+                        ano === hoje.getFullYear();
+
+                    if (isHoje) {
+                        box.classList.add("today");
+                    }
+                } else {
+                    box.classList.add("outro-mes");
+                    box.textContent = String(proximoDia++);
+                }
+
+                area.appendChild(box);
+            }
+        }
+
+        /* CALENDARIO GRANDE - SEMANA */
+        function renderCalendarioSemana() {
+            const area = configurarArea("week-view");
+            atualizarTituloGrande();
+
+            const inicioSemana = obterInicioSemana(dataGrande);
+
+            for (let i = 0; i < 7; i++) {
+                const dataColuna = adicionarDias(inicioSemana, i);
+                const eventos = obterEventosDaData(dataColuna);
+
+                const coluna = document.createElement("div");
+                coluna.className = "week-col";
+
+                const cabecalho = document.createElement("div");
+                cabecalho.className = "week-col-head";
+                cabecalho.textContent = nomesDiaCurto[dataColuna.getDay()];
+
+                const numero = document.createElement("span");
+                numero.className = "week-col-date";
+                numero.textContent = `${formatarDataCurta(dataColuna)}/${dataColuna.getFullYear()}`;
+                cabecalho.appendChild(numero);
+
+                if (
+                    dataColuna.getDate() === new Date().getDate() &&
+                    dataColuna.getMonth() === new Date().getMonth() &&
+                    dataColuna.getFullYear() === new Date().getFullYear()
+                ) {
+                    coluna.classList.add("today");
+                }
+
+                const lista = document.createElement("div");
+                lista.className = "week-events";
+
+                if (eventos.length === 0) {
+                    const vazio = document.createElement("div");
+                    vazio.className = "week-empty";
+                    vazio.textContent = "Sem eventos";
+                    lista.appendChild(vazio);
+                } else {
+                    eventos.forEach((evento) => {
+                        lista.appendChild(criarCardEvento(evento));
+                    });
+                }
+
+                coluna.appendChild(cabecalho);
+                coluna.appendChild(lista);
+                area.appendChild(coluna);
+            }
+        }
+
+        /* CALENDARIO GRANDE - DIA */
+        function renderCalendarioDia() {
+            const area = configurarArea("day-view");
+            atualizarTituloGrande();
+
+            const eventos = obterEventosDaData(dataGrande);
+
+            const painel = document.createElement("div");
+            painel.className = "day-panel";
+
+            const cabecalho = document.createElement("div");
+            cabecalho.className = "day-panel-header";
+            cabecalho.textContent = `Agenda de ${formatarDataCurta(dataGrande)}/${dataGrande.getFullYear()}`;
+
+            const lista = document.createElement("div");
+            lista.className = "day-events";
+
+            if (eventos.length === 0) {
+                const vazio = document.createElement("div");
+                vazio.className = "day-empty";
+                vazio.textContent = "Nenhum evento para este dia.";
+                lista.appendChild(vazio);
+            } else {
+                eventos.forEach((evento) => {
+                    lista.appendChild(criarCardEvento(evento));
+                });
+            }
+
+            painel.appendChild(cabecalho);
+            painel.appendChild(lista);
+            area.appendChild(painel);
+        }
+
+        function renderCalendarioGrande() {
+            if (modoAtual === "dia") {
+                renderCalendarioDia();
+                return;
+            }
+
+            if (modoAtual === "semana") {
+                renderCalendarioSemana();
+                return;
+            }
+
+            renderCalendarioMes();
+        }
+
+        function renderAgenda() {
+            const container = document.getElementById("agenda");
+            container.replaceChildren();
+
+            const header = document.createElement("div");
+            header.className = "agenda-header";
+
+            const strong = document.createElement("strong");
+            strong.textContent = "HOJE ";
+            header.appendChild(strong);
+
+            const hoje = new Date();
+            header.appendChild(document.createTextNode(new Intl.DateTimeFormat("pt-BR").format(hoje)));
+            container.appendChild(header);
+
+            const eventosHoje = obterEventosDaData(hoje);
+
+            if (eventosHoje.length === 0) {
+                const vazio = document.createElement("div");
+                vazio.className = "agenda-empty";
+                vazio.textContent = "Sem eventos para hoje.";
+                container.appendChild(vazio);
+                return;
+            }
+
+            eventosHoje.forEach((ev) => {
+                const evento = document.createElement("div");
+                evento.className = `evento ${ev.cor}`;
+
+                const hora = document.createElement("div");
+                hora.className = "hora";
+                hora.textContent = ev.hora;
+
+                const titulo = document.createElement("div");
+                titulo.className = "titulo";
+                titulo.textContent = ev.titulo;
+
+                evento.appendChild(hora);
+                evento.appendChild(titulo);
+                container.appendChild(evento);
+            });
+        }
+
+        function renderFeriados() {
+            const container = document.getElementById("feriados");
+            container.replaceChildren();
+
+            const header = document.createElement("div");
+            header.className = "feriados-header";
+            header.textContent = "FERIADOS";
+            container.appendChild(header);
+
+            feriadosData.forEach((f) => {
+                const item = document.createElement("div");
+                item.className = "feriado";
+
+                const dot = document.createElement("span");
+                dot.className = "dot";
+
+                const texto = document.createElement("span");
+                texto.textContent = f.texto;
+
+                item.appendChild(dot);
+                item.appendChild(texto);
+                container.appendChild(item);
+            });
+        }
+
+        function moverPeriodo(direcao) {
+            if (modoAtual === "dia") {
+                dataGrande.setDate(dataGrande.getDate() + direcao);
+            } else if (modoAtual === "semana") {
+                dataGrande.setDate(dataGrande.getDate() + (direcao * 7));
+            } else {
+                dataGrande.setMonth(dataGrande.getMonth() + direcao);
+            }
+
+            renderCalendarioGrande();
+        }
+
+        function ativarBotaoModo(modo) {
+            const botoes = document.querySelectorAll(".view-switch button");
+            botoes.forEach((botao) => {
+                botao.classList.toggle("active", botao.dataset.view === modo);
+            });
+        }
+
+        document.querySelector(".prox").onclick = () => {
+            dataMini.setMonth(dataMini.getMonth() + 1);
+            renderCalendarioMini();
+        };
+
+        document.querySelector(".ant").onclick = () => {
+            dataMini.setMonth(dataMini.getMonth() - 1);
+            renderCalendarioMini();
+        };
+
+        document.querySelector(".antGrande").onclick = () => moverPeriodo(-1);
+        document.querySelector(".proxGrande").onclick = () => moverPeriodo(1);
+
+        document.querySelectorAll(".view-switch button").forEach((btn) => {
+            btn.addEventListener("click", () => {
+                modoAtual = btn.dataset.view;
+                ativarBotaoModo(modoAtual);
+                renderCalendarioGrande();
+            });
+        });
+
+        renderCalendarioMini();
+        renderCalendarioGrande();
+        renderAgenda();
+        renderFeriados();
+    </script>
+</body>
+</html>
--- a/fundo1.png
+++ b/fundo1.png
--- a/imagens/engrenagem.png
+++ b/imagens/engrenagem.png
--- a/imagens/icone.png
+++ b/imagens/icone.png
--- a/imagens/sino.png
+++ b/imagens/sino.png
--- a/login.css
+++ b/login.css
@@ -0,0 +1,100 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 20px 20px;
+  background: #f5f5f5;
+}
+
+#topo {
+  width: 100%;
+  height: 50px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to right, #c0392b 47%, #7a4951 73%, #114455 87%);
+  display: flex;
+  align-items: center;
+  z-index: 10;
+}
+
+#textotop {
+  padding-left: 20px;
+  font-size: clamp(22px, 5vw, 38px);
+  color: #fff;
+}
+
+#log {
+  width: 100%;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.mens {
+  text-align: center;
+  color: #1f2937;
+}
+
+.campo {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+label {
+  font-weight: 700;
+  color: #1f2937;
+}
+
+#emailid,
+#senhaid {
+  height: 46px;
+  width: 100%;
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #c7c7c7;
+  border-radius: 6px;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+#logbtn {
+  align-self: center;
+  width: 50%;
+  padding: 12px;
+  font-size: 18px;
+  font-weight: bold;
+  background-color: #c0392b;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+#logbtn:hover {
+  background-color: #a03224;
+}
+
+#linkcada {
+  color: #111;
+  text-decoration: none;
+}
+
+#linkcada:hover {
+  text-decoration: underline;
+}
--- a/login.html
+++ b/login.html
@@ -1,49 +1,38 @@
-<!DOCTYPE html>
-<html lang="pt-br">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="style.css">
-    <title>TCC de cria</title>
-
-</head>
-
-<body>
-
-    <!--Barrinha que fica no topo-->
-    <div id="topo">
-        <h1 id="textotop">Focus Agenda</h1>
-    </div>
-    <!--cabo bar-->
-
-    <!--Login e outras coisas-->
-    <div id="log">
-        <h1 class="mens">Bem Vindo!</h1>
-
-        <h3 class="mens">Faça seu login</h3>
-
-
-        <form method="POST" action="login.php">
-            <div class="campo">
-                <label for="emailid">Email</label>
-                <input type="email" placeholder="Digite seu email" name="email" id="emailid" required>
-            </div>
-
-            <div class="campo">
-                <label for="senhaid">Senha</label>
-                <input type="password" placeholder="Digite sua senha" name="senha" id="senhaid" required>
-            </div>
-            <button type="submit" id="logbtn">Logar</button>
-        </form>
-        <p class="mens">Cadastrar-se</p>
-    </div>
-    <!--cabo log-->
-
-
-
-
-</body>
-
-
-</html>
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="imagens/icone.png">
+    <link rel="stylesheet" href="login.css">
+    <title>Login</title>
+</head>
+<body>
+    <!-- Barrinha que fica no topo -->
+    <div id="topo">
+        <h1 id="textotop">Focus Agenda</h1>
+    </div>
+
+    <!-- Login -->
+    <div id="log">
+        <h1 class="mens">Bem-vindo!</h1>
+        <h3 class="mens">Fa&ccedil;a seu login</h3>
+
+        <form method="GET" action="calendario.html">
+            <div class="campo">
+                <label for="emailid">Email</label>
+                <input type="email" placeholder="Digite seu email" name="email" id="emailid" autocomplete="email" required>
+            </div>
+
+            <div class="campo">
+                <label for="senhaid">Senha</label>
+                <input type="password" placeholder="Digite sua senha" name="senha" id="senhaid" autocomplete="current-password" required>
+            </div>
+
+            <button type="submit" id="logbtn">Logar</button>
+        </form>
+
+        <p class="mens"><a href="cadastro.html" id="linkcada">Cadastrar-se</a></p>
+    </div>
+</body>
+</html>
--- a/style.css
+++ b/style.css
@@ -1,129 +0,0 @@
-  * {
-      padding: 0;
-      margin: 0;
-  }
-
-  p,
-  h1,
-  h2,
-  h3 {
-      margin: 0;
-      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
-  }
-
-label{
-    display: block;
-}
-
- body {
-    background-image: url(imagens/fundo1.png);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-attachment: fixed;
-
-    height: 100vh;
-    display: flex;
-    justify-content: flex-start; 
-    align-items: center;        
-    padding-left: 300px;  
- }
-
- @media (max-width: 768px) {
-    body {
-      padding-left: 20px;
-      padding-right: 20px;
-      justify-content: center;
-    }
- }
-
- @media (max-width: 480px) {
-    #log {
-      width: 100% !important;
-      max-width: 320px;
-    }
- }     
-  #topo {
-      width: 100%;
-      height: 70px;
-      background-color: #111;
-      position: fixed;
-      top: 0;
-      left: 0;
-      background: linear-gradient(to right, #C0392B 47%, #7A4951 73%, #114455 87%);
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      padding-left: 20px;
-
-  }
-
-  #textotop {
-      font-size: 48px;
-      margin: 0;
-      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-  }
-
-  #log {
-      margin-top: 70px;
-      width: 350px;
-      display: flex;
-      flex-direction: column;
-      gap: 15px;
-      color: white;
-      margin: 0;
-  }
-  #campo {
-      display: flex;
-      flex-direction: column;
-      gap: 15px;
-      align-self: center;
-  }
-  #menslog{
-    font-size: 20px;
-  }
-
-   #emailid, #senhaid {
-    height: 50px;
-    width: 100%;
-    padding: 10px;
-    font-size: 16px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-sizing: border-box;
-  }
-
-  label {
-    display: block;
-    margin-bottom: 5px;
-    font-weight: bold;
-    color: white;
-  }
-
-  form {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    width: 100%;
-  }
-
-  #logbtn {
-    align-self: center;
-    width: 50%;
-    padding: 12px;
-    font-size: 18px;
-    font-weight: bold;
-    background-color: #C0392B;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.3s;
-  }
-
-  #logbtn:hover {
-    background-color: #A03224;
-  }
-  .mens {
-    align-self: center;
-  }
Author	SHA1	Message	Date
Sala Maker - Note. 08	3ed2fcf0b7	Correção de bugs	2026-03-24 20:27:51 -03:00
Sala Maker - Note. 08	507f32e392	Correção do CSS do login	2026-03-24 19:44:21 -03:00
Gustavo	f675979736	Atualização do calendario	2026-03-23 09:40:59 -03:00
Gustavo	c49f619569	Atualização do calendarii	2026-03-23 08:50:26 -03:00
Gustavo	185946a3c6	Atualização do calendario	2026-03-23 06:55:02 -03:00
Gustavo	f4223fae6d	Correção de de erros	2026-03-14 15:48:13 -03:00
Gustavo	b61b704af7	Optimização dos sites e atualização do calendario	2026-03-14 15:30:22 -03:00
Sala Maker - Note. 15 (carrinho)	683ab959f2	Criação da pagina calendario	2026-03-10 20:47:56 -03:00
Sala Maker - Note. 15 (carrinho)	7e8dec9c26	Junção da pagina de cadastro e de login	2026-03-10 20:10:19 -03:00
Sala Maker - Note. 17 (carrinho)	9aa9855498	Atualização	2026-03-03 20:17:00 -03:00
Sala Maker - Note. 17 (carrinho)	79da5450e2	update	2026-03-03 20:04:40 -03:00
Sala Maker - Note. 17 (carrinho)	f26755deaa	update	2026-03-03 19:41:28 -03:00
Gustavo	9eb90bf2ec	Remove submódulo FrontFocusAgenda	2026-03-01 17:04:04 -03:00
Gustavo	e0dff0ec3d	Remoção do fundo para melhor estilização	2026-03-01 16:49:38 -03:00