feat:pagina detalhesfilme

michelebswm · Sep 22, 2023 · e54efe0 · e54efe0
1 parent 955374d
commit e54efe0
Show file tree

Hide file tree

Showing 15 changed files with 397 additions and 45 deletions.
diff --git a/db.sqlite3 b/db.sqlite3
diff --git a/filme/templates/detalhesfilme.html b/filme/templates/detalhesfilme.html
@@ -7,33 +7,65 @@
 {% block head %}
 {% load static %}
 <link	rel="stylesheet" type="text/css"	href="{% static 'css/style_detalhesfilmes.css' %}"/>
+<link	rel="stylesheet" type="text/css"	href="{% static 'css/style_carousel.css' %}"/>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
 {% endblock %}
 
 {% block content %}
 <div class="content">
-  <h1>Detalhes do filme: {{ object.titulo }}</h1>
-  <p>{{ object }}<p/>
-  <p>{{ object.descricao }}</p>
-  <img src="{{ object.thumb.url }}" alt="">
+  <section class="sec-filme" style="background-image: url('{{ object.thumb.url }}');">
+    <div class="title-film">
+      {{ object.titulo }}
+    </div>
+    <div class="description-resume">
+      {{ object.descricao }}
+    </div>
+    <div class="btn-play">
+      <a href="{{ object.episodios.first.video }}">Play</a>
+    </div>
+    <!-- <img src="{{ object.thumb.url }}" alt=""> -->
+  </section>
 
-  <h2>Episódios</h2>
-
-  {% for episodio in object.episodios.all %}
-     <a href="{{ episodio.video }}">
-       <p>Episódio {{ forloop.counter }}: {{ episodio.titulo }}</p>
-     </a>
-  {% endfor %}
-
-  <h2>Filmes Relacionados</h2>
-  <div class="films-list">
-    {% for film_rel in filmes_relacionados %}
-      <div class="item-list">
-        <img src="{{ film_rel.thumb.url }}" alt="" class="images-list">
-        <a href="{% url 'filme:detalhesfilme' film_rel.pk %}"><p class="text-list">{{ film_rel.titulo }}</p></a>
-      </div>
-    {% endfor %}
-  </div>
+  <section class="sec-episodio">
+    <div class="description">
+      <div class="subtitle">Descrição</div>
+      <p>{{ object.descricao }}</p>
+      <p class="visualizacao">Visualizações: {{ object.visualizacoes }}</p>
+    </div>
+    <div class="episod">
 
+      <div class="subtitle">Episódios</div>
+      {% for episodio in object.episodios.all %}
+         <a href="{{ episodio.video }}" class="link-epsod">
+            Episódio {{ forloop.counter }}: {{ episodio.titulo }}
+         </a>
+      {% endfor %}
+    </div>
+  </section>
 
+  <section class="sec-related">
+    <div class="subtitle">Filmes Relacionados</div>
+    <div class="container">
+  			<button class="arrow-left control" aria-label="Previous image">
+  				◄
+  			</button>
+  			<button class="arrow-right control" aria-label="Next image">
+  				►
+  			</button>
+  			<div class="gallery-wrapper">
+  				<div class="gallery">
+            {% for film_rel in filmes_relacionados %}
+              <a href="{% url 'filme:detalhesfilme' film_rel.pk %}">
+                <img src="{{ film_rel.thumb.url }}" alt="" class="item">
+                <p class="text-list">{{ film_rel.titulo }}</p>
+              </a>
+            {% endfor %}
+  				</div>
+  			</div>
+  		</div>
+  </section>
 </div>
+<script src="{% static 'js/carousel.js'%}" charset="utf-8"></script>
 {% endblock %}
diff --git a/filme/templates/homefilmes.html b/filme/templates/homefilmes.html
@@ -7,33 +7,78 @@
 {% block head %}
 {% load static %}
 <link	rel="stylesheet" type="text/css"	href="{% static 'css/style_homefilmes.css' %}"/>
+<link	rel="stylesheet" type="text/css"	href="{% static 'css/style_carousel.css' %}"/>
 {% endblock %}
 
 {% block content %}
 <div class="content">
   <h1>Esta é a HomeFilmes</h1>
 
-  {% for filme in object_list %}
+  <!-- {% for filme in object_list %}
     <a href="{% url 'filme:detalhesfilme' filme.pk %}"><p>{{ filme.titulo }}</p></a>
     <hr>
     <p>{{ filme.descricao }}</p>
     <img src="{{ filme.thumb.url }}" alt="">
-  {% endfor %}
-</div>
+  {% endfor %} -->
 
-<div class="">
-  <h2>Novo</h2>
-  {% for filme in lista_filmes_recentes %}
-    <p>{{ filme }}</p>
-  {% endfor %}
-</div>
+  <section class="sec-filme" style="background-image: url('{{ object.thumb.url }}');">
+    <div class="title-film">
+      {{ object.titulo }}
+    </div>
+    <div class="description-resume">
+      {{ object.descricao }}
+    </div>
+    <div class="btn-play">
+      <a href="{{ object.episodios.first.video }}">Play</a>
+    </div>
+    <!-- <img src="{{ object.thumb.url }}" alt=""> -->
+  </section>
 
-<div class="">
-  <h2>Em Alta</h2>
-  {% for filme in lista_filmes_emalta %}
-    <p>{{ filme }}</p>
-  {% endfor %}
-</div>
 
+  <section class="sec-novo">
+    <div class="subtitle">Novo</div>
+    <div class="container">
+        <button class="arrow-left control" aria-label="Previous image">
+          ◄
+        </button>
+        <button class="arrow-right control" aria-label="Next image">
+          ►
+        </button>
+        <div class="gallery-wrapper">
+          <div class="gallery">
+            {% for filme in lista_filmes_recentes %}
+              <a href="{% url 'filme:detalhesfilme' filme.pk %}">
+                <img src="{{ filme.thumb.url }}" alt="" class="item">
+                <p class="text-list">{{ filme.titulo }}</p>
+              </a>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+  </section>
+
+  <section class="sec-emalta">
+    <div class="subtitle">Em Alta</div>
+    <div class="container">
+        <button class="arrow-left2 control2" aria-label="Previous image">
+          ◄
+        </button>
+        <button class="arrow-right control2" aria-label="Next image">
+          ►
+        </button>
+        <div class="gallery-wrapper">
+          <div class="gallery">
+            {% for filme in lista_filmes_emalta %}
+              <a href="{% url 'filme:detalhesfilme' filme.pk %}">
+                <img src="{{ filme.thumb.url }}" alt="" class="item2">
+                <p class="text-list">{{ filme.titulo }}</p>
+              </a>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+  </section>
+</div>
+<script src="{% static 'js/carousel.js'%}" charset="utf-8"></script>
 
 {% endblock %}
diff --git a/filme/views.py b/filme/views.py
@@ -18,6 +18,15 @@ class DetalhesFilme(DetailView):
     template_name = "detalhesfilme.html"
     model = Filme
 
+    def get(self, request, *args, **kwargs):
+        # Descobrir o filme acessado, Somar 1 nas visualizações do filme e atualizar no banco
+        filme = self.get_object()
+        filme.visualizacoes += 1    # Editando o campo do banco de dados
+        filme.save()    # Salvando a atualização no banco de dados
+
+        # Redireciona o usuário para a url final
+        return super().get(request, *args, **kwargs)
+
     def get_context_data(self, **kwargs):
         # Executa primeiro a função da superClass
         context = super(DetalhesFilme, self).get_context_data(**kwargs)

