From 65e82a20266369fd7578dfd471eaa5326cf47f5f Mon Sep 17 00:00:00 2001 From: Horus AI Date: Fri, 24 Apr 2026 15:22:34 +0200 Subject: [PATCH] Fix summary page: full support breakdown, remaining payments, green savings --- demos/ristorante/index.html | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/demos/ristorante/index.html b/demos/ristorante/index.html index ce7d69f..d11297c 100644 --- a/demos/ristorante/index.html +++ b/demos/ristorante/index.html @@ -171,7 +171,8 @@ footer{padding:2.5rem 3rem;border-top:1px solid var(--border);display:flex;justi
Website setup (one-time)—
Support plan—
——
-
——
+
——
+
——
Due today—
@@ -185,9 +186,10 @@ footer{padding:2.5rem 3rem;border-top:1px solid var(--border);display:flex;justi
Website plan—
Website setup (one-time)—
Support plan—
-
Support payment—
+
Payment—
Commitment—
-
Savings vs monthly—
+
——
+
——
Due today—
@@ -240,9 +242,9 @@ function selectDuration(d){selectedDuration=d;document.querySelectorAll('.durati function setPayFreq(f){selectedFreq=f;document.getElementById('toggleMonthly').classList.toggle('active',f==='monthly');document.getElementById('toggleAnnual').classList.toggle('active',f==='annual');updateAllSummaries()} function getMonthlyPayment(){if(!selectedPlan||!selectedSupport||!selectedDuration)return 0;var disc=durationDiscounts[selectedDuration];return Math.round(supportPrices[selectedSupport]*(1-disc));} -function getTotalToday(){if(!selectedPlan||!selectedSupport||!selectedDuration)return 0;var disc=durationDiscounts[selectedDuration];var monthlySupport=Math.round(supportPrices[selectedSupport]*(1-disc));if(selectedFreq==='monthly'){return planPrices[selectedPlan]+monthlySupport;}else{return planPrices[selectedPlan]+Math.round(supportPrices[selectedSupport]*durationMonths[selectedDuration]*(1-disc));}} +function getTotalToday(){if(!selectedPlan||!selectedSupport||!selectedDuration)return 0;var disc=durationDiscounts[selectedDuration];var firstMonthSupport=Math.round(supportPrices[selectedSupport]*(1-disc));return planPrices[selectedPlan]+firstMonthSupport;} -function updateAllSummaries(){if(!selectedPlan||!selectedSupport||!selectedDuration)return;var sitePrice=planPrices[selectedPlan];var supportPrice=supportPrices[selectedSupport];var disc=durationDiscounts[selectedDuration];var totalToday=getTotalToday();var monthlyPay=getMonthlyPayment();var saveAmt=selectedFreq==='annual'?Math.round(supportPrice*durationMonths[selectedDuration]*disc):0;var commitment=selectedDuration===1?'12 months':selectedDuration===2?'24 months (5% off support)':'36 months (10% off support)';var freqLabel=selectedFreq==='annual'?'Annual (~'+Math.round(monthlyPay)+'/mo, save €'+saveAmt+')':'Monthly';document.getElementById('s2-setup-label').textContent='Website: '+planNames[selectedPlan];document.getElementById('s2-setup-price').textContent='€'+sitePrice+' (one-time)';document.getElementById('s2-support-label').textContent='Support: '+supportLabels[selectedSupport];document.getElementById('s2-support-price').textContent='€'+supportPrice+'/mo';document.getElementById('s2-monthly-total').textContent='€'+(sitePrice+supportPrice);document.getElementById('s3-setup-label').textContent='Website: '+planNames[selectedPlan];document.getElementById('s3-setup-price').textContent='€'+sitePrice+' one-time';document.getElementById('s3-support-label').textContent=supportLabels[selectedSupport];document.getElementById('s3-support-price').textContent='€'+supportPrice+'/mo';document.getElementById('s3-freq-label').textContent=freqLabel;document.getElementById('s3-freq-price').textContent='€'+monthlyPay+'/mo';document.getElementById('s3-total-label').textContent='Due today';document.getElementById('s3-total').textContent='€'+totalToday;var totalSavings=0;if(selectedDuration>1){var monthlyTotalSupport=supportPrices[selectedSupport]*durationMonths[selectedDuration];var discountedTotal=Math.round(supportPrices[selectedSupport]*durationMonths[selectedDuration]*(1-disc));totalSavings=monthlyTotalSupport-discountedTotal;document.getElementById('s3-savings-label').textContent='Total savings vs monthly';document.getElementById('s3-savings-val').textContent='-€'+totalSavings+' ('+Math.round(disc*100)+'% off support)';}else{document.getElementById('s3-savings-label').textContent='Savings';document.getElementById('s3-savings-val').textContent='—';}if(selectedDuration===2){document.getElementById('dur-2').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save €'+totalSavings+' over 2 years.';}if(selectedDuration===3){document.getElementById('dur-3').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save €'+totalSavings+' over 3 years.';}document.getElementById('s4-plan').textContent=planNames[selectedPlan];document.getElementById('s4-site').textContent='€'+sitePrice;document.getElementById('s4-support').textContent=supportLabels[selectedSupport];document.getElementById('s4-commitment').textContent=commitment;document.getElementById('s4-pay').textContent=freqLabel;document.getElementById('s4-grand').textContent='€'+totalToday;if(selectedDuration>1){var monthlyTotal=supportPrices[selectedSupport]*durationMonths[selectedDuration];var disc=durationDiscounts[selectedDuration];var totalSav2=Math.round(monthlyTotal*(1-(1-disc)));document.getElementById('s4-savings-label').textContent='Total savings vs monthly';document.getElementById('s4-savings-val').textContent='-€'+totalSav2;}else{document.getElementById('s4-savings-label').textContent='Savings vs monthly';document.getElementById('s4-savings-val').textContent='—';}document.getElementById('wizard_plan').value=planNames[selectedPlan];document.getElementById('wizard_support').value=supportLabels[selectedSupport];document.getElementById('wizard_duration').value=durationLabels[selectedDuration];document.getElementById('wizard_freq').value=freqLabel;document.getElementById('wizard_total').value='€'+totalToday;} +function updateAllSummaries(){if(!selectedPlan||!selectedSupport||!selectedDuration)return;var sitePrice=planPrices[selectedPlan];var supportPrice=supportPrices[selectedSupport];var disc=durationDiscounts[selectedDuration];var durMo=durationMonths[selectedDuration];var durLabel=durationLabels[selectedDuration];var totalToday=getTotalToday();var monthlyPay=getMonthlyPayment();var savingsPct=Math.round(disc*100);var totalSavings=Math.round(supportPrice*durMo*disc);var commitment=selectedDuration===1?'12 months':selectedDuration===2?'24 months — 5% off':'36 months — 10% off';var freqLabel=selectedFreq==='annual'?'Annual (save '+savingsPct+'%)':'Monthly';document.getElementById('s2-setup-label').textContent=planNames[selectedPlan]+' website';document.getElementById('s2-setup-price').textContent='€'+sitePrice+' one-time';document.getElementById('s2-support-label').textContent=supportLabels[selectedSupport];document.getElementById('s2-support-price').textContent='€'+supportPrice+'/mo';document.getElementById('s2-monthly-total').textContent='€'+(sitePrice+supportPrice);document.getElementById('s3-setup-label').textContent=planNames[selectedPlan]+' (setup)';document.getElementById('s3-setup-price').textContent='€'+sitePrice+' one-time';document.getElementById('s3-support-label').textContent=supportLabels[selectedSupport];document.getElementById('s3-support-price').textContent='€'+supportPrice+'/mo';document.getElementById('s3-freq-label').textContent=freqLabel;document.getElementById('s3-freq-price').textContent='€'+monthlyPay+'/mo';document.getElementById('s3-total').textContent='€'+totalToday;document.getElementById('s3-savings-label').textContent='';document.getElementById('s3-savings-val').textContent='';if(selectedDuration>1){var remainingSupport=Math.round(supportPrices[selectedSupport]*durMo*(1-disc));document.getElementById('s3-remaining-label').textContent='Remaining support ('+durLabel+')';document.getElementById('s3-remaining-val').textContent='€'+remainingSupport;document.getElementById('s3-savings-label').textContent='Total savings vs monthly';document.getElementById('s3-savings-label').style.color='#4ade80';document.getElementById('s3-savings-label').style.fontWeight='700';document.getElementById('s3-savings-val').textContent='-€'+totalSavings;document.getElementById('s3-savings-val').style.color='#4ade80';document.getElementById('s3-savings-val').style.fontWeight='700';document.getElementById('s4-remaining-label').textContent='Remaining support ('+durLabel+')';document.getElementById('s4-remaining-val').textContent='€'+remainingSupport;document.getElementById('s4-savings-label').textContent='Total savings vs monthly';document.getElementById('s4-savings-label').style.color='#4ade80';document.getElementById('s4-savings-label').style.fontWeight='700';document.getElementById('s4-savings-val').textContent='-€'+totalSavings;document.getElementById('s4-savings-val').style.color='#4ade80';document.getElementById('s4-savings-val').style.fontWeight='700';}else{document.getElementById('s3-remaining-label').textContent='';document.getElementById('s3-remaining-val').textContent='';document.getElementById('s3-savings-label').textContent='Savings';document.getElementById('s3-savings-val').textContent='—';document.getElementById('s4-remaining-label').textContent='';document.getElementById('s4-remaining-val').textContent='';document.getElementById('s4-savings-label').textContent='Savings vs monthly';document.getElementById('s4-savings-val').textContent='—';}document.getElementById('s4-plan').textContent=planNames[selectedPlan];document.getElementById('s4-site').textContent='€'+sitePrice+' one-time';document.getElementById('s4-support').textContent=supportLabels[selectedSupport];document.getElementById('s4-commitment').textContent=commitment;document.getElementById('s4-pay').textContent=freqLabel+' €'+monthlyPay+'/mo';document.getElementById('s4-grand').textContent='€'+totalToday;document.getElementById('wizard_plan').value=planNames[selectedPlan];document.getElementById('wizard_support').value=supportLabels[selectedSupport];document.getElementById('wizard_duration').value=durLabel;document.getElementById('wizard_freq').value=freqLabel;document.getElementById('wizard_total').value='€'+totalToday;if(selectedDuration===2)document.getElementById('dur-2').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save €'+totalSavings+' over 2 years.';if(selectedDuration===3)document.getElementById('dur-3').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save €'+totalSavings+' over 3 years.';} function goStep(n){document.querySelectorAll('.wizard-panel').forEach(function(p){p.classList.remove('active')});document.getElementById('panel'+n).classList.add('active');for(var i=1;i<=4;i++){var ind=document.getElementById('step'+i+'Indicator');ind.classList.remove('active','done');if(i