ONE PIECE HACKING

Ngiler SH3LL 360
: / home / tbf / tools.tbf.ro /

Information Server
MySQL : OFF Perl : OFF CURL : ON WGET : OFF PKEXEC : OFF

Directive	Local Value
IP Address	89.40.16.97
System	Linux server.atelieruldeit.ro 3.10.0-1160.el7.x86_64 #1 SMP Mon Oct 19 16:18:59 UTC 2020 x86_64
User	tbf
PHP Version	7.3.33
Software	Apache
Doc root	Writable

Edit File : calculator.html \| Size : 38.44 KB
<!DOCTYPE html> <html lang="ro"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculator Buget Stil de Viață Ideal</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script> tailwind.config = { theme: { extend: { colors: { primary: '#22534D', accent: '#FEF4B5', }, typography: { DEFAULT: { css: { color: '#333', h1: { color: '#22534D', fontWeight: '700', marginBottom: '1.5em', }, h2: { color: '#22534D', fontWeight: '600', marginTop: '2em', marginBottom: '1em', }, strong: { color: '#22534D', fontWeight: '600', }, hr: { borderColor: '#E5E7EB', marginTop: '3em', marginBottom: '3em', borderWidth: '1px', borderStyle: 'solid', height: '1px', padding: '0', display: 'block', clear: 'both', }, p: { marginTop: '1.5em', marginBottom: '1.5em', lineHeight: '1.75', }, 'p + p': { marginTop: '2em', }, ul: { listStyleType: 'none', paddingLeft: '0', marginTop: '1.5em', marginBottom: '1.5em', }, li: { marginTop: '0.5em', marginBottom: '0.5em', paddingLeft: '1.5em', position: 'relative', }, 'li::before': { content: '"•"', color: '#22534D', position: 'absolute', left: '0', }, 'li > ul': { marginTop: '0.5em', marginBottom: '0.5em', }, 'li > ul > li::before': { content: '"◦"', }, blockquote: { borderLeftColor: '#22534D', backgroundColor: '#FEF4B5', padding: '1em', borderRadius: '0.5em', marginTop: '1.5em', marginBottom: '1.5em', }, }, }, }, }, }, } </script> <style> #analysis-text hr { margin-top: 1.5em; margin-bottom: 1.5em; border: none; border-top: 1px solid #E5E7EB; height: 1px; } #analysis-text p { margin-top: 0.75em; margin-bottom: 0.75em; line-height: 1.5; font-size: 0.875rem; } #analysis-text p + p { margin-top: 1em; } #analysis-text h1 { color: #22534D; font-weight: 700; font-size: 1.25rem; margin-bottom: 0.75em; } #analysis-text h2 { color: #22534D; font-weight: 600; font-size: 1.125rem; margin-top: 1.25em; margin-bottom: 0.5em; } #analysis-text h3 { color: #22534D; font-weight: 600; font-size: 1rem; margin-top: 1em; margin-bottom: 0.5em; } #analysis-text strong { color: #22534D; font-weight: 600; } #analysis-text ul { list-style-type: none; padding-left: 0; margin-top: 0.75em; margin-bottom: 0.75em; font-size: 0.875rem; } #analysis-text li { margin-top: 0.25em; margin-bottom: 0.25em; padding-left: 1.25em; position: relative; } #analysis-text li::before { content: "•"; color: #22534D; position: absolute; left: 0; } #analysis-text li > ul { margin-top: 0.25em; margin-bottom: 0.25em; } #analysis-text li > ul > li::before { content: "◦"; } #analysis-text blockquote { border-left: 3px solid #22534D; background-color: #FEF4B5; padding: 0.75em; border-radius: 0.375em; margin-top: 0.75em; margin-bottom: 0.75em; font-size: 0.875rem; } #analysis-text code { background-color: #F3F4F6; padding: 0.15em 0.3em; border-radius: 0.25em; font-size: 0.75rem; } #analysis-text pre { background-color: #F3F4F6; padding: 0.75em; border-radius: 0.375em; overflow-x: auto; margin-top: 0.75em; margin-bottom: 0.75em; font-size: 0.75rem; } #analysis-text pre code { background-color: transparent; padding: 0; } </style> </head> <body class="bg-primary min-h-screen flex justify-center items-center p-4 font-sans text-black"> <div class="container max-w-7xl flex gap-4 items-start"> <!-- Input Column --> <div class="flex-1 max-w-xl bg-white rounded-2xl shadow-xl overflow-hidden"> <form class="p-6" id="lifestyle-calculator"> <!-- Active și Proprietăți Section --> <div class="mb-6 pb-6 border-b border-gray-100"> <h2 class="text-lg font-semibold text-primary mb-4 pl-3 relative before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1 before:h-5 before:bg-accent before:rounded"> I. Active și Proprietăți </h2> <div class="mb-4"> <label for="valoare-case" class="block text-base font-medium mb-2"> Ce valoare au casele pe care ți le dorești? </label> <input type="range" id="valoare-case" min="100000" max="30000000" step="100000" value="3000000" class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"> <div class="flex justify-between items-center mt-1 text-xs text-gray-600"> <span>100.000€</span> <span class="font-semibold text-primary text-sm" id="valoare-case-display">3.000.000€</span> <span>30.000.000€</span> </div> </div> <div class="mb-4"> <label for="valoare-masini" class="block text-base font-medium mb-2"> Ce valoare au mașinile, motocicletele, bărcile (etc.) pe care ți le dorești? </label> <input type="range" id="valoare-masini" min="10000" max="5000000" step="10000" value="500000" class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"> <div class="flex justify-between items-center mt-1 text-xs text-gray-600"> <span>10.000€</span> <span class="font-semibold text-primary text-sm" id="valoare-masini-display">500.000€</span> <span>5.000.000€</span> </div> </div> </div> <!-- Cheltuieli Curente Section --> <div class="mb-6"> <h2 class="text-lg font-semibold text-primary mb-4 pl-3 relative before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1 before:h-5 before:bg-accent before:rounded"> II. Cheltuieli Anuale </h2> <div class="mb-4"> <label for="cheltuieli-familie" class="block text-base font-medium mb-2"> Întreținerea familiei </label> <span class="block text-xs text-gray-600 -mt-1 mb-2"> Mâncare, sănătate, școală, fitness, suplimente, asigurări, educație, îmbrăcăminte, combustibil etc. </span> <input type="range" id="cheltuieli-familie" min="5000" max="1000000" step="1000" value="100000" class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"> <div class="flex justify-between items-center mt-1 text-xs text-gray-600"> <span>5.000€</span> <span class="font-semibold text-primary text-sm" id="cheltuieli-familie-display">100.000€</span> <span>1.000.000€</span> </div> </div> <div class="mb-4"> <label for="cost-concedii" class="block text-base font-medium mb-2"> Costul concediilor anuale </label> <input type="range" id="cost-concedii" min="5000" max="1000000" step="5000" value="150000" class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"> <div class="flex justify-between items-center mt-1 text-xs text-gray-600"> <span>5.000€</span> <span class="font-semibold text-primary text-sm" id="cost-concedii-display">150.000€</span> <span>1.000.000€</span> </div> </div> <div class="mb-4"> <label for="cheltuieli-lux" class="block text-base font-medium mb-2"> Cheltuieli de lux (ceasuri, genți, etc.) </label> <input type="range" id="cheltuieli-lux" min="5000" max="1000000" step="5000" value="100000" class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"> <div class="flex justify-between items-center mt-1 text-xs text-gray-600"> <span>5.000€</span> <span class="font-semibold text-primary text-sm" id="cheltuieli-lux-display">100.000€</span> <span>1.000.000€</span> </div> </div> <div class="mb-4"> <label for="investitii-anuale" class="block text-base font-medium mb-2"> Investiții anuale (bursă, imobiliare, etc.) </label> <input type="range" id="investitii-anuale" min="5000" max="1000000" step="5000" value="50000" class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"> <div class="flex justify-between items-center mt-1 text-xs text-gray-600"> <span>5.000€</span> <span class="font-semibold text-primary text-sm" id="investitii-anuale-display">50.000€</span> <span>1.000.000€</span> </div> </div> </div> </form> </div> <!-- Business Input Column --> <div class="flex-1 max-w-xl bg-white rounded-2xl shadow-xl overflow-hidden"> <form class="p-6" id="business-calculator"> <h2 class="text-lg font-semibold text-primary mb-4 pl-3 relative before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1 before:h-5 before:bg-accent before:rounded"> III. Detalii Afacere </h2> <div class="mb-4"> <label for="profit-net" class="block text-base font-medium mb-2"> Profitul net al afacerii </label> <input type="range" id="profit-net" min="0" max="100" step="1" value="20" class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"> <div class="flex justify-between items-center mt-1 text-xs text-gray-600"> <span>0%</span> <span class="font-semibold text-primary text-sm" id="profit-net-display">20%</span> <span>100%</span> </div> </div> <div class="mb-4"> <label for="reinvestit" class="block text-base font-medium mb-2"> Procent din profit reinvestit </label> <input type="range" id="reinvestit" min="0" max="100" step="1" value="30" class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"> <div class="flex justify-between items-center mt-1 text-xs text-gray-600"> <span>0%</span> <span class="font-semibold text-primary text-sm" id="reinvestit-display">30%</span> <span>100%</span> </div> </div> <div class="mb-4"> <label for="descriere-afacere" class="block text-base font-medium mb-2"> Descrie pe scurt afacerea </label> <span class="block text-xs text-gray-600 -mt-1 mb-2"> Industria, ce vinzi, către cine, cum vinzi </span> <textarea id="descriere-afacere" rows="4" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:border-primary resize-none" placeholder="Ex: E-commerce în industria modă, vând haine premium către persoane cu venit mediu-ridicat, prin marketplace-uri și site propriu..."></textarea> </div> </form> <!-- Additional Details Box --> <form class="p-6 border-t border-gray-100" id="additional-details"> <h2 class="text-lg font-semibold text-primary mb-4 pl-3 relative before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1 before:h-5 before:bg-accent before:rounded"> IV. Alte Detalii </h2> <div class="mb-4"> <label for="zile-lucru" class="block text-base font-medium mb-2"> Câte zile vrei să lucrezi pe săptămână? </label> <input type="range" id="zile-lucru" min="0" max="7" step="1" value="5" class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"> <div class="flex justify-between items-center mt-1 text-xs text-gray-600"> <span>0 zile</span> <span class="font-semibold text-primary text-sm" id="zile-lucru-display">5 zile</span> <span>7 zile</span> </div> </div> <div class="mb-4"> <label for="zile-concediu" class="block text-base font-medium mb-2"> Câte zile de concediu vrei să ai pe an? </label> <input type="range" id="zile-concediu" min="0" max="365" step="1" value="30" class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"> <div class="flex justify-between items-center mt-1 text-xs text-gray-600"> <span>0 zile</span> <span class="font-semibold text-primary text-sm" id="zile-concediu-display">30 zile</span> <span>365 zile</span> </div> </div> </form> </div> <!-- Results Column --> <div class="flex-1 max-w-xl bg-white rounded-2xl shadow-xl p-6"> <h2 class="text-lg font-semibold text-primary mb-4 pl-3 relative before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1 before:h-5 before:bg-accent before:rounded"> V. Venituri Necesare </h2> <div class="bg-primary rounded-xl p-4 text-center text-white"> <div class="block text-base font-medium">Venit Anual Personal Necesar</div> <span class="block text-2xl font-bold text-accent my-1" id="venit-anual-total">€0</span> <div class="block text-base font-medium mt-3">Venit Lunar Personal Necesar</div> <span class="block text-xl font-bold text-accent my-1" id="venit-lunar-total">€0</span> </div> <div class="bg-primary rounded-xl p-4 text-center text-white mt-3"> <div class="block text-base font-medium">Perna de Siguranță (3 Ani de Cheltuieli)</div> <span class="block text-2xl font-bold text-accent my-1" id="perna-siguranta">€0</span> </div> <div class="bg-primary rounded-xl p-4 text-center text-white mt-3"> <div class="block text-base font-medium">Cifră de Afaceri Necesară</div> <span class="block text-2xl font-bold text-accent my-1" id="cifra-afaceri">€0</span> <div class="text-xs text-white/70 mt-2"> Calculată pe baza profitului net și procentului reinvestit </div> </div> <div class="flex gap-3 mt-6 mb-2"> <button type="button" id="analiza" class="flex-1 bg-accent hover:bg-accent/90 text-primary font-medium py-2 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center"> <span id="analiza-text">Analizează</span> <svg id="analiza-loading" class="hidden animate-spin ml-2 h-5 w-5 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg> </button> <button type="button" id="reset-calculator" class="flex-1 bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200"> Reset </button> </div> <div id="analysis-response" class="mt-6 hidden"> <div class="bg-white border border-gray-200 rounded-xl p-6"> <div id="analysis-text" class="prose prose-lg max-w-none"> <!-- Markdown content will be inserted here --> </div> </div> </div> </div> </div> <!-- Error Popup --> <div id="error-popup" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4"> <div class="flex items-center justify-between mb-4"> <h3 class="text-lg font-semibold text-red-500">Eroare</h3> <button id="close-error" class="text-red-500 hover:text-gray-700"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <p id="error-message" class="text-gray-700"></p> <button id="error-ok" class="mt-4 w-full bg-red-500 text-white font-medium py-2 px-4 rounded-lg hover:bg-primary/90 transition-colors duration-200"> OK </button> </div> </div> <script> // Define formatCurrency function first function formatCurrency(value) { return new Intl.NumberFormat('ro-RO', { style: 'currency', currency: 'EUR', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(value); } // Function to save all form values to localStorage function saveFormState() { const formState = { // Active și Proprietăți 'valoare-case': document.getElementById('valoare-case').value, 'valoare-masini': document.getElementById('valoare-masini').value, // Cheltuieli Anuale 'cheltuieli-familie': document.getElementById('cheltuieli-familie').value, 'cost-concedii': document.getElementById('cost-concedii').value, 'cheltuieli-lux': document.getElementById('cheltuieli-lux').value, 'investitii-anuale': document.getElementById('investitii-anuale').value, // Detalii Afacere 'profit-net': document.getElementById('profit-net').value, 'reinvestit': document.getElementById('reinvestit').value, 'descriere-afacere': document.getElementById('descriere-afacere').value, // Alte Detalii 'zile-lucru': document.getElementById('zile-lucru').value, 'zile-concediu': document.getElementById('zile-concediu').value }; localStorage.setItem('calculatorFormState', JSON.stringify(formState)); } // Function to restore form values from localStorage function restoreFormState() { const savedState = localStorage.getItem('calculatorFormState'); if (savedState) { try { const formState = JSON.parse(savedState); // Restore all form values Object.keys(formState).forEach(key => { const element = document.getElementById(key); if (element) { element.value = formState[key]; // Update display values for sliders const display = document.getElementById(`${key}-display`); if (display) { if (key === 'zile-lucru' \|\| key === 'zile-concediu') { display.textContent = `${formState[key]} zile`; } else if (key === 'profit-net' \|\| key === 'reinvestit') { display.textContent = `${formState[key]}%`; } else { display.textContent = formatCurrency(parseFloat(formState[key])); } } } }); // Update calculations updateResults(); } catch (error) { console.error('Error restoring form state:', error); localStorage.removeItem('calculatorFormState'); } } } // Add event listeners for all form inputs function addFormListeners() { // Add listeners to all sliders const sliders = document.querySelectorAll('input[type="range"]'); sliders.forEach(slider => { slider.addEventListener('input', function() { const display = document.getElementById(`${this.id}-display`); if (this.id === 'zile-lucru' \|\| this.id === 'zile-concediu') { display.textContent = `${this.value} zile`; } else if (this.id === 'profit-net' \|\| this.id === 'reinvestit') { display.textContent = `${this.value}%`; } else { display.textContent = formatCurrency(parseFloat(this.value)); } updateResults(); saveFormState(); }); }); // Add listener to textarea const textarea = document.getElementById('descriere-afacere'); textarea.addEventListener('input', saveFormState); } // Function to calculate and update all results function updateResults() { // Get all slider values const valoareCase = parseFloat(document.getElementById('valoare-case').value) \|\| 0; const valoareMasini = parseFloat(document.getElementById('valoare-masini').value) \|\| 0; const cheltuieliFamilie = parseFloat(document.getElementById('cheltuieli-familie').value) \|\| 0; const costConcedii = parseFloat(document.getElementById('cost-concedii').value) \|\| 0; const cheltuieliLux = parseFloat(document.getElementById('cheltuieli-lux').value) \|\| 0; const investitiiAnuale = parseFloat(document.getElementById('investitii-anuale').value) \|\| 0; // Get business parameters const profitNet = parseFloat(document.getElementById('profit-net').value) \|\| 0; const procentReinvestit = parseFloat(document.getElementById('reinvestit').value) \|\| 0; // Parameters for calculations const rataDobandaCaseAnuala = 0.05; // 5% const perioadaCaseAni = 30; const rataDobandaMasiniAnuala = 0.07; // 7% const perioadaMasiniAni = 5; // Calculate monthly rate function function calculRataLunara(principal, rataAnuala, ani) { if (principal === 0) return 0; const rataLunara = rataAnuala / 12; const numarPlati = ani * 12; const numerator = rataLunara * Math.pow(1 + rataLunara, numarPlati); const denominator = Math.pow(1 + rataLunara, numarPlati) - 1; return principal * (numerator / denominator); } // Calculate all values const rataLunaraCase = calculRataLunara(valoareCase, rataDobandaCaseAnuala, perioadaCaseAni); const rataAnualaCase = rataLunaraCase * 12; const rataLunaraMasini = calculRataLunara(valoareMasini, rataDobandaMasiniAnuala, perioadaMasiniAni); const rataAnualaMasini = rataLunaraMasini * 12; const alteCheltuieliAnuale = cheltuieliFamilie + costConcedii + cheltuieliLux + investitiiAnuale; const subtotalAnualBaza = rataAnualaCase + rataAnualaMasini + alteCheltuieliAnuale; const bufferEconomii = subtotalAnualBaza * 0.10; const subtotalCuEconomii = subtotalAnualBaza + bufferEconomii; const bufferNeprevazute = subtotalCuEconomii * 0.20; const venitAnualTotal = subtotalCuEconomii + bufferNeprevazute; const venitLunarTotal = venitAnualTotal / 12; // Calculate perna de siguranta as 36 months of monthly income const pernaSiguranta = venitLunarTotal * 36; // Calculate required turnover // First, calculate how much profit we need to keep (not reinvested) const profitNecesar = venitAnualTotal; const procentProfitDisponibil = (100 - procentReinvestit) / 100; const profitNetNecesar = profitNecesar / procentProfitDisponibil; const cifraAfaceri = (profitNetNecesar * 100) / profitNet; // Update all results document.getElementById('venit-anual-total').textContent = formatCurrency(venitAnualTotal); document.getElementById('venit-lunar-total').textContent = formatCurrency(venitLunarTotal); document.getElementById('perna-siguranta').textContent = formatCurrency(pernaSiguranta); document.getElementById('cifra-afaceri').textContent = formatCurrency(cifraAfaceri); } // Initialize the page document.addEventListener('DOMContentLoaded', function() { // Add event listeners first addFormListeners(); // Then restore saved state restoreFormState(); // Add reset button listener document.getElementById('reset-calculator').addEventListener('click', resetCalculator); // Initial calculation updateResults(); }); // Add webhook functionality async function callWebhook(webhookUrl, data) { try { const response = await fetch(webhookUrl, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data) }); if (!response.ok) { throw new Error('Network response was not ok'); } return await response.json(); } catch (error) { console.error('Error calling webhook:', error); throw error; } } // Function to collect all current values function collectAllValues() { return { // Active și Proprietăți 'valoare-case': document.getElementById('valoare-case').value, 'valoare-masini': document.getElementById('valoare-masini').value, // Cheltuieli Anuale 'cheltuieli-familie': document.getElementById('cheltuieli-familie').value, 'cost-concedii': document.getElementById('cost-concedii').value, 'cheltuieli-lux': document.getElementById('cheltuieli-lux').value, 'investitii-anuale': document.getElementById('investitii-anuale').value, // Detalii Afacere 'profit-net': document.getElementById('profit-net').value, 'reinvestit': document.getElementById('reinvestit').value, 'descriere-afacere': document.getElementById('descriere-afacere').value, // Alte Detalii 'zile-lucru': document.getElementById('zile-lucru').value, 'zile-concediu': document.getElementById('zile-concediu').value, // Rezultate 'venit-anual-total': document.getElementById('venit-anual-total').textContent, 'venit-lunar-total': document.getElementById('venit-lunar-total').textContent, 'perna-siguranta': document.getElementById('perna-siguranta').textContent, 'cifra-afaceri': document.getElementById('cifra-afaceri').textContent }; } // Function to show error popup function showError(message) { const popup = document.getElementById('error-popup'); const errorMessage = document.getElementById('error-message'); errorMessage.textContent = message; popup.classList.remove('hidden'); } // Function to hide error popup function hideError() { const popup = document.getElementById('error-popup'); popup.classList.add('hidden'); } // Add event listeners for error popup document.getElementById('close-error').addEventListener('click', hideError); document.getElementById('error-ok').addEventListener('click', hideError); // Add event listeners for buttons document.getElementById('analiza').addEventListener('click', async () => { const button = document.getElementById('analiza'); const buttonText = document.getElementById('analiza-text'); const loadingSpinner = document.getElementById('analiza-loading'); const responseSection = document.getElementById('analysis-response'); const analysisText = document.getElementById('analysis-text'); const descriereAfacere = document.getElementById('descriere-afacere').value.trim(); // Validate company description if (!descriereAfacere) { showError('Vă rugăm să completați descrierea afacerii înainte de a face analiza.'); return; } try { // Show loading state button.disabled = true; buttonText.textContent = 'Se analizează...'; loadingSpinner.classList.remove('hidden'); responseSection.classList.add('hidden'); const data = collectAllValues(); const response = await callWebhook('https://n8n-prrx.onrender.com/webhook/6f75696f-e1f9-4de0-a3ee-0e15d61cde8a', data); // Display the response with markdown formatting if (response && response.text) { // Configure marked options marked.setOptions({ breaks: true, gfm: true, headerIds: false, mangle: false, sanitize: false }); // Pre-process the text to ensure proper spacing const processedText = response.text .replace(/\n\n/g, '\n\n\n') // Add extra newline for double line breaks .replace(/---/g, '\n\n---\n\n'); // Add spacing around horizontal rules // Convert markdown to HTML const formattedText = marked.parse(processedText); analysisText.innerHTML = formattedText; responseSection.classList.remove('hidden'); } } catch (error) { console.error('Error:', error); analysisText.textContent = 'A apărut o eroare în timpul analizei. Vă rugăm să încercați din nou.'; responseSection.classList.remove('hidden'); } finally { // Reset button state button.disabled = false; buttonText.textContent = 'Analizează'; loadingSpinner.classList.add('hidden'); } }); document.getElementById('share-results').addEventListener('click', async () => { const data = collectAllValues(); await callWebhook('https://n8n-prrx.onrender.com/webhook-test/email', data); }); // Function to reset all values to defaults function resetCalculator() { // Default values const defaults = { 'valoare-case': 3000000, 'valoare-masini': 500000, 'cheltuieli-familie': 100000, 'cost-concedii': 150000, 'cheltuieli-lux': 100000, 'investitii-anuale': 50000, 'profit-net': 20, 'reinvestit': 30, 'descriere-afacere': '', 'zile-lucru': 5, 'zile-concediu': 30 }; // Set all values to defaults Object.keys(defaults).forEach(key => { const element = document.getElementById(key); if (element) { element.value = defaults[key]; // Update display values const display = document.getElementById(`${key}-display`); if (display) { if (key === 'zile-lucru' \|\| key === 'zile-concediu') { display.textContent = `${defaults[key]} zile`; } else if (key === 'profit-net' \|\| key === 'reinvestit') { display.textContent = `${defaults[key]}%`; } else { display.textContent = formatCurrency(defaults[key]); } } } }); // Clear localStorage localStorage.removeItem('calculatorFormState'); // Update calculations updateResults(); // Hide analysis response if visible const analysisResponse = document.getElementById('analysis-response'); if (analysisResponse) { analysisResponse.classList.add('hidden'); } } </script> </body> </html> Back

