|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>NEW</title> |
|
|
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
|
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans&display=swap" rel="stylesheet"> |
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet"> |
|
<link href="https://fonts.googleapis.com/css2?family=Rowdies:wght@300&display=swap" rel="stylesheet"> |
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
|
|
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> |
|
|
|
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='style.css') }}"> |
|
|
|
</head> |
|
|
|
<body id="content"> |
|
|
|
<div class="results"> |
|
<center> |
|
<h2 id="name" class="text-uppercase" style="font-family: 'Rowdies', cursive;">{{title}}</h2> |
|
</center> |
|
</div> |
|
<br/> |
|
|
|
<div id="mycontent"> |
|
<div id="mcontent"> |
|
<div class="poster-lg"> |
|
<img class="poster" style="border-radius: 40px;margin-left: 90px;" height="400" width="250" src={{poster}}> |
|
</div> |
|
<div class="poster-sm text-center"> |
|
<img class="poster" style="border-radius: 40px;margin-bottom: 5%;" height="400" width="250" src={{poster}}> |
|
</div> |
|
<div id="details"> |
|
<br/> |
|
<h6 id="title" style="color:white;">TITLE: {{title}}</h6> |
|
<h6 id="overview" style="color:white;max-width: 85%">OVERVIEW: <br/><br/> {{overview}}</h6> |
|
<h6 id="vote_average" style="color:white;">RATING: {{vote_average}}/10 ({{vote_count}} votes)</h6> |
|
<h6 id="genres" style="color:white;">GENRE: {{genres}}</h6> |
|
<h6 id="date" style="color:white;">RELEASE DATE: {{release_date}}</h6> |
|
<h6 id="runtime" style="color:white;">RUNTIME: {{runtime}}</h6> |
|
<h6 id="status" style="color:white;">STATUS: {{status}}</h6> |
|
</div> |
|
</div> |
|
</div> |
|
<br/> |
|
|
|
{% for name, details in cast_details.items() if not cast_details.hidden %} |
|
<div class="modal fade" id="{{details[0]}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3" aria-hidden="true"> |
|
<div class="modal-dialog modal-lg" role="document"> |
|
<div class="modal-content"> |
|
<div class="modal-header" style="background-color: #e50914;color: white;"> |
|
<h5 class="modal-title" id="exampleModalLabel3">{{name}}</h5> |
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|
<span aria-hidden="true" style="color: white">×</span> |
|
</button> |
|
</div> |
|
|
|
<div class="modal-body"> |
|
<img class="profile-pic" src="{{details[1]}}" alt="{{name}} - profile" style="width: 250px;height:400px;border-radius: 10px;" /> |
|
<div style="margin-left: 20px"> |
|
<p><strong>Birthday:</strong> {{details[2]}} </p> |
|
<p><strong>Place of Birth:</strong> {{details[3]}} </p> |
|
<p> |
|
<p><strong>Biography:</strong><p> |
|
{{details[4]}} |
|
</p> |
|
</div> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
{% endfor %} |
|
|
|
<div class="container"> |
|
|
|
{% if casts|length > 1 %} |
|
<div class="movie" style="color: #E8E8E8;"> |
|
<center> |
|
<h2 style="font-family: 'Rowdies', cursive;">TOP CAST</h2> |
|
<h5>(Click on the cast to know more)</h5> |
|
</center> |
|
</div> |
|
|
|
|
|
<div class="movie-content"> |
|
{% for name, details in casts.items() if not casts.hidden %} |
|
<div class="castcard card" style="width: 14rem;" title="Click to know more about {{name}}" data-toggle="modal" data-target="#{{details[0]}}"> |
|
<div class="imghvr"> |
|
<img class="card-img-top cast-img" id="{{details[0]}}" height="360" width="240" alt="{{name}} - profile" src="{{details[2]}}"> |
|
<figcaption class="fig"> |
|
<button class="card-btn btn btn-danger"> Know More </button> |
|
</figcaption> |
|
</div> |
|
<div class="card-body" style="font-family: 'Rowdies', cursive;font-size: 18px;"> |
|
<h5 class="card-title">{{name|upper}}</h5> |
|
<h5 class="card-title" style="font-size: 18px"><span style="color:#756969;font-size: 18px;">AS {{details[1]|upper}}</span></h5> |
|
</div> |
|
</div> |
|
{% endfor %} |
|
</div> |
|
{% endif %} |
|
<br/> |
|
|
|
<center> |
|
{% if reviews %} |
|
<h2 style="font-family: 'Rowdies', cursive;color:white">USER REVIEWS</h2> |
|
<div class="col-md-12" style="margin: 0 auto; margin-top:25px;"> |
|
<table class="table table-bordered" bordercolor="white" style="color:white"> |
|
<thead> |
|
<tr> |
|
<th class="text-center" scope="col" style="width: 75%">Comments</th> |
|
<th class="text-center" scope="col">Sentiments</th> |
|
</tr> |
|
</thead> |
|
|
|
<tbody> |
|
{% for review, status in reviews.items() if not reviews.hidden %} |
|
<tr style="background-color:#e5091485;"> |
|
<td>{{review}}</td> |
|
<td> |
|
<center> |
|
{{status}} : |
|
{% if status =='Positive' %} |
|
😃 |
|
{% else %} |
|
😖 |
|
{% endif %} |
|
</center> |
|
</td> |
|
</tr> |
|
{% endfor %} |
|
</tbody> |
|
</table> |
|
</div> |
|
|
|
{% if (curr_date) and (movie_rel_date) %} |
|
{% elif curr_date < movie_rel_date %} |
|
<div style="color:white;"> |
|
<h1 style="color:white"> This movie is not released yet. Stay tuned! </h1> |
|
</div> |
|
{% else %} |
|
<div style="color:white;"> |
|
<h1 style="color:white"> Sorry, the reviews for this movie are not available! :( </h1> |
|
</div> |
|
{% endif %} |
|
{% else %} |
|
<div style="color:white;"> |
|
<h1 style="color:white"> Sorry, the reviews for this movie are not available! :( </h1> |
|
</div> |
|
{% endif %} |
|
</center> |
|
<br/> |
|
|
|
|
|
{% if movie_cards|length > 1 %} |
|
|
|
<div class="movie" style="color: #E8E8E8;"> |
|
<center><h2 style="font-family: 'Rowdies', cursive;">RECOMMENDED MOVIES FOR YOU</h2><h5>(Click any of the movies to get recommendation)</h5></center> |
|
</div> |
|
|
|
<div class="movie-content"> |
|
{% for poster, details in movie_cards.items() if not movie_cards.hidden %} |
|
<div class="card" style="width: 14rem;" title="{{details[1]}}" onclick="recommendcard(this)"> |
|
<div class="imghvr"> |
|
<img class="card-img-top" height="360" width="240" alt="{{details[0]}} - poster" src={{poster}}> |
|
<div class="card-img-overlay" > |
|
<span class="card-text" style="font-size:15px;background: #000000b8;color:white;padding:2px 5px;border-radius: 10px;"><span class="fa fa-star checked"> {{details[2]}}/10</span></span> |
|
</div> |
|
<div class=".card-img-overlay" style="position: relative;"> |
|
<span class="card-text" style="font-size:15px;position:absolute;bottom:20px;left:15px;background: #000000b8;color:white;padding: 5px;border-radius: 10px;">{{details[3]}}</span> |
|
</div> |
|
<figcaption class="fig"> |
|
<button class="card-btn btn btn-danger"> Click Me </button> |
|
</figcaption> |
|
</div> |
|
<div class="card-body"> |
|
<h5 class="card-title" style="font-family: 'Rowdies', cursive;font-size: 17px;">{{details[0]|upper}}</h5> |
|
</div> |
|
</div> |
|
{% endfor %} |
|
</div> |
|
{% endif %} |
|
<br/><br/><br/><br/> |
|
</div> |
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> |
|
<script type="text/javascript" src="{{url_for('static', filename='recommend.js')}}"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> |
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> |
|
|
|
</body> |
|
</html> |
|
|
