added styles

static/script.js

@@ -0,0 +1,104 @@
+$(document).ready(function () {
+    console.log("Document ready!");  // Check if document is ready
+
+    $('.toggle-button').click(function () {
+        console.log("Button clicked:", this.name);  // Check if button click is detected
+        $(this).toggleClass('active');
+
+        let hiddenInput = $('input[name="' + this.name + '"]');
+        if ($(this).hasClass('active')) {
+            hiddenInput.val('1');
+        } else {
+            hiddenInput.val('');
+        }
+
+        let anyActive = $('.toggle-button.active').length > 0;
+        if (anyActive) {
+            $('#recommendationsOutput').show();
+        } else {
+            $('#recommendationsOutput').hide();
+        }
+    });
+});
+
+document.getElementById('recommendationForm').addEventListener('submit', function(e) {
+    e.preventDefault(); // Prevent default form submission
+    
+    var formData = new FormData(this);
+
+    fetch('/recommend', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => {
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.json();
+    })
+    .then(data => {
+        var recommendationsDiv = document.getElementById('recommendationsOutput');
+        recommendationsDiv.innerHTML = ''; // Clear previous recommendations
+        
+        if (data.recommendations && data.recommendations.length > 0) {
+            var h2 = document.createElement('h2');
+            h2.textContent = 'Based on your Favorite drinks ☕ we think you will love 💚 these drinks..';
+            recommendationsDiv.appendChild(h2);
+            
+            var ul = document.createElement('ol');
+            data.recommendations.forEach(function(drink) {
+                var li = document.createElement('li');
+                li.textContent = drink.Drink_name;
+                ul.appendChild(li);
+            });
+            recommendationsDiv.appendChild(ul);
+
+            // Add collaboration invitation
+            var collaborationText = document.createElement('div');
+            collaborationText.className = 'collaboration-text';
+            collaborationText.innerHTML = `<h3>Intrigued by the Fusion of Coffee and Data?</h3>
+                                            <p>If you're excited about this blend of coffee and data science, or if you have ideas for collaboration, let's connect!<br><br>
+                                            Reach out to me at <a href="mailto:nihithna@buffalo.edu">nihithna@buffalo.edu</a>. Together, we can brew something innovative!</p>`;
+            recommendationsDiv.appendChild(collaborationText);
+            
+            // Add Clear Drinks button
+            var clearButton = document.createElement('button');
+            clearButton.type = 'button';
+            clearButton.className = 'btn btn-outline-danger';
+            clearButton.textContent = 'Clear Drinks';
+            clearButton.addEventListener('click', function() {
+                location.reload(); // Reload the page
+            });
+            recommendationsDiv.appendChild(clearButton);
+        } else {
+            var noResult = document.createElement('p');
+            noResult.textContent = 'No drinks selected';
+            recommendationsDiv.appendChild(noResult);
+        }
+
+        // Scroll to recommendationsOutput div
+        recommendationsDiv.scrollIntoView({ behavior: 'smooth' });
+    })
+    .catch(error => {
+        console.error('Error:', error);
+
+        var errorDiv = document.getElementById('recommendationsOutput');
+        errorDiv.textContent = 'An error occurred while fetching recommendations.';
+    });
+});
+
+function searchDrinks() {
+    const input = document.getElementById('searchInput').value.toLowerCase();
+    const labels = document.querySelectorAll('.sections label');
+
+    labels.forEach(label => {
+        const text = label.textContent.toLowerCase();
+        if (text.includes(input)) {
+            label.style.display = '';
+        } else {
+            label.style.display = 'none';
+        }
+    });
+
+    return false; // Prevent form submission
+}

static/style.css

