fix lab3
This commit is contained in:
parent
8cd466c170
commit
0e5d2349fd
@ -51,16 +51,22 @@ body {
|
|||||||
|
|
||||||
.movie-container {
|
.movie-container {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
gap: 20px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.movie-card {
|
.movie-card {
|
||||||
|
|
||||||
display: inline-block;
|
|
||||||
width: 300px;
|
width: 300px;
|
||||||
|
height: 600px;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
margin-right: 20px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||||
|
@ -82,6 +82,7 @@
|
|||||||
<a href="admin.html" class="nav-link">Admin</a>
|
<a href="admin.html" class="nav-link">Admin</a>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import validation from "./js/validation";
|
import validation from "./js/validation";
|
||||||
import { linesPageForm } from "./js/lines"
|
import { linesPageForm } from "./js/lines"
|
||||||
@ -95,4 +96,5 @@
|
|||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
198
index.html
198
index.html
@ -49,206 +49,18 @@
|
|||||||
|
|
||||||
<div class="movie-container">
|
<div class="movie-container">
|
||||||
<h1>Наиболее Популярное</h1>
|
<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>
|
||||||
|
|
||||||
<div class="movie-container">
|
<div class="movie-container">
|
||||||
<h1>Может быть интересно</h1>
|
<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>
|
||||||
<div class="movie-container">
|
<div class="movie-container">
|
||||||
<h1>Лучшие отзывы</h1>
|
<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>
|
</div>
|
||||||
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
|
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
|
||||||
@ -261,13 +73,13 @@
|
|||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import myBanner from "./js/banner";
|
import myBanner from "./js/banner";
|
||||||
|
import "./js/film.js";
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
myBanner("#banner");
|
myBanner("#banner");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<script src="js/script.js"></script>
|
|
||||||
<script src="js/film.js"></script>
|
|
||||||
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
135
js/film.js
135
js/film.js
@ -1,6 +1,6 @@
|
|||||||
// film.js
|
// film.js
|
||||||
|
|
||||||
import { getAllLines } from './lines-rest-api.js';
|
import { getAllLines, getAllItemTypes } from './lines-rest-api.js';
|
||||||
|
|
||||||
async function loadMovies() {
|
async function loadMovies() {
|
||||||
try {
|
try {
|
||||||
@ -10,7 +10,86 @@ async function loadMovies() {
|
|||||||
console.error("Error loading movies:", 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) {
|
function addMovieCards(moviesData) {
|
||||||
var container = document.getElementById("movie-container");
|
var container = document.getElementById("movie-container");
|
||||||
|
|
||||||
@ -46,5 +125,57 @@ function addMovieCards(moviesData) {
|
|||||||
container.appendChild(movieCard);
|
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();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
209
page3.html
209
page3.html
@ -42,207 +42,39 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="movie-container">
|
<div class="movie-container">
|
||||||
<h1>Ужасы</h1>
|
<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>
|
||||||
|
|
||||||
<div class="movie-container">
|
<div class="movie-container">
|
||||||
<h1>Фентэзи</h1>
|
<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-container">
|
||||||
|
<h1>Романтика</h1>
|
||||||
|
|
||||||
|
<!-- Добавьте больше фильмов по вашему желанию -->
|
||||||
</div>
|
</div>
|
||||||
<div class="movie-card">
|
<div class="movie-container">
|
||||||
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
|
<h1>Экшн</h1>
|
||||||
<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>
|
</div>
|
||||||
<div class="movie-container">
|
<div class="movie-container">
|
||||||
<h1>Боевик</h1>
|
<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>
|
||||||
|
<div class="movie-container">
|
||||||
|
<h1>Научная фантастика</h1>
|
||||||
|
|
||||||
<!-- Добавьте больше фильмов по вашему желанию -->
|
<!-- Добавьте больше фильмов по вашему желанию -->
|
||||||
</div>
|
</div>
|
||||||
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
|
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
|
||||||
@ -254,6 +86,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
|
<script type="module" src="./js/film.js"></script>
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
193
page5.html
193
page5.html
@ -41,194 +41,8 @@
|
|||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<h1>Топ фильмов</h1>
|
<h1>Топ фильмов</h1>
|
||||||
<div class="movie-card">
|
<div id="movie-container" class="d-flex flex-wrap">
|
||||||
<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>
|
||||||
|
|
||||||
|
|
||||||
@ -241,8 +55,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script src="script.js"></script>
|
<script type="module" src="./js/film.js"></script>
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
Loading…
Reference in New Issue
Block a user