Hugging Face's logo

Spaces:
dickiethinking
/
madeira-compile
Running

App Files Community
dickiethinking commited on
Commit
a42bf9e
·
verified ·
1 Parent(s): 9fa317f

this needs to start as a Button that reads "Get My Report", which when clicked, expands into this block - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +257 -303
index.html CHANGED
@@ -80,7 +80,6 @@
80
  </style>
81
  </head>
82
  <body class="font-sans antialiased text-gray-800">
83
- <!-- Navigation -->
84
  <nav class="bg-white shadow-lg fixed w-full z-50">
85
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
86
  <div class="flex justify-between h-16">
@@ -110,7 +109,6 @@
110
  </div>
111
  </div>
112
 
113
- <!-- Mobile menu -->
114
  <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg">
115
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
116
  <a href="#home" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Home</a>
@@ -125,7 +123,6 @@
125
  </div>
126
  </nav>
127
 
128
- <!-- Hero Section -->
129
  <section id="home" class="hero-bg flex items-center justify-center text-white pt-16">
130
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
131
  <div class="grid md:grid-cols-2 gap-12 items-center">
@@ -143,16 +140,17 @@
143
  </div>
144
  </div>
145
  <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-4">
146
- <div class="video-container rounded-lg overflow-hidden">
147
- <iframe width="560" height="315" src="https://www.youtube.com/embed/ft6eYEj0fII" title="Relocate to Madeira with Emigre.eu" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
148
- </div>
149
- <p class="text-center mt-4 text-sm italic">"Californians save an average of 30-50% on cost of living in Madeira"</p>
 
 
150
  </div>
151
  </div>
152
  </div>
153
  </section>
154
 
155
- <!-- Stats Section -->
156
  <section class="bg-blue-600 text-white py-12">
157
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
158
  <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
@@ -176,7 +174,6 @@
176
  </div>
177
  </section>
178
 
179
- <!-- Why Madeira Section -->
180
  <section id="benefits" class="py-20 bg-gray-50">
181
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
182
  <div class="text-center mb-16">
@@ -216,10 +213,12 @@
216
  </div>
217
 
218
  <div>
219
- <div class="video-container rounded-lg overflow-hidden shadow-lg">
220
- <iframe width="560" height="315" src="https://www.youtube.com/embed/example1" title="Madeira Luxury Living" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
221
- </div>
222
- <p class="text-center mt-4 text-sm italic text-gray-600">Luxury villa tour in Madeira - similar properties at 50-70% of California prices</p>
 
 
223
  </div>
224
  </div>
225
 
@@ -251,214 +250,210 @@
251
  </div>
252
  </section>
253
 
254
- <!-- Calculator Section -->
255
- <section id="calculator" class="py-20 bg-white">
256
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
257
- <div class="text-center mb-16">
258
- <h2 class="text-3xl font-bold text-gray-900 mb-4">Your Personalized Savings Calculator</h2>
259
- <p class="text-xl text-gray-600 max-w-3xl mx-auto">See exactly how much you could save by relocating from California to Madeira</p>
260
- </div>
261
-
262
- <div class="grid md:grid-cols-2 gap-12">
263
- <div class="bg-gray-50 p-8 rounded-lg shadow-md">
264
- <h3 class="text-xl font-bold text-gray-900 mb-6">Enter Your Current California Expenses</h3>
265
-
266
- <div class="space-y-6">
267
- <div>
268
- <label for="income" class="block text-sm font-medium text-gray-700 mb-1">Monthly Income ($)</label>
269
- <input type="range" id="income" min="2000" max="50000" step="1000" value="15000" class="calculator-input mb-2">
270
- <div class="flex justify-between">
271
- <span class="text-sm text-gray-500">$2,000</span>
272
- <span class="text-sm text-gray-500">$50,000</span>
273
- </div>
274
- <div class="mt-1">
275
- <input type="number" id="income-display" value="15000" 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">
276
- </div>
277
- </div>
278
-
279
- <div>
280
- <label for="housing" class="block text-sm font-medium text-gray-700 mb-1">Monthly Housing ($)</label>
281
- <input type="range" id="housing" min="1000" max="10000" step="100" value="4000" class="calculator-input mb-2">
282
- <div class="flex justify-between">
283
- <span class="text-sm text-gray-500">$1,000</span>
284
- <span class="text-sm text-gray-500">$10,000</span>
285
- </div>
286
- <div class="mt-1">
287
- <input type="number" id="housing-display" value="4000" 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">
288
- </div>
289
- </div>
290
-
291
- <div>
292
- <label for="healthcare" class="block text-sm font-medium text-gray-700 mb-1">Monthly Healthcare ($)</label>
293
- <input type="range" id="healthcare" min="100" max="2000" step="50" value="600" class="calculator-input mb-2">
294
- <div class="flex justify-between">
295
- <span class="text-sm text-gray-500">$100</span>
296
- <span class="text-sm text-gray-500">$2,000</span>
297
- </div>
298
- <div class="mt-1">
299
- <input type="number" id="healthcare-display" value="600" 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">
300
- </div>
301
- </div>
302
-
303
- <div>
304
- <label for="groceries" class="block text-sm font-medium text-gray-700 mb-1">Monthly Groceries ($)</label>
305
- <input type="range" id="groceries" min="200" max="2000" step="50" value="800" class="calculator-input mb-2">
306
- <div class="flex justify-between">
307
- <span class="text-sm text-gray-500">$200</span>
308
- <span class="text-sm text-gray-500">$2,000</span>
309
- </div>
310
- <div class="mt-1">
311
- <input type="number" id="groceries-display" value="800" 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">
312
- </div>
313
- </div>
314
 
