Hugging Face's logo

Spaces:
PiccaR
/
hempcost-estimator-pro
Running

App Files Community
PiccaR commited on
Commit
3b87b4b
路
verified 路
1 Parent(s): d22d99e

add options to add few building materials into one calculation. i might need wood, hempcrete or other materials in one calculation.

Browse files
Files changed (1) hide show
  1. index.html +539 -541
index.html CHANGED
@@ -22,357 +22,391 @@
22
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
23
  background: #94a3b8;
24
  }
 
 
 
 
 
 
 
25
  </style>
26
  </head>
27
  <body class="bg-gradient-to-br from-emerald-50 to-green-50 min-h-screen p-4">
28
- <!-- Calculator Form -->
29
- <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
30
- <div class="grid md:grid-cols-2 gap-8">
31
- <!-- Project Details -->
32
- <div>
33
- <h3 class="text-2xl font-semibold text-emerald-800 mb-6 flex items-center">
34
- <i data-feather="clipboard" class="mr-2"></i>
35
- Informacje o Projekcie
36
- </h3>
37
- <div class="space-y-4">
38
- <div>
39
- <label class="block text-sm font-medium text-emerald-700 mb-2">Typ Projektu</label>
40
- <select id="projectType" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
41
- <option value="new-building">Nowy Budynek</option>
42
- <option value="renovation">Rekonstrukcja</option>
43
- <option value="flat-apartment">Mieszkanie</option>
44
- <option value="extension">Rozbudowa</option>
45
- <option value="commercial">Przestrze艅 Komercyjna</option>
46
- </select>
47
- </div>
48
- <div>
49
- <label class="block text-sm font-medium text-emerald-700 mb-2">Ca艂kowita Powierzchnia (m虏)</label>
50
- <input type="number" id="floorArea" placeholder="Wprowad藕 powierzchni臋" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
51
- </div>
52
- <div>
53
- <label class="block text-sm font-medium text-emerald-700 mb-2">Liczba Pi臋ter</label>
54
- <input type="number" id="numFloors" placeholder="Wprowad藕 liczb臋" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
55
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  <div>
57
- <label class="block text-sm font-medium text-emerald-700 mb-2">Grubo艣膰 艢cian (cm)</label>
58
- <input type="number" id="wallThickness" placeholder="np. 30" value="30" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
59
  </div>
60
  <div>
61
- <label class="block text-sm font-medium text-emerald-700 mb-2">Lokalizacja/Region</label>
62
- <input type="text" id="location" placeholder="Wprowad藕 lokalizacj臋" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
63
  </div>
64
- </div>
65
- </div>
66
- <!-- Material Costs -->
67
- <div>
68
- <h3 class="text-2xl font-semibold text-emerald-800 mb-6 flex items-center">
69
- <i data-feather="package" class="mr-2"></i>
70
- Koszty Materia艂贸w
71
- </h3>
72
- <div class="space-y-4">
73
- <div>
74
- <label class="block text-sm font-medium text-emerald-700 mb-2">Typ Materia艂u Konstrukcyjnego</label>
75
- <select id="materialType" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
76
- <option value="hempcrete">Hempcret</option>
77
- <option value="wood">Drewno (Frame Construction)</option>
78
- <option value="brick">Ceg艂a</option>
79
- <option value="concrete">Beton</option>
80
- <option value="steel">Konstrukcja Stalowa</option>
81
- <option value="custom">Niestandardowy</option>
82
- </select>
83
- </div>
84
- <div id="hempcreteSection" class="material-section">
85
- <div>
86
- <label class="block text-sm font-medium text-emerald-700 mb-2">Cena Hempcretu za m鲁 (z艂)</label>
87
- <input type="number" id="hempPrice" placeholder="Wprowad藕 cen臋" value="120" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
88
- </div>
89
- <div>
90
- <label class="block text-sm font-medium text-emerald-700 mb-2">Cena Spoiwa Wapiennego za kg (z艂)</label>
91
- <input type="number" id="limePrice" placeholder="Wprowad藕 cen臋" value="0.45" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
92
- </div>
93
- </div>
94
- <div id="woodSection" class="material-section hidden">
95
- <div>
96
- <label class="block text-sm font-medium text-emerald-700 mb-2">Cena Drewna za m鲁 (z艂)</label>
97
- <input type="number" id="woodPrice" placeholder="Wprowad藕 cen臋" value="450" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
98
- </div>
99
- <div>
100
- <label class="block text-sm font-medium text-emerald-700 mb-2">Cena Izolacji za m虏 (z艂)</label>
101
- <input type="number" id="insulationPrice" placeholder="Wprowad藕 cen臋" value="25" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
102
- </div>
103
- </div>
104
- <div id="brickSection" class="material-section hidden">
105
- <div>
106
- <label class="block text-sm font-medium text-emerald-700 mb-2">Cena Cegie艂 za sztuk臋 (z艂)</label>
107
- <input type="number" id="brickPrice" placeholder="Wprowad藕 cen臋" value="0.85" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
108
- </div>
109
- <div>
110
- <label class="block text-sm font-medium text-emerald-700 mb-2">Cena Zaprawy za kg (z艂)</label>
111
- <input type="number" id="mortarPrice" placeholder="Wprowad藕 cen臋" value="0.35" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
112
- </div>
113
- </div>
114
- <div id="concreteSection" class="material-section hidden">
115
- <div>
116
- <label class="block text-sm font-medium text-emerald-700 mb-2">Cena Betonu za m鲁 (z艂)</label>
117
- <input type="number" id="concretePrice" placeholder="Wprowad藕 cen臋" value="95" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
118
- </div>
119
- <div>
120
- <label class="block text-sm font-medium text-emerald-700 mb-2">Cena Zbrojenia za kg (z艂)</label>
121
- <input type="number" id="rebarPrice" placeholder="Wprowad藕 cen臋" value="1.20" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
122
- </div>
123
- </div>
124
- <div id="steelSection" class="material-section hidden">
125
- <div>
126
- <label class="block text-sm font-medium text-emerald-700 mb-2">Cena Stali za kg (z艂)</label>
127
- <input type="number" id="steelPrice" placeholder="Wprowad藕 cen臋" value="2.50" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
128
- </div>
129
- <div>
130
- <label class="block text-sm font-medium text-emerald-700 mb-2">Cena Pow艂oki Antykorozyjnej za m虏 (z艂)</label>
131
- <input type="number" id="coatingPrice" placeholder="Wprowad藕 cen臋" value="18" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
132
- </div>
133
- </div>
134
- <div id="customSection" class="material-section hidden">
135
- <div>
136
- <label class="block text-sm font-medium text-emerald-700 mb-2">Cena G艂贸wnego Materia艂u za jednostk臋 (z艂)</label>
137
- <input type="number" id="customMainPrice" placeholder="Wprowad藕 cen臋" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
138
- </div>
139
- <div>
140
- <label class="block text-sm font-medium text-emerald-700 mb-2">Jednostka miary</label>
141
- <input type="text" id="customUnit" placeholder="np. m鲁, kg, sztuka" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
142
- </div>
143
- </div>
144
- <div>
145
- <label class="block text-sm font-medium text-emerald-700 mb-2">Dodatkowe Materia艂y</label>
146
- <div class="space-y-2">
147
- <div class="flex items-center justify-between">
148
- <div class="flex items-center space-x-2">
149
- <input type="checkbox" id="waterproofing" class="rounded text-emerald-600">
150
- <span class="text-sm">Membrana Wodoodporna</span>
151
- </div>
152
- <input type="number" id="waterproofingCost" placeholder="z艂" class="w-20 px-2 py-1 border border-emerald-200 rounded text-sm" value="850">
153
- </div>
154
- <div class="flex items-center justify-between">
155
- <div class="flex items-center space-x-2">
156
- <input type="checkbox" id="insulation" class="rounded text-emerald-600">
157
- <span class="text-sm">Dodatkowa Izolacja</span>
158
- </div>
159
- <input type="number" id="insulationCost" placeholder="z艂" class="w-20 px-2 py-1 border border-emerald-200 rounded text-sm" value="1200">
160
- </div>
161
- <div class="flex items-center justify-between">
162
- <div class="flex items-center space-x-2">
163
- <input type="checkbox" id="plaster" class="rounded text-emerald-600">
164
- <span class="text-sm">Wyko艅czenie Tynkiem Wapiennym</span>
165
- </div>
166
- <input type="number" id="plasterCost" placeholder="z艂" class="w-20 px-2 py-1 border border-emerald-200 rounded text-sm" value="1800">
167
- </div>
168
- </div>
169
- </div>
170
- <div>
171
- <label class="block text-sm font-medium text-emerald-700 mb-2">Koszty Robocizny (z艂/dzie艅)</label>
172
- <input type="number" id="laborRate" placeholder="Wprowad藕 stawk臋 dzienn膮" value="250" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
173
- </div>
174
- <div>
175
- <label class="block text-sm font-medium text-emerald-700 mb-2">Szacowane Dni Budowy</label>
176
- <input type="number" id="constructionDays" placeholder="Wprowad藕 dni" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
177
- </div>
178
- </div>
179
- </div>
180
  </div>
 
 
 
