homepage

filme/admin.py

@@ -1,3 +1,5 @@
 from django.contrib import admin
+from .models import Filme
 
 # Register your models here.
+admin.site.register(Filme)

filme/migrations/0001_initial.py

@@ -0,0 +1,27 @@
+# Generated by Django 4.2.5 on 2023-09-06 01:07
+
+from django.db import migrations, models
+import django.utils.timezone
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='filme',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('titulo', models.CharField(max_length=100)),
+                ('thumb', models.ImageField(upload_to='thumb_filmes')),
+                ('descricao', models.TextField(max_length=1000)),
+                ('categoria', models.CharField(choices=[('ANALISES', 'Análises'), ('PROGRAMACAO', 'Programação'), ('APRESENTACAO', 'Apresentação'), ('OUTROS', 'Outros')], max_length=15)),
+                ('visualizacoes', models.IntegerField(default=0)),
+                ('data_criacao', models.DateTimeField(default=django.utils.timezone.now)),
+            ],
+        ),
+    ]

filme/models.py

@@ -1,6 +1,25 @@
 from django.db import models
+from django.utils import timezone
+
+LISTA_CATEGORIAS = (
+    ('ANALISES', 'Análises'),
+    ('PROGRAMACAO', 'Programação'),
+    ('APRESENTACAO', 'Apresentação'),
+    ('OUTROS', 'Outros'),
+)
 
 # Criar o filme
+class Filme(models.Model):
+    titulo = models.CharField(max_length=100)
+    thumb = models.ImageField(upload_to='thumb_filmes')
+    descricao = models.TextField(max_length=1000)
+    categoria = models.CharField(max_length=15, choices=LISTA_CATEGORIAS)   # Lista de Opções
+    visualizacoes = models.IntegerField(default=0)
+    data_criacao = models.DateTimeField(default=timezone.now)   # Registrar data e hora que o filme for criado
+
+    #Formato de string de um objeto dessa classe Filme
+    def __str__(self):
+        return self.titulo
 
 # Criar os episódios
 

filme/templates/homepage.html

@@ -0,0 +1,73 @@
+{% extends 'base.html' %}
+
+{% block title %}
+    Homepage Hashflix
+{% endblock %}
+
+{% block head %}
+{% load static %}
+<link	rel="stylesheet" type="text/css"	href="{% static 'css/style_homepage.css' %}"/>
+{% endblock %}
+
+{% block content %}
+<header class="header">
+	<div class="title-header">
+		Filmes e séries da Hashtag, tudo em um só lugar
+	</div>
+	<div class="paragraph">Assista onde quiser. Cancele quando quiser.</div>
+	<div class="paragraph">
+		Quer começar? Coloque seu e-mail abaixo para acessar.
+	</div>
+	<form method="POST" action="" class="form-access">
+		<input type="text" name="email" id="email" class="input-email"/>
+		<div class="btn-access">
+			<a href="#">
+        <span>Acesse</span>
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+      </a>
+		</div>
+	</form>
+</header>
+
+<section class="section">
+	<div class="group-txt">
+		<div class="title-sec">
+			 Enjoy on your TV.
+		</div>
+		<div class="paragraph">
+			Watch on Smart TVs, Playstation, Xbox, Chromecast, Apple TV, Blu-ray players, and more.
+		</div>
+	</div>
+	<div>
+		<img src="{% static 'images/tv.png' %}" alt="tv">
+	</div>
+</section>
+
+<section class="section">
+	<div>
+		<img src="{% static 'images/mobile-0819.jpg' %}" alt="mobile">
+	</div>
+	<div class="group-txt">
+		<div class="title-sec">
+			 Download your shows to watch offline.
+		</div>
+		<div class="paragraph">
+			 Save your favorites easily and always have something to watch.
+		</div>
+	</div>
+</section>
+
+<section class="section">
+	<div class="group-txt">
+		<div class="title-sec">
+			 Create profiles for kids.
+		</div>
+		<div class="paragraph">
+			Send kids on adventures with their favorite characters in a space made just for them—free with your membership.
+		</div>
+	</div>
+	<div>
+		<img src="{% static 'images/netflix_kid.png' %}" alt="hashflix_kid">
+	</div>
+</section>
+{% endblock %}

filme/urls.py

@@ -0,0 +1,6 @@
+from django.urls import path, include
+from .views import homepage
+
+urlpatterns = [
+    path('', homepage)    # para ser o index
+]

filme/views.py

@@ -1,3 +1,7 @@
 from django.shortcuts import render
 
 # Create your views here.
+
+
+def homepage(request):
+    return render(request, "homepage.html")

hashflix/settings.py