Edit File : calculator.html | Size : 38.44 KB

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator Buget Stil de Viață Ideal</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#22534D',
                        accent: '#FEF4B5',
                    },
                    typography: {
                        DEFAULT: {
                            css: {
                                color: '#333',
                                h1: {
                                    color: '#22534D',
                                    fontWeight: '700',
                                    marginBottom: '1.5em',
                                },
                                h2: {
                                    color: '#22534D',
                                    fontWeight: '600',
                                    marginTop: '2em',
                                    marginBottom: '1em',
                                },
                                strong: {
                                    color: '#22534D',
                                    fontWeight: '600',
                                },
                                hr: {
                                    borderColor: '#E5E7EB',
                                    marginTop: '3em',
                                    marginBottom: '3em',
                                    borderWidth: '1px',
                                    borderStyle: 'solid',
                                    height: '1px',
                                    padding: '0',
                                    display: 'block',
                                    clear: 'both',
                                },
                                p: {
                                    marginTop: '1.5em',
                                    marginBottom: '1.5em',
                                    lineHeight: '1.75',
                                },
                                'p + p': {
                                    marginTop: '2em',
                                },
                                ul: {
                                    listStyleType: 'none',
                                    paddingLeft: '0',
                                    marginTop: '1.5em',
                                    marginBottom: '1.5em',
                                },
                                li: {
                                    marginTop: '0.5em',
                                    marginBottom: '0.5em',
                                    paddingLeft: '1.5em',
                                    position: 'relative',
                                },
                                'li::before': {
                                    content: '"•"',
                                    color: '#22534D',
                                    position: 'absolute',
                                    left: '0',
                                },
                                'li > ul': {
                                    marginTop: '0.5em',
                                    marginBottom: '0.5em',
                                },
                                'li > ul > li::before': {
                                    content: '"◦"',
                                },
                                blockquote: {
                                    borderLeftColor: '#22534D',
                                    backgroundColor: '#FEF4B5',
                                    padding: '1em',
                                    borderRadius: '0.5em',
                                    marginTop: '1.5em',
                                    marginBottom: '1.5em',
                                },
                            },
                        },
                    },
                },
            },
        }
    </script>
    <style>
        #analysis-text hr {
            margin-top: 1.5em;
            margin-bottom: 1.5em;
            border: none;
            border-top: 1px solid #E5E7EB;
            height: 1px;
        }

#analysis-text p {
            margin-top: 0.75em;
            margin-bottom: 0.75em;
            line-height: 1.5;
            font-size: 0.875rem;
        }

#analysis-text p + p {
            margin-top: 1em;
        }

#analysis-text h1 {
            color: #22534D;
            font-weight: 700;
            font-size: 1.25rem;
            margin-bottom: 0.75em;
        }

#analysis-text h2 {
            color: #22534D;
            font-weight: 600;
            font-size: 1.125rem;
            margin-top: 1.25em;
            margin-bottom: 0.5em;
        }

#analysis-text h3 {
            color: #22534D;
            font-weight: 600;
            font-size: 1rem;
            margin-top: 1em;
            margin-bottom: 0.5em;
        }

#analysis-text strong {
            color: #22534D;
            font-weight: 600;
        }

#analysis-text ul {
            list-style-type: none;
            padding-left: 0;
            margin-top: 0.75em;
            margin-bottom: 0.75em;
            font-size: 0.875rem;
        }

#analysis-text li {
            margin-top: 0.25em;
            margin-bottom: 0.25em;
            padding-left: 1.25em;
            position: relative;
        }

#analysis-text li::before {
            content: "•";
            color: #22534D;
            position: absolute;
            left: 0;
        }

#analysis-text li > ul {
            margin-top: 0.25em;
            margin-bottom: 0.25em;
        }