181
 
182
- <!-- Additional Options -->
183
- <div class="mt-8 border-t border-emerald-100 pt-6">
184
- <h3 class="text-xl font-semibold text-emerald-800 mb-4 flex items-center">
185
- <i data-feather="settings" class="mr-2"></i>
186
- Dodatkowe Opcje
187
- </h3>
188
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
189
- <div class="flex items-center justify-between">
190
- <div class="flex items-center space-x-2">
191
- <input type="checkbox" id="architectFees" class="rounded text-emerald-600">
192
- <span class="text-sm">Honorarium Architekta (8%)</span>
193
- </div>
194
- <input type="number" id="architectCost" placeholder="z艂" class="w-20 px-2 py-1 border border-emerald-200 rounded text-sm">
195
- </div>
196
- <div class="flex items-center justify-between">
197
- <div class="flex items-center space-x-2">
198
- <input type="checkbox" id="permits" class="rounded text-emerald-600">
199
- <span class="text-sm">Pozwolenia i Licencje</span>
200
- </div>
201
- <input type="number" id="permitsCost" placeholder="z艂" class="w-20 px-2 py-1 border border-emerald-200 rounded text-sm" value="1500">
202
- </div>
203
- <div class="flex items-center justify-between">
204
- <div class="flex items-center space-x-2">
205
- <input type="checkbox" id="wasteManagement" class="rounded text-emerald-600">
206
- <span class="text-sm">Zarz膮dzanie Odpadami</span>
207
- </div>
208
- <input type="number" id="wasteCost" placeholder="z艂" class="w-20 px-2 py-1 border border-emerald-200 rounded text-sm" value="800">
209
- </div>
210
- <div class="flex items-center justify-between">
211
- <div class="flex items-center space-x-2">
212
- <input type="checkbox" id="transportation" class="rounded text-emerald-600">
213
- <span class="text-sm">Transport</span>
214
- </div>
215
- <input type="number" id="transportCost" placeholder="z艂" class="w-20 px-2 py-1 border border-emerald-200 rounded text-sm" value="1200">
216
- </div>
217
- <div class="flex items-center justify-between">
218
- <div class="flex items-center space-x-2">
219
- <input type="checkbox" id="equipment" class="rounded text-emerald-600">
220
- <span class="text-sm">Wynajem Sprz臋tu</span>
221
- </div>
222
- <input type="number" id="equipmentCost" placeholder="z艂" class="w-20 px-2 py-1 border border-emerald-200 rounded text-sm" value="2000">
223
- </div>
224
- <div class="flex items-center justify-between">
225
- <div class="flex items-center space-x-2">
226
- <input type="checkbox" id="contingency" class="rounded text-emerald-600" checked>
227
- <span class="text-sm">Rezerwa (10%)</span>
228
- </div>
229
- </div>
230
- </div>
231
- </div>
232
- <!-- Calculate Button -->
233
- <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
234
- <button id="calculateBtn" class="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold py-3 px-8 rounded-lg transition duration-200 flex items-center justify-center">
235
- <i data-feather="calculator" class="mr-2"></i>
236
- Oblicz Kosztorys
237
- </button>
238
- <button id="saveProjectBtn" class="bg-emerald-500 hover:bg-emerald-600 text-white font-semibold py-3 px-8 rounded-lg transition duration-200 flex items-center justify-center">
239
- <i data-feather="save" class="mr-2"></i>
240
- Zapisz Projekt
241
- </button>
242
- <button id="loadProjectBtn" class="bg-emerald-400 hover:bg-emerald-500 text-white font-semibold py-3 px-8 rounded-lg transition duration-200 flex items-center justify-center">
243
- <i data-feather="folder" class="mr-2"></i>
244
- Wczytaj Projekt
245
- </button>
246
  </div>
247
- </div>
248
- <!-- Results Section -->
249
- <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 mt-8 hidden" id="results-section">
250
- <h3 class="text-2xl font-semibold text-emerald-800 mb-6 text-center">
251
- <i data-feather="dollar-sign" class="mr-2"></i>
252
- Szacowane Koszty
253
- </h3>
254
- <div class="grid md:grid-cols-4 gap-6">
255
- <div class="text-center p-6 bg-emerald-50 rounded-xl">
256
- <div class="text-3xl font-bold text-emerald-700" id="materialsCost">0 z艂</div>
257
- <p class="text-sm text-emerald-600 mt-2">Koszty Materia艂贸w</p>
258
- </div>
259
- <div class="text-center p-6 bg-emerald-50 rounded-xl">
260
- <div class="text-3xl font-bold text-emerald-700" id="laborCost">0 z艂</div>
261
- <p class="text-sm text-emerald-600 mt-2">Koszty Robocizny</p>
262
- </div>
263
- <div class="text-center p-6 bg-emerald-50 rounded-xl">
264
- <div class="text-3xl font-bold text-emerald-700" id="additionalCost">0 z艂</div>
265
- <p class="text-sm text-emerald-600 mt-2">Dodatkowe Koszty</p>
266
- </div>
267
- <div class="text-center p-6 bg-emerald-100 rounded-xl border-2 border-emerald-300">
268
- <div class="text-3xl font-bold text-emerald-800" id="totalCost">0 z艂</div>
269
- <p class="text-sm text-emerald-700 mt-2">Razem Szacowany</p>
270
- </div>
271
- </div>
272
- <div class="mt-8 grid md:grid-cols-2 gap-6">
273
- <div class="p-4 bg-emerald-50 rounded-lg">
274
- <h4 class="font-semibold text-emerald-800 mb-3 flex items-center">
275
- <i data-feather="package" class="mr-2 w-4 h-4"></i>
276
- Szczeg贸艂y Materia艂贸w
277
- </h4>
278
- <div class="text-sm text-emerald-700 space-y-2">
279
- <div class="flex justify-between">
280
- <span>Hempcret:</span>
281
- <span id="hempCostDetail">0 z艂</span>
282
- </div>
283
- <div class="flex justify-between">
284
- <span>Spoiwo Wapienne:</span>
285
- <span id="limeCostDetail">0 z艂</span>
286
- </div>
287
- <div class="flex justify-between">
288
- <span>Dodatkowe Materia艂y:</span>
289
- <span id="additionalMaterialsDetail">0 z艂</span>
290
- </div>
291
- <div class="border-t border-emerald-200 pt-2 mt-2">
292
- <div class="flex justify-between font-semibold">
293
- <span>Razem Materia艂y:</span>
294
- <span id="totalMaterialsDetail">0 z艂</span>
295
- </div>
296
- </div>
297
- </div>
298
- </div>
299
-
300
- <div class="p-4 bg-emerald-50 rounded-lg">
301
- <h4 class="font-semibold text-emerald-800 mb-3 flex items-center">
302
- <i data-feather="tool" class="mr-2 w-4 h-4"></i>
303
- Robocizna i Dodatkowe Koszty
304
- </h4>
305
- <div class="text-sm text-emerald-700 space-y-2">
306
- <div class="flex justify-between">
307
- <span>Robocizna:</span>
308
- <span id="laborDetail">0 z艂</span>
309
- </div>
310
- <div class="flex justify-between">
311
- <span>Dodatkowe Us艂ugi:</span>
312
- <span id="servicesDetail">0 z艂</span>
313
- </div>
314
- <div class="flex justify-between">
315
- <span>Rezerwa (10%):</span>
316
- <span id="contingencyDetail">0 z艂</span>
317
- </div>
318
- </div>
319
- </div>
320
  </div>
321
- <div class="mt-6 p-4 bg-emerald-100 rounded-lg">
322
- <h4 class="font-semibold text-emerald-800 mb-3 flex items-center">
323
- <i data-feather="info" class="mr-2 w-4 h-4"></i>
324
- Podsumowanie Projektu
325
- </h4>
326
- <div class="text-sm text-emerald-700 space-y-2">
327
- <div class="flex justify-between">
328
- <span>Szacowana Obj臋to艣膰 Hempcretu:</span>
329
- <span id="hempVolume">0 m鲁</span>
330
- </div>
331
- <div class="flex justify-between">
332
- <span>Szacowana Ilo艣膰 Spoiwa Wapiennego:</span>
333
- <span id="limeQuantity">0 kg</span>
334
- </div>
335
- <div class="flex justify-between">
336
- <span>Czas Trwania Budowy:</span>
337
- <span id="durationDetail">0 dni</span>
338
- </div>
339
- <div class="flex justify-between">
340
- <span>Koszt za m虏:</span>
341
- <span id="costPerSqm">0 z艂/m虏</span>
342
- </div>
343
- </div>
344
- </div>
345
  </div>
346
- <div class="max-w-6xl mx-auto">
347
- <!-- Header -->
348
- <div class="bg-white rounded-lg shadow-md p-6 mb-6">
349
- <div class="flex items-center space-x-2 mb-4">
350
- <i data-feather="leaf" class="text-emerald-600"></i>
351
- <h1 class="text-2xl font-bold text-emerald-800">HempCost Estimator Pro</h1>
352
  </div>
