Image

Image carousel

popularne kolory 

Embed

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator usług dachowych</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .calculator {
            background-color: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 3px 15px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 25px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #34495e;
        }
        input, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
            font-size: 16px;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 12px;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
            font-size: 17px;
            font-weight: bold;
            margin-top: 10px;
            transition: background 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        .result {
            margin-top: 25px;
            padding: 20px;
            background-color: #e8f4fc;
            border-radius: 8px;
            display: none;
        }
        .price-input {
            display: flex;
            align-items: center;
        }
        .price-input span {
            margin-left: 10px;
            white-space: nowrap;
            font-weight: bold;
        }
        .materials {
            margin-top: 20px;
            border-top: 2px dashed #bdc3c7;
            padding-top: 15px;
        }
        .materials h4 {
            color: #2c3e50;
            margin-bottom: 12px;
        }
        .material-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid #ecf0f1;
        }
        .material-name {
            font-weight: bold;
        }
        .material-value {
            color: #e74c3c;
        }
        .note {
            font-size: 13px;
            color: #7f8c8d;
            margin-top: 15px;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h1>Kalkulator usług dachowych</h1>
        
        <div class="form-group">
            <label for="area">Powierzchnia dachu (m²):</label>
            <input type="number" id="area" min="1" placeholder="np. 120">
        </div>
        
        <div class="form-group">
            <label for="service">Typ usługi:</label>
            <select id="service">
                <option value="mycie">Mycie dachu</option>
                <option value="mycie_malowanie">Mycie + malowanie</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="price">Cena za m²:</label>
            <div class="price-input">
                <input type="number" id="price" min="1" placeholder="np. 25">
                <span>zł/m²</span>
            </div>
        </div>
        
        <button onclick="calculate()">OBLICZ KOSZT</button>
        
        <div id="result" class="result"></div>
    </div>

    <script>
        // Нормы расхода материалов (л/м²)
        const MATERIALS_RATE = {
            chemia: 0.12,     // Środek do mycia
            grunt: 0.18,      // Grunt
            farba: 0.25,      // Farba
            hydrofob: 0.07    // Środek hydrofobowy
        };

        // Цены материалов (zł/l)
        const MATERIALS_PRICE = {
            chemia: 15,
            grunt: 22,
            farba: 35,
            hydrofob: 40
        };

        function calculate() {
            // Получаем данные
            const area = parseFloat(document.getElementById('area').value);
            const service = document.getElementById('service').value;
            const pricePerSquareMeter = parseFloat(document.getElementById('price').value);
            
            // Проверка данных
            if (isNaN(area) || isNaN(pricePerSquareMeter)) {
                alert("Proszę wprowadzić poprawne wartości!");
                return;
            }
            
            // Расчет (без коэффициентов)
            const totalCost = area * pricePerSquareMeter;
            let serviceName = service === "mycie_malowanie" 
                ? "Mycie i malowanie dachu" 
                : "Mycie dachu";
            
            // Расчет материалов (округляем до целых литров)
            let materialsHtml = '';
            const chemia = Math.round(area * MATERIALS_RATE.chemia);
            const hydrofob = Math.round(area * MATERIALS_RATE.hydrofob);
            
            if (service === "mycie_malowanie") {
                const grunt = Math.round(area * MATERIALS_RATE.grunt);
                const farba = Math.round(area * MATERIALS_RATE.farba);
                
                materialsHtml = `
                    <div class="materials">
                        <h4>Potrzebne materiały:</h4>
                        <div class="material-item">
                            <span class="material-name">Środek do mycia:</span>
                            <span class="material-value">${chemia} litrów (${(chemia * MATERIALS_PRICE.chemia).toFixed(0)} zł)</span>
                        </div>
                        <div class="material-item">
                            <span class="material-name">Grunt:</span>
                            <span class="material-value">${grunt} litrów (${(grunt * MATERIALS_PRICE.grunt).toFixed(0)} zł)</span>
                        </div>
                        <div class="material-item">
                            <span class="material-name">Farba:</span>
                            <span class="material-value">${farba} litrów (${(farba * MATERIALS_PRICE.farba).toFixed(0)} zł)</span>
                        </div>
                        <div class="material-item">
                            <span class="material-name">Hydrofob:</span>
                            <span class="material-value">${hydrofob} litrów (${(hydrofob * MATERIALS_PRICE.hydrofob).toFixed(0)} zł)</span>
                        </div>
                    </div>
                `;
            } else {
                materialsHtml = `
                    <div class="materials">
                        <h4>Potrzebne materiały:</h4>
                        <div class="material-item">
                            <span class="material-name">Środek do mycia:</span>
                            <span class="material-value">${chemia} litrów (${(chemia * MATERIALS_PRICE.chemia).toFixed(0)} zł)</span>
                        </div>
                        <div class="material-item">
                            <span class="material-name">Hydrofob:</span>
                            <span class="material-value">${hydrofob} litrów (${(hydrofob * MATERIALS_PRICE.hydrofob).toFixed(0)} zł)</span>
                        </div>
                    </div>
                `;
            }
            
            // Вывод результата
            const resultElement = document.getElementById('result');
            resultElement.style.display = 'block';
            resultElement.innerHTML = `
                <h3>Podsumowanie:</h3>
                <p><strong>Usługa:</strong> ${serviceName}</p>
                <p><strong>Powierzchnia:</strong> ${area} m²</p>
                <p><strong>Cena za m²:</strong> ${pricePerSquareMeter} zł</p>
                <p style="font-size: 18px; color: #e74c3c; font-weight: bold;">Całkowity koszt: ${totalCost.toFixed(2)} zł</p>
                
                ${materialsHtml}
                
                <div class="note">
                    * Zużycie materiałów może się różnić w zależności od rodzaju dachu.
                </div>
            `;
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Rezerwacja Dachu</title>
  <style>
    .status { margin-top: 10px; padding: 10px; display: none; }
    .status.success { background-color: #d4edda; color: #155724; }
    .status.error { background-color: #f8d7da; color: #721c24; }
    img { max-width: 100px; margin: 5px; }
    .custom-file-upload {
      display: inline-block;
      background-color: #007bff;
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      cursor: pointer;
    }
    input[type="file"] {
      display: none;
    }
  </style>
</head>
<body>

<h2>Formularz rezerwacji</h2>
<form id="booking-form" onsubmit="event.preventDefault(); submitBooking();">
  <input id="name" type="text" placeholder="Imię i nazwisko" autocomplete="name" required><br>
  <input id="phone" type="tel" placeholder="Telefon" autocomplete="tel" required><br>
  <input id="address" type="text" placeholder="Adres" autocomplete="street-address" required><br>

  <select id="service" required>
    <option value="">-- Wybierz usługę --</option>
    <option value="Mycie">Mycie</option>
    <option value="Mycie i malowanie">Mycie i malowanie</option>
  </select><br>

  <textarea id="notes" placeholder="Uwagi"></textarea><br>

  <label for="photos" style="font-weight: bold;">Dodaj 4 zdjęcia dachu (z każdej strony):</label><br>
  <label class="custom-file-upload" for="photos">Dodaj zdjęcia</label>
  <input id="photos" type="file" multiple accept="image/*"><br>
  <div id="photo-preview"></div>

  <button type="submit">Wyślij</button>
  <div id="status-message" class="status"></div>
</form>

<script>
  const TELEGRAM_BOT_TOKEN = '7302053933:AAHEKMJCK-tq6csa7kpTquxrIuVWSjhDMa8';
  const TELEGRAM_CHAT_ID = '602972192';

  document.getElementById('photos').addEventListener('change', function(e) {
    const preview = document.getElementById('photo-preview');
    preview.innerHTML = '';
    for (let file of e.target.files) {
      const reader = new FileReader();
      reader.onload = function(e) {
        const img = document.createElement('img');
        img.src = e.target.result;
        preview.appendChild(img);
      }
      reader.readAsDataURL(file);
    }
  });

  async function submitBooking() {
    const name = document.getElementById('name').value.trim();
    const phone = document.getElementById('phone').value.trim();
    const address = document.getElementById('address').value.trim();
    const service = document.getElementById('service').value;
    const notes = document.getElementById('notes').value.trim();
    const photos = document.getElementById('photos').files;
    const status = document.getElementById('status-message');

    if (!name || !phone || !address || !service) {
      showStatus('Proszę wypełnić obowiązkowe pola!', 'error', status);
      return;
    }

    let message = `
🏠 *Nowa rezerwacja usług dachowych!*
━━━━━━━━━━━━━━━
*Imię:* ${name}
*Telefon:* ${phone}
*Adres:* ${address}
*Usługa:* ${service}
${notes ? `*Uwagi:* ${notes}` : ''}
    `;

    try {
      await fetch(`https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage?chat_id=${TELEGRAM_CHAT_ID}&text=${encodeURIComponent(message)}&parse_mode=Markdown`);

      if (photos.length > 0) {
        const media = [];
        const formData = new FormData();

        for (let i = 0; i < Math.min(photos.length, 10); i++) {
          const file = photos[i];
          const fieldName = `photo${i}`;
          formData.append(fieldName, file);
          media.push({
            type: "photo",
            media: `attach://${fieldName}`,
            caption: i === 0 ? "Zdjęcia dachu od klienta" : ""
          });
        }

        formData.append("chat_id", TELEGRAM_CHAT_ID);
        formData.append("media", JSON.stringify(media));

        await fetch(`https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMediaGroup`, {
          method: "POST",
          body: formData
        });
      }

      showStatus('Dziękujemy za rezerwację! Skontaktujemy się z Tobą w ciągu 24 godzin.', 'success', status);
      document.getElementById('booking-form').reset();
      document.getElementById('photo-preview').innerHTML = '';

    } catch (error) {
      console.error('Błąd wysyłania:', error);
      showStatus('Wystąpił błąd podczas wysyłania. Proszę spróbować ponownie.', 'error', status);
    }
  }

  function showStatus(text, type, element) {
    element.textContent = text;
    element.className = `status ${type}`;
    element.style.display = 'block';
    setTimeout(() => element.style.display = 'none', 6000);
  }
</script>

</body>
</html>
