Разработка веб-приложения "EcoWash: Гид по чистым продуктам"

Техническое задание на разработку веб-приложения "EcoWash: Гид по чистым продуктам"

1. Введение

· 1.1. Наименование проекта: "EcoWash" (рабочее название) – интерактивный гид по безопасному замачиванию овощей, фруктов и зелени.
· 1.2. Цель проекта: Создать простое и удобное веб-приложение (HTML/CSS/JS), которое предоставляет пользователям научно-обоснованные рекомендации по времени и концентрации содового раствора для снижения содержания пестицидов, гербицидов и нитратов в растительных продуктах.
· 1.3. Целевая аудитория: Пользователи, заботящиеся о здоровом питании, экологии и сокращении химикатов в пище.

2. Требования к функциональности (Функциональные требования)
Приложение должно состоять из одной HTML-страницы с интуитивно понятным интерфейсом, реализующим следующий рабочий процесс:

· 2.1. Функция выбора продукта:
  · Элемент: Раскрывающийся список (<select>) или поле с автодополнением (<input> + datalist).
  · Данные: Список популярных овощей, фруктов, зелени и ягод (например: яблоко, огурец, клубника, шпинат, виноград, картофель, помидор, салат).
  · Действие: При выборе продукта динамически подгружаются параметры для него.
· 2.2. Функция отображения параметров замачивания:
  · После выбора продукта на экране должны отображаться:
    · Рекомендуемая концентрация содового раствора: В процентах или в понятной форме (например, "1 чайная ложка (7г) пищевой соды на 1 литр теплой воды").
    · Время замачивания: В минутах (например, "12-15 минут").
    · Дополнительные рекомендации (опционально, но желательно): Текстовое поле с советами (напр., "Промыть под проточной водой до и после замачивания", "Для листовой зелени время можно сократить", "Не использовать для нежных ягод (малина)").
    · Визуальный таймер (дополнительная функция): Кнопка "Запустить таймер", которая запускает обратный отсчет согласно указанному времени.
· 2.3. Функция управления данными (для администратора/разработчика):
  · Реализация: Данные о продуктах и рецептах должны храниться в отдельном файле data.js в формате JSON. Это позволит легко добавлять, изменять или удалять продукты без редактирования HTML-кода.
· Пример структуры данных:
   
    const productsData = [
        {
            id: 1,
            name: "Яблоко",
            concentration: "1% раствор (1 ч.л. на 1 л воды)",
            timeMinutes: 12,
            note: "Можно потереть кожуру во время замачивания."
        },
        {
            id: 2,
            name: "Огурец",
            concentration: "1.5% раствор (1.5 ч.л. на 1 л воды)",
            timeMinutes: 15,
            note: "Особенно важно для неочищенных от кожуры огурцов."
        },
        {
            id: 3,
            name: "Клубника",
            concentration: "0.5% раствор (0.5 ч.л. на 1 л воды)",
            timeMinutes: 5,
            note: "Будьте осторожны, чтобы ягоды не размокли."
        }
    ];
    
3. Нефункциональные требования

· 3.1. Технологии: Чистый HTML5, CSS3 (можно с использованием фреймворков типа Bootstrap для скорости), Vanilla JavaScript (без внешних библиотек, если не нужен сложный функционал).
· 3.2. Адаптивность: Интерфейс должен корректно отображаться на устройствах с разным разрешением (мобильные телефоны, планшеты, десктопы).
· 3.3. Производительность: Быстрая загрузка страницы. Все данные загружаются локально.
· 3.4. Дизайн (UI/UX): Чистый, минималистичный, "аппетитный" дизайн. Использование интуитивно понятных иконок (лупа, таймер, капля). Цветовая палитра: природные, зеленые, синие тона.

4. Структура проекта (макет)

· index.html – главная страница приложения.
· styles.css – файл стилей.
· script.js – основная логика приложения (обработчики событий, рендеринг данных).
· data.js – база данных продуктов в формате JSON.
· assets/ – папка для изображений и иконок.

5. Этапы разработки (Дорожная карта)

1. Этап 1: Прототип (1-2 дня). Создание статической HTML-страницы с выпадающим списком и "зашитыми" параметрами для 2-3 продуктов.
2. Этап 2: Логика (1-2 дня). Подключение JavaScript, вынос данных в data.js, реализация динамического отображения информации в зависимости от выбора пользователя.
3. Этап 3: Дизайн и адаптивность (2-3 дня). Стилизация с использованием CSS, обеспечение адаптивности.
4. Этап 4: Дополнительные функции (1-2 дня). Реализация таймера с уведомлением (используя alert() или звук), улучшение UX.
5. Этап 5: Тестирование и наполнение (1-2 дня). Проверка на разных устройствах и браузерах. Пополнение базы данных (data.js) актуальной информацией по продуктам.