Cinema/index.html at main · Endlad2/Cinema · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Главная - Online Cinema</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <!-- Верхняя панель навигации -->
    <div class="top-nav">
        <div class="nav-buttons">
            <a href="index.html" class="nav-btn">
                <img src="home.png" alt="Главная" class="nav-icon">
                <span>Главная</span>
            </a>
            <a href="tv.html" class="nav-btn">
                <img src="tv.png" alt="ТВ" class="nav-icon">
                <span>ТВ</span>
            </a>
            <a href="search.html" class="nav-btn">
                <img src="search.png" alt="Поиск" class="nav-icon">
                <span>Поиск</span>
            </a>
        </div>
    </div>

    <!-- Основной контент -->
    <div class="container">
        <h1>Рекомендованные фильмы</h1>

        <div class="section">
            <h2>Семейные фильмы и сериалы</h2>

            <div class="carousel-container">
                <button class="carousel-btn prev-btn">
                    <img src="arrow-left.png" alt="Назад" class="carousel-icon">
                </button>

                <div class="carousel-wrapper">
                    <div id="movies-container" class="carousel">
                        <div class="loading-spinner"></div>
                    </div>
                </div>

                <button class="carousel-btn next-btn">
                    <img src="arrow-right.png" alt="Вперед" class="carousel-icon">
                </button>
            </div>

            <div class="carousel-dots" id="carousel-dots">
                <!-- Точки для навигации будут добавлены через JS -->
            </div>
        </div>

        <div class="section">
            <h2>История просмотра</h2>
            <div id="history-container" class="movies-grid">
                <p class="empty-message">История просмотров пуста</p>
            </div>
        </div>
    </div>

    <!-- Мои копирайты -->
    <footer>
        <div class="footer-content">
            <p>&copy; 2025 Endlad7373. All rights reserved.</p>
        </div>
    </footer>

    <script>
        const API_BASE_URL = 'https://api.imdbapi.dev';
        let moviesData = [];
        let currentSlide = 0;
        let slidesPerView = 5;

        document.addEventListener('DOMContentLoaded', function() {
            loadMovies();
            updateSlidesPerView();
            window.addEventListener('resize', updateSlidesPerView);

            // Обработчики для кнопок-карусели(TODO: исправить баги)
            document.querySelector('.prev-btn').addEventListener('click', () => moveCarousel(-1));
            document.querySelector('.next-btn').addEventListener('click', () => moveCarousel(1));
        });

        function updateSlidesPerView() {
            const width = window.innerWidth;
            if (width <= 480) {
                slidesPerView = 2;
            } else if (width <= 768) {
                slidesPerView = 3;
            } else if (width <= 1024) {
                slidesPerView = 4;
            } else {
                slidesPerView = 5;
            }

            if (moviesData.length > 0) {
                updateCarousel();
            }
        }

        function loadMovies() {
            fetchMovies();
        }

        function fetchMovies() {
            const url = `${API_BASE_URL}/titles?countryCodes=RU&genres=Family`;

            const container = document.getElementById('movies-container');
            container.innerHTML = '<div class="loading-spinner"></div>';

            fetch(url)
                .then(response => {
                    if (!response.ok) throw new Error('Ошибка загрузки данных');
                    return response.json();
                })
                .then(async data => {
                    moviesData = data.titles || [];
                    container.innerHTML = '';

                    // Создаем карточки фильмов
                    for (const movie of moviesData) {
                        await createMovieCard(movie, container);
                    }

                    // Инициализируем карусель
                    initCarousel();
                })
                .catch(error => {
                    console.error('Ошибка:', error);
                    document.getElementById('movies-container').innerHTML =
                        '<p class="error-message">Не удалось загрузить фильмы. Попробуйте позже.</p>';
                });
        }

        async function createMovieCard(movie, container) {
            const movieCard = document.createElement('div');
            movieCard.className = 'movie-card';
            movieCard.onclick = () => goToWatch(movie.id);

            let posterUrl = movie.primaryImage?.url || 'no-poster.png';

            // Если нет постера, пытаемся загрузить изображения
            if (posterUrl === 'no-poster.png' && movie.id) {
                try {
                    const imagesResponse = await fetch(`${API_BASE_URL}/titles/${movie.id}/images`);
                    if (imagesResponse.ok) {
                        const imagesData = await imagesResponse.json();
                        const poster = imagesData.images?.find(img => img.type === 'poster');
                        if (poster) {
                            posterUrl = poster.url;
                        }
                    }
                } catch (error) {
                    console.log(`Не удалось загрузить изображения для ${movie.id}`);
                }
            }

            const title = movie.primaryTitle || movie.originalTitle || 'Без названия';
            const year = movie.startYear || '';
            const rating = movie.rating?.aggregateRating || '';
            const voteCount = movie.rating?.voteCount || 0;
            const genres = movie.genres ? movie.genres.slice(0, 2).join(', ') : '';
            const type = movie.type || 'movie';

            movieCard.innerHTML = `
                <div class="movie-poster">
                    <img src="${posterUrl}" alt="${title}" onerror="this.src='no-poster.png'">
                    ${type !== 'movie' ? `<div class="movie-type">${type}</div>` : ''}
                </div>
                <div class="movie-info">
                    <h3 class="movie-title">${title}</h3>
                    <div class="movie-meta">
                        ${year ? `<span class="movie-year">${year}</span>` : ''}
                        ${rating ? `<span class="movie-rating">⭐ ${rating}</span>` : ''}
                    </div>
                    ${voteCount ? `<div class="movie-votes">👥 ${voteCount.toLocaleString()}</div>` : ''}
                    ${genres ? `<p class="movie-genres">${genres}</p>` : ''}
                </div>
            `;

            container.appendChild(movieCard);
        }

        function initCarousel() {
            const container = document.getElementById('movies-container');
            const slides = container.querySelectorAll('.movie-card');
            const totalSlides = slides.length;

            if (totalSlides === 0) return;


            const slideWidth = slides[0].offsetWidth + 25;
            container.style.width = `${slideWidth * totalSlides}px`;


            createDots(Math.ceil(totalSlides / slidesPerView));

            updateCarousel();
        }

        function createDots(totalPages) {
            const dotsContainer = document.getElementById('carousel-dots');
            dotsContainer.innerHTML = '';

            for (let i = 0; i < totalPages; i++) {
                const dot = document.createElement('button');
                dot.className = 'carousel-dot';
                if (i === 0) dot.classList.add('active');
                dot.addEventListener('click', () => goToPage(i));
                dotsContainer.appendChild(dot);
            }
        }

        function goToPage(page) {
            currentSlide = page * slidesPerView;
            updateCarousel();
        }

        function moveCarousel(direction) {
            const totalSlides = moviesData.length;
            const maxSlide = Math.max(0, Math.ceil(totalSlides / slidesPerView) - 1) * slidesPerView;

            currentSlide += direction * slidesPerView;

            if (currentSlide < 0) {
                currentSlide = 0;
            } else if (currentSlide > maxSlide) {
                currentSlide = maxSlide;
            }

            updateCarousel();
        }

        function updateCarousel() {
            const container = document.getElementById('movies-container');
            const slideWidth = container.querySelector('.movie-card')?.offsetWidth || 200;
            const gap = 25;
            const totalWidth = slideWidth + gap;


            container.style.transform = `translateX(-${currentSlide * totalWidth}px)`;


            const activePage = Math.floor(currentSlide / slidesPerView);
            const dots = document.querySelectorAll('.carousel-dot');
            dots.forEach((dot, index) => {
                dot.classList.toggle('active', index === activePage);
            });


            const prevBtn = document.querySelector('.prev-btn');
            const nextBtn = document.querySelector('.next-btn');
            const totalSlides = moviesData.length;
            const maxSlide = Math.max(0, Math.ceil(totalSlides / slidesPerView) - 1) * slidesPerView;

            prevBtn.disabled = currentSlide === 0;
            nextBtn.disabled = currentSlide >= maxSlide;


            if (prevBtn.disabled) {
                prevBtn.classList.add('disabled');
            } else {
                prevBtn.classList.remove('disabled');
            }

            if (nextBtn.disabled) {
                nextBtn.classList.add('disabled');
            } else {
                nextBtn.classList.remove('disabled');
            }
        }

        function goToWatch(titleId) {
            window.location.href = `watch.html?imdb_id=${titleId}`;
        }
    </script>
</body>
</html>