Danil/Internet_Programming_PIbd-21_Putincev_D_M
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Лабораторная 4

Browse Source
This commit is contained in:
Даниил Путинцев 2024-01-06 01:14:07 +04:00
parent 9d24162cfe
commit 0655380703
41 changed files with 4981 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
Lab4/.eslintrc.cjs Normal file
View File

@ -0,0 +1,24 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'airbnb-base',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 12, sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
'indent': 'off',
'no-console': 'off',
'arrow-body-style': 'off',
'implicit-arrow-linebreak': 'off',
},
}

24
Lab4/.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

29
Lab4/README.md Normal file
View File

@ -0,0 +1,29 @@
#### Окружение:
- nodejs 18;
- VSCode;
- ESLint плагин для VSCode;
- для отладки необходимы бразузеры Chrome или Edge.
#### Создание пустого проекта:
```commandline
npm create vite@latest ./ -- --template react
```
#### Установка зависимостей:
```commandline
npm install
```
#### Запуск проекта:
```commandline
npm run dev
```
#### Сборка проекта:
```commandline
npm run build
```

14
Lab4/index.html Normal file
View File

@ -0,0 +1,14 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image" href="/src/assets/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FastFood</title>
</head>
<body>
<div id="root" class="h-100 d-flex flex-column"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

14
Lab4/jsconfig.json Normal file
View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Node",
"target": "ES2020",
"jsx": "react",
"strictNullChecks": true,
"strictFunctionTypes": true
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}

4344
Lab4/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

32
Lab4/package.json Normal file
View File

@ -0,0 +1,32 @@
{
"name": "lec4",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.18.0",
"bootstrap": "^5.3.2",
"react-bootstrap": "^2.9.1",
"react-bootstrap-icons": "^1.10.3",
"prop-types": "^15.8.1"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"vite": "^4.4.5"
}
}

BIN
Lab4/public/BackgroundAboutUs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
Lab4/public/BackgroundBasket.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
Lab4/public/BackgroundOurContacts.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
Lab4/public/BakcgroundRegistration.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

3
Lab4/public/favicon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 463 B

0
Lab4/src/App.css Normal file
View File

24
Lab4/src/App.jsx Normal file
View File

@ -0,0 +1,24 @@
import PropTypes from 'prop-types';
import { Container } from 'react-bootstrap';
import { Outlet } from 'react-router-dom';
import './App.css';
import Footer from './components/footer/Footer.jsx';
import Navigation from './components/navigation/Navigation.jsx';
const App = ({ routes }) => {
return (
<>
<Navigation routes={routes}></Navigation>
<Container className='px-0' as="main" fluid>
<Outlet />
</Container>
<Footer />
</>
);
};
App.propTypes = {
routes: PropTypes.array,
};
export default App;

BIN
Lab4/src/assets/Background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 414 KiB

BIN
Lab4/src/assets/BackgroundAboutUs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
Lab4/src/assets/BackgroundBasket.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
Lab4/src/assets/BackgroundOurContacts.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
Lab4/src/assets/BakcgroundRegistration.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
Lab4/src/assets/Burger.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
Lab4/src/assets/Cola.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
Lab4/src/assets/Man1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

BIN
Lab4/src/assets/Salat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
Lab4/src/assets/Shaurma.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 139 KiB

BIN
Lab4/src/assets/ShaurmaForMenu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
Lab4/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

5
Lab4/src/components/footer/Footer.css Normal file
View File

@ -0,0 +1,5 @@
.my-footer {
background-color: #9c9c9c;
height: 32px;
color: #fff;
}

16
Lab4/src/components/footer/Footer.jsx Normal file
View File

@ -0,0 +1,16 @@
import './Footer.css';
const Footer = () => {
const year = new Date().getFullYear();
return (
<footer className="my-footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Fastest Food, {year}
Время работы:
ПН-ПТ:10-19
СБ-ВС:12-17
</footer>
);
};
export default Footer;

12
Lab4/src/components/navigation/Navigation.css Normal file
View File

@ -0,0 +1,12 @@
.my-navbar {
background-color: #161010 !important;
}
.my-navbar .link a:hover {
text-decoration: underline !important;
}
.my-navbar .logo {
width: 30px;
height: 30px;
}

41
Lab4/src/components/navigation/Navigation.jsx Normal file
View File

@ -0,0 +1,41 @@
import PropTypes from 'prop-types';
import { Container, Nav, Navbar } from 'react-bootstrap';
import { Link, useLocation } from 'react-router-dom';
import logo from '../../assets/logo.png';
import './Navigation.css';
const Navigation = ({ routes }) => {
const location = useLocation();
const indexPageLink = routes.filter((route) => route.index === false).shift();
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
return (
<header>
<Navbar expand='md' bg='dark' data-bs-theme='dark' className='my-navbar'>
<Container fluid>
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
<img src={logo} className='d-inline-block align-top mx-2 logo' />
FastFood
</Navbar.Brand>
<Navbar.Toggle aria-controls='main-navbar' />
<Navbar.Collapse id='main-navbar'>
<Nav className='me-auto link' activeKey={location.pathname}>
{
pages.map((page) =>
<Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
{page.title}
</Nav.Link>)
}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar >
</header>
);
};
Navigation.propTypes = {
routes: PropTypes.array,
};
export default Navigation;

27
Lab4/src/index.css Normal file
View File

@ -0,0 +1,27 @@
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1.1em;
}
.btn-mw {
width: 100%;
}
@media (min-width: 768px) {
.btn-mw {
width: 30%;
}
}
@media (min-width: 1200px) {
.btn-mw {
width: 20%;
}
}

63
Lab4/src/main.jsx Normal file
View File

@ -0,0 +1,63 @@
import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import App from './App.jsx';
import './index.css';
import '../style.css';
import ErrorPage from './pages/ErrorPage.jsx';
import AboutUs from './pages/About-us.jsx';
import Home from './pages/Home.jsx';
import Contacts from './pages/Contacts.jsx';
import AllRegistration from './pages/AllRegistration.jsx';
import Meal from './pages/Meal.jsx';
import Menu from './pages/Menu.jsx';
const routes = [
{
index: true,
path: '/',
element: <Home />,
title: 'Главная страница',
},
{
path: '/About-us',
element: <AboutUs />,
title: 'О нас',
},
{
path: '/Contacts',
element: <Contacts />,
title: 'Наши контакты',
},
{
path: '/AllRegistration',
element: <AllRegistration />,
title: 'Регистрация',
},
{
path: '/Menu',
element: <Menu />,
title: 'Меню',
},
{
path: '/Meal',
element: <Meal />,
title: 'Товар',
},
];
const router = createBrowserRouter([
{
path: '/',
element: <App routes={routes} />,
children: routes,
errorElement: <ErrorPage />,
},
]);
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>,
);

32
Lab4/src/pages/About-us.jsx Normal file
View File

@ -0,0 +1,32 @@
import man from '../assets/Man1.png';
const AboutUs = () => {
return (
<>
<div className="allAboutUs d-flex flex-fill align-items-center justify-content-center min-vh-100">
<div className="bg-white rounded-5 p-5">
<h1 className="text-center">О нас</h1>
<div className="d-flex flex-column flex-md-row justify-content-evenly align-items-center">
<p className="text-center">
С самого детства мы
<br />
хотели открыть
<br />
ресторан и шли к нашей
<br />
мечте. На пути было
<br />
много трудностей но
<br />
мы справились
<br />с каждой
</p>
<img className="w-50 h-50" src={man} alt="" />
</div>
</div>
</div>
</>
);
};
export default AboutUs;

20
Lab4/src/pages/AllRegistration.jsx Normal file
View File

@ -0,0 +1,20 @@
const AllRegistration = () => {
return (
<>
<div className="allRegistration d-flex align-items-center justify-content-center min-vh-100">
<div className="bg-white rounded-5 p-5">
<h1 className="text-center">Регистрация/Вход</h1>
<p>Почта</p>
<input type="text" defaultValue="" />
<p className="mt-3">Пароль</p>
<input type="text" defaultValue="" />
<button type="button" className="mt-3">
Войти
</button>
</div>
</div>
</>
);
};
export default AllRegistration;

29
Lab4/src/pages/Contacts.jsx Normal file
View File

