Spaces:
Running
Running
| <html lang="cs"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Architektonická kalkulačka | Odhad nákladů na projektové služby</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Manrope', sans-serif; | |
| } | |
| .slider { | |
| -webkit-appearance: none; | |
| width: 100%; | |
| height: 8px; | |
| border-radius: 4px; | |
| background: #e5e7eb; | |
| outline: none; | |
| } | |
| .slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| cursor: pointer; | |
| } | |
| .slider::-moz-range-thumb { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| cursor: pointer; | |
| } | |
| .project-type-card { | |
| transition: all 0.3s ease; | |
| } | |
| .project-type-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .project-type-card.selected { | |
| border-color: #3b82f6; | |
| background-color: #eff6ff; | |
| } | |
| .checkbox-container input:checked ~ .checkmark { | |
| background-color: #3b82f6; | |
| border-color: #3b82f6; | |
| } | |
| .checkbox-container input:checked ~ .checkmark:after { | |
| display: block; | |
| } | |
| .checkbox-container .checkmark:after { | |
| content: ""; | |
| position: absolute; | |
| left: 6px; | |
| top: 2px; | |
| width: 5px; | |
| height: 10px; | |
| border: solid white; | |
| border-width: 0 2px 2px 0; | |
| transform: rotate(45deg); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <div class="container mx-auto px-4 py-8 max-w-md"> | |
| <header class="mb-8 text-center"> | |
| <h1 class="text-2xl font-bold text-blue-600 mb-2">Architektonická kalkulačka</h1> | |
| <p class="text-gray-600">Odhad nákladů na projektové služby</p> | |
| </header> | |
| <main class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <!-- Step 1: Project Type --> | |
| <section id="step1" class="mb-8"> | |
| <h2 class="text-lg font-semibold mb-4 flex items-center"> | |
| <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-2">1</span> | |
| Typ záměru | |
| </h2> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="project-type-card p-4 border rounded-lg cursor-pointer" data-type="NOVOSTAVBA"> | |
| <div class="text-blue-500 mb-2"><i class="fas fa-home text-2xl"></i></div> | |
| <h3 class="font-medium">Novostavba domu</h3> | |
| </div> | |
| <div class="project-type-card p-4 border rounded-lg cursor-pointer" data-type="REKONSTRUKCE_DUM"> | |
| <div class="text-blue-500 mb-2"><i class="fas fa-hammer text-2xl"></i></div> | |
| <h3 class="font-medium">Rekonstrukce domu</h3> | |
| </div> | |
| <div class="project-type-card p-4 border rounded-lg cursor-pointer" data-type="REKONSTRUKCE_BYT"> | |
| <div class="text-blue-500 mb-2"><i class="fas fa-building text-2xl"></i></div> | |
| <h3 class="font-medium">Rekonstrukce bytu</h3> | |
| </div> | |
| <div class="project-type-card p-4 border rounded-lg cursor-pointer" data-type="PRISTAVBA"> | |
| <div class="text-blue-500 mb-2"><i class="fas fa-expand text-2xl"></i></div> | |
| <h3 class="font-medium">Přístavba</h3> | |
| </div> | |
| <div class="project-type-card p-4 border rounded-lg cursor-pointer col-span-2" data-type="INTERIER"> | |
| <div class="text-blue-500 mb-2"><i class="fas fa-couch text-2xl"></i></div> | |
| <h3 class="font-medium">Interiérový návrh</h3> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Step 2: Location --> | |
| <section id="step2" class="mb-8"> | |
| <h2 class="text-lg font-semibold mb-4 flex items-center"> | |
| <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-2">2</span> | |
| Lokalita | |
| </h2> | |
| <div class="space-y-3"> | |
| <select id="location" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="MESTO">Město (Praha, Brno...)</option> | |
| <option value="SATELIT">Satelitní oblast / okraj města</option> | |
| <option value="VENKOV">Venkov</option> | |
| <option value="HORY">Hory</option> | |
| <option value="CHKO">CHKO (chráněná krajinná oblast)</option> | |
| </select> | |
| <div class="relative"> | |
| <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"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Step 3: Project Scope --> | |
| <section id="step3" class="mb-8"> | |
| <h2 class="text-lg font-semibold mb-4 flex items-center"> | |
| <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-2">3</span> | |
| Rozsah projektu | |
| </h2> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="area" class="block mb-2 font-medium">Plocha (m²)</label> | |
| <input type="range" min="20" max="500" value="100" class="slider" id="area"> | |
| <div class="flex justify-between mt-2"> | |
| <span>20 m²</span> | |
| <span id="areaValue" class="font-medium">100 m²</span> | |
| <span>500 m²</span> | |
| </div> | |
| </div> | |
| <div id="reconstructionScope" class="hidden"> | |
| <label class="block mb-2 font-medium">Míra rekonstrukce</label> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="scope1" name="scope" value="1" class="mr-2" checked> | |
| <label for="scope1">Jen interiér (úprava dispozice)</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="scope2" name="scope" value="1.1" class="mr-2"> | |
| <label for="scope2">Konstrukční změny</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="scope3" name="scope" value="1.3" class="mr-2"> | |
| <label for="scope3">Kompletní přestavba</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Step 4: Services --> | |
| <section id="step4" class="mb-8"> | |
| <h2 class="text-lg font-semibold mb-4 flex items-center"> | |
| <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-2">4</span> | |
| Požadované služby | |
| </h2> | |
| <div class="space-y-3"> | |
| <label class="checkbox-container flex items-start"> | |
| <input type="checkbox" class="absolute opacity-0" value="STUDIE"> | |
| <span class="checkmark border rounded w-5 h-5 flex-shrink-0 mt-1 mr-2"></span> | |
| <div> | |
| <span class="font-medium">Studie (architektonický návrh)</span> | |
| <p class="text-sm text-gray-600">Vizualizace záměru, základní řešení</p> | |
| </div> | |
| </label> | |
| <label class="checkbox-container flex items-start"> | |
| <input type="checkbox" class="absolute opacity-0" value="DSP"> | |
| <span class="checkmark border rounded w-5 h-5 flex-shrink-0 mt-1 mr-2"></span> | |
| <div> | |
| <span class="font-medium">Projekt pro stavební povolení (DSP)</span> | |
| <p class="text-sm text-gray-600">Dokumentace pro úřady</p> | |
| </div> | |
| </label> | |
| <label class="checkbox-container flex items-start"> | |
| <input type="checkbox" class="absolute opacity-0" value="DPS"> | |
| <span class="checkmark border rounded w-5 h-5 flex-shrink-0 mt-1 mr-2"></span> | |
| <div> | |
| <span class="font-medium">Prováděcí projekt (DPS)</span> | |
| <p class="text-sm text-gray-600">Podrobná dokumentace pro realizaci</p> | |
| </div> | |
| </label> | |
| <label class="checkbox-container flex items-start"> | |
| <input type="checkbox" class="absolute opacity-0" value="INZENYRING"> | |
| <span class="checkmark border rounded w-5 h-5 flex-shrink-0 mt-1 mr-2"></span> | |
| <div> | |
| <span class="font-medium">Inženýring (vyřízení povolení)</span> | |
| <p class="text-sm text-gray-600">Komunikace s úřady</p> | |
| </div> | |
| </label> | |
| <label class="checkbox-container flex items-start"> | |
| <input type="checkbox" class="absolute opacity-0" value="DOZOR"> | |
| <span class="checkmark border rounded w-5 h-5 flex-shrink-0 mt-1 mr-2"></span> | |
| <div> | |
| <span class="font-medium">Autorský dozor</span> | |
| <p class="text-sm text-gray-600">Dohled nad realizací</p> | |
| </div> | |
| </label> | |
| </div> | |
| </section> | |
| <!-- Calculate Button --> | |
| <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"> | |
| Spočítat odhad | |
| </button> | |
| </main> | |
| <!-- Results Section (initially hidden) --> | |
| <section id="results" class="bg-white rounded-xl shadow-md p-6 mb-8 hidden fade-in"> | |
| <h2 class="text-xl font-bold text-center mb-6">Výsledný odhad</h2> | |
| <div class="mb-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">Typ projektu:</span> | |
| <span id="resultProjectType" class="font-semibold"></span> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">Lokalita:</span> | |
| <span id="resultLocation" class="font-semibold"></span> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">Plocha:</span> | |
| <span id="resultArea" class="font-semibold"></span> | |
| </div> | |
| </div> | |
| <div class="border-t border-b border-gray-200 py-4 mb-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">Orientační cena:</span> | |
| <span id="totalPrice" class="text-2xl font-bold text-blue-600"></span> | |
| </div> | |
| <p class="text-sm text-gray-600 text-right">včetně DPH</p> | |
| </div> | |
| <div id="servicesBreakdown" class="mb-6"> | |
| <h3 class="font-medium mb-3">Rozpad dle služeb:</h3> | |
| <div id="breakdownItems" class="space-y-2"></div> | |
| </div> | |
| <div class="bg-blue-50 rounded-lg p-4 mb-6"> | |
| <h3 class="font-medium text-blue-700 mb-2"><i class="fas fa-lightbulb mr-2"></i>Doporučení</h3> | |
| <p id="recommendation" class="text-sm text-blue-800"></p> | |
| </div> | |
| <div class="space-y-3"> | |
| <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"> | |
| <i class="fas fa-envelope mr-2"></i> Kontaktovat architekta | |
| </button> | |
| <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"> | |
| <i class="fas fa-save mr-2"></i> Uložit odhad | |
| </button> | |
| </div> | |
| </section> | |
| <footer class="text-center text-sm text-gray-500"> | |
| <p>© 2023 Architektonická kalkulačka | Vytvořeno pro realitní makléře</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Project Types with base rates and complexity coefficients | |
| const PROJECT_TYPES = { | |
| NOVOSTAVBA: { | |
| baseRate: 1200, | |
| complexity: 1.0, | |
| name: "Novostavba domu" | |
| }, | |
| REKONSTRUKCE_DUM: { | |
| baseRate: 1400, | |
| complexity: 1.2, | |
| name: "Rekonstrukce domu" | |
| }, | |
| REKONSTRUKCE_BYT: { | |
| baseRate: 1000, | |
| complexity: 1.1, | |
| name: "Rekonstrukce bytu" | |
| }, | |
| PRISTAVBA: { | |
| baseRate: 1300, | |
| complexity: 1.15, | |
| name: "Přístavba" | |
| }, | |
| INTERIER: { | |
| baseRate: 900, | |
| complexity: 0.7, | |
| name: "Interiérový návrh" | |
| } | |
| }; | |
| // Location coefficients | |
| const LOCATION_COEFFICIENTS = { | |
| MESTO: { | |
| value: 1.0, | |
| name: "Město (Praha, Brno...)" | |
| }, | |
| SATELIT: { | |
| value: 1.1, | |
| name: "Satelitní oblast / okraj města" | |
| }, | |
| VENKOV: { | |
| value: 0.95, | |
| name: "Venkov" | |
| }, | |
| HORY: { | |
| value: 1.3, | |
| name: "Hory" | |
| }, | |
| CHKO: { | |
| value: 1.4, | |
| name: "CHKO (chráněná krajinná oblast)" | |
| } | |
| }; | |
| // Service coefficients | |
| const SERVICE_COEFFICIENTS = { | |
| STUDIE: { | |
| value: 0.20, | |
| name: "Studie (architektonický návrh)" | |
| }, | |
| DSP: { | |
| value: 0.30, | |
| name: "Projekt pro stavební povolení (DSP)" | |
| }, | |
| DPS: { | |
| value: 0.25, | |
| name: "Prováděcí projekt (DPS)" | |
| }, | |
| INZENYRING: { | |
| value: 0.15, | |
| name: "Inženýring (vyřízení povolení)" | |
| }, | |
| DOZOR: { | |
| value: 0.10, | |
| name: "Autorský dozor" | |
| } | |
| }; | |
| // Recommendations based on project type | |
| const RECOMMENDATIONS = { | |
| NOVOSTAVBA: "Pro novostavbu doporučujeme minimálně studii a projekt pro stavební povolení. Prováděcí projekt je vhodný pro přesnou realizaci.", | |
| 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.", | |
| 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.", | |
| PRISTAVBA: "Pro přístavbu je klíčový projekt pro stavební povolení a prováděcí projekt. Studie pomůže s vizualizací výsledku.", | |
| INTERIER: "Pro interiérový návrh postačuje studie. Prováděcí projekt doporučujeme u náročnějších řešení." | |
| }; | |
| // DOM Elements | |
| const projectTypeCards = document.querySelectorAll('.project-type-card'); | |
| const locationSelect = document.getElementById('location'); | |
| const zipcodeInput = document.getElementById('zipcode'); | |
| const areaSlider = document.getElementById('area'); | |
| const areaValue = document.getElementById('areaValue'); | |
| const reconstructionScope = document.getElementById('reconstructionScope'); | |
| const calculateBtn = document.getElementById('calculateBtn'); | |
| const resultsSection = document.getElementById('results'); | |
| const resultProjectType = document.getElementById('resultProjectType'); | |
| const resultLocation = document.getElementById('resultLocation'); | |
| const resultArea = document.getElementById('resultArea'); | |
| const totalPrice = document.getElementById('totalPrice'); | |
| const breakdownItems = document.getElementById('breakdownItems'); | |
| const recommendation = document.getElementById('recommendation'); | |
| const contactBtn = document.getElementById('contactBtn'); | |
| const saveBtn = document.getElementById('saveBtn'); | |
| // Variables to store user selections | |
| let selectedProjectType = null; | |
| let selectedLocation = null; | |
| let selectedArea = 100; | |
| let selectedServices = []; | |
| let scopeCoefficient = 1.0; | |
| // Event Listeners | |
| projectTypeCards.forEach(card => { | |
| card.addEventListener('click', () => { | |
| // Remove selected class from all cards | |
| projectTypeCards.forEach(c => c.classList.remove('selected')); | |
| // Add selected class to clicked card | |
| card.classList.add('selected'); | |
| // Store selected project type | |
| selectedProjectType = card.dataset.type; | |
| // Show/hide reconstruction scope based on project type | |
| if (selectedProjectType === 'REKONSTRUKCE_DUM' || selectedProjectType === 'REKONSTRUKCE_BYT') { | |
| reconstructionScope.classList.remove('hidden'); | |
| } else { | |
| reconstructionScope.classList.add('hidden'); | |
| scopeCoefficient = 1.0; | |
| } | |
| }); | |
| }); | |
| areaSlider.addEventListener('input', () => { | |
| selectedArea = parseInt(areaSlider.value); | |
| areaValue.textContent = `${selectedArea} m²`; | |
| }); | |
| document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => { | |
| checkbox.addEventListener('change', (e) => { | |
| if (e.target.checked) { | |
| selectedServices.push(e.target.value); | |
| } else { | |
| selectedServices = selectedServices.filter(service => service !== e.target.value); | |
| } | |
| }); | |
| }); | |
| document.querySelectorAll('input[name="scope"]').forEach(radio => { | |
| radio.addEventListener('change', (e) => { | |
| scopeCoefficient = parseFloat(e.target.value); | |
| }); | |
| }); | |
| calculateBtn.addEventListener('click', calculateEstimate); | |
| contactBtn.addEventListener('click', contactArchitect); | |
| saveBtn.addEventListener('click', saveEstimate); | |
| // Calculation function | |
| function calculateEstimate() { | |
| // Validate inputs | |
| if (!selectedProjectType) { | |
| alert('Vyberte prosím typ záměru'); | |
| return; | |
| } | |
| if (selectedServices.length === 0) { | |
| alert('Vyberte prosím alespoň jednu službu'); | |
| return; | |
| } | |
| // Get selected location | |
| selectedLocation = locationSelect.value; | |
| // Calculate base cost | |
| const projectType = PROJECT_TYPES[selectedProjectType]; | |
| const location = LOCATION_COEFFICIENTS[selectedLocation]; | |
| let baseCost = projectType.baseRate * projectType.complexity * selectedArea * location.value * scopeCoefficient; | |
| // Calculate service breakdown | |
| const breakdown = {}; | |
| let total = 0; | |
| selectedServices.forEach(service => { | |
| const serviceCost = baseCost * SERVICE_COEFFICIENTS[service].value; | |
| breakdown[service] = Math.round(serviceCost); | |
| total += serviceCost; | |
| }); | |
| // Display results | |
| resultProjectType.textContent = projectType.name; | |
| resultLocation.textContent = location.name; | |
| resultArea.textContent = `${selectedArea} m²`; | |
| totalPrice.textContent = `${Math.round(total).toLocaleString()} Kč`; | |
| // Display breakdown | |
| breakdownItems.innerHTML = ''; | |
| selectedServices.forEach(service => { | |
| const item = document.createElement('div'); | |
| item.className = 'flex justify-between'; | |
| item.innerHTML = ` | |
| <span>${SERVICE_COEFFICIENTS[service].name}</span> | |
| <span class="font-medium">${breakdown[service].toLocaleString()} Kč</span> | |
| `; | |
| breakdownItems.appendChild(item); | |
| }); | |
| // Display recommendation | |
| recommendation.textContent = RECOMMENDATIONS[selectedProjectType]; | |
| // Show results section | |
| resultsSection.classList.remove('hidden'); | |
| // Scroll to results | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| function contactArchitect() { | |
| alert('Funkce "Kontaktovat architekta" bude implementována v další verzi.'); | |
| } | |
| function saveEstimate() { | |
| alert('Funkce "Uložit odhad" bude implementována v další verzi.'); | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Set default project type | |
| projectTypeCards[0].click(); | |
| // Set default services | |
| document.querySelectorAll('input[type="checkbox"]')[0].click(); | |
| document.querySelectorAll('input[type="checkbox"]')[1].click(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LukasBe/arch-services-calc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |