Compare commits

..

2 Commits
Lab3 ... main

Author SHA1 Message Date
dac7df5f06 undo 2024-05-30 00:18:03 +04:00
410cd82be9 2semestr 2024-05-30 00:14:57 +04:00
65 changed files with 1 additions and 7627 deletions

2
.gitignore vendored
View File

@ -5,7 +5,7 @@
!.vscode/launch.json
!.vscode/extensions.json
!.vscode/*.code-snippets
node_modules
# Local History for Visual Studio Code
.history/

Binary file not shown.

Before

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 427 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 359 KiB

View File

@ -1,94 +0,0 @@
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Просмотр фильмов</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body >
<div class="header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<div class="header-logo">
<img src="icon.png" alt="Logo">
<h2>Фильмы онлайн</h2>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Главная страница</a>
<a href="page2.html" class="nav-link">Каталог</a>
<a href="page3.html" class="nav-link">Категории</a>
<a href="page4.html" class="nav-link">Информация</a>
<a href="page5.html" class="nav-link">Популярное</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<main class="container-fluid p-2">
<h1 class="text-Gray text-center font-weight-bold">Панель администратора</h1>
<div class="text-center">
<div class="btn-group" role="group">
<a class="btn btn-default" href="/editpage.html">Добавить фильм</a>
</div>
</div>
<div>
<h2 class="text-Gray text-center font-weight-bold" style="padding-top: 10px;">Таблица данных</h2>
<table id="items-table" class="table table-striped">
<thead>
<th scope="col"></th>
<th scope="col" class="w-25">Фильм</th>
<th scope="col" class="w-25">Жанр</th>
<th scope="col" class="w-10">Рейтинг</th>
<th scope="col" class="w-25">Дата производства</th>
<th scope="col" class="w-25">Режиссер</th>
<th scope="col"></th>
<th scope="col"></th>
</thead>
<tbody></tbody>
</table>
</div>
</main>
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
<div class="container-fluid">
<p>© 2023 Просмотр фильмов.</p>
<a href="admin.html" class="nav-link">Admin</a>
</div>
</footer>
<script type="module">
import validation from "./js/validation";
import { linesForm } from "./js/lines";
document.addEventListener('DOMContentLoaded', () => {
validation();
linesForm();
});
</script>
<script src="script.js"></script>
<script src="film.js"></script>
</body>
</html>

View File

@ -1,29 +0,0 @@
#banner {
margin: 5px;
display: flex;
align-items: center;
flex-direction: column;
height: 400px;
overflow: hidden;
}
#banner img {
border: 1px solid #3c3c3f;
border-radius: 5px;
height: 100%;
object-fit: cover;
}
#banner img.banner-show {
width: 100%;
opacity: 1;
transition: opacity 1s, visibility 0s;
}
#banner img.banner-hide {
height: 0;
width: 0;
opacity: 0;
visibility: hidden;
transition: opacity 1s, visibility 0s 1s;
}

View File

@ -1,116 +0,0 @@
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
min-height: 500vh;
}
.header {
background: linear-gradient(to right, #000000, #434343);
padding: 20px;
color: #ffffff;
text-align: justify;
letter-spacing: 1px;
width: auto;
}
.header-logo img {
width: 100px;
height: auto;
margin-right: 10px;
background-color: transparent;
}
.navbar-nav .nav-link {
color: #ffffff;
text-decoration: none;
margin-left: 20px;
transition: color 0.3s;
font-size: 24px;
font-family: 'Arial Black', sans-serif;
}
.header-logo {
display: flex;
align-items: center;
font-family: 'Arial Black', sans-serif;
}
.header-links a {
color: #ffffff;
text-decoration: none;
margin-left: 20px;
transition: color 0.3s;
font-size: 24px;
font-family: 'Arial Black', sans-serif;
}
.header-links a:hover {
color: #ff4500;
}
.movie-container {
width: 80%;
margin: 0 auto;
overflow-x: auto;
white-space: nowrap;
gap: 20px;
}
.movie-card {
width: 300px;
height: 600px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 auto;
margin-right: 20px;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.movie-card img {
width: 100%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.movie-card-content {
padding: 20px;
}
.movie-card-content h2 {
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
}
h1 {
margin-left: 10px;
font-weight: bold;
}
h2 {
color: #333333;
margin-bottom: 10px;
}
p {
color: #666666;
font-size: 24px;
padding: 20px;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}

178
data.json

File diff suppressed because one or more lines are too long

86
dist/admin.html vendored
View File

@ -1,86 +0,0 @@
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Просмотр фильмов</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="/assets/style-c0cb709f.css">
</head>
<body >
<div class="header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<div class="header-logo">
<img src="/assets/icon-0a4ad84d.png" alt="Logo">
<h2>Фильмы онлайн</h2>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Главная страница</a>
<a href="page2.html" class="nav-link">Каталог</a>
<a href="page3.html" class="nav-link">Категории</a>
<a href="page4.html" class="nav-link">Информация</a>
<a href="page5.html" class="nav-link">Популярное</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="container mt-4">
<h1>Добавление нового фильма</h1>
<form id="movieForm">
<div class="mb-3">
<label for="title" class="form-label">Название фильма</label>
<input type="text" class="form-control" id="title" name="title" required>
</div>
<div class="mb-3">
<label for="genre" class="form-label">Жанр</label>
<input type="text" class="form-control" id="genre" name="genre" required>
</div>
<div class="mb-3">
<label for="rating" class="form-label">Рейтинг</label>
<input type="number" class="form-control" id="rating" name="rating" min="1" max="10" required>
</div>
<div class="mb-3">
<label for="releaseDate" class="form-label">Дата создания</label>
<input type="date" class="form-control" id="releaseDate" name="releaseDate" required>
</div>
<div class="mb-3">
<label for="director" class="form-label">Режиссер</label>
<input type="text" class="form-control" id="director" name="director" required>
</div>
<div class="mb-3">
<label for="coverImage" class="form-label">Фотография обложки</label>
<input type="file" class="form-control" id="coverImage" name="coverImage" accept="image/*" required>
</div>
<button type="submit" class="btn btn-primary">Добавить фильм</button>
</form>
</div>
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
<div class="container-fluid">
<p>© 2023 Просмотр фильмов.</p>
<a href="admin.html" class="nav-link">Admin</a>
</div>
</footer>
<script src="script.js"></script>
<script src="film.js"></script>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 427 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 359 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

View File

@ -1 +0,0 @@
#banner{margin:5px;display:flex;align-items:center;flex-direction:column;height:400px;overflow:hidden}#banner img{border:1px solid #3c3c3f;border-radius:5px;height:100%;object-fit:cover}#banner img.banner-show{width:100%;opacity:1;transition:opacity 1s,visibility 0s}#banner img.banner-hide{height:0;width:0;opacity:0;visibility:hidden;transition:opacity 1s,visibility 0s 1s}

View File

@ -1 +0,0 @@
/* empty css */(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const s of t.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&n(s)}).observe(document,{childList:!0,subtree:!0});function o(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function n(e){if(e.ep)return;e.ep=!0;const t=o(e);fetch(e.href,t)}})();function c(i){console.info("Loaded");const r=document.querySelectorAll(`${i} img`);for(let t=0;t<r.length;t+=1)r[t].setAttribute("class","banner-hide");let o=r.length-1,n=0;function e(){r[n].setAttribute("class","banner-show"),r[o].setAttribute("class","banner-hide"),console.info("Banner changed"),o=n,n+=1,n===r.length&&(n=0),setTimeout(e,5e3)}e()}document.addEventListener("DOMContentLoaded",()=>{c("#banner")});