353
- <p class="text-emerald-700">Oblicz koszty projektu z hempcretem z precyzj膮 i ekologiczn膮 inteligencj膮</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
354
  </div>
355
  </div>
356
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
357
  <script>
358
  // Initialize Feather Icons
359
  feather.replace();
360
- // Material type visibility management
361
- function updateMaterialSections() {
362
- const materialType = document.getElementById('materialType').value;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
363
 
364
- // Hide all sections first
365
- document.querySelectorAll('.material-section').forEach(section => {
366
- section.classList.add('hidden');
367
- });
 
 
 
 
 
 
368
 
369
- // Show selected section
370
- const selectedSection = document.getElementById(materialType + 'Section');
371
- if (selectedSection) {
372
- selectedSection.classList.remove('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
373
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
374
  }
375
- // Advanced Calculation Logic
 
376
  function calculateEstimate() {
377
  // Get input values
378
  const floorArea = parseFloat(document.getElementById('floorArea').value) || 0;
@@ -380,86 +414,115 @@
380
  const wallThickness = parseFloat(document.getElementById('wallThickness').value) || 30;
381
  const laborRate = parseFloat(document.getElementById('laborRate').value) || 250;
382
  const constructionDays = parseInt(document.getElementById('constructionDays').value) || 30;
383
- const materialType = document.getElementById('materialType').value;
 
 
 
 
 
384
 
385
  // Calculate volume and quantities
386
  const wallHeight = 2.5; // Standard wall height in meters
387
  const perimeter = Math.sqrt(floorArea) * 4; // Simplified perimeter calculation
388
  const wallVolume = perimeter * wallHeight * numFloors * (wallThickness / 100);
389
 
390
- let mainMaterialCost = 0;
391
- let secondaryMaterialCost = 0;
392
- let materialVolume = 0;
393
- let materialQuantity = 0;
394
- // Calculate costs based on material type
395
- switch(materialType) {
396
- case 'hempcrete':
397
- const hempPrice = parseFloat(document.getElementById('hempPrice').value) || 120;
398
- const limePrice = parseFloat(document.getElementById('limePrice').value) || 0.45;
399
- materialVolume = wallVolume;
400
- const limeQuantity = materialVolume * 200; // 200kg per m鲁 approximate
401
- mainMaterialCost = materialVolume * hempPrice;
402
- secondaryMaterialCost = limeQuantity * limePrice;
403
- break;
404
-
405
- case 'wood':
406
- const woodPrice = parseFloat(document.getElementById('woodPrice').value) || 450;
407
- const insulationPrice = parseFloat(document.getElementById('insulationPrice').value) || 25;
408
- materialVolume = wallVolume * 0.3; // Wood frame uses less volume
409
- const insulationArea = perimeter * wallHeight * numFloors;
410
- mainMaterialCost = materialVolume * woodPrice;
411
- secondaryMaterialCost = insulationArea * insulationPrice;
412
- break;
413
-
414
- case 'brick':
415
- const brickPrice = parseFloat(document.getElementById('brickPrice').value) || 0.85;
416
- const mortarPrice = parseFloat(document.getElementById('mortarPrice').value) || 0.35;
417
- const bricksPerM3 = 500; // Approximate bricks per m鲁
418
- materialQuantity = wallVolume * bricksPerM3;
419
- const mortarQuantity = wallVolume * 300; // kg per m鲁
420
- mainMaterialCost = materialQuantity * brickPrice;
421
- secondaryMaterialCost = mortarQuantity * mortarPrice;
422
- break;
423
-
424
- case 'concrete':
425
- const concretePrice = parseFloat(document.getElementById('concretePrice').value) || 95;
426
- const rebarPrice = parseFloat(document.getElementById('rebarPrice').value) || 1.20;
427
- materialVolume = wallVolume;
428
- const rebarQuantity = wallVolume * 100; // kg per m鲁
429
- mainMaterialCost = materialVolume * concretePrice;
430
- secondaryMaterialCost = rebarQuantity * rebarPrice;
431
- break;
432
-
433
- case 'steel':
434
- const steelPrice = parseFloat(document.getElementById('steelPrice').value) || 2.50;
435
- const coatingPrice = parseFloat(document.getElementById('coatingPrice').value) || 18;
436
- const steelWeight = wallVolume * 7850 * 0.15; // Steel density * volume * frame ratio
437
- const coatingArea = perimeter * wallHeight * numFloors * 2; // Both sides
438
- mainMaterialCost = steelWeight * steelPrice;
439
- secondaryMaterialCost = coatingArea * coatingPrice;
440
- break;
441
-
442
- case 'custom':
443
- const customMainPrice = parseFloat(document.getElementById('customMainPrice').value) || 0;
444
- mainMaterialCost = wallVolume * customMainPrice;
445
- secondaryMaterialCost = 0;
446
- break;
447
- }
448
- // Additional materials
449
- let additionalMaterialsCost = 0;
450
- if (document.getElementById('waterproofing') && document.getElementById('waterproofing').checked) {
451
- additionalMaterialsCost += parseFloat(document.getElementById('waterproofingCost').value) || 0;
452
- }
453
- if (document.getElementById('insulation') && document.getElementById('insulation').checked && materialType !== 'wood') {
454
- additionalMaterialsCost += parseFloat(document.getElementById('insulationCost').value) || 0;
455
- }
456
- if (document.getElementById('plaster') && document.getElementById('plaster').checked) {
457
- additionalMaterialsCost += parseFloat(document.getElementById('plasterCost').value) || 0;
458
- }
459
- const totalMaterials = mainMaterialCost + secondaryMaterialCost + additionalMaterialsCost;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
460
 
461
  // Labor cost
462
  const laborCost = laborRate * constructionDays;
 
463
  // Additional costs
464
  let additionalCosts = 0;
465
  if (document.getElementById('permits') && document.getElementById('permits').checked) {
@@ -474,10 +537,11 @@ const totalMaterials = mainMaterialCost + secondaryMaterialCost + additionalMate
474
  if (document.getElementById('equipment') && document.getElementById('equipment').checked) {
475
  additionalCosts += parseFloat(document.getElementById('equipmentCost').value) || 0;
476
  }
477
- // Architect fees (8% of materials + labor)
 
478
  let architectFees = 0;
479
  if (document.getElementById('architectFees') && document.getElementById('architectFees').checked) {
480
- architectFees = (totalMaterials + laborCost) * 0.08;
481
  document.getElementById('architectCost').value = architectFees.toFixed(2);
482
  }
483
  additionalCosts += architectFees;
@@ -485,76 +549,73 @@ const totalMaterials = mainMaterialCost + secondaryMaterialCost + additionalMate
485
  // Contingency (10% of total so far)
486
  let contingency = 0;
487
  if (document.getElementById('contingency') && document.getElementById('contingency').checked) {
488
- contingency = (totalMaterials + laborCost + additionalCosts) * 0.1;
489
  }
490
 
491
- const totalCost = totalMaterials + laborCost + additionalCosts + contingency;
492
  const costPerSqm = floorArea > 0 ? totalCost / floorArea : 0;
493
 
494
  // Update UI
495
- document.getElementById('materialsCost').textContent = totalMaterials.toFixed(2) + ' z艂';
496
  document.getElementById('laborCost').textContent = laborCost.toFixed(2) + ' z艂';
497
  document.getElementById('additionalCost').textContent = (additionalCosts + contingency).toFixed(2) + ' z艂';
498
  document.getElementById('totalCost').textContent = totalCost.toFixed(2) + ' z艂';
499
- // Update material details based on selected type
500
- let mainMaterialLabel = 'Hempcret:';
501
- let secondaryMaterialLabel = 'Spoiwo Wapienne:';
502
- let mainMaterialValue = mainMaterialCost.toFixed(2) + ' z艂';
503
- let secondaryMaterialValue = secondaryMaterialCost.toFixed(2) + ' z艂';
504
- let volumeLabel = 'Szacowana Obj臋to艣膰 Materia艂u:';
505
- let volumeValue = wallVolume.toFixed(2) + ' m鲁';
506
 
507
- switch(materialType) {
508
- case 'wood':
509
- mainMaterialLabel = 'Drewno:';
510
- secondaryMaterialLabel = 'Izolacja:';
511
- volumeLabel = 'Szacowana Obj臋to艣膰 Drewna:';
512
- volumeValue = materialVolume.toFixed(2) + ' m鲁';
513
- break;
514
- case 'brick':
515
- mainMaterialLabel = 'Ceg艂y:';
516
- secondaryMaterialLabel = 'Zaprawa:';
517
- volumeLabel = 'Szacowana Ilo艣膰 Cegie艂:';
518
- volumeValue = Math.round(materialQuantity) + ' sztuk';
519
- break;
520
- case 'concrete':
521
- mainMaterialLabel = 'Beton:';
522
- secondaryMaterialLabel = 'Zbrojenie:';
523
- break;
524
- case 'steel':
525
- mainMaterialLabel = 'Stal:';
526
- secondaryMaterialLabel = 'Pow艂oka Antykorozyjna:';
527
- volumeLabel = 'Szacowana Waga Stali:';
528
- volumeValue = (wallVolume * 7850 * 0.15).toFixed(0) + ' kg';
529
- break;
530
- case 'custom':
531
- mainMaterialLabel = 'G艂贸wny Materia艂:';
532
- secondaryMaterialLabel = 'Dodatkowe Materia艂y:';
533
- break;
534
- }
535
- document.getElementById('hempCostDetail').textContent = mainMaterialValue;
536
- document.getElementById('limeCostDetail').textContent = secondaryMaterialValue;
537
- document.getElementById('additionalMaterialsDetail').textContent = additionalMaterialsCost.toFixed(2) + ' z艂';
538
- document.getElementById('totalMaterialsDetail').textContent = totalMaterials.toFixed(2) + ' z艂';
539
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
540
  document.getElementById('laborDetail').textContent = laborCost.toFixed(2) + ' z艂';
541
  document.getElementById('servicesDetail').textContent = additionalCosts.toFixed(2) + ' z艂';
542
  document.getElementById('contingencyDetail').textContent = contingency.toFixed(2) + ' z艂';
543
- document.getElementById('hempVolume').textContent = volumeValue;
544
- document.getElementById('limeQuantity').textContent = materialType === 'hempcrete' ? (wallVolume * 200).toFixed(0) + ' kg' : 'N/A';
545
  document.getElementById('durationDetail').textContent = constructionDays + ' dni';
546
  document.getElementById('costPerSqm').textContent = costPerSqm.toFixed(2) + ' z艂/m虏';
547
 
548
- // Update labels in results section
549
- document.querySelector('#hempCostDetail').parentNode.firstChild.textContent = mainMaterialLabel;
550
- document.querySelector('#limeCostDetail').parentNode.firstChild.textContent = secondaryMaterialLabel;
551
- document.querySelector('#hempVolume').parentNode.firstChild.textContent = volumeLabel;
552
-
553
  // Show results
554
  document.getElementById('results-section').classList.remove('hidden');
555
  document.getElementById('results-section').scrollIntoView({ behavior: 'smooth' });
556
  }
557
- // Save project data
 
558
  function saveProjectData() {
559
  try {
560
  const projectData = {
@@ -563,29 +624,9 @@ document.getElementById('hempCostDetail').textContent = mainMaterialValue;
563
  numFloors: document.getElementById('numFloors').value,
564
  wallThickness: document.getElementById('wallThickness').value,
565
  location: document.getElementById('location').value,
566
- materialType: document.getElementById('materialType').value,
567
- // Material prices
568
- hempPrice: document.getElementById('hempPrice').value,
569
- limePrice: document.getElementById('limePrice').value,
570
- woodPrice: document.getElementById('woodPrice').value,
571
- insulationPrice: document.getElementById('insulationPrice').value,
572
- brickPrice: document.getElementById('brickPrice').value,
573
- mortarPrice: document.getElementById('mortarPrice').value,
574
- concretePrice: document.getElementById('concretePrice').value,
575
- rebarPrice: document.getElementById('rebarPrice').value,
576
- steelPrice: document.getElementById('steelPrice').value,
577
- coatingPrice: document.getElementById('coatingPrice').value,
578
- customMainPrice: document.getElementById('customMainPrice').value,
579
- customUnit: document.getElementById('customUnit').value,
580
  laborRate: document.getElementById('laborRate').value,
581
  constructionDays: document.getElementById('constructionDays').value,
582
- // Additional materials
583
- waterproofing: document.getElementById('waterproofing').checked,
584
- waterproofingCost: document.getElementById('waterproofingCost').value,
585
- insulation: document.getElementById('insulation').checked,
586
- insulationCost: document.getElementById('insulationCost').value,
587
- plaster: document.getElementById('plaster').checked,
588
- plasterCost: document.getElementById('plasterCost').value,
589
  // Additional options
590
  architectFees: document.getElementById('architectFees').checked,
591
  architectCost: document.getElementById('architectCost').value,
@@ -632,7 +673,8 @@ document.getElementById('hempCostDetail').textContent = mainMaterialValue;
632
  alert('Wyst膮pi艂 b艂膮d podczas zapisywania projektu. Spr贸buj ponownie.');
633
  }
634
  }
635
- // Load project data
 
636
  function loadProjectData() {
637
  try {
638
  const savedData = localStorage.getItem('hempcostProject');
@@ -645,35 +687,22 @@ document.getElementById('hempCostDetail').textContent = mainMaterialValue;
645
  document.getElementById('numFloors').value = data.numFloors || '';
646
  document.getElementById('wallThickness').value = data.wallThickness || '30';
647
  document.getElementById('location').value = data.location || '';
648
- document.getElementById('materialType').value = data.materialType || 'hempcrete';
649
-
650
- // Update material sections visibility first
651
- updateMaterialSections();
652
-
653
- // Material prices - only set values for visible fields
654
- if (document.getElementById('hempPrice')) document.getElementById('hempPrice').value = data.hempPrice || '120';
655
- if (document.getElementById('limePrice')) document.getElementById('limePrice').value = data.limePrice || '0.45';
656
- if (document.getElementById('woodPrice')) document.getElementById('woodPrice').value = data.woodPrice || '450';
657
- if (document.getElementById('insulationPrice')) document.getElementById('insulationPrice').value = data.insulationPrice || '25';
658
- if (document.getElementById('brickPrice')) document.getElementById('brickPrice').value = data.brickPrice || '0.85';
659
- if (document.getElementById('mortarPrice')) document.getElementById('mortarPrice').value = data.mortarPrice || '0.35';
660
- if (document.getElementById('concretePrice')) document.getElementById('concretePrice').value = data.concretePrice || '95';
661
- if (document.getElementById('rebarPrice')) document.getElementById('rebarPrice').value = data.rebarPrice || '1.20';
662
- if (document.getElementById('steelPrice')) document.getElementById('steelPrice').value = data.steelPrice || '2.50';
663
- if (document.getElementById('coatingPrice')) document.getElementById('coatingPrice').value = data.coatingPrice || '18';
664
- if (document.getElementById('customMainPrice')) document.getElementById('customMainPrice').value = data.customMainPrice || '';
665
- if (document.getElementById('customUnit')) document.getElementById('customUnit').value = data.customUnit || '';
666
-
667
  document.getElementById('laborRate').value = data.laborRate || '250';
668
  document.getElementById('constructionDays').value = data.constructionDays || '';
669
 
670
- // Additional materials
671
- document.getElementById('waterproofing').checked = Boolean(data.waterproofing);
672
- document.getElementById('waterproofingCost').value = data.waterproofingCost || '850';
673
- document.getElementById('insulation').checked = Boolean(data.insulation);
674
- document.getElementById('insulationCost').value = data.insulationCost || '1200';
675
- document.getElementById('plaster').checked = Boolean(data.plaster);
676
- document.getElementById('plasterCost').value = data.plasterCost || '1800';
 
 
 
 
 
 
677
 
678
  // Additional options
679
  document.getElementById('architectFees').checked = Boolean(data.architectFees);
@@ -688,9 +717,6 @@ document.getElementById('hempCostDetail').textContent = mainMaterialValue;
688
  document.getElementById('equipmentCost').value = data.equipmentCost || '2000';
689
  document.getElementById('contingency').checked = data.contingency !== false;
690
 
691
- // Update material sections visibility again after loading all data
692
- setTimeout(updateMaterialSections, 100);
693
-
694
  alert('Dane projektu zosta艂y pomy艣lnie wczytane!');
695
  } else {
696
  alert('Nie znaleziono zapisanych danych projektu.');
@@ -700,16 +726,14 @@ document.getElementById('hempCostDetail').textContent = mainMaterialValue;
700
  alert('Wyst膮pi艂 b艂膮d podczas wczytywania projektu. Sprawd藕 konsol臋 przegl膮darki.');
701
  }
702
  }
 
703
  // Event Listeners
 
704
  document.getElementById('calculateBtn').addEventListener('click', calculateEstimate);
705
  document.getElementById('saveProjectBtn').addEventListener('click', saveProjectData);
706
  document.getElementById('loadProjectBtn').addEventListener('click', loadProjectData);
707
- // Material type change listener
708
- document.getElementById('materialType').addEventListener('change', function() {
709
- updateMaterialSections();
710
- calculateEstimate();
711
- });
712
- // Auto-calculate architect fees when toggled
713
  document.getElementById('architectFees').addEventListener('change', function() {
714
  if (this.checked) {
715
  calculateEstimate(); // Recalculate to update architect fees
@@ -722,12 +746,10 @@ document.getElementById('hempCostDetail').textContent = mainMaterialValue;
722
  const constructionDays = Math.max(14, Math.ceil(area / 20)); // Rough estimate
723
  document.getElementById('constructionDays').value = constructionDays;
724
  });
 
725
  // Add event listeners for all input fields to trigger calculations
726
  const inputFields = [
727
  'floorArea', 'numFloors', 'wallThickness', 'laborRate', 'constructionDays',
728
- 'hempPrice', 'limePrice', 'woodPrice', 'insulationPrice', 'brickPrice',
729
- 'mortarPrice', 'concretePrice', 'rebarPrice', 'steelPrice', 'coatingPrice',
730
- 'customMainPrice', 'waterproofingCost', 'insulationCost', 'plasterCost',
731
  'permitsCost', 'wasteCost', 'transportCost', 'equipmentCost'
732
  ];
733
 
@@ -742,26 +764,9 @@ document.getElementById('hempCostDetail').textContent = mainMaterialValue;
742
  }
743
  });
744
 
745
- // Add event listeners for material-specific inputs
746
- const materialInputs = [
747
- 'hempPrice', 'limePrice', 'woodPrice', 'insulationPrice', 'brickPrice',
748
- 'mortarPrice', 'concretePrice', 'rebarPrice', 'steelPrice', 'coatingPrice',
749
- 'customMainPrice'
750
- ];
751
-
752
- materialInputs.forEach(fieldId => {
753
- const field = document.getElementById(fieldId);
754
- if (field) {
755
- field.addEventListener('input', function() {
756
- clearTimeout(window.calcTimeout);
757
- window.calcTimeout = setTimeout(calculateEstimate, 500);
758
- });
759
- }
760
- });
761
  // Add event listeners for checkboxes
762
  const checkboxes = [
763
- 'waterproofing', 'insulation', 'plaster', 'permits', 'wasteManagement',
764
- 'transportation', 'equipment', 'architectFees', 'contingency'
765
  ];
766
 
767
  checkboxes.forEach(checkboxId => {
@@ -771,14 +776,6 @@ document.getElementById('hempCostDetail').textContent = mainMaterialValue;
771
  }
772
  });
773
 
774
- // Add specific listeners for material checkboxes
775
- const materialCheckboxes = ['waterproofing', 'insulation', 'plaster'];
776
- materialCheckboxes.forEach(checkboxId => {
777
- const checkbox = document.getElementById(checkboxId);
778
- if (checkbox) {
779
- checkbox.addEventListener('change', calculateEstimate);
780
- }
781
- });
782
  // Load saved data on page load
783
  window.addEventListener('load', () => {
784
  const savedData = localStorage.getItem('hempcostProject');
@@ -787,10 +784,11 @@ document.getElementById('hempCostDetail').textContent = mainMaterialValue;
787
  // loadProjectData();
788
  }
789
 
790
- // Initialize material sections
791
- updateMaterialSections();
 
 
792
  });
