Criar um site com base nesta tabela de excel, em que as células que contém dados sejam transformadas em campos de entrada de valores e as células que contém fórmulas sirvam para calcular os valores e apresentá-los na tela, não sendo campos acessíveis para o usuário. A tabela a ser usada como base é a seguinte: REF CPF/CNPJ NOME / RS CONTA D ADESÃO P TOTAL P ATUAL GERAL PS ATUAL REM P ENTRADA P ENT ATUAL PS ENT ATUAL P SALDO P SALDO ATUAL PS SALDO ATUAL ETAPA VENCIMENTO ENTRADA VENCIMENTO SALDO V DÉBITO % DESC V CONS % ENT V ENT QP ENT VP ENT VSP ENT V SALDO QP SALDO VP SALDO VSP SALDO VSP SALDO TOTAL VP ATUAL GERAR GUIA Ref CPF/CNPJ do cliente Nome / Razão Social do cliente N. conta de parcelamento Data de adesão Quant total de parcelas N. da parcela geral Quant de parcelas geral remanescentes Quant de parcelas de entrada N. da parcela de entrada atual Quant de parcelas de entrada remanescentes Quant de parcelas de saldo N. da parcela de saldo atual Quant de parcelas de saldo remanescentes Etapa do parcelamento Data de vencimento das prestações da parcela de entrada Data de vencimento das prestações do saldo Valor do débito na data da consolidação % desconto concedido Valor do débito consolidado com desconto % entrada Valor da entrada Quant prestações parcela entrada Valor da prestação da parcela de entrada Valor do saldo da parcela de entrada Valor do saldo Quant parelas do saldo Valor das parcelas do saldo Valor do saldo a pagar de parcelas do saldo Valor total do saldo a pagar Valor da parcela atual Link para a geração de guia de recolhimento 1 15.383.389/0001-79 DR. LAVA TUDO PRESTACAO DE SERVICOS LTDA 8745892 9/29/23 145 =DATEDIF(E3,TODAY(),"m")+1 =F3-G3 12 =IF(DATEDIF(E3,TODAY(),"m")+1>I3,I3,DATEDIF(E3,TODAY(),"m")+1) =I3-J3 =F3-I3 =G3-J3 =L3-M3 =IF(J3<I3,"PARC ENTRADA", "PARC SALDO") =EDATE(E3,I3-1) =EDATE(E3,F3-1) 30,584.38 =1-T3/R3 19,223.68 6% =U3*R3 12 =V3/W3 =IF(J3<>I3,(X3*VLOOKUP(E3,[1]Planilha3!A:C,3)+X3)*(K3),0) =T3-V3 133 130.74 19,164.14 19,164.14 154.55 https://drive.google.com/drive/folders/1T42ePDxLbU5jFQhnN0VEbuWzL-IrpzNp?usp=sharing. Eliminar a tabela anterior - Follow Up Deployment
5333119 verified | <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sistema de Parcelamento Inteligente</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f5f7fa; | |
| } | |
| .form-control:focus { | |
| box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.25); | |
| } | |
| .divider { | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.5), transparent); | |
| } | |
| .shadow-soft { | |
| box-shadow: 0 4px 20px -6px rgba(79, 70, 229, 0.2); | |
| } | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .tooltip .tooltiptext { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #555; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -100px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| font-size: 12px; | |
| } | |
| .tooltip:hover .tooltiptext { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <header class="mb-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center gap-4"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-indigo-700">Financi<span class="text-indigo-500">Control</span></h1> | |
| <p class="text-gray-600">Sistema de gestão de parcelamentos</p> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Buscar conta..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center gap-2"> | |
| <i class="fas fa-plus"></i> Nova Conta | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="bg-white rounded-xl shadow-soft p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Dados do Parcelamento</h2> | |
| <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full">Ativo</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Número da conta</label> | |
| <input type="text" id="account-number" value="8745892" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 bg-gray-100" readonly> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Data de adesão</label> | |
| <input type="date" id="adhesion-date" value="2023-09-29" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 bg-gray-100" readonly> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Quant. total de parcelas</label> | |
| <input type="number" id="total-installments" value="145" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 bg-gray-100" readonly> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">N. da parcela geral</label> | |
| <input type="number" id="general-installment-number" value="21" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 bg-gray-100" readonly> | |
| </div> | |
| </div> | |
| <div class="divider my-6"></div> | |
| <div class="flex flex-col lg:flex-row gap-8 mb-6"> | |
| <div class="bg-blue-50 p-5 rounded-lg flex-1"> | |
| <h3 class="text-lg font-medium text-blue-800 mb-4 flex items-center gap-2"> | |
| <i class="fas fa-sign-in-alt text-blue-600"></i> Parcelas de Entrada | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Quant. de parcelas</label> | |
| <input type="number" id="entry-installments" value="12" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-blue-100" readonly> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">N. parcela atual</label> | |
| <input type="number" id="current-entry-installment" value="12" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-blue-100" readonly> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Remanescentes</label> | |
| <input type="number" id="remaining-entry-installments" value="0" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-blue-100" readonly> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Vencimento</label> | |
| <input type="date" id="entry-due-date" value="2024-08-29" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-blue-100" readonly> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 p-5 rounded-lg flex-1"> | |
| <h3 class="text-lg font-medium text-green-800 mb-4 flex items-center gap-2"> | |
| <i class="fas fa-money-bill-wave text-green-600"></i> Parcelas de Saldo | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Quant. de parcelas</label> | |
| <input type="number" id="balance-installments" value="133" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 bg-green-100" readonly> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">N. parcela atual</label> | |
| <input type="number" id="current-balance-installment" value="9" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 bg-green-100" readonly> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Remanescentes</label> | |
| <input type="number" id="remaining-balance-installments" value="124" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 bg-green-100" readonly> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Vencimento</label> | |
| <input type="date" id="balance-due-date" value="2035-09-29" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 bg-green-100" readonly> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="divider my-6"></div> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Valores Financeiros</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1"> | |
| Valor do débito | |
| <span class="tooltip"> | |
| <i class="fas fa-info-circle text-gray-400"></i> | |
| <span class="tooltiptext">Valor original do débito na data da consolidação</span> | |
| </span> | |
| </label> | |
| <div class="relative"> | |
| <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">R$</span> | |
| <input type="text" id="original-debt" value="30.584,38" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 bg-gray-100" readonly> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1"> | |
| % desconto | |
| <span class="tooltip"> | |
| <i class="fas fa-info-circle text-gray-400"></i> | |
| <span class="tooltiptext">Percentual de desconto concedido</span> | |
| </span> | |
| </label> | |
| <div class="relative"> | |
| <span class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-600">%</span> | |
| <input type="text" id="discount-percentage" value="37,15" class="w-full pr-8 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 bg-gray-100" readonly> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1"> | |
| Débito consolidado | |
| <span class="tooltip"> | |
| <i class="fas fa-info-circle text-gray-400"></i> | |
| <span class="tooltiptext">Valor após aplicação do desconto</span> | |
| </span> | |
| </label> | |
| <div class="relative"> | |
| <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">R$</span> | |
| <input type="text" id="discounted-debt" value="19.223,68" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 bg-gray-100" readonly> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1"> | |
| % entrada | |
| <span class="tooltip"> | |
| <i class="fas fa-info-circle text-gray-400"></i> | |
| <span class="tooltiptext">Percentual do valor de entrada</span> | |
| </span> | |
| </label> | |
| <div class="relative"> | |
| <span class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-600">%</span> | |
| <input type="text" id="entry-percentage" value="6" class="w-full pr-8 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" onchange="calculateValues()"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1"> | |
| Valor da entrada | |
| <span class="tooltip"> | |
| <i class="fas fa-info-circle text-gray-400"></i> | |
| <span class="tooltiptext">Valor total da entrada</span> | |
| </span> | |
| </label> | |
| <div class="relative"> | |
| <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">R$</span> | |
| <input type="text" id="entry-value" value="1.835,06" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 bg-gray-100" readonly> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1"> | |
| Parcela atual | |
| <span class="tooltip"> | |
| <i class="fas fa-info-circle text-gray-400"></i> | |
| <span class="tooltiptext">Valor da parcela em aberto</span> | |
| </span> | |
| </label> | |
| <div class="relative"> | |
| <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">R$</span> | |
| <input type="text" id="current-installment" value="154,55" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 bg-gray-100" readonly> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div class="bg-blue-50 p-5 rounded-lg"> | |
| <h4 class="text-md font-medium text-blue-800 mb-3">Detalhes das Parcelas de Entrada</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Quant. prestações</label> | |
| <input type="number" id="entry-installments-count" value="12" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-blue-100" readonly> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Valor da prestação</label> | |
| <div class="relative"> | |
| <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">R$</span> | |
| <input type="text" id="entry-installment-value" value="152,92" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-blue-100" readonly> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Saldo da entrada</label> | |
| <div class="relative"> | |
| <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">R$</span> | |
| <input type="text" id="entry-balance" value="-" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-blue-100" readonly> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 p-5 rounded-lg"> | |
| <h4 class="text-md font-medium text-green-800 mb-3">Detalhes das Parcelas de Saldo</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Quant. parcelas</label> | |
| <input type="number" id="balance-installments-count" value="133" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 bg-green-100" readonly> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Valor das parcelas</label> | |
| <div class="relative"> | |
| <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">R$</span> | |
| <input type="text" id="balance-installment-value" value="130,74" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 bg-green-100" readonly> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Saldo a pagar</label> | |
| <div class="relative"> | |
| <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">R$</span> | |
| <input type="text" id="remaining-balance" value="17.388,62" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500" onchange="calculateBalanceInstallments()"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-indigo-50 p-5 rounded-lg"> | |
| <h4 class="text-md font-medium text-indigo-800 mb-3">Resumo Financeiro</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Valor do saldo</label> | |
| <div class="relative"> | |
| <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">R$</span> | |
| <input type="text" id="total-balance" value="17.388,62" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 bg-indigo-100" readonly> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Saldo a pagar</label> | |
| <div class="relative"> | |
| <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">R$</span> | |
| <input type="text" id="total-balance-to-pay" value="19.164,14" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 bg-indigo-100" readonly> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Total saldo + entrada</label> | |
| <div class="relative"> | |
| <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">R$</span> | |
| <input type="text" id="total-amount" value="19.164,14" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 bg-indigo-100" readonly> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end gap-4"> | |
| <button class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition"> | |
| <i class="fas fa-times mr-2"></i> Cancelar | |
| </button> | |
| <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"> | |
| <i class="fas fa-save mr-2"></i> Salvar Alterações | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Format currency values | |
| function formatCurrency(value) { | |
| return new Intl.NumberFormat('pt-BR', { | |
| style: 'decimal', | |
| minimumFractionDigits: 2, | |
| maximumFractionDigits: 2 | |
| }).format(value); | |
| } | |
| // Parse currency values from display format | |
| function parseCurrency(value) { | |
| return parseFloat(value.replace(/\./g, '').replace(',', '.')); | |
| } | |
| // Calculate all values based on input changes | |
| function calculateValues() { | |
| // Get input values | |
| const discountPercentage = parseFloat(document.getElementById('discount-percentage').value.replace(',', '.')); | |
| const originalDebt = parseCurrency(document.getElementById('original-debt').value); | |
| const entryPercentage = parseFloat(document.getElementById('entry-percentage').value.replace(',', '.')); | |
| // Calculate discounted debt | |
| const discountedDebt = originalDebt * (1 - discountPercentage / 100); | |
| document.getElementById('discounted-debt').value = formatCurrency(discountedDebt); | |
| // Calculate entry value | |
| const entryValue = discountedDebt * (entryPercentage / 100); | |
| document.getElementById('entry-value').value = formatCurrency(entryValue); | |
| // Calculate balance | |
| const balance = discountedDebt - entryValue; | |
| document.getElementById('total-balance').value = formatCurrency(balance); | |
| document.getElementById('remaining-balance').value = formatCurrency(balance); | |
| // Update installments | |
| calculateBalanceInstallments(); | |
| } | |
| // Calculate balance installments | |
| function calculateBalanceInstallments() { | |
| const balance = parseCurrency(document.getElementById('remaining-balance').value); | |
| const balanceInstallments = parseInt(document.getElementById('balance-installments-count').value); | |
| // Calculate installment value | |
| const installmentValue = balance / balanceInstallments; | |
| document.getElementById('balance-installment-value').value = formatCurrency(installmentValue); | |
| document.getElementById('total-balance-to-pay').value = formatCurrency(balance); | |
| document.getElementById('total-amount').value = formatCurrency(parseCurrency(document.getElementById('discounted-debt').value)); | |
| // Update current installment based on the new calculations | |
| document.getElementById('current-installment').value = formatCurrency(installmentValue); | |
| } | |
| // Format currency inputs on blur | |
| document.querySelectorAll('input[type="text"]').forEach(input => { | |
| if (input.id.includes('value') || input.id.includes('debt') || input.id.includes('balance') || input.id.includes('amount')) { | |
| input.addEventListener('blur', function() { | |
| if (this.value && !isNaN(parseCurrency(this.value))) { | |
| this.value = formatCurrency(parseCurrency(this.value)); | |
| } | |
| }); | |
| } | |
| }); | |
| // Initialize calculations on load | |
| document.addEventListener('DOMContentLoaded', function() { | |
| calculateValues(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=maralvic/teste2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |