# ?? Отчёт о создании сайта «ВкусноЕд»

---

## ТИТУЛЬНЫЙ ЛИСТ

```
ОТЧЁТ
о выполнении творческого проекта
по веб-разработке

Тема: «Создание сайта доставки еды "ВкусноЕд"»

Ссылка на готовый сайт:http://pivovale.beget.tech/

Выполнила: Пивоварова Анна

Дата сдачи: 23 июня 2026 года
```

---

## 1?? ВВЕДЕНИЕ

В современном мире доставка еды стала неотъемлемой частью жизни многих людей. Целью данного проекта было создать **полноценный сайт службы доставки еды** «ВкусноЕд», который:

- работает без установки дополнительных программ
- открывается в любом браузере
- корректно отображается на компьютере и телефоне
- содержит интерактивные элементы: корзину, калькулятор калорий и мини-игры

В ходе работы были освоены базовые технологии веб-разработки: **HTML, CSS и JavaScript**.

---

## 2?? ВЫБОР ПЛАТФОРМЫ ДЛЯ СОЗДАНИЯ САЙТА

### Первоначальный план: конструктор сайтов

Изначально планировалось создавать сайт на конструкторе (Tilda, Wix или аналогичных платформах). Казалось, что это будет проще и быстрее:

**Преимущества конструкторов:**
- ? Не нужно программировать
- ? Визуальный редактор «перетащи и оставь»
- ? Много готовых шаблонов

**Но были и недостатки:**
- ? Ограниченный функционал в бесплатных версиях
- ? Сложно сделать что-то уникальное
- ? Платная подписка для полноценной работы
- ? Нельзя разместить на своём хостинге

### Почему я выбрала ручную вёрстку и хостинг Beget

В процессе изучения вопроса я поняла, что хочу **настоящий сайт**, а не шаблонное решение. Поэтому приняла решение:

1. **Научиться основам веб-разработки** — HTML, CSS, JavaScript
2. **Сделать сайт с нуля** — полный контроль над дизайном и функционалом
3. **Разместить на хостинге Beget** — популярный российский хостинг с:
   - Бесплатным тарифом для начала
   - Удобным файловым менеджером
   - Поддержкой PHP и баз данных
   - Хорошей технической поддержкой

**Сравнение подходов:**

| Критерий | Конструктор сайтов | Ручная вёрстка + Beget |
|----------|-------------------|----------------------|
| Время создания | 1–2 дня | 2–3 недели |
| Уникальность | Низкая | Полная |
| Гибкость | Ограничена | Безгранична |
| Стоимость | От 300 ?/мес | Бесплатно |
| Навыки | Не развиваются | Реальный опыт |
| Переносимость | Сложно | Легко |
| **Мой выбор** | ? | ? |

**Вывод:** Хотя создание сайта вручную заняло больше времени, я получила **бесценный опыт** и **настоящий рабочий проект**, который можно развивать и улучшать.

---

## 3?? ИСПОЛЬЗУЕМЫЕ ТЕХНОЛОГИИ

| Технология | Для чего использовалась |
|------------|------------------------|
| **HTML5** | Структура сайта: заголовки, карточки, кнопки, страницы |
| **CSS3** | Оформление: цвета, анимации, адаптивность, тени |
| **JavaScript** | Логика: корзина, переключение страниц, игры, калькулятор |
| **Canvas API** | Отрисовка игры «Тетрис» |

Весь сайт состоит из **одного файла** `index.html` — стили и скрипты встроены внутрь. Это упрощает загрузку на хостинг и позволяет сайту работать офлайн.

---

## 4?? ЭТАПЫ РАЗРАБОТКИ

### Этап 1. Планирование
- Придумала название сайта: «ВкусноЕд»
- Определила целевую аудиторию: люди, заказывающие еду на дом
- Составила структуру: 3 страницы (Главная, Меню, О нас)
- Выбрала цветовую палитру
- Изучила возможности хостинга Beget

### Этап 2. Изучение основ
- Посмотрела уроки по HTML и CSS для начинающих
- Разобралась с базовым синтаксисом JavaScript
- Изучила документацию по Canvas API для игр
- Почитала форумы о веб-разработке

### Этап 3. Разработка структуры (HTML)
Создала «скелет» сайта:
- Шапка с логотипом и меню навигации
- Три страницы, переключающиеся без перезагрузки
- Блоки с блюдами, отзывами, информацией
- Всплывающая корзина
- Модальные окна для игр

### Этап 4. Оформление (CSS)
Применила современный дизайн:
- Скруглённые углы (`border-radius: 20px`)
- Мягкие тени (`box-shadow`)
- Плавные анимации (hover, fade-in, shake)
- Адаптивность через медиа-запросы (`@media`)

### Этап 5. Программирование (JavaScript)
Реализовала интерактивные функции:
- Массив из 25 блюд с данными (название, цена, калории, БЖУ)
- Функция переключения страниц `showPage()`
- Работающую корзину с подсчётом суммы
- Калькулятор калорий с прогресс-барами
- Фильтры блюд по категориям

### Этап 6. Добавление игр
Создала три мини-приложения для получения скидок:
- ?? **Тетрис** — классическая игра, скидка 50% за 500 очков
-  **Мемори** — найди пары блюд за 30 секунд, скидка 20%
- ?? **Кликер** — 50 кликов по пицце за 10 секунд, скидка 25%

### Этап 7. Работа с изображениями
- Скачала фотографии еды с бесплатных сайтов (Unsplash)
- Сохранила ссылки на изображения в коде
- Настроила автоматическую замену на эмодзи, если фото не загрузилось

### Этап 8. Тестирование и доработка
- Проверила работу на компьютере и телефоне
- Исправила ошибки с отображением картинок
- Добавила информацию о директоре (Пивоваровой А. С.)
- Протестировала все три игры

### Этап 9. Подготовка к размещению на Beget
- Оптимизировала код
- Проверила все ссылки и пути к файлам
- Подготовила инструкцию по загрузке

---

## 5?? СТРУКТУРА САЙТА

```
index.html (один файл, ~1500 строк)
+-- <head>
¦   +-- META-теги (кодировка, адаптивность)
¦   L-- <style> (весь CSS — около 500 строк)
¦
+-- <body>
¦   +-- Шапка (header) с навигацией
¦   +-- Страница 1: Главная
¦   ¦   +-- Hero-блок с фото
¦   ¦   +-- Популярные блюда
¦   ¦   +-- Преимущества
¦   ¦   +-- Игры (Тетрис, Мемори, Кликер)
¦   ¦   L-- Отзывы (7 штук)
¦   +-- Страница 2: Меню
¦   ¦   +-- Фильтры по 7 категориям
¦   ¦   +-- 25 карточек блюд
¦   ¦   L-- Калькулятор калорий
¦   +-- Страница 3: Информация
¦   ¦   +-- О компании
¦   ¦   +-- Директор
¦   ¦   +-- Отзывы
¦   ¦   L-- Доставка
¦   +-- Корзина (выезжающая панель)
¦   +-- Модальные окна (3 игры)
¦   L-- Футер
¦
L-- <script> (весь JS — около 600 строк)
    +-- Массив dishes (25 блюд)
    +-- Функции страниц
    +-- Логика корзины
    +-- Калькулятор калорий
    +-- Тетрис
    +-- Мемори
    -- Кликер
```

---

## 6?? ДИЗАЙН И ЦВЕТОВАЯ ПАЛИТРА

| Цвет | HEX | Применение |
|------|-----|-----------|
| ?? Оранжевый | `#FF6B35` | Основной цвет, цены, кнопки |
| ?? Зелёный | `#2ECC71` | Калории, кнопки «В корзину», скидки |
| ? Белый | `#FFFFFF` | Фон карточек |
| ?? Кремовый | `#FFF8F0` | Фон секций |
|  Тёмно-синий | `#2C3E50` | Основной текст, футер |

Цвета заданы через CSS-переменные в блоке `:root`, что позволяет перекрасить весь сайт, изменив всего 5 строк кода.

---

## 7?? ФУНКЦИОНАЛЬНЫЕ ВОЗМОЖНОСТИ

? **Навигация** — переключение между страницами без перезагрузки (SPA)  
? **Меню** — 25 блюд с фильтрами по 7 категориям  
? **Корзина** — добавление, изменение количества, подсчёт суммы  
? **Скидки** — применяются автоматически к итоговой цене  
? **Калькулятор калорий** — считает КБЖУ в реальном времени  
? **Отзывы** — 7 развёрнутых отзывов с оценками  
? **Игры** — Тетрис (50%), Мемори (20%), Кликер (25%)  
? **Адаптивность** — корректное отображение на телефонах  
? **Анимации** — hover-эффекты, тряска корзины, плавные переходы

---

## 8?? ОПИСАНИЕ ИГР

### ?? Тетрис (скидка 50%)
Классическая игра с падающими фигурами. Нужно набрать **500 очков**, чтобы получить максимальную скидку. Управление стрелками клавиатуры.

### ?? Мемори (скидка 20%)
Игра на память с карточками блюд. Нужно найти все **8 пар** за **30 секунд**. Карточки переворачиваются по клику.

### ?? Кликер (скидка 25%)
Динамичная игра на скорость. Нужно сделать **50 кликов** по большой пицце за **10 секунд**. При каждом клике пицца анимируется.

