diff --git a/labs/lab-04/dishes.js b/labs/lab-04/dishes.js new file mode 100644 index 0000000..48eb01d --- /dev/null +++ b/labs/lab-04/dishes.js @@ -0,0 +1,146 @@ +const dishes = [ + { + keyword: "mushroom-soup", + name: "Грибной крем-суп", + price: 280, + category: "soup", + count: "300 мл", + image: "img/soup/mushroom-soup.jpg" + }, + { + keyword: "beet-soup", + name: "Традиционный борщ", + price: 240, + category: "soup", + count: "350 мл", + image: "img/soup/beet-soup.jpg" + }, + { + keyword: "chicken-noodle-soup", + name: "Куриный бульон с лапшой", + price: 220, + category: "soup", + count: "350 мл", + image: "img/soup/chicken-noodle-soup.jpg" + }, + { + keyword: "minestrone-soup", + name: "Итальянский суп минестроне", + price: 260, + category: "soup", + count: "350 мл", + image: "img/soup/minestrone-soup.jpg" + }, + { + keyword: "tomato-soup", + name: "Томатный крем-суп", + price: 250, + category: "soup", + count: "300 мл", + image: "img/soup/tomato-soup.jpg" + }, + { + keyword: "pumpkin-soup", + name: "Тыквенный суп с имбирем", + price: 270, + category: "soup", + count: "300 мл", + image: "img/soup/pumpkin-soup.jpg" + }, + { + keyword: "vegan-bowl-chickpeas", + name: "Веганский боул с нутом", + price: 390, + category: "main-course", + count: "350 г", + image: "img/main-dishes/vegan-bowl-chickpeas.jpg" + }, + { + keyword: "grilled-chicken-vegetables", + name: "Куриная грудка с овощами гриль", + price: 450, + category: "main-course", + count: "350 г", + image: "img/main-dishes/grilled-chicken-vegetables.jpg" + }, + { + keyword: "salmon-quinoa-avocado", + name: "Лосось с киноа и авокадо", + price: 620, + category: "main-course", + count: "380 г", + image: "img/main-dishes/salmon-quinoa-avocado.jpg" + }, + { + keyword: "seafood-pasta", + name: "Паста с морепродуктами", + price: 550, + category: "main-course", + count: "330 г", + image: "img/main-dishes/seafood-pasta.jpg" + }, + { + keyword: "teriyaki-chicken-noodles", + name: "Рисовая лапша с курицей терияки", + price: 420, + category: "main-course", + count: "340 г", + image: "img/main-dishes/teriyaki-chicken-noodles.jpg" + }, + { + keyword: "beef-salad", + name: "Теплый салат с говядиной", + price: 490, + category: "main-course", + count: "320 г", + image: "img/main-dishes/beef-salad.jpg" + }, + { + keyword: "berry-juice", + name: "Ягодный морс", + price: 120, + category: "drink", + count: "300 мл", + image: "img/drinks/berry-juice.jpg" + }, + { + keyword: "water", + name: "Минеральная вода", + price: 80, + category: "drink", + count: "500 мл", + image: "img/drinks/water.jpg" + }, + { + keyword: "spinach-smoothie", + name: "Зеленый смузи с шпинатом", + price: 180, + category: "drink", + count: "350 мл", + image: "img/drinks/spinach-smoothie.jpg" + }, + { + keyword: "ginger-lemonade", + name: "Имбирный лимонад", + price: 140, + category: "drink", + count: "300 мл", + image: "img/drinks/ginger-lemonade.jpg" + }, + { + keyword: "mango-smoothie", + name: "Смузи манго-маракуйя", + price: 170, + category: "drink", + count: "350 мл", + image: "img/drinks/mango-smoothie.jpg" + }, + { + keyword: "orange-juice", + name: "Свежевыжатый апельсиновый сок", + price: 150, + category: "drink", + count: "300 мл", + image: "img/drinks/orange-juice.jpg" + } +]; \ No newline at end of file diff --git a/labs/lab-04/img/drinks/berry-juice.jpg b/labs/lab-04/img/drinks/berry-juice.jpg new file mode 100644 index 0000000..fd427c1 Binary files /dev/null and b/labs/lab-04/img/drinks/berry-juice.jpg differ diff --git a/labs/lab-04/img/drinks/ginger-lemonade.jpg b/labs/lab-04/img/drinks/ginger-lemonade.jpg new file mode 100644 index 0000000..a829370 Binary files /dev/null and b/labs/lab-04/img/drinks/ginger-lemonade.jpg differ diff --git a/labs/lab-04/img/drinks/mango-smoothie.jpg b/labs/lab-04/img/drinks/mango-smoothie.jpg new file mode 100644 index 0000000..3d88b63 Binary files /dev/null and b/labs/lab-04/img/drinks/mango-smoothie.jpg differ diff --git a/labs/lab-04/img/drinks/orange-juice.jpg b/labs/lab-04/img/drinks/orange-juice.jpg new file mode 100644 index 0000000..c26c39e Binary files /dev/null and b/labs/lab-04/img/drinks/orange-juice.jpg differ diff --git a/labs/lab-04/img/drinks/spinach-smoothie.jpg b/labs/lab-04/img/drinks/spinach-smoothie.jpg new file mode 100644 index 0000000..77daa21 Binary files /dev/null and b/labs/lab-04/img/drinks/spinach-smoothie.jpg differ diff --git a/labs/lab-04/img/drinks/water.jpg b/labs/lab-04/img/drinks/water.jpg new file mode 100644 index 0000000..b8fa32e Binary files /dev/null and b/labs/lab-04/img/drinks/water.jpg differ diff --git a/labs/lab-04/img/main-dishes/beef-salad.jpg b/labs/lab-04/img/main-dishes/beef-salad.jpg new file mode 100644 index 0000000..cb315dd Binary files /dev/null and b/labs/lab-04/img/main-dishes/beef-salad.jpg differ diff --git a/labs/lab-04/img/main-dishes/grilled-chicken-vegetables.jpg b/labs/lab-04/img/main-dishes/grilled-chicken-vegetables.jpg new file mode 100644 index 0000000..8335a13 Binary files /dev/null and b/labs/lab-04/img/main-dishes/grilled-chicken-vegetables.jpg differ diff --git a/labs/lab-04/img/main-dishes/salmon-quinoa-avocado.jpg b/labs/lab-04/img/main-dishes/salmon-quinoa-avocado.jpg new file mode 100644 index 0000000..a912374 Binary files /dev/null and b/labs/lab-04/img/main-dishes/salmon-quinoa-avocado.jpg differ diff --git a/labs/lab-04/img/main-dishes/seafood-pasta.jpg b/labs/lab-04/img/main-dishes/seafood-pasta.jpg new file mode 100644 index 0000000..b127a11 Binary files /dev/null and b/labs/lab-04/img/main-dishes/seafood-pasta.jpg differ diff --git a/labs/lab-04/img/main-dishes/teriyaki-chicken-noodles.jpg b/labs/lab-04/img/main-dishes/teriyaki-chicken-noodles.jpg new file mode 100644 index 0000000..cd6d36c Binary files /dev/null and b/labs/lab-04/img/main-dishes/teriyaki-chicken-noodles.jpg differ diff --git a/labs/lab-04/img/main-dishes/vegan-bowl-chickpeas.jpg b/labs/lab-04/img/main-dishes/vegan-bowl-chickpeas.jpg new file mode 100644 index 0000000..65c00ab Binary files /dev/null and b/labs/lab-04/img/main-dishes/vegan-bowl-chickpeas.jpg differ diff --git a/labs/lab-04/img/main.jpg b/labs/lab-04/img/main.jpg new file mode 100644 index 0000000..f9f6558 Binary files /dev/null and b/labs/lab-04/img/main.jpg differ diff --git a/labs/lab-04/img/soup/beet-soup.jpg b/labs/lab-04/img/soup/beet-soup.jpg new file mode 100644 index 0000000..ea428f4 Binary files /dev/null and b/labs/lab-04/img/soup/beet-soup.jpg differ diff --git a/labs/lab-04/img/soup/chicken-noodle-soup.jpg b/labs/lab-04/img/soup/chicken-noodle-soup.jpg new file mode 100644 index 0000000..aac43a8 Binary files /dev/null and b/labs/lab-04/img/soup/chicken-noodle-soup.jpg differ diff --git a/labs/lab-04/img/soup/minestrone-soup.jpg b/labs/lab-04/img/soup/minestrone-soup.jpg new file mode 100644 index 0000000..a5f8be8 Binary files /dev/null and b/labs/lab-04/img/soup/minestrone-soup.jpg differ diff --git a/labs/lab-04/img/soup/mushroom-soup.jpg b/labs/lab-04/img/soup/mushroom-soup.jpg new file mode 100644 index 0000000..44ce3f4 Binary files /dev/null and b/labs/lab-04/img/soup/mushroom-soup.jpg differ diff --git a/labs/lab-04/img/soup/pumpkin-soup.jpg b/labs/lab-04/img/soup/pumpkin-soup.jpg new file mode 100644 index 0000000..c4df13d Binary files /dev/null and b/labs/lab-04/img/soup/pumpkin-soup.jpg differ diff --git a/labs/lab-04/img/soup/tomato-soup.jpg b/labs/lab-04/img/soup/tomato-soup.jpg new file mode 100644 index 0000000..a50d0d0 Binary files /dev/null and b/labs/lab-04/img/soup/tomato-soup.jpg differ diff --git a/labs/lab-04/index.html b/labs/lab-04/index.html new file mode 100644 index 0000000..a608c75 --- /dev/null +++ b/labs/lab-04/index.html @@ -0,0 +1,101 @@ + + + + + + + ЭкоЛанч - Доставка здоровых бизнес-ланчей в Москве + + + + + + +
+

