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

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

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

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

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

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