<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Evans Window Cleaning Service Calculator</title>
  <style>
    /* Scoped styles for Evans Cleaning Calculator */
    #evans-cleaning-calculator {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
      background-color: #ffffff;
      transition: all 0.3s ease-in-out;
    }

    #evans-cleaning-calculator h2 {
      text-align: center;
      color: #2c3e50;
      margin-bottom: 30px;
      font-size: 28px;
    }

    .form-group {
      margin-bottom: 25px;
    }

    .form-group label {
      display: block;
      margin-bottom: 10px;
      color: #34495e;
      font-weight: 600;
      font-size: 16px;
    }

    .form-group select,
    .form-group input[type="number"] {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid #bdc3c7;
      border-radius: 8px;
      font-size: 16px;
      transition: border-color 0.3s;
    }

    .form-group select:focus,
    .form-group input[type="number"]:focus {
      border-color: #2980b9;
      outline: none;
    }

    .checkbox-group {
      display: flex;
      flex-direction: column;
    }

    .checkbox-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }

    .checkbox-item input {
      margin-right: 10px;
      transform: scale(1.2);
    }

    .checkbox-item label {
      font-size: 16px;
      color: #2c3e50;
      cursor: pointer;
    }

    #solar-panels {
      margin-top: 10px;
      padding: 10px;
      border: 1px solid #bdc3c7;
      border-radius: 8px;
      width: 100%;
      font-size: 16px;
      display: none;
      transition: all 0.3s ease-in-out;
    }

    #solar-panels:focus {
      border-color: #2980b9;
      outline: none;
    }

    button[type="submit"] {
      width: 100%;
      padding: 14px;
      background-color: #27ae60;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      font-size: 18px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    button[type="submit"]:hover {
      background-color: #219150;
      transform: translateY(-2px);
    }

    button[type="submit"]:active {
      transform: translateY(0);
    }

    /* Result Section */
    #result {
      margin-top: 30px;
      padding: 25px;
      border-radius: 10px;
      background-color: #f0f8ff;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      text-align: center;
      display: none;
      animation: fadeIn 0.5s ease-in-out;
    }

    #result p {
      font-size: 20px;
      color: #2c3e50;
      margin-bottom: 15px;
    }

    #result strong {
      color: #27ae60;
    }

    #contact-button {
      padding: 12px 25px;
      background-color: #2980b9;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.2s;
    }

    #contact-button:hover {
      background-color: #1f6ea5;
      transform: translateY(-2px);
    }

    #contact-button:active {
      transform: translateY(0);
    }

    /* Animations */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Responsive Design */
    @media (max-width: 600px) {
      #evans-cleaning-calculator {
        padding: 20px;
        margin: 20px;
      }

      #evans-cleaning-calculator h2 {
        font-size: 24px;
      }

      .form-group label,
      .checkbox-item label {
        font-size: 15px;
      }

      button[type="submit"],
      #contact-button {
        font-size: 16px;
        padding: 12px;
      }
    }
  </style>
</head>
<body>

  <!-- Evans Cleaning Service Calculator -->
  <div id="evans-cleaning-calculator">
    <h2>Cleaning Service Calculator</h2>
    
    <!-- Calculator Form -->
    <form id="calculator-form">
      
      <!-- Property Type Selection -->
      <div class="form-group">
        <label for="property-type">Property Type:</label>
        <select id="property-type" name="propertyType" required>
          <option value="">Select Property Type</option>
          <option value="3 Bed Semi-Detached">3 Bed Semi-Detached</option>
          <option value="4 Bed Semi-Detached">4 Bed Semi-Detached</option>
          <option value="3 Bed Detached">3 Bed Detached</option>
          <option value="4 Bed Detached">4 Bed Detached</option>
          <option value="5 Bed Semi-Detached">5 Bed Semi-Detached</option>
          <option value="3-4 Bed, 3 Storey Town House">3-4 Bed, 3 Storey Town House</option>
        </select>
      </div>
      
      <!-- Cleaning Frequency Selection -->
      <div class="form-group">
        <label for="frequency">Cleaning Frequency:</label>
        <select id="frequency" name="frequency" required>
          <option value="">Select Frequency</option>
          <option value="weekly">Weekly</option>
          <option value="every10">Every 10 Weeks</option>
        </select>
      </div>
      
      <!-- Additional Services -->
      <div class="form-group">
        <label>Additional Services:</label>
        <div class="checkbox-group">
          
          <!-- Gutter Cleaning -->
          <div class="checkbox-item">
            <input type="checkbox" id="gutter-cleaning" name="gutterCleaning" value="yes">
            <label for="gutter-cleaning">Gutter Cleaning</label>
          </div>
          
          <!-- Solar Panel Cleaning -->
          <div class="checkbox-item">
            <input type="checkbox" id="solar-cleaning" name="solarCleaning" value="yes">
            <label for="solar-cleaning">Solar Panel Cleaning</label>
          </div>
          <input type="number" id="solar-panels" name="solarPanels" placeholder="Number of Panels" min="1">
          
          <!-- UPVC, Fascias, Soffits Cleaning -->
          <div class="checkbox-item">
            <input type="checkbox" id="upvc-cleaning" name="upvcCleaning" value="yes">
            <label for="upvc-cleaning">UPVC, Fascias, Soffits & Gutter Cleaning</label>
          </div>
          
          <!-- Clear & Clean Service -->
          <div class="checkbox-item">
            <input type="checkbox" id="clear-clean" name="clearClean" value="yes">
            <label for="clear-clean">Clear & Clean Service</label>
          </div>
        </div>
      </div>
      
      <!-- Conservatory/Large Extension -->
      <div class="form-group">
        <label for="conservatory">Conservatory/Large Extension:</label>
        <select id="conservatory" name="conservatory">
          <option value="no">No</option>
          <option value="yes">Yes (+£3-£5)</option>
        </select>
      </div>
      
      <!-- Calculate Button -->
      <button type="submit">Calculate Estimate</button>
    </form>
    <!-- End of Calculator Form -->
    
    <!-- Result Section -->
    <div id="result">
      <p>Estimated Cost: <strong id="total-cost">£0</strong></p>
      <p>This is a preliminary estimate. For an exact quote, please contact our representative.</p>
      <button id="contact-button">Contact Us</button>
    </div>
    <!-- End of Result Section -->
  </div>
  <!-- End of Evans Cleaning Service Calculator -->

  <!-- JavaScript for Calculator Functionality -->
  <script>
    // Wait for the DOM to load
    document.addEventListener('DOMContentLoaded', function() {
      const solarCheckbox = document.getElementById('solar-cleaning');
      const solarPanelsInput = document.getElementById('solar-panels');
      const calculatorForm = document.getElementById('calculator-form');
      const resultSection = document.getElementById('result');
      const totalCostElement = document.getElementById('total-cost');
      const contactButton = document.getElementById('contact-button');

      // Toggle solar panels input based on checkbox
      solarCheckbox.addEventListener('change', function() {
        if (this.checked) {
          solarPanelsInput.style.display = 'block';
          solarPanelsInput.required = true;
        } else {
          solarPanelsInput.style.display = 'none';
          solarPanelsInput.required = false;
          solarPanelsInput.value = '';
        }
      });

      // Handle form submission
      calculatorForm.addEventListener('submit', function(e) {
        e.preventDefault(); // Prevent form from submitting

        // Get form values
        const propertyType = document.getElementById('property-type').value;
        const frequency = document.getElementById('frequency').value;
        const conservatory = document.getElementById('conservatory').value;
        const gutterCleaning = document.getElementById('gutter-cleaning').checked;
        const solarCleaning = document.getElementById('solar-cleaning').checked;
        const solarPanels = parseInt(document.getElementById('solar-panels').value) || 0;
        const upvcCleaning = document.getElementById('upvc-cleaning').checked;
        const clearClean = document.getElementById('clear-clean').checked;

        // Pricing Data
        const windowCleaningPricing = {
          "3 Bed Semi-Detached": { weekly: 16, every10: 18, additional: 3 },
          "4 Bed Semi-Detached": { weekly: 18, every10: 21, additional: 4 },
          "3 Bed Detached": { weekly: 18, every10: 20, additional: 5 },
          "4 Bed Detached": { weekly: 21, every10: 20, additional: 5 },
          "5 Bed Semi-Detached": { weekly: 25, every10: 28, additional: 5 },
          "3-4 Bed, 3 Storey Town House": { weekly: 22, every10: 26, additional: 5 }
        };

        const gutterCleaningPricing = {
          "3 Bed Semi-Detached": 90,
          "4 Bed Semi-Detached": 90,
          "3 Bed Detached": 90,
          "4 Bed Detached": 110,
          "5 Bed Semi-Detached": 125,
          "3-4 Bed, 3 Storey Town House": 135
        };

        const upvcPricing = {
          "3 Bed Semi-Detached": 70,
          "4 Bed Semi-Detached": 80,
          "3 Bed Detached": 85,
          "4 Bed Detached": 95,
          "5 Bed Semi-Detached": 105,
          "3-4 Bed, 3 Storey Town House": 125
        };

        const clearCleanPricing = {
          "3 Bed Semi-Detached": { normal: 160, package: 120 },
          "4 Bed Semi-Detached": { normal: 170, package: 125 },
          "3 Bed Detached": { normal: 175, package: 130 },
          "4 Bed Detached": { normal: 205, package: 145 },
          "5 Bed Semi-Detached": { normal: 230, package: 170 },
          "3-4 Bed, 3 Storey Town House": { normal: 260, package: 180 }
        };

        // Initialize total
        let total = 0;

        // Calculate Window Cleaning
        if (propertyType && frequency) {
          const windowPrice = windowCleaningPricing[propertyType];
          if (frequency === 'weekly') {
            total += windowPrice.weekly;
          } else if (frequency === 'every10') {
            total += windowPrice.every10;
          }

          // Add conservatory cost if applicable
          if (conservatory === 'yes') {
            total += windowPrice.additional;
          }
        }

        // Calculate Gutter Cleaning
        if (gutterCleaning && propertyType) {
          total += gutterCleaningPricing[propertyType];
        }

        // Calculate Solar Panel Cleaning
        if (solarCleaning && propertyType) {
          total += solarPanels * 3; // £3 per panel
        }

        // Calculate UPVC, Fascias, Soffits Cleaning
        if (upvcCleaning && propertyType) {
          total += upvcPricing[propertyType];
        }

        // Calculate Clear & Clean Service
        if (clearClean && propertyType) {
          // Assuming user selects package price
          total += clearCleanPricing[propertyType].package;
        }

        // Display the result
        totalCostElement.innerText = `£${total}`;
        resultSection.style.display = 'block';

        // Scroll to result
        resultSection.scrollIntoView({ behavior: 'smooth' });
      });

      // Handle Contact Button Click
      contactButton.addEventListener('click', function() {
        // Redirect to contact page or open contact form
        // Для демонстрации используем mailto ссылку
        window.location.href = 'mailto:hello@qithub.click?subject=Cleaning Service Inquiry';
      });
    });
  </script>
</body>
</html>
