349 lines
12 KiB
HTML
349 lines
12 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
{% block title %} LORDCHANNEL {{ serietv.titolo }} {% endblock title %}
|
|
|
|
{% block style %}
|
|
<style>
|
|
.episode-link a{
|
|
display: block;
|
|
}
|
|
a.streaming-link{
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
</style>
|
|
{% endblock style %}
|
|
|
|
|
|
{% block content %}
|
|
<!-- details -->
|
|
<section class="section details">
|
|
<!-- details background -->
|
|
<div class="details__bg" data-bg="{{ serietv.immagine_background.url }}"></div>
|
|
<!-- end details background -->
|
|
|
|
<!-- details content -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- title -->
|
|
<div class="col-12">
|
|
<h1 class="details__title">{{ serietv.titolo }}</h1>
|
|
</div>
|
|
<!-- end title -->
|
|
|
|
<!-- content -->
|
|
<div class="col-12">
|
|
<div class="card card--details card--series">
|
|
<div class="row">
|
|
<!-- card cover -->
|
|
<div class="col-12 col-sm-4 col-md-4 col-lg-3 col-xl-3">
|
|
<div class="card__cover">
|
|
<img src="{{ serietv.immagine_poster.url }}" alt="">
|
|
</div>
|
|
</div>
|
|
<!-- end card cover -->
|
|
|
|
<!-- card content -->
|
|
<div class="col-12 col-sm-8 col-md-8 col-lg-9 col-xl-9">
|
|
<div class="card__content">
|
|
<div class="card__wrap">
|
|
<span class="card__rate"><i class="icon ion-ios-star"></i>{{ serietv.voto }}</span>
|
|
|
|
<ul class="card__list">
|
|
<li>{{ serietv.qualità_video }}</li>
|
|
<li>{{ serietv.età_consigliata }}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<ul class="card__meta">
|
|
<li><span>Generi:</span>
|
|
{% for genres in serietv.genere.all %}
|
|
<a href="{{ genres.get_absolute_url }}">{{ genres.genere }}</a>
|
|
{% endfor %}
|
|
</li>
|
|
<li><span>Data di Uscita:</span> {{ serietv.data_uscita }}</li>
|
|
<li><span>Durata:</span> {{ serietv.durata }}</li>
|
|
<li><span>Lingua:</span> <a href="#">ITA</a> </li>
|
|
</ul>
|
|
|
|
<div class="card__description card__description--details">
|
|
{{ serietv.descrizione }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end card content -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end content -->
|
|
|
|
<!-- player -->
|
|
<div class="col-12 col-xl-6">
|
|
<div class="plyr__video-embed" id="player">
|
|
{% if serietv.trailer %}
|
|
<iframe
|
|
src="{{ serietv.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>
|
|
</div>
|
|
<!-- end player -->
|
|
|
|
<!-- accordion -->
|
|
<div class="col-12 col-xl-6">
|
|
<div class="accordion" id="accordion">
|
|
{% for seasons in serietv.seriestagioni.all %}
|
|
<div class="accordion__card">
|
|
<div class="card-header" id="heading{{ seasons.numero_stagione }}">
|
|
<button type="button" data-toggle="collapse" data-target="#collapse{{ seasons.numero_stagione }}" aria-expanded="true" aria-controls="collapseOne">
|
|
<span>Stagione: {{ seasons.numero_stagione }}</span>
|
|
<span>{% if seasons.stagione.count == 1 %} {{ seasons.stagione.count }} Episodio {% elif seasons.stagione.count == 0%} Nessun Episodio Ancora Caricato! {% else %} {{ seasons.stagione.count }} Episodi {% endif %}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="collapse{{ seasons.numero_stagione }}" class="collapse show" aria-labelledby="heading{{ seasons.numero_stagione }}" data-parent="#accordion">
|
|
<div class="card-body">
|
|
<table class="accordion__list">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Titolo</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{% for episodes in seasons.stagione.all %}
|
|
<tr>
|
|
<th class="episode-link"><a class="streaming-link" href="{{ episodes.streaming_link }}" target="_blank">{{ episodes.numero_episodio }}</a></th>
|
|
<td class="episode-link"><a class="streaming-link" href="{{ episodes.streaming_link }}" target="_blank">{{ episodes.nome_episodio }}</a></td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end accordion -->
|
|
|
|
<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">Condividilo:</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">
|
|
<a href="#segnala" class="segnala__btn open-modal">
|
|
<i class="fas fa-flag"></i>
|
|
<span>SEGNALA SERIETV</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Form Segnala Problema -->
|
|
<div id="segnala" class="zoom-anim-dialog mfp-hide modal">
|
|
<h6 class="modal__title">Segnala Problema SerieTV</h6>
|
|
<p class="modal__text">Qualche problema con il video? Segnalacelo!</p>
|
|
<form action="" method="POST">
|
|
{% csrf_token %}
|
|
{{ segnala_serietv_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-3" role="tab" aria-controls="tab-3" aria-selected="false">IMMAGINI</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>
|
|
|
|
</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="Immagini">
|
|
<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="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 %}
|
|
<form class="form" action="." method="POST">
|
|
{% csrf_token %}
|
|
{{ form.commento.errors }}
|
|
{{ form.commento }}
|
|
<button type="submit" class="form__btn">commenta</button>
|
|
</form>
|
|
{% 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-3" role="tabpanel" aria-labelledby="3-tab">
|
|
<!-- project gallery -->
|
|
<div class="gallery" itemscope>
|
|
<div class="row">
|
|
{% for lista_immagini in immagini_serietv %}
|
|
<!-- 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 della SerieTV {{ serietv.titolo }}" />
|
|
</a>
|
|
<figcaption itemprop="caption description">Screenshot della SerieTV {{ serietv.titolo }}</figcaption>
|
|
</figure>
|
|
{% endfor %}
|
|
<!-- end gallery item -->
|
|
</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 -->
|
|
|
|
<!-- card -->
|
|
{% for serietv_youmightlike in serietv_foryou %}
|
|
<div class="col-6 col-sm-4 col-lg-3">
|
|
<div class="card">
|
|
<div class="card__cover">
|
|
<img src="{{ serietv_youmightlike.immagine_poster.url }}" alt="">
|
|
<a href="{{ serietv_youmightlike.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="{{ serietv_youmightlike.get_absolute_url }}">{{ serietv_youmightlike.titolo }}</a></h3>
|
|
<span class="card__category">
|
|
{% for serietv_youmightlikegenres in serietv_youmightlike.genere.all %}
|
|
<a href="#">{{ serietv_youmightlikegenres.genere }}</a>
|
|
{% endfor %}
|
|
</span>
|
|
<span class="card__rate"><i class="icon ion-ios-star"></i>{{ serietv_youmightlike.voto }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
<!-- end card -->
|
|
</div>
|
|
</div>
|
|
<!-- end sidebar -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end content -->
|
|
{% include 'photo.html' %}
|
|
{% endblock content %} |