feat: added browser reload and styling

This commit is contained in:
Pablo Moreno
2025-01-15 01:11:42 +01:00
parent 7b546a1d2f
commit edce4d6d59
8 changed files with 35 additions and 23 deletions
@@ -2,7 +2,12 @@
<form action="" hx-post="{% url 'web:add_cart_item' %}" hx-swap="none">
{% csrf_token %}
<input type="hidden" name="product" value="{{ product.pk }}">
<input id="quantity" type="hidden" name="quantity" value="1">
<div class="flex">
<input class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600
focus:border-primary-600 block 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 mr-4"
id="quantity" type="number" min="1" max="10" name="quantity" value="1">
<button class="w-full flex 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
@@ -11,4 +16,6 @@
{% include 'components/icons/add_cart.svg' %}
{% translate 'Añadir al carrito' %}
</button>
</div>
</form>
+11 -11
View File
@@ -15,18 +15,18 @@
<a href="{% url 'web:product_detail' pk=product.pk slug=product.slug %}"
class="text-lg font-semibold leading-tight text-gray-900 hover:underline dark:text-white">{{ product.name }}</a>
<div class="mt-2 flex items-center gap-2">
<div class="flex items-center">
{% include 'components/icons/star.svg' %}
{% include 'components/icons/star.svg' %}
{% include 'components/icons/star.svg' %}
{% include 'components/icons/star.svg' %}
{% include 'components/icons/star.svg' %}
</div>
<!-- <div class="mt-2 flex items-center gap-2">-->
<!-- <div class="flex items-center">-->
<!-- {% include 'components/icons/star.svg' %}-->
<!-- {% include 'components/icons/star.svg' %}-->
<!-- {% include 'components/icons/star.svg' %}-->
<!-- {% include 'components/icons/star.svg' %}-->
<!-- {% include 'components/icons/star.svg' %}-->
<!-- </div>-->
<p class="text-sm font-medium text-gray-900 dark:text-white">5.0</p>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">(455)</p>
</div>
<!-- <p class="text-sm font-medium text-gray-900 dark:text-white">5.0</p>-->
<!-- <p class="text-sm font-medium text-gray-500 dark:text-gray-400">(455)</p>-->
<!-- </div>-->
<div class="mt-4 flex gap-4">
<p class="text-2xl font-extrabold leading-tight text-gray-900 dark:text-white">
{{ product.price.price_with_tax }}€
+3 -3
View File
@@ -15,15 +15,15 @@
<form class="space-y-4 md:space-y-6" action="#">
<div>
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
<input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 sm: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-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required="">
<input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 sm: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-blue-500" placeholder="name@company.com" required="">
</div>
<div>
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
<input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm: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-blue-500 dark:focus:border-blue-500" required="">
<input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm: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-blue-500" required="">
</div>
<div>
<label for="confirm-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Confirm password</label>
<input type="confirm-password" name="confirm-password" id="confirm-password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm: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-blue-500 dark:focus:border-blue-500" required="">
<input type="confirm-password" name="confirm-password" id="confirm-password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm: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-blue-500" required="">
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
+3 -3
View File
@@ -15,15 +15,15 @@
<form class="mt-4 space-y-4 lg:mt-5 md:space-y-5" action="#">
<div>
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
<input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 sm: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-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required="">
<input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 sm: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-blue-500" placeholder="name@company.com" required="">
</div>
<div>
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">New Password</label>
<input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm: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-blue-500 dark:focus:border-blue-500" required="">
<input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm: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-blue-500" required="">
</div>
<div>
<label for="confirm-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Confirm password</label>
<input type="confirm-password" name="confirm-password" id="confirm-password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm: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-blue-500 dark:focus:border-blue-500" required="">
<input type="confirm-password" name="confirm-password" id="confirm-password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm: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-blue-500" required="">
</div>
<div class="flex items-start">
<div class="flex items-center h-5">