File diff suppressed because one or more lines are too long

273
dist/index.html vendored
View File

@ -1,273 +0,0 @@
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Просмотр фильмов</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" crossorigin src="/assets/main-29d200ed.js"></script>
<link rel="stylesheet" href="/assets/index-65f0d438.css">
<link rel="stylesheet" href="/assets/style-c0cb709f.css">
</head>
<body class="h-100 d-flex flex-column">
<div class="header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<div class="header-logo">
<img src="/assets/icon-0a4ad84d.png" alt="Logo">
<h2>Фильмы онлайн</h2>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Главная страница</a>
<a href="page2.html" class="nav-link">Каталог</a>
<a href="page3.html" class="nav-link">Категории</a>
<a href="page4.html" class="nav-link">Информация</a>
<a href="page5.html" class="nav-link">Популярное</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<div id="banner">
<img class="banner-hide" src="/assets/1-afe0584b.jpg" alt="banner1">
<img class="banner-hide" src="/assets/2-9fadfb72.jpg" alt="banner1">
<img class="banner-hide" src="/assets/3-d6fa4130.jpg" alt="banner1">
</div>
<div class="movie-container">
<h1>Наиболее Популярное</h1>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<!-- Добавьте больше фильмов по вашему желанию -->
</div>
<div class="movie-container">
<h1>Может быть интересно</h1>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<!-- Добавьте больше фильмов по вашему желанию -->
</div>
<div class="movie-container">
<h1>Лучшие отзывы</h1>
<div class="movie-card" data-kinopoisk-id="61237">
<a href="#" class="movie-link" data-url=""></a>
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<!-- Добавьте больше фильмов по вашему желанию -->
</div>
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
<div class="container-fluid">
<p>© 2023 Просмотр фильмов.</p>
<a href="admin.html" class="nav-link">Admin</a>
</div>
</footer>
<script src="js/script.js"></script>
<script src="js/film.js"></script>
</body>
</html>

250
dist/page2.html vendored
View File

@ -1,250 +0,0 @@
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Просмотр фильмов</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="/assets/style-c0cb709f.css">
</head>
<body >
<div class="header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<div class="header-logo">
<img src="/assets/icon-0a4ad84d.png" alt="Logo">
<h2>Фильмы онлайн</h2>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Главная страница</a>
<a href="page2.html" class="nav-link">Каталог</a>
<a href="page3.html" class="nav-link">Категории</a>
<a href="page4.html" class="nav-link">Информация</a>
<a href="page5.html" class="nav-link">Популярное</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<h1>Каталог</h1>
<div id="catalog" class="movie-container">
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
</div>
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
<div class="container-fluid">
<p>© 2023 Просмотр фильмов.</p>
</div>
</footer>
<script src="js/script.js"></script>
<script src="js/film.js"></script>
</body>
</html>

261
dist/page3.html vendored
View File

