From ef98c892d3a683913d3ce156789118f71bb733db Mon Sep 17 00:00:00 2001
From: Nick Gorbunov <intsurfer73@gmail.com>
Date: Mon, 31 Mar 2025 21:22:11 +0300
Subject: [PATCH 1/9] DZ

---
 frontend/src/App.vue               |  18 +-
 frontend/src/layouts/AppHeader.vue |  15 ++
 frontend/src/layouts/AppLayout.vue |  11 ++
 frontend/src/views/HomeView.vue    | 304 +++++++++++++++++++++++++++++
 4 files changed, 338 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/layouts/AppHeader.vue
 create mode 100644 frontend/src/layouts/AppLayout.vue
 create mode 100644 frontend/src/views/HomeView.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 2f88d12a..18376f1d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,16 +1,14 @@
 <template>
-  <div class="main__wrapper">
-    <div class="main__header">
-      <img src="@/assets/img/logo.svg" width="300" height="47" alt="V!U!E! Pizza" />
-    </div>
-    <h1>Добро пожаловать!</h1>
-    <p>
-      Это проект V!U!E! Pizza для обучения на профессиональном онлайн‑курсе<br />
-      <b>«Vue.js для опытных разработчиков».</b>
-    </p>
-  </div>
+  <app-layout>
+    <home-view />
+  </app-layout>
 </template>
 
