Marselchii/PIbd-21_Sagirov_M.M._Internet_Programming
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Лаба 2

Browse Source
This commit is contained in:
Marselchii 2023-11-10 09:43:38 +04:00
commit 7e4c3eac89
17 changed files with 1182 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
lab2/Laboratornaya_2.docx Normal file
View File

Binary file not shown.

67
lab2/add.html Normal file
View File

@ -0,0 +1,67 @@
<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-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>
<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-start form-group">
<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="Язык">
<label for="descriptionTextarea"><span class="text-white m-2">Описание</span></label>
<textarea class="form-control w-100 m-2" id="descriptionTextarea" rows="3"></textarea>
<label for="actorsTextarea"><span class="text-white m-2">Актеры</span></label>
<textarea class="form-control w-100 m-2" id="actorsTextarea" rows="3"></textarea>
<label for="genresTextarea"><span class="text-white m-2">Жанры</span></label>
<textarea class="form-control w-100 m-2" id="genresTextarea" rows="2"></textarea>
<div class="form-row w-100">
<div class="form-group col-6">
<label for="movieFile"><span class="text-white m-2">Файл фильма</span></label>
<input type="file" class="form-control-file m-2" id="movieFile">
</div>
<label for="movieImg"><span class="text-white m-2">Обложка фильма</span></label>
<div class="form-group col-6">
<img src="images/noimage.png" class="m-2">
<input type="file" class="form-control-file m-2" id="movieImg">
</div>
</div>
<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>

65
lab2/admin.html Normal file
View File

@ -0,0 +1,65 @@
<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-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">
<article>
<div class="row m-5">
<table class="table bg-white">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Название</th>
<th scope="col">Редактировать</th>
<th scope="col">Удалить</th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr>
<th scope="row">1</th>
<td>Огонь</td>
<th scope="col"><a class="btn bg-cyan" href="add.html">Редактировать</a></th>
<th scope="col"><a class="btn bg-cyan">Удалить</a></th>
</tr>
<tr>
<th scope="row">2</th>
<td>Брат</td>
<th scope="col"><a class="btn bg-cyan" href="add.html">Редактировать</a></th>
<th scope="col"><a class="btn bg-cyan">Удалить</a></th>
</tr>
<tr>
<th scope="row">3</th>
<td>Гарри Поттер</td>
<th scope="col"><a class="btn bg-cyan" href="add.html">Редактировать</a></th>
<th scope="col"><a class="btn bg-cyan">Удалить</a></th>
</tr>
</tbody>
</table>
<div class="col"><a class="btn bg-cyan" href="add.html">Добавить фильм</a></div>
</div>
</article>
</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>

101
lab2/favourite.html Normal file
View 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
lab2/images/bro.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 KiB

BIN
lab2/images/fire.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 322 KiB

BIN
lab2/images/harry.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 262 KiB

BIN
lab2/images/noimage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
lab2/images/nolan.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 169 KiB

78
lab2/index.html Normal file
View File

@ -0,0 +1,78 @@
<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>
<section class="d-flex justify-content-evenly ">
<div class="row p-2 m-2 align-items-center justify-content-center">
<a href="selected.html" class="col-xs-12 col-sm-6 col-lg-3 w-auto h-auto m-2"><img src="images/fire.jpg" class="img-fluid" alt=""></a>
<a href="selected.html" class="col-xs-12 col-sm-6 col-lg-3 w-auto h-auto m-2"><img src="images/nolan.jpg" class="img-fluid" alt=""></a>
<a href="selected.html" class="col-xs-12 col-sm-6 col-lg-3 w-auto h-auto m-2"><img src="images/bro.jpg" class="img-fluid" alt=""></a>
<a href="selected.html" class="col-xs-12 col-sm-6 col-lg-3 w-auto h-auto m-2"><img src="images/harry.jpg" class="img-fluid" alt=""></a>
</div>
</section>
<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 src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

59
lab2/login.html Normal file
View 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>

552
lab2/package-lock.json generated Normal file
View File