diff --git a/media/thumb_filmes/deathnote_ydWhu4g.jpg b/media/thumb_filmes/deathnote_ydWhu4g.jpg
diff --git a/media/thumb_filmes/demonslayer.jpg b/media/thumb_filmes/demonslayer.jpg
diff --git a/media/thumb_filmes/dragonball.png b/media/thumb_filmes/dragonball.png
diff --git a/media/thumb_filmes/jujutsu.jpeg b/media/thumb_filmes/jujutsu.jpeg
diff --git a/media/thumb_filmes/naruto_shippuden.jpe b/media/thumb_filmes/naruto_shippuden.jpe
diff --git a/static/css/style_base.css b/static/css/style_base.css
@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
 * {
 	padding: 0;
 	margin: 0;

diff --git a/static/css/style_carousel.css b/static/css/style_carousel.css
@@ -0,0 +1,77 @@
+.container {
+	position: relative;
+	padding: 1rem;
+	max-width: 1880px;
+	margin: 0 auto;
+}
+
+.gallery-wrapper {
+	overflow-x: auto; /* Faz a rolagem ficar no elemento div gallery-wrapper que é pai da gallery, ou seja se o gallery for maior a barra de rolagem é exibida*/
+}
+
+.gallery {
+	display: flex;
+	flex-flow: row nowrap;
+	gap: 0.5rem;
+}
+
+.arrow-left2,
+.arrow-left,
+.arrow-right {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: auto;
+	bottom: 0;
+	font-size: 1rem;
+	line-height: 250px;
+	width: 40px;
+	text-align: center;
+	color: #fff;
+	cursor: pointer;
+	border: none;
+	background: linear-gradient(to left, transparent 0%, rgb(201, 77, 77) 200%);
+	opacity: 0.3;
+	transition: all 200ms ease-in-out;
+}
+
+.arrow-right {
+	left: auto;
+	right: 0;
+	background: linear-gradient(
+		to right,
+		transparent 0%,
+		rgb(201, 77, 77) 200%
+	);
+}
+
+.arrow-left2:hover,
+.arrow-right:hover,
+.arrow-left:hover {
+	opacity: 1;
+}
+
+.item2,
+.item {
+	height: 15rem;
+	width: auto;
+	flex-shrink: 0; /* Para não diminuir para caber*/
+	opacity: 0.6;
+	transition: all 200ms ease-in-out;
+}
+
+.current-item2,
+.current-item {
+	opacity: 1;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.gallery-wrapper::-webkit-scrollbar {
+	display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.gallery-wrapper {
+	-ms-overflow-style: none; /* IE and Edge */
+	scrollbar-width: none; /* Firefox */
+}
diff --git a/static/css/style_detalhesfilmes.css b/static/css/style_detalhesfilmes.css
@@ -1,18 +1,82 @@
 .content {
-	padding-top: 4.68rem; /*Ajuste isso de acordo com a altura da sua barra de navegação */
+	display: flex;
+	flex-direction: column;
 }
 
-.films-list{
+/* Inicio sec-filme */
+.sec-filme {
+	min-height: 100vh;
+	background-repeat: no-repeat;
+	background-size: cover; /* Redimensiona a imagem para caber */
+	background-color: rgba(0, 0, 0);
 	display: flex;
-	flex-direction: row;
-	gap: 1rem;
+	flex-direction: column;
+	justify-content: flex-end;
+}
+
+.title-film {
+	font-family: "Roboto", sans-serif;
+	font: 3rem bold;
+	padding: 2rem 1rem;
+	background-color: rgba(0, 0, 0, 0.4);
 }
 
-.text-list{
+.description-resume {
+	padding: 1rem 1rem;
+	max-width: 30rem;
+	max-height: 5rem;
+	overflow: hidden; /* ... */
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.btn-play {
+	padding: 0.8rem;
+	margin: 1rem;
+	width: 5rem;
 	text-align: center;
+	background-color: rgba(189, 16, 16, 0.527);
+	color: rgba(255, 255, 255);
+	border-radius: 0.5rem;
+	transition: 1.02;
+}
+
+.btn-play:hover {
+	cursor: pointer;
+	transform: scale(1.06);
+}
+
+/* Inicio sec-episodio */
+.sec-episodio {
+	min-height: 50vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-evenly;
+}
+
+.visualizacao {
+	padding: 1rem 0rem;
+}
+
+.episod,
+.description {
+	padding: 1rem 2rem;
+}
+
+.link-epsod {
+	display: flex;
+}
+
+.text-list:hover,
+.link-epsod:hover {
+	color: rgb(243, 26, 26);
+}
+
+.sec-related {
+	padding: 2rem;
 }
 
-.images-list{
-	height: 10rem;
-	width: auto;
+.subtitle {
+	font-size: 1.5em !important ;
+	padding: 1rem 0;
 }