+<script setup>
+import AppLayout from "@/layouts/AppLayout.vue";
+import HomeView from "@/views/HomeView.vue";
+</script>
+
 <style lang="scss">
 @import "@/assets/scss/app.scss";
 body {
diff --git a/frontend/src/layouts/AppHeader.vue b/frontend/src/layouts/AppHeader.vue
new file mode 100644
index 00000000..1f6c8d94
--- /dev/null
+++ b/frontend/src/layouts/AppHeader.vue
@@ -0,0 +1,15 @@
+<template>
+    <header class="header">
+    <div class="header__logo">
+      <a href="index.html" class="logo">
+        <img src="@/assets/img/logo.svg" alt="Pizza logo" width="90" height="40">
+      </a>
+    </div>
+    <div class="header__cart">
+      <a href="cart.html">0 ₽</a>
+    </div>
+    <div class="header__user">
+      <a href="#" class="header__login"><span>Войти</span></a>
+    </div>
+  </header>
+</template>
\ No newline at end of file
diff --git a/frontend/src/layouts/AppLayout.vue b/frontend/src/layouts/AppLayout.vue
new file mode 100644
index 00000000..628f8fbf
--- /dev/null
+++ b/frontend/src/layouts/AppLayout.vue
@@ -0,0 +1,11 @@
+<template>
+    <div>
+      <app-header />
+      <slot />
+    </div>
+  </template>
+  
+  <script setup>
+  import AppHeader from "./AppHeader.vue";
+  </script>
+  
\ No newline at end of file
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
new file mode 100644
index 00000000..cba9e2cb
--- /dev/null
+++ b/frontend/src/views/HomeView.vue
@@ -0,0 +1,304 @@
+<template>
+<main class="content">
+    <form action="#" method="post">
+
+      <div class="content__wrapper">
+        <h1 class="title title--big">Конструктор пиццы</h1>
+
+        <div class="content__dough">
+
+          <div class="sheet">
+            <h2 class="title title--small sheet__title">Выберите тесто</h2>
+
+            <div class="sheet__content dough">
+              <label class="dough__input dough__input--light">
+                <input type="radio" name="dought" value="light" class="visually-hidden" checked>
+                <b>Тонкое</b>
+                <span>Из твердых сортов пшеницы</span>
+              </label>
+
+            <label class="dough__input dough__input--large">
+                <input type="radio" name="dought" value="large" class="visually-hidden">
+                <b>Толстое</b>
+                <span>Из твердых сортов пшеницы</span>
+              </label>
+            </div>
+
+          </div>
+
+        </div>
+
+        <div class="content__diameter">
+          <div class="sheet">
+            <h2 class="title title--small sheet__title">Выберите размер</h2>
+
+            <div class="sheet__content diameter">
+              <label class="diameter__input diameter__input--small">
+                <input type="radio" name="diameter" value="small" class="visually-hidden">
+                <span>23 см</span>
+              </label>
+              <label class="diameter__input diameter__input--normal">
+                <input type="radio" name="diameter" value="normal" class="visually-hidden" checked>
+                <span>32 см</span>
+              </label>
+              <label class="diameter__input diameter__input--big">
+                <input type="radio" name="diameter" value="big" class="visually-hidden">
+                <span>45 см</span>
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <div class="content__ingredients">
+          <div class="sheet">
+            <h2 class="title title--small sheet__title">Выберите ингредиенты</h2>
+
+            <div class="sheet__content ingredients">
+
+              <div class="ingredients__sauce">
+                <p>Основной соус:</p>
+
+                <label class="radio ingredients__input">
+                  <input type="radio" name="sauce" value="tomato" checked>
+                  <span>Томатный</span>
+                </label>
+                <label class="radio ingredients__input">
+                  <input type="radio" name="sauce" value="creamy">
+                  <span>Сливочный</span>
+                </label>
+              </div>
+
+              <div class="ingredients__filling">
+                <p>Начинка:</p>
+
+                <ul class="ingredients__list">
+                  <li class="ingredients__item">
+                    <span class="filling filling--mushrooms">Грибы</span>
+
+                    <div class="counter counter--orange ingredients__counter">
+                      <button type="button" class="counter__button counter__button--minus" disabled>
+                        <span class="visually-hidden">Меньше</span>
+                      </button>
+                      <input type="text" name="counter" class="counter__input" value="0">
+                      <button type="button" class="counter__button counter__button--plus">
+                        <span class="visually-hidden">Больше</span>
+                      </button>
+                    </div>
+                  </li>
+                  <li class="ingredients__item">
+                    <span class="filling filling--cheddar">Чеддер</span>
+
+                    <div class="counter counter--orange ingredients__counter">
+                      <button type="button" class="counter__button counter__button--minus" disabled>
+                        <span class="visually-hidden">Меньше</span>
+                      </button>
+                      <input type="text" name="counter" class="counter__input" value="0">
+                      <button type="button" class="counter__button counter__button--plus">
+                        <span class="visually-hidden">Больше</span>
+                      </button>
+                    </div>
+                  </li>
+                  <li class="ingredients__item">
+                    <span class="filling filling--salami">Салями</span>
+
+                    <div class="counter counter--orange ingredients__counter">
+                      <button type="button" class="counter__button counter__button--minus" disabled>
+                        <span class="visually-hidden">Меньше</span>
+                      </button>
+                      <input type="text" name="counter" class="counter__input" value="0">
+                      <button type="button" class="counter__button counter__button--plus">
+                        <span class="visually-hidden">Больше</span>
+                      </button>
+                    </div>
+                  </li>
+                  <li class="ingredients__item">
+                    <span class="filling filling--ham">Ветчина</span>
+
+                    <div class="counter counter--orange ingredients__counter">
+                      <button type="button" class="counter__button counter__button--minus" disabled>
+                        <span class="visually-hidden">Меньше</span>
+                      </button>
+                      <input type="text" name="counter" class="counter__input" value="0">
+                      <button type="button" class="counter__button counter__button--plus">
+                        <span class="visually-hidden">Больше</span>
+                      </button>
+                    </div>
+                  </li>
+                  <li class="ingredients__item">
+                    <span class="filling filling--ananas">Ананас</span>
+
+                    <div class="counter counter--orange ingredients__counter">
+                      <button type="button" class="counter__button counter__button--minus" disabled>
+                        <span class="visually-hidden">Меньше</span>
+                      </button>
+                      <input type="text" name="counter" class="counter__input" value="0">
+                      <button type="button" class="counter__button counter__button--plus">
+                        <span class="visually-hidden">Больше</span>
+                      </button>
+                    </div>
+                  </li>
+                  <li class="ingredients__item">
+                    <span class="filling filling--bacon">Бекон</span>
+
+                    <div class="counter counter--orange ingredients__counter">
+                      <button type="button" class="counter__button counter__button--minus" disabled>
+                        <span class="visually-hidden">Меньше</span>
+                      </button>
+                      <input type="text" name="counter" class="counter__input" value="0">
+                      <button type="button" class="counter__button counter__button--plus">
+                        <span class="visually-hidden">Больше</span>
+                      </button>
+                    </div>
+                  </li>
+                  <li class="ingredients__item">
+                    <span class="filling filling--onion">Лук</span>
+
+                    <div class="counter counter--orange ingredients__counter">
+                      <button type="button" class="counter__button counter__button--minus" disabled>
+                        <span class="visually-hidden">Меньше</span>
+                      </button>
+                      <input type="text" name="counter" class="counter__input" value="0">
+                      <button type="button" class="counter__button counter__button--plus">
+                        <span class="visually-hidden">Больше</span>
+                      </button>
+                    </div>
+                  </li>
+                  <li class="ingredients__item">
+                    <span class="filling filling--chile">Чили</span>
+
+                    <div class="counter counter--orange ingredients__counter">
+                      <button type="button" class="counter__button counter__button--minus" disabled>
+                        <span class="visually-hidden">Меньше</span>
+                      </button>
+                      <input type="text" name="counter" class="counter__input" value="0">
+                      <button type="button" class="counter__button counter__button--plus">
+                        <span class="visually-hidden">Больше</span>
+                      </button>
+                    </div>
+                  </li>
+                  <li class="ingredients__item">
+                    <span class="filling filling--jalapeno">Халапеньо</span>
+
+                    <div class="counter counter--orange ingredients__counter">
+                      <button type="button" class="counter__button counter__button--minus" disabled>
+                        <span class="visually-hidden">Меньше</span>
+                      </button>
+                      <input type="text" name="counter" class="counter__input" value="0">
+                      <button type="button" class="counter__button counter__button--plus">
+                        <span class="visually-hidden">Больше</span>
+                      </button>
+                    </div>
+                  </li>
+                  <li class="ingredients__item">
+                    <span class="filling filling--olives">Маслины</span>
+
+                    <div class="counter counter--orange ingredients__counter">
+                      <button type="button" class="counter__button counter__button--minus" disabled>
+                        <span class="visually-hidden">Меньше</span>
+                      </button>
+                      <input type="text" name="counter" class="counter__input" value="0">
+                      <button type="button" class="counter__button counter__button--plus">
+                        <span class="visually-hidden">Больше</span>
+                      </button>
+                    </div>
+                  </li>
+                  <li class="ingredients__item">
+                    <span class="filling filling--tomatoes">Томаты</span>
+
+                    <div class="counter counter--orange ingredients__counter">
+                      <button type="button" class="counter__button counter__button--minus" disabled>
+                        <span class="visually-hidden">Меньше</span>
+                      </button>
+                      <input type="text" name="counter" class="counter__input" value="0">
+                      <button type="button" class="counter__button counter__button--plus">
+                        <span class="visually-hidden">Больше</span>
+                      </button>
+                    </div>
+                  </li>
+                  <li class="ingredients__item">
+                    <span class="filling filling--salmon">Лосось</span>
+
+                    <div class="counter counter--orange ingredients__counter">
+                      <button type="button" class="counter__button counter__button--minus" disabled>
+                        <span class="visually-hidden">Меньше</span>
+                      </button>
+                      <input type="text" name="counter" class="counter__input" value="0">
+                      <button type="button" class="counter__button counter__button--plus">
+                        <span class="visually-hidden">Больше</span>
+                      </button>
+                    </div>
+                  </li>
+                  <li class="ingredients__item">
+                    <span class="filling filling--mozzarella">Моцарелла</span>
+
+                    <div class="counter counter--orange ingredients__counter">
+                      <button type="button" class="counter__button counter__button--minus" disabled>
+                        <span class="visually-hidden">Меньше</span>
+                      </button>
+                      <input type="text" name="counter" class="counter__input" value="0">
+                      <button type="button" class="counter__button counter__button--plus">
+                        <span class="visually-hidden">Больше</span>
+                      </button>
+                    </div>
+                  </li>
+                  <li class="ingredients__item">
+                    <span class="filling filling--parmesan">Пармезан</span>
+
+                    <div class="counter counter--orange ingredients__counter">
+                      <button type="button" class="counter__button counter__button--minus" disabled>
+                        <span class="visually-hidden">Меньше</span>
+                      </button>
+                      <input type="text" name="counter" class="counter__input" value="0">
+                      <button type="button" class="counter__button counter__button--plus">
+                        <span class="visually-hidden">Больше</span>
+                      </button>
+                    </div>
+                  </li>
+                  <li class="ingredients__item">
+                    <span class="filling filling--blue_cheese">Блю чиз</span>
+
+                    <div class="counter counter--orange ingredients__counter">
+                      <button type="button" class="counter__button counter__button--minus" disabled>
+                        <span class="visually-hidden">Меньше</span>
+                      </button>
+                      <input type="text" name="counter" class="counter__input" value="0">
+                      <button type="button" class="counter__button counter__button--plus">
+                        <span class="visually-hidden">Больше</span>
+                      </button>
+                    </div>
+                  </li>
+                </ul>
+
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+        <div class="content__pizza">
+          <label class="input">
+            <span class="visually-hidden">Название пиццы</span>
+            <input type="text" name="pizza_name" placeholder="Введите название пиццы">
+          </label>
+
+          <div class="content__constructor">
+            <div class="pizza pizza--foundation--big-tomato">
+              <div class="pizza__wrapper">
+                <div class="pizza__filling pizza__filling--ananas"></div>
+                <div class="pizza__filling pizza__filling--bacon"></div>
+                <div class="pizza__filling pizza__filling--cheddar"></div>
+              </div>
+            </div>
+          </div>
+
+          <div class="content__result">
+            <p>Итого: 0 ₽</p>
+            <button type="button" class="button" disabled>Готовьте!</button>
+          </div>
+        </div>
+
+      </div>
+
+    </form>
+  </main>
+  </template>
\ No newline at end of file

From d90b1145f3a4485ebe216d31d9be53bf11eb7a1a Mon Sep 17 00:00:00 2001
From: Nick Gorbunov <intsurfer73@gmail.com>
Date: Sun, 6 Apr 2025 12:15:30 +0300
Subject: [PATCH 2/9] DZ1.34

---
 frontend/src/common/helpers/normalize.js |  32 +++
 frontend/src/views/HomeView.vue          | 327 +++++++----------------
 2 files changed, 125 insertions(+), 234 deletions(-)
 create mode 100644 frontend/src/common/helpers/normalize.js

diff --git a/frontend/src/common/helpers/normalize.js b/frontend/src/common/helpers/normalize.js
new file mode 100644
index 00000000..5a9652b6
--- /dev/null
+++ b/frontend/src/common/helpers/normalize.js
@@ -0,0 +1,32 @@
+import doughSizes from "@/common/data/doughSizes";
+import ingredients from "@/common/data/ingredients";
+import sauces from "@/common/data/sauces";
+import sizes from "@/common/data/sizes";
+
+export const normalizeDough = (dough) => {
+  return {
+    ...dough,
+    value: doughSizes[dough.id],
+  };
+};
+
+export const normalizeSize = (size) => {
+  return {
+    ...size,
+    value: sizes[size.id],
+  };
+};
+
+export const normalizeIngredients = (ingredient) => {
+  return {
+    ...ingredient,
+    value: ingredients[ingredient.id],
+  };
+};
+
+export const normalizeSauces = (sauce) => {
+  return {
+    ...sauce,
+    value: sauces[sauce.id],
+  };
+};
\ No newline at end of file
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index cba9e2cb..821ebd67 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -5,50 +5,44 @@
       <div class="content__wrapper">
         <h1 class="title title--big">Конструктор пиццы</h1>
 
-        <div class="content__dough">
-
-          <div class="sheet">
-            <h2 class="title title--small sheet__title">Выберите тесто</h2>
-
-            <div class="sheet__content dough">
-              <label class="dough__input dough__input--light">
-                <input type="radio" name="dought" value="light" class="visually-hidden" checked>
-                <b>Тонкое</b>
-                <span>Из твердых сортов пшеницы</span>
-              </label>
-
-            <label class="dough__input dough__input--large">
-                <input type="radio" name="dought" value="large" class="visually-hidden">
-                <b>Толстое</b>
-                <span>Из твердых сортов пшеницы</span>
-              </label>
-            </div>
-
-          </div>
-
+        <div class="sheet__content dough">
+          <label
+            class="dough__input"
+            v-for="doughType in doughItems"
+            :key="doughType.id"
+          >
+            <input
+              type="radio"
+              name="dough"
+              :value="doughType.value"
+              class="visually-hidden"
+              checked
+            />
+            <img :src="getImage(doughType.image)" :alt="doughType.name" />
+
+            <b>{{ doughType.name }}</b>
+            <span>{{ doughType.description }}</span>
+          </label>
         </div>
 
-        <div class="content__diameter">
-          <div class="sheet">
-            <h2 class="title title--small sheet__title">Выберите размер</h2>
-
-            <div class="sheet__content diameter">
-              <label class="diameter__input diameter__input--small">
-                <input type="radio" name="diameter" value="small" class="visually-hidden">
-                <span>23 см</span>
-              </label>
-              <label class="diameter__input diameter__input--normal">
-                <input type="radio" name="diameter" value="normal" class="visually-hidden" checked>
-                <span>32 см</span>
-              </label>
-              <label class="diameter__input diameter__input--big">
-                <input type="radio" name="diameter" value="big" class="visually-hidden">
-                <span>45 см</span>
-              </label>
-            </div>
-          </div>
+        <div class="sheet__content diameter">
+          <label
+            class="diameter__input"
+            :class="`diameter__input--${sizeType.value}`"
+            v-for="sizeType in sizeItems"
+            :key="sizeType.id"
+          >
+            <input
+              type="radio"
+              name="diameter"
+              :value="sizeType.value"
+              class="visually-hidden"
+            />
+            <span>{{ sizeType.name }}</span>
+          </label>
         </div>
 
+
         <div class="content__ingredients">
           <div class="sheet">
             <h2 class="title title--small sheet__title">Выберите ингредиенты</h2>
@@ -58,13 +52,13 @@
               <div class="ingredients__sauce">
                 <p>Основной соус:</p>
 
-                <label class="radio ingredients__input">
-                  <input type="radio" name="sauce" value="tomato" checked>
-                  <span>Томатный</span>
-                </label>
-                <label class="radio ingredients__input">
-                  <input type="radio" name="sauce" value="creamy">
-                  <span>Сливочный</span>
+                <label
+                  class="radio ingredients__input"
+                  v-for="sauceType in sauceItems"
+                  :key="sauceType.id"
+                >
+                  <input type="radio" name="sauce" :value="sauceType.value" />
+                  <span>{{ sauceType.name }}</span>
                 </label>
               </div>
 
@@ -72,197 +66,37 @@
                 <p>Начинка:</p>
 
                 <ul class="ingredients__list">
-                  <li class="ingredients__item">
-                    <span class="filling filling--mushrooms">Грибы</span>
-
-                    <div class="counter counter--orange ingredients__counter">
-                      <button type="button" class="counter__button counter__button--minus" disabled>
-                        <span class="visually-hidden">Меньше</span>
-                      </button>
-                      <input type="text" name="counter" class="counter__input" value="0">
-                      <button type="button" class="counter__button counter__button--plus">
-                        <span class="visually-hidden">Больше</span>
-                      </button>
-                    </div>
-                  </li>
-                  <li class="ingredients__item">
-                    <span class="filling filling--cheddar">Чеддер</span>
-
-                    <div class="counter counter--orange ingredients__counter">
-                      <button type="button" class="counter__button counter__button--minus" disabled>
-                        <span class="visually-hidden">Меньше</span>
-                      </button>
-                      <input type="text" name="counter" class="counter__input" value="0">
-                      <button type="button" class="counter__button counter__button--plus">
-                        <span class="visually-hidden">Больше</span>
-                      </button>
-                    </div>
-                  </li>
-                  <li class="ingredients__item">
-                    <span class="filling filling--salami">Салями</span>
-
-                    <div class="counter counter--orange ingredients__counter">
-                      <button type="button" class="counter__button counter__button--minus" disabled>
-                        <span class="visually-hidden">Меньше</span>
-                      </button>
-                      <input type="text" name="counter" class="counter__input" value="0">
-                      <button type="button" class="counter__button counter__button--plus">
-                        <span class="visually-hidden">Больше</span>
-                      </button>
-                    </div>
-                  </li>
-                  <li class="ingredients__item">
-                    <span class="filling filling--ham">Ветчина</span>
-
-                    <div class="counter counter--orange ingredients__counter">
-                      <button type="button" class="counter__button counter__button--minus" disabled>
-                        <span class="visually-hidden">Меньше</span>
-                      </button>
-                      <input type="text" name="counter" class="counter__input" value="0">
-                      <button type="button" class="counter__button counter__button--plus">
-                        <span class="visually-hidden">Больше</span>
-                      </button>
-                    </div>
-                  </li>
-                  <li class="ingredients__item">
-                    <span class="filling filling--ananas">Ананас</span>
-
-                    <div class="counter counter--orange ingredients__counter">
-                      <button type="button" class="counter__button counter__button--minus" disabled>
-                        <span class="visually-hidden">Меньше</span>
-                      </button>
-                      <input type="text" name="counter" class="counter__input" value="0">
-                      <button type="button" class="counter__button counter__button--plus">
-                        <span class="visually-hidden">Больше</span>
-                      </button>
-                    </div>
-                  </li>
-                  <li class="ingredients__item">
-                    <span class="filling filling--bacon">Бекон</span>
-
-                    <div class="counter counter--orange ingredients__counter">
-                      <button type="button" class="counter__button counter__button--minus" disabled>
-                        <span class="visually-hidden">Меньше</span>
-                      </button>
-                      <input type="text" name="counter" class="counter__input" value="0">
-                      <button type="button" class="counter__button counter__button--plus">
-                        <span class="visually-hidden">Больше</span>
-                      </button>
+                  <li
+                    class="ingredients__item"
+                    v-for="ingredientType in ingredientItems"
+                    :key="ingredientType.id"
+                  >
+                    <div class="filling">
+                      <img
+                        :src="getImage(ingredientType.image)"
+                        :alt="ingredientType.name"
+                      />
+                      {{ ingredientType.name }}
                     </div>
-                  </li>
-                  <li class="ingredients__item">
-                    <span class="filling filling--onion">Лук</span>
-
-                    <div class="counter counter--orange ingredients__counter">
-                      <button type="button" class="counter__button counter__button--minus" disabled>
-                        <span class="visually-hidden">Меньше</span>
-                      </button>
-                      <input type="text" name="counter" class="counter__input" value="0">
-                      <button type="button" class="counter__button counter__button--plus">
-                        <span class="visually-hidden">Больше</span>
-                      </button>
-                    </div>
-                  </li>
-                  <li class="ingredients__item">
-                    <span class="filling filling--chile">Чили</span>
-
-                    <div class="counter counter--orange ingredients__counter">
-                      <button type="button" class="counter__button counter__button--minus" disabled>
-                        <span class="visually-hidden">Меньше</span>
-                      </button>
-                      <input type="text" name="counter" class="counter__input" value="0">
-                      <button type="button" class="counter__button counter__button--plus">
-                        <span class="visually-hidden">Больше</span>
-                      </button>
-                    </div>
-                  </li>
-                  <li class="ingredients__item">
-                    <span class="filling filling--jalapeno">Халапеньо</span>
-
-                    <div class="counter counter--orange ingredients__counter">
-                      <button type="button" class="counter__button counter__button--minus" disabled>
-                        <span class="visually-hidden">Меньше</span>
-                      </button>
-                      <input type="text" name="counter" class="counter__input" value="0">
-                      <button type="button" class="counter__button counter__button--plus">
-                        <span class="visually-hidden">Больше</span>
-                      </button>
-                    </div>
-                  </li>
-                  <li class="ingredients__item">
-                    <span class="filling filling--olives">Маслины</span>
-
-                    <div class="counter counter--orange ingredients__counter">
-                      <button type="button" class="counter__button counter__button--minus" disabled>
-                        <span class="visually-hidden">Меньше</span>
-                      </button>
-                      <input type="text" name="counter" class="counter__input" value="0">
-                      <button type="button" class="counter__button counter__button--plus">
-                        <span class="visually-hidden">Больше</span>
-                      </button>
-                    </div>
-                  </li>
-                  <li class="ingredients__item">
-                    <span class="filling filling--tomatoes">Томаты</span>
-
-                    <div class="counter counter--orange ingredients__counter">
-                      <button type="button" class="counter__button counter__button--minus" disabled>
-                        <span class="visually-hidden">Меньше</span>
-                      </button>
-                      <input type="text" name="counter" class="counter__input" value="0">
-                      <button type="button" class="counter__button counter__button--plus">
-                        <span class="visually-hidden">Больше</span>
-                      </button>
-                    </div>
-                  </li>
-                  <li class="ingredients__item">
-                    <span class="filling filling--salmon">Лосось</span>
-
-                    <div class="counter counter--orange ingredients__counter">
-                      <button type="button" class="counter__button counter__button--minus" disabled>
-                        <span class="visually-hidden">Меньше</span>
-                      </button>
-                      <input type="text" name="counter" class="counter__input" value="0">
-                      <button type="button" class="counter__button counter__button--plus">
-                        <span class="visually-hidden">Больше</span>
-                      </button>
-                    </div>
-                  </li>
-                  <li class="ingredients__item">
-                    <span class="filling filling--mozzarella">Моцарелла</span>
-
-                    <div class="counter counter--orange ingredients__counter">
-                      <button type="button" class="counter__button counter__button--minus" disabled>
-                        <span class="visually-hidden">Меньше</span>
-                      </button>
-                      <input type="text" name="counter" class="counter__input" value="0">
-                      <button type="button" class="counter__button counter__button--plus">
-                        <span class="visually-hidden">Больше</span>
-                      </button>
-                    </div>
-                  </li>
-                  <li class="ingredients__item">
-                    <span class="filling filling--parmesan">Пармезан</span>
-
-                    <div class="counter counter--orange ingredients__counter">
-                      <button type="button" class="counter__button counter__button--minus" disabled>
-                        <span class="visually-hidden">Меньше</span>
-                      </button>
-                      <input type="text" name="counter" class="counter__input" value="0">
-                      <button type="button" class="counter__button counter__button--plus">
-                        <span class="visually-hidden">Больше</span>
-                      </button>
-                    </div>
-                  </li>
-                  <li class="ingredients__item">
-                    <span class="filling filling--blue_cheese">Блю чиз</span>
 
                     <div class="counter counter--orange ingredients__counter">
-                      <button type="button" class="counter__button counter__button--minus" disabled>
+                      <button
+                        type="button"
+                        class="counter__button counter__button--minus"
+                        disabled
+                      >
                         <span class="visually-hidden">Меньше</span>
                       </button>
-                      <input type="text" name="counter" class="counter__input" value="0">
-                      <button type="button" class="counter__button counter__button--plus">
+                      <input
+                        type="text"
+                        name="counter"
+                        class="counter__input"
+                        value="0"
+                      />
+                      <button
+                        type="button"
+                        class="counter__button counter__button--plus"
+                      >
                         <span class="visually-hidden">Больше</span>
                       </button>
                     </div>
@@ -301,4 +135,29 @@
 
     </form>
   </main>
-  </template>
\ No newline at end of file
+  </template>
+
+<script setup>
+import {
+  normalizeDough,
+  normalizeIngredients,
+  normalizeSauces,
+  normalizeSize,
+} from "@/common/helpers/normalize";
+
+import doughJSON from "@/mocks/dough.json";
+import ingredientsJSON from "@/mocks/ingredients.json";
+import saucesJSON from "@/mocks/sauces.json";
+import sizesJSON from "@/mocks/sizes.json";
+
+const doughItems = doughJSON.map(normalizeDough);
+const ingredientItems = ingredientsJSON.map(normalizeIngredients);
+const sauceItems = saucesJSON.map(normalizeSauces);
+const sizeItems = sizesJSON.map(normalizeSize);
+
+const getImage = image => {
+  // https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url
+  return new URL(`../assets/img/${image}`, import.meta.url).href
+}
+
+</script>
\ No newline at end of file

From 5062f2d048cf19fbf3af900b4730d79c9da44690 Mon Sep 17 00:00:00 2001
From: Nick Gorbunov <intsurfer73@gmail.com>
Date: Sun, 6 Apr 2025 12:38:16 +0300
Subject: [PATCH 3/9] DZ1.40

---
 frontend/src/views/HomeView.vue | 851 +++++++++++++++++++++++++++++++-
 1 file changed, 850 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 821ebd67..dbe102a6 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -160,4 +160,853 @@ const getImage = image => {
   return new URL(`../assets/img/${image}`, import.meta.url).href
 }
 
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss">
+@import "@/assets/scss/ds-system/ds.scss";
+@import "@/assets/scss/mixins/mixins.scss";
+
+.content {
+  padding-top: 20px;
+}
+
+.content__wrapper {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+
+  width: 920px;
+  margin: 0 auto;
+  padding-right: 2.12%;
+  padding-bottom: 30px;
+  padding-left: 2.12%;
+}
+
+.content__dough {
+  width: 527px;
+  margin-top: 15px;
+  margin-right: auto;
+  margin-bottom: 15px;
+}
+
+.content__diameter {
+  width: 373px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.content__ingredients {
+  width: 527px;
+  margin-top: 15px;
+  margin-right: auto;
+  margin-bottom: 15px;
+}
+
+.content__pizza {
+  width: 373px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.content__constructor {
+  width: 315px;
+  margin-top: 25px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.content__result {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  margin-top: 25px;
+
+  p {
+    @include b-s24-h28;
+
+    margin: 0;
+  }
+
+  button {
+    margin-left: 12px;
+    padding: 16px 45px;
+  }
+}
+
+.sheet {
+  padding-top: 15px;
+
+  border-radius: 8px;
+  background-color: $white;
+  box-shadow: $shadow-light;
+}
+
+.sheet__title {
+  padding-right: 18px;
+  padding-left: 18px;
+}
+
+.sheet__content {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  margin-top: 8px;
+  padding-top: 18px;
+  padding-right: 18px;
+  padding-left: 18px;
+
+  border-top: 1px solid rgba($green-500, 0.1);
+}
+
+.ingredients__sauce {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  width: 100%;
+  margin-bottom: 14px;
+
+  p {
+    @include r-s16-h19;
+
+    margin-top: 0;
+    margin-right: 16px;
+    margin-bottom: 10px;
+  }
+}
+
+.ingredients__input {
+  margin-right: 24px;
+  margin-bottom: 10px;
+}
+
+.ingredients__filling {
+  width: 100%;
+
+  p {
+    @include r-s16-h19;
+
+    margin-top: 0;
+    margin-bottom: 16px;
+  }
+}
+
+.title {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+
+  color: $black;
+
+  &--big {
+    @include b-s36-h42;
+  }
+
+  &--small {
+    @include b-s18-h21;
+  }
+}
+
+.ingredients__list {
+  @include clear-list;
+
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.ingredients__item {
+  width: 100px;
+  min-height: 40px;
+  margin-right: 17px;
+  margin-bottom: 35px;
+}
+
+.ingredients__counter {
+  width: 54px;
+  margin-top: 10px;
+  margin-left: 36px;
+}
+
+.radio {
+  cursor: pointer;
+
+  span {
+    @include r-s16-h19;
+
+    position: relative;
+
+    padding-left: 28px;
+
+    &:before {
+      @include p_center-v;
+
+      display: block;
+
+      box-sizing: border-box;
+      width: 20px;
+      height: 20px;
+
+      content: "";
+      transition: 0.3s;
+
+      border: 1px solid $purple-400;
+      border-radius: 50%;
+      background-color: $white;
+    }
+  }
+
+  &:hover {
+    input:not(:checked):not(:disabled) + span {
+      &:before {
+        border-color: $purple-800;
+      }
+    }
+  }
+
+  input {
+    display: none;
+
+    &:checked + span {
+      &:before {
+        border: 6px solid $green-500;
+      }
+    }
+
+    &:disabled {
+      & + span {
+        &:before {
+          border-color: $purple-400;
+          background-color: $silver-200;
+        }
+      }
+
+      &:checked + span {
+        &:before {
+          border: 6px solid $purple-400;
+        }
+      }
+    }
+  }
+}
+
+.counter {
+  display: flex;
+
+  justify-content: space-between;
+  align-items: center;
+}
+
+.counter__button {
+  $el: &;
+  $size_icon: 50%;
+
+  position: relative;
+
+  display: block;
+
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+
+  cursor: pointer;
+  transition: 0.3s;
+
+  border: none;
+  border-radius: 50%;
+  outline: none;
+
+  &--minus {
+    background-color: $purple-100;
+
+    &::before {
+      @include p_center-all;
+
+      width: $size_icon;
+      height: 2px;
+
+      content: "";
+
+      border-radius: 2px;
+      background-color: $black;
+    }
+
+    &:hover:not(:active):not(:disabled) {
+      background-color: $purple-200;
+    }
+
+    &:active:not(:disabled) {
+      background-color: $purple-300;
+    }
+
+    &:focus:not(:disabled) {
+      box-shadow: $shadow-regular;
+    }
+
+    &:disabled {
+      cursor: default;
+
+      &::before {
+        opacity: 0.1;
+      }
+    }
+  }
+
+  &--plus {
+    background-color: $green-500;
+
+    &::before {
+      @include p_center-all;
+
+      width: $size_icon;
+      height: 2px;
+
+      content: "";
+
+      border-radius: 2px;
+      background-color: $white;
+    }
+
+    &::after {
+      @include p_center-all;
+
+      width: $size_icon;
+      height: 2px;
+
+      content: "";
+      transform: translate(-50%, -50%) rotate(90deg);
+
+      border-radius: 2px;
+      background-color: $white;
+    }
+
+    &:hover:not(:active):not(:disabled) {
+      background-color: $green-400;
+    }
+
+    &:active:not(:disabled) {
+      background-color: $green-600;
+    }
+
+    &:focus:not(:disabled) {
+      box-shadow: $shadow-regular;
+    }
+
+    &:disabled {
+      cursor: default;
+
+      opacity: 0.3;
+    }
+  }
+
+  &--orange {
+    background-color: $orange-200;
+
+    &:hover:not(:active):not(:disabled) {
+      background-color: $orange-100;
+    }
+
+    &:active:not(:disabled) {
+      background-color: $orange-300;
+    }
+  }
+}
+
+.counter__input {
+  @include r-s14-h16;
+
+  box-sizing: border-box;
+  width: 22px;
+  margin: 0;
+  padding: 0 3px;
+
+  text-align: center;
+
+  color: $black;
+  border: none;
+  border-radius: 10px;
+  outline: none;
+  background-color: transparent;
+
+  &:focus {
+    box-shadow: inset $shadow-regular;
+  }
+}
+
+.dough__input {
+  position: relative;
+
+  margin-right: 8%;
+  margin-bottom: 20px;
+  padding-left: 50px;
+
+  cursor: pointer;
+
+  img {
+    @include p_center-v;
+
+    width: 36px;
+    height: 36px;
+
+    transition: 0.3s;
+
+    border-radius: 50%;
+  }
+
+  b {
+    @include r-s16-h19;
+  }
+
+  span {
+    @include l-s11-h13;
+
+    display: block;
+  }
+
+  &:hover {
+    img {
+      box-shadow: $shadow-regular;
+    }
+  }
+
+  input {
+    &:checked + img {
+      box-shadow: $shadow-large;
+    }
+  }
+}
+
+.diameter__input {
+  margin-right: 8.7%;
+  margin-bottom: 20px;
+  padding-top: 7px;
+  padding-bottom: 6px;
+
+  cursor: pointer;
+
+  span {
+    @include r-s16-h19;
+
+    position: relative;
+
+    padding-left: 46px;
+
+    &::before {
+      @include p_center_v;
+
+      width: 36px;
+      height: 36px;
+
+      content: "";
+      transition: 0.3s;
+
+      border-radius: 50%;
+      background-color: $green-100;
+      background-image: url("@/assets/img/diameter.svg");
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+  }
+
+  &:nth-child(3n) {
+    margin-right: 0;
+  }
+
+  &--small {
+    span::before {
+      background-size: 18px;
+    }
+  }
+
+  &--normal {
+    span::before {
+      background-size: 29px;
+    }
+  }
+
+  &--big {
+    span::before {
+      background-size: 100%;
+    }
+  }
+
+  &:hover {
+    span::before {
+      box-shadow: $shadow-regular;
+    }
+  }
+
+  input {
+    &:checked + span::before {
+      box-shadow: $shadow-large;
+    }
+  }
+}
+
+.filling {
+  @include r-s14-h16;
+
+  position: relative;
+
+  display: block;
+
+  padding-left: 36px;
+
+  img {
+    @include p_center-v;
+
+    display: block;
+
+    width: 32px;
+    height: 32px;
+
+    box-sizing: border-box;
+    padding: 4px;
+
+    border-radius: 50%;
+  }
+}
+
+.button {
+  $bl: &;
+
+  @include b-s18-h21;
+  font-family: inherit;
+  display: block;
+
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  cursor: pointer;
+  transition: 0.3s;
+  text-align: center;
+
+  color: $white;
+  border: none;
+  border-radius: 8px;
+  outline: none;
+  box-shadow: $shadow-medium;
+
+  background-color: $green-500;
+
+  &:hover:not(:active):not(:disabled) {
+    background-color: $green-400;
+  }
+
+  &:active:not(:disabled) {
+    background-color: $green-600;
+  }
+
+  &:focus:not(:disabled) {
+    opacity: 0.5;
+  }
+
+  &:disabled {
+    background-color: $green-300;
+    color: rgba($white, 0.2);
+    cursor: default;
+  }
+
+  &--border {
+    background-color: transparent;
+    border: 1px solid $green-500;
+    color: $black;
+    box-shadow: none;
+
+    &:hover:not(:active):not(:disabled) {
+      color: $green-500;
+      border-color: $green-500;
+      background-color: transparent;
+    }
+
+    &:active:not(:disabled) {
+      color: $green-600;
+      border-color: $green-600;
+      background-color: transparent;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+
+  &--transparent {
+    @include b-s14-h16;
+    background-color: transparent;
+    box-shadow: none;
+    color: $black;
+
+    &:hover:not(:active):not(:disabled) {
+      color: $red-800;
+      background-color: transparent;
+    }
+
+    &:active:not(:disabled) {
+      color: $red-900;
+      background-color: transparent;
+    }
+
+    &:disabled {
+      opacity: 0.25;
+    }
+  }
+
+  &--arrow {
+    &::before {
+      content: "";
+      background-image: url("@/assets/img/button-arrow.svg");
+      background-position: center;
+      background-repeat: no-repeat;
+      margin-right: 16px;
+      width: 18px;
+      height: 18px;
+      display: inline-block;
+      vertical-align: middle;
+      transform: translateY(-1px);
+    }
+  }
+
+  &--white {
+    background-color: $white;
+    color: $green-500;
+  }
+}
+
+.pizza {
+  position: relative;
+
+  display: block;
+
+  box-sizing: border-box;
+  width: 100%;
+
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+
+  &--foundation--big-creamy {
+    background-image: url("@/assets/img/foundation/big-creamy.svg");
+  }
+
+  &--foundation--big-tomato {
+    background-image: url("@/assets/img/foundation/big-tomato.svg");
+  }
+
+  &--foundation--small-creamy {
+    background-image: url("@/assets/img/foundation/small-creamy.svg");
+  }
+
+  &--foundation--small-tomato {
+    background-image: url("@/assets/img/foundation/small-tomato.svg");
+  }
+}
+
+.pizza__wrapper {
+  width: 100%;
+  padding-bottom: 100%;
+}
+
+.pizza__filling {
+  $bl: &;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  display: block;
+
+  width: 100%;
+  height: 100%;
+
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+
+  &::before,
+  &::after {
+    display: none;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    content: "";
+
+    background-image: inherit;
+  }
+
+  &--second {
+    &::before {
+      display: block;
+
+      transform: rotate(45deg);
+    }
+  }
+
+  &--third {
+    &::before {
+      display: block;
+
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      display: block;
+
+      transform: rotate(-45deg);
+    }
+  }
+
+  &--ananas,
+  &--ananas.pizza__filling--second::before,
+  &--ananas.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/ananas.svg");
+  }
+
+  &--bacon,
+  &--bacon.pizza__filling--second::before,
+  &--bacon.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/bacon.svg");
+  }
+
+  &--blue_cheese,
+  &--blue.pizza__filling--second::before,
+  &--blue.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/blue_cheese.svg");
+  }
+
+  &--cheddar,
+  &--cheddar.pizza__filling--second::before,
+  &--cheddar.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/cheddar.svg");
+  }
+
+  &--chile,
+  &--chile.pizza__filling--second::before,
+  &--chile.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/chile.svg");
+  }
+
+  &--ham,
+  &--ham.pizza__filling--second::before,
+  &--ham.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/ham.svg");
+  }
+
+  &--jalapeno,
+  &--jalapeno.pizza__filling--second::before,
+  &--jalapeno.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/jalapeno.svg");
+  }
+
+  &--mozzarella,
+  &--mozzarella.pizza__filling--second::before,
+  &--mozzarella.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/mozzarella.svg");
+  }
+
+  &--mushrooms,
+  &--mushrooms.pizza__filling--second::before,
+  &--mushrooms.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/mushrooms.svg");
+  }
+
+  &--olives,
+  &--olives.pizza__filling--second::before,
+  &--olives.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/olives.svg");
+  }
+
+  &--onion,
+  &--onion.pizza__filling--second::before,
+  &--onion.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/onion.svg");
+  }
+
+  &--parmesan,
+  &--parmesan.pizza__filling--second::before,
+  &--parmesan.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/parmesan.svg");
+  }
+
+  &--salami,
+  &---salami.pizza__filling--second::before,
+  &---salami.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/salami.svg");
+  }
+
+  &--salmon,
+  &--salmon.pizza__filling--second::before,
+  &--salmon.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/salmon.svg");
+  }
+
+  &--tomatoes,
+  &--tomatoes.pizza__filling--second::before,
+  &--tomatoes.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/tomatoes.svg");
+  }
+}
+
+.input {
+  display: block;
+
+  span {
+    @include r-s14-h16;
+
+    display: block;
+
+    margin-bottom: 4px;
+  }
+
+  input {
+    @include r-s16-h19;
+
+    display: block;
+
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding: 8px 16px;
+
+    transition: 0.3s;
+
+    color: $black;
+    border: 1px solid $purple-400;
+    border-radius: 8px;
+    outline: none;
+    background-color: $white;
+
+    font-family: inherit;
+
+    &:focus {
+      border-color: $green-500;
+    }
+  }
+
+  &:hover {
+    input {
+      border-color: $black;
+    }
+  }
+
+  &--big-label {
+    display: flex;
+    align-items: center;
+
+    span {
+      @include b-s16-h19;
+
+      margin-right: 16px;
+
+      white-space: nowrap;
+    }
+  }
+}
+</style>
\ No newline at end of file

