Retoques front

mauriaranam · Jul 10, 2023 · 379ea9a · 379ea9a
2 parents a2d7143 + cc8e91f
commit 379ea9a
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 58 deletions.
diff --git a/templates/base.html b/templates/base.html
@@ -12,14 +12,17 @@
 
 <!-- ######## HEADER ######## -->
 <header class="bg-white">
-  <nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
+
+  <nav class="mx-auto flex max-w-7xl items-center justify-between p-4 lg:px-8" aria-label="Global">
       <div class="flex lg:flex-1">
         <a href="/home" class="-m-1.5 p-1.5">
           <span class="sr-only">DishHub</span>
           <img class="h-8 w-auto" src="{{ url_for('static', filename='dish_hub_icon.png') }}" alt="DishHub_logo">
         </a>
         <p class="pl-4">{{current_user.nombre}} {{current_user.apellido}}</p>
       </div>
+
+      <a href="/home" class="text-sm pr-10 font-semibold leading-6 text-gray-900">Inicio</a>
 
     <div class="flex lg:hidden">
       <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
@@ -40,11 +43,11 @@
           </svg>
         </button>
 
-        <div class=" absolute -left-8 top-full z-10 mt-3 w-screen max-w-md overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5">
+        <div class="absolute left-8 top-full z-10 mt-3 w-screen max-w-md overflow-hidden rounded-3xl bg-white shadow-lg  ring-gray-900/5">
           <div id="slides" class="hidden p-4">
             <div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50">
               <div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
-                <svg class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <svg class="h-6 w-6 text-gray-600 group-hover:text-[#CACC90]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
                   <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
                 </svg>
@@ -59,7 +62,7 @@
             </div>
             <div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50">
               <div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
-                <svg class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <svg class="h-6 w-6 text-gray-600 group-hover:text-[#CACC90]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" />
                 </svg>
               </div>
@@ -73,7 +76,7 @@
             </div>
             <div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50">
               <div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
-                <svg class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <svg class="h-6 w-6 text-gray-600 group-hover:text-[#CACC90]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 004.5 10.5a7.464 7.464 0 01-1.15 3.993m1.989 3.559A11.209 11.209 0 008.25 10.5a3.75 3.75 0 117.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 01-3.6 9.75m6.633-4.596a18.666 18.666 0 01-2.485 5.33" />
                 </svg>
               </div>
@@ -103,7 +106,7 @@
             {% if current_user.rol == 'admin'%}
             <div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50">
               <div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
-                <svg class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <svg class="h-6 w-6 text-gray-600 group-hover:text-[#CACC90]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" />
                 </svg>
               </div>
@@ -119,7 +122,7 @@
             {% endif %}
             <div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50">
               <div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
-                <svg class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <svg class="h-6 w-6 text-gray-600 group-hover:text-[#CACC90]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
                 </svg>
               </div>
@@ -136,7 +139,6 @@
         </div>
       </div>
     <!-- ## SLIDE HEADER ## -->
-      <a href="/home" class="text-sm font-semibold leading-6 text-gray-900">Inicio</a>
     </div>
     <div class="hidden lg:flex lg:flex-1 lg:justify-end">
       {% if current_user.is_authenticated %}

