Compare commits
No commits in common. "Lab4" and "main" have entirely different histories.
@ -1,24 +0,0 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'airbnb-base',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 12, sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
'indent': 'off',
|
||||
'no-console': 'off',
|
||||
'arrow-body-style': 'off',
|
||||
'implicit-arrow-linebreak': 'off',
|
||||
},
|
||||
}
|
||||
24
.gitignore
vendored
24
.gitignore
vendored
@ -1,24 +0,0 @@
|
||||
# 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?
|
||||
@ -1,3 +1,3 @@
|
||||
# Отчёт по лабораторной работе №4
|
||||
# Отчёты по лабораторным работам по дисциплине "Интернет-программирование"
|
||||
|
||||
Файл отчета: `Отчет лаб4.docx`
|
||||
Выберите нужную лабораторную работу из списка *веток*
|
||||
|
||||
14
index.html
14
index.html
@ -1,14 +0,0 @@
|
||||
<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>
|
||||
@ -1,14 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"target": "ES2020",
|
||||
"jsx": "react",
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"**/node_modules/*"
|
||||
]
|
||||
}
|
||||
4344
package-lock.json
generated
4344
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
32
package.json
32
package.json
@ -1,32 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
body {
|
||||
padding-top: 62px;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
border-radius: 16px;
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
26
src/App.jsx
26
src/App.jsx
@ -1,26 +0,0 @@
|
||||
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;
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 14 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.0 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 551 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 329 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 970 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 365 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 299 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 310 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 292 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 343 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 269 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 297 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
@ -1,42 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
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">© { 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;
|
||||
@ -1,27 +0,0 @@
|
||||
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;
|
||||
@ -1,3 +0,0 @@
|
||||
.film-poster {
|
||||
border-radius: 20px;
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
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;
|
||||
@ -1,4 +0,0 @@
|
||||
.my-nav-link {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
@ -1,63 +0,0 @@
|
||||
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;
|
||||
@ -1,33 +0,0 @@
|
||||
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 } ₽</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;
|
||||
@ -1,24 +0,0 @@
|
||||
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;
|
||||
69
src/main.jsx
69
src/main.jsx
@ -1,69 +0,0 @@
|
||||
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>,
|
||||
);
|
||||
@ -1,19 +0,0 @@
|
||||
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;
|
||||
@ -1,121 +0,0 @@
|
||||
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;
|
||||
@ -1,173 +0,0 @@
|
||||
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;
|
||||
@ -1,63 +0,0 @@
|
||||
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;
|
||||
@ -1,106 +0,0 @@
|
||||
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;
|
||||
@ -1,51 +0,0 @@
|
||||
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;
|
||||
@ -1,52 +0,0 @@
|
||||
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;
|
||||
@ -1,52 +0,0 @@
|
||||
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;
|
||||
@ -1,13 +0,0 @@
|
||||
/* 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,
|
||||
},
|
||||
});
|
||||
BIN
Отчет лаб4.docx
BIN
Отчет лаб4.docx
Binary file not shown.
Loading…
Reference in New Issue
Block a user