#analysis-text li > ul > li::before {
            content: "◦";
        }

#analysis-text blockquote {
            border-left: 3px solid #22534D;
            background-color: #FEF4B5;
            padding: 0.75em;
            border-radius: 0.375em;
            margin-top: 0.75em;
            margin-bottom: 0.75em;
            font-size: 0.875rem;
        }

#analysis-text code {
            background-color: #F3F4F6;
            padding: 0.15em 0.3em;
            border-radius: 0.25em;
            font-size: 0.75rem;
        }

#analysis-text pre {
            background-color: #F3F4F6;
            padding: 0.75em;
            border-radius: 0.375em;
            overflow-x: auto;
            margin-top: 0.75em;
            margin-bottom: 0.75em;
            font-size: 0.75rem;
        }

#analysis-text pre code {
            background-color: transparent;
            padding: 0;
        }
    </style>
</head>
<body class="bg-primary min-h-screen flex justify-center items-center p-4 font-sans text-black">
    <div class="container max-w-7xl flex gap-4 items-start">
        
        <div class="flex-1 max-w-xl bg-white rounded-2xl shadow-xl overflow-hidden">
            <form class="p-6" id="lifestyle-calculator">
                
                <div class="mb-6 pb-6 border-b border-gray-100">
                    <h2 class="text-lg font-semibold text-primary mb-4 pl-3 relative before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1 before:h-5 before:bg-accent before:rounded">
                        I. Active și Proprietăți
                    </h2>
                    
                    <div class="mb-4">
                        <label for="valoare-case" class="block text-base font-medium mb-2">
                            Ce valoare au casele pe care ți le dorești?
                        </label>
                        <input type="range" id="valoare-case" min="100000" max="30000000" step="100000" value="3000000"
                            class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                        <div class="flex justify-between items-center mt-1 text-xs text-gray-600">
                            <span>100.000€</span>
                            <span class="font-semibold text-primary text-sm" id="valoare-case-display">3.000.000€</span>
                            <span>30.000.000€</span>
                        </div>
                    </div>

