258 lines
12 KiB
HTML
258 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<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>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<!-- Animated Background Particles -->
|
||
<div class="particles">
|
||
<div class="particle" style="left: 10%; animation-delay: 0s;"></div>
|
||
<div class="particle" style="left: 20%; animation-delay: 2s;"></div>
|
||
<div class="particle" style="left: 30%; animation-delay: 4s;"></div>
|
||
<div class="particle" style="left: 40%; animation-delay: 1s;"></div>
|
||
<div class="particle" style="left: 60%; animation-delay: 3s;"></div>
|
||
<div class="particle" style="left: 70%; animation-delay: 5s;"></div>
|
||
<div class="particle" style="left: 80%; animation-delay: 2.5s;"></div>
|
||
<div class="particle" style="left: 90%; animation-delay: 4.5s;"></div>
|
||
</div>
|
||
|
||
<div class="app">
|
||
<!-- Header -->
|
||
<header class="header">
|
||
<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">
|
||
<button class="nav-btn" data-page="favorites">
|
||
<span class="nav-icon">❤️</span>
|
||
<span class="nav-text" data-i18n="favorites">Избранное</span>
|
||
</button>
|
||
<button class="nav-btn" data-page="history">
|
||
<span class="nav-icon">🕘</span>
|
||
<span class="nav-text" data-i18n="history">История</span>
|
||
</button>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Content -->
|
||
<main class="main-content">
|
||
<!-- Home Page -->
|
||
<section class="page home-page active" id="home">
|
||
<div class="hero">
|
||
<h1 class="hero-title" data-i18n="heroTitle">Что смотрим сегодня?</h1>
|
||
<p class="hero-subtitle" data-i18n="heroSubtitle">Ответь на несколько вопросов — и мы найдём фильм</p>
|
||
</div>
|
||
|
||
<!-- Mood Selector -->
|
||
<div class="mood-section">
|
||
<h2 class="section-title" data-i18n="moodTitle">Настроение</h2>
|
||
<div class="mood-grid">
|
||
<button class="mood-btn" data-mood="fun">
|
||
<span class="mood-emoji">😄</span>
|
||
<span class="mood-label" data-i18n="moodFun">Весело</span>
|
||
</button>
|
||
<button class="mood-btn" data-mood="scary">
|
||
<span class="mood-emoji">😱</span>
|
||
<span class="mood-label" data-i18n="moodScary">Страшно</span>
|
||
</button>
|
||
<button class="mood-btn" data-mood="think">
|
||
<span class="mood-emoji">🧠</span>
|
||
<span class="mood-label" data-i18n="moodThink">Подумать</span>
|
||
</button>
|
||
<button class="mood-btn" data-mood="romance">
|
||
<span class="mood-emoji">❤️</span>
|
||
<span class="mood-label" data-i18n="moodRomance">Романтика</span>
|
||
</button>
|
||
<button class="mood-btn" data-mood="drive">
|
||
<span class="mood-emoji">🔥</span>
|
||
<span class="mood-label" data-i18n="moodDrive">Драйв</span>
|
||
</button>
|
||
<button class="mood-btn" data-mood="comedy">
|
||
<span class="mood-emoji">😂</span>
|
||
<span class="mood-label" data-i18n="moodComedy">Комедия</span>
|
||
</button>
|
||
<button class="mood-btn" data-mood="sad">
|
||
<span class="mood-emoji">😢</span>
|
||
<span class="mood-label" data-i18n="moodSad">Грустное</span>
|
||
</button>
|
||
<button class="mood-btn" data-mood="unusual">
|
||
<span class="mood-emoji">🤯</span>
|
||
<span class="mood-label" data-i18n="moodUnusual">Что-то необычное</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Filters -->
|
||
<div class="filters-section">
|
||
<div class="filters-header">
|
||
<h2 class="section-title" data-i18n="filtersTitle">Фильтры</h2>
|
||
<button class="reset-filters-btn" id="resetFilters" data-i18n="resetFilters">Сбросить фильтры</button>
|
||
</div>
|
||
<div class="filters-grid">
|
||
<div class="filter-group">
|
||
<label class="filter-label" data-i18n="filterGenre">Жанр</label>
|
||
<select class="filter-select" id="genreFilter">
|
||
<option value="any" data-i18n="genreAny">Любой жанр</option>
|
||
<option value="action" data-i18n="genreAction">Боевик</option>
|
||
<option value="comedy" data-i18n="genreComedy">Комедия</option>
|
||
<option value="drama" data-i18n="genreDrama">Драма</option>
|
||
<option value="scifi" data-i18n="genreScifi">Фантастика</option>
|
||
<option value="horror" data-i18n="genreHorror">Ужасы</option>
|
||
<option value="thriller" data-i18n="genreThriller">Триллер</option>
|
||
<option value="adventure" data-i18n="genreAdventure">Приключения</option>
|
||
<option value="fantasy" data-i18n="genreFantasy">Фэнтези</option>
|
||
<option value="mystery" data-i18n="genreMystery">Детектив</option>
|
||
<option value="romance" data-i18n="genreRomance">Романтика</option>
|
||
<option value="animation" data-i18n="genreAnimation">Анимация</option>
|
||
<option value="crime" data-i18n="genreCrime">Криминал</option>
|
||
<option value="history" data-i18n="genreHistory">История</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label class="filter-label" data-i18n="filterYear">Год</label>
|
||
<select class="filter-select" id="yearFilter">
|
||
<option value="any" data-i18n="yearAny">Любой год</option>
|
||
<option value="2020-2026">2020–2026</option>
|
||
<option value="2010-2019">2010–2019</option>
|
||
<option value="2000-2009">2000–2009</option>
|
||
<option value="1990-1999">1990–1999</option>
|
||
<option value="before-1990" data-i18n="yearBefore1990">До 1990</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label class="filter-label" data-i18n="filterRating">Рейтинг</label>
|
||
<select class="filter-select" id="ratingFilter">
|
||
<option value="any" data-i18n="ratingAny">Любой</option>
|
||
<option value="6">6.0+</option>
|
||
<option value="7">7.0+</option>
|
||
<option value="8">8.0+</option>
|
||
<option value="8.5">8.5+</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label class="filter-label" data-i18n="filterDuration">Длительность</label>
|
||
<select class="filter-select" id="durationFilter">
|
||
<option value="any" data-i18n="durationAny">Любая</option>
|
||
<option value="90" data-i18n="duration90">До 90 минут</option>
|
||
<option value="120" data-i18n="duration120">До 120 минут</option>
|
||
<option value="150" data-i18n="duration150">До 150 минут</option>
|
||
<option value="150+" data-i18n="duration150plus">Более 150 минут</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Action Buttons -->
|
||
<div class="action-buttons">
|
||
<button class="random-btn" id="randomMode">
|
||
<span>🤷</span>
|
||
<span data-i18n="randomMode">Я НЕ ЗНАЮ, ЧТО ХОЧУ</span>
|
||
</button>
|
||
<button class="find-btn" id="findMovie">
|
||
<span>🎲</span>
|
||
<span data-i18n="findMovie">НАЙТИ ФИЛЬМ</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Result Card -->
|
||
<div class="result-section" id="resultSection">
|
||
<div class="movie-card">
|
||
<div class="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 class="movie-info">
|
||
<h2 class="movie-title" id="movieTitle"></h2>
|
||
<p class="movie-original" id="movieOriginal"></p>
|
||
<div class="movie-meta">
|
||
<span id="movieYear"></span>
|
||
<span class="meta-dot">·</span>
|
||
<span id="movieDuration"></span>
|
||
</div>
|
||
<div class="movie-rating" id="movieRating"></div>
|
||
<div class="movie-genres" id="movieGenres"></div>
|
||
<p class="movie-description" id="movieDescription"></p>
|
||
<div class="streaming-info" id="streamingInfo"></div>
|
||
<div class="movie-actions">
|
||
<button class="favorite-btn" id="addToFavorites">
|
||
<span>♡</span>
|
||
<span data-i18n="addFavorite">В избранное</span>
|
||
</button>
|
||
<button class="another-btn" id="anotherMovie">
|
||
<span>🎲</span>
|
||
<span data-i18n="anotherMovie">Другой фильм</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Empty State -->
|
||
<div class="empty-state" id="emptyState" style="display: none;">
|
||
<div class="empty-icon">😅</div>
|
||
<h3 data-i18n="emptyTitle">Кажется, мы слишком сильно ограничили выбор</h3>
|
||
<p data-i18n="emptyText">Попробуй убрать один из фильтров</p>
|
||
<button class="reset-filters-btn" id="resetFiltersEmpty" data-i18n="resetFilters">Сбросить фильтры</button>
|
||
</div>
|
||
|
||
<!-- Loading Animation -->
|
||
<div class="loading-state" id="loadingState" style="display: none;">
|
||
<div class="loading-text" id="loadingText"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Favorites Page -->
|
||
<section class="page favorites-page" id="favorites">
|
||
<div class="page-header">
|
||
<button class="back-btn" data-page="home">← <span data-i18n="back">Назад</span></button>
|
||
<h1 data-i18n="myFavorites">Мои фильмы ❤️</h1>
|
||
</div>
|
||
<div class="movies-grid" id="favoritesGrid"></div>
|
||
<div class="empty-favorites" id="emptyFavorites" style="display: none;">
|
||
<div class="empty-icon">💔</div>
|
||
<h3 data-i18n="favoritesEmpty">Здесь пока пусто</h3>
|
||
<p data-i18n="findFirstFilm">Найдём тебе первый фильм? 🎬</p>
|
||
<button class="find-btn" data-page="home" data-i18n="findMovie">Найти фильм</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- History Page -->
|
||
<section class="page history-page" id="history">
|
||
<div class="page-header">
|
||
<button class="back-btn" data-page="home">← <span data-i18n="back">Назад</span></button>
|
||
<h1 data-i18n="viewingHistory">История просмотров</h1>
|
||
</div>
|
||
<div class="movies-grid" id="historyGrid"></div>
|
||
<div class="empty-history" id="emptyHistory" style="display: none;">
|
||
<div class="empty-icon">🕘</div>
|
||
<h3 data-i18n="historyEmpty">История пуста</h3>
|
||
<p data-i18n="noHistory">Ты ещё не смотрел фильмы через FILMORA</p>
|
||
<button class="find-btn" data-page="home" data-i18n="findMovie">Найти фильм</button>
|
||
</div>
|
||
<button class="clear-history-btn" id="clearHistory" style="display: none;" data-i18n="clearHistory">
|
||
Очистить историю
|
||
</button>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|