ЭкоЛанч

+ +
+ +
+
+

О компании ЭкоЛанч

+ Здоровая еда в контейнерах +

ЭкоЛанч - это современная компания по доставке здоровых бизнес-ланчей в офисы Москвы. Наша миссия - сделать правильное питание доступным для занятых людей, которые ценят свое время и здоровье.

+

Мы используем только свежие продукты от проверенных поставщиков, а наши повара готовят блюда каждое утро. Все ланчи упакованы в экологичную биоразлагаемую упаковку, потому что мы заботимся не только о вашем здоровье, но и о здоровье нашей планеты.

+
+ +
+

Наши преимущества

+ +
+ +
+

Самые популярные блюда

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Название блюдаОписаниеКалорийностьЦена
Куриная грудка с овощами грильНежная куриная грудка с цукини, баклажанами и болгарским перцем420 ккал450 руб.
Лосось с киноа и авокадоЗапеченный лосось с гарниром из киноа и свежим авокадо520 ккал620 руб.
Теплый салат с говядинойСочная говядина с микс-салатом, томатами черри и кедровыми орешками380 ккал490 руб.
Веганский боул с нутомЗапеченный нут, хумус, овощи и тахини соус450 ккал390 руб.
Паста с морепродуктамиПаста из твердых сортов пшеницы с креветками, мидиями и томатным соусом480 ккал550 руб.
Рисовая лапша с курицей териякиРисовая лапша wok с куриным филе в соусе терияки и овощами460 ккал420 руб.
+
+
+ + + + \ No newline at end of file diff --git a/labs/lab-04/menu.html b/labs/lab-04/menu.html new file mode 100644 index 0000000..ba2e553 --- /dev/null +++ b/labs/lab-04/menu.html @@ -0,0 +1,114 @@ + + + + + + + Собрать ланч - ЭкоЛанч + + + + + + +
+

