home retocado

app/Views/pages/home.php

@@ -84,6 +84,43 @@
 
 
 
 
         <li class="nav-item">
         <li class="nav-item">
+            <a class="nav-link collapsed" data-bs-target="#tables-nav3" data-bs-toggle="collapse" href="#">
+                <i class="bi bi-layout-text-window-reverse"></i><span>Estaciones</span><i
+                    class="bi bi-chevron-down ms-auto"></i>
+            </a>
+            <ul id="tables-nav3" class="nav-content collapse " data-bs-parent="#sidebar-nav">
+                <!--Contenido del dropdown-->
+                <ul class="winter-cboxtags">
+                    <li>
+                        <input type="checkbox" id="checkboxTen" value="Order ten">
+                        <label for="checkboxTen">Invierno </label>
+                    </li>
+                </ul>
+
+                <ul class="spring-cboxtags">
+                    <li>
+                        <input type="checkbox" id="checkboxEleven" value="Order eleven">
+                        <label for="checkboxEleven">Primavera </label>
+                    </li>
+                </ul>
+                <ul class="summer-cboxtags">
+                    <li>
+                        <input type="checkbox" id="checkboxTwelve" value="Order twelve">
+                        <label for="checkboxTwelve">Verano </label>
+                    </li>
+                </ul>
+
+                <ul class="autumn-cboxtags">
+                    <li>
+                        <input type="checkbox" id="checkbox13" value="Order 13">
+                        <label for="checkbox13">Otoño </label>
+                    </li>
+                </ul>
+
+            </ul>
+        </li><!-- Fin Filtro 1 -->
+
+        <li class="nav-item">
             <a class="nav-link collapsed" href="/insert_recipe">
             <a class="nav-link collapsed" href="/insert_recipe">
                 <i class="bi bi-person"></i>
                 <i class="bi bi-person"></i>
                 <span>Perfil</span>
                 <span>Perfil</span>

public/css/style.css

