Skip to content

DZ1.22 #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

DZ1.22 #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 8 additions & 10 deletions frontend/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
15 changes: 15 additions & 0 deletions frontend/src/layouts/AppHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 11 additions & 0 deletions frontend/src/layouts/AppLayout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<template>
<div>
<app-header />
<slot />
</div>
</template>

<script setup>
import AppHeader from "./AppHeader.vue";
</script>

304 changes: 304 additions & 0 deletions frontend/src/views/HomeView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>