diff --git a/index.html b/index.html
index d19b483..3a66914 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,9 @@
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);