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