<rss version="2.0">
  <channel>
    <title>Сервіси міської ради</title>
    <link>https://new.vmr.gov.ua/servisy-miskoi-rady</link>
    <description><![CDATA[]]></description>
    <item>
      <title>Як зафіксувати збитки бізнесу та внести майно до Реєстру (ДРПЗМ)</title>
      <link>https://new.vmr.gov.ua/iak-zafiksuvaty-zbytky-biznesu-ta-vnesty-maino-do-reiestru-drpzm</link>
      <description><![CDATA[]]></description>
      <pubDate>Fri, 15 May 2026 13:05:47 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/iak-zafiksuvaty-zbytky-biznesu-ta-vnesty-maino-do-reiestru-drpzm</guid>
    </item>
    <item>
      <title>Залишки ліків</title>
      <link>https://new.vmr.gov.ua/zalyshky-likiv</link>
      <description><![CDATA[]]></description>
      <pubDate>Thu, 16 Apr 2026 13:02:41 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/zalyshky-likiv</guid>
    </item>
    <item>
      <title>Інформаційний атлас ветерана</title>
      <link>https://new.vmr.gov.ua/informatsiinyi-atlas-veterana</link>
      <description><![CDATA[<div id="adobe-dc-view" style="height:170vh;"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
	document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
		var adobeDCView = new AdobeDC.View({clientId: "e745d7f10a764681949278f09e3ac9a5", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://www.vmr.gov.ua/media/%D0%94%D0%B5%D0%BF%D0%B0%D1%80%D1%82%D0%B0%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%94%D0%A1%D0%9F/%D1%81%D0%B5%D1%80%D0%B2%D1%96%D1%81%20%20%D0%97%D0%B0%D1%85%D0%B8%D1%81%D0%BD%D0%B8%D0%BA%D0%B0%D0%BC,%20%D0%B2%D0%B5%D1%82%D0%B5%D1%80%D0%B0%D0%BD%D0%B0%D0%BC%20%D1%82%D0%B0%20%D1%97%D1%85%D0%BD%D1%96%D0%BC%20%D1%80%D0%BE%D0%B4%D0%B8%D0%BD%D0%B0%D0%BC/(%D1%81)%D1%96%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D1%96%D0%B9%D0%BD%D0%B8%D0%B9%20%D0%B0%D1%82%D0%BB%D0%B0%D1%81%20%D0%B2%D0%B5%D1%82%D0%B5%D1%80%D0%B0%D0%BD%D0%B0.pdf"}},
			metaData:{fileName: "(с)інформаційний атлас ветерана.pdf"}
		}, 
		{
			embedMode: "SIZED_CONTAINER"
		});
	});
