Update index.html

index.html

@@ -25,8 +25,6 @@
     --amber-text:#a86c0b;
     --blue:#eef3ff;
     --blue-text:#4057c7;
-    --rose:#fcedef;
-    --rose-text:#bd4b60;
     --radius: 24px;
   }
 
@@ -539,13 +537,6 @@
     padding: 7px 10px;
   }
 
-  .footer-note{
-    margin-top: 16px;
-    color: var(--muted2);
-    font-size: 12px;
-    line-height: 1.6;
-  }
-
   .loading{
     display:none;
     align-items:center;
@@ -642,11 +633,18 @@
           <h3 class="side-title">Try a recipe</h3>
           <p class="side-text">Pick a sample to test the adapter.</p>
           <div class="quick-tries">
-            <button class="chip" onclick="fillExample('chocolate cake')">Chocolate cake</button>
-            <button class="chip" onclick="fillExample('butter chicken')">Butter chicken</button>
-            <button class="chip" onclick="fillExample('blt sandwich')">BLT sandwich</button>
+            <button class="chip" onclick="fillExample('fettuccine alfredo')">Fettucine Alfredo</button>
+            <button class="chip" onclick="fillExample('pancakes')">Pancakes</button>
+            <button class="chip" onclick="fillExample('butter chicken')">Butter Chicken</button>
           </div>
         </div>
+
+        <div class="side-block">
+          <h3 class="side-title">How it works</h3>
+          <p class="side-text">
+            Paste a recipe, choose a diet, and review the ingredient cards.
+          </p>
+        </div>
       </aside>
     </section>
 
@@ -654,7 +652,7 @@
       <div class="section-head">
         <div>
           <h3>Adapt a recipe</h3>
-          <p>Paste anything from a recipe post or notes app, then choose how you want it adapted.</p>
+          <p>Paste a recipe, choose a diet, and review the ingredient cards.</p>
         </div>
         <div class="segmented" role="tablist" aria-label="Diet mode">
           <button class="diet-btn active-vegan" data-diet="vegan" onclick="setDiet(this)">Vegan</button>
@@ -665,7 +663,7 @@
 
       <div class="editor">
         <div>
-          <textarea id="recipeInput" placeholder="Paste your recipe here. For example: 2 cups flour, 2 eggs, 1/2 cup butter, 1 cup milk, vanilla extract..."></textarea>
+          <textarea id="recipeInput" placeholder="Paste your recipe here."></textarea>
 
           <div class="input-actions">
             <div class="helper" aria-live="polite">
@@ -688,13 +686,9 @@
         </div>
 
         <div class="side-block">
-          <h3 class="side-title">What appears after submit</h3>
+          <h3 class="side-title">Results</h3>
           <p class="side-text">
-            You’ll see a quick summary at the top, followed by ingredient cards that show the original item,
-            the suggested substitute, and the instructions for using it.
-          </p>
-          <p class="side-text" style="margin-top:12px;">
-            The layout is designed so it still feels good on mobile, which matters if someone opens it from a shared link.
+            You will see a summary, then ingredient cards with the substitute, notes, and source.
           </p>
         </div>
       </div>
@@ -719,13 +713,12 @@
       <div class="results-head">
         <div>
           <h3 id="resultTitle">Adapted recipe</h3>
-          <p id="resultSubtitle" style="margin:6px 0 0;color:var(--muted);font-size:14px;">Review each ingredient and expand any card for details.</p>
+          <p id="resultSubtitle" style="margin:6px 0 0;color:var(--muted);font-size:14px;">Open any card to inspect the substitution, notes, and source.</p>
         </div>
         <div class="badge" id="resultBadge"></div>
       </div>
 
       <div class="list" id="ingList"></div>
-
     </section>
   </div>
 
@@ -736,20 +729,13 @@ function setDiet(btn) {
   currentDiet = btn.dataset.diet;
   document.querySelectorAll(".diet-btn").forEach(b => b.className = "diet-btn");
   btn.className = "diet-btn active-" + currentDiet;
-
-  const labels = {
-    vegan: "Adapt recipe",
-    keto: "Adapt recipe",
-    both: "Adapt recipe"
-  };
-  document.getElementById("submitBtn").textContent = labels[currentDiet];
 }
 
 function fillExample(name) {
   const examples = {
-    "chocolate cake": "2 cups all-purpose flour, 1 cup sugar, 2 eggs, 1/2 cup butter, 1 cup whole milk, 1/2 cup cocoa powder, 1 tsp baking powder, 1 tsp vanilla extract",
-    "butter chicken": "500g chicken thighs, 1 cup heavy cream, 2 tbsp butter, 1 onion, 3 cloves garlic, 2 tsp garam masala, 1 tsp turmeric, 1 can tomato puree, salt",
-    "blt sandwich": "4 slices bacon, 2 slices bread, lettuce, tomato, mayonnaise, salt, black pepper"
+    "fettuccine alfredo": "24 ounces fettuccine, 1 cup butter, 1 pint heavy cream, 1 cup grated Pecorino romano, 1 cup grated Parmesan",
+    "pancakes": "1 cup all-purpose flour, 1 tbsp white sugar, 1 tsp baking powder, 1 cup milk, 2 tbsp melted butter",
+    "butter chicken": "450g Chicken Breast, 2 tbsp Butter, 1 cup Tomato Puree, half cup Heavy Cream, half cup Yogurt"
   };
   document.getElementById("recipeInput").value = examples[name] || "";
   document.getElementById("recipeInput").focus();
@@ -864,7 +850,6 @@ function renderResults(data) {
   list.innerHTML = "";
 
   data.ingredients.forEach((r, i) => {
-    const isSwap = !r.compliant;
     const dotClass = r.compliant ? "dot dot-ok" : (r.confidence && r.confidence < 0.6 ? "dot dot-warn" : "dot dot-swap");
     const statusText = r.compliant ? "compatible" : "substitution suggested";