diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..cafde6e03 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +.DS_Store +*.swp +coverage/ +node_modules/ +yarn.lock +package-lock.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..3b6641073 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "git.ignoreLimitWarning": true +} \ No newline at end of file diff --git a/README.md b/README.md index bdb189ada..32414289f 100644 --- a/README.md +++ b/README.md @@ -1,164 +1,71 @@ -# Burger Queen +# Bem vinda(o) ao Chef's Burger!!! -## Índice - -- [1. Preâmbulo](#1-preâmbulo) -- [2. Resumo do projeto](#2-resumo-do-projeto) -- [3. Objetivos de aprendizagem](#3-objetivos-de-aprendizagem) -- [4. Considerações gerais](#4-considerações-gerais) -- [5. Critérios de aceitação mínimos do - projeto](#5-critérios-de-aceitação-mínimos-do-projeto) -- [6. Hacker Edition](#6-hacker-edition) -- [7. Dicas e leituras complementares](#7-dicas-e-leituras-complementares) -- [8. Checklist](#8-checklist) - ---- - -## 1. Preâmbulo - -[React](https://reactjs.org/), [Angular](https://angular.io/) e -[Vue](https://vuejs.org/) são alguns dos _frameworks_ e _bibliotecas_ de -JavaScript mais usados na área de desenvolvimento ao redor do mundo e existe uma -razão para isso. No contexto do navegador, [_manter a interface sincronizada com -o estado é difícil_](https://medium.com/dailyjs/the-deepest-reason-why-modern-javascript-frameworks-exist-933b86ebc445). - -Ao eleger um _framework_ ou _biblioteca_ para nossa interface, nos apoiamos em -uma série de convenções e implementações _testadas_ e _documentadas_ para -resolver um problema comum a toda interface web. Isto nos permite concentrar -melhor (dedicar mais tempo) nas características _específicas_ de nossa -aplicação. - -Quando escolhemos uma destas tecnologias não só importamos um pedaço de código -para reusar (o qual já é um grande valor por si só), mas também adotamos uma -**arquitetura**, uma série de **princípios de design**, um paradigma, algumas -**abstrações**, um **vocabulário**, uma **comunidade**, etc... - -Como desenvolvedora Front-end, estes kits de desenvolvimento podem resultar em -uma grande ajuda para implementar rapidamente _features_ dos projetos em que -você for trabalhar. - -## 2. Resumo do projeto - -Desta vez temos um projeto 100% por demanda. Você sempre pode (e deve) fazer -sugestões de melhora e mudança, mas muitas vezes trabalhará em um projeto em que -primeiro deve se assegurar de cumprir os requisitos. +![alt text](src/images/logo4.gif) -Um pequeno restaurante de hambúrgueres, que está crescendo, necessita uma -interface em que se possa realizar pedidos utilizando um _tablet_, e enviá-los -para a cozinha para que sejam preparados de forma ordenada e eficiente. +# Acesse aqui + *Acesse o Chef´s [Aqui](https://sap-005-burger-queen-luanagss.vercel.app/) -![burger-queen](https://user-images.githubusercontent.com/110297/42118136-996b4a52-7bc6-11e8-8a03-ada078754715.jpg) +LOGIN DA(O) ATENDENTE: +E-MAIL: garçom@gmail.com +SENHA: 1234567 -Estas são as informações que temos do cliente: +LOGIN DA(O) COZINHEIRA (O): +E-MAIL: cozinha@hotmail.com +SENHA: 1234567 -> Somos **Burger Queen**, um fast food 24hrs. -> -> A nossa proposta de serviço 24 horas foi muito bem recebida e, para continuar a -> crescer, precisamos de um sistema que nos ajude a receber pedidos de nossos -> clientes. -> -> Nós temos 2 menus. Um muito simples para o café da manhã: -> -> | Ítem | Preço R\$ | -> | --------------------- | --------- | -> | Café americano | 5 | -> | Café com leite | 7 | -> | Misto Quente | 10 | -> | Suco de fruta natural | 7 | -> -> E outro menu para o resto do dia: -> -> | Ítem | Preço | -> | ------------------- | ------- | -> | **Hambúrgueres** | **R\$** | -> | Hambúrguer simples | 10 | -> | Hambúrguer duplo | 15 | -> | **Acompanhamentos** | **R\$** | -> | Batata frita | 5 | -> | Anéis de cebola | 5 | -> | **Bebidas** | **R\$** | -> | Água 500ml | 5 | -> | Água 750ml | 7 | -> | Refrigerante 500ml | 7 | -> | Refrigerante 750ml | 10 | -> -> **Importante:** Os clientes podem escolher entre hambúrgueres de carne bovina, -> frango ou vegetariano. Além disso, por um adicional de R\$ 1,00 , eles podem -> adicionar queijo **ou** ovo. -> -> Nossos clientes são bastante indecisos, por isso é muito comum que eles mudem o -> seu pedido várias vezes antes de finalizar. +![alt text](src/images/giphy1.gif) -A interface deve mostrar os dois menus (café da manhã e restante do dia), cada -um com todos os seus _produtos_. O usuário deve poder escolher que _produtos_ -adicionar e a interface deve mostrar o _resumo do pedido_ com o custo total. - -![out](https://user-images.githubusercontent.com/110297/45984241-b8b51c00-c025-11e8-8fa4-a390016bee9d.gif) - -## 3. Objetivos de aprendizagem - -O objetivo principal é aprender a construir uma interface web usando React. Esse framework front-end ataca o seguinte problema: **como manter a interface e estado sincronizados**. Portanto, esta experiência espera familiarizá-la com o conceito de estado da tela, e como cada mudança no estado vai refletir na interface (por exemplo, toda vez que adicionamos um _produto_ para um _pedido_, a interface deve atualizar a lista de pedidos e o total). +## Índice -Finalmente, a interface deve ser pensada específicamente para rodar em **tablets**. +- [1. Preâmbulo](#1-preâmbulo) +- [2. Protótipos](#2-Protótipos) +- [3. História de usuário](#3-História-de-usuário) +- [4. Recursos Utilizados](#4-Recursos-Utilizados) +- [. Desenvolvido por](#-desenvolvido-por) -## 4. Considerações gerais +--- -**Trabalhe integralmente uma história de usuário antes de passar para a próxima.** Cumpra todas as histórias possíveis dentro do tempo especificado. +## 1. Preâmbulo -A lógica do projeto deve ser totalmente implementada em JavaScript (ES6 +). Neste projeto você deve usar [React](https://reactjs.org/). +Chef's Burguer é um restaurante 24hs de hambúrgueres. Devido ao seu grande sucesso, passou a servir café da manhã, e precisou modernizar e agilizar o seu sistema de atendimento. -O aplicativo deve ser um _Single Page App_. Os pedidos serão enviados por meio de um _tablet_,mas **não queremos um aplicativo nativo**, mas sim um aplicativo Web que seja **responsivo**. +E assim surgiu o Chef's Burguer app, uma aplicação voltada para tablets, com uma interface prática no qual os pedidos são realizados rapidamente e enviádos para cozinha. -Precisamos pensar bem sobre o UX para aqueles que vão receber os pedidos, o tamanho e a aparência dos botões, a visibilidade do estado atual do pedido, etc. +A todo momento, na tela de Históricos de Pedidos, pode ser feito o acompanhamento do status do pedido, tornando o atendimento do Chef's ainda mais eficiente, e fidelizando ainda mais os seus clientes. -Você deve definir a estrutura das pastas e arquivos que considera necessários. Você pode estruturá-los de acordo com as convenções do React. +## 2. Protótipos -Está liberado o uso de bibliotecas de componentes e pré-processadores de CSS. +![alt text](src/images/1.jpg) +![alt text](src/images/2.jpg) -Você está livre para escolher o nome do seu restaurante. +## 3. História de usuário -Recomendamos que o deploy seja feito utilizando [Heroku](https://www.heroku.com/), [Netlify](https://www.netlify.com/) ou [Vercel](https://vercel.com/). +- História de usuário 1 -Para iniciar este projeto você terá que fazer um _fork_ e _clone_ deste repositório. +Eu como funcionário do restaurante quero entrar na plataforma e ver apenas a tela importante para o meu trabalho. -## 5. Critérios mínimos de aceitação do projeto +- História de usuário 2 -### Definição do produto +Eu como atendente quero poder anotar o meu pedido saber o valor de cada +produto e poder enviar o pedido para a cozinha para ser preparado. -O [_Product Owner_](https://www.youtube.com/watch?v=7lhnYbmovb4) nos apresentou -este _backlog_ que é o resultado do seu trabalho com o cliente até hoje. +- História de usuário 3 ---- +Eu como chefe de cozinha quero ver os pedidos dos clientes em ordem, poder marcar que estão prontos e poder notificar os garçons/garçonetes que o pedido está pronto para ser entregue ao cliente. -#### [História de usuário 1] Usuário deve ter seu perfil (login/senha) para acessar o sistema. +- História de usuário 4 -Eu como funcionário do restaurante quero entrar na plataforma e ver apenas a tela importante para o meu trabalho. +Eu como garçom/garçonete quero ver os pedidos que estão prontos para entregá-los rapidamente aos clientes. -##### Critérios de aceitação +# Necessidades do usuário: -O que deve acontecer para satisfazer as necessidades do usuário? +História 1: - Criar login e senha. - Registar tipo de usuário (cozinha / salão), login e senha. - Entrar na tela correta para cada usuário. -##### Definição de pronto - -O acordado abaixo deve acontecer para dizer que a história está terminada: - -- Você fez _testes_ de usabilidade e incorporou o feedback do usuário. -- Você deu deploy de seu aplicativo. - ---- - -#### [História de usuário 2] Garçom/Garçonete deve poder anotar o seu pedido - -Eu como garçom/garçonete quero poder anotar o meu pedido saber o valor de cada -produto e poder enviar o pedido para a cozinha para ser preparado. - -##### Critérios de aceitação - -O que deve acontecer para satisfazer as necessidades do usuário? +História 2: - Anotar o nome e mesa. - Adicionar produtos aos pedidos. @@ -167,172 +74,33 @@ O que deve acontecer para satisfazer as necessidades do usuário? - Enviar o pedido para a cozinha (guardar em algum banco de dados). - Funcionar bem e se adequar a um _tablet_. -##### Definição de pronto - -O acordado abaixo deve acontecer para dizer que a história está terminada: - -- Você fez _testes_ de usabilidade e incorporou o _feedback_ do usuário. -- Você deu deploy de seu aplicativo. - ---- - -#### [História de usuário 3] Chefe de cozinha deve ver os pedidos - -Eu como chefe de cozinha quero ver os pedidos dos clientes em ordem, poder marcar que estão prontos e poder notificar os garçons/garçonetes que o pedido está pronto para ser entregue ao cliente. - -##### Critérios de aceitação - +História 3: - Ver os pedidos à medida em que são feitos. - Marcar os pedidos que foram preparados e estão prontos para serem servidos. - Ver o tempo que levou para preparar o pedido desde que chegou, até ser marcado como concluído. -##### Definição de pronto - -- Você fez _testes_ de usabilidade e incorporou o _feedback_ do usuário. -- Você deu deploy de seu aplicativo. - ---- - -#### [História de usuário 4] Garçom/Garçonete deve ver os pedidos prontos para servir - -Eu como garçom/garçonete quero ver os pedidos que estão prontos para entregá-los rapidamente aos clientes. - -##### Critérios de aceitação - +História 4: - Ver a lista de pedidos prontos para servir. - Marque os pedidos que foram entregues. -##### Definição de pronto - -- Você fez _testes_ de usabilidade e incorporou o _feedback_ do usuário. -- Você deu deploy de seu aplicativo. -- Os dados devem ser mantidos intactos, mesmo depois que um pedido foi terminado. Tudo isso para poder ter estatísticas no futuro. - ---- - -## 6. Hacker Edition - -As seções chamadas Hacker Edition são opcionais. Se você terminou tudo e ainda sobrou tempo, faça essa parte. Assim você poderá aprofundar e exercitar mais sobre os objetivos de aprendizagem do projeto. - -- Faça testes que cubram 70% de statements, functions, lines e branches. -- Configure o _linter_ (ESLint) no seu projeto. - ---- - -## 7. Dicas e leituras complementares - -### Primeros passos - -- Para iniciar este projeto você terá que fazer um _fork_ e _clone_ deste repositório - -- Crie um projeto usando `create-react-app` - -- Leia a documentação da [Burger Queen API](https://lab-api-bq.herokuapp.com/api-docs/) - ---- - -### Outros recursos - -#### Framework / biblioteca - -- [React](https://reactjs.org/) - -#### React Hooks - -- [React Hooks](https://reactjs.org/docs/hooks-intro.html) -- [Entendendo React Hooks](https://medium.com/@higornevesmarques/entendendo-react-hooks-2c0efae276a3) -- [React Hooks - Rocketseat](https://blog.rocketseat.com.br/react-hooks/) -- [Habemus React Hooks](https://willianjusten.com.br/habemus-react-hooks/) - -#### Ferramentas - -- [Babel](https://babeljs.io/) -- [webpack](https://webpack.js.org/) -- [React Router](https://reactrouter.com/web/guides/quick-start) -- [Axios](https://github.com/axios/axios) +## 4. Recursos Utilizados -#### Estilização - -- [Pré-Processadores CSS - Definição](https://developer.mozilla.org/pt-BR/docs/Glossario/CSS_preprocessor) -- [Pré-Processadores CSS - Motivação](https://www.zup.com.br/blog/o-que-sao-pre-processadores-css) -- [Material-UI](https://material-ui.com/) -- [Aphrodite](https://github.com/Khan/aphrodite) -- [Styled Components](https://styled-components.com/) - -#### Requisições com React - -- [React + Fetch](https://jasonwatmore.com/post/2020/02/01/react-fetch-http-post-request-examples) -- [React + Axios](https://jasonwatmore.com/post/2020/07/17/react-axios-http-get-request-examples) - -#### Testando requisições - -- [Insomnia](https://insomnia.rest/) -- [Postman](https://www.postman.com/) - -#### Testes - -- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) -- [Jest](https://jestjs.io/) - -#### Configuração de ESLint +- Lógica implementada em JavaScript (ES6 +). +- [React](https://reactjs.org/). +- [react-router-dom](https://reactrouter.com/web/guides/quick-start) +- [Vercel](https://vercel.com/). +Configuração de ESLint - [ESLint + Prettier](https://henriquetavares.com/pt-br/setting-eslint-on-reactjs-and-react-native/) -#### Deploy - -- [Opções de deploy com Create React App](https://create-react-app.dev/docs/deployment) -- [Deploy + Netlify (vídeo)](https://drive.google.com/file/d/1hzlB8dl4m0OnLLY2-WpjSLcU7eYTURRk/view) -- [Deploy + Heroku (vídeo)](https://drive.google.com/file/d/1eqx6yuwJnAU-R83ta89tgEem7ABZigNG/view) -- [Deploy + Vercel (vídeo)](https://drive.google.com/file/d/1Q9q1iVnRrWeEhGRns0r5OOeiqloQug8y/view) - ---- - -## 8. Checklist - -#### `README.md` - -- [ ] Documentação do processo de design. -- [ ] Inclui informações para desenvolvedores (dependências, instalação, uso, testes...). - -#### HU 1: Criar perfil - -- [ ] Poder realizar cadastro com e-mail, senha e função. -- [ ] Poder realizar login com e-mail e senha. -- [ ] Redirecionar para a tela correta. - -#### HU 2: Anotar pedidos - -- [ ] Digitar o nome do cliente e mesa. -- [ ] Filtrar _menu_ para _café da manhã_ e _almoço/jantar_. -- [ ] Adicionar item ao pedido. -- [ ] Excluir item do pedido. -- [ ] Mostrar _resumo_ do pedido com todos os itens e o total. -- [ ] Enviar para a cozinha (isso deve salvar o pedido). - -#### HU 3: Ver pedidos na cozinha - -- [ ] Visualizar pedidos pendentes para produção. -- [ ] Marcar pedido como pronto para entrega. -- [ ] Ver histórico dos pedidos. - -#### HU 4: Entrega de pedidos - -- [ ] Visualizar pedidos pendentes para entrega. -- [ ] Marcar pedido como entregue ao cliente. - -### UX - -- [ ] Funciona bem em tablets. -- [ ] Fácil utilização em telas sensíveis ao toque. -- [ ] Status atual do pedido sempre visível enquanto fazemos um pedido. +- Documentação da [Burger Queen API](https://lab-api-bq.herokuapp.com/api-docs/) -### Hacker Edition +- Teste de requisições [Postman](https://www.postman.com/) -#### Testes +- Requisições com React [React + Fetch](https://jasonwatmore.com/post/2020/02/01/react-fetch-http-post-request-examples) -- [ ] 70% de cobertura de _statements_. -- [ ] 70% de cobertura de _functions_. -- [ ] 70% de cobertura de _lines_. -- [ ] 70% de cobertura de _branches_. +### .Desenvolvido por: +- [LuanaGss](https://github.com/LuanaGss) +- [Tânagra Andria](https://github.com/TanagraAndria) -#### ESLint +![alt text](src/images/giphy.gif) \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 000000000..8427d60b0 --- /dev/null +++ b/package.json @@ -0,0 +1,39 @@ +{ + "name": "burger", + "version": "0.1.0", + "private": true, + "dependencies": { + "@testing-library/jest-dom": "^5.11.9", + "@testing-library/react": "^11.2.5", + "@testing-library/user-event": "^12.6.3", + "react": "^17.0.1", + "react-dom": "^17.0.1", + "react-router-dom": "^5.2.0", + "react-scripts": "4.0.2", + "web-vitals": "^1.1.0" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 000000000..219de2ff0 --- /dev/null +++ b/public/index.html @@ -0,0 +1,24 @@ + + + + + + + + Chef's Burguer + + + + +
+ + + + \ No newline at end of file diff --git a/public/logo.ico b/public/logo.ico new file mode 100644 index 000000000..9a063ecec Binary files /dev/null and b/public/logo.ico differ diff --git a/src/images/1.jpg b/src/images/1.jpg new file mode 100644 index 000000000..d947d5a7b Binary files /dev/null and b/src/images/1.jpg differ diff --git a/src/images/11.gif b/src/images/11.gif new file mode 100644 index 000000000..4a018571b Binary files /dev/null and b/src/images/11.gif differ diff --git a/src/images/2.jpg b/src/images/2.jpg new file mode 100644 index 000000000..8975c3b0c Binary files /dev/null and b/src/images/2.jpg differ diff --git a/src/images/3.gif b/src/images/3.gif new file mode 100644 index 000000000..1baad06a9 Binary files /dev/null and b/src/images/3.gif differ diff --git a/src/images/add.png b/src/images/add.png new file mode 100644 index 000000000..6299287de Binary files /dev/null and b/src/images/add.png differ diff --git a/src/images/b.png b/src/images/b.png new file mode 100644 index 000000000..d449ee6e9 Binary files /dev/null and b/src/images/b.png differ diff --git a/src/images/copo.png b/src/images/copo.png new file mode 100644 index 000000000..028bb9892 Binary files /dev/null and b/src/images/copo.png differ diff --git a/src/images/del.png b/src/images/del.png new file mode 100644 index 000000000..97725a740 Binary files /dev/null and b/src/images/del.png differ diff --git a/src/images/giphy.gif b/src/images/giphy.gif new file mode 100644 index 000000000..2843c472e Binary files /dev/null and b/src/images/giphy.gif differ diff --git a/src/images/giphy1.gif b/src/images/giphy1.gif new file mode 100644 index 000000000..5323fd655 Binary files /dev/null and b/src/images/giphy1.gif differ diff --git a/src/images/hand.png b/src/images/hand.png new file mode 100644 index 000000000..c0cafda7f Binary files /dev/null and b/src/images/hand.png differ diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 000000000..9a063ecec Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/logo4.gif b/src/images/logo4.gif new file mode 100644 index 000000000..3a711dab6 Binary files /dev/null and b/src/images/logo4.gif differ diff --git a/src/images/menuburguer.png b/src/images/menuburguer.png new file mode 100644 index 000000000..81ef7fa04 Binary files /dev/null and b/src/images/menuburguer.png differ diff --git a/src/images/panela.png b/src/images/panela.png new file mode 100644 index 000000000..fd4989597 Binary files /dev/null and b/src/images/panela.png differ diff --git a/src/images/prato.png b/src/images/prato.png new file mode 100644 index 000000000..d349b1ada Binary files /dev/null and b/src/images/prato.png differ diff --git a/src/images/xicara.png b/src/images/xicara.png new file mode 100644 index 000000000..040492548 Binary files /dev/null and b/src/images/xicara.png differ diff --git a/src/index.js b/src/index.js new file mode 100644 index 000000000..569a904fd --- /dev/null +++ b/src/index.js @@ -0,0 +1,26 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Login from './pages/Login'; +import SignUp from './pages/SignUp'; +import Waiter from './pages/Waiter'; +import Kitchen from './pages/Kitchen'; +import Historic from './pages/Historic'; +import reportWebVitals from './reportWebVitals'; +import {BrowserRouter, Route, Switch } from 'react-router-dom'; + +ReactDOM.render( + + + + + + + +
Page 404
}/> + + , + + document.getElementById('root') +); + +reportWebVitals(); diff --git a/src/pages/Historic.js b/src/pages/Historic.js new file mode 100644 index 000000000..bb9ac1055 --- /dev/null +++ b/src/pages/Historic.js @@ -0,0 +1,130 @@ +import '../style/Historic.css'; +import React from "react"; +import {useHistory} from 'react-router-dom' +import logo from '../images/logo.png'; +import menuburguer from '../images/menuburguer.png'; +import add from '../images/add.png'; +import del from '../images/del.png'; +import { useState } from 'react'; + +function Historic() { + const [orders, setOrders] = useState([]); + const token = localStorage.getItem("token"); + const history = useHistory() + const rLogin=()=> { + history.push('/') + } + + const rWaiter=()=> { + history.push('/Waiter') + } + + function post (e){ + e.preventDefault(); + fetch('https://lab-api-bq.herokuapp.com/orders', { + method: "GET", + headers: { + "Content-Type": "application/json", + "accept": "application/json", + 'Authorization': `${token}` + } + }) + .then((response) => response.json()) + .then((json) => { + setOrders (json); + }) + } + + function delet (e, id, index){ + fetch(`https://lab-api-bq.herokuapp.com/orders/${id}`, { + method: "DELETE", + headers: { + "Content-Type": "application/json", + "accept": "application/json", + 'Authorization': `${token}` + } + }) + .then((response) => response.json()) + .then((json) => { + const newOrders= [...orders] + newOrders.splice(index, 1) + setOrders(newOrders)}) + } + + return ( + +
+ +
+ + + +
+ +
+
+ + + +
+ + +

Histórico de Pedidos

+
+ +
+
+ +
+ + { orders.map((order, index) => { + + return ( +
+

+ + + +

+ +

Mesa: {order.table}

+

{order.status}

+
+ + { + order.Products.map((product)=> { + return( +
+

{product.name}

+
+ ) + }) + } + +
+ +
+ ) + + })} + +
+ +
+ ); + } + + + + +export default Historic; \ No newline at end of file diff --git a/src/pages/Kitchen.js b/src/pages/Kitchen.js new file mode 100644 index 000000000..b763e638a --- /dev/null +++ b/src/pages/Kitchen.js @@ -0,0 +1,106 @@ +import '../style/Kitchen.css'; +import React from "react"; +import {useHistory} from 'react-router-dom' +import logo from '../images/logo.png'; +import menuburguer from '../images/menuburguer.png'; +import add from '../images/add.png'; +import {useState} from 'react'; +import {ConvertDate, ConvertTime} from './service.js'; + + + +function Kitchen() { + const [orders, setOrders] = useState([]); + const token = localStorage.getItem("token"); + const productId = sessionStorage.getItem("product.id"); + console.log(productId); + + const history = useHistory() + const rLogin = () => { + history.push('/') + } + + const fetchData = () => { + fetch('https://lab-api-bq.herokuapp.com/orders', { + method: "GET", + headers: { + "Content-Type": "application/json", + "accept": "application/json", + 'Authorization': `${token}` + } + }) + .then((response) => response.json()) + .then((json) => { + setOrders(json); + }) + } + + + + return ( +
+
+ + + +
+ +
+
+ +
+ + +
+
+ + { orders.map((order) => { + return ( +
+

Data: {ConvertDate(order.createdAt)} {ConvertTime(order.createdAt)}

+

Mesa: {order.table}

+

Status: {order.status}

+

Pedido:

+
+ + { + order.Products.map((product)=> { + return( +
+

{product.name}

+
+ ) + }) + } + + +
+ +
+ ) + })} +
+
+ ); +} + +export default Kitchen; \ No newline at end of file diff --git a/src/pages/Login.js b/src/pages/Login.js new file mode 100644 index 000000000..6261f4e98 --- /dev/null +++ b/src/pages/Login.js @@ -0,0 +1,77 @@ +import '../style/Login.css'; +import '../style/App.css' +import React, { useState } from 'react'; +import { Link, useHistory } from 'react-router-dom'; +import logo from '../images/logo.png'; + + + +function Login() { + + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + + const history = useHistory(); + + const waiter = () => { + history.push('/waiter'); + } + const kitchen = () => { + history.push('/kitchen'); + } + + return ( +
+
+ +
+ setEmail(event.target.value)} /> + setPassword(event.target.value)} /> + +
+

Funcionário novo? Cadastre-se!

+
+
+ ); +} + +export default Login; \ No newline at end of file diff --git a/src/pages/SignUp.js b/src/pages/SignUp.js new file mode 100644 index 000000000..574f8e637 --- /dev/null +++ b/src/pages/SignUp.js @@ -0,0 +1,85 @@ +import '../style/SingUp.css'; +import '../style/App.css'; +import React, { useState } from 'react'; +import { useHistory } from 'react-router-dom' +import logo from '../images/logo.png'; +import panela from '../images/panela.png'; +import hand from '../images/hand.png'; + +function SignUp() { + const [email, setEmail] = useState(''); + const [name, setName] = useState(''); + const [password, setPassword] = useState(''); + const [role, setRole] = useState(''); + //const [confirme, setConfirme] = useState(true) + + const history = useHistory() + const rLogin = () => { + history.push('/') + } + return ( +
+
+ +
+
+
+
+ + +
+
+ setName(event.target.value)} /> + setEmail(event.target.value)} /> + setPassword(event.target.value)} /> + + +
+
+
+
+ ); +} + + +export default SignUp; diff --git a/src/pages/Waiter.js b/src/pages/Waiter.js new file mode 100644 index 000000000..49da5480c --- /dev/null +++ b/src/pages/Waiter.js @@ -0,0 +1,237 @@ +import '../style/Waiter.css'; +import { useEffect, useState } from 'react'; +import { useHistory } from 'react-router-dom' +import logo from '../images/logo.png'; +import prato from '../images/prato.png'; +import xicara from '../images/xicara.png'; +import copo from '../images/copo.png'; +import b from '../images/b.png'; +import menuburguer from '../images/menuburguer.png'; + +const Waiter = () => { + + const [menu, setMenu] = useState([]); + const [hamburguer, setHamburguer] = useState([]); + const [side, setSide] = useState([]); + const [drinks, setDrinks] = useState([]); + const [client, setClient] = useState(''); + const [table, setTable] = useState(''); + const [breakfast, setBreakfast] = useState([]); + const token = localStorage.getItem("token"); + const [quantidade, setQuantidade] = useState([]); + const [total, setTotal] = useState(0); + + + const history = useHistory() + const rLogin = () => { + history.push('/') + } + + const Historic = () => { + history.push('/Historic') + } + + + useEffect(() => { + fetch(`https://lab-api-bq.herokuapp.com/products`, { + method: 'GET', + headers: { + "accept": "application/json", + 'Authorization': `${token}` + }, + + }) + + .then((response) => response.json()) + .then((json) => { + const breakfast = json.filter(item => item.type === 'breakfast') + const hamburguer = json.filter(item => item.sub_type === 'hamburguer') + const drinks = json.filter(item => item.sub_type === 'drinks') + const side = json.filter(item => item.sub_type === 'side') + setMenu(breakfast) + setBreakfast(breakfast) + setHamburguer(hamburguer) + setDrinks(drinks) + setSide(side) + console.log(json) + }) + + }, [token]) + + function clickQuantidade(item) { + const elementoExiste = quantidade.find(elemento => elemento === item) + if (elementoExiste) { + elementoExiste.qtd += 1 + setQuantidade(prevQuantidade => prevQuantidade.map(prevElem => prevElem.id === elementoExiste.id ? elementoExiste : prevElem)) + } else { + item.qtd = 1; + item.subtotal = item.price; + setQuantidade([...quantidade, item]); + } + } + function clickLess(e, item) { + e.preventDefault(); + const elementoLess = quantidade.find(elemento => elemento === item) + if (elementoLess) { + elementoLess.qtd -= 1 + setQuantidade(prevLess => prevLess.map(lessPrev => lessPrev.id === elementoLess.id ? elementoLess : lessPrev)) + } else { + + } + } + + useEffect(() => { + console.log(quantidade) + setTotal(() => { + const totalPrice = quantidade.reduce((accumulator, array) => { + const { qtd, price } = array; + accumulator = Number(qtd * price + accumulator) + return accumulator + }, 0) + return totalPrice; + }) + }, [quantidade] + ) + + + return ( + +
+ + + + +
+ +
+
+
+ +
+
+
    +
    + + + + + + + + +
    { + breakfast.map((menuItems) => { + + return ( + +
    +
    +
    +
    +
      {menuItems.name}
    +
    +
    +
      {menuItems.flavor}
    +
    +
      {menuItems.complement}
    +
    +
    +
      R$:{menuItems.price},00
    + + +
    +
    +
    + ) + + }) + }
    + +
    +
    +

    Pedido

    + + setClient(event.target.value)} /> + + setTable(event.target.value)} /> +
    +
    +

    Item

    +

    Preço

    +

    Quantidade

    + +
    + {quantidade.map(item => +
    + +
      +

      {item.name}

      +

      {item.flavor}

      +

      {item.complement}

      +
    +

    R$:{item.price},00

    +

    {item.qtd}

    + +     +
    + + )} +

    Total: R$:{total},00

    +
    + + + +
    +
