Skip to content

Mejora estética #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
daniifleitas wants to merge 1 commit into from
Closed

Mejora estética #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions ProyectoFinalDjango
Open in desktop
Submodule ProyectoFinalDjango added at 7ba05f
2 changes: 2 additions & 0 deletions app/models.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,3 +64,5 @@ def __str__(self) -> str:


# ------------------------------------------------------------------------------------------------------------------------------------------------------------


2 changes: 2 additions & 0 deletions app/urls.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,5 @@
path("logout", LogoutView.as_view(), name="logout"),
path("nosotros/", AboutUsView, name="nosotros"),
]


2 changes: 2 additions & 0 deletions app/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,3 +262,5 @@ def AboutUsView(request):
}
return render(request,"nosotros.html",context)

#--------------------

1 change: 1 addition & 0 deletions core/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@ def HomeView(request):


# ------------------------------------------------------------------------------

Binary file added media/1125031-highest-2-lowest-0-1000-0-1500-crop_nX19tlW.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 21 additions & 14 deletions templates/buscar_producto.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,27 @@
{% extends "padre.html" %}
{% load static %}
{% block loquecambia %}
<h2 style="font-size: 3em; text-align: center; margin-top: 3em;">🔎</h2>
<h3 style="text-align: center;"><strong>BÚSQUEDA</strong></h3>
<div style="height: 38.1vh; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: -2em;">
<form action="/app/producto_buscado/" method="GET" style="margin-left: 10px;">
<input type="text" name="articulo">
<input type="submit" value="Buscar" style="padding: 2px; border-radius: 5px; background-color: rgb(33,136,56);color: white;">
</form>
<br>
<button class="btn btn-success" style="margin-left: 10px; margin-top: 1em; width: 16.5em"><a href="{% url 'app:productos' %}" style="padding:10px; text-decoration: none; color: white;">Volver a productos</a></button>
<br>
<br>

<div class="container py-5 text-center">
<h2 class="mb-2" style="font-size: 3em;">🔎</h2>
<h3 class="fw-bold" style="color: #ffc107;">BÚSQUEDA</h3>

<div class="d-flex flex-column align-items-center mt-4" style="height: 38.1vh;">
<form action="/app/producto_buscado/" method="GET" class="d-flex" style="gap: 8px;">
<input type="text" name="articulo"
style="padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background-color: #1b1b1b; color: white; outline: none;">
<input type="submit" value="Buscar"
style="padding: 6px 14px; border-radius: 8px; background-color: #ffc107; color: #212529; border: none; font-weight: 600;">
</form>

<button class="btn mt-4" style="background-color: #ffc107; border: none; border-radius: 999px; padding: 0.6em 2em; font-weight: 600; box-shadow: 0 6px 15px rgba(0,0,0,0.4);">
<a href="{% url 'app:productos' %}" style="text-decoration: none; color: #212529;">Volver a productos</a>
</button>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
{% endblock %}

{% endblock %}
135 changes: 112 additions & 23 deletions templates/crear_producto.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,27 +47,116 @@ <h2 class="card-title text-center mb-4">Agregar Película</h2>
</div>

<style>
.star-rating {
direction: rtl;
unicode-bidi: bidi-override;
display: inline-block;
}
.star-rating input {
display: none;
}
.star-rating label {
color: #ddd;
font-size: 1.5rem;
padding: 0 3px;
cursor: pointer;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
color: #ffc107;
}
.star-rating input:checked + label {
color: #ffc107;
}

