|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SamPlanning Services - Fee Calculator</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"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
50: '#f0fdf4', |
|
|
100: '#dcfce7', |
|
|
200: '#bbf7d0', |
|
|
300: '#86efac', |
|
|
400: '#4ade80', |
|
|
500: '#22c55e', |
|
|
600: '#16a34a', |
|
|
700: '#15803d', |
|
|
800: '#166534', |
|
|
900: '#14532d', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, rgba(34,197,94,0.1) 0%, rgba(16,163,74,0.2) 100%); |
|
|
} |
|
|
.card-shadow { |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
.input-focus:focus { |
|
|
border-color: #16a34a; |
|
|
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.3); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-primary-50 min-h-screen font-sans"> |
|
|
<div class="gradient-bg py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
|
|
|
<div class="text-center mb-12"> |
|
|
<div class="flex justify-center items-center mb-4"> |
|
|
<i class="fas fa-drafting-compass text-4xl text-primary-600 mr-3"></i> |
|
|
<h1 class="text-4xl font-bold text-primary-800">SamPlanning Services</h1> |
|
|
</div> |
|
|
<h2 class="text-2xl font-semibold text-primary-700">Planning Application Fee Calculator</h2> |
|
|
<p class="mt-2 text-primary-600 max-w-2xl mx-auto"> |
|
|
Estimate your planning application fee quickly and easily based on UK fee schedules |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl card-shadow overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
|
|
|
<div class="p-8 md:w-2/3"> |
|
|
<h3 class="text-xl font-semibold text-primary-800 mb-6">Project Details</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-primary-700 mb-1">Application Type</label> |
|
|
<select id="applicationType" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition"> |
|
|
<option value="householder">Householder Application</option> |
|
|
<option value="full">Full Planning Permission</option> |
|
|
<option value="outline">Outline Planning Permission</option> |
|
|
<option value="reserved">Reserved Matters</option> |
|
|
<option value="change">Change of Use</option> |
|
|
<option value="listed">Listed Building Consent</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-primary-700 mb-1">Floor Area (m²)</label> |
|
|
<div class="relative"> |
|
|
<input type="number" id="floorArea" class="w-full px-4 py-2 rounded-lg border border-gray-300 input-focus transition" placeholder="Enter floor area"> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
|
|
<span class="text-gray-500">m²</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="dwellingsField" class="hidden"> |
|
|
<label class="block text-sm font-medium text-primary-700 mb-1">Number of Dwellings</label> |
|
|
<input type="number" id="dwellings" class="w-full px-4 py-2 rounded-lg border border-gray-300 input-focus transition" placeholder="Enter number" min="1"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="siteAreaField" class="hidden"> |
|
|
<label class="block text-sm font-medium text-primary-700 mb-1">Site Area (hectares)</label> |
|
|
<div class="relative"> |
|
|
<input type="number" id="siteArea" class="w-full px-4 py-2 rounded-lg border border-gray-300 input-focus transition" placeholder="Enter site area"> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
|
|
<span class="text-gray-500">ha</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="listedBuildingField" class="hidden"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="listedBuilding" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"> |
|
|
<label for="listedBuilding" class="ml-2 block text-sm text-primary-700">Listed Building involved</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="pt-2"> |
|
|
<button id="calculateBtn" class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-calculator mr-2"></i> Calculate Fee |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-primary-50 p-8 md:w-1/3 flex flex-col"> |
|
|
<h3 class="text-xl font-semibold text-primary-800 mb-6">Estimated Fee</h3> |
|
|
|
|
|
<div id="resultContainer" class="flex-grow flex flex-col justify-center items-center text-center"> |
|
|
<div class="text-primary-500 mb-4"> |
|
|
<i class="fas fa-home text-5xl opacity-50"></i> |
|
|
</div> |
|
|
<p class="text-primary-600">Enter your project details and click "Calculate Fee" to see your estimated planning application fee.</p> |
|
|
</div> |
|
|
|
|
|
<div id="feeResult" class="hidden"> |
|
|
<div class="bg-white rounded-lg p-6 mb-4 text-center border border-primary-200"> |
|
|
<div class="text-sm text-primary-600 mb-1">Estimated Fee</div> |
|
|
<div class="text-3xl font-bold text-primary-700" id="calculatedFee">£0</div> |
|
|
<div class="text-xs text-primary-500 mt-2" id="feeDescription">Based on standard rates</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-xs text-primary-600"> |
|
|
<p class="mb-2">This is an estimate based on current UK planning fee schedules.</p> |
|
|
<p>For a precise quote, please contact our team.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12 bg-white rounded-xl card-shadow p-8"> |
|
|
<h3 class="text-xl font-semibold text-primary-800 mb-4">Planning Fee Information</h3> |
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<h4 class="font-medium text-primary-700 mb-2 flex items-center"> |
|
|
<i class="fas fa-info-circle text-primary-500 mr-2"></i> Standard Fees |
|
|
</h4> |
|
|
<ul class="text-sm text-primary-600 space-y-2"> |
|
|
<li>• Householder application: £462</li> |
|
|
<li>• Full application (up to 50m²): £462</li> |
|
|
<li>• Outline application: £462 per 0.1ha</li> |
|
|
<li>• Change of use: £462</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-primary-700 mb-2 flex items-center"> |
|
|
<i class="fas fa-exclamation-triangle text-primary-500 mr-2"></i> Additional Fees |
|
|
</h4> |
|
|
<ul class="text-sm text-primary-600 space-y-2"> |
|
|
<li>• Listed Building Consent: Additional £462</li> |
|
|
<li>• Large developments: Fees increase with size</li> |
|
|
<li>• Commercial developments: Higher fee brackets</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 pt-6 border-t border-primary-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-primary-100 p-3 rounded-full"> |
|
|
<i class="fas fa-phone-alt text-primary-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-sm font-medium text-primary-700">Need more help?</h4> |
|
|
<p class="text-sm text-primary-600">Contact our planning experts for advice on your specific project.</p> |
|
|
<button class="mt-2 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700"> |
|
|
<i class="fas fa-envelope mr-2"></i> Contact Us |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const applicationType = document.getElementById('applicationType'); |
|
|
const floorArea = document.getElementById('floorArea'); |
|
|
const dwellings = document.getElementById('dwellings'); |
|
|
const siteArea = document.getElementById('siteArea'); |
|
|
const listedBuilding = document.getElementById('listedBuilding'); |
|
|
const calculateBtn = document.getElementById('calculateBtn'); |
|
|
const resultContainer = document.getElementById('resultContainer'); |
|
|
const feeResult = document.getElementById('feeResult'); |
|
|
const calculatedFee = document.getElementById('calculatedFee'); |
|
|
const feeDescription = document.getElementById('feeDescription'); |
|
|
|
|
|
const dwellingsField = document.getElementById('dwellingsField'); |
|
|
const siteAreaField = document.getElementById('siteAreaField'); |
|
|
const listedBuildingField = document.getElementById('listedBuildingField'); |
|
|
|
|
|
|
|
|
applicationType.addEventListener('change', function() { |
|
|
const type = this.value; |
|
|
|
|
|
|
|
|
dwellingsField.classList.add('hidden'); |
|
|
siteAreaField.classList.add('hidden'); |
|
|
listedBuildingField.classList.add('hidden'); |
|
|
|
|
|
|
|
|
if (type === 'full' || type === 'outline') { |
|
|
dwellingsField.classList.remove('hidden'); |
|
|
siteAreaField.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
if (type === 'listed') { |
|
|
listedBuildingField.classList.remove('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
calculateBtn.addEventListener('click', function() { |
|
|
const type = applicationType.value; |
|
|
const area = parseFloat(floorArea.value) || 0; |
|
|
const dwellingCount = parseInt(dwellings.value) || 1; |
|
|
const siteAreaValue = parseFloat(siteArea.value) || 0; |
|
|
const isListed = listedBuilding.checked; |
|
|
|
|
|
let fee = 0; |
|
|
let description = "Based on standard rates"; |
|
|
|
|
|
|
|
|
switch(type) { |
|
|
case 'householder': |
|
|
fee = 462; |
|
|
description = "Householder application"; |
|
|
break; |
|
|
case 'full': |
|
|
if (area <= 50) { |
|
|
fee = 462; |
|
|
description = "Full application (up to 50m²)"; |
|
|
} else if (area <= 100) { |
|
|
fee = 462 * 1.5; |
|
|
description = "Full application (50-100m²)"; |
|
|
} else { |
|
|
fee = 462 * 2; |
|
|
description = "Full application (over 100m²)"; |
|
|
} |
|
|
|
|
|
if (dwellingCount > 1) { |
|
|
fee = dwellingCount * 462; |
|
|
description = `Full application (${dwellingCount} dwellings)`; |
|
|
} |
|
|
break; |
|
|
case 'outline': |
|
|
fee = Math.ceil(siteAreaValue * 10) * 462; |
|
|
description = `Outline application (${siteAreaValue}ha site)`; |
|
|
break; |
|
|
case 'reserved': |
|
|
fee = 462; |
|
|
description = "Reserved matters application"; |
|
|
break; |
|
|
case 'change': |
|
|
fee = 462; |
|
|
description = "Change of use application"; |
|
|
break; |
|
|
case 'listed': |
|
|
fee = isListed ? 462 : 0; |
|
|
description = isListed ? "Listed Building Consent" : "No additional consent needed"; |
|
|
break; |
|
|
} |
|
|
|
|
|
|
|
|
calculatedFee.textContent = `£${fee.toLocaleString()}`; |
|
|
feeDescription.textContent = description; |
|
|
|
|
|
resultContainer.classList.add('hidden'); |
|
|
feeResult.classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
</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=Samik1994/samplanning-fee-calculator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