@ -1,261 +0,0 @@
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Просмотр фильмов</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="/assets/style-c0cb709f.css">
</head>
<body >
<div class="header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<div class="header-logo">
<img src="/assets/icon-0a4ad84d.png" alt="Logo">
<h2>Фильмы онлайн</h2>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Главная страница</a>
<a href="page2.html" class="nav-link">Каталог</a>
<a href="page3.html" class="nav-link">Категории</a>
<a href="page4.html" class="nav-link">Информация</a>
<a href="page5.html" class="nav-link">Популярное</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="movie-container">
<h1>Ужасы</h1>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<!-- Добавьте больше фильмов по вашему желанию -->
</div>
<div class="movie-container">
<h1>Фентэзи</h1>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<!-- Добавьте больше фильмов по вашему желанию -->
</div>
<div class="movie-container">
<h1>Боевик</h1>
<div class="movie-card" data-kinopoisk-id="61237">
<a href="#" class="movie-link" data-url=""></a>
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<!-- Добавьте больше фильмов по вашему желанию -->
</div>
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
<div class="container-fluid">
<p>© 2023 Просмотр фильмов.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>

78
dist/page4.html vendored
View File

@ -1,78 +0,0 @@
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Просмотр фильмов</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="/assets/style-c0cb709f.css">
</head>
<body >
<div class="header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<div class="header-logo">
<img src="/assets/icon-0a4ad84d.png" alt="Logo">
<h2>Фильмы онлайн</h2>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Главная страница</a>
<a href="page2.html" class="nav-link">Каталог</a>
<a href="page3.html" class="nav-link">Категории</a>
<a href="page4.html" class="nav-link">Информация</a>
<a href="page5.html" class="nav-link">Популярное</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<h1>Информация</h1>
<p>Добро пожаловать на наш сайт для просмотра фильмов! Здесь вы найдете все необходимые сведения для насыщенного и удобного кинематографического опыта. Пожалуйста, ознакомьтесь с полезной информацией ниже:<br>
О нас:<br>
Мы предоставляем уникальную платформу для онлайн-просмотра широкого ассортимента фильмов различных жанров. Наша команда стремится создать место, где каждый кинолюбитель найдет что-то по своему вкусу.<br>
Как пользоваться сайтом:<br>
Поиск и Фильтрация: Воспользуйтесь удобным поиском, чтобы быстро найти нужный фильм. Фильтры по жанру, году выпуска и рейтингу помогут уточнить ваш выбор.<br>
Рейтинг и Обзоры: У нас есть система рейтингов, созданная пользователями, а также обзоры, чтобы вы могли сделать информированный выбор.<br>
Партнерство и Реклама:<br>
Если у вас есть интересные предложения по партнерству или рекламе на нашем сайте, свяжитесь с нами через контактную форму. Мы всегда открыты к новым идеям и сотрудничеству.<br>
Поддержка:<br>
В случае возникновения вопросов, проблем или предложений по улучшению сервиса, обращайтесь в нашу службу поддержки. Мы готовы вам помочь 24/7.<br>
Правила и Условия:<br>
Пожалуйста, ознакомьтесь с нашими правилами использования сайта и политикой конфиденциальности, чтобы быть в курсе важных моментов.<br>
Благодарим вас за выбор нашего сайта для вашего кинематографического опыта. Наслаждайтесь просмотром!</p>
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
<div class="container-fluid">
<p>© 2023 Просмотр фильмов.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>

249
dist/page5.html vendored
View File

@ -1,249 +0,0 @@
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Просмотр фильмов</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="/assets/style-c0cb709f.css">
</head>
<body >
<div class="header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<div class="header-logo">
<img src="/assets/icon-0a4ad84d.png" alt="Logo">
<h2>Фильмы онлайн</h2>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Главная страница</a>
<a href="page2.html" class="nav-link">Каталог</a>
<a href="page3.html" class="nav-link">Категории</a>
<a href="page4.html" class="nav-link">Информация</a>
<a href="page5.html" class="nav-link">Популярное</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<h1>Топ фильмов</h1>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
<div class="container-fluid">
<p>© 2023 Просмотр фильмов.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>

View File

@ -1,100 +0,0 @@
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Просмотр фильмов</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body >
<div class="header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<div class="header-logo">
<img src="icon.png" alt="Logo">
<h2>Фильмы онлайн</h2>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Главная страница</a>
<a href="page2.html" class="nav-link">Каталог</a>
<a href="page3.html" class="nav-link">Категории</a>
<a href="page4.html" class="nav-link">Информация</a>
<a href="page5.html" class="nav-link">Популярное</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="container mt-4">
<h1>Добавление нового фильма</h1>
<div class="text-center">
<img id="image-preview" src="https://via.placeholder.com/300x400" alt="placeholder">
</div>
<form id="items-form" class="needs-validation" novalidate>
<div class="mb-3">
<label for="item" class="form-label">Жанр</label>
<select id="item" class="form-select" name="selected" required>
</select>
</div>
<div class="mb-3">
<label for="title" class="form-label">Название фильма</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="mb-3">
<label for="rating" class="form-label">Рейтинг</label>
<input type="number" class="form-control" id="rating" name="rating" min="1" max="10" required>
</div>
<div class="mb-3">
<label for="releaseDate" class="form-label">Дата создания</label>
<input type="date" class="form-control" id="releaseDate" name="releaseDate" required>
</div>
<div class="mb-3">
<label for="director" class="form-label">Режиссер</label>
<input type="text" class="form-control" id="director" name="director" required>
</div>
<div class="mb-3">
<label for="image" class="form-label">Фотография обложки</label>
<input id="image" type="file" name="image" class="form-control" accept="image/*">
</div>
<a href="admin.html" class="btn btn-secondary">Назад</a>
<button type="submit" class="btn btn-primary">Добавить фильм</button>
</form>
</div>
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
<div class="container-fluid">
<p>© 2023 Просмотр фильмов.</p>
<a href="admin.html" class="nav-link">Admin</a>
</div>
</footer>
<script type="module">
import validation from "./js/validation";
import { linesPageForm } from "./js/lines"
document.addEventListener('DOMContentLoaded', () => {
validation();
linesPageForm();
});
</script>
</body>
</html>

BIN
icon.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

View File

@ -1,88 +0,0 @@
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Просмотр фильмов</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body class="h-100 d-flex flex-column">
<div class="header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<div class="header-logo">
<img src="icon.png" alt="Logo">
<h2>Фильмы онлайн</h2>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Главная страница</a>
<a href="page2.html" class="nav-link">Каталог</a>
<a href="page3.html" class="nav-link">Категории</a>
<a href="page4.html" class="nav-link">Информация</a>
<a href="page5.html" class="nav-link">Популярное</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<div id="banner">
<img class="banner-hide" src="Images/1.jpg" alt="banner1">
<img class="banner-hide" src="Images/2.jpg" alt="banner1">
<img class="banner-hide" src="Images/3.jpg" alt="banner1">
</div>
<div class="movie-container">
<h1>Наиболее Популярное</h1>
<!-- Добавьте больше фильмов по вашему желанию -->
</div>
<div class="movie-container">
<h1>Может быть интересно</h1>
<!-- Добавьте больше фильмов по вашему желанию -->
</div>
<div class="movie-container">
<h1>Лучшие отзывы</h1>
<!-- Добавьте больше фильмов по вашему желанию -->
</div>
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
<div class="container-fluid">
<p>© 2023 Просмотр фильмов.</p>
<a href="admin.html" class="nav-link">Admin</a>
</div>
</footer>
<script type="module">
import myBanner from "./js/banner";
import "./js/film.js";
document.addEventListener('DOMContentLoaded', () => {
myBanner("#banner");
});
</script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@ -1,46 +0,0 @@
// модуль для смены изображения в баннере по таймеру
import "../css/banner.css";
// указывается блок, в котором будет баннер
// блок должен содержать изображения
function myBanner(root) {
console.info("Loaded");
// получение всех изображений внутри баннера
const banners = document.querySelectorAll(`${root} img`);
// всем изображениям устанавливается класс banner-hide
// если были другие классы, то они будут удалены
for (let i = 0; i < banners.length; i += 1) {
banners[i].setAttribute("class", "banner-hide");
}
let old = banners.length - 1;
let current = 0;
// функция меняет изображения в цикле
// изображение с классом banner-show будет показано
// изображение с классом banner-hide будет скрыто
// функция запускает таймер, который через 5 секунд
// запускает функцию, снова создается таймер и т. д.
function loop() {
banners[current].setAttribute("class", "banner-show");
banners[old].setAttribute("class", "banner-hide");
console.info("Banner changed");
old = current;
current += 1;
if (current === banners.length) {
current = 0;
}
setTimeout(loop, 5000);
}
loop();
}
export default myBanner;

View File

@ -1,181 +0,0 @@
// film.js
import { getAllLines, getAllItemTypes } from './lines-rest-api.js';
async function loadMovies() {
try {
const moviesData = await getAllLines();
addMovieCards(moviesData);
} catch (error) {
console.error("Error loading movies:", error);
}
}
async function loadMoviesindex() {
try {
const moviesData = await getAllLines();
addMovieCardsindex(moviesData);
} catch (error) {
console.error("Error loading movies:", error);
}
}
async function loadMoviesBygenre() {
try {
const moviesData = await getAllLines();
const itemTypes = await getAllItemTypes();
addMoviesByGenre(moviesData, itemTypes);
} catch (error) {
console.error("Error loading movies:", error);
}
}
function addMoviesByGenre(moviesData, itemTypes) {
var containers = document.querySelectorAll(".movie-container");
containers.forEach(function (container) {
var genre = container.querySelector("h1").textContent;
// Находим все фильмы для данного жанра
var genreMovies = moviesData.filter(function (movie) {
var itemType = itemTypes[movie.itemsId-1];
if (itemType && itemType.genre === genre) {
return true;
} else {
console.error("Invalid itemTypes for movie:", movie);
console.log("itemType:", itemType);
console.log("genre:", genre);
return false;
}
});
genreMovies.forEach(function (movie) {
addMovieCardsByContainer(container, movie);
});
});
}
function addMovieCardsByContainer(container,movie) {
var container = container
if (!container) {
console.error("Movie container not found");
return;""
}
var movieCard = document.createElement("div");
movieCard.className = "movie-card";
var image = document.createElement("img");
// Проверяем, есть ли у фильма изображение, и вставляем соответствующее изображение
image.src = movie.image ? movie.image : "https://via.placeholder.com/300x400";
image.alt = "Movie Image";
var content = document.createElement("div");
content.className = "movie-card-content";
var title = document.createElement("h2");
title.textContent = movie.name;
var description = document.createElement("p");
description.textContent = "Рейтинг: " + movie.rating;
content.appendChild(title);
content.appendChild(description);
movieCard.appendChild(image);
movieCard.appendChild(content);
container.appendChild(movieCard);
}
function addMovieCards(moviesData) {
var container = document.getElementById("movie-container");
if (!container) {
console.error("Movie container not found");
return;
}
moviesData.forEach(function (movie) {
var movieCard = document.createElement("div");
movieCard.className = "movie-card";
var image = document.createElement("img");
// Проверяем, есть ли у фильма изображение, и вставляем соответствующее изображение
image.src = movie.image ? movie.image : "https://via.placeholder.com/300x400";
image.alt = "Movie Image";
var content = document.createElement("div");
content.className = "movie-card-content";
var title = document.createElement("h2");
title.textContent = movie.name;
var description = document.createElement("p");
description.textContent = "Рейтинг: " + movie.rating;
content.appendChild(title);
content.appendChild(description);
movieCard.appendChild(image);
movieCard.appendChild(content);
container.appendChild(movieCard);
});
}
function addMovieCardsindex(moviesData) {
var containers = document.querySelectorAll(".movie-container");
if (!containers || containers.length === 0) {
console.error("Movie containers not found");
return;
}
containers.forEach(function (container) {
moviesData.forEach(function (movie) {
var movieCard = document.createElement("div");
movieCard.className = "movie-card";
var image = document.createElement("img");
// Проверяем, есть ли у фильма изображение, и вставляем соответствующее изображение
image.src = movie.image ? movie.image : "https://via.placeholder.com/300x400";
image.alt = "Movie Image";
var content = document.createElement("div");
content.className = "movie-card-content";
var title = document.createElement("h2");
title.textContent = movie.name;
var description = document.createElement("p");
description.textContent = "Рейтинг: " + movie.rating;
content.appendChild(title);
content.appendChild(description);
movieCard.appendChild(image);
movieCard.appendChild(content);
container.appendChild(movieCard);
});
});
}
document.addEventListener('DOMContentLoaded', function () {
if (window.location.pathname.includes("page2.html")) {
// Запуск функции для page2.html
loadMovies();
}else if (window.location.pathname.includes("page5.html")) {
// Запуск функции для page5.html
loadMovies();
}else if (window.location.pathname.includes("page3.html")) {
// Запуск функции для page3.html
loadMoviesBygenre();
}else if (window.location.pathname.includes("index.html")||"/") {
// Запуск функции для index.html
loadMoviesindex();
}
});

View File

