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