@@ -11,6 +11,7 @@
 """
 
 from pathlib import Path
+import os
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
@@ -37,6 +38,7 @@
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'filme',
 ]
 
 MIDDLEWARE = [
@@ -54,7 +56,7 @@
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': ['templates'],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -103,9 +105,9 @@
 # Internationalization
 # https://docs.djangoproject.com/en/4.2/topics/i18n/
 
-LANGUAGE_CODE = 'en-us'
+LANGUAGE_CODE = 'pt-br'
 
-TIME_ZONE = 'UTC'
+TIME_ZONE = 'America/Sao_Paulo'
 
 USE_I18N = True
 
@@ -117,6 +119,19 @@
 
 STATIC_URL = 'static/'
 
+# Caminho absoluto para o diretório onde os arquivos estáticos coletados serão armazenados.
+STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
+
+STATICFILES_DIRS = [
+    BASE_DIR / "static",
+]
+
+# Quando abrir uma imagem do site em outra janela iniciara com media/
+MEDIA_URL = 'media/'
+
+# Definição da pasta serão salvas as imagens
+MEDIA_ROOT = BASE_DIR / "media"
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field
 

hashflix/urls.py

@@ -16,7 +16,13 @@
 """
 from django.contrib import admin
 from django.urls import path
+from django.conf import settings
+from django.conf.urls.static import static
+from django.urls import include
 
 urlpatterns = [
     path('admin/', admin.site.urls),
+    path('', include('filme.urls'))    # para ser o index
 ]
+urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
+urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

static/css/style_base.css

@@ -0,0 +1,70 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
+* {
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+	text-decoration: none;
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
+
+.body {
+	background-color: #000;
+	color: #f5f4f1;
+	font-family: "Poppins", sans-serif;
+}
+
+.navbar {
+	position: fixed;
+	padding: 1rem;
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background-color: transparent;
+	z-index: 50;
+}
+
+.group-nav {
+	display: flex;
+	align-items: center;
+}
+
+.nav-btn {
+	padding: 0.1rem 0.4rem;
+	border: 1px solid rgb(255, 0, 0);
+	border-radius: 0.3rem;
+	margin: 0.3rem;
+	background-color: rgb(255, 0, 0);
+	transition: 1.02s;
+	color: #f5f4f1;
+}
+
+.nav-btn:hover {
+	animation: pulse 1s infinite;
+}
+@keyframes pulse {
+	0% {
+		transform: scale(1);
+	}
+	50% {
+		transform: scale(1.2);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+
+.nav-search {
+	padding: 0.5rem;
+}
+
+input[type="search"] {
+	height: 1.5rem;
+	border-radius: 0.4rem;
+	padding: 0rem 0.3rem;
+	color: rgb(15, 15, 15);
+}

static/css/style_footer.css

@@ -0,0 +1,8 @@
+.footer {
+	min-height: 8vh;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0.8rem;
+	font-size: 0.8rem;
+}

static/css/style_homepage.css

@@ -0,0 +1,71 @@
+.content {
+	padding-top: 4.68rem; /*Ajuste isso de acordo com a altura da sua barra de navegação */
+}
+
+.header {
+	min-height: 100vh;
+	position: relative; /* Adicione uma posição relativa para que possamos posicionar o pseudo-elemento */
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.header::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-image: url("../images/background_netflix.jpg");
+	background-repeat: no-repeat;
+	background-blend-mode: overlay;
+	background-size: cover; /* Ajuste para cobrir todo o cabeçalho */
+	background-color: rgb(0, 0, 0, 0.7);
+	opacity: 0.7; /* Opacidade para a imagem de fundo */
+	z-index: -1; /* Coloque o pseudo-elemento atrás do conteúdo */
+}
+
+.title-header {
+	color: rgb(255, 255, 255);
+	font: 3.5rem bold;
+	padding: 0.8rem;
+}
+
+.paragraph {
+	padding: 0.8rem;
+	font: 1.2rem bold;
+}
+
+.form-access {
+	display: flex;
+	gap: 0.3rem;
+	justify-content: center;
+	align-items: center;
+}
+.btn-access {
+	background-color: rgb(255, 0, 0);
+	padding: 0.55rem;
+}
+
+.input-email {
+	height: 2.8rem;
+	padding: 0.3rem;
+	min-width: 15rem;
+}
+
+.section {
+	min-height: 60vh;
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	/* box-shadow: inset 0 0 0.4rem rgb(62, 101, 228), 0 0 0.8rem rgb(25, 25, 26); */
+	border-bottom: 0.4rem solid rgba(170, 177, 194, 0.5);
+}
+
+.title-sec {
+	color: rgb(255, 255, 255);
+	font: 3rem bold;
+	padding: 0.8rem;
+}