FeedLoop-AI/chatbot.html at main · tanug0/FeedLoop-AI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>FeedLoop AI | AI Assistant</title>

<link rel="stylesheet" href="css/style.css">

</head>

<body>

<a href="index.html" class="back-btn">
← Back
</a>
<button id="themeToggle" class="theme-btn">
    🌙
</button>

<section class="chatbot-page">

<div class="chatbot-container">

<h2>AI Food Assistant</h2>

<p class="chat-desc">
Ask anything about food donation,
NGOs, pickup support and FeedLoop AI.
</p>

<div id="chatbox">

<div class="bot-message">
Hello 👋 How can I help you today?
</div>

</div>

<input
type="text"
id="userInput"
placeholder="Ask something..."
>

<button onclick="sendMessage()" class="chat-btn">
Send Message
</button>

</div>

</section>

<footer>

    <div class="footer-logo">

        <img src="images/logo.png" class="footer-logo-img">

        <div>

            <h2>
                <span class="feed">Feed</span><span class="loop-text">Loop</span>
                <span class="ai">AI</span>
            </h2>

            <p class="footer-tagline">
                Smart Technology for Zero Food Waste
            </p>

        </div>

    </div>

    <p>
        AI-powered food redistribution platform connecting restaurants,
        hostels and households with NGOs.
    </p>

    <br>

    <p>
      Driven by technology. Inspired by sustainability.
            Committed to zero food waste.
    </p>

    <br>

    <p>
        © 2026 FeedLoop AI • All Rights Reserved.
    </p>

</footer>

<script>

const input = document.getElementById("userInput");
const chatbox = document.getElementById("chatbox");

// Handle enter key press
input.addEventListener("keypress", function(event) {
  if (event.key === "Enter") {
    sendMessage();
  }
});

// Predefined intelligent responses
const botResponses = {
  "hello": "Hello! 👋 I am your FeedLoop AI Food Assistant. How can I help you with your food donation today?",
  "hi": "Hello! 👋 I am your FeedLoop AI Food Assistant. How can I help you today?",
  "hey": "Hello! 👋 I am your FeedLoop AI Food Assistant. How can I help you today?",
  "donate": "To donate food, click 'Donate' in the navbar or go to the Donate page. Enter the food name, quantity, and pickup address, and we'll match you with a nearby NGO!",
  "how to donate": "To donate food, click 'Donate' in the navbar or go to the Donate page. Enter the food name, quantity, and pickup address, and we'll match you with a nearby NGO!",
  "ngo": "We partner with local NGOs and shelters. When you submit a donation, our AI suggests and notifies the nearest NGO for quick food pickup.",
  "ngos": "We partner with local NGOs and shelters. When you submit a donation, our AI suggests and notifies the nearest NGO for quick food pickup.",
  "pickup": "Pickups are typically scheduled within 1-2 hours of submission. The matched NGO will contact you using the address details you provided.",
  "time": "Pickups are typically scheduled within 1-2 hours of submission. The matched NGO will contact you using the address details you provided.",
  "dashboard": "You can view meals saved, active NGOs, and waste reduced in real time on our Dashboard page. It features interactive graphs!",
  "analytics": "You can view meals saved, active NGOs, and waste reduced in real time on our Dashboard page. It features interactive graphs!",
  "waste": "FeedLoop AI is dedicated to reducing food waste. By donating surplus food, you help the environment and feed communities in need.",
  "contact": "You can contact our support team at support@feedloop.ai or reach out directly to your matched NGO.",
  "support": "You can contact our support team at support@feedloop.ai or reach out directly to your matched NGO.",
  "food": "We accept edible cooked food, fresh produce, and packaged items. Please ensure the food is fresh and clean.",
  "accept": "We accept edible cooked food, fresh produce, and packaged items. Please ensure the food is fresh and clean."
};

function getBotResponse(userMsg) {
  const msg = userMsg.toLowerCase().trim();
  for (const key in botResponses) {
    if (msg.includes(key)) {
      return botResponses[key];
    }
  }
  return "Thank you for reaching out! I'm here to help with food donations, NGO pairings, and analytics. Could you try asking in a different way or specify if you'd like to know about: how to donate, pickup details, participating NGOs, or how FeedLoop AI reduces food waste?";
}

function sendMessage(){

  const userText = input.value.trim();
  if (userText === "") return;

  // Append user message
  chatbox.innerHTML += `
    <div class="user-message">
      ${userText}
    </div>
  `;

  // Clear input and scroll
  input.value = "";
  chatbox.scrollTop = chatbox.scrollHeight;

  // Create unique ID for typing indicator
  const typingId = "typing-" + Date.now();
  chatbox.innerHTML += `
    <div id="${typingId}" class="bot-message" style="opacity: 0.65;">
      Typing...
    </div>
  `;
  chatbox.scrollTop = chatbox.scrollHeight;

  // Simulate typing delay of 400ms
  setTimeout(() => {
    // Remove typing indicator
    const typingIndicator = document.getElementById(typingId);
    if (typingIndicator) {
      typingIndicator.remove();
    }

    // Get response
    const reply = getBotResponse(userText);

    // Append bot message
    chatbox.innerHTML += `
      <div class="bot-message">
        ${reply}
      </div>
    `;

    // Scroll to latest message
    chatbox.scrollTop = chatbox.scrollHeight;
  }, 400);

}

</script>

<script src="js/theme.js"></script>

</body>

</html>