@ -0,0 +1,552 @@
{
"name": "web",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "web",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"bootstrap": "^5.2.1",
"font-awesome": "^4.7.0"
},
"devDependencies": {
"http-server": "14.1 .1 "
}
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/async": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
"integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
"dev": true,
"dependencies": {
"lodash": "^4.17.14"
}
},
"node_modules/basic-auth": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
"integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
"dev": true,
"dependencies": {
"safe-buffer": "5.1.2"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/bootstrap": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.1.tgz",
"integrity": "sha512-UQi3v2NpVPEi1n35dmRRzBJFlgvWHYwyem6yHhuT6afYF+sziEt46McRbT//kVXZ7b1YUYEVGdXEH74Nx3xzGA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"peerDependencies": {
"@popperjs/core": "^2.11.6"
}
},
"node_modules/call-bind": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
"integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
"dev": true,
"dependencies": {
"function-bind": "^1.1.2",
"get-intrinsic": "^1.2.1",
"set-function-length": "^1.1.1"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"dependencies": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"node_modules/corser": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
"integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==",
"dev": true,
"engines": {
"node": ">= 0.4.0"
}
},
"node_modules/debug": {
"version": "3.2.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
"dev": true,
"dependencies": {
"ms": "^2.1.1"
}
},
"node_modules/define-data-property": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
"integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
"dev": true,
"dependencies": {
"get-intrinsic": "^1.2.1",
"gopd": "^1.0.1",
"has-property-descriptors": "^1.0.0"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/eventemitter3": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
"dev": true
},
"node_modules/follow-redirects": {
"version": "1.15.3",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
"integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
"dev": true,
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/font-awesome": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
"integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==",
"engines": {
"node": ">=0.10.3"
}
},
"node_modules/function-bind": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
"dev": true,
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/get-intrinsic": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
"integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
"dev": true,
"dependencies": {
"function-bind": "^1.1.2",
"has-proto": "^1.0.1",
"has-symbols": "^1.0.3",
"hasown": "^2.0.0"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/gopd": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
"integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
"dev": true,
"dependencies": {
"get-intrinsic": "^1.1.3"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/has-property-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
"integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
"dev": true,
"dependencies": {
"get-intrinsic": "^1.2.2"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/has-proto": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
"integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
"dev": true,
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/has-symbols": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
"dev": true,
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/hasown": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
"integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
"dev": true,
"dependencies": {
"function-bind": "^1.1.2"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/he": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true,
"bin": {
"he": "bin/he"
}
},
"node_modules/html-encoding-sniffer": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
"integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
"dev": true,
"dependencies": {
"whatwg-encoding": "^2.0.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/http-proxy": {
"version": "1.18.1",
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
"integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
"dev": true,
"dependencies": {
"eventemitter3": "^4.0.0",
"follow-redirects": "^1.0.0",
"requires-port": "^1.0.0"
},
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/http-server": {
"version": "14.1.1",
"resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
"integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
"dev": true,
"dependencies": {
"basic-auth": "^2.0.1",
"chalk": "^4.1.2",
"corser": "^2.0.1",
"he": "^1.2.0",
"html-encoding-sniffer": "^3.0.0",
"http-proxy": "^1.18.1",
"mime": "^1.6.0",
"minimist": "^1.2.6",
"opener": "^1.5.1",
"portfinder": "^1.0.28",
"secure-compare": "3.0.1",
"union": "~0.5.0",
"url-join": "^4.0.1"
},
"bin": {
"http-server": "bin/http-server"
},
"engines": {
"node": ">=12"
}
},
"node_modules/iconv-lite": {
"version": "0.6.3",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
"dev": true,
"dependencies": {
"safer-buffer": ">= 2.1.2 < 3.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
"node_modules/mime": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
"dev": true,
"bin": {
"mime": "cli.js"
},
"engines": {
"node": ">=4"
}
},
"node_modules/minimist": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
"dev": true,
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/mkdirp": {
"version": "0.5.6",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
"dev": true,
"dependencies": {
"minimist": "^1.2.6"
},
"bin": {
"mkdirp": "bin/cmd.js"
}
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
"dev": true
},
"node_modules/object-inspect": {
"version": "1.13.1",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
"integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
"dev": true,
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/opener": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
"integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
"dev": true,
"bin": {
"opener": "bin/opener-bin.js"
}
},
"node_modules/portfinder": {
"version": "1.0.32",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
"integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
"dev": true,
"dependencies": {
"async": "^2.6.4",
"debug": "^3.2.7",
"mkdirp": "^0.5.6"
},
"engines": {
"node": ">= 0.12.0"
}
},
"node_modules/qs": {
"version": "6.11.2",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
"integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
"dev": true,
"dependencies": {
"side-channel": "^1.0.4"
},
"engines": {
"node": ">=0.6"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/requires-port": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
"dev": true
},
"node_modules/safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
"dev": true
},
"node_modules/safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true
},
"node_modules/secure-compare": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
"integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==",
"dev": true
},
"node_modules/set-function-length": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
"integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
"dev": true,
"dependencies": {
"define-data-property": "^1.1.1",
"get-intrinsic": "^1.2.1",
"gopd": "^1.0.1",
"has-property-descriptors": "^1.0.0"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/side-channel": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
"dev": true,
"dependencies": {
"call-bind": "^1.0.0",
"get-intrinsic": "^1.0.2",
"object-inspect": "^1.9.0"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"dependencies": {
"has-flag": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/union": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
"integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
"dev": true,
"dependencies": {
"qs": "^6.4.0"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/url-join": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
"integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
"dev": true
},
"node_modules/whatwg-encoding": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
"integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
"dev": true,
"dependencies": {
"iconv-lite": "0.6.3"
},
"engines": {
"node": ">=12"
}
}
}
}

18
lab2/package.json Normal file
View File

@ -0,0 +1,18 @@
{
"name": "web",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "http-server -p 3000 ./"
},
"devDependencies": {
"http-server": "14.1 .1 "
},
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^5.2.1",
"font-awesome": "^4.7.0"
}
}

101
lab2/search.html Normal file
View 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
lab2/selected.html Normal file
View 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
lab2/signup.html Normal file
View 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
lab2/style.css Normal file
View 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;
}