Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 6063b1cd56 | |||
| ad5c433e74 |
25
.eslintrc.cjs
Normal file
25
.eslintrc.cjs
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
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',
|
||||||
|
'linebreak-style': 'off',
|
||||||
|
},
|
||||||
|
}
|
||||||
8
.idea/.gitignore
vendored
Normal file
8
.idea/.gitignore
vendored
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
||||||
|
# Datasource local storage ignored files
|
||||||
|
/dataSources/
|
||||||
|
/dataSources.local.xml
|
||||||
9
.idea/InetProga.iml
Normal file
9
.idea/InetProga.iml
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="JAVA_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||||
|
<exclude-output />
|
||||||
|
<content url="file://$MODULE_DIR$" />
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
6
.idea/misc.xml
Normal file
6
.idea/misc.xml
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectRootManager">
|
||||||
|
<output url="file://$PROJECT_DIR$/out" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
8
.idea/modules.xml
Normal file
8
.idea/modules.xml
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/InetProga.iml" filepath="$PROJECT_DIR$/.idea/InetProga.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
6
.idea/vcs.xml
Normal file
6
.idea/vcs.xml
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
Binary file not shown.
29
README.md
29
README.md
@ -1,2 +1,29 @@
|
|||||||
# Internet-programming
|
#### Окружение:
|
||||||
|
- nodejs 18;
|
||||||
|
- VSCode;
|
||||||
|
- ESLint плагин для VSCode;
|
||||||
|
- для отладки необходимы бразузеры Chrome или Edge.
|
||||||
|
|
||||||
|
#### Создание пустого проекта:
|
||||||
|
|
||||||
|
```commandline
|
||||||
|
npm create vite@latest ./ -- --template react
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Установка зависимостей:
|
||||||
|
|
||||||
|
```commandline
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Запуск проекта:
|
||||||
|
|
||||||
|
```commandline
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Сборка проекта:
|
||||||
|
|
||||||
|
```commandline
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
15
index.html
Normal file
15
index.html
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>OKPO</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="h-100 d-flex flex-column" style="background-color: #03001F">
|
||||||
|
<div id="root" class="h-100 d-flex flex-column"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
14
jsconfig.json
Normal file
14
jsconfig.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"target": "ES2020",
|
||||||
|
"jsx": "react",
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"strictFunctionTypes": true
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"**/node_modules/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
media/sobaka-letit_(VIDEOMIN.NET).mp4
Normal file
BIN
media/sobaka-letit_(VIDEOMIN.NET).mp4
Normal file
Binary file not shown.
4344
package-lock.json
generated
Normal file
4344
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
package.json
Normal file
32
package.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
4
public/favicon.svg
Normal file
4
public/favicon.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-0-circle-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M8 4.951c-1.008 0-1.629 1.09-1.629 2.895v.31c0 1.81.627 2.895 1.629 2.895s1.623-1.09 1.623-2.895v-.31c0-1.8-.621-2.895-1.623-2.895"/>
|
||||||
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-8.012 4.158c1.858 0 2.96-1.582 2.96-3.99V7.84c0-2.426-1.079-3.996-2.936-3.996-1.864 0-2.965 1.588-2.965 3.996v.328c0 2.42 1.09 3.99 2.941 3.99"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 476 B |
0
src/App.css
Normal file
0
src/App.css
Normal file
22
src/App.jsx
Normal file
22
src/App.jsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Container } from 'react-bootstrap';
|
||||||
|
import { Outlet } from 'react-router-dom';
|
||||||
|
import './App.css';
|
||||||
|
import Navigation from './components/navigation/Navigation.jsx';
|
||||||
|
|
||||||
|
const App = ({ routes }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Navigation routes={routes}></Navigation>
|
||||||
|
<Container className='p-2' as="main" fluid>
|
||||||
|
<Outlet />
|
||||||
|
</Container>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
App.propTypes = {
|
||||||
|
routes: PropTypes.array,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
BIN
src/assets/Fone.png
Normal file
BIN
src/assets/Fone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 714 KiB |
BIN
src/assets/Prev.png
Normal file
BIN
src/assets/Prev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 489 KiB |
BIN
src/assets/Title.png
Normal file
BIN
src/assets/Title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/assets/Title_black.png
Normal file
BIN
src/assets/Title_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/abstract-spectrum-wave.jpg
Normal file
BIN
src/assets/abstract-spectrum-wave.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/icons8-загрузить-64.png
Normal file
BIN
src/assets/icons8-загрузить-64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 372 B |
BIN
src/assets/korotysh.png
Normal file
BIN
src/assets/korotysh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
src/assets/photo.png
Normal file
BIN
src/assets/photo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
19
src/components/Card/Cards.jsx
Normal file
19
src/components/Card/Cards.jsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { Button } from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const createCard = ({ Title, Description, Image }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button className="prev" as={Link} to="/Film" style={{ backgroundColor: '#03001F', border: 'none', marginLeft: '1%' }}>
|
||||||
|
<div className="card text-bg-dark" style={{ maxWidth: '20rem' }}>
|
||||||
|
<img src={Image.img} className="card-img" alt="превью" />
|
||||||
|
<div className="card-img-overlay">
|
||||||
|
<h5 className="card-title">${Title}</h5>
|
||||||
|
<p className="card-text">${Description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default createCard;
|
||||||
12
src/components/navigation/Navigation.css
Normal file
12
src/components/navigation/Navigation.css
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
.my-navbar {
|
||||||
|
background-color: #3c3c3c !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-navbar .link a:hover {
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-navbar .logo {
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
42
src/components/navigation/Navigation.jsx
Normal file
42
src/components/navigation/Navigation.jsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import {
|
||||||
|
Container, Nav, Navbar, Button,
|
||||||
|
} from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import title from '../../assets/Title.png';
|
||||||
|
|
||||||
|
const Navigation = ({ routes }) => {
|
||||||
|
const indexPageLink = routes.filter((route) => route.index === false).shift();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<Navbar expand='md' className='my-navbar fixed-top' style={{ backgroundColor: '#03001F' }}>
|
||||||
|
<Container fluid>
|
||||||
|
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
|
||||||
|
<img className="MainTitle" src={title} alt="название" aria-controls='main-navbar'/>
|
||||||
|
</Navbar.Brand>
|
||||||
|
<Navbar.Toggle aria-controls='main-navbar' />
|
||||||
|
<Navbar.Collapse id='main-navbar' style={{ flexGrow: '0' }}>
|
||||||
|
<Nav className="navbar-nav">
|
||||||
|
<Button className="btn nav-link" variant="outline-info" style={{
|
||||||
|
borderWidth: '2px', borderColor: '#0dcaf0', borderStyle: 'solid',
|
||||||
|
}}><Link to="/Join" style={{ color: 'white', textDecoration: 'none' }}>Вход</Link></Button>{' '}
|
||||||
|
<Button className="btn nav-link" variant="outline-info" style={{
|
||||||
|
borderWidth: '2px', borderColor: '#0dcaf0', borderStyle: 'solid',
|
||||||
|
}}><Link to="/Register" style={{ color: 'white', textDecoration: 'none' }}>Регистрация</Link></Button>{' '}
|
||||||
|
<Button className="btn nav-link" variant="outline-info" style={{
|
||||||
|
borderWidth: '2px', borderColor: '#0dcaf0', borderStyle: 'solid',
|
||||||
|
}}><Link to="/LK" style={{ color: 'white', textDecoration: 'none' }}>Личный кабинет</Link></Button>{' '}
|
||||||
|
</Nav>
|
||||||
|
</Navbar.Collapse>
|
||||||
|
</Container>
|
||||||
|
</Navbar >
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Navigation.propTypes = {
|
||||||
|
routes: PropTypes.array,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navigation;
|
||||||
891
src/index.css
Normal file
891
src/index.css
Normal file
@ -0,0 +1,891 @@
|
|||||||
|
h1 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-mw {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.mt-2{
|
||||||
|
--bs-table-bg: #03001F;
|
||||||
|
--bs-table-color: white;
|
||||||
|
--bs-table-striped-color: white;
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.btn-mw {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector-for-some-widget {
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
background-color: #03001F;
|
||||||
|
color: #ffffff;
|
||||||
|
height: 64px;
|
||||||
|
padding: 0.5em;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.navbar-collapse{
|
||||||
|
background-color: #03001F;
|
||||||
|
}
|
||||||
|
.dropdown-menu{
|
||||||
|
background-color: #03001F;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav {
|
||||||
|
justify-content: flex-end !important;
|
||||||
|
display: flex !important;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
header nav {
|
||||||
|
height: 64px;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.aboba{
|
||||||
|
height: 64px;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 1020px){
|
||||||
|
.card-group{
|
||||||
|
margin-top: 5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link{
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.nav-item{
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary{
|
||||||
|
font-size: 40px;
|
||||||
|
width: 15rem;
|
||||||
|
margin: 0 0 0 0.5%;
|
||||||
|
}
|
||||||
|
.btn-outline-info{
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.btn-light{
|
||||||
|
max-width: 50rem;
|
||||||
|
width: 50rem;
|
||||||
|
font-size: 45px;
|
||||||
|
margin: 2% 2% 0 2%;
|
||||||
|
}
|
||||||
|
.card-group {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
.rows{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.images{
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.prev{
|
||||||
|
max-width: 13rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 1200px ){
|
||||||
|
.selector-for-some-widget {
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
.nav-link{
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.navbar-nav{
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.navbar{
|
||||||
|
margin-bottom: 5%;
|
||||||
|
}
|
||||||
|
.btn-secondary{
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
.btn-light{
|
||||||
|
max-width: 50rem;
|
||||||
|
width: 50rem;
|
||||||
|
font-size: 45px;
|
||||||
|
margin: 2% 2% 0 2%;
|
||||||
|
}
|
||||||
|
.card-group {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.prev{
|
||||||
|
margin-left: 25%;
|
||||||
|
max-width: 13rem;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 1020px){
|
||||||
|
.selector-for-some-widget {
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
.nav-link{
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item{
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.btn-secondary{
|
||||||
|
font-size: 20px;
|
||||||
|
width: 17rem;
|
||||||
|
}
|
||||||
|
.btn-light{
|
||||||
|
max-width: 50rem;
|
||||||
|
width: 50rem;
|
||||||
|
font-size: 45px;
|
||||||
|
margin: 2% 2% 0 2%;
|
||||||
|
}
|
||||||
|
.prev{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-left: 50%;
|
||||||
|
width: 50%;
|
||||||
|
height: 50%;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.images{
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.genreselection{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.btn-light{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.btn-groups{
|
||||||
|
margin-left: 20%;
|
||||||
|
margin-top: 20%;
|
||||||
|
width: 60%;
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
.dropbutton{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1020px){
|
||||||
|
.btn-groups{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.genreselection{
|
||||||
|
display: flex;
|
||||||
|
font-family: Inter, serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
@media (max-width: 510px){
|
||||||
|
.prev{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-left: 50%;
|
||||||
|
width: 60%;
|
||||||
|
height: 50%;
|
||||||
|
font-size: 7px;
|
||||||
|
}
|
||||||
|
.btn-groups{
|
||||||
|
margin-left: 20%;
|
||||||
|
margin-top: 20%;
|
||||||
|
width: 60%;
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
.btn-secondary{
|
||||||
|
font-size: 20px;
|
||||||
|
width: 10rem;
|
||||||
|
}
|
||||||
|
.card-group{
|
||||||
|
margin-top: 10%;
|
||||||
|
}
|
||||||
|
.navbar-brand{
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
padding-top: 0;
|
||||||
|
margin-left: 10%;
|
||||||
|
font-size: 25px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.FIO{
|
||||||
|
font-size: 40px;
|
||||||
|
margin-top: -15%;
|
||||||
|
}
|
||||||
|
.LK-img{
|
||||||
|
height: 30%;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
.LK_block{
|
||||||
|
margin-left: 8%;
|
||||||
|
margin-top: 10%;
|
||||||
|
}
|
||||||
|
@media (max-width: 990px){
|
||||||
|
.blocks{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-left: 20%;
|
||||||
|
}
|
||||||
|
.LK-img{
|
||||||
|
min-height: 20%;
|
||||||
|
min-width: 20%;
|
||||||
|
}
|
||||||
|
.Title_blocks{
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 615px){
|
||||||
|
.DobPhoto{
|
||||||
|
margin-top: 5%;
|
||||||
|
margin-left: 5%;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.upload-container{
|
||||||
|
margin-left: 25%;
|
||||||
|
margin-top: 5%;
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
margin-top: 15%;
|
||||||
|
}
|
||||||
|
.Title_blocks{
|
||||||
|
font-size: 15px
|
||||||
|
}
|
||||||
|
.button_add{
|
||||||
|
margin-left: 25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 400px){
|
||||||
|
.upload-container{
|
||||||
|
width: 10%;
|
||||||
|
margin-left: 5%;
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.FIO{
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
.button_add{
|
||||||
|
margin-left: 5%;
|
||||||
|
}
|
||||||
|
.navbar-brand{
|
||||||
|
width: 10%;
|
||||||
|
height: 5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 615px) {
|
||||||
|
.DobPhoto {
|
||||||
|
padding: 0;
|
||||||
|
margin: 8% 0 0 2%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.needs-validation{
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.film{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-top: 2%;
|
||||||
|
}
|
||||||
|
.Rating{
|
||||||
|
width: 300px;
|
||||||
|
margin-left: 2%;
|
||||||
|
}
|
||||||
|
.prevFilm{
|
||||||
|
width: 90%;
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-left: 5%;
|
||||||
|
}
|
||||||
|
.rat{
|
||||||
|
color: white;
|
||||||
|
font-size: 25px;
|
||||||
|
margin-top: 5%;
|
||||||
|
margin-left: 8%;
|
||||||
|
}
|
||||||
|
.watch{
|
||||||
|
margin-top: 5%;
|
||||||
|
margin-left: 10%;
|
||||||
|
}
|
||||||
|
.description{
|
||||||
|
width: 250px;
|
||||||
|
margin-left: 5%;
|
||||||
|
}
|
||||||
|
.description_info{
|
||||||
|
background-color: #414141;
|
||||||
|
color: white;
|
||||||
|
border-radius: 15px;
|
||||||
|
width: 90%;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 5%;
|
||||||
|
margin-left: 5%;
|
||||||
|
font-size: 20px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.actorList{
|
||||||
|
width: 250px;
|
||||||
|
margin-left: 2%;
|
||||||
|
}
|
||||||
|
.actor{
|
||||||
|
background-color: #414141;
|
||||||
|
color: white;
|
||||||
|
border-radius: 15px;
|
||||||
|
width: 100%;
|
||||||
|
height: 140%;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-left: 5%;
|
||||||
|
font-size: 20px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
@media (min-width: 990px){
|
||||||
|
.MainTitle{
|
||||||
|
width: 150px;
|
||||||
|
height: 50px;
|
||||||
|
margin-left: 5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 990px){
|
||||||
|
.MainTitle{
|
||||||
|
width: 150px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.Rating{
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
.description{
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
.actor{
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 770px) {
|
||||||
|
.MainTitle{
|
||||||
|
width: 170px;
|
||||||
|
height: 60px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.film{
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.prevFilm{
|
||||||
|
width: 60%;
|
||||||
|
margin-left: 30%;
|
||||||
|
margin-top: 10%;
|
||||||
|
}
|
||||||
|
.Rating{
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
.rat{
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 2%;
|
||||||
|
}
|
||||||
|
.description{
|
||||||
|
margin-left: 3%;
|
||||||
|
}
|
||||||
|
.description_info{
|
||||||
|
width: 138%;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
.actor{
|
||||||
|
height: 100px;
|
||||||
|
width: 200%;
|
||||||
|
margin-left: 9%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
@media (max-width: 580px){
|
||||||
|
.description{
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
.description_info{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.actorList{
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
.actor{
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 5%;
|
||||||
|
margin-left: 6%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.video-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.mediaLK{
|
||||||
|
margin-top: 1%;
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
.LK2{
|
||||||
|
margin-top: 1%;
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
.index{
|
||||||
|
margin-top: 1%;
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
.film{
|
||||||
|
margin-top: 1%;
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
.admin{
|
||||||
|
margin-top: 1%;
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
.input{
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
@media (max-width: 1200px){
|
||||||
|
.mediaLK{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.LK2{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.index{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.film{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.admin{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.input{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 550px){
|
||||||
|
.video-container{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 15%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 550px){
|
||||||
|
.video-player{
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
.video-container{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 45%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pageLK{
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: -4% 0 2% 70%;
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
font-family: JejuGothic, serif;
|
||||||
|
margin: 12% 0 0 0;
|
||||||
|
}
|
||||||
|
.Photo{
|
||||||
|
height: 32%;
|
||||||
|
width: 27%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Ganr{
|
||||||
|
background: #8C8C8C;
|
||||||
|
color: white;
|
||||||
|
width: 40%;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 1% 1% 0 1%;
|
||||||
|
font-size: 35px;
|
||||||
|
padding: 1% 0 0 0;
|
||||||
|
}
|
||||||
|
.Genre{
|
||||||
|
background: #D9D9D9;
|
||||||
|
color: white;
|
||||||
|
width: 50%;
|
||||||
|
height: 55px;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 1.5% 1% 0 1%;
|
||||||
|
font-size: 35px;
|
||||||
|
padding: 1% 0 0 0;
|
||||||
|
}
|
||||||
|
.Genre2{
|
||||||
|
background: #D9D9D9;
|
||||||
|
color: white;
|
||||||
|
width: 50%;
|
||||||
|
height: 55px;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 1.5% 1% 0 1%;
|
||||||
|
font-size: 35px;
|
||||||
|
padding: 1% 0 0 0;
|
||||||
|
}
|
||||||
|
.body{
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
.Join{
|
||||||
|
position: absolute;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 5%;
|
||||||
|
margin: 10% 25% 10% 35%;
|
||||||
|
height: 50%;
|
||||||
|
width: 35%;
|
||||||
|
}
|
||||||
|
.name{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
color: black;
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 10% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.Title{
|
||||||
|
width:150px;
|
||||||
|
height:50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.Join{
|
||||||
|
position: absolute;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 5%;
|
||||||
|
margin: 12% 14% 12% 14%;
|
||||||
|
height: 60%;
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
.name{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
color: black;
|
||||||
|
font-size: 28px;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.pass{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
color: black;
|
||||||
|
margin: 25% 10% 5% 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.ButtonJoin{
|
||||||
|
background-color: #03001F;
|
||||||
|
color: white;
|
||||||
|
margin: 15% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.Mistake{
|
||||||
|
color: #0047FF;
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 5% 0 0 30%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pass{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
color: black;
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 8% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.ButtonJoin{
|
||||||
|
background-color: #03001F;
|
||||||
|
color: white;
|
||||||
|
margin: 8% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.Mistake{
|
||||||
|
color: #0047FF;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 5% 0 0 55%;
|
||||||
|
}
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.reg_pass{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
color: black;
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 3% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.reg_ButtonJoin{
|
||||||
|
background-color: #03001F;
|
||||||
|
color: white;
|
||||||
|
margin: 3% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.reg_name{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
color: black;
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 3% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.Title{
|
||||||
|
width:150px;
|
||||||
|
height:50px;
|
||||||
|
}
|
||||||
|
.reg_login{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
color: black;
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 3% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.reg_mail{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
color: black;
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 3% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.reg_pass{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
color: black;
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 5% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.reg_ButtonJoin{
|
||||||
|
background-color: #03001F;
|
||||||
|
color: white;
|
||||||
|
margin: 5% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.reg_name{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
color: black;
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 2% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.Title{
|
||||||
|
width:200px;
|
||||||
|
height:75px;
|
||||||
|
}
|
||||||
|
.reg_login{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
color: black;
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 5% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.reg_mail{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
color: black;
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 5% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
.reg_pass{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
color: black;
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 10% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.reg_ButtonJoin{
|
||||||
|
background-color: #03001F;
|
||||||
|
color: white;
|
||||||
|
margin: 10% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.reg_name{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
color: black;
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 10% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.Title{
|
||||||
|
width:150px;
|
||||||
|
height:75px;
|
||||||
|
}
|
||||||
|
.reg_login{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
color: black;
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 10% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.reg_mail{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
color: black;
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 10% 10% 0 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.Mistake{
|
||||||
|
color: #0047FF;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 7% 0 0 38%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.EnterLK{
|
||||||
|
background: #03001F;
|
||||||
|
color: white;
|
||||||
|
font-family: Inter, serif;
|
||||||
|
margin: -5% 1% 5% 75%;
|
||||||
|
width: 60px;
|
||||||
|
height: 25px;
|
||||||
|
border: 1px solid #03B8B8;
|
||||||
|
border-radius: 50px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.RegLk{
|
||||||
|
background: #03001F;
|
||||||
|
color: white;
|
||||||
|
font-family: Inter, serif;
|
||||||
|
margin: -5% 1% 5% 0;
|
||||||
|
width: 120px;
|
||||||
|
height: 25px;
|
||||||
|
border: 1px solid #03B8B8;
|
||||||
|
border-radius: 50px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.buttonLK{
|
||||||
|
background: #03001F;
|
||||||
|
color: white;
|
||||||
|
font-family: Inter, serif;
|
||||||
|
margin: -5% 1% 5% 0;
|
||||||
|
width: 150px;
|
||||||
|
height: 25px;
|
||||||
|
border: 1px solid #03B8B8;
|
||||||
|
border-radius: 50px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.buttonLK:visited{
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#upload-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 200px;
|
||||||
|
height: 250px;
|
||||||
|
outline: 2px dashed #5d5d5d;
|
||||||
|
outline-offset: -12px;
|
||||||
|
background-color: #e0f2f7;
|
||||||
|
color: #1f3c44;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#upload-container img {
|
||||||
|
width: 40%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#upload-container label {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#upload-container label:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
#upload-container div {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
padding: 0 0 0 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button_input{
|
||||||
|
margin-top: 2%;
|
||||||
|
}
|
||||||
|
@media (max-width: 615px){
|
||||||
|
.AdminPanel{
|
||||||
|
margin-top: 5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-center{
|
||||||
|
margin-top: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.btn-mw {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
}
|
||||||
73
src/main.jsx
Normal file
73
src/main.jsx
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
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 Index from './pages/Index.jsx';
|
||||||
|
import LK from './pages/LK.jsx';
|
||||||
|
import Film from './pages/Film.jsx';
|
||||||
|
import Admin from './pages/Admin.jsx';
|
||||||
|
import Input from './pages/Input.jsx';
|
||||||
|
import Join from './pages/Join.jsx';
|
||||||
|
import Register from './pages/Register.jsx';
|
||||||
|
import Media from './pages/Media.jsx';
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
index: true,
|
||||||
|
path: '/',
|
||||||
|
element: <Index />,
|
||||||
|
title: 'Главная страница',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/LK',
|
||||||
|
element: <LK />,
|
||||||
|
title: 'Личный кабинет',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Film',
|
||||||
|
element: <Film />,
|
||||||
|
title: 'Страница фильма',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Join',
|
||||||
|
element: <Join />,
|
||||||
|
title: 'Страница входа',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Register',
|
||||||
|
element: <Register />,
|
||||||
|
title: 'Страница регистрации',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Media',
|
||||||
|
element: <Media />,
|
||||||
|
title: 'Страница видеоплеера',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Admin',
|
||||||
|
element: <Admin />,
|
||||||
|
title: 'Админ-панель',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Input',
|
||||||
|
element: <Input />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
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>,
|
||||||
|
);
|
||||||
28
src/pages/Admin.jsx
Normal file
28
src/pages/Admin.jsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { Button, ButtonGroup, Table } from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const Admin = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ButtonGroup className="button_input">
|
||||||
|
<Button as={Link} to="/Input" variant="outline-warning" className="btn AdminPanel" >Добавить фильм</Button>
|
||||||
|
</ButtonGroup>
|
||||||
|
<Table className="mt-2" striped id="items-table">
|
||||||
|
<thead style={{ backgroundColor: '#03001F' }}>
|
||||||
|
<tr>
|
||||||
|
<th scope="col" className="colums" style={{ color: 'white' }}>№</th>
|
||||||
|
<th scope="col" className="w-25 colums" style={{ color: 'white' }}>Жанр</th>
|
||||||
|
<th scope="col" className="w-25 colums" style={{ color: 'white' }}>Название</th>
|
||||||
|
<th scope="col" className="w-25 colums" style={{ color: 'white' }}>Актерский состав</th>
|
||||||
|
<th scope="col" className="w-25 colums" style={{ color: 'white' }}>Описание</th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</Table>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Admin;
|
||||||
19
src/pages/ErrorPage.jsx
Normal file
19
src/pages/ErrorPage.jsx
Normal file
@ -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;
|
||||||
35
src/pages/Film.jsx
Normal file
35
src/pages/Film.jsx
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
const Film = () => {
|
||||||
|
return (
|
||||||
|
<div className="film rows container item">
|
||||||
|
<div className="Rating" style="">
|
||||||
|
<div>
|
||||||
|
<img className="prevFilm" src="img/Prev.png" alt="превью"/>
|
||||||
|
</div>
|
||||||
|
<div className="rat">
|
||||||
|
Рейтинг
|
||||||
|
</div>
|
||||||
|
<div className="rat">
|
||||||
|
10 из 10
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="description">
|
||||||
|
<div className="rat">
|
||||||
|
Название фильма
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button className="btn btn-warning watch" type="button"><a className="nav-link" aria-current="page" href="media.html" style={{ textDecoration: 'none' }}>Просмотр</a></button>
|
||||||
|
</div>
|
||||||
|
<div className="description_info">
|
||||||
|
Описание фильма
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="actorList">
|
||||||
|
<div className="actor">
|
||||||
|
Актерский состав
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Film;
|
||||||
36
src/pages/Index.jsx
Normal file
36
src/pages/Index.jsx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import { Button } from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const Index = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<span className="text">Рекомендуемое</span>
|
||||||
|
<div className="card-group rows images">
|
||||||
|
<Link to='/'>Заглушка</Link>
|
||||||
|
</div>
|
||||||
|
<span className="text">Жанры</span>
|
||||||
|
<div className="genreselection">
|
||||||
|
<Button className="btn" variant="secondary" style={{ width: '17rem', margin: '0 0 0 0.5%' }}>Комедия</Button>
|
||||||
|
<Button className="btn" variant="secondary" style={{ width: '17rem', margin: '0 0 0 2%' }}>Боевик</Button>
|
||||||
|
<Button className="btn" variant="secondary" style={{ width: '17rem', margin: '0 0 0 2%' }}>Фэнтези</Button>
|
||||||
|
<Button className="btn" variant="secondary" style={{ width: '17rem', margin: '0 0 0 2%' }}>Романтика</Button>
|
||||||
|
<Button className="btn" variant="secondary" style={{ width: '17rem', margin: '0 0 0 2%' }}>Драма</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="btn-groups dropup">
|
||||||
|
<Button className="btn dropbutton dropdown-toggle" variant="info" data-bs-toggle="dropdown" aria-expanded="false" style={{ fontSize: '20px' }}>
|
||||||
|
Жанры
|
||||||
|
</Button>
|
||||||
|
<ul className="dropdown-menu">
|
||||||
|
<li><Button className="btn" variant="secondary" >Комедия</Button></li>
|
||||||
|
<li><Button className="btn" variant="secondary" >Боевик</Button></li>
|
||||||
|
<li><Button className="btn" variant="secondary" >Фэнтези</Button></li>
|
||||||
|
<li><Button className="btn" variant="secondary" >Романтика</Button></li>
|
||||||
|
<li><Button className="btn" variant="secondary" >Драма</Button></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Index;
|
||||||
59
src/pages/Input.jsx
Normal file
59
src/pages/Input.jsx
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Button, Form } from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const Input = () => {
|
||||||
|
const [validated, setValidated] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = (event) => {
|
||||||
|
const form = event.currentTarget;
|
||||||
|
if (form.checkValidity() === false) {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
setValidated(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="text-center">
|
||||||
|
<img id="image-preview" src="https://via.placeholder.com/200" className="rounded rounded-circle"
|
||||||
|
alt="placeholder" style={{ maxWidth: '200px', maxHeight: '200px' }}/>
|
||||||
|
</div>
|
||||||
|
<Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
|
||||||
|
<Form.Group className="mb-2" controlId="Genre">
|
||||||
|
<Form.Label className="form-label" style={{ color: 'white' }}>Жанр</Form.Label>
|
||||||
|
<Form.Select id="Genre" className="form-select" name='selected' required>
|
||||||
|
</Form.Select>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2" controlId="Title">
|
||||||
|
<Form.Label className="form-label" style={{ color: 'white' }}>Название продукта</Form.Label>
|
||||||
|
<Form.Control type="text" name="Title" className="form-control" required />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2" controlId="Cast">
|
||||||
|
<Form.Label className="form-label" style={{ color: 'white' }}>Актерский состав</Form.Label>
|
||||||
|
<Form.Control type="text" name="Cast" className="form-control" required />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2" controlId="Description">
|
||||||
|
<Form.Label className="form-label" style={{ color: 'white' }}>Описание</Form.Label>
|
||||||
|
<Form.Control type="text" name="Description" className="form-control" required />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2" controlId="Image">
|
||||||
|
<Form.Label className="form-label" style={{ color: 'white' }}>Изображение</Form.Label>
|
||||||
|
<Form.Control type="file" name="Image" className="form-control" accept="image/*" />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2" controlId="Video">
|
||||||
|
<Form.Label className="form-label" style={{ color: 'white' }}>Видеофайл</Form.Label>
|
||||||
|
<Form.Control type="file" name="Video" className="form-control" accept="video/*" />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="d-flex flex-md-row flex-column justify-content-center">
|
||||||
|
<Button className="btn-mw me-md-3 mb-md-0 mb-2" as={Link} to="/Admin" style={{ height: '7%', fontSize: '16px' }} variant="secondary">Назад</Button>
|
||||||
|
<Button className="btn-mw me-md-3" type="submit" variant="primary">Сохранить</Button>
|
||||||
|
</Form.Group>
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Input;
|
||||||
37
src/pages/Join.jsx
Normal file
37
src/pages/Join.jsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Button, Form, FormGroup } from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import titleBlack from '../assets/Title_black.png';
|
||||||
|
|
||||||
|
const Join = () => {
|
||||||
|
const [validated, setValidated] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = (event) => {
|
||||||
|
const form = event.currentTarget;
|
||||||
|
if (form.checkValidity() === false) {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
setValidated(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Form className="Join" noValidate validated={validated} onSubmit={handleSubmit}>
|
||||||
|
<center><Button as={Link} to="/Index" style={{ backgroundColor: 'white', borderColor: 'white', marginTop: '20px' }}><img id="image_title" src={titleBlack} alt="название" className="Title"/></Button></center>
|
||||||
|
<FormGroup className="name" controlId="userName">
|
||||||
|
<Form.Label className="form-label"></Form.Label>
|
||||||
|
<Form.Control type="text" name="userName" className="form-control" placeholder="Логин / почта пользователя" required />
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup className="pass" controlId="Password">
|
||||||
|
<Form.Label className="form-label"></Form.Label>
|
||||||
|
<Form.Control type="password" name="Password" placeholder="Пароль" className="form-control" required />
|
||||||
|
</FormGroup>
|
||||||
|
<Button className="ButtonJoin" as={Link} to="/" type="submit">Войти</Button>
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Join;
|
||||||
29
src/pages/LK.jsx
Normal file
29
src/pages/LK.jsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import icons from '../assets/icons8-загрузить-64.png';
|
||||||
|
|
||||||
|
const LK = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="DobPhoto rows">
|
||||||
|
<form id="upload-container" className="upload-container" method="POST" action="send.php">
|
||||||
|
<img id="upload-image" src={icons} alt=''/>
|
||||||
|
<div>
|
||||||
|
<input id="file-input" type="file" name="file" style={{ fontSize: '10px' }} multiple/>
|
||||||
|
<label style={{ marginLeft: '10px' }}>Выберите файл</label>
|
||||||
|
<div style={{ paddingLeft: '10px' }}> или перетащите его <br/> сюда</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div className="info">
|
||||||
|
<div className="FIO">Иван Иванов</div>
|
||||||
|
<div className="info_list-item" style={{ marginTop: '5%' }}>Дата рождения - 25.09.2018</div>
|
||||||
|
<div className="info_list-item" style={{ marginTop: '5%' }}>Просмотрено фильмов - 123</div>
|
||||||
|
<div className="info_list-item" style={{ marginTop: '5%', marginBottom: '5%' }}>Просмотрено сериалов - 123</div>
|
||||||
|
<button className="btn btn-outline-warning button_add"><Link className="nav-link" to="/Admin" style={{ textDecoration: 'none' }}>Панель администратора</Link></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// eslint-disable-next-line react-refresh/only-export-components
|
||||||
|
export default LK;
|
||||||
15
src/pages/Media.jsx
Normal file
15
src/pages/Media.jsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import sobaka from '../../media/sobaka-letit_(VIDEOMIN.NET).mp4';
|
||||||
|
|
||||||
|
const Media = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<main className="h-100 d-flex flex-column" style={{ backgroundColor: '#03001F' }}>
|
||||||
|
<div className='video-container'>
|
||||||
|
<video controls src={sobaka} className='video-player' id='video-player' preload='metadata'></video>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Media;
|
||||||
45
src/pages/Register.jsx
Normal file
45
src/pages/Register.jsx
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Button, Form, FormGroup } from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import titleBlack from '../assets/Title_black.png';
|
||||||
|
|
||||||
|
const Register = () => {
|
||||||
|
const [validated, setValidated] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = (event) => {
|
||||||
|
const form = event.currentTarget;
|
||||||
|
if (form.checkValidity() === false) {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
setValidated(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Form className="Join" noValidate validated={validated} onSubmit={handleSubmit}>
|
||||||
|
<center><Button as={Link} to="/Index" style={{ backgroundColor: 'white', borderColor: 'white' }}><img id="image_title" src={titleBlack} alt="название" className="Title"/></Button></center>
|
||||||
|
<FormGroup className="reg_name" controlId="userName">
|
||||||
|
<Form.Label className="form-label"></Form.Label>
|
||||||
|
<Form.Control type="text" name="userName" className="form-control" placeholder="Имя" required />
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup className="reg_login" controlId="Login">
|
||||||
|
<Form.Label className="form-label"></Form.Label>
|
||||||
|
<Form.Control type="text" name="Login" className="form-control" placeholder="Логин" required />
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup className="reg_mail" controlId="Mail">
|
||||||
|
<Form.Label className="form-label"></Form.Label>
|
||||||
|
<Form.Control type="email" name="Mail" className="form-control" placeholder="Почта пользователя" required />
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup className="reg_pass" controlId="regPassword">
|
||||||
|
<Form.Label className="form-label"></Form.Label>
|
||||||
|
<Form.Control type="password" name="regPassword" className="form-control" placeholder="Пароль" required />
|
||||||
|
</FormGroup>
|
||||||
|
<Button className="reg_ButtonJoin" as={Link} to="/" type="submit">Регистрация</Button>
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Register;
|
||||||
13
vite.config.js
Normal file
13
vite.config.js
Normal file
@ -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,
|
||||||
|
},
|
||||||
|
});
|
||||||
BIN
лаба 1.docx
BIN
лаба 1.docx
Binary file not shown.
Loading…
Reference in New Issue
Block a user