@ -1,87 +0,0 @@
const serverUrl = "http://localhost:8081";
export function createLineObject(item,name, rating, release_date, director,image) {
return {
itemsId: parseInt(item),
name,
rating,
release_date,
director,
image,
};
}
export async function getAllItemTypes() {
const response = await fetch(`${serverUrl}/items`);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
export async function getAllLines() {
const response = await fetch(`${serverUrl}/lines?_expand=items`);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
export async function getLine(id) {
const response = await fetch(`${serverUrl}/lines/${id}?_expand=items`);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
export async function createLine(item,name, rating, release_date, director,image) {
const itemObject = createLineObject(item,name, rating, release_date, director,image);
const options = {
method: "POST",
body: JSON.stringify(itemObject),
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
};
const response = await fetch(`${serverUrl}/lines`, options);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
export async function updateLine(id,item,name, rating, release_date, director,image) {
const itemObject = createLineObject(item,name, rating, release_date, director,image);
const options = {
method: "PUT",
body: JSON.stringify(itemObject),
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
};
const response = await fetch(`${serverUrl}/lines/${id}`, options);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
export async function deleteLine(id) {
const options = {
method: "DELETE",
};
const response = await fetch(`${serverUrl}/lines/${id}`, options);
if (!response.ok) {
throw response.statusText;
}
window.location.reload(true);
return response.json();
}

View File

@ -1,85 +0,0 @@
export const cntrls = {
button: document.getElementById("items-add"),
table: document.querySelector("#items-table tbody"),
form: document.getElementById("items-form"),
lineId: document.getElementById("items-line-id"),
filmname: document.getElementById("name"),
itemsType: document.getElementById("item"),
rating: document.getElementById("rating"),
releaseDate: document.getElementById("releaseDate"),
director: document.getElementById("director"),
image: document.getElementById("image"),
imagePreview: document.getElementById("image-preview"),
};
export const imagePlaceholder = "https://via.placeholder.com/300x400";
export function createItemsOption(name, value = "", isSelected = false) {
var today = new Date().toJSON().split('T')[0];
releaseDate.value = today
const option = document.createElement("option");
option.value = value || "";
option.selected = isSelected;
option.text = name;
return option;
}
function createTableAnchor(icon, callback) {
const i = document.createElement("i");
i.classList.add("fa-solid", icon);
const a = document.createElement("a");
a.href = "#";
a.appendChild(i);
a.onclick = (event) => {
event.preventDefault();
event.stopPropagation();
callback();
};
const td = document.createElement("td");
td.appendChild(a);
return td;
}
function createTableColumn(value) {
const td = document.createElement("td");
td.textContent = value;
return td;
}
export function createTableRow(line, index, editCallback, deleteCallback, items) {
const rowNumber = document.createElement("th");
rowNumber.scope = "row";
rowNumber.textContent = index + 1;
const row = document.createElement("tr");
row.id = `line-${line.id}`;
row.appendChild(rowNumber);
// Добавляем свойства из массива "lines"
row.appendChild(createTableColumn(line.name)); // Название фильма
// Добавляем жанр на основе "genre_id" из массива "items"
const genreItem = items.find(item => item.id === line.itemsId);
const genre = genreItem ? genreItem.genre : '';
row.appendChild(createTableColumn(genre)); // Жанр
row.appendChild(createTableColumn(line.rating)); // Рейтинг
row.appendChild(createTableColumn(formatDate(line.release_date))); // Дата
row.appendChild(createTableColumn(line.director)); // Режиссер
// Добавляем ячейки для редактирования и удаления
row.appendChild(createTableAnchor("fa-pencil", editCallback));
row.appendChild(createTableAnchor("fa-trash", deleteCallback));
return row;
}
// Функция для форматирования даты
function formatDate(dateString) {
const options = { year: 'numeric', month: 'long', day: 'numeric' };
return new Date(dateString).toLocaleDateString(undefined, options);
}

View File

@ -1,213 +0,0 @@
import {
createLine,
deleteLine,
getAllItemTypes,
getAllLines,
getLine,
updateLine,
} from "./lines-rest-api";
import {
cntrls,
createItemsOption,
createTableRow,
imagePlaceholder,
} from "./lines-ui";
async function drawItemsSelect() {
const genres = await getAllItemTypes();
cntrls.itemsType.innerHTML = "";
cntrls.itemsType.appendChild(createItemsOption("Выберите значение", "", true));
genres.forEach((genre) => {
cntrls.itemsType.appendChild(createItemsOption(genre.genre, genre.id));
});
}
async function drawLinesTable() {
console.info("Try to load data");
if (!cntrls.table) {
return;
}
const data = await getAllLines();
const genres = await getAllItemTypes();
cntrls.table.innerHTML = "";
data.forEach((item, index) => {
cntrls.table.appendChild(
createTableRow(
item,
index,
() => location.assign(`editpage.html?id=${item.id}`),
() => deleteLine(item.id),
genres
),
);
});
}
async function addLine(item,name, rating, release_date, director,image) {
console.info("Try to add item");
const data = await createLine(item,name, rating, release_date, director,image);
console.info("Added");
console.info(data);
drawLinesTable();
}
async function editLine(id,item,name, rating, release_date, director,image) {
console.info("Try to update item");
const data = await updateLine(id,item,name, rating, release_date, director,image);
console.info("Updated");
console.info(data);
drawLinesTable();
}
async function readFile(file) {
const reader = new FileReader();
// создание Promise-объекта для использования функции
// с помощью await (асинхронно) без коллбэков (callback)
// https://learn.javascript.ru/promise
return new Promise((resolve, reject) => {
// 2. "Возвращаем" содержимое когда файл прочитан
// через вызов resolve
// Если не использовать Promise, то всю работу по взаимодействию
// с REST API пришлось бы делать в обработчике (callback) функции
// onloadend
reader.onloadend = () => {
const fileContent = reader.result;
// Здесь могла бы быть работа с REST API
// Чтение заканчивает выполняться здесь
resolve(fileContent);
};
// 3. Возвращаем ошибку
reader.onerror = () => {
// Или здесь в случае ошибки
reject(new Error("oops, something went wrong with the file reader."));
};
// Шаг 1. Сначала читаем файл
// Чтение начинает выполняться здесь
reader.readAsDataURL(file);
});
}
// функция для обновления блока с превью выбранного изображения
async function updateImagePreview() {
// получение выбранного файла
// возможен выбор нескольких файлов, поэтому необходимо получить только первый
const file = cntrls.image.files[0];
// чтение содержимого файла в виде base64 строки
const fileContent = await readFile(file);
console.info("base64 ", fileContent);
// обновление атрибута src для тега img с id image-preview
cntrls.imagePreview.src = fileContent;
}
export function linesForm() {
console.info("linesForm");
drawItemsSelect();
drawLinesTable();
// Вызов функции обновления превью изображения при возникновении
// события oncahnge в тэге input с id image
cntrls.image.addEventListener("change", () => updateImagePreview());
cntrls.form.addEventListener("submit", async (event) => {
console.info("Form onSubmit");
event.preventDefault();
event.stopPropagation();
if (!cntrls.form.checkValidity()) {
return;
}
let imageBase64 = "";
if (cntrls.imagePreview.src !== imagePlaceholder) {
const result = await fetch(cntrls.imagePreview.src);
const blob = await result.blob();
imageBase64 = await readFile(blob);
}
const currentId = cntrls.lineId.value;
if (!currentId) {
await addLine(
cntrls.itemsType.value,
cntrls.filmname.value,
cntrls.rating.value,
cntrls.releaseDate.value,
cntrls.director.value,
imageBase64,
);
} else {
await editLine(
currentId,
cntrls.itemsType.value,
cntrls.title.value,
cntrls.rating.value,
cntrls.releaseDate.value,
cntrls.director.value,
imageBase64,
);
}
});
}
export async function linesPageForm() {
console.info("linesPageForm");
drawItemsSelect();
const goBack = () => location.assign("/admin.html");
cntrls.image.addEventListener("change", () => updateImagePreview());
const urlParams = new URLSearchParams(location.search);
const currentId = urlParams.get("id");
if (currentId) {
try {
const line = await getLine(currentId);
cntrls.itemsType.value = line.itemsId;
cntrls.filmname.value = line.name;
cntrls.rating.value = line.rating;
cntrls.releaseDate.value = line.release_date;
cntrls.director.value = line.director;
cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
} catch {
goBack();
}
}
cntrls.form.addEventListener("submit", async (event) => {
console.info("Form onSubmit");
event.preventDefault();
event.stopPropagation();
if (!cntrls.form.checkValidity()) {
return;
}
let imageBase64 = "";
if (cntrls.imagePreview.src !== imagePlaceholder) {
// Загрузка содержимого атрибута src тэга img с id image-preview
// Здесь выполняется HTTP запрос с типом GET
const result = await fetch(cntrls.imagePreview.src);
// Получение из HTTP-ответа бинарного содержимого
const blob = await result.blob();
// Получение base64 строки для файла
// Здесь выполняется Promise из функции readFile
// Promise позволяет писать линейный код для работы с асинхронными методами
// без использования обработчиков (callback) с помощью await
imageBase64 = await readFile(blob);
}
if (!currentId) {
await addLine(
cntrls.itemsType.value,
cntrls.filmname.value,
cntrls.rating.value,
cntrls.releaseDate.value,
cntrls.director.value,
imageBase64,
);
} else {
await editLine(
currentId,
cntrls.itemsType.value,
cntrls.filmname.value,
cntrls.rating.value,
cntrls.releaseDate.value,
cntrls.director.value,
imageBase64,
);
}
goBack();
});
}

View File

@ -1,23 +0,0 @@
const movieCards = document.querySelectorAll('.movie-card');
// Добавляем обработчик события нажатия для каждой карточки фильма
movieCards.forEach(card => {
const link = card.querySelector('.movie-link');
const kinopoiskId = card.dataset.kinopoiskId;
card.addEventListener('click', () => {
// Формируем новый URL с использованием ID Кинопоиска
const redirectUrl = `https://kinopoisk-watch-dsze5.ondigitalocean.app/player/?id=${kinopoiskId}`;
// Перенаправляем пользователя на полученный URL
window.location.href = redirectUrl;
});
});
$(document).ready(function () {
var url = window.location.href;
$('.navbar-nav a').filter(function () {
return this.href == url;
}).addClass('active');
});

View File

@ -1,16 +0,0 @@
function validation() {
const forms = document.querySelectorAll("form.needs-validation");
for (let i = 0; i < forms.length; i += 1) {
const form = forms[i];
form.addEventListener("submit", (event) => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
});
}
}
export default validation;

View File

@ -1,14 +0,0 @@
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Node",
"target": "ES2020",
"jsx": "preserve",
"strictNullChecks": true,
"strictFunctionTypes": true
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}

4627
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,26 +0,0 @@
{
"name": "int-prog",
"version": "1.0.0",
"type": "module",
"scripts": {
"start": "vite",
"serve": "http-server -p 3000 ./dist/",
"build": "vite build",
"rest": "json-server --watch data.json -p 8081",
"dev": "npm-run-all --parallel rest start",
"prod": "npm-run-all build --parallel serve rest"
},
"dependencies": {
"@fortawesome/fontawesome-free": "6.4.2",
"bootstrap": "^5.3.2"
},
"devDependencies": {
"eslint": "8.50.0",
"eslint-config-airbnb-base": "15.0.0",
"eslint-plugin-import": "2.28.1",
"http-server": "14.1.1",
"json-server": "0.17.4",
"npm-run-all": "4.1.5",
"vite": "4.4.9"
}
}

View File

@ -1,64 +0,0 @@
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Просмотр фильмов</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body >
<div class="header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<div class="header-logo">
<img src="icon.png" alt="Logo">
<h2>Фильмы онлайн</h2>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Главная страница</a>
<a href="page2.html" class="nav-link">Каталог</a>
<a href="page3.html" class="nav-link">Категории</a>
<a href="page4.html" class="nav-link">Информация</a>
<a href="page5.html" class="nav-link">Популярное</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<h1>Каталог</h1>
<div id="movie-container" class="d-flex flex-wrap">
<!-- Здесь будут добавляться карточки фильмов -->
</div>
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
<div class="container-fluid">
<p>© 2023 Просмотр фильмов.</p>
<a href="admin.html" class="nav-link">Admin</a>
</div>
</footer>
<script type="module" src="./js/film.js"></script>
</body>
</html>

View File

@ -1,93 +0,0 @@
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Просмотр фильмов</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body >
<div class="header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<div class="header-logo">
<img src="icon.png" alt="Logo">
<h2>Фильмы онлайн</h2>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Главная страница</a>
<a href="page2.html" class="nav-link">Каталог</a>
<a href="page3.html" class="nav-link">Категории</a>
<a href="page4.html" class="nav-link">Информация</a>
<a href="page5.html" class="nav-link">Популярное</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="movie-container">
<h1>Фантастика</h1>
<!-- Добавьте больше фильмов по вашему желанию -->
</div>
<div class="movie-container">
<h1>Фэнтези</h1>
<!-- Добавьте больше фильмов по вашему желанию -->
</div>
<div class="movie-container">
<h1>Романтика</h1>
<!-- Добавьте больше фильмов по вашему желанию -->
</div>
<div class="movie-container">
<h1>Экшн</h1>
<!-- Добавьте больше фильмов по вашему желанию -->
</div>
<div class="movie-container">
<h1>Драма</h1>
<!-- Добавьте больше фильмов по вашему желанию -->
</div>
<div class="movie-container">
<h1>Боевик</h1>
<!-- Добавьте больше фильмов по вашему желанию -->
</div>
<div class="movie-container">
<h1>Научная фантастика</h1>
<!-- Добавьте больше фильмов по вашему желанию -->
</div>
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
<div class="container-fluid">
<p>© 2023 Просмотр фильмов.</p>
</div>
</footer>
<script src="script.js"></script>
<script type="module" src="./js/film.js"></script>
</body>
</html>

View File

@ -1,77 +0,0 @@
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Просмотр фильмов</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body >
<div class="header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<div class="header-logo">
<img src="icon.png" alt="Logo">
<h2>Фильмы онлайн</h2>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Главная страница</a>
<a href="page2.html" class="nav-link">Каталог</a>
<a href="page3.html" class="nav-link">Категории</a>
<a href="page4.html" class="nav-link">Информация</a>
<a href="page5.html" class="nav-link">Популярное</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<h1>Информация</h1>
<p>Добро пожаловать на наш сайт для просмотра фильмов! Здесь вы найдете все необходимые сведения для насыщенного и удобного кинематографического опыта. Пожалуйста, ознакомьтесь с полезной информацией ниже:<br>
О нас:<br>
Мы предоставляем уникальную платформу для онлайн-просмотра широкого ассортимента фильмов различных жанров. Наша команда стремится создать место, где каждый кинолюбитель найдет что-то по своему вкусу.<br>
Как пользоваться сайтом:<br>
Поиск и Фильтрация: Воспользуйтесь удобным поиском, чтобы быстро найти нужный фильм. Фильтры по жанру, году выпуска и рейтингу помогут уточнить ваш выбор.<br>
Рейтинг и Обзоры: У нас есть система рейтингов, созданная пользователями, а также обзоры, чтобы вы могли сделать информированный выбор.<br>
Партнерство и Реклама:<br>
Если у вас есть интересные предложения по партнерству или рекламе на нашем сайте, свяжитесь с нами через контактную форму. Мы всегда открыты к новым идеям и сотрудничеству.<br>
Поддержка:<br>
В случае возникновения вопросов, проблем или предложений по улучшению сервиса, обращайтесь в нашу службу поддержки. Мы готовы вам помочь 24/7.<br>
Правила и Условия:<br>
Пожалуйста, ознакомьтесь с нашими правилами использования сайта и политикой конфиденциальности, чтобы быть в курсе важных моментов.<br>
Благодарим вас за выбор нашего сайта для вашего кинематографического опыта. Наслаждайтесь просмотром!</p>
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
<div class="container-fluid">
<p>© 2023 Просмотр фильмов.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>

View File

@ -1,61 +0,0 @@
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Просмотр фильмов</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body >
<div class="header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<div class="header-logo">
<img src="icon.png" alt="Logo">
<h2>Фильмы онлайн</h2>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Главная страница</a>
<a href="page2.html" class="nav-link">Каталог</a>
<a href="page3.html" class="nav-link">Категории</a>
<a href="page4.html" class="nav-link">Информация</a>
<a href="page5.html" class="nav-link">Популярное</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<h1>Топ фильмов</h1>
<div id="movie-container" class="d-flex flex-wrap">
<!-- Здесь будут добавляться карточки фильмов -->
</div>
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
<div class="container-fluid">
<p>© 2023 Просмотр фильмов.</p>
</div>
</footer>
<script type="module" src="./js/film.js"></script>
</body>
</html>

View File

@ -1,24 +0,0 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

View File

@ -1,9 +0,0 @@
export function setupCounter(element) {
let counter = 0
const setCounter = (count) => {
counter = count
element.innerHTML = `count is ${counter}`
}
element.addEventListener('click', () => setCounter(counter + 1))
setCounter(0)
}

View File

@ -1,13 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/main.js"></script>
</body>
</html>

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>

Before

Width:  |  Height:  |  Size: 995 B

View File

@ -1,24 +0,0 @@
import './style.css'
import javascriptLogo from './javascript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.js'
document.querySelector('#app').innerHTML = `
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="${viteLogo}" class="logo" alt="Vite logo" />
</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
<img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
</a>
<h1>Hello Vite!</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">
Click on the Vite logo to learn more
</p>
</div>
`
setupCounter(document.querySelector('#counter'))

View File

@ -1,14 +0,0 @@
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^5.0.0"
}
}

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -1,96 +0,0 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vanilla:hover {
filter: drop-shadow(0 0 2em #f7df1eaa);
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

View File

@ -1,18 +0,0 @@
import { resolve } from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
page2: resolve(__dirname, 'page2.html'),
page3: resolve(__dirname, 'page3.html'),
page4: resolve(__dirname, 'page4.html'),
page5: resolve(__dirname, 'page5.html'),
admin: resolve(__dirname, 'admin.html'),
editpage: resolve(__dirname, 'editpage.html')
},
},
},
})

Binary file not shown.

Before

Width:  |  Height:  |  Size: 263 KiB

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 270 KiB

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 276 KiB

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 278 KiB

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 265 KiB

Binary file not shown.