Spaces:

redfernstech
/

ipip

Running

App Files Files Community

Srinivasulu kethanaboina commited on Sep 18, 2024

Commit

2c05e02

verified ·

1 Parent(s): c2ac816

Update index.html

Browse files

Files changed (1) hide show

index.html +393 -14

index.html CHANGED Viewed

@@ -3,24 +3,403 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Public IP Address</title>
 </head>
 <body>
-    <h1>Your Public IP Address</h1>
-    <p id="ip-address">Loading...</p>
     <script>
-        async function fetchPublicIP() {
-            try {
-                const response = await fetch('https://api.ipify.org?format=json');
-                const data = await response.json();
-                document.getElementById('ip-address').textContent = data.ip;
-            } catch (error) {
-                document.getElementById('ip-address').textContent = 'Unable to retrieve IP address';
-            }
-        }
-        fetchPublicIP();
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RedFerns Tech Chatbot</title>
+    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
+    <!-- Form Container -->
+    <div id="form-container">
+        <form id="user-form">
+            <h2>We need basic information to guide you</h2>
+            <input type="text" id="name" placeholder="Your Name" required>
+            <input type="text" id="company" placeholder="Company Name" required>
+            <input type="email" id="email" placeholder="Your Email" required>
+            <div>
+                <!-- Country Code Dropdown -->
+                <select id="country-code" required>
+                    <option value="">Select a country</option>
+                    <option value="AF">Afghanistan (+93)</option>
+                    <option value="AL">Albania (+355)</option>
+                </select>
+                <input type="tel" id="phone" placeholder="Your Phone Number" required>
+            </div>
+            <button type="submit">Start Chat</button>
+        </form>
+    </div>
+    <!-- Chatbox -->
+    <div id="chat-box">
+        <div id="chat-header">
+            <span>FernAI</span>
+            <span id="close-chat">&times;</span>
+        </div>
+        <div id="chat-body"></div>
+    </div>
+    <!-- Gradio Iframe -->
+    <div id="gradio-iframe">
+        <div id="gradio-header">
+            <span>Chat With Expert</span>
+            <span id="back-button">&larr;</span>
+        </div>
+        <iframe src="" id="gradio-frame" frameborder="0" style="width: 100%; height: 100%;"></iframe>
+    </div>
+    <!-- Chat Icon -->
+    <div id="chat-icon">
+        <img src="https://raw.githubusercontent.com/SRINIVASULU-2003/srinu/main/static/bot.png" alt="Chat Icon">
+    </div>
     <script>