@@ -0,0 +1,354 @@
+/* General Body and Header Styling */
+body {
+    background-color: #f5f5f5;
+    margin: 0;
+    padding: 0;
+}
+
+header {
+    background-color: 	#00723f;
+    color: 	#fffcfc;
+    text-align: center;
+    padding: 5px 0px;
+    font-weight: bold;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    font-style: italic;
+    height: 80px;
+}
+
+header a {
+
+    color: #fffcfc
+}
+
+.toggle-button strong {
+    font-weight: bold;
+}
+
+.main-heading {
+    font-size: 2.5em;
+    line-height: 1.2;
+    text-align: center;
+}
+
+.small-text {
+    font-size: 0.7em;
+}
+
+body {
+    font-family: Arial, sans-serif;
+}
+
+.container {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 20px;
+    margin: 40px;
+}
+.intro{
+    padding-top: 25px;
+    padding-bottom: 0px;
+    margin-left: 50px; 
+    margin-right: 50px;
+}
+
+.intro h2, .container h3 {
+    font-weight: bold;
+    color: #00723f;
+}
+
+.intro p, .container p {
+    font-size: 1.1rem;
+    color: #333;
+    line-height: 1.6;
+}
+
+.intro a, .container a {
+    color: #00723f;
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.3s;
+}
+
+.intro a:hover, .container a:hover {
+    color: #00723f; /* Darker green on hover */
+}
+
+
+.content {
+    width: 1000px;
+}
+
+
+
+
+
+#filters {
+    flex: auto;
+    background-color: #f9f9f9;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    flex-shrink: 0;
+    font-weight: bold;
+    margin-top: 30px;
+}
+
+#craving_text {
+    font-size: 3em;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+
+.toggle-button {
+    background-color: transparent;
+    color: #007bff;
+    border: 1px solid #007bff;
+    padding: 6px 12px;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+}
+
+.toggle-button.active {
+    background-color: #00723f;
+    color: white;
+    border-color: #00723f;
+}
+
+.toggle-button:hover:not(.active) {
+    background-color: #00723f;
+    color: white;
+}
+
+.sections {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+input[type="checkbox"] {
+}
+
+input[type="checkbox"]:checked {
+    background-color: #00723f;
+}
+
+.section {
+    flex: 1 1 200px;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.section img {
+    max-width: 100%;
+    height: auto; /* Maintain aspect ratio */
+    max-height: 150px; /* Significantly reduce the size of the images */
+    border-radius: 8px;
+}
+
+#recommendations {
+    display: block;
+    margin: 20px auto;
+    padding: 15px 30px;
+    font-size: 18px;
+    text-align: center;
+    background-color: #00723f;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+#recommendations:hover {
+    background-color: #00723f;
+}
+
+.section h4 {
+    margin-top: 10px;
+    margin-bottom: 5px;
+    font-size: 1.2rem;
+    color: #00723f;
+}
+
+.section label {
+    display: block;
+    margin-bottom: 8px;
+}
+
+.section input[type="checkbox"] {
+    margin-right: 5px;
+    vertical-align: middle;
+}
+
+input[type="submit"] {
+    background-color: #ffffff;
+    color: #000000;
+    border: 2px solid #00723f;
+    padding: 10px 20px;
+    font-size: 1rem;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.3s, color 0.3s;
+    margin: 100px;
+}
+
+input[type="submit"]:hover {
+    background-color: #00723f;
+    color: #ffffff;
+}
+
+input[type="submit"]:active {
+    background-color: hwb(160 20% 23%);
+    color: #ffffff;
+}
+
+label {
+    display: block;
+    margin-bottom: 8px;
+    cursor: pointer;
+}
+
+input[type="checkbox"] {
+    margin-right: 5px;
+    vertical-align: middle;
+}
+
+.recommendations {
+    margin-top: 20px;
+    padding: 20px;
+    background-color: #f0f0f0;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.section label {
+    cursor: pointer;
+}
+
+.btn {
+    background-color: white;
+    color: black;
+    border: 1px solid black;
+    padding: 10px 20px;
+    font-size: 16px;
+    margin: 10px;
+    transition: background-color 0.3s, color 0.3s;
+    border-radius: 10px; /* Rounded corners */
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Poppy box-shadow */
+}
+
+.btn:hover {
+    background-color: #f0f0f0; /* Light gray on hover */
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Slightly more prominent box-shadow on hover */
+}
+
+
+.btn.selected {
+    background-color: #00723f;
+    color: white;
+}
+
+.selected {
+    background-color: #00723f;
+    color: white;
+}
+
+.output {
+    flex: auto;
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+    flex-shrink: 0;
+    font-weight: bold;
+    margin: 20px;
+    text-align: center;
+    margin-top: 60px;
+}
+
+.output p {
+    font-size: 1.2em;
+    margin-bottom: 10px;
+}
+
+.output ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.output li {
+    background-color: #00723f;
+    margin: 10px 0;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    text-align: left;
+    color: #fff;
+}
+
+.output li:hover {
+    transform: scale(1.05);
+    transition: transform 0.3s ease-in-out;
+}
+
+.output h3 {
+    font-size: 1.5em;
+    color: #00723f;
+    margin-bottom: 15px;
+}
+
+.footer {
+    background-color: #00723f;
+    color: white;
+    text-align: center;
+    padding: 1rem 0;
+    
+    width: 100%;
+    bottom: 0;
+}
+
+.footer a
+{
+    color :#fff
+}
+.collaboration-text {
+    margin-top: 20px;
+    padding: 20px;
+    background-color: #f0f8ff;
+    border-radius: 10px;
+    text-align: center;
+    font-family: 'Poppins', sans-serif;
+}
+
+.collaboration-text h3 {
+    font-size: 24px;
+    color: #2c3e50;
+}
+
+.collaboration-text p {
+    font-size: 16px;
+    color: #34495e;
+}
+
+.collaboration-text a {
+    color: #2980b9;
+    text-decoration: none;
+}
+
+.collaboration-text a:hover {
+    text-decoration: underline;
+}
+
+#loadingGif {
+    display: none;
+    text-align: center;
+    margin-top: 20px;
+}
+
+#logo-img {
+    width: 60px;
+    height: 60px;
+    vertical-align: middle;
+}

templates/index.html

