<!
DOCTYPE html> <html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerenciador de Contatos</title> <link rel="manifest" href="[Link]">
<meta name="theme-color" content="#0077b6"> <style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f5f7fa;
header, footer {
background: #0077b6;
color: white;
text-align: center;
padding: 15px;
nav {
display: flex;
justify-content: center;
background: #023e8a;
}
nav button {
background: none;
border: none;
color: white;
padding: 15px;
cursor: pointer;
.container {
max-width: 1000px;
margin: 20px auto;
background: white;
padding: 20px;
border-radius: 10px;
input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
button {
padding: 8px 12px;
border-radius: 5px;
border: none;
cursor: pointer;
.salvar { background: #0077b6; color: white; }
.voltar { background: #6c757d; color: white; }
.editar { background: #f9c74f; }
.excluir { background: #f94144; color: white; }
.filtro { background: #38b000; color: white; }
table {
width: 100%;
border-collapse: collapse;
th, td {
padding: 10px;
border: 1px solid #ccc;
th {
background: #0077b6;
color: white;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
thead { display: none; }
tr {
margin-bottom: 15px;
border: 1px solid #ccc;
padding: 10px;
border-radius: 10px;
td::before {
content: attr(data-label);
font-weight: bold;
display: block;
</style> </head> <body> <header>
<h2>Gerenciador de Contatos</h2> </header> <nav>
<button onclick="mostrarHome()">Início</button>
<button onclick="mostrarLista()">Lista</button>
<button onclick="mostrarForm()">Adicionar</button>
</nav> <div class="container"> <div id="home">
<h3>Bem-vindo(a)</h3> <p>Este é o <strong>Gerenciador de Contatos Pessoais</strong>, um sistema
web simples feito em HTML e CSS para ajudar você a organizar informações de pessoas importantes no
seu dia a dia.</p>
<p>Use o menu acima para navegar entre as opções:</p>
<ul>
<li> <strong>Lista de Contatos</strong>: veja seus contatos cadastrados.</li>
<li> <strong>Adicionar Contato</strong>: cadastre novos contatos.</li>
<li> <strong>Sobre</strong>: veja informações sobre o sistema.</li>
</ul>
<p>Sistema de gestão de contatos.</p>
<button class="salvar" onclick="mostrarLista()">Entrar</button>
</div> <div id="lista" style="display:none;">
<input id="pesquisa" placeholder="🔍 Pesquise por nome ou telefone">
<button class="filtro" id="btnFav" onclick="toggleFavoritos()">⭐ Favoritos</button> <p><strong>⭐
Favoritos:</strong> <span id="contadorFav">0</span></p> <table>
<thead>
<tr>
<th>Nome</th>
<th>Telefone</th>
<th>Email</th>
<th>Ações</th>
</tr>
</thead>
<tbody id="tabela"></tbody>
</table>
</div> <div id="formulario" style="display:none;">
<button class="voltar" onclick="mostrarLista()">⬅ Voltar</button>
<h3 id="tituloForm">Adicionar Contato</h3> <form id="form">
<input id="nome" placeholder="Nome*" required>
<input id="telefone" placeholder="Telefone*" required>
<input id="email" placeholder="Email">
<textarea id="notas" placeholder="Notas"></textarea> <label>
<input type="checkbox" id="favorito"> Favorito ⭐
</label><br><br>
<button class="salvar">Salvar</button>
</form>
</div> </div> <footer>2025 © Rosa & Job</footer> <script>
const home = [Link]("home");
const lista = [Link]("lista");
const formulario = [Link]("formulario");
const tabela = [Link]("tabela");
const form = [Link]("form");
const pesquisa = [Link]("pesquisa");
const contadorFav = [Link]("contadorFav");
const btnFav = [Link]("btnFav");
const nome = [Link]("nome");
const telefone = [Link]("telefone");
const email = [Link]("email");
const notas = [Link]("notas");
const favorito = [Link]("favorito");
const tituloForm = [Link]("tituloForm");
const KEY = "contatos";
let contatos = [Link]([Link](KEY)) || [];
let editId = null;
let soFavoritos = false;
/* Navegação */
function esconderTudo() {
[Link] = "none";
[Link] = "none";
[Link] = "none";
function mostrarHome() {
esconderTudo();
[Link] = "block";
function mostrarLista() {
esconderTudo();
[Link] = "block";
render();
}
function mostrarForm() {
limparFormulario();
esconderTudo();
[Link] = "block";
/* CRUD */
[Link] = e => {
[Link]();
if (![Link]()) return alert("Nome obrigatório");
if (!/^[0-9]{7,15}$/.test([Link]))
return alert("Telefone inválido");
if ([Link] &&
!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test([Link]))
return alert("Email inválido");
const contato = {
id: editId ?? [Link](),
nome: [Link](),
telefone: [Link](),
email: [Link](),
notas: [Link](),
favorito: [Link]
};
if (editId)
contatos = [Link](c => [Link] === editId ? contato : c);
else
[Link](contato);
salvar();
limparFormulario();
mostrarLista();
};
function editar(id) {
const c = [Link](c => [Link] === id);
if (!c) return;
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
editId = id;
[Link] = "Editar Contato";
esconderTudo();
[Link] = "block";
function excluir(id) {
if (!confirm("Deseja eliminar este contato?")) return;
contatos = [Link](c => [Link] !== id);
salvar();
/* Favoritos */
function toggleFavoritos() {
soFavoritos = !soFavoritos;
[Link] = soFavoritos ? "⭐ Favoritos ON" : "⭐ Favoritos";
render();
function toggleFav(id) {
contatos = [Link](c =>
[Link] === id ? { ...c, favorito: ![Link] } : c
);
salvar();
}
/* Persistência */
function salvar() {
[Link](KEY, [Link](contatos));
render();
/* Render */
function render() {
[Link] = "";
const termo = [Link]();
[Link] = [Link](c => [Link]).length;
contatos
.filter(c =>
([Link]().includes(termo) ||
[Link](termo)) &&
(!soFavoritos || [Link])
.forEach(c => {
[Link] += `
<tr>
<td data-label="Nome">${[Link]}</td>
<td data-label="Telefone">${[Link]}</td>
<td data-label="Email">${[Link] || "-"}</td>
<td data-label="⭐">
<button onclick="toggleFav(${[Link]})">
${[Link] ? ""☆: "☆ "}
</button>
</td>
<td data-label="Ações">
<button class="editar" onclick="editar(${[Link]})">Editar</button>
<button class="excluir" onclick="excluir(${[Link]})">Eliminar</button>
</td>
</tr>`;
});
/* Util */
function limparFormulario() {
[Link]();
editId = null;
[Link] = "Adicionar Contato";
[Link]("input", render);
/* PWA */
if ("serviceWorker" in navigator) {
[Link]("[Link]");
}
mostrarHome();
</script> </body>
</html> Faça alguns ajustes sem alterar as que já estão e coloque também um sobre que vai dar
informações do projetos aos que usarem