315
- <div>
316
- <label for="taxes" class="block text-sm font-medium text-gray-700 mb-1">Monthly Taxes ($)</label>
317
- <input type="range" id="taxes" min="500" max="10000" step="100" value="2000" class="calculator-input mb-2">
318
- <div class="flex justify-between">
319
- <span class="text-sm text-gray-500">$500</span>
320
- <span class="text-sm text-gray-500">$10,000</span>
 
 
 
 
 
321
  </div>
322
- <div class="mt-1">
323
- <input type="number" id="taxes-display" value="2000" 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">
 
 
 
 
 
 
 
 
 
324
  </div>
325
- </div>
326
-
327
- <button id="calculate-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-md font-medium transition duration-300">
328
- Calculate My Savings
329
- </button>
330
-
331
- <div id="report-form" class="hidden mt-6 space-y-4">
332
  <div>
333
- <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
334
- <input type="text" id="name" class="mt-1 block 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">
 
 
 
 
 
 
 
335
  </div>
 
336
  <div>
337
- <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
338
- <input type="email" id="email" class="mt-1 block 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">
 
 
 
 
 
 
 
339
  </div>
340
- <div class="flex">
341
- <div class="w-1/4 mr-2">
342
- <label for="country-code" class="block text-sm font-medium text-gray-700">Country Code</label>
343
- <select id="country-code" class="mt-1 block 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">
344
- <option value="1" selected>USA (+1)</option>
345
- <option value="44">UK (+44)</option>
346
- <option value="33">France (+33)</option>
347
- <option value="49">Germany (+49)</option>
348
- <option value="351">Portugal (+351)</option>
349
- </select>
350
  </div>
351
- <div class="flex-1">
352
- <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
353
- <input type="tel" id="phone" class="mt-1 block 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">
354
  </div>
355
  </div>
356
- <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-md font-medium transition duration-300">
357
- Submit Report Request
 
358
  </button>
359
  </div>
360
  </div>
361
- </div>
362
-
363
- <div>
364
- <div class="bg-gray-50 p-8 rounded-lg shadow-md mb-8">
365
- <h3 class="text-xl font-bold text-gray-900 mb-6">Your Projected Madeira Savings</h3>
366
-
367
- <div id="results-placeholder" class="text-center py-12">
368
- <i class="fas fa-calculator text-gray-300 text-5xl mb-4"></i>
369
- <p class="text-gray-500">Enter your information and click "Calculate My Savings" to see your results</p>
370
- </div>
371
-
372
- <div id="results-container" class="hidden">
373
- <div class="overflow-x-auto">
374
- <table class="min-w-full divide-y divide-gray-200">
375
- <thead class="bg-gray-100">
376
- <tr>
377
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
378
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">California</th>
379
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Madeira</th>
380
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Savings</th>
381
- </tr>
382
- </thead>
383
- <tbody class="bg-white divide-y divide-gray-200">
384
- <tr>
385
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Housing</td>
386
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="cal-housing">4,000</span></td>
387
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="madeira-housing">1,200</span></td>
388
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">$<span id="savings-housing">2,800</span></td>
389
- </tr>
390
- <tr>
391
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Healthcare</td>
392
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="cal-healthcare">600</span></td>
393
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="madeira-healthcare">75</span></td>
394
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">$<span id="savings-healthcare">525</span></td>
395
- </tr>
396
- <tr>
397
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Groceries</td>
398
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="cal-groceries">800</span></td>
399
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="madeira-groceries">320</span></td>
400
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">$<span id="savings-groceries">480</span></td>
401
- </tr>
402
- <tr>
403
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Taxes</td>
404
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="cal-taxes">2,000</span></td>
405
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="madeira-taxes">0</span></td>
406
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">$<span id="savings-taxes">2,000</span></td>
407
- </tr>
408
- <tr class="bg-gray-50">
409
- <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-gray-900">Total Monthly</td>
410
- <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-gray-900">$<span id="cal-total">7,400</span></td>
411
- <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-gray-900">$<span id="madeira-total">1,595</span></td>
412
- <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-green-600">$<span id="savings-total">5,805</span></td>
413
- </tr>
414
- </tbody>
415
- </table>
416
  </div>
417
 
418
- <div class="mt-8 bg-blue-50 p-6 rounded-lg">
419
- <h4 class="text-lg font-bold text-blue-800 mb-3">Your Annual Savings Potential</h4>
420
- <div class="text-3xl font-bold text-blue-600 mb-2">$<span id="annual-savings">69,660</span></div>
421
- <p class="text-blue-700">Based on your inputs, you could save this much per year by relocating to Madeira!</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
422
  </div>
