From 4638bf660f66b62dd26d1e4853665bb4731b6e2e Mon Sep 17 00:00:00 2001
From: apud <apu@kodix.ru>
Date: Wed, 5 Feb 2025 23:54:17 +0300
Subject: [PATCH 1/9] =?UTF-8?q?[u]=20=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB?=
 =?UTF-8?q?=20=D1=81=D1=82=D0=B0=D1=80=D0=BE=D0=B2=D1=8B=D0=B9=20=D0=BD?=
 =?UTF-8?q?=D0=B0=D0=B1=D0=BE=D1=80=20=D1=88=D0=B0=D0=B1=D0=BB=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B2.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.vue               |  20 +-
 frontend/src/layouts/AppHeader.vue |  15 ++
 frontend/src/layouts/AppLayout.vue |  12 ++
 frontend/src/layouts/index.js      |   2 +
 frontend/src/views/HomeView.vue    | 304 +++++++++++++++++++++++++++++
 5 files changed, 343 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/layouts/AppHeader.vue
 create mode 100644 frontend/src/layouts/AppLayout.vue
 create mode 100644 frontend/src/layouts/index.js
 create mode 100644 frontend/src/views/HomeView.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 2f88d12a..818e305a 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,14 +1,7 @@
 <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>
 
 <style lang="scss">
@@ -60,3 +53,10 @@ body {
 }
 
 </style>
+<script>
+import AppLayout from "./layouts/AppLayout";
+import HomeView from "./views/HomeView";
+export default {
+  components: {HomeView, AppLayout}
+}
+</script>
diff --git a/frontend/src/layouts/AppHeader.vue b/frontend/src/layouts/AppHeader.vue
new file mode 100644
index 00000000..a627910b
--- /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="V!U!E! 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>
diff --git a/frontend/src/layouts/AppLayout.vue b/frontend/src/layouts/AppLayout.vue
new file mode 100644
index 00000000..7a52888d
--- /dev/null
+++ b/frontend/src/layouts/AppLayout.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <app-header></app-header>
+    <slot />
+  </div>
+</template>
+<script>
+import AppHeader from "./AppHeader";
+export default {
+  components: {AppHeader}
+}
+</script>
diff --git a/frontend/src/layouts/index.js b/frontend/src/layouts/index.js
new file mode 100644
index 00000000..03a429a6
--- /dev/null
+++ b/frontend/src/layouts/index.js
@@ -0,0 +1,2 @@
+export { default as AppLayout } from "./AppLayout.vue";
+export { AppHeader } from "./AppHeader.vue";
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
new file mode 100644
index 00000000..0eb39e31
--- /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>

From 41ef75c9c3f7287c59123163f5066317d64b8f97 Mon Sep 17 00:00:00 2001
From: apud <apu@kodix.ru>
Date: Wed, 12 Feb 2025 16:32:07 +0300
Subject: [PATCH 2/9] =?UTF-8?q?[u]=20=D0=BF=D0=BE=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D0=B8=D0=BC=D0=BF=D0=BE=D1=80=D1=82=20=D1=84?=
 =?UTF-8?q?=D0=B0=D0=B9=D0=BB=D0=BE=D0=B2=20,=20=D0=B4=D0=BE=D0=B1=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=B8=D0=BB=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=D0=B7=D0=B0?=
 =?UTF-8?q?=D1=86=D0=B8=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.vue                     |   57 +-
 frontend/src/common/helpers/normalize.js |   33 +
 frontend/src/layouts/AppHeader.vue       |  136 +++
 frontend/src/layouts/AppLayout.vue       |   13 +-
 frontend/src/layouts/index.js            |    1 -
 frontend/src/views/HomeView.vue          | 1139 ++++++++++++++++++----
 frontend/src/views/index.js              |    1 +
 7 files changed, 1107 insertions(+), 273 deletions(-)
 create mode 100644 frontend/src/common/helpers/normalize.js
 create mode 100644 frontend/src/views/index.js

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 818e305a..a77a715f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -4,59 +4,14 @@
 </app-layout>
 </template>
 
-<style lang="scss">
-@import "@/assets/scss/app.scss";
-body {
-  justify-content: center;
-  align-items: center;
-}
-.main__wrapper {
-  padding-bottom: 30px;
-
-  background-color: $white;
-  box-shadow: $shadow-light;
-
-  h1 {
-    margin-bottom: 0;
-    padding: 0 95px;
-
-    text-align: center;
-
-    @include b-s36-h42;
-  }
-
-  p {
-    padding: 0 95px;
-
-    text-align: center;
-
-    font-size: 20px;
-    line-height: 30px;
-  }
-
-  b {
-    font-size: 1.2em;
-  }
-}
-
-.main__header {
-  margin-bottom: 30px;
-  padding: 20px 0;
-
-  background-color: $green-600;
-
-  img {
-    display: block;
-
-    margin: 0 auto;
-  }
-}
-
-</style>
 <script>
-import AppLayout from "./layouts/AppLayout";
-import HomeView from "./views/HomeView";
+import { AppLayout } from "@/layouts";
+import { HomeView } from "@/views";
 export default {
   components: {HomeView, AppLayout}
 }
 </script>
+
+<style lang="scss">
+@import "@/assets/scss/app.scss";
+</style>
diff --git a/frontend/src/common/helpers/normalize.js b/frontend/src/common/helpers/normalize.js
new file mode 100644
index 00000000..c52872b1
--- /dev/null
+++ b/frontend/src/common/helpers/normalize.js
@@ -0,0 +1,33 @@
+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],
+  };
+};
diff --git a/frontend/src/layouts/AppHeader.vue b/frontend/src/layouts/AppHeader.vue
index a627910b..c244a96f 100644
--- a/frontend/src/layouts/AppHeader.vue
+++ b/frontend/src/layouts/AppHeader.vue
@@ -13,3 +13,139 @@
     </div>
   </header>
 </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>
diff --git a/frontend/src/layouts/AppLayout.vue b/frontend/src/layouts/AppLayout.vue
index 7a52888d..3fdf59c7 100644
--- a/frontend/src/layouts/AppLayout.vue
+++ b/frontend/src/layouts/AppLayout.vue
@@ -1,12 +1,7 @@
 <template>
-  <div>
-    <app-header></app-header>
-    <slot />
-  </div>
+  <app-header></app-header>
+  <slot />
 </template>
-<script>
-import AppHeader from "./AppHeader";
-export default {
-  components: {AppHeader}
-}
+<script setup>
+import AppHeader from "./AppHeader.vue";
 </script>
diff --git a/frontend/src/layouts/index.js b/frontend/src/layouts/index.js
index 03a429a6..bb6d74fc 100644
--- a/frontend/src/layouts/index.js
+++ b/frontend/src/layouts/index.js
@@ -1,2 +1 @@
 export { default as AppLayout } from "./AppLayout.vue";
-export { AppHeader } from "./AppHeader.vue";
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 0eb39e31..cc09ff83 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -11,16 +11,22 @@
             <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
+                  v-for="doughType in doughItems"
+                  class="dough__input"
+                  :class="`dough__input--${doughType.value}`"
+                  :key="doughType.id"
+              >
+                <input
+                    type="radio"
+                    name="dought"
+                    :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>
 
@@ -33,19 +39,23 @@
             <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
+                  v-for="sizeType in sizeItems"
+                  class="diameter__input diameter__input--small"
+                  :class="`diameter__input--${sizeType.value}`"
+                  :key="sizeType.id"
+              >
+                <input
+                    type="radio"
+                    name="diameter"
+                    :value="sizeType.value"
+                    class="visually-hidden"
+                >
+                <span>{{sizeType.name}}</span>
               </label>
             </div>
+
+
           </div>
         </div>
 
@@ -58,13 +68,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,190 +82,20 @@
                 <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>
