From 913763fc425def6d66d821875a84cffa2493ed35 Mon Sep 17 00:00:00 2001
From: Pablo Moreno <pablomoreno.inf@gmail.com>
Date: Fri, 17 Jan 2025 19:22:31 +0100
Subject: [PATCH] fix: styling

---
 web/templates/components/cart/cart.html       | 704 +++++++++---------
 .../components/cart/cart_navbar.html          |   5 +-
 2 files changed, 367 insertions(+), 342 deletions(-)

diff --git a/web/templates/components/cart/cart.html b/web/templates/components/cart/cart.html
index b118897..e99ab14 100644
--- a/web/templates/components/cart/cart.html
+++ b/web/templates/components/cart/cart.html
@@ -1,356 +1,380 @@
 {% load i18n %}
 <section class="bg-white py-2 antialiased dark:bg-gray-900 md:py-8">
-  <form action="{% url 'web:cart_detail' %}" method="post">
-    {% csrf_token %}
-    <div class="mx-auto max-w-screen-xl px-4 2xl:px-0">
-      <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">{% translate 'Carrito' %}</h2>
+    <form action="{% url 'web:cart_detail' %}" method="post">
+        {% csrf_token %}
+        <div class="mx-auto max-w-screen-xl px-4 2xl:px-0">
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">{% translate 'Carrito' %}</h2>
 
-      <div class="mt-4 sm:mt-6 md:gap-6 lg:flex lg:items-start xl:gap-8">
-        <div class="mx-auto w-full flex-none lg:max-w-2xl xl:max-w-4xl">
-          <div class="space-y-6">
+            <div class="mt-4 sm:mt-6 md:gap-6 lg:flex lg:items-start xl:gap-8">
+                <div class="mx-auto w-full flex-none lg:max-w-2xl xl:max-w-4xl">
+                    <div class="space-y-6">
 
-            {% for item in items %}
-              <div
-                class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 md:p-6">
-                <div class="space-y-4 md:flex md:items-center md:justify-between md:gap-6 md:space-y-0">
-                  <a href="#" class="shrink-0 md:order-1">
-                    <img class="h-20 w-20 dark:hidden" src="{{ item.product.images.all|first }}"
-                         alt="{{ item.product.name }}"/>
-                    <img class="hidden h-20 w-20 dark:block" src="{{ item.product.images.all|first }}"
-                         alt="{{ item.product.name }}"/>
-                  </a>
+                        {% for item in items %}
+                        <div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm
+                                    dark:border-gray-700 dark:bg-gray-800 md:p-6">
+                            <div class="space-y-4 flex items-center justify-between gap-6 space-y-0">
+                                <a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}"
+                                   class="shrink-0 md:order-1">
+                                    <img class="h-20 w-20 dark:hidden" src="{{ item.product.images.all|first }}"
+                                         alt="{{ item.product.name }}"/>
+                                    <img class="hidden h-20 w-20 dark:block" src="{{ item.product.images.all|first }}"
+                                         alt="{{ item.product.name }}"/>
+                                </a>
 
-                  <label for="counter-input" class="sr-only">{% translate 'Cantidad' %}</label>
-                  <div class="flex items-center justify-between md:order-3 md:justify-end">
-                    <div class="flex items-center">
-                  <span
-                    class="w-10 shrink-0 border-0 bg-transparent text-center text-sm font-medium text-gray-900 focus:outline-none focus:ring-0 dark:text-white">
-                    {{ item.quantity }}x
-                  </span>
+
+                                <div class="w-full min-w-0 flex-1 space-y-4 md:order-2 md:max-w-md">
+                                    <a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}"
+                                       class="text-base font-medium text-gray-900 hover:underline dark:text-white"
+                                    >
+                                        {{ item.product.name }}
+                                    </a>
+
+                                    <div class="flex items-center gap-4">
+                                        <form class="flex" hx-post="{% url 'web:delete_cart_item' pk=item.pk %}"
+                                              hx-swap="none">
+                                            {% csrf_token %}
+                                            <button
+                                                    type="submit"
+                                                    class="inline-flex items-center text-sm font-medium text-red-600 hover:underline dark:text-red-500"
+                                            >
+                                                {% include 'components/icons/x.svg' %}
+                                                {% translate 'Quitar' %}
+                                            </button>
+                                        </form>
+                                    </div>
+                                </div>
+                                <label for="counter-input" class="sr-only">{% translate 'Cantidad' %}</label>
+                                <div class="flex items-center justify-between md:order-3 md:justify-end">
+                                    <div class="flex items-center">
+                                       <span class="w-10 shrink-0 border-0 bg-transparent text-center text-sm font-medium
+                                                    text-gray-900 focus:outline-none focus:ring-0 dark:text-white"
+                                       >
+                                         {{ item.quantity }}x
+                                       </span>
+                                    </div>
+                                    <div class="text-end md:order-4 md:w-32">
+                                        <p class="text-base font-bold text-gray-900 dark:text-white">
+                                            {{ item.product.price.price_with_tax }}€
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+
+
+                        </div>
+                        {% endfor %}
+
+                        {% if items.count == 0 %}
+                        <p class="text-base font-normal text-gray-500 dark:text-gray-400">
+                            {% translate 'No hay nada en el carrito...' %}
+                        </p>
+                        <p>
+                            <a href="{% url 'web:index' %}" title=""
+                               class="inline-flex items-center gap-2 text-sm font-medium text-primary-700 underline hover:no-underline dark:text-primary-500">
+                                {% translate 'Volver a inicio' %}
+                            </a>
+                        </p>
+                        {% endif %}
+
+                        <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
+                            {% translate 'Dirección de envío' %}
+                        </h2>
+
+                        <section class="p-4 rounded-lg border border-gray-200 dark:border-gray-600">
+
+                            <div class="grid gap-4 sm:grid-cols-2 sm:gap-6 my-2">
+                                {% if user.is_anonymous %}
+                                <div class="sm:col-span-2">
+                                    <label for="email"
+                                           class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                                        {% translate 'E-Mail' %}</label>
+                                    <input type="text" name="email" id="email"
+                                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
+                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
+                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                                           placeholder="{% translate 'E-Mail' %}"
+                                           value=""
+                                           required=""
+                                    >
+                                </div>
+                                {% else %}
+                                <input type="hidden" name="email" value="{{ user.email }}">
+                                {% endif %}
+                                <div class="sm:col-span-2">
+                                    <label for="shipping_address_full_name"
+                                           class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                                        {% translate 'Nombre completo' %}</label>
+                                    <input type="text" name="shipping_address_full_name" id="shipping_address_full_name"
+                                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
+                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
+                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                                           placeholder="{% translate 'Nombre completo' %}"
+                                           value="{% if shipping_address %}{{ shipping_address.full_name }}{% endif %}"
+                                           required=""
+                                    >
+                                    <label for="shipping_address"
+                                           class="block my-2 text-sm font-medium text-gray-900 dark:text-white">
+                                        {% translate 'Dirección' %}</label>
+                                    <input type="text" name="shipping_address" id="shipping_address"
+                                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
+                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
+                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                                           placeholder="{% translate 'Dirección' %}"
+                                           value="{% if shipping_address %}{{ shipping_address.address }}{% endif %}"
+                                           required=""
+                                    >
+                                </div>
+                                <div class="w-full">
+                                    <label for="shipping_address_town"
+                                           class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                                        {% translate 'Localidad' %}
+                                    </label>
+                                    <input type="text" name="shipping_address_town" id="shipping_address_town"
+                                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
+                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
+                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                                           placeholder="{% translate 'Localidad' %}"
+                                           value="{% if shipping_address %}{{ shipping_address.address_town }}{% endif %}"
+                                           required=""
+                                    >
+                                </div>
+                                <div class="w-full">
+                                    <label for="shipping_address_zip"
+                                           class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                                        {% translate 'Código postal' %}
+                                    </label>
+                                    <input type="text" name="shipping_address_zip" id="shipping_address_zip"
+                                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
+                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
+                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                                           placeholder="{% translate 'Código postal' %}"
+                                           value="{% if shipping_address %}{{ shipping_address.address_zip }}{% endif %}"
+                                           required=""
+                                    >
+                                </div>
+
+                                <div>
+                                    <label for="shipping_address_state"
+                                           class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                                        {% translate 'Provincia' %}
+                                    </label>
+                                    <input type="text" name="shipping_address_state" id="shipping_address_state"
+                                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
+                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
+                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                                           placeholder="{% translate 'Provincia' %}"
+                                           value="{% if shipping_address %}{{ shipping_address.address_state }}{% endif %}"
+                                           required=""
+                                    >
+
+                                </div>
+                                <div>
+                                    <label for="shipping_address_country"
+                                           class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                                        {% translate 'País' %}
+                                    </label>
+                                    <input type="text" name="shipping_address_country" id="shipping_address_country"
+                                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
+                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
+                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                                           placeholder="{% translate 'País' %}"
+                                           value="{% if shipping_address %}{{ shipping_address.address_country }}{% endif %}"
+                                           required=""
+                                    >
+                                </div>
+
+                            </div>
+                        </section>
+
+                        <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
+                            {% translate 'Dirección de facturación' %}
+                        </h2>
+
+                        <section class="p-4 rounded-lg border border-gray-200 dark:border-gray-600">
+
+                            <div class="grid gap-4 sm:grid-cols-2 sm:gap-6 my-2">
+                                <div class="sm:col-span-2">
+                                    <label for="billing_address_full_name"
+                                           class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                                        {% translate 'Nombre completo' %}</label>
+                                    <input type="text" name="billing_address_full_name" id="billing_address_full_name"
+                                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
+                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
+                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                                           placeholder="{% translate 'Nombre completo' %}"
+                                           value="{% if billing_address %}{{ billing_address.full_name }}{% endif %}"
+                                           required=""
+                                    >
+                                    <label for="billing_address"
+                                           class="block my-2 text-sm font-medium text-gray-900 dark:text-white">
+                                        {% translate 'Dirección' %}
+                                    </label>
+                                    <input type="text" name="billing_address" id="billing_address"
+                                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
+                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
+                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                                           placeholder="{% translate 'Dirección' %}"
+                                           value="{% if billing_address %}{{ billing_address.address }}{% endif %}"
+                                           required=""
+                                    >
+                                </div>
+                                <div class="w-full">
+                                    <label for="billing_address_town"
+                                           class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                                        {% translate 'Localidad' %}
+                                    </label>
+                                    <input type="text" name="billing_address_town" id="billing_address_town"
+                                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
+                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
+                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                                           placeholder="{% translate 'Localidad' %}"
+                                           value="{% if billing_address %}{{ billing_address.address_town }}{% endif %}"
+                                           required=""
+                                    >
+                                </div>
+                                <div class="w-full">
+                                    <label for="billing_address_zip"
+                                           class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                                        {% translate 'Código postal' %}
+                                    </label>
+                                    <input type="text" name="billing_address_zip" id="billing_address_zip"
+                                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
+                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
+                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                                           placeholder="{% translate 'Código postal' %}"
+                                           value="{% if billing_address %}{{ billing_address.address_zip }}{% endif %}"
+                                           required=""
+                                    >
+                                </div>
+
+                                <div>
+                                    <label for="billing_address_state"
+                                           class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                                        {% translate 'Provincia' %}
+                                    </label>
+                                    <input type="text" name="billing_address_state" id="billing_address_state"
+                                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
+                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
+                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                                           placeholder="{% translate 'Provincia' %}"
+                                           value="{% if billing_address %}{{ billing_address.address_state }}{% endif %}"
+                                           required=""
+                                    >
+
+                                </div>
+                                <div>
+                                    <label for="billing_address_country"
+                                           class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                                        {% translate 'País' %}
+                                    </label>
+                                    <input type="text" name="billing_address_country" id="billing_address_country"
+                                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
+                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
+                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                                           placeholder="{% translate 'País' %}"
+                                           value="{% if billing_address %}{{ billing_address.address_country }}{% endif %}"
+                                           required=""
+                                    >
+                                </div>
+
+                            </div>
+                        </section>
+
+                        <section>
+                            <h2 class="text-xl mb-4 font-semibold text-gray-900 dark:text-white sm:text-2xl">
+                                {% translate 'Opciones de envío' %}
+                            </h2>
+                            <article class="rounded-lg border border-gray-200 dark:border-gray-600">
+
+                                {% for shipping_method in shipping_methods %}
+                                <div class="p-4">
+                                    <input type="radio" id="shipping_method_{{ shipping_method.pk }}"
+                                           name="shipping_method"
+                                           value="{{ shipping_method.pk }}" {% if forloop.first %}checked{% endif %}>
+                                    <label for="shipping_method_{{ shipping_method.pk }}"
+                                           class="text-gray-900 dark:text-white">
+                                        {{ shipping_method.name }} - {{ shipping_method.shipping_product.price.price_with_tax }}€
+                                    </label>
+                                    {% if not forloop.last %}
+                                </div>
+                                <hr class="h-px mx-4 bg-gray-200 border-0 dark:bg-gray-700"/>
+                                {% endif %}
+
+                                {% endfor %}
+                            </article>
+
+                        </section>
                     </div>
-                    <div class="text-end md:order-4 md:w-32">
-                      <p
-                        class="text-base font-bold text-gray-900 dark:text-white">{{ item.product.price.price_with_tax }}
-                        €</p>
-                    </div>
-                  </div>
 
-                  <div class="w-full min-w-0 flex-1 space-y-4 md:order-2 md:max-w-md">
-                    <a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}"
-                       class="text-base font-medium text-gray-900 hover:underline dark:text-white"
-                    >
-                      {{ item.product.name }}
-                    </a>
+                </div>
 
-                    <div class="flex items-center gap-4">
-                      <form class="flex" hx-post="{% url 'web:delete_cart_item' pk=item.pk %}"
-                            hx-swap="none">
-                        {% csrf_token %}
-                        <button
-                          type="submit"
-                          class="inline-flex items-center text-sm font-medium text-red-600 hover:underline dark:text-red-500"
-                        >
-                          {% include 'components/icons/x.svg' %}
-                          {% translate 'Quitar' %}
+                <!-- Resumen del pedido -->
+                <div class="mx-auto mt-6 max-w-4xl flex-1 space-y-6 lg:mt-0 lg:w-full">
+                    <div
+                            class="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6">
+                        <p class="text-xl font-semibold text-gray-900 dark:text-white">
+                            {% translate 'Resumen del pedido' %}
+                        </p>
+
+                        <div class="space-y-4">
+                            <div class="space-y-2">
+                                <dl class="flex items-center justify-between gap-4">
+                                    <dt
+                                            class="text-base font-normal text-gray-500 dark:text-gray-400">
+                                        {% translate 'Base imponible' %}
+                                    </dt>
+                                    <dd class="text-base font-medium text-gray-900 dark:text-white">{{ base_total }} €
+                                    </dd>
+                                </dl>
+
+                                <dl class="flex items-center justify-between gap-4">
+                                    <dt class="text-base font-normal text-gray-500 dark:text-gray-400">
+                                        {% translate 'Descuentos' %}
+                                    </dt>
+                                    <dd class="text-base font-medium text-green-600">-{{ savings }} €</dd>
+                                </dl>
+
+                                <dl class="flex items-center justify-between gap-4">
+                                    <dt
+                                            class="text-base font-normal text-gray-500 dark:text-gray-400">
+                                        {% translate 'Gastos de envío' %}
+                                    </dt>
+                                    <dd class="text-base font-medium text-gray-900 dark:text-white">
+                                        {{ shipping_cost }} €
+                                    </dd>
+                                </dl>
+
+                                <dl class="flex items-center justify-between gap-4">
+                                    <dt class="text-base font-normal text-gray-500 dark:text-gray-400">
+                                        {% translate 'Impuestos' %}
+                                    </dt>
+                                    <dd class="text-base font-medium text-gray-900 dark:text-white">{{ tax_total }} €
+                                    </dd>
+                                </dl>
+                            </div>
+
+                            <dl class="flex items-center justify-between gap-4 border-t border-gray-200 pt-2 dark:border-gray-700">
+                                <dt class="text-base font-bold text-gray-900 dark:text-white">{% translate 'Total' %}
+                                </dt>
+                                <dd class="text-base font-bold text-gray-900 dark:text-white">{{ total }} €</dd>
+                            </dl>
+                        </div>
+
+                        <button class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+                            {% translate 'Terminar pedido' %}
                         </button>
-                      </form>
 
+                        <div class="flex items-center justify-center gap-2">
+                            <span class="text-sm font-normal text-gray-500 dark:text-gray-400"> {% translate 'o' %} </span>
+                            <a href="{% url 'web:index' %}" title=""
+                               class="inline-flex items-center gap-2 text-sm font-medium text-primary-700 underline hover:no-underline dark:text-primary-500">
+                                {% translate 'Seguir comprando' %}
+                            </a>
+                        </div>
                     </div>
-                  </div>
                 </div>
-              </div>
-            {% endfor %}
-
-            {% if items.count == 0 %}
-              <p class="text-base font-normal text-gray-500 dark:text-gray-400">
-                {% translate 'No hay nada en el carrito...' %}
-              </p>
-              <p>
-                <a href="{% url 'web:index' %}" title=""
-                   class="inline-flex items-center gap-2 text-sm font-medium text-primary-700 underline hover:no-underline dark:text-primary-500">
-                  {% translate 'Volver a inicio' %}
-                </a>
-              </p>
-            {% endif %}
-
-            <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
-              {% translate 'Dirección de envío' %}
-            </h2>
-
-            <section class="p-4 rounded-lg border border-gray-200 dark:border-gray-600">
-
-              <div class="grid gap-4 sm:grid-cols-2 sm:gap-6 my-2">
-                {% if user.is_anonymous %}
-                  <div class="sm:col-span-2">
-                    <label for="email"
-                           class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'E-Mail' %}</label>
-                    <input type="text" name="email" id="email"
-                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
-                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
-                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                           placeholder="{% translate 'E-Mail' %}"
-                           value=""
-                           required=""
-                    >
-                  </div>
-                {% else %}
-                  <input type="hidden" name="email" value="{{ user.email }}">
-                {% endif %}
-                <div class="sm:col-span-2">
-                  <label for="shipping_address_full_name"
-                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Nombre completo' %}</label>
-                  <input type="text" name="shipping_address_full_name" id="shipping_address_full_name"
-                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
-                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
-                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                         placeholder="{% translate 'Nombre completo' %}"
-                         value="{% if shipping_address %}{{ shipping_address.full_name }}{% endif %}"
-                         required=""
-                  >
-                  <label for="shipping_address"
-                         class="block my-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Dirección' %}</label>
-                  <input type="text" name="shipping_address" id="shipping_address"
-                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
-                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
-                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                         placeholder="{% translate 'Dirección' %}"
-                         value="{% if shipping_address %}{{ shipping_address.address }}{% endif %}"
-                         required=""
-                  >
-                </div>
-                <div class="w-full">
-                  <label for="shipping_address_town"
-                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Localidad' %}</label>
-                  <input type="text" name="shipping_address_town" id="shipping_address_town"
-                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
-                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
-                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                         placeholder="{% translate 'Localidad' %}"
-                         value="{% if shipping_address %}{{ shipping_address.address_town }}{% endif %}"
-                         required=""
-                  >
-                </div>
-                <div class="w-full">
-                  <label for="shipping_address_zip"
-                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Código postal' %}</label>
-                  <input type="text" name="shipping_address_zip" id="shipping_address_zip"
-                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
-                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
-                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                         placeholder="{% translate 'Código postal' %}"
-                         value="{% if shipping_address %}{{ shipping_address.address_zip }}{% endif %}"
-                         required=""
-                  >
-                </div>
-
-                <div>
-                  <label for="shipping_address_state"
-                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Provincia' %}</label>
-                  <input type="text" name="shipping_address_state" id="shipping_address_state"
-                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
-                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
-                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                         placeholder="{% translate 'Provincia' %}"
-                         value="{% if shipping_address %}{{ shipping_address.address_state }}{% endif %}"
-                         required=""
-                  >
-
-                </div>
-                <div>
-                  <label for="shipping_address_country"
-                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'País' %}</label>
-                  <input type="text" name="shipping_address_country" id="shipping_address_country"
-                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
-                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
-                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                         placeholder="{% translate 'País' %}"
-                         value="{% if shipping_address %}{{ shipping_address.address_country }}{% endif %}"
-                         required=""
-                  >
-                </div>
-
-              </div>
-            </section>
-
-            <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
-              {% translate 'Dirección de facturación' %}
-            </h2>
-
-            <section class="p-4 rounded-lg border border-gray-200 dark:border-gray-600">
-
-              <div class="grid gap-4 sm:grid-cols-2 sm:gap-6 my-2">
-                <div class="sm:col-span-2">
-                  <label for="billing_address_full_name"
-                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Nombre completo' %}</label>
-                  <input type="text" name="billing_address_full_name" id="billing_address_full_name"
-                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
-                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
-                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                         placeholder="{% translate 'Nombre completo' %}"
-                         value="{% if billing_address %}{{ billing_address.full_name }}{% endif %}"
-                         required=""
-                  >
-                  <label for="billing_address"
-                         class="block my-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Dirección' %}</label>
-                  <input type="text" name="billing_address" id="billing_address"
-                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
-                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
-                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                         placeholder="{% translate 'Dirección' %}"
-                         value="{% if billing_address %}{{ billing_address.address }}{% endif %}"
-                         required=""
-                  >
-                </div>
-                <div class="w-full">
-                  <label for="billing_address_town"
-                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Localidad' %}</label>
-                  <input type="text" name="billing_address_town" id="billing_address_town"
-                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
-                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
-                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                         placeholder="{% translate 'Localidad' %}"
-                         value="{% if billing_address %}{{ billing_address.address_town }}{% endif %}"
-                         required=""
-                  >
-                </div>
-                <div class="w-full">
-                  <label for="billing_address_zip"
-                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Código postal' %}</label>
-                  <input type="text" name="billing_address_zip" id="billing_address_zip"
-                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
-                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
-                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                         placeholder="{% translate 'Código postal' %}"
-                         value="{% if billing_address %}{{ billing_address.address_zip }}{% endif %}"
-                         required=""
-                  >
-                </div>
-
-                <div>
-                  <label for="billing_address_state"
-                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Provincia' %}</label>
-                  <input type="text" name="billing_address_state" id="billing_address_state"
-                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
-                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
-                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                         placeholder="{% translate 'Provincia' %}"
-                         value="{% if billing_address %}{{ billing_address.address_state }}{% endif %}"
-                         required=""
-                  >
-
-                </div>
-                <div>
-                  <label for="billing_address_country"
-                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'País' %}</label>
-                  <input type="text" name="billing_address_country" id="billing_address_country"
-                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
-                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
-                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                         placeholder="{% translate 'País' %}"
-                         value="{% if billing_address %}{{ billing_address.address_country }}{% endif %}"
-                         required=""
-                  >
-                </div>
-
-              </div>
-            </section>
-
-            <section>
-              <h2 class="text-xl mb-4 font-semibold text-gray-900 dark:text-white sm:text-2xl">
-                {% translate 'Opciones de envío' %}
-              </h2>
-              <article class="rounded-lg border border-gray-200 dark:border-gray-600">
-
-                {% for shipping_method in shipping_methods %}
-                  <div class="p-4">
-                    <input type="radio" id="shipping_method_{{ shipping_method.pk }}" name="shipping_method"
-                           value="{{ shipping_method.pk }}" {% if forloop.first %}checked{% endif %}>
-                    <label for="shipping_method_{{ shipping_method.pk }}" class="text-gray-900 dark:text-white">
-                      {{ shipping_method.name }} - {{ shipping_method.shipping_product.price.price_with_tax }}€
-                    </label>
-                    {% if not forloop.last %}
-                      </div>
-                      <hr class="h-px mx-4 bg-gray-200 border-0 dark:bg-gray-700"/>
-                    {% endif %}
-
-                {% endfor %}
-              </article>
-
-            </section>
-          </div>
-
-        </div>
-
-        <!-- Resumen del pedido -->
-        <div class="mx-auto mt-6 max-w-4xl flex-1 space-y-6 lg:mt-0 lg:w-full">
-          <div
-            class="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6">
-            <p class="text-xl font-semibold text-gray-900 dark:text-white">{% translate 'Resumen del pedido' %}</p>
-
-            <div class="space-y-4">
-              <div class="space-y-2">
-                <dl class="flex items-center justify-between gap-4">
-                  <dt
-                    class="text-base font-normal text-gray-500 dark:text-gray-400">{% translate 'Base imponible' %}</dt>
-                  <dd class="text-base font-medium text-gray-900 dark:text-white">{{ base_total }} €</dd>
-                </dl>
-
-                <dl class="flex items-center justify-between gap-4">
-                  <dt class="text-base font-normal text-gray-500 dark:text-gray-400">{% translate 'Descuentos' %}</dt>
-                  <dd class="text-base font-medium text-green-600">-{{ savings }} €</dd>
-                </dl>
-
-                <dl class="flex items-center justify-between gap-4">
-                  <dt
-                    class="text-base font-normal text-gray-500 dark:text-gray-400">{% translate 'Gastos de envío' %}</dt>
-                  <dd class="text-base font-medium text-gray-900 dark:text-white">{{ shipping_cost }} €</dd>
-                </dl>
-
-                <dl class="flex items-center justify-between gap-4">
-                  <dt class="text-base font-normal text-gray-500 dark:text-gray-400">{% translate 'Impuestos' %}</dt>
-                  <dd class="text-base font-medium text-gray-900 dark:text-white">{{ tax_total }} €</dd>
-                </dl>
-              </div>
-
-              <dl class="flex items-center justify-between gap-4 border-t border-gray-200 pt-2 dark:border-gray-700">
-                <dt class="text-base font-bold text-gray-900 dark:text-white">{% translate 'Total' %}</dt>
-                <dd class="text-base font-bold text-gray-900 dark:text-white">{{ total }} €</dd>
-              </dl>
             </div>
 