423
  </div>
424
- </div>
425
-
426
- <div class="bg-white p-6 rounded-lg shadow-md border border-blue-100">
427
- <div class="flex items-start">
428
- <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full">
429
- <i class="fas fa-info-circle text-blue-600 text-xl"></i>
430
- </div>
431
- <div class="ml-4">
432
- <h4 class="text-lg font-medium text-gray-900">Important Note</h4>
433
- <p class="mt-1 text-gray-600">Estimates based on averages from sources like Numbeo and Expatistan. Consult professionals for personalized advice. Actual savings may vary based on individual circumstances.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
434
  </div>
435
  </div>
436
  </div>
437
  </div>
438
- </div>
439
-
440
- <div class="mt-16 grid md:grid-cols-2 gap-8 items-center">
441
- <div class="video-container rounded-lg overflow-hidden shadow-lg">
442
- <iframe width="560" height="315" src="https://www.youtube.com/embed/example2" title="Calculator Demo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
443
- </div>
444
- <div>
445
- <h3 class="text-2xl font-bold text-gray-900 mb-4">Want More Detailed Information?</h3>
446
- <p class="text-gray-600 mb-6">Our comprehensive relocation guide covers everything from tax strategies to finding the perfect neighborhood in Madeira.</p>
447
- <form class="space-y-4">
448
- <div>
449
- <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
450
- <input type="email" id="email" class="mt-1 block 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">
451
- </div>
452
- <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-md font-medium transition duration-300">
453
- Get My Free Guide
454
- </button>
455
- </form>
456
  </div>
457
  </div>
458
- </div>
459
- </section>
460
-
461
- <!-- Testimonials Section -->
462
  <section id="testimonials" class="py-20 bg-gray-50 parallax" style="background-image: url('https://images.unsplash.com/photo-1519046904884-53103b34b206?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')">
463
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
464
  <div class="text-center mb-16">
@@ -519,7 +514,6 @@
519
  </div>
520
  </section>
521
 
522
- <!-- Services Section -->
523
  <section class="py-20 bg-white">
524
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
525
  <div class="text-center mb-16">
@@ -587,7 +581,6 @@
587
  </div>
588
  </section>
589
 
590
- <!-- CTA Section -->
591
  <section class="py-20 bg-blue-600 text-white">
592
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
593
  <h2 class="text-3xl font-bold mb-6">Ready to Start Your Madeira Journey?</h2>
@@ -598,8 +591,8 @@
598
  <h3 class="text-2xl font-bold text-gray-900 mb-6">Book Your Consultation</h3>
599
  <form class="space-y-4">
600
  <div>
601
- <label for="name" class="block text-sm font-medium text-gray-700 text-left">Name</label>
602
- <input type="text" id="name" class="mt-1 block 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">
603
  </div>
604
  <div>
605
  <label for="consult-email" class="block text-sm font-medium text-gray-700 text-left">Email</label>
@@ -636,7 +629,6 @@
636
  </div>
637
  </section>
638
 
639
- <!-- Footer -->
640
  <footer id="contact" class="bg-gray-900 text-white pt-16 pb-8">
641
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
642
  <div class="grid md:grid-cols-4 gap-12">
@@ -718,7 +710,6 @@
718
  </div>
719
  </footer>
720
 
721
- <!-- Mobile menu toggle -->
722
  <script>
723
  document.getElementById('mobile-menu-button').addEventListener('click', function() {
724
  const menu = document.getElementById('mobile-menu');
@@ -726,64 +717,78 @@
726
  });
727
  </script>
728
 
729
- <!-- Calculator functionality -->
730
  <script>
