MEU PROMPT PARA LLMS TESTANDO E CRIANDO AINDA
**Situação**
Você está desenvolvendo um site moderno e profissional que utiliza Bootstrap 5 como framework principal, com funcionalidades avançadas de autocomplete via JavaScript conectado a um banco de dados. O site deve seguir padrões de design contemporâneos com tipografia e paleta de cores bem definidas, estrutura de navegação lateral, e sistema de modais para feedback do usuário. Cada página deve ser independente em termos de CSS e JavaScript para evitar conflitos, mas integrada em uma arquitetura única com menu lateral, conteúdo principal e rodapé.
**Tarefa**
O assistente deve criar uma estrutura HTML completa e padronizada que inclua:
1. Todos os elementos possíveis do Bootstrap 5 (componentes de formulário, cards, tabelas, modais, badges, alertas convertidos em modais, breadcrumbs, paginação, etc.)
2. Sistema de autocomplete com JavaScript conectado a banco de dados (com suporte a datalist, array local e servidor remoto)
3. Menu de navegação lateral direito com links que carregam conteúdo dinamicamente em `<main>` via JavaScript
4. Persistência de URL no navegador (history API) para que ao atualizar a página, o link específico permaneça carregado
5. Estrutura de pastas padronizada: `/css` para estilos e `/js` para scripts
6. Sistema de modais para todas as mensagens de usuário (sem alerts nativos)
7. Nomenclatura de elementos com prefixo do nome da página para evitar conflitos CSS/JS
8. Criação automática de arquivos `.css` e `.js` específicos por página
9. Footer com elementos estruturais completos
10. Tipografia e paleta de cores seguindo as melhores práticas fornecidas
**Objetivo**
Fornecer um template HTML production-ready que padronize a criação de páginas do site, permitindo desenvolvimento rápido e consistente, com componentes reutilizáveis, sem conflitos de estilos, e com funcionalidades avançadas de interação (autocomplete, navegação dinâmica) já implementadas e documentadas.
**Conhecimento**
Tipografias recomendadas:
- Sem Serifa (modernas): Inter, Roboto, Open Sans, Montserrat, Poppins, Lato, Rubik
- Com Serifa (clássicas): Playfair Display, Lora, Libre Baskerville, Georgia
Paletas de cores por contexto:
- Confiança/Profissionalismo: Azul, cinza e branco
- Elegância/Luxo: Preto, dourado, branco, tons pastéis
- Moderno/Vibrante: Laranja e azul com neutros (cinza-claro/branco)
- Minimalista: Fundo claro (branco/bege) com texto cinza escuro/preto
Requisitos de design:
- Contraste adequado para legibilidade
- Hierarquia visual clara (títulos maiores/bold, corpo menor)
- Máximo 2 fontes (uma para títulos, uma para corpo)
- Modais de mensagem com fundo preto e texto branco brilhante
- Modais com duração de 5 segundos ou com opções sim/não
- Sem uso de alerts nativos do navegador
Autocomplete - Métodos suportados:
- Array local de objetos com id, label, value, title e data
- Datalist HTML nativo
- Servidor remoto com parâmetros customizáveis
- Busca fuzzy, grouping, debounce e cache
Estrutura de navegação:
- Menu lateral no lado direito
- Links carregam conteúdo em `<main><content>`
- Navegação sem `_blank` deve usar JavaScript para carregar dinamicamente
- URL deve ser atualizada e persistir ao recarregar a página
---
```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site Padrão - Bootstrap 5</title>
<!-- Google Fonts - Tipografia -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
<!-- Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<!-- Autocomplete CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/js-autocomplete@1.0.4/auto-complete.min.css">
<!-- CSS Global -->
<link rel="stylesheet" href="/css/global.css">
<style>
:root {
--cor-primaria: #1e3a8a;
--cor-secundaria: #f59e0b;
--cor-sucesso: #10b981;
--cor-perigo: #ef4444;
--cor-aviso: #f59e0b;
--cor-info: #3b82f6;
--cor-fundo: #f9fafb;
--cor-texto: #1f2937;
--cor-texto-claro: #6b7280;
--cor-borda: #e5e7eb;
}
* {
font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
font-weight: 700;
color: var(--cor-primaria);
}
body {
background-color: var(--cor-fundo);
color: var(--cor-texto);
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
padding: 2rem;
}
.sidebar-nav {
position: fixed;
right: 0;
top: 0;
width: 280px;
height: 100vh;
background: linear-gradient(135deg, var(--cor-primaria) 0%, #1e40af 100%);
padding: 2rem 0;
overflow-y: auto;
z-index: 1000;
box-shadow: -2px 0 8px rgba(0,0,0,0.1);
}
.sidebar-nav .nav-link {
color: #ffffff;
padding: 0.75rem 1.5rem;
border-left: 4px solid transparent;
transition: all 0.3s ease;
text-decoration: none;
display: block;
}
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
background-color: rgba(255,255,255,0.1);
border-left-color: var(--cor-secundaria);
padding-left: 1.75rem;
}
body {
margin-right: 280px;
}
.modal-message {
background-color: #000000;
color: #ffffff;
border: none;
}
.modal-message .modal-header {
background-color: #000000;
border-bottom: 1px solid #333333;
}
.modal-message .modal-body {
background-color: #000000;
}
.modal-message .modal-footer {
background-color: #000000;
border-top: 1px solid #333333;
}
.modal-message .btn-close {
filter: brightness(0) invert(1);
}
footer {
background-color: var(--cor-primaria);
color: #ffffff;
padding: 3rem 2rem;
margin-top: 3rem;
border-top: 1px solid var(--cor-borda);
}
.form-control:focus,
.form-select:focus {
border-color: var(--cor-primaria);
box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
}
.btn-primary {
background-color: var(--cor-primaria);
border-color: var(--cor-primaria);
}
.btn-primary:hover {
background-color: #1e40af;
border-color: #1e40af;
}
.autocomplete {
position: relative;
}
.autocomplete-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid var(--cor-borda);
border-top: none;
max-height: 300px;
overflow-y: auto;
z-index: 100;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.autocomplete-item {
padding: 0.75rem 1rem;
cursor: pointer;
transition: background-color 0.2s;
}
.autocomplete-item:hover,
.autocomplete-item.active {
background-color: var(--cor-primaria);
color: white;
}
</style>
</head>
<body>
<!-- Header -->
<header class="bg-white shadow-sm sticky-top">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#" onclick="loadPage('index.php')">
<strong>Meu Site</strong>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</header>
<!-- Sidebar Navigation (Direita) -->
<nav class="sidebar-nav">
<div class="px-3 mb-4">
<h5 class="text-white">Menu</h5>
</div>
<a href="#" class="nav-link active" onclick="loadPage('index.php')">Início</a>
<a href="#" class="nav-link" onclick="loadPage('paginadeleitura.php')">Página de Leitura</a>
<a href="#" class="nav-link" onclick="loadPage('formularios.php')">Formulários</a>
<a href="#" class="nav-link" onclick="loadPage('tabelas.php')">Tabelas</a>
<a href="#" class="nav-link" onclick="loadPage('componentes.php')">Componentes</a>
<a href="#" class="nav-link" onclick="loadPage('autocomplete-demo.php')">Autocomplete</a>
</nav>
<!-- Main Content -->
<main>
<div class="content" id="mainContent">
<!-- Conteúdo carregado dinamicamente -->
<div class="alert alert-info">
<strong>Bem-vindo!</strong> Selecione uma página no menu lateral.
</div>
</div>
</main>
<!-- Footer -->
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 mb-3">
<h6>Sobre</h6>
<p class="small">Site desenvolvido com Bootstrap 5 e padrões modernos de desenvolvimento web.</p>
</div>
<div class="col-md-4 mb-3">
<h6>Links Rápidos</h6>
<ul class="list-unstyled small">
<li><a href="#" class="text-white-50" onclick="loadPage('index.php')">Início</a></li>
<li><a href="#" class="text-white-50" onclick="loadPage('contato.php')">Contato</a></li>
<li><a href="#" class="text-white-50" onclick="loadPage('privacidade.php')">Privacidade</a></li>
</ul>
</div>
<div class="col-md-4 mb-3">
<h6>Contato</h6>
<p class="small">
Email: <a href="mailto:info@site.com" class="text-white-50">info@site.com</a><br>
Telefone: (11) 9999-9999
</p>
</div>
</div>
<hr class="bg-white-50">
<div class="text-center small text-white-50">
<p>© 2024 Meu Site. Todos os direitos reservados.</p>
</div>
</div>
</footer>
<!-- Modal de Mensagem Padrão -->
<div class="modal fade" id="modalMensagem" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content modal-message">
<div class="modal-header">
<h5 class="modal-title" id="modalTitulo">Mensagem</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
</div>
<div class="modal-body" id="modalCorpo">
<!-- Conteúdo dinâmico -->
</div>
<div class="modal-footer" id="modalRodape">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
<!-- Modal de Confirmação -->
<div class="modal fade" id="modalConfirmacao" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content modal-message">
<div class="modal-header">
<h5 class="modal-title" id="modalConfirmacaoTitulo">Confirmação</h5>
</div>
<div class="modal-body" id="modalConfirmacaoCorpo">
<!-- Conteúdo dinâmico -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary" id="btnConfirmar">Confirmar</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Autocomplete JS -->
<script src="https://cdn.jsdelivr.net/npm/js-autocomplete@1.0.4/auto-complete.min.js"></script>
<!-- JS Global -->
<script src="/js/global.js"></script>
</body>
</html>
```
---
**Arquivo: `/js/global.js`**
```javascript
// Variáveis globais
const modalMensagem = new bootstrap.Modal(document.getElementById('modalMensagem'));
const modalConfirmacao = new bootstrap.Modal(document.getElementById('modalConfirmacao'));
let timeoutModal = null;
let callbackConfirmacao = null;
// Carregar página dinamicamente
function loadPage(page) {
// Atualizar URL sem recarregar
window.history.pushState({ page: page }, '', `?page=${page}`);
// Carregar conteúdo
fetch(page)
.then(response => {
if (!response.ok) throw new Error('Página não encontrada');
return response.text();
})
.then(html => {
document.getElementById('mainContent').innerHTML = html;
// Atualizar menu ativo
document.querySelectorAll('.sidebar-nav .nav-link').forEach(link => {
link.classList.remove('active');
});
event.target.closest('.nav-link')?.classList.add('active');
// Carregar CSS e JS específicos da página
loadPageAssets(page);
})
.catch(error => {
showModal('Erro', `Não foi possível carregar a página: ${error.message}`, 'error');
});
}
// Carregar CSS e JS específicos da página
function loadPageAssets(page) {
const pageName = page.replace('.php', '');
// Carregar CSS específico
const cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.href = `/css/${pageName}.css?t=${Date.now()}`;
cssLink.id = `css-${pageName}`;
document.head.appendChild(cssLink);
// Carregar JS específico
const script = document.createElement('script');
script.src = `/js/${pageName}.js?t=${Date.now()}`;
script.id = `js-${pageName}`;
script.onload = () => {
// Executar função de inicialização se existir
if (window[`init${capitalize(pageName)}`]) {
window[`init${capitalize(pageName)}`]();
}
};
document.body.appendChild(script);
}
// Capitalizar string
function capitalize(str) {
return str.replace(/\b\w/g, char => char.toUpperCase()).replace(/-/g, '');
}
// Mostrar modal de mensagem
function showModal(titulo, mensagem, tipo = 'info', duracao = 5000) {
document.getElementById('modalTitulo').textContent = titulo;
document.getElementById('modalCorpo').textContent = mensagem;
// Limpar timeout anterior
if (timeoutModal) clearTimeout(timeoutModal);
modalMensagem.show();
// Fechar automaticamente após duracao
if (duracao > 0) {
timeoutModal = setTimeout(() => {
modalMensagem.hide();
}, duracao);
}
}
// Mostrar modal de confirmação
function showConfirmation(titulo, mensagem, callback) {
document.getElementById('modalConfirmacaoTitulo').textContent = titulo;
document.getElementById('modalConfirmacaoCorpo').textContent = mensagem;
callbackConfirmacao = callback;
modalConfirmacao.show();
}
// Evento do botão confirmar
document.getElementById('btnConfirmar').addEventListener('click', () => {
if (callbackConfirmacao) {
callbackConfirmacao(true);
}
modalConfirmacao.hide();
});
// Restaurar página ao recarregar
window.addEventListener('load', () => {
const params = new URLSearchParams(window.location.search);
const page = params.get('page') || 'index.php';
if (page !== 'index.php') {
loadPage(page);
}
});
// Inicializar autocomplete genérico
function initAutocomplete(inputSelector, options = {}) {
const input = document.querySelector(inputSelector);
if (!input) return;
const defaultOptions = {
showAllSuggestions: false,
suggestionsThreshold: 1,
maximumItems: 10,
autoselectFirst: false,
highlightTyped: true,
highlightClass: 'bg-primary text-white',
fullWidth: true,
preventBrowserAutocomplete: true,
...options
};
new Autocomplete(input, defaultOptions);
}
```
---
**Arquivo: `/css/global.css`**
```css
/* Reset e Estilos Globais */
html, body {
height: 100%;
}
/* Tipografia */
h1, h2, h3, h4, h5, h6 {
margin-bottom: 1rem;
line-height: 1.2;
}
p {
line-height: 1.6;
color: #6b7280;
}
/* Componentes Bootstrap Customizados */
.card {
border: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.badge {
padding: 0.5rem 0.75rem;
font-weight: 500;
}
.btn {
border-radius: 0.375rem;
font-weight: 500;
transition: all 0.3s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.form-control, .form-select {
border-radius: 0.375rem;
border: 1px solid #e5e7eb;
}
.form-control:focus, .form-select:focus {
border-color: #1e3a8a;
box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
}
/* Tabelas */
.table {
margin-bottom: 0;
}
.table thead th {
background-color: #f3f4f6;
font-weight: 600;
border-bottom: 2px solid #e5e7eb;
}
.table tbody tr:hover {
background-color: #f9fafb;
}
/* Breadcrumb */
.breadcrumb {
background-color: transparent;
padding: 0;
margin-bottom: 1.5rem;
}
.breadcrumb-item.active {
color: #6b7280;
}
/* Paginação */
.pagination .page-link {
color: #1e3a8a;
border-color: #e5e7eb;
}
.pagination .page-link:hover {
background-color: #f3f4f6;
border-color: #e5e7eb;
}
.pagination .page-item.active .page-link {
background-color: #1e3a8a;
border-color: #1e3a8a;
}
/* Responsive */
@media (max-width: 768px) {
body {
margin-right: 0;
}
.sidebar-nav {
transform: translateX(100%);
transition: transform 0.3s ease;
}
.sidebar-nav.show {
transform: translateX(0);
}
}
```
---
**Arquivo: `/css/paginadeleitura.css`**
```css
/* Estilos específicos para Página de Leitura */
.paginadeleitura_container {
max-width: 900px;
margin: 0 auto;
}
.paginadeleitura_titulo {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #1e3a8a;
}
.paginadeleitura_subtitulo {
font-size: 1.25rem;
color: #6b7280;
margin-bottom: 2rem;
}
.paginadeleitura_conteudo {
line-height: 1.8;
font-size: 1.1rem;
}
.paginadeleitura_conteudo p {
margin-bottom: 1.5rem;
}
.paginadeleitura_destaque {
background-color: #fef3c7;
border-left: 4px solid #f59e0b;
padding: 1rem;
margin: 2rem 0;
border-radius: 0.375rem;
}
.paginadeleitura_citacao {
font-style: italic;
border-left: 4px solid #1e3a8a;
padding-left: 1.5rem;
margin: 2rem 0;
color: #4b5563;
}
```
---
**Arquivo: `/js/paginadeleitura.js`**
```javascript
// Inicialização da Página de Leitura
function initPaginadeleitura() {
console.log('Página de Leitura iniciada');
// Adicionar listeners específicos
document.querySelectorAll('.paginadeleitura_destaque').forEach(el => {
el.addEventListener('click', () => {
showModal('Destaque', 'Este é um destaque importante!', 'info', 3000);
});
});
}
```
---
**Arquivo: `/css/formularios.css`**
```css
/* Estilos específicos para Formulários */
.formularios_form_group {
margin-bottom: 1.5rem;
}
.formularios_label {
font-weight: 600;
margin-bottom: 0.5rem;
display: block;
color: #1e3a8a;
}
.formularios_input {
border-radius: 0.375rem;
border: 1px solid #e5e7eb;
padding: 0.75rem;
}
.formularios_input:focus {
border-color: #1e3a8a;
box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
}
.formularios_botao {
padding: 0.75rem 1.5rem;
border-radius: 0.375rem;
font-weight: 600;
}
.formularios_erro {
color: #ef4444;
font-size: 0.875rem;
margin-top: 0.25rem;
}
.formularios_sucesso {
color: #10b981;
font-size: 0.875rem;
margin-top: 0.25rem;
}
```
---
**Arquivo: `/js/formularios.js`**
```javascript
// Inicialização de Formulários
function initFormularios() {
console.log('Página de Formulários iniciada');
const form = document.querySelector('.formularios_form');
if (form) {
form.addEventListener('submit', (e) => {
e.preventDefault();
showConfirmation('Confirmar Envio', 'Deseja realmente enviar este formulário?', (confirmed) => {
if (confirmed) {
showModal('Sucesso', 'Formulário enviado com sucesso!', 'success', 3000);
form.reset();
}
});
});
}
}
```
---
**Arquivo: `/css/autocomplete-demo.css`**
```css
/* Estilos específicos para Demo de Autocomplete */
.autocomplete_container {
max-width: 600px;
margin: 2rem auto;
}
.autocomplete_label {
font-weight: 600;
margin-bottom: 0.5rem;
display: block;
color: #1e3a8a;
}
.autocomplete_input {
width: 100%;
padding: 0.75rem;
border: 1px solid #e5e7eb;
border-radius: 0.375rem;
font-size: 1rem;
}
.autocomplete_input:focus {
border-color: #1e3a8a;
outline: none;
box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
}
.autocomplete_resultado {
margin-top: 1.5rem;
padding: 1rem;
background-color: #f3f4f6;
border-radius: 0.375rem;
display: none;
}
.autocomplete_resultado.show {
display: block;
}
```
---
**Arquivo: `/js/autocomplete-demo.js`**
```javascript
// Inicialização de Demo Autocomplete
function initAutocompletedemo() {
console.log('Página de Autocomplete iniciada');
// Autocomplete com dados locais
const dadosLocais = [
{ id: 1, label: 'São Paulo', value: 'sp', title: 'São Paulo - SP' },
{ id: 2, label: 'Rio de Janeiro', value: 'rj', title: 'Rio de Janeiro - RJ' },
{ id: 3, label: 'Minas Gerais', value: 'mg', title: 'Minas Gerais - MG' },
{ id: 4, label: 'Bahia', value: 'ba', title: 'Bahia - BA' },
{ id: 5, label: 'Pernambuco', value: 'pe', title: 'Pernambuco - PE' }
];
const inputLocal = document.getElementById('autocompleteLocal');
if (inputLocal) {
new Autocomplete(inputLocal, {
items: dadosLocais,
valueField: 'id',
labelField: 'title',
searchFields: ['label', 'title'],
maximumItems: 5,
highlightTyped: true,
onSelectItem: (item) => {
showModal('Selecionado', `Você selecionou: ${item.title}`, 'info', 3000);
}
});
}
// Autocomplete com servidor remoto
const inputRemoto = document.getElementById('autocompleteRemoto');
if (inputRemoto) {
new Autocomplete(inputRemoto, {
server: '/api/buscar-dados.php',
serverParams: { tipo: 'produtos' },
liveServer: true,
debounceTime: 300,
suggestionsThreshold: 2,
maximumItems: 10,
onSelectItem: (item) => {
showModal('Produto Selecionado', `ID: ${item.id} - ${item.name}`, 'info', 3000);
}
});
}
}
```
---
**Arquivo: `/css/tabelas.css`**
```css
/* Estilos específicos para Tabelas */
.tabelas_container {
overflow-x: auto;
}
.tabelas_table {
width: 100%;
border-collapse: collapse;
}
.tabelas_table thead th {
background-color: #1e3a8a;
color: white;
padding: 1rem;
text-align: left;
font-weight: 600;
}
.tabelas_table tbody td {
padding: 0.75rem 1rem;
border-bottom: 1px solid #e5e7eb;
}
.tabelas_table tbody tr:hover {
background-color: #f9fafb;
}
.tabelas_acoes {
display: flex;
gap: 0.5rem;
}
.tabelas_btn_editar,
.tabelas_btn_deletar {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
border-radius: 0.25rem;
}
```
---
**Arquivo: `/js/tabelas.js`**
```javascript
// Inicialização de Tabelas
function initTabelas() {
console.log('Página de Tabelas iniciada');
// Adicionar listeners aos botões de ação
document.querySelectorAll('.tabelas_btn_editar').forEach(btn => {
btn.addEventListener('click', (e) => {
const id = e.target.dataset.id;
showModal('Editar', `Editando registro ID: ${id}`, 'info', 3000);
});
});
document.querySelectorAll('.tabelas_btn_deletar').forEach(btn => {
btn.addEventListener('click', (e) => {
const id = e.target.dataset.id;
showConfirmation('Deletar', `Deseja deletar o registro ID: ${id}?`, (confirmed) => {
if (confirmed) {
showModal('Sucesso', 'Registro deletado com sucesso!', 'success', 3000);
}
});
});
});
}
```
---
**Arquivo: `/css/componentes.css`**
```css
/* Estilos específicos para Componentes */
.componentes_grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.componentes_card {
background: white;
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.3s ease;
}
.componentes_card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.componentes_card_header {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
color: white;
padding: 1.5rem;
}
.componentes_card_body {
padding: 1.5rem;
}
.componentes_badge {
display: inline-block;
padding: 0.375rem 0.75rem;
background-color: #dbeafe;
color: #1e3a8a;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 600;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
```
---
**Arquivo: `/js/componentes.js`**
```javascript
// Inicialização de Componentes
function initComponentes() {
console.log('Página de Componentes iniciada');
// Adicionar interatividade aos cards
document.querySelectorAll('.componentes_card').forEach(card => {
card.addEventListener('click', () => {
const titulo = card.querySelector('.componentes_card_header').textContent;
showModal('Componente', `Você clicou em: ${titulo}`, 'info', 3000);
});
});
}
```
---
**Arquivo: `/css/index.css`**
```css
/* Estilos específicos para Página Inicial */
.index_hero {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
color: white;
padding: 4rem 2rem;
border-radius: 0.5rem;
margin-bottom: 3rem;
text-align: center;
}
.index_hero h1 {
color: white;
font-size: 3rem;
margin-bottom: 1rem;
}
.index_hero p {
color: #dbeafe;
font-size: 1.25rem;
margin-bottom: 2rem;
}
.index_features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.index_feature_card {
background: white;
padding: 2rem;
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
text-align: center;
}
.index_feature_icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.index_feature_title {
font-size: 1.25rem;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 0.5rem;
}
.index_feature_text {
color: #6b7280;
line-height: 1.6;
}
```
---
**Arquivo: `/js/index.js`**
```javascript
// Inicialização da Página Inicial
function initIndex() {
console.log('Página Inicial carregada');
// Animação de entrada
document.querySelectorAll('.index_feature_card').forEach((card, index) => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
setTimeout(() => {
card.style.transition = 'all 0.6s ease';
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, index * 100);
});
}
```
---
**Arquivo HTML de exemplo: `paginadeleitura.php`**
```html
<div class="paginadeleitura_container">
<h1 class="paginadeleitura_titulo">Título da Página</h1>
<p class="paginadeleitura_subtitulo">Subtítulo descritivo</p>
<div class="paginadeleitura_conteudo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="paginadeleitura_destaque">
<strong>Destaque:</strong> Este é um ponto importante que merece atenção especial.
</div>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullam
Comentários
Comente só assim vamos crescer juntos!