fix lab3
This commit is contained in:
leoevgeniy
parent
8cd466c170
commit
0e5d2349fd
@ -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);
|
||||
|
||||
@ -82,6 +82,7 @@
|
||||
<a href="admin.html" class="nav-link">Admin</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="module">
|
||||
import validation from "./js/validation";
|
||||
import { linesPageForm } from "./js/lines"
|
||||
@ -95,4 +96,5 @@
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
198
index.html
198
index.html
@ -49,206 +49,18 @@
|
||||
|
||||
<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">
|
||||
@ -261,13 +73,13 @@
|
||||
|
||||
<script type="module">
|
||||
import myBanner from "./js/banner";
|
||||
|
||||
import "./js/film.js";
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
myBanner("#banner");
|
||||
});
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
135
js/film.js
135
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();
|
||||
}
|
||||
});
|
||||
|
||||
209
page3.html
209
page3.html
@ -42,207 +42,39 @@
|
||||
</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>
|
||||
<h1>Фантастика</h1>
|
||||
|
||||
<!-- Добавьте больше фильмов по вашему желанию -->
|
||||
</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>
|
||||
<h1>Фэнтези</h1>
|
||||
|
||||
<!-- Добавьте больше фильмов по вашему желанию -->
|
||||
</div>
|
||||
<div class="movie-container">
|
||||
<h1>Романтика</h1>
|
||||
|
||||
<!-- Добавьте больше фильмов по вашему желанию -->
|
||||
</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 class="movie-container">
|
||||
<h1>Экшн</h1>
|
||||
|
||||
<!-- Добавьте больше фильмов по вашему желанию -->
|
||||
</div>
|
||||
<div class="movie-container">
|
||||
<h1>Драма</h1>
|
||||
|
||||
<!-- Добавьте больше фильмов по вашему желанию -->
|
||||
</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 class="movie-container">
|
||||
<h1>Научная фантастика</h1>
|
||||
|
||||
<!-- Добавьте больше фильмов по вашему желанию -->
|
||||
</div>
|
||||
<footer class="footer mt-auto d-flex justify-content-center align-items-center">
|
||||
@ -254,6 +86,7 @@
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
<script type="module" src="./js/film.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
193
page5.html
193
page5.html
@ -41,194 +41,8 @@
|
||||
</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 id="movie-container" class="d-flex flex-wrap">
|
||||
<!-- Здесь будут добавляться карточки фильмов -->
|
||||
</div>
|
||||
|
||||
|
||||
@ -241,8 +55,7 @@
|
||||
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
<script type="module" src="./js/film.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user