731
  document.addEventListener('DOMContentLoaded', function() {
732
- // Show report form when calculate button is clicked
733
- document.getElementById('calculate-btn').addEventListener('click', function() {
734
- // First calculate the savings (existing functionality)
 
 
 
 
 
 
735
  const housing = parseFloat(document.getElementById('housing').value);
736
  const healthcare = parseFloat(document.getElementById('healthcare').value);
737
  const groceries = parseFloat(document.getElementById('groceries').value);
738
  const taxes = parseFloat(document.getElementById('taxes').value);
739
 
740
- const madeiraHousing = housing * 0.3;
741
- const madeiraHealthcare = healthcare * 0.125;
742
- const madeiraGroceries = groceries * 0.4;
743
- const madeiraTaxes = 0;
 
744
 
 
745
  const savingsHousing = housing - madeiraHousing;
746
  const savingsHealthcare = healthcare - madeiraHealthcare;
747
  const savingsGroceries = groceries - madeiraGroceries;
748
  const savingsTaxes = taxes - madeiraTaxes;
749
 
 
750
  const calTotal = housing + healthcare + groceries + taxes;
751
  const madeiraTotal = madeiraHousing + madeiraHealthcare + madeiraGroceries + madeiraTaxes;
752
  const savingsTotal = calTotal - madeiraTotal;
753
  const annualSavings = savingsTotal * 12;
754
 
755
  // Update results display
756
- document.getElementById('cal-housing').textContent = housing.toLocaleString();
757
- document.getElementById('madeira-housing').textContent = madeiraHousing.toLocaleString(undefined, {maximumFractionDigits: 0});
758
- document.getElementById('savings-housing').textContent = savingsHousing.toLocaleString(undefined, {maximumFractionDigits: 0});
759
 
760
- document.getElementById('cal-healthcare').textContent = healthcare.toLocaleString();
761
- document.getElementById('madeira-healthcare').textContent = madeiraHealthcare.toLocaleString(undefined, {maximumFractionDigits: 0});
762
- document.getElementById('savings-healthcare').textContent = savingsHealthcare.toLocaleString(undefined, {maximumFractionDigits: 0});
763
 
764
- document.getElementById('cal-groceries').textContent = groceries.toLocaleString();
765
- document.getElementById('madeira-groceries').textContent = madeiraGroceries.toLocaleString(undefined, {maximumFractionDigits: 0});
766
- document.getElementById('savings-groceries').textContent = savingsGroceries.toLocaleString(undefined, {maximumFractionDigits: 0});
767
 
768
- document.getElementById('cal-taxes').textContent = taxes.toLocaleString();
769
- document.getElementById('madeira-taxes').textContent = madeiraTaxes.toLocaleString();
770
- document.getElementById('savings-taxes').textContent = savingsTaxes.toLocaleString(undefined, {maximumFractionDigits: 0});
771
 
772
- document.getElementById('cal-total').textContent = calTotal.toLocaleString(undefined, {maximumFractionDigits: 0});
773
- document.getElementById('madeira-total').textContent = madeiraTotal.toLocaleString(undefined, {maximumFractionDigits: 0});
774
- document.getElementById('savings-total').textContent = savingsTotal.toLocaleString(undefined, {maximumFractionDigits: 0});
775
 
776
- document.getElementById('annual-savings').textContent = annualSavings.toLocaleString(undefined, {maximumFractionDigits: 0});
 
 
777
 
778
- // Show results
779
- document.getElementById('results-placeholder').classList.add('hidden');
780
- document.getElementById('results-container').classList.remove('hidden');
 
 
 
 
781
 
782
- // Show the report form
783
- document.getElementById('report-form').classList.remove('hidden');
 
 
784
 
785
  // Scroll to results for better UX
786
- document.getElementById('results-container').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
787
  });
788
 
789
  // Sync range inputs with number inputs
@@ -791,83 +796,32 @@
791
  const rangeInput = document.getElementById(rangeId);
792
  const numberInput = document.getElementById(numberId);
793
 
794
- rangeInput.addEventListener('input', function() {
795
- numberInput.value = this.value;
796
- });
797
-
798
- numberInput.addEventListener('input', function() {
799
- if (this.value > rangeInput.max) {
800
- this.value = rangeInput.max;
801
- } else if (this.value < rangeInput.min) {
802
- this.value = rangeInput.min;
803
- }
804
- rangeInput.value = this.value;
805
  });
806
  };
807
 
808
- // Set minimum value for income input
809
- document.getElementById('income-display').min = 2000;
810
  syncInputs('income', 'income-display');
811
  syncInputs('housing', 'housing-display');
812
  syncInputs('healthcare', 'healthcare-display');
813
  syncInputs('groceries', 'groceries-display');
814
  syncInputs('taxes', 'taxes-display');
815
-
816
- // Calculate button functionality
817
- document.getElementById('calculate-btn').addEventListener('click', function() {
818
- // Get input values
819
- const housing = parseFloat(document.getElementById('housing').value);
820
- const healthcare = parseFloat(document.getElementById('healthcare').value);
821
- const groceries = parseFloat(document.getElementById('groceries').value);
822
- const taxes = parseFloat(document.getElementById('taxes').value);
823
-
824
- // Calculate Madeira equivalents (using average savings percentages)
825
- const madeiraHousing = housing * 0.3; // 70% savings
826
- const madeiraHealthcare = healthcare * 0.125; // 87.5% savings
827
- const madeiraGroceries = groceries * 0.4; // 60% savings
828
- const madeiraTaxes = 0; // Assuming NHR benefits
829
-
830
- // Calculate savings
831
- const savingsHousing = housing - madeiraHousing;
832
- const savingsHealthcare = healthcare - madeiraHealthcare;
833
- const savingsGroceries = groceries - madeiraGroceries;
834
- const savingsTaxes = taxes - madeiraTaxes;
835
-
836
- // Calculate totals
837
- const calTotal = housing + healthcare + groceries + taxes;
838
- const madeiraTotal = madeiraHousing + madeiraHealthcare + madeiraGroceries + madeiraTaxes;
839
- const savingsTotal = calTotal - madeiraTotal;
840
- const annualSavings = savingsTotal * 12;
841
-
842
- // Update results display
843
- document.getElementById('cal-housing').textContent = housing.toLocaleString();
844
- document.getElementById('madeira-housing').textContent = madeiraHousing.toLocaleString(undefined, {maximumFractionDigits: 0});
845
- document.getElementById('savings-housing').textContent = savingsHousing.toLocaleString(undefined, {maximumFractionDigits: 0});
846
-
847
- document.getElementById('cal-healthcare').textContent = healthcare.toLocaleString();
848
- document.getElementById('madeira-healthcare').textContent = madeiraHealthcare.toLocaleString(undefined, {maximumFractionDigits: 0});
849
- document.getElementById('savings-healthcare').textContent = savingsHealthcare.toLocaleString(undefined, {maximumFractionDigits: 0});
850
-
851
- document.getElementById('cal-groceries').textContent = groceries.toLocaleString();
852
- document.getElementById('madeira-groceries').textContent = madeiraGroceries.toLocaleString(undefined, {maximumFractionDigits: 0});
853
- document.getElementById('savings-groceries').textContent = savingsGroceries.toLocaleString(undefined, {maximumFractionDigits: 0});
854
-
855
- document.getElementById('cal-taxes').textContent = taxes.toLocaleString();
856
- document.getElementById('madeira-taxes').textContent = madeiraTaxes.toLocaleString();
857
- document.getElementById('savings-taxes').textContent = savingsTaxes.toLocaleString(undefined, {maximumFractionDigits: 0});
858
-
859
- document.getElementById('cal-total').textContent = calTotal.toLocaleString(undefined, {maximumFractionDigits: 0});
860
- document.getElementById('madeira-total').textContent = madeiraTotal.toLocaleString(undefined, {maximumFractionDigits: 0});
861
- document.getElementById('savings-total').textContent = savingsTotal.toLocaleString(undefined, {maximumFractionDigits: 0});
862
-
863
- document.getElementById('annual-savings').textContent = annualSavings.toLocaleString(undefined, {maximumFractionDigits: 0});
864
-
865
- // Show results
866
- document.getElementById('results-placeholder').classList.add('hidden');
867
- document.getElementById('results-container').classList.remove('hidden');
868
-
869
- // Scroll to results for better UX
870
- document.getElementById('results-container').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
871
  });
872
  });
