Spaces:

SURESHBEEKHANI
/

Movie-Recommender-System

Sleeping

App Files Files Community

Movie-Recommender-System / templates /index.html

SURESHBEEKHANI

Upload index.html

7eb1471 verified about 1 year ago

raw

history blame contribute delete

3.36 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!-- Character encoding set to UTF-8 to support various languages -->
	<meta charset="UTF-8">
	<!-- Viewport meta tag for responsive design on mobile devices -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Title of the web page, displayed on the browser tab -->
	<title>Movie Recommender</title>

	<!-- Link to Bootstrap CSS framework for styling and layout -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<!-- Link to custom CSS file for additional styling, using Flask's url_for to load it from the 'static' folder -->
	<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
	</head>
	<body>

	<!-- Hero Banner Section -->
	<div class="hero-banner">
	<!-- Main heading for the hero banner -->
	<h1>Discover Movies You'll Love</h1>
	<!-- Subtitle in the hero banner, encouraging the user to make a selection -->
	<p>Choose a favorite, and we’ll recommend similar movies!</p>
	</div>

	<!-- Movie Selection Form Section -->
	<div class="container mt-5">
	<!-- Form for selecting a movie, using POST method to submit data to the server -->
	<form method="POST" class="text-center mb-4">
	<!-- Dropdown selection menu for choosing a movie -->
	<select class="form-control" name="movie" required>
	<!-- Placeholder option to prompt user selection -->
	<option disabled selected>Select a movie...</option>
	<!-- Looping through 'movies' variable from Flask to populate dropdown options -->
	{% for movie in movies %}
	<option>{{ movie }}</option>
	{% endfor %}
	</select>
	<!-- Submit button for the form -->
	<button type="submit" class="btn btn-primary mt-3">Show Recommendations</button>
	</form>

	<!-- Recommendations Display Section -->
	<!-- Check if there are any recommended movies to display -->
	{% if recommended_movie_names %}
	<h3 class="text-center">Recommendations for "{{ selected_movie }}"</h3>
	<div class="row">
	<!-- Loop through recommended movie names and posters to create a card for each recommendation -->
	{% for name, poster in zip(recommended_movie_names, recommended_movie_posters) %}
	<div class="col-md-3 col-sm-6 mb-3">
	<!-- Bootstrap card for each recommended movie -->
	<div class="card">
	<!-- Image of the recommended movie's poster -->
	<img src="{{ poster }}" class="card-img-top" alt="{{ name }}">
	<!-- Card body containing the movie title -->
	<div class="card-body text-center">
	<h5 class="card-title">{{ name }}</h5>
	</div>
	</div>
	</div>
	{% endfor %}
	</div>
	{% endif %}
	</div>

	<!-- Footer Section -->
	<footer class="footer">
	<!-- Footer text, including the copyright notice -->
	<p>© 2023 Movie Recommender</p>
	</footer>
	</body>
	</html>