@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Starbucks Drink Recommendation</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+</head>
+<body>
+    <header>
+        <h1 class="main-heading">
+            <img src="../static/bmr_logo.png" id="logo-img" alt="logo" height="60">
+             Brew My Recommendations <span class="small-text">by <a href="https://www.linkedin.com/in/nihithnath/">Nihith</a></span>
+        </h1>
+        
+    </header>
+    <div class="intro">
+       
+        <h2>Welcome to Brew My Recommendations!</h2>
+            
+        <h3>Select your favorite  Starbucks drinks and apply filters like hot, cold, coffee, or tea. The system uses your preferences to recommend the best drinks tailored to your taste.</h3>  
+    </div>
+    <div class="container">
+        <div class="content">
+            <h3>Select Your Favorite Drinks:</h3>
+                <form id="recommendationForm" method="POST">
+                    <div class="sections">
+                        <div class="section">
+                            <img src="https://globalassets.starbucks.com/digitalassets/products/bev/SBX20190617_CaffeAmericano.jpg?impolicy=1by1_tight_288" alt="Hot Coffees"><br>
+                            <h4>Hot Coffees</h4><br>
+                            <label><input type="checkbox" name="selected_drinks" value="Americano"> Americano</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Blonde Vanilla Latte"> Blonde Vanilla Latte</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Caffe Latte"> Caffe Latte</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Caffe Mocha"> Caffe Mocha</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Cappuccino"> Cappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Caramel Macchiato"> Caramel Macchiato</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Cinnamon Dolce Latte"> Cinnamon Dolce Latte</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Dark Chocolate Mocha Reserve"> Dark Chocolate Mocha Reserve</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Drip Brew Coffee"> Drip Brew Coffee</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Espresso"> Espresso</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Espresso Con Panna"> Espresso Con Panna</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Espresso Macchiato"> Espresso Macchiato</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Flat White"> Flat White</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Hazelnut Bianco Latte Reserve"> Hazelnut Bianco Latte Reserve</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Honey Almondmilk Flat White"> Honey Almondmilk Flat White</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Latte Reserve"> Latte Reserve</label>
+                            <label><input type="checkbox" name="selected_drinks" value="White Chocolate Mocha"> White Chocolate Mocha</label>
+                            <br>
+                            <img src="https://globalassets.starbucks.com/digitalassets/products/bev/SBX20190617_SignatureHotChocolate.jpg?impolicy=1by1_tight_288" alt="Milk, Juice &amp; More" role="presentation"><br>
+                            <h4>Hot Drinks</h4><br>
+                            <label><input type="checkbox" name="selected_drinks" value="Caramel Apple Spice"> Caramel Apple Spice</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Hot Chocolate"> Hot Chocolate</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Steamed Apple Juice"> Steamed Apple Juice</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Steamed Milk"> Steamed Milk</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Vanilla Creme"> Vanilla Creme</label>
+                            <label><input type="checkbox" name="selected_drinks" value="White Hot Chocolate"> White Hot Chocolate</label>
+                            <br>
+                            <img src="https://globalassets.starbucks.com/digitalassets/products/bev/SBX20220411_ChaiLatte.jpg?impolicy=1by1_tight_288" alt="Hot Teas" role="presentation"><br>
+                            <h4>Hot Teas</h4><br>
+                            <label><input type="checkbox" name="selected_drinks" value="Chai Tea"> Chai Tea</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Chai Tea Latte"> Chai Tea Latte</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Earl Grey Tea"> Earl Grey Tea</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Emperors Cloud & Mist"> Emperors Cloud & Mist</label>
+                            <label><input type="checkbox" name="selected_drinks" value="English Breakfast Tea"> English Breakfast Tea</label>
+                            <label><input type="checkbox" name="selected_drinks" value="English Tea Latte"> English Tea Latte</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Honey Citrus Mint Tea"> Honey Citrus Mint Tea</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Jade Citrus Mint Tea"> Jade Citrus Mint Tea</label>
+                            <label><input type="checkbox" name="selected_drinks" value="London Fog Tea Latte"> London Fog Tea Latte</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Mango Black Tea"> Mango Black Tea</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Matcha Tea Latte"> Matcha Tea Latte</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Mint Majesty Tea"> Mint Majesty Tea</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Peach Tranquility Tea"> Peach Tranquility Tea</label>
+                            <br>
+                        </div>
+                        
+                        <div class="section">
+                            <img src="https://globalassets.starbucks.com/digitalassets/products/bev/SummerBerryRefreshersLemonade.jpg?impolicy=1by1_tight_288" alt="Starbucks Refreshers® Beverages" role="presentation"><br>
+                            <h4>Starbucks Refreshers® Beverages</h4><br>
+                            <label><input type="checkbox" name="selected_drinks" value="Blended Strawberry Lemonade"> Blended Strawberry Lemonade</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Dragon Drink Refreshers"> Dragon Drink Refreshers</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Frozen Mango Dragonfruit Lemonade"> Frozen Mango Dragonfruit Lemonade</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Frozen Pineapple Passionfruit Lemonade"> Frozen Pineapple Passionfruit Lemonade</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Frozen Strawberry Açaí Lemonade"> Frozen Strawberry Açaí Lemonade</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Mango Dragonfruit Lemonade Refreshers"> Mango Dragonfruit Lemonade Refreshers</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Mango Dragonfruit Refreshers"> Mango Dragonfruit Refreshers</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Paradise Drink"> Paradise Drink</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Pineapple Passionfruit"> Pineapple Passionfruit</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Pink Drink"> Pink Drink</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Strawberry Açaí Lemonade Refreshers"> Strawberry Açaí Lemonade Refreshers</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Strawberry Açaí Refreshers"> Strawberry Açaí Refreshers</label>
+                            <br>
+                            <img src="https://globalassets.starbucks.com/digitalassets/products/bev/SBX20221130_WhiteChocolateMacadamiaColdBrew.jpg?impolicy=1by1_tight_288" alt="Cold Coffees" role="presentation"><br>
+                            <h4>Cold Coffees</h4><br>
+                            <label><input type="checkbox" name="selected_drinks" value="Chocolate Cream Cold Brew"> Chocolate Cream Cold Brew</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Cinnamon Caramel Cream Cold Brew"> Cinnamon Caramel Cream Cold Brew</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Cinnamon Caramel Cream Nitro Cold Brew"> Cinnamon Caramel Cream Nitro Cold Brew</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Cold Brew"> Cold Brew</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Cold Brew Coffee with Milk"> Cold Brew Coffee with Milk</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Americano"> Iced Americano</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Blonde Vanilla Latte"> Iced Blonde Vanilla Latte</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Brown Sugar Oatmilk Shaken Espresso"> Iced Brown Sugar Oatmilk Shaken Espresso</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Caffe Latte"> Iced Caffe Latte</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Chai Tea Latte"> Iced Chai Tea Latte</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Chocolate Almondmilk Shaken Espresso"> Iced Chocolate Almondmilk Shaken Espresso</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Cinnamon Dolce Latte"> Iced Cinnamon Dolce Latte</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Coffee"> Iced Coffee</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Coffee with Milk"> Iced Coffee with Milk</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Espresso"> Iced Espresso</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Flat White"> Iced Flat White</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Hazelnut Bianco Latte Reserve"> Iced Hazelnut Bianco Latte Reserve</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Honey Almondmilk Flat White"> Iced Honey Almondmilk Flat White</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Latte Reserve"> Iced Latte Reserve</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Shaken Espresso"> Iced Shaken Espresso</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Toasted Vanilla Oatmilk Shaken Espresso"> Iced Toasted Vanilla Oatmilk Shaken Espresso</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Nitro Cold Brew"> Nitro Cold Brew</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Salted Caramel Cream Cold Brew"> Salted Caramel Cream Cold Brew</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Vanilla Sweet Cream Cold Brew"> Vanilla Sweet Cream Cold Brew</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Vanilla Sweet Cream Nitro Cold Brew"> Vanilla Sweet Cream Nitro Cold Brew</label>
+                            <label><input type="checkbox" name="selected_drinks" value="White Chocolate Macadamia Cream Cold Brew"> White Chocolate Macadamia Cream Cold Brew</label>
+                        </div>
+                        
+                    
+                        
+                        <div class="section">
+                            <img src="https://globalassets.starbucks.com/digitalassets/products/bev/SBX20211210_MochaCookieCrumbleFrapp.jpg?impolicy=1by1_tight_288" alt="Frappuccino® Blended Beverages" role="presentation"><br>
+                            <h4>Frappuccinos</h4><br>
+                            <label><input type="checkbox" name="selected_drinks" value="Caffe Vanilla Frappuccino"> Caffe Vanilla Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Caramel Frappuccino"> Caramel Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Caramel Ribbon Crunch Creme Frappuccino"> Caramel Ribbon Crunch Creme Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Caramel Ribbon Crunch Frappuccino"> Caramel Ribbon Crunch Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Chai Creme Frappuccino"> Chai Creme Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Chocolate Cookie Crumble Creme Frappuccino"> Chocolate Cookie Crumble Creme Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Chocolate Java Mint Frappuccino"> Chocolate Java Mint Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Chocolate Mint Creme Frappuccino"> Chocolate Mint Creme Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Coffee Frappuccino"> Coffee Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Double Chocolaty Chip Creme Frappuccino"> Double Chocolaty Chip Creme Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Espresso Frappuccino"> Espresso Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Java Chip Frappuccino"> Java Chip Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Matcha Creme Frappuccino"> Matcha Creme Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Mocha Cookie Crumble Frappuccino"> Mocha Cookie Crumble Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Mocha Frappuccino"> Mocha Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Strawberry Creme Frappuccino"> Strawberry Creme Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Vanilla Bean Creme Frappuccino"> Vanilla Bean Creme Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="White Chocolate Creme Frappuccino"> White Chocolate Creme Frappuccino</label>
+                            <label><input type="checkbox" name="selected_drinks" value="White Chocolate Mocha Frappuccino"> White Chocolate Mocha Frappuccino</label>
+                            <br>
+                            <img src="https://globalassets.starbucks.com/digitalassets/products/bev/SBX20190531_IcedBlackTea.jpg?impolicy=1by1_tight_288" alt="Iced Tea and Lemonade" role="presentation"><br>
+                            <h4>Iced Teas and Lemonade</h4><br>
+                            <label><input type="checkbox" name="selected_drinks" value="Lemonade"> Lemonade</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Black Tea"> Iced Black Tea</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Black Tea Lemonade"> Iced Black Tea Lemonade</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Green Tea"> Iced Green Tea</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Green Tea Lemonade"> Iced Green Tea Lemonade</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced London Fog Tea Latte"> Iced London Fog Tea Latte</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Matcha Lemonade"> Iced Matcha Lemonade</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Matcha Tea Latte"> Iced Matcha Tea Latte</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Passion Tango Tea"> Iced Passion Tango Tea</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Passion Tango Tea Lemonade"> Iced Passion Tango Tea Lemonade</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Peach Green Tea"> Iced Peach Green Tea</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Peach Green Tea Lemonade"> Iced Peach Green Tea Lemonade</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Iced Royal English Breakfast Tea Latte"> Iced Royal English Breakfast Tea Latte</label>
+                            <label><input type="checkbox" name="selected_drinks" value="Sparkling Unsweetened Peach Green Tea"> Sparkling Unsweetened Peach Green Tea</label>
+                
+                        </div>
+                        
+                        
+                    </div>
+                
+
+
+
+                    <div id="filters">
+                        <h3 id="craving_text">I am Craving 😋 ......... </h3>
+                        <div class="form-group">
+                            <button type="button" class="btn btn-outline-primary mr-2 mb-2 toggle-button" name="include_all">Everything</button>
+                            <button type="button" class="btn btn-outline-primary mr-2 mb-2 toggle-button" name="include_coffee"> Coffee</button>
+                            <button type="button" class="btn btn-outline-primary mr-2 mb-2 toggle-button" name="include_tea"> Tea</button>
+                            <button type="button" class="btn btn-outline-primary mr-2 mb-2 toggle-button" name="include_neither">Neither Coffee Nor Tea</button>
+                            <button type="button" class="btn btn-outline-primary mr-2 mb-2 toggle-button" name="include_hot">Something Hot to Sip</button>
+                            <button type="button" class="btn btn-outline-primary mr-2 mb-2 toggle-button" name="include_cold">Some Cold Drink to Chill</button>
+                            <button type="button" class="btn btn-outline-primary mr-2 mb-2 toggle-button" name="include_frozen">Something Frozen</button>
+                        </div>
+                        <input type="hidden" name="n_recommendations" value="5">
+                        
+                        <!-- Add hidden input fields for filter values -->
+                        <input type="hidden" name="include_all" value="">
+                        <input type="hidden" name="include_coffee" value="">
+                        <input type="hidden" name="include_tea" value="">
+                        <input type="hidden" name="include_neither" value="">
+                        <input type="hidden" name="include_hot" value="">
+                        <input type="hidden" name="include_cold" value="">
+                        <input type="hidden" name="include_frozen" value="">
+                        
+                        <!-- Submit button -->
+                        <input id="recommendations" type="submit" value="Brew My Recommendations">
+                    </div>
+                </form>
+
+
+        </div>
+        <div id="loadingGif">
+            <iframe src="https://giphy.com/embed/Wlt4ZlGYNBvspLybad" width="480" height="269" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
+        </div>
+        <div class="output" id="recommendationsOutput">
+            <!-- This section will be dynamically updated with recommendations -->
+                
+
+        </div> 
+        
+       
+    </div>
+      
+    
+    <footer class="footer">
+        <p>Bringing together the art of coffee and the precision of data science. © 2024 Starbucks Drink Recommendation App by <a href="https://www.linkedin.com/in/nihithnath/">Nihith</a>. All rights reserved.  </p>
+    </footer> 
+
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
+        
+    <!-- Your custom JavaScript -->
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
+</body>
+</html>        