+                  <li
+                      v-for="ingredientType in ingredientItems"
+                      class="ingredients__item"
+                      :key="ingredientType.id"
+                  >
+                    <span
+                        class="filling"
+                        :class="`filling--${ingredientType.name}`">
+                      <img
+                          :src="getImage(ingredientType.image)"
+                          :alt="ingredientType.name"
+                      />
+                      {{ingredientType.name}}
+                    </span>
 
                     <div class="counter counter--orange ingredients__counter">
                       <button type="button" class="counter__button counter__button--minus" disabled>
@@ -302,3 +142,878 @@
     </form>
   </main>
 </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>
+
+<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>
diff --git a/frontend/src/views/index.js b/frontend/src/views/index.js
new file mode 100644
index 00000000..99bfdf65
--- /dev/null
+++ b/frontend/src/views/index.js
@@ -0,0 +1 @@
+export { default as HomeView } from "./HomeView.vue";

From f09145c48d0ae88ec45eb431c350bf1cda784b97 Mon Sep 17 00:00:00 2001
From: apud <apu@kodix.ru>
Date: Thu, 20 Feb 2025 16:30:02 +0300
Subject: [PATCH 3/9] =?UTF-8?q?[f]=20module1-task1=20=D0=B4=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=B8=D0=BB=20=D0=BF=D0=B0=D0=BF=D0=BA=D1=83=20?=
 =?UTF-8?q?=D1=81=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=D0=B0=D0=BC=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/common/components/AppDrag.vue | 30 ++++++++++++++++++++++
 frontend/src/common/components/AppDrop.vue | 26 +++++++++++++++++++
 frontend/src/common/constants.js           |  2 ++
 3 files changed, 58 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.js

diff --git a/frontend/src/common/components/AppDrag.vue b/frontend/src/common/components/AppDrag.vue
new file mode 100644
index 00000000..502123e2
--- /dev/null
+++ b/frontend/src/common/components/AppDrag.vue
@@ -0,0 +1,30 @@
+<template>
+  <div
+      :draggable="true"
+      @dragstart.self="onDrag"
+      @dragover.prevent
+      @dragend.prevent
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { DATA_TRANSFER_PAYLOAD, MOVE } from '../constants'
+
+const props = defineProps({
+  transferData: {
+    type: Object,
+    required: true
+  }
+})
+
+const onDrag = ({ dataTransfer }) => {
+  dataTransfer.effectAllowed = MOVE;
+  dataTransfer.dropEffect = MOVE;
+  dataTransfer.setData(
+      DATA_TRANSFER_PAYLOAD,
+      JSON.stringify(props.transferData)
+  )
+}
+</script>
diff --git a/frontend/src/common/components/AppDrop.vue b/frontend/src/common/components/AppDrop.vue
new file mode 100644
index 00000000..b2c42d54
--- /dev/null
+++ b/frontend/src/common/components/AppDrop.vue
@@ -0,0 +1,26 @@
+<template>
+  <div
+   @drop.stop="onDrop"
+   @dragover.prevent
+   @dragenter.prevent
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { DATA_TRANSFER_PAYLOAD } from '../constants'
+
+const emit = defineEmits(['drop'])
+
+const onDrop = ({ dataTransfer }) => {
+  if (!dataTransfer) return;
+
+  const payload = dataTransfer.getData(DATA_TRANSFER_PAYLOAD);
+
+  if (payload) {
+    const transferData = JSON.parse(dataTransfer.getData(DATA_TRANSFER_PAYLOAD));
+    emit('drop', transferData);
+  }
+}
+</script>
diff --git a/frontend/src/common/constants.js b/frontend/src/common/constants.js
new file mode 100644
index 00000000..0cd8fcf8
--- /dev/null
+++ b/frontend/src/common/constants.js
@@ -0,0 +1,2 @@
+export const MOVE = 'move';
+export const DATA_TRANSFER_PAYLOAD = 'payload';

From c46873f5e938fd306f17b7f1dfddc337a786d126 Mon Sep 17 00:00:00 2001
From: apud <apu@kodix.ru>
Date: Mon, 17 Mar 2025 21:28:34 +0300
Subject: [PATCH 4/9] =?UTF-8?q?[f]=20module1-task1=20=D0=B4=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=B8=D0=BB=20=D0=B2=D1=81=D0=BF=D0=BE=D0=BC=D0=BE?=
 =?UTF-8?q?=D0=B3=D0=B0=D1=82=D0=B5=D0=BB=D1=8C=D0=BD=D1=8B=D0=B5=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/components/DoughSelector.vue   | 103 ++++++++++++
 .../common/components/IngredientsSection.vue  |  27 ++++
 .../common/components/IngredientsSelector.vue | 137 ++++++++++++++++
 .../src/common/components/PizzaDisplay.vue    | 102 ++++++++++++
 .../src/common/components/SauceSelector.vue   |  96 ++++++++++++
 .../src/common/components/SizeSelector.vue    |  98 ++++++++++++
 frontend/src/views/HomeView.vue               | 146 ++----------------
 7 files changed, 578 insertions(+), 131 deletions(-)
 create mode 100644 frontend/src/common/components/DoughSelector.vue
 create mode 100644 frontend/src/common/components/IngredientsSection.vue
 create mode 100644 frontend/src/common/components/IngredientsSelector.vue
 create mode 100644 frontend/src/common/components/PizzaDisplay.vue
 create mode 100644 frontend/src/common/components/SauceSelector.vue
 create mode 100644 frontend/src/common/components/SizeSelector.vue

