khvoynitskaya13-hue opened a new issue, #35:
URL: https://github.com/apache/celix-site/issues/35
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>17 Целей Устойчивого Развития (ЦУР) — Интерактивный Проект</title>
<!-- Подключение Tailwind CSS -->
<script src="https://cdn.tailwindcss.com";></script>
<!-- Настройка шрифта Inter (рекомендуется для современного дизайна) -->
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap";
rel="stylesheet">
<style>
/* Применение шрифта Inter ко всему документу */
body {
font-family: 'Inter', sans-serif;
background-color: #f7f7f7;
}
/* Стиль для ЦУР-плитки */
.sdg-tile {
transition: transform 0.2s, box-shadow 0.2s;
cursor: pointer;
}
.sdg-tile:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Стили для модального окна */
.modal {
transition: opacity 0.3s ease-in-out;
}
</style>
</head>
<body class="p-4 md:p-8">
<header class="text-center mb-10 pt-4">
<h1 class="text-4xl md:text-5xl font-extrabold text-gray-900 mb-3">
Проект: 17 Шагов к Устойчивости
</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
Исследуйте Цели Устойчивого Развития ООН и узнайте, что можно
сделать на локальном уровне.
</p>
</header>
<!-- Сетка ЦУР -->
<main id="sdg-grid" class="max-w-7xl mx-auto grid grid-cols-2
sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-7 gap-4 md:gap-6">
<!-- Плитки ЦУР будут вставлены сюда с помощью JS -->
</main>
<!-- Модальное окно с деталями ЦУР -->
<div id="sdg-modal" class="modal fixed inset-0 z-50 flex items-center
justify-center bg-black bg-opacity-50 opacity-0 pointer-events-none">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl m-4 p-6
md:p-8 transform translate-y-2 transition-transform duration-300">
<!-- Заголовок и кнопка закрытия -->
<div class="flex justify-between items-start border-b pb-4 mb-4">
<h2 id="modal-title" class="text-3xl font-bold
text-gray-900"></h2>
<button onclick="closeModal()" class="text-gray-400
hover:text-gray-700 transition duration-150">
<svg class="w-6 h-6" fill="none" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg";><path
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6
6l12 12"></path></svg>
</button>
</div>
<div class="md:flex md:space-x-8">
<!-- Описание ЦУР -->
<div class="md:w-1/2 mb-6 md:mb-0">
<h3 class="text-xl font-semibold mb-3 text-gray-700
border-b border-gray-200 pb-1">Описание цели</h3>
<p id="modal-description" class="text-gray-600
leading-relaxed"></p>
<!-- Блок с видео/анимацией был удален -->
</div>
<!-- Местные инициативы -->
<div class="md:w-1/2">
<h3 class="text-xl font-semibold mb-3 text-gray-700
border-b border-gray-200 pb-1">Локальные Инициативы</h3>
<ul id="modal-initiatives" class="space-y-3
text-gray-700">
<!-- Инициативы будут вставлены сюда -->
</ul>
</div>
</div>
</div>
</div>
<script>
// Исходные данные для 17 Целей Устойчивого Развития (ЦУР)
// Цвета взяты из официальной палитры ООН
const sdgData = [
{
id: 1,
title: 'Ликвидация нищеты',
color: '#E5242B',
description: 'Искоренение нищеты во всех её формах и
повсеместно. Это самая первая и главная цель, являющаяся основой для всех
остальных.',
initiatives: ['Программа микрокредитования для малоимущих
семей.', 'Фонд помощи одиноким пенсионерам в зимний период.', 'Создание
социальных магазинов с низкими ценами.'],
iconPath: 'M12 12c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4
4-1.79 4-4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z' // Simplified
Person icon
},
{
id: 2,
title: 'Ликвидация голода',
color: '#DDA63A',
description: 'Ликвидация голода, обеспечение
продовольственной безопасности, улучшение питания и содействие устойчивому
развитию сельского хозяйства.',
initiatives: ['Городские сады и огороды для
общественности.', 'Приложение для передачи излишков еды из кафе и магазинов
нуждающимся (фудшеринг).', 'Поддержка местных фермеров, использующих
экологичные методы.'],
iconPath: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48
10-10S17.52 2 12 2zM7 9h10c.55 0 1 .45 1 1s-.45 1-1 1H7c-.55 0-1-.45-1-1s.45-1
1-1zm3 6h4c.55 0 1 .45 1 1s-.45 1-1 1h-4c-.55 0-1-.45-1-1s.45-1 1-1z' //
Simplified Food icon
},
{
id: 3,
title: 'Хорошее здоровье и благополучие',
color: '#4C9F38',
description: 'Обеспечение здорового образа жизни и
содействие благополучию для всех в любом возрасте. Охватывает борьбу с
болезнями и психическое здоровье.',
initiatives: ['Бесплатные классы йоги и скандинавской ходьбы
в парках.', 'Программа "Здоровый старт" для молодых родителей.',
'Информационные кампании по ментальному здоровью.'],
iconPath: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48
10-10S17.52 2 12 2zm0 14.5c-.83 0-1.5-.67-1.5-1.5h3c0 .83-.67 1.5-1.5
1.5zm1.5-4.5h-3V7h3v5.5z' // Simplified Heartbeat/Medical icon
},
{
id: 4,
title: 'Качественное образование',
color: '#C5192D',
description: 'Обеспечение всеохватного и справедливого
качественного образования и поощрение возможности обучения на протяжении всей
жизни для всех.',
initiatives: ['Кружки программирования для детей из
малообеспеченных семей.', 'Менторские программы для выпускников школ от
успешных профессионалов.', 'Открытые онлайн-курсы по "мягким" навыкам.'],
iconPath: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03
9-9-4.03-9-9-9zM7 11c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3zm8.5
2c-.97 0-1.78-.6-2.12-1.42C14.07 9.99 15.01 9 16 9c.55 0 1 .45 1 1s-.45 1-1
1h-1.5v2h1.5c1.1 0 2-.9 2-2s-.9-2-2-2h-1.5V9c0-1.1-.9-2-2-2H9.5C8.4 7 7.5 7.9
7.5 9v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2z' // Simplified Book icon
},
{
id: 5,
title: 'Гендерное равенство',
color: '#FF3A21',
description: 'Обеспечение гендерного равенства и расширение
прав и возможностей всех женщин и девочек. Отмена дискриминации во всех
сферах.',
initiatives: ['Курсы финансовой грамотности для
женщин-предпринимателей.', 'Кампании против гендерных стереотипов в местных СМИ
и школах.', 'Создание безопасных пространств для девушек.'],
iconPath: 'M12 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9
2-2-.9-2-2-2zm-6 2c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2zm12 0c0 1.1-.9 2-2
2s-2-.9-2-2 .9-2 2-2 2 .9 2 2z' // Simplified Gender/Equality icon
},
{
id: 6,
title: 'Чистая вода и санитария',
color: '#26BDE2',
description: 'Обеспечение наличия и рационального
использования водных ресурсов и санитарии для всех. Доступ к безопасной и
недорогой питьевой воде.',
initiatives: ['Проекты по очистке малых рек и родников.',
'Установка систем сбора дождевой воды для полива общественных территорий.',
'Образовательные программы об экономии воды.'],
iconPath: 'M12 2c-3.31 0-6 2.69-6 6 0 4.2 4.47 9.8 6 12
1.53-2.2 6-7.8 6-12 0-3.31-2.69-6-6-6zm0 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9
2-2 2z' // Simplified Water Drop icon
},
{
id: 7,
title: 'Недорогостоящая и чистая энергия',
color: '#FCC30B',
description: 'Обеспечение доступа к недорогостоящим,
надежным, устойчивым и современным источникам энергии для всех.',
initiatives: ['Программа установки солнечных панелей на
крышах школ и детских садов.', 'Повышение энергоэффективности общественных
зданий (замена окон, утепление).', 'Субсидии на покупку энергосберегающих
ламп.'],
iconPath: 'M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48
10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'
// Simplified Sun/Energy icon
},
{
id: 8,
title: 'Достойная работа и экономический рост',
color: '#A21942',
description: 'Поощрение стабильного, всеохватного и
устойчивого экономического роста, полной и производительной занятости и
достойной работы для всех.',
initiatives: ['Ярмарки вакансий с акцентом на
трудоустройство молодежи и пенсионеров.', 'Программы переподготовки для
старшего поколения в сфере IT.', 'Поддержка малого и среднего
предпринимательства.'],
iconPath: 'M12 4.5l-10 8 10 8 10-8-10-8zm0 13.62L3.8
11.82l.9-1.35 6.3 4.2 6.3-4.2.9 1.35L12 18.12z' // Simplified Graph/Growth icon
},
{
id: 9,
title: 'Инновации и инфраструктура',
color: '#FD6925',
description: 'Создание стойкой инфраструктуры, содействие
всеохватной и устойчивой индустриализации и поощрение инноваций.',
initiatives: ['Строительство инкубатора для IT-стартапов и
хайтек-проектов.', 'Модернизация дорожной сети с использованием "умных"
технологий.', 'Развитие оптоволоконной сети в удаленных поселках.'],
iconPath: 'M4 14.5h16c.55 0 1-.45
1-1v-2c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1zm0 4h16c.55 0 1-.45
1-1v-2c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1zM3 5.5v2c0 .55.45 1
1 1h16c.55 0 1-.45 1-1v-2c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1z' // Simplified
Building/Infrastructure icon
},
{
id: 10,
title: 'Уменьшение неравенства',
color: '#DD1367',
description: 'Снижение неравенства внутри стран и между
ними. Обеспечение равных возможностей для всех, независимо от пола, расы или
экономического положения.',
initiatives: ['Центры бесплатной юридической помощи для
мигрантов и малозащищенных групп.', 'Программы интеграции людей с ограниченными
возможностями в рабочую среду.', 'Введение прогрессивной шкалы оплаты труда в
муниципальных учреждениях.'],
iconPath: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48
10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8
8zm-4-4v-2h8v2H8zm0-4V8h8v4H8z' // Simplified Equal Sign/Balance icon
},
{
id: 11,
title: 'Устойчивые города и населенные пункты',
color: '#FD9D24',
description: 'Обеспечение открытости, безопасности,
жизнестойкости и экологической устойчивости городов и населенных пунктов.',
initiatives: ['Проекты "двор без машин" и расширение
пешеходных зон.', 'Создание новых велосипедных дорожек и развитие общественного
транспорта.', 'Восстановление заброшенных зданий под общественные
пространства.'],
iconPath: 'M12 2l-5 5v10h10V7l-5-5zm-2
14v-4h4v4h-4zm5-5H7V7h8v4z' // Simplified City/Building icon
},
{
id: 12,
title: 'Ответственное потребление и производство',
color: '#BF8B2E',
description: 'Обеспечение перехода к рациональным моделям
потребления и производства. Уменьшение отходов и эффективное использование
ресурсов.',
initiatives: ['Внедрение системы раздельного сбора отходов и
организация пунктов приема вторсырья.', 'Мастер-классы по "апсайклингу"
(переработке старых вещей) и ремонту.', 'Кампании по сокращению использования
пластика.'],
iconPath: 'M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52
2 12 6.48 2 12 2zm0 16c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z' //
Simplified Infinity/Recycle icon
},
{
id: 13,
title: 'Борьба с изменением климата',
color: '#3F7E44',
description: 'Принятие срочных мер по борьбе с изменением
климата и его последствиями. Интеграция мер по борьбе с изменением климата в
национальную политику.',
initiatives: ['Масштабная посадка деревьев и создание
"зеленых поясов" вокруг города.', 'Кампании по сокращению использования личного
автотранспорта (дни без автомобиля).', 'Просвещение о парниковых газах и
углеродном следе.'],
iconPath: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48
10-10S17.52 2 12 2zm-1 15v-4.48l1.3-.98 1.48 1.48
2.82-2.82c-1.33-2.52-3.95-4.2-7-4.2-3.5 0-6.57 2.05-8 5 1.43 2.95 4.5 5 8 5z'
// Simplified Planet/Climate icon
},
{
id: 14,
title: 'Сохранение морских экосистем',
color: '#0A97D9',
description: 'Сохранение и рациональное использование
океанов, морей и морских ресурсов в интересах устойчивого развития. (Актуально
и для местных водоемов).',
initiatives: ['Субботники по очистке береговых линий рек и
озер.', 'Экологический мониторинг местных водоемов силами волонтеров.',
'Программы по сохранению редких видов рыб и водоплавающих.'],
iconPath: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48
10-10S17.52 2 12 2zm-1 15v-2h2v2h-2zm0-4v-2h2v2h-2zm0-4V7h2v2h-2z' //
Simplified Fish/Ocean icon
},
{
id: 15,
title: 'Сохранение экосистем суши',
color: '#56C02B',
description: 'Защита, восстановление и содействие
рациональному использованию экосистем суши. Управление лесами, борьба с
опустыниванием и утратой биоразнообразия.',
initiatives: ['Восстановление лесных массивов, пострадавших
от пожаров или вырубки.', 'Создание природных заповедников и "экологических
троп" вблизи города.', 'Программы борьбы с инвазивными видами растений.'],
iconPath: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48
10-10S17.52 2 12 2zm-2 16c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM15
8h-2V5h2v3zm0 4h-2v-2h2v2zm0 4h-2v-2h2v2z' // Simplified Tree/Land icon
},
{
id: 16,
title: 'Мир, правосудие и эффективные институты',
color: '#00689D',
description: 'Содействие построению мирных и открытых
обществ в интересах устойчивого развития, обеспечение доступа к правосудию для
всех и создание эффективных, подотчетных и основанных на широком участии
учреждений.',
initiatives: ['Программы медиации и разрешения конфликтов в
школах и общинах.', 'Центры бесплатной юридической помощи для мигрантов и
малозащищенных групп.', 'Проекты по повышению прозрачности работы местных
органов власти.'],
iconPath: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48
10-10S17.52 2 12 2zm-1 17c-2.76 0-5-2.24-5-5h2c0 1.66 1.34 3 3 3s3-1.34
3-3H9c0-3.31 2.69-6 6-6s6 2.69 6 6h-2c0-2.21-1.79-4-4-4s-4 1.79-4 4z' //
Simplified Dove/Justice icon
},
{
id: 17,
title: 'Партнерство в интересах устойчивого развития',
color: '#19486A',
description: 'Укрепление средств достижения и активизация
работы в рамках глобального партнерства в интересах устойчивого развития.
Объединение усилий всех сторон.',
initiatives: ['Создание платформы для объединения НПО,
бизнеса и власти в целях ЦУР.', 'Международные молодежные обмены по теме
устойчивости.', 'Сбор средств для поддержки проектов в развивающихся странах.'],
iconPath: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48
10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8
8zm-2-9h4v-2h-4v2z' // Simplified Partnership/Global icon
},
];
// Функция для создания SVG-иконки
function createSdgIcon(path, color) {
return `
<svg class="w-10 h-10 mx-auto mb-2" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg";>
<path d="${path}" fill="${color}" stroke-width="0"/>
</svg>
`;
}
// Функция для отрисовки плиток ЦУР
function renderSdgTiles() {
const grid = document.getElementById('sdg-grid');
sdgData.forEach(sdg => {
const tile = document.createElement('div');
tile.className = 'sdg-tile p-4 rounded-xl text-white
shadow-md flex flex-col justify-between items-center text-center';
tile.style.backgroundColor = sdg.color;
tile.onclick = () => openModal(sdg);
tile.innerHTML = `
<div class="p-2 rounded-full bg-white bg-opacity-30
mb-3">
<span class="text-3xl font-black">${sdg.id}</span>
</div>
${createSdgIcon(sdg.iconPath, '#FFFFFF')}
<p class="text-sm font-semibold">${sdg.title}</p>
`;
grid.appendChild(tile);
});
}
// Функция для открытия модального окна
function openModal(sdg) {
const modal = document.getElementById('sdg-modal');
const titleElement = document.getElementById('modal-title');
const descriptionElement =
document.getElementById('modal-description');
const initiativesList =
document.getElementById('modal-initiatives');
// Заполнение модального окна данными
titleElement.textContent = `ЦУР ${sdg.id}: ${sdg.title}`;
titleElement.style.color = sdg.color; // Подсветка заголовка
цветом цели
descriptionElement.textContent = sdg.description;
// Очистка и заполнение списка инициатив
initiativesList.innerHTML = '';
sdg.initiatives.forEach(initiative => {
const li = document.createElement('li');
li.className = 'flex items-start';
li.innerHTML = `
<svg class="w-4 h-4 mt-1 mr-2 flex-shrink-0"
fill="${sdg.color}" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg";><path fill-rule="evenodd" d="M10 18a8 8 0
100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1
0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span>${initiative}</span>
`;
initiativesList.appendChild(li);
});
// Показ модального окна
modal.classList.remove('opacity-0', 'pointer-events-none');
modal.querySelector('div').classList.remove('translate-y-2');
}
// Функция для закрытия модального окна
function closeModal() {
const modal = document.getElementById('sdg-modal');
modal.classList.add('opacity-0', 'pointer-events-none');
modal.querySelector('div').classList.add('translate-y-2');
}
// Запуск отрисовки плиток при загрузке страницы
window.onload = function() {
renderSdgTiles();
};
// Закрытие модального окна по нажатию Esc
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
closeModal();
}
});
// Закрытие модального окна по клику вне него
document.getElementById('sdg-modal').addEventListener('click',
(event) => {
if (event.target.id === 'sdg-modal') {
closeModal();
}
});
</script>
</body>
</html>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
