<a href="Projetos/Anne e Flávia/trabalho de 10p/">
Trabalho de Anne e Flávia
</a>

<a href="Projetos/erica,ana,vitoria,kaua/coca,cola/">
Coca-Cola
</a>

<a href="Projetos/Ana Julya e Mª Eduarda/3° ano Cainan/quiz portugues/">
Quiz de Português
</a>

<button onclick="window.location.href='Projetos/Erica,Ana%20Vitória%20e%20Kauã/coca%20cola/'">
Abrir Projeto
</button>

📁 Parte 1: Ajustes no HTML (index.html)
O seu HTML atual tem algumas tags perdidas (como um </tbody> solto e seções desalinhadas) que quebram o layout e impedem o cadastro de funcionar direito.

Passo 1: Substituir a área de Cadastro e Tabela
Procure no seu HTML o bloco que começa com <section> (onde estão os inputs de cadastro) até o final da tabela antiga. Substitua todo esse meio pelo trecho corrigido abaixo:

HTML
<section class="cadastro">
<h2>Cadastrar Novo Aluno</h2>
<div class="campo">
<input id="novoNome" type="text" placeholder="Nome Completo">
<input id="novoPlano" type="text" placeholder="Plano (Ex: Mensal, Anual)">
<input id="novoVencimento" type="text" placeholder="Vencimento (Ex: 10/08/2026)">
<button id="btnCadastrar">Cadastrar</button>
</div>
</section>

<section class="tabela">
<h2>Lista de Alunos</h2>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Plano</th>
<th>Pagamento</th>
<th>Vencimento</th>
</tr>
</thead>
<tbody id="listaAlunos">
</tbody>
</table>
</section>
📁 Parte 2: Atualizações no JavaScript (script.js)
Vamos atualizar o seu arquivo de lógica em etapas para ativar o banco de dados dinâmico e o salvamento automático.

Passo 2: Mudar a declaração do Banco de Dados (LocalStorage)
No topo do seu script.js, apague a lista antiga const alunos = [...] e substitua por esta estrutura inteligente. Ela tenta buscar os alunos salvos no navegador; se não achar nada, carrega os 4 alunos padrão:

JavaScript
// Se já existirem alunos salvos, carrega eles. Se não, usa a lista padrão.
const alunos = JSON.parse(localStorage.getItem("academia_alunos")) || [
{
nome: "João Silva",
plano: "Mensal",
pagamento: "Em dia",
vencimento: "05/07/2026",
presenca: "01/07/2026"
},
{
nome: "Maria Souza",
plano: "Anual",
pagamento: "Pendente",
vencimento: "03/06/2026",
presenca: "20/06/2026"
},
{
nome: "Carlos Lima",
plano: "Trimestral",
pagamento: "Em dia",
vencimento: "18/07/2026",
presenca: "30/06/2026"
},
{
nome: "Ana Oliveira",
plano: "Semestral",
pagamento: "Em dia",
vencimento: "15/07/2026",
presenca: "02/07/2026"
}
];

// Função rápida para salvar as alterações no navegador
function salvarNoBanco() {
localStorage.setItem("academia_alunos", JSON.stringify(alunos));
}
Passo 3: Mapear os novos elementos do HTML
Logo abaixo de onde você declara as variáveis (const campoPesquisa..., const nomeAluno...), adicione essas novas linhas. O JavaScript precisa delas para saber onde colocar os dados do Dashboard e da Tabela:

JavaScript
// Seletores para o Dashboard
const totalAlunos = document.querySelector(".dashboard .card:nth-child(1) span");
const emDiaAlunos = document.querySelector(".dashboard .card:nth-child(2) span");
const pendentesAlunos = document.querySelector(".dashboard .card:nth-child(3) span");

// Seletor do botão de cadastro e do corpo da tabela
const btnCadastrar = document.querySelector("#btnCadastrar");
const tabelaCorpo = document.querySelector("#listaAlunos");
Passo 4: Adicionar a função de Atualização Visual
Adicione esta nova função em qualquer parte livre do seu código (pode ser antes ou depois da função de pesquisa). Ela limpa a tabela antiga, lê o seu array de alunos atualizado e reconstrói a tela com os dados e contadores novos:

JavaScript
function atualizarInterface() {
// Limpa a tabela antes de desenhar para não duplicar dados
tabelaCorpo.innerHTML = "";

// Preenche a tabela linha por linha
alunos.forEach(function(aluno) {
const linha = document.createElement("tr");

// Define a cor do texto do pagamento baseado no status
const corPagamento = aluno.pagamento.toLowerCase() === "em dia" ? "lime" : "red";

linha.innerHTML = `
<td>${aluno.nome}</td>
<td>${aluno.plano}</td>
<td style="color: ${corPagamento}; font-weight: bold;">${aluno.pagamento}</td>
<td>${aluno.vencimento}</td>
`;
tabelaCorpo.appendChild(linha);
});

// Calcula os números do Dashboard filtrando o array
const total = alunos.length;
const emDia = alunos.filter(a => a.pagamento.toLowerCase() === "em dia").length;
const pendentes = alunos.filter(a => a.pagamento.toLowerCase() === "pendente").length;

// Injeta os valores calculados nos cards do HTML
totalAlunos.textContent = total;
emDiaAlunos.textContent = emDia;
pendentesAlunos.textContent = pendentes;
}
Passo 5: Substituir a função antiga cadastrarAluno
Apague a sua função cadastrarAluno antiga e o evento btnCadastrar.addEventListener do final do código e coloque esta versão atualizada. Ela impede cadastros vazios, limpa os campos após o clique, salva as mudanças no navegador e atualiza a tela na hora:

JavaScript
// Registra o evento do botão de cadastro
btnCadastrar.addEventListener("click", cadastrarAluno);

function cadastrarAluno(){
// Validação básica: não deixa cadastrar se algum campo estiver em branco
if(novoNome.value.trim() === "" || novoPlano.value.trim() === "" || novoVencimento.value.trim() === "") {
alert("Por favor, preencha todos os campos para cadastrar o aluno.");
return;
}

const novoAluno = {
nome: novoNome.value.trim(),
plano: novoPlano.value.trim(),
pagamento: "Em dia", // Todo aluno novo começa ativo por padrão
vencimento: novoVencimento.value.trim(),
presenca: "Ainda não treinou"
};

// Adiciona na lista na memória
alunos.push(novoAluno);

// Salva no LocalStorage do navegador
salvarNoBanco();

// Limpa as caixas de texto do formulário
novoNome.value = "";
novoPlano.value = "";
novoVencimento.value = "";

// Atualiza o painel e a tabela instantaneamente
atualizarInterface();
}

// ATENÇÃO: Chame esta função na última linha do seu script para a página já iniciar desenhada!
atualizarInterface();
Pronto! Realizando esses 5 passos, seu sistema agora é dinâmico. Quando você cadastrar um aluno, os cards lá em cima vão mudar os números automaticamente, a tabela vai ganhar uma linha nova e, se você der F5 na página, os dados continuarão salvos ali.

Qual desses passos você quer testar primeiro ou precisa de ajuda para entender a lógica de alguma linha?

.hero-container {
/* O linear-gradient cria uma camada escura sobre a imagem */
background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
url('fu.jpg');
background-size: cover;
background-position: center;
}

https://drive.google.com/drive/folders/1rwXwqEQ-64jQdaqlzRnQoyAml3s4AKRU?usp=sharing

<div class="menu-app">

<header class="hero">
<div class="hero-overlay"></div>
<div class="hero-content">
<p class="eyebrow">Sabor que impressiona em cada mordida</p>

<h1>BURGER HOUSE <br>IMPÉRIO</h1>

<p class="tagline">
Os melhores hambúrgueres da cidade.
</p>

<div class="forecast">
🌤 Previsão para Hoje:
<span>90% de fome • 100% de vontade de hambúrguer</span>
</div>
</div>
</header>

<main class="menu-layout">
<section class="menu-section">
<div class="section-title">
<h2>Sanduíche de Destaque</h2>
</div>