<div class="mb-4">
                        <label for="valoare-masini" class="block text-base font-medium mb-2">
                            Ce valoare au mașinile, motocicletele, bărcile (etc.) pe care ți le dorești?
                        </label>
                        <input type="range" id="valoare-masini" min="10000" max="5000000" step="10000" value="500000"
                            class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                        <div class="flex justify-between items-center mt-1 text-xs text-gray-600">
                            <span>10.000€</span>
                            <span class="font-semibold text-primary text-sm" id="valoare-masini-display">500.000€</span>
                            <span>5.000.000€</span>
                        </div>
                    </div>
                </div>

<div class="mb-6">
                    <h2 class="text-lg font-semibold text-primary mb-4 pl-3 relative before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1 before:h-5 before:bg-accent before:rounded">
                        II. Cheltuieli Anuale
                    </h2>

<div class="mb-4">
                        <label for="cheltuieli-familie" class="block text-base font-medium mb-2">
                            Întreținerea familiei
                        </label>
                        <span class="block text-xs text-gray-600 -mt-1 mb-2">
                            Mâncare, sănătate, școală, fitness, suplimente, asigurări, educație, îmbrăcăminte, combustibil etc.
                        </span>
                        <input type="range" id="cheltuieli-familie" min="5000" max="1000000" step="1000" value="100000"
                            class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                        <div class="flex justify-between items-center mt-1 text-xs text-gray-600">
                            <span>5.000€</span>
                            <span class="font-semibold text-primary text-sm" id="cheltuieli-familie-display">100.000€</span>
                            <span>1.000.000€</span>
                        </div>
                    </div>

