Skip to content

Cambio de pagina principal y deplegable de dashboard #23

Merged
merged 4 commits into from
Nov 11, 2025
+296 −271
Merged

Cambio de pagina principal y deplegable de dashboard #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f886ec0
Dejar de rastrear db.sqlite3 (añadido a .gitignore)
Nov 11, 2025
18871ee
Merge branch 'develop' of https://github.eii.us.es/WBR4892/PGPI-G1.11…
Nov 11, 2025
7360ef6
Merge branch 'develop' of https://github.eii.us.es/WBR4892/PGPI-G1.11…
Nov 11, 2025
b39908c
Arreglos de dashboard y desplegable con botones
Nov 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 2 additions & 97 deletions essenza/essenza/urls.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,106 +1,11 @@
from django.contrib import admin
from django.urls import path, include
from django.http import HttpResponse
from info.views import info_view
from product.views import EscaparateView
import user

def home(request):
html = """
<html>
<head>
<title>Essenza</title>
<style>
body {
background-color: #faf7f2;
font-family: 'Segoe UI', Arial, sans-serif;
text-align: center;
padding-top: 100px;
color: #444;
position: relative;
}
h1 {
color: #c06b3e;
font-size: 48px;
margin-bottom: 10px;
}
p {
font-size: 20px;
color: #555;
}
.info-button {
position: absolute;
top: 20px;
left: 20px;
width: 30px;
height: 30px;
background-color: #c06b3e;
border-radius: 50%;
text-align: center;
line-height: 30px;
font-size: 18px;
font-weight: bold;
color: white;
text-decoration: none;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: background-color 0.3s;
}
.info-button:hover { background-color: #a35a34; }
.button-container {
margin-top: 30px; /* Espacio desde el texto de arriba */
display: flex;
flex-direction: column; /* Apila los botones verticalmente */
align-items: center; /* Centra los botones horizontalmente */
gap: 20px; /* Espacio automático entre cada botón */
}
.action-button {
padding: 15px 35px;
background-color: #c06b3e;
color: white;
font-size: 15px;
font-weight: bold;
border: none;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
text-decoration: none;
transition: background-color 0.3s, transform 0.2s;
display: block;
width: 300px; /* Ancho fijo para que se vean uniformes */
box-sizing: border-box; /* Para que el padding no afecte el ancho */
}
.action-button:hover {
background-color: #a35a34;
transform: scale(1.05); /* Efecto de zoom simple */
}
</style>
</head>
<body>
<a href="/info/" class="info-button" title="Información Legal y Contacto">i</a>
<h1>Bienvenidos a Essenza</h1>
<p>Tu espacio online de cosmética natural, belleza y cuidado personal.</p>
<p>Explora nuestros productos, descubre nuevas fragancias y disfruta de la experiencia Essenza 🌸</p>
<div class="button-container">
<a href="/user/register" class="action-button" title="Registro">Registro</a>
<a href="/user/login" class="action-button" title="Iniciar Sesión">Iniciar sesión</a>
<a href="/escaparate" class="action-button" title="invitado">Continuar como invitado</a>
</div>
</body>
</html>
"""
return HttpResponse(html)
from product.views import DashboardView

urlpatterns = [
path('', home, name='home'),
path('info/', info_view, name='info-home'),
path("user/", include("user.urls")),
path('admin/', admin.site.urls),
path('escaparate/', EscaparateView.as_view(), name='escaparate')
path('', DashboardView.as_view(), name='dashboard')
]
4 changes: 2 additions & 2 deletions essenza/product/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
from django.shortcuts import render
from django.views import View

class EscaparateView(View):
class DashboardView(View):
def get(self, request):
return render(request, 'product/escaparate.html')
return render(request, 'product/dashboard.html')
2 changes: 1 addition & 1 deletion essenza/templates/info/info.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
</head>
<body>

<a href="/escaparate" class="return-button" title="Volver">Volver</a>
<a href="/" class="return-button" title="Volver">Volver</a>

<header>
<h1 style="color: #c06b3e; font-size: 32px;">Información Legal y Condiciones de Venta de Essenza</h1>
Expand Down
250 changes: 250 additions & 0 deletions essenza/templates/product/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,250 @@
{% load static %}
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Escaparate · Essenza</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body {
margin: 0;
background-color: #faf7f2;
font-family: 'Segoe UI', Arial, sans-serif;
}

