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