<article class="featured-card">
<div class="sticker">O MAIS PEDIDO</div>
<h3>O MONSTRO DA FOME</h3>
<p class="menu-desc">
Hambúrguer artesanal de 180g, queijo cheddar derretido, bacon crocante, cebola caramelizada e molho especial da casa no pão brioche tostado.
</p>
<p class="menu-note">
"Alguns clientes tentaram terminar sozinhos. Nem todos conseguiram."

</p>
<span class="price">R$ 29,90</span>
</article>

<div class="section-title">
<h2>CARDÁPIO DE LANCHES</h2>
</div>

<div class="menu-grid">
<article class="menu-card">
<h3>O CHEF SEM FREIO</h3>
<p class="menu-desc">
Hambúrguer artesanal, cheddar, bacon, alface e tomate.
</p>

<p class="menu-note">
"Pode causar vontade de pedir outro."
</p>
<span>R$ 24,90</span>
</article>

<article class="menu-card">
<h3>DERRETIDO DA CASA</h3>
<p class="menu-desc">Pão australiano, carne grelhada e muito queijo derretido.</p>
<p class="menu-note">"Guardanapos recomendados."</p>
<span>R$ 26,90</span>
</article>

<article class="menu-card">
<h3>WRAP DO ESTAGIÁRIO</h3>
<p class="menu-desc">Frango grelhado, alface, tomate e molho especial.</p>
<p class="menu-note">"Simples, eficiente e sempre entrega."</p>
<span>R$ 19,90</span>
</article>

<article class="menu-card">
<h3>Club do Frango do Farol</h3>
<p class="menu-desc">Sanduíche club de frango em camadas com bacon, tomate, alface e a confiança de quem tem vista para o mar.</p>
<p class="menu-note">Visível de vários telhados famintos ao redor.</p>
<span>R$ 14,00</span>
</article>

<article class="menu-card">
<h3>CLUBE DA FOME</h3>
<p class="menu-desc">Frango empanado, bacon, queijo e salada fresca.</p>
<p class="menu-note""Para quem pulou o café e o almoço.".</p>
<span>R$ 28,90</span>
</article>

<article class="menu-card">
<h3>A Isca do Calçadão</h3>
<p class="menu-desc">Filé de frango crocante com cheddar e molho da casa.</p>
<p class="menu-note">"Ninguém consegue fingir que não gostou."</p>
<span>R$ 23,90</span>
</article>

</div>
</section>

<aside class="sidebar">
<div class="notice-board">
<h2>Avisos da Cabana</h2>
<ul>
<li>⚠ Não discuta com o chef sobre o ponto da carne</li>
<li>⚠ Batatas fritas desaparecem sem explicação</li>
<li>⚠ Pedidos feitos com fome extrema podem ser exagerados</li>
<li>⚠ Último cliente que pediu "só uma batatinha" saiu com combo completo</li>
</ul>
</div>

<div class="drinks-board">
<h2>Bebidas Geladas</h2>

<div class="drink-item">
<span>Refrigerante Tradicional</span>
<strong>R$ 6</strong>
</div>

<div class="drink-item">
<span>Suco Natural do Dia</span>
<strong>R$ 8</strong>
</div>

<div class="drink-item">
<span>Chá Gelado da Casa</span>
<strong>R$ 7</strong>
</div>

<div class="drink-item">
<span>Água Mineral</span>
<strong>R$ 4</strong>
</div>

<div class="drink-item">
<span>Milkshake Cremoso</span>
<strong>R$ 14</strong>
</div>
</div>

<div class="status-box">
<p>Uma mordida e você vai entender por que todo mundo...</p>
<h3>volta</h3>
</div>
</aside>
</main>

<footer class="footer">
<p>Aberto das 18:00 ás 23:00</p>
<p>Bairro Jerônimo N13, rua Jerusalem •</p>
<p>(555) 555-GULL</p>
</footer>
</div>


@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;700&family=Permanent+Marker&display=swap");

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: #f3ead7;
font-family: "Inter", sans-serif;
color: #1f3a4d;
}

.menu-app {
min-height: 100vh;
}

.hero {
position: relative;
min-height: 60vh;
background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
url("https://i.pinimg.com/1200x/0c/ac/c9/0cacc9abcaa47092e06f6e6bc7cfece4.jpg")
center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 20px;
padding-bottom: 120px;
}

