laba4
This commit is contained in:
parent
056cac6cc8
commit
51d0c67bdd
File diff suppressed because one or more lines are too long
21
lab4/.eslintrc.cjs
Normal file
21
lab4/.eslintrc.cjs
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: { browser: true, es2020: true },
|
||||||
|
extends: [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:react/recommended',
|
||||||
|
'plugin:react/jsx-runtime',
|
||||||
|
'plugin:react-hooks/recommended',
|
||||||
|
],
|
||||||
|
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||||
|
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||||
|
settings: { react: { version: '18.2' } },
|
||||||
|
plugins: ['react-refresh'],
|
||||||
|
rules: {
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
'react/prop-types': 'off',
|
||||||
|
},
|
||||||
|
}
|
||||||
21
lab4/.eslintrc.json
Normal file
21
lab4/.eslintrc.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es2021": true,
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": "airbnb-base",
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": 12,
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"quotes": "off",
|
||||||
|
"indent": "off",
|
||||||
|
"no-console": "off",
|
||||||
|
"no-use-before-define": "off",
|
||||||
|
"no-alert": "off",
|
||||||
|
"no-restricted-globals": "off",
|
||||||
|
"quote-props": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
24
lab4/.gitignore
vendored
Normal file
24
lab4/.gitignore
vendored
Normal 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?
|
||||||
8
lab4/README.md
Normal file
8
lab4/README.md
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
# React + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
17
lab4/index.html
Normal file
17
lab4/index.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Flora</title>
|
||||||
|
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||||
|
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
|
||||||
|
<link rel="stylesheet" href="./src/assets/styles/style.css">
|
||||||
|
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body class="d-flex flex-column h-100" style="min-height: 100vh;">
|
||||||
|
<div id="root" class="d-flex flex-column h-100" style="flex: 1 0 auto"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4183
lab4/package-lock.json
generated
Normal file
4183
lab4/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
33
lab4/package.json
Normal file
33
lab4/package.json
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"name": "project",
|
||||||
|
"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": {
|
||||||
|
"@fortawesome/fontawesome-free": "^6.5.1",
|
||||||
|
"@popperjs/core": "^2.11.8",
|
||||||
|
"bootstrap": "^5.3.2",
|
||||||
|
"eslint-config-airbnb-base": "^15.0.0",
|
||||||
|
"path": "^0.12.7",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.19.0",
|
||||||
|
"url": "^0.11.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.37",
|
||||||
|
"@types/react-dom": "^18.2.15",
|
||||||
|
"@vitejs/plugin-react": "^4.2.0",
|
||||||
|
"eslint": "^8.53.0",
|
||||||
|
"eslint-plugin-react": "^7.33.2",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.4",
|
||||||
|
"vite": "^5.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
7
lab4/src/App.jsx
Normal file
7
lab4/src/App.jsx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import Navigation from "./components/navigation/Navigation";
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return <Navigation />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
BIN
lab4/src/assets/Images/flower.jpg
Normal file
BIN
lab4/src/assets/Images/flower.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
lab4/src/assets/Images/logo.png
Normal file
BIN
lab4/src/assets/Images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
lab4/src/assets/Images/rose.jpg
Normal file
BIN
lab4/src/assets/Images/rose.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
61
lab4/src/assets/styles/style.css
Normal file
61
lab4/src/assets/styles/style.css
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
header nav {
|
||||||
|
background-color: #e8fae0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
header nav {
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand img {
|
||||||
|
margin-left: 235px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.navbar-brand img {
|
||||||
|
margin-left: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 577px) and (max-width: 992px) {
|
||||||
|
.navbar-brand img {
|
||||||
|
margin-left: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 993px) and (max-width: 1200px) {
|
||||||
|
.navbar-brand img {
|
||||||
|
margin-left: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1201px) {
|
||||||
|
.navbar-brand img {
|
||||||
|
margin-left: 235px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav {
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
background-color: #7bca8c !important;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 130px;
|
||||||
|
height: 35px;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #e8fae0;
|
||||||
|
color: #686464;
|
||||||
|
}
|
||||||
18
lab4/src/components/layout/Layout.jsx
Normal file
18
lab4/src/components/layout/Layout.jsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { Outlet } from "react-router-dom";
|
||||||
|
import Header from "./components/Header";
|
||||||
|
import Footer from "./components/Footer";
|
||||||
|
|
||||||
|
function Layout() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header />
|
||||||
|
<main>
|
||||||
|
{/* <Outlet /> - место, куда мы подставляем страницы */}
|
||||||
|
<Outlet />
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
9
lab4/src/components/layout/components/Footer.jsx
Normal file
9
lab4/src/components/layout/components/Footer.jsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||||
|
Все права защищены © 2023-2024
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
37
lab4/src/components/layout/components/Header.jsx
Normal file
37
lab4/src/components/layout/components/Header.jsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import Logo from "../../../assets/Images/logo.png";
|
||||||
|
|
||||||
|
function Header() {
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<nav className="navbar navbar-expand-md">
|
||||||
|
<div className="container-fluid">
|
||||||
|
<Link className="navbar-brand" to="/">
|
||||||
|
<img src={Logo} alt="logo" width="128" />
|
||||||
|
</Link>
|
||||||
|
<button className="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#navbarNav"
|
||||||
|
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span className="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div className="navbar-collapse collapse justify-content-start" id="navbarNav">
|
||||||
|
<div className="navbar-nav">
|
||||||
|
<Link className="nav-link" to="/">Каталог</Link>
|
||||||
|
<Link className="nav-link" to="/aboutUs">О нас</Link>
|
||||||
|
<Link className="nav-link" to="/paymentAndDelivery">Оплата и доставка</Link>
|
||||||
|
<Link className="nav-link" to="/contacts">Контакты</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="navbar-collapse collapse justify-content-end" id="navbarNav">
|
||||||
|
<div className="navbar-nav">
|
||||||
|
<Link className="btn" to="/login">Войти</Link>
|
||||||
|
<Link className="btn" to="/basket">Корзина</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Header;
|
||||||
42
lab4/src/components/navigation/Navigation.jsx
Normal file
42
lab4/src/components/navigation/Navigation.jsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import { BrowserRouter, Route, Routes } from 'react-router-dom';
|
||||||
|
import Layout from '../layout/Layout';
|
||||||
|
import Admin from "../screens/Admin/Admin";
|
||||||
|
import Basket from "../screens/Basket/Basket";
|
||||||
|
import Home from '../screens/Home/Home';
|
||||||
|
import PaymentAndDelivery from "../screens/PaymentAndDelivery/PaymentAndDelivery";
|
||||||
|
import Registration from "../screens/Registration/Registration";
|
||||||
|
import AboutUs from './../screens/AboutUs/AboutUs';
|
||||||
|
import Login from './../screens/Login/Login';
|
||||||
|
import MakingAnOrder from './../screens/MakingAnOrder/MakingAnOrder';
|
||||||
|
import PageEdit from './../screens/PageEdit/PageEdit';
|
||||||
|
import PersonalAccount from './../screens/PersonalAccount/PersonalAccount';
|
||||||
|
import RecoveryPassword from './../screens/RecoveryPassword/RecoveryPassword';
|
||||||
|
import Contacts from "../screens/Contacts/Contacts";
|
||||||
|
|
||||||
|
// Привязываем компоненты-страницы к путям
|
||||||
|
function Navigation() {
|
||||||
|
return (
|
||||||
|
<BrowserRouter>
|
||||||
|
<Routes>
|
||||||
|
{/* Весь сайт оборачиваем в шаблон <Layout /> */}
|
||||||
|
<Route path="/" element={<Layout />}>
|
||||||
|
<Route path="/aboutUs" element={<AboutUs />} />
|
||||||
|
<Route path="/admin" element={<Admin />} />
|
||||||
|
<Route path="/basket" element={<Basket />} />
|
||||||
|
<Route path="/contacts" element={<Contacts />} />
|
||||||
|
<Route path="/" element={<Home />} />
|
||||||
|
<Route path="/paymentAndDelivery" element={<PaymentAndDelivery />} />
|
||||||
|
<Route path="/makingAnOrder" element={<MakingAnOrder />} />
|
||||||
|
<Route path="/pageEdit" element={<PageEdit />} />
|
||||||
|
<Route path="/personalAccount" element={<PersonalAccount />} />
|
||||||
|
<Route path="/recoveryPassword" element={<RecoveryPassword />} />
|
||||||
|
|
||||||
|
<Route path="/login" element={<Login />} />
|
||||||
|
<Route path="/registration" element={<Registration />} />
|
||||||
|
</Route>
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Navigation;
|
||||||
42
lab4/src/components/screens/AboutUs/AboutUs.jsx
Normal file
42
lab4/src/components/screens/AboutUs/AboutUs.jsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
function AboutUs() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="d-flex justify-content-center align-items-center">
|
||||||
|
<h1 className="text font-weight-bold">О компании</h1>
|
||||||
|
</div>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<h2 className="font-weight-bold" style={{ fontSize: "35px", marginLeft: "10px", marginTop: "10px" }}>Наши
|
||||||
|
преимущества:</h2>
|
||||||
|
<ul>
|
||||||
|
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> поставляем
|
||||||
|
цветы напрямую из Голландии</li>
|
||||||
|
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}>
|
||||||
|
цветы всегда свежие</li>
|
||||||
|
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> быстрая
|
||||||
|
отправка</li>
|
||||||
|
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> быстрая
|
||||||
|
доставка (в среднем 1 час)</li>
|
||||||
|
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> удобная
|
||||||
|
оплата через сайт</li>
|
||||||
|
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> большой
|
||||||
|
ассортимент в наличии в Ульяновске</li>
|
||||||
|
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> после
|
||||||
|
оплаты заказа на эл. почту Вам приходит чек, подтверждающий Вашу покупку</li>
|
||||||
|
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> работаем
|
||||||
|
почти 7 лет</li>
|
||||||
|
</ul>
|
||||||
|
<p></p>
|
||||||
|
<p></p>
|
||||||
|
<p></p>
|
||||||
|
<p style={{ fontSize: "25px", marginLeft: "10px", marginTop: "10px" }}>За время работы
|
||||||
|
магазина, мы уже продали более 50 000 букетов.</p>
|
||||||
|
<p style={{ fontSize: "25px", marginLeft: "10px", marginTop: "10px" }}>Также у нас есть
|
||||||
|
магазин в Ульяновске, где весь товар можно увидеть в живую!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AboutUs;
|
||||||
17
lab4/src/components/screens/Admin/Admin.jsx
Normal file
17
lab4/src/components/screens/Admin/Admin.jsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import AdminTable from "./components/AdminTable";
|
||||||
|
|
||||||
|
function Admin() {
|
||||||
|
return (
|
||||||
|
<div className="container-fluid text-center p-2">
|
||||||
|
<h1 className="text-center font-weight-bold">Панель администратора</h1>
|
||||||
|
<div className="btn-group" role="group">
|
||||||
|
<Link className="btn" to="/pageEdit">Добавить товар</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AdminTable />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Admin;
|
||||||
29
lab4/src/components/screens/Admin/components/AdminTable.jsx
Normal file
29
lab4/src/components/screens/Admin/components/AdminTable.jsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import AdminTableRow from "./AdminTableRow";
|
||||||
|
|
||||||
|
function AdminTable() {
|
||||||
|
return (
|
||||||
|
<div className="w-100">
|
||||||
|
<h2 className="text-center font-weight-bold" style={{paddingTop: "19px"}}>Таблица данных</h2>
|
||||||
|
<table id="items-table" className="table table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">№</th>
|
||||||
|
<th scope="col" className="w-25">Товар</th>
|
||||||
|
<th scope="col" className="w-25">Цена</th>
|
||||||
|
<th scope="col" className="w-25">Количество</th>
|
||||||
|
<th scope="col" className="w-25">Сумма</th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<AdminTableRow />
|
||||||
|
<AdminTableRow />
|
||||||
|
<AdminTableRow />
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AdminTable;
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
function AdminTableRow() {
|
||||||
|
return (
|
||||||
|
<tr id="line-1">
|
||||||
|
<td>1</td>
|
||||||
|
<td>Новогодний букет</td>
|
||||||
|
<td>1003.50</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>5017.50</td>
|
||||||
|
<td>
|
||||||
|
<Link to="/pageEdit">
|
||||||
|
<i className="fa-solid fa-pencil"></i>
|
||||||
|
</Link>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<Link to="#">
|
||||||
|
<i className="fa-solid fa-trash"></i>
|
||||||
|
</Link>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AdminTableRow;
|
||||||
30
lab4/src/components/screens/Basket/Basket.jsx
Normal file
30
lab4/src/components/screens/Basket/Basket.jsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import BasketItem from "./components/BasketItem";
|
||||||
|
|
||||||
|
function Basket() {
|
||||||
|
return (
|
||||||
|
<div className="container">
|
||||||
|
<div className="d-flex justify-content-center align-items-center">
|
||||||
|
<h1 className="text-success font-weight-bold">Корзина</h1>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-10">
|
||||||
|
<BasketItem />
|
||||||
|
<BasketItem />
|
||||||
|
<BasketItem />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex justify-content-start align-items-center">
|
||||||
|
<div className="text-dark font-weight-bold" style={{fontSize: "24px"}}>
|
||||||
|
Сумма заказа:
|
||||||
|
</div>
|
||||||
|
<div className="text-end text-success" style={{ fontSize: "24px" }}>
|
||||||
|
Сумма ₽
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Link className="btn" style={{marginLeft: "25px", marginBottom: "10px"}} to="/makingAnOrder">Оплатить</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Basket;
|
||||||
43
lab4/src/components/screens/Basket/components/BasketItem.jsx
Normal file
43
lab4/src/components/screens/Basket/components/BasketItem.jsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import Image from "../../../../assets/Images/rose.jpg";
|
||||||
|
|
||||||
|
function BasketItem() {
|
||||||
|
return (
|
||||||
|
<div className="card rounded-3 mb-4">
|
||||||
|
<div className="card-body p-4">
|
||||||
|
<div className="row d-flex justify-content-between align-items-center">
|
||||||
|
<div className="col-md-2 col-lg-2 col-xl-2">
|
||||||
|
<img src={Image} className="img-fluid rounded-3" alt="Flower" />
|
||||||
|
</div>
|
||||||
|
<div className="col-md-auto col-lg-3 col-xl-3">
|
||||||
|
<p className="lead fw-normal mb-2">Название</p>
|
||||||
|
<p><span className="text-muted">Описание</span></p>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-3 col-lg-3 col-xl-1 d-flex">
|
||||||
|
<button className="btn px-1"
|
||||||
|
// onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
|
||||||
|
>
|
||||||
|
<i className="fas fa-minus"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<input id="form1" min="0" name="quantity" defaultValue="2" type="number" className="form-control" style={{ width: "70px" }} />
|
||||||
|
|
||||||
|
<button className="btn px-1"
|
||||||
|
// onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
|
||||||
|
>
|
||||||
|
<i className="fas fa-plus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-auto col-lg-2 col-xl-2 offset-lg-1">
|
||||||
|
<h5 className="mb-0">Цена ₽</h5>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-auto col-lg-0 col-xl-0 text-end">
|
||||||
|
<Link to="#" className="text-muted"><i className="fas fa-delete-left fa-lg"></i></Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BasketItem;
|
||||||
22
lab4/src/components/screens/Contacts/Contacts.jsx
Normal file
22
lab4/src/components/screens/Contacts/Contacts.jsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
function Contacts() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="d-flex justify-content-center align-items-center">
|
||||||
|
<h1 className="text-success font-weight-bold">Контакты</h1>
|
||||||
|
</div>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<div className="div d-flex justify-content-center">
|
||||||
|
<iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3Afa2d61fb6063802ddf9f646ff254a8764a6dfd399031b696dbda0a7c93474211&source=constructor" className="img-fluid" style={{width: "980px", height: "505px"}}></iframe>
|
||||||
|
</div>
|
||||||
|
<a href="tel:+79273456567" className="text-dark" style={{fontSize: "25px", marginLeft: "10px", marginTop: "10px"}}>+7 (927) 345 65 67</a>
|
||||||
|
<h2 className="fw-bold" style={{ fontSize: "35px", marginLeft: "10px", marginTop: "10px" }}>г.Ульяновск, ул.Гончарова, 40</h2>
|
||||||
|
<p style={{fontSize: "25px", marginLeft: "10px", marginTop: "10px"}}>Пн-Пт: 9:00 - 20:00</p>
|
||||||
|
<p style={{fontSize: "25px", marginLeft: "10px", marginTop: "10px"}}>Сб-Вс: 10:00 - 19:00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Contacts;
|
||||||
20
lab4/src/components/screens/Home/Home.jsx
Normal file
20
lab4/src/components/screens/Home/Home.jsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import Card from "./components/Card";
|
||||||
|
|
||||||
|
function Home() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="d-flex justify-content-center align-items-center">
|
||||||
|
<h1 className="text-success font-weight-bold">Каталог</h1>
|
||||||
|
</div>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row" id="catalog">
|
||||||
|
<Card />
|
||||||
|
<Card />
|
||||||
|
<Card />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Home;
|
||||||
20
lab4/src/components/screens/Home/components/Card.jsx
Normal file
20
lab4/src/components/screens/Home/components/Card.jsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import CardImage from "../../../../assets/Images/flower.jpg";
|
||||||
|
|
||||||
|
function Card() {
|
||||||
|
return (
|
||||||
|
<div className="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
|
||||||
|
<div className="card">
|
||||||
|
<img src={CardImage} className="card-img-top" alt="Product Image" />
|
||||||
|
<div className="card-body">
|
||||||
|
<h5 className="card-title">Новогодний букет</h5>
|
||||||
|
</div>
|
||||||
|
<div className="card-footer">
|
||||||
|
<div className="text-success font-weight-bold">Цена 1003.50₽</div>
|
||||||
|
<button className="btn">В корзину</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Card;
|
||||||
49
lab4/src/components/screens/Login/Login.jsx
Normal file
49
lab4/src/components/screens/Login/Login.jsx
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
function Login() {
|
||||||
|
return (
|
||||||
|
<section className="h-100">
|
||||||
|
<div className="mask d-flex align-items-center h-100 gradient-custom-3">
|
||||||
|
<div className="container h-100">
|
||||||
|
<div className="row d-flex justify-content-center align-items-center h-100">
|
||||||
|
<div className="col-12 col-md-9 col-lg-7 col-xl-6">
|
||||||
|
<div className="card" style={{ borderRadius: "15px", borderColor: "border-color:rgb(95, 206, 123)" }}>
|
||||||
|
<div className="card-body p-5">
|
||||||
|
<h2 className="text-success text-center mb-5">Войти</h2>
|
||||||
|
|
||||||
|
<form>
|
||||||
|
|
||||||
|
<div className="form-outline mb-4">
|
||||||
|
<input type="email" id="form3Example3cg" className="form-control form-control-lg" />
|
||||||
|
<label className="form-label" htmlFor="form3Example3cg">Ваш адрес электронной почты</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-outline mb-4">
|
||||||
|
<input type="password" id="form3Example4cg" className="form-control form-control-lg" />
|
||||||
|
<label className="form-label" htmlFor="form3Example4cg">Пароль</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-center text-muted mb-0">Забыли пароль? <Link to="/recoveryPassword"
|
||||||
|
className="fw-bold text-body"><u>Восстановление пароля</u></Link></p>
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-center">
|
||||||
|
<Link className="btn" to="/personalAccount">Войти</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-center text-muted mb-0">У вас нет аккаунта? <Link to="/registration"
|
||||||
|
className="fw-bold text-body"><u>Регистрация</u></Link></p>
|
||||||
|
|
||||||
|
<p className="text-center"><Link className="fw-bold text-body" to="/admin">Администратор</Link></p>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Login;
|
||||||
87
lab4/src/components/screens/MakingAnOrder/MakingAnOrder.jsx
Normal file
87
lab4/src/components/screens/MakingAnOrder/MakingAnOrder.jsx
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
function MakingAnOrder() {
|
||||||
|
return (
|
||||||
|
<section className="h-100">
|
||||||
|
<div className="mask d-flex align-items-center h-100 gradient-custom-3">
|
||||||
|
<div className="container h-100">
|
||||||
|
<div className="row d-flex justify-content-center align-items-center h-100">
|
||||||
|
<div className="col-12 col-md-9 col-lg-7 col-xl-6">
|
||||||
|
<div className="card" style="border-radius: 15px; border-color:#7bca8c;">
|
||||||
|
<div className="card-body p-5">
|
||||||
|
<h2 className="text-success text-center mb-5">Оформление заказа</h2>
|
||||||
|
<form>
|
||||||
|
<div className="form-outline mb-4">
|
||||||
|
<input type="text" id="form3Example1cg" className="form-control form-control-lg" />
|
||||||
|
<label className="form-label" htmlFor="form3Example1cg">Ваше имя</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-outline mb-4">
|
||||||
|
<input type="tel" id="form3Example5cg" className="form-control form-control-lg" />
|
||||||
|
<label className="form-label" htmlFor="form3Example5cg">Номер телефона</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label className="form-check-label" htmlFor="creditCard">Вариант получения</label>
|
||||||
|
|
||||||
|
<div className="form-check mb-4">
|
||||||
|
<input className="form-check-input" type="radio" name="deliveryMethod" id="selfPickup"
|
||||||
|
defaultValue="selfPickup" />
|
||||||
|
<label className="form-check-label" htmlFor="selfPickup">Самовывоз</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-check mb-4">
|
||||||
|
<input className="form-check-input" type="radio" name="deliveryMethod" id="delivery" defaultValue="delivery" />
|
||||||
|
<label className="form-check-label" htmlFor="delivery">Доставка</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-outline mb-4" id="deliveryAddress" style="display: none;">
|
||||||
|
<input type="text" id="form3ExampleAddress" className="form-control form-control-lg" />
|
||||||
|
<label className="form-label" htmlFor="form3ExampleAddress">Ваш адрес доставки</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div className="row mb-4">
|
||||||
|
<div className="col">
|
||||||
|
<div className="form-outline">
|
||||||
|
<input type="text" id="formNameOnCard" className="form-control" />
|
||||||
|
<label className="form-label" htmlFor="formNameOnCard">Имя держателя карты</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col">
|
||||||
|
<div className="form-outline">
|
||||||
|
<input type="text" id="formCardNumber" className="form-control" />
|
||||||
|
<label className="form-label" htmlFor="formCardNumber">Номер карты</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="row mb-4">
|
||||||
|
<div className="col-3">
|
||||||
|
<div className="form-outline">
|
||||||
|
<input type="text" id="formExpiration" className="form-control" />
|
||||||
|
<label className="form-label" htmlFor="formExpiration">Срок действия</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-3">
|
||||||
|
<div className="form-outline">
|
||||||
|
<input type="text" id="formCVV" className="form-control" />
|
||||||
|
<label className="form-label" htmlFor="formCVV">CVV</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-center">
|
||||||
|
<button className="btn" style="margin-bottom: 20px;" type="button" id="saveButton">Оформить</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section >
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MakingAnOrder;
|
||||||
37
lab4/src/components/screens/PageEdit/PageEdit.jsx
Normal file
37
lab4/src/components/screens/PageEdit/PageEdit.jsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
function PageEdit() {
|
||||||
|
return (
|
||||||
|
<div className="p-2">
|
||||||
|
<h1 className="text-success text-center font-weight-bold">Добавление товара</h1>
|
||||||
|
<div className="text-center">
|
||||||
|
<img id="image-preview" src="https://via.placeholder.com/200" className="rounded rounded-circle"
|
||||||
|
alt="placeholder" />
|
||||||
|
</div>
|
||||||
|
<form id="items-form" className="needs-validation" noValidate>
|
||||||
|
<div className="mb-2">
|
||||||
|
<label htmlFor="item" className="form-label">Товары</label>
|
||||||
|
<select id="item" className="form-select" name="selected" required>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="mb-2">
|
||||||
|
<label className="form-label" htmlFor="price">Цена</label>
|
||||||
|
<input id="price" name="price" className="form-control" type="number" defaultValue="0.00" min="1000.00" step="0.50"
|
||||||
|
required />
|
||||||
|
</div>
|
||||||
|
<div className="mb-2">
|
||||||
|
<label className="form-label" htmlFor="count">Количество</label>
|
||||||
|
<input id="count" name="count" className="form-control" type="number" defaultValue="0" min="1" step="1" required />
|
||||||
|
</div>
|
||||||
|
<div className="mb-2">
|
||||||
|
<label className="form-label" htmlFor="image">Изображение</label>
|
||||||
|
<input id="image" type="file" name="image" className="form-control" accept="image/*" />
|
||||||
|
</div>
|
||||||
|
<Link to="/admin" className="btn">Назад</Link>
|
||||||
|
<button type="submit" className="btn">Сохранить</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PageEdit;
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
function PaymentAndDelivery() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="d-flex justify-content-center align-items-center">
|
||||||
|
<h1 className="text-success font-weight-bold">Оплата и доставка</h1>
|
||||||
|
</div>
|
||||||
|
<h4 className="text-success" style={{ fontSize: "25px", marginLeft: "50px", marginTop: "100px" }}>Способ оплаты</h4>
|
||||||
|
<p className="text-black" style={{ fontSize: "25px", marginLeft: "50px", marginTop: "40px" }}>Картой онлайн</p>
|
||||||
|
<h2 className="text-success" style={{ fontSize: "25px", marginLeft: "50px", marginTop: "70px" }}>Доставка</h2>
|
||||||
|
<p className="text-black" style={{ fontSize: "25px", marginLeft: "50px", marginTop: "40px" }}>Заказ на доставку
|
||||||
|
принимается не менее, чем за 3 часа</p>
|
||||||
|
<p className="text-black" style={{fontSize: "25px", marginLeft: "50px", marginTop: "50px"}}>Минимальная стоимость букета
|
||||||
|
на доставку - 1500 р</p>
|
||||||
|
<p className="text-black" style={{fontSize: "25px", marginLeft: "50px", marginTop: "50px"}}>Доставим ваш букет бесплатно
|
||||||
|
с 10:00 до 19:00</p>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PaymentAndDelivery;
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
function PersonalAccount() {
|
||||||
|
return (
|
||||||
|
<section className="h-100">
|
||||||
|
<div className="mask d-flex align-items-center h-100 gradient-custom-3">
|
||||||
|
<div className="container h-100">
|
||||||
|
<div className="row d-flex justify-content-center align-items-center h-100">
|
||||||
|
<div className="col-12 col-md-9 col-lg-7 col-xl-6">
|
||||||
|
<div className="card" style={{ borderRadius: "15px", borderColor: "border-color:rgb(95, 206, 123)" }}>
|
||||||
|
<div className="card-body p-5">
|
||||||
|
<h2 className="text-center text-success mb-5">Личный кабинет</h2>
|
||||||
|
|
||||||
|
<form>
|
||||||
|
|
||||||
|
<div className="form-outline mb-4">
|
||||||
|
<input type="text" id="form3Example1cg" className="form-control form-control-lg" />
|
||||||
|
<label className="form-label" htmlFor="form3Example1cg">Ваше имя</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-outline mb-4">
|
||||||
|
<input type="text" id="form3Example1cg" className="form-control form-control-lg" />
|
||||||
|
<label className="form-label" htmlFor="form3Example1cg">Ваша фамилия</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-outline mb-4">
|
||||||
|
<input type="email" id="form3Example3cg" className="form-control form-control-lg" />
|
||||||
|
<label className="form-label" htmlFor="form3Example3cg">Ваш адрес электронной почты</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-outline mb-4">
|
||||||
|
<input type="date" id="form3Example4cg" className="form-control form-control-lg" />
|
||||||
|
<label className="form-label" htmlFor="form3Example4cg">Дата рождения</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-outline mb-2">
|
||||||
|
<input type="tel" id="form3Example5cg" className="form-control form-control-lg" />
|
||||||
|
<label className="form-label" htmlFor="form3Example5cg">Номер телефона</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-center">
|
||||||
|
<button className="btn btn-outline-light" type="button" id="saveButton">Сохранить</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-center">
|
||||||
|
<Link className="btn btn-outline-light" type="button" to="/">Выйти</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PersonalAccount;
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
function RecoveryPassword() {
|
||||||
|
return (
|
||||||
|
<section className="h-100">
|
||||||
|
<div className="mask d-flex align-items-center h-100 gradient-custom-3">
|
||||||
|
<div className="container h-100">
|
||||||
|
<div className="row d-flex justify-content-center align-items-center h-100">
|
||||||
|
<div className="col-12 col-md-9 col-lg-7 col-xl-6">
|
||||||
|
<div className="card" style={{borderRadius: "15px", borderColor: "green"}}>
|
||||||
|
<div className="card-body p-5">
|
||||||
|
<h2 className="text-success text-center mb-5">Восстановление пароля</h2>
|
||||||
|
<h4 className="text-black text-center mb-5">Введите свой адрес электронной почты, и мы вышлем вам
|
||||||
|
электронное письмо с инструкциями по сбросу вашего пароля</h4>
|
||||||
|
<form>
|
||||||
|
|
||||||
|
<div className="form-outline mb-4">
|
||||||
|
<input type="email" id="form3Example3cg" className="form-control form-control-lg" />
|
||||||
|
<label className="form-label" htmlFor="form3Example3cg">Ваш адрес электронной почты</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-center">
|
||||||
|
<button type="button" className="btn btn-block text-body mb-0">Сбросить</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-center text-muted mb-0"><Link to="/login"
|
||||||
|
className="fw-bold text-body"><u>Войти</u></Link></p>
|
||||||
|
|
||||||
|
<p className="text-center text-muted mb-0"><Link to="/registration"
|
||||||
|
className="fw-bold text-body"><u>Регистрация</u></Link></p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default RecoveryPassword;
|
||||||
55
lab4/src/components/screens/Registration/Registration.jsx
Normal file
55
lab4/src/components/screens/Registration/Registration.jsx
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
function Registration() {
|
||||||
|
return (
|
||||||
|
<section className="h-100">
|
||||||
|
<div className="mask d-flex align-items-center h-100 gradient-custom-3">
|
||||||
|
<div className="container h-100">
|
||||||
|
<div className="row d-flex justify-content-center align-items-center h-100">
|
||||||
|
<div className="col-12 col-md-9 col-lg-7 col-xl-6">
|
||||||
|
<div className="card" style={{ borderRadius: "15px", borderColor: "border-color:rgb(95, 206, 123)" }}>
|
||||||
|
<div className="card-body p-5">
|
||||||
|
<h2 className="text-success text-center mb-5">Регистрация</h2>
|
||||||
|
|
||||||
|
<form>
|
||||||
|
|
||||||
|
<div className="form-outline mb-4">
|
||||||
|
<input type="text" id="form3Example1cg" className="form-control form-control-lg" />
|
||||||
|
<label className="form-label" htmlFor="form3Example1cg">Ваше имя</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-outline mb-4">
|
||||||
|
<input type="email" id="form3Example3cg" className="form-control form-control-lg" />
|
||||||
|
<label className="form-label" htmlFor="form3Example3cg">Ваш адрес электронной почты</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-outline mb-4">
|
||||||
|
<input type="password" id="form3Example4cg" className="form-control form-control-lg" />
|
||||||
|
<label className="form-label" htmlFor="form3Example4cg">Пароль</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-outline mb-4">
|
||||||
|
<input type="password" id="form3Example4cdg" className="form-control form-control-lg" />
|
||||||
|
<label className="form-label" htmlFor="form3Example4cdg">Повторите свой пароль</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-center">
|
||||||
|
<button type="button" className="btn btn-block text-body mb-0">Регистрация</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-center text-muted mb-0">У вас уже есть учетная запись? <Link to="/login"
|
||||||
|
className="fw-bold text-body"><u>Войдите здесь</u></Link></p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Registration;
|
||||||
9
lab4/src/main.jsx
Normal file
9
lab4/src/main.jsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
);
|
||||||
17
lab4/vite.config.js
Normal file
17
lab4/vite.config.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
import path from 'path';
|
||||||
|
import { fileURLToPath } from 'url';
|
||||||
|
|
||||||
|
const __filename = fileURLToPath(import.meta.url);
|
||||||
|
const __dirname = path.dirname(__filename);
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, 'src'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
BIN
отчеты/4 лаб.docx
Normal file
BIN
отчеты/4 лаб.docx
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user