Show all recipes button on top of site added

index.html

@@ -21,6 +21,9 @@
       <header>
           <h1>Licores son Amores</h1>
           <p class="subtitle">Descubre qué cócteles puedes preparar</p>
+          <button id="show-all-recipes-button" disabled="false">
+              ¡Ver todos los cocktails!
+          </button>
       </header>
 
       <div class="section">

src/main.js

@@ -47,6 +47,17 @@ function toggleSpirit(index, forcedCheckValue) {
 }
 
 function enableButtonsLogic() {
+  // Add logic to directly show all cocktails button
+  const allRecipesButton = document.getElementById("show-all-recipes-button");
+  console.log("allRecipesButton", allRecipesButton);
+  if (allRecipesButton) {
+    allRecipesButton.disabled = false;
+    allRecipesButton.addEventListener("click", (e) => {
+      selectAll();
+      findRecipes();
+    });
+  }
+
   const grid = document.getElementById("spiritsGrid");
   // Add toggle logic to cards
   spiritsData.map((spirit, index) => {
@@ -62,6 +73,7 @@ function enableButtonsLogic() {
     });
     section[0].querySelector(".mix-button").disabled = true;
   }
+
   // Add logic to select all / none buttons
   if (section && section.length > 0) {
     section[0]

src/styles.css

@@ -117,6 +117,31 @@ h1 {
   }
 }
 
+#show-all-recipes-button {
+  width: fit-content;
+  padding: 0.2rem 0.5rem;
+  font-family: "Fredoka", sans-serif;
+  font-size: 0.8rem;
+  background: linear-gradient(135deg, var(--deep-red) 0%, var(--cognac) 100%);
+  color: white;
+  border: none;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 8px 20px rgba(139, 21, 56, 0.4);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 85%;
+}
+#show-all-recipes-button:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 12px 30px rgba(139, 21, 56, 0.5);
+}
+
+#show-all-recipes-button:active {
+  transform: translateY(-1px);
+}
+
 .section {
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(10px);