@@ -346,7 +346,7 @@ h6 {
   height: 60px;
   height: 60px;
   box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
   box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
   /*COLOR HEADER*/
   /*COLOR HEADER*/
-  background-image: linear-gradient(to right, #fa6e59, #f8a055);
+  background-image: linear-gradient(to right,  #FA6E59, #FFDB5C);
   padding-left: 20px;
   padding-left: 20px;
 }
 }
 
 
@@ -574,7 +574,7 @@ h6 {
   scrollbar-color: #aab7cf transparent;
   scrollbar-color: #aab7cf transparent;
   box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
   box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
   /*COLOR SIDEBAR*/
   /*COLOR SIDEBAR*/
-  background-image: linear-gradient(to bottom right, #f8a055, #fa6e59);
+  background-image: linear-gradient(to bottom right, #FA6E59, #FFDB5C);
 }
 }
 
 
 @media (max-width: 1199px) {
 @media (max-width: 1199px) {
@@ -1264,7 +1264,7 @@ h6 {
 }
 }
 
 
 .card:hover {
 .card:hover {
-  background: linear-gradient(135deg, #4897D8, #ffdb5c);
+  background: linear-gradient(135deg, #FA6E59, #FFDB5C);
   box-shadow: 0 5px 15px #340e8b91;
   box-shadow: 0 5px 15px #340e8b91;
 }
 }
 
 
@@ -2071,3 +2071,457 @@ ul.japanese-cboxtags li input[type="checkbox"] {
   opacity: 0;
   opacity: 0;
 
 
 }
 }
+
+
+
+/*Filtro de invierno*/
+
+ul.winter-cboxtags {
+  list-style: none;
+  padding: 10px;
+
+}
+
+ul.winter-cboxtags li {
+  display: block;
+  
+}
+
+ul.winter-cboxtags li label {
+  display: inline-block;
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 16px;
+  font-family: 'Montserrat', sans-serif;
+  border-radius: 4px;
+  white-space: nowrap;
+  margin: 0 0 -12px 0;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-transition: all .2s;
+  -o-transition: all .2s;
+  transition: all .2s;
+  display: block;
+
+}
+
+ul.winter-cboxtags li label {
+  padding: 10px 10px;
+  cursor: pointer;
+}
+
+ul.winter-cboxtags li label::before {
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  font-family: "FontAwesome";
+  font-weight: 900;
+  font-size: 24px;
+  padding: 0;
+  margin-right: 15px;
+  content: "\f1db";
+  color: rgba(255, 255, 255, 0.2);
+  -webkit-transition: -webkit-transform .3s ease-in-out;
+  transition: -webkit-transform .3s ease-in-out;
+  -o-transition: transform .3s ease-in-out;
+  transition: transform .3s ease-in-out;
+  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
+  position: absolute;
+  right: 40px;
+  margin-top: -5px;
+
+}
+
+
+
+ul.winter-cboxtags li input[type="checkbox"]:checked+label::before {
+  content: "\f058";
+  -webkit-transform: rotate(-360deg);
+  -ms-transform: rotate(-360deg);
+  transform: rotate(-360deg);
+  -webkit-transition: -webkit-transform .3s ease-in-out;
+  transition: -webkit-transform .3s ease-in-out;
+  -o-transition: transform .3s ease-in-out;
+  transition: transform .3s ease-in-out;
+  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
+  color: #fff;
+
+}
+
+ul.winter-cboxtags li input[type="checkbox"]:checked+label {
+  border: 1px solid #EEEEEE;
+  
+  background: linear-gradient(to right, #1b63b5 , #36bfde);
+ 
+
+
+  color: #fff;
+  -webkit-transition: all .2s;
+  -o-transition: all .2s;
+  transition: all .2s;
+  
+}
+
+ul.winter-cboxtags li input[type="checkbox"]:checked+label span {
+  background: #fff;
+  color: #000;
+  
+}
+
+ul.winter-cboxtags li input[type="checkbox"] {
+  display: absolute;
+ 
+}
+
+ul.winter-cboxtags li input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+
+}
+
+
+/*Filtro de primavera*/
+
+ul.spring-cboxtags {
+  list-style: none;
+  padding: 10px;
+
+}
+
+ul.spring-cboxtags li {
+  display: block;
+  
+}
+
+ul.spring-cboxtags li label {
+  display: inline-block;
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 16px;
+  font-family: 'Montserrat', sans-serif;
+  border-radius: 4px;
+  white-space: nowrap;
+  margin: 0 0 -12px 0;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-transition: all .2s;
+  -o-transition: all .2s;
+  transition: all .2s;
+  display: block;
+
+}
+
+ul.spring-cboxtags li label {
+  padding: 10px 10px;
+  cursor: pointer;
+}
+
+ul.spring-cboxtags li label::before {
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  font-family: "FontAwesome";
+  font-weight: 900;
+  font-size: 24px;
+  padding: 0;
+  margin-right: 15px;
+  content: "\f1db";
+  color: rgba(255, 255, 255, 0.2);
+  -webkit-transition: -webkit-transform .3s ease-in-out;
+  transition: -webkit-transform .3s ease-in-out;
+  -o-transition: transform .3s ease-in-out;
+  transition: transform .3s ease-in-out;
+  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
+  position: absolute;
+  right: 40px;
+  margin-top: -5px;
+
+}
+
+
+
+ul.spring-cboxtags li input[type="checkbox"]:checked+label::before {
+  content: "\f058";
+  -webkit-transform: rotate(-360deg);
+  -ms-transform: rotate(-360deg);
+  transform: rotate(-360deg);
+  -webkit-transition: -webkit-transform .3s ease-in-out;
+  transition: -webkit-transform .3s ease-in-out;
+  -o-transition: transform .3s ease-in-out;
+  transition: transform .3s ease-in-out;
+  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
+  color: #fff;
+
+}
+
+ul.spring-cboxtags li input[type="checkbox"]:checked+label {
+  border: 1px solid #EEEEEE;
+  
+  background: linear-gradient(to right, #f9b1c9 , #c6e171);
+ 
+
+
+  color: #010101;
+  -webkit-transition: all .2s;
+  -o-transition: all .2s;
+  transition: all .2s;
+  
+}
+
+ul.spring-cboxtags li input[type="checkbox"]:checked+label span {
+  background: #fff;
+  color: #000;
+  
+}
+
+ul.spring-cboxtags li input[type="checkbox"] {
+  display: absolute;
+ 
+}
+
+ul.spring-cboxtags li input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+
+}
+
+
+
+/*Filtro de verano*/
+
+ul.summer-cboxtags {
+  list-style: none;
+  padding: 10px;
+
+}
+
+ul.summer-cboxtags li {
+  display: block;
+  
+}
+
+ul.summer-cboxtags li label {
+  display: inline-block;
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 16px;
+  font-family: 'Montserrat', sans-serif;
+  border-radius: 4px;
+  white-space: nowrap;
+  margin: 0 0 -12px 0;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-transition: all .2s;
+  -o-transition: all .2s;
+  transition: all .2s;
+  display: block;
+
+}
+
+ul.summer-cboxtags li label {
+  padding: 10px 10px;
+  cursor: pointer;
+}
+
+ul.summer-cboxtags li label::before {
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  font-family: "FontAwesome";
+  font-weight: 900;
+  font-size: 24px;
+  padding: 0;
+  margin-right: 15px;
+  content: "\f1db";
+  color: rgba(255, 255, 255, 0.2);
+  -webkit-transition: -webkit-transform .3s ease-in-out;
+  transition: -webkit-transform .3s ease-in-out;
+  -o-transition: transform .3s ease-in-out;
+  transition: transform .3s ease-in-out;
+  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
+  position: absolute;
+  right: 40px;
+  margin-top: -5px;
+
+}
+
+
+
+ul.summer-cboxtags li input[type="checkbox"]:checked+label::before {
+  content: "\f058";
+  -webkit-transform: rotate(-360deg);
+  -ms-transform: rotate(-360deg);
+  transform: rotate(-360deg);
+  -webkit-transition: -webkit-transform .3s ease-in-out;
+  transition: -webkit-transform .3s ease-in-out;
+  -o-transition: transform .3s ease-in-out;
+  transition: transform .3s ease-in-out;
+  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
+  color: #fff;
+
+}
+
+ul.summer-cboxtags li input[type="checkbox"]:checked+label {
+  border: 1px solid #EEEEEE;
+  
+  background: linear-gradient(to right, #fde03a , #feae4b);
+ 
+
+
+  color: #000;
+  -webkit-transition: all .2s;
+  -o-transition: all .2s;
+  transition: all .2s;
+  
+}
+
+ul.summer-cboxtags li input[type="checkbox"]:checked+label span {
+  background: #fff;
+  color: #000;
+  
+}
+
+ul.summer-cboxtags li input[type="checkbox"] {
+  display: absolute;
+ 
+}
+
+ul.summer-cboxtags li input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+
+}
+
+
+/*Filtro de otoño*/
+
+ul.autumn-cboxtags {
+  list-style: none;
+  padding: 10px;
+
+}
+
+ul.autumn-cboxtags li {
+  display: block;
+  
+}
+
+ul.autumn-cboxtags li label {
+  display: inline-block;
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 16px;
+  font-family: 'Montserrat', sans-serif;
+  border-radius: 4px;
+  white-space: nowrap;
+  margin: 0 0 5px 0;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-transition: all .2s;
+  -o-transition: all .2s;
+  transition: all .2s;
+  display: block;
+
+}
+
+ul.autumn-cboxtags li label {
+  padding: 10px 10px;
+  cursor: pointer;
+}
+
+ul.autumn-cboxtags li label::before {
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  font-family: "FontAwesome";
+  font-weight: 900;
+  font-size: 24px;
+  padding: 0;
+  margin-right: 15px;
+  content: "\f1db";
+  color: rgba(255, 255, 255, 0.2);
+  -webkit-transition: -webkit-transform .3s ease-in-out;
+  transition: -webkit-transform .3s ease-in-out;
+  -o-transition: transform .3s ease-in-out;
+  transition: transform .3s ease-in-out;
+  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
+  position: absolute;
+  right: 40px;
+  margin-top: -5px;
+
+}
+
+
+
+ul.autumn-cboxtags li input[type="checkbox"]:checked+label::before {
+  content: "\f058";
+  -webkit-transform: rotate(-360deg);
+  -ms-transform: rotate(-360deg);
+  transform: rotate(-360deg);
+  -webkit-transition: -webkit-transform .3s ease-in-out;
+  transition: -webkit-transform .3s ease-in-out;
+  -o-transition: transform .3s ease-in-out;
+  transition: transform .3s ease-in-out;
+  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
+  color: #fff;
+
+}
+
+ul.autumn-cboxtags li input[type="checkbox"]:checked+label {
+  border: 1px solid #EEEEEE;
+  
+  background: linear-gradient(to right, #57170b , #f5e3a5);
+ 
+
+
+  color: #fff;
+  -webkit-transition: all .2s;
+  -o-transition: all .2s;
+  transition: all .2s;
+  
+}
+
+ul.autumn-cboxtags li input[type="checkbox"]:checked+label span {
+  background: #fff;
+  color: #000;
+  
+}
+
+ul.autumn-cboxtags li input[type="checkbox"] {
+  display: absolute;
+ 
+}
+
+ul.autumn-cboxtags li input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+
+}