Hugging Face's logo

Spaces:
redfernstech
/
ipip
Running

App Files Community
ipip / index.html
Srinivasulu kethanaboina
Update index.html
0655866 verified
raw
history blame contribute delete
53.6 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot with Morph and Fade Animations</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
background-color: #ffffff00;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.hover-button {
position: fixed;
bottom: 20px;
right: 20px;
width: auto;
height: 60px;
border-radius: 30px;
background-color: #de2127;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, opacity 0.3s ease;
z-index: 999;
padding: 0 20px;
box-sizing: border-box;
overflow: hidden;
}
.hover-button:hover {
transform: scale(1.05);
}
.hover-button img {
width: 30px;
height: 30px;
margin-right: 10px;
filter: invert(0.0) sepia(0.2) saturate(4) hue-rotate(300deg) brightness(0.8);
}
.hover-button span {
color: white;
font-size: 1em;
font-weight: bold;
}
.chatbot-popup {
position: fixed;
bottom: 20px;
right: 20px;
background: linear-gradient(135deg, #f0f4ff 0%, #ffd1d1 100%);
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
width: 450px;
max-height: 90vh;
height: 719px;
z-index: 10000;
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
transform: scale(0.7);
transition: transform 0.3s ease, opacity 0.3s ease;
visibility: hidden; /* Hidden by default */
}
.chatbot-popup.visible {
opacity: 1;
transform: scale(1);
visibility: visible;
}
.chat-header {
background-color: #CF2E2E;
color: #fff;
padding: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.chat-header span {
font-weight: bold;
}
#close-btn {
background-color: transparent;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
line-height: 1;
}
.chat-content {
flex: 1;
display: none; /* Initially hidden */
flex-direction: column;
overflow-y: auto;
padding: 20px;
max-height: calc(80vh - 60px);
}
.user-message, .bot-message {
padding: 10px 15px;
margin: 10px 0;
border-radius: 10px;
max-width: 80%;
word-wrap: break-word;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.user-message {
background-color: #E5E5EA;
align-self: flex-end;
display: flex;
align-items: center;
}
.bot-message {
background-color: #F1F0F0;
align-self: flex-start;
display: flex;
align-items: flex-start;
flex-direction: column;
max-width: 100%;
padding: 10px 15px;
margin: 10px 0;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0 ,0.1);
}
.message-content {
margin-left: 10px;
}
.user-message::before, .bot-message::before {
content: '';
width: 30px;
height: 30px;
background-size: cover;
border-radius: 50%;
}
.user-message::before {
background-image: url('https://github.com/SRINIVASULU-2003/srinu/blob/main/static/user.jpeg?raw=true');
}
.bot-message::before {
background-image: url('https://github.com/SRINIVASULU-2003/srinu/blob/main/static/bot.jpeg?raw=true');
}
.button-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 10px;
width: 100%;
}
.button-container button {
background-color: #ef6a61;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 15px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
text-align: center;
min-height: 44px;
}
.button-container button.large-button {
grid-column: span 2;
}
.button-container button:hover {
background-color: #f63838;
}
.gradio-container {
display: none;
margin-top: 10px;
height: calc(100% - 60px); /* Adjusted to fit within the chatbot */
position: relative; /* Added for positioning the back button */
}
.form-container {
padding: 20px 30px 30px 30px;
height: auto;
opacity: 1;
transition: opacity 0.3s ease;
overflow-y: auto;
max-height: calc(100vh - 150px);
flex: 1;
display: none; /* Initially hidden */
}
.form-container.visible {
display: block; /* Show when active */
}
.form-container h2 {
text-align: left;
margin-bottom: 5px;
font-size: 1.4em;
color: #333;
}
.form-container p {
text-align: left;
margin-bottom: 10px;
color: #666;
font-size: 0.9em;
}
.form {
width: 100%;
}
.form-control {
width: 100%;
margin-bottom: 10px;
}
.form-control label {
display: block;
margin-bottom: 5px;
font-size: 0.9em;
color: #333;
}
.form-control input, .form-control select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
box-sizing: border-box;
font-size: 1em;
background-color: #f9f9f9;
}
.form-control input:focus, .form-control select:focus {
outline: none;
border-color: #4a90e2;
background-color: #fff;
}
.required {
color: red;
}
.begin-button {
width: 100%;
padding: 10px;
background: #de2127;
border: none;
color: white;
font-size: 1em;
border-radius: 30px;
cursor: pointer;
transition: background-color 0.3s;
}
.begin-button:hover {
background-color: #a81a1d;
}
.close-button {
background-color: transparent;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
line-height: 1;
}
.g-recaptcha {
display: flex;
justify-content: center;
margin-bottom: 10px;
transform: scale(0.8);
}
.g-recaptcha > div {
width: auto !important;
}
#back-to-chatbot-btn {
position: absolute;
top: 10px;
right: 10px;
background-color: #de2127;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
z-index: 1000;
}
#back-to-chatbot-btn:hover {
background-color: #a81a1d;
}
</style>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<!-- Hover Button -->
<div class="hover-button" id="chatbot-button">
<img src="https://www.svgrepo.com/show/209115/chat.svg" alt="Chat Icon">
<span>How can I help you?</span>
</div>
<!-- Chatbot Popup -->
<div class="chatbot-popup" id="chatbot-popup">
<!-- Chat Header -->
<div class="chat-header">
<span>FernAI</span>
<button id="close-btn" class="close-button">×</button>
</div>
<!-- Form Container -->
<div id="form-container" class="form-container">
<h2>To guide you better, we need some basic information</h2>
<form id="form" class="form">
<div class="form-control">
<label for="username">Name <span class="required">*</span></label>
<input type="text" placeholder="First and Last Name" id="username" required />
</div>
<div class="form-control">
<label for="companyname">Company Name <span class="required">*</span></label>
<input type="text" placeholder="Company name" id="companyname" required />
</div>
<div class="form-control">
<label for="email">Email <span class="required">*</span></label>
<input type="email" placeholder="example@gmail.com" id="email" required />
</div>
<div class="form-control">
<label for="country">Country <span class="required">*</span></label>
<select id="country" required>
<option value="">Select a country</option>
<option value="AF">Afghanistan (+93)</option>
<option value="AL">Albania (+355)</option>
<option value="DZ">Algeria (+213)</option>
<option value="AS">American Samoa (+1-684)</option>
<option value="AD">Andorra (+376)</option>
<option value="AO">Angola (+244)</option>
<option value="AI">Anguilla (+1-264)</option>
<option value="AG">Antigua and Barbuda (+1-268)</option>
<option value="AR">Argentina (+54)</option>
<option value="AM">Armenia (+374)</option>
<option value="AW">Aruba (+297)</option>
<option value="AU">Australia (+61)</option>
<option value="AT">Austria (+43)</option>
<option value="AZ">Azerbaijan (+994)</option>
<option value="BS">Bahamas (+1-242)</option>
<option value="BH">Bahrain (+973)</option>
<option value="BD">Bangladesh (+880)</option>
<option value="BB">Barbados (+1-246)</option>
<option value="BY">Belarus (+375)</option>
<option value="BE">Belgium (+32)</option>
<option value="BZ">Belize (+501)</option>
<option value="BJ">Benin (+229)</option>
<option value="BM">Bermuda (+1-441)</option>
<option value="BT">Bhutan (+975)</option>
<option value="BO">Bolivia (+591)</option>
<option value="BA">Bosnia and Herzegovina (+387)</option>
<option value="BW">Botswana (+267)</option>
<option value="BR">Brazil (+55)</option>
<option value="IO">British Indian Ocean Territory (+246)</option>
<option value="VG">British Virgin Islands (+1-284)</option>
<option value="BN">Brunei (+673)</option>
<option value="BG">Bulgaria (+359)</option>
<option value="BF">Burkina Faso (+226)</option>
<option value="BI">Burundi (+257)</option>
<option value="KH">Cambodia (+855)</option>
<option value="CM">Cameroon (+237)</option>
<option value="CA">Canada (+1)</option>
<option value="CV">Cape Verde (+238)</option>
<option value="KY">Cayman Islands (+1-345)</option>
<option value="CF">Central African Republic (+236)</option>
<option value="TD">Chad (+235)</option>
<option value="CL">Chile (+56)</option>
<option value="CN">China (+86)</option>
<option value="CX">Christmas Island (+61)</option>
<option value="CC">Cocos Islands (+61)</option>
<option value="CO">Colombia (+57)</option>
<option value="KM">Comoros (+269)</option>
<option value="CK">Cook Islands (+682)</option>
<option value="CR">Costa Rica (+506)</option>
<option value="HR">Croatia (+385)</option>
<option value="CU">Cuba (+53)</option>
<option value="CW">Curacao (+599)</option>
<option value="CY">Cyprus (+357)</option>
<option value="CZ">Czech Republic (+420)</option>
<option value="CD">Democratic Republic of the Congo (+243)</option>
<option value="DK">Denmark (+45)</option>
<option value="DJ">Djibouti (+253)</option>
<option value="DM">Dominica (+1-767)</option>
<option value="DO">Dominican Republic (+1-809)</option>
<option value="TL">East Timor (+670)</option>
<option value="EC">Ecuador (+593)</option>
<option value="EG">Egypt (+20)</option>
<option value="SV">El Salvador (+503)</option>
<option value="GQ">Equatorial Guinea (+240)</option>
<option value="ER">Eritrea (+291)</option>
<option value="EE">Estonia (+372)</option>
<option value="ET">Ethiopia (+251)</option>
<option value="FK">Falkland Islands (+500)</option>
<option value="FO">Faroe Islands (+298)</option>
<option value="FJ">Fiji (+679)</option>
<option value="FI">Finland (+358)</option>
<option value="FR">France (+33)</option>
<option value="PF">French Polynesia (+689)</option>
<option value="GA">Gabon (+241)</option>
<option value="GM">Gambia (+220)</option>
<option value="GE">Georgia (+995)</option>
<option value="DE">Germany (+49)</option>
<option value="GH">Ghana (+233)</option>
<option value="GI">Gibraltar (+350)</option>
<option value="GR">Greece (+30)</option>
<option value="GL">Greenland (+299)</option>
<option value="GD">Grenada (+1-473)</option>
<option value="GU">Guam (+1-671)</option>
<option value="GT">Guatemala (+502)</option>
<option value="GN">Guinea (+224)</option>
<option value="GW">Guinea-Bissau (+245)</option>
<option value="GY">Guyana (+592)</option>
<option value="HT">Haiti (+509)</option>
<option value="HN">Honduras (+504)</option>
<option value="HK">Hong Kong (+852)</option>
<option value="HU">Hungary (+36)</option>
<option value="IS">Iceland (+354)</option>
<option value="IN">India (+91)</option>
<option value="ID">Indonesia (+62)</option>
<option value="IR">Iran (+98)</option>
<option value="IQ">Iraq (+964)</option>
<option value="IE">Ireland (+353)</option>
<option value="IM">Isle of Man (+44-1624)</option>
<option value="IL">Israel (+972)</option>
<option value="IT">Italy (+39)</option>
<option value="CI">Ivory Coast (+225)</option>
<option value="JM">Jamaica (+1-876)</option>
<option value="JP">Japan (+81)</option>
<option value="JE">Jersey (+44-1534)</option>
<option value="JO">Jordan (+962)</option>
<option value="KZ">Kazakhstan (+7)</option>
<option value="KE">Kenya (+254)</option>
<option value="KI">Kiribati (+686)</option>
<option value="XK">Kosovo (+383)</option>
<option value="KW">Kuwait (+965)</option>
<option value="KG">Kyrgyzstan (+996)</option>
<option value="LA">Laos (+856)</option>
<option value="LV">Latvia (+371)</option>
<option value="LB">Lebanon (+961)</option>
<option value="LS">Lesotho (+266)</option>
<option value="LR">Liberia (+231)</option>
<option value="LY">Libya (+218)</option>
<option value="LI">Liechtenstein (+423)</option>
<option value="LT">Lithuania (+370)</option>
<option value="LU">Luxembourg (+352)</option>
<option value="MO">Macau (+853)</option>
<option value="MK">Macedonia (+389)</option>
<option value="MG">Madagascar (+261)</option>
<option value="MW">Malawi (+265)</option>
<option value="MY">Malaysia (+60)</option>
<option value="MV">Maldives (+960)</option>
<option value="ML">Mali (+223)</option>
<option value="MT">Malta (+356)</option>
<option value="MH">Marshall Islands (+692)</option>
<option value="MR">Mauritania (+222)</option>
<option value="MU">Mauritius (+230)</option>
<option value="YT">Mayotte (+262)</option>
<option value="MX">Mexico (+52)</option>
<option value="FM">Micronesia (+691)</option>
<option value="MD">Moldova (+373)</option>
<option value="MC">Monaco (+377)</option>
<option value="MN">Mongolia (+976)</option>
<option value="ME">Montenegro (+382)</option>
<option value="MS">Montserrat (+1-664)</option>
<option value="MA">Morocco (+212)</option>
<option value="MZ">Mozambique (+258)</option>
<option value="MM">Myanmar (+95)</option>
<option value="NA">Namibia (+264)</option>
<option value="NR">Nauru (+674)</option>
<option value="NP">Nepal (+977)</option>
<option value="NL">Netherlands (+31)</option>
<option value="NC">New Caledonia (+687)</option>
<option value="NZ">New Zealand (+64)</option>
<option value="NI">Nicaragua (+505)</option>
<option value="NE">Niger (+227)</option>
<option value="NG">Nigeria (+234)</option>
<option value="NU">Niue (+683)</option>
<option value="KP">North Korea (+850)</option>
<option value="MP">Northern Mariana Islands (+1-670)</option>
<option value="NO">Norway (+47)</option>
<option value="OM">Oman (+968)</option>
<option value="PK">Pakistan (+92)</option>
<option value="PW">Palau (+680)</option>
<option value="PS">Palestine (+970)</option>
<option value="PA">Panama (+507)</option>
<option value="PG">Papua New Guinea (+675)</option>
<option value="PY">Paraguay (+595)</option>
<option value="PE">Peru (+51)</option>
<option value="PH">Philippines (+63)</option>
<option value="PN">Pitcairn (+64)</option>
<option value="PL">Poland (+48)</option>
<option value="PT">Portugal (+351)</option>
<option value="PR">Puerto Rico (+1-787)</option>
<option value="QA">Qatar (+974)</option>
<option value="CG">Republic of the Congo (+242)</option>
<option value="RE">Reunion (+262)</option>
<option value="RO">Romania (+40)</option>
<option value="RU">Russia (+7)</option>
<option value="RW">Rwanda (+250)</option>
<option value="BL">Saint Barthelemy (+590)</option>
<option value="SH">Saint Helena (+290)</option>
<option value="KN">Saint Kitts and Nevis (+1-869)</option>
<option value="LC">Saint Lucia (+1-758)</option>
<option value="MF">Saint Martin (+590)</option>
<option value="PM">Saint Pierre and Miquelon (+508)</option>
<option value="VC">Saint Vincent and the Grenadines (+1-784)</option>
<option value="WS">Samoa (+685)</option>
<option value="SM">San Marino (+378)</option>
<option value="ST">Sao Tome and Principe (+239)</option>
<option value="SA">Saudi Arabia (+966)</option>
<option value="SN">Senegal (+221)</option>
<option value="RS">Serbia (+381)</option>
<option value="SC">Seychelles (+248)</option>
<option value="SL">Sierra Leone (+232)</option>
<option value="SG">Singapore (+65)</option>
<option value="SX">Sint Maarten (+1-721)</option>
<option value="SK">Slovakia (+421)</option>
<option value="SI">Slovenia (+386)</option>
<option value="SB">Solomon Islands (+677)</option>
<option value="SO">Somalia (+252)</option>
<option value="ZA">South Africa (+27)</option>
<option value="KR">South Korea (+82)</option>
<option value="SS">South Sudan (+211)</option>
<option value="ES">Spain (+34)</option>
<option value="LK">Sri Lanka (+94)</option>
<option value="SD">Sudan (+249)</option>
<option value="SR">Suriname (+597)</option>
<option value="SJ">Svalbard and Jan Mayen (+47)</option>
<option value="SZ">Swaziland (+268)</option>
<option value="SE">Sweden (+46)</option>
<option value="CH">Switzerland (+41)</option>
<option value="SY">Syria (+963)</option>
<option value="TW">Taiwan (+886)</option>
<option value="TJ">Tajikistan (+992)</option>
<option value="TZ">Tanzania (+255)</option>
<option value="TH">Thailand (+66)</option>
<option value="TG">Togo (+228)</option>
<option value="TK">Tokelau (+690)</option>
<option value="TO">Tonga (+676)</option>
<option value="TT">Trinidad and Tobago (+1-868)</option>
<option value="TN">Tunisia (+216)</option>
<option value="TR">Turkey (+90)</option>
<option value="TM">Turkmenistan (+993)</option>
<option value="TC">Turks and Caicos Islands (+1-649)</option>
<option value="TV">Tuvalu (+688)</option>
<option value="VI">U.S. Virgin Islands (+1-340)</option>
<option value="UG">Uganda (+256)</option>
<option value="UA">Ukraine (+380)</option>
<option value="AE">United Arab Emirates (+971)</option>
<option value="GB">United Kingdom (+44)</option>
<option value="US">United States (+1)</option>
<option value="UY">Uruguay (+598)</option>
<option value="UZ">Uzbekistan (+998)</option>
<option value="VU">Vanuatu (+678)</option>
<option value="VA">Vatican (+39-06)</option>
<option value="VE">Venezuela (+58)</option>
<option value="VN">Vietnam (+84)</option>
<option value="WF">Wallis and Futuna (+681)</option>
<option value="EH">Western Sahara (+212)</option>
<option value="YE">Yemen (+967)</option>
<option value="ZM">Zambia (+260)</option>
<option value="ZW">Zimbabwe (+263)</option>
</select>
</div>
<div class="form-control">
<label for="phone">Phone</label>
<input type="tel" placeholder="Phone" id="phone" />
</div>
<div class="g-recaptcha" data-sitekey="6LfAXQIqAAAAANA8I1vdofDPvxatWH8H3Als1XfM"></div>
<button type="submit" class="begin-button">Let's Begin</button>
</form>
</div>
<!-- Chat Content -->
<div id="chat-box" class="chat-content">
<div id="chat-body" class="chat-body"></div>
</div>
<!-- Gradio Container -->
<div class="gradio-container" id="gradio-iframe">
<iframe id="gradio-frame" src="" style="width:100%; height:100%; border:none;"></iframe>
<button id="back-to-chatbot-btn">Back to Chatbot</button>
</div>
</div>
<script>
const countrySelect = document.getElementById('country');
const phoneInput = document.getElementById('phone');
const countryCodes = {
'AF': '+93',
'AL': '+355',
'DZ': '+213',
'AS': '+1-684',
'AD': '+376',
'AO': '+244',
'AI': '+1-264',
'AG': '+1-268',
'AR': '+54',
'AM': '+374',
'AW': '+297',
'AU': '+61',
'AT': '+43',
'AZ': '+994',
'BS': '+1-242',
'BH': '+973',
'BD': '+880',
'BB': '+1-246',
'BY': '+375',
'BE': '+32',
'BZ': '+501',
'BJ': '+229',
'BM': '+1-441',
'BT': '+975',
'BO': '+591',
'BA': '+387',
'BW': '+267',
'BR': '+55',
'IO': '+246',
'VG': '+1-284',
'BN': '+673',
'BG': '+359',
'BF': '+226',
'BI': '+257',
'KH': '+855',
'CM': '+237',
'CA': '+1',
'CV': '+238',
'KY': '+1-345',
'CF': '+236',
'TD': '+235',
'CL': '+56',
'CN': '+86',
'CX': '+61',
'CC': '+61',
'CO': '+57',
'KM': '+269',
'CK': '+682',
'CR': '+506',
'HR': '+385',
'CU': '+53',
'CW': '+599',
'CY': '+357',
'CZ': '+420',
'CD': '+243',
'DK': '+45',
'DJ': '+253',
'DM': '+1-767',
'DO': '+1-809',
'TL': '+670',
'EC': '+593',
'EG': '+20',
'SV': '+503',
'GQ': '+240',
'ER': '+291',
'EE': '+372',
'ET': '+251',
'FK': '+500',
'FO': '+298',
'FJ': '+679',
'FI': '+358',
'FR': '+33',
'PF': '+689',
'GA': '+241',
'GM': '+220',
'GE': '+995',
'DE': '+49',
'GH': '+233',
'GI': '+350',
'GR': '+30',
'GL': '+299',
'GD': '+1-473',
'GU': '+1-671',
'GT': '+502',
'GN': '+224',
'GW': '+245',
'GY': '+592',
'HT': '+509',
'HN': '+504',
'HK': '+852',
'HU': '+36',
'IS': '+354',
'IN': '+91',
'ID': '+62',
'IR': '+98',
'IQ': '+964',
'IE': '+353',
'IM': '+44-1624',
'IL': '+972',
'IT': '+39',
'CI': '+225',
'JM': '+1-876',
'JP': '+81',
'JE': '+44-1534',
'JO': '+962',
'KZ': '+7',
'KE': '+254',
'KI': '+686',
'XK': '+383',
'KW': '+965',
'KG': '+996',
'LA': '+856',
'LV': '+371',
'LB': '+961',
'LS': '+266',
'LR': '+231',
'LY': '+218',
'LI': '+423',
'LT': '+370',
'LU': '+352',
'MO': '+853',
'MK': '+389',
'MG': '+261',
'MW': '+265',
'MY': '+60',
'MV': '+960',
'ML': '+223',
'MT': '+356',
'MH': '+692',
'MR': '+222',
'MU': '+230',
'YT': '+262',
'MX': '+52',
'FM': '+691',
'MD': '+373',
'MC': '+377',
'MN': '+976',
'ME': '+382',
'MS': '+1-664',
'MA': '+212',
'MZ': '+258',
'MM': '+95',
'NA': '+264',
'NR': '+674',
'NP': '+977',
'NL': '+31',
'NC': '+687',
'NZ': '+64',
'NI': '+505',
'NE': '+227',
'NG': '+234',
'NU': '+683',
'KP': '+850',
'MP': '+1-670',
'NO': '+47',
'OM': '+968',
'PK': '+92',
'PW': '+680',
'PS': '+970',
'PA': '+507',
'PG': '+675',
'PY': '+595',
'PE': '+51',
'PH': '+63',
'PN': '+64',
'PL': '+48',
'PT': '+351',
'PR': '+1-787',
'QA': '+974',
'CG': '+242',
'RE': '+262',
'RO': '+40',
'RU': '+7',
'RW': '+250',
'BL': '+590',
'SH': '+290',
'KN': '+1-869',
'LC': '+1-758',
'MF': '+590',
'PM': '+508',
'VC': '+1-784',
'WS': '+685',
'SM': '+378',
'ST': '+239',
'SA': '+966',
'SN': '+221',
'RS': '+381',
'SC': '+248',
'SL': '+232',
'SG': '+65',
'SX': '+1-721',
'SK': '+421',
'SI': '+386',
'SB': '+677',
'SO': '+252',
'ZA': '+27',
'KR': '+82',
'SS': '+211',
'ES': '+34',
'LK': '+94',
'SD': '+249',
'SR': '+597',
'SJ': '+47',
'SZ': '+268',
'SE': '+46',
'CH': '+41',
'SY': '+963',
'TW': '+886',
'TJ': '+992',
'TZ': '+255',
'TH': '+66',
'TG': '+228',
'TK': '+690',
'TO': '+676',
'TT': '+1-868',
'TN': '+216',
'TR': '+90',
'TM': '+993',
'TC': '+1-649',
'TV': '+688',
'VI': '+1-340',
'UG': '+256',
'UA': '+380',
'AE': '+971',
'GB': '+44',
'US': '+1',
'UY': '+598',
'UZ': '+998',
'VU': '+678',
'VA': '+39-06',
'VE': '+58',
'VN': '+84',
'WF': '+681',
'EH': '+212',
'YE': '+967',
'ZM': '+260',
'ZW': '+263'
};
countrySelect.addEventListener('change', function() {
const selectedCountry = this.value;
if (selectedCountry in countryCodes) {
phoneInput.value = countryCodes[selectedCountry] + ' ';
} else {
phoneInput.value = '';
}
});
// Get DOM Elements
const chatbotButton = document.getElementById('chatbot-button');
const chatbotPopup = document.getElementById('chatbot-popup');
const formContainer = document.getElementById('form-container');
const chatBox = document.getElementById('chat-box');
const chatBody = document.getElementById('chat-body');
const gradioIframe = document.getElementById('gradio-iframe');
const gradioFrame = document.getElementById('gradio-frame');
const closeButton = document.getElementById('close-btn');
const form = document.getElementById('form');
const backToChatbotBtn = document.getElementById('back-to-chatbot-btn');
// Check if the form was already submitted in the current session
const formSubmitted = sessionStorage.getItem('formSubmitted') === 'true';
let globalUniqueID; // Declare a global variable
const userForm = document.getElementById('form');
userForm.addEventListener('submit', async (event) => {
event.preventDefault(); // Prevent default form submission
// Gather form data
const name = document.getElementById('username').value;
const company = document.getElementById('companyname').value;
const email = document.getElementById('email').value;
const countryCode = document.getElementById('country').value;
const phone = document.getElementById('phone').value;
// Prepare data to send to the server
const formData = {
name,
company,
email,
countryCode,
phone
};
try {
// Send data to the new server URL
const response = await fetch('https://srinuksv-fastapiyes.hf.space/webhook', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData)
});
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
// Store the unique ID in the global variable
globalUniqueID = result.id;
console.log('Unique ID:', globalUniqueID);
} catch (error) {
console.error('Error:', error);
}
});
// Function to Open Chatbot
function openChatbot() {
chatbotPopup.classList.add('visible'); // Add the visible class to show the popup
chatbotButton.style.opacity = '0'; // Fade out the hover button
setTimeout(() => {
chatbotButton.style.display = 'none'; // Hide the hover button after fade out
}, 300);
if (formSubmitted) {
formContainer.style.display = 'none';
chatBox.style.display = 'flex';
initializeChat(); // Start chat if the form was already submitted
} else {
formContainer.style.display = 'block'; // Show form when opening
chatBox.style.display = 'none';
}
}
// Function to Close Chatbot
function closeChatbot() {
chatbotPopup.classList.remove('visible'); // Remove the visible class to hide the popup
setTimeout(() => {
chatbotButton.style.display = 'flex'; // Display the hover button before fading in
setTimeout(() => {
chatbotButton.style.opacity = '1'; // Fade in the hover button
}, 50);
}, 300);
}
// Handle Form Submission
form.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent default form submission
let isValid = true;
const formControls = document.querySelectorAll('.form-control');
formControls.forEach(function(control) {
const input = control.querySelector('input, select');
if (input.hasAttribute('required') && !input.value.trim()) {
input.style.borderColor = 'red';
isValid = false;
} else {
input.style.borderColor = '#ddd';
}
});
const recaptchaResponse = grecaptcha.getResponse();
if (recaptchaResponse.length === 0) {
alert('Please complete the reCAPTCHA.');
isValid = false;
}
if (isValid) {
formContainer.style.display = 'none';
chatBox.style.display = 'flex';
sessionStorage.setItem('formSubmitted', 'true');
initializeChat(); // Initialize the chat after form submission
}
});
// Function to handle user input and display chat responses
function handleUserInput(input) {
// Display user message
const userMessage = document.createElement('div');
userMessage.className = 'user-message';
userMessage.textContent = input;
chatBody.appendChild(userMessage);
// Create bot response
const botMessage = document.createElement('div');
botMessage.className = '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.
<div class="button-container">
<button onclick="handleUserInput('Menu')">Menu</button>
</div>
`;
break;
case 'Our services':
botMessage.innerHTML = `
We offer a range of services tailored to your needs. Please choose one:
<div class="button-container">
<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>
</div>
`;
break;
case 'Salesforce':
botMessage.innerHTML = `
We offer a range of services tailored to your needs. Please choose one:
<div class="button-container">
<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>
</div>
`;
break;
case 'Our products':
botMessage.innerHTML = `
We offer a range of services tailored to your needs. Please choose one:
<div class="button-container">
<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>
</div>
`;
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>
<div class="button-container">
<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':
window.open('https://calendly.com/contactus-redfernstech', '_blank');
botMessage.innerHTML = `
<p>Book an Appointment or Go back to Menu:</p>
<div class="button-container"w>
<button onclick="handleUserInput('Menu')">Menu</button>
`;
break;
case 'Zoho':
window.open('https://redfernstech.com/services-list/zoho-crm/', '_blank');
botMessage.innerHTML = `
<p>View Zoho Page or Go back to Menu:</p>
<div class="button-container">
<button onclick="handleUserInput('Menu')">Menu</button>
`;
break;
case 'Machine Learning':
window.open('https://redfernstech.com/services-list/machine-learning/', '_blank');
botMessage.innerHTML = `
<p>View Machine Learning Page or Go back to Menu:</p>
<div class="button-container">
<button onclick="handleUserInput('Menu')">Menu</button>
`;
break;
case 'Data Science':
window.open('https://redfernstech.com/services-list/data-science/', '_blank');
botMessage.innerHTML = `
<p>View Data Science Page or Go back to Menu:</p>
<div class="button-container">
<button onclick="handleUserInput('Menu')">Menu</button>
`;
break;
case 'Lightning Service':
window.open('https://redfernstech.com/services-list/salesforce-lightning-services/', '_blank');
botMessage.innerHTML = `
<p>View Lightning Service Page or Go back to Menu:</p>
<div class="button-container">
<button onclick="handleUserInput('Menu')">Menu</button>
`;
break;
case 'App Development':
window.open('https://redfernstech.com/services-list/salesforce-app-development/', '_blank');
botMessage.innerHTML = `
<p>View App Development Page or Go back to Menu:</p>
<div class="button-container">
<button onclick="handleUserInput('Menu')">Menu</button>
`;
break;
case 'Sites and Communities':
window.open('https://redfernstech.com/services-list/salesforce-sites-communities/', '_blank');
botMessage.innerHTML = `
<p>View Sites and Communities Page or Go back to Menu:</p>
<div class="button-container">
<button onclick="handleUserInput('Menu')">Menu</button>
`;
break;
case 'Admin Support':
window.open('https://redfernstech.com/services-list/salesforce-admin-and-support/', '_blank');
botMessage.innerHTML = `
<p>View Admin Support Page or Go back to Menu:</p>
<div class="button-container">
<button onclick="handleUserInput('Menu')">Menu</button>
`;
break;
case 'career opportunities':
window.open('https://redfernstech.com/careers/', '_blank');
botMessage.innerHTML = `
<p>View Careers Page or Go back to Menu:</p>
<div class="button-container">
<button onclick="handleUserInput('Menu')">Menu</button>
`;
break;
case 'product filter app':
window.open('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000K23xNUAR', '_blank');
botMessage.innerHTML = `
<p>View Product Filter App Page or Go back to Menu:</p>
<div class="button-container">
<button onclick="handleUserInput('Menu')">Menu</button>
`;
break;
case 'thumbnail viewer app':
window.open('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000K8u1dUAB', '_blank');
botMessage.innerHTML = `
<p>View Thumbnail Viewer App Page or Go back to Menu:</p>
<div class="button-container">
<button onclick="handleUserInput('Menu')">Menu</button>
`;
break;
case 'mass approvals app':
window.open('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000K24EdUAJ', '_blank');
botMessage.innerHTML = `
<p>View Mass Approvals App Page or Go back to Menu:</p>
<div class="button-container">
<button onclick="handleUserInput('Menu')">Menu</button>
`;
break;
case 'currency conversion app':
window.open('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000Is77CUAR', '_blank');
botMessage.innerHTML = `
<p>View Currency Conversion App Page or Go back to Menu:</p>
<div class="button-container">
<button onclick="handleUserInput('Menu')">Menu</button>
`;
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';
botMessage.textContent = 'Loading Salesforce chatbot...'; // Optional: Notify the user
gradioFrame.src = `https://srinuksv-fastapiyes.hf.space/ch/${globalUniqueID}`; // Replace with your Gradio chatbot URL
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
}
// Show chat box
function showChat() {
formContainer.style.display = 'none';
chatBox.style.display = 'flex';
gradioIframe.style.display = 'none'; // Hide Gradio iframe if visible
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-fastapiyes.hf.space/ch/${globalUniqueID}`;
} else {
gradioIframe.src = `https://srinuksv-fastapiyes.hf.space/ch/${globalUniqueID}`;
}
}
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
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;
}
// Hide Gradio iframe and show chat box
function goBackToChat() {
formContainer.style.display = 'none';
chatBox.style.display = 'flex';
gradioIframe.style.display = 'none';
initializeChat();
}
// 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>
<div class="button-container">
<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
chatbotButton.addEventListener('click', openChatbot);
closeButton.addEventListener('click', closeChatbot);
backToChatbotBtn.addEventListener('click', goBackToChat);
// Automatically open the chatbot if the form was submitted in the current session
if (formSubmitted) {
openChatbot();
}
</script>
</body>
</html>