+        // Elements
+        // Elements
+// Elements
+const chatIcon = document.getElementById('chat-icon');
+const formContainer = document.getElementById('form-container');
+const chatBox = document.getElementById('chat-box');
+const gradioIframe = document.getElementById('gradio-iframe');
+const gradioFrame = document.getElementById('gradio-frame');
+const closeChat = document.getElementById('close-chat');
+const backButton = document.getElementById('back-button');
+const userForm = document.getElementById('user-form');
+const chatBody = document.getElementById('chat-body');
+// Function to handle user input and display chat responses
+function handleUserInput(input) {
+    // Display user message
+    const userMessage = document.createElement('div');
+    userMessage.className = 'message user-message';
+    userMessage.textContent = input;
+    chatBody.appendChild(userMessage);
+    // Create bot response
+    const botMessage = document.createElement('div');
+    botMessage.className = 'message bot-message';
+    // Define bot responses based on user input
+    switch (input) {
+        case 'Know more about RedFerns Tech':
+            botMessage.innerHTML = `
+                RedFerns Tech is a leading technology solutions provider specializing in Salesforce consultancy, Zoho services, ServiceNow implementation, and Data Science solutions.
+                <button onclick="handleUserInput('Menu')">Menu</button>
+            `;
+            break;
+        case 'Our services':
+            botMessage.innerHTML = `
+                We offer a range of services tailored to your needs. Please choose one:
+                <button onclick="handleUserInput('Salesforce')">Salesforce</button>
+                <button onclick="handleUserInput('Zoho')">Zoho</button>
+                <button onclick="handleUserInput('Machine Learning')">Machine Learning</button>
+                <button onclick="handleUserInput('Data Science')">Data Science</button>
+                <button onclick="handleUserInput('Menu')">Menu</button>
+            `;
+            break;
+        case 'Salesforce':
+            botMessage.innerHTML = `
+                We offer a range of services tailored to your needs. Please choose one:
+                <button onclick="handleUserInput('Lightning Service')">Lightning Service</button>
+                <button onclick="handleUserInput('Admin Support')">Admin Support</button>
+                <button onclick="handleUserInput('App Development')">App Development</button>
+                <button onclick="handleUserInput('Sites and Communities')">Sites and Communities</button>
+                <button onclick="handleUserInput('Menu')">Menu</button>
+            `;
+            break;
+        case 'Our products':
+            botMessage.innerHTML = `
+                We offer a range of services tailored to your needs. Please choose one:
+                <button onclick="handleUserInput('currency conversion app')">Currency Conversion App</button>
+                <button onclick="handleUserInput('mass approvals app')">Mass Approvals App</button>
+                <button onclick="handleUserInput('thumbnail viewer app')">Thumbnail Viewer App</button>
+                <button onclick="handleUserInput('product filter app')">Product Filter App</button>
+                <button onclick="handleUserInput('Menu')">Menu</button>
+            `;
+            break;
+        case 'Menu':
+            botMessage.innerHTML = `
+        <p>Hi! Welcome to RedFerns Tech! I'm FernAI, here to help you explore our innovative solutions and services. Please select from below:</p>
+        <button onclick="handleUserInput('Know more about RedFerns Tech')">Know more about RedFerns Tech</button>
+        <button onclick="handleUserInput('Our services')">Our services</button>
+        <button onclick="handleUserInput('Our products')">Our products</button>
+        <button onclick="handleUserInput('career opportunities')">Career Opportunities</button>
+        <button onclick="handleUserInput('chat with expert')">Chat With Expert</button>
+        <button onclick="handleUserInput('Appointment Booking')">Appointment Booking</button>
+            `;
+            break;
+     case 'Appointment Booking':
+           botMessage.innerHTML = `
+        Please provide the following details to book an appointment:
+        <br><br>
+        <label for="phoneNumber">Phone Number:</label>
+        <input type="text" id="phoneNumber" placeholder="Enter your phone number" />
+        <br>
+        <label for="appointmentDate">Preferred Date:</label>
+        <input type="date" id="appointmentDate" />
+        <br>
+        <label for="appointmentTime">Preferred Time:</label>
+        <input type="time" id="appointmentTime" />
+        <br><br>
+        <button onclick="submitAppointment()">Submit Appointment</button>
+    `;
+    break;
+        case 'Zoho':
+            botMessage.textContent = 'Link is Opening';
+            window.open('https://redfernstech.com/services-list/zoho-crm/', '_blank');
+            break;
+        case 'Machine Learning':
+            botMessage.textContent = 'Link is Opening';
+            window.open('https://redfernstech.com/services-list/machine-learning/', '_blank');
+            break;
+        case 'Data Science':
+            botMessage.textContent = 'Link is Opening';
+            window.open('https://redfernstech.com/services-list/data-science/', '_blank');
+            break;
+        case 'Lightning Service':
+            botMessage.textContent = 'Link is Opening';
+            window.open('https://redfernstech.com/services-list/salesforce-lightning-services/', '_blank');
+            break;
+        case 'App Development':
+            botMessage.textContent = 'Link is Opening';
+            window.open('https://redfernstech.com/services-list/salesforce-app-development/', '_blank');
+            break;
+        case 'Sites and Communities':
+            botMessage.textContent = 'Link is Opening';
+            window.open('https://redfernstech.com/services-list/salesforce-sites-communities/', '_blank');
+            break;
+        case 'Admin Support':
+            botMessage.textContent = 'Link is Opening';
+            window.open('https://redfernstech.com/services-list/salesforce-admin-and-support/', '_blank');
+            break;
+        case 'career opportunities':
+            botMessage.textContent = 'Link is Opening';
+            window.open('https://redfernstech.com/careers/', '_blank');
+            break;
+        case 'product filter app':
+            botMessage.textContent = 'Link is Opening';
+            window.open('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000K23xNUAR', '_blank');
+            break;
+        case 'thumbnail viewer app':
+            botMessage.textContent = 'Link is Opening';
+            window.open('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000K8u1dUAB', '_blank');
+            break;
+        case 'mass approvals app':
+            botMessage.textContent = 'Link is Opening';
+            window.open('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000K24EdUAJ', '_blank');
+            break;
+        case 'currency conversion app':
+            botMessage.textContent = 'Link is Opening';
+            window.open('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000Is77CUAR', '_blank');
+            break;
+        case 'chat with expert':
+            // Show the iframe with the Gradio chatbot URL
+            gradioIframe.style.display = 'flex';
+            chatBox.style.display = 'none';
+            formContainer.style.display = 'none';
+            chatIcon.style.display = 'none'; // Hide chat icon
+            gradioFrame.src = 'https://srinuksv-srunu.hf.space/'; // Replace with your Gradio chatbot URL
+            botMessage.textContent = 'Loading Salesforce chatbot...'; // Optional: Notify the user
+            break;
+        default:
+            botMessage.textContent = 'Sorry, I didn’t understand that. Can you please choose another option?';
+            break;
+    }
+    chatBody.appendChild(botMessage);
+    chatBody.scrollTop = chatBody.scrollHeight;
+}
+// Show form container
+function showForm() {
+    formContainer.style.display = 'flex';
+    chatBox.style.display = 'none';
+    gradioIframe.style.display = 'none'; // Hide Gradio iframe if visible
+    chatIcon.style.display = 'flex'; // Hide chat icon
+}
+// Show chat box
+function showChat() {
+    formContainer.style.display = 'none';
+    chatBox.style.display = 'flex';
+    gradioIframe.style.display = 'none'; // Hide Gradio iframe if visible
+    chatIcon.style.display = 'flex';
+    initializeChat();
+}
+// Show Gradio iframe
+function openGradioChat() {
+    const chatbots = ["Lily", "Clara"];
+    const selectedChatbot = chatbots[Math.floor(Math.random() * chatbots.length)];
+    // Hide form and chat box, display Gradio iframe
+    formContainer.style.display = 'none';
+    chatBox.style.display = 'none';
+    gradioIframe.style.display = 'flex';
+    // Set the iframe source based on the selected chatbot
+    if (selectedChatbot === "Clara") {
+        gradioIframe.src = "https://srinuksv-srunu.hf.space";
+    } else {
+        gradioIframe.src = "https://srinukethanaboina-srunu.hf.space";
+    }
+    // Display the chat icon
+    chatIcon.style.display = 'flex';
+}
+// Hide Gradio iframe and show chat box
+function goBackToChat() {
+    formContainer.style.display = 'none';
+    chatBox.style.display = 'flex';
+    gradioIframe.style.display = 'none';
+    chatIcon.style.display = 'flex';
+    initializeChat();
+}
+function submitAppointment() {
+    const phoneNumber = document.getElementById('phoneNumber').value;
+    const appointmentDate = document.getElementById('appointmentDate').value;
+    const appointmentTime = document.getElementById('appointmentTime').value;
+    // Split the date into year, month, and day
+    const dateParts = appointmentDate.split('-');  // Assuming the format is YYYY-MM-DD
+    const year = dateParts[0];
+    const month = dateParts[1];  // Google Forms uses 1-indexed months (January is 1, not 0)
+    const day = dateParts[2];
+    // Split the time into hour and minute
+    const timeParts = appointmentTime.split(':');  // Assuming the format is HH:MM
+    const hour = timeParts[0];
+    const minute = timeParts[1];
+    if (phoneNumber && appointmentDate && appointmentTime) {
+        // Google Form submission URL and entry IDs
+        const googleFormURL = 'https://docs.google.com/forms/u/0/d/e/1FAIpQLSdLLMPObehQAPIJe26ALLP-uGiR_rTbFomaQ6jrYSDKDpC53Q/formResponse';
+        const formData = new FormData();
+        formData.append('entry.399768569', phoneNumber);  // Phone number
+        formData.append('entry.524576831_hour', hour);  // Appointment hour
+        formData.append('entry.524576831_minute', minute);  // Appointment minute
+        formData.append('entry.277009627_year', year);  // Appointment year
+        formData.append('entry.277009627_month', month);  // Appointment month
+        formData.append('entry.277009627_day', day);  // Appointment day
+        // Send data to Google Form
+        fetch(googleFormURL, {
+            method: 'POST',
+            body: formData,
+            mode: 'no-cors'  // To avoid CORS issues
+        }).then(() => {
+            const botMessage = document.createElement('div');
+            botMessage.className = 'message bot-message';
+            botMessage.innerHTML = `
+                Appointment booked for ${appointmentDate} at ${appointmentTime}. We will contact you at ${phoneNumber}.
+                <br><br>What would you like to do next?
+                <button onclick="handleUserInput('Menu')">Return to Menu</button>
+            `;
+            chatBody.appendChild(botMessage);
+        }).catch(() => {
+            const botMessage = document.createElement('div');
+            botMessage.className = 'message bot-message';
+            botMessage.innerHTML = `
+                There was an error booking your appointment. Please try again.
+                <br><br>What would you like to do next?
+                <button onclick="handleUserInput('Menu')">Return to Menu</button>
+            `;
+            chatBody.appendChild(botMessage);
+        });
+    } else {
+        const botMessage = document.createElement('div');
+        botMessage.className = 'message bot-message';
+        botMessage.innerHTML = `
+            Please fill in all the details.
+            <br><br>What would you like to do next?
+            <button onclick="handleUserInput('Menu')">Return to Menu</button>
+        `;
+        chatBody.appendChild(botMessage);
+    }
+    chatBody.scrollTop = chatBody.scrollHeight;
+}
+// Initialize chat
+// Initialize chat
+function initializeChat() {
+    chatBody.innerHTML = '';
+    const welcomeMessage = document.createElement('div');
+    welcomeMessage.className = 'message bot-message';
+    welcomeMessage.innerHTML = `
+        <p>Hi! Welcome to RedFerns Tech! I'm FernAI, here to help you explore our innovative solutions and services. Please select from below:</p>
+        <button onclick="handleUserInput('Know more about RedFerns Tech')">Know more about RedFerns Tech</button>
+        <button onclick="handleUserInput('Our services')">Our services</button>
+        <button onclick="handleUserInput('Our products')">Our products</button>
+        <button onclick="handleUserInput('career opportunities')">Career Opportunities</button>
+        <button onclick="handleUserInput('chat with expert')">Chat With Expert</button>
+        <button onclick="handleUserInput('Appointment Booking')">Appointment Booking</button>
+    `;
+    chatBody.appendChild(welcomeMessage);
+    chatBody.scrollTop = chatBody.scrollHeight;
+}
+// Event Listeners
+chatIcon.addEventListener('click', function() {
+    if (localStorage.getItem('formShown') === 'true') {
+        showChat(); // Show the chat box if form has been shown
+    } else {
+        showForm(); // Show the form if it hasn't been shown
+    }
+});
+userForm.addEventListener('submit', function(event) {
+    event.preventDefault();
+    localStorage.setItem('formShown', 'true');
+    showChat();
+});
+closeChat.addEventListener('click', function() {
+        formContainer.style.display = 'none';
+        chatBox.style.display = 'none';
+        gradioIframe.style.display = 'none';
+        chatIcon.style.display = 'flex';
+    });
+backButton.addEventListener('click', goBackToChat);
+// Initialize on load
+if (localStorage.getItem('formShown') === 'true') {
+    showChat();
+} else {
+    chatIcon.style.display = 'flex'; // Ensure the chat icon is visible initially
+}
+// Select the div with class 'component-2 block svelte-12'
+// Select the div with class 'component-2 block svelte-12'
+// Select the element with the specific class
+// Select the element with the specific class
+// Select the element with the specific class
     </script>
 </body>
 </html>