.seo-calc-wrapper {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 24px;
max-width: 500px;
margin: 20px auto;
color: #374151;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.seo-calc-header {
font-size: 20px;
font-weight: 700;
margin-bottom: 16px;
color: #111827;
text-align: center;
}
.seo-calc-field {
margin-bottom: 15px;
}
.seo-calc-label {
display: block;
font-size: 14px;
font-weight: 600;
margin-bottom: 5px;
}
.seo-calc-input {
width: 100%;
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
}
.seo-calc-btn {
width: 100%;
background-color: #2563eb;
color: white;
padding: 12px;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;
}
.seo-calc-btn:hover {
background-color: #1d4ed8;
}
.seo-calc-result {
margin-top: 20px;
padding: 15px;
background-color: #eff6ff;
border-radius: 5px;
display: none;
text-align: center;
}
.seo-calc-val {
font-size: 24px;
font-weight: 800;
color: #2563eb;
display: block;
}
Estimated Monthly Revenue Growth:
$0.00
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "SEO ROI Calculator",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Any",
"offers": {
"@type": "Offer",
"price": "0"
}
}
function calculateSeoRoi() {
var traffic = parseFloat(document.getElementById('traffic_vol').value);
var conv = parseFloat(document.getElementById('conv_rate').value) / 100;
var val = parseFloat(document.getElementById('order_val').value);
var resultBox = document.getElementById('seo_result_box');
var displayVal = document.getElementById('seo_rev_val');
if (isNaN(traffic) || isNaN(conv) || isNaN(val)) {
alert('Please enter valid numbers');
return;
}
var total = traffic * conv * val;
displayVal.innerHTML = '$' + total.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
resultBox.style.display = 'block';
}