haitham/hostpioneers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix summary page: full support breakdown, remaining payments, green savings

Browse Source
This commit is contained in:
Horus AI
2026-04-24 15:22:34 +02:00
parent f3f50111c0
commit 65e82a2026
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demos/ristorante/index.html
+7 -5
View File
@@ -171,7 +171,8 @@ footer{padding:2.5rem 3rem;border-top:1px solid var(--border);display:flex;justi
<div class="summary-row"><span id="s3-setup-label">Website setup (one-time)</span><span class="summary-val" id="s3-setup-price">—</span></div> <div class="summary-row"><span id="s3-setup-label">Website setup (one-time)</span><span class="summary-val" id="s3-setup-price">—</span></div>
<div class="summary-row"><span id="s3-support-label">Support plan</span><span class="summary-val" id="s3-support-price">—</span></div> <div class="summary-row"><span id="s3-support-label">Support plan</span><span class="summary-val" id="s3-support-price">—</span></div>
<div class="summary-row"><span id="s3-freq-label">—</span><span class="summary-val" id="s3-freq-price">—</span></div> <div class="summary-row"><span id="s3-freq-label">—</span><span class="summary-val" id="s3-freq-price">—</span></div>
<div class="summary-row"><span id="s3-savings-label" style="color:#4ade80;font-weight:700">—</span><span class="summary-val" id="s3-savings-val" style="color:#4ade80;font-weight:700">—</span></div> <div class="summary-row"><span id="s3-remaining-label" style="color:var(--muted);font-size:0.75rem">—</span><span id="s3-remaining-val" style="color:var(--muted);font-size:0.75rem">—</span></div>
<div class="summary-row" style="color:#4ade80;font-weight:700"><span id="s3-savings-label">—</span><span class="summary-val" id="s3-savings-val">—</span></div>
<div class="summary-row total"><span>Due today</span><span class="summary-val" id="s3-total">—</span></div> <div class="summary-row total"><span>Due today</span><span class="summary-val" id="s3-total">—</span></div>
</div> </div>
<div class="wizard-nav"><button class="wizard-btn" onclick="goStep(2)">← Back</button><button class="wizard-btn primary" id="btnStep3" onclick="goStep(4)" disabled>See Summary →</button></div> <div class="wizard-nav"><button class="wizard-btn" onclick="goStep(2)">← Back</button><button class="wizard-btn primary" id="btnStep3" onclick="goStep(4)" disabled>See Summary →</button></div>
@@ -185,9 +186,10 @@ footer{padding:2.5rem 3rem;border-top:1px solid var(--border);display:flex;justi
<div class="summary-row"><span>Website plan</span><span class="summary-val" id="s4-plan">—</span></div> <div class="summary-row"><span>Website plan</span><span class="summary-val" id="s4-plan">—</span></div>
<div class="summary-row"><span>Website setup (one-time)</span><span class="summary-val" id="s4-site">—</span></div> <div class="summary-row"><span>Website setup (one-time)</span><span class="summary-val" id="s4-site">—</span></div>
<div class="summary-row"><span>Support plan</span><span class="summary-val" id="s4-support">—</span></div> <div class="summary-row"><span>Support plan</span><span class="summary-val" id="s4-support">—</span></div>
<div class="summary-row"><span>Support payment</span><span class="summary-val" id="s4-pay">—</span></div> <div class="summary-row"><span>Payment</span><span class="summary-val" id="s4-pay">—</span></div>
<div class="summary-row"><span>Commitment</span><span class="summary-val" id="s4-commitment">—</span></div> <div class="summary-row"><span>Commitment</span><span class="summary-val" id="s4-commitment">—</span></div>
<div class="summary-row"><span id="s4-savings-label" style="color:#4ade80;font-weight:700">Savings vs monthly</span><span class="summary-val" id="s4-savings-val" style="color:#4ade80;font-weight:700">—</span></div> <div class="summary-row"><span id="s4-remaining-label" style="color:var(--muted);font-size:0.75rem">—</span><span id="s4-remaining-val" style="color:var(--muted);font-size:0.75rem">—</span></div>
<div class="summary-row" style="color:#4ade80;font-weight:700"><span id="s4-savings-label">—</span><span class="summary-val" id="s4-savings-val">—</span></div>
<div class="summary-row total"><span>Due today</span><span class="summary-val" id="s4-grand">—</span></div> <div class="summary-row total"><span>Due today</span><span class="summary-val" id="s4-grand">—</span></div>
</div> </div>
<div class="wizard-nav"><button class="wizard-btn" onclick="goStep(3)">← Edit</button><button class="wizard-btn primary" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Start Your Website →</button></div> <div class="wizard-nav"><button class="wizard-btn" onclick="goStep(3)">← Edit</button><button class="wizard-btn primary" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Start Your Website →</button></div>
@@ -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 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 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<n)ind.classList.add('done');if(i===n)ind.classList.add('active');}if(n===4)updateAllSummaries();document.getElementById('pricing').scrollIntoView({behavior:'smooth',block:'start'});} 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<n)ind.classList.add('done');if(i===n)ind.classList.add('active');}if(n===4)updateAllSummaries();document.getElementById('pricing').scrollIntoView({behavior:'smooth',block:'start'});}