Hugging Face's logo

Spaces:
LukasBe
/
arch-services-calc
Running

App Files Community
LukasBe commited on
Commit
9e59667
·
verified ·
1 Parent(s): ff77a37

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +533 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Arch Services Calc
3
- emoji: ⚡
4
- colorFrom: green
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: arch-services-calc
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
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,533 @@
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="cs">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Architektonická kalkulačka | Odhad nákladů na projektové služby</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
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Manrope', sans-serif;
14
+ }
15
+
16
+ .slider {
17
+ -webkit-appearance: none;
18
+ width: 100%;
19
+ height: 8px;
20
+ border-radius: 4px;
21
+ background: #e5e7eb;
22
+ outline: none;
23
+ }
24
+
25
+ .slider::-webkit-slider-thumb {
26
+ -webkit-appearance: none;
27
+ appearance: none;
28
+ width: 20px;
29
+ height: 20px;
30
+ border-radius: 50%;
31
+ background: #3b82f6;
32
+ cursor: pointer;
33
+ }
34
+
35
+ .slider::-moz-range-thumb {
36
+ width: 20px;
37
+ height: 20px;
38
+ border-radius: 50%;
39
+ background: #3b82f6;
40
+ cursor: pointer;
41
+ }
42
+
43
+ .project-type-card {
44
+ transition: all 0.3s ease;
45
+ }
46
+
47
+ .project-type-card:hover {
48
+ transform: translateY(-2px);
49
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
50
+ }
51
+
52
+ .project-type-card.selected {
53
+ border-color: #3b82f6;
54
+ background-color: #eff6ff;
55
+ }
56
+
57
+ .checkbox-container input:checked ~ .checkmark {
58
+ background-color: #3b82f6;
59
+ border-color: #3b82f6;
60
+ }
61
+
62
+ .checkbox-container input:checked ~ .checkmark:after {
63
+ display: block;
64
+ }
65
+
66
+ .checkbox-container .checkmark:after {
67
+ content: "";
68
+ position: absolute;
69
+ left: 6px;
70
+ top: 2px;
71
+ width: 5px;
72
+ height: 10px;
73
+ border: solid white;
74
+ border-width: 0 2px 2px 0;
75
+ transform: rotate(45deg);
76
+ }
77
+
78
+ .fade-in {
79
+ animation: fadeIn 0.5s ease-in-out;
80
+ }
81
+
82
+ @keyframes fadeIn {
83
+ from { opacity: 0; transform: translateY(10px); }
84
+ to { opacity: 1; transform: translateY(0); }
85
+ }
86
+ </style>
87
+ </head>
88
+ <body class="bg-gray-50 text-gray-800">
89
+ <div class="container mx-auto px-4 py-8 max-w-md">
90
+ <header class="mb-8 text-center">
91
+ <h1 class="text-2xl font-bold text-blue-600 mb-2">Architektonická kalkulačka</h1>
92
+ <p class="text-gray-600">Odhad nákladů na projektové služby</p>
93
+ </header>
94
+
95
+ <main class="bg-white rounded-xl shadow-md p-6 mb-8">
96
+ <!-- Step 1: Project Type -->
97
+ <section id="step1" class="mb-8">
98
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
99
+ <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-2">1</span>
100
+ Typ záměru
101
+ </h2>
102
+ <div class="grid grid-cols-2 gap-3">
103
+ <div class="project-type-card p-4 border rounded-lg cursor-pointer" data-type="NOVOSTAVBA">
104
+ <div class="text-blue-500 mb-2"><i class="fas fa-home text-2xl"></i></div>
105
+ <h3 class="font-medium">Novostavba domu</h3>
106
+ </div>
107
+ <div class="project-type-card p-4 border rounded-lg cursor-pointer" data-type="REKONSTRUKCE_DUM">
108
+ <div class="text-blue-500 mb-2"><i class="fas fa-hammer text-2xl"></i></div>
109
+ <h3 class="font-medium">Rekonstrukce domu</h3>
110
+ </div>
111
+ <div class="project-type-card p-4 border rounded-lg cursor-pointer" data-type="REKONSTRUKCE_BYT">
112
+ <div class="text-blue-500 mb-2"><i class="fas fa-building text-2xl"></i></div>
113
+ <h3 class="font-medium">Rekonstrukce bytu</h3>
114
+ </div>
115
+ <div class="project-type-card p-4 border rounded-lg cursor-pointer" data-type="PRISTAVBA">
116
+ <div class="text-blue-500 mb-2"><i class="fas fa-expand text-2xl"></i></div>
117
+ <h3 class="font-medium">Přístavba</h3>
118
+ </div>
119
+ <div class="project-type-card p-4 border rounded-lg cursor-pointer col-span-2" data-type="INTERIER">
120
+ <div class="text-blue-500 mb-2"><i class="fas fa-couch text-2xl"></i></div>
121
+ <h3 class="font-medium">Interiérový návrh</h3>
122
+ </div>
123
+ </div>
124
+ </section>
125
+
126
+ <!-- Step 2: Location -->
127
+ <section id="step2" class="mb-8">
128
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
129
+ <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-2">2</span>
130
+ Lokalita
131
+ </h2>
132
+ <div class="space-y-3">
133
+ <select id="location" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
134
+ <option value="MESTO">Město (Praha, Brno...)</option>
135
+ <option value="SATELIT">Satelitní oblast / okraj města</option>
136
+ <option value="VENKOV">Venkov</option>
137
+ <option value="HORY">Hory</option>
138
+ <option value="CHKO">CHKO (chráněná krajinná oblast)</option>
139
+ </select>
140
+ <div class="relative">
141
+ <input type="text" id="zipcode" placeholder="Volitelné PSČ pro přesnější výpočet" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
142
+ </div>
143
+ </div>
144
+ </section>
145
+
146
+ <!-- Step 3: Project Scope -->
147
+ <section id="step3" class="mb-8">
148
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
149
+ <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-2">3</span>
150
+ Rozsah projektu
151
+ </h2>
152
+ <div class="space-y-6">
153
+ <div>
154
+ <label for="area" class="block mb-2 font-medium">Plocha (m²)</label>
155
+ <input type="range" min="20" max="500" value="100" class="slider" id="area">
156
+ <div class="flex justify-between mt-2">
157
+ <span>20 m²</span>
158
+ <span id="areaValue" class="font-medium">100 m²</span>
159
+ <span>500 m²</span>
160
+ </div>
161
+ </div>
162
+
163
+ <div id="reconstructionScope" class="hidden">
164
+ <label class="block mb-2 font-medium">Míra rekonstrukce</label>
165
+ <div class="space-y-2">
166
+ <div class="flex items-center">
167
+ <input type="radio" id="scope1" name="scope" value="1" class="mr-2" checked>
168
+ <label for="scope1">Jen interiér (úprava dispozice)</label>
169
+ </div>
170
+ <div class="flex items-center">
171
+ <input type="radio" id="scope2" name="scope" value="1.1" class="mr-2">
172
+ <label for="scope2">Konstrukční změny</label>
173
+ </div>
174
+ <div class="flex items-center">
175
+ <input type="radio" id="scope3" name="scope" value="1.3" class="mr-2">
176
+ <label for="scope3">Kompletní přestavba</label>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </section>
182
+
183
+ <!-- Step 4: Services -->
184
+ <section id="step4" class="mb-8">
185
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
186
+ <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-2">4</span>
187
+ Požadované služby
188
+ </h2>
189
+ <div class="space-y-3">
190
+ <label class="checkbox-container flex items-start">
191
+ <input type="checkbox" class="absolute opacity-0" value="STUDIE">
192
+ <span class="checkmark border rounded w-5 h-5 flex-shrink-0 mt-1 mr-2"></span>
193
+ <div>
194
+ <span class="font-medium">Studie (architektonický návrh)</span>
195
+ <p class="text-sm text-gray-600">Vizualizace záměru, základní řešení</p>
196
+ </div>
197
+ </label>
198
+
199
+ <label class="checkbox-container flex items-start">
200
+ <input type="checkbox" class="absolute opacity-0" value="DSP">
201
+ <span class="checkmark border rounded w-5 h-5 flex-shrink-0 mt-1 mr-2"></span>
202
+ <div>
203
+ <span class="font-medium">Projekt pro stavební povolení (DSP)</span>
204
+ <p class="text-sm text-gray-600">Dokumentace pro úřady</p>
205
+ </div>
206
+ </label>
207
+
208
+ <label class="checkbox-container flex items-start">
209
+ <input type="checkbox" class="absolute opacity-0" value="DPS">
210
+ <span class="checkmark border rounded w-5 h-5 flex-shrink-0 mt-1 mr-2"></span>
211
+ <div>
212
+ <span class="font-medium">Prováděcí projekt (DPS)</span>
213
+ <p class="text-sm text-gray-600">Podrobná dokumentace pro realizaci</p>
214
+ </div>
215
+ </label>
216
+
217
+ <label class="checkbox-container flex items-start">
218
+ <input type="checkbox" class="absolute opacity-0" value="INZENYRING">
219
+ <span class="checkmark border rounded w-5 h-5 flex-shrink-0 mt-1 mr-2"></span>
220
+ <div>
221
+ <span class="font-medium">Inženýring (vyřízení povolení)</span>
222
+ <p class="text-sm text-gray-600">Komunikace s úřady</p>
223
+ </div>
224
+ </label>
225
+
226
+ <label class="checkbox-container flex items-start">
227
+ <input type="checkbox" class="absolute opacity-0" value="DOZOR">
228
+ <span class="checkmark border rounded w-5 h-5 flex-shrink-0 mt-1 mr-2"></span>
229
+ <div>
230
+ <span class="font-medium">Autorský dozor</span>
231
+ <p class="text-sm text-gray-600">Dohled nad realizací</p>
232
+ </div>
233
+ </label>
234
+ </div>
235
+ </section>
236
+
237
+ <!-- Calculate Button -->
238
+ <button id="calculateBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200">
239
+ Spočítat odhad
240
+ </button>
241
+ </main>
242
+
243
+ <!-- Results Section (initially hidden) -->
244
+ <section id="results" class="bg-white rounded-xl shadow-md p-6 mb-8 hidden fade-in">
245
+ <h2 class="text-xl font-bold text-center mb-6">Výsledný odhad</h2>
246
+
247
+ <div class="mb-6">
248
+ <div class="flex justify-between items-center mb-2">
249
+ <span class="font-medium">Typ projektu:</span>
250
+ <span id="resultProjectType" class="font-semibold"></span>
251
+ </div>
252
+ <div class="flex justify-between items-center mb-2">
253
+ <span class="font-medium">Lokalita:</span>
254
+ <span id="resultLocation" class="font-semibold"></span>
255
+ </div>
256
+ <div class="flex justify-between items-center mb-2">
257
+ <span class="font-medium">Plocha:</span>
258
+ <span id="resultArea" class="font-semibold"></span>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="border-t border-b border-gray-200 py-4 mb-4">
263
+ <div class="flex justify-between items-center mb-2">
264
+ <span class="font-medium">Orientační cena:</span>
265
+ <span id="totalPrice" class="text-2xl font-bold text-blue-600"></span>
266
+ </div>
267
+ <p class="text-sm text-gray-600 text-right">včetně DPH</p>
268
+ </div>
269
+
270
+ <div id="servicesBreakdown" class="mb-6">
271
+ <h3 class="font-medium mb-3">Rozpad dle služeb:</h3>
272
+ <div id="breakdownItems" class="space-y-2"></div>
273
+ </div>
274
+
275
+ <div class="bg-blue-50 rounded-lg p-4 mb-6">
276
+ <h3 class="font-medium text-blue-700 mb-2"><i class="fas fa-lightbulb mr-2"></i>Doporučení</h3>
277
+ <p id="recommendation" class="text-sm text-blue-800"></p>
278
+ </div>
279
+
280
+ <div class="space-y-3">
281
+ <button id="contactBtn" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200">
282
+ <i class="fas fa-envelope mr-2"></i> Kontaktovat architekta
283
+ </button>
284
+ <button id="saveBtn" class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-4 rounded-lg transition duration-200">
285
+ <i class="fas fa-save mr-2"></i> Uložit odhad
286
+ </button>
287
+ </div>
288
+ </section>
289
+
290
+ <footer class="text-center text-sm text-gray-500">
291
+ <p>© 2023 Architektonická kalkulačka | Vytvořeno pro realitní makléře</p>
292
+ </footer>
293
+ </div>
294
+
295
+ <script>
296
+ // Project Types with base rates and complexity coefficients
297
+ const PROJECT_TYPES = {
298
+ NOVOSTAVBA: {
299
+ baseRate: 1200,
300
+ complexity: 1.0,
301
+ name: "Novostavba domu"
302
+ },
303
+ REKONSTRUKCE_DUM: {
304
+ baseRate: 1400,
305
+ complexity: 1.2,
306
+ name: "Rekonstrukce domu"
307
+ },
308
+ REKONSTRUKCE_BYT: {
309
+ baseRate: 1000,
310
+ complexity: 1.1,
311
+ name: "Rekonstrukce bytu"
312
+ },
313
+ PRISTAVBA: {
314
+ baseRate: 1300,
315
+ complexity: 1.15,
316
+ name: "Přístavba"
317
+ },
318
+ INTERIER: {
319
+ baseRate: 900,
320
+ complexity: 0.7,
321
+ name: "Interiérový návrh"
322
+ }
323
+ };
324
+
325
+ // Location coefficients
326
+ const LOCATION_COEFFICIENTS = {
327
+ MESTO: {
328
+ value: 1.0,
329
+ name: "Město (Praha, Brno...)"
330
+ },
331
+ SATELIT: {
332
+ value: 1.1,
333
+ name: "Satelitní oblast / okraj města"
334
+ },
335
+ VENKOV: {
336
+ value: 0.95,
337
+ name: "Venkov"
338
+ },
339
+ HORY: {
340
+ value: 1.3,
341
+ name: "Hory"
342
+ },
343
+ CHKO: {
344
+ value: 1.4,
345
+ name: "CHKO (chráněná krajinná oblast)"
346
+ }
347
+ };
348
+
349
+ // Service coefficients
350
+ const SERVICE_COEFFICIENTS = {
351
+ STUDIE: {
352
+ value: 0.20,
353
+ name: "Studie (architektonický návrh)"
354
+ },
355
+ DSP: {
356
+ value: 0.30,
357
+ name: "Projekt pro stavební povolení (DSP)"
358
+ },
359
+ DPS: {
360
+ value: 0.25,
361
+ name: "Prováděcí projekt (DPS)"
362
+ },
363
+ INZENYRING: {
364
+ value: 0.15,
365
+ name: "Inženýring (vyřízení povolení)"
366
+ },
367
+ DOZOR: {
368
+ value: 0.10,
369
+ name: "Autorský dozor"
370
+ }
371
+ };
372
+
373
+ // Recommendations based on project type
374
+ const RECOMMENDATIONS = {
375
+ NOVOSTAVBA: "Pro novostavbu doporučujeme minimálně studii a projekt pro stavební povolení. Prováděcí projekt je vhodný pro přesnou realizaci.",
376
+ REKONSTRUKCE_DUM: "U rekonstrukce domu doporučujeme studii a projekt pro stavební povolení. Při větším rozsahu prací zvažte i autorský dozor.",
377
+ REKONSTRUKCE_BYT: "Pro rekonstrukci bytu postačuje studie a prováděcí projekt. Autorský dozor doporučujeme u náročnějších dispozičních změn.",
378
+ PRISTAVBA: "Pro přístavbu je klíčový projekt pro stavební povolení a prováděcí projekt. Studie pomůže s vizualizací výsledku.",
379
+ INTERIER: "Pro interiérový návrh postačuje studie. Prováděcí projekt doporučujeme u náročnějších řešení."
380
+ };
381
+
382
+ // DOM Elements
383
+ const projectTypeCards = document.querySelectorAll('.project-type-card');
384
+ const locationSelect = document.getElementById('location');
385
+ const zipcodeInput = document.getElementById('zipcode');
386
+ const areaSlider = document.getElementById('area');
387
+ const areaValue = document.getElementById('areaValue');
388
+ const reconstructionScope = document.getElementById('reconstructionScope');
389
+ const calculateBtn = document.getElementById('calculateBtn');
390
+ const resultsSection = document.getElementById('results');
391
+ const resultProjectType = document.getElementById('resultProjectType');
392
+ const resultLocation = document.getElementById('resultLocation');
393
+ const resultArea = document.getElementById('resultArea');
394
+ const totalPrice = document.getElementById('totalPrice');
395
+ const breakdownItems = document.getElementById('breakdownItems');
396
+ const recommendation = document.getElementById('recommendation');
397
+ const contactBtn = document.getElementById('contactBtn');
398
+ const saveBtn = document.getElementById('saveBtn');
399
+
400
+ // Variables to store user selections
401
+ let selectedProjectType = null;
402
+ let selectedLocation = null;
403
+ let selectedArea = 100;
404
+ let selectedServices = [];
405
+ let scopeCoefficient = 1.0;
406
+
407
+ // Event Listeners
408
+ projectTypeCards.forEach(card => {
409
+ card.addEventListener('click', () => {
410
+ // Remove selected class from all cards
411
+ projectTypeCards.forEach(c => c.classList.remove('selected'));
412
+
413
+ // Add selected class to clicked card
414
+ card.classList.add('selected');
415
+
416
+ // Store selected project type
417
+ selectedProjectType = card.dataset.type;
418
+
419
+ // Show/hide reconstruction scope based on project type
420
+ if (selectedProjectType === 'REKONSTRUKCE_DUM' || selectedProjectType === 'REKONSTRUKCE_BYT') {
421
+ reconstructionScope.classList.remove('hidden');
422
+ } else {
423
+ reconstructionScope.classList.add('hidden');
424
+ scopeCoefficient = 1.0;
425
+ }
426
+ });
427
+ });
428
+
429
+ areaSlider.addEventListener('input', () => {
430
+ selectedArea = parseInt(areaSlider.value);
431
+ areaValue.textContent = `${selectedArea} m²`;
432
+ });
433
+
434
+ document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
435
+ checkbox.addEventListener('change', (e) => {
436
+ if (e.target.checked) {
437
+ selectedServices.push(e.target.value);
438
+ } else {
439
+ selectedServices = selectedServices.filter(service => service !== e.target.value);
440
+ }
441
+ });
442
+ });
443
+
444
+ document.querySelectorAll('input[name="scope"]').forEach(radio => {
445
+ radio.addEventListener('change', (e) => {
446
+ scopeCoefficient = parseFloat(e.target.value);
447
+ });
448
+ });
449
+
450
+ calculateBtn.addEventListener('click', calculateEstimate);
451
+ contactBtn.addEventListener('click', contactArchitect);
452
+ saveBtn.addEventListener('click', saveEstimate);
453
+
454
+ // Calculation function
455
+ function calculateEstimate() {
456
+ // Validate inputs
457
+ if (!selectedProjectType) {
458
+ alert('Vyberte prosím typ záměru');
459
+ return;
460
+ }
461
+
462
+ if (selectedServices.length === 0) {
463
+ alert('Vyberte prosím alespoň jednu službu');
464
+ return;
465
+ }
466
+
467
+ // Get selected location
468
+ selectedLocation = locationSelect.value;
469
+
470
+ // Calculate base cost
471
+ const projectType = PROJECT_TYPES[selectedProjectType];
472
+ const location = LOCATION_COEFFICIENTS[selectedLocation];
473
+
474
+ let baseCost = projectType.baseRate * projectType.complexity * selectedArea * location.value * scopeCoefficient;
475
+
476
+ // Calculate service breakdown
477
+ const breakdown = {};
478
+ let total = 0;
479
+
480
+ selectedServices.forEach(service => {
481
+ const serviceCost = baseCost * SERVICE_COEFFICIENTS[service].value;
482
+ breakdown[service] = Math.round(serviceCost);
483
+ total += serviceCost;
484
+ });
485
+
486
+ // Display results
487
+ resultProjectType.textContent = projectType.name;
488
+ resultLocation.textContent = location.name;
489
+ resultArea.textContent = `${selectedArea} m²`;
490
+ totalPrice.textContent = `${Math.round(total).toLocaleString()} Kč`;
491
+
492
+ // Display breakdown
493
+ breakdownItems.innerHTML = '';
494
+ selectedServices.forEach(service => {
495
+ const item = document.createElement('div');
496
+ item.className = 'flex justify-between';
497
+ item.innerHTML = `
498
+ <span>${SERVICE_COEFFICIENTS[service].name}</span>
499
+ <span class="font-medium">${breakdown[service].toLocaleString()} Kč</span>
500
+ `;
501
+ breakdownItems.appendChild(item);
502
+ });
503
+
504
+ // Display recommendation
505
+ recommendation.textContent = RECOMMENDATIONS[selectedProjectType];
506
+
507
+ // Show results section
508
+ resultsSection.classList.remove('hidden');
509
+
510
+ // Scroll to results
511
+ resultsSection.scrollIntoView({ behavior: 'smooth' });
512
+ }
513
+
514
+ function contactArchitect() {
515
+ alert('Funkce "Kontaktovat architekta" bude implementována v další verzi.');
516
+ }
517
+
518
+ function saveEstimate() {
519
+ alert('Funkce "Uložit odhad" bude implementována v další verzi.');
520
+ }
521
+
522
+ // Initialize
523
+ document.addEventListener('DOMContentLoaded', () => {
524
+ // Set default project type
525
+ projectTypeCards[0].click();
526
+
527
+ // Set default services
528
+ document.querySelectorAll('input[type="checkbox"]')[0].click();
529
+ document.querySelectorAll('input[type="checkbox"]')[1].click();
530
+ });
531
+ </script>
532
+ <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=LukasBe/arch-services-calc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
533
+ </html>