Зелёное завтра»

1. «Зелёное завтра»

Интерактивная краудфандинговая платформа для
мониторинга лесовосстановления и климатических
инициатив

2. Экологический кризис и дефицит доверия

Глобальное обезлесение в цифрах
Ежегодно мировые экосистемы безвозвратно
теряют свыше 10 млн гектаров зрелого леса
вследствие вырубок и масштабных пожаров.
Барьеры классического
краудфандинга
Социологические опросы показывают: 74%
респондентов готовы финансово поддерживать
высадку деревьев, но сталкиваются с барьерами:
Основные последствия кризиса:
Ускоренная эрозия плодородных почв и
углеродного баланса (рост
пылевые Нарушение
бури
парникового эффекта)
Ускоренная эрозия плодородных почв и пылевые
бури
%55 - Нет
фото/GPS
отчётов
%30 - Сложная
оплата
%15 Недоверие к
фондам
Идея решения: убрать посредников и оцифровать
путь каждого рубля до саженца

3. Цель проекта и расчетная модель

Главная цель
Разработать веб-сайт,
автоматизирующий прозрачный
цикл:
Выбор → Оплата в 2 клика → Локация
саженца → Отчёт
Наглядно показать пользователю
математически обоснованный эко-эффект от
его действий в режиме реального времени.
CO2= Количество деревьев x 25
кг/год

4. Концепция сервиса

Сервис целевых донатов превращает абстрактную благотворительность в
интерактивный процесс:
1.
Доступность
Пользователь выбирает
объем: 1 саженец =
фиксированные 100
рублей
2. Быстрая оплата
Интеграция UIсценария оплаты СБП
или картой без лишних
шагов
3. GPS привязка
Фиксация: «Дерево
№1245 высажено
волонтерами в
Тверской области»
4. Верификация
Отправка именного
цифрового
сертификата и фотоподтверждения

5. Архитектура и стек технологий

Компонент
Технологии и паттерны
Программная реализация в проекте
Структура (HTML5)
Семантическая разметка, BEM
(Block-Element-Modifier)
Использование иерархических классов для чистоты
кода: .about_card, .main-hero_container. Логическое
разделение секций.
Оформление (CSS3)
Flexbox, CSS Grid, Responsive
Design
Построение сеток карточек и контента. Адаптивность
через @media запросы. Использование переменных для
управления цветами темы.
Логика (JS ES6+)
DOM-манипуляция, Event
Listeners, Runtime Objects
Функция updateCalculator() для реактивного обновления
UI. Хранение данных об угрозах в объекте threatsdata.
UX Алгоритмы
requestAnimationFrame, Math
Easing
Скрипт smoothScroll. Обеспечивает плавную навигацию
60 FPS без использования тяжелых сторонних библиотек.
Архитектура
Zero-Dependency
Отсутствие внешних фреймворков. Код полностью
автономен, что обеспечивает максимальную скорость
загрузки и производительность.

6. Ожидаемые результаты и выводы

Для пользователя
Снятие барьера недоверия за счет
открытой GPS-отчетности, удобный UI
доната в 2 клика, формирование
эмоциональной связи с проектом
Для экологии
Повышение конверсии посещений в
реальные транзакции и увеличение
объемов лесовосстановления силами
краудфандинга.
Итог курсовой работы: Спроектирована и полностью программно описана
жизнеспособная веб-модель привлечения целевых средств на базе чистого,
производительного клиентского кода