Hugging Face's logo

Spaces:
Samik1994
/
samplanning-fee-calculator
Running

App Files Community
Samik1994 commited on
Commit
5727e23
·
verified ·
1 Parent(s): 1ee9f25

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +296 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Samplanning Fee Calculator
3
- emoji: ⚡
4
- colorFrom: indigo
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: samplanning-fee-calculator
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,296 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SamPlanning Services - Fee Calculator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: {
15
+ 50: '#f0fdf4',
16
+ 100: '#dcfce7',
17
+ 200: '#bbf7d0',
18
+ 300: '#86efac',
19
+ 400: '#4ade80',
20
+ 500: '#22c55e',
21
+ 600: '#16a34a',
22
+ 700: '#15803d',
23
+ 800: '#166534',
24
+ 900: '#14532d',
25
+ }
26
+ }
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+ <style>
32
+ .gradient-bg {
33
+ background: linear-gradient(135deg, rgba(34,197,94,0.1) 0%, rgba(16,163,74,0.2) 100%);
34
+ }
35
+ .card-shadow {
36
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
37
+ }
38
+ .input-focus:focus {
39
+ border-color: #16a34a;
40
+ box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.3);
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-primary-50 min-h-screen font-sans">
45
+ <div class="gradient-bg py-12 px-4 sm:px-6 lg:px-8">
46
+ <div class="max-w-4xl mx-auto">
47
+ <!-- Header -->
48
+ <div class="text-center mb-12">
49
+ <div class="flex justify-center items-center mb-4">
50
+ <i class="fas fa-drafting-compass text-4xl text-primary-600 mr-3"></i>
51
+ <h1 class="text-4xl font-bold text-primary-800">SamPlanning Services</h1>
52
+ </div>
53
+ <h2 class="text-2xl font-semibold text-primary-700">Planning Application Fee Calculator</h2>
54
+ <p class="mt-2 text-primary-600 max-w-2xl mx-auto">
55
+ Estimate your planning application fee quickly and easily based on UK fee schedules
56
+ </p>
57
+ </div>
58
+
59
+ <!-- Calculator Card -->
60
+ <div class="bg-white rounded-xl card-shadow overflow-hidden">
61
+ <div class="md:flex">
62
+ <!-- Input Section -->
63
+ <div class="p-8 md:w-2/3">
64
+ <h3 class="text-xl font-semibold text-primary-800 mb-6">Project Details</h3>
65
+
66
+ <div class="space-y-6">
67
+ <!-- Application Type -->
68
+ <div>
69
+ <label class="block text-sm font-medium text-primary-700 mb-1">Application Type</label>
70
+ <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">
71
+ <option value="householder">Householder Application</option>
72
+ <option value="full">Full Planning Permission</option>
73
+ <option value="outline">Outline Planning Permission</option>
74
+ <option value="reserved">Reserved Matters</option>
75
+ <option value="change">Change of Use</option>
76
+ <option value="listed">Listed Building Consent</option>
77
+ </select>
78
+ </div>
79
+
80
+ <!-- Floor Area -->
81
+ <div>
82
+ <label class="block text-sm font-medium text-primary-700 mb-1">Floor Area (m²)</label>
83
+ <div class="relative">
84
+ <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">
85
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
86
+ <span class="text-gray-500">m²</span>
87
+ </div>
88
+ </div>
89
+ </div>
90
+
91
+ <!-- Number of Dwellings -->
92
+ <div id="dwellingsField" class="hidden">
93
+ <label class="block text-sm font-medium text-primary-700 mb-1">Number of Dwellings</label>
94
+ <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">
95
+ </div>
96
+
97
+ <!-- Site Area -->
98
+ <div id="siteAreaField" class="hidden">
99
+ <label class="block text-sm font-medium text-primary-700 mb-1">Site Area (hectares)</label>
100
+ <div class="relative">
101
+ <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">
102
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
103
+ <span class="text-gray-500">ha</span>
104
+ </div>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- Listed Building Checkbox -->
109
+ <div id="listedBuildingField" class="hidden">
110
+ <div class="flex items-center">
111
+ <input type="checkbox" id="listedBuilding" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
112
+ <label for="listedBuilding" class="ml-2 block text-sm text-primary-700">Listed Building involved</label>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Calculate Button -->
117
+ <div class="pt-2">
118
+ <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">
119
+ <i class="fas fa-calculator mr-2"></i> Calculate Fee
120
+ </button>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Results Section -->
126
+ <div class="bg-primary-50 p-8 md:w-1/3 flex flex-col">
127
+ <h3 class="text-xl font-semibold text-primary-800 mb-6">Estimated Fee</h3>
128
+
129
+ <div id="resultContainer" class="flex-grow flex flex-col justify-center items-center text-center">
130
+ <div class="text-primary-500 mb-4">
131
+ <i class="fas fa-home text-5xl opacity-50"></i>
132
+ </div>
133
+ <p class="text-primary-600">Enter your project details and click "Calculate Fee" to see your estimated planning application fee.</p>
134
+ </div>
135
+
136
+ <div id="feeResult" class="hidden">
137
+ <div class="bg-white rounded-lg p-6 mb-4 text-center border border-primary-200">
138
+ <div class="text-sm text-primary-600 mb-1">Estimated Fee</div>
139
+ <div class="text-3xl font-bold text-primary-700" id="calculatedFee">£0</div>
140
+ <div class="text-xs text-primary-500 mt-2" id="feeDescription">Based on standard rates</div>
141
+ </div>
142
+
143
+ <div class="text-xs text-primary-600">
144
+ <p class="mb-2">This is an estimate based on current UK planning fee schedules.</p>
145
+ <p>For a precise quote, please contact our team.</p>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Information Section -->
153
+ <div class="mt-12 bg-white rounded-xl card-shadow p-8">
154
+ <h3 class="text-xl font-semibold text-primary-800 mb-4">Planning Fee Information</h3>
155
+ <div class="grid md:grid-cols-2 gap-6">
156
+ <div>
157
+ <h4 class="font-medium text-primary-700 mb-2 flex items-center">
158
+ <i class="fas fa-info-circle text-primary-500 mr-2"></i> Standard Fees
159
+ </h4>
160
+ <ul class="text-sm text-primary-600 space-y-2">
161
+ <li>• Householder application: £462</li>
162
+ <li>• Full application (up to 50m²): £462</li>
163
+ <li>• Outline application: £462 per 0.1ha</li>
164
+ <li>• Change of use: £462</li>
165
+ </ul>
166
+ </div>
167
+ <div>
168
+ <h4 class="font-medium text-primary-700 mb-2 flex items-center">
169
+ <i class="fas fa-exclamation-triangle text-primary-500 mr-2"></i> Additional Fees
170
+ </h4>
171
+ <ul class="text-sm text-primary-600 space-y-2">
172
+ <li>• Listed Building Consent: Additional £462</li>
173
+ <li>• Large developments: Fees increase with size</li>
174
+ <li>• Commercial developments: Higher fee brackets</li>
175
+ </ul>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="mt-6 pt-6 border-t border-primary-100">
180
+ <div class="flex items-center">
181
+ <div class="flex-shrink-0 bg-primary-100 p-3 rounded-full">
182
+ <i class="fas fa-phone-alt text-primary-600"></i>
183
+ </div>
184
+ <div class="ml-4">
185
+ <h4 class="text-sm font-medium text-primary-700">Need more help?</h4>
186
+ <p class="text-sm text-primary-600">Contact our planning experts for advice on your specific project.</p>
187
+ <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">
188
+ <i class="fas fa-envelope mr-2"></i> Contact Us
189
+ </button>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <script>
198
+ document.addEventListener('DOMContentLoaded', function() {
199
+ const applicationType = document.getElementById('applicationType');
200
+ const floorArea = document.getElementById('floorArea');
201
+ const dwellings = document.getElementById('dwellings');
202
+ const siteArea = document.getElementById('siteArea');
203
+ const listedBuilding = document.getElementById('listedBuilding');
204
+ const calculateBtn = document.getElementById('calculateBtn');
205
+ const resultContainer = document.getElementById('resultContainer');
206
+ const feeResult = document.getElementById('feeResult');
207
+ const calculatedFee = document.getElementById('calculatedFee');
208
+ const feeDescription = document.getElementById('feeDescription');
209
+
210
+ const dwellingsField = document.getElementById('dwellingsField');
211
+ const siteAreaField = document.getElementById('siteAreaField');
212
+ const listedBuildingField = document.getElementById('listedBuildingField');
213
+
214
+ // Show/hide relevant fields based on application type
215
+ applicationType.addEventListener('change', function() {
216
+ const type = this.value;
217
+
218
+ // Reset all optional fields
219
+ dwellingsField.classList.add('hidden');
220
+ siteAreaField.classList.add('hidden');
221
+ listedBuildingField.classList.add('hidden');
222
+
223
+ // Show relevant fields
224
+ if (type === 'full' || type === 'outline') {
225
+ dwellingsField.classList.remove('hidden');
226
+ siteAreaField.classList.remove('hidden');
227
+ }
228
+
229
+ if (type === 'listed') {
230
+ listedBuildingField.classList.remove('hidden');
231
+ }
232
+ });
233
+
234
+ // Calculate fee when button clicked
235
+ calculateBtn.addEventListener('click', function() {
236
+ const type = applicationType.value;
237
+ const area = parseFloat(floorArea.value) || 0;
238
+ const dwellingCount = parseInt(dwellings.value) || 1;
239
+ const siteAreaValue = parseFloat(siteArea.value) || 0;
240
+ const isListed = listedBuilding.checked;
241
+
242
+ let fee = 0;
243
+ let description = "Based on standard rates";
244
+
245
+ // Calculate fee based on application type
246
+ switch(type) {
247
+ case 'householder':
248
+ fee = 462;
249
+ description = "Householder application";
250
+ break;
251
+ case 'full':
252
+ if (area <= 50) {
253
+ fee = 462;
254
+ description = "Full application (up to 50m²)";
255
+ } else if (area <= 100) {
256
+ fee = 462 * 1.5;
257
+ description = "Full application (50-100m²)";
258
+ } else {
259
+ fee = 462 * 2;
260
+ description = "Full application (over 100m²)";
261
+ }
262
+
263
+ if (dwellingCount > 1) {
264
+ fee = dwellingCount * 462;
265
+ description = `Full application (${dwellingCount} dwellings)`;
266
+ }
267
+ break;
268
+ case 'outline':
269
+ fee = Math.ceil(siteAreaValue * 10) * 462;
270
+ description = `Outline application (${siteAreaValue}ha site)`;
271
+ break;
272
+ case 'reserved':
273
+ fee = 462;
274
+ description = "Reserved matters application";
275
+ break;
276
+ case 'change':
277
+ fee = 462;
278
+ description = "Change of use application";
279
+ break;
280
+ case 'listed':
281
+ fee = isListed ? 462 : 0;
282
+ description = isListed ? "Listed Building Consent" : "No additional consent needed";
283
+ break;
284
+ }
285
+
286
+ // Show results
287
+ calculatedFee.textContent = `£${fee.toLocaleString()}`;
288
+ feeDescription.textContent = description;
289
+
290
+ resultContainer.classList.add('hidden');
291
+ feeResult.classList.remove('hidden');
292
+ });
293
+ });
294
+ </script>
295
+ <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>
296
+ </html>
prompts.txt ADDED
File without changes