diff --git a/frontend/src/common/components/DoughSelector.vue b/frontend/src/common/components/DoughSelector.vue
new file mode 100644
index 00000000..9281c925
--- /dev/null
+++ b/frontend/src/common/components/DoughSelector.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="content__dough">
+    <div class="sheet">
+      <h2 class="title title--small sheet__title">Выберите тесто</h2>
+      <div class="sheet__content dough">
+        <label
+            v-for="doughType in doughItems"
+            class="dough__input"
+            :class="`dough__input--${doughType.value}`"
+            :key="doughType.id"
+        >
+          <input
+              type="radio"
+              name="dought"
+              :value="doughType.value"
+              class="visually-hidden"
+              v-model="selectedDough"
+          />
+          <img :src="getImage(doughType.image)" :alt="doughType.name" />
+          <b>{{ doughType.name }}</b>
+          <span>{{ doughType.description }}</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  doughItems: {
+    type: Array,
+    required: true,
+  }
+})
+
+const selectedDough = ref(props.doughItems[0].value);
+
+const getImage = (image) => {
+  return new URL(`../../assets/img/${image}`, import.meta.url).href;
+};
+
+</script>
+
+<style scoped>
+.sheet {
+  padding-top: 15px;
+  border-radius: 8px;
+  background-color: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.sheet__title {
+  padding: 0 18px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.sheet__content {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 18px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.dough__input {
+  position: relative;
+  margin-right: 8%;
+  margin-bottom: 20px;
+  padding-left: 50px;
+  cursor: pointer;
+}
+
+.dough__input img {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 36px;
+  height: 36px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  transition: box-shadow 0.3s;
+}
+
+.dough__input b {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.dough__input span {
+  font-size: 11px;
+  display: block;
+}
+
+.dough__input:hover img {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.dough__input input:checked + img {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+</style>
diff --git a/frontend/src/common/components/IngredientsSection.vue b/frontend/src/common/components/IngredientsSection.vue
new file mode 100644
index 00000000..c45eb525
--- /dev/null
+++ b/frontend/src/common/components/IngredientsSection.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="content__ingredients">
+    <div class="sheet">
+      <h2 class="title title--small sheet__title">Выберите ингредиенты</h2>
+      <div class="sheet__content ingredients">
+        <SauceSelector :sauceItems="sauceItems" />
+        <IngredientsSelector :ingredientItems="ingredientItems" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import SauceSelector from "@/common/components/SauceSelector.vue";
+import IngredientsSelector from "@/common/components/IngredientsSelector.vue";
+
+const props = defineProps({
+  sauceItems: {
+    type: Array,
+    required: true,
+  },
+  ingredientItems: {
+    type: Array,
+    required: true,
+  },
+});
+</script>
diff --git a/frontend/src/common/components/IngredientsSelector.vue b/frontend/src/common/components/IngredientsSelector.vue
new file mode 100644
index 00000000..a64f5b47
--- /dev/null
+++ b/frontend/src/common/components/IngredientsSelector.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="ingredients__filling">
+    <p>Начинка:</p>
+    <ul class="ingredients__list">
+      <li
+          v-for="ingredientType in ingredientItems"
+          class="ingredients__item"
+          :key="ingredientType.id"
+      >
+            <span class="filling" :class="`filling--${ingredientType.name}`">
+              <img :src="getImage(ingredientType.image)" :alt="ingredientType.name"/>
+              {{ ingredientType.name }}
+            </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>
+</template>
+
+<script setup>
+import {defineProps} from "vue";
+
+const props = defineProps({
+  ingredientItems: {
+    type: Array,
+    required: true,
+  },
+});
+
+const getImage = (image) => {
+  return new URL(`../../assets/img/${image}`, import.meta.url).href;
+};
+</script>
+
+<style scoped>
+.sheet {
+  padding-top: 15px;
+  border-radius: 8px;
+  background-color: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.sheet__title {
+  padding: 0 18px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.sheet__content {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 18px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.ingredients__filling {
+  width: 100%;
+}
+
+.ingredients__filling p {
+  font-size: 16px;
+  margin-bottom: 16px;
+}
+
+.ingredients__list {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ingredients__item {
+  width: 100px;
+  margin-right: 17px;
+  margin-bottom: 35px;
+}
+
+.filling {
+  display: block;
+  padding-left: 36px;
+  position: relative;
+  font-size: 14px;
+}
+
+.filling img {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 32px;
+  height: 32px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+}
+
+.counter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 54px;
+  margin-top: 10px;
+  margin-left: 36px;
+}
+
+.counter__button {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.counter__button--minus {
+  background-color: #f0e6ff;
+}
+
+.counter__button--plus {
+  background-color: #6c5ce7;
+}
+
+.counter__input {
+  width: 22px;
+  text-align: center;
+  border: none;
+  outline: none;
+  background-color: transparent;
+}
+</style>
diff --git a/frontend/src/common/components/PizzaDisplay.vue b/frontend/src/common/components/PizzaDisplay.vue
new file mode 100644
index 00000000..0f9259f0
--- /dev/null
+++ b/frontend/src/common/components/PizzaDisplay.vue
@@ -0,0 +1,102 @@
+<template>
+  <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>
+</template>
+
+<style scoped>
+.content__pizza {
+  width: 373px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.content__constructor {
+  width: 315px;
+  margin: 25px auto;
+}
+
+.pizza {
+  position: relative;
+  width: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+}
+
+.pizza--foundation--big-tomato {
+  background-image: url("@/assets/img/foundation/big-tomato.svg");
+}
+
+.pizza__wrapper {
+  width: 100%;
+  padding-bottom: 100%;
+}
+
+.pizza__filling {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+}
+
+.pizza__filling--ananas {
+  background-image: url("@/assets/img/filling-big/ananas.svg");
+}
+
+.pizza__filling--bacon {
+  background-image: url("@/assets/img/filling-big/bacon.svg");
+}
+
+.pizza__filling--cheddar {
+  background-image: url("@/assets/img/filling-big/cheddar.svg");
+}
+
+.content__result {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 25px;
+}
+
+.content__result p {
+  font-size: 24px;
+  margin: 0;
+}
+
+.content__result button {
+  margin-left: 12px;
+  padding: 16px 45px;
+  background-color: #6c5ce7;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.content__result button:disabled {
+  background-color: #a5b1c2;
+  cursor: not-allowed;
+}
+</style>
diff --git a/frontend/src/common/components/SauceSelector.vue b/frontend/src/common/components/SauceSelector.vue
new file mode 100644
index 00000000..48e42128
--- /dev/null
+++ b/frontend/src/common/components/SauceSelector.vue
@@ -0,0 +1,96 @@
+<template>
+    <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" v-model="selectedSauce" />
+          <span>{{ sauceType.name }}</span>
+        </label>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  sauceItems: {
+    type: Array,
+    required: true,
+  },
+});
+
+const selectedSauce = ref(props.sauceItems[0].value);
+</script>
+
+<style scoped>
+.sheet {
+  padding-top: 15px;
+  border-radius: 8px;
+  background-color: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.sheet__title {
+  padding: 0 18px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.sheet__content {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 18px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.ingredients__sauce {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-bottom: 14px;
+}
+
+.ingredients__sauce p {
+  font-size: 16px;
+  margin-right: 16px;
+  margin-bottom: 10px;
+}
+
+.ingredients__input {
+  margin-right: 24px;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+
+.ingredients__input span {
+  font-size: 16px;
+  padding-left: 28px;
+  position: relative;
+}
+
+.ingredients__input span::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 20px;
+  height: 20px;
+  transform: translateY(-50%);
+  border: 1px solid #7e72f2;
+  border-radius: 50%;
+  background-color: white;
+  transition: border-color 0.3s;
+}
+
+.ingredients__input:hover span::before {
+  border-color: #5c4ac7;
+}
+
+.ingredients__input input:checked + span::before {
+  border: 6px solid #6c5ce7;
+}
+</style>
diff --git a/frontend/src/common/components/SizeSelector.vue b/frontend/src/common/components/SizeSelector.vue
new file mode 100644
index 00000000..26cebd1e
--- /dev/null
+++ b/frontend/src/common/components/SizeSelector.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="content__diameter">
+    <div class="sheet">
+      <h2 class="title title--small sheet__title">Выберите размер</h2>
+      <div class="sheet__content diameter">
+        <label
+            v-for="sizeType in sizeItems"
+            class="diameter__input diameter__input--small"
+            :class="`diameter__input--${sizeType.value}`"
+            :key="sizeType.id"
+        >
+          <input
+              type="radio"
+              name="diameter"
+              :value="sizeType.value"
+              class="visually-hidden"
+              v-model="selectedSize"
+          />
+          <span>{{ sizeType.name }}</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  sizeItems: {
+    type: Array,
+    required: true,
+  },
+});
+
+const selectedSize = ref(props.sizeItems[0].value);
+</script>
+
+<style scoped>
+.sheet {
+  padding-top: 15px;
+  border-radius: 8px;
+  background-color: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.sheet__title {
+  padding: 0 18px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.sheet__content {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 18px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.diameter__input {
+  margin-right: 8.7%;
+  margin-bottom: 20px;
+  padding-top: 7px;
+  padding-bottom: 6px;
+  cursor: pointer;
+}
+
+.diameter__input span {
+  position: relative;
+  padding-left: 46px;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.diameter__input span::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 36px;
+  height: 36px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  background-color: #e5f5e0;
+  background-image: url("@/assets/img/diameter.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: box-shadow 0.3s;
+}
+
+.diameter__input:hover span::before {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.diameter__input input:checked + span::before {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+</style>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index cc09ff83..0beab8d0 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -5,137 +5,16 @@
       <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
-                  v-for="doughType in doughItems"
-                  class="dough__input"
-                  :class="`dough__input--${doughType.value}`"
-                  :key="doughType.id"
-              >
-                <input
-                    type="radio"
-                    name="dought"
-                    :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>
-
-        </div>
-
-        <div class="content__diameter">
-          <div class="sheet">
-            <h2 class="title title--small sheet__title">Выберите размер</h2>
-
-            <div class="sheet__content diameter">
-              <label
-                  v-for="sizeType in sizeItems"
-                  class="diameter__input diameter__input--small"
-                  :class="`diameter__input--${sizeType.value}`"
-                  :key="sizeType.id"
-              >
-                <input
-                    type="radio"
-                    name="diameter"
-                    :value="sizeType.value"
-                    class="visually-hidden"
-                >
-                <span>{{sizeType.name}}</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"
-                    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
-                      v-for="ingredientType in ingredientItems"
-                      class="ingredients__item"
-                      :key="ingredientType.id"
-                  >
-                    <span
-                        class="filling"
-                        :class="`filling--${ingredientType.name}`">
-                      <img
-                          :src="getImage(ingredientType.image)"
-                          :alt="ingredientType.name"
-                      />
-                      {{ingredientType.name}}
-                    </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>
+        <!-- Компонент выбора теста -->
+        <DoughSelector :doughItems="doughItems" />
+
+        <!-- Компонент выбора размера -->
+        <SizeSelector :sizeItems="sizeItems" />
+
+        <IngredientsSection :sauceItems="sauceItems" :ingredientItems="ingredientItems" />
+
+        <!-- Компонент отображения пиццы -->
+        <PizzaDisplay />
 
       </div>
 
@@ -152,6 +31,11 @@ import {
   normalizeSize,
 } from "@/common/helpers/normalize";
 
+import DoughSelector from "@/common/components/DoughSelector.vue";
+import SizeSelector from "@/common/components/SizeSelector.vue";
+import IngredientsSection from "@/common/components/IngredientsSection.vue";
+import PizzaDisplay from "@/common/components/PizzaDisplay.vue";
+
 import doughJSON from "@/mocks/dough.json";
 import ingredientsJSON from "@/mocks/ingredients.json";
 import saucesJSON from "@/mocks/sauces.json";

From df0df7263693b8e65ca25c4b5f987421846023db Mon Sep 17 00:00:00 2001
From: apud <apu@kodix.ru>
Date: Wed, 26 Mar 2025 16:54:11 +0300
Subject: [PATCH 5/9] =?UTF-8?q?=D0=A0=D0=B5=D1=84=D0=B0=D0=BA=D1=82=D0=BE?=
 =?UTF-8?q?=D1=80=D0=B8=D1=80=D0=BD=D0=B3=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/components/DoughSelector.vue   | 11 ++-
 .../common/components/IngredientsSection.vue  | 11 ++-
 .../common/components/IngredientsSelector.vue | 98 ++++++++++++++-----
 .../src/common/components/PizzaDisplay.vue    | 40 ++++++--
 .../src/common/components/SauceSelector.vue   | 16 ++-
 .../src/common/components/SizeSelector.vue    | 10 +-
 frontend/src/views/HomeView.vue               | 59 +++++++++--
 7 files changed, 189 insertions(+), 56 deletions(-)

diff --git a/frontend/src/common/components/DoughSelector.vue b/frontend/src/common/components/DoughSelector.vue
index 9281c925..ada5cf95 100644
--- a/frontend/src/common/components/DoughSelector.vue
+++ b/frontend/src/common/components/DoughSelector.vue
@@ -14,11 +14,13 @@
               name="dought"
               :value="doughType.value"
               class="visually-hidden"
-              v-model="selectedDough"
+              :checked="doughType.value === modelValue"
+              @change="$emit('update:modelValue', doughType.value)"
           />
           <img :src="getImage(doughType.image)" :alt="doughType.name" />
           <b>{{ doughType.name }}</b>
           <span>{{ doughType.description }}</span>
+          <div>{{ modelValue }}</div>
         </label>
       </div>
     </div>
@@ -26,16 +28,19 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
 
 const props = defineProps({
   doughItems: {
     type: Array,
     required: true,
+  },
+  modelValue: {
+    type: Object,
+    required: true
   }
 })
 
-const selectedDough = ref(props.doughItems[0].value);
+defineEmits(['update:modelValue']);
 
 const getImage = (image) => {
   return new URL(`../../assets/img/${image}`, import.meta.url).href;
diff --git a/frontend/src/common/components/IngredientsSection.vue b/frontend/src/common/components/IngredientsSection.vue
index c45eb525..f7f69a0a 100644
--- a/frontend/src/common/components/IngredientsSection.vue
+++ b/frontend/src/common/components/IngredientsSection.vue
@@ -3,7 +3,11 @@
     <div class="sheet">
       <h2 class="title title--small sheet__title">Выберите ингредиенты</h2>
       <div class="sheet__content ingredients">
-        <SauceSelector :sauceItems="sauceItems" />
+        <SauceSelector 
+          :sauceItems="sauceItems"
+          :modelValue="selectedSauce"
+          @update:modelValue="$emit('update:selected-sauce', $event)"
+        />
         <IngredientsSelector :ingredientItems="ingredientItems" />
       </div>
     </div>
@@ -13,6 +17,7 @@
 <script setup>
 import SauceSelector from "@/common/components/SauceSelector.vue";
 import IngredientsSelector from "@/common/components/IngredientsSelector.vue";
+defineEmits(['update:selected-sauce']);
 
 const props = defineProps({
   sauceItems: {
@@ -23,5 +28,9 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  selectedSauce: {
+    type: Object,
+    required: true,
+  }
 });
 </script>
diff --git a/frontend/src/common/components/IngredientsSelector.vue b/frontend/src/common/components/IngredientsSelector.vue
index a64f5b47..f7dd99e4 100644
--- a/frontend/src/common/components/IngredientsSelector.vue
+++ b/frontend/src/common/components/IngredientsSelector.vue
@@ -3,20 +3,38 @@
     <p>Начинка:</p>
     <ul class="ingredients__list">
       <li
-          v-for="ingredientType in ingredientItems"
+          v-for="ingredient in ingredientItems"
           class="ingredients__item"
-          :key="ingredientType.id"
+          :key="ingredient.id"
       >
-            <span class="filling" :class="`filling--${ingredientType.name}`">
-              <img :src="getImage(ingredientType.image)" :alt="ingredientType.name"/>
-              {{ ingredientType.name }}
+        <AppDrag :transferData="ingredient" :draggable="true">
+           <span class="filling" :class="`filling--${ingredient.name}`" style="display: inline-block;">
+              <img :src="getImage(ingredient.image)" :alt="ingredient.name" draggable="false">
+              {{ ingredient.name }}
             </span>
+        </AppDrag>
         <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="getCount(ingredient.id) <= 0"
+            @click="decrement(ingredient.id)"
+          >
             <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="getCount(ingredient.id)"
+            @input="handleInput($event, ingredient.id)"
+          />
+          <button 
+            type="button" 
+            class="counter__button counter__button--plus"
+            :disabled="getCount(ingredient.id) >= 3"
+            @click="increment(ingredient.id)"
+          >
             <span class="visually-hidden">Больше</span>
           </button>
         </div>
@@ -27,39 +45,65 @@
 
 <script setup>
 import {defineProps} from "vue";
+import AppDrag from "@/common/components/AppDrag.vue";
 
 const props = defineProps({
   ingredientItems: {
     type: Array,
     required: true,
   },
+  modelValue: {
+    type: Object,
+    required: true,
+  }
 });
 
+const emit = defineEmits(['update:modelValue']);
+
+const getCount = (ingredientId) => {
+  return props.modelValue[ingredientId]?.count || 0;
+};
+
+const canDrag = (ingredient) => {
+  return getCount(ingredient.id) < 3;
+};
+
+const increment = (ingredientId) => {
+  const currentCount = getCount(ingredientId);
+  if (currentCount < 3) {
+    updateCount(ingredientId, currentCount + 1);
+  }
+};
+
+const decrement = (ingredientId) => {
+  const currentCount = getCount(ingredientId);
+  if (currentCount > 0) {
+    updateCount(ingredientId, currentCount - 1);
+  }
+};
+
+const handleInput = (event, ingredientId) => {
+  const value = parseInt(event.target.value);
+  if (!isNaN(value) && value >= 0 && value <= 3) {
+    updateCount(ingredientId, value);
+  }
+};
+
+const updateCount = (ingredientId, newCount) => {
+  const updatedValue = { ...props.modelValue };
+  updatedValue[ingredientId] = {
+    ...updatedValue[ingredientId],
+    count: newCount
+  };
+  emit('update:modelValue', updatedValue);
+};
+
 const getImage = (image) => {
   return new URL(`../../assets/img/${image}`, import.meta.url).href;
 };
 </script>
 
 <style scoped>
-.sheet {
-  padding-top: 15px;
-  border-radius: 8px;
-  background-color: white;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.sheet__title {
-  padding: 0 18px;
-  font-size: 18px;
-  font-weight: bold;
-}
-
-.sheet__content {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 18px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-}
 
 .ingredients__filling {
   width: 100%;
diff --git a/frontend/src/common/components/PizzaDisplay.vue b/frontend/src/common/components/PizzaDisplay.vue
index 0f9259f0..3e24e237 100644
--- a/frontend/src/common/components/PizzaDisplay.vue
+++ b/frontend/src/common/components/PizzaDisplay.vue
@@ -5,21 +5,45 @@
       <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>
+      <AppDrop @drop="onDropIngredient">
+        <div class="pizza pizza--foundation--big-tomato">
+          <div class="pizza__wrapper">
+            <!-- Отображаем выбранные ингредиенты -->
+            <div
+              v-for="(ingredient, index) in selectedIngredients"
+              :key="index"
+              class="pizza__filling"
+              :class="`pizza__filling--${ingredient.name}`"
+            >
+            </div>
+          </div>
         </div>
-      </div>
+      </AppDrop>
     </div>
     <div class="content__result">
-      <p>Итого: 0 ₽</p>
-      <button type="button" class="button" disabled>Готовьте!</button>
+      <p>Итого: {{ totalPrice }} ₽</p>
+      <button type="button" class="button" :disabled="!selectedIngredients.length">Готовьте!</button>
     </div>
   </div>
 </template>
 
+<script setup>
+import { ref, computed } from "vue";
+import AppDrop from "@/common/components/AppDrop.vue";
+
+const selectedIngredients = ref([]);
+
+const onDropIngredient = (ingredient) => {
+  console.log('ingredient', ingredient);
+  selectedIngredients.value.push(ingredient);
+};
+
+const totalPrice = computed(() => {
+  return selectedIngredients.value.reduce((sum, ingredient) => sum + ingredient.price, 0);
+});
+
+</script>
+
 <style scoped>
 .content__pizza {
   width: 373px;
diff --git a/frontend/src/common/components/SauceSelector.vue b/frontend/src/common/components/SauceSelector.vue
index 48e42128..aec8755c 100644
--- a/frontend/src/common/components/SauceSelector.vue
+++ b/frontend/src/common/components/SauceSelector.vue
@@ -6,23 +6,31 @@
             v-for="sauceType in sauceItems"
             :key="sauceType.id"
         >
-          <input type="radio" name="sauce" :value="sauceType.value" v-model="selectedSauce" />
+          <input 
+            type="radio" 
+            name="sauce" 
+            :value="sauceType.value" 
+            :checked="sauceType.value === modelValue"
+            @change="$emit('update:modelValue', sauceType.value)"
+          />
           <span>{{ sauceType.name }}</span>
         </label>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+defineEmits(['update:modelValue']);
 
 const props = defineProps({
   sauceItems: {
     type: Array,
     required: true,
   },
+  modelValue: {
+    type: Object,
+    required: true
+  }
 });
-
-const selectedSauce = ref(props.sauceItems[0].value);
 </script>
 
 <style scoped>
diff --git a/frontend/src/common/components/SizeSelector.vue b/frontend/src/common/components/SizeSelector.vue
index 26cebd1e..f961c1b3 100644
--- a/frontend/src/common/components/SizeSelector.vue
+++ b/frontend/src/common/components/SizeSelector.vue
@@ -14,7 +14,8 @@
               name="diameter"
               :value="sizeType.value"
               class="visually-hidden"
-              v-model="selectedSize"
+              :checked="sizeType.value === modelValue"
+              @change="$emit('update:modelValue', sizeType.value)"
           />
           <span>{{ sizeType.name }}</span>
         </label>
@@ -24,16 +25,19 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
 
 const props = defineProps({
   sizeItems: {
     type: Array,
     required: true,
   },
+  modelValue: {
+    type: Object,
+    required: true
+  }
 });
 
-const selectedSize = ref(props.sizeItems[0].value);
+defineEmits(['update:modelValue']);
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 0beab8d0..a4324d25 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -6,16 +6,39 @@
         <h1 class="title title--big">Конструктор пиццы</h1>
 
         <!-- Компонент выбора теста -->
-        <DoughSelector :doughItems="doughItems" />
+        <DoughSelector 
+          :doughItems="doughItems"
+          v-model:modelValue="selectedDough"
+        />
 
         <!-- Компонент выбора размера -->
-        <SizeSelector :sizeItems="sizeItems" />
-
-        <IngredientsSection :sauceItems="sauceItems" :ingredientItems="ingredientItems" />
+        <SizeSelector 
+          :sizeItems="sizeItems"
+          v-model:modelValue="selectedSize"
+        />
+
+    
+        <div class="content__ingredients">
+          <div class="sheet">
+            <h2 class="title title--small sheet__title">Выберите ингредиенты</h2>
+            <div class="sheet__content ingredients">
+              <SauceSelector 
+                :sauceItems="sauceItems"
+                v-model:modelValue="selectedSauce"
+              />
+              <IngredientsSelector 
+                :ingredientItems="ingredientItems"
+                v-model:modelValue="ingredientsState"
+              />
+            </div>
+          </div>
+        </div>
 
         <!-- Компонент отображения пиццы -->
         <PizzaDisplay />
-
+        <div>DoughSelector: {{ selectedDough }}</div>
+        <div>SizeSelector: {{ selectedSize }}</div>
+        <div>SauceSelector: {{ selectedSauce }}</div>
       </div>
 
     </form>
@@ -24,6 +47,7 @@
 
 
 <script setup>
+import { ref, onMounted } from 'vue';
 import {
   normalizeDough,
   normalizeIngredients,
@@ -32,8 +56,9 @@ import {
 } from "@/common/helpers/normalize";
 
 import DoughSelector from "@/common/components/DoughSelector.vue";
+import SauceSelector  from "@/common/components/SauceSelector.vue";
+import IngredientsSelector  from "@/common/components/IngredientsSelector.vue";
 import SizeSelector from "@/common/components/SizeSelector.vue";
-import IngredientsSection from "@/common/components/IngredientsSection.vue";
 import PizzaDisplay from "@/common/components/PizzaDisplay.vue";
 
 import doughJSON from "@/mocks/dough.json";
@@ -46,10 +71,24 @@ 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 selectedDough = ref(null);
+const selectedSize = ref(null);
+const selectedSauce = ref(null);
+const ingredientsState = ref({});
+
+onMounted(() => {
+  selectedDough.value = doughItems[0].value;
+  selectedSize.value = sizeItems[0].value;
+  selectedSauce.value = sauceItems[0].value;
+  // Инициализируем состояние для всех ингредиентов
+  ingredientItems.forEach(ingredient => {
+    ingredientsState.value[ingredient.id] = {
+      ingredient,
+      count: 0
+    };
+  });
+});
+
 
 </script>
 

From 36e9d8529907b43db6abc34d86fb7bc3a6a635aa Mon Sep 17 00:00:00 2001
From: apud <apu@kodix.ru>
Date: Wed, 26 Mar 2025 19:02:10 +0300
Subject: [PATCH 6/9] =?UTF-8?q?=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BA=D0=B0=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B0=20PizzaDisplay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/components/DoughSelector.vue   |  1 -
 .../common/components/IngredientsSection.vue  | 36 --------------
 .../src/common/components/PizzaDisplay.vue    | 49 +++++++++++++------
 frontend/src/common/data/doughSizes.js        |  4 +-
 frontend/src/views/HomeView.vue               | 20 ++++++--
 5 files changed, 50 insertions(+), 60 deletions(-)
 delete mode 100644 frontend/src/common/components/IngredientsSection.vue

diff --git a/frontend/src/common/components/DoughSelector.vue b/frontend/src/common/components/DoughSelector.vue
index ada5cf95..556b102e 100644
--- a/frontend/src/common/components/DoughSelector.vue
+++ b/frontend/src/common/components/DoughSelector.vue
@@ -20,7 +20,6 @@
           <img :src="getImage(doughType.image)" :alt="doughType.name" />
           <b>{{ doughType.name }}</b>
           <span>{{ doughType.description }}</span>
-          <div>{{ modelValue }}</div>
         </label>
       </div>
     </div>
diff --git a/frontend/src/common/components/IngredientsSection.vue b/frontend/src/common/components/IngredientsSection.vue
deleted file mode 100644
index f7f69a0a..00000000
--- a/frontend/src/common/components/IngredientsSection.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="content__ingredients">
-    <div class="sheet">
-      <h2 class="title title--small sheet__title">Выберите ингредиенты</h2>
-      <div class="sheet__content ingredients">
-        <SauceSelector 
-          :sauceItems="sauceItems"
-          :modelValue="selectedSauce"
-          @update:modelValue="$emit('update:selected-sauce', $event)"
-        />
-        <IngredientsSelector :ingredientItems="ingredientItems" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import SauceSelector from "@/common/components/SauceSelector.vue";
-import IngredientsSelector from "@/common/components/IngredientsSelector.vue";
-defineEmits(['update:selected-sauce']);
-
-const props = defineProps({
-  sauceItems: {
-    type: Array,
-    required: true,
-  },
-  ingredientItems: {
-    type: Array,
-    required: true,
-  },
-  selectedSauce: {
-    type: Object,
-    required: true,
-  }
-});
-</script>
diff --git a/frontend/src/common/components/PizzaDisplay.vue b/frontend/src/common/components/PizzaDisplay.vue
index 3e24e237..65f97376 100644
--- a/frontend/src/common/components/PizzaDisplay.vue
+++ b/frontend/src/common/components/PizzaDisplay.vue
@@ -6,14 +6,21 @@
     </label>
     <div class="content__constructor">
       <AppDrop @drop="onDropIngredient">
-        <div class="pizza pizza--foundation--big-tomato">
+        <div 
+          class="pizza" 
+          :class="`pizza--foundation--${dough}-${sauce}`"
+        >
           <div class="pizza__wrapper">
             <!-- Отображаем выбранные ингредиенты -->
             <div
-              v-for="(ingredient, index) in selectedIngredients"
+              v-for="(ingredient, index) in ingredients"
               :key="index"
               class="pizza__filling"
-              :class="`pizza__filling--${ingredient.name}`"
+              :class="[
+                `pizza__filling--${ingredient.value}`,
+                ingredient.quantity === TWO_INGREDIENTS && 'pizza__filling--second',
+                ingredient.quantity === THREE_INGREDIENTS && 'pizza__filling--third',
+              ]"
             >
             </div>
           </div>
@@ -21,27 +28,37 @@
       </AppDrop>
     </div>
     <div class="content__result">
-      <p>Итого: {{ totalPrice }} ₽</p>
-      <button type="button" class="button" :disabled="!selectedIngredients.length">Готовьте!</button>
+      <p>Итого: 0 ₽</p>
+      <button type="button" class="button" disabled>Готовьте!</button>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { watch } from 'vue';
 import AppDrop from "@/common/components/AppDrop.vue";
-
-const selectedIngredients = ref([]);
-
-const onDropIngredient = (ingredient) => {
-  console.log('ingredient', ingredient);
-  selectedIngredients.value.push(ingredient);
-};
-
-const totalPrice = computed(() => {
-  return selectedIngredients.value.reduce((sum, ingredient) => sum + ingredient.price, 0);
+const props = defineProps({
+  dough: {
+    type: String,
+    required: true,
+  },
+  sauce: {
+    type: String,
+    required: true,
+  },
+  ingredients: {
+    type: Array,
+    required: true,
+  },
 });
 
+const TWO_INGREDIENTS = 2;
+const THREE_INGREDIENTS = 3;
+
+// Наблюдаем за изменениями ingredients
+watch(() => props.ingredients, (newIngredients) => {
+  console.log('Ингредиенты изменились:', newIngredients);
+}, { deep: true });
 </script>
 
 <style scoped>
diff --git a/frontend/src/common/data/doughSizes.js b/frontend/src/common/data/doughSizes.js
index 2495107b..b34269ff 100644
--- a/frontend/src/common/data/doughSizes.js
+++ b/frontend/src/common/data/doughSizes.js
@@ -1,4 +1,4 @@
 export default {
-  1: "light",
-  2: "large",
+  1: "small",
+  2: "big",
 };
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index a4324d25..4b9b4eef 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -35,10 +35,11 @@
         </div>
 
         <!-- Компонент отображения пиццы -->
-        <PizzaDisplay />
-        <div>DoughSelector: {{ selectedDough }}</div>
-        <div>SizeSelector: {{ selectedSize }}</div>
-        <div>SauceSelector: {{ selectedSauce }}</div>
+        <PizzaDisplay
+          :dough="selectedDough"
+          :sauce="selectedSauce"
+          :ingredients="selectedIngredients"
+         />
       </div>
 
     </form>
@@ -47,7 +48,7 @@
 
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import {
   normalizeDough,
   normalizeIngredients,
@@ -89,6 +90,15 @@ onMounted(() => {
   });
 });
 
+const selectedIngredients = computed(() => {
+  return Object.values(ingredientsState.value)
+    .filter(item => item.count > 0)
+    .map(item => ({
+      ...item.ingredient,
+      quantity: item.count
+    }));
+});
+
 
 </script>
 

From 5f5c61d01c668c283a2eadf2b8d79033f8e453fe Mon Sep 17 00:00:00 2001
From: apud <apu@kodix.ru>
Date: Wed, 26 Mar 2025 19:48:45 +0300
Subject: [PATCH 7/9] =?UTF-8?q?=D0=B4=D0=BE=D1=80=D0=B0=D0=B1=D0=BE=D1=82?=
 =?UTF-8?q?=D0=B0=D0=BB=20dnd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/common/components/AppDrag.vue     |  6 +++++-
 frontend/src/common/components/AppDrop.vue     | 15 +++++++++------
 .../common/components/IngredientsSelector.vue  | 11 ++++++++++-
 .../src/common/components/PizzaDisplay.vue     | 10 +++++-----
 frontend/src/views/HomeView.vue                | 18 ++++++++++++++++++
 5 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/frontend/src/common/components/AppDrag.vue b/frontend/src/common/components/AppDrag.vue
index 502123e2..feaaee0d 100644
--- a/frontend/src/common/components/AppDrag.vue
+++ b/frontend/src/common/components/AppDrag.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-      :draggable="true"
+      :draggable="draggable"
       @dragstart.self="onDrag"
       @dragover.prevent
       @dragend.prevent
@@ -13,6 +13,10 @@
 import { DATA_TRANSFER_PAYLOAD, MOVE } from '../constants'
 
 const props = defineProps({
+  draggable: {
+    type: Boolean,
+    default: false,
+  },
   transferData: {
     type: Object,
     required: true
diff --git a/frontend/src/common/components/AppDrop.vue b/frontend/src/common/components/AppDrop.vue
index b2c42d54..b10abaf7 100644
--- a/frontend/src/common/components/AppDrop.vue
+++ b/frontend/src/common/components/AppDrop.vue
@@ -15,12 +15,15 @@ const emit = defineEmits(['drop'])
 
 const onDrop = ({ dataTransfer }) => {
   if (!dataTransfer) return;
-
-  const payload = dataTransfer.getData(DATA_TRANSFER_PAYLOAD);
-
-  if (payload) {
-    const transferData = JSON.parse(dataTransfer.getData(DATA_TRANSFER_PAYLOAD));
-    emit('drop', transferData);
+  
+  try {
+    const payload = dataTransfer.getData(DATA_TRANSFER_PAYLOAD);
+    if (payload) {
+      const transferData = JSON.parse(payload);
+      emit('drop', transferData);
+    }
+  } catch (e) {
+    console.error('Error parsing drop data:', e);
   }
 }
 </script>
diff --git a/frontend/src/common/components/IngredientsSelector.vue b/frontend/src/common/components/IngredientsSelector.vue
index f7dd99e4..d9ec07f5 100644
--- a/frontend/src/common/components/IngredientsSelector.vue
+++ b/frontend/src/common/components/IngredientsSelector.vue
@@ -7,7 +7,10 @@
           class="ingredients__item"
           :key="ingredient.id"
       >
-        <AppDrag :transferData="ingredient" :draggable="true">
+        <AppDrag 
+          :transferData="ingredient" 
+          :draggable="canDrag(ingredient)"
+        >
            <span class="filling" :class="`filling--${ingredient.name}`" style="display: inline-block;">
               <img :src="getImage(ingredient.image)" :alt="ingredient.name" draggable="false">
               {{ ingredient.name }}
@@ -98,6 +101,12 @@ const updateCount = (ingredientId, newCount) => {
   emit('update:modelValue', updatedValue);
 };
 
+const handleDragEnd = (ingredient) => {
+  if (canDrag(ingredient)) {
+    increment(ingredient.id);
+  }
+};
+
 const getImage = (image) => {
   return new URL(`../../assets/img/${image}`, import.meta.url).href;
 };
diff --git a/frontend/src/common/components/PizzaDisplay.vue b/frontend/src/common/components/PizzaDisplay.vue
index 65f97376..f42973ff 100644
--- a/frontend/src/common/components/PizzaDisplay.vue
+++ b/frontend/src/common/components/PizzaDisplay.vue
@@ -35,7 +35,6 @@
 </template>
 
 <script setup>
-import { watch } from 'vue';
 import AppDrop from "@/common/components/AppDrop.vue";
 const props = defineProps({
   dough: {
@@ -52,13 +51,14 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['add-ingredient']);
+
 const TWO_INGREDIENTS = 2;
 const THREE_INGREDIENTS = 3;
 
-// Наблюдаем за изменениями ingredients
-watch(() => props.ingredients, (newIngredients) => {
-  console.log('Ингредиенты изменились:', newIngredients);
-}, { deep: true });
+const onDropIngredient = (ingredient) => {
+  emit('add-ingredient', ingredient);
+};
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 4b9b4eef..4717d7bf 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -39,6 +39,7 @@
           :dough="selectedDough"
           :sauce="selectedSauce"
           :ingredients="selectedIngredients"
+          @add-ingredient="handleAddIngredient"
          />
       </div>
 
@@ -99,6 +100,23 @@ const selectedIngredients = computed(() => {
     }));
 });
 
+const handleAddIngredient = (ingredient) => {
+  const current = ingredientsState.value[ingredient.id] || { 
+    ingredient, 
+    count: 0 
+  };
+  
+  if (current.count < 3) {
+    ingredientsState.value = {
+      ...ingredientsState.value,
+      [ingredient.id]: {
+        ...current,
+        count: current.count + 1
+      }
+    };
+  }
+};
+
 
 </script>
 

From f7f0225ca3b0156b83e72027e58978a1904f4f37 Mon Sep 17 00:00:00 2001
From: apud <apu@kodix.ru>
Date: Fri, 28 Mar 2025 00:24:05 +0300
Subject: [PATCH 8/9] =?UTF-8?q?[f]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BA=D1=83=20=D1=80=D0=B0?=
 =?UTF-8?q?=D1=81=D1=87=D0=B5=D1=82=D0=B0=20=D1=86=D0=B5=D0=BD=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/components/DoughSelector.vue   |  8 +--
 .../src/common/components/PizzaDisplay.vue    | 53 +++++++++++++++----
 .../src/common/components/SauceSelector.vue   |  7 ++-
 .../src/common/components/SizeSelector.vue    |  7 ++-
 frontend/src/views/HomeView.vue               |  7 +--
 5 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/frontend/src/common/components/DoughSelector.vue b/frontend/src/common/components/DoughSelector.vue
index 556b102e..ab7af246 100644
--- a/frontend/src/common/components/DoughSelector.vue
+++ b/frontend/src/common/components/DoughSelector.vue
@@ -14,8 +14,8 @@
               name="dought"
               :value="doughType.value"
               class="visually-hidden"
-              :checked="doughType.value === modelValue"
-              @change="$emit('update:modelValue', doughType.value)"
+              :checked="doughType.id === modelValue?.id"
+              @change="$emit('update:modelValue', doughType)"
           />
           <img :src="getImage(doughType.image)" :alt="doughType.name" />
           <b>{{ doughType.name }}</b>
@@ -27,6 +27,7 @@
 </template>
 
 <script setup>
+import { watch } from 'vue';
 
 const props = defineProps({
   doughItems: {
@@ -34,8 +35,7 @@ const props = defineProps({
     required: true,
   },
   modelValue: {
-    type: Object,
-    required: true
+    type: Object
   }
 })
 
diff --git a/frontend/src/common/components/PizzaDisplay.vue b/frontend/src/common/components/PizzaDisplay.vue
index f42973ff..c1b14b3f 100644
--- a/frontend/src/common/components/PizzaDisplay.vue
+++ b/frontend/src/common/components/PizzaDisplay.vue
@@ -2,13 +2,18 @@
   <div class="content__pizza">
     <label class="input">
       <span class="visually-hidden">Название пиццы</span>
-      <input type="text" name="pizza_name" placeholder="Введите название пиццы" />
+      <input 
+        type="text" 
+        name="pizza_name" 
+        placeholder="Введите название пиццы"
+        v-model="pizzaName"
+      />
     </label>
     <div class="content__constructor">
       <AppDrop @drop="onDropIngredient">
         <div 
           class="pizza" 
-          :class="`pizza--foundation--${dough}-${sauce}`"
+          :class="`pizza--foundation--${dough?.value}-${sauce?.value}`"
         >
           <div class="pizza__wrapper">
             <!-- Отображаем выбранные ингредиенты -->
@@ -28,29 +33,57 @@
       </AppDrop>
     </div>
     <div class="content__result">
-      <p>Итого: 0 ₽</p>
-      <button type="button" class="button" disabled>Готовьте!</button>
+      <p>Итого: {{ totalPrice }} ₽</p>
+      <button
+        type="button"
+        class="button"
+        :disabled="!isFormValid"
+      >
+        Готовьте!
+      </button>
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref, computed } from 'vue';
 import AppDrop from "@/common/components/AppDrop.vue";
+
 const props = defineProps({
   dough: {
-    type: String,
-    required: true,
+    type: Object
   },
   sauce: {
-    type: String,
-    required: true,
+    type: Object
+  },
+  size: {
+    type: Object
   },
   ingredients: {
-    type: Array,
-    required: true,
+    type: Array
   },
 });
 
+const pizzaName = ref('');
+
+const totalPrice = computed(() => {
+  if (!props.size) return 0;
+  
+  // Сумма ингредиентов
+  const ingredientsSum = props.ingredients.reduce(
+    (sum, ing) => sum + (ing.price * ing.quantity),
+    0
+  );
+  
+  // Берем цены напрямую из объектов
+  return props.size.multiplier * (props.dough.price + props.sauce.price + ingredientsSum);
+});
+
+// Проверка валидности формы
+const isFormValid = computed(() => {
+  return pizzaName.value.trim() !== '' && totalPrice.value > 0;
+});
+
 const emit = defineEmits(['add-ingredient']);
 
 const TWO_INGREDIENTS = 2;
diff --git a/frontend/src/common/components/SauceSelector.vue b/frontend/src/common/components/SauceSelector.vue
index aec8755c..d71f49f1 100644
--- a/frontend/src/common/components/SauceSelector.vue
+++ b/frontend/src/common/components/SauceSelector.vue
@@ -10,8 +10,8 @@
             type="radio" 
             name="sauce" 
             :value="sauceType.value" 
-            :checked="sauceType.value === modelValue"
-            @change="$emit('update:modelValue', sauceType.value)"
+            :checked="sauceType.id === modelValue?.id"
+            @change="$emit('update:modelValue', sauceType)"
           />
           <span>{{ sauceType.name }}</span>
         </label>
@@ -27,8 +27,7 @@ const props = defineProps({
     required: true,
   },
   modelValue: {
-    type: Object,
-    required: true
+    type: Object
   }
 });
 </script>
diff --git a/frontend/src/common/components/SizeSelector.vue b/frontend/src/common/components/SizeSelector.vue
index f961c1b3..811f0207 100644
--- a/frontend/src/common/components/SizeSelector.vue
+++ b/frontend/src/common/components/SizeSelector.vue
@@ -14,8 +14,8 @@
               name="diameter"
               :value="sizeType.value"
               class="visually-hidden"
-              :checked="sizeType.value === modelValue"
-              @change="$emit('update:modelValue', sizeType.value)"
+              :checked="sizeType.id === modelValue?.id"
+              @change="$emit('update:modelValue', sizeType)"
           />
           <span>{{ sizeType.name }}</span>
         </label>
@@ -32,8 +32,7 @@ const props = defineProps({
     required: true,
   },
   modelValue: {
-    type: Object,
-    required: true
+    type: Object
   }
 });
 
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 4717d7bf..7ff32db6 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -39,6 +39,7 @@
           :dough="selectedDough"
           :sauce="selectedSauce"
           :ingredients="selectedIngredients"
+          :size="selectedSize"
           @add-ingredient="handleAddIngredient"
          />
       </div>
@@ -79,9 +80,9 @@ const selectedSauce = ref(null);
 const ingredientsState = ref({});
 
 onMounted(() => {
-  selectedDough.value = doughItems[0].value;
-  selectedSize.value = sizeItems[0].value;
-  selectedSauce.value = sauceItems[0].value;
+  selectedDough.value = doughItems[0];
+  selectedSize.value = sizeItems[0];
+  selectedSauce.value = sauceItems[0];
   // Инициализируем состояние для всех ингредиентов
   ingredientItems.forEach(ingredient => {
     ingredientsState.value[ingredient.id] = {

From 35dcb79dcf479619f621104fe16989e8ded06c5d Mon Sep 17 00:00:00 2001
From: apud <apu@kodix.ru>
Date: Fri, 28 Mar 2025 01:12:04 +0300
Subject: [PATCH 9/9] =?UTF-8?q?[f]=20=D0=97=D0=B0=D0=BC=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=BB=20ref=20=D0=BD=D0=B0=20reactive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/components/PizzaDisplay.vue    | 10 ++--
 frontend/src/views/HomeView.vue               | 59 ++++++++-----------
 2 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/frontend/src/common/components/PizzaDisplay.vue b/frontend/src/common/components/PizzaDisplay.vue
index c1b14b3f..64ab54f0 100644
--- a/frontend/src/common/components/PizzaDisplay.vue
+++ b/frontend/src/common/components/PizzaDisplay.vue
@@ -6,7 +6,8 @@
         type="text" 
         name="pizza_name" 
         placeholder="Введите название пиццы"
-        v-model="pizzaName"
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.value)"
       />
     </label>
     <div class="content__constructor">
@@ -62,10 +63,11 @@ const props = defineProps({
   ingredients: {
     type: Array
   },
+  modelValue: {
+    type: String
+  }
 });
 
-const pizzaName = ref('');
-
 const totalPrice = computed(() => {
   if (!props.size) return 0;
   
@@ -81,7 +83,7 @@ const totalPrice = computed(() => {
 
 // Проверка валидности формы
 const isFormValid = computed(() => {
-  return pizzaName.value.trim() !== '' && totalPrice.value > 0;
+  return props.modelValue.trim() !== '' && totalPrice.value > 0;
 });
 
 const emit = defineEmits(['add-ingredient']);
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 7ff32db6..abccafd9 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -8,13 +8,13 @@
         <!-- Компонент выбора теста -->
         <DoughSelector 
           :doughItems="doughItems"
-          v-model:modelValue="selectedDough"
+          v-model:modelValue="pizza.dough"
         />
 
         <!-- Компонент выбора размера -->
         <SizeSelector 
           :sizeItems="sizeItems"
-          v-model:modelValue="selectedSize"
+          v-model:modelValue="pizza.size"
         />
 
     
@@ -24,11 +24,11 @@
             <div class="sheet__content ingredients">
               <SauceSelector 
                 :sauceItems="sauceItems"
-                v-model:modelValue="selectedSauce"
+                v-model:modelValue="pizza.sauce"
               />
               <IngredientsSelector 
                 :ingredientItems="ingredientItems"
-                v-model:modelValue="ingredientsState"
+                v-model:modelValue="pizza.ingredients"
               />
             </div>
           </div>
@@ -36,10 +36,11 @@
 
         <!-- Компонент отображения пиццы -->
         <PizzaDisplay
-          :dough="selectedDough"
-          :sauce="selectedSauce"
+          :dough="pizza.dough"
+          :sauce="pizza.sauce"
           :ingredients="selectedIngredients"
-          :size="selectedSize"
+          :size="pizza.size"
+          v-model="pizza.name"
           @add-ingredient="handleAddIngredient"
          />
       </div>
@@ -50,7 +51,7 @@
 
 
 <script setup>
-import { ref, onMounted, computed } from 'vue';
+import { computed, reactive } from 'vue';
 import {
   normalizeDough,
   normalizeIngredients,
@@ -74,26 +75,23 @@ const ingredientItems = ingredientsJSON.map(normalizeIngredients);
 const sauceItems = saucesJSON.map(normalizeSauces);
 const sizeItems = sizesJSON.map(normalizeSize);
 
-const selectedDough = ref(null);
-const selectedSize = ref(null);
-const selectedSauce = ref(null);
-const ingredientsState = ref({});
-
-onMounted(() => {
-  selectedDough.value = doughItems[0];
-  selectedSize.value = sizeItems[0];
-  selectedSauce.value = sauceItems[0];
-  // Инициализируем состояние для всех ингредиентов
-  ingredientItems.forEach(ingredient => {
-    ingredientsState.value[ingredient.id] = {
-      ingredient,
+const pizza = reactive({
+  name: "",
+  dough: doughItems[0],
+  size: sizeItems[0],
+  sauce: sauceItems[0],
+  ingredients: ingredientItems.reduce((acc, item) => {
+    acc[item.id] = {
+      ingredient: item,
       count: 0
     };
-  });
+    return acc;
+  }, {})
 });
 
+// Вычисляемое свойство для отображения выбранных ингредиентов
 const selectedIngredients = computed(() => {
-  return Object.values(ingredientsState.value)
+  return Object.values(pizza.ingredients)
     .filter(item => item.count > 0)
     .map(item => ({
       ...item.ingredient,
@@ -102,19 +100,8 @@ const selectedIngredients = computed(() => {
 });
 
 const handleAddIngredient = (ingredient) => {
-  const current = ingredientsState.value[ingredient.id] || { 
-    ingredient, 
-    count: 0 
-  };
-  
-  if (current.count < 3) {
-    ingredientsState.value = {
-      ...ingredientsState.value,
-      [ingredient.id]: {
-        ...current,
-        count: current.count + 1
-      }
-    };
+  if (pizza.ingredients[ingredient.id].count < 3) {
+    pizza.ingredients[ingredient.id].count++;
   }
 };