удален logo.png

lab4
lab3
2024-01-10 20:56:59 +04:00 · 2024-01-10 20:53:28 +04:00 · 2024-01-10 20:47:54 +04:00 · 2024-01-10 20:41:47 +04:00
42 changed files with 5371 additions and 0 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,20 @@
+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 },
+    ],
+  },
+}
--- a/.gitignore
+++ b/.gitignore
@ -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?
--- a/README.md
+++ b/README.md
@ -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
--- a/index.html
+++ b/index.html
@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>golfExude</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,32 @@
+{
+  "name": "lab4",
+  "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.37",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.53.0",
+    "eslint-config-airbnb-base": "^15.0.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"
+  }
+}
--- a/src/App.css
+++ b/src/App.css
--- a/src/App.jsx
+++ b/src/App.jsx
@ -0,0 +1,19 @@
+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 = () => {
+  return (
+    <>
+      <Navigation></Navigation>
+      <Container className='p-2' as="main" fluid>
+        <Outlet />
+      </Container>
+      <Footer />
+    </>
+  );
+};
+
+export default App;
--- a/src/assets/251520454_879419866277179_9012306805843872371_n-1-1.jpg
+++ b/src/assets/251520454_879419866277179_9012306805843872371_n-1-1.jpg
--- a/src/assets/47065903_45_B.png
+++ b/src/assets/47065903_45_B.png
--- a/src/assets/57010584_54_B.png
+++ b/src/assets/57010584_54_B.png
--- a/src/assets/57010633_30_B.png
+++ b/src/assets/57010633_30_B.png
--- a/src/assets/57020618_01_B.png
+++ b/src/assets/57020618_01_B.png
--- a/src/assets/57067703_30_B.png
+++ b/src/assets/57067703_30_B.png
--- a/src/assets/57077709_30_B.png
+++ b/src/assets/57077709_30_B.png
--- a/src/assets/SUNNY_100x.jpg
+++ b/src/assets/SUNNY_100x.jpg
--- a/src/assets/bronco5_72_1000x.jpg
+++ b/src/assets/bronco5_72_1000x.jpg
--- a/src/assets/solovair1_MAINWEB_1000x.jpg
+++ b/src/assets/solovair1_MAINWEB_1000x.jpg
--- a/src/assets/wes-anderson-muses-cover-43.jpg
+++ b/src/assets/wes-anderson-muses-cover-43.jpg
--- a/src/components/footer/Footer.css
+++ b/src/components/footer/Footer.css
--- a/src/components/footer/Footer.jsx
+++ b/src/components/footer/Footer.jsx
@ -0,0 +1,52 @@
+import { Link } from 'react-router-dom';
+import './Footer.css';
+import { Telegram, Instagram, Twitter } from 'react-bootstrap-icons';
+
+
+const Footer = () => {
+    const year = new Date().getFullYear();
+
+    return (
+        <footer className="container-fluid p-3">
+            <div className="row fs-5">
+                <div className="col-sm-6">
+                <h3 className="display-6">golfExude</h3>
+                <p className="mb-2">
+                    <Link className="nav-link" to="/about-us">
+                    О нас
+                    </Link>
+                </p>
+                <p className="mb-2">
+                    <Link className="nav-link" to="/physical-store">
+                    Физический магазин
+                    </Link>
+                </p>
+                </div>
+                <div className="col-sm-6 text-end fw-bold">
+                <p className="mb-2">Связь с нами</p>
+                <p className="mb-2">service@golfexude.com</p>
+                <a className="link-dark fs-1 mx-1" href="">
+                    <Telegram />
+                </a>
+                <a className="link-dark fs-1 mx-1" href="">
+                    <Instagram />
+                </a>
+                <a className="link-dark fs-1 mx-1" href="">
+                    <Twitter />
+                </a>
+                </div>
+            </div>
+            <div className="row">
+                <div className="text-center">
+                <p className="m-0">
+                    © {year} golfExude
+                    <br />
+                    Все права защищены
+                </p>
+                </div>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;
--- a/src/components/navigation/Navigation.css
+++ b/src/components/navigation/Navigation.css
@ -0,0 +1,7 @@
+.dropdown button, .dropdown button:hover{
+    background: none !important;
+    border: none !important;
+}
+.dropdown button::after{
+    display: none;
+}
--- a/src/components/navigation/Navigation.jsx
+++ b/src/components/navigation/Navigation.jsx
@ -0,0 +1,47 @@
+import { Container, Nav, Navbar } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import './Navigation.css';
+import { Bag, Person } from 'react-bootstrap-icons';
+import Dropdown from 'react-bootstrap/Dropdown';
+
+const Navigation = () => {
+
+    return (
+        <header className="text-white text-center pt-4">
+            <Link to="/"><h1 className="display-3 mb-0">golfExude</h1></Link>
+            <Navbar expand='lg' data-bs-theme='dark' className='border-top border-2 border-white justify-content-end'>
+                <div className="login-cart d-flex align-items-center me-1 me-lg-3 me-xl-4 me-xxl-5">
+                    <Dropdown>
+                        <Dropdown.Toggle className="me-2" id="dropdown-basic">
+                            <Person size={28}/>
+                        </Dropdown.Toggle>
+
+                        <Dropdown.Menu className="dropdown-menu-end">
+                            <Dropdown.Item as={Link} to="/login">Вход</Dropdown.Item>
+                            <Dropdown.Item as={Link} to="/admin">Панель администратора</Dropdown.Item>
+                        </Dropdown.Menu>
+                    </Dropdown>
+                    <Link to="/cart"><Bag size={24}/></Link>
+                </div>
+                <Navbar.Toggle aria-controls='main-navbar' />
+                <Container fluid>
+                    <Navbar.Collapse className='justify-content-center' id='main-navbar'>
+                        <Nav className='align-items-center fs-5'>
+                                <div className="nav-item m-2"><Link to="/catalog">новинки<div></div></Link></div>
+                                <div className="nav-item m-2"><Link to="/catalog">верхняя одежда<div></div></Link></div>
+                                <div className="nav-item m-2"><Link to="/catalog">брюки<div></div></Link></div>
+                                <div className="nav-item m-2"><Link to="/catalog">футболки<div></div></Link></div>
+                                <div className="nav-item m-2"><Link to="/catalog">рубашки<div></div></Link></div>
+                                <div className="nav-item m-2"><Link to="/catalog">обувь<div></div></Link></div>
+                                <div className="nav-item m-2"><Link to="/catalog">головные уборы<div></div></Link></div>
+                                <div className="nav-item m-2"><Link to="/catalog">весь ассортимент<div></div></Link></div>
+                        </Nav>
+                    </Navbar.Collapse>
+                </Container>
+            </Navbar >
+        </header>
+
+    );
+};
+
+export default Navigation;
--- a/src/fonts/RacingSansOne-Regular.ttf
+++ b/src/fonts/RacingSansOne-Regular.ttf
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,113 @@
+@font-face {
+    font-family: "Racing Sans One";
+    src: url(fonts/RacingSansOne-Regular.ttf) format('truetype');
+    font-weight: 400; font-style: normal;
+}
+
+#root {
+    background-color: #FFF8E7;
+    font-family: "Arial", sans-serif;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+h1, h3, .logoSpan {
+    font-family: "Racing Sans One", sans-serif;
+}
+
+h2 {
+    letter-spacing: 0.1em;
+}
+
+header{
+    background-color: #4B3621 !important;
+}
+
+header > a, header > a:visited, header > a:active{
+    color: white;
+    text-decoration: none;
+}
+
+nav a, nav a:visited, nav a:hover {
+    font-variant: small-caps;
+    color: white;
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+nav a div {
+    position: relative;
+    border-bottom: 1px white solid;
+    transition-property: width, transform;
+    transition-duration: .4s;
+    transition-timing-function: ease-out;
+    transform: rotateY(90deg);
+    animation-name: hide-transition;
+    animation-duration: .4s;
+}
+
+nav a:hover div {
+    transform: rotateY(0);
+}
+
+@keyframes hide-transition {
+    0% {opacity: 0;}
+    100% {opacity: 0;}
+}
+
+.navbar-toggler, .navbar-toggler:active, .navbar-toggler:focus {
+    border: none;
+    box-shadow: none;
+}
+
+@media screen and (min-width: 992px) and (max-width: 1139px) {
+    .navbar{
+        flex-direction: row-reverse;
+    }
+}
+
+@media screen and (min-width: 1140px) {
+    .login-cart{
+        position: absolute;
+    }
+}
+
+footer, form{
+    background-color: #EFDECD;
+}
+
+footer{
+    margin-top: auto;
+}
+
+.btn-primary{
+    background-color: #45b6fe !important;
+    border-color: #45b6fe !important;
+}
+.btn-primary:hover{
+    background-color: #389bd9 !important;
+    border-color: #389bd9 !important;
+}
+
+.login-form input {
+    border: none;
+    border-radius: 10px;
+    background-color: #FFF8E7;
+    padding: 10px;
+}
+
+.dropdown-menu {
+    background-color: #4B3621;
+}
+
+.dropdown a, .dropdown a:hover {
+    font-variant: normal;
+    background-color: #4B3621;
+}
+
+.dropdown a:active {
+    background-color: #4B3621 !important;
+}
--- a/src/main.jsx
+++ b/src/main.jsx
@ -0,0 +1,61 @@
+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 ErrorPage from './pages/ErrorPage.jsx';
+import Homepage from './pages/Homepage.jsx';
+import Catalog from './pages/Catalog/Catalog.jsx';
+import Cart from './pages/Cart/Cart.jsx';
+import Admin from './pages/Admin.jsx';
+import Login from './pages/Login.jsx';
+import AboutUs from './pages/AboutUs.jsx';
+import PhysicalStore from './pages/PhysicalStore.jsx';
+
+const routes = [
+  {
+    index: true,
+    path: '/',
+    element: <Homepage />,
+  },
+  {
+    path: '/catalog',
+    element: <Catalog />,
+  },
+  {
+    path: '/cart',
+    element: <Cart />,
+  },
+  {
+    path: '/admin',
+    element: <Admin />,
+  },
+  {
+    path: '/login',
+    element: <Login />,
+  },
+  {
+    path: '/about-us',
+    element: <AboutUs />,
+  },
+  {
+    path: '/physical-store',
+    element: <PhysicalStore />,
+  },
+];
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />,
+    children: routes,
+    errorElement: <ErrorPage />,
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+);
--- a/src/pages/AboutUs.jsx
+++ b/src/pages/AboutUs.jsx
@ -0,0 +1,30 @@
+import photo from '../assets/wes-anderson-muses-cover-43.jpg';
+
+const AboutUs = () => {
+    return (
+        <>
+            <h2 className="text-center display-6 my-4">О нас</h2>
+            <section className="container-sm mb-5">
+                <div className="row flex-column-reverse flex-sm-row">
+                    <div className="col-sm-6 d-flex align-items-center">
+                        <img className="img-fluid rounded" src={photo} alt="" />
+                    </div>
+                    <div className="col-sm-6 d-flex align-items-center">
+                        <p className="fs-4 text-justify">
+                        <span className='logoSpan'>
+                            golfExude{' '}
+                        </span>
+                        - бренд одежды, который воплощает стиль, элегантность и качество. Мы
+                        создаем уникальные модели, подчеркивающие вашу индивидуальность и
+                        придавая уверенность в любой ситуации. Наша миссия - предложить вам
+                        стильные и функциональные решения для вашего гардероба. Добро
+                        пожаловать в мир golfExude, где мода и стиль сочетаются в гармонии.
+                        </p>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default AboutUs;
--- a/src/pages/Admin.jsx
+++ b/src/pages/Admin.jsx
@ -0,0 +1,53 @@
+const Admin = () => {
+    return (
+        <>
+            <h2 className="text-center display-6 my-4">Панель администратора</h2>
+            <div className="container-lg table-responsive">
+                <h3>Товары</h3>
+                <table id="items-table" className="table table-striped table-hover">
+                <thead>
+                    <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">Название товара</th>
+                    <th scope="col">Категория</th>
+                    <th scope="col">Цена</th>
+                    <th scope="col">Акция</th>
+                    <th scope="col">Скидка</th>
+                    <th scope="col">Цена с учетом акции</th>
+                    <th scope="col" />
+                    <th scope="col" />
+                    </tr>
+                </thead>
+                <tbody></tbody>
+                </table>
+            </div>
+            <div id="items-add" className="d-flex justify-content-center">
+                <button className="btn btn-primary fw-bold px-5 mb-5">
+                Добавить товар
+                </button>
+            </div>
+            <div className="container-lg table-responsive">
+                <h3>Акции</h3>
+                <table id="discounts-table" className="table table-striped table-hover">
+                <thead>
+                    <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">Название акции</th>
+                    <th scope="col">Процент скидки</th>
+                    <th scope="col" />
+                    <th scope="col" />
+                    </tr>
+                </thead>
+                <tbody></tbody>
+                </table>
+            </div>
+            <div id="discounts-add" className="d-flex justify-content-center">
+                <button className="btn btn-primary fw-bold px-5 mb-5">
+                Добавить акцию
+                </button>
+            </div>
+        </>
+    );
+};
+
+export default Admin;
--- a/src/pages/Cart/Cart.css
+++ b/src/pages/Cart/Cart.css
@ -0,0 +1,25 @@
+.cart-labels{
+    font-variant: small-caps;
+    background-color: #EFDECD;
+}
+.item-counter input{
+    width: 33.33333%;
+    border: none;
+    background-color: #FFF8E7;
+    text-align: center;
+}
+.item-counter button{
+    border: none;
+    width: 33.33333%;
+    background-color: #FFF8E7;
+}
+.proceed-labels {
+    background-color: #EFDECD;
+    border-radius: 10px;
+}
+
+@media (min-width: 768px) {
+    .proceed{
+        width: 50%;
+    }
+}
--- a/src/pages/Cart/Cart.jsx
+++ b/src/pages/Cart/Cart.jsx
@ -0,0 +1,67 @@
+import "./Cart.css"
+import shirt1 from '../../assets/57010633_30_B.png';
+import { ArrowRight, ArrowLeft } from 'react-bootstrap-icons';
+import { Link } from 'react-router-dom';
+
+const Cart = () => {
+    return (
+        <>
+            <h2 className="text-center display-6 my-4">Ваша корзина</h2>
+            <div className="container-lg cart mb-5">
+                <div className="row fs-4 p-2 text-center cart-labels align-items-center d-md-flex d-none">
+                <div className="col-6 text-start">
+                    <span>товар</span>
+                </div>
+                <div className="col-2">
+                    <span>цена, руб</span>
+                </div>
+                <div className="col-2">
+                    <span>количество</span>
+                </div>
+                <div className="col-2">
+                    <span>всего</span>
+                </div>
+                </div>
+                <div className="row fs-5 p-2 text-center align-items-center justify-content-between mb-5">
+                <div className="cart-item col-md-6 text-start d-flex align-items-center">
+                    <img className="w-25" src={shirt1} alt="" />
+                    <span>Printed Bowling Shirt</span>
+                </div>
+                <div className="col-2 d-md-block d-none">
+                    <span>1 990 ₽</span>
+                </div>
+                <div className="col-md-2 col-4 d-flex justify-content-center">
+                    <div className="item-counter w-75 d-flex border border-1 border-dark">
+                    <button>-</button>
+                    <input defaultValue={1} type="text" />
+                    <button>+</button>
+                    </div>
+                </div>
+                <div className="col-md-2 col-4">
+                    <span>1 990 ₽</span>
+                </div>
+                </div>
+                <div className="d-flex flex-column align-items-md-center">
+                <div className="proceed">
+                    <div className="proceed-labels p-4 d-flex justify-content-between">
+                    <span>Заказ на сумму</span>
+                    <span>1 990 ₽</span>
+                    </div>
+                    <div className="p-4 d-flex justify-content-between">
+                    <Link to="/catalog" className="link-secondary text-decoration-none fw-bold d-flex align-items-center">
+                        <ArrowLeft className="me-2" size={28}/>
+                        Вернуться в каталог
+                    </Link>
+                    <button className="checkout btn btn-primary fw-bold rounded-pill d-flex align-items-center px-4">
+                        Оформить заказ
+                        <ArrowRight className="ms-2" size={28}/>
+                    </button>
+                    </div>
+                </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Cart;
--- a/src/pages/Catalog/Catalog.css
+++ b/src/pages/Catalog/Catalog.css
@ -0,0 +1,54 @@
+.product-grid{
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: 2vw;
+}
+
+.product-grid a, .product-grid div{
+    width: 400px;
+    height: 400px;
+}
+
+@media screen and (max-width: 1290px) {
+    .product-grid{
+        grid-template-columns: 1fr 1fr;
+    }
+    .product-grid a, .product-grid div{
+        width: 40vw;
+        height: 40vw;
+    }
+}
+
+@media screen and (max-width: 720px) {
+    .product-grid{
+        grid-template-columns: 1fr;
+    }
+    .product-grid a, .product-grid div{
+        width: 80vw;
+        height: 80vw;
+    }
+}
+.product-grid div{
+    position: absolute;
+    background-color: rgba(0, 0, 0, .3);
+    border: 1px solid rgba(0, 0, 0, 1);
+    opacity: 0;
+}
+
+.product-grid div:hover, .product-grid a:focus > div{
+    opacity: 1;
+    transition-property: opacity;
+    transition-duration: .4s;
+    transition-timing-function: ease-out;
+}
+
+.product-grid-container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 40px;
+}
+
+.product-grid{
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+}
--- a/src/pages/Catalog/Catalog.jsx
+++ b/src/pages/Catalog/Catalog.jsx
@ -0,0 +1,63 @@
+import shirt1 from '../../assets/57010633_30_B.png';
+import shirt2 from '../../assets/57067703_30_B.png';
+import shirt3 from '../../assets/57077709_30_B.png';
+import shirt4 from '../../assets/57020618_01_B.png';
+import shirt5 from '../../assets/47065903_45_B.png';
+import shirt6 from '../../assets/57010584_54_B.png';
+import './Catalog.css'
+
+const Catalog = () => {
+    return (
+        <>
+            <h2 className="text-center display-6 my-4">Рубашки</h2>
+            <section className="product-grid-container">
+                <div className="product-grid">
+                <a className="link-light" href="">
+                    <div className="d-flex align-items-center justify-content-center flex-column text-center">
+                    <h4 className="fs-1 fw-bold pt-5">Printed Bowling Shirt</h4>
+                    <p className="fs-2 p-0">1 990 ₽</p>
+                    </div>
+                    <img className="img-fluid" src={shirt1} alt="" />
+                </a>
+                <a className="link-light" href="">
+                    <div className="d-flex align-items-center justify-content-center flex-column text-center">
+                    <h4 className="fs-1 fw-bold pt-5">Cotton fil-a-fil shirt</h4>
+                    <p className="fs-2 p-0">4 990 ₽</p>
+                    </div>
+                    <img className="img-fluid" src={shirt2} alt="" />
+                </a>
+                <a className="link-light" href="">
+                    <div className="d-flex align-items-center justify-content-center flex-column text-center">
+                    <h4 className="fs-1 fw-bold pt-5">Corduroy pockets overshirt</h4>
+                    <p className="fs-2 p-0">5 990 ₽</p>
+                    </div>
+                    <img className="img-fluid" src={shirt3} alt="" />
+                </a>
+                <a className="link-light" href="">
+                    <div className="d-flex align-items-center justify-content-center flex-column text-center">
+                    <h4 className="fs-1 fw-bold pt-5">Shirt</h4>
+                    <p className="fs-2 p-0">1 990 ₽</p>
+                    </div>
+                    <img className="img-fluid" src={shirt4} alt="" />
+                </a>
+                <a className="link-light" href="">
+                    <div className="d-flex align-items-center justify-content-center flex-column text-center">
+                    <h4 className="fs-1 fw-bold pt-5">Shirt</h4>
+                    <p className="fs-2 p-0">2 990 ₽</p>
+                    </div>
+                    <img className="img-fluid" src={shirt5} alt="" />
+                </a>
+                <a className="link-light" href="">
+                    <div className="d-flex align-items-center justify-content-center flex-column text-center">
+                    <h4 className="fs-1 fw-bold pt-5">Shirt</h4>
+                    <p className="fs-2 p-0">3 990 ₽</p>
+                    </div>
+                    <img className="img-fluid" src={shirt6} alt="" />
+                </a>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default Catalog;
--- a/src/pages/ErrorPage.jsx
+++ b/src/pages/ErrorPage.jsx
@ -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;
--- a/src/pages/Homepage.jsx
+++ b/src/pages/Homepage.jsx
@ -0,0 +1,28 @@
+
+import shoes from '../assets/solovair1_MAINWEB_1000x.jpg';
+import glasses from '../assets/SUNNY_100x.jpg';
+import jacket from '../assets/bronco5_72_1000x.jpg';
+
+const Homepage = () => {
+    return (
+        <>
+            <div className="d-flex align-items-center">
+                <div className="container-xxl">
+                    <div className="row">
+                    <div className="col-md-4 my-3">
+                        <img className="img-fluid" src={shoes} alt="" />
+                    </div>
+                    <div className="col-md-4 my-3">
+                        <img className="img-fluid" src={glasses} alt="" />
+                    </div>
+                    <div className="col-md-4 my-3">
+                        <img className="img-fluid" src={jacket} alt="" />
+                    </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Homepage;
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@ -0,0 +1,63 @@
+import { Button, Form } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import { useState } from 'react';
+
+const Login = () => {
+    const [validated, setValidated] = useState(false);
+    const [formData, setFormData] = useState({
+        email: '',
+        password: ''
+    });    
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        event.preventDefault();
+        event.stopPropagation();
+        if (form.checkValidity() !== false) {
+            console.log(formData);
+        }
+        setValidated(true);
+    };
+
+    const handleChange = (event) => {
+        const inputName = event.target.name;
+        const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
+        setFormData({
+            ...formData,
+            [inputName]: inputValue,
+        });
+    };
+
+    return (
+        <>
+            <h2 className="text-center display-6 my-4">Вход</h2>
+            <div className="container-fluid d-flex align-items-center justify-content-center mb-5">
+                <Form className="p-5 rounded login-form" noValidate validated={validated} onSubmit={handleSubmit}>
+                    <p className="text-center mb-4">
+                        Только для зарегистрированных пользователей
+                        <br />
+                        Нет аккаунта?{" "}
+                        <Link to='#' className="link-info">
+                        Зарегистрироваться
+                        </Link>
+                    </p>
+                    <Form.Group className='mb-2 fw-bold' controlId='email'>
+                        <Form.Label>E-mail</Form.Label>
+                        <Form.Control type='email' name='email' required
+                            value={formData.email} onChange={handleChange} />
+                    </Form.Group>
+                    <Form.Group className="mb-2 position-relative" controlId='password'>
+                        <Form.Label className="fw-bold">Пароль</Form.Label>
+                        <Form.Control type={showPassword ? 'text' : 'password'} name='password' required
+                            value={formData.password} onChange={handleChange} />
+                            <input className='mt-2' type="checkbox" onClick={() => setShowPassword(!showPassword)} /> Показать пароль
+                    </Form.Group>
+                    <Button className="w-100 fw-bold mt-3" variant='primary' type='submit'>Войти</Button>
+                </Form>
+            </div>
+        </>
+    );
+};
+
+export default Login;
--- a/src/pages/PhysicalStore.jsx
+++ b/src/pages/PhysicalStore.jsx
@ -0,0 +1,36 @@
+import photo from '../assets/251520454_879419866277179_9012306805843872371_n-1-1.jpg';
+
+const AboutUs = () => {
+    return (
+        <>
+            <h2 className="text-center display-6 my-4">Физический магазин</h2>
+            <section className="container-sm mb-5">
+                <div className="row">
+                    <div className="col-sm-6 d-flex flex-column align-items-center justify-content-center">
+                        <h4 className="text-center fw-bold fs-4">
+                        улица Этьенн, 42, Верхний Ле Валье, Французская Ривьера
+                        </h4>
+                        <p className="fs-5 text-justify">
+                        Чтобы попасть на эту улицу, нужно пройти через запутанные переулки.
+                        Следуй по узким аллеям, окруженным старыми зданиями с темными окнами.
+                        Пересеки площадь с памятником фигуры в плаще и шляпе, затем сверни в
+                        узкую проходную между двумя зданиями. Продолжай идти, пока не увидишь
+                        темный переулок с вывеской &quot;Улица Этьенн&quot;. Поверни туда и продолжай
+                        двигаться вперед, вглядываясь в тени и слушая шорохи, пока не дойдешь
+                        до дома №42.
+                        </p>
+                    </div>
+                    <div className="col-sm-6 d-flex align-items-center">
+                        <img
+                        className="img-fluid rounded"
+                        src={photo}
+                        alt=""
+                        />
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default AboutUs;
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    sourcemap: true,
+    chunkSizeWarningLimit: 1024,
+    emptyOutDir: true,
+  },
+})
--- a/Лаб-1.docx
+++ b/Лаб-1.docx
--- a/Лаб-2.docx
+++ b/Лаб-2.docx
--- a/Лаб-3.docx
+++ b/Лаб-3.docx
--- a/Лаб-4.docx
+++ b/Лаб-4.docx
--- a/Лаб-5.docx
+++ b/Лаб-5.docx
Author	SHA1	Message	Date
russell	8d9daddba8	удален logo.png	2024-01-10 20:56:59 +04:00
russell	4d40ed3ebe	lab4	2024-01-10 20:53:28 +04:00
russell	be7cc6d885	lab3	2024-01-10 20:47:54 +04:00
russell	2e3f6bc245	lab2	2024-01-10 20:41:47 +04:00