---

## 9?? ВОЗНИКШИЕ ПРОБЛЕМЫ И ИХ РЕШЕНИЕ

### Проблема 1: Картинки не отображались
**Причина:** некоторые ссылки на изображения блокировались.  
**Решение:** использовала стабильные ссылки с Unsplash и добавила автоматическую замену на эмодзи через `onerror`.

### Проблема 2: Русские буквы превращались в «кракозябры»
**Причина:** неправильная кодировка при сохранении.  
**Решение:** сохранила файл в кодировке **UTF-8**.

### Проблема 3: Сложности с изучением JavaScript
**Причина:** раньше не программировала.  
**Решение:** смотрела видеоуроки,помощник ИИ.

### Проблема 4: Адаптивность на мобильных устройствах
**Причина:** сайт «ломался» на маленьких экранах.  
**Решение:** добавила медиа-запросы `@media (max-width: 768px)` для телефонов.

### Проблема 5: Тетрис не работал корректно
**Причина:** ошибки в логике столкновений фигур.  
**Решение:** тщательно протестировала каждую функцию и исправила баги.

---

## ?? КАК ЗАПУСТИТЬ САЙТ

### Локально (на своём компьютере)
1. Открыть файл `index.html` двойным кликом — запустится в браузере
2. Для редактирования — открыть в Блокноте или VS Code

### На хостинге Beget
1. Зарегистрироваться на beget.com
2. Войти в панель управления
3. Открыть «Файловый менеджер»
4. Перейти в папку `public_html`
5. Загрузить файл `index.html`
6. Открыть свой домен — сайт доступен!

---

## 1??1?? ИСТОЧНИКИ ИЗОБРАЖЕНИЙ

Все фотографии взяты с бесплатного фотостока:

- **Unsplash.com** — высококачественные фото еды с лицензией для свободного использования

---

## 1??2?? ВЫВОДЫ

В ходе работы над проектом я:

1. ? Освоила основы HTML, CSS и JavaScript
2. ? Научилась создавать адаптивные сайты
3. ? Поняла, как работает интерактивность в браузере
4. ? Создала работающий проект, который можно показать как портфолио
5. ? Разобралась с хостингом Beget и загрузкой файлов
6. ? Научилась работать с Canvas API для создания игр
7. ? Поняла разницу между конструкторами сайтов и ручной вёрсткой

**Главный вывод:** Создание сайта вручную оказалось **сложнее, но намного интереснее**, чем использование конструктора. Я получила реальные навыки программирования, которые пригодятся в будущем.

Сайт получился **ярким, функциональным и интересным** для пользователей. Игровые элементы (Тетрис, Мемори, Кликер) повышают вовлечённость и мотивируют к заказу.

---

## 1??3?? ПЛАНЫ НА РАЗВИТИЕ

В будущем планирую добавить:

-  Форму оформления заказа с вводом адреса и телефона
- ??? Карту зон доставки (Яндекс.Карты API)
-  Сохранение корзины и скидки в `localStorage`
- ?? Сенсорное управление играми для телефонов
- ??? Больше реальных фотографий блюд
- ?? Уведомления о статусе заказа
- ?? Мультиязычность (русский + английский)
- ?? Статистику заказов (админ-панель)
- ?? Личный кабинет пользователя
- ?? Онлайн-оплату через платёжные системы

---


### Приложение. Фрагмент кода (пример)
```javascript
// Пример функции добавления в корзину
function addToCart(id) {
    const existing = cart.find(item => item.id === id);
    if (existing) {
        existing.qty++;
    } else {
        cart.push({ id: id, qty: 1 });
    }
    updateCart();
}
```

---

##  ЧТО Я УЗНАЛА В ПРОЦЕССЕ

### Технические навыки
- ? Структура HTML-документа
- ? CSS-селекторы и свойства
- ? JavaScript функции и массивы
- ? Работа с DOM (Document Object Model)
- ? Canvas API для графики
- ? Адаптивная вёрстка
- ? Работа с хостингом

### Мягкие навыки (soft skills)
- ? Умение искать информацию
- ? Решение проблем
- ? Терпение и настойчивость
- ? Работа с ошибками
- ? Тайм-менеджмент

---

## ?? ИТОГ

**Я довольна своим решением** создать сайт вручную и разместить его на Beget. Это был вызов, но результат того стоил!

Сайт «ВкусноЕд» — это полноценный проект, который демонстрирует мои навыки в веб-разработке. Он готов к использованию и может быть легко расширен в будущем.

---

*Отчёт подготовила: **Пивоварова Анна***

*Ссылка на готовй сайт: **http://pivovale.beget.tech/***
 
*Дата сдачи: **23 июня 2026 года***

---