Merge pull request 'Слив веток чтобы не терятся' (#1) from master into main
Reviewed-on: http://student.git.athene.tech/Marselchii/PIbd-21_Sagirov_M.M._Internet_Programming/pulls/1
This commit is contained in:
commit
d005514505
BIN
lab1/Лаб1 отчет.docx
Normal file
BIN
lab1/Лаб1 отчет.docx
Normal file
Binary file not shown.
Binary file not shown.
20
lab3/.eslintrc.json
Normal file
20
lab3/.eslintrc.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es2021": true
|
||||||
|
},
|
||||||
|
"extends": "airbnb-base",
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": 12,
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"quotes": "off",
|
||||||
|
"indent": "off",
|
||||||
|
"no-console": "off",
|
||||||
|
"no-use-before-define": "off",
|
||||||
|
"no-alert": "off",
|
||||||
|
"no-restricted-globals": "off",
|
||||||
|
"quote-props": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
98
lab3/add.html
Normal file
98
lab3/add.html
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Онлайн-кинотеатр</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
|
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
|
||||||
|
<script src="./node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class ="d-flex flex-column h-100">
|
||||||
|
<header id="header" class="header row w-100 m-0 mb-3">
|
||||||
|
<div class="p-0">
|
||||||
|
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-center row w-100 m-0">
|
||||||
|
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center">
|
||||||
|
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2" href="index.html">Онлайн-кинотеатр</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid flex-shrink-0">
|
||||||
|
<section class="d-flex align-items-center justify-content-center">
|
||||||
|
<div class="container">
|
||||||
|
<div class="justify-content-center pt-2">
|
||||||
|
<p class="text-center text-white fs-2 fw-normal font-family-Average Sans">Добавить фильм</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="text-center">
|
||||||
|
<img id="image-preview" src="https://via.placeholder.com/200" style="max-width:300px; max-height:600px; min-width:300px; min-height:400px"
|
||||||
|
alt="placeholder">
|
||||||
|
</div>
|
||||||
|
<form id="items-form" class="needs-validation" novalidate>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label" for="name">Название</label>
|
||||||
|
<textarea class="form-control" id="name" rows="1"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label for="lang" class="form-label">Язык</label>
|
||||||
|
<select id="lang" class="form-select" name="selectedLang" required>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label for="genre" class="form-label">Жанры</label>
|
||||||
|
<select id="genre" class="form-select" name="selectedGenre" required>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<label>Год</label>
|
||||||
|
<div class="input-group date" data-provide="datepicker">
|
||||||
|
<input type="text" id="year" class="form-control">
|
||||||
|
<div class="input-group-addon">
|
||||||
|
<span class="glyphicon glyphicon-th"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label" for="descp">Описание</label>
|
||||||
|
<textarea class="form-control" id="descp" rows="3"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label" for="actrs">Актеры</label>
|
||||||
|
<textarea class="form-control" id="actrs" rows="2"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label" for="image">Изображение</label>
|
||||||
|
<input id="image" type="file" name="image" class="form-control" accept="image/*">
|
||||||
|
</div>
|
||||||
|
<a href="/admin.html" class="btn btn-secondary">Назад</a>
|
||||||
|
<button type="submit" class="btn btn-primary">Сохранить</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto fixed bottom-0">
|
||||||
|
<div class= "bg-dark-blue d-flex text-center justify-content-center">
|
||||||
|
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function(){
|
||||||
|
$('.input-group.date').datepicker({
|
||||||
|
format: "yyyy",
|
||||||
|
viewMode: "years",
|
||||||
|
minViewMode: "years"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<script type="module">
|
||||||
|
import validation from "./js/validation";
|
||||||
|
import {linesPageForm} from "./js/lines"
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
validation();
|
||||||
|
linesPageForm();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
54
lab3/admin.html
Normal file
54
lab3/admin.html
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Онлайн-кинотеатр</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class ="d-flex flex-column h-100">
|
||||||
|
<header id="header" class="header row w-100 m-0 mb-3">
|
||||||
|
<div class="p-0">
|
||||||
|
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-center row w-100 m-0">
|
||||||
|
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center">
|
||||||
|
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2" href="index.html">Онлайн-кинотеатр</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid flex-shrink-0">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<table id="items-table" class="table table-striped bg-cyan">
|
||||||
|
<thead>
|
||||||
|
<th scope="col">№</th>
|
||||||
|
<th scope="col" class="w-25">Название</th>
|
||||||
|
<th scope="col" class="w-25">Язык</th>
|
||||||
|
<th scope="col" class="w-25">Год</th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<button id="items-add" class="btn bg-cyan"><a class="btn" href="/add.html" >Добавить фильм</a></button>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto fixed bottom-0">
|
||||||
|
<div class= "bg-dark-blue d-flex text-center justify-content-center">
|
||||||
|
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import validation from "./js/validation";
|
||||||
|
import {draw} from "./js/lines.js";
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
validation();
|
||||||
|
draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
82
lab3/data.json
Normal file
82
lab3/data.json
Normal file
File diff suppressed because one or more lines are too long
101
lab3/favourite.html
Normal file
101
lab3/favourite.html
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Онлайн-кинотеатр</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class ="d-flex flex-column h-100">
|
||||||
|
<div>
|
||||||
|
<header id="header" class="header row w-100 m-0 mb-3">
|
||||||
|
<div class="p-0">
|
||||||
|
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-lg-between row w-100 m-0">
|
||||||
|
<div class="col-0 col-lg bg-cyan mw-100 mh-100">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center justify-content-lg-start">
|
||||||
|
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans m-0 py-2" href="index.html">Онлайн-кинотеатр</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column col-sm-6 col-lg-3 col-xl-2 p-0 bg-cyan ">
|
||||||
|
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class = "text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="signup.html">Регистрация</a>
|
||||||
|
</div>
|
||||||
|
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="login.html">Вход</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-group row text-break w-100 mt-3 p-0 mb-2">
|
||||||
|
<div class="form-outline col text-break h-100 flex-grow-1">
|
||||||
|
<input id="search-focus" type="search" id="form1" class="form-control ms-3 p-2 ms-lg-0" placeholder="Введите название фильма" />
|
||||||
|
</div>
|
||||||
|
<div class="dropdown col-1 col-lg-2 col-xl-3 w-auto mx-3 p-0 text-break h-100">
|
||||||
|
<button class="btn btn-secondary dropdown-toggle h-100" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="d-none d-lg-inline">Выберите жанр</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-primary col-1 col-sm-1 col-lg-3 col-xl-2 h-100 w-auto">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
|
||||||
|
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="d-none d-lg-inline">Поиск</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid flex-shrink-0">
|
||||||
|
<div class="row m-2 my-5 ">
|
||||||
|
<div class="col d-flex align-items-center justify-content-center">
|
||||||
|
<a href="selected.html" class="col-xs-12 col-lg-3 w-auto h-auto"><img src="images/fire.jpg" class="img-fluid" alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column col-xs-12 col-lg-6 col-xl-8 p-0 justify-content-center">
|
||||||
|
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 mx-4">
|
||||||
|
<p class="text-white fs-5 fw-normal font-family-Bayon text-center">Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей, которые борются с неистовой огненной стихией, уничтожающей всё на своем пути. Герои работают в эпицентре лесного пожара и приходят на помощь</p>
|
||||||
|
</div>
|
||||||
|
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<p class="text-center text-white fs-3 fw-normal font-family-Bayon">Приключения, катастрофа, драма, боевик</p>
|
||||||
|
</div>
|
||||||
|
<a href="selected.html" class="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3">
|
||||||
|
Перейти
|
||||||
|
</a>
|
||||||
|
<a class="d-flex btn btn-primary justify-content-center p-5 fs-5 m-3">
|
||||||
|
Удалить из избранного
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row m-2 my-5">
|
||||||
|
<div class="col d-flex align-items-center justify-content-center">
|
||||||
|
<a href="selected.html" class="col-xs-12 col-lg-3 w-auto h-auto"><img src="images/fire.jpg" class="img-fluid" alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column col-xs-12 col-lg-6 col-xl-8 p-0 justify-content-center">
|
||||||
|
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break mx-4">
|
||||||
|
<p class="text-white fs-5 fw-normal font-family-Bayon text-center">Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей, которые борются с неистовой огненной стихией, уничтожающей всё на своем пути. Герои работают в эпицентре лесного пожара и приходят на помощь</p>
|
||||||
|
</div>
|
||||||
|
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<p class="text-center text-white fs-3 fw-normal font-family-Bayon">Приключения, катастрофа, драма, боевик</p>
|
||||||
|
</div>
|
||||||
|
<a href="selected.html" class="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3">
|
||||||
|
Перейти
|
||||||
|
</a>
|
||||||
|
<a class="d-flex btn btn-primary justify-content-center p-5 fs-5 m-3">
|
||||||
|
Удалить из избранного
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto fixed bottom-0">
|
||||||
|
<div class= "bg-dark-blue d-flex text-center justify-content-center">
|
||||||
|
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
lab3/images/bro.jpg
Normal file
BIN
lab3/images/bro.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
lab3/images/fire.jpg
Normal file
BIN
lab3/images/fire.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
BIN
lab3/images/harry.jpg
Normal file
BIN
lab3/images/harry.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
BIN
lab3/images/noimage.png
Normal file
BIN
lab3/images/noimage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
lab3/images/nolan.jpg
Normal file
BIN
lab3/images/nolan.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
79
lab3/index.html
Normal file
79
lab3/index.html
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Онлайн-кинотеатр</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class ="d-flex flex-column h-100 w-100">
|
||||||
|
<header id="header" class="header row w-100 m-0 mb-3">
|
||||||
|
<div class="p-0">
|
||||||
|
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-lg-between row w-100 m-0">
|
||||||
|
<div class="col-0 col-lg bg-cyan mw-100 mh-100">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center justify-content-lg-start">
|
||||||
|
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2" href="index.html">Онлайн-кинотеатр</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column col-xs-12 col-sm-6 col-lg-3 col-xl-2 p-0 bg-cyan">
|
||||||
|
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class = "text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="signup.html">Регистрация</a>
|
||||||
|
</div>
|
||||||
|
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="login.html">Вход</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid flex-shrink-0 p-0">
|
||||||
|
<section class="d-flex align-items-center justify-content-center">
|
||||||
|
<div>
|
||||||
|
<div class="row justify-content-center pt-2 col">
|
||||||
|
<p class="text-center text-white fs-2 fw-normal font-family-Average Sans">Популярные сейчас</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="row p-2 m-2 align-items-center justify-content-evenly" id = "banner">
|
||||||
|
</div>
|
||||||
|
<section class="d-flex justify-content-center">
|
||||||
|
<div class="row m-3 justify-content-evenly w-100 text-break">
|
||||||
|
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2">
|
||||||
|
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Ужасы</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2">
|
||||||
|
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Экшн</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2">
|
||||||
|
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Детективы</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2">
|
||||||
|
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Боевики</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2" >
|
||||||
|
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Фентези</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2">
|
||||||
|
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Спорт</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto fixed bottom-0 w-100">
|
||||||
|
<div class= "bg-dark-blue d-flex text-center justify-content-center">
|
||||||
|
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script type="module">
|
||||||
|
import myBanner from "./js/banner";
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
myBanner();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
25
lab3/js/banner.js
Normal file
25
lab3/js/banner.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
// модуль для смены изображения в баннере по таймеру
|
||||||
|
|
||||||
|
import { getAllLines } from "./lines-rest-api";
|
||||||
|
// указывается блок, в котором будет баннер
|
||||||
|
// блок должен содержать изображения
|
||||||
|
async function myBanner() {
|
||||||
|
console.info("Loaded");
|
||||||
|
const data = await getAllLines();
|
||||||
|
data.forEach((item) => {
|
||||||
|
const im = document.createElement("img");
|
||||||
|
const ban = document.getElementById("banner");
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.setAttribute("class", "col-xs-12 col-sm-6 col-lg-3 w-auto h-auto m-2");
|
||||||
|
im.setAttribute("style", "max-width:300px; max-height:600px; min-width:300px; min-height:400px");
|
||||||
|
im.setAttribute("class", "img-fluid");
|
||||||
|
im.setAttribute("alt", "");
|
||||||
|
im.src = item.image;
|
||||||
|
im.class = "img-fluid";
|
||||||
|
a.appendChild(im);
|
||||||
|
ban.appendChild(a);
|
||||||
|
});
|
||||||
|
// получение всех изображений внутри баннера
|
||||||
|
}
|
||||||
|
|
||||||
|
export default myBanner;
|
||||||
108
lab3/js/lines-rest-api.js
Normal file
108
lab3/js/lines-rest-api.js
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
// модуль для работы с REST API сервера
|
||||||
|
|
||||||
|
// адрес сервера
|
||||||
|
const serverUrl = "http://localhost:8081";
|
||||||
|
|
||||||
|
// функция возвращает объект нужной структуры для отправки на сервер
|
||||||
|
function createLineObject(name, lang, genre, year, descp, actr, image) {
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
langsId: lang,
|
||||||
|
genre,
|
||||||
|
year,
|
||||||
|
descp,
|
||||||
|
actr,
|
||||||
|
image,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для получения всех типов товара (get)
|
||||||
|
export async function getAllLangTypes() {
|
||||||
|
const response = await fetch(`${serverUrl}/langs`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getAllGenreTypes() {
|
||||||
|
const response = await fetch(`${serverUrl}/genre`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
// обращение к серверу для получения всех записей (get)
|
||||||
|
export async function getAllLines() {
|
||||||
|
const response = await fetch(`${serverUrl}/lines?_expand=langs`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для получения записи по первичному ключу (id) (get)
|
||||||
|
// id передается в качестве части пути URL get-запроса
|
||||||
|
export async function getLine(id) {
|
||||||
|
const response = await fetch(`${serverUrl}/lines/${id}?_expand=langs`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для создания записи (post)
|
||||||
|
// объект отправляется в теле запроса (body)
|
||||||
|
export async function createLine(name, lang, genre, year, descp, actr, image) {
|
||||||
|
const itemObject = createLineObject(name, lang, genre, year, descp, actr, image);
|
||||||
|
const options = {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(itemObject),
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json",
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`${serverUrl}/lines`, options);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для обновления записи по id (put)
|
||||||
|
// объект отправляется в теле запроса (body)
|
||||||
|
// id передается в качестве части пути URL get-запроса
|
||||||
|
export async function updateLine(id, name, lang, genre, year, descp, actr, image) {
|
||||||
|
const itemObject = createLineObject(name, lang, genre, year, descp, actr, image);
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
method: "PUT",
|
||||||
|
body: JSON.stringify(itemObject),
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json",
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`${serverUrl}/lines/${id}`, options);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для удаления записи по id (delete)
|
||||||
|
// id передается в качестве части пути URL get-запроса
|
||||||
|
export async function deleteLine(id) {
|
||||||
|
const options = {
|
||||||
|
method: "DELETE",
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`${serverUrl}/lines/${id}`, options);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
100
lab3/js/lines-ui.js
Normal file
100
lab3/js/lines-ui.js
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
// модуль для работы с элементами управления
|
||||||
|
|
||||||
|
// объект для удобного получения элементов
|
||||||
|
// при обращении к атрибуту объекта вызывается
|
||||||
|
// нужная функция для поиска элемента
|
||||||
|
export const cntrls = {
|
||||||
|
button: document.getElementById("items-add"),
|
||||||
|
table: document.querySelector("#items-table tbody"),
|
||||||
|
form: document.getElementById("items-form"),
|
||||||
|
lineId: document.getElementById("items-line-id"),
|
||||||
|
langType: document.getElementById("lang"),
|
||||||
|
genreType: document.getElementById("genre"),
|
||||||
|
name: document.getElementById("name"),
|
||||||
|
year: document.getElementById("year"),
|
||||||
|
descp: document.getElementById("descp"),
|
||||||
|
image: document.getElementById("image"),
|
||||||
|
actr: document.getElementById("actrs"),
|
||||||
|
imagePreview: document.getElementById("image-preview"),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Дефолтное превью
|
||||||
|
export const imagePlaceholder = "https://via.placeholder.com/200";
|
||||||
|
|
||||||
|
// функция создает тег option для select
|
||||||
|
// <option value="" selected>name</option>
|
||||||
|
export function createItemsOption(name, value = "", isSelected = false) {
|
||||||
|
const option = document.createElement("option");
|
||||||
|
option.value = value || "";
|
||||||
|
option.selected = isSelected;
|
||||||
|
option.text = name;
|
||||||
|
return option;
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция создает ссылку (a) для таблицы
|
||||||
|
// содержимое тега a заполняется необходимой иконкой (icon)
|
||||||
|
// при нажатии вызывается callback
|
||||||
|
// ссылка "оборачивается" тегом td
|
||||||
|
// <td><a href="#" onclick="callback()"><i class="fa-solid icon"></i></a></td>
|
||||||
|
function createTableAnchor(icon, callback) {
|
||||||
|
const i = document.createElement("i");
|
||||||
|
i.classList.add("fa-solid", icon);
|
||||||
|
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = "#";
|
||||||
|
a.appendChild(i);
|
||||||
|
a.onclick = (event) => {
|
||||||
|
// чтобы в URL не добавлялась решетка
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
callback();
|
||||||
|
};
|
||||||
|
|
||||||
|
const td = document.createElement("td");
|
||||||
|
td.appendChild(a);
|
||||||
|
return td;
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция создает колонку таблицы с текстом value
|
||||||
|
// <td>value</td>
|
||||||
|
function createTableColumn(value) {
|
||||||
|
const td = document.createElement("td");
|
||||||
|
td.textContent = value;
|
||||||
|
return td;
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция создает строку таблицы
|
||||||
|
// <tr>
|
||||||
|
// <th scope="row">index + 1</th>
|
||||||
|
// <td>item.items.name</td>
|
||||||
|
// <td>parseFloat(item.price).toFixed(2))</td>
|
||||||
|
// <td>item.count</td>
|
||||||
|
// <td>parseFloat(item.sum).toFixed(2))</td>
|
||||||
|
// <td><a href="#" onclick="editCallback()"><i class="fa-solid fa-pencil"></i></a></td>
|
||||||
|
// <td><a href="#" onclick="editPageCallback()"><i class="fa-solid fa-pen-to-square"></i></a></td>
|
||||||
|
// <td><a href="#" onclick="deleteCallback()"><i class="fa-solid fa-trash"></i></a></td>
|
||||||
|
// </tr>
|
||||||
|
export function createTableRow(item, index, editPageCallback, deleteCallback) {
|
||||||
|
const rowNumber = document.createElement("th");
|
||||||
|
rowNumber.scope = "row";
|
||||||
|
rowNumber.textContent = index + 1;
|
||||||
|
|
||||||
|
const row = document.createElement("tr");
|
||||||
|
row.id = `line-${item.id}`;
|
||||||
|
|
||||||
|
row.appendChild(rowNumber);
|
||||||
|
row.appendChild(createTableColumn(item.name));
|
||||||
|
row.appendChild(createTableColumn(item.langs.name));
|
||||||
|
row.appendChild(createTableColumn(item.year));
|
||||||
|
// редактировать на странице page-edit
|
||||||
|
row.appendChild(createTableAnchor("fa-pen-to-square", editPageCallback));
|
||||||
|
// удаление
|
||||||
|
row.appendChild(createTableAnchor("fa-trash", deleteCallback));
|
||||||
|
return row;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createImg(item) {
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.src = item.image;
|
||||||
|
return img;
|
||||||
|
}
|
||||||
253
lab3/js/lines.js
Normal file
253
lab3/js/lines.js
Normal file
@ -0,0 +1,253 @@
|
|||||||
|
// модуль с логикой
|
||||||
|
|
||||||
|
import {
|
||||||
|
createLine, deleteLine, getAllLangTypes, getAllGenreTypes, getAllLines, getLine, updateLine,
|
||||||
|
} from "./lines-rest-api";
|
||||||
|
import {
|
||||||
|
cntrls, createItemsOption, createTableRow, imagePlaceholder,
|
||||||
|
} from "./lines-ui";
|
||||||
|
|
||||||
|
async function drawLangSelect() {
|
||||||
|
// вызов метода REST API для получения списка типов товаров
|
||||||
|
const data = await getAllLangTypes();
|
||||||
|
// очистка содержимого select
|
||||||
|
// удаляется все, что находится между тегами <select></select>
|
||||||
|
// но не атрибуты
|
||||||
|
cntrls.langType.innerHTML = "";
|
||||||
|
// пустое значение
|
||||||
|
cntrls.langType.appendChild(createItemsOption("Выберите значение", "", true));
|
||||||
|
// цикл по результату ответа от сервера
|
||||||
|
// используется лямбда-выражение
|
||||||
|
// (item) => {} аналогично function(item) {}
|
||||||
|
data.forEach((lang) => {
|
||||||
|
cntrls.langType.appendChild(createItemsOption(lang.name, lang.id));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function drawGenreSelect() {
|
||||||
|
// вызов метода REST API для получения списка типов товаров
|
||||||
|
const data = await getAllGenreTypes();
|
||||||
|
// очистка содержимого select
|
||||||
|
// удаляется все, что находится между тегами <select></select>
|
||||||
|
// но не атрибуты
|
||||||
|
cntrls.genreType.innerHTML = "";
|
||||||
|
// пустое значение
|
||||||
|
cntrls.genreType.appendChild(createItemsOption("Выберите значение", "", true));
|
||||||
|
// цикл по результату ответа от сервера
|
||||||
|
// используется лямбда-выражение
|
||||||
|
// (item) => {} аналогично function(item) {}
|
||||||
|
data.forEach((genre) => {
|
||||||
|
cntrls.genreType.appendChild(createItemsOption(genre.name, genre.id));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
async function drawLinesTable() {
|
||||||
|
console.info("Try to load data");
|
||||||
|
if (!cntrls.table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// вызов метода REST API для получения всех записей
|
||||||
|
const data = await getAllLines();
|
||||||
|
// очистка содержимого table
|
||||||
|
// удаляется все, что находится между тегами <table></table>
|
||||||
|
// но не атрибуты
|
||||||
|
cntrls.table.innerHTML = "";
|
||||||
|
// цикл по результату ответа от сервера
|
||||||
|
// используется лямбда-выражение
|
||||||
|
// (item, index) => {} аналогично function(item, index) {}
|
||||||
|
data.forEach((item, index) => {
|
||||||
|
cntrls.table.appendChild(
|
||||||
|
createTableRow(
|
||||||
|
item,
|
||||||
|
index,
|
||||||
|
// функции передаются в качестве параметра
|
||||||
|
// это очень удобно, так как аргументы функций доступны только
|
||||||
|
// в данном месте кода и не передаются в сервисные модули
|
||||||
|
() => location.assign(`add.html?id=${item.id}`),
|
||||||
|
() => removeLine(item.id),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function addLine(name, lang, genre, year, descp, actr, image) {
|
||||||
|
console.info("Try to add film");
|
||||||
|
// вызов метода REST API для добавления записи
|
||||||
|
const data = await createLine(name, lang, genre, year, descp, actr, image);
|
||||||
|
console.info("Added");
|
||||||
|
console.info(data);
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function editLine(id, name, lang, genre, year, descp, actr, image) {
|
||||||
|
console.info("Try to update item");
|
||||||
|
// вызов метода REST API для обновления записи
|
||||||
|
const data = await updateLine(id, name, lang, genre, year, descp, actr, image);
|
||||||
|
console.info("Updated");
|
||||||
|
console.info(data);
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function removeLine(id) {
|
||||||
|
if (!confirm("Do you really want to remove this item?")) {
|
||||||
|
console.info("Canceled");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.info("Try to remove item");
|
||||||
|
// вызов метода REST API для удаления записи
|
||||||
|
const data = await deleteLine(id);
|
||||||
|
console.info(data);
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция для получения содержимого файла в виде base64 строки
|
||||||
|
// https://ru.wikipedia.org/wiki/Base64
|
||||||
|
async function readFile(file) {
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
// создание Promise-объекта для использования функции
|
||||||
|
// с помощью await (асинхронно) без коллбэков (callback)
|
||||||
|
// https://learn.javascript.ru/promise
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// 2. "Возвращаем" содержимое когда файл прочитан
|
||||||
|
// через вызов resolve
|
||||||
|
// Если не использовать Promise, то всю работу по взаимодействию
|
||||||
|
// с REST API пришлось бы делать в обработчике (callback) функции
|
||||||
|
// onloadend
|
||||||
|
reader.onloadend = () => {
|
||||||
|
const fileContent = reader.result;
|
||||||
|
// Здесь могла бы быть работа с REST API
|
||||||
|
// Чтение заканчивает выполняться здесь
|
||||||
|
resolve(fileContent);
|
||||||
|
};
|
||||||
|
// 3. Возвращаем ошибку
|
||||||
|
reader.onerror = () => {
|
||||||
|
// Или здесь в случае ошибки
|
||||||
|
reject(new Error("oops, something went wrong with the file reader."));
|
||||||
|
};
|
||||||
|
// Шаг 1. Сначала читаем файл
|
||||||
|
// Чтение начинает выполняться здесь
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция для обновления блока с превью выбранного изображения
|
||||||
|
async function updateImagePreview() {
|
||||||
|
// получение выбранного файла
|
||||||
|
// возможен выбор нескольких файлов, поэтому необходимо получить только первый
|
||||||
|
const file = cntrls.image.files[0];
|
||||||
|
// чтение содержимого файла в виде base64 строки
|
||||||
|
const fileContent = await readFile(file);
|
||||||
|
console.info("base64 ", fileContent);
|
||||||
|
// обновление атрибута src для тега img с id image-preview
|
||||||
|
cntrls.imagePreview.src = fileContent;
|
||||||
|
}
|
||||||
|
export function draw() {
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
|
||||||
|
// Если хотите делать через модальное окно, то удалите эту функцию
|
||||||
|
export async function linesPageForm() {
|
||||||
|
console.info("linesPageForm");
|
||||||
|
// загрузка и заполнение select со списком товаров
|
||||||
|
drawLangSelect();
|
||||||
|
drawGenreSelect();
|
||||||
|
// func1 = (id) => {} аналогично function func1(id) {}
|
||||||
|
const goBack = () => location.assign("/admin.html");
|
||||||
|
|
||||||
|
// Вызов функции обновления превью изображения при возникновении
|
||||||
|
// события onchange в тэге input с id image
|
||||||
|
cntrls.image.addEventListener("change", () => updateImagePreview());
|
||||||
|
|
||||||
|
// получение параметров GET-запроса из URL
|
||||||
|
// параметры перечислены после символа ? (?id=1&color=black&...)
|
||||||
|
const urlParams = new URLSearchParams(location.search);
|
||||||
|
|
||||||
|
// получение значения конкретного параметра (id)
|
||||||
|
// указан только при редактировании
|
||||||
|
const currentId = urlParams.get("id");
|
||||||
|
// если id задан
|
||||||
|
if (currentId) {
|
||||||
|
try {
|
||||||
|
// вызов метода REST API для получения записи по первичному ключу(id)
|
||||||
|
const line = await getLine(currentId);
|
||||||
|
// заполнение формы для редактирования
|
||||||
|
cntrls.langType.value = line.langsId;
|
||||||
|
cntrls.name.value = line.name;
|
||||||
|
cntrls.genreType.value = line.genre;
|
||||||
|
cntrls.year.value = line.year;
|
||||||
|
cntrls.descp.value = line.descp;
|
||||||
|
cntrls.actr.value = line.actr;
|
||||||
|
// заполнение превью
|
||||||
|
// Если пользователь выбрал изображение, то оно загружается
|
||||||
|
// в тэг image с id image - preview
|
||||||
|
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
|
||||||
|
cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
|
||||||
|
} catch {
|
||||||
|
// в случае ошибки происходит возврат к page4
|
||||||
|
goBack();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// обработчик события отправки формы
|
||||||
|
// возникает при нажатии на кнопку (button) с типом submit
|
||||||
|
// кнопка должна находится внутри тега form
|
||||||
|
cntrls.form.addEventListener("submit", async (event) => {
|
||||||
|
console.info("Form onSubmit");
|
||||||
|
// отключение стандартного поведения формы при отправке
|
||||||
|
// при отправке страница обновляется и JS перестает работать
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
// если форма не прошла валидацию, то ничего делать не нужно
|
||||||
|
if (!cntrls.form.checkValidity()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let imageBase64 = "";
|
||||||
|
// Получение выбранного пользователем изображения в виде base64 строки
|
||||||
|
// Если пользователь ничего не выбрал, то не нужно сохранять в БД
|
||||||
|
// дефолтное изображение
|
||||||
|
if (cntrls.imagePreview.src !== imagePlaceholder) {
|
||||||
|
// Загрузка содержимого атрибута src тэга img с id image-preview
|
||||||
|
// Здесь выполняется HTTP запрос с типом GET
|
||||||
|
const result = await fetch(cntrls.imagePreview.src);
|
||||||
|
// Получение из HTTP-ответа бинарного содержимого
|
||||||
|
const blob = await result.blob();
|
||||||
|
// Получение base64 строки для файла
|
||||||
|
// Здесь выполняется Promise из функции readFile
|
||||||
|
// Promise позволяет писать линейный код для работы с асинхронными методами
|
||||||
|
// без использования обработчиков (callback) с помощью await
|
||||||
|
imageBase64 = await readFile(blob);
|
||||||
|
}
|
||||||
|
|
||||||
|
// если значение параметра запроса не задано,
|
||||||
|
// то необходимо выполнить добавление записи
|
||||||
|
// иначе обновление записи
|
||||||
|
if (!currentId) {
|
||||||
|
await addLine(
|
||||||
|
cntrls.name.value,
|
||||||
|
cntrls.langType.value,
|
||||||
|
cntrls.genreType.value,
|
||||||
|
cntrls.year.value,
|
||||||
|
cntrls.descp.value,
|
||||||
|
cntrls.actr.value,
|
||||||
|
imageBase64,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
await editLine(
|
||||||
|
currentId,
|
||||||
|
cntrls.name.value,
|
||||||
|
cntrls.langType.value,
|
||||||
|
cntrls.genreType.value,
|
||||||
|
cntrls.year.value,
|
||||||
|
cntrls.descp.value,
|
||||||
|
cntrls.actr.value,
|
||||||
|
imageBase64,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// возврат к странице page4
|
||||||
|
goBack();
|
||||||
|
});
|
||||||
|
}
|
||||||
25
lab3/js/validation.js
Normal file
25
lab3/js/validation.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
// модуль используется для валидации форма на странице
|
||||||
|
|
||||||
|
function validation() {
|
||||||
|
// поиск всех форма с классом .needs-validation
|
||||||
|
const forms = document.querySelectorAll("form.needs-validation");
|
||||||
|
|
||||||
|
for (let i = 0; i < forms.length; i += 1) {
|
||||||
|
const form = forms[i];
|
||||||
|
// для каждой формы добавляется обработчик события отправки
|
||||||
|
form.addEventListener("submit", (event) => {
|
||||||
|
// если форма не прошла валидацию
|
||||||
|
// то выключить стандартное действие
|
||||||
|
if (!form.checkValidity()) {
|
||||||
|
event.preventDefault();
|
||||||
|
// предотвращает распространение preventDefault
|
||||||
|
// на другие объекты
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
// добавляет к форме класс was-validated
|
||||||
|
form.classList.add("was-validated");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default validation;
|
||||||
14
lab3/jsconfig.json
Normal file
14
lab3/jsconfig.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"target": "ES2020",
|
||||||
|
"jsx": "preserve",
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"strictFunctionTypes": true
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"**/node_modules/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
lab3/lab3.docx
Normal file
BIN
lab3/lab3.docx
Normal file
Binary file not shown.
59
lab3/login.html
Normal file
59
lab3/login.html
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Онлайн-кинотеатр</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class ="d-flex flex-column h-100">
|
||||||
|
<header id="header" class="header row w-100 m-0 mb-3">
|
||||||
|
<div class="p-0">
|
||||||
|
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-lg-between row w-100 m-0">
|
||||||
|
<div class="col-0 col-lg bg-cyan mw-100 mh-100">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center justify-content-lg-start">
|
||||||
|
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2" href="index.html">Онлайн-кинотеатр</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column col-xs-12 col-sm-6 col-lg-3 col-xl-2 p-0 bg-cyan">
|
||||||
|
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class = "text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="signup.html">Регистрация</a>
|
||||||
|
</div>
|
||||||
|
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="login.html">Вход</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid flex-shrink-0">
|
||||||
|
<section class="d-flex align-items-center justify-content-center">
|
||||||
|
<div class="container">
|
||||||
|
<div class="justify-content-center pt-2">
|
||||||
|
<p class="text-center text-white fs-2 fw-normal font-family-Average Sans">Вход</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<form class="d-flex align-items-center justify-content-center">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row justify-content-center mt-5 col">
|
||||||
|
<div class="flex-column d-flex col p-2 align-items-center">
|
||||||
|
<input type="text" class="form-control p-2 m-2" placeholder="Имя пользователя/почта">
|
||||||
|
<input type="text" class="form-control p-2 m-2" placeholder="Пароль">
|
||||||
|
<button type="submit" class="btn btn-primary mt-5 text-break px-5 py-1 fs-1">Войти</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto fixed bottom-0">
|
||||||
|
<div class= "bg-dark-blue d-flex text-center justify-content-center">
|
||||||
|
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4716
lab3/package-lock.json
generated
Normal file
4716
lab3/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
31
lab3/package.json
Normal file
31
lab3/package.json
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"name": "web",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"vite": "vite",
|
||||||
|
"serve": "http-server -p 3000 ./dist/",
|
||||||
|
"build": "vite build",
|
||||||
|
"rest": "json-server --watch data.json -p 8081",
|
||||||
|
"dev": "npm-run-all --parallel rest vite",
|
||||||
|
"prod": "npm-run-all build --parallel serve rest"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-free": "^6.5.1",
|
||||||
|
"bootstrap": "^5.2.1",
|
||||||
|
"bootstrap-datepicker": "^1.10.0",
|
||||||
|
"jquery": "^3.7.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"eslint": "8.50.0",
|
||||||
|
"eslint-config-airbnb-base": "15.0.0",
|
||||||
|
"eslint-plugin-import": "2.28.1",
|
||||||
|
"http-server": "14.1.1",
|
||||||
|
"json-server": "0.17.4",
|
||||||
|
"npm-run-all": "4.1.5",
|
||||||
|
"vite": "4.4.9"
|
||||||
|
}
|
||||||
|
}
|
||||||
101
lab3/search.html
Normal file
101
lab3/search.html
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Онлайн-кинотеатр</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class ="d-flex flex-column h-100">
|
||||||
|
<div>
|
||||||
|
<header id="header" class="header row w-100 m-0 mb-3">
|
||||||
|
<div class="p-0">
|
||||||
|
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-lg-between row w-100 m-0">
|
||||||
|
<div class="col-0 col-lg bg-cyan mw-100 mh-100">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center justify-content-lg-start">
|
||||||
|
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans m-0 py-2" href="index.html">Онлайн-кинотеатр</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column col-sm-6 col-lg-3 col-xl-2 p-0 bg-cyan ">
|
||||||
|
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class = "text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="signup.html">Регистрация</a>
|
||||||
|
</div>
|
||||||
|
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="login.html">Вход</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-group row text-break w-100 mt-3 p-0 mb-2">
|
||||||
|
<div class="form-outline col text-break h-100 flex-grow-1">
|
||||||
|
<input id="search-focus" type="search" id="form1" class="form-control ms-3 p-2 ms-lg-0" placeholder="Введите название фильма" />
|
||||||
|
</div>
|
||||||
|
<div class="dropdown col-1 col-lg-2 col-xl-3 w-auto mx-3 p-0 text-break h-100">
|
||||||
|
<button class="btn btn-secondary dropdown-toggle h-100" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="d-none d-lg-inline">Выберите жанр</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-primary col-1 col-sm-1 col-lg-3 col-xl-2 h-100 w-auto">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
|
||||||
|
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="d-none d-lg-inline">Поиск</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid flex-shrink-0">
|
||||||
|
<div class="row m-2 my-5 ">
|
||||||
|
<div class="col d-flex align-items-center justify-content-center">
|
||||||
|
<a href="selected.html" class="col-xs-12 col-lg-3 w-auto h-auto"><img src="images/fire.jpg" class="img-fluid" alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column col-xs-12 col-lg-6 col-xl-8 p-0 justify-content-center">
|
||||||
|
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 mx-4">
|
||||||
|
<p class="text-white fs-5 fw-normal font-family-Bayon text-center">Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей, которые борются с неистовой огненной стихией, уничтожающей всё на своем пути. Герои работают в эпицентре лесного пожара и приходят на помощь</p>
|
||||||
|
</div>
|
||||||
|
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<p class="text-center text-white fs-3 fw-normal font-family-Bayon">Приключения, катастрофа, драма, боевик</p>
|
||||||
|
</div>
|
||||||
|
<a href="selected.html" class="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3">
|
||||||
|
Перейти
|
||||||
|
</a>
|
||||||
|
<a class="d-flex btn btn-primary justify-content-center p-5 fs-5 m-3">
|
||||||
|
Добавить в избранное
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row m-2 my-5">
|
||||||
|
<div class="col d-flex align-items-center justify-content-center">
|
||||||
|
<a href="selected.html" class="col-xs-12 col-lg-3 w-auto h-auto"><img src="images/fire.jpg" class="img-fluid" alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column col-xs-12 col-lg-6 col-xl-8 p-0 justify-content-center">
|
||||||
|
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break mx-4">
|
||||||
|
<p class="text-white fs-5 fw-normal font-family-Bayon text-center">Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей, которые борются с неистовой огненной стихией, уничтожающей всё на своем пути. Герои работают в эпицентре лесного пожара и приходят на помощь</p>
|
||||||
|
</div>
|
||||||
|
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<p class="text-center text-white fs-3 fw-normal font-family-Bayon">Приключения, катастрофа, драма, боевик</p>
|
||||||
|
</div>
|
||||||
|
<a href="selected.html" class="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3">
|
||||||
|
Перейти
|
||||||
|
</a>
|
||||||
|
<a class="d-flex btn btn-primary justify-content-center p-5 fs-5 m-3">
|
||||||
|
Добавить в избранное
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto fixed bottom-0">
|
||||||
|
<div class= "bg-dark-blue d-flex text-center justify-content-center">
|
||||||
|
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
64
lab3/selected.html
Normal file
64
lab3/selected.html
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Онлайн-кинотеатр</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class ="d-flex flex-column h-100">
|
||||||
|
<header id="header" class="header row w-100 m-0 mb-3">
|
||||||
|
<div class="p-0">
|
||||||
|
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-lg-between row w-100 m-0">
|
||||||
|
<div class="col-0 col-lg bg-cyan mw-100 mh-100">
|
||||||
|
</div>
|
||||||
|
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center justify-content-lg-start">
|
||||||
|
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2" href="index.html">Онлайн-кинотеатр</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column col-xs-12 col-sm-6 col-lg-3 col-xl-2 p-0 bg-cyan">
|
||||||
|
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class = "text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="signup.html">Регистрация</a>
|
||||||
|
</div>
|
||||||
|
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="login.html">Вход</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid flex-shrink-0">
|
||||||
|
<div class="ms-3">
|
||||||
|
<div class="row p-2 justify-content-center">
|
||||||
|
<img class="col-12 col-lg-6 img-fluid w-auto h-auto" src="images/fire.jpg" alt="" style="max-height: 590;">
|
||||||
|
<div class="col-12 col-lg-6 text-wrap px-2 d-flex justify-content-center mt-3">
|
||||||
|
<p class="text-white fs-3 fw-normal font-family-Bayon text-lg-start text-center">Дата выхода: 2020<br/>Режиссер:<br/>Алексей Нужный<br/>В главных ролях:<br/>Константин Хабенский, Иван Янковский, Стася Милославская...<br/>Язык: Русский</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 d-flex justify-content-center m-0 flex-column mt-5">
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<h1 class="text-white fs-2 fw-normal font-family-Bayon">Огонь</h1>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex text-wrap me-3">
|
||||||
|
<p class="text-white fs-5 fw-normal font-family-Bayon text-lg-center mb-0 px-3 py-2" style="text-align: justify;">Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей, которые борются с неистовой огненной стихией, уничтожающей всё на своем пути. Герои работают в эпицентре лесного пожара и приходят на помощь жителям близлежащей деревни. Константин Хабенский, Иван Янковский и Стася Милославская в зрелищном героическом блокбастере от режиссера Алексея Нужного и создателей кинохитов «Движение вверх», «Экипаж», «Легенда № 17».<br/>Наступает тяжелый сезон разрушительных лесных пожаров. Борьба с ними не на жизнь, а на смерть разворачивается возле маленького села Ольхово в Карелии. На вызов прибыла бригада из шести пожарных во главе с опытным инструктором Алексеем Павловичем Соколовым. У каждого члена группы своя история: кто-то уже потерял в огне самых близких, кого-то с беспокойством ждут дома. Есть среди них и новичок – самоуверенный красавец Роман Ильин. Он ухаживает за дочкой Соколова Катей, работающей на базе в диспетчерской. Вот только отношения с самим Алексеем Павловичем у Ильина не задались – и это мягко говоря. Конфликт нарастает перед лицом свирепого пожара, угрожающего деревенским жителям, которых приходится эвакуировать в экстремальных условиях.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row justify-content-around">
|
||||||
|
<buttnon class="d-flex btn btn-primary justify-content-center col p-5 fs-4 m-3 align-items-center">
|
||||||
|
Смотреть
|
||||||
|
</buttnon>
|
||||||
|
<buttnon class="d-flex btn btn-primary justify-content-center col p-5 fs-5 m-3 align-items-center">
|
||||||
|
Добавить в избранное
|
||||||
|
</buttnon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto fixed bottom-0">
|
||||||
|
<div class= "bg-dark-blue d-flex text-center justify-content-center">
|
||||||
|
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
61
lab3/signup.html
Normal file
61
lab3/signup.html
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Онлайн-кинотеатр</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class ="d-flex flex-column h-100">
|
||||||
|
<header id="header" class="header row w-100 m-0 mb-3">
|
||||||
|
<div class="p-0">
|
||||||
|
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-lg-between row w-100 m-0">
|
||||||
|
<div class="col-0 col-lg bg-cyan mw-100 mh-100">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center justify-content-lg-start">
|
||||||
|
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2" href="index.html">Онлайн-кинотеатр</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column col-xs-12 col-sm-6 col-lg-3 col-xl-2 p-0 bg-cyan">
|
||||||
|
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class = "text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="signup.html">Регистрация</a>
|
||||||
|
</div>
|
||||||
|
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="login.html">Вход</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid flex-shrink-0">
|
||||||
|
<section class="d-flex align-items-center justify-content-center">
|
||||||
|
<div class="container">
|
||||||
|
<div class="justify-content-center pt-2">
|
||||||
|
<p class="text-center text-white fs-2 fw-normal font-family-Average Sans">Регистрация</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<form class="d-flex align-items-center justify-content-center">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row justify-content-center mt-5 col">
|
||||||
|
<div class="flex-column d-flex col p-2 align-items-center">
|
||||||
|
<input type="text" class="form-control p-2 m-2" placeholder="Имя пользователя">
|
||||||
|
<input type="text" class="form-control p-2 m-2" placeholder="Почта">
|
||||||
|
<input type="text" class="form-control p-2 m-2" placeholder="Пароль">
|
||||||
|
<input type="text" class="form-control p-2 m-2" placeholder="Повторите пароль">
|
||||||
|
<button type="submit" class="btn btn-primary mt-5 text-break px-5 py-1 fs-2">Зарегистрироваться</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto fixed bottom-0">
|
||||||
|
<div class= "bg-dark-blue d-flex text-center justify-content-center">
|
||||||
|
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
16
lab3/style.css
Normal file
16
lab3/style.css
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
body{
|
||||||
|
background-color:#194F75;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.bg-cyan{
|
||||||
|
background-color: #71B8F7;
|
||||||
|
}
|
||||||
|
.bg-grey{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
}
|
||||||
|
.bg-dark-blue{
|
||||||
|
background-color: #2B82CF;
|
||||||
|
}
|
||||||
|
main{
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
22
lab3/vite.config.js
Normal file
22
lab3/vite.config.js
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import { resolve } from "path";
|
||||||
|
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
build: {
|
||||||
|
sourcemap: true,
|
||||||
|
emptyOutDir: true,
|
||||||
|
rollupOptions: {
|
||||||
|
input: {
|
||||||
|
main: resolve(__dirname, "index.html"),
|
||||||
|
selected: resolve(__dirname, "selected.html"),
|
||||||
|
favourite: resolve(__dirname, "favourite.html"),
|
||||||
|
admin: resolve(__dirname, "admin.html"),
|
||||||
|
signup: resolve(__dirname, "signup.html"),
|
||||||
|
login: resolve(__dirname, "login.html"),
|
||||||
|
search: resolve(__dirname, "search.html"),
|
||||||
|
add: resolve(__dirname, "add.html"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
24
lab4/.eslintrc.cjs
Normal file
24
lab4/.eslintrc.cjs
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: { browser: true, es2020: true },
|
||||||
|
extends: [
|
||||||
|
'airbnb-base',
|
||||||
|
'plugin:react/recommended',
|
||||||
|
'plugin:react/jsx-runtime',
|
||||||
|
'plugin:react-hooks/recommended',
|
||||||
|
],
|
||||||
|
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||||
|
parserOptions: { ecmaVersion: 12, sourceType: 'module' },
|
||||||
|
settings: { react: { version: '18.2' } },
|
||||||
|
plugins: ['react-refresh'],
|
||||||
|
rules: {
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
'indent': 'off',
|
||||||
|
'no-console': 'off',
|
||||||
|
'arrow-body-style': 'off',
|
||||||
|
'implicit-arrow-linebreak': 'off',
|
||||||
|
},
|
||||||
|
}
|
||||||
24
lab4/.gitignore
vendored
Normal file
24
lab4/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
29
lab4/README.md
Normal file
29
lab4/README.md
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
#### Окружение:
|
||||||
|
- 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
lab4/index.html
Normal file
15
lab4/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>My shop</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="root" class="h-100 d-flex flex-column"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
14
lab4/jsconfig.json
Normal file
14
lab4/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/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
4344
lab4/package-lock.json
generated
Normal file
4344
lab4/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
lab4/package.json
Normal file
32
lab4/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"
|
||||||
|
}
|
||||||
|
}
|
||||||
3
lab4/public/favicon.svg
Normal file
3
lab4/public/favicon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
|
||||||
|
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 463 B |
0
lab4/src/App.css
Normal file
0
lab4/src/App.css
Normal file
19
lab4/src/App.jsx
Normal file
19
lab4/src/App.jsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { Container } from 'react-bootstrap';
|
||||||
|
import { Outlet } from 'react-router-dom';
|
||||||
|
import './App.css';
|
||||||
|
import Footer from './components/footer/Footer.jsx';
|
||||||
|
import Header from './components/header/Header.jsx';
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header></Header>
|
||||||
|
<Container className='p-0' as="main" fluid>
|
||||||
|
<Outlet />
|
||||||
|
</Container>
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
BIN
lab4/src/assets/banner1.png
Normal file
BIN
lab4/src/assets/banner1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 640 KiB |
BIN
lab4/src/assets/banner2.png
Normal file
BIN
lab4/src/assets/banner2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 812 KiB |
BIN
lab4/src/assets/banner3.png
Normal file
BIN
lab4/src/assets/banner3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 767 KiB |
BIN
lab4/src/assets/images/bro.jpg
Normal file
BIN
lab4/src/assets/images/bro.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
lab4/src/assets/images/fire.jpg
Normal file
BIN
lab4/src/assets/images/fire.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
BIN
lab4/src/assets/images/harry.jpg
Normal file
BIN
lab4/src/assets/images/harry.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
BIN
lab4/src/assets/images/noimage.png
Normal file
BIN
lab4/src/assets/images/noimage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
lab4/src/assets/images/nolan.jpg
Normal file
BIN
lab4/src/assets/images/nolan.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
BIN
lab4/src/assets/logo.png
Normal file
BIN
lab4/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
25
lab4/src/components/banner/Banner.css
Normal file
25
lab4/src/components/banner/Banner.css
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
#banner {
|
||||||
|
margin: 2px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner img {
|
||||||
|
border: 1px solid #3c3c3f;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner img.banner-show {
|
||||||
|
width: 100%;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 1s, visibility 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner img.banner-hide {
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity 1s, visibility 0s 1s;
|
||||||
|
}
|
||||||
40
lab4/src/components/banner/Banner.jsx
Normal file
40
lab4/src/components/banner/Banner.jsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import banner1 from '../../assets/banner1.png';
|
||||||
|
import banner2 from '../../assets/banner2.png';
|
||||||
|
import banner3 from '../../assets/banner3.png';
|
||||||
|
import './Banner.css';
|
||||||
|
|
||||||
|
const Banner = () => {
|
||||||
|
const [currentBanner, setCurrentBanner] = useState(0);
|
||||||
|
const banners = [banner1, banner2, banner3];
|
||||||
|
|
||||||
|
const getBannerClass = (index) => {
|
||||||
|
return currentBanner === index ? 'banner-show' : 'banner-hide';
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const bannerInterval = setInterval(
|
||||||
|
() => {
|
||||||
|
console.info('Banner changed');
|
||||||
|
let current = currentBanner + 1;
|
||||||
|
if (current === banners.length) {
|
||||||
|
current = 0;
|
||||||
|
}
|
||||||
|
setCurrentBanner(current);
|
||||||
|
},
|
||||||
|
5000,
|
||||||
|
);
|
||||||
|
return () => clearInterval(bannerInterval);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id="banner" >
|
||||||
|
{
|
||||||
|
banners.map((banner, index) =>
|
||||||
|
<img key={index} className={getBannerClass(index)} src={banner} alt={`banner${index}`} />)
|
||||||
|
}
|
||||||
|
</div >
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Banner;
|
||||||
22
lab4/src/components/filmLogo/FilmLogo.jsx
Normal file
22
lab4/src/components/filmLogo/FilmLogo.jsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import { Col, Image } from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
const FilmLogo = ({ logoName }) => {
|
||||||
|
const tempLogo = logoName ?? 'logo';
|
||||||
|
return (
|
||||||
|
<Col xs={12} sm={6} lg={3}
|
||||||
|
className="w-auto h-auto m-2"
|
||||||
|
>
|
||||||
|
<Link to="/selected">
|
||||||
|
<Image src={`src/assets/images/${tempLogo}.jpg`} fluid alt="" />
|
||||||
|
</Link>
|
||||||
|
</Col>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
FilmLogo.propTypes = {
|
||||||
|
logoName: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FilmLogo;
|
||||||
4
lab4/src/components/filmRow/FilmRow.css
Normal file
4
lab4/src/components/filmRow/FilmRow.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.FilmLogoRow{
|
||||||
|
min-width: 300px;
|
||||||
|
min-height: 500px;
|
||||||
|
}
|
||||||
38
lab4/src/components/filmRow/FilmRow.jsx
Normal file
38
lab4/src/components/filmRow/FilmRow.jsx
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import {
|
||||||
|
Row, Col, Button, Image,
|
||||||
|
} from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const FilmRow = () => {
|
||||||
|
return (
|
||||||
|
<Row className="m-2 my-5 ">
|
||||||
|
<Col xs={12} lg={3}>
|
||||||
|
<Link to="/selected" className="">
|
||||||
|
<Image src="src/assets/images/fire.jpg" fluid alt="" className="FilmLogoRow"/>
|
||||||
|
</Link>
|
||||||
|
</Col>
|
||||||
|
<Col xs={12} lg={6} xl={8} className="d-flex flex-column p-0 justify-content-center">
|
||||||
|
<div className="d-flex p-1 ps-0 justify-content-center mw-100 mh-100 mx-4">
|
||||||
|
<p className="text-white fs-5 fw-normal font-family-Bayon text-center">
|
||||||
|
Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей,
|
||||||
|
которые борются с неистовой огненной стихией, уничтожающей всё на своем
|
||||||
|
пути. Герои работают в эпицентре лесного пожара и приходят на помощь
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<p className="text-center text-white fs-3 fw-normal font-family-Bayon">
|
||||||
|
Приключения, катастрофа, драма, боевик
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button className="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3 align-items-center">
|
||||||
|
Перейти
|
||||||
|
</Button>
|
||||||
|
<Button className="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3 align-items-center">
|
||||||
|
Смотреть позже
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FilmRow;
|
||||||
3
lab4/src/components/footer/Footer.css
Normal file
3
lab4/src/components/footer/Footer.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.bg-dark-blue{
|
||||||
|
background-color: #2B82CF;
|
||||||
|
}
|
||||||
13
lab4/src/components/footer/Footer.jsx
Normal file
13
lab4/src/components/footer/Footer.jsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import './Footer.css';
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<footer className="footer mt-auto fixed bottom-0 w-100">
|
||||||
|
<div className= "bg-dark-blue d-flex text-center justify-content-center">
|
||||||
|
<p className="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
3
lab4/src/components/genre/Genre.css
Normal file
3
lab4/src/components/genre/Genre.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.bg-grey{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
}
|
||||||
23
lab4/src/components/genre/Genre.jsx
Normal file
23
lab4/src/components/genre/Genre.jsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { Col } from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import './Genre.css';
|
||||||
|
|
||||||
|
const Genre = ({ genreName }) => {
|
||||||
|
return (
|
||||||
|
<Col xs={12} sm={6} lg={3} xl={1} className="bg-grey rounded-3 text-center p-2 m-2">
|
||||||
|
<Link
|
||||||
|
className="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans"
|
||||||
|
to="/search"
|
||||||
|
>
|
||||||
|
{genreName}
|
||||||
|
</Link>
|
||||||
|
</Col>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Genre.propTypes = {
|
||||||
|
genreName: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Genre;
|
||||||
10
lab4/src/components/header/Header.css
Normal file
10
lab4/src/components/header/Header.css
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
.bg-cyan{
|
||||||
|
background-color: #71B8F7;
|
||||||
|
}
|
||||||
|
.bg-grey{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
}
|
||||||
|
.bg-dark-blue{
|
||||||
|
background-color: #2B82CF;
|
||||||
|
}
|
||||||
|
|
||||||
43
lab4/src/components/header/Header.jsx
Normal file
43
lab4/src/components/header/Header.jsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { Col, Row } from 'react-bootstrap';
|
||||||
|
import './Header.css';
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
return (
|
||||||
|
<header className="w-100 m-0 mb-3">
|
||||||
|
<div className="w-100">
|
||||||
|
<Row className="pt-lg-3 px-lg-5 p-0 justify-content-lg-between justify-content-center row w-100 m-0">
|
||||||
|
<Col lg={3} xl={2} className="col-0 bg-cyan gone">
|
||||||
|
</Col>
|
||||||
|
<Col xs className="d-flex p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center">
|
||||||
|
<Link to="/"
|
||||||
|
className="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2"
|
||||||
|
href="index.html"
|
||||||
|
>
|
||||||
|
Онлайн-кинотеатр
|
||||||
|
</Link>
|
||||||
|
</Col>
|
||||||
|
<Col xs={12} sm={6} lg={3} xl={2} className="flex-column p-0 bg-cyan">
|
||||||
|
<div className="d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<Link
|
||||||
|
className="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0"
|
||||||
|
to="/signup"
|
||||||
|
>
|
||||||
|
Регистрация
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<Link
|
||||||
|
className="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0"
|
||||||
|
to="/login"
|
||||||
|
>
|
||||||
|
Вход
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Header;
|
||||||
12
lab4/src/components/navigation/Navigation.css
Normal file
12
lab4/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;
|
||||||
|
}
|
||||||
41
lab4/src/components/navigation/Navigation.jsx
Normal file
41
lab4/src/components/navigation/Navigation.jsx
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Container, Nav, Navbar } from 'react-bootstrap';
|
||||||
|
import { Cart2 } from 'react-bootstrap-icons';
|
||||||
|
import { Link, useLocation } from 'react-router-dom';
|
||||||
|
import './Navigation.css';
|
||||||
|
|
||||||
|
const Navigation = ({ routes }) => {
|
||||||
|
const location = useLocation();
|
||||||
|
const indexPageLink = routes.filter((route) => route.index === false).shift();
|
||||||
|
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<Navbar expand='md' bg='dark' data-bs-theme='dark' className='my-navbar'>
|
||||||
|
<Container fluid>
|
||||||
|
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
|
||||||
|
<Cart2 className='d-inline-block align-top me-1 logo' />
|
||||||
|
My shop
|
||||||
|
</Navbar.Brand>
|
||||||
|
<Navbar.Toggle aria-controls='main-navbar' />
|
||||||
|
<Navbar.Collapse id='main-navbar'>
|
||||||
|
<Nav className='me-auto link' activeKey={location.pathname}>
|
||||||
|
{
|
||||||
|
pages.map((page) =>
|
||||||
|
<Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
|
||||||
|
{page.title}
|
||||||
|
</Nav.Link>)
|
||||||
|
}
|
||||||
|
</Nav>
|
||||||
|
</Navbar.Collapse>
|
||||||
|
</Container>
|
||||||
|
</Navbar >
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Navigation.propTypes = {
|
||||||
|
routes: PropTypes.array,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navigation;
|
||||||
15
lab4/src/components/searchbar/SearchBar.css
Normal file
15
lab4/src/components/searchbar/SearchBar.css
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
.bg-grey{
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
#dropdown-basic-button{
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sotnya{
|
||||||
|
min-height: 100px;
|
||||||
|
|
||||||
|
}
|
||||||
|
#dropdown-basic-button{
|
||||||
|
height: 100% !important ;
|
||||||
|
}
|
||||||
38
lab4/src/components/searchbar/SearchBar.jsx
Normal file
38
lab4/src/components/searchbar/SearchBar.jsx
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import {
|
||||||
|
Form, Row, Col, Dropdown, DropdownButton,
|
||||||
|
} from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import './SearchBar.css';
|
||||||
|
|
||||||
|
const SearchBar = () => {
|
||||||
|
return (
|
||||||
|
<Row className="text-break w-100 mt-3 p-0 mb-2 align-items-center justify-content-center">
|
||||||
|
<Col lg={3} className=" text-break h-100 flex-grow-1">
|
||||||
|
<Form.Control
|
||||||
|
id="search-focus"
|
||||||
|
as="textarea"
|
||||||
|
className="ms-3 p-0 ms-lg-4"
|
||||||
|
placeholder="Введите название фильма"
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col sm={1} lg={2} xl={3} className=" w-auto mx-3 p-auto text-break h-100 d-flex align-items-center">
|
||||||
|
<DropdownButton id="dropdown-basic-button" title="Выберите жанр" className=" h-100">
|
||||||
|
<Dropdown.Item href="#">Ужасы</Dropdown.Item>
|
||||||
|
<Dropdown.Item href="#">Триллер</Dropdown.Item>
|
||||||
|
<Dropdown.Item href="#">Комедия</Dropdown.Item>
|
||||||
|
</DropdownButton>
|
||||||
|
</Col>
|
||||||
|
<Col sm={1} lg={3} xl={2} className="align-items-center justify-content-center">
|
||||||
|
<Link
|
||||||
|
className=" "
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="bi bi-search" viewBox="0 0 20 20">
|
||||||
|
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
|
||||||
|
</svg>
|
||||||
|
</Link>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SearchBar;
|
||||||
32
lab4/src/index.css
Normal file
32
lab4/src/index.css
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
h1 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-mw {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.btn-mw {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.btn-mw {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
background-color:#194F75;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
67
lab4/src/main.jsx
Normal file
67
lab4/src/main.jsx
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
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 Page1 from './pages/Page1.jsx';
|
||||||
|
import Signup from './pages/signup.jsx';
|
||||||
|
import Login from './pages/Login.jsx';
|
||||||
|
import Admin from './pages/Admin.jsx';
|
||||||
|
import PageEdit from './pages/PageEdit.jsx';
|
||||||
|
import Selected from './pages/Selected.jsx';
|
||||||
|
import Search from './pages/Search.jsx';
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
index: true,
|
||||||
|
path: '/',
|
||||||
|
element: <Page1 />,
|
||||||
|
title: 'Главная страница',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/signup',
|
||||||
|
element: <Signup />,
|
||||||
|
title: 'Вторая страница',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
element: <Login />,
|
||||||
|
title: 'Третья страница',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/admin',
|
||||||
|
element: <Admin />,
|
||||||
|
title: 'Четвертая страница',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/add',
|
||||||
|
element: <PageEdit />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/selected',
|
||||||
|
element: <Selected />,
|
||||||
|
title: 'Страница выбора',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search',
|
||||||
|
element: <Search />,
|
||||||
|
title: 'Страница поиска',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = createBrowserRouter([
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
element: <App routes={routes} />,
|
||||||
|
children: routes,
|
||||||
|
errorElement: <ErrorPage />,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<RouterProvider router={router} />
|
||||||
|
</React.StrictMode>,
|
||||||
|
);
|
||||||
23
lab4/src/pages/Admin.jsx
Normal file
23
lab4/src/pages/Admin.jsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { Button, Table } from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const Admin = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button as={Link} to="/add" variant="success">Добавить Фильм</Button>
|
||||||
|
<Table className="mt-2" striped>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">Название</th>
|
||||||
|
<th scope="col">Редактировать</th>
|
||||||
|
<th scope="col">Удалить</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</Table>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Admin;
|
||||||
19
lab4/src/pages/ErrorPage.jsx
Normal file
19
lab4/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;
|
||||||
34
lab4/src/pages/Login.jsx
Normal file
34
lab4/src/pages/Login.jsx
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { Form, Button } from 'react-bootstrap';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
const Login = () => {
|
||||||
|
const [validated, setValidated] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = (event) => {
|
||||||
|
const form = event.currentTarget;
|
||||||
|
if (form.checkValidity() === false) {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
setValidated(true);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label className="form-label">Войдите</Form.Label>
|
||||||
|
<Form.Control type="text" name="name"
|
||||||
|
placeholder='Введите имя пользователя/email' required />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Control type="text" name="password"
|
||||||
|
placeholder='Введите пароль' required />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="d-flex flex-md-row flex-column justify-content-center">
|
||||||
|
<Button className="btn-mw me-md-3" type="submit" variant="primary">Войти</Button>
|
||||||
|
</Form.Group>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Login;
|
||||||
65
lab4/src/pages/Page1.jsx
Normal file
65
lab4/src/pages/Page1.jsx
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
import { Row, Container } from 'react-bootstrap';
|
||||||
|
import FilmLogo from '../components/filmLogo/FilmLogo.jsx';
|
||||||
|
import Genre from '../components/genre/Genre.jsx';
|
||||||
|
|
||||||
|
const Page1 = () => {
|
||||||
|
return (
|
||||||
|
<Container fluid className="flex-shrink-0 p-0">
|
||||||
|
<section className="d-flex align-items-center justify-content-center">
|
||||||
|
<div>
|
||||||
|
<Row className="justify-content-center pt-2">
|
||||||
|
<p className="text-center text-white fs-2 fw-normal font-family-Average Sans">
|
||||||
|
Популярные сейчас
|
||||||
|
</p>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className="d-flex justify-content-evenly ">
|
||||||
|
<Row className="row p-2 m-2 align-items-center justify-content-center">
|
||||||
|
<FilmLogo logoName={'fire'}>
|
||||||
|
|
||||||
|
</FilmLogo>
|
||||||
|
<FilmLogo logoName={'harry'}>
|
||||||
|
|
||||||
|
</FilmLogo>
|
||||||
|
<FilmLogo logoName={'fire'}>
|
||||||
|
|
||||||
|
</FilmLogo>
|
||||||
|
<FilmLogo logoName={'fire'}>
|
||||||
|
|
||||||
|
</FilmLogo>
|
||||||
|
</Row>
|
||||||
|
</section>
|
||||||
|
<section className="d-flex justify-content-center">
|
||||||
|
<Row className="m-3 justify-content-evenly w-100 text-break">
|
||||||
|
<Genre genreName={'Ужасы'}>
|
||||||
|
|
||||||
|
</Genre>
|
||||||
|
<Genre genreName={'Ужасы'}>
|
||||||
|
|
||||||
|
</Genre>
|
||||||
|
<Genre genreName={'Ужасы'}>
|
||||||
|
|
||||||
|
</Genre>
|
||||||
|
<Genre genreName={'Ужасы'}>
|
||||||
|
|
||||||
|
</Genre>
|
||||||
|
<Genre genreName={'Ужасы'}>
|
||||||
|
|
||||||
|
</Genre>
|
||||||
|
<Genre genreName={'Ужасы'}>
|
||||||
|
|
||||||
|
</Genre>
|
||||||
|
<Genre genreName={'Ужасы'}>
|
||||||
|
|
||||||
|
</Genre>
|
||||||
|
<Genre genreName={'Ужасы'}>
|
||||||
|
|
||||||
|
</Genre>
|
||||||
|
</Row>
|
||||||
|
</section>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page1;
|
||||||
57
lab4/src/pages/PageEdit.jsx
Normal file
57
lab4/src/pages/PageEdit.jsx
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Button, Form } from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const PageEdit = () => {
|
||||||
|
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=""
|
||||||
|
alt="placeholder" />
|
||||||
|
</div>
|
||||||
|
<Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
|
||||||
|
<Form.Group className="mb-2" controlId="name">
|
||||||
|
<Form.Label htmlFor="desc" className="form-label">Описание</Form.Label>
|
||||||
|
<Form.Control as="textarea" name="name" rows={5}
|
||||||
|
placeholder='Описание' required/>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2" controlId="email">
|
||||||
|
<Form.Label htmlFor="actrs" className="form-label">Актеры</Form.Label>
|
||||||
|
<Form.Control type="text" name="actrs"
|
||||||
|
placeholder='Актеры' required />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2" controlId="password">
|
||||||
|
<Form.Label htmlFor="genres" className="form-label">Жанры</Form.Label>
|
||||||
|
<Form.Control type="text" name="genres"
|
||||||
|
placeholder='Жанры' required />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2" controlId="file">
|
||||||
|
<Form.Label>Изображение</Form.Label>
|
||||||
|
<Form.Control type="file" name="image" accept="image/*" />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2" controlId="file">
|
||||||
|
<Form.Label>Файл</Form.Label>
|
||||||
|
<Form.Control type="file" name="file"/>
|
||||||
|
</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" variant="secondary">Назад</Button>
|
||||||
|
<Button className="btn-mw me-md-3" type="submit" variant="primary">Сохранить</Button>
|
||||||
|
</Form.Group>
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageEdit;
|
||||||
14
lab4/src/pages/Search.jsx
Normal file
14
lab4/src/pages/Search.jsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import SearchBar from '../components/searchbar/SearchBar.jsx';
|
||||||
|
import FilmRow from '../components/filmRow/FilmRow.jsx';
|
||||||
|
|
||||||
|
const Search = () => {
|
||||||
|
return (
|
||||||
|
<div className="ms-4">
|
||||||
|
<SearchBar/>
|
||||||
|
<FilmRow/>
|
||||||
|
<FilmRow/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Search;
|
||||||
80
lab4/src/pages/Selected.jsx
Normal file
80
lab4/src/pages/Selected.jsx
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
import {
|
||||||
|
Row, Col, Image, Button,
|
||||||
|
} from 'react-bootstrap';
|
||||||
|
import image from '../assets/images/fire.jpg';
|
||||||
|
|
||||||
|
const Selected = () => {
|
||||||
|
return (
|
||||||
|
<div className=" w-100">
|
||||||
|
<Row className="p-2 justify-content-center mw-100">
|
||||||
|
<Col lg={6} md={12} className="align-items-center d-flex justify-content-center">
|
||||||
|
<Image
|
||||||
|
className=" w-auto h-auto ms-5"
|
||||||
|
src={image}
|
||||||
|
alt=""
|
||||||
|
fluid
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col lg={6} className="text-wrap px-2 d-flex justify-content-center mt-3">
|
||||||
|
<p className="text-white fs-3 fw-normal font-family-Bayon text-lg-start text-center">
|
||||||
|
Дата выхода: 2020
|
||||||
|
<br />
|
||||||
|
Режиссер:
|
||||||
|
<br />
|
||||||
|
Алексей Нужный
|
||||||
|
<br />В главных ролях:
|
||||||
|
<br />
|
||||||
|
Константин Хабенский, Иван Янковский, Стася Милославская...
|
||||||
|
<br />
|
||||||
|
Язык: Русский
|
||||||
|
</p>
|
||||||
|
</Col>
|
||||||
|
<Col sm={12} className="d-flex justify-content-center m-0 flex-column mt-5">
|
||||||
|
<div className="d-flex justify-content-center">
|
||||||
|
<h1 className="text-white fs-2 fw-normal font-family-Bayon">Огонь</h1>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex text-wrap me-3">
|
||||||
|
<p
|
||||||
|
className="text-white fs-5 fw-normal font-family-Bayon text-lg-center mb-0 px-3 py-2"
|
||||||
|
>
|
||||||
|
Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей,
|
||||||
|
которые борются с неистовой огненной стихией, уничтожающей всё на
|
||||||
|
своем пути. Герои работают в эпицентре лесного пожара и приходят на
|
||||||
|
помощь жителям близлежащей деревни. Константин Хабенский, Иван
|
||||||
|
Янковский и Стася Милославская в зрелищном героическом блокбастере
|
||||||
|
от режиссера Алексея Нужного и создателей кинохитов «Движение
|
||||||
|
вверх», «Экипаж», «Легенда № 17».
|
||||||
|
<br />
|
||||||
|
Наступает тяжелый сезон разрушительных лесных пожаров. Борьба с ними
|
||||||
|
не на жизнь, а на смерть разворачивается возле маленького села
|
||||||
|
Ольхово в Карелии. На вызов прибыла бригада из шести пожарных во
|
||||||
|
главе с опытным инструктором Алексеем Павловичем Соколовым. У
|
||||||
|
каждого члена группы своя история: кто-то уже потерял в огне самых
|
||||||
|
близких, кого-то с беспокойством ждут дома. Есть среди них и новичок
|
||||||
|
– самоуверенный красавец Роман Ильин. Он ухаживает за дочкой
|
||||||
|
Соколова Катей, работающей на базе в диспетчерской. Вот только
|
||||||
|
отношения с самим Алексеем Павловичем у Ильина не задались – и это
|
||||||
|
мягко говоря. Конфликт нарастает перед лицом свирепого пожара,
|
||||||
|
угрожающего деревенским жителям, которых приходится эвакуировать в
|
||||||
|
экстремальных условиях.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="justify-content-center w-100">
|
||||||
|
<Col lg={3} md={6} xs={12} className="justify-content-center align-items-center d-flex">
|
||||||
|
<Button className="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3 align-items-center">
|
||||||
|
Смотреть
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
<Col lg={3} md={6} xs={12} className="justify-content-center align-items-center d-flex">
|
||||||
|
<Button className="d-flex btn btn-primary justify-content-centerp-5 p-5 fs-5 m-3 align-items-center">
|
||||||
|
Добавить в избранное
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Selected;
|
||||||
42
lab4/src/pages/signup.jsx
Normal file
42
lab4/src/pages/signup.jsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import { Form, Button } from 'react-bootstrap';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
const Signup = () => {
|
||||||
|
const [validated, setValidated] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = (event) => {
|
||||||
|
const form = event.currentTarget;
|
||||||
|
if (form.checkValidity() === false) {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
setValidated(true);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Label className="form-label">Зарегистрируйтесь</Form.Label>
|
||||||
|
<Form.Control type="text" name="name"
|
||||||
|
placeholder='Введите имя пользователя' required />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Control type="text" name="email"
|
||||||
|
placeholder='Введите email' required />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Control type="text" name="password"
|
||||||
|
placeholder='Введите пароль' required />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2">
|
||||||
|
<Form.Control type="text" name="repPassword"
|
||||||
|
placeholder='Повторите пароль' required />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="d-flex flex-md-row flex-column justify-content-center">
|
||||||
|
<Button className="btn-mw me-md-3" type="submit" variant="primary">Зарегистрироваться</Button>
|
||||||
|
</Form.Group>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Signup;
|
||||||
13
lab4/vite.config.js
Normal file
13
lab4/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
lab4/Лаб4 отчет.docx
Normal file
BIN
lab4/Лаб4 отчет.docx
Normal file
Binary file not shown.
24
lab5/.eslintrc.cjs
Normal file
24
lab5/.eslintrc.cjs
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: { browser: true, es2020: true },
|
||||||
|
extends: [
|
||||||
|
'airbnb-base',
|
||||||
|
'plugin:react/recommended',
|
||||||
|
'plugin:react/jsx-runtime',
|
||||||
|
'plugin:react-hooks/recommended',
|
||||||
|
],
|
||||||
|
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||||
|
parserOptions: { ecmaVersion: 12, sourceType: 'module' },
|
||||||
|
settings: { react: { version: '18.2' } },
|
||||||
|
plugins: ['react-refresh'],
|
||||||
|
rules: {
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
'indent': 'off',
|
||||||
|
'no-console': 'off',
|
||||||
|
'arrow-body-style': 'off',
|
||||||
|
'implicit-arrow-linebreak': 'off',
|
||||||
|
},
|
||||||
|
}
|
||||||
24
lab5/.gitignore
vendored
Normal file
24
lab5/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
29
lab5/README.md
Normal file
29
lab5/README.md
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
#### Окружение:
|
||||||
|
- 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
|
||||||
|
```
|
||||||
103
lab5/data.json
Normal file
103
lab5/data.json
Normal file
File diff suppressed because one or more lines are too long
14
lab5/index.html
Normal file
14
lab5/index.html
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Онлайн-кинотеатр</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="root" class="h-100 d-flex flex-column"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
15
lab5/jsconfig.json
Normal file
15
lab5/jsconfig.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"target": "ES2020",
|
||||||
|
"jsx": "react",
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"strictFunctionTypes": true,
|
||||||
|
"sourceMap": true
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"**/node_modules/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
5
lab5/json-server.json
Normal file
5
lab5/json-server.json
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"static": "./node_modules/json-server/public",
|
||||||
|
"port": 8081,
|
||||||
|
"watch": "true"
|
||||||
|
}
|
||||||
5976
lab5/package-lock.json
generated
Normal file
5976
lab5/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
39
lab5/package.json
Normal file
39
lab5/package.json
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
{
|
||||||
|
"name": "lec4",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"rest": "json-server data.json",
|
||||||
|
"vite": "vite",
|
||||||
|
"dev": "npm-run-all --parallel rest vite",
|
||||||
|
"prod": "npm-run-all lint 'vite build' --parallel rest 'vite preview'"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.6.1",
|
||||||
|
"bootstrap": "^5.3.2",
|
||||||
|
"primereact": "^10.3.0",
|
||||||
|
"prop-types": "^15.8.1",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-bootstrap": "^2.9.1",
|
||||||
|
"react-bootstrap-icons": "^1.10.3",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-hot-toast": "^2.4.1",
|
||||||
|
"react-router-dom": "^6.18.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.15",
|
||||||
|
"@types/react-dom": "^18.2.15",
|
||||||
|
"@vitejs/plugin-react": "^4.0.3",
|
||||||
|
"eslint": "^8.45.0",
|
||||||
|
"eslint-config-airbnb-base": "^15.0.0",
|
||||||
|
"eslint-plugin-import": "^2.29.0",
|
||||||
|
"eslint-plugin-react": "^7.32.2",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.3",
|
||||||
|
"json-server": "^0.17.4",
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
|
"vite": "^4.4.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
3
lab5/public/favicon.svg
Normal file
3
lab5/public/favicon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
|
||||||
|
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 463 B |
0
lab5/src/App.css
Normal file
0
lab5/src/App.css
Normal file
42
lab5/src/App.jsx
Normal file
42
lab5/src/App.jsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import { Container } from 'react-bootstrap';
|
||||||
|
import { Outlet } from 'react-router-dom';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import './App.css';
|
||||||
|
import Footer from './components/footer/Footer.jsx';
|
||||||
|
import Header from './components/header/Header.jsx';
|
||||||
|
import UserContext from './components/users/UserContext.jsx';
|
||||||
|
import useUsers from './components/users/UsersHook';
|
||||||
|
import CurrentUserApiService from './components/users/CurrentUserApiService';
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
const { user, setUser } = useUsers(-1);
|
||||||
|
const [logged, setLogged] = useState(false);
|
||||||
|
const [currentUser, setCurrentUser] = useState(null);
|
||||||
|
const load = async () => {
|
||||||
|
const data = await CurrentUserApiService.get('');
|
||||||
|
if (data.id !== '') {
|
||||||
|
setCurrentUser(data);
|
||||||
|
console.log(currentUser);
|
||||||
|
setLogged(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
load();
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<UserContext.Provider value={{
|
||||||
|
user, setUser, logged, setLogged, currentUser, setCurrentUser,
|
||||||
|
}}>
|
||||||
|
<Header/>
|
||||||
|
<Container className='p-0' as="main" fluid>
|
||||||
|
<Outlet />
|
||||||
|
</Container>
|
||||||
|
</UserContext.Provider>
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
5
lab5/src/Selected.css
Normal file
5
lab5/src/Selected.css
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
#norm{
|
||||||
|
width: 600px;
|
||||||
|
height: 500px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
BIN
lab5/src/assets/200.png
Normal file
BIN
lab5/src/assets/200.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
lab5/src/assets/images/bro.jpg
Normal file
BIN
lab5/src/assets/images/bro.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
lab5/src/assets/images/fire.jpg
Normal file
BIN
lab5/src/assets/images/fire.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
BIN
lab5/src/assets/images/harry.jpg
Normal file
BIN
lab5/src/assets/images/harry.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
BIN
lab5/src/assets/images/noimage.png
Normal file
BIN
lab5/src/assets/images/noimage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
lab5/src/assets/images/nolan.jpg
Normal file
BIN
lab5/src/assets/images/nolan.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
40
lab5/src/components/api/ApiClient.js
Normal file
40
lab5/src/components/api/ApiClient.js
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
|
export class HttpError extends Error {
|
||||||
|
constructor(message = '') {
|
||||||
|
super(message);
|
||||||
|
this.name = 'HttpError';
|
||||||
|
Object.setPrototypeOf(this, new.target.prototype);
|
||||||
|
toast.error(message, { id: 'HttpError' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function responseHandler(response) {
|
||||||
|
if (response.status === 200 || response.status === 201) {
|
||||||
|
const data = response?.data;
|
||||||
|
if (!data) {
|
||||||
|
throw new HttpError('API Error. No data!');
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
throw new HttpError(`API Error! Invalid status code ${response.status}!`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function responseErrorHandler(error) {
|
||||||
|
if (error === null) {
|
||||||
|
throw new Error('Unrecoverable error!! Error is null!');
|
||||||
|
}
|
||||||
|
toast.error(error.message, { id: 'AxiosError' });
|
||||||
|
return Promise.reject(error.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ApiClient = axios.create({
|
||||||
|
baseURL: 'http://localhost:8081/',
|
||||||
|
timeout: '3000',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
ApiClient.interceptors.response.use(responseHandler, responseErrorHandler);
|
||||||
33
lab5/src/components/api/ApiService.js
Normal file
33
lab5/src/components/api/ApiService.js
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import { ApiClient } from './ApiClient';
|
||||||
|
|
||||||
|
class ApiService {
|
||||||
|
constructor(url) {
|
||||||
|
this.url = url;
|
||||||
|
}
|
||||||
|
|
||||||
|
async getAll(expand) {
|
||||||
|
return ApiClient.get(`${this.url}${expand || ''}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
async get(id, expand) {
|
||||||
|
return ApiClient.get(`${this.url}/${id}${expand || ''}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
async create(body) {
|
||||||
|
return ApiClient.post(this.url, body);
|
||||||
|
}
|
||||||
|
|
||||||
|
async update(id, body) {
|
||||||
|
return ApiClient.put(`${this.url}/${id}`, body);
|
||||||
|
}
|
||||||
|
|
||||||
|
async delete(id) {
|
||||||
|
return ApiClient.delete(`${this.url}/${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
async deleteTable() {
|
||||||
|
return ApiClient.delete(`${this.url}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ApiService;
|
||||||
5
lab5/src/components/filmLogo/FilmLogo.css
Normal file
5
lab5/src/components/filmLogo/FilmLogo.css
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
#normRaz {
|
||||||
|
width: 400px;
|
||||||
|
height: 600px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
27
lab5/src/components/filmLogo/FilmLogo.jsx
Normal file
27
lab5/src/components/filmLogo/FilmLogo.jsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { Col, Image } from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import useLinesItem from '../lines/hooks/LinesItemHook';
|
||||||
|
import imgPlaceholder from '../../assets/200.png';
|
||||||
|
import './FilmLogo.css';
|
||||||
|
|
||||||
|
const FilmLogo = ({ id }) => {
|
||||||
|
const { item } = useLinesItem(id);
|
||||||
|
const imag = item.image ?? imgPlaceholder;
|
||||||
|
return (
|
||||||
|
<Col xs={12} sm={6} lg={3}
|
||||||
|
className="w-auto h-auto m-2"
|
||||||
|
>
|
||||||
|
<Link to={`/selected/${id}`} >
|
||||||
|
<Image src={imag} fluid alt="" id="normRaz"/>
|
||||||
|
</Link>
|
||||||
|
</Col>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
FilmLogo.propTypes = {
|
||||||
|
logoName: PropTypes.string,
|
||||||
|
id: PropTypes.number,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FilmLogo;
|
||||||
8
lab5/src/components/filmRow/FilmRow.css
Normal file
8
lab5/src/components/filmRow/FilmRow.css
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.FilmLogoRow{
|
||||||
|
min-width: 300px;
|
||||||
|
min-height: 500px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
#name {
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
46
lab5/src/components/filmRow/FilmRow.jsx
Normal file
46
lab5/src/components/filmRow/FilmRow.jsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import {
|
||||||
|
Row, Col, Button,
|
||||||
|
} from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import FilmLogo from '../filmLogo/FilmLogo.jsx';
|
||||||
|
import useLinesItem from '../lines/hooks/LinesItemHook';
|
||||||
|
import Genre from '../genre/Genre.jsx';
|
||||||
|
import './FilmRow.css';
|
||||||
|
|
||||||
|
const FilmRow = ({ id }) => {
|
||||||
|
const { item } = useLinesItem(id);
|
||||||
|
return (
|
||||||
|
<Row className="m-2 my-5">
|
||||||
|
<Col xs={12} lg={3}>
|
||||||
|
<FilmLogo id={Number(id)}/>
|
||||||
|
</Col>
|
||||||
|
<Col xs={12} lg={6} xl={8} className="d-flex flex-column p-0 justify-content-center">
|
||||||
|
<div className="d-flex p-1 ps-0 justify-content-center mw-100 mh-100 mx-4">
|
||||||
|
<p className="text-white fw-normal font-family-Bayon text-center" id="name">
|
||||||
|
{item.name}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex p-1 ps-0 justify-content-center mw-100 mh-100 mx-4">
|
||||||
|
<p className="text-white fs-5 fw-normal font-family-Bayon text-center text-break">
|
||||||
|
{item.descp.substring(0, 192)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex p-2 ps-0 pb-2 justify-content-center mw-100 mh-100">
|
||||||
|
<Genre id={Number(item.genreId)}/>
|
||||||
|
</div>
|
||||||
|
<Button as={Link} to={`/selected/${item.id}`} className="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3 align-items-center">
|
||||||
|
Перейти
|
||||||
|
</Button>
|
||||||
|
<Button className="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3 align-items-center">
|
||||||
|
Смотреть позже
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
FilmRow.propTypes = {
|
||||||
|
id: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FilmRow;
|
||||||
3
lab5/src/components/footer/Footer.css
Normal file
3
lab5/src/components/footer/Footer.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.bg-dark-blue{
|
||||||
|
background-color: #2B82CF;
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user