diff --git a/css/style.css b/css/style.css
index ee521f6..8267302 100644
--- a/css/style.css
+++ b/css/style.css
@@ -51,16 +51,22 @@ body {
.movie-container {
width: 80%;
+
margin: 0 auto;
overflow-x: auto;
white-space: nowrap;
+ gap: 20px;
+
}
.movie-card {
-
- display: inline-block;
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);
diff --git a/editpage.html b/editpage.html
index 9ead453..d78c4ac 100644
--- a/editpage.html
+++ b/editpage.html
@@ -82,6 +82,7 @@
Admin
+
-
-
+
+
diff --git a/js/film.js b/js/film.js
index ce88eed..e8bd7d4 100644
--- a/js/film.js
+++ b/js/film.js
@@ -1,6 +1,6 @@
// film.js
-import { getAllLines } from './lines-rest-api.js';
+import { getAllLines, getAllItemTypes } from './lines-rest-api.js';
async function loadMovies() {
try {
@@ -10,7 +10,86 @@ async function loadMovies() {
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");
@@ -46,5 +125,57 @@ function addMovieCards(moviesData) {
container.appendChild(movieCard);
});
}
+function addMovieCardsindex(moviesData) {
+ var containers = document.querySelectorAll(".movie-container");
-document.addEventListener('DOMContentLoaded', loadMovies);
+ 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();
+ }
+});
diff --git a/page3.html b/page3.html
index 44b0a10..a4d9bbd 100644
--- a/page3.html
+++ b/page3.html
@@ -42,207 +42,39 @@
-
Ужасы
-
-
-
-
Название фильма 1
-
Описание фильма 1.
-
-
-
-
-
-
Название фильма 2
-
Описание фильма 2.
-
-
-
-
-
-
Название фильма 3
-
Описание фильма 3.
-
-
-
-
-
-
Название фильма 1
-
Описание фильма 1.
-
-
-
-
-
-
Название фильма 2
-
Описание фильма 2.
-
-
-
-
-
-
Название фильма 3
-
Описание фильма 3.
-
-
-
-
-
-
Название фильма 1
-
Описание фильма 1.
-
-
-
-
-
-
Название фильма 2
-
Описание фильма 2.
-
-
-
-
-
-
Название фильма 3
-
Описание фильма 3.
-
-
+
Фантастика
+
-
Фентэзи
-
-
-
-
Название фильма 1
-
Описание фильма 1.
-
-
-
-
-
-
Название фильма 2
-
Описание фильма 2.
-
-
-
-
-
-
Название фильма 3
-
Описание фильма 3.
-
-
-
-
-
-
Название фильма 1
-
Описание фильма 1.
-
-
-
-
-
-
Название фильма 2
-
Описание фильма 2.
-
-
-
-
-
-
Название фильма 3
-
Описание фильма 3.
-
-
-
-
-
-
Название фильма 1
-
Описание фильма 1.
-
-
-
-
-
-
Название фильма 2
-
Описание фильма 2.
-
-
-
-
-
-
Название фильма 3
-
Описание фильма 3.
-
-
+
Фэнтези
+
+
+
+
Романтика
+
+
+
+
+
Экшн
+
+
+
+
+
Драма
+
Боевик
-
-
-
-
-
Название фильма 1
-
Описание фильма 1.
-
-
-
-
-
-
Название фильма 2
-
Описание фильма 2.
-
-
-
-
-
-
Название фильма 3
-
Описание фильма 3.
-
-
-
-
-
-
Название фильма 1
-
Описание фильма 1.
-
-
-
-
-
-
Название фильма 2
-
Описание фильма 2.
-
-
-
-
-
-
Название фильма 3
-
Описание фильма 3.
-
-
-
-
-
-
Название фильма 1
-
Описание фильма 1.
-
-
-
-
-
-
Название фильма 2
-
Описание фильма 2.
-
-
-
-
-
-
Название фильма 3
-
Описание фильма 3.
-
-
+
+
+
+
Научная фантастика
+
diff --git a/page5.html b/page5.html
index fa07899..ccd6a0f 100644
--- a/page5.html
+++ b/page5.html
@@ -41,194 +41,8 @@