<div class="mb-4">
                        <label for="cost-concedii" class="block text-base font-medium mb-2">
                            Costul concediilor anuale
                        </label>
                        <input type="range" id="cost-concedii" min="5000" max="1000000" step="5000" value="150000"
                            class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                        <div class="flex justify-between items-center mt-1 text-xs text-gray-600">
                            <span>5.000€</span>
                            <span class="font-semibold text-primary text-sm" id="cost-concedii-display">150.000€</span>
                            <span>1.000.000€</span>
                        </div>
                    </div>

<div class="mb-4">
                        <label for="cheltuieli-lux" class="block text-base font-medium mb-2">
                            Cheltuieli de lux (ceasuri, genți, etc.)
                        </label>
                        <input type="range" id="cheltuieli-lux" min="5000" max="1000000" step="5000" value="100000"
                            class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                        <div class="flex justify-between items-center mt-1 text-xs text-gray-600">
                            <span>5.000€</span>
                            <span class="font-semibold text-primary text-sm" id="cheltuieli-lux-display">100.000€</span>
                            <span>1.000.000€</span>
                        </div>
                    </div>

<div class="mb-4">
                        <label for="investitii-anuale" class="block text-base font-medium mb-2">
                            Investiții anuale (bursă, imobiliare, etc.)
                        </label>
                        <input type="range" id="investitii-anuale" min="5000" max="1000000" step="5000" value="50000"
                            class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                        <div class="flex justify-between items-center mt-1 text-xs text-gray-600">
                            <span>5.000€</span>
                            <span class="font-semibold text-primary text-sm" id="investitii-anuale-display">50.000€</span>
                            <span>1.000.000€</span>
                        </div>
                    </div>
                </div>
            </form>
        </div>

<div class="flex-1 max-w-xl bg-white rounded-2xl shadow-xl overflow-hidden">
            <form class="p-6" id="business-calculator">
                <h2 class="text-lg font-semibold text-primary mb-4 pl-3 relative before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1 before:h-5 before:bg-accent before:rounded">
                    III. Detalii Afacere
                </h2>

<div class="mb-4">
                    <label for="profit-net" class="block text-base font-medium mb-2">
                        Profitul net al afacerii
                    </label>
                    <input type="range" id="profit-net" min="0" max="100" step="1" value="20"
                        class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                    <div class="flex justify-between items-center mt-1 text-xs text-gray-600">
                        <span>0%</span>
                        <span class="font-semibold text-primary text-sm" id="profit-net-display">20%</span>
                        <span>100%</span>
                    </div>
                </div>

<div class="mb-4">
                    <label for="reinvestit" class="block text-base font-medium mb-2">
                        Procent din profit reinvestit
                    </label>
                    <input type="range" id="reinvestit" min="0" max="100" step="1" value="30"
                        class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                    <div class="flex justify-between items-center mt-1 text-xs text-gray-600">
                        <span>0%</span>
                        <span class="font-semibold text-primary text-sm" id="reinvestit-display">30%</span>
                        <span>100%</span>
                    </div>
                </div>

<div class="mb-4">
                    <label for="descriere-afacere" class="block text-base font-medium mb-2">
                        Descrie pe scurt afacerea
                    </label>
                    <span class="block text-xs text-gray-600 -mt-1 mb-2">
                        Industria, ce vinzi, către cine, cum vinzi
                    </span>
                    <textarea id="descriere-afacere" rows="4" 
                        class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:border-primary resize-none"
                        placeholder="Ex: E-commerce în industria modă, vând haine premium către persoane cu venit mediu-ridicat, prin marketplace-uri și site propriu..."></textarea>
                </div>
            </form>

<form class="p-6 border-t border-gray-100" id="additional-details">
                <h2 class="text-lg font-semibold text-primary mb-4 pl-3 relative before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1 before:h-5 before:bg-accent before:rounded">
                    IV. Alte Detalii
                </h2>

<div class="mb-4">
                    <label for="zile-lucru" class="block text-base font-medium mb-2">
                        Câte zile vrei să lucrezi pe săptămână?
                    </label>
                    <input type="range" id="zile-lucru" min="0" max="7" step="1" value="5"
                        class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                    <div class="flex justify-between items-center mt-1 text-xs text-gray-600">
                        <span>0 zile</span>
                        <span class="font-semibold text-primary text-sm" id="zile-lucru-display">5 zile</span>
                        <span>7 zile</span>
                    </div>
                </div>

<div class="mb-4">
                    <label for="zile-concediu" class="block text-base font-medium mb-2">
                        Câte zile de concediu vrei să ai pe an?
                    </label>
                    <input type="range" id="zile-concediu" min="0" max="365" step="1" value="30"
                        class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                    <div class="flex justify-between items-center mt-1 text-xs text-gray-600">
                        <span>0 zile</span>
                        <span class="font-semibold text-primary text-sm" id="zile-concediu-display">30 zile</span>
                        <span>365 zile</span>
                    </div>
                </div>
            </form>
        </div>

<div class="flex-1 max-w-xl bg-white rounded-2xl shadow-xl p-6">
            <h2 class="text-lg font-semibold text-primary mb-4 pl-3 relative before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1 before:h-5 before:bg-accent before:rounded">
                V. Venituri Necesare
            </h2>
            
            <div class="bg-primary rounded-xl p-4 text-center text-white">
                <div class="block text-base font-medium">Venit Anual Personal Necesar</div>
                <span class="block text-2xl font-bold text-accent my-1" id="venit-anual-total">€0</span>
                <div class="block text-base font-medium mt-3">Venit Lunar Personal Necesar</div>
                <span class="block text-xl font-bold text-accent my-1" id="venit-lunar-total">€0</span>
            </div>

<div class="bg-primary rounded-xl p-4 text-center text-white mt-3">
                <div class="block text-base font-medium">Perna de Siguranță (3 Ani de Cheltuieli)</div>
                <span class="block text-2xl font-bold text-accent my-1" id="perna-siguranta">€0</span>
            </div>

<div class="bg-primary rounded-xl p-4 text-center text-white mt-3">
                <div class="block text-base font-medium">Cifră de Afaceri Necesară</div>
                <span class="block text-2xl font-bold text-accent my-1" id="cifra-afaceri">€0</span>
                <div class="text-xs text-white/70 mt-2">
                    Calculată pe baza profitului net și procentului reinvestit
                </div>
            </div>

