temp

2024-01-12 22:56:03 +04:00 · 2024-01-12 22:55:26 +04:00 · 2023-12-15 15:08:39 +04:00 · 2023-12-15 14:34:50 +04:00 · 2023-12-15 14:25:40 +04:00 · 2023-12-15 14:22:50 +04:00
48 changed files with 5512 additions and 2 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'airbnb-base',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 12, sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    'indent': 'off',
+    'no-console': 'off',
+    'arrow-body-style': 'off',
+    'implicit-arrow-linebreak': 'off',
+  },
+}
--- 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
@ -1,3 +1,3 @@
-# Отчёты по лабораторным работам по дисциплине "Интернет-программирование"
+# Отчёт по лабораторной работе №4

-Выберите нужную лабораторную работу из списка *веток*
+Файл отчета: `Отчет лаб4.docx`
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<html lang="ru">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>СигмаТеатр</title>
+</head>
+
+<body>
+  <div id="root" class="h-100 d-flex flex-column"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "target": "ES2020",
+        "jsx": "react",
+        "strictNullChecks": true,
+        "strictFunctionTypes": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,32 @@
+{
+  "name": "lec4",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0",
+    "bootstrap": "^5.3.2",
+    "react-bootstrap": "^2.9.1",
+    "react-bootstrap-icons": "^1.10.3",
+    "prop-types": "^15.8.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "vite": "^4.4.5"
+  }
+}
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,9 @@
+body {
+    padding-top: 62px;
+}
+
+.image-preview {
+    border-radius: 16px;
+    max-width: 200px;
+    height: auto;
+}
--- a/src/App.jsx
+++ b/src/App.jsx
@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import { Container } from 'react-bootstrap';
+import { Outlet } from 'react-router-dom';
+import './App.css';
+import Footer from './components/footer/Footer.jsx';
+import Navigation from './components/navigation/Navigation.jsx';
+
+const App = ({ routes }) => {
+  return (
+    <>
+      <Navigation routes={ routes }></Navigation>
+
+      <Container as="main" fluid className="px-0">
+        <Outlet />
+      </Container>
+
+      <Footer routes={ routes } />
+    </>
+  );
+};
+
+App.propTypes = {
+  routes: PropTypes.array,
+};
+
+export default App;
--- a/src/assets/footer/download-buttons/AppGallery.svg
+++ b/src/assets/footer/download-buttons/AppGallery.svg
--- a/src/assets/footer/download-buttons/AppStore.svg
+++ b/src/assets/footer/download-buttons/AppStore.svg
--- a/src/assets/footer/download-buttons/GooglePlay.svg
+++ b/src/assets/footer/download-buttons/GooglePlay.svg
--- a/src/assets/main-page/posters/AmericanPsycho.jpg
+++ b/src/assets/main-page/posters/AmericanPsycho.jpg
--- a/src/assets/main-page/posters/BetterCallSaul.jpg
+++ b/src/assets/main-page/posters/BetterCallSaul.jpg
--- a/src/assets/main-page/posters/BetterCallSaul.png
+++ b/src/assets/main-page/posters/BetterCallSaul.png
--- a/src/assets/main-page/posters/BladeRunner2049.jpg
+++ b/src/assets/main-page/posters/BladeRunner2049.jpg
--- a/src/assets/main-page/posters/BreakingBad.png
+++ b/src/assets/main-page/posters/BreakingBad.png
--- a/src/assets/main-page/posters/Drive.jpg
+++ b/src/assets/main-page/posters/Drive.jpg
--- a/src/assets/main-page/posters/FightClub.png
+++ b/src/assets/main-page/posters/FightClub.png
--- a/src/assets/main-page/posters/Joker.jpg
+++ b/src/assets/main-page/posters/Joker.jpg
--- a/src/assets/main-page/posters/NoCountryForOldMen.jpg
+++ b/src/assets/main-page/posters/NoCountryForOldMen.jpg
--- a/src/assets/main-page/posters/PeakyBlinders.png
+++ b/src/assets/main-page/posters/PeakyBlinders.png
--- a/src/assets/main-page/posters/Pusher.png
+++ b/src/assets/main-page/posters/Pusher.png
--- a/src/assets/main-page/posters/Scarface.png
+++ b/src/assets/main-page/posters/Scarface.png
--- a/src/assets/main-page/posters/Sopranos.png
+++ b/src/assets/main-page/posters/Sopranos.png
--- a/src/assets/pricing/diamond.png
+++ b/src/assets/pricing/diamond.png
--- a/src/assets/pricing/no-ads.png
+++ b/src/assets/pricing/no-ads.png
--- a/src/components/footer/Footer.css
+++ b/src/components/footer/Footer.css
@ -0,0 +1,42 @@
+.flex-box {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.download-button {
+    margin-right: 1rem;
+}
+
+.footer-navigation-button {
+    margin-left: 1rem;
+    text-decoration: none;
+}
+
+@media (max-width: 1300px) {
+    .flex-box {
+        flex-direction: column;
+    }
+
+    #stores {
+        flex-direction: row;
+    }
+
+    #links {
+        padding-top: 20px;
+    }
+
+    .download-button {
+        margin-top: 1rem;
+    }
+
+    .footer-navigation-button {
+        margin-bottom: 0.75rem;
+    }
+}
+
+@media (max-width: 600px) {
+    #stores {
+        flex-direction: column;
+    }
+}
--- a/src/components/footer/Footer.jsx
+++ b/src/components/footer/Footer.jsx
@ -0,0 +1,65 @@
+import { Container } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import './Footer.css';
+import PropTypes from 'prop-types';
+
+import appGallery from '../../assets/footer/download-buttons/AppGallery.svg';
+import appStore from '../../assets/footer/download-buttons/AppStore.svg';
+import googlePlay from '../../assets/footer/download-buttons/GooglePlay.svg';
+
+const Footer = ({ routes }) => {
+    const year = new Date().getFullYear();
+
+    const pageMain = routes.find((page) => { return page.title === 'СигмаТеатр'; });
+    const pageAboutUs = routes.find((page) => { return page.title === 'О нас'; });
+    const pageAdminPanel = routes.find((page) => { return page.title === 'CRUD администрирование'; });
+
+    return (
+        <footer className="py-2 bg-dark text-light mt-auto">
+            <Container fluid="md" className="py-2">
+                <div className="d-flex flex-wrap justify-content-between align-items-center">
+                    <div>
+                        <div className="flex-box justify-content-start" id="stores">
+                            <a href="https://play.google.com/store/games?hl=ru&gl=US">
+                                <img src={ googlePlay } className="download-button" alt="" />
+                            </a>
+                            <a href="https://www.huawei.ru/appgallery/">
+                                <img src={ appGallery } className="download-button" alt="" />
+                            </a>
+                            <a href="https://www.apple.com/app-store/">
+                                <img src={ appStore } className="download-button" alt="" />
+                            </a>
+                        </div>
+
+                        <h6 className="text-secondary mt-3">&copy; { year } СигмаТеатр</h6>
+                    </div>
+
+                    <div className="flex-box" id="links">
+                        <Link to={ pageMain.path ?? '/' } className="text-secondary text-decoration-none footer-navigation-button">
+                            Главная
+                        </Link>
+
+                        <Link to={ pageMain.path ?? '/' } className="text-secondary text-decoration-none footer-navigation-button">
+                            Политика конфиденциальности
+                        </Link>
+
+                        <Link to={ pageAboutUs.path ?? '/' } className="text-secondary text-decoration-none footer-navigation-button">
+                            О нас
+                        </Link>
+
+                        <Link to={ pageAdminPanel.path ?? '/' } className="text-secondary text-decoration-none footer-navigation-button">
+                            Страница администратора
+                        </Link>
+                    </div>
+
+                </div>
+            </Container>
+        </footer>
+    );
+};
+
+Footer.propTypes = {
+    routes: PropTypes.array,
+};
+
+export default Footer;
--- a/src/components/movies/MovieBookmark.jsx
+++ b/src/components/movies/MovieBookmark.jsx
@ -0,0 +1,27 @@
+import { Col } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+const MovieBookmark = ({
+    id, imageSrc, title, requiresSubscription, deleteCallback,
+}) => {
+    return (
+        <Col xs={ 6 } sm={ 4 } lg={ 3 }>
+            <a href={ `/videoplayer?id=${id}` } className="text-decoration-none">
+                <img src={ imageSrc } className="img-fluid film-poster" alt="" />
+                <h5 className="text-black mt-3">{ title }</h5>
+                <h6 className="text-secondary">{ requiresSubscription ? 'По подписке' : 'Бесплатно' }</h6>
+            </a>
+            <button className="btn btn-outline-info" onClick={ () => deleteCallback(id) }>Удалить</button>
+        </Col>
+    );
+};
+
+MovieBookmark.propTypes = {
+    id: PropTypes.number,
+    imageSrc: PropTypes.string,
+    title: PropTypes.string,
+    requiresSubscription: PropTypes.bool,
+    deleteCallback: PropTypes.func,
+};
+
+export default MovieBookmark;
--- a/src/components/movies/MovieItem.css
+++ b/src/components/movies/MovieItem.css
@ -0,0 +1,3 @@
+.film-poster {
+    border-radius: 20px;
+}
--- a/src/components/movies/MovieItem.jsx
+++ b/src/components/movies/MovieItem.jsx
@ -0,0 +1,27 @@
+import { Col } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+import './MovieItem.css';
+
+const MovieItem = ({
+    id, imageSrc, title, requiresSubscription,
+}) => {
+    return (
+        <Col xs={ 6 } sm={ 4 } lg={ 3 }>
+            <a href={ `/videoplayer?id=${id}` } className="text-decoration-none">
+                <img src={ imageSrc } className="img-fluid film-poster" alt="" />
+                <h5 className="text-black mt-3">{ title }</h5>
+                <h6 className="text-secondary">{ requiresSubscription ? 'По подписке' : 'Бесплатно' }</h6>
+            </a>
+        </Col>
+    );
+};
+
+MovieItem.propTypes = {
+    id: PropTypes.number,
+    imageSrc: PropTypes.string,
+    title: PropTypes.string,
+    requiresSubscription: PropTypes.bool,
+};
+
+export default MovieItem;
--- a/src/components/navigation/Navigation.css
+++ b/src/components/navigation/Navigation.css
@ -0,0 +1,4 @@
+.my-nav-link {
+    align-items: center;
+    display: flex;
+}
--- a/src/components/navigation/Navigation.jsx
+++ b/src/components/navigation/Navigation.jsx
@ -0,0 +1,63 @@
+import {
+    Container, Nav, Navbar, Button,
+} from 'react-bootstrap';
+
+import PropTypes from 'prop-types';
+import { Film } from 'react-bootstrap-icons';
+import { Link, useLocation } from 'react-router-dom';
+import './Navigation.css';
+
+const Navigation = ({ routes }) => {
+    const location = useLocation();
+    const indexPageLink = routes.filter((route) => route.index === false).shift();
+
+    const pageMain = routes.find((page) => { return page.title === 'СигмаТеатр'; });
+    const pageAboutUs = routes.find((page) => { return page.title === 'О нас'; });
+    const pageLogin = routes.find((page) => { return page.title === 'Вход в аккаунт'; });
+    const pageProfile = routes.find((page) => { return page.title === 'Профиль'; });
+    const pagePricing = routes.find((page) => { return page.title === 'Подписка'; });
+
+    return (
+        <header>
+            <Navbar fixed='top' expand='lg' bg='dark' data-bs-theme='dark' className='py-1'>
+                <Container fluid='md'>
+                    <Navbar.Brand as={ Link } to={indexPageLink?.path ?? '/'} className='align-items-center'>
+                        <Film className='d-inline-block align-middle pb-1' width="25" height="25"/>
+                        <span className="fw-bold text-uppercase ms-2">СигмаТеатр</span>
+                    </Navbar.Brand>
+                    <Navbar.Toggle aria-controls='main-navbar' />
+                    <Navbar.Collapse id='main-navbar' className='justify-content-end align-items-center'>
+                        <Nav className='link' activeKey={ location.pathname }>
+
+                            <Nav.Link className='me-3 my-nav-link' as={ Link } key={ pageMain.path } eventKey={ pageMain.path } to={ pageMain.path ?? '/' }>
+                                <span>Фильмы и сериалы</span>
+                            </Nav.Link>
+                            <Nav.Link className='me-3 my-nav-link' as={ Link } key={ pageAboutUs.path } eventKey={ pageAboutUs.path } to={ pageAboutUs.path ?? '/' }>
+                                Справка
+                            </Nav.Link>
+                            <Nav.Link className='me-3 my-nav-link' as={ Link } key={ pageLogin.path } eventKey={ pageLogin.path } to={ pageLogin.path ?? '/' }>
+                                Вход в аккаунт
+                            </Nav.Link>
+                            <Nav.Link className='me-3 my-nav-link' as={ Link } key={ pageProfile.path } eventKey={ pageProfile.path } to={ pageProfile.path ?? '/' }>
+                                Профиль
+                            </Nav.Link>
+                            <Nav.Link className='d-lg-none' as={ Link } key={ pagePricing.path } eventKey={ pagePricing.path } to={ pagePricing.path ?? '/' }>
+                                Купить подписку
+                            </Nav.Link>
+                            <Nav.Link className='d-none d-lg-inline' as={ Link } eventKey={ pagePricing.path } to={ pagePricing.path ?? '/' }>
+                                <Button variant='light'>Купить подписку</Button>
+                            </Nav.Link>
+
+                        </Nav>
+                    </Navbar.Collapse>
+                </Container>
+            </Navbar >
+        </header>
+    );
+};
+
+Navigation.propTypes = {
+    routes: PropTypes.array,
+};
+
+export default Navigation;
--- a/src/components/pricing/PricingPlan.jsx
+++ b/src/components/pricing/PricingPlan.jsx
@ -0,0 +1,33 @@
+import { Col, Card } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+const PricingPlan = ({
+    title, subtitle, price, description, isPrimary,
+}) => {
+    const borderStyling = isPrimary ? 'border-primary border-3 pb-3' : 'border-1';
+
+    return (
+        <Col xs={ isPrimary ? 9 : 8 } lg={ 4 } xl={ isPrimary ? 4 : 3 }>
+            <Card className={ borderStyling }>
+                { isPrimary && <Card.Header className="text-center text-primary">Самый популярный</Card.Header> }
+                <Card.Body className={ `text-center ${isPrimary ? 'py-5' : 'py-4'}` }>
+                    <h4 className="card-title">{ title }</h4>
+                    <p className="lead card-subtitle">{ subtitle }</p>
+                    <p className={ `${isPrimary ? 'display-4' : 'display-5'} my-4 text-primary fw-bold` }>{ price } &#8381;</p>
+                    <p className="card-text mx-5 text-muted d-none d-lg-block">{ description }</p>
+                    <a href="#" className={ `btn btn-outline-primary btn-lg ${isPrimary ? 'mt-4' : 'mt-3'}` }>Купить</a>
+                </Card.Body>
+            </Card>
+        </Col>
+    );
+};
+
+PricingPlan.propTypes = {
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+    price: PropTypes.string,
+    description: PropTypes.string,
+    isPrimary: PropTypes.bool,
+};
+
+export default PricingPlan;
--- a/src/components/pricing/Priveledge.jsx
+++ b/src/components/pricing/Priveledge.jsx
@ -0,0 +1,24 @@
+import { Col } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+const Priveledge = ({ icon, title, description }) => {
+    return (
+        <Col lg={ 6 }>
+            <div className="d-flex flex-row align-items-center">
+                <img src={ icon } width="50px" height="100%" alt="" />
+                <div className="ms-3">
+                    <p className="lead">{ title }</p>
+                    <p>{ description }</p>
+                </div>
+            </div>
+        </Col>
+    );
+};
+
+Priveledge.propTypes = {
+    icon: PropTypes.string,
+    title: PropTypes.string,
+    description: PropTypes.string,
+};
+
+export default Priveledge;
--- a/src/index.css
+++ b/src/index.css
--- a/src/main.jsx
+++ b/src/main.jsx
@ -0,0 +1,69 @@
+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 PageIndex from './pages/PageIndex.jsx';
+import PagePricing from './pages/PagePricing.jsx';
+import PageAboutUs from './pages/PageAboutUs.jsx';
+import PageLogin from './pages/PageLogin.jsx';
+import PageVideoplayer from './pages/PageVideoplayer.jsx';
+import PageAdminPanel from './pages/PageAdminPanel.jsx';
+import PageProfile from './pages/PageProfile.jsx';
+
+const routes = [
+  {
+    index: true,
+    path: '/',
+    element: <PageIndex />,
+    title: 'СигмаТеатр',
+  },
+  {
+    path: '/pricing',
+    element: <PagePricing />,
+    title: 'Подписка',
+  },
+  {
+    path: '/about_us',
+    element: <PageAboutUs />,
+    title: 'О нас',
+  },
+  {
+    path: '/login',
+    element: <PageLogin />,
+    title: 'Вход в аккаунт',
+  },
+  {
+    path: '/videoplayer',
+    element: <PageVideoplayer />,
+    title: 'Просмотр',
+  },
+  {
+    path: '/admin_panel',
+    element: <PageAdminPanel />,
+    title: 'CRUD администрирование',
+  },
+  {
+    path: '/profile',
+    element: <PageProfile />,
+    title: 'Профиль',
+  },
+];
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App routes={ routes } />,
+    children: routes,
+    errorElement: <ErrorPage />,
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <RouterProvider router={ router } />
+  </React.StrictMode>,
+);
--- 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/PageAboutUs.jsx
+++ b/src/pages/PageAboutUs.jsx
@ -0,0 +1,121 @@
+import {
+    Container, Row, Col, Form, InputGroup, Button, Modal,
+} from 'react-bootstrap';
+
+import { EnvelopeFill, PersonFill, ChatRightDotsFill } from 'react-bootstrap-icons';
+import { useState } from 'react';
+
+const PageAboutUs = () => {
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+
+    return (
+        <>
+            <section id="contact-info">
+                <Container fluid="md" className="py-4">
+                    <Row className="gx-5 gy-5">
+                        <Col lg={ 5 }>
+                            <h2 className="text-center mb-5">Контактные данные</h2>
+                            <ul className="list-group list-group-flush">
+                                <li className="list-group-item">
+                                    <span className="fw-bold">Страна:</span> Россия
+                                </li>
+                                <li className="list-group-item">
+                                    <span className="fw-bold">Адрес:</span> 432029, Ульяновск
+                                </li>
+                                <li className="list-group-item">
+                                    <span className="fw-bold">Телефон:</span> +7 (987) 654 32-10
+                                </li>
+                                <li className="list-group-item">
+                                    <span className="fw-bold">Факс:</span> +49 221 95491533
+                                </li>
+                                <li className="list-group-item">
+                                    <span className="fw-bold">Электронная почта:</span> sigmacinema@gmail.com
+                                </li>
+                                <li className="list-group-item">
+                                    <span className="fw-bold">ИНН:</span> 7743013902
+                                </li>
+                            </ul>
+                        </Col>
+
+                        <Col lg={ 7 }>
+                            <h2 className="text-center mb-5">Мы на карте</h2>
+                            <iframe
+                            src="https://www.google.com/maps/embed/v1/place?q=Ульяновск,+Россия,+432029&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
+                            width="100%" height="500" allowFullScreen="" loading="lazy"
+                            referrerPolicy="no-referrer-when-downgrade"></iframe>
+                        </Col>
+                    </Row>
+                </Container>
+            </section>
+
+            <section id="feedback" className="bg-light">
+                <Container fluid="md" className="py-4 mt-5">
+                    <div className="text-center">
+                        <h2>Остались вопросы?</h2>
+                        <p className="lead text-muted">Задайте ваш вопрос нашей службе поддержки - мы постараемся ответить на него в ближайшее время</p>
+                    </div>
+
+                    <Row className="justify-content-center mt-5">
+                        <Col lg={ 6 }>
+                            <Form>
+                                <Form.Group>
+                                    <Form.Label>Ваш адрес электронной почты</Form.Label>
+                                    <InputGroup className="mb-3">
+                                        <InputGroup.Text><EnvelopeFill /></InputGroup.Text>
+                                        <Form.Control type="email" placeholder="myemail@mail.com" />
+                                    </InputGroup>
+                                </Form.Group>
+
+                                <Form.Group>
+                                    <Form.Label>Ваше имя</Form.Label>
+                                    <InputGroup className="mb-3">
+                                        <InputGroup.Text><PersonFill /></InputGroup.Text>
+                                        <Form.Control type="text" placeholder="Иванов Иван" />
+                                    </InputGroup>
+                                </Form.Group>
+
+                                <Form.Group>
+                                    <Form.Label>О чем ваш вопрос?</Form.Label>
+                                    <InputGroup className="mb-4">
+                                        <InputGroup.Text><ChatRightDotsFill /></InputGroup.Text>
+                                        <Form.Select>
+                                            <option value="pricing">Оплата подписки</option>
+                                            <option value="content">Фильмы или сериалы</option>
+                                            <option value="other">Другое</option>
+                                        </Form.Select>
+                                    </InputGroup>
+                                </Form.Group>
+
+                                <Form.Control as="textarea" rows={ 5 } placeholder="Ваш вопрос..." />
+
+                                <div className="text-center mt-4">
+                                    <Button variant="primary" onClick={ handleShow }>Отправить</Button>
+                                </div>
+                            </Form>
+                        </Col>
+                    </Row>
+                </Container>
+            </section>
+
+            <Modal show={ show } onHide={ handleClose }>
+                <Modal.Header closeButton>
+                    <Modal.Title>Ваш вопрос отправлен</Modal.Title>
+                </Modal.Header>
+
+                <Modal.Body>На указанный вами адрес электронной почты
+                    скоро придет письмо с ответом.</Modal.Body>
+
+                <Modal.Footer>
+                    <Button variant="primary" onClick={handleClose}>
+                        Закрыть
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+        </>
+    );
+};
+
+export default PageAboutUs;
--- a/src/pages/PageAdminPanel.jsx
+++ b/src/pages/PageAdminPanel.jsx
@ -0,0 +1,173 @@
+import {
+    Container, Button, Table, Form, Modal,
+} from 'react-bootstrap';
+
+import {
+    PencilFill, TrashFill,
+} from 'react-bootstrap-icons';
+
+import { useState } from 'react';
+
+const PageAdminPanel = () => {
+    const [shouldShowModal, setShowModal] = useState(false);
+
+    const addMovieHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        setShowModal(true);
+    };
+
+    return (
+        <>
+            <section id="administration">
+                <Container fluid="md" className="py-4 mb-4">
+                    <div className="text-center">
+                        <h2>Страница администратора</h2>
+                        <p className="lead text-muted">Выполнение CRUD-операций над фильмами или сериалами</p>
+                    </div>
+
+                    <Button id="addMovie" className="mb-4" onClick={ addMovieHandler }>Добавить запись</Button>
+
+                    <Table id="items-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 d-none d-sm-table-cell">Требуется подписка</th>
+                                <th scope="col" className="w-25 d-none d-sm-table-cell">Год производства</th>
+                                <th scope="col"></th>
+                                <th scope="col"></th>
+                        </tr></thead>
+
+                        <tbody>
+                            <tr id="line-1">
+                                <th scope="row">1</th>
+                                <td>Американский психопат</td>
+                                <td>Фильм</td>
+                                <td className="d-none d-sm-table-cell">+</td>
+                                <td className="d-none d-sm-table-cell">1999</td>
+                                <td><a href="#"><PencilFill /></a></td>
+                                <td><a href="#"><TrashFill /></a></td>
+                            </tr>
+
+                            <tr id="line-2">
+                                <th scope="row">2</th>
+                                <td>Драйв</td>
+                                <td>Фильм</td>
+                                <td className="d-none d-sm-table-cell">-</td>
+                                <td className="d-none d-sm-table-cell">1999</td>
+                                <td><a href="#"><PencilFill /></a></td>
+                                <td><a href="#"><TrashFill /></a></td>
+                            </tr>
+
+                            <tr id="line-3">
+                                <th scope="row">3</th>
+                                <td>Острые козырьки</td>
+                                <td>Сериал</td>
+                                <td className="d-none d-sm-table-cell">-</td>
+                                <td className="d-none d-sm-table-cell">1999</td>
+                                <td><a href="#"><PencilFill /></a></td>
+                                <td><a href="#"><TrashFill /></a></td>
+                            </tr>
+                        </tbody>
+                    </Table>
+
+                </Container>
+            </section>
+
+            <Modal id="items-update" show={ shouldShowModal } onHide={ () => setShowModal(false) }>
+                <Form id="items-form">
+                    <Modal.Header closeButton>
+                        <Modal.Title className="fs-5" id="items-update-title"><h1></h1></Modal.Title>
+                    </Modal.Header>
+
+                    <Modal.Body>
+                        <div className="text-center">
+                            <img id="image-preview" src="https://via.placeholder.com/200" className="image-preview"
+                                alt="placeholder" />
+                        </div>
+
+                        <Form.Control id="items-line-id" type="number" hidden />
+
+                        <Form.Group className="mb-2">
+                            <Form.Label>Название</Form.Label>
+                            <Form.Control type="text" id="title" required />
+                        </Form.Group>
+
+                        <Form.Group className="mb-3">
+                            <Form.Label>Тип</Form.Label>
+                            <Form.Select id="type" required>
+                                <option value="Фильм" selected>Фильм</option>
+                                <option value="Сериал">Сериал</option>
+                            </Form.Select>
+                        </Form.Group>
+
+                        <Form.Group className="mb-3">
+                            <Form.Check type="checkbox" id="requiresSubscription" label="Требуется подписка" />
+                        </Form.Group>
+
+                        <Form.Group className="mb-2">
+                            <Form.Label>Постер</Form.Label>
+                            <Form.Control type="file" id="image" accept="image/*" />
+                        </Form.Group>
+
+                        <Form.Group className="mb-2">
+                            <Form.Label>Описание</Form.Label>
+                            <Form.Control id="description" as="textarea" rows={ 4 } />
+                        </Form.Group>
+
+                        <Form.Group className="mb-2">
+                            <Form.Label>Год производства</Form.Label>
+                            <Form.Control type="number" id="releaseDate" min="1900" step="1" required />
+                        </Form.Group>
+
+                        <Form.Group className="mb-2">
+                            <Form.Label>Страна</Form.Label>
+                            <Form.Control type="text" id="country" required />
+                        </Form.Group>
+
+                        <Form.Group className="mb-2">
+                            <Form.Label>Слоган</Form.Label>
+                            <Form.Control type="text" id="tagline" required />
+                        </Form.Group>
+
+                        <Form.Group className="mb-2">
+                            <Form.Label>Режиссер</Form.Label>
+                            <Form.Control type="text" id="director" required />
+                        </Form.Group>
+
+                        <Form.Group className="mb-3">
+                            <Form.Label>Возрастное ограничение</Form.Label>
+                            <Form.Select id="ageRating" required>
+                                <option value="0+" selected>0+</option>
+                                <option value="6+">6+</option>
+                                <option value="12+">12+</option>
+                                <option value="16+">16+</option>
+                                <option value="18+">18+</option>
+                            </Form.Select>
+                        </Form.Group>
+
+                        <Form.Group className="mb-2">
+                            <Form.Label>URL видео</Form.Label>
+                            <Form.Control type="text" id="video" required />
+                        </Form.Group>
+                    </Modal.Body>
+
+                    <Modal.Footer>
+                        <Button variant="secondary" onClick={ () => setShowModal(false) }>
+                            Закрыть
+                        </Button>
+
+                        <Button variant="primary" onClick={ () => setShowModal(false) }>
+                            Сохранить
+                        </Button>
+                    </Modal.Footer>
+                </Form>
+            </Modal>
+        </>
+    );
+};
+
+export default PageAdminPanel;
--- a/src/pages/PageIndex.jsx
+++ b/src/pages/PageIndex.jsx
@ -0,0 +1,63 @@
+import { Container, Row } from 'react-bootstrap';
+
+import logoAmericanPsycho from '../assets/main-page/posters/AmericanPsycho.jpg';
+import logoDrive from '../assets/main-page/posters/Drive.jpg';
+import logoFightClub from '../assets/main-page/posters/FightClub.png';
+import logoJoker from '../assets/main-page/posters/Joker.jpg';
+import logoNoCountryForOldMen from '../assets/main-page/posters/NoCountryForOldMen.jpg';
+import logoPusher from '../assets/main-page/posters/Pusher.png';
+import logoScarface from '../assets/main-page/posters/Scarface.png';
+import logoBladeRunner2049 from '../assets/main-page/posters/BladeRunner2049.jpg';
+import logoBetterCallSaul from '../assets/main-page/posters/BetterCallSaul.png';
+import logoPeakyBlinders from '../assets/main-page/posters/PeakyBlinders.png';
+import logoBreakingBad from '../assets/main-page/posters/BreakingBad.png';
+import logoSopranos from '../assets/main-page/posters/Sopranos.png';
+
+import MovieItem from '../components/movies/MovieItem.jsx';
+
+const PageIndex = () => {
+    return (
+        <>
+            <section id="movies">
+                <Container fluid="md" className="py-4 mb-4">
+
+                    <div className="text-center">
+                        <h2>Самые базированные фильмы</h2>
+                        <p className="lead text-muted">Здесь собраны ваши любимые кинофильмы</p>
+                    </div>
+
+                    <Row className="gx-5 gy-5 my-3">
+                        <MovieItem id={ 1 } imageSrc={ logoAmericanPsycho } title="Американский психопат" requiresSubscription={ true } />
+                        <MovieItem id={ 2 } imageSrc={ logoDrive } title="Драйв" requiresSubscription={ false } />
+                        <MovieItem id={ 3 } imageSrc={ logoFightClub } title="Бойцовский клуб" requiresSubscription={ true } />
+                        <MovieItem id={ 4 } imageSrc={ logoJoker } title="Джокер" requiresSubscription={ true } />
+                        <MovieItem id={ 5 } imageSrc={ logoNoCountryForOldMen } title="Старикам здесь не место" requiresSubscription={ false } />
+                        <MovieItem id={ 6 } imageSrc={ logoPusher } title="Дилер" requiresSubscription={ true } />
+                        <MovieItem id={ 7 } imageSrc={ logoScarface } title="Лицо со шрамом" requiresSubscription={ true } />
+                        <MovieItem id={ 8 } imageSrc={ logoBladeRunner2049 } title="Бегущий по лезвию - 2049" requiresSubscription={ false } />
+                    </Row>
+
+                </Container>
+            </section>
+
+            <section id="series" className="bg-light">
+                <Container fluid="md" className="py-4">
+
+                    <div className="text-center">
+                        <h2>Популярные сериалы</h2>
+                        <p className="lead text-muted">Сериалы, главные герои которых - буквально вы</p>
+                    </div>
+
+                    <Row className="gx-5 gy-5 mt-3 mb-5">
+                        <MovieItem id={ 1 } imageSrc={ logoBetterCallSaul } title="Лучше звоните Солу" requiresSubscription={ true } />
+                        <MovieItem id={ 1 } imageSrc={ logoPeakyBlinders } title="Острые козырьки" requiresSubscription={ false } />
+                        <MovieItem id={ 1 } imageSrc={ logoBreakingBad } title="Во все тяжкие" requiresSubscription={ true } />
+                        <MovieItem id={ 1 } imageSrc={ logoSopranos } title="Клан Сопрано" requiresSubscription={ false } />
+                    </Row>
+                </Container>
+            </section>
+        </>
+    );
+};
+
+export default PageIndex;
--- a/src/pages/PageLogin.jsx
+++ b/src/pages/PageLogin.jsx
@ -0,0 +1,106 @@
+import {
+    Container, Row, Col, Form, InputGroup, Button, Card, Modal,
+} from 'react-bootstrap';
+
+import {
+    PersonCircle, EnvelopeFill, LockFill, EyeFill,
+} from 'react-bootstrap-icons';
+
+import { useState } from 'react';
+
+const PageLogin = () => {
+    const [shouldShowForgotModal, setShowForgotModal] = useState(false);
+
+    const forgotPasswordHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        setShowForgotModal(true);
+    };
+
+    return (
+        <>
+            <section id="login">
+                <Container fluid="sm" className="py-4">
+                    <div className="text-center">
+                        <h2>Вход в аккаунт</h2>
+                        <p className="lead text-muted">Войдите в ваш аккаунт чтобы воспользоваться подпиской и иметь возможность отмечать желаемые фильмы</p>
+                    </div>
+
+                    <Row className="justify-content-center mt-5">
+                        <Col lg={ 4 }>
+                            <Card>
+                                <Card.Body>
+                                    <div className="d-flex flex-row justify-content-center align-items-center">
+                                        <PersonCircle className="text-primary" fontSize={ '30px' } />
+                                        <p className="lead my-auto ms-3 text-primary">Вход</p>
+                                    </div>
+
+                                    <Form className="my-3">
+                                        <Form.Group>
+                                            <Form.Label>Электронная почта</Form.Label>
+                                            <InputGroup className="mb-3">
+                                                <InputGroup.Text><EnvelopeFill /></InputGroup.Text>
+                                                <Form.Control type="email" id="email" placeholder="myemail@mail.com" />
+                                            </InputGroup>
+                                        </Form.Group>
+
+                                        <Form.Group>
+                                            <Form.Label>Пароль</Form.Label>
+                                            <InputGroup className="mb-3">
+                                                <InputGroup.Text><LockFill /></InputGroup.Text>
+                                                <Form.Control type="password" id="password" />
+                                                <InputGroup.Text><EyeFill /></InputGroup.Text>
+                                            </InputGroup>
+                                        </Form.Group>
+
+                                        <Form.Group className="mt-4 d-flex justify-content-between">
+                                            <div className="form-check me-4">
+                                                <Form.Check id="rememberMe"/>
+                                                <Form.Label><small className="text-secondary">Запомнить на этом компьютере</small></Form.Label>
+                                            </div>
+
+                                            <div className="forgot">
+                                                <a onClick={ forgotPasswordHandler } href='/' id="forgotPassword" className="text-decoration-none">
+                                                    <small>Забыли пароль?</small>
+                                                </a>
+                                            </div>
+                                        </Form.Group>
+
+                                        <div className="text-center mt-5">
+                                            <Button variant="primary">Войти</Button>
+                                        </div>
+                                    </Form>
+                                </Card.Body>
+                            </Card>
+                        </Col>
+                    </Row>
+                </Container>
+            </section>
+
+            <Modal show={ shouldShowForgotModal } onHide={ () => setShowForgotModal(false) }>
+                <Modal.Header closeButton>
+                    <Modal.Title>Восстановление пароля</Modal.Title>
+                </Modal.Header>
+
+                <Modal.Body className="mb-3">
+                    <p>В поле ниже напишите адрес электроннной почты, с которой была совершена
+                        регистрация. На этот адрес придёт письмо с дальнейшеми указаниями.</p>
+
+                    <Form.Group>
+                        <Form.Label>Адрес электронной почты:</Form.Label>
+                        <Form.Control type="email" placeholder="myemail@mail.com" />
+                    </Form.Group>
+                </Modal.Body>
+
+                <Modal.Footer>
+                    <Button variant="primary" onClick={ () => setShowForgotModal(false) }>
+                        Отправить
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+        </>
+    );
+};
+
+export default PageLogin;
--- a/src/pages/PagePricing.jsx
+++ b/src/pages/PagePricing.jsx
@ -0,0 +1,51 @@
+import {
+    Container, Row,
+} from 'react-bootstrap';
+
+import diamondIcon from '../assets/pricing/diamond.png';
+import noAdsIcon from '../assets/pricing/no-ads.png';
+
+import Priveledge from '../components/pricing/Priveledge.jsx';
+import PricingPlan from '../components/pricing/PricingPlan.jsx';
+
+const PagePricing = () => {
+    return (
+        <>
+            <section id="subscription-features">
+                <Container fluid="md" className="py-5">
+                    <div className="text-center">
+                        <h2>Преимущества подписки</h2>
+                        <p className="lead text-muted">Всё лучшее - в одной подписке</p>
+                    </div>
+
+                    <Row className="justify-content-between align-items-center my-5 gy-5">
+                        <Priveledge icon={ diamondIcon } title="Большая коллекция" description="Известные топовые фильмы и новинки" />
+                        <Priveledge icon={ noAdsIcon } title="Без рекламы" description="Видео не прервётся на самом интересном месте" />
+                    </Row>
+                </Container>
+            </section>
+
+            <section id="pricing" className="bg-light">
+                <Container fluid="md" className="py-5">
+                    <div className="text-center">
+                        <h2>Подписка на кинотеатр</h2>
+                        <p className="lead text-muted">Выберите, какой план вам подходит больше всего</p>
+                    </div>
+
+                    <Row className="my-5 justify-content-center align-items-center gy-3">
+                        <PricingPlan title="Большой Шлёппа" subtitle="Подписка на неделю" price="49,99"
+                        description="Попробуйте и решите, нравится ли вам наш сервис" isPrimary={ false } />
+
+                        <PricingPlan title="Базированный гигачад" subtitle="Подписка на месяц" price="149,99"
+                        description="Для тех, кто очень любит смотреть фильмы и сериалы по вечерам" isPrimary={ true } />
+
+                        <PricingPlan title="Райан Гослинг" subtitle="Подписка на год" price="799,99"
+                        description="Если вдруг захотите остаться с нами подольше" isPrimary={ false } />
+                    </Row>
+                </Container>
+            </section>
+        </>
+    );
+};
+
+export default PagePricing;
--- a/src/pages/PageProfile.jsx
+++ b/src/pages/PageProfile.jsx
@ -0,0 +1,52 @@
+import { Container, Row } from 'react-bootstrap';
+import MovieBookmark from '../components/movies/MovieBookmark.jsx';
+
+import logoAmericanPsycho from '../assets/main-page/posters/AmericanPsycho.jpg';
+import logoDrive from '../assets/main-page/posters/Drive.jpg';
+import logoPeakyBlinders from '../assets/main-page/posters/PeakyBlinders.png';
+
+const PageProfile = () => {
+    return (
+        <>
+            <section id="subscriptionStatus">
+                <Container fluid="md" className="py-4 mb-4">
+
+                    <div className="text-center">
+                        <h2>Статус подписки</h2>
+                        <p className="lead text-muted">Здесь отображается статус текущей подписки</p>
+                    </div>
+
+                    <p className="display-1 my-5">Статус: <span className="text-success">активна</span></p>
+                    <h3 className="fw-normal">Действует до: <span className="fw-bold">20.12.2023</span></h3>
+                    <button className="btn btn-outline-danger mt-4">Отменить подписку</button>
+
+                </Container>
+            </section>
+
+            <section id="watchLater" className="bg-light">
+                <Container fluid="md" className="py-4 mb-4">
+
+                    <div className="text-center">
+                        <h2>Избранное</h2>
+                        <p className="lead text-muted">Фильмы и сериары, отмеченные как `посмотреть позже`</p>
+                    </div>
+
+                    <Row className="gx-5 gy-5 my-3">
+                        <MovieBookmark id={ 1 } imageSrc={ logoAmericanPsycho } title="Американский психопат" requiresSubscription={ true } />
+                        <MovieBookmark id={ 2 } imageSrc={ logoPeakyBlinders } title="Острые козырьки" requiresSubscription={ false } />
+                        <MovieBookmark id={ 3 } imageSrc={ logoDrive } title="Драйв" requiresSubscription={ false } />
+                    </Row>
+
+                </Container>
+            </section>
+
+            <section id="logout">
+                <div className="text-center py-4">
+                    <button className="btn btn-lg btn-danger">Выйти из аккаунта</button>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default PageProfile;
--- a/src/pages/PageVideoplayer.jsx
+++ b/src/pages/PageVideoplayer.jsx
@ -0,0 +1,52 @@
+import {
+    Container, Row, Col, Button,
+} from 'react-bootstrap';
+
+const PageVideoplayer = () => {
+    return (
+        <>
+            <section id="player">
+                <Container fluid="md" className="py-4 mb-4">
+                    <div className="ratio ratio-16x9 my-4">
+                        <iframe width="560" height="315" src="https://www.youtube.com/embed/dfeUzm6KF4g?si=U2D-2WNsJzkcxlBX" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
+                    </div>
+                    <p className="display-4" id="movieTitle">Бойцовский клуб</p>
+
+                    <Row className="jgx-5 gy-5 mb-4">
+                        <Col lg={ 7 }>
+                            <h3>Описание</h3>
+                            <p className="my-4" id="movieDescription">
+                                Описание.
+                            </p>
+                        </Col>
+
+                        <Col lg={ 5 } id="movieInfoContainer">
+                            <h3>О фильме</h3>
+                            <ul className="list-group list-group-flush my-3">
+                                <li className="list-group-item">
+                                    <span className="fw-bold">Год производства:</span> 1999
+                                </li>
+                                <li className="list-group-item">
+                                    <span className="fw-bold">Страна:</span> США, Германия
+                                </li>
+                                <li className="list-group-item">
+                                    <span className="fw-bold">Слоган:</span> <span className="text-secondary">«Интриги. Хаос. Мыло»</span>
+                                </li>
+                                <li className="list-group-item">
+                                    <span className="fw-bold">Режиссер:</span> Дэвид Финчер
+                                </li>
+                                <li className="list-group-item">
+                                    <span className="fw-bold">Возраст:</span> 18+
+                                </li>
+                            </ul>
+                        </Col>
+                    </Row>
+
+                    <Button>Посмотреть позже</Button>
+                </Container>
+            </section>
+        </>
+    );
+};
+
+export default PageVideoplayer;
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,13 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    sourcemap: true,
+    chunkSizeWarningLimit: 1024,
+    emptyOutDir: true,
+  },
+});
--- a/лаб4.docx
+++ b/лаб4.docx
Author	SHA1	Message	Date
olshab	73684e5b85	temp	2024-01-12 22:56:03 +04:00
olshab	44613e9378	temp	2024-01-12 22:55:26 +04:00
olshab	7135b70eff	temp	2023-12-15 15:08:39 +04:00
olshab	a01cfe98e4	lab4	2023-12-15 14:34:50 +04:00
olshab	8a0b89568b	удалить лишние файлы	2023-12-15 14:25:40 +04:00
olshab	b271f22664	отчет	2023-12-15 14:22:50 +04:00
olshab	b06a0475f1	modal overflow	2023-12-10 17:47:05 +04:00
olshab	40b7e5f497	Лаб3	2023-12-08 00:57:11 +04:00
olshab	ac9fe9161a	Лаб3	2023-12-08 00:55:50 +04:00
olshab	8def19021d	remove redundant assets	2023-12-08 00:54:32 +04:00
olshab	31df2dcac5	Лаб2	2023-12-08 00:52:08 +04:00
olshab	f487be606d	typo	2023-12-08 00:51:01 +04:00
olshab	373e1d0d7c	Лаб1	2023-12-08 00:49:04 +04:00