.container.py-4 { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.card.bg-dark {
background: linear-gradient(180deg, #0f0f0f 0%, #141414 100%);
border: 1px solid rgba(255,255,255,0.04);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.6);
overflow: hidden;
}
.card-body { padding: 1.6rem; }


.card-title {
font-size: 1.45rem;
font-weight: 700;
color: #ffc107;
letter-spacing: 0.2px;
}


.form-label {
display: block;
margin-bottom: 0.45rem;
font-weight: 600;
color: #e9ecef;
font-size: 0.95rem;
}


.card.bg-dark input[type="text"],
.card.bg-dark input[type="file"],
.card.bg-dark input[type="email"],
.card.bg-dark input[type="number"],
.card.bg-dark select,
.card.bg-dark textarea {
width: 100%;
background: #1b1b1b;
color: #f8f9fa;
border: 1px solid rgba(255,255,255,0.06);
padding: 0.55rem 0.65rem;
border-radius: 8px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
transition: border-color .14s ease, box-shadow .14s ease, transform .06s ease;
font-size: 0.95rem;
}
.card.bg-dark textarea { min-height: 120px; resize: vertical; }

.card.bg-dark input:focus,
.card.bg-dark select:focus,
.card.bg-dark textarea:focus {
outline: none;
border-color: rgba(40,167,69,0.9);
box-shadow: 0 0 0 5px rgba(40,167,69,0.06);
transform: translateY(-1px);
}

.star-rating {
direction: rtl;
unicode-bidi: bidi-override;
display: inline-flex;
gap: 6px;
align-items: center;
}
.star-rating input { display: none; }
.star-rating label {
color: #6c757d;
font-size: 1.6rem;
padding: 0 4px;
cursor: pointer;
transition: transform .12s ease, color .12s ease;
display: inline-flex;
align-items: center;
}
.star-rating label:hover,
.star-rating label:hover ~ label {
color: #ffc107;
transform: translateY(-3px) scale(1.12);
}

.star-rating input:checked ~ label,
.star-rating input:checked + label {
color: #ffc107;
transform: translateY(-2px);
}


small.text-muted {
color: rgba(255,255,255,0.62);
display: block;
margin-top: 0.28rem;
font-size: 0.88rem;
}


.d-grid .btn {
border-radius: 999px;
padding: 0.58rem 0.9rem;
font-weight: 600;
box-shadow: 0 8px 20px rgba(0,0,0,0.5);
transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.d-grid .btn:hover { transform: translateY(-2px); opacity: 0.98; }
.d-grid .btn.btn-success { background-color: #ffc107;; border-color: rgba(255,255,255,0.06); }
.d-grid .btn.btn-outline-light { color: #f8f9fa; border-color: rgba(255,255,255,0.12); background: transparent; }


@media (max-width: 576px) {
.card-body { padding: 1.1rem; }
.card-title { font-size: 1.25rem; }
.star-rating label { font-size: 1.4rem; }
}
</style>
{% endblock %}
{% endblock %}
88 changes: 87 additions & 1 deletion templates/modifcar_producto.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,94 @@
<button type="submit" class="btn btn-success bot-prod crear">Modificar</button>
<button type="submit" class="btn btn-success bot-prod crear"><a href="{% url 'app:productos' %}" style="color: white; text-decoration: none">Volver atrás</a></button>
</form>

<style>
/* --- Mejora estética SIN tocar el HTML --- */
/* Pegar esto después del <form> o en tu CSS global (no toca nada de tu estructura) */

.form {
max-width: 720px;
margin: 1.4rem auto;
padding: 1.1rem;
background: linear-gradient(180deg,#141414 0%, #1b1b1b 100%);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.04);
box-shadow: 0 12px 28px rgba(0,0,0,0.55);
box-sizing: border-box;
}

/* Inputs / selects / textarea (aplica aunque crispy renderice form-control) */
.form input[type="text"],
.form input[type="email"],
.form input[type="number"],
.form input[type="file"],
.form select,
.form textarea,
.form .form-control {
width: 100%;
background: #222;
color: #f8f9fa;
border: 1px solid rgba(255,255,255,0.06);
padding: 0.66rem 0.85rem;
border-radius: 8px;
font-size: 1rem;
margin-bottom: 0.9rem; /* espacio entre campos (mantiene tus <br>) */
transition: border-color .14s ease, box-shadow .14s ease, transform .06s ease;
}

/* Textarea más cómoda */
.form textarea { min-height: 110px; resize: vertical; }

/* Focus más visible (amarillo coherente) */
.form input:focus,
.form select:focus,
.form textarea:focus,
.form .form-control:focus {
outline: none;
border-color: #ffc107;
box-shadow: 0 0 0 6px rgba(255,193,7,0.06);
transform: translateY(-1px);
}

/* Botones: aplico estilo únicamente a los que ya tenés (misma clase) */
.form .btn-success.bot-prod.crear {
background-color: #ffc107;
border-color: #d39e00;
color: #212529;
font-weight: 700;
border-radius: 999px;
padding: 0.5rem 1rem;
box-shadow: 0 8px 20px rgba(0,0,0,0.45);
transition: transform .12s ease, box-shadow .12s ease;
}

/* Si dentro del botón hay <a style="color: white"> lo sobreescribo para mantener coherencia */
.form .btn-success.bot-prod.crear a {
color: inherit !important;
text-decoration: none !important;
display: inline-block;
}

/* Hover */
.form .btn-success.bot-prod.crear:hover {
background-color: #e0a800;
box-shadow: 0 10px 24px rgba(0,0,0,0.55);
transform: translateY(-2px);
}

/* Separación entre botones (para que no queden pegados) */
.form .btn { margin-right: 0.6rem; }

/* Responsive: en móviles apilan botones y les dan ancho completo */
@media (max-width: 576px) {
.form { padding: 1rem; margin: 1rem; }
.form .btn { width: 100%; margin-right: 0; margin-bottom: 0.6rem; }
.form .btn:last-child { margin-bottom: 0; }
}
</style>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
{% endblock %}
{% endblock %}
9 changes: 7 additions & 2 deletions templates/productos_list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,12 @@
text-overflow: ellipsis;
min-height: 72px; /* altura fija para alinear cards */
}
.card-title {
font-weight: 700;
font-size: 1.25rem;
color: #333;
margin-bottom: 0.5rem;
}
.card {
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
Expand Down Expand Up @@ -82,7 +88,7 @@ <h3 class="text-center mb-5 fw-bold text-uppercase">Listado de Películas</h3>
</div>
{% endif %}
<div class="card-body d-flex flex-column">
<h5 class="card-title fw-semibold">{{ p.articulo }}</h5>
<h5 class="card-title">{{ p.articulo }}</h5>
<span class="badge bg-dark mb-2">{{ p.get_seccion_display }}</span>
<p class="card-text flex-grow-1">{{ p.descripcion }}</p>
<div class="star-rating mt-3">
Expand All @@ -106,4 +112,3 @@ <h5 class="card-title fw-semibold">{{ p.articulo }}</h5>
</div>
</div>
{% endblock %}

Loading
Loading