873
  </script>
 
80
  </style>
81
  </head>
82
  <body class="font-sans antialiased text-gray-800">
 
83
  <nav class="bg-white shadow-lg fixed w-full z-50">
84
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
85
  <div class="flex justify-between h-16">
 
109
  </div>
110
  </div>
111
 
 
112
  <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg">
113
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
114
  <a href="#home" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Home</a>
 
123
  </div>
124
  </nav>
125
 
 
126
  <section id="home" class="hero-bg flex items-center justify-center text-white pt-16">
127
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
128
  <div class="grid md:grid-cols-2 gap-12 items-center">
 
140
  </div>
141
  </div>
142
  <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-4">
143
+ <figure>
144
+ <div class="video-container rounded-lg overflow-hidden">
145
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/ft6eYEj0fII" title="Relocate to Madeira with Emigre.eu" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
146
+ </div>
147
+ <figcaption class="text-center mt-4 text-sm italic">"Californians save an average of 30-50% on cost of living in Madeira"</figcaption>
148
+ </figure>
149
  </div>
150
  </div>
151
  </div>
152
  </section>
153
 
 
154
  <section class="bg-blue-600 text-white py-12">
155
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
156
  <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
 
174
  </div>
175
  </section>
176
 
 
177
  <section id="benefits" class="py-20 bg-gray-50">
178
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
179
  <div class="text-center mb-16">
 
213
  </div>
214
 
215
  <div>
216
+ <figure>
217
+ <div class="video-container rounded-lg overflow-hidden shadow-lg">
218
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/example1" title="Madeira Luxury Living" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
219
+ </div>
220
+ <figcaption class="text-center mt-4 text-sm italic text-gray-600">Luxury villa tour in Madeira - similar properties at 50-70% of California prices</figcaption>
221
+ </figure>
222
  </div>
223
  </div>
224
 
 
250
  </div>
251
  </section>
252
 
253
+ <main>
254
+ <section id="calculator" class="py-20 bg-white">
255
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
256
+ <div class="text-center mb-16">
257
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Your Personalized Savings Calculator</h2>
258
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">See exactly how much you could save by relocating from California to Madeira</p>
259
+ </div>
260
+
261
+ <div class="grid md:grid-cols-2 gap-12">
262
+ <div class="bg-gray-50 p-8 rounded-lg shadow-md">
263
+ <h3 class="text-xl font-bold text-gray-900 mb-6">Enter Your Current California Expenses</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
264
 
265
+ <div class="space-y-6">
266
+ <div>
267
+ <label for="income" class="block text-sm font-medium text-gray-700 mb-1">Monthly Income ($)</label>
268
+ <input type="range" id="income" min="2000" max="50000" step="1000" value="15000" class="calculator-input mb-2">
269
+ <div class="flex justify-between">
270
+ <span class="text-sm text-gray-500">$2,000</span>
271
+ <span class="text-sm text-gray-500">$50,000</span>
272
+ </div>
273
+ <div class="mt-1">
274
+ <input type="number" id="income-display" value="15000" 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">
275
+ </div>
276
  </div>