templates/index_copy.html

@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Starbucks Drink Recommendation</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+    <header>
+        <h1>Starbucks Drink Recommendation System by Nihith</h1>
+    </header>
+    <div class="content">
+        <h3>Select Your Favorite Drinks:</h3>
+        <form action="/recommend" method="POST">
+            <div class="sections">
+                <div class="section">
+                    <img src="{{ url_for('static', filename='images/hot_coffees.jpg') }}" alt="Hot Coffees"><br>
+                    <h4>Hot Coffees</h4><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Americano"> Americano</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Blonde Vanilla Latte"> Blonde Vanilla Latte</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Caffe Latte"> Caffe Latte</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Caffe Mocha"> Caffe Mocha</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Cappuccino"> Cappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Caramel Macchiato"> Caramel Macchiato</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Cinnamon Dolce Latte"> Cinnamon Dolce Latte</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Dark Chocolate Mocha Reserve"> Dark Chocolate Mocha Reserve</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Drip Brew Coffee"> Drip Brew Coffee</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Espresso"> Espresso</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Espresso Con Panna"> Espresso Con Panna</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Espresso Macchiato"> Espresso Macchiato</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Flat White"> Flat White</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Hazelnut Bianco Latte Reserve"> Hazelnut Bianco Latte Reserve</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Honey Almondmilk Flat White"> Honey Almondmilk Flat White</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Latte Reserve"> Latte Reserve</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="White Chocolate Mocha"> White Chocolate Mocha</label><br>
+                </div>
+                
+                <div class="section">
+                    <img src="{{ url_for('static', filename='images/hot_teas.jpg') }}" alt="Hot Teas"><br>
+                    <h4>Hot Teas</h4><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Chai Tea"> Chai Tea</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Chai Tea Latte"> Chai Tea Latte</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Earl Grey Tea"> Earl Grey Tea</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Emperors Cloud & Mist"> Emperors Cloud & Mist</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="English Breakfast Tea"> English Breakfast Tea</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="English Tea Latte"> English Tea Latte</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Honey Citrus Mint Tea"> Honey Citrus Mint Tea</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Jade Citrus Mint Tea"> Jade Citrus Mint Tea</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="London Fog Tea Latte"> London Fog Tea Latte</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Mango Black Tea"> Mango Black Tea</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Matcha Tea Latte"> Matcha Tea Latte</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Mint Majesty Tea"> Mint Majesty Tea</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Peach Tranquility Tea"> Peach Tranquility Tea</label><br>
+                </div>
+                
+                <div class="section">
+                    <img src="{{ url_for('static', filename='images/hot_drinks.jpg') }}" alt="Hot Drinks"><br>
+                    <h4>Hot Drinks</h4><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Caramel Apple Spice"> Caramel Apple Spice</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Hot Chocolate"> Hot Chocolate</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Steamed Apple Juice"> Steamed Apple Juice</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Steamed Milk"> Steamed Milk</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Vanilla Creme"> Vanilla Creme</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="White Hot Chocolate"> White Hot Chocolate</label><br>
+                </div>
+                
+                <div class="section">
+                    <img src="{{ url_for('static', filename='images/frappuccinos.jpg') }}" alt="Frappuccinos"><br>
+                    <h4>Frappuccinos</h4><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Caffe Vanilla Frappuccino"> Caffe Vanilla Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Caramel Frappuccino"> Caramel Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Caramel Ribbon Crunch Creme Frappuccino"> Caramel Ribbon Crunch Creme Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Caramel Ribbon Crunch Frappuccino"> Caramel Ribbon Crunch Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Chai Creme Frappuccino"> Chai Creme Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Chocolate Cookie Crumble Creme Frappuccino"> Chocolate Cookie Crumble Creme Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Chocolate Java Mint Frappuccino"> Chocolate Java Mint Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Chocolate Mint Creme Frappuccino"> Chocolate Mint Creme Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Coffee Frappuccino"> Coffee Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Double Chocolaty Chip Creme Frappuccino"> Double Chocolaty Chip Creme Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Espresso Frappuccino"> Espresso Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Java Chip Frappuccino"> Java Chip Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Matcha Creme Frappuccino"> Matcha Creme Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Mocha Cookie Crumble Frappuccino"> Mocha Cookie Crumble Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Mocha Frappuccino"> Mocha Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Strawberry Creme Frappuccino"> Strawberry Creme Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Vanilla Bean Creme Frappuccino"> Vanilla Bean Creme Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="White Chocolate Creme Frappuccino"> White Chocolate Creme Frappuccino</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="White Chocolate Mocha Frappuccino"> White Chocolate Mocha Frappuccino</label><br>
+           
+                </div>
+                
+                <div class="section">
+                    <img src="{{ url_for('static', filename='images/cold_coffees.jpg') }}" alt="Cold Coffees"><br>
+                    <h4>Cold Coffees</h4><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Chocolate Cream Cold Brew"> Chocolate Cream Cold Brew</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Cinnamon Caramel Cream Cold Brew"> Cinnamon Caramel Cream Cold Brew</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Cinnamon Caramel Cream Nitro Cold Brew"> Cinnamon Caramel Cream Nitro Cold Brew</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Cold Brew"> Cold Brew</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Cold Brew Coffee with Milk"> Cold Brew Coffee with Milk</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Americano"> Iced Americano</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Blonde Vanilla Latte"> Iced Blonde Vanilla Latte</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Brown Sugar Oatmilk Shaken Espresso"> Iced Brown Sugar Oatmilk Shaken Espresso</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Caffe Latte"> Iced Caffe Latte</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Chai Tea Latte"> Iced Chai Tea Latte</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Chocolate Almondmilk Shaken Espresso"> Iced Chocolate Almondmilk Shaken Espresso</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Cinnamon Dolce Latte"> Iced Cinnamon Dolce Latte</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Coffee"> Iced Coffee</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Coffee with Milk"> Iced Coffee with Milk</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Espresso"> Iced Espresso</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Flat White"> Iced Flat White</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Hazelnut Bianco Latte Reserve"> Iced Hazelnut Bianco Latte Reserve</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Honey Almondmilk Flat White"> Iced Honey Almondmilk Flat White</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Latte Reserve"> Iced Latte Reserve</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Shaken Espresso"> Iced Shaken Espresso</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Toasted Vanilla Oatmilk Shaken Espresso"> Iced Toasted Vanilla Oatmilk Shaken Espresso</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Nitro Cold Brew"> Nitro Cold Brew</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Salted Caramel Cream Cold Brew"> Salted Caramel Cream Cold Brew</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Vanilla Sweet Cream Cold Brew"> Vanilla Sweet Cream Cold Brew</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Vanilla Sweet Cream Nitro Cold Brew"> Vanilla Sweet Cream Nitro Cold Brew</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="White Chocolate Macadamia Cream Cold Brew"> White Chocolate Macadamia Cream Cold Brew</label><br>
+                </div>
+                
+                <div class="section">
+                    <img src="{{ url_for('static', filename='images/iced_teas.jpg') }}" alt="Iced Teas and Lemonade"><br>
+                    <h4>Iced Teas and Lemonade</h4><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Lemonade"> Lemonade</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Black Tea"> Iced Black Tea</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Black Tea Lemonade"> Iced Black Tea Lemonade</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Green Tea"> Iced Green Tea</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Green Tea Lemonade"> Iced Green Tea Lemonade</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced London Fog Tea Latte"> Iced London Fog Tea Latte</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Matcha Lemonade"> Iced Matcha Lemonade</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Matcha Tea Latte"> Iced Matcha Tea Latte</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Passion Tango Tea"> Iced Passion Tango Tea</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Passion Tango Tea Lemonade"> Iced Passion Tango Tea Lemonade</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Peach Green Tea"> Iced Peach Green Tea</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Peach Green Tea Lemonade"> Iced Peach Green Tea Lemonade</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Royal English Breakfast Tea Latte"> Iced Royal English Breakfast Tea Latte</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Sparkling Unsweetened Peach Green Tea"> Sparkling Unsweetened Peach Green Tea</label><br>
+                </div>
+                
+                <div class="section">
+                    <img src="{{ url_for('static', filename='images/refreshers.jpg') }}" alt="Starbucks Refreshers® Beverages"><br>
+                    <h4>Starbucks Refreshers® Beverages</h4><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Blended Strawberry Lemonade"> Blended Strawberry Lemonade</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Dragon Drink Refreshers"> Dragon Drink Refreshers</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Frozen Mango Dragonfruit Lemonade"> Frozen Mango Dragonfruit Lemonade</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Frozen Pineapple Passionfruit Lemonade"> Frozen Pineapple Passionfruit Lemonade</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Frozen Strawberry Açaí Lemonade"> Frozen Strawberry Açaí Lemonade</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Mango Dragonfruit Lemonade Refreshers"> Mango Dragonfruit Lemonade Refreshers</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Mango Dragonfruit Refreshers"> Mango Dragonfruit Refreshers</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Paradise Drink"> Paradise Drink</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Pineapple Passionfruit"> Pineapple Passionfruit</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Pink Drink"> Pink Drink</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Strawberry Açaí Lemonade Refreshers"> Strawberry Açaí Lemonade Refreshers</label><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Strawberry Açaí Refreshers"> Strawberry Açaí Refreshers</label><br>
+                </div>
+            </div>
+            
+            <h3>I am Craving </h3>
+            <div class="form-group">
+                <label><input type="checkbox" name="include_all"> Everything</label><br>
+                <label><input type="checkbox" name="include_coffee"> Only Coffee</label><br>
+                <label><input type="checkbox" name="include_tea"> Only Tea</label><br>
+                <label><input type="checkbox" name="include_neither"> Neither Coffee Nor Tea</label><br>
+                <label><input type="checkbox" name="include_hot"> Something Hot to sip</label><br>
+                <label><input type="checkbox" name="include_cold"> Some Cold Drink to chill</label><br>
+                <label><input type="checkbox" name="include_frozen"> Something Frozen</label><br>
+            </div>
+            <input type="submit" value="Get Recommendations">
+        </form>
+        <div class="recommendations" id="recommendations">
+            <!-- Recommendations will be displayed here -->
+        </div>
+    </div>
+</body>
+</html>

