Implementação de Interfaces Web em HTML, CSS e JavaScript
- Página de Autenticação
Este exemplo demnostra uma página de login responsiva, construída com HTML e CSS puro, acompanhada de validação simples com JavaScript.
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portal de Acesso - Sistema Corporativo</title>
<style>
:root {
--cor-principal: #4a90d9;
--cor-secundaria: #2c3e50;
--fundo-claro: #f8f9fa;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background-color: var(--fundo-claro);
min-height: 100vh;
}
.estrutura-principal {
display: flex;
min-height: 100vh;
}
.painel-esquerdo {
background: linear-gradient(135deg, var(--cor-secundaria) 0%, #34495e 100%);
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
position: relative;
}
.conteudo-esquerdo {
color: white;
text-align: center;
z-index: 2;
}
.titulo-sistema {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.descricao-sistema {
opacity: 0.9;
line-height: 1.6;
max-width: 400px;
}
.painel-direito {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.formulario-login {
background: white;
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
width: 100%;
max-width: 400px;
}
.cabecalho-login {
text-align: center;
margin-bottom: 2rem;
}
.marca {
font-size: 1.8rem;
font-weight: 700;
color: var(--cor-secundaria);
}
.grupo-campo {
margin-bottom: 1.25rem;
}
.rotulo {
display: block;
margin-bottom: 0.5rem;
color: #555;
font-weight: 500;
font-size: 0.9rem;
}
.campo-entrada {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s;
}
.campo-entrada:focus {
outline: none;
border-color: var(--cor-principal);
}
.botao-envio {
width: 100%;
padding: 0.9rem;
background-color: var(--cor-principal);
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
margin-top: 0.5rem;
transition: background-color 0.3s, transform 0.2s;
}
.botao-envio:hover {
background-color: #3a7bc8;
transform: translateY(-2px);
}
.opcoes-login {
margin-top: 1.5rem;
text-align: center;
}
.separador {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.separador::before,
.separador::after {
content: '';
flex: 1;
height: 1px;
background-color: #e0e0e0;
}
.separador span {
padding: 0 1rem;
color: #777;
font-size: 0.85rem;
}
.botao-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
background-color: #25d366;
color: white;
text-decoration: none;
margin: 0 0.5rem;
transition: transform 0.2s;
}
.botao-social:hover {
transform: scale(1.1);
}
@media (max-width: 768px) {
.estrutura-principal {
flex-direction: column;
}
.painel-esquerdo {
padding: 1.5rem;
min-height: 40vh;
}
.titulo-sistema {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="estrutura-principal">
<div class="painel-esquerdo">
<div class="conteudo-esquerdo">
<h1 class="titulo-sistema">Sistema Corporativo</h1>
<p class="descricao-sistema">Plataforma integrada para gestão de processos, recursos humanos e indicadores de desempenho organizacional.</p>
</div>
</div>
<div class="painel-direito">
<div class="formulario-login">
<div class="cabecalho-login">
<h2 class="marca">CorpSys</h2>
<p>Acesse sua conta corporativa</p>
</div>
<form id="formAcesso">
<div class="grupo-campo">
<label class="rotulo">Nome de Usuário</label>
<input type="text" class="campo-entrada" placeholder="seu.usuario" required>
</div>
<div class="grupo-campo">
<label class="rotulo">Senha de Acesso</label>
<input type="password" class="campo-entrada" placeholder="••••••••" required>
</div>
<div class="grupo-campo">
<button type="submit" class="botao-envio">Entrar no Sistema</button>
</div>
</form>
<div class="opcoes-login">
<div class="separador"><span>ou acesse com</span></div>
<a href="#" class="botao-social" title="Login via Google">G</a>
<a href="#" class="botao-social" title="Login via Microsoft">M</a>
</div>
</div>
</div>
</div>
<script>
document.getElementById('formAcesso').addEventListener('submit', function(evento) {
evento.preventDefault();
const campos = this.querySelectorAll('.campo-entrada');
let formularioValido = true;
campos.forEach(function(campo) {
if (!campo.value.trim()) {
formularioValido = false;
campo.style.borderColor = '#e74c3c';
setTimeout(function() {
campo.style.borderColor = '#e0e0e0';
}, 1500);
}
});
if (!formularioValido) {
alert('Por favor, preencha todos os campos obrigatórios.');
return;
}
// Simulação de autenticação
alert('Autenticação bem-sucedida! Redirecionando para o painel...');
});
// Efeito de entrada suave
document.addEventListener('DOMContentLoaded', function() {
const elementoFormulario = document.querySelector('.formulario-login');
elementoFormulario.style.opacity = '0';
elementoFormulario.style.transform = 'translateY(30px)';
setTimeout(function() {
elementoFormulario.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
elementoFormulario.style.opacity = '1';
elementoFormulario.style.transform = 'translateY(0)';
}, 200);
});
</script>
</body>
</html>
- Painel de Administração
Interface administrativa com menu lateral, barra de navegação superior e área de conteúdo dinâmico.
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Painel de Controle Administrativo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primario: #3498db;
--secundario: #2c3e50;
--texto: #2d3436;
--fundo: #ecf0f1;
--borda: #ddd;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--texto);
background-color: var(--fundo);
display: flex;
min-height: 100vh;
}
/* Menu Lateral */
.menu-lateral {
width: 260px;
background-color: var(--secundario);
color: white;
padding: 1rem 0;
transition: width 0.3s;
flex-shrink: 0;
}
.cabecalho-menu {
display: flex;
align-items: center;
padding: 0 1.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding-bottom: 1rem;
}
.icone-menu {
width: 40px;
height: 40px;
background-color: var(--primario);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-right: 0.75rem;
}
.titulo-menu {
font-size: 1.2rem;
font-weight: 600;
}
.lista-navegacao {
list-style: none;
}
.item-navegacao {
margin-bottom: 0.25rem;
}
.link-navegacao {
display: flex;
align-items: center;
padding: 0.75rem 1.5rem;
color: rgba(255,255,255,0.8);
text-decoration: none;
transition: all 0.2s;
border-left: 3px solid transparent;
}
.link-navegacao:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
.link-navegacao.ativo {
background-color: rgba(52,152,219,0.2);
color: white;
border-left-color: var(--primario);
}
.icone-nav {
width: 20px;
text-align: center;
margin-right: 0.75rem;
}
/* Conteúdo Principal */
.conteudo-principal {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.barra-superior {
background-color: white;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.5rem;
border-bottom: 1px solid var(--borda);
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.menu-toggle {
display: none;
background: none;
border: none;
font-size: 1.2rem;
color: var(--texto);
cursor: pointer;
}
.usuario-info {
display: flex;
align-items: center;
gap: 1rem;
}
.botao-notificacao {
position: relative;
background: none;
border: none;
font-size: 1.1rem;
color: #777;
cursor: pointer;
}
.badge {
position: absolute;
top: -5px;
right: -5px;
width: 18px;
height: 18px;
background-color: #e74c3c;
color: white;
border-radius: 50%;
font-size: 0.7rem;
display: flex;
align-items: center;
justify-content: center;
}
.avatar {
width: 36px;
height: 36px;
background-color: var(--primario);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
/* Área de Conteúdo */
.area-conteudo {
flex: 1;
padding: 1.5rem;
overflow-y: auto;
}
.cartao-perfil {
background-color: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
display: flex;
gap: 2rem;
margin-bottom: 2rem;
}
.imagem-perfil {
width: 100px;
height: 100px;
background-color: #eee;
border-radius: 50%;
flex-shrink: 0;
}
.detalhes-perfil {
flex: 1;
}
.nome-usuario {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.cargo-usuario {
color: #777;
margin-bottom: 1rem;
}
.cartao-formulario {
background-color: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.titulo-secao {
font-size: 1.3rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--fundo);
}
.grupo-formulario {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.campo-form {
margin-bottom: 1rem;
}
.campo-form label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #555;
}
.campo-form input,
.campo-form select {
width: 100%;
padding: 0.7rem;
border: 1px solid var(--borda);
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.2s;
}
.campo-form input:focus,
.campo-form select:focus {
outline: none;
border-color: var(--primario);
box-shadow: 0 0 0 3px rgba(52,152,219,0.1);
}
.campo-form input:disabled {
background-color: #f9f9f9;
color: #888;
}
.grupo-radio {
display: flex;
gap: 1.5rem;
margin-top: 0.5rem;
}
.opcao-radio {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.botao-salvar {
background-color: var(--primario);
color: white;
border: none;
padding: 0.8rem 2rem;
border-radius: 6px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s;
}
.botao-salvar:hover {
background-color: #2980b9;
}
@media (max-width: 1024px) {
.menu-lateral {
position: fixed;
left: -260px;
height: 100vh;
z-index: 100;
transition: left 0.3s;
}
.menu-lateral.aberto {
left: 0;
}
.menu-toggle {
display: block;
}
.cartao-perfil {
flex-direction: column;
align-items: center;
text-align: center;
}
}
</style>
</head>
<body>
<!-- Menu Lateral -->
<nav class="menu-lateral" id="menuLateral">
<div class="cabecalho-menu">
<div class="icone-menu">CS</div>
<span class="titulo-menu">CorpSys Pro</span>
</div>
<ul class="lista-navegacao">
<li class="item-navegacao">
<a href="#" class="link-navegacao">
<i class="fas fa-home icone-nav"></i>
<span>Painel Geral</span>
</a>
</li>
<li class="item-navegacao">
<a href="#" class="link-navegacao">
<i class="fas fa-chart-bar icone-nav"></i>
<span>Relatórios</span>
</a>
</li>
<li class="item-navegacao">
<a href="#" class="link-navegacao">
<i class="fas fa-users icone-nav"></i>
<span>Equipes</span>
</a>
</li>
<li class="item-navegacao">
<a href="#" class="link-navegacao ativo">
<i class="fas fa-user-circle icone-nav"></i>
<span>Meu Perfil</span>
</a>
</li>
<li class="item-navegacao">
<a href="#" class="link-navegacao">
<i class="fas fa-cogs icone-nav"></i>
<span>Configurações</span>
</a>
</li>
</ul>
</nav>
<!-- Conteúdo Principal -->
<main class="conteudo-principal">
<header class="barra-superior">
<button class="menu-toggle" id="toggleMenu">
<i class="fas fa-bars"></i>
</button>
<div class="usuario-info">
<button class="botao-notificacao">
<i class="fas fa-bell"></i>
<span class="badge">3</span>
</button>
<div class="avatar">A</div>
<span>Administrador</span>
</div>
</header>
<div class="area-conteudo">
<div class="cartao-perfil">
<div class="imagem-perfil"></div>
<div class="detalhes-perfil">
<h2 class="nome-usuario">João Silva</h2>
<p class="cargo-usuario">Gerente de Projeto</p>
<p>Último acesso: 15/06/2023 às 09:30</p>
</div>
</div>
<div class="cartao-formulario">
<h3 class="titulo-secao">Informações Pessoais</h3>
<form id="formPerfil">
<div class="grupo-formulario">
<div class="campo-form">
<label for="nomeCompleto">Nome Completo</label>
<input type="text" id="nomeCompleto" value="João Silva" required>
</div>
<div class="campo-form">
<label for="emailContato">E-mail Corporativo</label>
<input type="email" id="emailContato" value="joao.silva@empresa.com" required>
</div>
<div class="campo-form">
<label for="telefoneContato">Telefone de Contato</label>
<input type="tel" id="telefoneContato" placeholder="(11) 99999-9999">
</div>
<div class="campo-form">
<label>Gênero</label>
<div class="grupo-radio">
<label class="opcao-radio">
<input type="radio" name="genero" value="M" checked> Masculino
</label>
<label class="opcao-radio">
<input type="radio" name="genero" value="F"> Feminino
</label>
<label class="opcao-radio">
<input type="radio" name="genero" value="O"> Outro
</label>
</div>
</div>
</div>
<div class="campo-form">
<label for="departamento">Departamento</label>
<select id="departamento">
<option value="ti">Tecnologia da Informação</option>
<option value="rh">Recursos Humanos</option>
<option value="vendas" selected>Vendas</option>
<option value="marketing">Marketing</option>
</select>
</div>
<button type="submit" class="botao-salvar">
<i class="fas fa-save"></i> Salvar Alterações
</button>
</form>
</div>
</div>
</main>
<script>
// Controle do menu lateral
const botaoToggle = document.getElementById('toggleMenu');
const menuLateral = document.getElementById('menuLateral');
botaoToggle.addEventListener('click', function() {
menuLateral.classList.toggle('aberto');
});
// Fechar menu ao clicar fora
document.addEventListener('click', function(evento) {
if (window.innerWidth <= 1024 &&
!menuLateral.contains(evento.target) &&
!botaoToggle.contains(evento.target)) {
menuLateral.classList.remove('aberto');
}
});
// Envio do formulário
document.getElementById('formPerfil').addEventListener('submit', function(evento) {
evento.preventDefault();
const dadosFormulario = new FormData(this);
const dadosObjeto = Object.fromEntries(dadosFormulario.entries());
console.log('Dados do perfil atualizados:', dadosObjeto);
// Simulação de salvamento
const botao = this.querySelector('.botao-salvar');
const textoOriginal = botao.innerHTML;
botao.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Salvando...';
botao.disabled = true;
setTimeout(function() {
botao.innerHTML = '<i class="fas fa-check"></i> Salvo!';
setTimeout(function() {
botao.innerHTML = textoOriginal;
botao.disabled = false;
}, 1500);
}, 1000);
});
// Ajustar menu no redimensionamento
window.addEventListener('resize', function() {
if (window.innerWidth > 1024) {
menuLateral.classList.remove('aberto');
}
});
</script>
</body>
</html>
- Centro de Configurações
Página completa de configurações com menu colapsável, cards de funcionalidades e navegação por abas.
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Configurações do Sistema</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--azul: #2c3e50;
--laranja: #e67e22;
--verde: #27ae60;
--fundo: #f5f7fa;
--card: #ffffff;
--texto: #2d3436;
--cinza: #7f8c8d;
}
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background-color: var(--fundo);
color: var(--texto);
display: flex;
min-height: 100vh;
}
/* Menu Lateral Compactável */
.navegacao-lateral {
width: 70px;
background-color: var(--azul);
color: white;
padding: 1rem 0;
transition: width 0.3s;
overflow: hidden;
flex-shrink: 0;
}
.navegacao-lateral.expandido {
width: 250px;
}
.cabecalho-nav {
padding: 0 1rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding-bottom: 1rem;
}
.logo-sistema {
width: 40px;
height: 40px;
background-color: var(--laranja);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
}
.nome-sistema {
font-weight: 600;
margin-left: 1rem;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s;
}
.navegacao-lateral.expandido .nome-sistema {
opacity: 1;
}
.lista-menu {
list-style: none;
}
.item-menu {
margin-bottom: 0.5rem;
}
.link-menu {
display: flex;
align-items: center;
padding: 0.8rem 1rem;
color: rgba(255,255,255,0.8);
text-decoration: none;
transition: all 0.2s;
border-left: 3px solid transparent;
}
.link-menu:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
.link-menu.ativo {
background-color: rgba(230,126,34,0.2);
color: white;
border-left-color: var(--laranja);
}
.icone-menu {
width: 24px;
text-align: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.texto-menu {
margin-left: 1rem;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s;
}
.navegacao-lateral.expandido .texto-menu {
opacity: 1;
}
.botao-expandir {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: none;
border: none;
color: rgba(255,255,255,0.7);
width: 100%;
cursor: pointer;
margin-top: auto;
border-top: 1px solid rgba(255,255,255,0.1);
}
.botao-expandir:hover {
color: white;
background-color: rgba(255,255,255,0.1);
}
/* Conteúdo Principal */
.area-principal {
flex: 1;
display: flex;
flex-direction: column;
}
.cabecalho-principal {
background-color: white;
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eee;
}
.titulo-pagina {
font-size: 1.5rem;
color: var(--azul);
}
.botoes-acao {
display: flex;
gap: 0.75rem;
}
.botao-acao {
padding: 0.6rem 1.2rem;
border: 1px solid #ddd;
background-color: white;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.2s;
}
.botao-acao:hover {
background-color: #f8f9fa;
border-color: #ccc;
}
.conteudo-principal {
flex: 1;
padding: 1.5rem;
overflow-y: auto;
}
.caminho-navegacao {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--cinza);
}
.caminho-navegacao a {
color: var(--laranja);
text-decoration: none;
}
.caminho-navegacao i {
margin: 0 0.5rem;
font-size: 0.7rem;
}
/* Filtros e Estatísticas */
.painel-filtros {
background-color: white;
padding: 1.5rem;
border-radius: 10px;
margin-bottom: 2rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.lista-estatisticas {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.item-estatistica {
display: flex;
align-items: center;
gap: 0.5rem;
}
.ponto-indicador {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--laranja);
}
.texto-estatistica {
font-size: 0.85rem;
color: var(--cinza);
}
/* Grade de Funcionalidades */
.grade-funcionalidades {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
}
.cartao-funcao {
background-color: white;
border-radius: 10px;
padding: 1.5rem;
box-shadow: 0 3px 15px rgba(0,0,0,0.05);
transition: transform 0.2s, box-shadow 0.2s;
}
.cartao-funcao:hover {
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.cabecalho-cartao {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.titulo-cartao {
font-size: 1.1rem;
font-weight: 600;
color: var(--azul);
}
.contador-cartao {
background-color: #f0f0f0;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
color: var(--cinza);
}
.lista-funcoes {
list-style: none;
}
.item-funcao {
margin-bottom: 0.75rem;
}
.botao-funcao {
display: flex;
align-items: center;
width: 100%;
padding: 0.9rem;
background-color: #f9f9f9;
border: 1px solid #eee;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
gap: 0.75rem;
}
.botao-funcao:hover {
background-color: white;
border-color: var(--laranja);
color: var(--laranja);
}
.icone-funcao {
width: 35px;
height: 35px;
background-color: rgba(230,126,34,0.1);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--laranja);
flex-shrink: 0;
}
.nome-funcao {
font-weight: 500;
}
.descricao-funcao {
font-size: 0.8rem;
color: var(--cinza);
margin-top: 0.25rem;
}
@media (max-width: 768px) {
.navegacao-lateral {
width: 0;
padding: 0;
}
.navegacao-lateral.visivel {
width: 250px;
padding: 1rem 0;
}
.grade-funcionalidades {
grid-template-columns: 1fr;
}
.lista-estatisticas {
flex-direction: column;
gap: 0.75rem;
}
}
</style>
</head>
<body>
<!-- Navegação Lateral -->
<nav class="navegacao-lateral" id="navegacaoLateral">
<div class="cabecalho-nav">
<div class="logo-sistema">CS</div>
<span class="nome-sistema">CorpSys Config</span>
</div>
<ul class="lista-menu">
<li class="item-menu">
<a href="#" class="link-menu">
<i class="fas fa-tachometer-alt icone-menu"></i>
<span class="texto-menu">Painel de Controle</span>
</a>
</li>
<li class="item-menu">
<a href="#" class="link-menu">
<i class="fas fa-chart-pie icone-menu"></i>
<span class="texto-menu">Relatórios Avançados</span>
</a>
</li>
<li class="item-menu">
<a href="#" class="link-menu">
<i class="fas fa-users-cog icone-menu"></i>
<span class="texto-menu">Gestão de Equipes</span>
</a>
</li>
<li class="item-menu">
<a href="#" class="link-menu ativo">
<i class="fas fa-sliders-h icone-menu"></i>
<span class="texto-menu">Configurações</span>
</a>
</li>
<li class="item-menu">
<a href="#" class="link-menu">
<i class="fas fa-shield-alt icone-menu"></i>
<span class="texto-menu">Segurança</span>
</a>
</li>
<li class="item-menu">
<a href="#" class="link-menu">
<i class="fas fa-database icone-menu"></i>
<span class="texto-menu">Backup e Restauração</span>
</a>
</li>
</ul>
<button class="botao-expandir" id="botaoExpandir">
<i class="fas fa-angle-right"></i>
<span class="texto-menu">Recolher</span>
</button>
</nav>
<!-- Área Principal -->
<main class="area-principal">
<header class="cabecalho-principal">
<h1 class="titulo-pagina">Configurações do Sistema</h1>
<div class="botoes-acao">
<button class="botao-acao">
<i class="fas fa-sync-alt"></i> Atualizar
</button>
<button class="botao-acao">
<i class="fas fa-question-circle"></i> Ajuda
</button>
</div>
</header>
<div class="conteudo-principal">
<div class="caminho-navegacao">
<a href="#">Início</a>
<i class="fas fa-chevron-right"></i>
<span>Configurações</span>
</div>
<div class="painel-filtros">
<div class="lista-estatisticas">
<div class="item-estatistica">
<span class="ponto-indicador"></span>
<span class="texto-estatistica">Filtros Ativos: <strong>6</strong></span>
</div>
<div class="item-estatistica">
<span class="ponto-indicador"></span>
<span class="texto-estatistica">Relatórios: <strong>3</strong></span>
</div>
<div class="item-estatistica">
<span class="ponto-indicador"></span>
<span class="texto-estatistica">Exportações: <strong>1</strong></span>
</div>
<div class="item-estatistica">
<span class="ponto-indicador"></span>
<span class="texto-estatistica">Integrações: <strong>2</strong></span>
</div>
<div class="item-estatistica">
<span class="ponto-indicador"></span>
<span class="texto-estatistica">Notificações: <strong>4</strong></span>
</div>
</div>
</div>
<div class="grade-funcionalidades">
<div class="cartao-funcao">
<div class="cabecalho-cartao">
<h3 class="titulo-cartao">Geração de Relatórios</h3>
<span class="contador-cartao">4 itens</span>
</div>
<ul class="lista-funcoes">
<li class="item-funcao">
<button class="botao-funcao">
<div class="icone-funcao">
<i class="fas fa-file-pdf"></i>
</div>
<div>
<div class="nome-funcao">Exportar para PDF</div>
<div class="descricao-funcao">Relatórios formatados para impressão</div>
</div>
</button>
</li>
<li class="item-funcao">
<button class="botao-funcao">
<div class="icone-funcao">
<i class="fas fa-file-excel"></i>
</div>
<div>
<div class="nome-funcao">Exportar para Excel</div>
<div class="descricao-funcao">Planilhas com dados tabulares</div>
</div>
</button>
</li>
<li class="item-funcao">
<button class="botao-funcao">
<div class="icone-funcao">
<i class="fas fa-chart-line"></i>
</div>
<div>
<div class="nome-funcao">Gráficos Interativos</div>
<div class="descricao-funcao">Visualização de dados dinâmicos</div>
</div>
</button>
</li>
</ul>
</div>
<div class="cartao-funcao">
<div class="cabecalho-cartao">
<h3 class="titulo-cartao">Integrações</h3>
<span class="contador-cartao">3 itens</span>
</div>
<ul class="lista-funcoes">
<li class="item-funcao">
<button class="botao-funcao">
<div class="icone-funcao">
<i class="fas fa-envelope"></i>
</div>
<div>
<div class="nome-funcao">E-mail Marketing</div>
<div class="descricao-funcao">Campanhas automatizadas</div>
</div>
</button>
</li>
<li class="item-funcao">
<button class="botao-funcao">
<div class="icone-funcao">
<i class="fas fa-mobile-alt"></i>
</div>
<div>
<div class="nome-funcao">Notificações SMS</div>
<div class="descricao-funcao">Alertas por mensagem de texto</div>
</div>
</button>
</li>
<li class="item-funcao">
<button class="botao-funcao">
<div class="icone-funcao">
<i class="fas fa-cloud"></i>
</div>
<div>
<div class="nome-funcao">Armazenamento em Nuvem</div>
<div class="descricao-funcao">Sincronização automática</div>
</div>
</button>
</li>
</ul>
</div>
<div class="cartao-funcao">
<div class="cabecalho-cartao">
<h3 class="titulo-cartao">Segurança e Monitoramento</h3>
<span class="contador-cartao">5 itens</span>
</div>
<ul class="lista-funcoes">
<li class="item-funcao">
<button class="botao-funcao">
<div class="icone-funcao">
<i class="fas fa-lock"></i>
</div>
<div>
<div class="nome-funcao">Autenticação em Duas Etapas</div>
<div class="descricao-funcao">Verificação adicional de segurança</div>
</div>
</button>
</li>
<li class="item-funcao">
<button class="botao-funcao">
<div class="icone-funcao">
<i class="fas fa-user-shield"></i>
</div>
<div>
<div class="nome-funcao">Controle de Acesso</div>
<div class="descricao-funcao">Permissões por perfil de usuário</div>
</div>
</button>
</li>
<li class="item-funcao">
<button class="botao-funcao">
<div class="icone-funcao">
<i class="fas fa-history"></i>
</div>
<div>
<div class="nome-funcao">Log de Atividades</div>
<div class="descricao-funcao">Registro de todas as ações</div>
</div>
</button>
</li>
</ul>
</div>
</div>
</div>
</main>
<script>
// Controle da navegação lateral
const botaoExpandir = document.getElementById('botaoExpandir');
const navegacaoLateral = document.getElementById('navegacaoLateral');
let menuExpandido = false;
botaoExpandir.addEventListener('click', function() {
menuExpandido = !menuExpandido;
navegacaoLateral.classList.toggle('expandido');
const icone = this.querySelector('i');
const texto = this.querySelector('.texto-menu');
if (menuExpandido) {
icone.classList.remove('fa-angle-right');
icone.classList.add('fa-angle-left');
if (texto) texto.textContent = 'Expandir';
} else {
icone.classList.remove('fa-angle-left');
icone.classList.add('fa-angle-right');
if (texto) texto.textContent = 'Recolher';
}
});
// Efeito ripple nos botões
document.querySelectorAll('.botao-funcao, .botao-acao').forEach(function(botao) {
botao.addEventListener('click', function(e) {
const posicao = this.getBoundingClientRect();
const x = e.clientX - posicao.left;
const y = e.clientY - posicao.top;
const ripple = document.createElement('span');
ripple.style.cssText = `
position: absolute;
border-radius: 50%;
background-color: rgba(0,0,0,0.1);
width: 100px;
height: 100px;
left: ${x - 50}px;
top: ${y - 50}px;
transform: scale(0);
animation: rippleEffect 0.6s linear;
pointer-events: none;
`;
this.style.position = 'relative';
this.style.overflow = 'hidden';
this.appendChild(ripple);
setTimeout(function() {
ripple.remove();
}, 600);
});
});
// Adicionar estilos de animação
const estilosAnimacao = document.createElement('style');
estilosAnimacao.textContent = `
@keyframes rippleEffect {
to {
transform: scale(4);
opacity: 0;
}
}
`;
document.head.appendChild(estilosAnimacao);
// Toggle visível em mobile
const botaoMenuMobile = document.createElement('button');
botaoMenuMobile.innerHTML = '<i class="fas fa-bars"></i>';
botaoMenuMobile.style.cssText = `
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: var(--azul);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 1000;
display: none;
font-size: 1.2rem;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
`;
document.body.appendChild(botaoMenuMobile);
// Mostrar/esconder menu em mobile
function verificarTamanhoTela() {
if (window.innerWidth <= 768) {
botaoMenuMobile.style.display = 'flex';
navegacaoLateral.classList.remove('expandido');
menuExpandido = false;
} else {
botaoMenuMobile.style.display = 'none';
navegacaoLateral.classList.remove('visivel');
}
}
botaoMenuMobile.addEventListener('click', function() {
navegacaoLateral.classList.toggle('visivel');
});
window.addEventListener('resize', verificarTamanhoTela);
verificarTamanhoTela();
</script>
</body>
</html>