<div class="flex gap-3 mt-6 mb-2">
                <button type="button" id="analiza" 
                    class="flex-1 bg-accent hover:bg-accent/90 text-primary font-medium py-2 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center">
                    <span id="analiza-text">Analizează</span>
                    <svg id="analiza-loading" class="hidden animate-spin ml-2 h-5 w-5 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </button>
                <button type="button" id="reset-calculator" 
                    class="flex-1 bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200">
                    Reset
                </button>
            </div>

<div id="error-popup" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-red-500">Eroare</h3>
                <button id="close-error" class="text-red-500 hover:text-gray-700">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <p id="error-message" class="text-gray-700"></p>
            <button id="error-ok" class="mt-4 w-full bg-red-500 text-white font-medium py-2 px-4 rounded-lg hover:bg-primary/90 transition-colors duration-200">
                OK
            </button>
        </div>
    </div>

// Function to save all form values to localStorage
        function saveFormState() {
            const formState = {
                // Active și Proprietăți
                'valoare-case': document.getElementById('valoare-case').value,
                'valoare-masini': document.getElementById('valoare-masini').value,
                
                // Cheltuieli Anuale
                'cheltuieli-familie': document.getElementById('cheltuieli-familie').value,
                'cost-concedii': document.getElementById('cost-concedii').value,
                'cheltuieli-lux': document.getElementById('cheltuieli-lux').value,
                'investitii-anuale': document.getElementById('investitii-anuale').value,
                
                // Detalii Afacere
                'profit-net': document.getElementById('profit-net').value,
                'reinvestit': document.getElementById('reinvestit').value,
                'descriere-afacere': document.getElementById('descriere-afacere').value,
                
                // Alte Detalii
                'zile-lucru': document.getElementById('zile-lucru').value,
                'zile-concediu': document.getElementById('zile-concediu').value
            };
            
            localStorage.setItem('calculatorFormState', JSON.stringify(formState));
        }

// Function to restore form values from localStorage
        function restoreFormState() {
            const savedState = localStorage.getItem('calculatorFormState');
            if (savedState) {
                try {
                    const formState = JSON.parse(savedState);
                    
                    // Restore all form values
                    Object.keys(formState).forEach(key => {
                        const element = document.getElementById(key);
                        if (element) {
                            element.value = formState[key];
                            
                            // Update display values for sliders
                            const display = document.getElementById(`${key}-display`);
                            if (display) {
                                if (key === 'zile-lucru' || key === 'zile-concediu') {
                                    display.textContent = `${formState[key]} zile`;
                                } else if (key === 'profit-net' || key === 'reinvestit') {
                                    display.textContent = `${formState[key]}%`;
                                } else {
                                    display.textContent = formatCurrency(parseFloat(formState[key]));
                                }
                            }
                        }
                    });
                    
                    // Update calculations
                    updateResults();
                } catch (error) {
                    console.error('Error restoring form state:', error);
                    localStorage.removeItem('calculatorFormState');
                }
            }
        }

// Add event listeners for all form inputs
        function addFormListeners() {
            // Add listeners to all sliders
            const sliders = document.querySelectorAll('input[type="range"]');
            sliders.forEach(slider => {
                slider.addEventListener('input', function() {
                    const display = document.getElementById(`${this.id}-display`);
                    if (this.id === 'zile-lucru' || this.id === 'zile-concediu') {
                        display.textContent = `${this.value} zile`;
                    } else if (this.id === 'profit-net' || this.id === 'reinvestit') {
                        display.textContent = `${this.value}%`;
                    } else {
                        display.textContent = formatCurrency(parseFloat(this.value));
                    }
                    updateResults();
                    saveFormState();
                });
            });

// Add listener to textarea
            const textarea = document.getElementById('descriere-afacere');
            textarea.addEventListener('input', saveFormState);
        }

// Function to calculate and update all results
        function updateResults() {
            // Get all slider values
            const valoareCase = parseFloat(document.getElementById('valoare-case').value) || 0;
            const valoareMasini = parseFloat(document.getElementById('valoare-masini').value) || 0;
            const cheltuieliFamilie = parseFloat(document.getElementById('cheltuieli-familie').value) || 0;
            const costConcedii = parseFloat(document.getElementById('cost-concedii').value) || 0;
            const cheltuieliLux = parseFloat(document.getElementById('cheltuieli-lux').value) || 0;
            const investitiiAnuale = parseFloat(document.getElementById('investitii-anuale').value) || 0;
            
            // Get business parameters
            const profitNet = parseFloat(document.getElementById('profit-net').value) || 0;
            const procentReinvestit = parseFloat(document.getElementById('reinvestit').value) || 0;

// Parameters for calculations
            const rataDobandaCaseAnuala = 0.05; // 5%
            const perioadaCaseAni = 30;
            const rataDobandaMasiniAnuala = 0.07; // 7%
            const perioadaMasiniAni = 5;

// Calculate monthly rate function
            function calculRataLunara(principal, rataAnuala, ani) {
                if (principal === 0) return 0;
                const rataLunara = rataAnuala / 12;
                const numarPlati = ani * 12;
                const numerator = rataLunara * Math.pow(1 + rataLunara, numarPlati);
                const denominator = Math.pow(1 + rataLunara, numarPlati) - 1;
                return principal * (numerator / denominator);
            }

// Calculate all values
            const rataLunaraCase = calculRataLunara(valoareCase, rataDobandaCaseAnuala, perioadaCaseAni);
            const rataAnualaCase = rataLunaraCase * 12;

const rataLunaraMasini = calculRataLunara(valoareMasini, rataDobandaMasiniAnuala, perioadaMasiniAni);
            const rataAnualaMasini = rataLunaraMasini * 12;
            
            const alteCheltuieliAnuale = cheltuieliFamilie + costConcedii + cheltuieliLux + investitiiAnuale;
            const subtotalAnualBaza = rataAnualaCase + rataAnualaMasini + alteCheltuieliAnuale;
            
            const bufferEconomii = subtotalAnualBaza * 0.10;
            const subtotalCuEconomii = subtotalAnualBaza + bufferEconomii;

const bufferNeprevazute = subtotalCuEconomii * 0.20;
            const venitAnualTotal = subtotalCuEconomii + bufferNeprevazute;
            const venitLunarTotal = venitAnualTotal / 12;

// Calculate perna de siguranta as 36 months of monthly income
            const pernaSiguranta = venitLunarTotal * 36;

// Calculate required turnover
            // First, calculate how much profit we need to keep (not reinvested)
            const profitNecesar = venitAnualTotal;
            const procentProfitDisponibil = (100 - procentReinvestit) / 100;
            const profitNetNecesar = profitNecesar / procentProfitDisponibil;
            const cifraAfaceri = (profitNetNecesar * 100) / profitNet;

// Update all results
            document.getElementById('venit-anual-total').textContent = formatCurrency(venitAnualTotal);
            document.getElementById('venit-lunar-total').textContent = formatCurrency(venitLunarTotal);
            document.getElementById('perna-siguranta').textContent = formatCurrency(pernaSiguranta);
            document.getElementById('cifra-afaceri').textContent = formatCurrency(cifraAfaceri);
        }