templates/index_cpy2.html

@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Starbucks Drink Recommendation</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+    <header>
+        <h1>Starbucks Drink Recommendation System by Nihith</h1>
+    </header>
+    <div class="content">
+        <h3>Select Your Favorite Drinks:</h3>
+        <form action="/recommend" method="POST">
+            <div class="sections">
+                <div class="section">
+                    <img src="{{ url_for('static', filename='images/hot_coffees.jpg') }}" alt="Hot Coffees"><br>
+                    <h4>Hot Coffees</h4><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Americano"> Americano</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Blonde Vanilla Latte"> Blonde Vanilla Latte</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Caffe Latte"> Caffe Latte</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Caffe Mocha"> Caffe Mocha</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Cappuccino"> Cappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Caramel Macchiato"> Caramel Macchiato</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Cinnamon Dolce Latte"> Cinnamon Dolce Latte</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Dark Chocolate Mocha Reserve"> Dark Chocolate Mocha Reserve</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Drip Brew Coffee"> Drip Brew Coffee</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Espresso"> Espresso</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Espresso Con Panna"> Espresso Con Panna</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Espresso Macchiato"> Espresso Macchiato</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Flat White"> Flat White</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Hazelnut Bianco Latte Reserve"> Hazelnut Bianco Latte Reserve</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Honey Almondmilk Flat White"> Honey Almondmilk Flat White</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Latte Reserve"> Latte Reserve</label>
+                    <label><input type="checkbox" name="selected_drinks" value="White Chocolate Mocha"> White Chocolate Mocha</label>
+                    <br>
+                    <img src="{{ url_for('static', filename='images/hot_drinks.jpg') }}" alt="Hot Drinks"><br>
+                    <h4>Hot Drinks</h4><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Caramel Apple Spice"> Caramel Apple Spice</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Hot Chocolate"> Hot Chocolate</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Steamed Apple Juice"> Steamed Apple Juice</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Steamed Milk"> Steamed Milk</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Vanilla Creme"> Vanilla Creme</label>
+                    <label><input type="checkbox" name="selected_drinks" value="White Hot Chocolate"> White Hot Chocolate</label>
+                </div>
+                
+                <div class="section">
+                    <img src="{{ url_for('static', filename='images/hot_teas.jpg') }}" alt="Hot Teas"><br>
+                    <h4>Hot Teas</h4><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Chai Tea"> Chai Tea</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Chai Tea Latte"> Chai Tea Latte</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Earl Grey Tea"> Earl Grey Tea</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Emperors Cloud & Mist"> Emperors Cloud & Mist</label>
+                    <label><input type="checkbox" name="selected_drinks" value="English Breakfast Tea"> English Breakfast Tea</label>
+                    <label><input type="checkbox" name="selected_drinks" value="English Tea Latte"> English Tea Latte</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Honey Citrus Mint Tea"> Honey Citrus Mint Tea</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Jade Citrus Mint Tea"> Jade Citrus Mint Tea</label>
+                    <label><input type="checkbox" name="selected_drinks" value="London Fog Tea Latte"> London Fog Tea Latte</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Mango Black Tea"> Mango Black Tea</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Matcha Tea Latte"> Matcha Tea Latte</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Mint Majesty Tea"> Mint Majesty Tea</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Peach Tranquility Tea"> Peach Tranquility Tea</label>
+                    <br>
+                    <br>
+                    <img src="{{ url_for('static', filename='images/refreshers.jpg') }}" alt="Starbucks Refreshers® Beverages"><br>
+                    <h4>Starbucks Refreshers® Beverages</h4><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Blended Strawberry Lemonade"> Blended Strawberry Lemonade</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Dragon Drink Refreshers"> Dragon Drink Refreshers</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Frozen Mango Dragonfruit Lemonade"> Frozen Mango Dragonfruit Lemonade</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Frozen Pineapple Passionfruit Lemonade"> Frozen Pineapple Passionfruit Lemonade</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Frozen Strawberry Açaí Lemonade"> Frozen Strawberry Açaí Lemonade</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Mango Dragonfruit Lemonade Refreshers"> Mango Dragonfruit Lemonade Refreshers</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Mango Dragonfruit Refreshers"> Mango Dragonfruit Refreshers</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Paradise Drink"> Paradise Drink</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Pineapple Passionfruit"> Pineapple Passionfruit</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Pink Drink"> Pink Drink</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Strawberry Açaí Lemonade Refreshers"> Strawberry Açaí Lemonade Refreshers</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Strawberry Açaí Refreshers"> Strawberry Açaí Refreshers</label>
+                </div>
+                
+               
+                
+                <div class="section">
+                    <img src="{{ url_for('static', filename='images/frappuccinos.jpg') }}" alt="Frappuccinos"><br>
+                    <h4>Frappuccinos</h4><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Caffe Vanilla Frappuccino"> Caffe Vanilla Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Caramel Frappuccino"> Caramel Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Caramel Ribbon Crunch Creme Frappuccino"> Caramel Ribbon Crunch Creme Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Caramel Ribbon Crunch Frappuccino"> Caramel Ribbon Crunch Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Chai Creme Frappuccino"> Chai Creme Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Chocolate Cookie Crumble Creme Frappuccino"> Chocolate Cookie Crumble Creme Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Chocolate Java Mint Frappuccino"> Chocolate Java Mint Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Chocolate Mint Creme Frappuccino"> Chocolate Mint Creme Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Coffee Frappuccino"> Coffee Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Double Chocolaty Chip Creme Frappuccino"> Double Chocolaty Chip Creme Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Espresso Frappuccino"> Espresso Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Java Chip Frappuccino"> Java Chip Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Matcha Creme Frappuccino"> Matcha Creme Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Mocha Cookie Crumble Frappuccino"> Mocha Cookie Crumble Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Mocha Frappuccino"> Mocha Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Strawberry Creme Frappuccino"> Strawberry Creme Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Vanilla Bean Creme Frappuccino"> Vanilla Bean Creme Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="White Chocolate Creme Frappuccino"> White Chocolate Creme Frappuccino</label>
+                    <label><input type="checkbox" name="selected_drinks" value="White Chocolate Mocha Frappuccino"> White Chocolate Mocha Frappuccino</label>
+           
+                </div>
+                
+                <div class="section">
+                    <img src="{{ url_for('static', filename='images/cold_coffees.jpg') }}" alt="Cold Coffees"><br>
+                    <h4>Cold Coffees</h4><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Chocolate Cream Cold Brew"> Chocolate Cream Cold Brew</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Cinnamon Caramel Cream Cold Brew"> Cinnamon Caramel Cream Cold Brew</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Cinnamon Caramel Cream Nitro Cold Brew"> Cinnamon Caramel Cream Nitro Cold Brew</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Cold Brew"> Cold Brew</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Cold Brew Coffee with Milk"> Cold Brew Coffee with Milk</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Americano"> Iced Americano</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Blonde Vanilla Latte"> Iced Blonde Vanilla Latte</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Brown Sugar Oatmilk Shaken Espresso"> Iced Brown Sugar Oatmilk Shaken Espresso</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Caffe Latte"> Iced Caffe Latte</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Chai Tea Latte"> Iced Chai Tea Latte</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Chocolate Almondmilk Shaken Espresso"> Iced Chocolate Almondmilk Shaken Espresso</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Cinnamon Dolce Latte"> Iced Cinnamon Dolce Latte</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Coffee"> Iced Coffee</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Coffee with Milk"> Iced Coffee with Milk</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Espresso"> Iced Espresso</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Flat White"> Iced Flat White</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Hazelnut Bianco Latte Reserve"> Iced Hazelnut Bianco Latte Reserve</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Honey Almondmilk Flat White"> Iced Honey Almondmilk Flat White</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Latte Reserve"> Iced Latte Reserve</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Shaken Espresso"> Iced Shaken Espresso</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Toasted Vanilla Oatmilk Shaken Espresso"> Iced Toasted Vanilla Oatmilk Shaken Espresso</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Nitro Cold Brew"> Nitro Cold Brew</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Salted Caramel Cream Cold Brew"> Salted Caramel Cream Cold Brew</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Vanilla Sweet Cream Cold Brew"> Vanilla Sweet Cream Cold Brew</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Vanilla Sweet Cream Nitro Cold Brew"> Vanilla Sweet Cream Nitro Cold Brew</label>
+                    <label><input type="checkbox" name="selected_drinks" value="White Chocolate Macadamia Cream Cold Brew"> White Chocolate Macadamia Cream Cold Brew</label>
+                </div>
+                
+                <div class="section">
+                    <img src="{{ url_for('static', filename='images/iced_teas.jpg') }}" alt="Iced Teas and Lemonade"><br>
+                    <h4>Iced Teas and Lemonade</h4><br>
+                    <label><input type="checkbox" name="selected_drinks" value="Lemonade"> Lemonade</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Black Tea"> Iced Black Tea</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Black Tea Lemonade"> Iced Black Tea Lemonade</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Green Tea"> Iced Green Tea</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Green Tea Lemonade"> Iced Green Tea Lemonade</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced London Fog Tea Latte"> Iced London Fog Tea Latte</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Matcha Lemonade"> Iced Matcha Lemonade</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Matcha Tea Latte"> Iced Matcha Tea Latte</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Passion Tango Tea"> Iced Passion Tango Tea</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Passion Tango Tea Lemonade"> Iced Passion Tango Tea Lemonade</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Peach Green Tea"> Iced Peach Green Tea</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Peach Green Tea Lemonade"> Iced Peach Green Tea Lemonade</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Iced Royal English Breakfast Tea Latte"> Iced Royal English Breakfast Tea Latte</label>
+                    <label><input type="checkbox" name="selected_drinks" value="Sparkling Unsweetened Peach Green Tea"> Sparkling Unsweetened Peach Green Tea</label>
+                </div>
+                
+            </div>
+    </div>
+    <div id="filters">
+        <h3 id="craving_text">I am Craving</h3>
+        <div class="form-group">
+            <button type="button" class="btn btn-outline-primary mr-2 mb-2 toggle-button" name="include_all">Everything</button><br>
+            <button type="button" class="btn btn-outline-primary mr-2 mb-2 toggle-button" name="include_coffee"> Coffee</button><br>
+            <button type="button" class="btn btn-outline-primary mr-2 mb-2 toggle-button" name="include_tea"> Tea</button><br>
+            <button type="button" class="btn btn-outline-primary mr-2 mb-2 toggle-button" name="include_neither">Neither Coffee Nor Tea</button><br>
+            <button type="button" class="btn btn-outline-primary mr-2 mb-2 toggle-button" name="include_hot">Something Hot to Sip</button><br>
+            <button type="button" class="btn btn-outline-primary mr-2 mb-2 toggle-button" name="include_cold">Some Cold Drink to Chill</button><br>
+            <button type="button" class="btn btn-outline-primary mr-2 mb-2 toggle-button" name="include_frozen">Something Frozen</button><br>
+        </div>
+        <input type="hidden" name="n_recommendations" value="5">
+    </div>
+
+    <!-- Recommendations form -->
+    <form id="recommendationForm" action="/recommend" method="POST">
+        <!-- Add hidden input fields for filter values -->
+        <input type="hidden" name="include_all" value="">
+        <input type="hidden" name="include_coffee" value="">
+        <input type="hidden" name="include_tea" value="">
+        <input type="hidden" name="include_neither" value="">
+        <input type="hidden" name="include_hot" value="">
+        <input type="hidden" name="include_cold" value="">
+        <input type="hidden" name="include_frozen" value="">
+        <!-- Submit button -->
+        <input id="recommendations" type="submit" value="Brew My Recommendations" style="display: none;">
+    </form>
+    <div id="recommendations" class="recommendations"></div>
+
+    <!-- jQuery -->
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
+
+    
+    <script>
+        $(document).ready(function () {
+            console.log("Document ready!");  // Check if document is ready
+
+            $('.toggle-button').click(function () {
+                console.log("Button clicked:", this.name);  // Check if button click is detected
+                $(this).toggleClass('active');
+
+                let hiddenInput = $('input[name="' + this.name + '"]');
+                if ($(this).hasClass('active')) {
+                    hiddenInput.val('1');
+                } else {
+                    hiddenInput.val('');
+                }
+
+                let anyActive = $('.toggle-button.active').length > 0;
+                if (anyActive) {
+                    $('#recommendations').show();
+                } else {
+                    $('#recommendations').hide();
+                }
+            });
+        });
+    </script>
+
+   
+    <footer>
+        <p>© 2024 Starbucks Drink Recommendation App by Nihith. All rights reserved.</p>
+    </footer>
+
+    
+</body>
+</html>

templates/recommendations.html

@@ -0,0 +1,3 @@
+{% for recommendation in recommendations %}
+    <p>{{ recommendation }}</p>
+{% endfor %}