</script>]]></description>
      <pubDate>Fri, 20 Feb 2026 10:30:58 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/informatsiinyi-atlas-veterana</guid>
    </item>
    <item>
      <title>Місцеві податки та збори</title>
      <link>https://new.vmr.gov.ua/mistsevi-podatky-ta-zbory</link>
      <description><![CDATA[]]></description>
      <pubDate>Tue, 17 Feb 2026 13:54:01 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/mistsevi-podatky-ta-zbory</guid>
    </item>
    <item>
      <title>ДСНС інформує</title>
      <link>https://new.vmr.gov.ua/dsns-informuie-2026</link>
      <description><![CDATA[]]></description>
      <pubDate>Mon, 11 May 2026 07:13:20 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/dsns-informuie-2026</guid>
    </item>
    <item>
      <title>Важлива інформація </title>
      <link>https://new.vmr.gov.ua/vazhlyva-informatsiia-2026</link>
      <description><![CDATA[]]></description>
      <pubDate>Thu, 14 May 2026 12:08:09 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/vazhlyva-informatsiia-2026</guid>
    </item>
    <item>
      <title>Внутрішньо переміщеним особам</title>
      <link>https://new.vmr.gov.ua/vnutrishno-peremishchenym-osobam</link>
      <description><![CDATA[]]></description>
      <pubDate>Fri, 13 Feb 2026 07:16:20 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/vnutrishno-peremishchenym-osobam</guid>
    </item>
    <item>
      <title>Захисникам, ветеранам та їхнім родинам</title>
      <link>https://new.vmr.gov.ua/war</link>
      <description><![CDATA[]]></description>
      <pubDate>Thu, 12 Feb 2026 08:42:59 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/war</guid>
    </item>
    <item>
      <title>Моніторинг якості повітря Вінниці</title>
      <link>https://new.vmr.gov.ua/monitorynh-iakosti-povitria-vinnytsi</link>
      <description><![CDATA[<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моніторинг якості повітря Вінниці</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
  	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    
  <style>
        :root {
            --uaqi-a: #4ade80; /* Зелений - Дуже добра якість */
            --uaqi-b: #a3e635; /* Світло-зелений - Добра якість */
            --uaqi-c: #fde047; /* Жовтий - Помірна якість */
            --uaqi-d: #f97316; /* Оранжевий - Незадовільна для чутливих */
            --uaqi-e: #ef4444; /* Червоний - Шкідлива якість */
            --uaqi-f: #8b5cf6; /* Фіолетовий - Дуже шкідлива якість */
            --primary: #3b82f6;
            --secondary: #64748b;
            --light: #f8fafc;
            --dark: #1e293b;
            --text-high: #1e293b;
            --text-medium: #475569;
            --text-low: #94a3b8;
        }
   
      a {
  		text-decoration: none; /* прибирає підкреслення */
  		color: inherit;        /* успадковує колір від батьківського елемента */
		}
      
/* прибираємо фон з усього хедера */
.dashboard-header {
  background: transparent;
  padding: 1rem 0;
  color: white; /* колір тексту можна лишити, якщо потрібен */
}

/* внутрішній "банер" рівно по ширині .container */
.header-banner {
  background: linear-gradient(135deg, #89fabe 0%, #3b82f6 65%);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  padding: 1rem;
  color: #fff;
}

        
        .card {
            border: none;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            margin-bottom: 1.5rem;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: none;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        }
        
        .station-card {
            cursor: pointer;
            background: white;
            transition: all 0.3s ease;
            height: 100%;
        }
        
        .station-card:hover {
            border-color: var(--primary);
            transform: translateY(-3px);
        }
        
        .uaqi-indicator {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
        
        .map-container {
            height: 500px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        #map {
            height: 100%;
            width: 100%;
            border-radius: 16px;
        }
        
        .stat-card {
            text-align: center;
            padding: 1.5rem;
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        }
        
        .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            margin: 0.5rem 0;
            color: var(--primary);
        }
        
        .stat-label {
            color: var(--text-low);
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 400px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 16px;
        }
        
        .spinner {
            width: 3rem;
            height: 3rem;
        }
        
        .modal-content {
            border-radius: 20px;
            border: none;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }
        
        .sensor-item {
            padding: 0.75rem;
            border-radius: 12px;
            margin-bottom: 0.75rem;
            background: #f8fafc;
            border-left: 3px solid #e2e8f0;
        }
        
        .leaflet-popup-content {
            margin: 10px;
            min-width: 250px;
        }
        
        .popup-title {
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--dark);
            font-size: 1.1rem;
        }
        
        .popup-uaqi {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 15px;
            font-weight: 600;
            font-size: 0.85rem;
            color: white;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        }
        
        .advice-card {
            background: linear-gradient(135deg, #dbeafe 0%, #d1fae5 100%);
            border: none;
            position: relative;
            overflow: hidden;
        }
        
        .advice-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary) 0%, var(--uaqi-b) 100%);
        }
        
        .error-message {
            background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
            border: 1px solid #fecaca;
            border-radius: 16px;
            padding: 2rem;
            margin: 1rem 0;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            border-left: 4px solid var(--uaqi-e);
        }
        
        .retry-btn {
            background: linear-gradient(135deg, var(--primary) 0%, #2563eb 100%);
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 12px;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }
        
        .retry-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
        }
        
        .section-title {
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 0.5rem;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: linear-gradient(90deg, var(--primary) 0%, var(--uaqi-b) 100%);
            border-radius: 2px;
        }
        
        .refresh-indicator {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.2);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.85rem;
        }
        
        .uaqi-level-a { background: linear-gradient(135deg, var(--uaqi-a) 0%, #22c55e 100%); }
        .uaqi-level-b { background: linear-gradient(135deg, var(--uaqi-b) 0%, #84cc16 100%); }
        .uaqi-level-c { background: linear-gradient(135deg, var(--uaqi-c) 0%, #eab308 100%); }
        .uaqi-level-d { background: linear-gradient(135deg, var(--uaqi-d) 0%, #ea580c 100%); }
        .uaqi-level-e { background: linear-gradient(135deg, var(--uaqi-e) 0%, #dc2626 100%); }
        .uaqi-level-f { background: linear-gradient(135deg, var(--uaqi-f) 0%, #7c3aed 100%); }
    
    	/* Світло-сірий бейдж (для попапу) */
.uaqi-level-stale {
  background: linear-gradient(135deg, #D1D5DB 0%, #9CA3AF 100%);
  color: #111827;
}

/* Легша тінь лише для застарілих маркерів */
.leaflet-marker-icon.stale {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

        
        .leaflet-marker-icon {
            background: white;
            border: 2px solid;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        
        .modal-header {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
        }
        
        .modal-body {
            padding: 1.5rem;
        }
        
        .btn-close {
            background: transparent !important;
            border: none !important;
            opacity: 0.7;
        }
        
        .btn-close:hover {
            opacity: 1;
        }
        
        .air-quality-text {
            color: var(--text-high);
            font-weight: 600;
        }
        
        /* кращий контраст для дрібного тексту часу оновлення */
        .update-time,
        .station-update-time,
        #update-time {
            color: #475569;            /* = var(--text-medium), має кращий контраст */
            font-size: 0.875rem;       /* трохи більший розмір допомагає доступності */
            font-weight: 500;          /* робить читабельнішим */
        }

        /* про всяк випадок: перекрити можливу прозорість */
        #update-time { opacity: 1 !important; }

        /* Доступність - забезпечення контрасту */
        .text-high-contrast {
            color: var(--text-high);
        }
        
        .text-medium-contrast {
            color: var(--text-medium);
        }
        
        .text-low-contrast {
            color: var(--text-low);
        }
        
        .uaqi-category {
            padding: 1rem;
            border-radius: 12px;
            margin-bottom: 1rem;
            background: #f8fafc;
            border-left: 4px solid;
        }
        
        .category-a { border-left-color: var(--uaqi-a); }
        .category-b { border-left-color: var(--uaqi-b); }
        .category-c { border-left-color: var(--uaqi-c); }
        .category-d { border-left-color: var(--uaqi-d); }
        .category-e { border-left-color: var(--uaqi-e); }
        .category-f { border-left-color: var(--uaqi-f); }
        
        /* Адаптивний дизайн для header */
        .header-content {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            max-width: var(--bs-container-lg);
            margin: 0 auto;
            padding: 0 1rem;
            flex-wrap: wrap;  
        }
        
        .header-left h1 {
            font-size: 1.5rem;
            margin-bottom: 0;
            text-align: center;
        }
        
        .header-right {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }
        
        .uaqi-info-container {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .uaqi-text-container {
            display: flex;
            flex-direction: column;
            text-align: right;
        }
        
        .uaqi-label-main {
            font-size: 0.9rem;
            opacity: 0.9;
            line-height: 1.2;
        }
        
		.uaqi-label-sub { 
          font-size: 0.9rem; 
          opacity: 0.9; 
          line-height: 1.2; 
      }

        
        .uaqi-value-container {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .uaqi-value {
            font-size: 1.6rem;
            font-weight: bold;
        }
        
        .update-info-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
        }
        
        .update-info {
            font-size: 0.85rem;
            opacity: 0.9;
            text-align: center;
        }
        
        .refresh-info {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.8rem;
            opacity: 0.8;
        }
        
        /* Для планшетів і більших екранів */
        @media (min-width: 768px) {
            .header-content {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }
            
            .header-left h1 {
                text-align: left;
                font-size: 1.8rem;
            }
            
            .header-right {
                align-items: flex-end;
            }
            
            .uaqi-info-container {
                gap: 1rem;
            }
            
            .uaqi-text-container {
                text-align: right;
            }
            
            .update-info-container {
                align-items: flex-end;
            }
            
            .update-info {
                text-align: right;
            }
            
            .refresh-info {
                justify-content: flex-end;
            }
        }
      
      
      /* підсвітка правих плиток якості повітря за порогами */
.tile-a { border-left: 4px solid var(--uaqi-a); }
.tile-b { border-left: 4px solid var(--uaqi-b); }
.tile-c { border-left: 4px solid var(--uaqi-c); }
.tile-d { border-left: 4px solid var(--uaqi-d); }
.tile-e { border-left: 4px solid var(--uaqi-e); }
      
/* метео-плитки (без порогів) */
.sensor-item.meteo { border-left: 4px solid #60a5fa; }

      
    </style>
</head>


<body>
    <!-- Header -->
<header class="dashboard-header">
  <div class="container">
    <div class="header-banner">
      <div class="header-content">
        <div class="header-left">
          <h1>Інтерактивний дашборд стану атмосферного повітря</h1>
        </div>
        <div class="header-right">
          <div class="uaqi-info-container">
            <div class="uaqi-text-container">
              <span class="uaqi-label-main">Загальний</span>
              <span class="uaqi-label-sub">UAQI</span>
            </div>
            <div class="uaqi-value-container">
              <div id="overall-uaqi" class="uaqi-value">--</div>
              <div id="overall-uaqi-indicator" class="uaqi-indicator uaqi-level-a"></div>
            </div>
          </div>
          <div class="update-info-container">
            <div id="update-time" class="update-info"></div>
            <div class="refresh-info">
              <i class="fas fa-sync-alt"></i>
              <span>Оновлення кожні 5 хв</span>
            </div>
          </div>
        </div>
      </div> <!-- /.header-content -->
    </div>   <!-- /.header-banner -->
  </div>     <!-- /.container -->
</header>


    <!-- Main Content -->
    <main class="container py-5">
        <!-- Stats Overview -->
<div class="row mb-5">
  <div class="col-12">
    <h2 class="section-title">Загальна статистика</h2>
  </div>

  <div class="col-md-3">
    <div class="card stat-card h-100">
      <div class="stat-label">Температура</div>
      <div id="avg-temp" class="stat-value">--</div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="card stat-card h-100">
      <div class="stat-label">Вологість</div>
      <div id="avg-humidity" class="stat-value">--</div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="card stat-card h-100">
      <div class="stat-label">Атмосферний тиск</div>
      <div id="avg-pressure" class="stat-value">--</div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="card stat-card h-100">
      <div class="stat-label">Радіаційний фон</div>
      <div id="avg-radiation" class="stat-value">--</div>
    </div>
  </div>
</div>


        <!-- Error Message -->
        <div id="error-container" class="d-none">
            <div class="error-message">
                <div class="d-flex align-items-center mb-3">
                    <i class="fas fa-exclamation-triangle fa-2x me-3"></i>
                    <div>
                        <h4 class="mb-1">⚠️ Помилка завантаження даних</h4>
                        <p class="mb-0">Не вдалося отримати дані з API. Можливо, сервер тимчасово недоступний.</p>
                    </div>
                </div>
                <button class="retry-btn" onclick="fetchAllStations()">
                    <i class="fas fa-redo me-2"></i>Спробувати знову
                </button>
            </div>
        </div>

        <!-- Map and Stations -->
        <div class="row mb-5">
            <div class="col-12">
                <h2 class="section-title">Карта станцій моніторингу</h2>
                <div class="map-container">
                    <div id="map"></div>
                </div>
            </div>
        </div>

        <!-- Stations Grid -->
        <div class="row">
            <div class="col-12">
                <h2 class="section-title">Станції моніторингу</h2>
                <div id="stations-container" class="row station-grid">
                    <div class="col-12 text-center py-5">
                        <div class="loading">
                            <div class="text-center">
                                <div class="spinner-border text-primary mb-3" role="status">
                                    <span class="visually-hidden">Завантаження...</span>
                                </div>
                                <p class="text-muted">Отримання даних зі станцій...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    
<!-- UAQI: що це і як розраховується -->
<div class="row mt-5">
  <div class="col-12">
    <div class="card uaqi-info-card">
      <div class="card-body">
        <h3 class="card-title mb-2 text-high-contrast">Що таке UAQI?</h3>
        <p class="mb-3 text-medium-contrast">
          <strong>UAQI (Ukrainian Air Quality Index)</strong> — національний індекс якості повітря, який показує,
          наскільки чистим або забрудненим є повітря у певний момент часу. Його розраховують автоматичні станції
          моніторингу на основі концентрацій шкідливих речовин у повітрі. Для кожного з них визначається частковий
          індекс, а <strong>UAQI приймає найвище (найгірше) значення</strong>, що відображає компонент із найбільшим
          впливом на здоров’я. Методика узгоджена з рекомендаціями <strong>ВООЗ</strong> і враховує кліматичні умови України.
        </p>
      </div>
    </div>
  </div>
</div>
      
      
<!-- Пояснення показників (ЗАВЖДИ ВИДНО, компактні плитки, єдина підсвітка) -->
<div class="row mt-4">
  <div class="col-12">
    <div class="card uaqi-info-card">
      <div class="card-body">
        <h3 class="card-title mb-3 text-high-contrast">Що вимірюють показники</h3>

        <div class="row g-2">
          <div class="col-12 col-md-6 col-lg-4">
            <div class="uaqi-chip">
              <div class="fw-semibold">PM₁ — ультрадрібний пил (≤ 1&nbsp;мкм)</div>
              <div class="small text-medium-contrast">Утворюються при згоранні палива, димі, вихлопах і роботі котелень.
					Потрапляють глибоко в легені та можуть переходити в кров, переносячи токсини. Найвищі рівні — узимку та за безвітряної погоди.</div>
            </div>
          </div>

          <div class="col-12 col-md-6 col-lg-4">
            <div class="uaqi-chip">
              <div class="fw-semibold">PM₂.₅ — дуже дрібний пил (≤ 2,5&nbsp;мкм)</div>
              <div class="small text-medium-contrast">Утворюється з диму, вихлопів транспорту, спалювання листя та твердого палива.
					Осідає в дихальних шляхах і легенях, подразнює слизові. Підвищується взимку, у туманну й безвітряну погоду.</div>
            </div>
          </div>

          <div class="col-12 col-md-6 col-lg-4">
            <div class="uaqi-chip">
              <div class="fw-semibold">PM₁₀ — більші частинки пилу (≤ 10&nbsp;мкм)</div>
              <div class="small text-medium-contrast">Утворюється через дорожній, ґрунтовий або будівельний пил. Підвищення значень спостерігається під час безвітря, туманів і 				опалювального сезону.</div>
            </div>
          </div>

          <div class="col-12 col-md-6 col-lg-4">
            <div class="uaqi-chip">
              <div class="fw-semibold">NO₂ — діоксид азоту</div>
              <div class="small text-medium-contrast">Основне джерело — автотранспорт і спалювання газу. Підвищується поблизу жвавих магістралей, у холодну пору року, коли 						збільшується використання опалення.</div>
            </div>
          </div>

          <div class="col-12 col-md-6 col-lg-4">
            <div class="uaqi-chip">
              <div class="fw-semibold">SO₂ — діоксид сірки</div>
              <div class="small text-medium-contrast">Потрапляє у повітря при спалюванні вугілля, мазуту, нафтопродуктів. Високі рівні можуть бути поблизу котелень або 							промислових підприємств.</div>
            </div>
          </div>

          <div class="col-12 col-md-6 col-lg-4">
            <div class="uaqi-chip">
              <div class="fw-semibold">CO — чадний газ</div>
              <div class="small text-medium-contrast">З’являється при неповному згоранні палива: робота двигунів, печей, генераторів.</div>
            </div>
          </div>

          <div class="col-12 col-md-6 col-lg-4">
            <div class="uaqi-chip">
              <div class="fw-semibold">CO₂ — вуглекислий газ</div>
              <div class="small text-medium-contrast">Природний компонент атмосфери, але локальне підвищення може свідчити про погану вентиляцію або значну кількість транспорту.						</div>
            </div>
          </div>

          <div class="col-12 col-md-6 col-lg-4">
            <div class="uaqi-chip">
              <div class="fw-semibold">NH₃ — аміак</div>
              <div class="small text-medium-contrast">Характерний для сільськогосподарських регіонів, тваринницьких комплексів, добрив і каналізаційних викидів.</div>
            </div>
          </div>

          <div class="col-12 col-md-6 col-lg-4">
            <div class="uaqi-chip">
              <div class="fw-semibold">O₃ — озон</div>
              <div class="small text-medium-contrast">Утворюється в сонячну погоду внаслідок реакцій вихлопних газів із ультрафіолетом.</div>
            </div>
          </div>

      </div>
    </div>
  </div>
</div>

     
        <!-- Advice Section -->
        <div class="row mt-5">
            <div class="col-12">    
                <div class="card advice-card">
                    <div class="card-body">
                        <h3 class="card-title mb-4">Опис категорій якості повітря UAQI</h3>
                        <div id="uaqi-explanation">
                            <div class="uaqi-category category-a">
                                <div class="d-flex align-items-center">
                                    <div class="uaqi-indicator uaqi-level-a me-3" style="width: 20px; height: 20px;"></div>
                                    <div>
                                        <div class="fw-bold">Категорія A - Дуже добра якість</div>
                                        <div class="small text-muted">Безпечне повітря для всіх</div>
                                    </div>
                                </div>
                            </div>
                            <div class="uaqi-category category-b">
                                <div class="d-flex align-items-center">
                                    <div class="uaqi-indicator uaqi-level-b me-3" style="width: 20px; height: 20px;"></div>
                                    <div>
                                        <div class="fw-bold">Категорія B - Добра якість</div>
                                        <div class="small text-muted">Незначний вплив, без обмежень</div>
                                    </div>
                                </div>
                            </div>
                            <div class="uaqi-category category-c">
                                <div class="d-flex align-items-center">
                                    <div class="uaqi-indicator uaqi-level-c me-3" style="width: 20px; height: 20px;"></div>
                                    <div>
                                        <div class="fw-bold">Категорія C - Помірна якість</div>
                                        <div class="small text-muted">Може впливати на чутливі групи (діти, літні, хворі)</div>
                                    </div>
                                </div>
                            </div>
                            <div class="uaqi-category category-d">
                                <div class="d-flex align-items-center">
                                    <div class="uaqi-indicator uaqi-level-d me-3" style="width: 20px; height: 20px;"></div>
                                    <div>
                                        <div class="fw-bold">Категорія D - Незадовільна для чутливих</div>
                                        <div class="small text-muted">Ризик для чутливих груп, можуть з'являтися симптоми</div>
                                    </div>
                                </div>
                            </div>
                            <div class="uaqi-category category-e">
                                <div class="d-flex align-items-center">
                                    <div class="uaqi-indicator uaqi-level-e me-3" style="width: 20px; height: 20px;"></div>
                                    <div>
                                        <div class="fw-bold">Категорія E - Шкідлива якість</div>
                                        <div class="small text-muted">Небезпечно для здорових людей, особливо для чутливих</div>
                                    </div>
                                </div>
                            </div>
                            <div class="uaqi-category category-f">
                                <div class="d-flex align-items-center">
                                    <div class="uaqi-indicator uaqi-level-f me-3" style="width: 20px; height: 20px;"></div>
                                    <div>
                                        <div class="fw-bold">Категорія F - Дуже шкідлива якість</div>
                                        <div class="small text-muted">Значна небезпека для всіх</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
      </div>
    </main>
  
  
  
  

    <!-- Station Detail Modal -->
<!-- Station Detail Modal -->
<div class="modal fade" id="stationModal" tabindex="-1" aria-labelledby="stationModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="station-modal-title">Деталі станції</h3>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <div class="row g-4 align-items-start">
          <!-- ЛІВОРУЧ: UAQI + Метео -->
          <div class="col-md-6 order-md-1">
            <!-- UAQI -->
            <div class="card mb-4">
              <div class="card-body text-center">
                <h4 class="card-title mb-3">
                  <i class="fas fa-gauge-high me-2"></i>Якість повітря (UAQI)
                </h4>
                <div class="my-3">
                  <div id="modal-uaqi-indicator" class="uaqi-indicator mx-auto mb-3 uaqi-level-a" style="width:40px;height:40px;"></div>
                  <h3 id="modal-uaqi-label" class="mb-1">--</h3>
                  <p id="modal-uaqi-description" class="text-muted mb-0">--</p>
                </div>
              </div>
            </div>

            <!-- Метеопоказники -->
            <div class="card">
              <div class="card-body">
                <h4 class="card-title mb-3">
                  <i class="fas fa-temperature-high me-2"></i>Метеопоказники
                </h4>
                <div id="station-meteo"></div>
              </div>
            </div>
          </div>

          <!-- ПРАВОРУЧ: Показники якості з порогами -->
          <div class="col-md-6 order-md-2">
            <div class="card">
              <div class="card-body">
                <h4 class="card-title mb-3">
                  <i class="fas fa-leaf me-2"></i>Показники якості
                </h4>
                <div id="station-air"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center mt-4 update-time">
          <small>Останнє оновлення: <span id="modal-update-time"></span></small>
        </div>
      </div>

<div class="modal-footer border-0 justify-content-center">
  <button type="button" class="btn btn-secondary" id="close-modal-btn" data-bs-dismiss="modal">
    <i class="fas fa-times me-2"></i>Закрити
  </button>
</div>

    </div>
  </div>
</div>


    <!-- Footer -->
    <footer class="bg-white border-top py-4 mt-5">
        <div class="container">
            <div class="text-center text-muted">
                <p class="fs-5 mb-1">Сервіс працює в тестовому режимі</p>
                <p class="fs-5 mb-0">Дані надано екологічною мережею 
  			<a href="https://eco-city.org.ua/" target="_blank" rel="noopener noreferrer" class="text-muted fw-semibold">EcoCity</a>
				</p>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <script>
        // Глобальні змінні
        let stations = [];
        let map;
        let markers = {};
        let currentModal = null;
      
      // --- "застарілі дані" ---
const STALE_THRESHOLD_HOURS = 24;

function isStale(updatedAt) {
  if (!updatedAt) return true;
  const t = Date.parse(updatedAt);
  if (Number.isNaN(t)) return true;
  return (Date.now() - t) > STALE_THRESHOLD_HOURS * 3600 * 1000;
}



        // Ініціалізація карти
        function initMap() {
            map = L.map('map').setView([49.2333, 28.4667], 13);
            
            L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
    attribution: '&copy; OpenStreetMap & CartoDB'
}).addTo(map);
        }

        // Отримання даних з API через проксі
        async function fetchStationData(id) {
            try {
                // Використовуємо другий проксі сервіс
                const proxyUrl = 'https://api.codetabs.com/v1/proxy?quest=';
                const targetUrl = `https://reborn.eco-city.org.ua/api/v1/station?id=${id}`;
                
                const response = await fetch(proxyUrl + encodeURIComponent(targetUrl), {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json'
                    }
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                return data;
            } catch (error) {
                console.error(`Error fetching data for station ${id}:`, error);
                return null;
            }
        }

        // Отримання всіх станцій
        async function fetchAllStations() {
            // Приховуємо повідомлення про помилку
            document.getElementById('error-container').classList.add('d-none');
            
            // Показуємо завантаження
            document.getElementById('stations-container').innerHTML = `
                <div class="col-12 text-center py-5">
                    <div class="loading">
                        <div class="text-center">
                            <div class="spinner-border text-primary mb-3" role="status">
                                <span class="visually-hidden">Завантаження...</span>
                            </div>
                            <p class="text-muted">Отримання даних зі станцій...</p>
                        </div>
                    </div>
                </div>
            `;
            
            try {
                const stationIds = [1918, 1315, 1909, 790, 774, 1769, 1919, 1612, 767, 1872, 1876];
                const promises = stationIds.map(id => fetchStationData(id));
                const results = await Promise.allSettled(promises);
                
                // Фільтруємо успішні результати
                stations = results
                    .filter(result => result.status === 'fulfilled' && result.value !== null)
                    .map(result => result.value);
                
                renderStations();
                updateStats();
                updateMap();
            } catch (error) {
                console.error('Error fetching stations:', error);
                document.getElementById('error-container').classList.remove('d-none');
                document.getElementById('stations-container').innerHTML = `
                    <div class="col-12 text-center py-5">
                        <div class="alert alert-warning">
                            <div class="d-flex align-items-center mb-3">
                                <i class="fas fa-exclamation-triangle fa-2x me-3"></i>
                                <div>
                                    <h4 class="mb-1">⚠️ Не вдалося завантажити дані</h4>
                                    <p class="mb-0">Спробуйте оновити сторінку пізніше</p>
                                </div>
                            </div>
                            <button class="retry-btn" onclick="fetchAllStations()">
                                <i class="fas fa-redo me-2"></i>Оновити дані
                            </button>
                        </div>
                    </div>
                `;
            }
        }

        // Отримання кольору UAQI
        function getUAQIColor(category) {
            const colors = {
                'A': 'var(--uaqi-a)',
                'B': 'var(--uaqi-b)',
                'C': 'var(--uaqi-c)',
                'D': 'var(--uaqi-d)',
                'E': 'var(--uaqi-e)',
                'F': 'var(--uaqi-f)'
            };
            return colors[category] || 'var(--uaqi-a)';
        }

        // Отримання мітки UAQI
        function getUAQILabel(category) {
            const labels = {
                'A': 'Дуже добра якість',
                'B': 'Добра якість',
                'C': 'Помірна якість',
                'D': 'Незадовільна для чутливих',
                'E': 'Шкідлива якість',
                'F': 'Дуже шкідлива якість'
            };
            return labels[category] || 'Невідомо';
        }

        // Отримання опису категорії
        function getCategoryDescription(category) {
            const descriptions = {
                'A': 'Безпечне повітря для всіх',
                'B': 'Незначний вплив, без обмежень',
                'C': 'Може впливати на чутливі групи (діти, літні, хворі)',
                'D': 'Ризик для чутливих груп, можуть з’являтися симптоми',
                'E': 'Небезпечно для здорових людей, особливо для чутливих',
                'F': 'Значна небезпека для всіх'
            };
            return descriptions[category] || 'Немає інформації';
        }

        // Форматування значення сенсора
        function formatSensorValue(value, unit) {
            if (unit === '°C') return `${value.toFixed(1)}°C`;
            if (unit === '%') return `${value.toFixed(0)}%`;
            if (unit === 'mm') return `${value.toFixed(0)} мм.рт.ст.`;
            if (unit === 'µR/h') return `${value.toFixed(1)} мкР/год`;
            return `${value.toFixed(2)} ${unit}`;
        }

        // Визначення головної категорії за значенням UAQI
function getMainCategoryFromUAQI(uaqi) {
  const categories = ['A', 'B', 'C', 'D', 'E', 'F'];
  const main = Number(uaqi?.main);
  if (!isFinite(main) || main < 1 || main > 6) return 'A';
  return categories[main - 1];
}


        // Рендер карток станцій
function renderStations() {
  const container = document.getElementById('stations-container');

  if (stations.length === 0) {
    container.innerHTML = `<div class="col-12 text-center py-5">
      <div class="alert alert-info">
        <i class="fas fa-info-circle me-2"></i> Дані недоступні
      </div>
    </div>`;
    return;
  }

  let html = '';
  stations.forEach(station => {
    const pm25 = station.current_values.find(v => v.type === 'PM2.5');
    const pm10 = station.current_values.find(v => v.type === 'PM10');
    const temperature = station.current_values.find(v => v.type === 'Temperature');
    const humidity = station.current_values.find(v => v.type === 'Humidity');

    let sensorBlocks = '';

    if (pm25 || pm10) {
      if (pm25) {
        sensorBlocks += `
          <div class="col-6">
            <div class="bg-light rounded p-2 text-center">
              <div class="small text-muted">PM2.5</div>
              <div class="fw-bold">${pm25.value.toFixed(1)}</div>
              <div class="small text-muted">мкг/м³</div>
            </div>
          </div>`;
      }
      if (pm10) {
        sensorBlocks += `
          <div class="col-6">
            <div class="bg-light rounded p-2 text-center">
              <div class="small text-muted">PM10</div>
              <div class="fw-bold">${pm10.value.toFixed(1)}</div>
              <div class="small text-muted">мкг/м³</div>
            </div>
          </div>`;
      }
    } else {
      const fallback = station.current_values
        .filter(v => !['Temperature', 'Humidity'].includes(v.type))
        .slice(0, 2);

      fallback.forEach(sensor => {
        sensorBlocks += `
          <div class="col-6">
            <div class="bg-light rounded p-2 text-center">
              <div class="small text-muted">${sensor.local_type || sensor.type}</div>
              <div class="fw-bold">${sensor.value.toFixed(1)}</div>
              <div class="small text-muted">${sensor.local_unit || sensor.unit}</div>
            </div>
          </div>`;
      });
    }

    const mainCategory = getMainCategoryFromUAQI(station.uaqi);
    const stale = isStale(station.last_online); // нове: перевіряємо чи застаріла

    // колір індикатора
    const indicatorClass = stale
      ? 'uaqi-level-stale'
      : `uaqi-level-${mainCategory.toLowerCase()}`;

    // текст UAQI або "Дані застарілі"
    const airQualityText = stale
      ? 'Дані застарілі'
      : getUAQILabel(mainCategory);

    html += `
      <div class="col-lg-4 col-md-6 col-12">
        <div class="card station-card h-100" onclick="showStationDetails(${station.id})">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-start mb-3">
              <h5 class="card-title mb-0">${station.name}</h5>
              <div class="uaqi-indicator ${indicatorClass}"></div>
            </div>
            <p class="text-muted small mb-3">
              <i class="fas fa-map-marker-alt me-1"></i> ${station.address}
            </p>
            <div class="row mb-3 g-2">
              ${sensorBlocks}
            </div>
            <div class="d-flex justify-content-between align-items-center">
              <div>
                ${temperature ? `<div class="fw-bold">${temperature.value.toFixed(1)}°C</div>` : ''}
                ${humidity ? `<div class="small text-muted">${humidity.value.toFixed(0)}%</div>` : ''}
              </div>
              <div class="text-end">
                <div class="small text-muted">Якість повітря</div>
                <div class="air-quality-text">${airQualityText}</div>
              </div>
            </div>
          </div>
          <div class="card-footer bg-transparent border-0">
            <small class="update-time">
              <i class="fas fa-clock me-1"></i>
              Оновлено:
              ${new Date(station.last_online).toLocaleDateString('uk-UA', {
                day: '2-digit', month: '2-digit', year: 'numeric'
              })},
              ${new Date(station.last_online).toLocaleTimeString('uk-UA', {
                hour: '2-digit', minute: '2-digit'
              })}
            </small>
          </div>
        </div>
      </div>`;
  });

  container.innerHTML = html;
}


        // Оновлення статистики
        function updateStats() {
  // беремо тільки свіжі станції
  const freshStations = stations.filter(s => !isStale(s.last_online));

  // якщо всі станції застарілі — покажемо дефіси і сірий індикатор у хедері
  if (freshStations.length === 0) {
    document.getElementById('avg-temp').textContent = '--';
    document.getElementById('avg-humidity').textContent = '--';
    document.getElementById('avg-pressure').textContent = '--';
    document.getElementById('avg-radiation').textContent = '--';

    // Загальний UAQI: позначимо як застаріло
    const overallValEl = document.getElementById('overall-uaqi');
    const overallIndEl = document.getElementById('overall-uaqi-indicator');
    if (overallValEl) overallValEl.textContent = '—';
    if (overallIndEl) overallIndEl.className = 'uaqi-indicator uaqi-level-stale';

    // Час оновлення дашборду (поточний)
    const now = new Date();
    document.getElementById('update-time').textContent =
      `${now.toLocaleDateString('uk-UA')} ${now.toLocaleTimeString('uk-UA', { hour: '2-digit', minute: '2-digit' })}`;
    return;
  }

  // Середня температура
  const tempValues = freshStations
    .map(s => s.current_values.find(v => v.type === 'Temperature'))
    .filter(Boolean)
    .map(v => Number(v.value))
    .filter(Number.isFinite);

  document.getElementById('avg-temp').textContent =
    tempValues.length ? (tempValues.reduce((a,b)=>a+b,0) / tempValues.length).toFixed(1) + ' °C' : '--';

  // Середня вологість
  const humidityValues = freshStations
    .map(s => s.current_values.find(v => v.type === 'Humidity'))
    .filter(Boolean)
    .map(v => Number(v.value))
    .filter(Number.isFinite);

  document.getElementById('avg-humidity').textContent =
    humidityValues.length ? Math.round(humidityValues.reduce((a,b)=>a+b,0) / humidityValues.length) + ' %' : '--';

  // Середній тиск (переводимо в мм рт. ст.)
  const pressureSensors = freshStations
    .map(s => s.current_values.find(v =>
      v?.type?.toLowerCase?.().includes('pressure') ||
      v?.local_type?.toLowerCase?.().includes('тиск')
    ))
    .filter(Boolean);

  if (pressureSensors.length) {
    const mmHgValues = pressureSensors.map(v => {
      const unit = String(v.local_unit || v.unit || '').toLowerCase().trim();
      const val = Number(v.value);
      if (!isFinite(val)) return null;
      if (unit.includes('hpa') || unit.includes('гпа')) return val * 0.75006;
      if (unit === 'pa') return (val / 100) * 0.75006;
      if (unit.includes('мм')) return val;
      if (unit.includes('kpa') || unit.includes('кпа')) return (val * 10) * 0.75006;
      return val; // якщо невідомо — вважаємо вже мм рт. ст.
    }).filter(v => v !== null);

    document.getElementById('avg-pressure').textContent =
      mmHgValues.length ? Math.round(mmHgValues.reduce((a,b)=>a+b,0) / mmHgValues.length) + ' мм рт.ст.' : '--';
  } else {
    document.getElementById('avg-pressure').textContent = '--';
  }

  // Середній радіаційний фон
  const radValues = freshStations
    .map(s => s.current_values.find(v => v.type === 'Radiation'))
    .filter(Boolean)
    .map(v => Number(v.value))
    .filter(Number.isFinite);

  document.getElementById('avg-radiation').textContent =
    radValues.length ? (radValues.reduce((a,b)=>a+b,0) / radValues.length).toFixed(1) + ' мкР/год' : '--';

  // Загальний UAQI (середня категорія серед свіжих)
  const uaqiNums = freshStations
    .map(s => Number(s.uaqi?.main))
    .filter(n => Number.isFinite(n) && n >= 1 && n <= 6);

  const overallValEl = document.getElementById('overall-uaqi');
  const overallIndEl = document.getElementById('overall-uaqi-indicator');

  if (uaqiNums.length) {
    const avgUAQI = Math.round(uaqiNums.reduce((a,b)=>a+b,0) / uaqiNums.length);
    const categories = ['A', 'B', 'C', 'D', 'E', 'F'];
    const mainCategory = categories[avgUAQI - 1] || 'A';
    if (overallValEl) overallValEl.textContent = mainCategory;
    if (overallIndEl) overallIndEl.className = `uaqi-indicator uaqi-level-${mainCategory.toLowerCase()}`;
  } else {
    // якщо свіжі є, але без UAQI — покажемо дефіс і нейтральний індикатор
    if (overallValEl) overallValEl.textContent = '—';
    if (overallIndEl) overallIndEl.className = 'uaqi-indicator uaqi-level-stale';
  }

  // Час оновлення дашборду (поточний)
  const now = new Date();
  document.getElementById('update-time').textContent =
    `${now.toLocaleDateString('uk-UA')} ${now.toLocaleTimeString('uk-UA', { hour: '2-digit', minute: '2-digit' })}`;
}

        // Оновлення карти
// допоміжна функція: додає ARIA/клавіатуру, коли елемент маркера вже в DOM
function attachMarkerA11y(marker, station, mainCategory) {
  const el = marker.getElement();
  if (!el) return; // ще не відрендерився — нічого не робимо

  const accessibleLabel =
    `Станція ${station.name}. Якість повітря: ${getUAQILabel(mainCategory)}. Натисніть, щоб відкрити деталі.`;

  el.setAttribute('role', 'button');
  el.setAttribute('tabindex', '0');
  el.setAttribute('aria-label', accessibleLabel);
  el.setAttribute('title', accessibleLabel);

  // щоб не дублювати слухачі при повторному рендері
  el.onkeydown = null;
  el.onkeydown = (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      showStationDetails(station.id);
    }
  };
}

function updateMap() {
  // прибираємо старі маркери
  Object.values(markers).forEach(marker => map.removeLayer(marker));
  markers = {};

  stations.forEach(station => {
    const mainCategory = getMainCategoryFromUAQI(station.uaqi);
    const stale = isStale(station.last_online);


    // іконка з aria-hidden всередині
const markerIcon = L.divIcon({
  className: 'leaflet-marker-icon',
  html: `<div aria-hidden="true" style="
    background: ${stale ? '#BDBDBD' : getUAQIColor(mainCategory)};
    width: 16px; height: 16px; border-radius: 50%;
    border: ${stale ? '0,5px solid #000000' : 'none'};
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  "></div>`,
  iconSize: [20, 20],
  iconAnchor: [10, 10]
});





    const marker = L.marker([station.latitude, station.longitude], { icon: markerIcon })
      .addTo(map)
.bindPopup(`
  <div>
    <div class="popup-title">${station.name}</div>
    <div class="mb-2 text-muted small">${station.address || ''}</div>
    <div class="mb-3">
      <span class="popup-uaqi ${stale ? 'uaqi-level-stale' : `uaqi-level-${mainCategory.toLowerCase()}`}">
        ${stale ? 'Дані застарілі' : `UAQI: ${mainCategory} - ${getUAQILabel(mainCategory)}`}
      </span>
    </div>
    <div class="small text-muted mb-2">
      <i class="fas fa-clock me-1"></i>
      Оновлено:
      ${new Date(station.last_online).toLocaleDateString('uk-UA', {
        day: '2-digit', month: '2-digit', year: 'numeric'
      })},
      ${new Date(station.last_online).toLocaleTimeString('uk-UA', {
        hour: '2-digit', minute: '2-digit'
      })}
    </div>
    <button class="btn btn-sm btn-primary w-100"
            onclick="showStationDetails(${station.id})"
            aria-label="Деталі станції ${station.name}">
      <i class="fas fa-info-circle me-1"></i>Деталі
    </button>
  </div>
`);



    // Коли маркер додано в DOM — додаємо ARIA/клавіатуру
    marker.on('add', () => attachMarkerA11y(marker, station, mainCategory));

    // fallback на випадок, якщо подія проскочила до навішування слухача
    setTimeout(() => attachMarkerA11y(marker, station, mainCategory), 0);

    markers[station.id] = marker;
  });
}


        // Показ деталей станції
// --- Пороги в ЄДИНИХ ОДИНИЦЯХ (bandUnits) ---
// PM1/PM2.5/PM10, NO2, O3, SO2, NH3 — у µg/m³
// CO — у mg/m³ (так зручніше для нормативів)
// CO2 — у ppm
// Radiation — у µSv/h
const SENSOR_BANDS = {
  pm1:       { bands: [10, 20, 30, 50],          unit: 'µg/m³' },  // індикативно, суворіше за PM2.5
  pm25:      { bands: [15, 25, 35, 50],          unit: 'µg/m³' },
  pm10:      { bands: [45, 75, 100, 150],        unit: 'µg/m³' },
  no2:       { bands: [100, 150, 200, 300],      unit: 'µg/m³' },
  o3:        { bands: [100, 120, 160, 200],      unit: 'µg/m³' },
  so2:       { bands: [50, 75, 125, 200],        unit: 'µg/m³' },
  nh3:       { bands: [50, 100, 200, 400],       unit: 'µg/m³' },   // аміак
  co:        { bands: [4, 7, 10, 15],            unit: 'mg/m³' },   // чадний газ
  co2:       { bands: [1000, 1400, 2000, 3000],  unit: 'ppm' },     // вуглекислий газ
  radiation: { bands: [0.3, 0.5, 1.0, 2.0],      unit: 'µSv/h' },    // радіац. фон
  hcho:      { bands: [30, 60, 100, 200],        unit: 'µg/m³' }    // формальдегід
};

// Мапінг назв сенсорів API -> ключі порогів
function normKey(type, localType='') {
  const s = `${(type||'').toLowerCase()} ${(localType||'').toLowerCase()}`;

  if (s.includes('pm1')) return 'pm1';
  if (s.includes('pm2.5') || s.includes('pm2_5') || s.includes('pm25') || s.includes('мікропил pm2.5')) return 'pm25';
  if (s.includes('pm10') || s.includes('мікропил pm10')) return 'pm10';

  if (s.includes('no2') || s.includes('діоксид азоту')) return 'no2';
  if (s.includes('o3')  || s.includes('озон')) return 'o3';
  if (s.includes('so2') || s.includes('діоксид сірки')) return 'so2';
  if (s === 'co' || s.includes('чадний газ')) return 'co';
  if (s.includes('nh3') || s.includes('аміак') || s.includes('амiак')) return 'nh3';
  if (s.includes('co2') || s.includes('вуглекислий газ')) return 'co2';
  if (s.includes('radiation') || s.includes('радіа') || s.includes('радіац')) return 'radiation';
  if (s.includes('hcho') || s.includes('формаль') || s.includes('formaldehyde')) return 'hcho';

  return null; // інші не підсвічуємо порогами
}

// --- конвертація ---
function normUnit(u='') {
  const s = String(u).trim()
    .replaceAll(' ', '')
    .replace('мкг/м³', 'µg/m³')
    .replace('мкР/год', 'µR/h')
    .replace('мкР/г', 'µR/h')
    .replace('мкР/ч', 'µR/h')
    .replace('мкЗв/год', 'µSv/h')
    .replace('мкЗв/г', 'µSv/h')
    .replace('ppm', 'ppm')
    .replace('мг/м³', 'mg/m³')
    .replace('°C', '°C')
    .replace('%', '%');
  return s;
}

function toBandUnits(value, fromUnit, key) {
  const def = SENSOR_BANDS[key];
  if (!def) return Number(value);
  const target = def.unit;
  const from = normUnit(fromUnit);

  let v = Number(value);
  if (!isFinite(v)) return NaN;

  if (from === target) return v;

  // Радіація: µR/h → µSv/h
  if (from === 'µR/h' && target === 'µSv/h') return v * 0.00877;
  if (from === 'µSv/h' && target === 'µR/h') return v / 0.00877;

  // Маса-обʼєм: µg/m³ ↔ mg/m³
  if (from === 'µg/m³' && target === 'mg/m³') return v / 1000;
  if (from === 'mg/m³' && target === 'µg/m³') return v * 1000;
  
  return v;
}


// Категорія A..E за bands
function bandCategory(v, bands) {
  const x = Number(v);
  if (!isFinite(x)) return null;   // <- додано
  if (x < bands[0]) return 'A';
  if (x < bands[1]) return 'B';
  if (x < bands[2]) return 'C';
  if (x < bands[3]) return 'D';
  return 'E';
}

function tileClassByCategory(cat) {
  return cat ? `tile-${cat.toLowerCase()}` : '';
}

// Визначаємо, чи це метео-сенсор (без підсвітки порогами)
function isMeteo(type, localType='') {
  const s = `${(type||'').toLowerCase()} ${(localType||'').toLowerCase()}`;
  return (
    s.includes('temperature') || s.includes('температ') ||
    s.includes('humidity')    || s.includes('волог')   ||
    s.includes('pressure')    || s.includes('тиск')    ||
    s.includes('wind')        || s.includes('вітер')   || s.includes('швидк') ||
    s.includes('rain')        || s.includes('опад')    || s.includes('дощ')
  );
}

// Красиве відображення метео
function prettyMeteoValue(sensor) {
  const unit = sensor?.local_unit || sensor?.unit || '';
  const v = Number(sensor?.value);
  const t = `${sensor?.type || ''} ${sensor?.local_type || ''}`.toLowerCase();

  if (!isFinite(v)) return `-- ${unit}`;

  // температура
  if (unit === '°C' || t.includes('temperature') || t.includes('температ')) {
    return `${v.toFixed(1)}°C`;
  }
  // вологість
  if (unit === '%' || t.includes('humidity') || t.includes('волог')) {
    return `${v.toFixed(0)}%`;
  }
  // тиск
  if (t.includes('pressure') || t.includes('тиск')) {
    return `${v.toFixed(0)} мм.рт.ст.`;
  }

  return `${v.toFixed(1)} ${unit}`;
}

      
      
      
function showStationDetails(stationId) {
  const station = stations.find(s => s.id === stationId);
  if (!station) return;

            
            // Заголовок
  document.getElementById('station-modal-title').textContent = station.name;
            
            // UAQI
            // UAQI (із перевіркою застарілості)
const mainCategory = getMainCategoryFromUAQI(station.uaqi);
const stale = isStale(station.last_online);

const ind  = document.getElementById('modal-uaqi-indicator');
const lbl  = document.getElementById('modal-uaqi-label');
const desc = document.getElementById('modal-uaqi-description');

if (stale) {
  // сірий маркер + текст "Дані застарілі"
  ind.className = 'uaqi-indicator mx-auto mb-3 uaqi-level-stale';
  lbl.textContent = 'Дані застарілі';
  desc.textContent = '';
} else {
  ind.className = `uaqi-indicator mx-auto mb-3 uaqi-level-${mainCategory.toLowerCase()}`;
  lbl.textContent = getUAQILabel(mainCategory);
  desc.textContent = getCategoryDescription(mainCategory);
}

            
            // Показники станції
// Показники станції (ліворуч — метео, праворуч — якість)
let meteoHtml = '';
let airHtml   = '';

station.current_values.forEach(sensor => {
  if (isMeteo(sensor.type, sensor.local_type)) {
    // МЕТЕО (без порогів)
    meteoHtml += `
      <div class="sensor-item meteo">
        <div class="d-flex justify-content-between align-items-center">
          <div class="fw-bold">${sensor.local_type || sensor.type}</div>
          <div class="fw-bold">${prettyMeteoValue(sensor)}</div>
        </div>
      </div>`;
  } else {
    // ЯКІСТЬ ПОВІТРЯ (з порогами + конвертація одиниць)
const key = normKey(sensor.type, sensor.local_type);
const def = key ? SENSOR_BANDS[key] : null;

// конвертуємо значення сенсора у цільові одиниці порогів (def.unit)
const fromUnit = sensor.local_unit || sensor.unit || '';
const vInBandUnits = def ? toBandUnits(sensor.value, fromUnit, key) : NaN;

// категорія за масивом порогів
const cat = def ? bandCategory(vInBandUnits, def.bands) : null;
const cls = tileClassByCategory(cat);


    airHtml += `
      <div class="sensor-item ${cls}">
        <div class="d-flex justify-content-between align-items-center">
          <div class="fw-bold">${sensor.local_type || sensor.type}</div>
          <div class="text-end">
            <div class="fw-bold">${formatSensorValue(sensor.value, sensor.local_unit || sensor.unit || '')}</div>
            ${cat ? `<div class="small text-muted">Рівень: ${tileLevelText(cat)}</div>` : ''}
          </div>
        </div>
      </div>`;
  }
});
  
  function tileLevelText(cat) {
  const m = {
    'A': 'Добра якість',
    'B': 'Прийнятна',
    'C': 'Помірна / незначне перевищення',
    'D': 'Незадовільна',
    'E': 'Шкідлива якість'
  };
  return m[cat] || 'Невідомо';
}


document.getElementById('station-meteo').innerHTML = meteoHtml || `<div class="text-muted">Немає метеоданих</div>`;
document.getElementById('station-air').innerHTML   = airHtml   || `<div class="text-muted">Немає даних якості</div>`;

            
            // Час оновлення
           document.getElementById('modal-update-time').textContent = 
    new Date(station.last_online).toLocaleString('uk-UA');
            
            // Показ модального вікна
  const modalElement = document.getElementById('stationModal');
  currentModal = new bootstrap.Modal(modalElement);
  currentModal.show();
}

// Функція для закриття модального вікна
function closeStationModal() {
    if (currentModal) {
        currentModal.hide();
    }
}

        // Ініціалізація
        document.addEventListener('DOMContentLoaded', function() {
            initMap();
            fetchAllStations();
            
            // Оновлення даних кожні 5 хвилин
            setInterval(fetchAllStations, 300000);
            
            // Додаємо обробник події для кнопки "Закрити"
            document.getElementById('close-modal-btn').addEventListener('click', closeStationModal);
        });
    </script>
  
  
  

 
]]></description>
      <pubDate>Tue, 28 Apr 2026 13:55:42 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/monitorynh-iakosti-povitria-vinnytsi</guid>
    </item>
    <item>
      <title>Подяки громаді</title>
      <link>https://new.vmr.gov.ua/podiaky-hromadi</link>
      <description><![CDATA[<style>
  .gallery-container {
    max-width: 1600px; /* обмежує ширину галереї */
    margin: 0 auto;
    padding: 20px 0;
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    justify-items: center;
    align-items: center;
  }

  .gallery img {
    width: 100%;
    max-width: 300px;
    height: auto;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.2s;
  }

  .gallery img:hover {
    transform: scale(1.05);
  }

  .lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    justify-content: center;
    align-items: center;
  }

  .lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 6px;
  }

  .lightbox .nav {
    position: absolute;
    top: 50%;
    font-size: 2rem;
    color: white;
    background: rgba(0,0,0,0.3);
    padding: 10px;
    cursor: pointer;
    user-select: none;
    border-radius: 4px;
    transform: translateY(-50%);
  }

  .lightbox .prev { left: 20px; }
  .lightbox .next { right: 20px; }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
  }
</style>

<div class="gallery-container">
  <div class="gallery">


    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/IMG_0011.jpg" alt="Іванов Максим">    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/IMG_0001.jpg" alt="Бабарига Віталій" class="custom" style="grid-column: span 2; max-width: 600px;">
	<img src="https://www.vmr.gov.ua/media/podyaky-gromadi/IMG_0002.jpg" alt="Коняга Роман" class="custom" style="grid-column: span 2; max-width: 600px;">

    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/IMG_0007.jpg" alt="Шебалін Роман" class="custom" style="grid-column: span 2; max-width: 600px;">     
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/IMG_0010.jpg" alt="Журов Павло">
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/IMG_0006.jpg" alt="Баліцький Олег" class="custom" style="grid-column: span 2; max-width: 600px;">
 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/IMG_0009.jpg" alt="Паламарчук Денис">
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/IMG_0005.jpg" alt="Олійник Богдан" class="custom" style="grid-column: span 2; max-width: 600px;">
 	<img src="https://www.vmr.gov.ua/media/podyaky-gromadi/IMG_0004.jpg" alt="Бортнівський Анатолій" class="custom" style="grid-column: span 2; max-width: 600px;">
   
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/IMG_0008.jpg" alt="Брюханов Віктор" class="custom" style="grid-column: span 2; max-width: 600px;">    
	<img src="https://www.vmr.gov.ua/media/podyaky-gromadi/IMG_0012.jpg" alt="Оджиковський Віталій">
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/IMG_0003.jpg" alt="Токарчук Олег" class="custom" style="grid-column: span 2; max-width: 600px;">  

    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0003.jpg" alt="Голованчук Олександр"> 	
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0001.jpg" alt="Фалюкович Ігор" class="custom" style="grid-column: span 2; max-width: 600px;">  
	<img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0002.jpg" alt="Лапінський Генадій" class="custom" style="grid-column: span 2; max-width: 600px;"> 	

    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0031.jpg" alt="Атаманенко Максим">
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0025.jpg" alt="Тупик Максим">    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0032.jpg" alt="Ковальчук Олександр">
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0033.jpg" alt="Богдан Богдан">    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0044.jpg" alt="Коваль Максим">  
    
	<img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0042.jpg" alt="Керпов Сергій">    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0005.jpg" alt="Парадня Роман">   
	<img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0004.jpg" alt="Аксьонов Олексій">
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0006.jpg" alt="Гармідер Олексій">     
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0007.jpg" alt="Гнатюк Андрій">
    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0008.jpg" alt="Жингалов Олександр"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0009.jpg" alt="Куровський Костянтин"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0010.jpg" alt="Курчак Роман">     
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0011.jpg" alt="Долиняний Сергій"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0012.jpg" alt="Заікін Андрій"> 
    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0013.jpg" alt="Коршак Володимир"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0014.jpg" alt="Пушкар Вадим">  
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0015.jpg" alt="Куйбіда Віктор"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0016.jpg" alt="Перечепидорога Ярослав"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0017.jpg" alt="Пйонтик Владислав"> 
    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0018.jpg" alt="Іванішин Олександр">  
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0019.jpg" alt="Петрик Сергій"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0020.jpg" alt="Кондратюк Сергій"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0021.jpg" alt="Грущенко Олександр"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0022.jpg" alt="Юрчик Сергій">    

    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0023.jpg" alt="Момот Василь"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0024.jpg" alt="Коломієць Сергій"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0026.jpg" alt="Смірнов Леонід">       
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0027.jpg" alt="Андреєв Олександр"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0028.jpg" alt="Ширшов Олександр"> 
    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0029.jpg" alt="Горбачов Олександр"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0030.jpg" alt="Деркач Ігор">   
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0034.jpg" alt="Расулов Сеймур">       
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0035.jpg" alt="Прилєпов Ігор"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0036.jpg" alt="Мурашов Микола"> 
    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0037.jpg" alt="Рудик Сергій"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0038.jpg" alt="Шидловський Олег">      
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0039.jpg" alt="Кобзаренко Тарас"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0040.jpg" alt="Когут Олександр"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0041.jpg" alt="Василенков Юрій"> 
       
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0043.jpg" alt="Гуменний Максим">     
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0045.jpg" alt="Димнич Юрій"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0046.jpg" alt="Яворський Олександр">            
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0047.jpg" alt="Кметь Тарас"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0048.jpg" alt="Шмирко Іван"> 
    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2909_0049.jpg" alt="Грицик Терезій"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0110_0001.jpg" alt="Хомич Сергій"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0110_0002.jpg" alt="Шаварін Сергій"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0110_0003.jpg" alt="Лозовий Артем">  
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0110_0005.jpg" alt="Маліновський Юрій">   
    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0110_0006.jpg" alt="Маліновський Дмитро">     
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0110_0007.jpg" alt="Мазурук Михайло">     
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0110_0008.jpg" alt="Олійник Сергій">     
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0110_0009.jpg" alt="Ленівков Олег">     
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0110_0010.jpg" alt="Дорофєєв Артем">  
    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2710_0001.jpg" alt="Пізняк Дмитро">     
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2710_0002.jpg" alt="Олександр Сташкевич"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0311_0002.jpg" alt="Юрій Бакуменко">    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0311_0001.jpg" alt="Максим Запорожець">  
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0711_0004.jpg" alt="Холодюк Іван"> 
    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0711_0001.jpg" alt="Станіславов Олександр"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0711_0002.jpg" alt="Присяжнюк Олександр">      
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0711_0003.jpg" alt="Андрєєв Олександр">      
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0912_0001.jpg" alt="Дудник Олександр">          
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0801_50.jpg" alt="Поп'як Олександр"> 
    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0801_0053.jpg" alt="Рожук Ігор">      
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0801_0054.jpg" alt="Завальнюк Віталій">     
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2801_1.jpg" alt="Матящук Олексій">     
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2801_2.jpg" alt="Дмитришен Іван">      
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2801_3.jpg" alt="Путкарадзе Анзор">
    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2801_4.jpg" alt="Когайчук Максим">      
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2602-2026 (1).jpg" alt="Люлько Костянтин">     
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2602-2026 (2).jpg" alt="Бануляк Сергій"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2602-2026 (3).jpg" alt="Муженко євгеній">  
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2602-2026 (4).jpg" alt="Діхтяр Олександр">     
    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2602-2026 (5).jpg" alt="Волошин Артем">     
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2602-2026 (6).jpg" alt="Майдюк Денис"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2602-2026 (7).jpg" alt="Регушевський Юрій">  
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2602-2026 (8).jpg" alt="Поплавський Вадим">         
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0204_1.jpg" alt="Кузнєцов Денис">
    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0204_2.jpg" alt="Романчук Віктор">    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0204_3.jpg" alt="Маркітан Віталій">    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0204_4.jpg" alt="Скорбатюк Євген">
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0204_5.jpg" alt="Микитюк Сергій">    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0204_6.jpg" alt="Швець Євген"> 
    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/0204_7.jpg" alt="Зоря Антон"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2404_0001.jpg" alt="Кодаков Олексій">     
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2404_0002.jpg" alt="Маліновський Дмитро"> 
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2404_0003.jpg" alt="Кметь Тарас">       
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2404_0004.jpg" alt="Кононенко Єгор"> 
    
    <img src="https://www.vmr.gov.ua/media/podyaky-gromadi/2404_0005.jpg" alt="Довбня Микола">       
    
    
    
  
  </div>
</div>

<div class="lightbox" id="lightbox">
  <span class="nav prev">&#10094;</span>
  <img id="lightbox-img" src="" alt="">
  <span class="nav next">&#10095;</span>
</div>

<script>
  const images = document.querySelectorAll('.gallery img');
  const lightbox = document.getElementById('lightbox');
  const lightboxImg = document.getElementById('lightbox-img');
  const prev = lightbox.querySelector('.prev');
  const next = lightbox.querySelector('.next');
  let currentIndex = 0;

  images.forEach((img, index) => {
    img.addEventListener('click', () => openLightbox(index));
  });

  function openLightbox(index) {
    currentIndex = index;
    updateLightbox();
    lightbox.style.display = 'flex';
  }

  function closeLightbox() {
    lightbox.style.display = 'none';
  }

  function updateLightbox() {
    lightboxImg.src = images[currentIndex].src;
    lightboxImg.alt = images[currentIndex].alt;
  }

  function changeSlide(direction) {
    currentIndex = (currentIndex + direction + images.length) % images.length;
    updateLightbox();
  }

  prev.addEventListener('click', (e) => {
    e.stopPropagation();
    changeSlide(-1);
  });

  next.addEventListener('click', (e) => {
    e.stopPropagation();
    changeSlide(1);
  });

  lightbox.addEventListener('click', (e) => {
    if (e.target === lightbox) closeLightbox();
  });

  document.addEventListener('keydown', (e) => {
    if (lightbox.style.display === 'flex') {
      if (e.key === 'ArrowRight') changeSlide(1);
      if (e.key === 'ArrowLeft') changeSlide(-1);
      if (e.key === 'Escape') closeLightbox();
    }
  });
</script>
]]></description>
      <pubDate>Fri, 24 Apr 2026 13:45:54 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/podiaky-hromadi</guid>
    </item>
    <item>
      <title>Підтримка книговидання про Вінницю</title>
      <link>https://new.vmr.gov.ua/pidtrymka-knyhovydannia-pro-vinnytsiu</link>
      <description><![CDATA[]]></description>
      <pubDate>Mon, 04 May 2026 09:36:49 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/pidtrymka-knyhovydannia-pro-vinnytsiu</guid>
    </item>
    <item>
      <title>Важлива інформація 2025</title>
      <link>https://new.vmr.gov.ua/vazhlyva-informatsiia-2025</link>
      <description><![CDATA[]]></description>
      <pubDate>Wed, 31 Dec 2025 11:43:39 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/vazhlyva-informatsiia-2025</guid>
    </item>
    <item>
      <title>Гуманітарна допомога</title>
      <link>https://new.vmr.gov.ua/humanitarna-dopomoha</link>
      <description><![CDATA[]]></description>
      <pubDate>Fri, 13 Feb 2026 09:24:55 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/humanitarna-dopomoha</guid>
    </item>
    <item>
      <title>Вінницька міська територіальна виборча комісія</title>
      <link>https://new.vmr.gov.ua/vinnytska-miska-terytorialna-vyborcha-komisiia</link>
      <description><![CDATA[]]></description>
      <pubDate>Mon, 11 May 2026 13:27:53 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/vinnytska-miska-terytorialna-vyborcha-komisiia</guid>
    </item>
    <item>
      <title>Важлива інформація 2024</title>
      <link>https://new.vmr.gov.ua/vazhlyva-informatsiia-2024</link>
      <description><![CDATA[]]></description>
      <pubDate>Thu, 16 Jan 2025 08:47:07 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/vazhlyva-informatsiia-2024</guid>
    </item>
    <item>
      <title>Очищення влади</title>
      <link>https://new.vmr.gov.ua/ochyshchennia-vlady</link>
      <description><![CDATA[]]></description>
      <pubDate>Wed, 18 Feb 2026 14:33:07 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/ochyshchennia-vlady</guid>
    </item>
    <item>
      <title> ​Інтегрований розвиток міста</title>
      <link>https://new.vmr.gov.ua/intehrovanyi-rozvytok-mista</link>
      <description><![CDATA[]]></description>
      <pubDate>Wed, 25 Oct 2023 08:13:25 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/intehrovanyi-rozvytok-mista</guid>
    </item>
    <item>
      <title>Інформація Податкової служби</title>
      <link>https://new.vmr.gov.ua/informatsiia-podatkovoi-sluzhby</link>
      <description><![CDATA[]]></description>
      <pubDate>Thu, 05 Feb 2026 09:18:16 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/informatsiia-podatkovoi-sluzhby</guid>
    </item>
    <item>
      <title>Конкурс проєктів ІГС</title>
      <link>https://new.vmr.gov.ua/konkurs-proiektiv-ihs</link>
      <description><![CDATA[]]></description>
      <pubDate>Wed, 25 Oct 2023 12:36:03 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/konkurs-proiektiv-ihs</guid>
    </item>
    <item>
      <title>Цифрова освіта</title>
      <link>https://new.vmr.gov.ua/tsyfrova-osvita</link>
      <description><![CDATA[]]></description>
      <pubDate>Mon, 18 May 2026 08:24:56 GMT</pubDate>
      <guid isPermaLink="true">https://new.vmr.gov.ua/tsyfrova-osvita</guid>
    </item>
  </channel>
</rss>