From f1d991fb7c5b6e9af0a3137c04f4d031de22c5de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D1=8F=D1=87=D0=B5=D1=81=D0=BB=D0=B0=D0=B2=20=D0=98?= =?UTF-8?q?=D0=B2=D0=B0=D0=BD=D0=BE=D0=B2?= Date: Wed, 15 Nov 2023 23:17:59 +0400 Subject: [PATCH] =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=B4=D0=B8=D1=8F=20=D1=82?= =?UTF-8?q?=D0=BE=D1=80=D0=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lab4/index.html | 8 +- lab4/package-lock.json | 93 ++++++++++++++++++- lab4/package.json | 11 ++- lab4/src/App.css | 42 --------- lab4/src/App.jsx | 6 +- lab4/src/components/card/BasketCard.css | 4 + lab4/src/components/card/BasketCard.jsx | 41 ++++++++ lab4/src/components/card/ProductCard.css | 0 lab4/src/components/card/ProductCard.jsx | 20 ++++ lab4/src/components/card/StockCard.jsx | 21 +++++ lab4/src/components/footer/Footer.css | 1 + lab4/src/components/navigation/Navigation.css | 16 +--- lab4/src/components/navigation/Navigation.jsx | 34 +++---- lab4/src/index.css | 79 +++------------- lab4/src/main.jsx | 51 +++++++--- lab4/src/pages/Administrator.jsx | 50 ++++++++++ lab4/src/pages/Basket.jsx | 32 +++++++ lab4/src/pages/Contacts.jsx | 36 +++++++ lab4/src/pages/PasswordRecovery.jsx | 61 ++++++++++++ lab4/src/pages/PersonalAccount.jsx | 81 ++++++++++++++++ lab4/src/pages/PersonalAccountLogin.jsx | 78 ++++++++++++++++ lab4/src/pages/PersonalAccountRegister.jsx | 86 +++++++++++++++++ lab4/src/pages/Stock.jsx | 37 ++++++++ lab4/src/pages/index.jsx | 62 +++++++------ 24 files changed, 762 insertions(+), 188 deletions(-) create mode 100644 lab4/src/components/card/BasketCard.css create mode 100644 lab4/src/components/card/BasketCard.jsx create mode 100644 lab4/src/components/card/ProductCard.css create mode 100644 lab4/src/components/card/ProductCard.jsx create mode 100644 lab4/src/components/card/StockCard.jsx create mode 100644 lab4/src/pages/Administrator.jsx create mode 100644 lab4/src/pages/Basket.jsx create mode 100644 lab4/src/pages/Contacts.jsx create mode 100644 lab4/src/pages/PasswordRecovery.jsx create mode 100644 lab4/src/pages/PersonalAccount.jsx create mode 100644 lab4/src/pages/PersonalAccountLogin.jsx create mode 100644 lab4/src/pages/PersonalAccountRegister.jsx create mode 100644 lab4/src/pages/Stock.jsx diff --git a/lab4/index.html b/lab4/index.html index 244045d..ca401e7 100644 --- a/lab4/index.html +++ b/lab4/index.html @@ -2,12 +2,12 @@ - + Каталог -
+
- - + + \ No newline at end of file diff --git a/lab4/package-lock.json b/lab4/package-lock.json index 2a3ed43..5e987bc 100644 --- a/lab4/package-lock.json +++ b/lab4/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "bootstrap": "^5.3.2", + "mdb-react-ui-kit": "^7.0.0", "prop-types": "^15.8.1", "react": "^18.2.0", "react-bootstrap": "^2.9.1", @@ -388,6 +389,21 @@ "node": ">=6.9.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "node_modules/@esbuild/android-arm": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", @@ -1072,7 +1088,6 @@ "version": "18.2.15", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.15.tgz", "integrity": "sha512-HWMdW+7r7MR5+PZqJF6YFNSCtjz1T0dsvo/f1BV6HkV+6erD/nA7wd9NM00KVG83zf2nJ7uATPO9ttdIPvi3gg==", - "dev": true, "dependencies": { "@types/react": "*" } @@ -1455,6 +1470,14 @@ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" }, + "node_modules/clsx": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -2294,6 +2317,29 @@ "is-callable": "^1.1.3" } }, + "node_modules/framer-motion": { + "version": "10.16.5", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.5.tgz", + "integrity": "sha512-GEzVjOYP2MIpV9bT/GbhcsBNoImG3/2X3O/xVNWmktkv9MdJ7P/44zELm/7Fjb+O3v39SmKFnoDQB32giThzpg==", + "dependencies": { + "tslib": "^2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -3084,6 +3130,32 @@ "yallist": "^3.0.2" } }, + "node_modules/mdb-react-ui-kit": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/mdb-react-ui-kit/-/mdb-react-ui-kit-7.0.0.tgz", + "integrity": "sha512-ke23u6Ux63nrmi3PFa7H1YlmQe76POT5rNpxuet0MB4+8OjCzw+WviL4EJtzDlNHXhnw9mfU9a5MF8q0swO+wA==", + "dependencies": { + "@popperjs/core": "2.11.5", + "clsx": "1.1.1", + "framer-motion": "^10.16.4", + "react-popper": "2.3.0" + }, + "peerDependencies": { + "@types/react": "^18.0.9", + "@types/react-dom": "^18.0.3", + "react": "^18.1.0", + "react-dom": "^18.1.0" + } + }, + "node_modules/mdb-react-ui-kit/node_modules/@popperjs/core": { + "version": "2.11.5", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", + "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -3518,6 +3590,11 @@ "react": "^18.2.0" } }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -3528,6 +3605,20 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "node_modules/react-popper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "dependencies": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + }, + "peerDependencies": { + "@popperjs/core": "^2.0.0", + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", diff --git a/lab4/package.json b/lab4/package.json index 41b0bb6..a92ac3c 100644 --- a/lab4/package.json +++ b/lab4/package.json @@ -10,13 +10,14 @@ "preview": "vite preview" }, "dependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-router-dom": "^6.18.0", "bootstrap": "^5.3.2", + "mdb-react-ui-kit": "^7.0.0", + "prop-types": "^15.8.1", + "react": "^18.2.0", "react-bootstrap": "^2.9.1", "react-bootstrap-icons": "^1.10.3", - "prop-types": "^15.8.1" + "react-dom": "^18.2.0", + "react-router-dom": "^6.18.0" }, "devDependencies": { "@types/react": "^18.2.15", @@ -29,4 +30,4 @@ "eslint-plugin-react-refresh": "^0.4.3", "vite": "^4.4.5" } -} \ No newline at end of file +} diff --git a/lab4/src/App.css b/lab4/src/App.css index b9d355d..e69de29 100644 --- a/lab4/src/App.css +++ b/lab4/src/App.css @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/lab4/src/App.jsx b/lab4/src/App.jsx index 63089b5..1a7e11c 100644 --- a/lab4/src/App.jsx +++ b/lab4/src/App.jsx @@ -7,13 +7,13 @@ import Navigation from './components/navigation/Navigation.jsx'; const App = ({ routes }) => { return ( - <> +
- +
- +
); }; diff --git a/lab4/src/components/card/BasketCard.css b/lab4/src/components/card/BasketCard.css new file mode 100644 index 0000000..7a674da --- /dev/null +++ b/lab4/src/components/card/BasketCard.css @@ -0,0 +1,4 @@ +.btn-opaque { + background-color: rgba(255, 255, 255, 0.8); /* You can adjust the alpha value for opacity */ + /* You can also set other styles to make the buttons more visible */ + } \ No newline at end of file diff --git a/lab4/src/components/card/BasketCard.jsx b/lab4/src/components/card/BasketCard.jsx new file mode 100644 index 0000000..333b817 --- /dev/null +++ b/lab4/src/components/card/BasketCard.jsx @@ -0,0 +1,41 @@ +import { useState } from 'react'; +import { Card, Col, Row, Form } from 'react-bootstrap'; + +const BasketCard = () => { + const [quantity, setQuantity] = useState(2); + + const handleQuantityChange = (event) => { + setQuantity(event.target.value); + }; + + return ( + + + + + Cotton T-shirt + + +

Название пиццы

+ + + + + +
Цена ₽
+ + + + + ); +}; + +export default BasketCard; diff --git a/lab4/src/components/card/ProductCard.css b/lab4/src/components/card/ProductCard.css new file mode 100644 index 0000000..e69de29 diff --git a/lab4/src/components/card/ProductCard.jsx b/lab4/src/components/card/ProductCard.jsx new file mode 100644 index 0000000..5b77621 --- /dev/null +++ b/lab4/src/components/card/ProductCard.jsx @@ -0,0 +1,20 @@ +import { Col, Card, Button } from 'react-bootstrap'; + +const ProductCard = () => { + return ( + + + + + Название + + +
Цена ₽
+ + + + + ); +}; + +export default ProductCard; \ No newline at end of file diff --git a/lab4/src/components/card/StockCard.jsx b/lab4/src/components/card/StockCard.jsx new file mode 100644 index 0000000..624aed2 --- /dev/null +++ b/lab4/src/components/card/StockCard.jsx @@ -0,0 +1,21 @@ +import { Col, Card } from 'react-bootstrap'; + +const StockCard = () => { + return ( + + + + + Дарим кибер-призы + + Вот так ачивка! Закажите Кибер-комбо и получите доступ к играм от MY.GAMES, а еще кокосовый батончик и + шоколадное печенье «Cyber» от Bite. А также станьте автоматическим участником розыгрыша игровых ключей и + больших пицц 29 июня. + + + + + ); +}; + +export default StockCard; \ No newline at end of file diff --git a/lab4/src/components/footer/Footer.css b/lab4/src/components/footer/Footer.css index c5b9612..b6646eb 100644 --- a/lab4/src/components/footer/Footer.css +++ b/lab4/src/components/footer/Footer.css @@ -1,3 +1,4 @@ .my-footer { background-color: #D9D9D9; + height: 32px; } \ No newline at end of file diff --git a/lab4/src/components/navigation/Navigation.css b/lab4/src/components/navigation/Navigation.css index 4c156b0..de56644 100644 --- a/lab4/src/components/navigation/Navigation.css +++ b/lab4/src/components/navigation/Navigation.css @@ -2,14 +2,8 @@ background-color: #D9D9D9; } -@media (min-width: 768px) { - .my-navbar { - height: 100px; - } -} - -.my-navbar { - text-decoration: underline; +.my-navbar .nav-link { + text-decoration: none; } @media (max-width: 576px) { @@ -20,18 +14,18 @@ @media (min-width: 577px) and (max-width: 992px) { .my-navbar img { - margin-left: 25px; + margin-left: 25px } } @media (min-width: 993px) and (max-width: 1200px) { .my-navbar img { - margin-left: 150px; + margin-left: 150px; } } @media (min-width: 1201px) { .my-navbar img { - margin-left: 235px; + margin-left: 235px; } } \ No newline at end of file diff --git a/lab4/src/components/navigation/Navigation.jsx b/lab4/src/components/navigation/Navigation.jsx index bcd71cd..5aa3689 100644 --- a/lab4/src/components/navigation/Navigation.jsx +++ b/lab4/src/components/navigation/Navigation.jsx @@ -1,43 +1,45 @@ import PropTypes from 'prop-types'; import { Container, Nav, Navbar, Button } from 'react-bootstrap'; import { Link, useLocation } from 'react-router-dom'; +import Image from 'react-bootstrap/Image'; import './Navigation.css'; const Navigation = ({ routes }) => { const location = useLocation(); - const indexPageLink = routes.filter((route) => route.index === false).shift(); + const indexPageLink = routes.find((route) => route.index === true); const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title')); return ( -
- + - - logo - + + Logo + -
); }; Navigation.propTypes = { - routes: PropTypes.array, + routes: PropTypes.array, }; export default Navigation; diff --git a/lab4/src/index.css b/lab4/src/index.css index 2c3fac6..6824154 100644 --- a/lab4/src/index.css +++ b/lab4/src/index.css @@ -1,69 +1,18 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { +.btn { + height: 35px; + width: 176px; border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; + margin-right: 10px; + margin-top: 10px; } -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } +.custom-btn { + color: black; + border: none; + background-color: #FFA800; } + +.btn.custom-btn:hover { + color: black; + background-color: #FFA800 !important; +} \ No newline at end of file diff --git a/lab4/src/main.jsx b/lab4/src/main.jsx index 75e6a39..4750943 100644 --- a/lab4/src/main.jsx +++ b/lab4/src/main.jsx @@ -5,34 +5,57 @@ import { RouterProvider, createBrowserRouter } from 'react-router-dom'; import App from './App.jsx'; import './index.css'; import ErrorPage from './pages/ErrorPage.jsx'; -import Index from './pages/index.jsx'; +import Index from './pages/Index.jsx'; +import Stock from './pages/Stock.jsx'; +import Contacts from './pages/Contacts.jsx'; +import PersonalAccountLogin from './pages/PersonalAccountLogin.jsx'; +import PersonalAccount from './pages/PersonalAccount.jsx'; +import PersonalAccountRegister from './pages/PersonalAccountRegister.jsx'; +import PasswordRecovery from './pages/PasswordRecovery.jsx'; +import Administrator from './pages/Administrator.jsx'; +import Basket from './pages/Basket.jsx'; const routes = [ { index: true, path: '/', element: , - title: 'Главная страница', + title: 'Каталог', }, { - path: '/page2', - element: , - title: 'Вторая страница', + path: '/stock', + element: , + title: 'Акции', }, { - path: '/page3', - element: , - title: 'Третья страница', + path: '/contacts', + element: , + title: 'Контакты', }, { - path: '/page4', - element: , - title: 'Четвертая страница', + path: '/personalAccountLogin', + element: , }, { - path: '/page-edit', - element: , + path: '/personalAccount', + element: , }, + { + path: '/personalAccountRegister', + element: , + }, + { + path: '/PasswordRecovery', + element: , + }, + { + path: '/Administrator', + element: , + }, + { + path: '/Basket', + element: , + } ]; const router = createBrowserRouter([ @@ -48,4 +71,4 @@ ReactDOM.createRoot(document.getElementById('root')).render( , -); +); \ No newline at end of file diff --git a/lab4/src/pages/Administrator.jsx b/lab4/src/pages/Administrator.jsx new file mode 100644 index 0000000..e11a1c7 --- /dev/null +++ b/lab4/src/pages/Administrator.jsx @@ -0,0 +1,50 @@ +import { Container, Row, Col, Button, Table } from 'react-bootstrap'; + +const Administrator = () => { + return ( + + + +

Панель администратора

+
+ +
+ + + + +

+ Таблица данных +

+ + + + + + + + + + + + +
№ + Товар + + Цена + + Акция + + Количество + + Сумма +
+ + + + ); +}; + +export default Administrator; diff --git a/lab4/src/pages/Basket.jsx b/lab4/src/pages/Basket.jsx new file mode 100644 index 0000000..7cbcfb2 --- /dev/null +++ b/lab4/src/pages/Basket.jsx @@ -0,0 +1,32 @@ +import { Container, Row, Col } from 'react-bootstrap'; +import BasketCard from '../components/card/BasketCard'; + +const Basket = () => { + return ( + + + +

Корзина

+ + + + + + + + + +
+
+ Сумма заказа: +
+
+ Сумма ₽ +
+
+ К оплате + + ); +}; + +export default Basket; \ No newline at end of file diff --git a/lab4/src/pages/Contacts.jsx b/lab4/src/pages/Contacts.jsx new file mode 100644 index 0000000..19566b8 --- /dev/null +++ b/lab4/src/pages/Contacts.jsx @@ -0,0 +1,36 @@ +import { Container, Row, Col } from 'react-bootstrap'; + +const Contacts = () => { + return ( + + + +

Контакты

+ + + + + + + + + + + 7 111 222 33 44 + +

+ ул. Северный венец 32 +

+

Доставка и самовывоз 10:00 — 23:00

+ + + + ); +}; + +export default Contacts; \ No newline at end of file diff --git a/lab4/src/pages/PasswordRecovery.jsx b/lab4/src/pages/PasswordRecovery.jsx new file mode 100644 index 0000000..d89393b --- /dev/null +++ b/lab4/src/pages/PasswordRecovery.jsx @@ -0,0 +1,61 @@ +import { Container, Row, Col, Card, Form, Button } from 'react-bootstrap'; +import { useState } from 'react'; + +const PasswordRecovery = () => { + const [validated, setValidated] = useState(false); + + const handleSubmit = (event) => { + const form = event.currentTarget; + if (form.checkValidity() === false) { + event.preventDefault(); + event.stopPropagation(); + } + + setValidated(true); + }; + + return ( + + + + + +

Восстановление пароля

+

+ Введите свой адрес электронной почты, и мы вышлем вам электронное письмо с инструкциями по сбросу вашего пароля +

+
+ + + Email заполнен + Email не заполнен + Ваш адрес электронной почты + + +
+ +
+ +

+ + Войти + +

+ +

+ + Регистрация + +

+
+ + + + + + ); +}; + +export default PasswordRecovery; diff --git a/lab4/src/pages/PersonalAccount.jsx b/lab4/src/pages/PersonalAccount.jsx new file mode 100644 index 0000000..deb38a8 --- /dev/null +++ b/lab4/src/pages/PersonalAccount.jsx @@ -0,0 +1,81 @@ +import { useState } from 'react'; +import { Container, Row, Col, Card, Form, Button } from 'react-bootstrap'; + +const PersonalAccount = () => { + const [validated, setValidated] = useState(false); + + const handleSubmit = (event) => { + const form = event.currentTarget; + if (form.checkValidity() === false) { + event.preventDefault(); + event.stopPropagation(); + } + + setValidated(true); + }; + + return ( + + + + + +

Личный кабинет

+ +
+ + + Имя заполнено + Имя не заполнено + Ваше имя + + + + + Фамилия заполнена + Фамилия не заполнена + Ваша фамилия + + + + + Email заполнен + Email не заполнен + Ваш адрес электронной почты + + + + + Дата рождения заполнена + Дата рождения не заполнена + Дата рождения + + + + + Номер телефона заполнен + Номер телефона не заполнен + Номер телефона + + +
+ +
+ + +
+ + + + + + ); +}; + +export default PersonalAccount; diff --git a/lab4/src/pages/PersonalAccountLogin.jsx b/lab4/src/pages/PersonalAccountLogin.jsx new file mode 100644 index 0000000..8b0e255 --- /dev/null +++ b/lab4/src/pages/PersonalAccountLogin.jsx @@ -0,0 +1,78 @@ +import { Container, Row, Col, Card, Form, Button } from 'react-bootstrap'; +import { useState } from 'react'; + +const PersonalAccountLogin = () => { + const [validated, setValidated] = useState(false); + + const handleSubmit = (event) => { + const form = event.currentTarget; + if (form.checkValidity() === false) { + event.preventDefault(); + event.stopPropagation(); + } + + setValidated(true); + }; + + return ( + + + + + +

Войти

+ +
+ + + Email заполнен + Email не заполнен + Ваш адрес электронной почты + + + + + Пароль заполнен + Пароль не заполнен + Пароль + + + + + + +

+ Забыли пароль?{' '} + + Восстановление пароля + +

+ +
+ +
+ +

+ У вас нет аккаунта?{' '} + + Регистрация + +

+ +

+ + Администратор + +

+
+ + + + + + ); +}; + +export default PersonalAccountLogin; \ No newline at end of file diff --git a/lab4/src/pages/PersonalAccountRegister.jsx b/lab4/src/pages/PersonalAccountRegister.jsx new file mode 100644 index 0000000..f3eab1f --- /dev/null +++ b/lab4/src/pages/PersonalAccountRegister.jsx @@ -0,0 +1,86 @@ +import { Container, Row, Col, Card, Form, Button } from 'react-bootstrap'; +import { useState } from 'react'; + +const PersonalAccountRegister = () => { + const [validated, setValidated] = useState(false); + + const handleSubmit = (event) => { + const form = event.currentTarget; + if (form.checkValidity() === false) { + event.preventDefault(); + event.stopPropagation(); + } + + setValidated(true); + }; + + return ( + + + + + +

Создать учетную запись

+ +
+ + + Имя заполнено + Имя не заполнено + Ваше имя + + + + + Email заполнен + Email не заполнен + Ваш адрес электронной почты + + + + + Пароль заполнен + Пароль не заполнен + Пароль + + + + + Пароль заполнен + Пароль не заполнен + Повторите свой пароль + + + + + Я согласен со всеми утверждениями в{' '} + + Условиях обслуживания + + + } /> + + +
+ +
+ +

+ У вас уже есть учетная запись?{' '} + + Войдите здесь + +

+
+ + + + + + ); +}; + +export default PersonalAccountRegister; diff --git a/lab4/src/pages/Stock.jsx b/lab4/src/pages/Stock.jsx new file mode 100644 index 0000000..679c7be --- /dev/null +++ b/lab4/src/pages/Stock.jsx @@ -0,0 +1,37 @@ +import { Container, Row, Col } from 'react-bootstrap'; +import StockCard from '../components/card/StockCard'; + +const Stock = () => { + return ( + + + +

Акции

+ + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Stock; \ No newline at end of file diff --git a/lab4/src/pages/index.jsx b/lab4/src/pages/index.jsx index ee678ca..bb7541d 100644 --- a/lab4/src/pages/index.jsx +++ b/lab4/src/pages/index.jsx @@ -1,33 +1,41 @@ -import { Link } from 'react-router-dom'; +import { Container, Row, Col } from 'react-bootstrap'; +import ProductCard from '../components/card/ProductCard'; const Index = () => { return ( - <> - <> -

Пример web-страницы.

-

1. Структурные элементы

-

Полужирное начертание курсив

-

Абзац 2 Ссылка

-

1.1. Списки

-

- Список маркированный: -

- -

- Список нумерованный: -

-
    -
  1. Элемент списка 1
    2. -
  2. Элемент списка 2
    3. -
  3. ...
    4. -
- - + + + +

Каталог

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); };