ЭкоЛанч

+ +
+ +
+
+

Супы

+
+
+ +
+

Главные блюда

+
+
+ +
+

Напитки

+
+
+
+ +
+

Оформить заказ

+
+
+ +
+

Ваш заказ

+
+

Ничего не выбрано

+
+
+ +
+

Данные для доставки

+ + + + + + + +
+ + +
+ + + + + + + Доставка осуществляется только по Москве + +
+ +
+ + +
+
+ + +
+
+ + + + Доступное время доставки с 7:00 до 23:00 + + + + +
+ + +
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/labs/lab-04/menu.js b/labs/lab-04/menu.js new file mode 100644 index 0000000..f144f47 --- /dev/null +++ b/labs/lab-04/menu.js @@ -0,0 +1,158 @@ +const selectedDishes = { + soup: null, + 'main-course': null, + drink: null +}; + +function sortDishes() { + dishes.sort(function(a, b) { + return a.name.localeCompare(b.name, 'ru'); + }); +} + +function displayDishes() { + const soupSection = document.getElementById('soup-section'); + const mainCourseSection = document.getElementById('main-course-section'); + const drinkSection = document.getElementById('drink-section'); + + soupSection.innerHTML = ''; + mainCourseSection.innerHTML = ''; + drinkSection.innerHTML = ''; + + dishes.forEach(function(dish) { + const dishCard = createDishCard(dish); + + if (dish.category === 'soup') { + soupSection.insertAdjacentHTML('beforeend', dishCard); + } else if (dish.category === 'main-course') { + mainCourseSection.insertAdjacentHTML('beforeend', dishCard); + } else if (dish.category === 'drink') { + drinkSection.insertAdjacentHTML('beforeend', dishCard); + } + }); + + addDishClickHandlers(); +} + +function createDishCard(dish) { + return ` +
+ ${dish.name} +

${dish.price} руб.

+

${dish.name}

+

${dish.count}

+ +
+ `; +} + +function addDishClickHandlers() { + const dishCards = document.querySelectorAll('.dish-card'); + + dishCards.forEach(function(card) { + card.addEventListener('click', function() { + const keyword = this.dataset.dish; + const dish = dishes.find(function(d) { + return d.keyword === keyword; + }); + + if (dish) { + selectDish(dish); + } + }); + }); +} + +function selectDish(dish) { + selectedDishes[dish.category] = dish; + updateOrderSummary(); +} + +function updateOrderSummary() { + const orderSummary = document.getElementById('order-summary'); + const hasSelection = selectedDishes.soup || + selectedDishes['main-course'] || + selectedDishes.drink; + + if (!hasSelection) { + orderSummary.innerHTML = '

Ничего не выбрано

'; + return; + } + + let summaryHTML = ''; + let totalPrice = 0; + + if (selectedDishes.soup) { + summaryHTML += ` +
+

Суп

+
+ ${selectedDishes.soup.name} + ${selectedDishes.soup.price} руб. +
+
+ `; + totalPrice += selectedDishes.soup.price; + } else { + summaryHTML += ` +
+

Суп

+

Блюдо не выбрано

+
+ `; + } + + if (selectedDishes['main-course']) { + summaryHTML += ` +
+

Главное блюдо

+
+ ${selectedDishes['main-course'].name} + ${selectedDishes['main-course'].price} руб. +
+
+ `; + totalPrice += selectedDishes['main-course'].price; + } else { + summaryHTML += ` +
+

Главное блюдо

+

Блюдо не выбрано

+
+ `; + } + + if (selectedDishes.drink) { + summaryHTML += ` +
+

Напиток

+
+ ${selectedDishes.drink.name} + ${selectedDishes.drink.price} руб. +
+
+ `; + totalPrice += selectedDishes.drink.price; + } else { + summaryHTML += ` +
+

Напиток

+

Напиток не выбран

+
+ `; + } + + summaryHTML += ` +
+

Стоимость заказа

+

${totalPrice} руб.

+
+ `; + + orderSummary.innerHTML = summaryHTML; +} + +document.addEventListener('DOMContentLoaded', function() { + sortDishes(); + displayDishes(); +}); \ No newline at end of file diff --git a/labs/lab-04/other/Вопросы для подготовки к защите ЛР №4.txt b/labs/lab-04/other/Вопросы для подготовки к защите ЛР №4.txt new file mode 100644 index 0000000..149b6d3 --- /dev/null +++ b/labs/lab-04/other/Вопросы для подготовки к защите ЛР №4.txt @@ -0,0 +1,36 @@ +JavaScript (основы) +1. Что значит “JS это слабо типизированный язык”? + +2. Что значит “JS язык с динамической типизацией”? + +3. Какие типы значений есть в JS? + +4. Чем отличаются строки "", ” и “? + +5. Что такое операнд и оператор? + +6. Какие операторы есть в JS? + +7. Различие var, let и const. + +8. Как проверяются условия в JS? + +9. Какие есть циклы в JS? + +10. Как создаются функции? + +11. Как хранятся данные в массиве? + +12. Какие методы массивов вы знаете? + +13. Как обратиться к элементу массива? + +14. Как можно перебирать элементы массива? + +15. Что такое объект? + +16. Как получить значение из свойства объекта? + +17. Для чего используется объект Math? + +18. Приведите примеры свойств и методов в Math. \ No newline at end of file diff --git a/labs/lab-04/other/Задание - Лабораторная работа 4.md b/labs/lab-04/other/Задание - Лабораторная работа 4.md new file mode 100644 index 0000000..33ca33c --- /dev/null +++ b/labs/lab-04/other/Задание - Лабораторная работа 4.md @@ -0,0 +1,83 @@ +# Лабораторная работа №4. Отображение и сортировка блюд, добавление в корзину + +--- +Отобразите блюда на странице с помощью JavaScript. Создайте скрипт, позволяющий выбрать блюдо и добавить его в раздел формы "Ваш заказ". Реализуйте подсчет итоговой стоимости. Отсортируйте блюда в алфавитном порядке. + +## Порядок выполнения + +Примерный макет раздела "Ваш заказ": + +Изначально на странице не должно быть элементов с карточками блюд. Необходимо написать скрипт, который будет перебирать массив с блюдами, динамически создавать соответствующие им HTML-элементы, и при помощи DOM добавлять каждый из них в нужную секцию на странице. +1. Создайте массив объектов, в котором будут храниться все существующие блюда. У каждого объекта должны быть следующие свойства: + - keyword (хранит название блюда на латинице, должно быть уникальным для каждого блюда) + - name (название блюда) + - price (цена) + - category (категория на английском, например, "soup") + - count (вес/объем) + - image (путь к изображению, например "soups/gazpacho") + +Пример объекта: +Массив должен храниться в отдельном js-файле. + +2. Реализуйте отображение блюд на страницу с помощью JavaScript. +Необходимо написать скрипт, который будет перебирать массив с блюдами и выводить каждое из них в нужную секцию. Секции должны выглядеть также, как при статичном выводе из прошлых лабораторных. +* У каждого блока с блюдом должен быть data-атрибут "data-dish", в котором будет храниться название блюда на латинице. + +Скрипт отображения должен храниться в отдельном js-файле. + +3. Создайте скрипт, позволяющий выбрать блюдо и добавить его в форму "Сделать заказ". + +- При клике на карточку с блюдом, его название и цена должны появляться в разделе формы "Ваш заказ". Блюдо должно отображаться в своей категории. + Используйте data-атрибут, чтобы найти блюдо в массиве. + Например, пользователь выбрал суп "Гаспачо". Вот как должен выглядеть раздел "Ваш заказ" +- Если затем пользователь выбрал другой суп, он должен отобразиться вместо "Гаспачо" +- Если блюдо из одной категории добавлено, а из другой нет, в пустой категории должно быть выведено сообщение: "Блюдо не выбрано" (или "Напиток не выбран" для раздела с напитками). + Например, пользователь выбрал суп, но не выбрал основное блюдо и напиток +- Если еще ничего не было выбрано, в блоке должен отображаться текст "Ничего не выбрано" (названия категорий скрыты) +-  Вот как выглядит блок, если были выбраны блюда из каждой категории + +4. Реализуйте подсчет итоговой стоимости для всех выбранных позиций меню. + +- После блоков с выбранными блюдами должен располагаться блок "Стоимость заказа". + В блоке отображается итоговая стоимость всех блюд. Например, если был выбран только напиток, отобразится его цена +- Так выглядит блок, если выбраны блюда из каждой категории +- Если блюда не были выбраны, блок "Стоимость заказа" скрыт также, как и блоки с категориями. + +5. Отсортируйте блюда каждой категории в алфавитном порядке. + +- Используйте метод sort() перед отображением блюд на страницу. Блюда должны быть отсортированы в алфавитном порядке. + +Данные о выбранных блюдах можно не отправлять при отправке формы (остальные данные формы должны отправляться). + +### Материалы для изучения + +#### HTML +[Атрибуты data-* [Doka]](https://doka.guide/html/data-attributes/) +[Скрытые поля [MDN]](https://developer.mozilla.org/ru/docs/Web/HTML/Element/input/hidden) +#### JS +[Современный учебник JavaScript [JS.RU]](https://learn.javascript.ru/) +[JavaScript [MDN]](https://developer.mozilla.org/ru/docs/Web/JavaScript) +[JavaScript [Doka]](https://doka.guide/js/) +[Переменные const, let и var [Doka]](https://doka.guide/js/var-let/) +[if...else [Doka]](https://doka.guide/js/if-else/) +[forEach() [Doka]](https://doka.guide/js/array-foreach/) +[Число [Doka]](https://doka.guide/js/number/) +[Строка [Doka]](https://doka.guide/js/string/) +[Булев тип [Doka]](https://doka.guide/js/boolean/) +[undefined [Doka]](https://doka.guide/js/undefined/) +[console.log() [Doka]](https://doka.guide/js/console-log/) +[textContent [Doka]](https://doka.guide/js/element-textcontent/) +[Массив [Doka]](https://doka.guide/js/arrays/) +[Объект [Doka]](https://doka.guide/js/object/) +[Введение в DOM [MDN]](https://developer.mozilla.org/ru/docs/Web/API/Document_Object_Model/Introduction) +[DOM [Doka]](https://doka.guide/js/dom/) +[Using the Document Object Model [MDN]](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model) +[querySelector() [Doka]](https://doka.guide/js/query-selector/) +[querySelectorAll() [Doka]](https://doka.guide/js/query-selector-all/) +[dataset [Doka]](https://doka.guide/js/element-dataset/) +[addEventListener() [Doka]](https://doka.guide/js/element-addeventlistener/) +[HTMLElement: dataset property [MDN]](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) +[Style display Property [W3Schools]](https://www.w3schools.com/jsref/prop_style_display.asp) +[Element.insertAdjacentHTML() [MDN]](https://developer.mozilla.org/ru/docs/Web/API/Element/insertAdjacentHTML) +[Браузерное окружение, спецификации [JS.RU]](https://learn.javascript.ru/browser-environment) +[sort() [Doka]](https://doka.guide/js/array-sort/) diff --git a/labs/lab-04/other/Результат запроса.png b/labs/lab-04/other/Результат запроса.png new file mode 100644 index 0000000..73fe6a6 Binary files /dev/null and b/labs/lab-04/other/Результат запроса.png differ diff --git a/labs/lab-04/styles.css b/labs/lab-04/styles.css new file mode 100644 index 0000000..82e99ed --- /dev/null +++ b/labs/lab-04/styles.css @@ -0,0 +1,504 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; + font-family: 'Montserrat', sans-serif; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +header { + background-color: #2d5016; + color: white; + padding: 20px 40px; + margin: 0; +} + +h1 { + margin: 0 0 15px 0; + font-size: 36px; + color: white; +} + +nav { + margin: 0; + padding: 10px 0; + display: flex; + flex-wrap: wrap; + gap: 15px; +} + +nav a { + text-decoration: none; + color: white; + font-family: 'Montserrat', sans-serif; + font-size: 16px; +} + +nav a:hover { + color: #a8d08d; +} + +nav a#active { + color: tomato; +} + +main { + margin: 0 auto; + padding: 40px 60px; + max-width: 1200px; + flex: 1; +} + +section { + margin: 0 0 50px 0; + padding: 30px; + background-color: #f9f9f9; +} + +h2 { + font-size: 28px; + color: #2d5016; + margin: 0 0 20px 0; +} + +p { + font-family: 'Montserrat', sans-serif; + font-size: 16px; + color: #333; + line-height: 1.6; + margin: 0 0 15px 0; +} + +img { + width: 100%; + height: 400px; + object-fit: cover; + margin: 0 0 20px 0; +} + +ul { + margin: 20px 0; + padding: 0 0 0 25px; +} + +ul li { + font-family: 'Montserrat', sans-serif; + font-size: 16px; + color: #333; + margin: 0 0 12px 0; + line-height: 1.5; +} + +table { + width: 100%; + border-collapse: collapse; + margin: 20px 0; +} + +table th { + background-color: #2d5016; + color: white; + padding: 15px; + text-align: left; + border: 1px solid #2d5016; + font-size: 16px; +} + +table td { + padding: 12px 15px; + border: 1px solid #ddd; + text-align: left; + font-size: 15px; + color: #333; +} + +table tr:nth-child(even) { + background-color: #f2f2f2; +} + +.dishes-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 10px; +} + +.dish-card { + display: flex; + flex-direction: column; + padding: 30px 40px; + border-radius: 35px; + cursor: pointer; + filter: drop-shadow(17px 19px 24px rgba(0, 0, 0, 0.13)); + background-color: white; +} + +.dish-card:hover { + border: 2px solid tomato; +} + +.dish-card:hover button { + background-color: tomato; + color: white; +} + +.dish-card img { + width: 100%; + height: auto; + border-radius: 35px; + margin: 0 0 15px 0; +} + +.dish-price { + font-size: 20px; + font-weight: 600; + margin: 0 0 10px 0; +} + +.dish-name { + font-size: 18px; + font-weight: 600; + margin: 0 0 10px 0; +} + +.dish-weight { + color: #888; + margin: 0 0 10px 0; + margin-top: auto; +} + +.dish-card button { + background-color: #f1eee9; + border: none; + padding: 10px 30px; + border-radius: 10px; + cursor: pointer; + font-family: 'Montserrat', sans-serif; + font-size: 16px; + margin-top: 10px; +} + +.order-form { + margin: 0 auto; + padding: 40px 60px; + max-width: 1200px; + background-color: white; +} + +.order-form h2 { + text-align: center; + margin-bottom: 30px; +} + +#order-summary { + background-color: #f9f9f9; + padding: 30px; + border-radius: 10px; + margin-bottom: 20px; +} + +.empty-order { + text-align: center; + color: #888; + font-size: 18px; +} + +.order-category { + margin-bottom: 25px; +} + +.order-category h3 { + font-size: 20px; + color: #2d5016; + margin: 0 0 10px 0; +} + +.order-item { + display: flex; + justify-content: space-between; + padding: 10px 0; + font-size: 16px; +} + +.order-item span:first-child { + font-weight: 600; + word-wrap: break-word; + overflow-wrap: break-word; + max-width: 70%; +} + +.order-item span:last-child { + color: #2d5016; + font-weight: 600; + white-space: nowrap; +} + +.not-selected { + color: #888; + font-style: italic; + margin: 5px 0; +} + +.order-total { + margin-top: 30px; + padding-top: 20px; + border-top: 2px solid #2d5016; +} + +.order-total h3 { + font-size: 22px; + color: #2d5016; + margin: 0 0 10px 0; +} + +.total-price { + font-size: 24px; + font-weight: 700; + color: #2d5016; + margin: 0; +} + +.form-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 40px; +} + +.order-section { + display: flex; + flex-direction: column; +} + +.order-section h3 { + font-size: 22px; + color: #2d5016; + margin: 0 0 20px 0; +} + +.customer-section { + display: flex; + flex-direction: column; +} + +.customer-section h3 { + font-size: 22px; + color: #2d5016; + margin: 0 0 20px 0; +} + +.order-form label { + font-size: 16px; + color: #333; + margin: 0 0 8px 0; + font-weight: 600; +} + +.order-form select, +.order-form input[type="text"], +.order-form input[type="email"], +.order-form input[type="tel"], +.order-form input[type="time"], +.order-form textarea { + width: 100%; + padding: 12px 15px; + margin: 0 0 20px 0; + border: 1px solid #ddd; + border-radius: 8px; + font-family: 'Montserrat', sans-serif; + font-size: 15px; +} + +.order-form select { + cursor: pointer; + background-color: white; +} + +.order-form textarea { + height: 100px; + resize: vertical; +} + +.checkbox-group { + display: flex; + align-items: center; + margin: 0 0 20px 0; +} + +.checkbox-group input[type="checkbox"] { + width: 18px; + height: 18px; + margin: 0 10px 0 0; + cursor: pointer; +} + +.checkbox-group label { + margin: 0; + font-weight: 400; + cursor: pointer; +} + +.radio-group { + margin: 0 0 20px 0; +} + +.radio-group > label { + display: block; + margin-bottom: 10px; +} + +.radio-group > div { + display: flex; + align-items: center; + margin: 0 0 8px 0; +} + +.radio-group input[type="radio"] { + width: 18px; + height: 18px; + margin: 0 10px 0 0; + cursor: pointer; +} + +.radio-group input[type="radio"] + label { + margin: 0; + font-weight: 400; + cursor: pointer; +} + +.form-buttons { + display: flex; + gap: 15px; + margin-top: 10px; +} + +.form-buttons button { + flex: 1; + padding: 15px 30px; + border: none; + border-radius: 10px; + font-family: 'Montserrat', sans-serif; + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: background-color 0.3s; +} + +.form-buttons button[type="reset"] { + background-color: #f1eee9; + color: #333; +} + +.form-buttons button[type="reset"]:hover { + background-color: #e0ddd8; +} + +.form-buttons button[type="submit"] { + background-color: #2d5016; + color: white; +} + +.form-buttons button[type="submit"]:hover { + background-color: #3d6020; +} + +.form-hint { + display: block; + font-size: 13px; + color: #666; + margin: -15px 0 20px 0; + line-height: 1.4; +} + +footer { + background-color: black; + color: white; + padding: 30px 60px; + margin: 0; +} + +footer p { + color: white; + margin: 0 0 10px 0; +} + +footer a { + text-decoration: none; + color: white; + font-family: 'Montserrat', sans-serif; + font-size: 16px; +} + +footer a:hover { + color: #a8d08d; +} + +@media (max-width: 800px) { + .dishes-grid { + grid-template-columns: 1fr 1fr; + } + + nav { + justify-content: space-between; + } + + .about-company img { + width: 500px; + } + + .form-container { + grid-template-columns: 1fr; + gap: 20px; + } +} + +@media (max-width: 600px) { + h1 { + text-align: center; + } + + nav { + flex-direction: column; + align-items: center; + } + + nav a { + font-size: 20px; + } + + section h2 { + text-align: center; + } + + .dishes-grid { + grid-template-columns: 1fr; + } + + .about-company img { + width: 100%; + } + + table th, + table td { + font-size: 14px; + } + + .form-container { + grid-template-columns: 1fr; + } + + .form-buttons { + flex-direction: column; + } +} + +@media (max-width: 400px) { + table th, + table td { + font-size: 12px; + } + +}