Compare commits

...

2 Commits
main ... laba4

Author SHA1 Message Date
6063b1cd56 laba4 2024-01-10 21:49:59 +04:00
ad5c433e74 laba3 2024-01-10 21:47:43 +04:00
41 changed files with 5919 additions and 1 deletions

25
.eslintrc.cjs Normal file
View 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
View 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
View 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
View 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
View 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
View 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.

View File

@ -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
```

45
data.json Normal file

File diff suppressed because one or more lines are too long

15
index.html Normal file
View 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
View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Node",
"target": "ES2020",
"jsx": "react",
"strictNullChecks": true,
"strictFunctionTypes": true
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}

Binary file not shown.

4344
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

32
package.json Normal file
View 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
View 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
View File

22
src/App.jsx Normal file
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 714 KiB

BIN
src/assets/Prev.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 489 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 372 B

BIN
src/assets/korotysh.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

BIN
src/assets/photo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

View 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;

View 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;
}

View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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,
},
});

Binary file not shown.