|
473 | 473 | // https://firebase.google.com/docs/web/setup#available-libraries
|
474 | 474 |
|
475 | 475 | // Your web app's Firebase configuration
|
476 |
| -// const firebaseConfig = { |
477 |
| -// apiKey: "AIzaSyCIu00xHq9JK2AcsTb1_ZZCzFwtJDra00k", |
478 |
| -// authDomain: "seedinov-7c503.firebaseapp.com", |
479 |
| -// databaseURL: "https://seedinov-7c503-default-rtdb.firebaseio.com", |
480 |
| -// projectId: "seedinov-7c503", |
481 |
| -// storageBucket: "seedinov-7c503.appspot.com", |
482 |
| -// messagingSenderId: "642542325045", |
483 |
| -// appId: "1:642542325045:web:0f14e0f46c588f94bd907c" |
484 |
| -// }; |
485 |
| - |
486 | 476 | const firebaseConfig = {
|
487 | 477 | apiKey: "AIzaSyC0nJZwyOT4Q9A2uT8eFfuRak_0SfQER6g",
|
488 | 478 | authDomain: "seedinov-portfolio.firebaseapp.com",
|
|
497 | 487 | var database = getDatabase(app);
|
498 | 488 |
|
499 | 489 | var chatMessages = document.querySelector(".chat-messages");
|
500 |
| - var userInput = document.getElementById("user-input"); |
501 |
| - var submitBtn = document.getElementById("chat-submit-btn"); |
502 |
| - var userInputWarpper = document.getElementById("input-wrapper"); |
| 490 | + var userInput = document.getElementById("user-input"); |
| 491 | + var submitBtn = document.getElementById("chat-submit-btn"); |
| 492 | + var userInputWarpper = document.getElementById("input-wrapper"); |
| 493 | + var loader = document.getElementById("loader"); |
| 494 | + |
503 | 495 | if(submitBtn) {
|
504 | 496 | var step = 1;
|
505 | 497 | var userEmail = "";
|
506 | 498 | var userPainPoint = "";
|
507 | 499 |
|
508 | 500 | function getScrollHeight(elm){
|
509 |
| - var savedValue = elm.value |
510 |
| - elm.value = '' |
511 |
| - elm._baseScrollHeight = elm.scrollHeight |
512 |
| - elm.value = savedValue |
513 |
| -} |
514 |
| - |
515 |
| -// function onExpandableTextareaInput({ target:elm }){ |
516 |
| -// // make sure the input event originated from a textarea and it's desired to be auto-expandable |
517 |
| -// if( !elm.classList.contains('autoExpand') || !elm.nodeName == 'TEXTAREA' ) return |
518 |
| - |
519 |
| -// var minRows = elm.getAttribute('data-min-rows')|0, rows; |
520 |
| -// !elm._baseScrollHeight && getScrollHeight(elm) |
521 |
| - |
522 |
| -// elm.rows = minRows |
523 |
| -// rows = Math.ceil((elm.scrollHeight - elm._baseScrollHeight) / 16) |
524 |
| -// elm.rows = minRows + rows |
525 |
| -// } |
526 |
| - |
527 |
| -const handleChatSubmit = (e) => { |
528 |
| - e.preventDefault(); |
529 |
| - var userInputValue = userInput.value.trim(); |
530 |
| - if (userInputValue === "") return; |
531 |
| - |
532 |
| - if (step === 1) { |
533 |
| - userEmail = userInputValue; |
534 |
| - appendUserMessage(userEmail); |
535 |
| - userInput.value = ""; |
536 |
| - step++; |
537 |
| - setTimeout(function() { |
538 |
| - appendBotMessage("Can you share more details about your problem?"); |
539 |
| - }, 1000); // 1-second delay |
540 |
| - } else if (step === 2) { |
541 |
| - userPainPoint = userInputValue; |
542 |
| - appendUserMessage(userPainPoint); |
543 |
| - userInput.value = ""; |
544 |
| - userInput.disabled = true; |
545 |
| - submitBtn.disabled = true; |
546 |
| - setTimeout(function() { |
547 |
| - appendBotMessage("Thank you! Our team will get back to you soon."); |
548 |
| - userInputWarpper.style.display = "none"; |
549 |
| - }, 1000); // 1-second delay |
550 |
| - |
551 |
| - // Save data to Firebase |
552 |
| - saveMessage(userEmail, userPainPoint); |
553 |
| - } |
| 501 | + var savedValue = elm.value |
| 502 | + elm.value = '' |
| 503 | + elm._baseScrollHeight = elm.scrollHeight |
| 504 | + elm.value = savedValue |
| 505 | + } |
554 | 506 |
|
555 |
| - } |
| 507 | + const handleChatSubmit = (e) => { |
| 508 | + e.preventDefault(); |
| 509 | + var userInputValue = userInput.value.trim(); |
| 510 | + if (userInputValue === "") return; |
| 511 | + |
| 512 | + if (step === 1) { |
| 513 | + userEmail = userInputValue; |
| 514 | + appendUserMessage(userEmail); |
| 515 | + userInput.value = ""; |
| 516 | + step++; |
| 517 | + showLoader(); |
| 518 | + setTimeout(function() { |
| 519 | + hideLoader(); |
| 520 | + appendBotMessage("Can you share more details about your problem?"); |
| 521 | + }, 2000); // 2-second delay |
| 522 | + } else if (step === 2) { |
| 523 | + userPainPoint = userInputValue; |
| 524 | + appendUserMessage(userPainPoint); |
| 525 | + userInput.value = ""; |
| 526 | + userInput.disabled = true; |
| 527 | + submitBtn.disabled = true; |
| 528 | + showLoader(); |
| 529 | + setTimeout(function() { |
| 530 | + hideLoader(); |
| 531 | + appendBotMessage("Thank you! Our team will get back to you soon."); |
| 532 | + userInputWarpper.style.display = "none"; |
| 533 | + }, 2000); // 2-second delay |
| 534 | + |
| 535 | + // Save data to Firebase |
| 536 | + saveMessage(userEmail, userPainPoint); |
| 537 | + } |
| 538 | + } |
556 | 539 |
|
557 |
| - submitBtn.addEventListener("click", |
558 |
| - handleChatSubmit |
559 |
| - ); |
| 540 | + submitBtn.addEventListener("click", handleChatSubmit); |
560 | 541 |
|
561 | 542 | userInput.addEventListener("keydown", function (e) {
|
562 |
| - if (e.key === "Enter") { |
563 |
| - handleChatSubmit(e); |
564 |
| - } |
565 |
| - }); |
| 543 | + if (e.key === "Enter") { |
| 544 | + handleChatSubmit(e); |
| 545 | + } |
| 546 | + }); |
566 | 547 |
|
567 |
| - userInput.addEventListener('input', onExpandableTextareaInput); |
| 548 | + userInput.addEventListener('input', onExpandableTextareaInput); |
568 | 549 |
|
569 |
| - function onExpandableTextareaInput() { |
570 |
| - console.log("Hello"); |
571 |
| - userInput.style.height = 'auto'; |
572 |
| - userInput.style.height = (userInput.scrollHeight) + 'px'; |
573 |
| - } |
| 550 | + function onExpandableTextareaInput() { |
| 551 | + console.log("Hello"); |
| 552 | + userInput.style.height = 'auto'; |
| 553 | + userInput.style.height = (userInput.scrollHeight) + 'px'; |
| 554 | + } |
574 | 555 |
|
575 | 556 | function appendUserMessage(message) {
|
576 |
| - var userMessage = document.createElement("div"); |
577 |
| - userMessage.classList.add("chat-message", "d-flex", "gap-4","flex-row-reverse"); |
578 |
| - userMessage.innerHTML = ` |
579 |
| - <img src="../../images/avatar.png" width="32px" height="32px" class="img-fluid"/> |
580 |
| - <div class="max-w-300px"> |
581 |
| - <p>${message}</p> |
582 |
| - </div> |
583 |
| - `; |
584 |
| - chatMessages.appendChild(userMessage); |
| 557 | + var userMessage = document.createElement("div"); |
| 558 | + userMessage.classList.add("chat-message", "d-flex", "gap-4","flex-row-reverse"); |
| 559 | + userMessage.innerHTML = ` |
| 560 | + <img src="../../images/avatar.png" width="32px" height="32px" class="img-fluid"/> |
| 561 | + <div class="max-w-300px"> |
| 562 | + <p style="color:#30ab89">${message}</p> |
| 563 | + </div> |
| 564 | + `; |
| 565 | + chatMessages.appendChild(userMessage); |
585 | 566 | }
|
586 | 567 |
|
587 | 568 | function appendBotMessage(message) {
|
588 |
| - var botMessage = document.createElement("div"); |
589 |
| - botMessage.classList.add("chat-message", "d-flex", "gap-4"); |
590 |
| - botMessage.innerHTML = ` |
591 |
| - <img src="../../images/favicon.png" width="32px" height="32px" class="img-fluid"/> |
592 |
| - <div class="max-w-300px"> |
593 |
| - <p>${message}</p> |
594 |
| - </div> |
595 |
| - `; |
596 |
| - chatMessages.appendChild(botMessage); |
597 |
| - chatMessages.scrollTop = chatMessages.scrollHeight; // Scroll to the bottom |
| 569 | + var botMessage = document.createElement("div"); |
| 570 | + botMessage.classList.add("chat-message", "d-flex", "gap-4"); |
| 571 | + botMessage.innerHTML = ` |
| 572 | + <img src="../../images/favicon.png" width="32px" height="32px" class="img-fluid"/> |
| 573 | + <div class="max-w-300px"> |
| 574 | + <p>${message}</p> |
| 575 | + </div> |
| 576 | + `; |
| 577 | + chatMessages.appendChild(botMessage); |
| 578 | + chatMessages.scrollTop = chatMessages.scrollHeight; // Scroll to the bottom |
| 579 | + } |
| 580 | + |
| 581 | + function showLoader() { |
| 582 | + loader.style.display = 'flex'; |
| 583 | + } |
| 584 | + |
| 585 | + function hideLoader() { |
| 586 | + loader.style.display = 'none'; |
598 | 587 | }
|
599 | 588 |
|
600 | 589 | // Save message to Firebase
|
601 | 590 | function saveMessage(email, painPoint) {
|
602 |
| - const messagesRef = ref(database, 'chatForm'); |
603 |
| - const newMessageRef = push(messagesRef); |
604 |
| - set(newMessageRef, { |
605 |
| - email: email, |
606 |
| - painPoint: painPoint, |
607 |
| - timestamp: new Date().toISOString() |
608 |
| - }).then(() => { |
609 |
| - console.log("Data saved successfully."); |
610 |
| - }).catch((error) => { |
611 |
| - console.error("Data could not be saved.", error); |
612 |
| - }); |
| 591 | + const messagesRef = ref(database, 'chatForm'); |
| 592 | + const newMessageRef = push(messagesRef); |
| 593 | + set(newMessageRef, { |
| 594 | + email: email, |
| 595 | + painPoint: painPoint, |
| 596 | + timestamp: new Date().toISOString() |
| 597 | + }).then(() => { |
| 598 | + console.log("Data saved successfully."); |
| 599 | + }).catch((error) => { |
| 600 | + console.error("Data could not be saved.", error); |
| 601 | + }); |
613 | 602 | }
|
614 | 603 | }
|
615 | 604 |
|
|
665 | 654 | }
|
666 | 655 | </script>
|
667 | 656 |
|
668 |
| - <!-- <script type="module"> |
669 |
| - // Import the functions you need from the SDKs you need |
670 |
| - import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"; |
671 |
| - import { getDatabase, ref, push, set } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-database.js"; |
672 |
| -
|
673 |
| - // Your web app's Firebase configuration |
674 |
| - const firebaseConfig = { |
675 |
| - apiKey: "AIzaSyDEsvEAGUe6FIENvim-zMW9FGI42oqKWwo", |
676 |
| - authDomain: "seedinov-10c6d.firebaseapp.com", |
677 |
| - databaseURL: "https://seedinov-10c6d-default-rtdb.firebaseio.com", |
678 |
| - projectId: "seedinov-10c6d", |
679 |
| - storageBucket: "seedinov-10c6d.appspot.com", |
680 |
| - messagingSenderId: "236955398977", |
681 |
| - appId: "1:236955398977:web:001f24ab3a8bc2bb06e7c0", |
682 |
| - measurementId: "G-9XDGEX936G" |
683 |
| - }; |
684 |
| -
|
685 |
| - // Initialize Firebase |
686 |
| - const app = initializeApp(firebaseConfig); |
687 |
| - const database = getDatabase(app); |
688 |
| -
|
689 |
| - var chatMessages = document.querySelector(".chat-messages"); |
690 |
| - var userInput = document.getElementById("user-input"); |
691 |
| - var submitBtn = document.getElementById("chat-submit-btn"); |
692 |
| -
|
693 |
| - var step = 1; |
694 |
| - var userEmail = ""; |
695 |
| - var userPainPoint = ""; |
696 |
| -
|
697 |
| - submitBtn.addEventListener("click", function(e) { |
698 |
| - e.preventDefault(); |
699 |
| - var userInputValue = userInput.value.trim(); |
700 |
| - if (userInputValue === "") return; |
701 |
| -
|
702 |
| - if (step === 1) { |
703 |
| - userEmail = userInputValue; |
704 |
| - appendUserMessage(userEmail); |
705 |
| - userInput.value = ""; |
706 |
| - step++; |
707 |
| - setTimeout(function() { |
708 |
| - appendBotMessage("Can you share more details about your problem?"); |
709 |
| - }, 1000); // 1-second delay |
710 |
| - } else if (step === 2) { |
711 |
| - userPainPoint = userInputValue; |
712 |
| - appendUserMessage(userPainPoint); |
713 |
| - userInput.value = ""; |
714 |
| - userInput.disabled = true; |
715 |
| - submitBtn.disabled = true; |
716 |
| - setTimeout(function() { |
717 |
| - appendBotMessage("Thank you! Our team will get back to you soon."); |
718 |
| - }, 1000); // 1-second delay |
719 |
| -
|
720 |
| - // Save data to Firebase |
721 |
| - saveMessage(userEmail, userPainPoint); |
722 |
| - } |
723 |
| - }); |
724 |
| -
|
725 |
| - function appendUserMessage(message) { |
726 |
| - var userMessage = document.createElement("div"); |
727 |
| - userMessage.classList.add("chat-message", "d-flex", "gap-4"); |
728 |
| - userMessage.innerHTML = ` |
729 |
| - <img src="../../images/favicon.png" width="32px" height="32px" class="img-fluid"/> |
730 |
| - <div class="max-w-300px"> |
731 |
| - <p>${message}</p> |
732 |
| - </div> |
733 |
| - `; |
734 |
| - chatMessages.appendChild(userMessage); |
735 |
| - } |
736 |
| -
|
737 |
| - function appendBotMessage(message) { |
738 |
| - var botMessage = document.createElement("div"); |
739 |
| - botMessage.classList.add("chat-message", "d-flex", "gap-4"); |
740 |
| - botMessage.innerHTML = ` |
741 |
| - <img src="../../images/favicon.png" width="32px" height="32px" class="img-fluid"/> |
742 |
| - <div class="max-w-300px"> |
743 |
| - <p>${message}</p> |
744 |
| - </div> |
745 |
| - `; |
746 |
| - chatMessages.appendChild(botMessage); |
747 |
| - chatMessages.scrollTop = chatMessages.scrollHeight; // Scroll to the bottom |
748 |
| - } |
749 |
| -
|
750 |
| - // Save message to Firebase |
751 |
| - function saveMessage(email, painPoint) { |
752 |
| - const messagesRef = ref(database, 'chatForm'); |
753 |
| - const newMessageRef = push(messagesRef); |
754 |
| - set(newMessageRef, { |
755 |
| - email: email, |
756 |
| - painPoint: painPoint, |
757 |
| - timestamp: new Date().toISOString() |
758 |
| - }).then(() => { |
759 |
| - console.log("Data saved successfully."); |
760 |
| - }).catch((error) => { |
761 |
| - console.error("Data could not be saved.", error); |
762 |
| - }); |
763 |
| - } |
764 |
| -</script> --> |
765 |
| - |
766 |
| - <!-- <script> |
767 |
| - // Initialize Firebase |
768 |
| - const firebaseConfig = { |
769 |
| - apiKey: "AIzaSyDEsvEAGUe6FIENvim-zMW9FGI42oqKWwo", |
770 |
| - authDomain: "seedinov-10c6d.firebaseapp.com", |
771 |
| - databaseURL: "https://seedinov-10c6d-default-rtdb.firebaseio.com", |
772 |
| - projectId: "seedinov-10c6d", |
773 |
| - storageBucket: "seedinov-10c6d.appspot.com", |
774 |
| - messagingSenderId: "236955398977", |
775 |
| - appId: "1:236955398977:web:001f24ab3a8bc2bb06e7c0", |
776 |
| - measurementId: "G-9XDGEX936G", |
777 |
| -}; |
778 |
| -
|
779 |
| -// // Initialize Firebase |
780 |
| - firebase.initializeApp(firebaseConfig); |
781 |
| - var messagesRef = firebase.database().ref('/'); |
782 |
| -
|
783 |
| - document.getElementById('contactForm') |
784 |
| - .addEventListener('submit', submitForm); |
785 |
| -
|
786 |
| - function submitForm(e) { |
787 |
| - console.log('submitForm') |
788 |
| - e.preventDefault(); |
789 |
| -
|
790 |
| - // // Get values |
791 |
| - var name = getInputVal('name'); |
792 |
| - var phone = getInputVal('phone'); |
793 |
| - var email = getInputVal('email'); |
794 |
| - var message = getInputVal("message"); |
795 |
| - var subject = getInputVal("subject"); |
796 |
| -
|
797 |
| - saveMessage(name, phone, email, subject, message); |
798 |
| - |
799 |
| - alert("Thank you for contacting us. We will get back to you shortly."); |
800 |
| - document.getElementById('contactForm').reset(); |
801 |
| - } |
802 |
| -
|
803 |
| - // Function to get form values |
804 |
| - function getInputVal(id) { |
805 |
| - return document.getElementById(id).value; |
806 |
| - } |
807 |
| -
|
808 |
| - // Save message to firebase |
809 |
| - function saveMessage(name, phone, email, subject, message) { |
810 |
| - var newMessageRef = messagesRef.push(); |
811 |
| - try { |
812 |
| - newMessageRef.set({ |
813 |
| - name: name, |
814 |
| - phone: phone, |
815 |
| - email: email, |
816 |
| - subject: subject, |
817 |
| - message: message, |
818 |
| - }, function(error) { |
819 |
| - if (error) { |
820 |
| - console.error("Data could not be saved.", error); |
821 |
| - } else { |
822 |
| - console.log("Data saved successfully."); |
823 |
| - }}) |
824 |
| - } catch(err) { |
825 |
| - console.log("err",err) |
826 |
| - } |
827 |
| - } |
828 |
| -</script> --> |
829 | 657 | <script src="js/script.js" defer></script>
|
830 | 658 | <script src="plugins/simplex-noise/simplex-noise.min.js" type="module"></script>
|
831 | 659 | <script type="module">
|
|
0 commit comments