-
Detalhes do filme: {{ object.titulo }}
-
{{ object }}
-
{{ object.descricao }}
-
+
+
+ {{ object.titulo }}
+
+
+ {{ object.descricao }}
+
+
+
+
-
Episódios
-
- {% for episodio in object.episodios.all %}
-
- Episódio {{ forloop.counter }}: {{ episodio.titulo }}
-
- {% endfor %}
-
-
Filmes Relacionados
-
- {% for film_rel in filmes_relacionados %}
-
- {% endfor %}
-
+
+
+
Descrição
+
{{ object.descricao }}
+
Visualizações: {{ object.visualizacoes }}
+
+
Esta é a HomeFilmes
- {% for filme in object_list %}
+
-
-
Novo
- {% for filme in lista_filmes_recentes %}
-
{{ filme }}
- {% endfor %}
-
+
+
+ {{ object.titulo }}
+
+
+ {{ object.descricao }}
+
+
+
+
-
-
Em Alta
- {% for filme in lista_filmes_emalta %}
-
{{ filme }}
- {% endfor %}
-
+
+
+
+
+
{% endblock %}
diff --git a/filme/views.py b/filme/views.py
index af71cb3..ed39274 100644
--- 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
new file mode 100644
index 0000000..aae0c27
Binary files /dev/null and b/media/thumb_filmes/deathnote_ydWhu4g.jpg differ
diff --git a/media/thumb_filmes/demonslayer.jpg b/media/thumb_filmes/demonslayer.jpg
new file mode 100644
index 0000000..cdc4833
Binary files /dev/null and b/media/thumb_filmes/demonslayer.jpg differ
diff --git a/media/thumb_filmes/dragonball.png b/media/thumb_filmes/dragonball.png
new file mode 100644
index 0000000..53544aa
Binary files /dev/null and b/media/thumb_filmes/dragonball.png differ
diff --git a/media/thumb_filmes/jujutsu.jpeg b/media/thumb_filmes/jujutsu.jpeg
new file mode 100644
index 0000000..6d3ad77
Binary files /dev/null and b/media/thumb_filmes/jujutsu.jpeg differ
diff --git a/media/thumb_filmes/naruto_shippuden.jpe b/media/thumb_filmes/naruto_shippuden.jpe
new file mode 100644
index 0000000..3bc442e
Binary files /dev/null and b/media/thumb_filmes/naruto_shippuden.jpe differ
diff --git a/static/css/style_base.css b/static/css/style_base.css
index 767af4c..3fdf84a 100644
--- 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
new file mode 100644
index 0000000..d0473a6
--- /dev/null
+++ 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
index 83138f6..7395539 100644
--- 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;
}
diff --git a/static/css/style_homefilmes.css b/static/css/style_homefilmes.css
index 532d463..e29eff7 100644
--- a/static/css/style_homefilmes.css
+++ b/static/css/style_homefilmes.css
@@ -1,3 +1,61 @@
.content {
padding-top: 4.68rem; /*Ajuste isso de acordo com a altura da sua barra de navegação */
}
+
+/* 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: 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);
+}
+
+.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);
+}
+
+/* Outras sections */
+.sec-novo,
+.sec-emalta {
+ padding: 2rem;
+}
+
+.subtitle {
+ font-size: 1.5em !important ;
+ padding: 1rem 0;
+}
+
+.text-list:hover {
+ color: rgb(243, 26, 26);
+}
diff --git a/static/js/carousel.js b/static/js/carousel.js
new file mode 100644
index 0000000..c2ad54e
--- /dev/null
+++ b/static/js/carousel.js
@@ -0,0 +1,65 @@
+const controls = document.querySelectorAll(".control");
+let currentItem = 0;
+const items = document.querySelectorAll(".item");
+const maxItems = items.length;
+
+controls.forEach((control) => {
+ control.addEventListener("click", () => {
+ const isLeft = control.classList.contains("arrow-left");
+
+ if (isLeft) {
+ currentItem -= 1;
+ } else {
+ currentItem += 1;
+ }
+
+ if (currentItem >= maxItems) {
+ currentItem = 0;
+ }
+ // currentItem não pode ser < 0
+ if (currentItem < 0) {
+ currentItem = maxItems - 1;
+ }
+
+ items.forEach((item) => item.classList.remove("current-item"));
+ items[currentItem].scrollIntoView({
+ inline: "center",
+ behavior: "smooth",
+ });
+
+ items[currentItem].classList.add("current-item");
+ });
+});
+
+const controls2 = document.querySelectorAll(".control2");
+let currentItem2 = 0;
+const items2 = document.querySelectorAll(".item2");
+const maxItems2 = items2.length;
+
+controls2.forEach((control2) => {
+ control2.addEventListener("click", () => {
+ const isLeft2 = control2.classList.contains("arrow-left2");
+
+ if (isLeft2) {
+ currentItem2 -= 1;
+ } else {
+ currentItem2 += 1;
+ }
+
+ if (currentItem2 >= maxItems2) {
+ currentItem2 = 0;
+ }
+ // currentItem não pode ser < 0
+ if (currentItem2 < 0) {
+ currentItem2 = maxItems2 - 1;
+ }
+
+ items2.forEach((item2) => item2.classList.remove("current-item2"));
+ items2[currentItem2].scrollIntoView({
+ inline: "center",
+ behavior: "smooth",
+ });
+
+ items2[currentItem2].classList.add("current-item2");
+ });
+});
diff --git a/templates/base.html b/templates/base.html
index 0c841cc..c56500c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -12,6 +12,9 @@
-