-            <button
-              class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
-              {% translate 'Terminar pedido' %}
-            </button>
-
-            <div class="flex items-center justify-center gap-2">
-              <span class="text-sm font-normal text-gray-500 dark:text-gray-400"> {% translate 'o' %} </span>
-              <a href="{% url 'web:index' %}" title=""
-                 class="inline-flex items-center gap-2 text-sm font-medium text-primary-700 underline hover:no-underline dark:text-primary-500">
-                {% translate 'Seguir comprando' %}
-              </a>
-            </div>
-          </div>
-
-          {#        <div#}
-          {#          class="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6">#}
-          {#          <form class="space-y-4">#}
-          {#            <div>#}
-          {#              <label for="voucher" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"> Do you have a#}
-          {#                voucher or gift card? </label>#}
-          {#              <input type="text" id="voucher"#}
-          {#                     class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"#}
-          {#                     placeholder="" required/>#}
-          {#            </div>#}
-          {#            <button type="submit"#}
-          {#                    class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">#}
-          {#              Apply Code#}
-          {#            </button>#}
-          {#          </form>#}
-          {#        </div>#}
         </div>
-      </div>
-
-    </div>
-  </form>
+    </form>
 </section>
\ No newline at end of file
diff --git a/web/templates/components/cart/cart_navbar.html b/web/templates/components/cart/cart_navbar.html
index c7c1410..6ecd768 100644
--- a/web/templates/components/cart/cart_navbar.html
+++ b/web/templates/components/cart/cart_navbar.html
@@ -14,7 +14,7 @@
 
 <!-- Cart -->
 <div id="myCartDropdown1"
-     class="absolute top-10 z-10 mx-auto max-w-sm space-y-4 overflow-hidden rounded-lg bg-white p-4 antialiased shadow-lg dark:bg-gray-800 hidden"
+     class="absolute top-10 z-10 w-56 divide-y divide-gray-100 overflow-hidden overflow-y-auto rounded-lg bg-white antialiased shadow dark:divide-gray-600 dark:bg-gray-700 right-0 p-4 hidden"
 >
     <div>
         {% if cart.items.count == 0 %}
@@ -24,7 +24,7 @@
         {% for cart_item in cart.items.all %}
         <div>
             <a href="{% url 'web:product_detail' pk=cart_item.product.pk slug=cart_item.product.slug %}"
-               class="truncate text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline">
+               class="text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline">
                 {{ cart_item.product.name }}
             </a>
 
@@ -58,6 +58,7 @@
                 </div>
             </div>
         </div>
+        <hr class="my-2" />
         {% endfor %}
     </div>