793
- </script>
794
  </body>
795
  </html>
796
-
 
22
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
23
  background: #94a3b8;
24
  }
25
+ .material-item {
26
+ transition: all 0.3s ease;
27
+ }
28
+ .material-item:hover {
29
+ transform: translateY(-2px);
30
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
31
+ }
32
  </style>
33
  </head>
34
  <body class="bg-gradient-to-br from-emerald-50 to-green-50 min-h-screen p-4">
35
+ <div class="max-w-6xl mx-auto">
36
+ <!-- Header -->
37
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
38
+ <div class="flex items-center space-x-2 mb-4">
39
+ <i data-feather="leaf" class="text-emerald-600"></i>
40
+ <h1 class="text-2xl font-bold text-emerald-800">HempCost Estimator Pro</h1>
41
+ </div>
42
+ <p class="text-emerald-700">Oblicz koszty projektu z hempcretem z precyzj膮 i ekologiczn膮 inteligencj膮</p>
43
+ </div>
44
+ </div>
45
+
46
+ <!-- Calculator Form -->
47
+ <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
48
+ <div class="grid md:grid-cols-2 gap-8">
49
+ <!-- Project Details -->
50
+ <div>
51
+ <h3 class="text-2xl font-semibold text-emerald-800 mb-6 flex items-center">
52
+ <i data-feather="clipboard" class="mr-2"></i>
53
+ Informacje o Projekcie
54
+ </h3>
55
+ <div class="space-y-4">
56
+ <div>
57
+ <label class="block text-sm font-medium text-emerald-700 mb-2">Typ Projektu</label>
58
+ <select id="projectType" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
59
+ <option value="new-building">Nowy Budynek</option>
60
+ <option value="renovation">Rekonstrukcja</option>
61
+ <option value="flat-apartment">Mieszkanie</option>
62
+ <option value="extension">Rozbudowa</option>
63
+ <option value="commercial">Przestrze艅 Komercyjna</option>
64
+ </select>
65
+ </div>
66
+ <div>
67
+ <label class="block text-sm font-medium text-emerald-700 mb-2">Ca艂kowita Powierzchnia (m虏)</label>
68
+ <input type="number" id="floorArea" placeholder="Wprowad藕 powierzchni臋" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
69
+ </div>
70
+ <div>
71
+ <label class="block text-sm font-medium text-emerald-700 mb-2">Liczba Pi臋ter</label>
72
+ <input type="number" id="numFloors" placeholder="Wprowad藕 liczb臋" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
73
+ </div>
74
+ <div>
75
+ <label class="block text-sm font-medium text-emerald-700 mb-2">Grubo艣膰 艢cian (cm)</label>
76
+ <input type="number" id="wallThickness" placeholder="np. 30" value="30" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
77
+ </div>
78
+ <div>
79
+ <label class="block text-sm font-medium text-emerald-700 mb-2">Lokalizacja/Region</label>
80
+ <input type="text" id="location" placeholder="Wprowad藕 lokalizacj臋" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
81
+ </div>
82
+ </div>
83
+ </div>
84
+
85
+ <!-- Material Selection -->
86
+ <div>
87
+ <h3 class="text-2xl font-semibold text-emerald-800 mb-6 flex items-center">
88
+ <i data-feather="package" class="mr-2"></i>
89
+ Wyb贸r Materia艂贸w
90
+ </h3>
91
+
92
+ <!-- Material Selection Controls -->
93
+ <div class="mb-6">
94
+ <label class="block text-sm font-medium text-emerald-700 mb-2">Dodaj Materia艂</label>
95
+ <div class="flex gap-2">
96
+ <select id="materialSelector" class="flex-1 px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
97
+ <option value="hempcrete">Hempcret</option>
98
+ <option value="wood">Drewno (Frame Construction)</option>
99
+ <option value="brick">Ceg艂a</option>
100
+ <option value="concrete">Beton</option>
101
+ <option value="steel">Konstrukcja Stalowa</option>
102
+ <option value="custom">Niestandardowy</option>
103
+ </select>
104
+ <button id="addMaterialBtn" class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg transition duration-200">
105
+ <i data-feather="plus" class="w-5 h-5"></i>
106
+ </button>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Selected Materials List -->
111
+ <div id="selectedMaterialsContainer" class="space-y-4">
112
+ <!-- Selected materials will be added here dynamically -->
113
+ </div>
114
+
115
+ <!-- Labor and Additional Options -->
116
+ <div class="mt-8 pt-6 border-t border-emerald-100">
117
+ <h4 class="text-lg font-semibold text-emerald-800 mb-4">Koszty Robocizny</h4>
118
+ <div class="space-y-4">
119
  <div>
