LORDCHANNEL2.0/templates/profilo.html

589 lines
26 KiB
HTML
Raw Normal View History

2021-03-13 18:36:50 +00:00
{% load static %}
{% load crispy_forms_tags %}
<!doctype html>
<html lang="it">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Dancing+Script:wght@700&display=swap"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<title>Profilo di {{ utente.user }}</title>
<style>
#mainbody {
margin: 0 auto;
width: 55%;
height: 100%;
border: 1px solid black;
/* --gradient-background: rgba(34, 35, 48, 0.93); */
background: var(--gradient-background);
}
#mainbody.DefaultTheme {
--gradient-background: linear-gradient(90deg, hsla(205, 46%, 30%, 1) 0%, hsla(260, 29%, 36%, 1) 100%);
--gradient-cards-background: linear-gradient(90deg, hsla(347, 89%, 61%, 1) 0%, hsla(242, 42%, 40%, 1) 100%);
--card-comments-border-left: 5px solid #1B98E0;
--nav-link-background: #1B98E0;
/* background: -moz-linear-gradient(90deg, hsla(205, 46%, 30%, 1) 0%, hsla(260, 29%, 36%, 1) 100%);
background: -webkit-linear-gradient(90deg, hsla(205, 46%, 30%, 1) 0%, hsla(260, 29%, 36%, 1) 100%); */
}
#mainbody.NightMidnight {
--gradient-background: #0f0c29;
/* fallback for old browsers */
--gradient-background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
/* Chrome 10-25, Safari 5.1-6 */
--gradient-background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
--card-comments-border-left: 5px solid #FFF8F0;
--gradient-cards-background: hsla(245, 39%, 28%, 1);
--gradient-cards-background: linear-gradient(225deg, hsla(245, 39%, 28%, 1) 0%, hsla(194, 100%, 66%, 1) 100%);
--nav-link-background: #110e2c;
}
#mainbody.CrimsonElite {
--gradient-background: #642B73;
/* fallback for old browsers */
--gradient-background: -webkit-linear-gradient(to right, #C6426E, #642B73);
/* Chrome 10-25, Safari 5.1-6 */
--gradient-background: linear-gradient(to right, #C6426E, #642B73);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#mainbody.DeathStar {
--gradient-background: #232526;
/* fallback for old browsers */
--gradient-background: -webkit-linear-gradient(to right, #414345, #232526);
/* Chrome 10-25, Safari 5.1-6 */
--gradient-background: linear-gradient(to right, #414345, #232526);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
--gradient-cards-background: #536976;
/* fallback for old browsers */
--gradient-cards-background: linear-gradient(to right, #292E49, #536976);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
--card-comments-border-left: 5px solid #c31432;
--nav-link-background: #c31432;
}
#biografia {
padding: 20px 35px 35px;
font-family: 'Dancing Script', cursive;
font-size: 25px;
text-align: center;
}
.card-comments {
border-left: var(--card-comments-border-left);
background: var(--gradient-cards-background);
/* background: hsla(347, 89%, 61%, 1);
background: linear-gradient(90deg, hsla(347, 89%, 61%, 1) 0%, hsla(242, 42%, 40%, 1) 100%);
background: -moz-linear-gradient(90deg, hsla(347, 89%, 61%, 1) 0%, hsla(242, 42%, 40%, 1) 100%);
background: -webkit-linear-gradient(90deg, hsla(347, 89%, 61%, 1) 0%, hsla(242, 42%, 40%, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#F44369", endColorstr="#3E3B92", GradientType=1 ); */
}
* {
box-sizing: border-box;
}
body {
color: white;
background-image: url("{{ utente.background_image.url }}");
background-repeat: no-repeat;
background-size: cover;
background-color: black;
}
.spacename{
font-size: 70px;
text-transform: uppercase
}
.adminName{
background-image: linear-gradient(
to right,
#462523 0,
#cb9b51 22%,
#f6e27a 45%,
#f6f2c0 50%,
#f6e27a 55%,
#cb9b51 78%,
#462523 100%
);
color:transparent;
-webkit-background-clip:text;
font-weight: bold;
}
#img-border {
border: 3px solid grey;
}
#img-border.Admin {
border-image: url("https://steamcdn-a.akamaihd.net/steamcommunity/public/assets/rewardsseason1/goldenprofile/presige_frame_anim.png?v=2");
border-image-slice: 27 27 27 27;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
width: 260px;
height: 260px;
border-width: 20px;
border-style: solid
}
.profileimg {
width: 260px;
height: 260px;
}
.card {
background: inherit !important;
}
@media (max-width: 768px) {
#mainbody {
width: auto;
height: 100%;
}
.spacename {
margin-top: 10px;
}
}
.lastimagecomments {
/* classe utilizzata per ridimensionare le immagini relative agli ultimi commenti scritti */
height: 150px !important;
width: 100px !important;
border: 1px solid whitesmoke;
border-radius: 5px;
}
.table td,
.table th {
border-top: none !important;
}
.pfont {
color: white;
}
#comment-media {
font-family: 'Caveat', cursive;
font-size: 20px;
}
#nocomment-media {
font-family: 'Caveat', cursive;
font-size: 30px;
}
@media(max-width:1660px) {
.nav-pills .nav-link {
width: 100%;
text-align: center;
}
}
.table td,
.table th {
width: 50%;
}
.isoffline {
width: 100%;
height: auto;
color: white;
text-align: center;
background-color: #DD1155;
}
.isonline {
width: 100%;
height: auto;
color: white;
text-align: center;
background-color: forestgreen;
}
.modal-title {
text-transform: uppercase;
}
.personalprofile {
background-color: rgba(0, 0, 0, 0.3) !important;
}
.table-hover tbody tr:hover {
background: transparent;
}
/* SWIPER CSS STYLE */
.swiper-container {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 284px;
height: 400px;
}
.nav-tabs {
border: none !important;
}
.nav {
width: 100%;
}
.nav-link {
border: none !important;
padding: 10px 0;
}
.nav-link.active {
background-color: var(--nav-link-background) !important;
}
.button-uppercase{
text-transform: uppercase;
}
label{
color: #0f0c29;
font-weight: bold;
width: 100%;
text-align: center;
}
.asteriskField {
display: none;
}
@media (max-width: 1920px) {
body {
background-size: auto;
}
}
</style>
</head>
<body>
<div id="mainbody" class="{{ utente.colore_tema }}">
<div class="container">
<div class="row no-gutters mt-4">
<div class="col-lg-4 text-center my-auto">
<img class="{% if utente.user.is_staff %} Admin {% endif %}" id="img-border" src="{{ utente.immagine_profilo.url }}" class="profileimg"
alt="Immagine Profilo di {{ utente.user.username }}">
</div>
<div class="col-lg-8">
<h3 class="text-center spacename {% if utente.user.is_staff %} adminName {% endif %}">{{ utente.user }}</h3>
<br>
<br>
<p id="biografia">{% if utente.biografia == None %} Nessuna biografia al momento D: {% else %}
{{utente.biografia }} {% endif %}</p>
{% if request.user == utente.user %}
<div class="row justify-content-center">
<button class="btn btn-info button-uppercase" data-toggle="modal" data-target="#ModificaProfilo">Modifica
Profilo</button>
<a href="{% url 'logout' %}"><button class="btn btn-danger ml-3 button-uppercase">Logout</button></a>
</div>
<!-- MODAL -->
<div class="modal fade" id="ModificaProfilo" tabindex="-1" role="dialog"
aria-labelledby="ModificaProfiloLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModificaProfiloLabel" style="color: black;">Modifica
Profilo</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form action="" method="POST" enctype="multipart/form-data">
<div class="modal-body">
<div class="text-center mb-3" style="font-weight: bold;color: #0f0c29;">Immagine
Profilo Attuale : </div>
<div class="text-center" id="imagebox"></div>
{% csrf_token %}
{{form|crispy}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Annulla</button>
<button type="submit" class="btn btn-primary">Modifica Profilo</button>
</div>
</form>
</div>
</div>
</div>
{% endif %}
</div>
</div> <!-- FINE ROW -->
<div class="row no-gutters mt-3">
<div class="col-lg-8 pl-2 pr-3">
<div class="card-header card-comments mb-1">
<nav class="nav nav-pills flex-column flex-sm-row">
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="flex-sm-fill text-sm-center nav-link active" id="film-preferiti-tab"
data-toggle="tab" href="#film-preferiti" role="tab" aria-controls="film-preferiti"
aria-selected="true">FILM PREFERITI</a>
<a class="flex-sm-fill text-sm-center nav-link" id="serietv-preferite-tab"
data-toggle="tab" role="tab" aria-controls="serietv-preferite" aria-selected="false"
href="#serietv-preferite">SERIE TV PREFERITE</a>
<a class="flex-sm-fill text-sm-center nav-link" id="anime-preferiti-tab"
data-toggle="tab" role="tab" aria-controls="anime-preferiti" aria-selected="false"
href="#anime-preferiti">ANIME PREFERITI</a>
</div>
</nav>
</div>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="film-preferiti" role="tabpanel"
aria-labelledby="film-preferiti-tab">
<div class="card-header card-comments">
<h3 class="text-center">FILM PREFERITI</h3>
</div>
<div class="card mb-3 personalprofile">
{% if film_lista_preferiti %}
<div class="swiper-container">
<div class="swiper-wrapper">
{% for film_preferiti in film_lista_preferiti %}
<a class="swiper-slide" href="{{ film_preferiti.get_absolute_url }}"
style="background-image: url({{ film_preferiti.immagine_poster.url}});"></a>
{% endfor %}
</div>
<div class="swiper-pagination"></div>
</div>
{% else %}
<p>Vuoto :(</p> <!-- DA MODIFICARE CON CSS E FONT -->
{% endif %}
</div>
</div>
<div class="tab-pane fade" id="serietv-preferite" role="tabpanel"
aria-labelledby="serietv-preferite-tab">
<div class="card-header card-comments">
<h3 class="text-center">SERIE TV PREFERITE</h3>
</div>
<div class="card mb-3 personalprofile">
{% if serietv_lista_preferiti %}
<div class="swiper-container">
<div class="swiper-wrapper">
{% for serietv_preferite in serietv_lista_preferiti %}
<a class="swiper-slide" href="{{ serietv_preferite.get_absolute_url }}"
style="background-image: url({{ serietv_preferite.immagine_poster.url }});"></a>
{% endfor %}
</div>
<div class="swiper-pagination"></div>
</div>
{% else %}
<p>Vuoto :(</p>
{% endif %}
</div>
</div>
<div class="tab-pane fade" id="anime-preferiti" role="tabpanel"
aria-labelledby="anime-preferiti-tab">
<div class="card-header card-comments">
<h3 class="text-center">ANIME PREFERITI</h3>
</div>
<div class="card mb-3 personalprofile">
{% if anime_lista_preferiti %}
<div class="swiper-container">
<div class="swiper-wrapper">
{% for anime_preferiti in anime_lista_preferiti %}
<a class="swiper-slide" href="{{ anime_preferiti.get_absolute_url }}"
style="background-image: url({{ anime_preferiti.immagine_poster.url }});"></a>
{% endfor %}
</div>
<div class="swiper-pagination"></div>
</div>
{% else %}
<p>Vuoto :(</p>
{% endif %}
</div>
</div>
</div>
<!-- WATCH LATER SECTION -->
<div class="card-header card-comments mb-1">
<nav class="nav nav-pills flex-column flex-sm-row">
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="flex-sm-fill text-sm-center nav-link active" id="film-da-guardare-tab"
data-toggle="tab" href="#film-da-guardare" role="tab"
aria-controls="film-da-guardare" aria-selected="true">FILM DA GUARDARE</a>
<a class="flex-sm-fill text-sm-center nav-link" id="serietv-da-guardare-tab"
data-toggle="tab" role="tab" aria-controls="serietv-da-guardare"
aria-selected="false" href="#serietv-da-guardare">SERIE TV DA GUARDARE</a>
<a class="flex-sm-fill text-sm-center nav-link" id="anime-da-guardare-tab"
data-toggle="tab" role="tab" aria-controls="anime-da-guardare" aria-selected="false"
href="#anime-da-guardare">ANIME DA GUARDARE</a>
</div>
</nav>
</div>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="film-da-guardare" role="tabpanel"
aria-labelledby="film-da-guardare-tab">
<div class="card-header card-comments">
<h3 class="text-center">FILM DA GUARDARE</h3>
</div>
<div class="card mb-3 personalprofile">
{% if film_watch_later %}
<div class="swiper-container">
<div class="swiper-wrapper">
{% for film_da_guardare in film_watch_later %}
<a class="swiper-slide" href="{{ film_da_guardare.get_absolute_url }}"
style="background-image: url({{ film_da_guardare.immagine_poster.url}});"></a>
{% endfor %}
</div>
<div class="swiper-pagination"></div>
</div>
{% else %}
<p>Vuoto :(</p> <!-- DA MODIFICARE CON CSS E FONT -->
{% endif %}
</div>
</div>
<div class="tab-pane fade" id="serietv-da-guardare" role="tabpanel"
aria-labelledby="serietv-da-guardare-tab">
<div class="card-header card-comments">
<h3 class="text-center">SERIE TV DA GUARDARE</h3>
</div>
<div class="card mb-3 personalprofile">
{% if serietv_watch_later %}
<div class="swiper-container">
<div class="swiper-wrapper">
{% for serietv_da_guardare in serietv_watch_later %}
<a href="{{ serietv_da_guardare.get_absolute_url }}" class="swiper-slide"
style="background-image: url({{ serietv_da_guardare.immagine_poster.url }});"></a>
{% endfor %}
</div>
<div class="swiper-pagination"></div>
</div>
{% else %}
<p>Vuoto :(</p>
{% endif %}
</div>
</div>
<div class="tab-pane fade" id="anime-da-guardare" role="tabpanel"
aria-labelledby="anime-da-guardare-tab">
<div class="card-header card-comments">
<h3 class="text-center">ANIME DA GUARDARE</h3>
</div>
<div class="card mb-3 personalprofile">
{% if anime_watch_later %}
<div class="swiper-container">
<div class="swiper-wrapper">
{% for anime_da_guardare in anime_watch_later %}
<a class="swiper-slide" href="{{ anime_da_guardare.get_absolute_url }}"
style="background-image: url({{ anime_da_guardare.immagine_poster.url }});"></a>
{% endfor %}
</div>
<div class="swiper-pagination"></div>
</div>
{% else %}
<p>Vuoto :(</p>
{% endif %}
</div>
</div>
</div>
</div>
<div class="col-lg-4 mr-0">
{% if utente.is_online %}
<div class="isonline mb-3">
Profilo Online
</div>
{% else %}
<div class="isoffline mb-3">
Profilo Offline
</div>
{% endif %}
<div class="card personalprofile">
<div class="card-comments">
<h3 class="text-center">ULTIMI COMMENTI</h3>
</div>
<table class="table table-hover">
<tbody>
{% for comments in commenti %}
<tr class="row no-gutters">
<th class="pr-0 pl-1"><a href="{{ comments.media.get_absolute_url }}"><img
src="{{ comments.media.immagine_poster.url }}"
class="img-fluid lastimagecomments" alt=""></a></th>
<td class="mt-2"><a href="{{ comments.media.get_absolute_url }}">
<p class="pfont text-center">{{ comments.media.titolo }}</p>
</a>
<p id="comment-media" class="text-center pfont">{{comments.commento|truncatewords:8 }}</p>
</td>
</tr>
</a>
{% empty %}
<p id="nocomment-media" class="text-center pfont">Nessun Commento Scritto D:</p>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- JAVASCRIPT FILES -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="{% static '/js/profilo.js' %}"></script>
<!-- SWIPER JS CODE -->
<script>
$(function () {
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
observer: true,
observeParents: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: '.swiper-pagination',
},
});
});
</script>
</body>
</html>