-
Что смотрим сегодня?
-Ответь на несколько вопросов — и мы найдём фильм
+Что смотрим сегодня?
+Ответь на несколько вопросов — и мы найдём фильм
-
@@ -86,46 +93,46 @@
Настроение
+Настроение
-
Фильтры
- +Фильтры
+
-
+
-
+
-
+
-
+
@@ -175,14 +188,15 @@
+
@@ -192,9 +206,9 @@
@@ -206,32 +220,32 @@
-
-
Мои фильмы ❤️
+ +Мои фильмы ❤️
-
-
- История просмотров
+ +История просмотров
${t.whereToWatch}
+
+ ${movie.streaming.map(s => `
+
+ ${s.icon}
+ ${s.name}
+
+ `).join('')}
+
+ `;
+ streamingInfo.style.display = 'block';
+ } else {
+ streamingInfo.style.display = 'none';
+ }
+
+ // Update watch button
+ const watchBtn = document.getElementById('watchButton');
+ if (movie.streaming && movie.streaming.length > 0) {
+ watchBtn.href = movie.streaming[0].url;
+ watchBtn.style.display = 'flex';
+ } else {
+ watchBtn.href = '#';
+ watchBtn.style.display = 'none';
+ }
+
// Update favorite button state
const isFavorite = favorites.some(f => f.id === movie.id);
addToFavoritesBtn.classList.toggle('active', isFavorite);
@@ -1128,7 +1348,78 @@ randomModeBtn.addEventListener('click', () => {
findMovie();
});
+// ==================== I18N FUNCTION ====================
+function updateTexts() {
+ const t = TRANSLATIONS[currentLang];
+
+ // Update all elements with data-i18n attribute
+ document.querySelectorAll('[data-i18n]').forEach(el => {
+ const key = el.dataset.i18n;
+ if (t[key]) {
+ el.textContent = t[key];
+ }
+ });
+
+ // Update genre labels in select
+ const genreSelect = document.getElementById('genreFilter');
+ const genreMap = {
+ any: 'genreAny',
+ action: 'genreAction',
+ comedy: 'genreComedy',
+ drama: 'genreDrama',
+ scifi: 'genreScifi',
+ horror: 'genreHorror',
+ thriller: 'genreThriller',
+ adventure: 'genreAdventure',
+ fantasy: 'genreFantasy',
+ mystery: 'genreMystery',
+ romance: 'genreRomance',
+ animation: 'genreAnimation',
+ crime: 'genreCrime',
+ history: 'genreHistory'
+ };
+
+ Object.entries(genreMap).forEach(([value, key]) => {
+ const option = genreSelect.querySelector(`option[value="${value}"]`);
+ if (option && t[key]) {
+ option.textContent = t[key];
+ }
+ });
+
+ // Update duration labels
+ const durationSelect = document.getElementById('durationFilter');
+ const durationMap = {
+ any: 'durationAny',
+ 90: 'duration90',
+ 120: 'duration120',
+ 150: 'duration150',
+ '150+': 'duration150plus'
+ };
+
+ Object.entries(durationMap).forEach(([value, key]) => {
+ const option = durationSelect.querySelector(`option[value="${value}"]`);
+ if (option && t[key]) {
+ option.textContent = t[key];
+ }
+ });
+
+ // Save language
+ localStorage.setItem('filmora_lang', currentLang);
+ document.documentElement.lang = currentLang;
+}
+
+// Language switcher
+const languageSelect = document.getElementById('languageSelect');
+if (languageSelect) {
+ languageSelect.value = currentLang;
+ languageSelect.addEventListener('change', (e) => {
+ currentLang = e.target.value;
+ updateTexts();
+ });
+}
+
// ==================== INITIALIZATION ====================
document.addEventListener('DOMContentLoaded', () => {
+ updateTexts();
showPage('home');
});
diff --git a/style.css b/style.css
index acb0cc4..6590da5 100644
--- a/style.css
+++ b/style.css
@@ -130,6 +130,42 @@ body {
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
backdrop-filter: blur(10px);
position: relative;
+ flex-wrap: wrap;
+ gap: 16px;
+}
+
+.header-controls {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+
+.language-select {
+ padding: 10px 16px;
+ background: linear-gradient(145deg, var(--bg-card), var(--bg-hover));
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: var(--border-radius-sm);
+ color: var(--text-primary);
+ cursor: pointer;
+ transition: var(--transition);
+ font-size: 14px;
+ font-weight: 600;
+ appearance: none;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f5a623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: right 12px center;
+ background-size: 18px;
+ padding-right: 40px;
+}
+
+.language-select:hover {
+ border-color: var(--accent);
+}
+
+.language-select:focus {
+ outline: none;
+ border-color: var(--accent);
+ box-shadow: 0 0 20px var(--accent-glow);
}
.header::after {
@@ -552,6 +588,101 @@ body {
pointer-events: none;
}
+/* Poster Overlay with Watch Button */
+.poster-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.7);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ transition: var(--transition);
+ backdrop-filter: blur(4px);
+}
+
+.movie-poster:hover .poster-overlay {
+ opacity: 1;
+}
+
+.watch-btn {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 18px 36px;
+ background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+ color: var(--bg-primary);
+ border-radius: var(--border-radius-sm);
+ text-decoration: none;
+ font-weight: 700;
+ font-size: 18px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ transform: translateY(20px);
+ transition: var(--transition);
+ box-shadow: 0 8px 32px var(--accent-glow);
+}
+
+.movie-poster:hover .watch-btn {
+ transform: translateY(0);
+}
+
+.watch-btn:hover {
+ transform: translateY(-4px) scale(1.05);
+ box-shadow: 0 16px 48px var(--accent-glow);
+}
+
+.watch-btn span:first-child {
+ font-size: 24px;
+}
+
+.streaming-info {
+ padding: 20px;
+ background: linear-gradient(145deg, rgba(245, 166, 35, 0.08), transparent);
+ border-radius: var(--border-radius-sm);
+ margin-top: 8px;
+}
+
+.streaming-info h4 {
+ font-size: 14px;
+ color: var(--text-secondary);
+ margin-bottom: 12px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+.streaming-services {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+
+.streaming-service {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 16px;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 20px;
+ font-size: 13px;
+ color: var(--text-secondary);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ transition: var(--transition);
+}
+
+.streaming-service:hover {
+ background: rgba(245, 166, 35, 0.15);
+ border-color: var(--accent);
+ color: var(--accent);
+}
+
+.streaming-service .icon {
+ font-size: 16px;
+}
+
.movie-poster img {
width: 100%;
height: 100%;