120
+ <label class="block text-sm font-medium text-emerald-700 mb-2">Koszty Robocizny (z艂/dzie艅)</label>
121
+ <input type="number" id="laborRate" placeholder="Wprowad藕 stawk臋 dzienn膮" value="250" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
122
  </div>
123
  <div>
124
+ <label class="block text-sm font-medium text-emerald-700 mb-2">Szacowane Dni Budowy</label>
125
+ <input type="number" id="constructionDays" placeholder="Wprowad藕 dni" class="w-full px-4 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
126
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
127
  </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
 
132
+ <!-- Additional Options -->
133
+ <div class="mt-8 border-t border-emerald-100 pt-6">
134
+ <h3 class="text-xl font-semibold text-emerald-800 mb-4 flex items-center">
135
+ <i data-feather="settings" class="mr-2"></i>
136
+ Dodatkowe Opcje
137
+ </h3>
138
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
139
+ <div class="flex items-center justify-between">
140
+ <div class="flex items-center space-x-2">
141
+ <input type="checkbox" id="architectFees" class="rounded text-emerald-600">
142
+ <span class="text-sm">Honorarium Architekta (8%)</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
143
  </div>
144
+ <input type="number" id="architectCost" placeholder="z艂" class="w-20 px-2 py-1 border border-emerald-200 rounded text-sm">
145
+ </div>
146
+ <div class="flex items-center justify-between">
147
+ <div class="flex items-center space-x-2">
148
+ <input type="checkbox" id="permits" class="rounded text-emerald-600">
149
+ <span class="text-sm">Pozwolenia i Licencje</span>
150
+ </div>
151
+ <input type="number" id="permitsCost" placeholder="z艂" class="w-20 px-2 py-1 border border-emerald-200 rounded text-sm" value="1500">
152
+ </div>
153
+ <div class="flex items-center justify-between">
154
+ <div class="flex items-center space-x-2">
155
+ <input type="checkbox" id="wasteManagement" class="rounded text-emerald-600">
156
+ <span class="text-sm">Zarz膮dzanie Odpadami</span>
157
+ </div>
158
+ <input type="number" id="wasteCost" placeholder="z艂" class="w-20 px-2 py-1 border border-emerald-200 rounded text-sm" value="800">
159
+ </div>
160
+ <div class="flex items-center justify-between">
161
+ <div class="flex items-center space-x-2">
162
+ <input type="checkbox" id="transportation" class="rounded text-emerald-600">
163
+ <span class="text-sm">Transport</span>
164
+ </div>
165
+ <input type="number" id="transportCost" placeholder="z艂" class="w-20 px-2 py-1 border border-emerald-200 rounded text-sm" value="1200">
166
+ </div>
167
+ <div class="flex items-center justify-between">
168
+ <div class="flex items-center space-x-2">
169
+ <input type="checkbox" id="equipment" class="rounded text-emerald-600">
170
+ <span class="text-sm">Wynajem Sprz臋tu</span>
171
+ </div>
172
+ <input type="number" id="equipmentCost" placeholder="z艂" class="w-20 px-2 py-1 border border-emerald-200 rounded text-sm" value="2000">
173
+ </div>
174
+ <div class="flex items-center justify-between">
175
+ <div class="flex items-center space-x-2">
176
+ <input type="checkbox" id="contingency" class="rounded text-emerald-600" checked>
177
+ <span class="text-sm">Rezerwa (10%)</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
178
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
179
  </div>
 
 
 
 
 
 
