Hugging Face's logo

Spaces:
Gazmo08
/
roofing-calculator
Running

App Files Community
Gazmo08 commited on
Commit
c00677a
·
verified ·
1 Parent(s): c2e98ea

would like this section to have this image https://storage.googleapis.com/msgsndr/IBXNtzbdJSoACGanMO32/media/680c3f4ff8c18894ceb7cc00.svg make sure the if fills the complete space - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +641 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Roofing Calculator
3
- emoji: ⚡
4
- colorFrom: yellow
5
- colorTo: green
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: roofing-calculator
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: red
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,641 @@
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>KiwiSeal Roofing Cost 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
+ kiwiBlue: '#142342',
15
+ }
16
+ }
17
+ }
18
+ }
19
+ </script>
20
+ <style>
21
+ .roof-type:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
24
+ }
25
+ .progress-bar {
26
+ height: 6px;
27
+ transition: width 0.5s ease;
28
+ }
29
+ .tooltip {
30
+ position: relative;
31
+ display: inline-block;
32
+ }
33
+ .tooltip .tooltiptext {
34
+ visibility: hidden;
35
+ width: 200px;
36
+ background-color: #142342;
37
+ color: white;
38
+ text-align: center;
39
+ border-radius: 6px;
40
+ padding: 5px;
41
+ position: absolute;
42
+ z-index: 1;
43
+ bottom: 125%;
44
+ left: 50%;
45
+ margin-left: -100px;
46
+ opacity: 0;
47
+ transition: opacity 0.3s;
48
+ }
49
+ .tooltip:hover .tooltiptext {
50
+ visibility: visible;
51
+ opacity: 1;
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="bg-gray-50 min-h-screen">
56
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
57
+ <!-- Header -->
58
+ <header class="text-center mb-8">
59
+ <div class="flex justify-center items-center mb-4">
60
+ <div class="w-16 h-16 rounded-full bg-kiwiBlue flex items-center justify-center text-white mr-4">
61
+ <i class="fas fa-home text-2xl"></i>
62
+ </div>
63
+ <h1 class="text-3xl font-bold text-kiwiBlue">Kiwiseal Roofing Cost Calculator</h1>
64
+ </div>
65
+ <p class="text-gray-600">Compare the estimated cost of applying Kiwiseal to re-roofing your property</p>
66
+ </header>
67
+
68
+ <!-- Progress Bar -->
69
+ <div class="mb-8">
70
+ <div class="flex justify-between mb-2">
71
+ <span class="text-sm font-medium text-kiwiBlue">Progress</span>
72
+ <span class="text-sm font-medium" id="progressText">0%</span>
73
+ </div>
74
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
75
+ <div class="bg-kiwiBlue progress-bar rounded-full" id="progressBar" style="width: 0%"></div>
76
+ </div>
77
+ </div>
78
+
79
+ <!-- Calculator Form -->
80
+ <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
81
+ <form id="roofCalculator">
82
+ <!-- Step 1: Roof Type -->
83
+ <div id="step1" class="step">
84
+ <h2 class="text-xl font-bold text-kiwiBlue mb-4 flex items-center">
85
+ <span class="w-8 h-8 bg-kiwiBlue text-white rounded-full flex items-center justify-center mr-3">1</span>
86
+ Identify Your Roof Surface Type
87
+ </h2>
88
+ <p class="text-gray-600 mb-6">Select the option that best describes your roof:</p>
89
+
90
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
91
+ <!-- Iron Roof Long Run -->
92
+ <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('IRON_ROOF_LONG_RUN')">
93
+ <div class="flex items-center mb-2">
94
+ <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3">
95
+ <i class="fas fa-grip-lines"></i>
96
+ </div>
97
+ <h3 class="font-semibold">IRON ROOF LONG RUN</h3>
98
+ </div>
99
+ <div class="h-32 bg-gray-100 rounded mb-2 flex items-center justify-center">
100
+ <img src="https://storage.googleapis.com/msgsndr/IBXNtzbdJSoACGanMO32/media/680c3f4ff8c18894ceb7cc00.svg" alt="Butynol Roof" class="h-full p-2">
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Tray Commercial Roofing -->
105
+ <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('TRAY_COMMERCIAL')">
106
+ <div class="flex items-center mb-2">
107
+ <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3">
108
+ <i class="fas fa-th"></i>
109
+ </div>
110
+ <h3 class="font-semibold">TRAY COMMERCIAL ROOFING</h3>
111
+ </div>
112
+ <div class="h-32 bg-gray-100 rounded mb-2 overflow-hidden">
113
+ <img src="https://storage.googleapis.com/msgsndr/IBXNtzbdJSoACGanMO32/media/680c3f4ff8c18894ceb7cc00.svg" alt="Butynol Roof" class="w-full h-full object-contain">
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Iron Roof Short Sheets -->
118
+ <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('IRON_ROOF_SHORT_SHEETS')">
119
+ <div class="flex items-center mb-2">
120
+ <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3">
121
+ <i class="fas fa-grip-lines-vertical"></i>
122
+ </div>
123
+ <h3 class="font-semibold">IRON ROOF SHORT SHEETS</h3>
124
+ </div>
125
+ <div class="h-32 bg-gray-100 rounded mb-2 flex items-center justify-center">
126
+ <i class="fas fa-image text-gray-300 text-4xl"></i>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Butynol -->
131
+ <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('BUTYNOL')">
132
+ <div class="flex items-center mb-2">
133
+ <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3">
134
+ <i class="fas fa-shield-alt"></i>
135
+ </div>
136
+ <h3 class="font-semibold">BUTYNOL</h3>
137
+ </div>
138
+ <div class="h-32 bg-gray-100 rounded mb-2 flex items-center justify-center">
139
+ <i class="fas fa-image text-gray-300 text-4xl"></i>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Concrete Tiles -->
144
+ <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('CONCRETE_TILES')">
145
+ <div class="flex items-center mb-2">
146
+ <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3">
147
+ <i class="fas fa-th-large"></i>
148
+ </div>
149
+ <h3 class="font-semibold">CONCRETE TILES</h3>
150
+ </div>
151
+ <div class="h-32 bg-gray-100 rounded mb-2 flex items-center justify-center">
152
+ <i class="fas fa-image text-gray-300 text-4xl"></i>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Decromastic Tiles -->
157
+ <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('DECROMASTIC_TILES')">
158
+ <div class="flex items-center mb-2">
159
+ <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3">
160
+ <i class="fas fa-border-style"></i>
161
+ </div>
162
+ <h3 class="font-semibold">DECROMASTIC TILES</h3>
163
+ </div>
164
+ <div class="h-32 bg-gray-100 rounded mb-2 flex items-center justify-center">
165
+ <i class="fas fa-image text-gray-300 text-4xl"></i>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Asbestos Roofing -->
170
+ <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('ASBESTOS')">
171
+ <div class="flex items-center mb-2">
172
+ <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3">
173
+ <i class="fas fa-exclamation-triangle"></i>
174
+ </div>
175
+ <h3 class="font-semibold">ASBESTOS ROOFING</h3>
176
+ </div>
177
+ <div class="h-32 bg-gray-100 rounded mb-2 flex items-center justify-center">
178
+ <i class="fas fa-image text-gray-300 text-4xl"></i>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Internal Gutters -->
183
+ <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('INTERNAL_GUTTERS')">
184
+ <div class="flex items-center mb-2">
185
+ <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3">
186
+ <i class="fas fa-water"></i>
187
+ </div>
188
+ <h3 class="font-semibold">INTERNAL GUTTERS</h3>
189
+ </div>
190
+ <div class="h-32 bg-gray-100 rounded mb-2 flex items-center justify-center">
191
+ <i class="fas fa-image text-gray-300 text-4xl"></i>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Asphalt Shingles -->
196
+ <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('ASPHALT_SHINGLES')">
197
+ <div class="flex items-center mb-2">
198
+ <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3">
199
+ <i class="fas fa-thumbtack"></i>
200
+ </div>
201
+ <h3 class="font-semibold">ASPHALT SHINGLES</h3>
202
+ </div>
203
+ <div class="h-32 bg-gray-100 rounded mb-2 flex items-center justify-center">
204
+ <i class="fas fa-image text-gray-300 text-4xl"></i>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <div class="hidden" id="selectedRoofType">
210
+ <div class="bg-kiwiBlue bg-opacity-10 p-3 rounded-lg flex items-center">
211
+ <i class="fas fa-check-circle text-kiwiBlue text-xl mr-3"></i>
212
+ <span class="font-medium" id="selectedRoofTypeText"></span>
213
+ </div>
214
+ </div>
215
+
216
+ <div class="flex justify-end mt-6">
217
+ <button type="button" onclick="nextStep('step1', 'step2')" class="bg-kiwiBlue text-white px-6 py-2 rounded-lg hover:bg-opacity-90 transition-all disabled:opacity-50" id="step1NextBtn" disabled>
218
+ Next <i class="fas fa-arrow-right ml-2"></i>
219
+ </button>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Step 2: Roof Area -->
224
+ <div id="step2" class="step hidden">
225
+ <h2 class="text-xl font-bold text-kiwiBlue mb-4 flex items-center">
226
+ <span class="w-8 h-8 bg-kiwiBlue text-white rounded-full flex items-center justify-center mr-3">2</span>
227
+ Enter Your Roof Surface Area
228
+ </h2>
229
+ <p class="text-gray-600 mb-6">Please provide the total surface area of your roof in square meters (m²):</p>
230
+ <p class="text-sm text-gray-500 mb-6">Tip: Be sure to account for your eaves (usually this is an extra 10%), or you can calculate the exact top-down size at <a href="https://earth.google.com/" target="_blank" class="text-kiwiBlue hover:underline">Google Earth</a>.</p>
231
+
232
+ <div class="mb-6 flex flex-col md:flex-row gap-6 items-start">
233
+ <div class="flex-1 max-w-md">
234
+ <label for="roofArea" class="block text-gray-700 mb-2">Roof Area (m²)</label>
235
+ <div class="relative">
236
+ <input type="number" id="roofArea" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-kiwiBlue focus:border-kiwiBlue" placeholder="e.g., 150" min="1">
237
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
238
+ <span class="text-gray-500">m²</span>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ <div class="flex-1 max-w-md">
243
+ <img src="https://d26tpo4cm8sb6k.cloudfront.net/img/typical-roof.png" alt="Typical Roof Diagram" class="w-full h-auto rounded-lg shadow-md">
244
+ </div>
245
+ </div>
246
+
247
+ <div class="flex justify-between mt-6">
248
+ <button type="button" onclick="prevStep('step2', 'step1')" class="text-kiwiBlue px-6 py-2 rounded-lg border border-kiwiBlue hover:bg-kiwiBlue hover:bg-opacity-10 transition-all">
249
+ <i class="fas fa-arrow-left mr-2"></i> Back
250
+ </button>
251
+ <button type="button" onclick="nextStep('step2', 'step3')" class="bg-kiwiBlue text-white px-6 py-2 rounded-lg hover:bg-opacity-90 transition-all disabled:opacity-50" id="step2NextBtn" disabled>
252
+ Next <i class="fas fa-arrow-right ml-2"></i>
253
+ </button>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Step 3: Roof Pitch -->
258
+ <div id="step3" class="step hidden">
259
+ <h2 class="text-xl font-bold text-kiwiBlue mb-4 flex items-center">
260
+ <span class="w-8 h-8 bg-kiwiBlue text-white rounded-full flex items-center justify-center mr-3">3</span>
261
+ Select Your Roof Pitch
262
+ </h2>
263
+ <p class="text-gray-600 mb-6">Roof pitch affects the actual surface area that needs to be covered:</p>
264
+
265
+ <div class="mb-6 flex flex-col md:flex-row gap-6 items-start">
266
+ <div class="flex-1 max-w-md">
267
+ <label for="roofPitch" class="block text-gray-700 mb-2">Roof Pitch</label>
268
+ <select id="roofPitch" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-kiwiBlue focus:border-kiwiBlue">
269
+ <option value="">Select pitch...</option>
270
+ <option value="1.003">1/12 (4.8°)</option>
271
+ <option value="1.014">2/12 (9.5°)</option>
272
+ <option value="1.031">3/12 (14.0°)</option>
273
+ <option value="1.054">4/12 (18.4°)</option>
274
+ <option value="1.083">5/12 (22.6°)</option>
275
+ <option value="1.118">6/12 (26.6°)</option>
276
+ <option value="1.158">7/12 (30.3°)</option>
277
+ <option value="1.202">8/12 (33.7°)</option>
278
+ <option value="1.250">9/12 (36.9°)</option>
279
+ <option value="1.302">10/12 (39.8°)</option>
280
+ <option value="1.357">11/12 (42.5°)</option>
281
+ <option value="1.414">12/12 (45.0°)</option>
282
+ <option value="1.474">13/12 (47.3°)</option>
283
+ <option value="1.537">14/12 (49.4°)</option>
284
+ <option value="1.601">15/12 (51.3°)</option>
285
+ <option value="1.667">16/12 (53.1°)</option>
286
+ <option value="1.734">17/12 (54.8°)</option>
287
+ <option value="1.803">18/12 (56.3°)</option>
288
+ <option value="1.873">19/12 (57.7°)</option>
289
+ <option value="1.944">20/12 (59.0°)</option>
290
+ <option value="2.016">21/12 (60.3°)</option>
291
+ <option value="2.088">22/12 (61.4°)</option>
292
+ <option value="2.162">23/12 (62.4°)</option>
293
+ <option value="2.236">24/12 (63.4°)</option>
294
+ </select>
295
+ </div>
296
+ <div class="flex-1 max-w-md">
297
+ <img src="https://d26tpo4cm8sb6k.cloudfront.net/img/roof-pitch.png" alt="Roof Pitch Diagram" class="w-full h-auto rounded-lg shadow-md">
298
+ </div>
299
+ </div>
300
+
301
+ <div class="flex justify-between mt-6">
302
+ <button type="button" onclick="prevStep('step3', 'step2')" class="text-kiwiBlue px-6 py-2 rounded-lg border border-kiwiBlue hover:bg-kiwiBlue hover:bg-opacity-10 transition-all">
303
+ <i class="fas fa-arrow-left mr-2"></i> Back
304
+ </button>
305
+ <button type="button" onclick="nextStep('step3', 'step4')" class="bg-kiwiBlue text-white px-6 py-2 rounded-lg hover:bg-opacity-90 transition-all disabled:opacity-50" id="step3NextBtn" disabled>
306
+ Next <i class="fas fa-arrow-right ml-2"></i>
307
+ </button>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Step 4: Roof Condition -->
312
+ <div id="step4" class="step hidden">
313
+ <h2 class="text-xl font-bold text-kiwiBlue mb-4 flex items-center">
314
+ <span class="w-8 h-8 bg-kiwiBlue text-white rounded-full flex items-center justify-center mr-3">4</span>
315
+ Roof Condition Repair Estimate
316
+ </h2>
317
+ <p class="text-gray-600 mb-6">Is the roof leaking, older than 15 years, or showing significant signs of needing repair?</p>
318
+
319
+ <div class="mb-6">
320
+ <div class="flex items-center mb-4">
321
+ <input type="radio" id="conditionYes" name="roofCondition" value="yes" class="w-5 h-5 text-kiwiBlue focus:ring-kiwiBlue">
322
+ <label for="conditionYes" class="ml-2 text-gray-700">Yes</label>
323
+ </div>
324
+ <div class="flex items-center">
325
+ <input type="radio" id="conditionNo" name="roofCondition" value="no" class="w-5 h-5 text-kiwiBlue focus:ring-kiwiBlue">
326
+ <label for="conditionNo" class="ml-2 text-gray-700">No</label>
327
+ </div>
328
+ </div>
329
+
330
+ <div class="flex justify-between mt-6">
331
+ <button type="button" onclick="prevStep('step4', 'step3')" class="text-kiwiBlue px-6 py-2 rounded-lg border border-kiwiBlue hover:bg-kiwiBlue hover:bg-opacity-10 transition-all">
332
+ <i class="fas fa-arrow-left mr-2"></i> Back
333
+ </button>
334
+ <button type="button" onclick="calculateResults()" class="bg-kiwiBlue text-white px-6 py-2 rounded-lg hover:bg-opacity-90 transition-all disabled:opacity-50" id="step4NextBtn" disabled>
335
+ Calculate Results <i class="fas fa-calculator ml-2"></i>
336
+ </button>
337
+ </div>
338
+ </div>
339
+ </form>
340
+ </div>
341
+
342
+ <!-- Results Section -->
343
+ <div id="results" class="bg-white rounded-lg shadow-lg p-6 hidden">
344
+ <h2 class="text-xl font-bold text-kiwiBlue mb-6 flex items-center">
345
+ <i class="fas fa-chart-bar text-kiwiBlue mr-3"></i> Your Roofing Cost Comparison
346
+ </h2>
347
+
348
+ <div class="mb-6">
349
+ <h3 class="font-semibold text-gray-700 mb-2">Selected Options:</h3>
350
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
351
+ <div class="bg-gray-50 p-3 rounded-lg">
352
+ <p class="text-sm text-gray-500">Roof Type</p>
353
+ <p class="font-medium" id="resultRoofType"></p>
354
+ </div>
355
+ <div class="bg-gray-50 p-3 rounded-lg">
356
+ <p class="text-sm text-gray-500">Roof Area</p>
357
+ <p class="font-medium" id="resultRoofArea"></p>
358
+ </div>
359
+ <div class="bg-gray-50 p-3 rounded-lg">
360
+ <p class="text-sm text-gray-500">Roof Pitch</p>
361
+ <p class="font-medium" id="resultRoofPitch"></p>
362
+ </div>
363
+ <div class="bg-gray-50 p-3 rounded-lg">
364
+ <p class="text-sm text-gray-500">Roof Condition</p>
365
+ <p class="font-medium" id="resultRoofCondition"></p>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <div class="mb-6">
371
+ <h3 class="font-semibold text-gray-700 mb-2">Calculations:</h3>
372
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
373
+ <div class="bg-gray-50 p-3 rounded-lg">
374
+ <p class="text-sm text-gray-500">Adjusted Roof Area</p>
375
+ <p class="font-medium" id="resultAdjustedArea"></p>
376
+ </div>
377
+ <div class="bg-gray-50 p-3 rounded-lg">
378
+ <p class="text-sm text-gray-500">KiwiSeal Cost per m²</p>
379
+ <p class="font-medium" id="resultKiwiSealRate"></p>
380
+ </div>
381
+ </div>
382
+ </div>
383
+
384
+ <div class="mb-6">
385
+ <h3 class="font-semibold text-gray-700 mb-2">Cost Comparison:</h3>
386
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
387
+ <div class="bg-green-50 border border-green-100 p-4 rounded-lg">
388
+ <div class="flex items-center mb-2">
389
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3">
390
+ <i class="fas fa-dollar-sign"></i>
391
+ </div>
392
+ <h4 class="font-bold text-green-700">Kiwiseal Total Cost Estimate</h4>
393
+ </div>
394
+ <p class="text-2xl font-bold text-green-600" id="resultKiwiSealTotal"></p>
395
+ </div>
396
+ <div class="bg-blue-50 border border-blue-100 p-4 rounded-lg">
397
+ <div class="flex items-center mb-2">
398
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-3">
399
+ <i class="fas fa-home"></i>
400
+ </div>
401
+ <h4 class="font-bold text-blue-700">Re-roofing Total Cost Estimate</h4>
402
+ </div>
403
+ <p class="text-2xl font-bold text-blue-600" id="resultReroofingTotal"></p>
404
+ </div>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="bg-kiwiBlue bg-opacity-10 p-4 rounded-lg">
409
+ <div class="flex items-center">
410
+ <div class="w-12 h-12 bg-kiwiBlue rounded-full flex items-center justify-center text-white mr-4">
411
+ <i class="fas fa-piggy-bank text-xl"></i>
412
+ </div>
413
+ <div>
414
+ <h4 class="font-bold text-kiwiBlue">Potential Savings</h4>
415
+ <p class="text-xl font-bold text-green-600" id="resultSavings"></p>
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
+ <div class="mt-8 text-center text-sm text-gray-500">
421
+ <p>* This is an average cost estimate and subject to variation based on repairs required and assessment requirements.</p>
422
+ </div>
423
+ <div class="mt-6 flex justify-center">
424
+ <button onclick="resetCalculator()" class="bg-kiwiBlue text-white px-6 py-2 rounded-lg hover:bg-opacity-90 transition-all">
425
+ <i class="fas fa-redo mr-2"></i> Start New Calculation
426
+ </button>
427
+ </div>
428
+ </div>
429
+ </div>
430
+
431
+ <script>
432
+ // Roof type prices (hidden until calculation)
433
+ const roofPrices = {
434
+ 'IRON_ROOF_LONG_RUN': { kiwiSeal: 55, reroofing: 200 },
435
+ 'TRAY_COMMERCIAL': { kiwiSeal: 75, reroofing: 200 },
436
+ 'IRON_ROOF_SHORT_SHEETS': { kiwiSeal: 55, reroofing: 200 },
437
+ 'BUTYNOL': { kiwiSeal: 150, reroofing: 400 },
438
+ 'CONCRETE_TILES': { kiwiSeal: 55, reroofing: 200 },
439
+ 'DECROMASTIC_TILES': { kiwiSeal: 55, reroofing: 200 },
440
+ 'ASBESTOS': { kiwiSeal: 80, reroofing: 200 },
441
+ 'INTERNAL_GUTTERS': { kiwiSeal: 150, reroofing: 400 },
442
+ 'ASPHALT_SHINGLES': { kiwiSeal: 70, reroofing: 200 }
443
+ };
444
+
445
+ // Roof type display names
446
+ const roofDisplayNames = {
447
+ 'IRON_ROOF_LONG_RUN': 'Iron Roof Long Run',
448
+ 'TRAY_COMMERCIAL': 'Tray Commercial Roofing',
449
+ 'IRON_ROOF_SHORT_SHEETS': 'Iron Roof Short Sheets',
450
+ 'BUTYNOL': 'Butynol',
451
+ 'CONCRETE_TILES': 'Concrete Tiles',
452
+ 'DECROMASTIC_TILES': 'Decromastic Tiles',
453
+ 'ASBESTOS': 'Asbestos Roofing',
454
+ 'INTERNAL_GUTTERS': 'Internal Gutters',
455
+ 'ASPHALT_SHINGLES': 'Asphalt Shingles'
456
+ };
457
+
458
+ // Current step tracking
459
+ let currentStep = 1;
460
+ let selectedRoofType = null;
461
+
462
+ // Update progress bar
463
+ function updateProgress(step) {
464
+ const progress = (step / 4) * 100;
465
+ document.getElementById('progressBar').style.width = `${progress}%`;
466
+ document.getElementById('progressText').textContent = `${progress}%`;
467
+ }
468
+
469
+ // Select roof type
470
+ function selectRoofType(type) {
471
+ // Remove active class from all roof types
472
+ document.querySelectorAll('.roof-type').forEach(el => {
473
+ el.classList.remove('border-kiwiBlue', 'border-2');
474
+ el.classList.add('border-gray-200');
475
+ });
476
+
477
+ // Add active class to selected roof type
478
+ const selectedEl = document.querySelector(`[onclick="selectRoofType('${type}')"]`);
479
+ selectedEl.classList.remove('border-gray-200');
480
+ selectedEl.classList.add('border-kiwiBlue', 'border-2');
481
+
482
+ // Update selected roof type display
483
+ selectedRoofType = type;
484
+ document.getElementById('selectedRoofTypeText').textContent = roofDisplayNames[type];
485
+ document.getElementById('selectedRoofType').classList.remove('hidden');
486
+
487
+ // Enable next button
488
+ document.getElementById('step1NextBtn').disabled = false;
489
+ }
490
+
491
+ // Next step
492
+ function nextStep(currentId, nextId) {
493
+ // Validate inputs before proceeding
494
+ if (currentId === 'step2') {
495
+ const roofArea = document.getElementById('roofArea').value;
496
+ if (!roofArea || isNaN(roofArea) || roofArea <= 0) {
497
+ alert('Please enter a valid roof area');
498
+ return;
499
+ }
500
+ } else if (currentId === 'step3') {
501
+ const roofPitch = document.getElementById('roofPitch').value;
502
+ if (!roofPitch) {
503
+ alert('Please select a roof pitch');
504
+ return;
505
+ }
506
+ } else if (currentId === 'step4') {
507
+ const condition = document.querySelector('input[name="roofCondition"]:checked');
508
+ if (!condition) {
509
+ alert('Please select a roof condition');
510
+ return;
511
+ }
512
+ }
513
+
514
+ // Hide current step and show next step
515
+ document.getElementById(currentId).classList.add('hidden');
516
+ document.getElementById(nextId).classList.remove('hidden');
517
+
518
+ // Update progress
519
+ currentStep = parseInt(nextId.replace('step', ''));
520
+ updateProgress(currentStep);
521
+
522
+ // Enable/disable next buttons based on inputs
523
+ if (currentId === 'step1') {
524
+ document.getElementById('roofArea').addEventListener('input', function() {
525
+ document.getElementById('step2NextBtn').disabled = !this.value;
526
+ });
527
+ } else if (currentId === 'step2') {
528
+ document.getElementById('roofPitch').addEventListener('change', function() {
529
+ document.getElementById('step3NextBtn').disabled = !this.value;
530
+ });
531
+ } else if (currentId === 'step3') {
532
+ document.querySelectorAll('input[name="roofCondition"]').forEach(radio => {
533
+ radio.addEventListener('change', function() {
534
+ document.getElementById('step4NextBtn').disabled = false;
535
+ });
536
+ });
537
+ }
538
+ }
539
+
540
+ // Previous step
541
+ function prevStep(currentId, prevId) {
542
+ document.getElementById(currentId).classList.add('hidden');
543
+ document.getElementById(prevId).classList.remove('hidden');
544
+
545
+ currentStep = parseInt(prevId.replace('step', ''));
546
+ updateProgress(currentStep);
547
+ }
548
+
549
+ // Calculate results
550
+ function calculateResults() {
551
+ // Get all input values
552
+ const roofArea = parseFloat(document.getElementById('roofArea').value);
553
+ const pitchFactor = parseFloat(document.getElementById('roofPitch').value);
554
+ const condition = document.querySelector('input[name="roofCondition"]:checked').value;
555
+
556
+ // Calculate adjusted area
557
+ const adjustedArea = roofArea * pitchFactor;
558
+
559
+ // Get prices for selected roof type
560
+ const prices = roofPrices[selectedRoofType];
561
+ let kiwiSealRate = prices.kiwiSeal;
562
+
563
+ // Apply condition surcharge if needed
564
+ if (condition === 'yes') {
565
+ kiwiSealRate *= 1.3;
566
+ }
567
+
568
+ // Calculate totals
569
+ const kiwiSealTotal = adjustedArea * kiwiSealRate;
570
+ const reroofingTotal = adjustedArea * prices.reroofing;
571
+ const savings = reroofingTotal - kiwiSealTotal;
572
+
573
+ // Display results
574
+ document.getElementById('resultRoofType').textContent = roofDisplayNames[selectedRoofType];
575
+ document.getElementById('resultRoofArea').textContent = `${roofArea.toFixed(2)} m²`;
576
+ document.getElementById('resultRoofPitch').textContent = document.getElementById('roofPitch').options[document.getElementById('roofPitch').selectedIndex].text;
577
+ document.getElementById('resultRoofCondition').textContent = condition === 'yes' ? 'Yes' : 'No';
578
+ document.getElementById('resultAdjustedArea').textContent = `${adjustedArea.toFixed(2)} m²`;
579
+ document.getElementById('resultKiwiSealRate').textContent = `$${kiwiSealRate.toFixed(2)} per m²`;
580
+ document.getElementById('resultKiwiSealTotal').textContent = `$${kiwiSealTotal.toFixed(2)}`;
581
+ document.getElementById('resultReroofingTotal').textContent = `$${reroofingTotal.toFixed(2)}`;
582
+
583
+ // Format savings
584
+ if (savings >= 0) {
585
+ document.getElementById('resultSavings').textContent = `Save $${savings.toFixed(2)} with KiwiSeal`;
586
+ document.getElementById('resultSavings').classList.remove('text-red-600');
587
+ document.getElementById('resultSavings').classList.add('text-green-600');
588
+ } else {
589
+ document.getElementById('resultSavings').textContent = `Additional cost of $${Math.abs(savings).toFixed(2)} with KiwiSeal`;
590
+ document.getElementById('resultSavings').classList.remove('text-green-600');
591
+ document.getElementById('resultSavings').classList.add('text-red-600');
592
+ }
593
+
594
+ // Hide form and show results
595
+ document.getElementById('roofCalculator').classList.add('hidden');
596
+ document.getElementById('results').classList.remove('hidden');
597
+ }
598
+
599
+ // Reset calculator
600
+ function resetCalculator() {
601
+ // Reset form
602
+ document.getElementById('roofCalculator').reset();
603
+ document.getElementById('roofCalculator').classList.remove('hidden');
604
+ document.getElementById('results').classList.add('hidden');
605
+ document.getElementById('selectedRoofType').classList.add('hidden');
606
+ document.querySelectorAll('.roof-type').forEach(el => {
607
+ el.classList.remove('border-kiwiBlue', 'border-2');
608
+ el.classList.add('border-gray-200');
609
+ });
610
+
611
+ // Reset variables
612
+ selectedRoofType = null;
613
+ currentStep = 1;
614
+ updateProgress(currentStep);
615
+
616
+ // Show first step
617
+ document.querySelectorAll('.step').forEach(step => {
618
+ step.classList.add('hidden');
619
+ });
620
+ document.getElementById('step1').classList.remove('hidden');
621
+
622
+ // Reset buttons
623
+ document.getElementById('step1NextBtn').disabled = true;
624
+ }
625
+
626
+ // Initialize
627
+ updateProgress(1);
628
+ </script>
629
+
630
+ <!-- Contact Link Section -->
631
+ <div class="bg-kiwiBlue text-white py-8">
632
+ <div class="container mx-auto px-4 text-center">
633
+ <h3 class="text-2xl font-bold mb-4">Ready to get started?</h3>
634
+ <a href="https://kiwisealroofing.co.nz/contactus"
635
+ class="inline-block bg-white text-kiwiBlue font-bold px-6 py-3 rounded-lg hover:bg-gray-100 transition-all">
636
+ Get Free Roof Assessment and Quote Now!
637
+ </a>
638
+ </div>
639
+ </div>
640
+ <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=Gazmo08/roofing-calculator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
641
+ </html>