277
+
278
+ <div>
279
+ <label for="housing" class="block text-sm font-medium text-gray-700 mb-1">Monthly Housing ($)</label>
280
+ <input type="range" id="housing" min="1000" max="10000" step="100" value="4000" class="calculator-input mb-2">
281
+ <div class="flex justify-between">
282
+ <span class="text-sm text-gray-500">$1,000</span>
283
+ <span class="text-sm text-gray-500">$10,000</span>
284
+ </div>
285
+ <div class="mt-1">
286
+ <input type="number" id="housing-display" value="4000" 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">
287
+ </div>
288
  </div>
289
+
 
 
 
 
 
 
290
  <div>
291
+ <label for="healthcare" class="block text-sm font-medium text-gray-700 mb-1">Monthly Healthcare ($)</label>
292
+ <input type="range" id="healthcare" min="100" max="2000" step="50" value="600" class="calculator-input mb-2">
293
+ <div class="flex justify-between">
294
+ <span class="text-sm text-gray-500">$100</span>
295
+ <span class="text-sm text-gray-500">$2,000</span>
296
+ </div>
297
+ <div class="mt-1">
298
+ <input type="number" id="healthcare-display" value="600" 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">
299
+ </div>
300
  </div>
301
+
302
  <div>
303
+ <label for="groceries" class="block text-sm font-medium text-gray-700 mb-1">Monthly Groceries ($)</label>
304
+ <input type="range" id="groceries" min="200" max="2000" step="50" value="800" class="calculator-input mb-2">
305
+ <div class="flex justify-between">
306
+ <span class="text-sm text-gray-500">$200</span>
307
+ <span class="text-sm text-gray-500">$2,000</span>
308
+ </div>
309
+ <div class="mt-1">
310
+ <input type="number" id="groceries-display" value="800" 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">
311
+ </div>
312
  </div>
313
+
314
+ <div>
315
+ <label for="taxes" class="block text-sm font-medium text-gray-700 mb-1">Monthly Taxes ($)</label>
316
+ <input type="range" id="taxes" min="500" max="10000" step="100" value="2000" class="calculator-input mb-2">
317
+ <div class="flex justify-between">
318
+ <span class="text-sm text-gray-500">$500</span>
319
+ <span class="text-sm text-gray-500">$10,000</span>
 
 
 
320
  </div>
321
+ <div class="mt-1">
322
+ <input type="number" id="taxes-display" value="2000" 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">
 
323
  </div>
324
  </div>
325
+
326
+ <button id="calculate-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-md font-medium transition duration-300">
327
+ Calculate My Savings
328
  </button>
329
  </div>
330
  </div>
331
+
332
+ <div>
333
+ <div class="bg-gray-50 p-8 rounded-lg shadow-md mb-8">
334
+ <h3 class="text-xl font-bold text-gray-900 mb-6">Your Projected Madeira Savings</h3>
335
+
336
+ <div id="results-placeholder" class="text-center py-12">
337
+ <i class="fas fa-calculator text-gray-300 text-5xl mb-4"></i>
338
+ <p class="text-gray-500">Enter your information and click "Calculate" to see your results.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
339
  </div>
340
 
341
+ <div id="results-container" class="hidden">
342
+ <div class="overflow-x-auto">
343
+ <table class="min-w-full divide-y divide-gray-200">
344
+ <thead class="bg-gray-100">
345
+ <tr>
346
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
347
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">California</th>
348
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Madeira</th>
349
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Savings</th>
350
+ </tr>
351
+ </thead>
352
+ <tbody class="bg-white divide-y divide-gray-200">
353
+ <tr>
354
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Housing</td>
355
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="cal-housing">4,000</span></td>
356
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="madeira-housing">1,200</span></td>
357
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">$<span id="savings-housing">2,800</span></td>
358
+ </tr>
359
+ <tr>
360
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Healthcare</td>
361
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="cal-healthcare">600</span></td>
362
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="madeira-healthcare">75</span></td>
363
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">$<span id="savings-healthcare">525</span></td>
364
+ </tr>
365
+ <tr>
366
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Groceries</td>
367
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="cal-groceries">800</span></td>
368
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="madeira-groceries">320</span></td>
369
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">$<span id="savings-groceries">480</span></td>
370
+ </tr>
371
+ <tr>
372
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Taxes</td>
373
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="cal-taxes">2,000</span></td>
374
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="madeira-taxes">0</span></td>
375
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">$<span id="savings-taxes">2,000</span></td>
376
+ </tr>
377
+ <tr class="bg-gray-50">
378
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-gray-900">Total Monthly</td>
379
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-gray-900">$<span id="cal-total">7,400</span></td>
380
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-gray-900">$<span id="madeira-total">1,595</span></td>
381
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-green-600">$<span id="savings-total">5,805</span></td>
382
+ </tr>
383
+ </tbody>
384
+ </table>
385
+ </div>
386
+
387
+ <div class="mt-8 bg-blue-50 p-6 rounded-lg relative">
388
+ <h4 class="text-lg font-bold text-blue-800 mb-3 flex items-center">
389
+ Your Annual Savings Potential
390
+ <i id="disclaimer-icon" class="fas fa-info-circle text-blue-400 cursor-pointer ml-2"></i>
391
+ </h4>
392
+ <div id="disclaimer-popup" class="hidden absolute bottom-full left-0 mb-2 w-full max-w-xs bg-gray-800 text-white text-sm rounded-lg p-3 shadow-lg z-10">
393
+ <strong>Important Note:</strong> Estimates based on averages from sources like Numbeo and Expatistan. Consult professionals for personalized advice. Actual savings may vary based on individual circumstances.
394
+ </div>
395
+ <div class="text-3xl font-bold text-blue-600 mb-2">$<span id="annual-savings">69,660</span></div>
396
+ <p class="text-blue-700">Based on your inputs, you could save this much per year by relocating to Madeira!</p>
397
+ </div>
398
  </div>
