Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
ce0cac64b5 | ||
|
958a0a9fbb | ||
|
|
e300caab10 |
12
.gitignore
vendored
Normal file
12
.gitignore
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
# Node.js dependencies
|
||||
node_modules/
|
||||
|
||||
# Build output
|
||||
dist/
|
||||
build/
|
||||
out/
|
||||
|
||||
# Environment variables
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
@@ -1,2 +0,0 @@
|
||||
# 2Course-Internet-Programming
|
||||
Лабораторные работы по предмету: Интернет-программирование.
|
||||
@@ -1,8 +0,0 @@
|
||||
.film-collection {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.film {
|
||||
width: 30%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
.film {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.film img {
|
||||
width: 500px;
|
||||
height: auto;
|
||||
margin: 20px auto;
|
||||
}
|
||||
25
css/help.css
25
css/help.css
@@ -1,25 +0,0 @@
|
||||
form {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 200px;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
color: #ffff;
|
||||
background-color: #493c2f;
|
||||
border-width: 1px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
139
css/style.css
139
css/style.css
@@ -1,139 +0,0 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #493c2f;
|
||||
color: #ffffff;
|
||||
padding: 10px 10px 20px 10px;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navigation li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navigation li a {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: #493c2f;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.dropdown li a {
|
||||
padding: 10px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navigation li:hover .dropdown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #ffffff;
|
||||
margin: 0 20%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.film-collection {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.container {
|
||||
margin: 0 5%;
|
||||
}
|
||||
.film-collection {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.film-collection > * {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.film {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.film img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
background-color: #493c2f;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: solid;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color:rgb(192, 192, 192);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin-top: 5px;
|
||||
}
|
||||
19
db.json
Normal file
19
db.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"movies": [
|
||||
{
|
||||
"id": "ebed",
|
||||
"title": "ФФФФФФФФФфф",
|
||||
"imageUrl": "https://avatars.mds.yandex.net/i?id=8e077526d7dfae9d31827e81fea4e74c_l-5233298-images-thumbs&n=13"
|
||||
},
|
||||
{
|
||||
"id": "8fd8",
|
||||
"title": "ittifaq",
|
||||
"imageUrl": "https://avatars.mds.yandex.net/i?id=17b83f995e81ac7426335d0659a050263d567f34-13135934-images-thumbs&n=13"
|
||||
},
|
||||
{
|
||||
"id": "5267",
|
||||
"title": "priora",
|
||||
"imageUrl": "https://ir-3.ozone.ru/s3/multimedia-8/w1200/6738078680.jpg"
|
||||
}
|
||||
]
|
||||
}
|
||||
15
description
15
description
@@ -1,15 +0,0 @@
|
||||
Лабораторная работа №1.
|
||||
Проектирование и верстка сайта
|
||||
1. Для сайта в выбранной области (см. вариант задания) придумать не
|
||||
менее 5 страниц с разным назначением. Представить перечень страниц
|
||||
с небольшим описанием их назначения.
|
||||
2. Продумать основной стиль сайта и в свободной форме описать его:
|
||||
основные цвета, логотипы, стилевые особенности и т. д.
|
||||
3. Подготовить и сверстать содержимое страниц. В данной работе следует
|
||||
сделать упор только на содержимом страниц и стилевом оформление
|
||||
этого содержимого. Структурные элементы сайта будут формироваться
|
||||
в следующей работе. Не нужно делать меню, подвал, создавать сетку с
|
||||
блоками и т. д. В данной работе можно использовать линейный порядок
|
||||
элементов.
|
||||
|
||||
Вариант: Онлайн-кинотеатр.
|
||||
12
eslint.config.mjs
Normal file
12
eslint.config.mjs
Normal file
@@ -0,0 +1,12 @@
|
||||
import globals from "globals";
|
||||
import pluginJs from "@eslint/js";
|
||||
import tseslint from "typescript-eslint";
|
||||
|
||||
|
||||
/** @type {import('eslint').Linter.Config[]} */
|
||||
export default [
|
||||
{files: ["**/*.{js,mjs,cjs,ts}"]},
|
||||
{languageOptions: { globals: globals.browser }},
|
||||
pluginJs.configs.recommended,
|
||||
...tseslint.configs.recommended,
|
||||
];
|
||||
47
film_database.json
Normal file
47
film_database.json
Normal file
@@ -0,0 +1,47 @@
|
||||
{
|
||||
"Movies": [
|
||||
{
|
||||
"id": "ebed",
|
||||
"title_id": "ebed",
|
||||
"image_id": "ebed"
|
||||
},
|
||||
{
|
||||
"id": "8fd8",
|
||||
"title_id": "8fd8",
|
||||
"image_id": "8fd8"
|
||||
},
|
||||
{
|
||||
"id": "63cb",
|
||||
"title_id": "63cb",
|
||||
"image_id": "63cb"
|
||||
}
|
||||
],
|
||||
"Title": [
|
||||
{
|
||||
"id": "ebed",
|
||||
"title": "ФФФФФФФФФфф"
|
||||
},
|
||||
{
|
||||
"id": "8fd8",
|
||||
"title": "ittifaq"
|
||||
},
|
||||
{
|
||||
"id": "63cb",
|
||||
"title": "priora"
|
||||
}
|
||||
],
|
||||
"Image": [
|
||||
{
|
||||
"id": "ebed",
|
||||
"imageUrl": "https://avatars.mds.yandex.net/i?id=8e077526d7dfae9d31827e81fea4e74c_l-5233298-images-thumbs&n=13"
|
||||
},
|
||||
{
|
||||
"id": "8fd8",
|
||||
"imageUrl": "https://avatars.mds.yandex.net/i?id=17b83f995e81ac7426335d0659a050263d567f34-13135934-images-thumbs&n=13"
|
||||
},
|
||||
{
|
||||
"id": "63cb",
|
||||
"imageUrl": "https://ir-3.ozone.ru/s3/multimedia-8/w1200/6738078680.jpg"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>О нас</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/about.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div>
|
||||
<div class="logo-name">
|
||||
<img src="../images/4k.jpg" id="logo">
|
||||
<h1>Онлайн кинотеатр</h1>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="navigation">
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Фильмы и сериалы</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="catalog.html">Ужастики</a></li>
|
||||
<li><a href="catalog.html">Аниме</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">О нас</a></li>
|
||||
<li><a href="help.html">Помощь</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<h2>Онлайн кинотеатр</h2>
|
||||
<p class="indent">Мы рады приветствовать вас на данном сайте</p>
|
||||
<p>Если есть предложения для улучшения работы сайта, пишите на почту <strong><en>ilyasvaliylov@gmail.com</en></strong></p>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<p>@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К йоууу</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,103 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Каталог фильмов</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/catalog.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div>
|
||||
<div class="logo-name">
|
||||
<img src="../images/4k.jpg" id="logo">
|
||||
<h1>Онлайн кинотеатр</h1>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="navigation">
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Фильмы и сериалы</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="catalog.html">Ужастики</a></li>
|
||||
<li><a href="catalog.html">Аниме</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">О нас</a></li>
|
||||
<li><a href="help.html">Помощь</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div>
|
||||
<h2>Каталог фильмов и сериалов</h2>
|
||||
</div>
|
||||
|
||||
<div class="film-collection">
|
||||
<div class="film">
|
||||
<figure>
|
||||
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
|
||||
<img src="../images/film.jpg" >
|
||||
</figure>
|
||||
</div>
|
||||
<div class="film">
|
||||
<figure>
|
||||
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
|
||||
<img src="../images/film.jpg" >
|
||||
</figure>
|
||||
</div>
|
||||
<div class="film">
|
||||
<figure>
|
||||
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
|
||||
<img src="../images/film.jpg" >
|
||||
</figure>
|
||||
</div>
|
||||
<div class="film">
|
||||
<figure>
|
||||
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
|
||||
<img src="../images/film.jpg" >
|
||||
</figure>
|
||||
</div>
|
||||
<div class="film">
|
||||
<figure>
|
||||
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
|
||||
<img src="../images/film.jpg" >
|
||||
</figure>
|
||||
</div>
|
||||
<div class="film">
|
||||
<figure>
|
||||
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
|
||||
<img src="../images/film.jpg" >
|
||||
</figure>
|
||||
</div>
|
||||
<div class="film">
|
||||
<figure>
|
||||
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
|
||||
<img src="../images/film.jpg" >
|
||||
</figure>
|
||||
</div>
|
||||
<div class="film">
|
||||
<figure>
|
||||
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
|
||||
<img src="../images/film.jpg" >
|
||||
</figure>
|
||||
</div>
|
||||
<div class="film">
|
||||
<figure>
|
||||
<figcaption><a href="film.html" class="films">Ловцы забытых голосов (2011)</a></figcaption>
|
||||
<img src="../images/film.jpg" >
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<p>@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К йоууу</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,57 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Book</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/film.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div>
|
||||
<div class="logo-name">
|
||||
<img src="../images/4k.jpg" id="logo">
|
||||
<h1>Онлайн кинотеатр</h1>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="navigation">
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Фильмы и сериалы</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="catalog.html">Ужастики</a></li>
|
||||
<li><a href="catalog.html">Аниме</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">О нас</a></li>
|
||||
<li><a href="help.html">Помощь</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="film">
|
||||
<h2>Ловцы забытых голосов (2011)</h2>
|
||||
<p>Юная Асуна живет с вечно пропадающей на работе матерью и после школы любит забираться на скалу,
|
||||
чтобы послушать радио, доставшееся от умершего отца. Однажды в этом своем секретном месте она знакомится
|
||||
с загадочным юношей Сюном, который говорит, что пришел из далекой страны Агартхи. Эта встреча становится
|
||||
началом полного приключений путешествия в волшебный мир, где Асуне предстоит столкнуться с потерями и обрести надежду.</p>
|
||||
<img src="../images/film.jpg">
|
||||
<ul class="film-container">
|
||||
<li>Год производства 2011</li><hr>
|
||||
<li>Жанр аниме, мультфильм, драма, приключения</li><hr>
|
||||
<li>Режиссер Макото Синкай</li><hr>
|
||||
<li>Сборы в мире $600 486</li>
|
||||
</ul>
|
||||
<p><a href="https://www.kinopoisk.ru/film/581102/">Смотреть фильм</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<p>@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К йоууу</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,48 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Помощь</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/help.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div>
|
||||
<div class="logo-name">
|
||||
<img src="../images/4k.jpg" id="logo">
|
||||
<h1>Онлайн кинотеатр</h1>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="navigation">
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Фильмы и сериалы</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="catalog.html">Ужастики</a></li>
|
||||
<li><a href="catalog.html">Аниме</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">О нас</a></li>
|
||||
<li><a href="help.html">Помощь</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<h2>Помощь и поддержка</h2>
|
||||
<p>Задавайте вопросы и мы вам ответим<p>
|
||||
<form>
|
||||
<textarea></textarea>
|
||||
<button>Отправить</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<p>@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К йоууу</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,80 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Онлайн кинотеатр</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div>
|
||||
<div class="logo-name">
|
||||
<img src="../images/4k.jpg" id="logo">
|
||||
<h1>Онлайн кинотеатр</h1>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="navigation">
|
||||
<li><a href="catalog.html">Фильмы и сериалы</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="catalog.html">Ужастики</a></li>
|
||||
<li><a href="catalog.html">Аниме</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">О нас</a></li>
|
||||
<li><a href="help.html">Помощь</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div>
|
||||
<h2>Добро пожаловать в онлайн кинотеатр</h2>
|
||||
<p>Смотрите фильмы бесплатно и без ограничений.</p>
|
||||
<h2>Премьеры недели</h2>
|
||||
</div>
|
||||
|
||||
<div class="film-collection">
|
||||
<div class="film">
|
||||
<h4>Ловцы забытых голосов</h4>
|
||||
<figure>
|
||||
<img src="../images/film.jpg">
|
||||
<figcaption><a href="film.html" target="_blank">Смотреть</a></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="film">
|
||||
<h4>Ловцы забытых голосов</h4>
|
||||
<figure>
|
||||
<img src="../images/film.jpg">
|
||||
<figcaption><a href="film.html" target="_blank">Смотреть</a></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="film">
|
||||
<h4>Ловцы забытых голосов</h4>
|
||||
<figure>
|
||||
<img src="../images/film.jpg">
|
||||
<figcaption><a href="film.html" target="_blank">Смотреть</a></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="film">
|
||||
<h4>Ловцы забытых голосов</h4>
|
||||
<figure>
|
||||
<img src="../images/film.jpg">
|
||||
<figcaption><a href="film.html" target="_blank">Смотреть</a></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<p>@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К йоууу</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
3197
package-lock.json
generated
Normal file
3197
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
34
package.json
Normal file
34
package.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "2course-internet-programming",
|
||||
"version": "1.0.0",
|
||||
"description": "Project of labworks to subject Internet-Programming",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint src --fix",
|
||||
"format": "prettier --write src/**/*.{js,css,html}",
|
||||
"preview": "vite preview",
|
||||
"backend": "json-server db.json -p 3000"
|
||||
},
|
||||
|
||||
"author": "IlyasValiulov",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.22.0",
|
||||
"eslint": "^9.22.0",
|
||||
"eslint-config-prettier": "^10.1.1",
|
||||
"eslint-plugin-prettier": "^5.2.3",
|
||||
"globals": "^16.0.0",
|
||||
"json-server": "^1.0.0-beta.3",
|
||||
"prettier": "^3.5.3",
|
||||
"sass": "^1.85.1",
|
||||
"vite": "^6.2.1"
|
||||
},
|
||||
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"bootstrap": "^5.3.3"
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 207 KiB After Width: | Height: | Size: 207 KiB |
BIN
report.docx
BIN
report.docx
Binary file not shown.
55
src/about.html
Normal file
55
src/about.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>О нас</title>
|
||||
<script type="module" src="js/main.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="container mt-4 mb-4">
|
||||
<div>
|
||||
<div class="row mb-2 align-items-center">
|
||||
<img src="../images/4k.jpg" id="logo" class="col-auto"/>
|
||||
<h1 class="col display-1">Онлайн кинотеатр</h1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<nav>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a href="index.html" class="nav-link">Главная</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="catalog.html" class="nav-link dropdown-toggle" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Фильмы и сериалы</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
||||
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Ужастики</a></li>
|
||||
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Аниме</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item"><a href="about.html" class="nav-link">О нас</a></li>
|
||||
<li class="nav-item"><a href="help.html" class="nav-link">Помощь</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<h2 class="mb-3">Онлайн кинотеатр</h2>
|
||||
<p class="mb-0">Мы рады приветствовать вас на данном сайте</p>
|
||||
<p>
|
||||
Если есть предложения для улучшения работы сайта, пишите на почту
|
||||
<strong><en>ilyasvaliylov@gmail.com</en></strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<footer class="container mt-auto">
|
||||
<div class="text-center">
|
||||
<p>
|
||||
@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4Кйоууу
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
138
src/catalog.html
Normal file
138
src/catalog.html
Normal file
@@ -0,0 +1,138 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Каталог фильмов</title>
|
||||
<script type="module" src="js/main.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="container mt-4 mb-4">
|
||||
<div>
|
||||
<div class="row mb-2 align-items-center">
|
||||
<img src="../images/4k.jpg" id="logo" class="col-auto"/>
|
||||
<h1 class="col display-1">Онлайн кинотеатр</h1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<nav>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a href="index.html" class="nav-link">Главная</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="catalog.html" class="nav-link dropdown-toggle" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Фильмы и сериалы</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
||||
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Ужастики</a></li>
|
||||
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Аниме</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item"><a href="about.html" class="nav-link">О нас</a></li>
|
||||
<li class="nav-item"><a href="help.html" class="nav-link">Помощь</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="mb-3">
|
||||
<h2>Каталог фильмов и сериалов</h2>
|
||||
</div>
|
||||
|
||||
<div class="d-md-flex flex-wrap justify-content-between">
|
||||
<div class="w-25 me-3 mb-4">
|
||||
<figure>
|
||||
<figcaption class="mb-2 text-center">
|
||||
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
|
||||
</figcaption>
|
||||
<img src="../images/film.jpg" class="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="w-25 me-3 mb-4">
|
||||
<figure>
|
||||
<figcaption class="mb-2 text-center">
|
||||
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
|
||||
</figcaption>
|
||||
<img src="../images/film.jpg" class="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="w-25 me-3 mb-4">
|
||||
<figure>
|
||||
<figcaption class="mb-2 text-center">
|
||||
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
|
||||
</figcaption>
|
||||
<img src="../images/film.jpg" class="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="w-25 me-3 mb-4">
|
||||
<figure>
|
||||
<figcaption class="mb-2 text-center">
|
||||
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
|
||||
</figcaption>
|
||||
<img src="../images/film.jpg" class="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="w-25 me-3 mb-4">
|
||||
<figure>
|
||||
<figcaption class="mb-2 text-center">
|
||||
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
|
||||
</figcaption>
|
||||
<img src="../images/film.jpg" class="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="w-25 me-3 mb-4">
|
||||
<figure>
|
||||
<figcaption class="mb-2 text-center">
|
||||
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
|
||||
</figcaption>
|
||||
<img src="../images/film.jpg" class="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="w-25 me-3 mb-4">
|
||||
<figure>
|
||||
<figcaption class="mb-2 text-center">
|
||||
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
|
||||
</figcaption>
|
||||
<img src="../images/film.jpg" class="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="w-25 me-3 mb-4">
|
||||
<figure>
|
||||
<figcaption class="mb-2 text-center">
|
||||
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
|
||||
</figcaption>
|
||||
<img src="../images/film.jpg" class="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="w-25 me-3 mb-4">
|
||||
<figure>
|
||||
<figcaption class="mb-2 text-center">
|
||||
<a href="film.html" class="fs-5 link-dark link-underline link-underline-opacity-0">Ловцы забытых голосов (2011)</a>
|
||||
</figcaption>
|
||||
<img src="../images/film.jpg" class="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="container mt-auto">
|
||||
<div class="text-center">
|
||||
<p>
|
||||
@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К
|
||||
йоууу
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
36
src/edit.html
Normal file
36
src/edit.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Редактирование фильма</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-4">
|
||||
<h1 class="mb-4" id="formTitle">Добавить новый фильм</h1>
|
||||
|
||||
<form id="movieForm">
|
||||
<div class="mb-3">
|
||||
<label for="movieTitle" class="form-label">Название фильма</label>
|
||||
<input type="text" class="form-control" id="movieTitle" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="movieImage" class="form-label">Ссылка на изображение</label>
|
||||
<input type="url" class="form-control" id="movieImage" placeholder="https://example.com/image.jpg">
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
<button type="submit" class="btn btn-primary">Сохранить</button>
|
||||
<a href="help.html" class="btn btn-secondary">Отмена</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- <script src="js/model.js"></script>
|
||||
<script src="js/view.js"></script>
|
||||
<script src="js/controller.js"></script> -->
|
||||
<script type="module" src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
74
src/film.html
Normal file
74
src/film.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Film</title>
|
||||
<script type="module" src="js/main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="container mt-4 mb-4">
|
||||
<div>
|
||||
<div class="row mb-2 align-items-center">
|
||||
<img src="../images/4k.jpg" id="logo" class="col-auto"/>
|
||||
<h1 class="col display-1">Онлайн кинотеатр</h1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<nav>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a href="index.html" class="nav-link">Главная</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="catalog.html" class="nav-link dropdown-toggle" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Фильмы и сериалы</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
||||
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Ужастики</a></li>
|
||||
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Аниме</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item"><a href="about.html" class="nav-link">О нас</a></li>
|
||||
<li class="nav-item"><a href="help.html" class="nav-link">Помощь</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="film">
|
||||
<h2 class="card-title mb-4">Ловцы забытых голосов (2011)</h2>
|
||||
<p class="card-text mb-4">
|
||||
Юная Асуна живет с вечно пропадающей на работе матерью и после школы
|
||||
любит забираться на скалу, чтобы послушать радио, доставшееся от
|
||||
умершего отца. Однажды в этом своем секретном месте она знакомится с
|
||||
загадочным юношей Сюном, который говорит, что пришел из далекой страны
|
||||
Агартхи. Эта встреча становится началом полного приключений
|
||||
путешествия в волшебный мир, где Асуне предстоит столкнуться с
|
||||
потерями и обрести надежду.
|
||||
</p>
|
||||
<img src="../images/film.jpg" class="img-fluid w-25 ms-4 mb-4" />
|
||||
<ul class="film-container">
|
||||
<li>Год производства 2011</li>
|
||||
<hr />
|
||||
<li>Жанр аниме, мультфильм, драма, приключения</li>
|
||||
<hr />
|
||||
<li>Режиссер Макото Синкай</li>
|
||||
<hr />
|
||||
<li>Сборы в мире $600 486</li>
|
||||
</ul>
|
||||
<p>
|
||||
<a href="https://www.kinopoisk.ru/film/581102/">Смотреть фильм</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="container mt-auto">
|
||||
<div class="text-center">
|
||||
<p>
|
||||
@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К йоууу
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
108
src/help.html
Normal file
108
src/help.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Помощь</title>
|
||||
<!-- <link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="npcss/help.css" /> -->
|
||||
<!-- <script type="module" src="js/main.js"></script> -->
|
||||
</head>
|
||||
<body>
|
||||
<header class="container mt-4 mb-4">
|
||||
<div>
|
||||
<div class="row mb-2 align-items-center">
|
||||
<img src="../images/4k.jpg" id="logo" class="col-auto"/>
|
||||
<h1 class="col display-1">Онлайн кинотеатр</h1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<nav>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a href="index.html" class="nav-link">Главная</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="catalog.html" class="nav-link dropdown-toggle" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Фильмы и сериалы</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
||||
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Ужастики</a></li>
|
||||
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Аниме</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item"><a href="about.html" class="nav-link">О нас</a></li>
|
||||
<li class="nav-item"><a href="help.html" class="nav-link">Помощь</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- <div class="container">
|
||||
<h2>Добавить фильм</h2>
|
||||
<p></p>
|
||||
|
||||
<form id="movieForm">
|
||||
<div class="mb-3">
|
||||
<label for="movieTitle" class="form-label">Название фильма</label>
|
||||
<input type="text" class="form-control" id="movieTitle" placeholder="Введите название фильма" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="movieImage" class="form-label">Загрузите изображение</label>
|
||||
<input type="file" class="form-control" id="movieImage" accept="image/*" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Добавить фильм</button>
|
||||
</form>
|
||||
|
||||
<div id="movieContainer" class="row mt-5"></div>
|
||||
</div> -->
|
||||
|
||||
<div class="container mt-4">
|
||||
<h1 class="mb-4">Мои фильмы</h1>
|
||||
|
||||
<div class="mb-4">
|
||||
<a href="edit.html" class="btn btn-success">Добавить новый фильм</a>
|
||||
</div>
|
||||
|
||||
<div id="movieContainer" class="row"></div>
|
||||
</div>
|
||||
|
||||
<footer class="container mt-auto">
|
||||
<div class="text-center">
|
||||
<p>
|
||||
@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4Кйоууу
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- <script src="js/model.js"></script>
|
||||
<script src="js/view.js"></script>
|
||||
<script src="js/controller.js"></script> -->
|
||||
<script type="module" src="js/main.js"></script>
|
||||
|
||||
<!-- <script>
|
||||
document.getElementById('movieForm').addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const title = document.getElementById('movieTitle').value;
|
||||
const imageFile = document.getElementById('movieImage').files[0];
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'col-md-4';
|
||||
|
||||
const cardInner = `
|
||||
<div class="card">
|
||||
<img src="${URL.createObjectURL(imageFile)}" class="card-img-top" alt="${title}">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">${title}</h5>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
card.innerHTML = cardInner;
|
||||
|
||||
document.getElementById('movieContainer').appendChild(card);
|
||||
|
||||
document.getElementById('movieForm').reset();
|
||||
});
|
||||
</script> -->
|
||||
</body>
|
||||
</html>
|
||||
104
src/index.html
Normal file
104
src/index.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Онлайн кинотеатр</title>
|
||||
<script type="module" src="js/main.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="container mt-4 mb-4">
|
||||
<div>
|
||||
<div class="row mb-2 align-items-center">
|
||||
<img src="../images/4k.jpg" id="logo" class="col-auto"/>
|
||||
<h1 class="col display-1">Онлайн кинотеатр</h1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<nav>
|
||||
<ul class="nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a href="catalog.html" class="nav-link dropdown-toggle" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Фильмы и сериалы</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
||||
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Ужастики</a></li>
|
||||
<li class="dropdown-item"><a href="catalog.html" class="nav-link">Аниме</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item"><a href="about.html" class="nav-link">О нас</a></li>
|
||||
<li class="nav-item"><a href="help.html" class="nav-link">Помощь</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div>
|
||||
<h2>Добро пожаловать в онлайн кинотеатр</h2>
|
||||
<p>Смотрите фильмы бесплатно и без ограничений.</p>
|
||||
<h2>Премьеры недели</h2>
|
||||
</div>
|
||||
|
||||
<div class="d-md-flex flex-wrap justify-content-between">
|
||||
<div class="w-25 me-3">
|
||||
<h4>Ловцы забытых голосов</h4>
|
||||
<figure>
|
||||
<img src="../images/film.jpg" class="img-fluid"/>
|
||||
<figcaption>
|
||||
<a href="film.html" target="_blank">Смотреть</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="w-25 me-3">
|
||||
<h4>Ловцы забытых голосов</h4>
|
||||
<figure>
|
||||
<img src="../images/film.jpg" class="img-fluid"/>
|
||||
<figcaption>
|
||||
<a href="film.html" target="_blank">Смотреть</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="w-25 me-3">
|
||||
<h4>Ловцы забытых голосов</h4>
|
||||
<figure>
|
||||
<img src="../images/film.jpg" class="img-fluid"/>
|
||||
<figcaption>
|
||||
<a href="film.html" target="_blank">Смотреть</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="w-25 me-auto">
|
||||
<h4>Ловцы забытых голосов</h4>
|
||||
<figure>
|
||||
<img src="../images/film.jpg" class="img-fluid"/>
|
||||
<figcaption>
|
||||
<a href="film.html" target="_blank">Смотреть</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="container mt-auto">
|
||||
<div class="text-center">
|
||||
<p>
|
||||
@ООО ОАО ИП и так далее. Любые лицензии по номеру 78375535378. 4К йоууу
|
||||
<i class="bi bi-heart"></i>
|
||||
<i class="bi bi-star-fill"></i>
|
||||
<i class="bi bi-arrow-right"></i>
|
||||
</p>
|
||||
<div>
|
||||
<i class="bi bi-telegram">Телеграмм</i>
|
||||
<i class="bi bi-discord ms-1">Дискорд</i>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
81
src/js/controller.js
Normal file
81
src/js/controller.js
Normal file
@@ -0,0 +1,81 @@
|
||||
export class MovieController {
|
||||
|
||||
constructor(model, view) {
|
||||
this.model = model;
|
||||
this.view = view;
|
||||
this.currentMovieId = null;
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
this.currentMovieId = urlParams.get('id');
|
||||
|
||||
if (window.location.pathname.includes('edit.html')) {
|
||||
await this.initEditPage();
|
||||
} else {
|
||||
await this.initListPage();
|
||||
}
|
||||
}
|
||||
|
||||
async initListPage() {
|
||||
const movies = await this.model.fetchMovies();
|
||||
this.view.renderMovies(movies);
|
||||
|
||||
this.view.movieContainer.addEventListener('click', async (e) => {
|
||||
if (e.target.classList.contains('delete-btn')) {
|
||||
const id = e.target.getAttribute('data-id');
|
||||
const confirmed = confirm('Вы уверены, что хотите удалить этот фильм?');
|
||||
|
||||
if (confirmed) {
|
||||
const success = await this.model.deleteMovie(id);
|
||||
if (success) {
|
||||
const movies = await this.model.fetchMovies();
|
||||
this.view.renderMovies(movies);
|
||||
} else {
|
||||
this.view.showError('Не удалось удалить фильм');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async initEditPage() {
|
||||
if (this.currentMovieId) {
|
||||
const movie = await this.model.getMovieById(this.currentMovieId);
|
||||
if (movie) {
|
||||
this.view.fillFormWithMovieData(movie);
|
||||
}
|
||||
}
|
||||
|
||||
this.view.movieForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
await this.handleFormSubmit();
|
||||
});
|
||||
}
|
||||
|
||||
async handleFormSubmit() {
|
||||
const movieData = this.view.getFormData();
|
||||
|
||||
try {
|
||||
if (this.currentMovieId) {
|
||||
const updatedMovie = await this.model.updateMovie(this.currentMovieId, movieData);
|
||||
if (updatedMovie) {
|
||||
this.view.redirectToList();
|
||||
} else {
|
||||
this.view.showError('Не удалось обновить фильм');
|
||||
}
|
||||
} else {
|
||||
const newMovie = await this.model.createMovie(movieData);
|
||||
if (newMovie) {
|
||||
this.view.redirectToList();
|
||||
} else {
|
||||
this.view.showError('Не удалось создать фильм');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
this.view.showError('Произошла ошибка при сохранении фильма');
|
||||
}
|
||||
}
|
||||
}
|
||||
11
src/js/main.js
Normal file
11
src/js/main.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import '../scss/styles.scss';
|
||||
|
||||
import { MovieModel } from './model.js';
|
||||
import { MovieView } from './view.js';
|
||||
import { MovieController } from './controller.js';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const model = new MovieModel();
|
||||
const view = new MovieView();
|
||||
const controller = new MovieController(model, view);
|
||||
});
|
||||
70
src/js/model.js
Normal file
70
src/js/model.js
Normal file
@@ -0,0 +1,70 @@
|
||||
export class MovieModel {
|
||||
|
||||
constructor() {
|
||||
this.apiUrl = 'http://localhost:3000/movies';
|
||||
}
|
||||
|
||||
async getMovieById(id) {
|
||||
try {
|
||||
const response = await fetch(`${this.apiUrl}/${id}`);
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Error fetching movie:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async fetchMovies() {
|
||||
try {
|
||||
const response = await fetch(this.apiUrl);
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Error fetching movies:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async createMovie(movieData) {
|
||||
try {
|
||||
const response = await fetch(this.apiUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(movieData),
|
||||
});
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Error creating movie:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async updateMovie(id, movieData) {
|
||||
try {
|
||||
const response = await fetch(`${this.apiUrl}/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(movieData),
|
||||
});
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Error updating movie:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async deleteMovie(id) {
|
||||
try {
|
||||
const response = await fetch(`${this.apiUrl}/${id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error('Error deleting movie:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
52
src/js/view.js
Normal file
52
src/js/view.js
Normal file
@@ -0,0 +1,52 @@
|
||||
export class MovieView {
|
||||
|
||||
constructor() {
|
||||
this.movieContainer = document.getElementById('movieContainer');
|
||||
this.movieForm = document.getElementById('movieForm');
|
||||
}
|
||||
|
||||
renderMovies(movies) {
|
||||
this.movieContainer.innerHTML = '';
|
||||
|
||||
movies.forEach(movie => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'col-md-4 mb-4';
|
||||
|
||||
const cardInner = `
|
||||
<div class="card">
|
||||
<img src="${movie.imageUrl || 'https://via.placeholder.com/300x450'}" class="card-img-top" alt="${movie.title}">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">${movie.title}</h5>
|
||||
<div class="d-flex justify-content-between">
|
||||
<a href="edit.html?id=${movie.id}" class="btn btn-warning">Редактировать</a>
|
||||
<button class="btn btn-danger delete-btn" data-id="${movie.id}">Удалить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
card.innerHTML = cardInner;
|
||||
this.movieContainer.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
fillFormWithMovieData(movie) {
|
||||
document.getElementById('movieTitle').value = movie.title;
|
||||
document.getElementById('movieImage').value = movie.imageUrl || '';
|
||||
}
|
||||
|
||||
getFormData() {
|
||||
return {
|
||||
title: document.getElementById('movieTitle').value,
|
||||
imageUrl: document.getElementById('movieImage').value
|
||||
};
|
||||
}
|
||||
|
||||
showError(message) {
|
||||
alert(message);
|
||||
}
|
||||
|
||||
redirectToList() {
|
||||
window.location.href = 'help.html';
|
||||
}
|
||||
}
|
||||
7
src/scss/styles.scss
Normal file
7
src/scss/styles.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@import "../../node_modules/bootstrap/scss/bootstrap";
|
||||
|
||||
#logo {
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
25
vite.config.js
Normal file
25
vite.config.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import path from 'path';
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: path.resolve(__dirname, 'index.html'),
|
||||
}
|
||||
}
|
||||
},
|
||||
// server: {
|
||||
// port: 3000,
|
||||
// hot: true,
|
||||
// },
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3000',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, '')
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user