// Initialize the page
        document.addEventListener('DOMContentLoaded', function() {
            // Add event listeners first
            addFormListeners();
            
            // Then restore saved state
            restoreFormState();
            
            // Add reset button listener
            document.getElementById('reset-calculator').addEventListener('click', resetCalculator);
            
            // Initial calculation
            updateResults();
        });

// Add webhook functionality
        async function callWebhook(webhookUrl, data) {
            try {
                const response = await fetch(webhookUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data)
                });
                
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                
                return await response.json();
            } catch (error) {
                console.error('Error calling webhook:', error);
                throw error;
            }
        }

// Function to collect all current values
        function collectAllValues() {
            return {
                // Active și Proprietăți
                'valoare-case': document.getElementById('valoare-case').value,
                'valoare-masini': document.getElementById('valoare-masini').value,
                
                // Cheltuieli Anuale
                'cheltuieli-familie': document.getElementById('cheltuieli-familie').value,
                'cost-concedii': document.getElementById('cost-concedii').value,
                'cheltuieli-lux': document.getElementById('cheltuieli-lux').value,
                'investitii-anuale': document.getElementById('investitii-anuale').value,
                
                // Detalii Afacere
                'profit-net': document.getElementById('profit-net').value,
                'reinvestit': document.getElementById('reinvestit').value,
                'descriere-afacere': document.getElementById('descriere-afacere').value,
                
                // Alte Detalii
                'zile-lucru': document.getElementById('zile-lucru').value,
                'zile-concediu': document.getElementById('zile-concediu').value,
                
                // Rezultate
                'venit-anual-total': document.getElementById('venit-anual-total').textContent,
                'venit-lunar-total': document.getElementById('venit-lunar-total').textContent,
                'perna-siguranta': document.getElementById('perna-siguranta').textContent,
                'cifra-afaceri': document.getElementById('cifra-afaceri').textContent
            };
        }

// Function to show error popup
        function showError(message) {
            const popup = document.getElementById('error-popup');
            const errorMessage = document.getElementById('error-message');
            errorMessage.textContent = message;
            popup.classList.remove('hidden');
        }

// Function to hide error popup
        function hideError() {
            const popup = document.getElementById('error-popup');
            popup.classList.add('hidden');
        }

// Add event listeners for error popup
        document.getElementById('close-error').addEventListener('click', hideError);
        document.getElementById('error-ok').addEventListener('click', hideError);

// Add event listeners for buttons
        document.getElementById('analiza').addEventListener('click', async () => {
            const button = document.getElementById('analiza');
            const buttonText = document.getElementById('analiza-text');
            const loadingSpinner = document.getElementById('analiza-loading');
            const responseSection = document.getElementById('analysis-response');
            const analysisText = document.getElementById('analysis-text');
            const descriereAfacere = document.getElementById('descriere-afacere').value.trim();

// Validate company description
            if (!descriereAfacere) {
                showError('Vă rugăm să completați descrierea afacerii înainte de a face analiza.');
                return;
            }

try {
                // Show loading state
                button.disabled = true;
                buttonText.textContent = 'Se analizează...';
                loadingSpinner.classList.remove('hidden');
                responseSection.classList.add('hidden');

const data = collectAllValues();
                const response = await callWebhook('https://n8n-prrx.onrender.com/webhook/6f75696f-e1f9-4de0-a3ee-0e15d61cde8a', data);
                
                // Display the response with markdown formatting
                if (response && response.text) {
                    // Configure marked options
                    marked.setOptions({
                        breaks: true,
                        gfm: true,
                        headerIds: false,
                        mangle: false,
                        sanitize: false
                    });

// Pre-process the text to ensure proper spacing
                    const processedText = response.text
                        .replace(/\n\n/g, '\n\n\n') // Add extra newline for double line breaks
                        .replace(/---/g, '\n\n---\n\n'); // Add spacing around horizontal rules

// Convert markdown to HTML
                    const formattedText = marked.parse(processedText);
                    analysisText.innerHTML = formattedText;
                    responseSection.classList.remove('hidden');
                }
            } catch (error) {
                console.error('Error:', error);
                analysisText.textContent = 'A apărut o eroare în timpul analizei. Vă rugăm să încercați din nou.';
                responseSection.classList.remove('hidden');
            } finally {
                // Reset button state
                button.disabled = false;
                buttonText.textContent = 'Analizează';
                loadingSpinner.classList.add('hidden');
            }
        });

document.getElementById('share-results').addEventListener('click', async () => {
            const data = collectAllValues();
            await callWebhook('https://n8n-prrx.onrender.com/webhook-test/email', data);
        });

// Function to reset all values to defaults
        function resetCalculator() {
            // Default values
            const defaults = {
                'valoare-case': 3000000,
                'valoare-masini': 500000,
                'cheltuieli-familie': 100000,
                'cost-concedii': 150000,
                'cheltuieli-lux': 100000,
                'investitii-anuale': 50000,
                'profit-net': 20,
                'reinvestit': 30,
                'descriere-afacere': '',
                'zile-lucru': 5,
                'zile-concediu': 30
            };

// Set all values to defaults
            Object.keys(defaults).forEach(key => {
                const element = document.getElementById(key);
                if (element) {
                    element.value = defaults[key];
                    
                    // Update display values
                    const display = document.getElementById(`${key}-display`);
                    if (display) {
                        if (key === 'zile-lucru' || key === 'zile-concediu') {
                            display.textContent = `${defaults[key]} zile`;
                        } else if (key === 'profit-net' || key === 'reinvestit') {
                            display.textContent = `${defaults[key]}%`;
                        } else {
                            display.textContent = formatCurrency(defaults[key]);
                        }
                    }
                }
            });

// Clear localStorage
            localStorage.removeItem('calculatorFormState');

// Update calculations
            updateResults();

// Hide analysis response if visible
            const analysisResponse = document.getElementById('analysis-response');
            if (analysisResponse) {
                analysisResponse.classList.add('hidden');
            }
        }
    </script>
</body>
</html>

Back