Add i18n (RU/EN/KZ), streaming platforms, mobile improvements
This commit is contained in:
parent
eebbb75806
commit
e83c3117a5
134
index.html
134
index.html
@ -2,7 +2,7 @@
|
|||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
<title>FILMORA — Find your movie tonight</title>
|
<title>FILMORA — Find your movie tonight</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
@ -23,16 +23,23 @@
|
|||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="logo">FILMORA</div>
|
<div class="logo">FILMORA</div>
|
||||||
|
<div class="header-controls">
|
||||||
|
<select class="language-select" id="languageSelect">
|
||||||
|
<option value="ru">🇷🇺 RU</option>
|
||||||
|
<option value="en">🇺🇸 EN</option>
|
||||||
|
<option value="kk">🇰🇿 KZ</option>
|
||||||
|
</select>
|
||||||
<nav class="nav">
|
<nav class="nav">
|
||||||
<button class="nav-btn" data-page="favorites">
|
<button class="nav-btn" data-page="favorites">
|
||||||
<span class="nav-icon">❤️</span>
|
<span class="nav-icon">❤️</span>
|
||||||
<span class="nav-text">Избранное</span>
|
<span class="nav-text" data-i18n="favorites">Избранное</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="nav-btn" data-page="history">
|
<button class="nav-btn" data-page="history">
|
||||||
<span class="nav-icon">🕘</span>
|
<span class="nav-icon">🕘</span>
|
||||||
<span class="nav-text">История</span>
|
<span class="nav-text" data-i18n="history">История</span>
|
||||||
</button>
|
</button>
|
||||||
</nav>
|
</nav>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
@ -40,45 +47,45 @@
|
|||||||
<!-- Home Page -->
|
<!-- Home Page -->
|
||||||
<section class="page home-page active" id="home">
|
<section class="page home-page active" id="home">
|
||||||
<div class="hero">
|
<div class="hero">
|
||||||
<h1 class="hero-title">Что смотрим сегодня?</h1>
|
<h1 class="hero-title" data-i18n="heroTitle">Что смотрим сегодня?</h1>
|
||||||
<p class="hero-subtitle">Ответь на несколько вопросов — и мы найдём фильм</p>
|
<p class="hero-subtitle" data-i18n="heroSubtitle">Ответь на несколько вопросов — и мы найдём фильм</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mood Selector -->
|
<!-- Mood Selector -->
|
||||||
<div class="mood-section">
|
<div class="mood-section">
|
||||||
<h2 class="section-title">Настроение</h2>
|
<h2 class="section-title" data-i18n="moodTitle">Настроение</h2>
|
||||||
<div class="mood-grid">
|
<div class="mood-grid">
|
||||||
<button class="mood-btn" data-mood="fun">
|
<button class="mood-btn" data-mood="fun">
|
||||||
<span class="mood-emoji">😄</span>
|
<span class="mood-emoji">😄</span>
|
||||||
<span class="mood-label">Весело</span>
|
<span class="mood-label" data-i18n="moodFun">Весело</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="mood-btn" data-mood="scary">
|
<button class="mood-btn" data-mood="scary">
|
||||||
<span class="mood-emoji">😱</span>
|
<span class="mood-emoji">😱</span>
|
||||||
<span class="mood-label">Страшно</span>
|
<span class="mood-label" data-i18n="moodScary">Страшно</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="mood-btn" data-mood="think">
|
<button class="mood-btn" data-mood="think">
|
||||||
<span class="mood-emoji">🧠</span>
|
<span class="mood-emoji">🧠</span>
|
||||||
<span class="mood-label">Подумать</span>
|
<span class="mood-label" data-i18n="moodThink">Подумать</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="mood-btn" data-mood="romance">
|
<button class="mood-btn" data-mood="romance">
|
||||||
<span class="mood-emoji">❤️</span>
|
<span class="mood-emoji">❤️</span>
|
||||||
<span class="mood-label">Романтика</span>
|
<span class="mood-label" data-i18n="moodRomance">Романтика</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="mood-btn" data-mood="drive">
|
<button class="mood-btn" data-mood="drive">
|
||||||
<span class="mood-emoji">🔥</span>
|
<span class="mood-emoji">🔥</span>
|
||||||
<span class="mood-label">Драйв</span>
|
<span class="mood-label" data-i18n="moodDrive">Драйв</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="mood-btn" data-mood="comedy">
|
<button class="mood-btn" data-mood="comedy">
|
||||||
<span class="mood-emoji">😂</span>
|
<span class="mood-emoji">😂</span>
|
||||||
<span class="mood-label">Комедия</span>
|
<span class="mood-label" data-i18n="moodComedy">Комедия</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="mood-btn" data-mood="sad">
|
<button class="mood-btn" data-mood="sad">
|
||||||
<span class="mood-emoji">😢</span>
|
<span class="mood-emoji">😢</span>
|
||||||
<span class="mood-label">Грустное</span>
|
<span class="mood-label" data-i18n="moodSad">Грустное</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="mood-btn" data-mood="unusual">
|
<button class="mood-btn" data-mood="unusual">
|
||||||
<span class="mood-emoji">🤯</span>
|
<span class="mood-emoji">🤯</span>
|
||||||
<span class="mood-label">Что-то необычное</span>
|
<span class="mood-label" data-i18n="moodUnusual">Что-то необычное</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -86,46 +93,46 @@
|
|||||||
<!-- Filters -->
|
<!-- Filters -->
|
||||||
<div class="filters-section">
|
<div class="filters-section">
|
||||||
<div class="filters-header">
|
<div class="filters-header">
|
||||||
<h2 class="section-title">Фильтры</h2>
|
<h2 class="section-title" data-i18n="filtersTitle">Фильтры</h2>
|
||||||
<button class="reset-filters-btn" id="resetFilters">Сбросить фильтры</button>
|
<button class="reset-filters-btn" id="resetFilters" data-i18n="resetFilters">Сбросить фильтры</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="filters-grid">
|
<div class="filters-grid">
|
||||||
<div class="filter-group">
|
<div class="filter-group">
|
||||||
<label class="filter-label">Жанр</label>
|
<label class="filter-label" data-i18n="filterGenre">Жанр</label>
|
||||||
<select class="filter-select" id="genreFilter">
|
<select class="filter-select" id="genreFilter">
|
||||||
<option value="any">Любой жанр</option>
|
<option value="any" data-i18n="genreAny">Любой жанр</option>
|
||||||
<option value="action">Боевик</option>
|
<option value="action" data-i18n="genreAction">Боевик</option>
|
||||||
<option value="comedy">Комедия</option>
|
<option value="comedy" data-i18n="genreComedy">Комедия</option>
|
||||||
<option value="drama">Драма</option>
|
<option value="drama" data-i18n="genreDrama">Драма</option>
|
||||||
<option value="scifi">Фантастика</option>
|
<option value="scifi" data-i18n="genreScifi">Фантастика</option>
|
||||||
<option value="horror">Ужасы</option>
|
<option value="horror" data-i18n="genreHorror">Ужасы</option>
|
||||||
<option value="thriller">Триллер</option>
|
<option value="thriller" data-i18n="genreThriller">Триллер</option>
|
||||||
<option value="adventure">Приключения</option>
|
<option value="adventure" data-i18n="genreAdventure">Приключения</option>
|
||||||
<option value="fantasy">Фэнтези</option>
|
<option value="fantasy" data-i18n="genreFantasy">Фэнтези</option>
|
||||||
<option value="mystery">Детектив</option>
|
<option value="mystery" data-i18n="genreMystery">Детектив</option>
|
||||||
<option value="romance">Романтика</option>
|
<option value="romance" data-i18n="genreRomance">Романтика</option>
|
||||||
<option value="animation">Анимация</option>
|
<option value="animation" data-i18n="genreAnimation">Анимация</option>
|
||||||
<option value="crime">Криминал</option>
|
<option value="crime" data-i18n="genreCrime">Криминал</option>
|
||||||
<option value="history">История</option>
|
<option value="history" data-i18n="genreHistory">История</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="filter-group">
|
<div class="filter-group">
|
||||||
<label class="filter-label">Год</label>
|
<label class="filter-label" data-i18n="filterYear">Год</label>
|
||||||
<select class="filter-select" id="yearFilter">
|
<select class="filter-select" id="yearFilter">
|
||||||
<option value="any">Любой год</option>
|
<option value="any" data-i18n="yearAny">Любой год</option>
|
||||||
<option value="2020-2026">2020–2026</option>
|
<option value="2020-2026">2020–2026</option>
|
||||||
<option value="2010-2019">2010–2019</option>
|
<option value="2010-2019">2010–2019</option>
|
||||||
<option value="2000-2009">2000–2009</option>
|
<option value="2000-2009">2000–2009</option>
|
||||||
<option value="1990-1999">1990–1999</option>
|
<option value="1990-1999">1990–1999</option>
|
||||||
<option value="before-1990">До 1990</option>
|
<option value="before-1990" data-i18n="yearBefore1990">До 1990</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="filter-group">
|
<div class="filter-group">
|
||||||
<label class="filter-label">Рейтинг</label>
|
<label class="filter-label" data-i18n="filterRating">Рейтинг</label>
|
||||||
<select class="filter-select" id="ratingFilter">
|
<select class="filter-select" id="ratingFilter">
|
||||||
<option value="any">Любой</option>
|
<option value="any" data-i18n="ratingAny">Любой</option>
|
||||||
<option value="6">6.0+</option>
|
<option value="6">6.0+</option>
|
||||||
<option value="7">7.0+</option>
|
<option value="7">7.0+</option>
|
||||||
<option value="8">8.0+</option>
|
<option value="8">8.0+</option>
|
||||||
@ -134,13 +141,13 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="filter-group">
|
<div class="filter-group">
|
||||||
<label class="filter-label">Длительность</label>
|
<label class="filter-label" data-i18n="filterDuration">Длительность</label>
|
||||||
<select class="filter-select" id="durationFilter">
|
<select class="filter-select" id="durationFilter">
|
||||||
<option value="any">Любая</option>
|
<option value="any" data-i18n="durationAny">Любая</option>
|
||||||
<option value="90">До 90 минут</option>
|
<option value="90" data-i18n="duration90">До 90 минут</option>
|
||||||
<option value="120">До 120 минут</option>
|
<option value="120" data-i18n="duration120">До 120 минут</option>
|
||||||
<option value="150">До 150 минут</option>
|
<option value="150" data-i18n="duration150">До 150 минут</option>
|
||||||
<option value="150+">Более 150 минут</option>
|
<option value="150+" data-i18n="duration150plus">Более 150 минут</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -150,11 +157,11 @@
|
|||||||
<div class="action-buttons">
|
<div class="action-buttons">
|
||||||
<button class="random-btn" id="randomMode">
|
<button class="random-btn" id="randomMode">
|
||||||
<span>🤷</span>
|
<span>🤷</span>
|
||||||
<span>Я НЕ ЗНАЮ, ЧТО ХОЧУ</span>
|
<span data-i18n="randomMode">Я НЕ ЗНАЮ, ЧТО ХОЧУ</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="find-btn" id="findMovie">
|
<button class="find-btn" id="findMovie">
|
||||||
<span>🎲</span>
|
<span>🎲</span>
|
||||||
<span>НАЙТИ ФИЛЬМ</span>
|
<span data-i18n="findMovie">НАЙТИ ФИЛЬМ</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -163,6 +170,12 @@
|
|||||||
<div class="movie-card">
|
<div class="movie-card">
|
||||||
<div class="movie-poster">
|
<div class="movie-poster">
|
||||||
<img id="moviePoster" src="" alt="Movie Poster">
|
<img id="moviePoster" src="" alt="Movie Poster">
|
||||||
|
<div class="poster-overlay">
|
||||||
|
<a href="#" class="watch-btn" id="watchButton" target="_blank" rel="noopener">
|
||||||
|
<span>▶️</span>
|
||||||
|
<span data-i18n="watchNow">Смотреть</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="movie-info">
|
<div class="movie-info">
|
||||||
<h2 class="movie-title" id="movieTitle"></h2>
|
<h2 class="movie-title" id="movieTitle"></h2>
|
||||||
@ -175,14 +188,15 @@
|
|||||||
<div class="movie-rating" id="movieRating"></div>
|
<div class="movie-rating" id="movieRating"></div>
|
||||||
<div class="movie-genres" id="movieGenres"></div>
|
<div class="movie-genres" id="movieGenres"></div>
|
||||||
<p class="movie-description" id="movieDescription"></p>
|
<p class="movie-description" id="movieDescription"></p>
|
||||||
|
<div class="streaming-info" id="streamingInfo"></div>
|
||||||
<div class="movie-actions">
|
<div class="movie-actions">
|
||||||
<button class="favorite-btn" id="addToFavorites">
|
<button class="favorite-btn" id="addToFavorites">
|
||||||
<span>♡</span>
|
<span>♡</span>
|
||||||
<span>В избранное</span>
|
<span data-i18n="addFavorite">В избранное</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="another-btn" id="anotherMovie">
|
<button class="another-btn" id="anotherMovie">
|
||||||
<span>🎲</span>
|
<span>🎲</span>
|
||||||
<span>Другой фильм</span>
|
<span data-i18n="anotherMovie">Другой фильм</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -192,9 +206,9 @@
|
|||||||
<!-- Empty State -->
|
<!-- Empty State -->
|
||||||
<div class="empty-state" id="emptyState" style="display: none;">
|
<div class="empty-state" id="emptyState" style="display: none;">
|
||||||
<div class="empty-icon">😅</div>
|
<div class="empty-icon">😅</div>
|
||||||
<h3>Кажется, мы слишком сильно ограничили выбор</h3>
|
<h3 data-i18n="emptyTitle">Кажется, мы слишком сильно ограничили выбор</h3>
|
||||||
<p>Попробуй убрать один из фильтров</p>
|
<p data-i18n="emptyText">Попробуй убрать один из фильтров</p>
|
||||||
<button class="reset-filters-btn" id="resetFiltersEmpty">Сбросить фильтры</button>
|
<button class="reset-filters-btn" id="resetFiltersEmpty" data-i18n="resetFilters">Сбросить фильтры</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Loading Animation -->
|
<!-- Loading Animation -->
|
||||||
@ -206,32 +220,32 @@
|
|||||||
<!-- Favorites Page -->
|
<!-- Favorites Page -->
|
||||||
<section class="page favorites-page" id="favorites">
|
<section class="page favorites-page" id="favorites">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<button class="back-btn" data-page="home">← Назад</button>
|
<button class="back-btn" data-page="home">← <span data-i18n="back">Назад</span></button>
|
||||||
<h1>Мои фильмы ❤️</h1>
|
<h1 data-i18n="myFavorites">Мои фильмы ❤️</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="movies-grid" id="favoritesGrid"></div>
|
<div class="movies-grid" id="favoritesGrid"></div>
|
||||||
<div class="empty-favorites" id="emptyFavorites" style="display: none;">
|
<div class="empty-favorites" id="emptyFavorites" style="display: none;">
|
||||||
<div class="empty-icon">💔</div>
|
<div class="empty-icon">💔</div>
|
||||||
<h3>Здесь пока пусто</h3>
|
<h3 data-i18n="favoritesEmpty">Здесь пока пусто</h3>
|
||||||
<p>Найдём тебе первый фильм? 🎬</p>
|
<p data-i18n="findFirstFilm">Найдём тебе первый фильм? 🎬</p>
|
||||||
<button class="find-btn" data-page="home">Найти фильм</button>
|
<button class="find-btn" data-page="home" data-i18n="findMovie">Найти фильм</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- History Page -->
|
<!-- History Page -->
|
||||||
<section class="page history-page" id="history">
|
<section class="page history-page" id="history">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<button class="back-btn" data-page="home">← Назад</button>
|
<button class="back-btn" data-page="home">← <span data-i18n="back">Назад</span></button>
|
||||||
<h1>История просмотров</h1>
|
<h1 data-i18n="viewingHistory">История просмотров</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="movies-grid" id="historyGrid"></div>
|
<div class="movies-grid" id="historyGrid"></div>
|
||||||
<div class="empty-history" id="emptyHistory" style="display: none;">
|
<div class="empty-history" id="emptyHistory" style="display: none;">
|
||||||
<div class="empty-icon">🕘</div>
|
<div class="empty-icon">🕘</div>
|
||||||
<h3>История пуста</h3>
|
<h3 data-i18n="historyEmpty">История пуста</h3>
|
||||||
<p>Ты ещё не смотрел фильмы через FILMORA</p>
|
<p data-i18n="noHistory">Ты ещё не смотрел фильмы через FILMORA</p>
|
||||||
<button class="find-btn" data-page="home">Найти фильм</button>
|
<button class="find-btn" data-page="home" data-i18n="findMovie">Найти фильм</button>
|
||||||
</div>
|
</div>
|
||||||
<button class="clear-history-btn" id="clearHistory" style="display: none;">
|
<button class="clear-history-btn" id="clearHistory" style="display: none;" data-i18n="clearHistory">
|
||||||
Очистить историю
|
Очистить историю
|
||||||
</button>
|
</button>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
295
script.js
295
script.js
@ -1,3 +1,189 @@
|
|||||||
|
// ==================== I18N TRANSLATIONS ====================
|
||||||
|
const TRANSLATIONS = {
|
||||||
|
ru: {
|
||||||
|
favorites: "Избранное",
|
||||||
|
history: "История",
|
||||||
|
heroTitle: "Что смотрим сегодня?",
|
||||||
|
heroSubtitle: "Ответь на несколько вопросов — и мы найдём фильм",
|
||||||
|
moodTitle: "Настроение",
|
||||||
|
moodFun: "Весело",
|
||||||
|
moodScary: "Страшно",
|
||||||
|
moodThink: "Подумать",
|
||||||
|
moodRomance: "Романтика",
|
||||||
|
moodDrive: "Драйв",
|
||||||
|
moodComedy: "Комедия",
|
||||||
|
moodSad: "Грустное",
|
||||||
|
moodUnusual: "Что-то необычное",
|
||||||
|
filtersTitle: "Фильтры",
|
||||||
|
resetFilters: "Сбросить фильтры",
|
||||||
|
filterGenre: "Жанр",
|
||||||
|
genreAny: "Любой жанр",
|
||||||
|
genreAction: "Боевик",
|
||||||
|
genreComedy: "Комедия",
|
||||||
|
genreDrama: "Драма",
|
||||||
|
genreScifi: "Фантастика",
|
||||||
|
genreHorror: "Ужасы",
|
||||||
|
genreThriller: "Триллер",
|
||||||
|
genreAdventure: "Приключения",
|
||||||
|
genreFantasy: "Фэнтези",
|
||||||
|
genreMystery: "Детектив",
|
||||||
|
genreRomance: "Романтика",
|
||||||
|
genreAnimation: "Анимация",
|
||||||
|
genreCrime: "Криминал",
|
||||||
|
genreHistory: "История",
|
||||||
|
filterYear: "Год",
|
||||||
|
yearAny: "Любой год",
|
||||||
|
yearBefore1990: "До 1990",
|
||||||
|
filterRating: "Рейтинг",
|
||||||
|
ratingAny: "Любой",
|
||||||
|
filterDuration: "Длительность",
|
||||||
|
durationAny: "Любая",
|
||||||
|
duration90: "До 90 минут",
|
||||||
|
duration120: "До 120 минут",
|
||||||
|
duration150: "До 150 минут",
|
||||||
|
duration150plus: "Более 150 минут",
|
||||||
|
randomMode: "Я НЕ ЗНАЮ, ЧТО ХОЧУ",
|
||||||
|
findMovie: "НАЙТИ ФИЛЬМ",
|
||||||
|
watchNow: "Смотреть",
|
||||||
|
addFavorite: "В избранное",
|
||||||
|
anotherMovie: "Другой фильм",
|
||||||
|
emptyTitle: "Кажется, мы слишком сильно ограничили выбор",
|
||||||
|
emptyText: "Попробуй убрать один из фильтров",
|
||||||
|
back: "Назад",
|
||||||
|
myFavorites: "Мои фильмы ❤️",
|
||||||
|
favoritesEmpty: "Здесь пока пусто",
|
||||||
|
findFirstFilm: "Найдём тебе первый фильм? 🎬",
|
||||||
|
viewingHistory: "История просмотров",
|
||||||
|
historyEmpty: "История пуста",
|
||||||
|
noHistory: "Ты ещё не смотрел фильмы через FILMORA",
|
||||||
|
clearHistory: "Очистить историю",
|
||||||
|
whereToWatch: "Где смотреть",
|
||||||
|
streamingAvailable: "Доступно на платформах"
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
favorites: "Favorites",
|
||||||
|
history: "History",
|
||||||
|
heroTitle: "What are we watching tonight?",
|
||||||
|
heroSubtitle: "Answer a few questions and we'll find your perfect movie",
|
||||||
|
moodTitle: "Mood",
|
||||||
|
moodFun: "Fun",
|
||||||
|
moodScary: "Scary",
|
||||||
|
moodThink: "Thoughtful",
|
||||||
|
moodRomance: "Romance",
|
||||||
|
moodDrive: "Action",
|
||||||
|
moodComedy: "Comedy",
|
||||||
|
moodSad: "Sad",
|
||||||
|
moodUnusual: "Something unusual",
|
||||||
|
filtersTitle: "Filters",
|
||||||
|
resetFilters: "Reset filters",
|
||||||
|
filterGenre: "Genre",
|
||||||
|
genreAny: "Any genre",
|
||||||
|
genreAction: "Action",
|
||||||
|
genreComedy: "Comedy",
|
||||||
|
genreDrama: "Drama",
|
||||||
|
genreScifi: "Sci-Fi",
|
||||||
|
genreHorror: "Horror",
|
||||||
|
genreThriller: "Thriller",
|
||||||
|
genreAdventure: "Adventure",
|
||||||
|
genreFantasy: "Fantasy",
|
||||||
|
genreMystery: "Mystery",
|
||||||
|
genreRomance: "Romance",
|
||||||
|
genreAnimation: "Animation",
|
||||||
|
genreCrime: "Crime",
|
||||||
|
genreHistory: "History",
|
||||||
|
filterYear: "Year",
|
||||||
|
yearAny: "Any year",
|
||||||
|
yearBefore1990: "Before 1990",
|
||||||
|
filterRating: "Rating",
|
||||||
|
ratingAny: "Any",
|
||||||
|
filterDuration: "Duration",
|
||||||
|
durationAny: "Any",
|
||||||
|
duration90: "Up to 90 min",
|
||||||
|
duration120: "Up to 120 min",
|
||||||
|
duration150: "Up to 150 min",
|
||||||
|
duration150plus: "Over 150 min",
|
||||||
|
randomMode: "I DON'T KNOW WHAT I WANT",
|
||||||
|
findMovie: "FIND MOVIE",
|
||||||
|
watchNow: "Watch Now",
|
||||||
|
addFavorite: "Add to favorites",
|
||||||
|
anotherMovie: "Another movie",
|
||||||
|
emptyTitle: "Hmm, filters are too strict",
|
||||||
|
emptyText: "Try removing some filters",
|
||||||
|
back: "Back",
|
||||||
|
myFavorites: "My Movies ❤️",
|
||||||
|
favoritesEmpty: "Nothing here yet",
|
||||||
|
findFirstFilm: "Find your first movie? 🎬",
|
||||||
|
viewingHistory: "Viewing History",
|
||||||
|
historyEmpty: "History is empty",
|
||||||
|
noHistory: "You haven't watched any movies through FILMORA yet",
|
||||||
|
clearHistory: "Clear history",
|
||||||
|
whereToWatch: "Where to watch",
|
||||||
|
streamingAvailable: "Available on"
|
||||||
|
},
|
||||||
|
kk: {
|
||||||
|
favorites: "Таңдаулы",
|
||||||
|
history: "Тарих",
|
||||||
|
heroTitle: "Бүгін не көреміз?",
|
||||||
|
heroSubtitle: "Бірнеше сұраққа жауап бер — біз фильм табамыз",
|
||||||
|
moodTitle: "Көңіл-күй",
|
||||||
|
moodFun: "Көңілді",
|
||||||
|
moodScary: "Қорқынышты",
|
||||||
|
moodThink: "Ойлану",
|
||||||
|
moodRomance: "Романтика",
|
||||||
|
moodDrive: "Драйв",
|
||||||
|
moodComedy: "Комедия",
|
||||||
|
moodSad: "Мұңлы",
|
||||||
|
moodUnusual: "Ерекше нәрсе",
|
||||||
|
filtersTitle: "Сүзгілер",
|
||||||
|
resetFilters: "Сүзгілерді тазалау",
|
||||||
|
filterGenre: "Жанр",
|
||||||
|
genreAny: "Кез келген жанр",
|
||||||
|
genreAction: "Боевик",
|
||||||
|
genreComedy: "Комедия",
|
||||||
|
genreDrama: "Драма",
|
||||||
|
genreScifi: "Фантастика",
|
||||||
|
genreHorror: "Қорқынышты",
|
||||||
|
genreThriller: "Триллер",
|
||||||
|
genreAdventure: "Шытырман",
|
||||||
|
genreFantasy: "Фэнтези",
|
||||||
|
genreMystery: "Детектив",
|
||||||
|
genreRomance: "Романтика",
|
||||||
|
genreAnimation: "Анимация",
|
||||||
|
genreCrime: "Қылмыс",
|
||||||
|
genreHistory: "Тарих",
|
||||||
|
filterYear: "Жыл",
|
||||||
|
yearAny: "Кез келген жыл",
|
||||||
|
yearBefore1990: "1990 дейін",
|
||||||
|
filterRating: "Рейтинг",
|
||||||
|
ratingAny: "Кез келген",
|
||||||
|
filterDuration: "Ұзақтығы",
|
||||||
|
durationAny: "Кез келген",
|
||||||
|
duration90: "90 минутқа дейін",
|
||||||
|
duration120: "120 минутқа дейін",
|
||||||
|
duration150: "150 минутқа дейін",
|
||||||
|
duration150plus: "150 минуттан көп",
|
||||||
|
randomMode: "БІЛМЕЙМІН НЕ ҚАЛАЙМЫН",
|
||||||
|
findMovie: "ФИЛЬМ ТАБУ",
|
||||||
|
watchNow: "Көру",
|
||||||
|
addFavorite: "Таңдаулыға қосу",
|
||||||
|
anotherMovie: "Басқа фильм",
|
||||||
|
emptyTitle: "Сүзгілер тым қатаң",
|
||||||
|
emptyText: "Бір сүзгіні алып таста",
|
||||||
|
back: "Артқа",
|
||||||
|
myFavorites: "Менің фильмдерім ❤️",
|
||||||
|
favoritesEmpty: "Әлі бос",
|
||||||
|
findFirstFilm: "Алғашқы фильмді табайық па? 🎬",
|
||||||
|
viewingHistory: "Көру тарихы",
|
||||||
|
historyEmpty: "Тарих бос",
|
||||||
|
noHistory: "FILMORA арқылы әлі фильм көрмедің",
|
||||||
|
clearHistory: "Тарихты тазалау",
|
||||||
|
whereToWatch: "Қайда көруге",
|
||||||
|
streamingAvailable: "Платформаларда қолжетімді"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
let currentLang = localStorage.getItem('filmora_lang') || 'ru';
|
||||||
|
|
||||||
// ==================== MOVIE DATABASE ====================
|
// ==================== MOVIE DATABASE ====================
|
||||||
const MOVIES = [
|
const MOVIES = [
|
||||||
{
|
{
|
||||||
@ -9,8 +195,12 @@ const MOVIES = [
|
|||||||
duration: 142,
|
duration: 142,
|
||||||
genres: ["drama", "crime"],
|
genres: ["drama", "crime"],
|
||||||
moods: ["think", "sad"],
|
moods: ["think", "sad"],
|
||||||
description: "Бухгалтер Энди Дюфрейн обвинён в убийстве собственной жены и её любовника. Оказавшись в тюрьме под названием Шоушенк, он сталкивается с жестокостью и беззаконием, царящими по обе стороны решётки.",
|
description: "Бухгалтер Энди Дюфрейн обвинён в убийстве собственной жены и её любовника. Оказавшись в тюрьме под названием Шоушенк, он сталкивается с жестокостью и беззаконием.",
|
||||||
poster: "https://image.tmdb.org/t/p/w500/q6y0Go1tsGEsmtFryDOJo3dEmqu.jpg"
|
poster: "https://image.tmdb.org/t/p/w500/q6y0Go1tsGEsmtFryDOJo3dEmqu.jpg",
|
||||||
|
streaming: [
|
||||||
|
{ name: "Netflix", icon: "🎬", url: "https://www.netflix.com" },
|
||||||
|
{ name: "Kinopoisk", icon: "🎭", url: "https://www.kinopoisk.ru" }
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
@ -941,6 +1131,36 @@ function displayMovie(movie) {
|
|||||||
).join('');
|
).join('');
|
||||||
movieDescription.textContent = movie.description;
|
movieDescription.textContent = movie.description;
|
||||||
|
|
||||||
|
// Update streaming info
|
||||||
|
const streamingInfo = document.getElementById('streamingInfo');
|
||||||
|
if (movie.streaming && movie.streaming.length > 0) {
|
||||||
|
const t = TRANSLATIONS[currentLang];
|
||||||
|
streamingInfo.innerHTML = `
|
||||||
|
<h4>${t.whereToWatch}</h4>
|
||||||
|
<div class="streaming-services">
|
||||||
|
${movie.streaming.map(s => `
|
||||||
|
<a href="${s.url}" target="_blank" rel="noopener" class="streaming-service">
|
||||||
|
<span class="icon">${s.icon}</span>
|
||||||
|
<span>${s.name}</span>
|
||||||
|
</a>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
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
|
// Update favorite button state
|
||||||
const isFavorite = favorites.some(f => f.id === movie.id);
|
const isFavorite = favorites.some(f => f.id === movie.id);
|
||||||
addToFavoritesBtn.classList.toggle('active', isFavorite);
|
addToFavoritesBtn.classList.toggle('active', isFavorite);
|
||||||
@ -1128,7 +1348,78 @@ randomModeBtn.addEventListener('click', () => {
|
|||||||
findMovie();
|
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 ====================
|
// ==================== INITIALIZATION ====================
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
updateTexts();
|
||||||
showPage('home');
|
showPage('home');
|
||||||
});
|
});
|
||||||
|
|||||||
131
style.css
131
style.css
@ -130,6 +130,42 @@ body {
|
|||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
position: relative;
|
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 {
|
.header::after {
|
||||||
@ -552,6 +588,101 @@ body {
|
|||||||
pointer-events: none;
|
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 {
|
.movie-poster img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user