Rental Calculator - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html lang="pt BR"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Calculador de Aluguel Temporada</title> <style> body { font family: Arial, sans serif; padding: 20px; background color: #f0f0f0; } .container { max width: 800px; margin: auto; background color: #fff; padding: 20px; border radius: 10px; box shadow: 0 0 20px rgba(0, 0, 0, 0.1); } .logo { display: block; margin: 0 auto 20px; max width: 200px; width: 100%; height: auto; } table { border collapse: collapse; width: 100%; margin bottom: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text align: center; } th { background color: #4CAF50; color: white; } input { width: 100%; padding: 5px; box sizing: border box; } .total row td { font weight: bold; } h2 { text align: center; color: #333; } .button container { text align: center; } button { background color: #4CAF50; border: none; color: white; padding: 10px 20px; text align: center; text decoration: none; display: inline block; font size: 16px; margin: 4px 2px; cursor: pointer; border radius: 5px; } button:hover { background color: #45a049; } @media (max width: 768px) { table { font size: 14px; } } @media (max width: 480px) { table { font size: 12px; } } .observacao { margin top: 20px; font size: 16px; color: #333; } .contact info { margin top: 20px; font size: 16px; color: #333; text align: center; } .contact info a { color: #4CAF50; text decoration: none; } .chamada acao { margin top: 20px; font size: 16px; color: #4CAF50; text align: center; } </style> </head> <body> <div class="container"> <img src="https://wpprotech.com/wp content/uploads/2024/11/1 2.png" alt="Logo" class="logo"> <h2>Calculador de Aluguel Temporada</h2> <label for="nomeCliente">Nome do Cliente:</label> <input type="text" id="nomeCliente"> <table> <thead> <tr> <th>Aluguel Temporada</th> <th>Quantidade Pessoas ou Barco</th> <th>Quantidade de Dias</th> <th>Preço Unitário por Pessoa (R$)</th> <th>Valor Total (R$)</th> </tr> </thead> <tbody> <tr> <td>Rancho Prado</td> <td><input type="number" id="quantidadePessoasRanchoPrado" min="0" oninput="calcularTotal()"></td> <td><input type="number" id="quantidadeDiasRanchoPrado" min="0" oninput="calcularTotal()"></td> <td>R$ 60.00</td> <td id="totalRanchoPrado">R$ 0.00</td> </tr> <tr> <td>Rancho Beira Rio</td> <td><input type="number" id="quantidadePessoasRanchoBeiraRio" min="0" oninput="calcularTotal()"></td> <td><input type="number" id="quantidadeDiasRanchoBeiraRio" min="0" oninput="calcularTotal()"></td> <td>R$ 77.00</td> <td id="totalRanchoBeiraRio">R$ 0.00</td> </tr> <tr> <td>Rancho Três Marias Luxo</td> <td><input type="number" id="quantidadePessoasRanchoPesca" min="0" oninput="calcularTotal()"></td> <td><input type="number" id="quantidadeDiasRanchoPesca" min="0" oninput="calcularTotal()"></td> <td>R$ 85.00</td> <td id="totalRanchoPesca">R$ 0.00</td> </tr> <tr> <td>Concierge</td> <td><input type="number" id="quantidadePessoasConcierge" min="0" oninput="calcularTotal()"></td> <td><input type="number" id="quantidadeDiasConcierge" min="0" oninput="calcularTotal()"></td> <td>R$ 150.00</td> <td id="totalConcierge">R$ 0.00</td> </tr> <tr> <td>Aluguel de Barco sem Motor</td> <td><input type="number" id="quantidadeBarcoSemMotor" min="0" oninput="calcularTotal()"></td> <td><input type="number" id="quantidadeDiasBarcoSemMotor" min="0" oninput="calcularTotal()"></td> <td>R$ 150.00</td> <td id="totalBarcoSemMotor">R$ 0.00</td> </tr> <tr> <td>Guia de Pesca com Barco Motor</td> <td><input type="number" id="quantidadeGuiaPescaBarcoMotor" min="0" oninput="calcularTotal()"></td> <td><input type="number" id="quantidadeDiasGuiaPescaBarcoMotor" min="0" oninput="calcularTotal()"></td> <td>R$ 550.00</td> <td id="totalGuiaPescaBarcoMotor">R$ 0.00</td> </tr> <tr> <td>Aluguel de Barco e Motor</td> <td><input type="number" id="quantidadeBarcoMotor" min="0" oninput="calcularTotal()"></td> <td><input type="number" id="quantidadeDiasBarcoMotor" min="0" oninput="calcularTotal()"></td> <td>R$ 400.00</td> <td id="totalBarcoMotor">R$ 0.00</td> </tr> <tr> <td>Rancho Reserva Prado Luxo</td> <td><input type="number" id="quantidadePessoasRanchoNovo" min="0" oninput="calcularTotal()"></td> <td><input type="number" id="quantidadeDiasRanchoNovo" min="0" oninput="calcularTotal()"></td> <td>R$ 89.00</td> <td id="totalRanchoNovo">R$ 0.00</td> </tr> <tr> <td>Aluguel de Caiaque</td> <td><input type="number" id="quantidadeCaiaque" min="0" oninput="calcularTotal()"></td> <td><input type="number" id="quantidadeDiasCaiaque" min="0" oninput="calcularTotal()"></td> <td>R$ 85.00</td> <td id="totalCaiaque">R$ 0.00</td> </tr> <tr class="total row"> <td><strong>Desconto (%)</strong></td> <td colspan="2"><input type="number" id="desconto" min="0" max="15" step="0.1" value="0" oninput="calcularTotal()"></td> <td><span id="totalDesconto">R$ 0.00</span></td> </tr> <tr class="total row"> <td><strong>Total Geral</strong></td> <td colspan="4" id="totalGeral">R$ 0.00</td> </tr> <tr class="total row"> <td><strong>Valor da Reserva (30%)</strong></td> <td colspan="4" id="totalReserva">R$ 0.00</td> </tr> </tbody> </table> <div class="chamada acao"> <p>Aproveite e reserve para não perder sua data!</p> </div> <div class="button container"> <button onclick="gerarOrcamento()">Gerar Orçamento</button> </div> </div> <script> function calcularTaxaLimpeza(pessoas, dias) { return (pessoas > 0 && dias > 0) ? 150 : 0; } function calcularTotal() { var totalGeral = 0; var desconto = parseFloat(document.getElementById("desconto").value) || 0; var servicos = [ { nome: "Rancho Prado", preco: 60.00, pessoasId: "quantidadePessoasRanchoPrado", diasId: "quantidadeDiasRanchoPrado", totalId: "totalRanchoPrado", incluirTaxaLimpeza: true }, { nome: "Rancho Beira Rio", preco: 77.00, pessoasId: "quantidadePessoasRanchoBeiraRio", diasId: "quantidadeDiasRanchoBeiraRio", totalId: "totalRanchoBeiraRio", incluirTaxaLimpeza: true }, { nome: "Rancho Três Marias Luxo", preco: 85.00, pessoasId: "quantidadePessoasRanchoPesca", diasId: "quantidadeDiasRanchoPesca", totalId: "totalRanchoPesca", incluirTaxaLimpeza: true }, { nome: "Concierge", preco: 150.00, pessoasId: "quantidadePessoasConcierge", diasId: "quantidadeDiasConcierge", totalId: "totalConcierge", incluirTaxaLimpeza: false }, { nome: "Aluguel de Barco sem Motor", preco: 150.00, pessoasId: "quantidadeBarcoSemMotor", diasId: "quantidadeDiasBarcoSemMotor", totalId: "totalBarcoSemMotor", incluirTaxaLimpeza: false }, { nome: "Guia de Pesca com Barco Motor", preco: 550.00, pessoasId: "quantidadeGuiaPescaBarcoMotor", diasId: "quantidadeDiasGuiaPescaBarcoMotor", totalId: "totalGuiaPescaBarcoMotor", incluirTaxaLimpeza: false }, { nome: "Aluguel de Barco e Motor", preco: 400.00, pessoasId: "quantidadeBarcoMotor", diasId: "quantidadeDiasBarcoMotor", totalId: "totalBarcoMotor", incluirTaxaLimpeza: false }, { nome: "Rancho Reserva Prado Luxo", preco: 89.00, pessoasId: "quantidadePessoasRanchoNovo", diasId: "quantidadeDiasRanchoNovo", totalId: "totalRanchoNovo", incluirTaxaLimpeza: true }, { nome: "Aluguel de Caiaque", preco: 85.00, pessoasId: "quantidadeCaiaque", diasId: "quantidadeDiasCaiaque", totalId: "totalCaiaque", incluirTaxaLimpeza: false } ]; servicos.forEach(function(servico) { var quantidadePessoas = parseInt(document.getElementById(servico.pessoasId).value) || 0; var quantidadeDias = parseInt(document.getElementById(servico.diasId).value) || 0; var totalServico = quantidadePessoas * quantidadeDias * servico.preco; if (servico.incluirTaxaLimpeza && quantidadePessoas > 0 && quantidadeDias > 0) { totalServico += calcularTaxaLimpeza(quantidadePessoas, quantidadeDias); } document.getElementById(servico.totalId).innerText = "R$ " + totalServico.toFixed(2); totalGeral += totalServico; }); var totalDesconto = totalGeral * (desconto / 100); var totalComDesconto = totalGeral totalDesconto; var valorReserva = totalComDesconto * 0.30; document.getElementById("totalDesconto").innerText = "R$ " + totalDesconto.toFixed(2); document.getElementById("totalGeral").innerText = "R$ " + totalComDesconto.toFixed(2); document.getElementById("totalReserva").innerText = "R$ " + valorReserva.toFixed(2); } function gerarOrcamento() { var nomeCliente = document.getElementById("nomeCliente").value; var totalGeral = document.getElementById("totalGeral").innerText; var desconto = document.getElementById("desconto").value; var valorReserva = document.getElementById("totalReserva").innerText; var servicos = [ { nome: "Rancho Prado", pessoasId: "quantidadePessoasRanchoPrado", diasId: "quantidadeDiasRanchoPrado", preco: 60.00, totalId: "totalRanchoPrado" }, { nome: "Rancho Beira Rio", pessoasId: "quantidadePessoasRanchoBeiraRio", diasId: "quantidadeDiasRanchoBeiraRio", preco: 77.00, totalId: "totalRanchoBeiraRio" }, { nome: "Rancho Três Marias Luxo", pessoasId: "quantidadePessoasRanchoPesca", diasId: "quantidadeDiasRanchoPesca", preco: 85.00, totalId: "totalRanchoPesca" }, { nome: "Concierge", pessoasId: "quantidadePessoasConcierge", diasId: "quantidadeDiasConcierge", preco: 150.00, totalId: "totalConcierge" }, { nome: "Aluguel de Barco sem Motor", pessoasId: "quantidadeBarcoSemMotor", diasId: "quantidadeDiasBarcoSemMotor", preco: 150.00, totalId: "totalBarcoSemMotor" }, { nome: "Guia de Pesca com Barco Motor", pessoasId: "quantidadeGuiaPescaBarcoMotor", diasId: "quantidadeDiasGuiaPescaBarcoMotor", preco: 550.00, totalId: "totalGuiaPescaBarcoMotor" }, { nome: "Aluguel de Barco e Motor", pessoasId: "quantidadeBarcoMotor", diasId: "quantidadeDiasBarcoMotor", preco: 400.00, totalId: "totalBarcoMotor" }, { nome: "Rancho Reserva Prado Luxo", pessoasId: "quantidadePessoasRanchoNovo", diasId: "quantidadeDiasRanchoNovo", preco: 89.00, totalId: "totalRanchoNovo" }, { nome: "Aluguel de Caiaque", pessoasId: "quantidadeCaiaque", diasId: "quantidadeDiasCaiaque", preco: 85.00, totalId: "totalCaiaque" } ]; var orcamento = ` <h2>Orçamento</h2> <p>Nome do Cliente: ${nomeCliente}</p> <table> <thead> <tr> <th>Serviço</th> <th>Quantidade de Pessoas</th> <th>Quantidade de Dias</th> <th>Valor Unitário (R$)</th> <th>Valor Total (R$)</th> </tr> </thead> <tbody>`; servicos.forEach(function(servico) { var quantidadePessoas = document.getElementById(servico.pessoasId).value || 0; var quantidadeDias = document.getElementById(servico.diasId).value || 0; var valorUnitario = servico.preco.toFixed(2); var totalServico = document.getElementById(servico.totalId).innerText; orcamento += ` <tr> <td>${servico.nome}</td> <td>${quantidadePessoas}</td> <td>${quantidadeDias}</td> <td>R$ ${valorUnitario}</td> <td>${totalServico}</td> </tr>`; }); orcamento += ` </tbody> </table> <p><strong>Desconto:</strong> ${desconto}%</p> <p><strong>Total Geral:</strong> ${totalGeral}</p> <p><strong>Valor da Reserva (30%):</strong> ${valorReserva}</p> <p class="chamada acao">Aproveite e reserve para não perder sua data!</p> <div class="observacao"> <p><strong>Observação:</strong> Taxa de faxina de R$150,00 no caso de locação de ranchos.</p> <p class="contact info"> <span><img src="https://darkcyan cassowary 187505.hostingersite.com/wp content/uploads/2024/07/Nossas musicas.png" alt="Logo pequena" width="20" height="20"> Telefone: <a href="https://wa.me/5538988320108">38 98832 0108</a></span> <br> <span>Website: <a href="https://www.ranchoprado.com.br">www.ranchoprado.com.br</a></span> </p> </div> `; var novaJanela = window.open("", "_blank"); novaJanela.document.write(` <html> <head> <title>Orçamento</title> <style> body { font family: Arial, sans serif; padding: 20px; background color: #f0f0f0; } .container { max width: 800px; margin: auto; background color: #fff; padding: 20px; border radius: 10px; box shadow: 0 0 20px rgba(0, 0, 0, 0.1); } .logo { display: block; margin: 0 auto 20px; max width: 200px; } table { border collapse: collapse; width: 100%; margin bottom: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text align: center; } th { background color: #4CAF50; color: white; } h2 { text align: center; color: #333; } p { font size: 16px; } .observacao { margin top: 20px; font size: 16px; color: #333; } .contact info { margin top: 20px; font size: 16px; color: #333; text align: center; } .contact info a { color: #4CAF50; text decoration: none; } .chamada acao { margin top: 20px; font size: 16px; color: #4CAF50; text align: center; } </style> </head> <body> <div class="container"> <img src="https://darkcyan cassowary 187505.hostingersite.com/wp content/uploads/2024/07/Nossas musicas.png" alt="Logo" class="logo"> ${orcamento} </div> </body> </html> `); novaJanela.document.close(); novaJanela.print(); } </script> </body> </html>