399
  </div>
400
+
401
+ <div id="report-form" class="hidden mt-8 bg-gray-50 p-8 rounded-lg shadow-md">
402
+ <h3 class="text-xl font-bold text-gray-900 mb-6">Get Your Detailed Report</h3>
403
+ <div class="space-y-4">
404
+ <div>
405
+ <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
406
+ <input type="text" id="name" class="mt-1 block 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">
407
+ </div>
408
+ <div>
409
+ <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
410
+ <input type="email" id="email" class="mt-1 block 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">
411
+ </div>
412
+ <div class="flex">
413
+ <div class="w-1/3 mr-2">
414
+ <label for="country-code" class="block text-sm font-medium text-gray-700">Country</label>
415
+ <select id="country-code" class="mt-1 block 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">
416
+ <option value="1" selected>USA (+1)</option>
417
+ <option value="44">UK (+44)</option>
418
+ <option value="33">France (+33)</option>
419
+ <option value="49">Germany (+49)</option>
420
+ <option value="351">Portugal (+351)</option>
421
+ </select>
422
+ </div>
423
+ <div class="flex-1">
424
+ <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
425
+ <input type="tel" id="phone" class="mt-1 block 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">
426
+ </div>
427
+ </div>
428
+ <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-md font-medium transition duration-300">
429
+ Submit Report Request
430
+ </button>
431
  </div>
432
  </div>
433
  </div>
434
  </div>
435
+
436
+ <div class="mt-16 grid md:grid-cols-2 gap-8 items-center">
437
+ <div class="video-container rounded-lg overflow-hidden shadow-lg">
438
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/example2" title="Calculator Demo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
439
+ </div>
440
+ <div>
441
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Want More Detailed Information?</h3>
442
+ <p class="text-gray-600 mb-6">Our comprehensive relocation guide covers everything from tax strategies to finding the perfect neighborhood in Madeira.</p>
443
+ <form class="space-y-4">
444
+ <div>
445
+ <label for="guide-email" class="block text-sm font-medium text-gray-700">Email Address</label>
446
+ <input type="email" id="guide-email" class="mt-1 block 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">
447
+ </div>
448
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-md font-medium transition duration-300">
449
+ Get My Free Guide
450
+ </button>
451
+ </form>
452
+ </div>
453
  </div>
454
  </div>
455
+ </section>
456
+ </main>
 
 
457
  <section id="testimonials" class="py-20 bg-gray-50 parallax" style="background-image: url('https://images.unsplash.com/photo-1519046904884-53103b34b206?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')">
458
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
459
  <div class="text-center mb-16">
 
514
  </div>
515
  </section>
516
 
 
517
  <section class="py-20 bg-white">
518
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
519
  <div class="text-center mb-16">
 
581
  </div>
582
  </section>
583
 
 
584
  <section class="py-20 bg-blue-600 text-white">
585
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
586
  <h2 class="text-3xl font-bold mb-6">Ready to Start Your Madeira Journey?</h2>
 
591
  <h3 class="text-2xl font-bold text-gray-900 mb-6">Book Your Consultation</h3>
592
  <form class="space-y-4">
593
  <div>
594
+ <label for="consult-name" class="block text-sm font-medium text-gray-700 text-left">Name</label>
595
+ <input type="text" id="consult-name" class="mt-1 block 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">
596
  </div>
597
  <div>
598
  <label for="consult-email" class="block text-sm font-medium text-gray-700 text-left">Email</label>
 
629
  </div>
630
  </section>
631
 
 
632
  <footer id="contact" class="bg-gray-900 text-white pt-16 pb-8">
633
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
634
  <div class="grid md:grid-cols-4 gap-12">
 
710
  </div>
711
  </footer>
712
 
 
713
  <script>
714
  document.getElementById('mobile-menu-button').addEventListener('click', function() {
715
  const menu = document.getElementById('mobile-menu');
 
717
  });
718
  </script>
719
 
 
720
  <script>