180
  </div>
181
+ </div>
182
+
183
+ <!-- Calculate Button -->
184
+ <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
185
+ <button id="calculateBtn" class="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold py-3 px-8 rounded-lg transition duration-200 flex items-center justify-center">
186
+ <i data-feather="calculator" class="mr-2"></i>
187
+ Oblicz Kosztorys
188
+ </button>
189
+ <button id="saveProjectBtn" class="bg-emerald-500 hover:bg-emerald-600 text-white font-semibold py-3 px-8 rounded-lg transition duration-200 flex items-center justify-center">
190
+ <i data-feather="save" class="mr-2"></i>
191
+ Zapisz Projekt
192
+ </button>
193
+ <button id="loadProjectBtn" class="bg-emerald-400 hover:bg-emerald-500 text-white font-semibold py-3 px-8 rounded-lg transition duration-200 flex items-center justify-center">
194
+ <i data-feather="folder" class="mr-2"></i>
195
+ Wczytaj Projekt
196
+ </button>
197
  </div>
198
  </div>
199
 
200
+ <!-- Results Section -->
201
+ <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 mt-8 hidden" id="results-section">
202
+ <h3 class="text-2xl font-semibold text-emerald-800 mb-6 text-center">
203
+ <i data-feather="dollar-sign" class="mr-2"></i>
204
+ Szacowane Koszty
205
+ </h3>
206
+ <div class="grid md:grid-cols-4 gap-6">
207
+ <div class="text-center p-6 bg-emerald-50 rounded-xl">
208
+ <div class="text-3xl font-bold text-emerald-700" id="materialsCost">0 z艂</div>
209
+ <p class="text-sm text-emerald-600 mt-2">Koszty Materia艂贸w</p>
210
+ </div>
211
+ <div class="text-center p-6 bg-emerald-50 rounded-xl">
212
+ <div class="text-3xl font-bold text-emerald-700" id="laborCost">0 z艂</div>
213
+ <p class="text-sm text-emerald-600 mt-2">Koszty Robocizny</p>
214
+ </div>
215
+ <div class="text-center p-6 bg-emerald-50 rounded-xl">
216
+ <div class="text-3xl font-bold text-emerald-700" id="additionalCost">0 z艂</div>
217
+ <p class="text-sm text-emerald-600 mt-2">Dodatkowe Koszty</p>
218
+ </div>
219
+ <div class="text-center p-6 bg-emerald-100 rounded-xl border-2 border-emerald-300">
220
+ <div class="text-3xl font-bold text-emerald-800" id="totalCost">0 z艂</div>
221
+ <p class="text-sm text-emerald-700 mt-2">Razem Szacowany</p>
222
+ </div>
223
+ </div>
224
+ <div class="mt-8 grid md:grid-cols-2 gap-6">
225
+ <div class="p-4 bg-emerald-50 rounded-lg">
226
+ <h4 class="font-semibold text-emerald-800 mb-3 flex items-center">
227
+ <i data-feather="package" class="mr-2 w-4 h-4"></i>
228
+ Szczeg贸艂y Materia艂贸w
229
+ </h4>
230
+ <div class="text-sm text-emerald-700 space-y-2" id="materialsDetailsContainer">
231
+ <!-- Material details will be added here dynamically -->
232
+ </div>
233
+ </div>
234
+
235
+ <div class="p-4 bg-emerald-50 rounded-lg">
236
+ <h4 class="font-semibold text-emerald-800 mb-3 flex items-center">
237
+ <i data-feather="tool" class="mr-2 w-4 h-4"></i>
238
+ Robocizna i Dodatkowe Koszty
239
+ </h4>
240
+ <div class="text-sm text-emerald-700 space-y-2">
241
+ <div class="flex justify-between">
242
+ <span>Robocizna:</span>
243
+ <span id="laborDetail">0 z艂</span>
244
+ </div>
245
+ <div class="flex justify-between">
246
+ <span>Dodatkowe Us艂ugi:</span>
247
+ <span id="servicesDetail">0 z艂</span>
248
+ </div>
249
+ <div class="flex justify-between">
250
+ <span>Rezerwa (10%):</span>
251
+ <span id="contingencyDetail">0 z艂</span>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ <div class="mt-6 p-4 bg-emerald-100 rounded-lg">
257
+ <h4 class="font-semibold text-emerald-800 mb-3 flex items-center">
258
+ <i data-feather="info" class="mr-2 w-4 h-4"></i>
259
+ Podsumowanie Projektu
260
+ </h4>
261
+ <div class="text-sm text-emerald-700 space-y-2">
262
+ <div class="flex justify-between">
263
+ <span>Czas Trwania Budowy:</span>
264
+ <span id="durationDetail">0 dni</span>
265
+ </div>
266
+ <div class="flex justify-between">
267
+ <span>Koszt za m虏:</span>
268
+ <span id="costPerSqm">0 z艂/m虏</span>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
  <script>
274
  // Initialize Feather Icons
275
  feather.replace();