From 2ddd22e97d26703ee48ead66eefb4e9ba22faf06 Mon Sep 17 00:00:00 2001
From: Nick Gorbunov <intsurfer73@gmail.com>
Date: Sun, 6 Apr 2025 12:39:24 +0300
Subject: [PATCH 4/9] DZ1.40

---
 frontend/src/layouts/AppHeader.vue | 137 ++++++++++++++++++++++++++++-
 1 file changed, 136 insertions(+), 1 deletion(-)

diff --git a/frontend/src/layouts/AppHeader.vue b/frontend/src/layouts/AppHeader.vue
index 1f6c8d94..d5c270e5 100644
--- a/frontend/src/layouts/AppHeader.vue
+++ b/frontend/src/layouts/AppHeader.vue
@@ -12,4 +12,139 @@
       <a href="#" class="header__login"><span>Войти</span></a>
     </div>
   </header>
-</template>
\ No newline at end of file
+</template>
+<style lang="scss" scoped>
+@import "@/assets/scss/ds-system/ds";
+
+.header {
+  position: relative;
+  z-index: 2;
+
+  display: flex;
+
+  padding: 0 2.12%;
+
+  background-color: $green-500;
+  box-shadow: $shadow-light;
+}
+
+.header__logo {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.header__cart {
+  margin-right: 10px;
+  margin-left: auto;
+
+  a {
+    @include b-s16-h19;
+
+    display: block;
+
+    padding: 21px 15px 21px 58px;
+
+    transition: 0.3s;
+
+    color: $white;
+    background-color: $green-500;
+    background-image: url("@/assets/img/cart.svg");
+    background-repeat: no-repeat;
+    background-position: 20px center;
+    background-size: 29px 27px;
+
+    &:hover:not(:active) {
+      background-color: $green-400;
+    }
+
+    &:active {
+      background-color: $green-600;
+    }
+
+    &:focus {
+      opacity: 0.5;
+    }
+  }
+}
+
+.header__user {
+  display: flex;
+  align-items: center;
+
+  a {
+    display: block;
+
+    padding: 14px 20px;
+
+    transition: 0.3s;
+
+    background-color: $green-500;
+
+    &:hover:not(:active) {
+      background-color: $green-400;
+    }
+
+    &:active {
+      background-color: $green-600;
+    }
+
+    &:focus {
+      opacity: 0.5;
+    }
+  }
+
+  img {
+    display: inline-block;
+
+    width: 32px;
+    height: 32px;
+    margin-right: 8px;
+
+    vertical-align: middle;
+
+    border-radius: 50%;
+  }
+
+  span {
+    @include r-s14-h16;
+
+    display: inline-block;
+
+    vertical-align: middle;
+
+    color: $white;
+  }
+}
+
+.header__logout {
+  &::before {
+    display: inline-block;
+
+    width: 32px;
+    height: 32px;
+    margin-right: 8px;
+
+    content: "";
+    vertical-align: middle;
+
+    background: url("@/assets/img/login.svg") no-repeat center;
+    background-size: auto 50%;
+  }
+}
+
+.header__login {
+  &::after {
+    display: inline-block;
+
+    width: 32px;
+    height: 32px;
+    margin-left: 8px;
+
+    content: "";
+    vertical-align: middle;
+
+    background: url("@/assets/img/login.svg") no-repeat center;
+    background-size: auto 50%;
+  }
+}
+</style>
\ No newline at end of file

From bf7225ddf8e0ee8f405b41c20fedc785ec727583 Mon Sep 17 00:00:00 2001
From: Nick Gorbunov <intsurfer73@gmail.com>
Date: Sun, 6 Apr 2025 16:44:57 +0300
Subject: [PATCH 5/9] DZ2.6

---
 frontend/src/common/components/AppDrag.vue | 30 ++++++++++++++++++++++
 frontend/src/common/components/AppDrop.vue | 25 ++++++++++++++++++
 frontend/src/common/constants/index.js     |  1 +
 3 files changed, 56 insertions(+)
 create mode 100644 frontend/src/common/components/AppDrag.vue
 create mode 100644 frontend/src/common/components/AppDrop.vue
 create mode 100644 frontend/src/common/constants/index.js

diff --git a/frontend/src/common/components/AppDrag.vue b/frontend/src/common/components/AppDrag.vue
new file mode 100644
index 00000000..193b1919
--- /dev/null
+++ b/frontend/src/common/components/AppDrag.vue
@@ -0,0 +1,30 @@
+<template>
+    <div
+      :draggable="draggable"
+      @dragstart.self="onDragStart"
+      @dragover.prevent
+      @dragenter.prevent
+    >
+      <slot />
+    </div>
+  </template>
+  
+  <script setup>
+  import { DATA_TRANSFER_PAYLOAD } from "@/common/constants";
+  
+  const props = defineProps({
+    draggable: {
+      type: Boolean,
+      default: false,
+    },
+    dataTransfer: {
+      type: Object,
+      required: true,
+    },
+  });
+  
+  const onDragStart = ({ dataTransfer }) => {
+    const data = JSON.stringify(props.dataTransfer);
+    dataTransfer.setData(DATA_TRANSFER_PAYLOAD, data);
+  };
+  </script>
\ No newline at end of file
diff --git a/frontend/src/common/components/AppDrop.vue b/frontend/src/common/components/AppDrop.vue
new file mode 100644
index 00000000..2ef19b67
--- /dev/null
+++ b/frontend/src/common/components/AppDrop.vue
@@ -0,0 +1,25 @@
+<template>
+    <div @drop.stop="onDrop" @dragover.prevent @dragenter.prevent>
+      <slot />
+    </div>
+  </template>
+  
+  <script setup>
+  import { DATA_TRANSFER_PAYLOAD } from "@/common/constants";
+  
+  const emit = defineEmits(["drop"]);
+  
+  const onDrop = ({ dataTransfer }) => {
+    if (!dataTransfer) {
+      return;
+    }
+    
+    const payload = dataTransfer.getData(DATA_TRANSFER_PAYLOAD);
+    
+    if (payload) {
+      const transferData = dataTransfer.getData(DATA_TRANSFER_PAYLOAD);
+      const data = JSON.parse(transferData);
+      emit("drop", data);
+    }
+  };
+  </script>
\ No newline at end of file
diff --git a/frontend/src/common/constants/index.js b/frontend/src/common/constants/index.js
new file mode 100644
index 00000000..7ff73a0c
--- /dev/null
+++ b/frontend/src/common/constants/index.js
@@ -0,0 +1 @@
+export const DATA_TRANSFER_PAYLOAD = "payload";

From aff85dd8ef4e84dad4a7aff81ca2398f678fb540 Mon Sep 17 00:00:00 2001
From: Nick Gorbunov <intsurfer73@gmail.com>
Date: Sun, 6 Apr 2025 17:04:27 +0300
Subject: [PATCH 6/9] DZ2.13

---
 .../modules/constructor/DiameterSelector.vue  | 113 ++++++++
 .../src/modules/constructor/DoughSelector.vue |  95 ++++++
 .../constructor/IngredientsSelector.vue       | 270 ++++++++++++++++++
 .../modules/constructor/PizzaConstructor.vue  | 235 +++++++++++++++
 .../src/modules/constructor/SauceSelector.vue |  59 ++++
 5 files changed, 772 insertions(+)
 create mode 100644 frontend/src/modules/constructor/DiameterSelector.vue
 create mode 100644 frontend/src/modules/constructor/DoughSelector.vue
 create mode 100644 frontend/src/modules/constructor/IngredientsSelector.vue
 create mode 100644 frontend/src/modules/constructor/PizzaConstructor.vue
 create mode 100644 frontend/src/modules/constructor/SauceSelector.vue

diff --git a/frontend/src/modules/constructor/DiameterSelector.vue b/frontend/src/modules/constructor/DiameterSelector.vue
new file mode 100644
index 00000000..a6451230
--- /dev/null
+++ b/frontend/src/modules/constructor/DiameterSelector.vue
@@ -0,0 +1,113 @@
+<template>
+    <div class="content__diameter">
+      <div class="sheet">
+        <h2 class="title title--small sheet__title">Выберите размер</h2>
+  
+        <div class="sheet__content">
+          <label
+            v-for="sizeType in items"
+            :key="sizeType.id"
+            class="diameter__input"
+            :class="`diameter__input--${sizeType.value}`"
+          >
+            <input
+              type="radio"
+              name="diameter"
+              :value="sizeType.value"
+              :checked="sizeType.value === modelValue"
+              class="visually-hidden"
+              @input="emit('update:modelValue', sizeType.value)"
+            />
+            <span>{{ sizeType.name }}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  defineProps({
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  });
+  
+  const emit = defineEmits(["update:modelValue"]);
+  </script>
+  
+  <style lang="scss" scoped>
+  @import "@/assets/scss/ds-system/ds.scss";
+  @import "@/assets/scss/mixins/mixins.scss";
+  
+  .content__diameter {
+    width: 373px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+  
+  .diameter__input {
+    margin-right: 8.7%;
+    margin-bottom: 20px;
+    padding-top: 7px;
+    padding-bottom: 6px;
+    cursor: pointer;
+  
+    span {
+      @include r-s16-h19;
+      position: relative;
+      padding-left: 46px;
+      &::before {
+        @include p_center_v;
+        width: 36px;
+        height: 36px;
+        content: "";
+        transition: 0.3s;
+        border-radius: 50%;
+        background-color: $green-100;
+        background-image: url("@/assets/img/diameter.svg");
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+    }
+  
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+     
+    &--small {
+      span::before {
+        background-size: 18px;
+      }
+    }
+  
+    &--normal {
+      span::before {
+        background-size: 29px;
+      }
+    }
+  
+    &--big {
+      span::before {
+        background-size: 100%;
+      }
+    }
+  
+    &:hover {
+      span::before {
+        box-shadow: $shadow-regular;
+      }
+    }
+  
+    input {
+      &:checked + span::before {
+        box-shadow: $shadow-large;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/frontend/src/modules/constructor/DoughSelector.vue b/frontend/src/modules/constructor/DoughSelector.vue
new file mode 100644
index 00000000..5281e6f9
--- /dev/null
+++ b/frontend/src/modules/constructor/DoughSelector.vue
@@ -0,0 +1,95 @@
+<template>
+    <div class="content__dough">
+      <div class="sheet">
+        <h2 class="title title--small sheet__title">Выберите тесто</h2>
+  
+        <div class="sheet__content">
+          <label
+            v-for="doughType in items"
+            :key="doughType.id"
+            class="dough__input"
+          >
+            <input
+              type="radio"
+              name="dough"
+              :value="doughType.value"
+              :checked="doughType.value === modelValue"
+              class="visually-hidden"
+              @input="emit('update:modelValue', doughType.value)"
+            />
+            <img :src="getImage(doughType.image)" :alt="doughType.name" />
+  
+            <b>{{ doughType.name }}</b>
+            <span>{{ doughType.description }}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  defineProps({
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  });
+  const emit = defineEmits(["update:modelValue"]);
+
+const getImage = (image) => {
+  return new URL(`../../assets/img/${image}`, import.meta.url).href;
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/ds-system/ds.scss";
+@import "@/assets/scss/mixins/mixins.scss";
+
+.content__dough {
+  width: 527px;
+  margin-top: 15px;
+  margin-right: auto;
+  margin-bottom: 15px;
+}
+
+.dough__input {
+  position: relative;
+  margin-right: 8%;
+  margin-bottom: 20px;
+  padding-left: 50px;
+  cursor: pointer;
+
+  img {
+    @include p_center-v;
+    width: 36px;
+    height: 36px;
+    transition: 0.3s;
+    border-radius: 50%;
+  }
+  
+  b {
+    @include r-s16-h19;
+  }
+  
+  span {
+    @include l-s11-h13;
+    display: block;
+  }
+  
+  &:hover {
+    img {
+      box-shadow: $shadow-regular;
+    }
+  }
+
+  input {
+    &:checked + img {
+      box-shadow: $shadow-large;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/modules/constructor/IngredientsSelector.vue b/frontend/src/modules/constructor/IngredientsSelector.vue
new file mode 100644
index 00000000..6e0d1ae9
--- /dev/null
+++ b/frontend/src/modules/constructor/IngredientsSelector.vue
@@ -0,0 +1,270 @@
+<template>
+    <div class="ingredients__filling">
+      <p>Начинка:</p>
+  
+      <ul class="ingredients__list">
+        <li
+          v-for="ingredientType in items"
+          :key="ingredientType.id"
+          class="ingredients__item"
+        >
+          <app-drag
+            :data-transfer="ingredientType"
+            :draggable="getValue(ingredientType.value) < MAX_INGREDIENT_COUNT"
+          >
+            <div class="filling">
+              <img
+                :src="getImage(ingredientType.image)"
+                :alt="ingredientType.name"
+              />
+              {{ ingredientType.name }}
+            </div>
+          </app-drag>
+  
+          <div class="counter ingredients__counter">
+            <button
+              type="button"
+              class="counter__button counter__button--minus"
+              :disabled="getValue(ingredientType.value) === 0"
+              @click="decrementValue(ingredientType.value)"
+            >
+              <span class="visually-hidden">Меньше</span>
+            </button>
+            <input
+              type="text"
+              name="counter"
+              class="counter__input"
+              :value="getValue(ingredientType.value)"
+              @input="inputValue(ingredientType.value, $event.target.value)"
+            />
+            <button
+              type="button"
+              class="counter__button counter__button--plus"
+              :disabled="getValue(ingredientType.value) === MAX_INGREDIENT_COUNT"
+              @click="incrementValue(ingredientType.value)"
+            >
+              <span class="visually-hidden">Больше</span>
+            </button>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </template>
+  
+  <script setup>
+  import { toRef } from "vue";
+  import AppDrag from "@/common/components/AppDrag.vue";
+  import { MAX_INGREDIENT_COUNT } from "@/common/constants";
+  
+  const props = defineProps({
+    values: {
+      type: Object,
+      default: () => ({}),
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  });
+  const emit = defineEmits(["update"]);
+  const values = toRef(props, "values");
+  
+  const getValue = (ingredient) => {
+    return values.value[ingredient] ?? 0;
+  };
+  
+  const setValue = (ingredient, count) => {
+    emit("update", ingredient, Number(count));
+  };
+  
+  const decrementValue = (ingredient) => {
+    setValue(ingredient, getValue(ingredient) - 1);
+  };
+  
+  const incrementValue = (ingredient) => {
+    setValue(ingredient, getValue(ingredient) + 1);
+  };
+  
+  const inputValue = (ingredient, count) => {
+    return setValue(ingredient, Math.min(MAX_INGREDIENT_COUNT, Number(count)));
+  };
+  
+  const getImage = (image) => {
+    return new URL(`../../assets/img/${image}`, import.meta.url).href;
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  @import "@/assets/scss/ds-system/ds.scss";
+  @import "@/assets/scss/mixins/mixins.scss";
+  
+  .ingredients__filling {
+    width: 100%;
+    p {
+      @include r-s16-h19;
+      margin-top: 0;
+      margin-bottom: 16px;
+    }
+  }
+  
+  .ingredients__list {
+    @include clear-list;
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+  
+  .ingredients__item {
+    width: 100px;
+    min-height: 40px;
+    margin-right: 17px;
+    margin-bottom: 35px;
+  }
+  
+  .ingredients__counter {
+    width: 54px;
+    margin-top: 10px;
+    margin-left: 36px;
+  }
+  
+  .counter {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .counter__button {
+    $el: &;
+    $size_icon: 50%;
+    position: relative;
+    display: block;
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    transition: 0.3s;
+    border: none;
+    border-radius: 50%;
+    outline: none;
+  
+    &--minus {
+      background-color: $purple-100;
+     
+      &::before {
+        @include p_center-all;
+        width: $size_icon;
+        height: 2px;
+        content: "";
+        border-radius: 2px;
+        background-color: $black;
+      }
+       
+      &:hover:not(:active):not(:disabled) {
+        background-color: $purple-200;
+      }
+       
+      &:active:not(:disabled) {
+        background-color: $purple-300;
+      }
+       
+      &:focus:not(:disabled) {
+        box-shadow: $shadow-regular;
+      }
+       
+      &:disabled {
+        cursor: default;
+        &::before {
+          opacity: 0.1;
+        }
+      }
+    }
+  
+    &--plus {
+      background-color: $green-500;
+     
+      &::before {
+        @include p_center-all;
+        width: $size_icon;
+        height: 2px;
+        content: "";
+        border-radius: 2px;
+        background-color: $white;
+      }
+       
+      &::after {
+        @include p_center-all;
+        width: $size_icon;
+        height: 2px;
+        content: "";
+        transform: translate(-50%, -50%) rotate(90deg);
+        border-radius: 2px;
+        background-color: $white;
+      }
+       
+      &:hover:not(:active):not(:disabled) {
+        background-color: $green-400;
+      }
+       
+      &:active:not(:disabled) {
+        background-color: $green-600;
+      }
+       
+      &:focus:not(:disabled) {
+        box-shadow: $shadow-regular;
+      }
+       
+      &:disabled {
+        cursor: default;
+        opacity: 0.3;
+      }
+    }
+  
+    &--orange {
+      background-color: $orange-200;
+     
+      &:hover:not(:active):not(:disabled) {
+        background-color: $orange-100;
+      }
+       
+      &:active:not(:disabled) {
+        background-color: $orange-300;
+      }
+    }
+  }
+  
+  .counter__input {
+    @include r-s14-h16;
+    box-sizing: border-box;
+    width: 22px;
+    margin: 0;
+    padding: 0 3px;
+    text-align: center;
+    color: $black;
+    border: none;
+    border-radius: 10px;
+    outline: none;
+    background-color: transparent;
+  
+    &:focus {
+      box-shadow: inset $shadow-regular;
+    }
+  }
+  
+  .filling {
+    @include r-s14-h16;
+    position: relative;
+    display: block;
+    padding-left: 36px;
+  
+    img {
+      @include p_center-v;
+      display: block;
+      width: 32px;
+      height: 32px;
+      box-sizing: border-box;
+      padding: 4px;
+      border-radius: 50%;
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/frontend/src/modules/constructor/PizzaConstructor.vue b/frontend/src/modules/constructor/PizzaConstructor.vue
new file mode 100644
index 00000000..5193a99f
--- /dev/null
+++ b/frontend/src/modules/constructor/PizzaConstructor.vue
@@ -0,0 +1,235 @@
+<template>
+    <div class="content__constructor">
+      <app-drop @drop="emit('drop', $event.value)">
+        <div class="pizza" :class="`pizza--foundation--${dough}-${sauce}`">
+          <div class="pizza__wrapper">
+            <div
+              v-for="(value, key) in pizzaIngredients"
+              :key="key"
+              class="pizza__filling"
+              :class="[
+                `pizza__filling--${key}`,
+                value === TWO_INGREDIENTS && 'pizza__filling--second',
+                value === THREE_INGREDIENTS && 'pizza__filling--third',
+              ]"
+            />
+          </div>
+        </div>
+      </app-drop>
+    </div>
+  </template>
+  
+  <script setup>
+  import { computed } from "vue";
+  import AppDrop from "@/common/components/AppDrop.vue";
+  const TWO_INGREDIENTS = 2;
+  const THREE_INGREDIENTS = 3;
+  
+  const props = defineProps({
+    dough: {
+      type: String,
+      default: "light",
+    },
+    sauce: {
+      type: String,
+      default: "tomato",
+    },
+    ingredients: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
+  
+  const emit = defineEmits(["drop"]);
+  
+  const pizzaIngredients = computed(() => {
+     /*
+     * props.ingredients - это объект с ингредиентами вида { ингредиент: количество }
+     * при помощи reduce нужно оставить только те, количество которые больше 0
+     * для этого перебираем каждую пару [ингредиент, количество]
+     * и если количество больше 0, добавляем в объект-результат
+     */
+    return Object.entries(props.ingredients).reduce((result, entry) => {
+      /* [ингредиент, количество] */
+      const [key, value] = entry;
+      if (value > 0) {
+        result[key] = value;
+      }
+          
+      return result;
+    }, {});
+  });
+  </script>
+  
+  <style lang="scss" scoped>
+  .content__constructor {
+    width: 315px;
+    margin-top: 25px;
+    margin-right: auto;
+    margin-left: auto;
+  }
+  
+  .pizza__wrapper {
+    width: 100%;
+    padding-bottom: 100%;
+  }
+  
+  .pizza__filling {
+    $bl: &;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+  
+    &::before,
+    &::after {
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      content: "";
+      background-image: inherit;
+    }
+     
+    &--second {
+      &::before {
+        display: block;
+        transform: rotate(45deg);
+      }
+    }
+  
+    &--third {
+      &::before {
+        display: block;
+        transform: rotate(45deg);
+      }
+      &::after {
+        display: block;
+        transform: rotate(-45deg);
+      }
+    }
+  
+    &--ananas,
+    &--ananas.pizza__filling--second::before,
+    &--ananas.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/ananas.svg");
+    }
+     
+    &--bacon,
+    &--bacon.pizza__filling--second::before,
+    &--bacon.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/bacon.svg");
+    }
+     
+    &--blue_cheese,
+    &--blue.pizza__filling--second::before,
+    &--blue.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/blue_cheese.svg");
+    }
+     
+    &--cheddar,
+    &--cheddar.pizza__filling--second::before,
+    &--cheddar.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/cheddar.svg");
+    }
+     
+    &--chile,
+    &--chile.pizza__filling--second::before,
+    &--chile.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/chile.svg");
+    }
+     
+    &--ham,
+    &--ham.pizza__filling--second::before,
+    &--ham.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/ham.svg");
+    }
+     
+    &--jalapeno,
+    &--jalapeno.pizza__filling--second::before,
+    &--jalapeno.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/jalapeno.svg");
+    }
+     
+    &--mozzarella,
+    &--mozzarella.pizza__filling--second::before,
+    &--mozzarella.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/mozzarella.svg");
+    }
+     
+    &--mushrooms,
+    &--mushrooms.pizza__filling--second::before,
+    &--mushrooms.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/mushrooms.svg");
+    }
+     
+    &--olives,
+    &--olives.pizza__filling--second::before,
+    &--olives.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/olives.svg");
+    }
+     
+    &--onion,
+    &--onion.pizza__filling--second::before,
+    &--onion.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/onion.svg");
+    }
+     
+    &--parmesan,
+    &--parmesan.pizza__filling--second::before,
+    &--parmesan.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/parmesan.svg");
+    }
+     
+    &--salami,
+    &---salami.pizza__filling--second::before,
+    &---salami.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/salami.svg");
+    }
+     
+    &--salmon,
+    &--salmon.pizza__filling--second::before,
+    &--salmon.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/salmon.svg");
+    }
+     
+    &--tomatoes,
+    &--tomatoes.pizza__filling--second::before,
+    &--tomatoes.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/tomatoes.svg");
+    }
+  }
+  
+  .pizza {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+  
+    &--foundation--large-creamy {
+      background-image: url("@/assets/img/foundation/big-creamy.svg");
+    }
+     
+    &--foundation--large-tomato {
+      background-image: url("@/assets/img/foundation/big-tomato.svg");
+    }
+     
+    &--foundation--light-creamy {
+      background-image: url("@/assets/img/foundation/small-creamy.svg");
+    }
+     
+    &--foundation--light-tomato {
+      background-image: url("@/assets/img/foundation/small-tomato.svg");
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/frontend/src/modules/constructor/SauceSelector.vue b/frontend/src/modules/constructor/SauceSelector.vue
new file mode 100644
index 00000000..4c6a3f95
--- /dev/null
+++ b/frontend/src/modules/constructor/SauceSelector.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="ingredients__sauce">
+      <p>Основной соус:</p>
+  
+      <label
+        v-for="sauceType in items"
+        :key="sauceType.id"
+        class="radio ingredients__input"
+      >
+        <input
+          type="radio"
+          name="sauce"
+          :value="sauceType.value"
+          :checked="sauceType.value === modelValue"
+          @input="emit('update:modelValue', sauceType.value)"
+        />
+        <span>{{ sauceType.name }}</span>
+      </label>
+    </div>
+  </template>
+  
+  <script setup>
+  defineProps({
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  });
+  
+  const emit = defineEmits(["update:modelValue"]);
+  </script>
+  
+  <style lang="scss" scoped>
+  @import "@/assets/scss/ds-system/ds.scss";
+  
+  .ingredients__sauce {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+    margin-bottom: 14px;
+  
+    p {
+      @include r-s16-h19;
+      margin-top: 0;
+      margin-right: 16px;
+      margin-bottom: 10px;
+    }
+  }
+  
+  .ingredients__input {
+    margin-right: 24px;
+    margin-bottom: 10px;
+  }
+  </style>
\ No newline at end of file

From 70176205db397401ed33fafe6787ced19dedc2cd Mon Sep 17 00:00:00 2001
From: Nick Gorbunov <intsurfer73@gmail.com>
Date: Sun, 6 Apr 2025 17:11:43 +0300
Subject: [PATCH 7/9] DZ2.15

---
 frontend/src/views/HomeView.vue | 727 ++++----------------------------
 1 file changed, 81 insertions(+), 646 deletions(-)

diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index dbe102a6..7b716576 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,110 +1,27 @@
 <template>
-<main class="content">
+  <main class="content">
     <form action="#" method="post">
-
       <div class="content__wrapper">
         <h1 class="title title--big">Конструктор пиццы</h1>
 
-        <div class="sheet__content dough">
-          <label
-            class="dough__input"
-            v-for="doughType in doughItems"
-            :key="doughType.id"
-          >
-            <input
-              type="radio"
-              name="dough"
-              :value="doughType.value"
-              class="visually-hidden"
-              checked
-            />
-            <img :src="getImage(doughType.image)" :alt="doughType.name" />
-
-            <b>{{ doughType.name }}</b>
-            <span>{{ doughType.description }}</span>
-          </label>
-        </div>
-
-        <div class="sheet__content diameter">
-          <label
-            class="diameter__input"
-            :class="`diameter__input--${sizeType.value}`"
-            v-for="sizeType in sizeItems"
-            :key="sizeType.id"
-          >
-            <input
-              type="radio"
-              name="diameter"
-              :value="sizeType.value"
-              class="visually-hidden"
-            />
-            <span>{{ sizeType.name }}</span>
-          </label>
-        </div>
+        <dough-selector v-model="pizza.dough" :items="doughItems" />
 
+        <diameter-selector v-model="pizza.size" :items="sizeItems" />
 
         <div class="content__ingredients">
           <div class="sheet">
-            <h2 class="title title--small sheet__title">Выберите ингредиенты</h2>
+            <h2 class="title title--small sheet__title">
+              Выберите ингредиенты
+            </h2>
 
             <div class="sheet__content ingredients">
+              <sauce-selector v-model="pizza.sauce" :items="sauceItems" />
 
-              <div class="ingredients__sauce">
-                <p>Основной соус:</p>
-
-                <label
-                  class="radio ingredients__input"
-                  v-for="sauceType in sauceItems"
-                  :key="sauceType.id"
-                >
-                  <input type="radio" name="sauce" :value="sauceType.value" />
-                  <span>{{ sauceType.name }}</span>
-                </label>
-              </div>
-
-              <div class="ingredients__filling">
-                <p>Начинка:</p>
-
-                <ul class="ingredients__list">
-                  <li
-                    class="ingredients__item"
-                    v-for="ingredientType in ingredientItems"
-                    :key="ingredientType.id"
-                  >
-                    <div class="filling">
-                      <img
-                        :src="getImage(ingredientType.image)"
-                        :alt="ingredientType.name"
-                      />
-                      {{ ingredientType.name }}
-                    </div>
-
-                    <div class="counter counter--orange ingredients__counter">
-                      <button
-                        type="button"
-                        class="counter__button counter__button--minus"
-                        disabled
-                      >
-                        <span class="visually-hidden">Меньше</span>
-                      </button>
-                      <input
-                        type="text"
-                        name="counter"
-                        class="counter__input"
-                        value="0"
-                      />
-                      <button
-                        type="button"
-                        class="counter__button counter__button--plus"
-                      >
-                        <span class="visually-hidden">Больше</span>
-                      </button>
-                    </div>
-                  </li>
-                </ul>
-
-              </div>
-
+              <ingredients-selector
+                :values="pizza.ingredients"
+                :items="ingredientItems"
+                @update="updateIngredientAmount"
+              />
             </div>
           </div>
         </div>
@@ -112,39 +29,46 @@
         <div class="content__pizza">
           <label class="input">
             <span class="visually-hidden">Название пиццы</span>
-            <input type="text" name="pizza_name" placeholder="Введите название пиццы">
+            <input
+              v-model="pizza.name"
+              type="text"
+              name="pizza_name"
+              placeholder="Введите название пиццы"
+            />
           </label>
 
-          <div class="content__constructor">
-            <div class="pizza pizza--foundation--big-tomato">
-              <div class="pizza__wrapper">
-                <div class="pizza__filling pizza__filling--ananas"></div>
-                <div class="pizza__filling pizza__filling--bacon"></div>
-                <div class="pizza__filling pizza__filling--cheddar"></div>
-              </div>
-            </div>
-          </div>
+          <pizza-constructor
+            :dough="pizza.dough"
+            :sauce="pizza.sauce"
+            :ingredients="pizza.ingredients"
+            @drop="addIngredient"
+          />
 
           <div class="content__result">
-            <p>Итого: 0 ₽</p>
-            <button type="button" class="button" disabled>Готовьте!</button>
+            <p>Итого: {{ price }} ₽</p>
+            <button type="button" class="button" :disabled="disableSubmit">
+              Готовьте!
+            </button>
           </div>
         </div>
-
       </div>
-
     </form>
   </main>
-  </template>
+</template>
 
 <script setup>
+import { computed, reactive } from "vue";
 import {
   normalizeDough,
   normalizeIngredients,
   normalizeSauces,
   normalizeSize,
 } from "@/common/helpers/normalize";
-
+import DoughSelector from "@/modules/constructor/DoughSelector.vue";
+import DiameterSelector from "@/modules/constructor/DiameterSelector.vue";
+import SauceSelector from "@/modules/constructor/SauceSelector.vue";
+import IngredientsSelector from "@/modules/constructor/IngredientsSelector.vue";
+import PizzaConstructor from "@/modules/constructor/PizzaConstructor.vue";
 import doughJSON from "@/mocks/dough.json";
 import ingredientsJSON from "@/mocks/ingredients.json";
 import saucesJSON from "@/mocks/sauces.json";
@@ -155,11 +79,52 @@ const ingredientItems = ingredientsJSON.map(normalizeIngredients);
 const sauceItems = saucesJSON.map(normalizeSauces);
 const sizeItems = sizesJSON.map(normalizeSize);
 
-const getImage = image => {
-  // https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url
-  return new URL(`../assets/img/${image}`, import.meta.url).href
-}
-
+const pizza = reactive({
+  name: "",
+  dough: doughItems[0].value,
+  size: sizeItems[0].value,
+  sauce: sauceItems[0].value,
+  ingredients: ingredientItems.reduce((acc, item) => {
+    acc[item.value] = 0;
+    return acc;
+  }, {}),
+});
+
+const price = computed(() => {
+  const { dough, size, sauce, ingredients } = pizza;
+
+  const sizeMultiplier =
+    sizeItems.find((item) => item.value === size)?.multiplier ?? 1;
+
+  const doughPrice =
+    doughItems.find((item) => item.value === dough)?.price ?? 0;
+
+  const saucePrice =
+    sauceItems.find((item) => item.value === sauce)?.price ?? 0;
+
+  /*
+   * Здесь мы при помощи метода map превращаем массив ингредиентов
+   * в массив значений, соответствующих итоговой стоимости каждого из них - просто умножив известную цену на количество.
+   * После чего методом reduce вычисляем сумму всех элементов массива, что даст нам общую стоимость всех ингредиентов.
+   */
+  const ingredientsPrice = ingredientItems
+    .map((item) => ingredients[item.value] * item.price)
+    .reduce((acc, item) => acc + item, 0);
+
+  return (doughPrice + saucePrice + ingredientsPrice) * sizeMultiplier;
+});
+
+const disableSubmit = computed(() => {
+  return pizza.name.length === 0 || price.value === 0;
+});
+
+const addIngredient = (ingredient) => {
+  pizza.ingredients[ingredient]++;
+};
+
+const updateIngredientAmount = (ingredient, count) => {
+  pizza.ingredients[ingredient] = count;
+};
 </script>
 
 <style lang="scss">
@@ -182,19 +147,6 @@ const getImage = image => {
   padding-left: 2.12%;
 }
 
-.content__dough {
-  width: 527px;
-  margin-top: 15px;
-  margin-right: auto;
-  margin-bottom: 15px;
-}
-
-.content__diameter {
-  width: 373px;
-  margin-top: 15px;
-  margin-bottom: 15px;
-}
-
 .content__ingredients {
   width: 527px;
   margin-top: 15px;
@@ -208,13 +160,6 @@ const getImage = image => {
   margin-bottom: 15px;
 }
 
-.content__constructor {
-  width: 315px;
-  margin-top: 25px;
-  margin-right: auto;
-  margin-left: auto;
-}
-
 .content__result {
   display: flex;
   align-items: center;
@@ -260,39 +205,6 @@ const getImage = image => {
   border-top: 1px solid rgba($green-500, 0.1);
 }
 
-.ingredients__sauce {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-
-  width: 100%;
-  margin-bottom: 14px;
-
-  p {
-    @include r-s16-h19;
-
-    margin-top: 0;
-    margin-right: 16px;
-    margin-bottom: 10px;
-  }
-}
-
-.ingredients__input {
-  margin-right: 24px;
-  margin-bottom: 10px;
-}
-
-.ingredients__filling {
-  width: 100%;
-
-  p {
-    @include r-s16-h19;
-
-    margin-top: 0;
-    margin-bottom: 16px;
-  }
-}
-
 .title {
   box-sizing: border-box;
   width: 100%;
@@ -309,27 +221,6 @@ const getImage = image => {
   }
 }
 
-.ingredients__list {
-  @include clear-list;
-
-  display: flex;
-  align-items: flex-start;
-  flex-wrap: wrap;
-}
-
-.ingredients__item {
-  width: 100px;
-  min-height: 40px;
-  margin-right: 17px;
-  margin-bottom: 35px;
-}
-
-.ingredients__counter {
-  width: 54px;
-  margin-top: 10px;
-  margin-left: 36px;
-}
-
 .radio {
   cursor: pointer;
 
@@ -392,284 +283,6 @@ const getImage = image => {
   }
 }
 
-.counter {
-  display: flex;
-
-  justify-content: space-between;
-  align-items: center;
-}
-
-.counter__button {
-  $el: &;
-  $size_icon: 50%;
-
-  position: relative;
-
-  display: block;
-
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  padding: 0;
-
-  cursor: pointer;
-  transition: 0.3s;
-
-  border: none;
-  border-radius: 50%;
-  outline: none;
-
-  &--minus {
-    background-color: $purple-100;
-
-    &::before {
-      @include p_center-all;
-
-      width: $size_icon;
-      height: 2px;
-
-      content: "";
-
-      border-radius: 2px;
-      background-color: $black;
-    }
-
-    &:hover:not(:active):not(:disabled) {
-      background-color: $purple-200;
-    }
-
-    &:active:not(:disabled) {
-      background-color: $purple-300;
-    }
-
-    &:focus:not(:disabled) {
-      box-shadow: $shadow-regular;
-    }
-
-    &:disabled {
-      cursor: default;
-
-      &::before {
-        opacity: 0.1;
-      }
-    }
-  }
-
-  &--plus {
-    background-color: $green-500;
-
-    &::before {
-      @include p_center-all;
-
-      width: $size_icon;
-      height: 2px;
-
-      content: "";
-
-      border-radius: 2px;
-      background-color: $white;
-    }
-
-    &::after {
-      @include p_center-all;
-
-      width: $size_icon;
-      height: 2px;
-
-      content: "";
-      transform: translate(-50%, -50%) rotate(90deg);
-
-      border-radius: 2px;
-      background-color: $white;
-    }
-
-    &:hover:not(:active):not(:disabled) {
-      background-color: $green-400;
-    }
-
-    &:active:not(:disabled) {
-      background-color: $green-600;
-    }
-
-    &:focus:not(:disabled) {
-      box-shadow: $shadow-regular;
-    }
-
-    &:disabled {
-      cursor: default;
-
-      opacity: 0.3;
-    }
-  }
-
-  &--orange {
-    background-color: $orange-200;
-
-    &:hover:not(:active):not(:disabled) {
-      background-color: $orange-100;
-    }
-
-    &:active:not(:disabled) {
-      background-color: $orange-300;
-    }
-  }
-}
-
-.counter__input {
-  @include r-s14-h16;
-
-  box-sizing: border-box;
-  width: 22px;
-  margin: 0;
-  padding: 0 3px;
-
-  text-align: center;
-
-  color: $black;
-  border: none;
-  border-radius: 10px;
-  outline: none;
-  background-color: transparent;
-
-  &:focus {
-    box-shadow: inset $shadow-regular;
-  }
-}
-
-.dough__input {
-  position: relative;
-
-  margin-right: 8%;
-  margin-bottom: 20px;
-  padding-left: 50px;
-
-  cursor: pointer;
-
-  img {
-    @include p_center-v;
-
-    width: 36px;
-    height: 36px;
-
-    transition: 0.3s;
-
-    border-radius: 50%;
-  }
-
-  b {
-    @include r-s16-h19;
-  }
-
-  span {
-    @include l-s11-h13;
-
-    display: block;
-  }
-
-  &:hover {
-    img {
-      box-shadow: $shadow-regular;
-    }
-  }
-
-  input {
-    &:checked + img {
-      box-shadow: $shadow-large;
-    }
-  }
-}
-
-.diameter__input {
-  margin-right: 8.7%;
-  margin-bottom: 20px;
-  padding-top: 7px;
-  padding-bottom: 6px;
-
-  cursor: pointer;
-
-  span {
-    @include r-s16-h19;
-
-    position: relative;
-
-    padding-left: 46px;
-
-    &::before {
-      @include p_center_v;
-
-      width: 36px;
-      height: 36px;
-
-      content: "";
-      transition: 0.3s;
-
-      border-radius: 50%;
-      background-color: $green-100;
-      background-image: url("@/assets/img/diameter.svg");
-      background-repeat: no-repeat;
-      background-position: center;
-    }
-  }
-
-  &:nth-child(3n) {
-    margin-right: 0;
-  }
-
-  &--small {
-    span::before {
-      background-size: 18px;
-    }
-  }
-
-  &--normal {
-    span::before {
-      background-size: 29px;
-    }
-  }
-
-  &--big {
-    span::before {
-      background-size: 100%;
-    }
-  }
-
-  &:hover {
-    span::before {
-      box-shadow: $shadow-regular;
-    }
-  }
-
-  input {
-    &:checked + span::before {
-      box-shadow: $shadow-large;
-    }
-  }
-}
-
-.filling {
-  @include r-s14-h16;
-
-  position: relative;
-
-  display: block;
-
-  padding-left: 36px;
-
-  img {
-    @include p_center-v;
-
-    display: block;
-
-    width: 32px;
-    height: 32px;
-
-    box-sizing: border-box;
-    padding: 4px;
-
-    border-radius: 50%;
-  }
-}
-
 .button {
   $bl: &;
 
@@ -776,184 +389,6 @@ const getImage = image => {
   }
 }
 
-.pizza {
-  position: relative;
-
-  display: block;
-
-  box-sizing: border-box;
-  width: 100%;
-
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100%;
-
-  &--foundation--big-creamy {
-    background-image: url("@/assets/img/foundation/big-creamy.svg");
-  }
-
-  &--foundation--big-tomato {
-    background-image: url("@/assets/img/foundation/big-tomato.svg");
-  }
-
-  &--foundation--small-creamy {
-    background-image: url("@/assets/img/foundation/small-creamy.svg");
-  }
-
-  &--foundation--small-tomato {
-    background-image: url("@/assets/img/foundation/small-tomato.svg");
-  }
-}
-
-.pizza__wrapper {
-  width: 100%;
-  padding-bottom: 100%;
-}
-
-.pizza__filling {
-  $bl: &;
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  display: block;
-
-  width: 100%;
-  height: 100%;
-
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100%;
-
-  &::before,
-  &::after {
-    display: none;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    width: 100%;
-    height: 100%;
-
-    content: "";
-
-    background-image: inherit;
-  }
-
-  &--second {
-    &::before {
-      display: block;
-
-      transform: rotate(45deg);
-    }
-  }
-
-  &--third {
-    &::before {
-      display: block;
-
-      transform: rotate(45deg);
-    }
-
-    &::after {
-      display: block;
-
-      transform: rotate(-45deg);
-    }
-  }
-
-  &--ananas,
-  &--ananas.pizza__filling--second::before,
-  &--ananas.pizza__filling--third::after {
-    background-image: url("@/assets/img/filling-big/ananas.svg");
-  }
-
-  &--bacon,
-  &--bacon.pizza__filling--second::before,
-  &--bacon.pizza__filling--third::after {
-    background-image: url("@/assets/img/filling-big/bacon.svg");
-  }
-
-  &--blue_cheese,
-  &--blue.pizza__filling--second::before,
-  &--blue.pizza__filling--third::after {
-    background-image: url("@/assets/img/filling-big/blue_cheese.svg");
-  }
-
-  &--cheddar,
-  &--cheddar.pizza__filling--second::before,
-  &--cheddar.pizza__filling--third::after {
-    background-image: url("@/assets/img/filling-big/cheddar.svg");
-  }
-
-  &--chile,
-  &--chile.pizza__filling--second::before,
-  &--chile.pizza__filling--third::after {
-    background-image: url("@/assets/img/filling-big/chile.svg");
-  }
-
-  &--ham,
-  &--ham.pizza__filling--second::before,
-  &--ham.pizza__filling--third::after {
-    background-image: url("@/assets/img/filling-big/ham.svg");
-  }
-
-  &--jalapeno,
-  &--jalapeno.pizza__filling--second::before,
-  &--jalapeno.pizza__filling--third::after {
-    background-image: url("@/assets/img/filling-big/jalapeno.svg");
-  }
-
-  &--mozzarella,
-  &--mozzarella.pizza__filling--second::before,
-  &--mozzarella.pizza__filling--third::after {
-    background-image: url("@/assets/img/filling-big/mozzarella.svg");
-  }
-
-  &--mushrooms,
-  &--mushrooms.pizza__filling--second::before,
-  &--mushrooms.pizza__filling--third::after {
-    background-image: url("@/assets/img/filling-big/mushrooms.svg");
-  }
-
-  &--olives,
-  &--olives.pizza__filling--second::before,
-  &--olives.pizza__filling--third::after {
-    background-image: url("@/assets/img/filling-big/olives.svg");
-  }
-
-  &--onion,
-  &--onion.pizza__filling--second::before,
-  &--onion.pizza__filling--third::after {
-    background-image: url("@/assets/img/filling-big/onion.svg");
-  }
-
-  &--parmesan,
-  &--parmesan.pizza__filling--second::before,
-  &--parmesan.pizza__filling--third::after {
-    background-image: url("@/assets/img/filling-big/parmesan.svg");
-  }
-
-  &--salami,
-  &---salami.pizza__filling--second::before,
-  &---salami.pizza__filling--third::after {
-    background-image: url("@/assets/img/filling-big/salami.svg");
-  }
-
-  &--salmon,
-  &--salmon.pizza__filling--second::before,
-  &--salmon.pizza__filling--third::after {
-    background-image: url("@/assets/img/filling-big/salmon.svg");
-  }
-
-  &--tomatoes,
-  &--tomatoes.pizza__filling--second::before,
-  &--tomatoes.pizza__filling--third::after {
-    background-image: url("@/assets/img/filling-big/tomatoes.svg");
-  }
-}
-
 .input {
   display: block;
 

From 833aa1d3799d5e5cf5fffc507ff361546aa590d2 Mon Sep 17 00:00:00 2001
From: Nick Gorbunov <intsurfer73@gmail.com>
Date: Sun, 6 Apr 2025 17:18:18 +0300
Subject: [PATCH 8/9] DZ2.15

---
 frontend/src/modules/constructor/SauceSelector.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/modules/constructor/SauceSelector.vue b/frontend/src/modules/constructor/SauceSelector.vue
index 4c6a3f95..c4d32f2d 100644
--- a/frontend/src/modules/constructor/SauceSelector.vue
+++ b/frontend/src/modules/constructor/SauceSelector.vue
@@ -41,11 +41,13 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
+  
     width: 100%;
     margin-bottom: 14px;
   
     p {
       @include r-s16-h19;
+  
       margin-top: 0;
       margin-right: 16px;
       margin-bottom: 10px;

From 1284554125bd257e28ff7ec4cec81349f9b3daa3 Mon Sep 17 00:00:00 2001
From: Nick Gorbunov <intsurfer73@gmail.com>
Date: Sun, 6 Apr 2025 17:20:37 +0300
Subject: [PATCH 9/9] DZ2.15

---
 frontend/src/common/constants/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/common/constants/index.js b/frontend/src/common/constants/index.js
index 7ff73a0c..fd81a0d6 100644
--- a/frontend/src/common/constants/index.js
+++ b/frontend/src/common/constants/index.js
@@ -1 +1,2 @@
 export const DATA_TRANSFER_PAYLOAD = "payload";
+export const MAX_INGREDIENT_COUNT = 3;
\ No newline at end of file