Scribd
Upload
2 views29 pages

Data User 0 Com.zoho.Notebook Files Untitled

The document is an HTML template for an automated budget application by Franco Romeu, designed for renovations, furniture, and decoration. It includes sections for user input, service selection, and budget summary, along with a warning about a technical visit fee. The layout is responsive and styled using Tailwind CSS, featuring interactive elements for navigating through the budgeting process.

Uploaded by

Souza ROMEU
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views29 pages

Data User 0 Com.zoho.Notebook Files Untitled

The document is an HTML template for an automated budget application by Franco Romeu, designed for renovations, furniture, and decoration. It includes sections for user input, service selection, and budget summary, along with a warning about a technical visit fee. The layout is responsive and styled using Tailwind CSS, featuring interactive elements for navigating through the budgeting process.

Uploaded by

Souza ROMEU
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

<!

DOCTYPE html>

<html lang="pt-BR">

<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Franco Romeu - Orçamento Automatizado</title>

<script src="https://cdn.tailwindcss.com"></script>

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;
}

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

background: linear-gradient(135deg, #043451 0%, #8f1133 50%, #fc7016 100%);


min-height: 100vh;

color: #2c3e50;

.container {
max-width: 1200px;

margin: 0 auto;

padding: 20px;

.header {

background: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(10px);

border-radius: 15px;

padding: 30px;
text-align: center;

margin-bottom: 30px;

box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);


border: 2px solid #fc7016;

.header h1 {

color: #043451;

font-size: 2.5rem;

margin-bottom: 10px;

text-shadow: 1px 1px 2px rgba(0,0,0,0.1);


}

.header p {

color: #8f1133;

font-size: 1.1rem;
font-weight: 600;

.contact-info {

margin-top: 15px;
display: flex;

justify-content: center;

gap: 30px;

flex-wrap: wrap;

.contact-item {

color: #043451;

display: flex;

align-items: center;
gap: 8px;

font-weight: 500;

.main-content {
display: grid;

grid-template-columns: 1fr 400px;


gap: 30px;

.form-section, .orcamento-summary {

background: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(10px);

border-radius: 15px;

padding: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);

border: 1px solid #fc7016;

.orcamento-summary {
height: fit-content;

position: sticky;

top: 20px;

.form-group {

margin-bottom: 25px;

.form-group label {
display: block;

margin-bottom: 8px;

font-weight: 600;

color: #043451;

.form-group input, .form-group select, .form-group textarea {

width: 100%;

padding: 12px 16px;

border: 2px solid #e1e5e9;


border-radius: 8px;

font-size: 16px;
transition: all 0.3s ease;

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {

outline: none;

border-color: #fc7016;

box-shadow: 0 0 0 3px rgba(252, 112, 22, 0.1);

.btn {

background: linear-gradient(135deg, #fc7016 0%, #8f1133 100%);

color: white;

border: none;
padding: 12px 24px;

border-radius: 8px;

font-size: 16px;

font-weight: 600;

cursor: pointer;
transition: all 0.3s ease;

display: inline-flex;

align-items: center;

gap: 8px;

margin-right: 10px;
}

.btn:hover {

transform: translateY(-2px);

box-shadow: 0 8px 25px rgba(252, 112, 22, 0.3);


}

.btn-secondary {

background: linear-gradient(135deg, #043451 0%, #2c3e50 100%);

.btn-success {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);

.checkbox-group {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 15px;

margin-top: 15px;
}

.checkbox-item {

display: flex;

align-items: flex-start;
gap: 10px;

padding: 15px;

background: #f8f9fa;

border-radius: 8px;

cursor: pointer;
transition: all 0.3s ease;

border: 2px solid transparent;

.checkbox-item:hover {
background: #e9ecef;

border-color: #fc7016;

.checkbox-item input[type="checkbox"] {
width: 18px;

height: 18px;

margin-top: 2px;

.servico-config {

background: #f8f9fa;
border-radius: 8px;

padding: 20px;

margin-bottom: 15px;
border-left: 4px solid #fc7016;

.servico-header {

font-size: 1.2rem;
font-weight: 600;

color: #043451;

margin-bottom: 15px;

.summary-item {

display: flex;

justify-content: space-between;

align-items: center;

padding: 12px 0;
border-bottom: 1px solid #e9ecef;

.summary-total {

font-size: 1.3rem;
font-weight: 700;

color: #043451;

border-top: 2px solid #fc7016;

padding-top: 15px;

margin-top: 15px;
}

.step-indicator {

display: flex;

justify-content: center;
margin-bottom: 30px;

gap: 20px;
}

.step {
display: flex;

flex-direction: column;

align-items: center;

color: rgba(255, 255, 255, 0.7);

font-size: 14px;
}

.step.active {

color: white;
}

.step-number {

width: 40px;

height: 40px;
border-radius: 50%;

background: rgba(255, 255, 255, 0.2);

display: flex;

align-items: center;

justify-content: center;
margin-bottom: 8px;

font-weight: 600;

.step.active .step-number {

background: #fc7016;

color: white;

.modal {

display: none;

position: fixed;
z-index: 1000;

left: 0;

top: 0;
width: 100%;

height: 100%;

background: rgba(0,0,0,0.5);

backdrop-filter: blur(5px);

.modal-content {

background: white;

margin: 5% auto;

padding: 30px;
border-radius: 15px;

width: 90%;

max-width: 600px;

box-shadow: 0 20px 60px rgba(0,0,0,0.3);

border: 2px solid #fc7016;


}

.close {

color: #aaa;

float: right;
font-size: 28px;

font-weight: bold;

cursor: pointer;

.close:hover {

color: #8f1133;

.alert-warning {
background: #fff3cd;

border: 1px solid #ffeaa7;


color: #856404;

padding: 15px;

border-radius: 8px;
margin-bottom: 20px;

border-left: 4px solid #fc7016;

.alert-warning strong {
color: #8f1133;

.config-section {

margin-bottom: 20px;
padding: 15px;

background: #fff;

border-radius: 8px;

border: 1px solid #e9ecef;

.config-section h4 {

color: #043451;

margin-bottom: 10px;

font-size: 1.1rem;
}

@media (max-width: 768px) {

.main-content {

grid-template-columns: 1fr;
}

.header h1 {

font-size: 2rem;

.contact-info {
flex-direction: column;

align-items: center;

gap: 15px;
}

</style>

</head>

<body>
<div class="container">

<div class="header">

<h1>Franco Romeu</h1>

<p>Orçamentos Automatizados para Reforma, Móveis e Decoração</p>

<div class="contact-info">
<div class="contact-item">

<span> 📞 </span>

<span>11 9002 1603</span>

</div>

<div class="contact-item">
<span> ✉️</span>

<span>romeudifranco@gmail.com</span>

</div>

</div>
</div>

<div class="alert-warning">

<strong> ⚠️ IMPORTANTE:</strong> Todos os orçamentos requerem visita técnica de R$ 9

Este valor será descontado do orçamento final. O preço final será definido após a visita té
</div>

<div class="step-indicator">

<div class="step active" id="step1">

<div class="step-number">1</div>
<span>Medidas</span>

</div>

<div class="step" id="step2">


<div class="step-number">2</div>

<span>Serviços</span>

</div>
<div class="step" id="step3">

<div class="step-number">3</div>

<span>Detalhes</span>

</div>

<div class="step" id="step4">


<div class="step-number">4</div>

<span>Orçamento</span>

</div>

</div>

<div class="main-content">

<div class="form-section">

<!-- Etapa 1: Informações Básicas -->

<div id="etapa1">

<h2>Informações Básicas</h2>
<div class="form-group">

<label for="ambiente">Local do Serviço:</label>

<select id="ambiente">

<option value="">Selecione o ambiente</option>

<option value="cozinha">Cozinha</option>
<option value="banheiro">Banheiro</option>

<option value="quarto">Quarto</option>

<option value="sala">Sala</option>

<option value="area_externa">Área Externa</option>

<option value="escritorio">Escritório</option>
<option value="lavanderia">Lavanderia</option>

<option value="garagem">Garagem</option>

</select>

</div>

<div class="form-group">
<label for="metragem">Metragem (m²):</label>

<input type="number" id="metragem" placeholder="Ex: 25" min="1" step="0.1">


</div>

<button class="btn" onclick="proximaEtapa(2)">Próximo Passo →</button>

</div>

<!-- Etapa 2: Seleção de Serviços -->

<div id="etapa2" style="display: none;">

<h2>Selecione os Serviços</h2>

<div class="checkbox-group" id="servicosDisponiveis">


<!-- Serviços carregados dinamicamente -->

</div>

<div style="margin-top: 30px;">

<button class="btn btn-secondary" onclick="voltarEtapa(1)">← Voltar</button>

<button class="btn" onclick="proximaEtapa(3)">Próximo Passo →</button>


</div>

</div>

<!-- Etapa 3: Configuração dos Serviços -->

<div id="etapa3" style="display: none;">


<h2>Configuração dos Serviços</h2>

<div id="configuracaoServicos">

<!-- Configurações aparecerão dinamicamente -->

</div>

<div style="margin-top: 30px;">


<button class="btn btn-secondary" onclick="voltarEtapa(2)">← Voltar</button>

<button class="btn" onclick="proximaEtapa(4)">Gerar Orçamento →</button>

</div>

</div>

<!-- Etapa 4: Finalização -->

<div id="etapa4" style="display: none;">

<h2>Finalizar Orçamento</h2>

<div class="form-group">

<label for="nomeCliente">Nome Completo:</label>


<input type="text" id="nomeCliente" placeholder="Seu nome completo">

</div>
<div class="form-group">

<label for="telefoneCliente">Telefone:</label>

<input type="tel" id="telefoneCliente" placeholder="(11) 99999-9999">


</div>

<div class="form-group">

<label for="emailCliente">E-mail:</label>

<input type="email" id="emailCliente" placeholder="seu@email.com">

</div>

<div class="form-group">

<label for="observacoes">Observações:</label>

<textarea id="observacoes" rows="3" placeholder="Informações adicionais..."></tex

</div>
<div style="margin-top: 30px;">

<button class="btn btn-secondary" onclick="voltarEtapa(3)">← Voltar</button>

<button class="btn btn-success" onclick="finalizarOrcamento()">Finalizar Orçament

</div>

</div>
</div>

<div class="orcamento-summary">

<h3>Resumo do Orçamento</h3>

<div id="resumoServicos">
<p style="text-align: center; color: #666; margin: 20px 0;">

Selecione os serviços para ver o resumo

</p>

</div>

<div class="summary-total">
<div class="summary-item">

<span>Subtotal:</span>

<span id="valorSubtotal">R$ 0,00</span>

</div>

<div class="summary-item">
<span>Visita Técnica:</span>

<span>R$ 99,00</span>

</div>
<div class="summary-item" style="border-top: 2px solid #fc7016; padding-top: 10px;">

<span><strong>Total:</strong></span>

<span id="valorTotal"><strong>R$ 99,00</strong></span>


</div>

<div class="summary-item">

<span>Entrada (10%):</span>

<span id="valorEntrada">R$ 9,90</span>

</div>
</div>

</div>

</div>

</div>

<!-- Modal de Sucesso -->

<div id="modalSucesso" class="modal">

<div class="modal-content">

<span class="close" onclick="fecharModal()">&times;</span>

<h2> 🎉 Orçamento Gerado com Sucesso!</h2>


<p>Seu orçamento foi criado. Entraremos em contato para agendar a visita técnica de R$

<div class="alert-warning">

<strong>Lembre-se:</strong> O valor da visita técnica será descontado do valor final do

</div>

<div id="detalhesOrcamento"></div>
<div style="margin-top: 20px; text-align: center;">

<button class="btn btn-success" onclick="gerarPDF()"> 📄 Baixar PDF</button>

<button class="btn" onclick="novoOrcamento()"> 🔄 Novo Orçamento</button>

</div>

</div>
</div>

<script>

// Catálogo de serviços expandido

const catalogos = {
massa_corrida: {

nome: "Massa Corrida",


unidade: "m²",

preco_base: 25,

configuracoes: {
condicao_parede: {

nome: "Condição da Parede",

opcoes: [

{ nome: "Parede Crua (sem pintura)", adicional: 0 },

{ nome: "Com Revestimento Antigo", adicional: 12 },


{ nome: "Com Pintura Descascando", adicional: 8 },

{ nome: "Com Fungos/Mofo", adicional: 15 },

{ nome: "Com Bolhas/Umidade", adicional: 18 }

},
tipo_tinta: {

nome: "Tipo de Tinta",

opcoes: [

{ nome: "Tinta Acrílica Padrão", adicional: 0 },

{ nome: "Tinta Premium", adicional: 8 },


{ nome: "Tinta Antimicrobiana", adicional: 12 },

{ nome: "Tinta Texturizada", adicional: 15 }

}
},

pintura: {

nome: "Pintura",

unidade: "m²",

preco_base: 20,
configuracoes: {

condicao_superficie: {

nome: "Condição da Superfície",

opcoes: [

{ nome: "Superfície Preparada", adicional: 0 },


{ nome: "Com Textura Existente", adicional: 7 },

{ nome: "Sobre Revestimento", adicional: 12 },


{ nome: "Com Fungos/Mofo", adicional: 15 },

{ nome: "Parede Descascando", adicional: 10 },

{ nome: "Com Bolhas/Umidade", adicional: 16 }


]

},

tipo_tinta: {

nome: "Tipo de Tinta",

opcoes: [
{ nome: "Tinta Acrílica Padrão", adicional: 0 },

{ nome: "Tinta Premium", adicional: 8 },

{ nome: "Tinta Antimicrobiana", adicional: 12 },

{ nome: "Esmalte Premium", adicional: 18 }

]
}

},

revestimento: {

nome: "Revestimento",
unidade: "m²",

preco_base: 60,

configuracoes: {

condicao_piso: {

nome: "Condição do Piso",


opcoes: [

{ nome: "Contrapiso Cru", adicional: 0 },

{ nome: "Remover Revestimento Antigo", adicional: 25 },

{ nome: "Piso sobre Piso", adicional: 15 },

{ nome: "Nivelamento Necessário", adicional: 20 }


]

},

tipo_revestimento: {

nome: "Tipo de Revestimento",

opcoes: [
{ nome: "Cerâmica Padrão", adicional: 0 },

{ nome: "Porcelanato", adicional: 20 },


{ nome: "Pedra Natural", adicional: 35 },

{ nome: "Laminado", adicional: 15 }

]
}

},

forro_gesso: {

nome: "Forro de Gesso",


unidade: "m²",

preco_base: 75,

configuracoes: {

condicao_teto: {

nome: "Condição do Teto",


opcoes: [

{ nome: "Teto Novo", adicional: 0 },

{ nome: "Remover Forro Antigo", adicional: 20 },

{ nome: "Teto com Umidade", adicional: 25 },

{ nome: "Correção de Nível", adicional: 15 }


]

},

tipo_estrutura: {

nome: "Tipo de Estrutura",

opcoes: [
{ nome: "Laje de Concreto", adicional: 0 },

{ nome: "Estrutura de Madeira", adicional: 15 },

{ nome: "Telha Cerâmica", adicional: 20 },

{ nome: "Telha Fibrocimento", adicional: 12 }

]
},

tipo_forro: {

nome: "Tipo de Forro",

opcoes: [

{ nome: "Forro Liso", adicional: 0 },


{ nome: "Sanca Aberta", adicional: 15 },

{ nome: "Sanca Fechada", adicional: 25 },


{ nome: "Forro Decorativo", adicional: 30 }

}
}

},

eletrica: {

nome: "Instalação Elétrica",

unidade: "ponto",
preco_base: 45,

configuracoes: {

tipo_instalacao: {

nome: "Tipo de Instalação",

opcoes: [
{ nome: "Ponto Novo Simples", adicional: 0 },

{ nome: "Remover Fios Antigos", adicional: 15 },

{ nome: "Passar Dutos e Fios", adicional: 25 },

{ nome: "Apenas Reparo Técnico", adicional: -15 }

]
},

tipo_parede: {

nome: "Tipo de Parede",

opcoes: [

{ nome: "Drywall", adicional: 5 },


{ nome: "Alvenaria", adicional: 10 },

{ nome: "Parede Dupla", adicional: 15 }

},

tipo_fio: {
nome: "Tipo de Fio",

opcoes: [

{ nome: "Fio 2,5mm Padrão", adicional: 0 },

{ nome: "Fio 4,0mm Premium", adicional: 8 },

{ nome: "Fio 6,0mm Industrial", adicional: 15 }


]

}
}

},

instalacao_pia: {
nome: "Instalação de Pia",

unidade: "item",

preco_base: 180,

configuracoes: {

tipo_cuba: {
nome: "Tipo de Cuba",

opcoes: [

{ nome: "Cuba Convencional", adicional: 0 },

{ nome: "Cuba Gourmet", adicional: 120 },

{ nome: "Cuba de Apoio", adicional: 80 }


]

},

tipo_torneira: {

nome: "Tipo de Torneira",

opcoes: [
{ nome: "Torneira Fria", adicional: 0 },

{ nome: "Misturador", adicional: 45 },

{ nome: "Monocomando", adicional: 85 }

}
}

},

drywall: {

nome: "Drywall",

unidade: "m²",
preco_base: 80,

configuracoes: {

tipo_estrutura: {

nome: "Tipo de Estrutura",

opcoes: [
{ nome: "Estrutura Galvanizada", adicional: 0 },

{ nome: "Frame Steel", adicional: 15 },


{ nome: "Frame Steel + Hidrofugante", adicional: 25 }

},
tipo_chapa: {

nome: "Tipo de Chapa",

opcoes: [

{ nome: "Chapa Padrão 12,5mm", adicional: 0 },

{ nome: "Chapa Resistente à Umidade", adicional: 12 },


{ nome: "Chapa Resistente ao Fogo", adicional: 18 }

}
};

// Estado da aplicação

let servicosSelecionados = [];

let etapaAtual = 1;

// Funções principais

function proximaEtapa(novaEtapa) {

if (etapaAtual === 1) {

const ambiente = document.getElementById('ambiente').value;


const metragem = document.getElementById('metragem').value;

if (!ambiente || !metragem) {

alert('Por favor, preencha todos os campos obrigatórios.');

return;

}
}

if (etapaAtual === 2 && servicosSelecionados.length === 0) {

alert('Selecione pelo menos um serviço.');

return;
}
document.getElementById(`etapa${etapaAtual}`).style.display = 'none';

document.getElementById(`step${etapaAtual}`).classList.remove('active');

etapaAtual = novaEtapa;

document.getElementById(`etapa${etapaAtual}`).style.display = 'block';

document.getElementById(`step${etapaAtual}`).classList.add('active');

if (etapaAtual === 2) {
carregarServicos();

} else if (etapaAtual === 3) {

gerarConfiguracaoServicos();

function voltarEtapa(novaEtapa) {

document.getElementById(`etapa${etapaAtual}`).style.display = 'none';

document.getElementById(`step${etapaAtual}`).classList.remove('active');

etapaAtual = novaEtapa;

document.getElementById(`etapa${etapaAtual}`).style.display = 'block';

document.getElementById(`step${etapaAtual}`).classList.add('active');

function toggleServico(servicoKey) {

const checkbox = document.getElementById(`servico_${servicoKey}`);

if (checkbox.checked) {

if (!servicosSelecionados.find(s => s.id === servicoKey)) {

const servico = catalogos[servicoKey];

const configuracoes = {};

// Inicializar configurações com valores padrão

Object.keys(servico.configuracoes).forEach(configKey => {
configuracoes[configKey] = 0; // Primeira opção

});
servicosSelecionados.push({

id: servicoKey,

configuracoes: configuracoes,
quantidade: 1

});

} else {

servicosSelecionados = servicosSelecionados.filter(s => s.id !== servicoKey);

atualizarResumo();

function carregarServicos() {

const container = document.getElementById('servicosDisponiveis');

container.innerHTML = '';

Object.keys(catalogos).forEach(key => {
const servico = catalogos[key];

const div = document.createElement('div');

div.className = 'checkbox-item';

div.innerHTML = `

<input type="checkbox" id="servico_${key}" value="${key}" onchange="toggleServico('$


<label for="servico_${key}">

<strong>${servico.nome}</strong><br>

<small>A partir de R$ ${servico.preco_base},00/${servico.unidade}</small>

</label>

`;
container.appendChild(div);

});

function gerarConfiguracaoServicos() {
const container = document.getElementById('configuracaoServicos');

container.innerHTML = '';
servicosSelecionados.forEach((servicoSelecionado, index) => {

const servico = catalogos[servicoSelecionado.id];

const div = document.createElement('div');

div.className = 'servico-config';

let configHTML = `<div class="servico-header">${servico.nome}</div>`;

// Adicionar campo de quantidade

configHTML += `

<div class="form-group">

<label for="quantidade_${index}">Quantidade (${servico.unidade}):</label>

<input type="number" id="quantidade_${index}" value="${servicoSelecionado.quant


min="1" step="0.1" onchange="atualizarQuantidade(${index}, this.value)">

</div>

`;

// Adicionar configurações específicas


Object.keys(servico.configuracoes).forEach((configKey, configIndex) => {

const config = servico.configuracoes[configKey];

configHTML += `

<div class="form-group">
<label for="config_${index}_${configKey}">${config.nome}:</label>

<select id="config_${index}_${configKey}"

onchange="atualizarConfiguracao(${index}, '${configKey}', this.selectedIndex

${config.opcoes.map((opcao, i) => `

<option value="${i}" ${servicoSelecionado.configuracoes[configKey] === i ? 's

${opcao.nome} ${opcao.adicional !== 0 ? `(+ R$ ${opcao.adicional},00)` : ''}

</option>

`).join('')}

</select>
</div>

`;

});
div.innerHTML = configHTML;

container.appendChild(div);
});

function atualizarQuantidade(index, novaQuantidade) {

servicosSelecionados[index].quantidade = parseFloat(novaQuantidade);
atualizarResumo();

function atualizarConfiguracao(index, configKey, opcaoIndex) {

servicosSelecionados[index].configuracoes[configKey] = opcaoIndex;
atualizarResumo();

function atualizarResumo() {

const container = document.getElementById('resumoServicos');


const metragem = parseFloat(document.getElementById('metragem').value) || 0;

if (servicosSelecionados.length === 0) {

container.innerHTML = '<p style="text-align: center; color: #666; margin: 20px 0;">Selecio

document.getElementById('valorSubtotal').textContent = 'R$ 0,00';


document.getElementById('valorTotal').innerHTML = '<strong>R$ 99,00</strong>';

document.getElementById('valorEntrada').textContent = 'R$ 9,90';

return;

let html = '';

let subtotal = 0;

servicosSelecionados.forEach(servicoSelecionado => {

const servico = catalogos[servicoSelecionado.id];

let precoServico = servico.preco_base;


// Calcular adicionais das configurações

Object.keys(servico.configuracoes).forEach(configKey => {

const opcaoIndex = servicoSelecionado.configuracoes[configKey];


const adicional = servico.configuracoes[configKey].opcoes[opcaoIndex].adicional;

precoServico += adicional;

});

const quantidade = servicoSelecionado.quantidade;


const valorServico = precoServico * quantidade;

subtotal += valorServico;

html += `

<div class="summary-item">
<span>${servico.nome} (${quantidade} ${servico.unidade})</span>

<span>R$ ${valorServico.toFixed(2).replace('.', ',')}</span>

</div>

`;

});

container.innerHTML = html;

const total = subtotal + 99;

const entrada = total * 0.1;

document.getElementById('valorSubtotal').textContent = `R$ ${subtotal.toFixed(2).replace

document.getElementById('valorTotal').innerHTML = `<strong>R$ ${total.toFixed(2).replac

document.getElementById('valorEntrada').textContent = `R$ ${entrada.toFixed(2).replace('

function finalizarOrcamento() {

const nome = document.getElementById('nomeCliente').value;

const telefone = document.getElementById('telefoneCliente').value;

const email = document.getElementById('emailCliente').value;

if (!nome || !telefone || !email) {


alert('Por favor, preencha todos os campos obrigatórios.');

return;

// Gerar resumo para o modal

let resumoHTML = `

<h3 style="margin-top: 20px; color: #043451;">Detalhes do Cliente</h3>

<p><strong>Nome:</strong> ${nome}</p>
<p><strong>Telefone:</strong> ${telefone}</p>

<p><strong>E-mail:</strong> ${email}</p>

<h3 style="margin-top: 20px; color: #043451;">Detalhes do Orçamento</h3>

`;

const metragem = document.getElementById('metragem').value;

const ambiente = document.getElementById('ambiente').options[document.getElementBy

resumoHTML += `<p><strong>Ambiente:</strong> ${ambiente} (${metragem}m²)</p>`;

let subtotal = 0;

servicosSelecionados.forEach(servicoSelecionado => {

const servico = catalogos[servicoSelecionado.id];

let precoServico = servico.preco_base;

// Calcular adicionais das configurações

Object.keys(servico.configuracoes).forEach(configKey => {

const opcaoIndex = servicoSelecionado.configuracoes[configKey];


const adicional = servico.configuracoes[configKey].opcoes[opcaoIndex].adicional;

precoServico += adicional;

});

const quantidade = servicoSelecionado.quantidade;


const valorServico = precoServico * quantidade;

subtotal += valorServico;
resumoHTML += `

<p style="margin-top: 10px;">

<strong>${servico.nome}:</strong> ${quantidade} ${servico.unidade} - R$ ${valorSe


</p>

`;

});

const total = subtotal + 99;


const entrada = total * 0.1;

resumoHTML += `

<div style="margin-top: 15px; border-top: 1px solid #eee; padding-top: 15px;">

<p><strong>Subtotal:</strong> R$ ${subtotal.toFixed(2).replace('.', ',')}</p>


<p><strong>Visita Técnica:</strong> R$ 99,00</p>

<p><strong>Total:</strong> R$ ${total.toFixed(2).replace('.', ',')}</p>

<p><strong>Entrada (10%):</strong> R$ ${entrada.toFixed(2).replace('.', ',')}</p>

</div>

<p style="margin-top: 20px; font-style: italic;">

Observações: ${document.getElementById('observacoes').value || 'Nenhuma'}

</p>

`;

document.getElementById('detalhesOrcamento').innerHTML = resumoHTML;

document.getElementById('modalSucesso').style.display = 'block';

function fecharModal() {
document.getElementById('modalSucesso').style.display = 'none';

function gerarPDF() {

alert('Função de gerar PDF será implementada aqui.');


// Implementação real requer biblioteca como jsPDF

}
function novoOrcamento() {

// Resetar o formulário
document.getElementById('etapa1').style.display = 'block';

document.getElementById('etapa2').style.display = 'none';

document.getElementById('etapa3').style.display = 'none';

document.getElementById('etapa4').style.display = 'none';

document.getElementById('step1').classList.add('active');

document.getElementById('step2').classList.remove('active');

document.getElementById('step3').classList.remove('active');

document.getElementById('step4').classList.remove('active');

etapaAtual = 1;

servicosSelecionados = [];

// Limpar campos

document.getElementById('ambiente').value = '';
document.getElementById('metragem').value = '';

document.getElementById('nomeCliente').value = '';

document.getElementById('telefoneCliente').value = '';

document.getElementById('emailCliente').value = '';

document.getElementById('observacoes').value = '';

// Resetar checkboxes

const checkboxes = document.querySelectorAll('input[type="checkbox"]');

checkboxes.forEach(checkbox => {

checkbox.checked = false;
});

// Resetar resumo

document.getElementById('resumoServicos').innerHTML =

'<p style="text-align: center; color: #666; margin: 20px 0;">Selecione os serviços para ver
document.getElementById('valorSubtotal').textContent = 'R$ 0,00';

document.getElementById('valorTotal').innerHTML = '<strong>R$ 99,00</strong>';


document.getElementById('valorEntrada').textContent = 'R$ 9,90';

// Fechar modal
fecharModal();

// Inicializar a página

document.addEventListener('DOMContentLoaded', function() {
carregarServicos();

});

</script>

</body>

</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy