/
Seler1ty
/
Project_Sber
Обзор
Документация
Войти
/
Seler1ty
/
Project_Sber
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
dev
type1(dev)/index.html
143 строки
7 KB
DarkusBlake
Create: index.html, style.css, city.js, layers.js, main.js, map.js, search.js, ui.js, utils.js
15 июн 2026, 19:52
Верифицирован
15 июн 2026, 19:52
0314866
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> <title>Карта качества городских кварталов</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" /> <link rel="stylesheet" href="./style.css"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <div class="controls"> <div class="city-selector"> <h1><i class="fas fa-city"></i> Выберите город</h1> <div class="city-buttons"> <button class="city-btn" data-city="moscow">Москва</button> <button class="city-btn active" data-city="ekaterinburg">Екатеринбург</button> <button class="city-btn" data-city="peter">Санкт-Петербург</button> </div> </div> </div> <div id="map"></div> <!-- Панель слоёв --> <div id="layers-panel" class="layers-panel"> <h4><i class="fas fa-layer-group"></i> Инструменты</h4> <div class="layer-item"> <label class="layer-switch"> <input type="checkbox" id="layer-quarters-checkbox"> <span class="slider round"></span> </label> <span><i class="fas fa-building"></i> Оценка кварталов</span> </div> <div class="layer-item"> <label class="layer-switch"> <input type="checkbox" id="layer-roads-checkbox"> <span class="slider round"></span> </label> <span><i class="fas fa-road"></i> Оценка дорог</span> </div> <div class="layer-item"> <label class="layer-switch"> <input type="checkbox" id="layer-parks-checkbox"> <span class="slider round"></span> </label> <span><i class="fas fa-tree"></i> Оценка парков</span> </div> </div> <div id="loading" class="loading-spinner"> <div class="spinner"></div> <div>Загрузка данных...</div> </div> <!-- Кнопка для вызова легенды --> <button id="legend-btn" class="legend-btn"> <i class="fas fa-info-circle"></i> Легенда </button> <!-- Модальное окно легенды --> <div id="legend-modal" class="legend-modal"> <div class="legend-modal-content"> <div class="legend-modal-header"> <h3><i class="fas fa-key"></i> Легенда карты</h3> <span class="legend-close">×</span> </div> <div class="legend-modal-body"> <h4><i class="fas fa-building"></i> Кварталы</h4> <div class="legend-item"> <div class="legend-color" style="background-color: #0a4b8a"></div> <span>3 - Хорошее качество</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #4a8fe7"></div> <span>2 - Нормальное качество</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #a6c8ff"></div> <span>1 - Плохое качество</span> </div> <h4><i class="fas fa-tree"></i> Зелёные зоны (по NDVI)</h4> <div class="legend-item"> <div class="legend-color" style="background-color: #004d00"></div> <span>NDVI — Выдающийся</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #1a5c1a"></div> <span>NDVI — Хороший</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #4CAF50"></div> <span>NDVI — Средний</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #8bc34a"></div> <span>NDVI — Низкий</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #cddc39"></div> <span>NDVI — Очень низкий</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #aaaaaa"></div> <span>Нет данных</span> </div> <h4><i class="fas fa-road"></i> Дороги</h4> <div class="legend-item"> <div class="legend-color" style="background-color: #3acea1"></div> <span>Хорошее состояние</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #FF8F00"></div> <span>Обычное состояние</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #D32F2F"></div> <span>Плохое состояние</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #6c757d"></div> <span>Нет данных</span> </div> </div> </div> </div> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script> <script src="./js/utils.js"></script> <script src="./js/ui.js"></script> <script src="./js/city.js"></script> <script src="./js/layers.js"></script> <script src="./js/search.js"></script> <script src="./js/map.js"></script> <script src="./js/main.js"></script> </body> </html>