From a970b72aef37a4baec8af264ac2e8108ffb4cdd9 Mon Sep 17 00:00:00 2001
From: Jose Jimenez <jjsalinas@pm.me>
Date: Sun, 1 Feb 2026 14:02:17 +0100
Subject: [PATCH] Prep work for mass selection actions

---
 index.html     |  9 +++++++++
 src/main.js    | 10 ++++++++++
 src/styles.css | 36 ++++++++++++++++++++++++++++++++++++
 3 files changed, 55 insertions(+)

diff --git a/index.html b/index.html
index c65f83f..6201ad4 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,15 @@
           <button class="mix-button" id="mix-button" disabled="true">
               ¡A Mezclar!
           </button>
+          <!-- TODO: select all/none -->
+          <!--<div class="selection-options" id="selection-options">
+              <button class="selection-button" id="select-all-button" disabled="true">
+                  Select all
+              </button>
+              <button class="selection-button" id="select-none-button" disabled="true">
+                  Reset selection
+              </button>
+          </div>-->
       </div>
 
       <div class="section">
diff --git a/src/main.js b/src/main.js
index e73587f..5d461d7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -101,6 +101,15 @@ function findRecipes() {
   });
 }
 
+// TODO: select all/none spirits
+// function selectAll() {
+//   return;
+// }
+
+// function selectNone() {
+//   return;
+// }
+
 function renderRecipes(recipes) {
   const container = document.getElementById("recipesContainer");
 
@@ -122,6 +131,7 @@ function renderRecipes(recipes) {
       return `
             <div class="recipe-card">
                 <div class="recipe-name">${recipe.name}</div>
+                <div class="non-alcohol-title">Licores:</div>
                 <div class="recipe-ingredients">
                     ${alcoholIngredients
                       .map(
diff --git a/src/styles.css b/src/styles.css
index 0285e57..47c1a40 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -382,6 +382,42 @@ h2 {
   }
 }
 
+.selection-options {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 0.5rem;
+
+  .selection-button {
+    width: 120px;
+    padding: 0.2rem 0.3rem;
+    font-family: "Fredoka", sans-serif;
+    font-size: 0.5rem;
+    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;
+  }
+  .selection-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 12px 30px rgba(139, 21, 56, 0.5);
+  }
+
+  .selection-button:active {
+    transform: translateY(-1px);
+  }
+
+  .selection-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
 .warning-msg {
   font-family: "Fredoka", sans-serif;
   font-size: 1.1rem;