|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SEO Cost Calculator | Estimate Your Investment</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
} |
|
|
.range-slider::-webkit-slider-thumb { |
|
|
-webkit-appearance: none; |
|
|
appearance: none; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background: #4f46e5; |
|
|
cursor: pointer; |
|
|
} |
|
|
.range-slider::-moz-range-thumb { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background: #4f46e5; |
|
|
cursor: pointer; |
|
|
} |
|
|
.tooltip { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
.tooltip .tooltip-text { |
|
|
visibility: hidden; |
|
|
width: 200px; |
|
|
background-color: #333; |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 5px; |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
.tooltip:hover .tooltip-text { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
.result-card { |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.result-card:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="gradient-bg text-white py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h1 class="text-4xl font-bold mb-4">SEO Cost Calculator</h1> |
|
|
<p class="text-xl opacity-90">Estimate your investment for professional SEO services tailored to your business needs</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="p-6 sm:p-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div> |
|
|
<div class="mb-8"> |
|
|
<label for="businessSize" class="block text-lg font-medium text-gray-700 mb-2"> |
|
|
Business Size |
|
|
<span class="tooltip ml-1"> |
|
|
<i class="fas fa-info-circle text-indigo-500"></i> |
|
|
<span class="tooltip-text">Select the size that best represents your company</span> |
|
|
</span> |
|
|
</label> |
|
|
<select id="businessSize" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"> |
|
|
<option value="small">Small Business (1-10 employees)</option> |
|
|
<option value="medium" selected>Medium Business (11-50 employees)</option> |
|
|
<option value="large">Large Business (50+ employees)</option> |
|
|
<option value="enterprise">Enterprise (500+ employees)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<label for="industry" class="block text-lg font-medium text-gray-700 mb-2"> |
|
|
Industry |
|
|
<span class="tooltip ml-1"> |
|
|
<i class="fas fa-info-circle text-indigo-500"></i> |
|
|
<span class="tooltip-text">Your industry affects competition level and SEO complexity</span> |
|
|
</span> |
|
|
</label> |
|
|
<select id="industry" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"> |
|
|
<option value="ecommerce">E-commerce</option> |
|
|
<option value="saas" selected>SaaS/Tech</option> |
|
|
<option value="healthcare">Healthcare</option> |
|
|
<option value="legal">Legal Services</option> |
|
|
<option value="realestate">Real Estate</option> |
|
|
<option value="education">Education</option> |
|
|
<option value="hospitality">Hospitality</option> |
|
|
<option value="other">Other</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<label for="competition" class="block text-lg font-medium text-gray-700 mb-2"> |
|
|
Competition Level |
|
|
<span class="tooltip ml-1"> |
|
|
<i class="fas fa-info-circle text-indigo-500"></i> |
|
|
<span class="tooltip-text">How competitive is your market online?</span> |
|
|
</span> |
|
|
</label> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<span class="text-sm text-gray-500">Low</span> |
|
|
<span class="text-sm text-gray-500">Medium</span> |
|
|
<span class="text-sm text-gray-500">High</span> |
|
|
<span class="text-sm text-gray-500">Very High</span> |
|
|
</div> |
|
|
<input type="range" id="competition" min="1" max="4" value="2" class="w-full range-slider h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="mb-8"> |
|
|
<label for="services" class="block text-lg font-medium text-gray-700 mb-2"> |
|
|
Services Needed |
|
|
<span class="tooltip ml-1"> |
|
|
<i class="fas fa-info-circle text-indigo-500"></i> |
|
|
<span class="tooltip-text">Select all SEO services you're interested in</span> |
|
|
</span> |
|
|
</label> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="onpage" class="h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500" checked> |
|
|
<label for="onpage" class="ml-2 text-gray-700">On-Page SEO</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="technical" class="h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500"> |
|
|
<label for="technical" class="ml-2 text-gray-700">Technical SEO</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="content" class="h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500" checked> |
|
|
<label for="content" class="ml-2 text-gray-700">Content Strategy</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="linkbuilding" class="h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500"> |
|
|
<label for="linkbuilding" class="ml-2 text-gray-700">Link Building</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="local" class="h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500"> |
|
|
<label for="local" class="ml-2 text-gray-700">Local SEO</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<label for="timeframe" class="block text-lg font-medium text-gray-700 mb-2"> |
|
|
Timeframe |
|
|
<span class="tooltip ml-1"> |
|
|
<i class="fas fa-info-circle text-indigo-500"></i> |
|
|
<span class="tooltip-text">How quickly do you want to see results?</span> |
|
|
</span> |
|
|
</label> |
|
|
<select id="timeframe" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"> |
|
|
<option value="6">6 months (standard)</option> |
|
|
<option value="3">3 months (accelerated)</option> |
|
|
<option value="12">12 months (comprehensive)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<label for="websiteAge" class="block text-lg font-medium text-gray-700 mb-2"> |
|
|
Website Age |
|
|
<span class="tooltip ml-1"> |
|
|
<i class="fas fa-info-circle text-indigo-500"></i> |
|
|
<span class="tooltip-text">How long has your website been active?</span> |
|
|
</span> |
|
|
</label> |
|
|
<select id="websiteAge" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"> |
|
|
<option value="new">New (0-6 months)</option> |
|
|
<option value="1year" selected>1-2 years</option> |
|
|
<option value="3year">3-5 years</option> |
|
|
<option value="5year">5+ years</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 text-center"> |
|
|
<button id="calculateBtn" class="gradient-bg text-white px-8 py-4 rounded-lg font-bold text-lg hover:opacity-90 transition duration-300 transform hover:scale-105 shadow-lg"> |
|
|
Calculate SEO Cost |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="results" class="hidden mt-12"> |
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Your SEO Investment Estimate</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="result-card bg-white p-6 rounded-xl border border-gray-100"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-700">Monthly Cost</h3> |
|
|
<div class="bg-indigo-100 p-2 rounded-full"> |
|
|
<i class="fas fa-calendar-alt text-indigo-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-3xl font-bold text-indigo-600 mb-2" id="monthlyCost">$0</div> |
|
|
<p class="text-gray-500">Recurring monthly investment for ongoing SEO services</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="result-card bg-white p-6 rounded-xl border border-gray-100"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-700">Initial Setup</h3> |
|
|
<div class="bg-green-100 p-2 rounded-full"> |
|
|
<i class="fas fa-tools text-green-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-3xl font-bold text-green-600 mb-2" id="initialCost">$0</div> |
|
|
<p class="text-gray-500">One-time cost for initial audit, strategy, and implementation</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="result-card bg-white p-6 rounded-xl border border-gray-100"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-700">Total <span id="timeframeLabel">6-Month</span> Investment</h3> |
|
|
<div class="bg-purple-100 p-2 rounded-full"> |
|
|
<i class="fas fa-chart-line text-purple-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-3xl font-bold text-purple-600 mb-2" id="totalCost">$0</div> |
|
|
<p class="text-gray-500">Comprehensive investment for sustainable growth</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 bg-blue-50 p-6 rounded-xl"> |
|
|
<h3 class="text-lg font-semibold text-blue-800 mb-3">Recommended Strategy</h3> |
|
|
<p class="text-gray-700 mb-4" id="strategyText">Based on your selections, we recommend a balanced approach focusing on...</p> |
|
|
<div class="flex flex-wrap gap-2" id="recommendedServices"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 text-center"> |
|
|
<button class="gradient-bg text-white px-8 py-3 rounded-lg font-bold hover:opacity-90 transition duration-300"> |
|
|
Get Your Custom Proposal <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const calculateBtn = document.getElementById('calculateBtn'); |
|
|
const resultsSection = document.getElementById('results'); |
|
|
|
|
|
calculateBtn.addEventListener('click', calculateSEOCost); |
|
|
|
|
|
function calculateSEOCost() { |
|
|
|
|
|
const businessSize = document.getElementById('businessSize').value; |
|
|
const industry = document.getElementById('industry').value; |
|
|
const competition = parseInt(document.getElementById('competition').value); |
|
|
const timeframe = parseInt(document.getElementById('timeframe').value); |
|
|
const websiteAge = document.getElementById('websiteAge').value; |
|
|
|
|
|
|
|
|
const services = { |
|
|
onpage: document.getElementById('onpage').checked, |
|
|
technical: document.getElementById('technical').checked, |
|
|
content: document.getElementById('content').checked, |
|
|
linkbuilding: document.getElementById('linkbuilding').checked, |
|
|
local: document.getElementById('local').checked |
|
|
}; |
|
|
|
|
|
|
|
|
let baseMonthly = 0; |
|
|
let baseInitial = 0; |
|
|
|
|
|
switch(businessSize) { |
|
|
case 'small': |
|
|
baseMonthly = 500; |
|
|
baseInitial = 1000; |
|
|
break; |
|
|
case 'medium': |
|
|
baseMonthly = 1000; |
|
|
baseInitial = 2000; |
|
|
break; |
|
|
case 'large': |
|
|
baseMonthly = 2500; |
|
|
baseInitial = 5000; |
|
|
break; |
|
|
case 'enterprise': |
|
|
baseMonthly = 5000; |
|
|
baseInitial = 10000; |
|
|
break; |
|
|
} |
|
|
|
|
|
|
|
|
const competitionMultiplier = 1 + (competition * 0.15); |
|
|
baseMonthly *= competitionMultiplier; |
|
|
baseInitial *= competitionMultiplier; |
|
|
|
|
|
|
|
|
if (timeframe === 3) { |
|
|
baseMonthly *= 1.5; |
|
|
} else if (timeframe === 12) { |
|
|
baseMonthly *= 0.9; |
|
|
} |
|
|
|
|
|
|
|
|
if (websiteAge === 'new') { |
|
|
baseInitial *= 1.3; |
|
|
} else if (websiteAge === '5year') { |
|
|
baseInitial *= 0.9; |
|
|
} |
|
|
|
|
|
|
|
|
let serviceAddons = 0; |
|
|
let recommendedServices = []; |
|
|
|
|
|
if (services.onpage) { |
|
|
serviceAddons += baseMonthly * 0.2; |
|
|
recommendedServices.push('On-Page Optimization'); |
|
|
} |
|
|
if (services.technical) { |
|
|
serviceAddons += baseMonthly * 0.3; |
|
|
recommendedServices.push('Technical SEO'); |
|
|
} |
|
|
if (services.content) { |
|
|
serviceAddons += baseMonthly * 0.4; |
|
|
recommendedServices.push('Content Strategy'); |
|
|
} |
|
|
if (services.linkbuilding) { |
|
|
serviceAddons += baseMonthly * 0.5; |
|
|
recommendedServices.push('Link Building'); |
|
|
} |
|
|
if (services.local) { |
|
|
serviceAddons += baseMonthly * 0.25; |
|
|
recommendedServices.push('Local SEO'); |
|
|
} |
|
|
|
|
|
|
|
|
if (recommendedServices.length === 0) { |
|
|
recommendedServices.push('On-Page Optimization'); |
|
|
serviceAddons += baseMonthly * 0.2; |
|
|
} |
|
|
|
|
|
|
|
|
const monthlyCost = Math.round(baseMonthly + serviceAddons); |
|
|
const initialCost = Math.round(baseInitial); |
|
|
const totalCost = Math.round(initialCost + (monthlyCost * timeframe)); |
|
|
|
|
|
|
|
|
document.getElementById('monthlyCost').textContent = '$' + monthlyCost.toLocaleString(); |
|
|
document.getElementById('initialCost').textContent = '$' + initialCost.toLocaleString(); |
|
|
document.getElementById('totalCost').textContent = '$' + totalCost.toLocaleString(); |
|
|
document.getElementById('timeframeLabel').textContent = timeframe + '-Month'; |
|
|
|
|
|
|
|
|
let strategyText = 'Based on your selections, we recommend '; |
|
|
|
|
|
if (recommendedServices.length === 1) { |
|
|
strategyText += `a focused approach on ${recommendedServices[0]}.`; |
|
|
} else { |
|
|
strategyText += `a comprehensive strategy including ${recommendedServices.slice(0, -1).join(', ')}`; |
|
|
if (recommendedServices.length > 1) { |
|
|
strategyText += ` and ${recommendedServices[recommendedServices.length - 1]}.`; |
|
|
} |
|
|
} |
|
|
|
|
|
strategyText += ` This ${timeframe}-month plan will establish a strong foundation for sustainable organic growth.`; |
|
|
|
|
|
document.getElementById('strategyText').textContent = strategyText; |
|
|
|
|
|
|
|
|
const servicesContainer = document.getElementById('recommendedServices'); |
|
|
servicesContainer.innerHTML = ''; |
|
|
|
|
|
recommendedServices.forEach(service => { |
|
|
const chip = document.createElement('span'); |
|
|
chip.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800'; |
|
|
chip.textContent = service; |
|
|
servicesContainer.appendChild(chip); |
|
|
}); |
|
|
|
|
|
|
|
|
resultsSection.classList.remove('hidden'); |
|
|
resultsSection.scrollIntoView({ behavior: 'smooth' }); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=harithapliyal/seo-cost-calculator" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
|
</html> |