276
+
277
+ // Global variables to store materials
278
+ let selectedMaterials = [];
279
+ const materialTemplates = {
280
+ hempcrete: {
281
+ id: 'hempcrete',
282
+ name: 'Hempcret',
283
+ inputs: [
284
+ { id: 'hempPrice', label: 'Cena Hempcretu za m鲁 (z艂)', type: 'number', value: '120' },
285
+ { id: 'limePrice', label: 'Cena Spoiwa Wapiennego za kg (z艂)', type: 'number', value: '0.45' }
286
+ ]
287
+ },
288
+ wood: {
289
+ id: 'wood',
290
+ name: 'Drewno (Frame Construction)',
291
+ inputs: [
292
+ { id: 'woodPrice', label: 'Cena Drewna za m鲁 (z艂)', type: 'number', value: '450' },
293
+ { id: 'insulationPrice', label: 'Cena Izolacji za m虏 (z艂)', type: 'number', value: '25' }
294
+ ]
295
+ },
296
+ brick: {
297
+ id: 'brick',
298
+ name: 'Ceg艂a',
299
+ inputs: [
300
+ { id: 'brickPrice', label: 'Cena Cegie艂 za sztuk臋 (z艂)', type: 'number', value: '0.85' },
301
+ { id: 'mortarPrice', label: 'Cena Zaprawy za kg (z艂)', type: 'number', value: '0.35' }
302
+ ]
303
+ },
304
+ concrete: {
305
+ id: 'concrete',
306
+ name: 'Beton',
307
+ inputs: [
308
+ { id: 'concretePrice', label: 'Cena Betonu za m鲁 (z艂)', type: 'number', value: '95' },
309
+ { id: 'rebarPrice', label: 'Cena Zbrojenia za kg (z艂)', type: 'number', value: '1.20' }
310
+ ]
311
+ },
312
+ steel: {
313
+ id: 'steel',
314
+ name: 'Konstrukcja Stalowa',
315
+ inputs: [
316
+ { id: 'steelPrice', label: 'Cena Stali za kg (z艂)', type: 'number', value: '2.50' },
317
+ { id: 'coatingPrice', label: 'Cena Pow艂oki Antykorozyjnej za m虏 (z艂)', type: 'number', value: '18' }
318
+ ]
319
+ },
320
+ custom: {
321
+ id: 'custom',
322
+ name: 'Niestandardowy',
323
+ inputs: [
324
+ { id: 'customMainPrice', label: 'Cena G艂贸wnego Materia艂u za jednostk臋 (z艂)', type: 'number', value: '' },
325
+ { id: 'customUnit', label: 'Jednostka miary', type: 'text', value: '' }
326
+ ]
327
+ }
328
+ };
329
+
330
+ // Add material to the list
331
+ function addMaterial() {
332
+ const materialSelector = document.getElementById('materialSelector');
333
+ const materialType = materialSelector.value;
334
+ const materialId = `${materialType}_${Date.now()}`; // Unique ID
335
 
336
+ // Create material object
337
+ const material = {
338
+ id: materialId,
339
+ type: materialType,
340
+ name: materialTemplates[materialType].name,
341
+ inputs: JSON.parse(JSON.stringify(materialTemplates[materialType].inputs)) // Deep copy
342
+ };
343
+
344
+ // Add to selected materials array
345
+ selectedMaterials.push(material);
346
 
347
+ // Render the material in the UI
348
+ renderSelectedMaterials();
349
+ }
350
+
351
+ // Remove material from the list
352
+ function removeMaterial(materialId) {
353
+ selectedMaterials = selectedMaterials.filter(m => m.id !== materialId);
354
+ renderSelectedMaterials();
355
+ }
356
+
357
+ // Render selected materials
358
+ function renderSelectedMaterials() {
359
+ const container = document.getElementById('selectedMaterialsContainer');
360
+ container.innerHTML = '';
361
+
362
+ if (selectedMaterials.length === 0) {
363
+ container.innerHTML = '<p class="text-emerald-600 text-center py-4">Nie wybrano jeszcze 偶adnych materia艂贸w</p>';
364
+ return;
365
  }
366
+
367
+ selectedMaterials.forEach(material => {
368
+ const materialDiv = document.createElement('div');
369
+ materialDiv.className = 'material-item bg-emerald-50 rounded-xl p-4 border border-emerald-200';
370
+ materialDiv.dataset.materialId = material.id;
371
+
372
+ let inputsHTML = '';
373
+ material.inputs.forEach(input => {
374
+ inputsHTML += `
375
+ <div class="mb-3">
376
+ <label class="block text-sm font-medium text-emerald-700 mb-1">${input.label}</label>
377
+ <input
378
+ type="${input.type}"
379
+ id="${input.id}_${material.id}"
380
+ placeholder="Wprowad藕 ${input.type === 'number' ? 'cen臋' : 'warto艣膰'}"
381
+ value="${input.value}"
382
+ class="w-full px-3 py-2 border border-emerald-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm"
383
+ >
384
+ </div>
385
+ `;
386
+ });
387
+
388
+ materialDiv.innerHTML = `
389
+ <div class="flex justify-between items-center mb-3">
390
+ <h4 class="font-semibold text-emerald-800">${material.name}</h4>
391
+ <button
392
+ onclick="removeMaterial('${material.id}')"
393
+ class="text-red-500 hover:text-red-700"
394
+ title="Usu艅 materia艂"
395
+ >
396
+ <i data-feather="x-circle" class="w-5 h-5"></i>
397
+ </button>
398
+ </div>
399
+ ${inputsHTML}
400
+ `;
401
+
402
+ container.appendChild(materialDiv);
403
+ });
404
+
405
+ // Reinitialize feather icons
406
+ feather.replace();
407
  }
