347 lines
12 KiB
HTML
347 lines
12 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
|
|
{% block title %} LORDCHANNEL {{ film.titolo }} {% endblock title %}
|
|
{% block content %}
|
|
<!-- details -->
|
|
<section class="section details">
|
|
<!-- details background -->
|
|
<div class="details__bg" data-bg="{{ film.immagine_background.url }}"></div>
|
|
<!-- end details background -->
|
|
|
|
|
|
<!-- details content -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- title -->
|
|
<div class="col-12">
|
|
<h1 class="details__title">{{ film.titolo }}</h1>
|
|
</div>
|
|
<!-- end title -->
|
|
|
|
<!-- content -->
|
|
<div class="card card--details">
|
|
<div class="row">
|
|
<!-- card cover -->
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-5">
|
|
<div class="card__cover">
|
|
<img src="{{ film.immagine_poster.url }}" style="display: block!important;margin: auto!important;" alt="">
|
|
</div>
|
|
</div>
|
|
<!-- end card cover -->
|
|
|
|
<!-- card content -->
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-7">
|
|
<div class="card__content">
|
|
<div class="card__wrap">
|
|
<span class="card__rate"><i class="icon ion-ios-star"></i>{{ film.voto }}</span>
|
|
|
|
<ul class="card__list">
|
|
<li>{{ film.qualità_video }}</li>
|
|
<li>{{ film.età_consigliata }}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<ul class="card__meta">
|
|
<li><span>Generi :</span>
|
|
{% for generi in film.genere.all %}
|
|
<a href="{{ generi.get_absolute_url }}">{{ generi.genere }}</a>
|
|
{% endfor %}
|
|
</li>
|
|
<li><span>Data di Uscita : </span> {{ film.data_uscita }}</li>
|
|
<li><span>Durata:</span> {{ film.durata }}</li>
|
|
<li><span>Lingua:</span> <a href="#">ITA</a> </li>
|
|
</ul>
|
|
|
|
<div style="width: 100%!important;" id="description_film" class="card__description card__description--details">
|
|
{{ film.descrizione }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end card content -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end content -->
|
|
|
|
|
|
|
|
<div class="col-12">
|
|
<div class="details__wrap">
|
|
<!-- availables -->
|
|
<div class="details__devices">
|
|
<span class="details__devices-title">Disponibile per i dispositivi:</span>
|
|
<ul class="details__devices-list">
|
|
<li><i class="icon ion-logo-apple"></i><span>IOS</span></li>
|
|
<li><i class="icon ion-logo-android"></i><span>Android</span></li>
|
|
<li><i class="icon ion-logo-windows"></i><span>Windows</span></li>
|
|
<li><i class="icon ion-md-tv"></i><span>Smart TV</span></li>
|
|
</ul>
|
|
</div>
|
|
<!-- end availables -->
|
|
|
|
<!-- share -->
|
|
<div class="details__share">
|
|
<span class="details__share-title">Condividi con gli amici:</span>
|
|
|
|
<ul class="details__share-list">
|
|
<li class="facebook"><a href="#"><i class="icon ion-logo-facebook"></i></a></li>
|
|
<li class="instagram"><a href="#"><i class="icon ion-logo-instagram"></i></a></li>
|
|
<li class="twitter"><a href="#"><i class="icon ion-logo-twitter"></i></a></li>
|
|
<li class="whatsapp"><a href="#"><i class="icon ion-logo-whatsapp"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- end share -->
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-top: 20px;">
|
|
<a href="{{ film.streaming_url }}" class="btn-streaming">
|
|
<i class="fas fa-play-circle"></i>
|
|
<span>GUARDA IN STREAMING</span>
|
|
</a>
|
|
</div>
|
|
{% if request.user.is_authenticated %}
|
|
{% if is_favorite %}
|
|
<div class="row">
|
|
<a href="{% url 'preferiti' slug=film.slug %}" class="preferiti__btn">
|
|
<i class="fas fa-heart"></i>
|
|
<span>FILM GIA' AGGIUNTO AI PREFERITI</span>
|
|
</a>
|
|
</div>
|
|
{% else %}
|
|
<div class="row">
|
|
<a href="{% url 'preferiti' slug=film.slug %}" class="preferiti__btn">
|
|
<i class="far fa-heart"></i>
|
|
<span>AGGIUNGI AI PREFERITI</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
{% if watch_later %}
|
|
<div class="row">
|
|
<a href="{% url 'guarda_dopo' slug=film.slug %}" class="guarda_dopo__btn">
|
|
<i style="font-size: 24px;" class="icon ion-ios-tv"></i>
|
|
<span>FILM GIA' AGGIUNTO A GUARDA PIU' TARDI</span>
|
|
</a>
|
|
</div>
|
|
{% else %}
|
|
<div class="row">
|
|
<a href="{% url 'guarda_dopo' slug=film.slug %}" class="guarda_dopo__btn">
|
|
<i class="fas fa-tv"></i>
|
|
<span>GUARDA PIU' TARDI</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
<div class="row">
|
|
<a href="#segnala" class="segnala__btn open-modal">
|
|
<i class="fas fa-flag"></i>
|
|
<span>SEGNALA FILM</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Form Segnala Problema -->
|
|
<div id="segnala" class="zoom-anim-dialog mfp-hide modal">
|
|
<h6 class="modal__title">Segnala Problema Film</h6>
|
|
<p class="modal__text">Qualche problema con il video? Segnalacelo!</p>
|
|
<form action="" method="POST">
|
|
{% csrf_token %}
|
|
{{ segnala_film_form }}
|
|
<div class="modal__btns">
|
|
<button class="modal__btn modal__btn--apply" type="submit">SEGNALA PROBLEMA</button>
|
|
<button class="modal__btn modal__btn--dismiss" type="button">ANNULLA</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- Fine Form Segnala Problema -->
|
|
</div>
|
|
</div>
|
|
<!-- end details content -->
|
|
</section>
|
|
<!-- end details -->
|
|
|
|
<!-- content -->
|
|
<section class="content">
|
|
<div class="content__head">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<!-- content title -->
|
|
<h2 class="content__title">CONTENUTI AGGIUNTIVI</h2>
|
|
<!-- end content title -->
|
|
|
|
<!-- content tabs nav -->
|
|
<ul class="nav nav-tabs content__tabs" id="content__tabs" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-toggle="tab" href="#tab-2" role="tab" aria-controls="tab-2" aria-selected="false">Trailer</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#tab-1" role="tab" aria-controls="tab-1" aria-selected="true">Commenti</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#tab-3" role="tab" aria-controls="tab-3" aria-selected="false">Immagini</a>
|
|
</li>
|
|
</ul>
|
|
<!-- end content tabs nav -->
|
|
|
|
<!-- content mobile tabs nav -->
|
|
<div class="content__mobile-tabs" id="content__mobile-tabs">
|
|
<div class="content__mobile-tabs-btn dropdown-toggle" role="navigation" id="mobile-tabs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<input type="button" value="Trailer">
|
|
<span></span>
|
|
</div>
|
|
|
|
<div class="content__mobile-tabs-menu dropdown-menu" aria-labelledby="mobile-tabs">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="nav-item"><a class="nav-link" id="1-tab" data-toggle="tab" href="#tab-1" role="tab" aria-controls="tab-1" aria-selected="true">Commenti</a></li>
|
|
|
|
<li class="nav-item"><a class="nav-link active" id="2-tab" data-toggle="tab" href="#tab-2" role="tab" aria-controls="tab-2" aria-selected="false">Trailer</a></li>
|
|
|
|
<li class="nav-item"><a class="nav-link" id="3-tab" data-toggle="tab" href="#tab-3" role="tab" aria-controls="tab-3" aria-selected="false">Immagini</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- end content mobile tabs nav -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<!-- content tabs -->
|
|
<div class="tab-content" id="myTabContent">
|
|
<div class="tab-pane fade" id="tab-1" role="tabpanel" aria-labelledby="1-tab">
|
|
<div class="row">
|
|
<!-- comments -->
|
|
<div class="col-12">
|
|
<div class="comments">
|
|
<ul class="comments__list">
|
|
{% if request.user.is_authenticated %}
|
|
{% for comments in commenti %}
|
|
<li class="comments__item">
|
|
<div class="comments__autor">
|
|
<img class="comments__avatar" src="{{ comments.utente.immagine_profilo.url }}" alt="">
|
|
<a href="{% url 'profilo-utente' username=comments.utente.user %}"><span class="comments__name">{{ comments.utente.user }}</span></a>
|
|
<span class="comments__time">{{ comments.data_commento }}</span>
|
|
</div>
|
|
<p class="comments__text">{{ comments.commento }}</p>
|
|
</li>
|
|
{% empty %}
|
|
<li class="comments__item">
|
|
<p class="comments__text">Nessun Commento Scritto! Inzia Ora!</p>
|
|
</li>
|
|
|
|
{% endfor %}
|
|
{% include 'aggiungiCommento.html' %}
|
|
{% else %}
|
|
<li class="comments__item">
|
|
<p class="comments__text">Per poter commentare devi loggarti...</p>
|
|
</li>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<!-- end comments -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade show active" id="tab-2" role="tabpanel" aria-labelledby="2-tab">
|
|
<div class="row">
|
|
<!-- player -->
|
|
<div class="col-12">
|
|
<div class="plyr__video-embed" id="player">
|
|
{% if film.trailer %}
|
|
<iframe
|
|
src="{{ film.trailer }}"
|
|
allowfullscreen
|
|
allowtransparency
|
|
allow="autoplay"
|
|
></iframe>
|
|
{% else %}
|
|
<iframe
|
|
src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
|
|
allowfullscreen
|
|
allowtransparency
|
|
allow="autoplay"
|
|
></iframe>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</video>
|
|
</div>
|
|
<!-- end player -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="tab-3" role="tabpanel" aria-labelledby="3-tab">
|
|
<!-- project gallery -->
|
|
<div class="gallery" itemscope>
|
|
<div class="row">
|
|
{% for lista_immagini in immagini_film %}
|
|
<!-- gallery item -->
|
|
<figure class="col-12 col-sm-6 col-xl-4" itemprop="associatedMedia" itemscope>
|
|
<a href="{{ lista_immagini.immagini.url }}" itemprop="contentUrl" data-size="1920x1280">
|
|
<img src="{{ lista_immagini.immagini.url }}" itemprop="thumbnail" alt="Screenshot del Film {{ film.titolo }}" />
|
|
</a>
|
|
<figcaption itemprop="caption description">Screenshot del Film {{ film.titolo }}</figcaption>
|
|
</figure>
|
|
<!-- end gallery item -->
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<!-- end project gallery -->
|
|
</div>
|
|
</div>
|
|
<!-- end content tabs -->
|
|
</div>
|
|
|
|
<!-- sidebar -->
|
|
<div class="col-12">
|
|
<div class="row">
|
|
<!-- section title -->
|
|
<div class="col-12">
|
|
<h2 style="font-size: 25px;text-align: center;text-transform: uppercase;margin-top: 20px;" class="section__title section__title--sidebar">Ti Potrebbero Interessare...</h2>
|
|
</div>
|
|
<!-- end section title -->
|
|
{% for similiar_film in you_migth_like %}
|
|
<!-- card -->
|
|
<div class="col-6 col-sm-4 col-lg-3">
|
|
<div class="card">
|
|
<div class="card__cover">
|
|
<img src="{{ similiar_film.immagine_poster.url }}" alt="">
|
|
<a href="{{ similiar_film.get_absolute_url }}" class="card__play">
|
|
<i class="icon ion-ios-play"></i>
|
|
</a>
|
|
</div>
|
|
<div class="card__content">
|
|
<h3 class="card__title"><a href="#">{{ similiar_film.titolo }}</a></h3>
|
|
<span class="card__category">
|
|
{% for genres in similiar_film.genere.all %}
|
|
<a href="{{ genres.get_absolute_url }}">{{ genres.genere }}</a>
|
|
{% endfor %}
|
|
</span>
|
|
<span class="card__rate"><i class="icon ion-ios-star"></i>{{ similiar_film.voto }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
<!-- end card -->
|
|
</div>
|
|
</div>
|
|
<!-- end sidebar -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end content -->
|
|
{% include 'photo.html' %}
|
|
{% endblock content %}
|
|
{% block javascript %}
|
|
<script>
|
|
$( function() {
|
|
$('.b-description_readmore_wrapper').addClass('description_full');
|
|
});
|
|
</script>
|
|
{% endblock javascript %} |