.hero::after {
content: "⚠ ZONA DE PERIGO, MUITAS COISAS GOSTOSAS";
position: absolute;
bottom: 25px;
right: 25px;
background: #ff8b6b;
color: white;
padding: 10px 18px;
border-radius: 999px;
font-size: 0.8rem;
letter-spacing: 1px;
}

.hero-content {
position: relative;
z-index: 2;
max-width: 700px;
color: white;
}

.eyebrow {
letter-spacing: 3px;
margin-bottom: 12px;
opacity: 0.8;
}

.hero h1 {
font-family: "Bebas Neue", sans-serif;
font-size: clamp(4rem, 10vw, 7rem);
line-height: 0.9;
letter-spacing: 2px;
}

.tagline {
margin-top: 18px;
font-size: 1.2rem;
}

.forecast {
margin-top: 20px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 14px 30px;
border-radius: 14px;
display: inline-flex;
flex-direction: column;
gap: 5px;
}

.menu-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
padding: 50px 6%;
background: rgba(255,69,0);
}

.section-title {
margin-bottom: 20px;
}

.section-title h2 {
font-family: "Bebas Neue", sans-serif;
font-size: 2.2rem;
letter-spacing: 1px;
color: black;
}

.featured-card {
position: relative;
background: #fffaf1;
border-radius: 24px;
padding: 35px;
margin-bottom: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
overflow: visible;
}

.sticker {
position: absolute;
top: 20px;
right: -35px;
background: #ff8b6b;
color: white;
padding: 8px 40px;
transform: rotate(18deg);
font-size: 0.8rem;
font-weight: bold;
}

.featured-card h3 {
font-family: "Bebas Neue", sans-serif;
font-size: 3rem;
margin-bottom: 12px;
}

.menu-desc {
max-width: 500px;
line-height: 1.7;
margin-bottom: 20px;
}

.menu-desc {
line-height: 1.6;
color: #35566c;
margin-bottom: 12px;
}

.menu-note {
font-size: 0.9rem;
font-style: italic;
opacity: 0.75;
margin-bottom: 20px;
}

.price {
font-size: 1.6rem;
font-weight: bold;
color: #4c89a8;
}

.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 22px;
}

.menu-card {
background: white;
border-radius: 20px;
padding: 24px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
transition: 0.3s ease;
display: flex;
flex-direction: column;
}

.menu-card:hover {
transform: translateY(-6px) rotate(-1deg);
}

.menu-card h3 {
font-family: "Bebas Neue", sans-serif;
font-size: 2rem;
margin-bottom: 10px;
}

.menu-card p {
line-height: 1.6;
margin-bottom: 20px;
flex-grow: 1;
}

.menu-card span {
color: #ff8b6b;
font-weight: bold;
margin-top: auto;
}

.sidebar {
display: flex;
flex-direction: column;
gap: 24px;
}

.notice-board,
.drinks-board,
.status-box {
background: white;
border-radius: 22px;
padding: 26px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.notice-board h2,
.drinks-board h2 {
font-family: "Permanent Marker", cursive;
margin-bottom: 18px;
}

.notice-board ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
line-height: 1.5;
}

.drink-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}

.drink-item:last-child {
border-bottom: none;
}

.status-box {
text-align: center;
background: #1f3a4d;
color: white;
}

.status-box p {
letter-spacing: 2px;
opacity: 0.7;
margin-bottom: 10px;
}

.status-box h3 {
font-family: "Bebas Neue", sans-serif;
font-size: 3rem;
}

.footer {
text-align: center;
padding: 40px 20px 60px;
line-height: 1.8;
color: #35566c;
}

@media (max-width: 900px) {
.menu-layout {
grid-template-columns: 1fr;
}
}

@media (max-width: 600px) {
.hero h1 {
font-size: 4rem;
}

.hero::after {
left: 50%;
right: auto;
bottom: 25px;
transform: translateX(-50%);
font-size: 0.7rem;
padding: 8px 14px;
}

.featured-card h3 {
font-size: 2.2rem;
}

.menu-card h3 {
font-size: 1.6rem;
}

.menu-layout {
padding: 40px 20px;
}
}