408
+
409
+ // Advanced Calculation Logic
410
  function calculateEstimate() {
411
  // Get input values
412
  const floorArea = parseFloat(document.getElementById('floorArea').value) || 0;
 
414
  const wallThickness = parseFloat(document.getElementById('wallThickness').value) || 30;
415
  const laborRate = parseFloat(document.getElementById('laborRate').value) || 250;
416
  const constructionDays = parseInt(document.getElementById('constructionDays').value) || 30;
417
+
418
+ // Validate required fields
419
+ if (!floorArea || !numFloors) {
420
+ alert('Prosz臋 wype艂ni膰 wymagane pola: Powierzchnia i Liczba Pi臋ter');
421
+ return;
422
+ }
423
 
424
  // Calculate volume and quantities
425
  const wallHeight = 2.5; // Standard wall height in meters
426
  const perimeter = Math.sqrt(floorArea) * 4; // Simplified perimeter calculation
427
  const wallVolume = perimeter * wallHeight * numFloors * (wallThickness / 100);
428
 
429
+ // Initialize totals
430
+ let totalMaterialsCost = 0;
431
+ let materialsDetails = [];
432
+
433
+ // Calculate costs for each selected material
434
+ selectedMaterials.forEach(material => {
435
+ let mainMaterialCost = 0;
436
+ let secondaryMaterialCost = 0;
437
+ let materialVolume = 0;
438
+ let materialQuantity = 0;
439
+ let volumeValue = '0';
440
+ let volumeLabel = 'Obj臋to艣膰:';
441
+
442
+ // Calculate costs based on material type
443
+ switch(material.type) {
444
+ case 'hempcrete':
445
+ const hempPrice = parseFloat(document.getElementById(`hempPrice_${material.id}`).value) || 120;
446
+ const limePrice = parseFloat(document.getElementById(`limePrice_${material.id}`).value) || 0.45;
447
+ materialVolume = wallVolume;
448
+ const limeQuantity = materialVolume * 200; // 200kg per m鲁 approximate
449
+ mainMaterialCost = materialVolume * hempPrice;
450
+ secondaryMaterialCost = limeQuantity * limePrice;
451
+ volumeValue = materialVolume.toFixed(2) + ' m鲁';
452
+ volumeLabel = 'Szacowana Obj臋to艣膰 Hempcretu:';
453
+ break;
454
+
455
+ case 'wood':
456
+ const woodPrice = parseFloat(document.getElementById(`woodPrice_${material.id}`).value) || 450;
457
+ const insulationPrice = parseFloat(document.getElementById(`insulationPrice_${material.id}`).value) || 25;
458
+ materialVolume = wallVolume * 0.3; // Wood frame uses less volume
459
+ const insulationArea = perimeter * wallHeight * numFloors;
460
+ mainMaterialCost = materialVolume * woodPrice;
461
+ secondaryMaterialCost = insulationArea * insulationPrice;
462
+ volumeValue = materialVolume.toFixed(2) + ' m鲁';
463
+ volumeLabel = 'Szacowana Obj臋to艣膰 Drewna:';
464
+ break;
465
+
466
+ case 'brick':
467
+ const brickPrice = parseFloat(document.getElementById(`brickPrice_${material.id}`).value) || 0.85;
468
+ const mortarPrice = parseFloat(document.getElementById(`mortarPrice_${material.id}`).value) || 0.35;
469
+ const bricksPerM3 = 500; // Approximate bricks per m鲁
470
+ materialQuantity = wallVolume * bricksPerM3;
471
+ const mortarQuantity = wallVolume * 300; // kg per m鲁
472
+ mainMaterialCost = materialQuantity * brickPrice;
473
+ secondaryMaterialCost = mortarQuantity * mortarPrice;
474
+ volumeValue = Math.round(materialQuantity) + ' sztuk';
475
+ volumeLabel = 'Szacowana Ilo艣膰 Cegie艂:';
476
+ break;
477
+
478
+ case 'concrete':
479
+ const concretePrice = parseFloat(document.getElementById(`concretePrice_${material.id}`).value) || 95;
480
+ const rebarPrice = parseFloat(document.getElementById(`rebarPrice_${material.id}`).value) || 1.20;
481
+ materialVolume = wallVolume;
482
+ const rebarQuantity = wallVolume * 100; // kg per m鲁
483
+ mainMaterialCost = materialVolume * concretePrice;
484
+ secondaryMaterialCost = rebarQuantity * rebarPrice;
485
+ volumeValue = materialVolume.toFixed(2) + ' m鲁';
486
+ volumeLabel = 'Szacowana Obj臋to艣膰 Betonu:';
487
+ break;
488
+
489
+ case 'steel':
490
+ const steelPrice = parseFloat(document.getElementById(`steelPrice_${material.id}`).value) || 2.50;
491
+ const coatingPrice = parseFloat(document.getElementById(`coatingPrice_${material.id}`).value) || 18;
492
+ const steelWeight = wallVolume * 7850 * 0.15; // Steel density * volume * frame ratio
493
+ const coatingArea = perimeter * wallHeight * numFloors * 2; // Both sides
494
+ mainMaterialCost = steelWeight * steelPrice;
495
+ secondaryMaterialCost = coatingArea * coatingPrice;
496
+ volumeValue = steelWeight.toFixed(0) + ' kg';
497
+ volumeLabel = 'Szacowana Waga Stali:';
498
+ break;
499
+
500
+ case 'custom':
501
+ const customMainPrice = parseFloat(document.getElementById(`customMainPrice_${material.id}`).value) || 0;
502
+ const customUnit = document.getElementById(`customUnit_${material.id}`).value || 'jednostka';
503
+ mainMaterialCost = wallVolume * customMainPrice;
504
+ volumeValue = wallVolume.toFixed(2) + ' ' + customUnit;
505
+ volumeLabel = 'Szacowana Ilo艣膰:';
506
+ break;
507
+ }
508
+
509
+ const totalMaterialCost = mainMaterialCost + secondaryMaterialCost;
510
+ totalMaterialsCost += totalMaterialCost;
511
+
512
+ // Add to materials details
513
+ materialsDetails.push({
514
+ name: material.name,
515
+ mainCost: mainMaterialCost,
516
+ secondaryCost: secondaryMaterialCost,
517
+ totalCost: totalMaterialCost,
518
+ volumeValue: volumeValue,
519
+ volumeLabel: volumeLabel
520
+ });
521
+ });
522
 
523
  // Labor cost
524
  const laborCost = laborRate * constructionDays;
525
+
526
  // Additional costs
527
  let additionalCosts = 0;
528
  if (document.getElementById('permits') && document.getElementById('permits').checked) {
 
537
  if (document.getElementById('equipment') && document.getElementById('equipment').checked) {
538
  additionalCosts += parseFloat(document.getElementById('equipmentCost').value) || 0;
539
  }
540
+
541
+ // Architect fees (8% of materials + labor)
542
  let architectFees = 0;
543
  if (document.getElementById('architectFees') && document.getElementById('architectFees').checked) {
544
+ architectFees = (totalMaterialsCost + laborCost) * 0.08;
545
  document.getElementById('architectCost').value = architectFees.toFixed(2);
546
  }
547
  additionalCosts += architectFees;
 
549
  // Contingency (10% of total so far)
550
  let contingency = 0;
551
  if (document.getElementById('contingency') && document.getElementById('contingency').checked) {
552
+ contingency = (totalMaterialsCost + laborCost + additionalCosts) * 0.1;
553
  }
554
 
555
+ const totalCost = totalMaterialsCost + laborCost + additionalCosts + contingency;
556
  const costPerSqm = floorArea > 0 ? totalCost / floorArea : 0;
557
 
558
  // Update UI
559
+ document.getElementById('materialsCost').textContent = totalMaterialsCost.toFixed(2) + ' z艂';
560
  document.getElementById('laborCost').textContent = laborCost.toFixed(2) + ' z艂';
561
  document.getElementById('additionalCost').textContent = (additionalCosts + contingency).toFixed(2) + ' z艂';
562
  document.getElementById('totalCost').textContent = totalCost.toFixed(2) + ' z艂';
 
 
 
 
 
 
 
563
 
564
+ // Update material details
565
+ const materialsDetailsContainer = document.getElementById('materialsDetailsContainer');
566
+ materialsDetailsContainer.innerHTML = '';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
567
 
568
+ materialsDetails.forEach(detail => {
569
+ const detailDiv = document.createElement('div');
570
+ detailDiv.className = 'mb-3 pb-3 border-b border-emerald-100 last:border-b-0 last:pb-0 last:mb-0';
571
+ detailDiv.innerHTML = `
572
+ <div class="font-medium text-emerald-800 mb-2">${detail.name}</div>
573
+ <div class="space-y-1 text-sm">
574
+ <div class="flex justify-between">
575
+ <span>G艂贸wny materia艂:</span>
576
+ <span>${detail.mainCost.toFixed(2)} z艂</span>
577
+ </div>
578
+ <div class="flex justify-between">
579
+ <span>Materia艂y pomocnicze:</span>
580
+ <span>${detail.secondaryCost.toFixed(2)} z艂</span>
581
+ </div>
582
+ <div class="flex justify-between font-semibold">
583
+ <span>Razem:</span>
584
+ <span>${detail.totalCost.toFixed(2)} z艂</span>
585
+ </div>
586
+ <div class="flex justify-between text-xs text-emerald-600 mt-1">
587
+ <span>${detail.volumeLabel}</span>
588
+ <span>${detail.volumeValue}</span>
589
+ </div>
590
+ </div>
591
+ `;
592
+ materialsDetailsContainer.appendChild(detailDiv);
593
+ });
594
+
595
+ // Add total materials cost
596
+ const totalDiv = document.createElement('div');
597
+ totalDiv.className = 'pt-3 mt-3 border-t border-emerald-200 font-semibold';
598
+ totalDiv.innerHTML = `
599
+ <div class="flex justify-between">
600
+ <span>艁膮czne koszty materia艂贸w:</span>
601
+ <span>${totalMaterialsCost.toFixed(2)} z艂</span>
602
+ </div>
603
+ `;
604
+ materialsDetailsContainer.appendChild(totalDiv);
605
+
606
+ // Update other details
607
  document.getElementById('laborDetail').textContent = laborCost.toFixed(2) + ' z艂';
608
  document.getElementById('servicesDetail').textContent = additionalCosts.toFixed(2) + ' z艂';
609
  document.getElementById('contingencyDetail').textContent = contingency.toFixed(2) + ' z艂';
 
 
610
  document.getElementById('durationDetail').textContent = constructionDays + ' dni';
611
  document.getElementById('costPerSqm').textContent = costPerSqm.toFixed(2) + ' z艂/m虏';
612
 
 
 
 
 
 
613
  // Show results
614
  document.getElementById('results-section').classList.remove('hidden');
615
  document.getElementById('results-section').scrollIntoView({ behavior: 'smooth' });
616
  }
617
+
618
+ // Save project data
619
  function saveProjectData() {
620
  try {
621
  const projectData = {
 
624
  numFloors: document.getElementById('numFloors').value,
625
  wallThickness: document.getElementById('wallThickness').value,
626
  location: document.getElementById('location').value,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
627
  laborRate: document.getElementById('laborRate').value,
628
  constructionDays: document.getElementById('constructionDays').value,
629
+ selectedMaterials: selectedMaterials,
 
 
 
 
 
 
630
  // Additional options
631
  architectFees: document.getElementById('architectFees').checked,
632
  architectCost: document.getElementById('architectCost').value,
 
673
  alert('Wyst膮pi艂 b艂膮d podczas zapisywania projektu. Spr贸buj ponownie.');
674
  }
675
  }
676
+
677
+ // Load project data
678
  function loadProjectData() {
679
  try {
680
  const savedData = localStorage.getItem('hempcostProject');
 
687
  document.getElementById('numFloors').value = data.numFloors || '';
688
  document.getElementById('wallThickness').value = data.wallThickness || '30';
689
  document.getElementById('location').value = data.location || '';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
690
  document.getElementById('laborRate').value = data.laborRate || '250';
691
  document.getElementById('constructionDays').value = data.constructionDays || '';
692
 
693
+ // Restore selected materials
694
+ selectedMaterials = data.selectedMaterials || [];
695
+ renderSelectedMaterials();
696
+
697
+ // Restore input values for each material
698
+ selectedMaterials.forEach(material => {
699
+ material.inputs.forEach(input => {
700
+ const inputElement = document.getElementById(`${input.id}_${material.id}`);
701
+ if (inputElement) {
702
+ inputElement.value = input.value || '';
703
+ }
704
+ });
705
+ });
706
 
707
  // Additional options
708
  document.getElementById('architectFees').checked = Boolean(data.architectFees);
 
717
  document.getElementById('equipmentCost').value = data.equipmentCost || '2000';
718
  document.getElementById('contingency').checked = data.contingency !== false;
719
 
 
 
 
720
  alert('Dane projektu zosta艂y pomy艣lnie wczytane!');
721
  } else {
722
  alert('Nie znaleziono zapisanych danych projektu.');
 
726
  alert('Wyst膮pi艂 b艂膮d podczas wczytywania projektu. Sprawd藕 konsol臋 przegl膮darki.');
727
  }
728
  }
729
+
730
  // Event Listeners
731
+ document.getElementById('addMaterialBtn').addEventListener('click', addMaterial);
732
  document.getElementById('calculateBtn').addEventListener('click', calculateEstimate);
733
  document.getElementById('saveProjectBtn').addEventListener('click', saveProjectData);
734
  document.getElementById('loadProjectBtn').addEventListener('click', loadProjectData);
735
+
736
+ // Auto-calculate architect fees when toggled
 
 
 
 
737
  document.getElementById('architectFees').addEventListener('change', function() {
738
  if (this.checked) {
739
  calculateEstimate(); // Recalculate to update architect fees
 
746
  const constructionDays = Math.max(14, Math.ceil(area / 20)); // Rough estimate
747
  document.getElementById('constructionDays').value = constructionDays;
748
  });
749
+
750
  // Add event listeners for all input fields to trigger calculations
751
  const inputFields = [
752
  'floorArea', 'numFloors', 'wallThickness', 'laborRate', 'constructionDays',
 
 
 
753
  'permitsCost', 'wasteCost', 'transportCost', 'equipmentCost'
754
  ];
755
 
 
764
  }
765
  });
766
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
767
  // Add event listeners for checkboxes
768
  const checkboxes = [
769
+ 'permits', 'wasteManagement', 'transportation', 'equipment', 'architectFees', 'contingency'
 
770
  ];
771
 
772
  checkboxes.forEach(checkboxId => {
 
776
  }
777
  });
778
 
 
 
 
 
 
 
 
 
779
  // Load saved data on page load
780
  window.addEventListener('load', () => {
781
  const savedData = localStorage.getItem('hempcostProject');
 
784
  // loadProjectData();
785
  }
786
 
787
+ // Initialize with one hempcrete material by default
788
+ if (selectedMaterials.length === 0) {
789
+ addMaterial();
790
+ }
791
  });
792
+ </script>
793
  </body>
794
  </html>