PAGINA WEB
Programador php
-
Status do projeto
Fechado -
Interessado
10 -
Postado em
-
Localização
O projeto pode ser concluído remotamente -
Orçamento
R$ 100 - R$ 500 -
postado por
FELISBERTO
Descrição do trabalho
Gostaria de desenvolver um simples, sistema web. para criar propostas comerciais com base em custos de equipe que fornecerei. o codigo abaixo mostra um pouco do que pretendo criar.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerador de Proposta - ***************</title>
<style>
:root {
--primary-color: #b30000; /* Vermelho ********* */
--secondary-color: #333;
--light-bg: #eef2f5;
--border-color: #000;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--light-bg);
margin: 0;
padding: 20px;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
padding: 30px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border-radius: 10px;
}
/* --- Estilos de Edição (2 Quadros) --- */
.editor-section h1 {
color: var(--primary-color);
text-align: center;
margin-bottom: 30px;
text-transform: uppercase;
font-size: 1.5rem;
}
.input-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr; /* Dividido em 2 colunas exatas */
gap: 30px;
margin-bottom: 30px;
}
.card {
background: #fff;
border: 1px solid #e0e0e0;
padding: 25px;
border-radius: 8px;
border-top: 5px solid var(--primary-color);
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.card h3 {
margin-top: 0;
font-size: 1.2rem;
color: #444;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 15px;
margin-bottom: 20px;
}
.sub-group {
background: #f9f9f9;
padding: 15px;
border-radius: 6px;
margin-bottom: 15px;
border: 1px solid #eee;
}
.sub-group h4 {
margin: 0 0 10px 0;
font-size: 0.9rem;
color: var(--primary-color);
text-transform: uppercase;
}
.form-row {
display: flex;
gap: 15px;
margin-bottom: 10px;
}
.form-group {
flex: 1;
margin-bottom: 10px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 600;
font-size: 0.8rem;
color: #555;
}
input[type="number"], input[type="text"], input[type="email"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 0.95rem;
}
input:focus {
border-color: var(--primary-color);
outline: none;
}
.actions {
text-align: center;
margin-top: 20px;
padding: 20px;
background: #fff;
border-top: 1px solid #eee;
}
button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 15px 40px;
font-size: 1rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s;
margin: 0 10px;
font-weight: bold;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
button:hover { background-color: #8a0000; transform: translateY(-2px); }
button.secondary { background-color: #555; }
/* --- Estilos do Documento de Impressão --- */
#print-area {
display: none;
background: white;
margin-top: 20px;
}
.document-border {
border: 2px solid var(--border-color);
padding: 40px;
position: relative;
min-height: 900px;
}
.doc-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 3px solid var(--primary-color);
}
.company-details {
font-size: 0.75rem;
color: #333;
line-height: 1.4;
margin-top: 10px;
}
.proposal-title-box {
text-align: right;
}
.proposal-title-box h2 {
margin: 0;
color: var(--primary-color);
font-size: 1.8rem;
letter-spacing: 1px;
}
.client-section {
background-color: #fcfcfc;
border: 1px solid #e0e0e0;
padding: 15px;
margin-bottom: 30px;
border-radius: 4px;
}
.client-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 10px;
font-size: 0.9rem;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
}
th {
background-color: #f2f2f2;
color: #000;
padding: 12px;
text-align: left;
font-size: 0.9rem;
border-bottom: 2px solid var(--primary-color);
text-transform: uppercase;
}
td {
padding: 12px;
border-bottom: 1px solid #e0e0e0;
font-size: 0.95rem;
}
tr:last-child td { border-bottom: none; }
.totals-container {
display: flex;
justify-content: flex-end;
}
.totals-box {
width: 300px;
border-top: 2px solid #000;
padding-top: 10px;
}
.t-row {
display: flex;
justify-content: space-between;
padding: 5px 0;
font-size: 0.9rem;
}
.t-************ {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed #ccc;
font-weight: bold;
font-size: 1.3rem;
color: #000;
}
.footer-compliance {
margin-top: 80px;
text-align: center;
font-size: 0.75rem;
color: #666;
border-top: 1px solid #ccc;
padding-top: 15px;
}
/* --- IMPRESSÃO --- */
@media print {
body { background: white; padding: 0; margin: 0; }
.container { box-shadow: none; margin: 0; width: 100%; max-width: 100%; padding: 0; }
.editor-section, .actions, .no-print { display: none !important; }
#print-area { display: block !important; }
.document-border { border: 2px solid #000 !important; margin: 0; height: 100%; min-height: 98vh; }
.input-grid-2 { display: none; }
}
/* Responsividade para tela pequena */
@media (max-width: 768px) {
.input-grid-2 { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="container">
<div class="editor-section no-print">
<h1>Configurador de Proposta Comercial</h1>
<div class="input-grid-2">
<div class="card">
<h3>1. Dados e Escopo</h3>
<div class="sub-group">
<h4>Informações da Proposta</h4>
<div class="form-row">
<div class="form-group">
<label>Nº Proposta</label>
<input type="text" id="propNumero" placeholder="001/2026">
</div>
<div class="form-group">
<label>Data</label>
<input type="date" id="propData">
</div>
</div>
<div class="form-group">
<label>Cliente / Empresa</label>
<input type="text" id="propEmpresa" placeholder="Razão Social">
</div>
<div class="form-row">
<div class="form-group">
<label>Contato (A/C)</label>
<input type="text" id="propNome">
</div>
<div class="form-group">
<label>Telefone</label>
<input type="text" id="propTel">
</div>
</div>
<div class="form-group">
<label>E-mail</label>
<input type="email" id="propEmail">
</div>
</div>
<div class="sub-group">
<h4>Dimensionamento da Equipe</h4>
<div class="form-row">
<div class="form-group">
<label>Dias de Serviço</label>
<input type="number" id="dias" value="5">
</div>
<div class="form-group">
<label>Qtd. Técnicos</label>
<input type="number" id="******" value="1">
</div>
<div class="form-group">
<label>Qtd. Auxiliares</label>
<input type="number" id="******" value="1">
</div>
</div>
</div>
</div>
<div class="card">
<h3>2. Financeiro e Custos</h3>
<div class="sub-group">
<h4>Custos Base (Fixos Mensais)</h4>
<div class="form-row">
<div class="form-group">
<label>Salário Técnico</label>
<input type="number" id="salarioTec" value="13976.19">
</div>
<div class="form-group">
<label>Salário Auxiliar</label>
<input type="number" id="salarioAux" value="10200.00">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>Custo Veículo (Mês)</label>
<input type="number" id="custoCarro" value="3620.00">
</div>
<div class="form-group">
<label>Almoço (Unit.)</label>
<input type="number" id="custoAlmoco" value="28.00">
</div>
</div>
</div>
<div class="sub-group">
<h4>Variáveis da Viagem</h4>
<div class="form-row">
<div class="form-group">
<label>Logística (Comb+Pedágio+Balsa)</label>
<input type="number" id="logistica" value="3250.00">
</div>
<div class="form-group">
<label>Hospedagem (Total)</label>
<input type="number" id="hospedagemTotal" value="1250.00">
</div>
</div>
<div class="form-group">
<label>Extras / Contingência</label>
<input type="number" id="extras" value="250.00">
</div>
</div>
<div class="sub-group" style="border-color: var(--primary-color);">
<h4>Definição de Preço</h4>
<div class="form-row">
<div class="form-group">
<label style="color:var(--primary-color);">Margem de Lucro (%)</label>
<input type="number" id="margemLucro" value="30">
</div>
<div class="form-group">
<label>Imposto ICMS (%)</label>
<input type="number" id="imposto" value="18">
</div>
</div>
</div>
</div>
</div>
<div class="actions">
<button onclick="gerarProposta()">VISUALIZAR DOCUMENTO</button>
<button class="secondary" onclick="window.print()">IMPRIMIR (PDF)</button>
</div>
</div>
<div id="print-area">
<div class="document-border">
<div class="doc-header">
<div>
<img src="logo.jpeg" alt="***************" style="max-height: 85px;">
<div class="company-details">
<strong>************************************</strong><br>
CNPJ: 09.426.072/0001-70 | I.E.: 153471409<br>
End.: Conj. Cidade Nova VIII, we 43, nº 422, Bairro Cidade Nova, Ananindeua-Pará<br>
CEP: 67133-260 | Tel.: (**********
</div>
</div>
<div class="proposal-title-box">
<h2>PROPOSTA COMERCIAL</h2>
<p id="display-prop-num" style="font-weight:bold; color:#444; margin:5px 0;">Ref: --</p>
<small id="display-date">Data: --/--/----</small>
</div>
</div>
<div class="client-section">
<div style="border-bottom: 1px solid #ddd; margin-bottom: 10px; padding-bottom: 5px; font-weight: bold; color: var(--primary-color);">
DADOS DO CLIENTE
</div>
<div class="client-grid">
<div>
<strong>Empresa:</strong> <span id="out-empresa"></span><br>
<strong>Endereço/Obra:</strong> <span id="out-local">Serviço em Campo</span>
</div>
<div>
<strong>A/C:</strong> <span id="out-nome"></span><br>
<strong>Contato:</strong> <span id="out-tel"></span> | <span id="out-email"></span>
</div>
</div>
</div>
<table>
<thead>
<tr>
<th width="50%">DESCRIÇÃO DOS SERVIÇOS</th>
<th width="15%" style="text-align: center;">BASE</th>
<th width="35%" style="text-align:right;">VALOR TOTAL (R$)</th>
</tr>
</thead>
<tbody id="tabela-corpo">
</tbody>
</table>
<div class="totals-container">
<div class="totals-box">
<div class="t-row">
<span>Subtotal Serviços:</span>
<span id="out-subtotal">R$ 0,00</span>
</div>
<div class="t-row">
<span>Impostos (ICMS 18%):</span>
<span id="out-imposto" style="color:#b30000;">R$ 0,00</span>
</div>
<div class="t-row final">
<span>TOTAL GERAL:</span>
<span id="out-total">R$ 0,00</span>
</div>
</div>
</div>
<div class="footer-compliance">
<p><strong>DECLARAÇÃO DE CONFORMIDADE TÉCNICA & SEGURANÇA</strong></p>
<p style="margin-top:5px;">
Certificamos que esta proposta contempla a execução por profissionais habilitados.
Todos os colaboradores da ********* possuem EPI/EPC completos, certificações homologadas pela ********* e cursos de Normas Regulamentadoras (NR) vigentes e atualizados.
</p>
<br>
<p style="font-size: 0.7rem;">*************************************************************************</p>
</div>
</div>
</div>
</div>
<script>
// Inicializar data com o dia de hoje
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('propData').valueAsDate = new Date();
});
function formatMoney(value) {
return value.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
}
function gerarProposta() {
// --- 1. PREENCHIMENTO DE TEXTOS ---
document.getElementById('display-prop-num').innerText = 'Ref: ' + (document.getElementById('propNumero').value || 'S/N');
// Formatar data escolhida ou data atual
let dataInput = document.getElementById('propData').value;
let dataObj = dataInput ? new Date(dataInput + 'T00:00:00') : new Date();
document.getElementById('display-date').innerText = 'Emissão: ' + dataObj.toLocaleDateString('pt-BR');
document.getElementById('out-empresa').innerText = document.getElementById('propEmpresa').value;
document.getElementById('out-nome').innerText = document.getElementById('propNome').value;
document.getElementById('out-email').innerText = document.getElementById('propEmail').value;
document.getElementById('out-tel').innerText = document.getElementById('propTel').value;
// --- 2. COLETA DE VALORES ---
const dias = parseFloat(document.getElementById('dias').value) || 0;
const ****** = parseFloat(document.getElementById('******').value) || 0;
const ****** = parseFloat(document.getElementById('******').value) || 0;
const salTec = parseFloat(document.getElementById('salarioTec').value) || 0;
const salAux = parseFloat(document.getElementById('salarioAux').value) || 0;
const custoCarro = parseFloat(document.getElementById('custoCarro').value) || 0;
const custoAlmoco = parseFloat(document.getElementById('custoAlmoco').value) || 0;
const logisticaTotal = parseFloat(document.getElementById('logistica').value) || 0;
const hospedagemTotal = parseFloat(document.getElementById('hospedagemTotal').value) || 0;
const extras = parseFloat(document.getElementById('extras').value) || 0;
const margemPercent = parseFloat(document.getElementById('margemLucro').value) || 0;
const impostoPercent = parseFloat(document.getElementById('imposto').value) || 0;
// --- 3. CÁLCULO DE CUSTOS (Interno) ---
// MO (Divisor 22)
const custoMO = ((salTec/22 * ******) + (salAux/22 * ******)) * dias;
// Veículo (Divisor 30)
const custoTransp = (custoCarro/30) * dias;
// Alimentação
const custoAli = (****** + ******) * 2 * custoAlmoco * dias;
// --- 4. APLICAÇÃO DA MARGEM (Rateio Oculto) ---
const fatorMargem = 1 + (margemPercent / 100);
const vendaMO = custoMO * fatorMargem;
const vendaTransp = custoTransp * fatorMargem;
const vendaAli = custoAli * fatorMargem;
const vendaLogistica = logisticaTotal * fatorMargem;
const vendaHosp = hospedagemTotal * fatorMargem;
const vendaExtras = extras * fatorMargem;
const subtotalServicos = vendaMO + vendaTransp + vendaAli + vendaLogistica + vendaHosp + vendaExtras;
// --- 5. CÁLCULO DO IMPOSTO (Gross-up) ---
const taxaImpostoDecimal = impostoPercent / 100;
const totalNota = subtotalServicos / (1 - taxaImpostoDecimal);
const valorImposto = totalNota - subtotalServicos;
// --- 6. RENDERIZAÇÃO TABELA ---
const tbody = document.getElementById('tabela-corpo');
tbody.innerHTML = `
<tr>
<td>
<strong>Serviços Técnicos de Campo</strong><br>
<span style="font-size:0.85rem; color:#666;">Equipe técnica qualificada (Técnicos + Auxiliares)</span>
</td>
<td style="text-align: center;">${dias} dias</td>
<td style="text-align:right;">${formatMoney(vendaMO)}</td>
</tr>
<tr>
<td>
<strong>Unidade Móvel Operacional</strong><br>
<span style="font-size:0.85rem; color:#666;">Veículo equipado e paramentado para serviço</span>
</td>
<td style="text-align: center;">${dias} diárias</td>
<td style="text-align:right;">${formatMoney(vendaTransp)}</td>
</tr>
<tr>
<td>
<strong>Logística de Deslocamento</strong><br>
<span style="font-size:0.85rem; color:#666;">Combustíveis, Pedágios e Taxas fluviais/balsas</span>
</td>
<td style="text-align: center;">Global</td>
<td style="text-align:right;">${formatMoney(vendaLogistica)}</td>
</tr>
<tr>
<td>
<strong>Hospedagem e Estadia</strong><br>
<span style="font-size:0.85rem; color:#666;">Acomodações conforme rota de serviço</span>
</td>
<td style="text-align: center;">Global</td>
<td style="text-align:right;">${formatMoney(vendaHosp)}</td>
</tr>
<tr>
<td>
<strong>Alimentação Técnica</strong><br>
<span style="font-size:0.85rem; color:#666;">Custeio de refeições da equipe</span>
</td>
<td style="text-align: center;">${((******+******)*2*dias)} ref.</td>
<td style="text-align:right;">${formatMoney(vendaAli)}</td>
</tr>
${extras > 0 ? `
<tr>
<td>
<strong>Insumos e Contingências</strong><br>
<span style="font-size:0.85rem; color:#666;">Materiais de consumo diversos / Verba emergencial</span>
</td>
<td style="text-align: center;">-</td>
<td style="text-align:right;">${formatMoney(vendaExtras)}</td>
</tr>` : ''}
`;
// Totais
document.getElementById('out-subtotal').innerText = formatMoney(subtotalServicos);
document.getElementById('out-imposto').innerText = formatMoney(valorImposto);
document.getElementById('out-total').innerText = formatMoney(totalNota);
// Exibir e rolar
document.getElementById('print-area').style.display = 'block';
document.getElementById('print-area').scrollIntoView({behavior: 'smooth'});
}
</script>
</body>
</html>
Indique alguém e receba o pagamento!
Você conhece alguém que se encaixa bem no projeto? Ganhe comissão indicando freelancers! Por cada inscrição você ganha 5 € diretamente na sua conta e quando o freelancer é contratado pela plataforma você ganha 2% dos ganhos deste freelancer!
Preencha os detalhes do profissional que você gostaria de recomendar:
Quando o freelancer aceitar o convite, ele será automaticamente adicionado à sua rede e você ganhará 2% a mais todos os ganhos deste freelancer através da plataforma. Para mais informações consulte nosso Termos e Condições
Freelancers interessados
-
- {{ item.hourlyRate || '-' }} por hora
-
{{ item.cityName }}
{{ item.stateName }}, {{ item.countryName }} - {{ item.nrSharedConnections }} conexões compartilhadas
PremiumAbrir bate-papo
Nenhum freelancer interessado ainda
Recusar
-
{{item.displayName}}
{{item.displayDisciplines}}
- {{ item.hourlyRate || '-' }} por hora
- {{ item.cityName }}, {{ item.stateName }}
- {{item.nrSharedConnections}} conexões compartilhadas
Você tem uma conta stand-by e já respondeu a 1 projeto neste período de assinatura.
Atualize sua conta agora com apenas 1 clique e responda a projetos ilimitados.