Eco Mir

Eco Mir is an interactive web platform dedicated to environmental education and awareness. It provides users with accessible learning materials on ecological problems, practical eco-tips, and information about renewable energy sources and the Red Book. The platform also features a quiz to test users' knowledge and a section for eco-volunteer events.

Live Demo

You can explore the live project at https://stepanda1.github.io/ecosite/.

Key Features

• Interactive Quiz: Test your ecological knowledge with a dynamic quiz that provides instant feedback and the option to download a certificate upon completion.
• Structured Learning Paths: Dive into various environmental topics, including water, air, and soil pollution, deforestation, poaching, and practical eco-friendly advice.
• Event Listings: Discover and connect with other eco-volunteer organizations through a curated list of external links.
• User Authentication: Secure user registration and login functionality (though learn.html is the target page for both login and registration forms).
• Responsive Navigation: A mobile-friendly burger menu ensures a seamless user experience across different devices.
• Image Slider: A visually engaging slider on the homepage showcases captivating environmental imagery.
• Contact Information: Easily reach out to the project maintainers via phone and email.

Tech Stack

The Eco Mir project is built using standard web technologies:

• HTML5: For structuring the web content.
• CSS3: For styling and layout, with a specific focus on light-mode-*.css files, indicating a light theme.
• JavaScript: For interactive elements, quiz logic, navigation, and sliders.
  • jQuery: A fast, small, and feature-rich JavaScript library for DOM manipulation and event handling.
  • Slick Carousel: A powerful jQuery plugin for creating responsive, customizable carousels and sliders (slick.min.js, slider-backup.js).
  • Custom JavaScript (app.js, slider-nature.js, burger.js): Implements the core quiz logic, a custom image slider, and the burger menu functionality.
• Yandex.Metrika: Integrated for web analytics and user behavior tracking.

Installation Instructions

This project is a static website and does not require a complex installation process. You can either clone the repository and open the HTML files directly in your browser or deploy it to a static web hosting service.

1. Clone the repository:

   git clone https://github.com/Stepanda1/ecosite.git

2. Navigate to the project directory:

   cd ecosite

Usage Guide

To use the Eco Mir website:

1. Open index.html: Simply open the index.html file in your preferred web browser.

   open index.html
   # or navigate to the file path in your browser

   The website will load, providing access to the main page, learning materials, quiz, and events.

2. Navigate the Site:

   • Use the navigation bar at the top to explore different sections: Главная (Home), Обучение (Learning), Тест (Quiz), События (Events).
   • Click on specific topics within the "Обучение" section to access detailed course materials.
   • Attempt the "Тест" to evaluate your knowledge.

3. Take the Quiz:

   • On the quest.html page, answer the multiple-choice questions.
   • After answering all questions, your score will be displayed.
   • If you achieve a perfect score, you'll have the option to download a certificate. Otherwise, you can try again.

4. Explore Events:

   • Visit the event.html page to find links to other eco-volunteer organizations.

Project Structure

The repository is organized as follows:

ecosite/
├── app.js                          # Core JavaScript for quiz logic
├── avtoriz.html                    # Login page
├── burger.js                       # JavaScript for mobile burger menu functionality
├── event.html                      # Page listing eco-volunteer organizations
├── index.html                      # Main homepage
├── learn.html                      # Learning materials overview page
├── light-mode-avtoriz.css          # Styles for authentication pages
├── light-mode-blog.css             # (Currently unused) Styles for blog section
├── light-mode-event.css            # Styles for event page
├── light-mode-learn.css            # Styles for learning pages
├── light-mode-main.css             # Styles for the main homepage
├── light-mode-quest.css            # Styles for the quiz page
├── quest.html                      # Quiz page
├── README.md                       # This README file
├── register.html                   # Registration page
├── slick.min.js                    # Minified Slick Carousel library
├── slider-backup.js                # Slick Carousel initialization for some pages (not currently used by index.html)
├── slider-nature.js                # Custom JavaScript for image slider on index.html
├── Мои работы.code-workspace       # VS Code workspace configuration
├── images/                         # Directory for all image assets
└── course/                         # Directory containing individual course modules
    ├── air.html                    # Course module on air pollution
    ├── water.html                  # Course module on water pollution (implied by links)
    ├── dirt.html                   # Course module on soil pollution (implied by links)
    ├── forest.html                 # Course module on deforestation (implied by links)
    ├── poaching.html               # Course module on poaching (implied by links)
    ├── life.html                   # Course module on practical tips (implied by links)
    └── light-mode-course.css       # Styles for course pages