/* ====== CABECERA ====== */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 30px;
background-color: #fff;
border-bottom: 2px solid #c06b3e;
}

.info-button {
margin-right: 15px;
width: 30px;
height: 30px;
background-color: #c06b3e;
border-radius: 50%;
text-align: center;
line-height: 30px;
font-size: 18px;
font-weight: bold;
color: white;
text-decoration: none;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: background-color 0.3s;
}
.info-button:hover { background-color: #a35a34; }

.brand {
font-size: 32px;
color: #c06b3e;
font-weight: bold;
letter-spacing: 1px;
}

.search-bar {
flex: 1;
margin: 0 20px;
}

.search-bar input {
width: 100%;
max-width: 380px;
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 20px;
background: #fafafa;
}

/* ====== ESTILOS PARA EL DESPLEGABLE DE PERFIL ====== */

/* 1. El contenedor (necesario para posicionar el menú) */
.profile-dropdown {
position: relative;
display: inline-block;
}

/* 2. El botón (ícono de usuario) */
.profile-icon-btn {
background-color: #faf7f2;
border: 1px solid #c06b3e;
border-radius: 50%; /* Lo hace redondo */
cursor: pointer;
padding: 4px; /* Un pequeño espacio alrededor del ícono */
display: flex; /* Para centrar bien la imagen */
align-items: center;
justify-content: center;
}

.profile-icon-btn img {
display: block; /* Evita espacios extra */
}

/* 3. El contenido del menú (oculto por defecto) */
.dropdown-content {
display: none; /* Oculto hasta que JS añada la clase .show */
position: absolute;
right: 0; /* Alineado a la derecha */
top: 45px; /* Espacio desde el ícono */
background-color: #ffffff;
min-width: 160px;
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
border-radius: 8px;
z-index: 10;
overflow: hidden; /* Para que los bordes redondeados afecten a los links */
}

/* 4. Los links y botones dentro del menú */
.dropdown-content a,
.dropdown-logout-btn {
color: #333;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 14px;
}

/* Estilo para el botón de logout (para que parezca un link) */
.dropdown-logout-btn {
width: 100%;
text-align: left;
background: none;
border: none;
cursor: pointer;
}

/* 5. El efecto hover (resaltar) */
.dropdown-content a:hover,
.dropdown-logout-btn:hover {
background-color: #f1f1f1;
}

/* 6. La clase que JS usará para mostrar el menú */
.dropdown-content.show {
display: block;
}


/* ====== ESCAPARATE ====== */
main {
max-width: 1100px;
margin: 40px auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
padding: 0 24px;
}

.product-card {
background: #fff;
border: 1px solid #eee;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
text-align: center;
padding: 16px;
transition: transform .2s ease;
}

.product-card:hover {
transform: translateY(-4px);
}

.product-card img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 10px;
}

.product-name {
font-size: 15px;
color: #333;
margin-top: 10px;
font-weight: 500;
}

.product-price {
color: #c06b3e;
font-weight: bold;
margin-top: 6px;
}
</style>
</head>

<body>

<header>
<a href="/info/" class="info-button" title="Información Legal y Contacto">i</a>
<div class="brand">ESSENZA</div>

<div class="search-bar">
<input type="text" placeholder="Buscar...">
</div>

<div class="profile-dropdown">
<button onclick="toggleDropdown()" class="profile-icon-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#c06b3e" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</button>
</div>

<div id="myDropdown" class="dropdown-content">

{% if user.is_authenticated %}

<a href="/info">Mi perfil</a>
<form action="{% url 'logout' %}" method="post" style="margin:0;">
{% csrf_token %}
<button type="submit" class="dropdown-logout-btn">Log out</button>
</form>

{% else %}

<a href="{% url 'register' %}">Registrarse</a>
<a href="{% url 'login' %}">Iniciar sesión</a>

{% endif %}

</div>
</div>
</header>

<script>
/*
* Función para mostrar/ocultar el desplegable
*/
function toggleDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}

/*
* Cierra el desplegable si el usuario
* hace clic fuera de él
*/
window.onclick = function(event) {
// Comprueba si el clic NO fue en el botón del ícono
if (!event.target.closest('.profile-icon-btn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
// Si el menú está abierto (tiene la clase .show), la cierra
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>

</body>
</html>
Loading