diff --git a/templates/colaboradores.html b/templates/colaboradores.html
@@ -16,7 +16,7 @@ <h1 class="text-base font-semibold leading-6 text-gray-900">Colaboradores de {{
                     <p class="mt-2 text-sm text-gray-700">Aqui puedes ver todos los colaboradores:).</p>
                   </div>
                   <div id="closeColab" class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
-                    <button onclick="add_colab()" type="button" class="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Agregar usuario</button>
+                    <button onclick="add_colab()" type="button" class="block rounded-md bg-[#CACC90] px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-[#75704E] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#CACC90]">Agregar usuario</button>
                   </div>
                 </div>
                 <div class="mt-8 flow-root">
@@ -69,7 +69,7 @@ <h1 class="text-base font-semibold leading-6 text-gray-900">Colaboradores de {{
                                                 <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                                     <div>
                                                         <label for="username" class="block text-sm font-medium leading-6 text-gray-900">Agregar colaborador</label>
-                                                        <select id="username" name="username" class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                                                        <select id="username" name="username" class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-[#CACC90] sm:text-sm sm:leading-6">
                                                             <option value="sin_colaborador">Seleccione su colaborador de confianza:)</option>
                                                             {% for user in users %}
                                                             <option value="{{ user.username }}">{{ user.username }}</option>
@@ -84,10 +84,10 @@ <h1 class="text-base font-semibold leading-6 text-gray-900">Colaboradores de {{
                             </div>
                         </div>
                         <div class=" flex justify-end pt-2">
-                            <button type="submit" class="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Agregar usuario</button>
+                            <button type="submit" class="block rounded-md bg-[#CACC90] px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-[#75704E] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#CACC90]">Agregar usuario</button>
                         </div>
                         <div class=" flex justify-end pt-2">
-                            <button onclick="add_colab()" type="button" class="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Cancelar</button>
+                            <button onclick="add_colab()" type="button" class="block rounded-md bg-[#75704E] px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-[#CACC90] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#CACC90]">Cancelar</button>
                         </div>
                     </div>
 

diff --git a/templates/login.html b/templates/login.html
@@ -7,13 +7,19 @@
 
 <!-- ## LOGIN ## -->
 <div class="h-screen flex">
-  <div class="flex w-1/2 bg-gradient-to-tr from-blue-800 to-purple-700 i justify-around items-center">
-    <div>
-      <h1 class="text-white font-bold text-4xl font-sans">DishHub</h1>
-      <p class="text-white mt-1">La pagina mas popular para compartir tus recetas :)</p>
-      <a href="/register" class="block w-28 bg-white text-indigo-800 mt-4 py-2 rounded-2xl font-bold mb-2">Registrarse</a>
+  <div class="flex w-1/2 bg-gradient-to-tr from-blue-800 to-purple-700 i justify-around items-center" style="background-image: url('/static/fondo_login.jpg'); background-size: cover; background-position: center;">
+    <div class="bg-[#CACC90] bg-opacity-70 p-4 rounded-lg backdrop-filter backdrop-blur">
+      <h1 class="text-white font-bold drop-shadow-2xl text-4xl font-sans">DishHub</h1>
+      <p class="text-white mt-1">La página más popular para compartir tus recetas :)</p>
+      <div class="flex justify-end">
+        <a href="/register" class="block pl-3 w-28 bg-[#75704E] text-white mt-4 py-2 rounded-2xl font-bold mb-2">Registrarse</a>
+
+      </div>
     </div>
   </div>
+
+
+
   <div class="flex w-1/2 justify-center items-center bg-white">
     <form class="bg-white" action="/login" method="POST" >
       <h1 class="text-gray-800 font-bold text-2xl mb-1">¡Hola de nuevo!</h1>
@@ -30,7 +36,10 @@ <h1 class="text-gray-800 font-bold text-2xl mb-1">¡Hola de nuevo!</h1>
         </svg>
         <input class="pl-2 outline-none border-none" type="password" name="password" id="password " placeholder="Contraseña" />
       </div>
-      <button type="submit" class="block w-full bg-indigo-600 mt-4 py-2 rounded-2xl text-white font-semibold mb-2">Iniciar sesion</button>
+      <button type="submit" class="block w-full mt-4 py-2 rounded-2xl text-white font-semibold mb-2 bg-[#CACC90] hover:bg-[#75704E]">
+        Iniciar sesión
+      </button>
+
       <span class="text-sm ml-2 hover:text-blue-500 cursor-pointer">¿Te olvidaste pa tu contraseña?</span>
 
     </form>

diff --git a/templates/recipe.html b/templates/recipe.html
@@ -62,7 +62,7 @@ <h3 class="sr-only">Description</h3>
           {% if current_user.is_authenticated %}
           {% if current_user.rol == 'admin' or receta.user_id == current_user.id or current_user.username in receta.colaboradores.split(',') %}
           <a href="/recipe_edit/{{receta.id}}">
-            <button type="submit" class="flex max-w-xs flex-1 items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full">Editar</button>
+            <button type="submit" class="flex max-w-xs flex-1 items-center justify-center rounded-md border border-transparent bg-[#CACC90] hover:bg-[#75704E] px-8 py-3 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full">Editar</button>
           </a>
           {% endif %}
           {% endif %}
@@ -270,9 +270,5 @@ <h3 class="font-medium text-gray-900">Chef Ramsey</h3>
   </div>
   <!-- ## TERMINA COMENTARIOSSS ## -->
 
-  <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-100 group-hover:opacity-75">
-    <img src="{{ receta.image_path }}" alt="Foto de la receta" class="object-cover w-full h-full">
-  </div>
-
 
 {% endblock %}