Esta é uma página de exemplo. É diferente de um post no blog porque ela permanecerá em um lugar e aparecerá na navegação do seu site na maioria dos temas. Muitas pessoas começam com uma página que as apresenta a possíveis visitantes do site. Ela pode dizer algo assim:
Olá! Eu sou um mensageiro de bicicleta durante o dia, ator aspirante à noite, e este é o meu site. Eu moro em São Paulo, tenho um grande cachorro chamado Rex e gosto de tomar caipirinha (e banhos de chuva).
…ou alguma coisa assim:
A Companhia de Miniaturas XYZ foi fundada em 1971, e desde então tem fornecido miniaturas de qualidade ao público. Localizada na cidade de Itu, a XYZ emprega mais de 2.000 pessoas e faz coisas grandiosas para a comunidade da cidade.
Como um novo usuário do WordPress, você deveria ir ao painel para excluir essa página e criar novas páginas para o seu conteúdo. Divirta-se!
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ObraNaMão - Calculadora de Construção</title>
<style>
/* --- Estilo Geral --- */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #f0f2f5;
color: #333;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
}
.container {
width: 100%;
max-width: 800px;
}
/* --- Cabeçalho --- */
header {
text-align: center;
margin-bottom: 30px;
}
header h1 {
color: #0056b3;
margin: 0;
}
/* --- Cards de Seção --- */
.card {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 25px;
margin-bottom: 20px;
}
h2, h3, h4 {
color: #333;
margin-top: 0;
}
/* --- Formulários e Inputs --- */
label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
input[type="text"], input[type="number"], select {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box; /* Garante que o padding não afete a largura total */
margin-bottom: 15px;
}
button {
background-color: #007bff;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
width: 100%;
transition: background-color 0.2s;
}
button:hover {
background-color: #0056b3;
}
#generate-report-btn {
background-color: #28a745; /* Cor verde para ação principal */
}
#generate-report-btn:hover {
background-color: #218838;
}
/* --- Seção de Relatório --- */
#report-section {
border-left: 4px solid #007bff;
}
#report-content table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
#report-content th, #report-content td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
#report-content th {
background-color: #f2f2f2;
}
.total-row {
font-weight: bold;
font-size: 1.1em;
}
/* --- Utilitários --- */
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>ObraNaMão 🏗️</h1>
<p>Sua calculadora de materiais e orçamento</p>
</header>
<!-- Seção de Gerenciamento de Projetos -->
<div class="card">
<h2>1. Gerenciar Projetos</h2>
<input type="text" id="new-project-name" placeholder="Nome do Novo Projeto (ex: Reforma Banheiro)">
<button id="create-project-btn">Criar Projeto</button>
<hr style="margin: 20px 0;">
<label for="project-selector">Selecione um Projeto Existente:</label>
<select id="project-selector">
<option value="">-- Nenhum projeto selecionado --</option>
</select>
</div>
<!-- Seção da Calculadora (visível após selecionar um projeto) -->
<div id="calculator-section" class="card hidden">
<h3>Projeto Ativo: <span id="active-project-name"></span></h3>
<h4>2. Adicionar Cálculos</h4>
<form id="calc-form">
<label for="wall-width">Largura da Parede (m):</label>
<input type="number" id="wall-width" step="0.01" required>
<label for="wall-height">Altura da Parede (m):</label>
<input type="number" id="wall-height" step="0.01" required>
<label for="loss-factor">Fator de Perda (%):</label>
<input type="number" id="loss-factor" value="10" step="1" required>
<button type="submit">Adicionar Cálculo de Parede</button>
</form>
<hr style="margin: 20px 0;">
<h4>3. Custo da Mão de Obra</h4>
<label for="labor-cost">Custo Total da Mão de Obra (R$):</label>
<input type="number" id="labor-cost" step="0.01" value="0">
<hr style="margin: 20px 0;">
<button id="generate-report-btn">✅ Gerar Orçamento Final</button>
</div>
<!-- Seção do Relatório (visível após gerar o orçamento) -->
<div id="report-section" class="card hidden">
<h2>Relatório Final do Orçamento</h2>
<div id="report-content"></div>
</div>
</div>
<script>
// --- LÓGICA DO APLICATIVO (JAVASCRIPT) ---
// --- Banco de Dados e Constantes (Simulação) ---
const PRECOS_BASE = {
tijolo_baiano_8furos: 1.20,
cimento_saco_50kg: 45.00,
areia_media_metro_cubico: 150.00
};
const DIMENSOES_TIJOLO = { comprimento: 0.19, altura: 0.19, largura: 0.09 };
const JUNTA_ARGAMASSA = 0.01;
const TRACO_ARGAMASSA_ASSENTAMENTO = [1, 6]; // 1 cimento : 6 areia
const RENDIMENTO_SACO_CIMENTO = 0.036;
let projetos = {};
let projetoAtivo = null;
// --- Referências aos Elementos do DOM ---
const newProjectNameInput = document.getElementById('new-project-name');
const createProjectBtn = document.getElementById('create-project-btn');
const projectSelector = document.getElementById('project-selector');
const calculatorSection = document.getElementById('calculator-section');
const activeProjectNameSpan = document.getElementById('active-project-name');
const calcForm = document.getElementById('calc-form');
const laborCostInput = document.getElementById('labor-cost');
const generateReportBtn = document.getElementById('generate-report-btn');
const reportSection = document.getElementById('report-section');
const reportContent = document.getElementById('report-content');
// --- Funções de Gerenciamento de Projetos ---
function criarProjeto() {
const nome = newProjectNameInput.value.trim();
if (!nome) {
alert("Por favor, digite um nome para o projeto.");
return;
}
if (projetos[nome]) {
alert("Um projeto com este nome já existe.");
return;
}
projetos[nome] = {
nome: nome,
itens_calculados: [],
custo_mao_de_obra: 0
};
atualizarSeletorProjetos();
projectSelector.value = nome; // Seleciona o projeto recém-criado
selecionarProjeto(); // Ativa o projeto
newProjectNameInput.value = "";
}
function atualizarSeletorProjetos() {
// Limpa opções antigas, exceto a primeira
while (projectSelector.options.length > 1) {
projectSelector.remove(1);
}
for (const nome in projetos) {
const option = document.createElement('option');
option.value = nome;
option.textContent = nome;
projectSelector.appendChild(option);
}
}
function selecionarProjeto() {
projetoAtivo = projectSelector.value;
if (projetoAtivo) {
activeProjectNameSpan.textContent = projetoAtivo;
calculatorSection.classList.remove('hidden');
reportSection.classList.add('hidden'); // Esconde relatório antigo ao trocar de projeto
// Carrega o custo da mão de obra salvo para o projeto
laborCostInput.value = projetos[projetoAtivo].custo_mao_de_obra || 0;
} else {
calculatorSection.classList.add('hidden');
}
}
// --- Funções de Cálculo e Orçamento ---
function adicionarCalculo(event) {
event.preventDefault(); // Impede o recarregamento da página
const largura = parseFloat(document.getElementById('wall-width').value);
const altura = parseFloat(document.getElementById('wall-height').value);
const fatorPerda = parseFloat(document.getElementById('loss-factor').value);
const areaBruta = largura * altura;
const fatorPerdaDecimal = 1 + (fatorPerda / 100);
const areaTijoloComJunta = (DIMENSOES_TIJOLO.comprimento + JUNTA_ARGAMASSA) * (DIMENSOES_TIJOLO.altura + JUNTA_ARGAMASSA);
const tijolosPorM2 = 1 / areaTijoloComJunta;
const totalTijolos = Math.ceil(areaBruta * tijolosPorM2 * fatorPerdaDecimal);
const volumeArgamassaM3 = areaBruta * DIMENSOES_TIJOLO.largura * fatorPerdaDecimal;
const partesTotais = TRACO_ARGAMASSA_ASSENTAMENTO[0] + TRACO_ARGAMASSA_ASSENTAMENTO[1];
const volumeCimentoM3 = (volumeArgamassaM3 / partesTotais) * TRACO_ARGAMASSA_ASSENTAMENTO[0];
const volumeAreiaM3 = (volumeArgamassaM3 / partesTotais) * TRACO_ARGAMASSA_ASSENTAMENTO[1];
const sacosCimento = Math.ceil(volumeCimentoM3 / RENDIMENTO_SACO_CIMENTO);
const calculo = {
descricao: `Parede de ${largura}m x ${altura}m`,
materiais: [
{ item: "Tijolo Baiano (8 furos)", quantidade: totalTijolos, unidade: "unidades", preco_chave: "tijolo_baiano_8furos" },
{ item: "Cimento (saco 50kg)", quantidade: sacosCimento, unidade: "sacos", preco_chave: "cimento_saco_50kg" },
{ item: "Areia Média", quantidade: parseFloat(volumeAreiaM3.toFixed(2)), unidade: "m³", preco_chave: "areia_media_metro_cubico" }
]
};
projetos[projetoAtivo].itens_calculados.push(calculo);
alert(`Cálculo para "${calculo.descricao}" foi adicionado ao projeto!`);
calcForm.reset();
document.getElementById('loss-factor').value = 10; // Reseta o fator de perda para o padrão
}
function gerarOrcamento() {
if (!projetoAtivo || projetos[projetoAtivo].itens_calculados.length === 0) {
alert("Adicione pelo menos um cálculo ao projeto antes de gerar o orçamento.");
return;
}
// Salva o valor atual da mão de obra
projetos[projetoAtivo].custo_mao_de_obra = parseFloat(laborCostInput.value) || 0;
const custoMaoDeObra = projetos[projetoAtivo].custo_mao_de_obra;
// Consolida materiais
const materiaisConsolidados = {};
projetos[projetoAtivo].itens_calculados.forEach(calculo => {
calculo.materiais.forEach(mat => {
if (materiaisConsolidados[mat.item]) {
materiaisConsolidados[mat.item].quantidade += mat.quantidade;
} else {
materiaisConsolidados[mat.item] = { ...mat };
}
});
});
let totalMateriais = 0;
let reportHTML = `
<p><strong>Projeto:</strong> ${projetoAtivo}</p>
<h4>Custos de Materiais</h4>
<table>
<tr>
<th>Item</th>
<th>Quantidade</th>
<th>Preço Unit.</th>
<th>Subtotal</th>
</tr>
`;
for (const item in materiaisConsolidados) {
const mat = materiaisConsolidados[item];
const precoUnitario = PRECOS_BASE[mat.preco_chave];
const subtotal = mat.quantidade * precoUnitario;
totalMateriais += subtotal;
reportHTML += `
<tr>
<td>${mat.item}</td>
<td>${mat.quantidade.toFixed(2)} ${mat.unidade}</td>
<td>R$ ${precoUnitario.toFixed(2)}</td>
<td>R$ ${subtotal.toFixed(2)}</td>
</tr>
`;
}
const custoTotal = totalMateriais + custoMaoDeObra;
reportHTML += `
<tr class="total-row">
<td colspan="3">Subtotal de Materiais</td>
<td>R$ ${totalMateriais.toFixed(2)}</td>
</tr>
<tr class="total-row">
<td colspan="3">Custo de Mão de Obra</td>
<td>R$ ${custoMaoDeObra.toFixed(2)}</td>
</tr>
<tr class="total-row" style="background-color: #e9f5ff;">
<td colspan="3">CUSTO TOTAL DO PROJETO</td>
<td>R$ ${custoTotal.toFixed(2)}</td>
</tr>
</table>
`;
reportContent.innerHTML = reportHTML;
reportSection.classList.remove('hidden');
}
// --- Adicionar Event Listeners ---
createProjectBtn.addEventListener('click', criarProjeto);
projectSelector.addEventListener('change', selecionarProjeto);
calcForm.addEventListener('submit', adicionarCalculo);
generateReportBtn.addEventListener('click', gerarOrcamento);
</script>
</body>
</html>