@ -0,0 +1,29 @@
const Contacts = () => {
return (
<>
<div className="allOurContacts d-flex flex-fill align-items-center justify-content-center min-vh-100">
<div className="bg-white rounded-5 p-5">
<h1 className="text-center mb-5">Наши контакты</h1>
<div className="justify-content-evenly align-items-center">
<div className="row">
<div className="col text-center">Адресс</div>
<div className="col text-center">Телефон</div>
<div className="col text-center">Соцсети</div>
</div>
<div className="row mt-3">
<div className="col text-center">Ул. Врача михайлова 65</div>
<div className="col text-center">+79439419513</div>
<div className="col text-center">
ВК: Fastest Food
<br />
ТГ: Fastest Food
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default Contacts;

19
Lab4/src/pages/ErrorPage.jsx Normal file
View File

@ -0,0 +1,19 @@
import { Alert, Button, Container } from 'react-bootstrap';
import { useNavigate } from 'react-router-dom';
const ErrorPage = () => {
const navigate = useNavigate();
return (
<Container fluid className="p-2 row justify-content-center">
<Container className='col-md-6'>
<Alert variant="danger">
Страница не найдена
</Alert>
<Button className="w-25 mt-2" variant="primary" onClick={() => navigate(-1)}>Назад</Button>
</Container>
</Container>
);
};
export default ErrorPage;

29
Lab4/src/pages/Home.jsx Normal file
View File

@ -0,0 +1,29 @@
import shaurma from '../assets/Shaurma.png';
const Home = () => {
return (
<>
<div className="row d-flex align-content-center flex-fill mx-0 min-vh-100">
<div className="col-lg-6 col-sm-12 d-flex align-items-center justify-content-center">
<div className="offer p-5 rounded-5 d-flex flex-column justify-content-center">
<p className="text-center font-size">
НОВИНКУ!!!
<br />
за 240 рублей
<br />
куриная шаурма
</p>
<button type="button" className="btn btn-danger rounded-pill">
Купить
</button>
</div>
</div>
<div className="col-lg-6 col-sm-12 d-flex align-content-center justify-content-center py-4">
<img className="im w-100" src={shaurma} />
</div>
</div>
</>
);
};
export default Home;

28
Lab4/src/pages/Meal.jsx Normal file
View File

@ -0,0 +1,28 @@
import shaurma from '../assets/Shaurma.png';
const Meal = () => {
return (
<>
<div className="allAboutUs d-flex flex-fill align-items-center justify-content-center min-vh-100">
<div className="bg-white rounded-5 p-5">
<h1 className="text-center">Шаурма</h1>
<div className="d-flex flex-column flex-md-row justify-content-evenly align-items-center">
<p className="text-center">
Вкуснейшая шаурма сделанная из специально выращенной курицы, овощей,
<br />
сбираемых на плантации специально для нашей компании
</p>
<img className="w-50 h-50" src={shaurma} />
</div>
<div className="d-flex justify-content-center">
<a href="basket.html" className="btn btn-danger">
Добавить в корзину
</a>
</div>
</div>
</div>
</>
);
};
export default Meal;

89
Lab4/src/pages/Menu.jsx Normal file
View File

@ -0,0 +1,89 @@
import Shaurma from '../assets/ShaurmaForMenu.png';
import Cola from '../assets/Cola.png';
import Salat from '../assets/Salat.png';
import Burger from '../assets/Burger.png';
const Menu = () => {
return (
<>
<div className="d-flex justify-content-center min-vh-100 align-items-center">
<div className="row">
<div className="col-3">
<div className="d-flex justify-content-center my-2">
<img className="Menu" src={Shaurma}/>
</div>
<div className="text-center">
<p>
Шаурма
</p>
<p>
200
</p>
<div className="text-center">
<button className="btn btn-danger">
Купить
</button>
</div>
</div>
</div>
<div className="col-3">
<div className="d-flex justify-content-center my-2">
<img className="Menu" src={Salat}/>
</div>
<div className="text-center">
<p>
Салат
</p>
<p>
100
</p>
<div className="text-center">
<button className="btn btn-danger">
Купить
</button>
</div>
</div>
</div>
<div className="col-3">
<div className="d-flex justify-content-center my-2">
<img className="Menu" src={Cola}/>
</div>
<div className="text-center">
<p>
Кола
</p>
<p>
60
</p>
<div className="text-center">
<button className="btn btn-danger">
Купить
</button>
</div>
</div>
</div>
<div className="col-3">
<div className="d-flex justify-content-center my-2">
<img className="Menu" src={Burger}/>
</div>
<div className="text-center">
<p>
Бургер
</p>
<p>
150
</p>
<div className="text-center">
<button className="btn btn-danger">
Купить
</button>
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default Menu;

50
Lab4/style.css Normal file
View File

@ -0,0 +1,50 @@
main{
background-color: bisque;
}
.offer{
background-color: #ffffff;
}
.time{
font-size: 14px;
}
p{
font-size: 16px;
font-family: Inter;
}
.allRegistration{
background-image: url("/BakcgroundRegistration.png");
background-size: cover;
}
.allAboutUs{
background-image: url("/BackgroundAboutUs.png");
background-size: cover;
}
.allOurContacts{
background-image: url("/BackgroundOurContacts.png");
background-size: cover;
}
@media (max-width: 768px){
.allAboutUs{
background-image: none;
background-color: #ffffff;
}
.allOurContacts{
background-image: none;
background-color: #ffffff;
}
.allRegistration{
background-image: none;
background-color: #ffffff;
}
.allAdmin{
background-image: none;
background-color: #ffffff;
}
}
.Menu{
width: 250px;
height: 220px;
}
#image-preview{
width: 200px;
}

13
Lab4/vite.config.js Normal file
View File

@ -0,0 +1,13 @@
/* eslint-disable import/no-extraneous-dependencies */
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
build: {
sourcemap: true,
chunkSizeWarningLimit: 1024,
emptyOutDir: true,
},
});