diff --git a/templates/hosting.html b/templates/hosting.html index acd092d..fcbd0f8 100644 --- a/templates/hosting.html +++ b/templates/hosting.html @@ -63,38 +63,81 @@

Web Hosting

Configure your hosting setup below

-
- - -
- -
- - -
- -
- - -
-
- + +
+
+ +

Standard WordPress

+
$6/month
+
    +
  • ✓ 1 CPU Core
    • +
  • ✓ 0.5GB RAM
    • +
  • ✓ 10GB Storage
    • +
  • ✓ Perfect for small sites
    • +
+
+ +
+ +

Premium WordPress

+
$10/month
+
    +
  • ✓ 1 CPU Core
    • +
  • ✓ 1GB RAM
    • +
  • ✓ 50GB Storage
    • +
  • ✓ Weekly Backups Included
    • +
+
+ +
+ +

Custom Configuration

+
Variable
+
    +
  • ✓ Choose your CPU
    • +
  • ✓ Choose your RAM
    • +
  • ✓ Choose your Storage
    • +
  • ✓ Optional Backups
    • +
+
+
+
+ +
@@ -119,15 +162,31 @@ const diskRate = 0.1; const backupRate = 1; - // On document load, initialize the values + // Memory values mapping + const memoryValues = [0.5, 1, 2, 4, 8, 16, 24]; + + // Initialize on load document.addEventListener('DOMContentLoaded', () => { // Check if parameters are in the URL const urlParams = new URLSearchParams(window.location.search); + + // Check for preset parameter + if (urlParams.has('preset')) { + const presetValue = urlParams.get('preset'); + const presetRadio = document.querySelector(`input[name="preset"][value="${presetValue}"]`); + if (presetRadio) { + presetRadio.checked = true; + handlePresetChange(); + } + } + if (urlParams.has('cpus')) { document.getElementById('cpus').value = urlParams.get('cpus'); } if (urlParams.has('memory')) { - document.getElementById('memory').value = urlParams.get('memory'); + const memoryParam = parseFloat(urlParams.get('memory')); + const memoryIndex = memoryValues.indexOf(memoryParam); + document.getElementById('memory').value = memoryIndex >= 0 ? memoryIndex : 0; } if (urlParams.has('disk')) { document.getElementById('disk').value = urlParams.get('disk'); @@ -151,18 +210,100 @@ event.preventDefault(); sendEnquiry(); }); + + // Initialize preset handling and card styles + handlePresetChange(); + updateCardStyles(); }); - function updateValue(field) { - const value = document.getElementById(field).value; + let value = document.getElementById(field).value; + + if (field === 'memory') { + value = memoryValues[parseInt(value)]; + } + document.getElementById(field + 'Value').textContent = value; calculateCost(); } + function selectPreset(presetValue) { + document.querySelector(`input[name="preset"][value="${presetValue}"]`).checked = true; + handlePresetChange(); + updateCardStyles(); + } + + function updateCardStyles() { + const cards = document.querySelectorAll('.plan-card'); + const selectedPreset = document.querySelector('input[name="preset"]:checked').value; + + cards.forEach((card, index) => { + const presetValues = ['standard', 'premium', 'custom']; + const isSelected = presetValues[index] === selectedPreset; + + if (isSelected) { + card.style.borderColor = '#007bff'; + card.style.background = '#f8f9fa'; + card.style.transform = 'translateY(-2px)'; + card.style.boxShadow = '0 4px 12px rgba(0,123,255,0.15)'; + } else { + card.style.borderColor = '#ddd'; + card.style.background = 'white'; + card.style.transform = 'translateY(0)'; + card.style.boxShadow = 'none'; + } + }); + } + + function handlePresetChange() { + const selectedPreset = document.querySelector('input[name="preset"]:checked').value; + const customSliders = document.getElementById('customSliders'); + + updateCardStyles(); + + if (selectedPreset === 'custom') { + customSliders.style.display = 'block'; + } else { + customSliders.style.display = 'none'; + + // Set preset values + if (selectedPreset === 'standard') { + document.getElementById('cpus').value = 1; + document.getElementById('memory').value = 0; // 0.5GB + document.getElementById('disk').value = 10; + document.getElementById('backups').checked = false; + } else if (selectedPreset === 'premium') { + document.getElementById('cpus').value = 1; + document.getElementById('memory').value = 1; // 1GB + document.getElementById('disk').value = 50; + document.getElementById('backups').checked = true; + } + + // Update displayed values + updateValue('cpus'); + updateValue('memory'); + updateValue('disk'); + } + + calculateCost(); + } + function calculateCost() { + const selectedPreset = document.querySelector('input[name="preset"]:checked').value; + + // For presets, use fixed pricing + if (selectedPreset === 'standard') { + document.getElementById('monthlyCost').textContent = '6.00'; + return; + } else if (selectedPreset === 'premium') { + document.getElementById('monthlyCost').textContent = '10.00'; + return; + } + + // Custom calculation const cpus = parseFloat(document.getElementById('cpus').value); - const memory = parseFloat(document.getElementById('memory').value); + const memoryIndex = parseInt(document.getElementById('memory').value); + const memory = memoryValues[memoryIndex]; const disk = parseFloat(document.getElementById('disk').value); let monthlyCost = (cpus * cpuRate) + (memory * memoryRate) + (disk * diskRate); @@ -185,13 +326,16 @@ } // Collect form data + const selectedPreset = document.querySelector('input[name="preset"]:checked').value; const cpus = document.getElementById('cpus').value; - const memory = document.getElementById('memory').value; + const memoryIndex = parseInt(document.getElementById('memory').value); + const memory = memoryValues[memoryIndex]; const disk = document.getElementById('disk').value; const backups = document.getElementById('backups').checked ? 'Yes' : 'No'; const message = document.getElementById('message').value; const enquiryData = { email: email, + preset: selectedPreset, cpus: cpus, memory: memory, disk: disk, @@ -222,9 +366,6 @@ document.getElementById('enquiryStatus').style.color = 'red'; }); } - - // Initialize on load - calculateCost();