721
  document.addEventListener('DOMContentLoaded', function() {
722
+ const calculateBtn = document.getElementById('calculate-btn');
723
+ const reportForm = document.getElementById('report-form');
724
+ const resultsPlaceholder = document.getElementById('results-placeholder');
725
+ const resultsContainer = document.getElementById('results-container');
726
+ const disclaimerIcon = document.getElementById('disclaimer-icon');
727
+ const disclaimerPopup = document.getElementById('disclaimer-popup');
728
+
729
+ const calculateAndDisplaySavings = () => {
730
+ // Get input values
731
  const housing = parseFloat(document.getElementById('housing').value);
732
  const healthcare = parseFloat(document.getElementById('healthcare').value);
733
  const groceries = parseFloat(document.getElementById('groceries').value);
734
  const taxes = parseFloat(document.getElementById('taxes').value);
735
 
736
+ // Calculate Madeira equivalents (using average savings percentages)
737
+ const madeiraHousing = housing * 0.3; // 70% savings
738
+ const madeiraHealthcare = healthcare * 0.125; // 87.5% savings
739
+ const madeiraGroceries = groceries * 0.4; // 60% savings
740
+ const madeiraTaxes = 0; // Assuming NHR benefits
741
 
742
+ // Calculate savings
743
  const savingsHousing = housing - madeiraHousing;
744
  const savingsHealthcare = healthcare - madeiraHealthcare;
745
  const savingsGroceries = groceries - madeiraGroceries;
746
  const savingsTaxes = taxes - madeiraTaxes;
747
 
748
+ // Calculate totals
749
  const calTotal = housing + healthcare + groceries + taxes;
750
  const madeiraTotal = madeiraHousing + madeiraHealthcare + madeiraGroceries + madeiraTaxes;
751
  const savingsTotal = calTotal - madeiraTotal;
752
  const annualSavings = savingsTotal * 12;
753
 
754
  // Update results display
755
+ const formatNumber = (num) => num.toLocaleString(undefined, {maximumFractionDigits: 0});
 
 
756
 
757
+ document.getElementById('cal-housing').textContent = formatNumber(housing);
758
+ document.getElementById('madeira-housing').textContent = formatNumber(madeiraHousing);
759
+ document.getElementById('savings-housing').textContent = formatNumber(savingsHousing);
760
 
761
+ document.getElementById('cal-healthcare').textContent = formatNumber(healthcare);
762
+ document.getElementById('madeira-healthcare').textContent = formatNumber(madeiraHealthcare);
763
+ document.getElementById('savings-healthcare').textContent = formatNumber(savingsHealthcare);
764
 
765
+ document.getElementById('cal-groceries').textContent = formatNumber(groceries);
766
+ document.getElementById('madeira-groceries').textContent = formatNumber(madeiraGroceries);
767
+ document.getElementById('savings-groceries').textContent = formatNumber(savingsGroceries);
768
 
769
+ document.getElementById('cal-taxes').textContent = formatNumber(taxes);
770
+ document.getElementById('madeira-taxes').textContent = formatNumber(madeiraTaxes);
771
+ document.getElementById('savings-taxes').textContent = formatNumber(savingsTaxes);
772
 
773
+ document.getElementById('cal-total').textContent = formatNumber(calTotal);
774
+ document.getElementById('madeira-total').textContent = formatNumber(madeiraTotal);
775
+ document.getElementById('savings-total').textContent = formatNumber(savingsTotal);
776
 
777
+ document.getElementById('annual-savings').textContent = formatNumber(annualSavings);
778
+ };
779
+
780
+ // Event listener for the main calculate button
781
+ calculateBtn.addEventListener('click', function() {
782
+ // Run calculations
783
+ calculateAndDisplaySavings();
784
 
785
+ // Show results and the report form
786
+ resultsPlaceholder.classList.add('hidden');
787
+ resultsContainer.classList.remove('hidden');
788
+ reportForm.classList.remove('hidden');
789
 
790
  // Scroll to results for better UX
791
+ resultsContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
792
  });
793
 
794
  // Sync range inputs with number inputs
 
796
  const rangeInput = document.getElementById(rangeId);
797
  const numberInput = document.getElementById(numberId);
798
 
799
+ rangeInput.addEventListener('input', () => numberInput.value = rangeInput.value);
800
+ numberInput.addEventListener('input', () => {
801
+ if (Number(numberInput.value) > Number(rangeInput.max)) numberInput.value = rangeInput.max;
802
+ else if (Number(numberInput.value) < Number(rangeInput.min)) numberInput.value = rangeInput.min;
803
+ rangeInput.value = numberInput.value;
 
 
 
 
 
 
804
  });
805
  };
806
 
 
 
807
  syncInputs('income', 'income-display');
808
  syncInputs('housing', 'housing-display');
809
  syncInputs('healthcare', 'healthcare-display');
810
  syncInputs('groceries', 'groceries-display');
811
  syncInputs('taxes', 'taxes-display');
812
+
813
+ // Event listener for the disclaimer icon
814
+ disclaimerIcon.addEventListener('click', (event) => {
815
+ event.stopPropagation(); // Prevent the document click listener from firing immediately
816
+ disclaimerPopup.classList.toggle('hidden');
817
+ });
818
+
819
+ // Hide the disclaimer popup if clicking anywhere else on the page
820
+ document.addEventListener('click', (event) => {
821
+ const isClickInside = disclaimerPopup.contains(event.target) || disclaimerIcon.contains(event.target);
822
+ if (!disclaimerPopup.classList.contains('hidden') && !isClickInside) {
823
+ disclaimerPopup.classList.add('hidden');
824
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
825
  });
826
  });
827
  </script>