diff --git a/index.html b/index.html index d19b483..3a66914 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,9 @@

Licores son Amores

Descubre qué cócteles puedes preparar

+
diff --git a/src/main.js b/src/main.js index adc705f..6669a14 100644 --- a/src/main.js +++ b/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] diff --git a/src/styles.css b/src/styles.css index bc0b506..f67513e 100644 --- a/src/styles.css +++ b/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);