+
+ ) +} + + + +export default Waiter; \ No newline at end of file diff --git a/src/pages/service.js b/src/pages/service.js new file mode 100644 index 000000000..ed37f84d5 --- /dev/null +++ b/src/pages/service.js @@ -0,0 +1,26 @@ +export const ConvertDate = (apiDate) => { + const date = new Date(apiDate); + let day = date.getDay(); + let month = date.getMonth(); + const year = date.getFullYear(); + + if (day < 10) { day = `0${day}`; } + if (month < 10) { month = `0${month}`; } + + const correctDate = `${day}/${month}/${year}`; + + return correctDate; + }; + + export const ConvertTime = (apiDate) => { + const date = new Date(apiDate); + let hours = date.getHours(); + let minutes = date.getMinutes(); + + if (hours < 10) { hours = `0${hours}`; } + if (minutes < 10) { minutes = `0${minutes}`; } + + const correctTime = `${hours}:${minutes}`; + + return correctTime; + }; \ No newline at end of file diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js new file mode 100644 index 000000000..5253d3ad9 --- /dev/null +++ b/src/reportWebVitals.js @@ -0,0 +1,13 @@ +const reportWebVitals = onPerfEntry => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/src/setupTests.js b/src/setupTests.js new file mode 100644 index 000000000..8f2609b7b --- /dev/null +++ b/src/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; diff --git a/src/style/App.css b/src/style/App.css new file mode 100644 index 000000000..abc2d8356 --- /dev/null +++ b/src/style/App.css @@ -0,0 +1,21 @@ +* { + padding: 0px; + margin: 0px; + box-sizing: border-box; +} + +footer { + position: fixed; + bottom: 0; + background-color:rgb(63, 62, 62); + text-align: center; + width: 100vw; + padding: 0.2em; + color: white; + font-weight: bold; + font-family: Arial; +} + +footer a { + color: white; +} diff --git a/src/style/Historic.css b/src/style/Historic.css new file mode 100644 index 000000000..c99597913 --- /dev/null +++ b/src/style/Historic.css @@ -0,0 +1,182 @@ +.wrap-menu { + background-color: #383838; + display: flex; + justify-content: space-between; + margin-right: 35px; + margin-left: 35px; +} +.App-Historic { + background-color: #383838; + display: flex; + flex-direction: column; + font-size: calc(10px + 2vmin); + color: white; + width: 100%; +} + +.histo { + margin-top: 17px; + width: 106px; + text-align: center; + margin-left: 35px; + height: 32px; + border-radius: 9px; + font-family: Arial; + font-size: 20px; + color: white; + background-color: #ffde59; +} + +.status { + color: #ffde59; + margin-left: 34px; +} +.logoHistoric { + margin-left: 37%; + width: 25%; + margin-top: 35px; +} +.radio { + height: 20px; +} + +.AppHistoric { + background-color: #383838; + font-size: calc(10px + 2vmin); + width: 100%; + position: fixed; + background-color: #383838; + height: 100%; +} +.pedidoH { + padding: 8px; + text-align: center; + color: #ffde59; +} + +.H { + width: 47%; + flex-direction: column; + border-radius: 10px; + margin-bottom: 1vh; + height: 250px; + background-color: rgb(41, 39, 39); + box-shadow: rgb(68 64 64) 11px 11px 57px, rgb(68 64 64 / 79%) -11px -11px 57px; + text-align: center; + margin: 8px; + color: white; + font-size: 27px; + overflow: auto; +} +.btnLabel { + display: flex; + justify-content: space-around; + align-items: center; + margin-top: 19px; +} +.entregue { + color: #ffde59; +} + +.sectionH { + display: flex; + flex-wrap: wrap; + justify-content: center; + width: 80vw; + margin: auto; + margin-bottom: 5vh; + overflow: auto; +} + +.btnAddH { + border: none; + display: flex; + width: 69px; + border-radius: 77px; + margin-left: 37px; + background-color: rgb(41, 39, 39); +} + +.prodH { + padding: 3px; +} +.btnDel { + border-radius: 56px; + background-color: rgb(41, 39, 39); + width: 41px; + height: 42px; + margin-left: 111px; +} + +.imgDel { + width: 27px; +} + +/*********************MenuHamburger*********************/ + +#check { + display: none; +} + +#icone { + cursor: pointer; + padding: 15px; + position: absolute; + z-index: 1; +} + +.menuLateral { + background-color: transparent; + height: 200px; + width: 200px; + position: absolute; + transition: all .2s linear; + left: -300px; + margin-top: 50px; + outline: none; +} + +nav { + width: 100%; + position: absolute; + top: 60px; +} + +nav a { + text-decoration: none; +} + +.link { + background-color: rgb(41, 39, 39); + font-family: Arial, Helvetica, sans-serif; + transition: all .2s linear; + color: #f4f4f9; + border-bottom: 1px solid rgb(63, 62, 62); + height: 30px; + padding-left: 70px; + display: flex; + align-items: center; + border-radius: 20px; + box-shadow: rgb(68, 64, 64) 11px 11px 57px, rgba(68, 64, 64, 0.794) -11px -11px 57px; +} + +.link:hover { + background-color: #ffde59; + color: black; +} + +#check:checked ~ .menuLateral { + transform: translateX(300px); +} + +#check:checked ~ .menuLateral nav a .link { + opacity: 5; + margin-top: 0; + transition-delay: .2s; +} + +.btn-burguer { + width: 60px; + margin: 20px; +} +/*********************MenuHamburger*********************/ diff --git a/src/style/Kitchen.css b/src/style/Kitchen.css new file mode 100644 index 000000000..e91c23e0c --- /dev/null +++ b/src/style/Kitchen.css @@ -0,0 +1,190 @@ +.navK { + height: 64px; + display: flex; + justify-content: flex-end; +} + +.logoKitchen { + width: 26%; + margin-left: 37%; + margin-top: 68px; +} + +.AppKitchen { + background-color: #383838; + font-size: calc(10px + 2vmin); + color: white; + min-height: 100vh; + width: 100%; + position: absolute; + overflow: auto; +} + +.btnAdd { + border: none; + display: flex; + width: 69px; + border-radius: 77px; + margin-left: 37px; + background-color: rgb(41, 39, 39); +} + +.Cozinha { + text-align: center; + margin-top: 16px; + font-size: 31px; + font-weight: bold; + font-family: Arial; + color: #ffde59; +} + +.product { + border-radius: 9px; + width: 31%; + background-color: rgb(41, 39, 39); + margin-top: 25px; + margin-left: 38px; + text-align: center; +} + +.pedido { + margin-left: 34px; + color: #ffde59; +} + +.food { + display: flex; + text-align: center; + margin: auto; + justify-content: center; + padding: 8px; + width: 68%; + font-family: Arial; + font-weight: bold; + font-size: 20px; + border-radius: 9px; + background-color: #ffde59; + margin-top: 10px; + margin-bottom: 12px; +} +.prod { + text-align: center; +} + +.food:hover { + background-color: rgb(151, 158, 158); +} + +.Cl { + width: 47%; + flex-direction: column; + margin: 8px; + border-radius: 10px; + margin-bottom: 1vh; + height: 100%; + background-color: rgb(41, 39, 39); + box-shadow: rgb(68 64 64) 11px 11px 57px, rgb(68 64 64 / 79%) -11px -11px 57px; +} + +.section { + display: flex; + flex-wrap: wrap; + justify-content: center; + width: 80vw; + height: 100%; + margin: auto; + margin-bottom: 5vh; +} + +.nameClient { + margin-top: 18px; + margin-left: 34px; +} + +.tble { + margin-left: 34px; +} +.status{ + margin-left: 34px; + color: #ffde59; +} + +.date{ + display: flex; + padding: 3px; + margin-top: 15px; + justify-content: center; + border-radius: 6px; + color: #f4f4f9; + border: none; + outline: none; +} + +/*********************MenuHamburger*********************/ + +#check { + display: none; +} + +#icone { + cursor: pointer; + padding: 15px; + position: absolute; + z-index: 1; +} + +.menuLateral { + background-color: transparent; + height: 200px; + width: 200px; + position: absolute; + transition: all .2s linear; + left: -300px; + margin-top: 50px; + outline: none; +} + +nav { + width: 100%; + position: absolute; + top: 60px; +} + +nav a { + text-decoration: none; +} + +.link { + background-color: rgb(41, 39, 39); + font-family: Arial, Helvetica, sans-serif; + transition: all .2s linear; + color: #f4f4f9; + border-bottom: 1px solid rgb(63, 62, 62); + height: 30px; + padding-left: 70px; + display: flex; + align-items: center; + border-radius: 20px; + box-shadow: rgb(68, 64, 64) 11px 11px 57px, rgba(68, 64, 64, 0.794) -11px -11px 57px; +} + +.link:hover { + background-color: #ffde59; + color: black; +} + +#check:checked ~ .menuLateral { + transform: translateX(300px); +} + +#check:checked ~ .menuLateral nav a .link { + opacity: 5; + margin-top: 0; + transition-delay: .2s; +} + +.btn-burguer { + width: 60px; + margin: 20px; +} +/*********************MenuHamburger*********************/ \ No newline at end of file diff --git a/src/style/Login.css b/src/style/Login.css new file mode 100644 index 000000000..358ed0ee3 --- /dev/null +++ b/src/style/Login.css @@ -0,0 +1,89 @@ +.logo { + display: flex; + justify-content: center; + width: 55%; + margin-top: -120px; + margin-bottom: 100px; +} + +.formLogin { + width: 45%; + display: flex; + flex-direction: column; + justify-content: center; +} + +.App-header { + background-color: #383838; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +a, .pRegister { + font-size: 18px; + margin-top: 36px; + color: white; + width: 300px; +} + +#pass, #password, #email, #name { + padding: 11px; + margin-top: 20px; + border-radius: 10px; +} + +#login:hover { + background-color: rgb(151, 158, 158); +} + +#login { + text-align: center; + margin: auto; + justify-content: center; + padding: 11px; + width: 100%; + font-family: Arial; + font-weight: bold; + color: rgb(46, 45, 45); + font-size: 15px; + border-radius: 9px; + background-color: #ffde59; + margin-top: 20px; +} + +@media only screen and (min-width: 1024px) { + .logo { + width: 20%; + flex-direction: column; + } + .formLogin { + display: flex; + width: 30%; + padding: 15px; + } + a, .pRegister { + font-size: 20px; + margin-top: 12px; + width: 40%; + text-align: center; + } + #login { + justify-content: center; + padding: 5px; + width: 30%; + font-size: 20px; + border-radius: 9px; + margin-top: 10px; + } + .App-header { + background-color: #383838; + min-height: 100vh; + width: 100%; + position: absolute; + } +} \ No newline at end of file diff --git a/src/style/SingUp.css b/src/style/SingUp.css new file mode 100644 index 000000000..b26f4f015 --- /dev/null +++ b/src/style/SingUp.css @@ -0,0 +1,76 @@ +.logoh { + width: 54px; + margin-left: 70px; + margin-top: 20%; + align-items: center; +} + +.logoS { + display: flex; + justify-content: center; + width: 55%; + margin-top: 15%; + margin-bottom: 20px; +} + +.logop { + width: 54px; + margin-top: 20%; + align-items: center; +} + +.divRegister { + background: rgb(41, 39, 39); + box-shadow: rgb(68, 64, 64) 11px 11px 57px, rgba(68, 64, 64, 0.794) -11px -11px 57px; + width: 70%; + height: 400px; + border-radius: 10px; + margin-top: 3%; + display: flex; + align-items: center; + flex-direction: column; +} + +.role { + margin-bottom: 10px; +} + +.signUp-header { + background-color: #383838; + display: flex; + justify-content: center; +} +#signupBtn:hover { + background-color: rgb(151, 158, 158); +} + +#signupBtn { + text-align: center; + margin: auto; + justify-content: center; + padding: 11px; + width: 100%; + font-family: Arial; + font-weight: bold; + color: rgb(46, 45, 45); + font-size: 15px; + border-radius: 9px; + background-color: #ffde59; + margin-top: 36px; +} + +.form { + width: 70%; + display: flex; + flex-direction: column; + justify-content: center; +} + +.formSig { + display: flex; + justify-content: center; + background-color: #383838; + min-height: 100vh; + font-size: calc(10px + 2vmin); + color: white; +} diff --git a/src/style/Waiter.css b/src/style/Waiter.css new file mode 100644 index 000000000..5c88df049 --- /dev/null +++ b/src/style/Waiter.css @@ -0,0 +1,357 @@ +.nav { + background-color: #383838; + display: flex; + justify-content: space-between; +} +.App { + width: 100%; + position: fixed; + background-color: #383838; + height: 100%; +} +.header { + background-color: #383838; +} + +.All { + background-color: #383838; + position: absolute; + min-height: 100vh; + width: 101vw; +} +.App-waiter { + display: flex; + font-size: calc(10px + 2vmin); + color: white; + width: 100%; +} + +.exit { + height: 43px; + border: none; + display: flex; + margin-top: 6px; + background-color: #383838; + margin-right: 17px; +} + +.logoWaiter { + width: 20%; + margin-top: 72px; + margin-left: 40%; +} + +.AppWaiter { + background-color: #383838; + min-height: 100vh; + font-size: calc(10px + 2vmin); +} + +.btns { + display: flex; + justify-content: center; + position: fixed; + margin-top: 68px; + background-color: rgb(41, 39, 39); + border-radius: 9px; + width: 47%; + margin-left: 23px; +} + +.order { + font-family: Arial; + text-align: center; + float: right; + color: white; + background-color: rgb(41, 39, 39); + border-radius: 9px; + margin: 26px; + width: 45%; + height: 691px; + margin-top: 65px; + overflow: auto; +} + +#logoWaiter { + display: flex; + justify-content: center; +} + +#client { + display: flex; + padding: 11px; + width: 50%; + margin-top: 20px; + justify-content: center; + border-radius: 9px; + align-items: center; + color: #f4f4f9; + background-color: rgb(41, 39, 39); + border: none; + outline: none; + box-shadow: rgb(68, 64, 64) 11px 11px 57px, rgba(68, 64, 64, 0.794) -11px -11px 57px; +} + +#products { + display: flex; + padding: 11px; + width: 80%; + margin-top: 20px; + justify-content: center; + border-radius: 9px; + height: 250px; + outline: none; + color: white; + border: none; + background: rgb(41, 39, 39); + box-shadow: rgb(68, 64, 64) 11px 11px 57px, rgba(68, 64, 64, 0.794) -11px -11px 57px; +} + +#number { + display: flex; + padding: 11px; + width: 25%; + margin-top: 20px; + border-radius: 9px; + margin-left: 40%; + border: none; + color: white; + background-color: rgb(29, 27, 27); + box-shadow: rgb(68, 64, 64) 11px 11px 57px, rgba(68, 64, 64, 0.794) -11px -11px 57px; +} + +h1 { + margin-top: 40px; + font-size: 30px; + font-weight: bold; + font-family: Arial; +} + +.Menu { + background-color: rgb(41, 39, 39); + border-radius: 9px; + width: 47%; + height: 100%; + float: left; + margin-top: 112px; + margin-left: 22px; + text-align: center; + overflow: auto; +} + +.send { + text-align: center; + justify-content: center; + padding: 11px; + width: 80%; + font-family: Arial; + font-weight: bold; + color: rgb(46, 45, 45); + font-size: 15px; + border-radius: 9px; + background-color: #ffde59; + margin-top: 4%; + margin-bottom: 27px; +} + +.imgMenu { + height: 66px; +} +.imgteste { + height: 40px; +} +.btnQuantidade { + border: none; + margin: 20px; + align-items: center; + margin-top: 23px; + height: 45px; + width: 46px; + background-color: #ffde59; + font-size: 35px; + border-radius: 43px; + outline: none; +} + +.btnMenu { + border: none; + margin: 17px; + margin-top: 23px; + height: 63px; + width: 71px; + background-color: #ffde59; + border-radius: 9px; + outline: none; +} + +.divSpan { + display: flex; + justify-content: space-around; +} */ +.divResume { + width: 90%; + height: 70%; + border-radius: 9px; + box-shadow: rgb(68, 64, 64) 11px 11px 57px,rgba(68, 64, 64, 0.794) -11px -11px 57px; + +} + +.Produtos { + + width: 90%; +} + +ul { + font-size: 21px; + display: flex; +} + +.teste { + display: flex; + justify-content: space-between; + width: 440px; + margin-left: 55px; + margin: 8px; + box-shadow: rgb(68 64 64) 11px 11px 57px, rgb(68 64 64 / 79%) -11px -11px 57px; + border-radius: 9px; + padding: 10px; + margin-top: 9px; + align-items: center; +} + +.amount { + width: 80px; +} + +.menuItens { + width: 90%; + height: 589px; + margin: 5px; +} + +.file { + background: transparent; + border: none; +} +.pedidos { + box-shadow: rgb(68 64 64) 11px 11px 57px, rgb(68 64 64 / 79%) -11px -11px 57px; + border-radius: 9px; + padding: 8px; + margin-top: 10px; + margin-left: 24px; + width: 402px; + font-size: 20px; + color: white; +} + +.nameProducts { + margin-left: -10px; + width: 150px; +} + +.nameProduct { + margin-left: -10px; + width: 150px; + padding-left: 50px; +} + + +.complement { + margin-top: -30px; + width: 50px; +} + +.complemente { + width: 50px; + margin-left: -200px; + margin-top: 10px; +} + +.spanQuantidade{ + display: flex; + justify-content: space-between; + width: 420px; + padding: 20px; + font-size: 20px; + color: white; +} + +.divOrder { + display: flex; + justify-content: space-around; + color:#f4f4f9; +} + +.Map{ + display: flex; + justify-content: space-around; + margin-bottom: 22px; +} +/*********************MenuHamburger*********************/ + +#check { + display: none; +} + +#icone { + cursor: pointer; + padding: 15px; + position: absolute; + z-index: 1; +} + +.menuLateral { + background-color: transparent; + height: 200px; + width: 200px; + position: absolute; + transition: all .2s linear; + left: -300px; + margin-top: 50px; + outline: none; +} + +nav { + width: 100%; + position: absolute; + top: 60px; +} + +nav a { + text-decoration: none; +} + +.link { + background-color: rgb(41, 39, 39); + font-family: Arial, Helvetica, sans-serif; + transition: all .2s linear; + color: #f4f4f9; + border-bottom: 1px solid rgb(63, 62, 62); + height: 30px; + padding-left: 70px; + display: flex; + align-items: center; + border-radius: 20px; + box-shadow: rgb(68, 64, 64) 11px 11px 57px, rgba(68, 64, 64, 0.794) -11px -11px 57px; +} + +.link:hover { + background-color: #ffde59; + color: black; +} + +#check:checked ~ .menuLateral { + transform: translateX(300px); +} + +#check:checked ~ .menuLateral nav a .link { + opacity: 5; + margin-top: 0; + transition-delay: .2s; +} + +.btn-burguer { + width: 60px; + margin: 20px; +} +/*********************MenuHamburger*********************/