232 lines
9.6 KiB
HTML
232 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>FILMORA — Find your movie tonight</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<!-- Header -->
|
||
<header class="header">
|
||
<div class="logo">FILMORA</div>
|
||
<nav class="nav">
|
||
<button class="nav-btn" data-page="favorites">
|
||
<span class="nav-icon">❤️</span>
|
||
<span class="nav-text">Избранное</span>
|
||
</button>
|
||
<button class="nav-btn" data-page="history">
|
||
<span class="nav-icon">🕘</span>
|
||
<span class="nav-text">История</span>
|
||
</button>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- Main Content -->
|
||
<main class="main-content">
|
||
<!-- Home Page -->
|
||
<section class="page home-page active" id="home">
|
||
<div class="hero">
|
||
<h1 class="hero-title">Что смотрим сегодня?</h1>
|
||
<p class="hero-subtitle">Ответь на несколько вопросов — и мы найдём фильм</p>
|
||
</div>
|
||
|
||
<!-- Mood Selector -->
|
||
<div class="mood-section">
|
||
<h2 class="section-title">Настроение</h2>
|
||
<div class="mood-grid">
|
||
<button class="mood-btn" data-mood="fun">
|
||
<span class="mood-emoji">😄</span>
|
||
<span class="mood-label">Весело</span>
|
||
</button>
|
||
<button class="mood-btn" data-mood="scary">
|
||
<span class="mood-emoji">😱</span>
|
||
<span class="mood-label">Страшно</span>
|
||
</button>
|
||
<button class="mood-btn" data-mood="think">
|
||
<span class="mood-emoji">🧠</span>
|
||
<span class="mood-label">Подумать</span>
|
||
</button>
|
||
<button class="mood-btn" data-mood="romance">
|
||
<span class="mood-emoji">❤️</span>
|
||
<span class="mood-label">Романтика</span>
|
||
</button>
|
||
<button class="mood-btn" data-mood="drive">
|
||
<span class="mood-emoji">🔥</span>
|
||
<span class="mood-label">Драйв</span>
|
||
</button>
|
||
<button class="mood-btn" data-mood="comedy">
|
||
<span class="mood-emoji">😂</span>
|
||
<span class="mood-label">Комедия</span>
|
||
</button>
|
||
<button class="mood-btn" data-mood="sad">
|
||
<span class="mood-emoji">😢</span>
|
||
<span class="mood-label">Грустное</span>
|
||
</button>
|
||
<button class="mood-btn" data-mood="unusual">
|
||
<span class="mood-emoji">🤯</span>
|
||
<span class="mood-label">Что-то необычное</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Filters -->
|
||
<div class="filters-section">
|
||
<div class="filters-header">
|
||
<h2 class="section-title">Фильтры</h2>
|
||
<button class="reset-filters-btn" id="resetFilters">Сбросить фильтры</button>
|
||
</div>
|
||
<div class="filters-grid">
|
||
<div class="filter-group">
|
||
<label class="filter-label">Жанр</label>
|
||
<select class="filter-select" id="genreFilter">
|
||
<option value="any">Любой жанр</option>
|
||
<option value="action">Боевик</option>
|
||
<option value="comedy">Комедия</option>
|
||
<option value="drama">Драма</option>
|
||
<option value="scifi">Фантастика</option>
|
||
<option value="horror">Ужасы</option>
|
||
<option value="thriller">Триллер</option>
|
||
<option value="adventure">Приключения</option>
|
||
<option value="fantasy">Фэнтези</option>
|
||
<option value="mystery">Детектив</option>
|
||
<option value="romance">Романтика</option>
|
||
<option value="animation">Анимация</option>
|
||
<option value="crime">Криминал</option>
|
||
<option value="history">История</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label class="filter-label">Год</label>
|
||
<select class="filter-select" id="yearFilter">
|
||
<option value="any">Любой год</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">До 1990</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label class="filter-label">Рейтинг</label>
|
||
<select class="filter-select" id="ratingFilter">
|
||
<option value="any">Любой</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">Длительность</label>
|
||
<select class="filter-select" id="durationFilter">
|
||
<option value="any">Любая</option>
|
||
<option value="90">До 90 минут</option>
|
||
<option value="120">До 120 минут</option>
|
||
<option value="150">До 150 минут</option>
|
||
<option value="150+">Более 150 минут</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Action Buttons -->
|
||
<div class="action-buttons">
|
||
<button class="random-btn" id="randomMode">
|
||
<span>🤷</span>
|
||
<span>Я НЕ ЗНАЮ, ЧТО ХОЧУ</span>
|
||
</button>
|
||
<button class="find-btn" id="findMovie">
|
||
<span>🎲</span>
|
||
<span>НАЙТИ ФИЛЬМ</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>
|
||
<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="movie-actions">
|
||
<button class="favorite-btn" id="addToFavorites">
|
||
<span>♡</span>
|
||
<span>В избранное</span>
|
||
</button>
|
||
<button class="another-btn" id="anotherMovie">
|
||
<span>🎲</span>
|
||
<span>Другой фильм</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Empty State -->
|
||
<div class="empty-state" id="emptyState" style="display: none;">
|
||
<div class="empty-icon">😅</div>
|
||
<h3>Кажется, мы слишком сильно ограничили выбор</h3>
|
||
<p>Попробуй убрать один из фильтров</p>
|
||
<button class="reset-filters-btn" id="resetFiltersEmpty">Сбросить фильтры</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">← Назад</button>
|
||
<h1>Мои фильмы ❤️</h1>
|
||
</div>
|
||
<div class="movies-grid" id="favoritesGrid"></div>
|
||
<div class="empty-favorites" id="emptyFavorites" style="display: none;">
|
||
<div class="empty-icon">💔</div>
|
||
<h3>Здесь пока пусто</h3>
|
||
<p>Найдём тебе первый фильм? 🎬</p>
|
||
<button class="find-btn" data-page="home">Найти фильм</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- History Page -->
|
||
<section class="page history-page" id="history">
|
||
<div class="page-header">
|
||
<button class="back-btn" data-page="home">← Назад</button>
|
||
<h1>История просмотров</h1>
|
||
</div>
|
||
<div class="movies-grid" id="historyGrid"></div>
|
||
<div class="empty-history" id="emptyHistory" style="display: none;">
|
||
<div class="empty-icon">🕘</div>
|
||
<h3>История пуста</h3>
|
||
<p>Ты ещё не смотрел фильмы через FILMORA</p>
|
||
<button class="find-btn" data-page="home">Найти фильм</button>
|
||
</div>
|
||
<button class="clear-history-btn" id="clearHistory" style="display: none;">
|
||
Очистить историю
|
||
</button>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|