├── src
├── icon.png
├── flowchatui.js
├── flowchat.css
├── flowchat.js
└── flow.css
├── images
├── favicon.png
├── up-arrow.png
├── details-2.png
├── down-arrow.png
├── exam-sheet.png
├── chatbot-logo.png
├── details-modal.jpg
├── testimonial-1.jpg
├── testimonial-2.jpg
├── testimonial-3.jpg
├── testimonial-4.jpg
├── testimonial-5.jpg
├── testimonial-6.jpg
├── example_template.png
├── readme
│ ├── notepad1.jpg
│ ├── notepad2.jpg
│ ├── notepad3.jpg
│ ├── notepad4.jpg
│ ├── integration1.jpg
│ ├── integration2.jpg
│ ├── integration3.jpg
│ ├── integration4.jpg
│ ├── integration5.jpg
│ ├── integration6.jpg
│ ├── integration7.jpg
│ ├── integration8.jpg
│ ├── generate section.jpg
│ ├── profile section.jpg
│ ├── information section.jpg
│ └── integrate section.jpg
├── article-details-large.jpg
├── article-details-small.jpg
├── decoration-lines.svg
├── logo.svg
├── after-login image1.svg
└── register-detail img1.svg
├── webfonts
├── fa-brands-400.eot
├── fa-brands-400.ttf
├── fa-brands-400.woff
├── fa-regular-400.eot
├── fa-regular-400.ttf
├── fa-solid-900.eot
├── fa-solid-900.ttf
├── fa-solid-900.woff
├── fa-solid-900.woff2
├── fa-brands-400.woff2
├── fa-regular-400.woff
└── fa-regular-400.woff2
├── css
├── adminpanel.css
├── dataTables.bootstrap5.min.css
└── swiper.css
├── js
├── adminpanel.js
├── replaceme.min.js
├── dataTables.bootstrap5.min.js
├── scripts.js
└── purecounter.min.js
├── demo-data
└── data.json
├── README.md
├── dashboard
├── generate.html
├── integrate.html
├── info.html
└── adminpanel.html
├── log-in.html
└── sign-up.html
/src/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/src/icon.png
--------------------------------------------------------------------------------
/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/favicon.png
--------------------------------------------------------------------------------
/images/up-arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/up-arrow.png
--------------------------------------------------------------------------------
/images/details-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/details-2.png
--------------------------------------------------------------------------------
/images/down-arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/down-arrow.png
--------------------------------------------------------------------------------
/images/exam-sheet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/exam-sheet.png
--------------------------------------------------------------------------------
/images/chatbot-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/chatbot-logo.png
--------------------------------------------------------------------------------
/images/details-modal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/details-modal.jpg
--------------------------------------------------------------------------------
/images/testimonial-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/testimonial-1.jpg
--------------------------------------------------------------------------------
/images/testimonial-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/testimonial-2.jpg
--------------------------------------------------------------------------------
/images/testimonial-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/testimonial-3.jpg
--------------------------------------------------------------------------------
/images/testimonial-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/testimonial-4.jpg
--------------------------------------------------------------------------------
/images/testimonial-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/testimonial-5.jpg
--------------------------------------------------------------------------------
/images/testimonial-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/testimonial-6.jpg
--------------------------------------------------------------------------------
/images/example_template.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/example_template.png
--------------------------------------------------------------------------------
/images/readme/notepad1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/readme/notepad1.jpg
--------------------------------------------------------------------------------
/images/readme/notepad2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/readme/notepad2.jpg
--------------------------------------------------------------------------------
/images/readme/notepad3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/readme/notepad3.jpg
--------------------------------------------------------------------------------
/images/readme/notepad4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/readme/notepad4.jpg
--------------------------------------------------------------------------------
/webfonts/fa-brands-400.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/webfonts/fa-brands-400.eot
--------------------------------------------------------------------------------
/webfonts/fa-brands-400.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/webfonts/fa-brands-400.ttf
--------------------------------------------------------------------------------
/webfonts/fa-brands-400.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/webfonts/fa-brands-400.woff
--------------------------------------------------------------------------------
/webfonts/fa-regular-400.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/webfonts/fa-regular-400.eot
--------------------------------------------------------------------------------
/webfonts/fa-regular-400.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/webfonts/fa-regular-400.ttf
--------------------------------------------------------------------------------
/webfonts/fa-solid-900.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/webfonts/fa-solid-900.eot
--------------------------------------------------------------------------------
/webfonts/fa-solid-900.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/webfonts/fa-solid-900.ttf
--------------------------------------------------------------------------------
/webfonts/fa-solid-900.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/webfonts/fa-solid-900.woff
--------------------------------------------------------------------------------
/webfonts/fa-solid-900.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/webfonts/fa-solid-900.woff2
--------------------------------------------------------------------------------
/webfonts/fa-brands-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/webfonts/fa-brands-400.woff2
--------------------------------------------------------------------------------
/webfonts/fa-regular-400.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/webfonts/fa-regular-400.woff
--------------------------------------------------------------------------------
/webfonts/fa-regular-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/webfonts/fa-regular-400.woff2
--------------------------------------------------------------------------------
/images/article-details-large.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/article-details-large.jpg
--------------------------------------------------------------------------------
/images/article-details-small.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/article-details-small.jpg
--------------------------------------------------------------------------------
/images/readme/integration1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/readme/integration1.jpg
--------------------------------------------------------------------------------
/images/readme/integration2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/readme/integration2.jpg
--------------------------------------------------------------------------------
/images/readme/integration3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/readme/integration3.jpg
--------------------------------------------------------------------------------
/images/readme/integration4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/readme/integration4.jpg
--------------------------------------------------------------------------------
/images/readme/integration5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/readme/integration5.jpg
--------------------------------------------------------------------------------
/images/readme/integration6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/readme/integration6.jpg
--------------------------------------------------------------------------------
/images/readme/integration7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/readme/integration7.jpg
--------------------------------------------------------------------------------
/images/readme/integration8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/readme/integration8.jpg
--------------------------------------------------------------------------------
/images/readme/generate section.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/readme/generate section.jpg
--------------------------------------------------------------------------------
/images/readme/profile section.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/readme/profile section.jpg
--------------------------------------------------------------------------------
/images/readme/information section.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/readme/information section.jpg
--------------------------------------------------------------------------------
/images/readme/integrate section.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rutikab12/Chatbot-Web-Application/HEAD/images/readme/integrate section.jpg
--------------------------------------------------------------------------------
/images/decoration-lines.svg:
--------------------------------------------------------------------------------
1 | decoration-lines
--------------------------------------------------------------------------------
/css/adminpanel.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");
2 | body,
3 | button {
4 | font-family: "Inter", sans-serif;
5 | }
6 |
7 | :root {
8 | --offcanvas-width: 270px;
9 | --topNavbarHeight: 56px;
10 | }
11 |
12 | .sidebar-nav {
13 | width: var(--offcanvas-width);
14 | }
15 |
16 | .sidebar-link {
17 | display: flex;
18 | align-items: center;
19 | }
20 |
21 | .sidebar-link .right-icon {
22 | display: inline-flex;
23 | }
24 |
25 | .sidebar-link[aria-expanded="true"] .right-icon {
26 | transform: rotate(180deg);
27 | }
28 |
29 | .form-control-submit-button {
30 | background-color: #00bcd4;
31 | color: #fff;
32 | border: none;
33 | border-radius: 5px;
34 | padding: 10px;
35 | font-size: 16px;
36 | cursor: pointer;
37 | transition: all 0.3s ease;
38 | }
39 |
40 | @media (min-width: 992px) {
41 | body {
42 | overflow: auto !important;
43 | }
44 | main {
45 | margin-left: var(--offcanvas-width);
46 | }
47 | /* this is to remove the backdrop */
48 | .offcanvas-backdrop::before {
49 | display: none;
50 | }
51 | .sidebar-nav {
52 | -webkit-transform: none;
53 | transform: none;
54 | visibility: visible !important;
55 | height: calc(100% - var(--topNavbarHeight));
56 | top: var(--topNavbarHeight);
57 | }
58 | }
--------------------------------------------------------------------------------
/js/adminpanel.js:
--------------------------------------------------------------------------------
1 | const charts = document.querySelectorAll(".chart");
2 |
3 | charts.forEach(function(chart) {
4 | var ctx = chart.getContext("2d");
5 | var myChart = new Chart(ctx, {
6 | type: "bar",
7 | data: {
8 | labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
9 | datasets: [{
10 | label: "# of Votes",
11 | data: [12, 19, 3, 5, 2, 3],
12 | backgroundColor: [
13 | "rgba(255, 99, 132, 0.2)",
14 | "rgba(54, 162, 235, 0.2)",
15 | "rgba(255, 206, 86, 0.2)",
16 | "rgba(75, 192, 192, 0.2)",
17 | "rgba(153, 102, 255, 0.2)",
18 | "rgba(255, 159, 64, 0.2)",
19 | ],
20 | borderColor: [
21 | "rgba(255, 99, 132, 1)",
22 | "rgba(54, 162, 235, 1)",
23 | "rgba(255, 206, 86, 1)",
24 | "rgba(75, 192, 192, 1)",
25 | "rgba(153, 102, 255, 1)",
26 | "rgba(255, 159, 64, 1)",
27 | ],
28 | borderWidth: 1,
29 | }, ],
30 | },
31 | options: {
32 | scales: {
33 | y: {
34 | beginAtZero: true,
35 | },
36 | },
37 | },
38 | });
39 | });
40 |
41 | $(document).ready(function() {
42 | $(".data-table").each(function(_, table) {
43 | $(table).DataTable();
44 | });
45 | });
--------------------------------------------------------------------------------
/src/flowchatui.js:
--------------------------------------------------------------------------------
1 | d = document.createElement('div'); //This JQuery is for chaticon
2 | $(d).addClass('chat_icon')
3 | .html(' ')
4 | .appendTo($("body")) //main div
5 |
6 |
7 | $(".chat_icon").append(function() {
8 | return ($("
")
9 | .attr("id", "flowchat")
10 | .addClass("flow")
11 | //.html('
')
12 | .html('')
13 | )
14 | });
15 |
16 |
17 | $(document).ready(function() {
18 | $('#icon').on('click', function() {
19 | if ($('.flow').is(':visible')) {
20 | $('.flow').fadeIn(400, function() {
21 | $('.flow').animate({
22 | 'width': 'hide'
23 | }, 1000);
24 | });
25 | } else {
26 | $('.flow').animate({
27 | 'width': 'show'
28 | }, 1000, function() {
29 | $('.flow').fadeIn(400);
30 | });
31 | };
32 | });
33 | });
34 |
35 | $(document).ready(function() {
36 | $('#icon').on('click', function() {
37 | if ($('.chat-popup').is(':visible')) {
38 | $('.chat-popup').fadeIn(400, function() {
39 | $('.chat-popup').animate({
40 | 'width': 'hide'
41 | }, 1000);
42 | });
43 | } else {
44 | $('.chat-popup').animate({
45 | 'width': 'show'
46 | }, 1000, function() {
47 | $('.chat-popup').fadeIn(400);
48 | });
49 | };
50 | });
51 | });
--------------------------------------------------------------------------------
/images/logo.svg:
--------------------------------------------------------------------------------
1 |
logo
--------------------------------------------------------------------------------
/js/replaceme.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * replaceme.js - text rotating component in vanilla JavaScript
3 | * @version 1.1.0
4 | * @author Adrian Klimek
5 | * @link https://adrianklimek.github.io/replaceme/
6 | * @copyright Addrian Klimek 2016
7 | * @license MIT
8 | */
9 | !function(a,b){"use strict";function c(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function d(){"function"==typeof b&&b.fn.extend({ReplaceMe:function(a){return this.each(function(){new e(this,a)})}})}function e(a,b){var d={animation:"animated fadeIn",speed:2e3,separator:",",hoverStop:!1,clickChange:!1,loopCount:"infinite",autoRun:!0,onInit:!1,onChange:!1,onComplete:!1};if("object"==typeof b?this.options=c(d,b):this.options=d,"undefined"==typeof a)throw new Error('ReplaceMe [constructor]: "element" parameter is required');if("object"==typeof a)this.element=a;else{if("string"!=typeof a)throw new Error('ReplaceMe [constructor]: wrong "element" parameter');this.element=document.querySelector(a)}this.init()}e.prototype.init=function(){"function"==typeof this.options.onInit&&this.options.onInit(),this.words=this.escapeHTML(this.element.innerHTML).split(this.options.separator),this.count=this.words.length,this.position=this.loopCount=0,this.running=!1,this.bindAll(),this.options.autoRun===!0&&this.start()},e.prototype.bindAll=function(){this.options.hoverStop===!0&&(this.element.addEventListener("mouseover",this.pause.bind(this)),this.element.addEventListener("mouseout",this.start.bind(this))),this.options.clickChange===!0&&this.element.addEventListener("click",this.change.bind(this))},e.prototype.changeAnimation=function(){this.change(),this.loop=setTimeout(this.changeAnimation.bind(this),this.options.speed)},e.prototype.start=function(){this.running!==!0&&(this.running=!0,this.changeWord(this.words[this.position]),this.position++),this.loop=setTimeout(this.changeAnimation.bind(this),this.options.speed)},e.prototype.change=function(){return this.position>this.count-1&&(this.position=0,this.loopCount++,this.loopCount>=this.options.loopCount)?void this.stop():(this.changeWord(this.words[this.position]),this.position++,void("function"==typeof this.options.onChange&&this.options.onChange()))},e.prototype.stop=function(){this.running=!1,this.position=this.loopCount=0,this.pause(),"function"==typeof this.options.onComplete&&this.options.onComplete()},e.prototype.pause=function(){clearTimeout(this.loop)},e.prototype.changeWord=function(a){this.element.innerHTML='
'+a+" "},e.prototype.escapeHTML=function(a){var b=/<\/?\w+\s*[^>]*>/g;return b.test(a)===!0?a.replace(b,""):a},a.ReplaceMe=e,d()}(window,window.jQuery);
--------------------------------------------------------------------------------
/src/flowchat.css:
--------------------------------------------------------------------------------
1 | ul.chat-window {
2 | width: 100%;
3 | height: 100%;
4 | overflow: scroll;
5 | margin-top: 0;
6 | padding: 20px;
7 | list-style: none;
8 | margin: 0;
9 | box-sizing: border-box;
10 | }
11 |
12 | ul.chat-window>li .text {
13 | box-sizing: border-box;
14 | margin-bottom: 10px;
15 | border-radius: 10px;
16 | padding: 10px 15px;
17 | line-height: 20px;
18 | }
19 |
20 | ul.chat-window>li.bot .text {
21 | background-color: #01bad8;
22 | color: #fff;
23 | float: left;
24 | }
25 |
26 | ul.chat-window>li {
27 | clear: both;
28 | max-width: 80%;
29 | box-sizing: border-box;
30 | white-space: pre-wrap;
31 | }
32 |
33 | ul.chat-window>li.user {
34 | float: right;
35 | }
36 |
37 | ul.chat-window>li.bot {
38 | float: left;
39 | }
40 |
41 | ul.chat-window>li.user .text {
42 | background-color: #ddd;
43 | }
44 |
45 | ul.chat-window>li.options {
46 | margin-top: 10px;
47 | list-style: none;
48 | max-width: 100%;
49 | width: 100%;
50 | float: left;
51 | text-align: right;
52 | }
53 |
54 | ul.chat-window>li.options>ul {
55 | margin-top: 0;
56 | padding: 0;
57 | list-style: none;
58 | margin-top: 10px;
59 | }
60 |
61 | ul.chat-window>li.options>ul>li {
62 | border-radius: 10px;
63 | padding: 5px 10px;
64 | border: 1px solid #01bad8;
65 | display: inline-block;
66 | cursor: pointer;
67 | color: #fff;
68 | margin-left: 10px;
69 | margin-bottom: 10px;
70 | }
71 |
72 | .typing-indicator {
73 | background-color: #E6E7ED;
74 | will-change: transform;
75 | width: auto;
76 | border-radius: 50px;
77 | padding: 10px;
78 | display: table;
79 | margin: 0;
80 | margin-left: 10px;
81 | position: relative;
82 | -webkit-animation: 2s bulge infinite ease-out;
83 | animation: 2s bulge infinite ease-out;
84 | }
85 |
86 | .typing-indicator::before,
87 | .typing-indicator::after {
88 | content: '';
89 | position: absolute;
90 | bottom: -2px;
91 | left: -2px;
92 | height: 20px;
93 | width: 20px;
94 | border-radius: 50%;
95 | background-color: #E6E7ED;
96 | }
97 |
98 | .typing-indicator::after {
99 | height: 10px;
100 | width: 10px;
101 | left: -10px;
102 | bottom: -10px;
103 | }
104 |
105 | .typing-indicator span {
106 | height: 8px;
107 | width: 8px;
108 | float: left;
109 | margin: 0 1px;
110 | background-color: #9E9EA1;
111 | display: block;
112 | border-radius: 50%;
113 | opacity: 0.4;
114 | }
115 |
116 | .typing-indicator span:nth-of-type(1) {
117 | -webkit-animation: 1s blink infinite 0.3333s;
118 | animation: 1s blink infinite 0.3333s;
119 | }
120 |
121 | .typing-indicator span:nth-of-type(2) {
122 | -webkit-animation: 1s blink infinite 0.6666s;
123 | animation: 1s blink infinite 0.6666s;
124 | }
125 |
126 | .typing-indicator span:nth-of-type(3) {
127 | -webkit-animation: 1s blink infinite 0.9999s;
128 | animation: 1s blink infinite 0.9999s;
129 | }
130 |
131 | @-webkit-keyframes blink {
132 | 50% {
133 | opacity: 1;
134 | }
135 | }
136 |
137 | @keyframes blink {
138 | 50% {
139 | opacity: 1;
140 | }
141 | }
142 |
143 | @-webkit-keyframes bulge {
144 | 50% {
145 | -webkit-transform: scale(1.05);
146 | transform: scale(1.05);
147 | }
148 | }
149 |
150 | @keyframes bulge {
151 | 50% {
152 | -webkit-transform: scale(1.05);
153 | transform: scale(1.05);
154 | }
155 | }
--------------------------------------------------------------------------------
/js/dataTables.bootstrap5.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | DataTables Bootstrap 5 integration
3 | 2020 SpryMedia Ltd - datatables.net/license
4 | */
5 | var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.findInternal=function(a,b,c){a instanceof String&&(a=String(a));for(var e=a.length,d=0;d
<'col-sm-12 col-md-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
12 | renderer:"bootstrap"});a.extend(d.ext.classes,{sWrapper:"dataTables_wrapper dt-bootstrap5",sFilterInput:"form-control form-control-sm",sLengthSelect:"form-select form-select-sm",sProcessing:"dataTables_processing card",sPageButton:"paginate_button page-item"});d.ext.renderer.pageButton.bootstrap=function(f,l,A,B,m,t){var u=new d.Api(f),C=f.oClasses,n=f.oLanguage.oPaginate,D=f.oLanguage.oAria.paginate||{},h,k,v=0,y=function(q,w){var x,E=function(p){p.preventDefault();a(p.currentTarget).hasClass("disabled")||
13 | u.page()==p.data.action||u.page(p.data.action).draw("page")};var r=0;for(x=w.length;r",{"class":C.sPageButton+
14 | " "+k,id:0===A&&"string"===typeof g?f.sTableId+"_"+g:null}).append(a("",{href:"#","aria-controls":f.sTableId,"aria-label":D[g],"data-dt-idx":v,tabindex:f.iTabIndex,"class":"page-link"}).html(h)).appendTo(q);f.oApi._fnBindAction(F,{action:g},E);v++}}}};try{var z=a(l).find(c.activeElement).data("dt-idx")}catch(q){}y(a(l).empty().html('').children("ul"),B);z!==e&&a(l).find("[data-dt-idx="+z+"]").trigger("focus")};return d});
15 |
--------------------------------------------------------------------------------
/js/scripts.js:
--------------------------------------------------------------------------------
1 | /* Description: Custom JS file */
2 |
3 | /* Navigation*/
4 | // Collapse the navbar by adding the top-nav-collapse class
5 | window.onscroll = function () {
6 | scrollFunction();
7 | scrollFunctionBTT(); // back to top button
8 | };
9 |
10 | window.onload = function () {
11 | scrollFunction();
12 | };
13 |
14 | function scrollFunction() {
15 | if (document.documentElement.scrollTop > 30) {
16 | document.getElementById("navbarExample").classList.add("top-nav-collapse");
17 | } else if ( document.documentElement.scrollTop < 30 ) {
18 | document.getElementById("navbarExample").classList.remove("top-nav-collapse");
19 | }
20 | }
21 |
22 | // Navbar on mobile
23 | let elements = document.querySelectorAll(".nav-link:not(.dropdown-toggle)");
24 |
25 | for (let i = 0; i < elements.length; i++) {
26 | elements[i].addEventListener("click", () => {
27 | document.querySelector(".offcanvas-collapse").classList.toggle("open");
28 | });
29 | }
30 |
31 | document.querySelector(".navbar-toggler").addEventListener("click", () => {
32 | document.querySelector(".offcanvas-collapse").classList.toggle("open");
33 | });
34 |
35 | // Hover on desktop
36 | function toggleDropdown(e) {
37 | const _d = e.target.closest(".dropdown");
38 | let _m = document.querySelector(".dropdown-menu", _d);
39 |
40 | setTimeout(
41 | function () {
42 | const shouldOpen = _d.matches(":hover");
43 | _m.classList.toggle("show", shouldOpen);
44 | _d.classList.toggle("show", shouldOpen);
45 |
46 | _d.setAttribute("aria-expanded", shouldOpen);
47 | },
48 | e.type === "mouseleave" ? 300 : 0
49 | );
50 | }
51 |
52 | // On hover
53 | const dropdownCheck = document.querySelector('.dropdown');
54 |
55 | if (dropdownCheck !== null) {
56 | document.querySelector(".dropdown").addEventListener("mouseleave", toggleDropdown);
57 | document.querySelector(".dropdown").addEventListener("mouseover", toggleDropdown);
58 |
59 | // On click
60 | document.querySelector(".dropdown").addEventListener("click", (e) => {
61 | const _d = e.target.closest(".dropdown");
62 | let _m = document.querySelector(".dropdown-menu", _d);
63 | if (_d.classList.contains("show")) {
64 | _m.classList.remove("show");
65 | _d.classList.remove("show");
66 | } else {
67 | _m.classList.add("show");
68 | _d.classList.add("show");
69 | }
70 | });
71 | }
72 |
73 |
74 | /* Rotating Text - Word Cycle */
75 | var checkReplace = document.querySelector('.replace-me');
76 | if (checkReplace !== null) {
77 | var replace = new ReplaceMe(document.querySelector('.replace-me'), {
78 | animation: 'animated fadeIn', // Animation class or classes
79 | speed: 2000, // Delay between each phrase in miliseconds
80 | separator: ',', // Phrases separator
81 | hoverStop: false, // Stop rotator on phrase hover
82 | clickChange: false, // Change phrase on click
83 | loopCount: 'infinite', // Loop Count - 'infinite' or number
84 | autoRun: true, // Run rotator automatically
85 | onInit: false, // Function
86 | onChange: false, // Function
87 | onComplete: false // Function
88 | });
89 | }
90 |
91 |
92 | /* Card Slider - Swiper */
93 | var cardSlider = new Swiper('.card-slider', {
94 | autoplay: {
95 | delay: 4000,
96 | disableOnInteraction: false
97 | },
98 | loop: true,
99 | navigation: {
100 | nextEl: '.swiper-button-next',
101 | prevEl: '.swiper-button-prev'
102 | },
103 | slidesPerView: 3,
104 | spaceBetween: 70,
105 | breakpoints: {
106 | // when window is <= 767px
107 | 767: {
108 | slidesPerView: 1
109 | },
110 | // when window is <= 991px
111 | 991: {
112 | slidesPerView: 2,
113 | spaceBetween: 40
114 | }
115 | }
116 | });
117 |
118 |
119 | /* Back To Top Button */
120 | // Get the button
121 | myButton = document.getElementById("myBtn");
122 |
123 | // When the user scrolls down 20px from the top of the document, show the button
124 | function scrollFunctionBTT() {
125 | if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
126 | myButton.style.display = "block";
127 | } else {
128 | myButton.style.display = "none";
129 | }
130 | }
131 |
132 | // When the user clicks on the button, scroll to the top of the document
133 | function topFunction() {
134 | document.body.scrollTop = 0; // for Safari
135 | document.documentElement.scrollTop = 0; // for Chrome, Firefox, IE and Opera
136 | }
--------------------------------------------------------------------------------
/js/purecounter.min.js:
--------------------------------------------------------------------------------
1 | !function(e){var t={};function r(n){if(t[n])return t[n].exports;var a=t[n]={i:n,l:!1,exports:{}};return e[n].call(a.exports,a,a.exports,r),a.l=!0,a.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(n,a,function(t){return e[t]}.bind(null,a));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/",r(r.s=2)}([,,function(e,t,r){e.exports=r(3)},function(e,t,r){"use strict";function n(e,t){for(var r=0;rn.end?n.end:n.start:void setTimeout((function(){return void 0!==e.target?r.startCounter(e.target,n):r.startCounter(e,n)}),n.delay)}))}},{key:"startCounter",value:function(e,t){var r=this,n=(t.end-t.start)/(t.duration/t.delay),a="inc";t.start>t.end&&(a="dec",n*=-1),n<1&&t.decimals<=0&&(n=1);var i=t.decimals<=0?parseInt(t.start):parseFloat(t.start).toFixed(t.decimals);e.innerHTML=i,!0===t.once&&e.setAttribute("data-purecounter-duration",0);var o=setInterval((function(){var s=r.nextNumber(i,n,t,a);e.innerHTML=r.formatNumber(s,t),((i=s)>=t.end&&"inc"==a||i<=t.end&&"dec"==a)&&(clearInterval(o),i!=t.end&&(e.innerHTML=r.applySeparator(t.decimals<=0?parseInt(t.end):parseFloat(t.end).toFixed(t.decimals),t)))}),t.delay)}},{key:"parseConfig",value:function(e){for(var t=[].filter.call(e.attributes,(function(e){return/^data-purecounter-/.test(e.name)})),r={start:0,end:9001,duration:2e3,delay:10,once:!0,decimals:0,legacy:!0,currency:!1,currencysymbol:!1,separator:!1,separatorsymbol:","},n=0;n=1e12?(Math.abs(Number(e))/1e12).toFixed(n)+" T":Math.abs(Number(e))>=1e9?(Math.abs(Number(e))/1e9).toFixed(n)+" B":Math.abs(Number(e))>=1e6?(Math.abs(Number(e))/1e6).toFixed(n)+" M":Math.abs(Number(e))>=1e3?(Math.abs(Number(e))/1e3).toFixed(n)+" K":Math.abs(Number(e)))}},{key:"castDataType",value:function(e){return/^[0-9]+\.[0-9]+$/.test(e)?parseFloat(e):/^[0-9]+$/.test(e)?parseInt(e):e}},{key:"applySeparator",value:function(e,t){return t.separator?e.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g,"$1,").replace(new RegExp(/,/gi,"gi"),t.separatorsymbol):e.toString().replace(new RegExp(/,/gi,"gi"),"")}},{key:"elementIsInView",value:function(e){for(var t=e.offsetTop,r=e.offsetLeft,n=e.offsetWidth,a=e.offsetHeight;e.offsetParent;)t+=(e=e.offsetParent).offsetTop,r+=e.offsetLeft;return t>=window.pageYOffset&&r>=window.pageXOffset&&t+a<=window.pageYOffset+window.innerHeight&&r+n<=window.pageXOffset+window.innerWidth}},{key:"intersectionListenerSupported",value:function(){return"IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype}}])&&n(t.prototype,r),a&&n(t,a),e}())}]);
--------------------------------------------------------------------------------
/src/flowchat.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | (function($) {
3 |
4 | $.fn.flowchat = function(options) {
5 |
6 | // override options with user preferences
7 |
8 | var settings = $.extend({
9 | delay: 1500,
10 | startButtonId: '#btn-submit',
11 | autoStart: true,
12 | startMessageId: 1,
13 | dataJSON: null
14 | }, options);
15 |
16 | var container = $(this);
17 |
18 | // $(function() {
19 | // if(settings.autoStart)
20 | // startChat(container, settings.dataJSON, settings.startMessageId, settings.delay)
21 | // });
22 |
23 | // on click of Start button
24 | $(document).on('click', settings.startButtonId, function() {
25 |
26 | startChat(container, settings.dataJSON, settings.startMessageId, settings.delay)
27 |
28 | });
29 | }
30 |
31 | function selectOption($this, container, data, delay) {
32 | $this.parent().hide();
33 | var $userReply = $('' + $this.html() + '
');
34 | container.children('.chat-window').append($userReply);
35 |
36 | // get the next message
37 | var nextMessageId = $this.attr('data-nextId');
38 | var nextMessage = findMessageInJsonById(data, nextMessageId);
39 |
40 | // // add next message
41 | generateMessageHTML(container, data, nextMessage, delay);
42 | }
43 |
44 | function startChat(container, data, startId, delay) {
45 | // clear chat window
46 | container.html("");
47 | container.append("");
48 |
49 | // get the first message
50 | var message = findMessageInJsonById(data, startId);
51 |
52 | // add message
53 | generateMessageHTML(container, data, message, delay);
54 | }
55 |
56 | function findMessageInJsonById(data, id) {
57 |
58 | var messages = data;
59 |
60 | for (var i = 0; messages.length > i; i++)
61 | if (messages[i].id == id)
62 | return messages[i];
63 |
64 | }
65 |
66 | function addOptions(container, data, delay, m) {
67 |
68 | var $optionsContainer = $(' ');
69 |
70 | var $optionsList = $('');
71 |
72 | var optionText = null;
73 |
74 | var optionMessageId = null;
75 |
76 | for (var i = 1; i < 12; i++) {
77 | optionText = m["option" + i]
78 | optionMessageId = m["option" + i + "_nextMessageId"]
79 |
80 | if (optionText != "" && optionText != undefined && optionText != null) { // add option only if text exists
81 | var $optionElem = $("" + optionText + " ");
82 |
83 | $optionElem.click(function() {
84 | selectOption($(this), container, data, delay)
85 | });
86 |
87 | $optionsList.append($optionElem);
88 | }
89 | }
90 |
91 | $optionsContainer.append($optionsList);
92 |
93 | return $optionsContainer;
94 | }
95 |
96 | function toggleLoader(status, container) {
97 | if (status == "show")
98 | container.children('.chat-window').append(" ");
99 | else
100 | container.find('.typing-indicator').remove();
101 | }
102 |
103 | function generateMessageHTML(container, messages, m, delay) {
104 | // create template if text is not null ' ' + m.text + '
105 | console.log(m.imageUrl);
106 | if (m.imageUrl != '')
107 | var $template = $(' ');
108 | else if (m.text != '')
109 | var $template = $('' + m.text + '
');
110 | else
111 | var $template = $('');
112 |
113 | toggleLoader("show", container);
114 |
115 | container.children(".chat-window").scrollTop($(".chat-window").prop('scrollHeight'));
116 |
117 | // add delay to chat message
118 | setTimeout(function() {
119 |
120 | toggleLoader("hide", container);
121 |
122 | container.children('.chat-window').append($template);
123 |
124 | // if the message is a question then add options
125 | if (m.messageType == "Question")
126 | container.children('.chat-window').append(addOptions(container, messages, delay, m));
127 |
128 | container.children(".chat-window").scrollTop($(".chat-window").prop('scrollHeight'));
129 |
130 | // call recursively if nextMessageId exists
131 | if (m.nextMessageId != "") {
132 | var nextMessage = findMessageInJsonById(messages, m.nextMessageId)
133 | generateMessageHTML(container, messages, nextMessage, delay)
134 | }
135 |
136 | }, delay);
137 | // end delay
138 | } // end function
139 | }(jQuery));
--------------------------------------------------------------------------------
/css/dataTables.bootstrap5.min.css:
--------------------------------------------------------------------------------
1 | /*! Bootstrap 5 integration for DataTables
2 | *
3 | * ©2020 SpryMedia Ltd, all rights reserved.
4 | * License: MIT datatables.net/license/mit
5 | */table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important;border-collapse:separate !important;border-spacing:0}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:auto;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:.85em}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap;justify-content:flex-end}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable>thead>tr>th:active,table.dataTable>thead>tr>td:active{outline:none}table.dataTable>thead>tr>th:not(.sorting_disabled),table.dataTable>thead>tr>td:not(.sorting_disabled){padding-right:30px}table.dataTable>thead .sorting,table.dataTable>thead .sorting_asc,table.dataTable>thead .sorting_desc,table.dataTable>thead .sorting_asc_disabled,table.dataTable>thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable>thead .sorting:before,table.dataTable>thead .sorting:after,table.dataTable>thead .sorting_asc:before,table.dataTable>thead .sorting_asc:after,table.dataTable>thead .sorting_desc:before,table.dataTable>thead .sorting_desc:after,table.dataTable>thead .sorting_asc_disabled:before,table.dataTable>thead .sorting_asc_disabled:after,table.dataTable>thead .sorting_desc_disabled:before,table.dataTable>thead .sorting_desc_disabled:after{position:absolute;bottom:.5em;display:block;opacity:.3}table.dataTable>thead .sorting:before,table.dataTable>thead .sorting_asc:before,table.dataTable>thead .sorting_desc:before,table.dataTable>thead .sorting_asc_disabled:before,table.dataTable>thead .sorting_desc_disabled:before{right:1em;content:"↑"}table.dataTable>thead .sorting:after,table.dataTable>thead .sorting_asc:after,table.dataTable>thead .sorting_desc:after,table.dataTable>thead .sorting_asc_disabled:after,table.dataTable>thead .sorting_desc_disabled:after{right:.5em;content:"↓"}table.dataTable>thead .sorting_asc:before,table.dataTable>thead .sorting_desc:after{opacity:1}table.dataTable>thead .sorting_asc_disabled:before,table.dataTable>thead .sorting_desc_disabled:after{opacity:0}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table thead .sorting:before,div.dataTables_scrollBody table thead .sorting_asc:before,div.dataTables_scrollBody table thead .sorting_desc:before,div.dataTables_scrollBody table thead .sorting:after,div.dataTables_scrollBody table thead .sorting_asc:after,div.dataTables_scrollBody table thead .sorting_desc:after{display:none}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot>.dataTables_scrollFootInner{box-sizing:content-box}div.dataTables_scrollFoot>.dataTables_scrollFootInner>table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}div.dataTables_wrapper div.dataTables_paginate ul.pagination{justify-content:center !important}}table.dataTable.table-sm>thead>tr>th:not(.sorting_disabled){padding-right:20px}table.dataTable.table-sm .sorting:before,table.dataTable.table-sm .sorting_asc:before,table.dataTable.table-sm .sorting_desc:before{top:5px;right:.85em}table.dataTable.table-sm .sorting:after,table.dataTable.table-sm .sorting_asc:after,table.dataTable.table-sm .sorting_desc:after{top:5px}table.table-bordered.dataTable{border-right-width:0}table.table-bordered.dataTable thead tr:first-child th,table.table-bordered.dataTable thead tr:first-child td{border-top-width:1px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:first-child,table.table-bordered.dataTable th:first-child,table.table-bordered.dataTable td:first-child,table.table-bordered.dataTable td:first-child{border-left-width:1px}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:1px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-bottom-width:1px}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:last-child{padding-right:0}
6 |
--------------------------------------------------------------------------------
/src/flow.css:
--------------------------------------------------------------------------------
1 | /*--------Chat Container CSS-------------------*/
2 |
3 | .flow {
4 | font-family: 'Open Sans', sans-serif;
5 | width: 350px;
6 | height: 400px;
7 | overflow-y: hidden;
8 | overflow-x: hidden;
9 | float: right;
10 | margin-right: 15px;
11 | margin-top: 15%;
12 | border-radius: 15px;
13 | background-color: #515365;
14 | }
15 |
16 | @media only screen and (max-width:600px) {
17 | .flow {
18 | font-family: 'Open Sans', sans-serif;
19 | width: 96%;
20 | height: 400px;
21 | overflow-y: hidden;
22 | overflow-x: hidden;
23 | position: relative;
24 | margin-top: 45%;
25 | border-radius: 15px;
26 | left: 10px;
27 | background-color: #515365;
28 | }
29 | #btn-submit {
30 | width: 90%;
31 | }
32 | #btn-submit:hover {
33 | width: 90%;
34 | }
35 | .footer-chat {
36 | display: none;
37 | }
38 | .chat-popup {
39 | left: 40px;
40 | margin-right: 0;
41 | }
42 | }
43 |
44 |
45 | /*--------Chat Container CSS Ends-------------------*/
46 |
47 |
48 | /*--------For Chat Icon-------------------------*/
49 |
50 | .chat-popup {
51 | position: fixed;
52 | right: 0;
53 | bottom: 0;
54 | margin-bottom: 180px;
55 | margin-right: 50px;
56 | padding-bottom: 50px;
57 | }
58 |
59 | .chat-popup h3 {
60 | text-align: center;
61 | }
62 |
63 | .chat-popup input {
64 | text-align: center;
65 | padding: 8px;
66 | border-radius: 15px;
67 | width: 95%;
68 | outline: none;
69 | border: none;
70 | margin-top: 20px;
71 | margin-left: 10px;
72 | margin-right: 10px;
73 | }
74 |
75 | #flowchat {
76 | position: fixed;
77 | right: 0;
78 | bottom: 0;
79 | margin-bottom: 80px;
80 | }
81 |
82 | .chat_icon {
83 | position: fixed;
84 | bottom: 0;
85 | width: 100%;
86 | right: 20px;
87 | z-index: 1100;
88 | padding: 0;
89 | font-size: 15px;
90 | color: #0080ff;
91 | cursor: pointer;
92 | }
93 |
94 |
95 | /*-------------For chat Icon Ends------------*/
96 |
97 |
98 | /*-------------Inner Elements CSS---------------------------------------*/
99 |
100 | ul.chat-window {
101 | width: 350px;
102 | height: 400px;
103 | margin-top: 0;
104 | overflow-y: auto;
105 | padding: 20px;
106 | list-style: none;
107 | margin: 0;
108 | box-sizing: border-box;
109 | }
110 |
111 |
112 | /*.header {
113 | width: 340px;
114 | border-radius: 5px;
115 | padding: 5px;
116 | position: fixed;
117 | margin: 0;
118 | font-size: 15px;
119 | background-color: #a445b2;
120 | color: #ffffff;
121 | text-align: center;
122 | }*/
123 |
124 | .footer-chat {
125 | width: 350px;
126 | padding: 5px;
127 | position: fixed;
128 | text-align: center;
129 | color: #fff;
130 | margin-top: 370px;
131 | }
132 |
133 | ul.chat-window>li .text {
134 | box-sizing: border-box;
135 | margin-bottom: 10px;
136 | border-radius: 10px;
137 | padding: 10px 15px;
138 | line-height: 20px;
139 | }
140 |
141 | ul.chat-window>li.bot .text {
142 | background-color: #01bad8;
143 | color: #fff;
144 | float: left;
145 | }
146 |
147 | ul.chat-window>li {
148 | clear: both;
149 | max-width: 80%;
150 | box-sizing: border-box;
151 | white-space: pre-wrap;
152 | }
153 |
154 | ul.chat-window>li.user {
155 | float: right;
156 | }
157 |
158 | ul.chat-window>li.bot {
159 | float: left;
160 | }
161 |
162 | ul.chat-window>li.user .text {
163 | background-color: #ddd;
164 | }
165 |
166 | ul.chat-window>li.options {
167 | margin-top: 10px;
168 | list-style: none;
169 | max-width: 100%;
170 | width: 100%;
171 | float: left;
172 | text-align: right;
173 | }
174 |
175 | ul.chat-window>li.options>ul {
176 | margin-top: 0;
177 | padding: 0;
178 | list-style: none;
179 | margin-top: 10px;
180 | }
181 |
182 | ul.chat-window>li.options>ul>li {
183 | border-radius: 10px;
184 | padding: 5px 10px;
185 | border: 1px solid #01bad8;
186 | display: inline-block;
187 | cursor: pointer;
188 | margin-left: 10px;
189 | margin-bottom: 10px;
190 | }
191 |
192 | .typing-indicator {
193 | background-color: #E6E7ED;
194 | will-change: transform;
195 | width: auto;
196 | border-radius: 50px;
197 | padding: 10px;
198 | display: table;
199 | margin: 0;
200 | margin-left: 10px;
201 | position: relative;
202 | -webkit-animation: 2s bulge infinite ease-out;
203 | animation: 2s bulge infinite ease-out;
204 | }
205 |
206 | .typing-indicator::before,
207 | .typing-indicator::after {
208 | content: '';
209 | position: absolute;
210 | bottom: -2px;
211 | left: -2px;
212 | height: 20px;
213 | width: 20px;
214 | border-radius: 50%;
215 | background-color: #E6E7ED;
216 | }
217 |
218 | .typing-indicator::after {
219 | height: 10px;
220 | width: 10px;
221 | left: -10px;
222 | bottom: -10px;
223 | }
224 |
225 | .typing-indicator span {
226 | height: 8px;
227 | width: 8px;
228 | float: left;
229 | margin: 0 1px;
230 | background-color: #9E9EA1;
231 | display: block;
232 | border-radius: 50%;
233 | opacity: 0.4;
234 | }
235 |
236 | .typing-indicator span:nth-of-type(1) {
237 | -webkit-animation: 1s blink infinite 0.3333s;
238 | animation: 1s blink infinite 0.3333s;
239 | }
240 |
241 | .typing-indicator span:nth-of-type(2) {
242 | -webkit-animation: 1s blink infinite 0.6666s;
243 | animation: 1s blink infinite 0.6666s;
244 | }
245 |
246 | .typing-indicator span:nth-of-type(3) {
247 | -webkit-animation: 1s blink infinite 0.9999s;
248 | animation: 1s blink infinite 0.9999s;
249 | }
250 |
251 | @-webkit-keyframes blink {
252 | 50% {
253 | opacity: 1;
254 | }
255 | }
256 |
257 | @keyframes blink {
258 | 50% {
259 | opacity: 1;
260 | }
261 | }
262 |
263 | @-webkit-keyframes bulge {
264 | 50% {
265 | -webkit-transform: scale(1.05);
266 | transform: scale(1.05);
267 | }
268 | }
269 |
270 | @keyframes bulge {
271 | 50% {
272 | -webkit-transform: scale(1.05);
273 | transform: scale(1.05);
274 | }
275 | }
276 |
277 |
278 | /*---------------Inner Element CSS Ends-------------------------------------*/
279 |
280 |
281 | /*-----------First Page Form for user info----------------------*/
282 |
283 | #btn-submit {
284 | background-color: #a445b2;
285 | text-align: center;
286 | padding: 8px;
287 | border-radius: 15px;
288 | width: 95%;
289 | outline: none;
290 | border: none;
291 | margin-top: 20px;
292 | margin-left: 10px;
293 | margin-right: 10px;
294 | }
295 |
296 | #btn-submit:hover {
297 | background-color: #a445b2;
298 | text-align: center;
299 | padding: 8px;
300 | border-radius: 15px;
301 | width: 95%;
302 | outline: none;
303 | border: none;
304 | margin-left: 10px;
305 | margin-right: 10px;
306 | }
307 |
308 |
309 | /*---------------First Page Form for user info------------------------------------*/
310 |
311 |
312 | /*-----------Chat window scroll bar--------------*/
313 |
314 | .chat-window::-webkit-scrollbar {
315 | width: 0.3em;
316 | }
317 |
318 | .chat-window::-webkit-scrollbar-track {
319 | box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
320 | }
321 |
322 | .chat-window::-webkit-scrollbar-thumb {
323 | background-color: darkgrey;
324 | outline: 1px solid slategrey;
325 | }
326 |
327 |
328 | /*-------------Chat window scroll bar css Ends---------------*/
--------------------------------------------------------------------------------
/demo-data/data.json:
--------------------------------------------------------------------------------
1 | [{
2 | "id": 1,
3 | "text": "Hey, We are ChatConnect Tech Ltd.",
4 | "messageType": "Text",
5 | "imageUrl": "",
6 | "nextMessageId": 2,
7 | "option1": "",
8 | "option1_nextMessageId": "",
9 | "option2": "",
10 | "option2_nextMessageId": "",
11 | "option3": "",
12 | "option3_nextMessageId": "",
13 | "option4": "",
14 | "option4_nextMessageId": "",
15 | "option5": "",
16 | "option5_nextMessageId": "",
17 | "option6": "",
18 | "option6_nextMessageId": ""
19 | },
20 | {
21 | "id": 2,
22 | "text": "We are process oriented software company.",
23 | "messageType": "Text",
24 | "imageUrl": "",
25 | "nextMessageId": 3,
26 | "option1": "",
27 | "option1_nextMessageId": "",
28 | "option2": "",
29 | "option2_nextMessageId": "",
30 | "option3": "",
31 | "option3_nextMessageId": "",
32 | "option4": "",
33 | "option4_nextMessageId": "",
34 | "option5": "",
35 | "option5_nextMessageId": "",
36 | "option6": "",
37 | "option6_nextMessageId": ""
38 | },
39 | {
40 | "id": 3,
41 | "text": "Can we assist you?",
42 | "messageType": "Question",
43 | "imageUrl": "",
44 | "nextMessageId": "",
45 | "option1": "Yes",
46 | "option1_nextMessageId": 4,
47 | "option2": "No",
48 | "option2_nextMessageId": 30,
49 | "option3": "",
50 | "option3_nextMessageId": "",
51 | "option4": "",
52 | "option4_nextMessageId": "",
53 | "option5": "",
54 | "option5_nextMessageId": "",
55 | "option6": "",
56 | "option6_nextMessageId": ""
57 | },
58 | {
59 | "id": 4,
60 | "text": "What are you looking for?",
61 | "messageType": "Question",
62 | "imageUrl": "",
63 | "nextMessageId": "",
64 | "option1": "Services",
65 | "option1_nextMessageId": 5,
66 | "option2": "Collaboration",
67 | "option2_nextMessageId": 7,
68 | "option3": "Job",
69 | "option3_nextMessageId": 8,
70 | "option4": "Help Desk",
71 | "option4_nextMessageId": 10,
72 | "option5": "FAQ's",
73 | "option5_nextMessageId": 15
74 | },
75 | {
76 | "id": 5,
77 | "text": "Currently We Provide Following Listed Services",
78 | "messageType": "Question",
79 | "imageUrl": "",
80 | "nextMessageId": "",
81 | "option1": "Web Development",
82 | "option1_nextMessageId": 6,
83 | "option2": "Mobile App Development",
84 | "option2_nextMessageId": 6,
85 | "option3": "Product Development",
86 | "option3_nextMessageId": 6,
87 | "option4": "Digital Marketing",
88 | "option4_nextMessageId": 6,
89 | "option5": "SEO",
90 | "option5_nextMessageId": 6,
91 | "option6": "ORM",
92 | "option6_nextMessageId": 6
93 | },
94 | {
95 | "id": 6,
96 | "text": "Visit Our Website for more information",
97 | "messageType": "Text",
98 | "imageUrl": "https://www.chatconnect.io.in",
99 | "nextMessageId": 20,
100 | "option1": "",
101 | "option1_nextMessageId": ""
102 | },
103 | {
104 | "id": 20,
105 | "text": "Do you wish to continue?",
106 | "messageType": "Question",
107 | "imageUrl": "",
108 | "nextMessageId": "",
109 | "option1": "Yes",
110 | "option1_nextMessageId": 4,
111 | "option2": "No",
112 | "option2_nextMessageId": 30,
113 | "option3": "",
114 | "option3_nextMessageId": ""
115 | },
116 | {
117 | "id": 7,
118 | "text": "contact us at sales@chatconnect.io.in",
119 | "messageType": "Text",
120 | "imageUrl": "https://www.chatconnect.io.in",
121 | "nextMessageId": 20,
122 | "option1": "",
123 | "option1_nextMessageId": ""
124 | },
125 | {
126 | "id": 8,
127 | "text": "Currently we have following job openings.",
128 | "messageType": "Question",
129 | "imageUrl": "",
130 | "nextMessageId": "",
131 | "option1": "Traine Software Engineer",
132 | "option1_nextMessageId": 9,
133 | "option2": "Software Engineer",
134 | "option2_nextMessageId": 9,
135 | "option3": "Graphic Designer",
136 | "option3_nextMessageId": 9,
137 | "option4": "Digital Marketing Expert",
138 | "option4_nextMessageId": 9
139 | },
140 | {
141 | "id": 9,
142 | "text": "Send your profiles at career@chatconnect.io.in",
143 | "messageType": "Text",
144 | "imageUrl": "",
145 | "nextMessageId": 20,
146 | "option1": "",
147 | "option1_nextMessageId": ""
148 | },
149 | {
150 | "id": 10,
151 | "text": "For any help, please contact us at customer-care@chatconnect.io.in",
152 | "messageType": "Text",
153 | "imageUrl": "",
154 | "nextMessageId": 20,
155 | "option1": "",
156 | "option1_nextMessageId": "",
157 | "option2": "",
158 | "option2_nextMessageId": ""
159 | },
160 | {
161 | "id": 11,
162 | "text": "From our FAQ's",
163 | "messageType": "Question",
164 | "imageUrl": "",
165 | "nextMessageId": "",
166 | "option1": "How can we use your services?",
167 | "option1_nextMessageId": 12,
168 | "option2": "Can we contribute to your project?",
169 | "option2_nextMessageId": 13,
170 | "option3": "Who is the creator of Chat Connect?",
171 | "option3_nextMessageId": 14,
172 | "option4": "",
173 | "option4_nextMessageId": "",
174 | "option5": "",
175 | "option5_nextMessageId": ""
176 | },
177 | {
178 | "id": 12,
179 | "text": "Just Signup and avail the service for free.",
180 | "messageType": "Text",
181 | "imageUrl": "https://www.chatconnect.io.in",
182 | "nextMessageId": 20,
183 | "option1": "",
184 | "option1_nextMessageId": "",
185 | "option2": "",
186 | "option2_nextMessageId": ""
187 | },
188 | {
189 | "id": 13,
190 | "text": "For contributions check out our open issues.",
191 | "messageType": "Text",
192 | "imageUrl": "https://github.com/Rutikab12/Chatbot-Web-Application",
193 | "nextMessageId": 20,
194 | "option1": "",
195 | "option1_nextMessageId": "",
196 | "option2": "",
197 | "option2_nextMessageId": ""
198 | },
199 | {
200 | "id": 14,
201 | "text": "We are team of ChatConnect.",
202 | "messageType": "Question",
203 | "imageUrl": "",
204 | "nextMessageId": "",
205 | "option1": "Rutik Bhoyar",
206 | "option1_nextMessageId": 15,
207 | "option2": "Pranay Haramwar",
208 | "option2_nextMessageId": 15,
209 | "option3": "Dipak Vaidya",
210 | "option3_nextMessageId": 15,
211 | "option4": "Yogesh Dongarwar",
212 | "option4_nextMessageId": 15
213 | },
214 | {
215 | "id": 15,
216 | "text": "We are students of RCERT, Chandrapur, India",
217 | "messageType": "Text",
218 | "imageUrl": "",
219 | "nextMessageId": 20,
220 | "option1": "",
221 | "option1_nextMessageId": "",
222 | "option2": "",
223 | "option2_nextMessageId": ""
224 | },
225 | {
226 | "id": 30,
227 | "text": "Thank your for visiting us.",
228 | "messageType": "Text",
229 | "imageUrl": "",
230 | "nextMessageId": 0,
231 | "option1": "",
232 | "option1_nextMessageId": "",
233 | "option2": "",
234 | "option2_nextMessageId": ""
235 | }
236 | ]
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ChatConnect
2 |
3 |
4 | # Please Download the project to use and Run it in any code editor you like. No need to signup or login. Directly head to the dashboard/adminpanel.html to create chtbot in your local system. Sorry for the inconvenience.
5 |
6 |
7 |
8 | We are team ChatConnect. This is a Final Year project at Rajiv Gandhi College of Engineering Research and Technology, Chandrapur, Maharashtra.
9 | This is a open source project, which helps user to create simple conversational chatbot using JSON format. We would love to welcome contributions from
10 | peers worldwide to make this project more secure, reliable, advanced and easy to use.
11 |
12 |
13 | Below are the details about the project.
14 |
15 |
16 | # How to use this project?
17 |
18 | Let's not make it complex from the very start. We will divide it into steps as follows:
19 |
20 | - Go to our official webiste first.
21 | - Explore the website for your how's and what 🤔.
22 | - Here you can have a demo of chatbot , you will be getting after all procedure. Window is popped-up when you load the website.
23 | - Now head towards signup/login feature.
24 | - Signup and then login to get access to our admin panel. 🛠️
25 |
26 | That's it for this section. Next steps on how to use admin panel.....
27 |
28 |
29 |
30 |
31 | # How to use admin panel for creating the chatbot?
32 |
33 | So once you did all necessary steps from the above section. Well, you are now good to go for next steps 🥳.
34 |
35 | - To use admin panel , you need to be logged in.
36 | - You will be automatically, redireted to profile section of dashboard. ➡️
37 | - Here you can see following type of boxes to be filled.
38 |
39 | - Main purpose of these fields is to gather the business details 🔂 of the user, who is going to make the chatbot 📇. If any user don't have any business (🧑🏽)💼 and is a student (🧑🏾💻) then he can add college details or project details accordingly.
40 | - This gathering of details is all about the future enhancements in the project for business profile section..🔜
41 | - Here the first section is Business Details and other one is Business User Role , what does it define?
42 |
43 |
44 | Business Details
45 | Business User Role
46 |
47 |
48 | This section defines details of the business or project the user is going to integrate this chatbot on.
49 | This section defines the person who is going to build and handle this chatbot on behalf of business or project as admin or employee.
50 |
51 |
52 |
53 |
54 |
55 | # Now let's go to next section Information 📌
56 | - In this section , all the necessary steps are explained with the help of steps, as follows...
57 | ▶ Quick links for quick navigation, at the top of the section.
58 | ▶ Steps to enter data for chatbot in JSON format.
59 | ▶ Explanation about each terms included JSON format, for easy understanding.
60 |
61 | ▶ Again for better understanding and live genration and integration of chatbot , please see this [Live Demo](#)
62 |
63 |
64 |
65 | # Now move to next section Generate 📌
66 | - In this section you will find a Notepad like editor, where you have to follow below steps.
67 | ▶ Start writing the data for chatbot, as displayed on **example template** in **Information Section**.
68 | ▶ For simple generation, you can use our **pre-designed JSON data template**. Copy and Paste it in editor and start editing accordingly.
69 | ▶ To copy and edit the demo data file, [Copy & Paste Me](https://github.com/Rutikab12/Chatbot-Web-Application/blob/main/demo-data/data.json)
70 | ▶ After writing data, follow screenshots you see below
71 |
72 |
73 | Step-1: Copy the sample data from GitHub.
74 | Step-2: Paste the data in editor, given in admin panel.
75 |
76 |
77 |
78 |
79 |
80 |
81 | Step-3: Edit the data according to your need.
82 | Step-4: Copy all the edited data, Open Notepad and paste the data.
83 |
84 |
85 |
86 |
87 |
88 |
89 | Step-5: Save the file as data.json
90 | Step-6: Now the next step is integration
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 | # Now let's integrate the chatbot on the website, **Integrate Section** 📌
101 |
102 |
103 | Step-1: Download Zip Folder from here.
104 | Step-2: Unzip it, and paste the two folders **demo-data** and **src** in your project folder.
105 |
106 |
107 |
108 |
109 |
110 |
111 | Step-2: Unzip it, and paste the two folders **demo-data** and **src** in your project folder.
112 | Step-3: Copy the **demo** and **src** folder.
113 |
114 |
115 |
116 |
117 |
118 |
119 | Step-4: Paste those two folder in project folder.
120 | Step-5: Now copy the **data.json** file and paste in inside **demo-data** folder.
121 |
122 |
123 |
124 |
125 |
126 |
127 | Step-6: Now copy link tags,paste it inside tag of the page, where you want to integrate chatbot widget.
128 | Step-7: Now copy script tags,paste it inside tag of the page, where you want to integrate chatbot widget.
129 |
130 |
131 |
132 |
133 |
134 |
135 | Step-8: Now refresh & run the page where you have place the above tags.
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 | ```
147 |
148 |
149 | ```
150 |
151 |
152 |
153 | ```
154 |
155 |
156 |
167 | ```
168 |
169 |
170 |
171 | # Tech Stack Behind this Project
172 | - HTML,CSS, Bootstrap
173 | - JavaScript, jQuery
174 | - PHP,etc.
175 |
176 |
177 |
178 |
179 | # People Behind this Project
180 | 🧑🏼💻 **Rutik Bhoyar** | [LinkedIn](https://www.linkedin.com/in/rutik-bhoyar-5b67341b0/)
181 | 🧑🏼💻 **Pranay Haramwar** |
182 | 🧑🏼💻 **Dipak Vaidya** |
183 | 🧑🏼💻 **Yogesh Dongarwar** |
184 |
185 | # Future Scope
186 | 🔓 Make it available for open source contributors.
187 | 🔓 Secure backend modules, Database and additon of authentication and authorization.
188 | 🔓 Enhance UI of product website.
189 | 🔓 Enhance UI of Chatbot.
190 | 🔓 Validation of data inserted for chatbot.
191 | 🔓 Admin Dashboard validation and UI enhancements.
192 |
193 |
194 |
195 | **Note: All images,cdn,required libraries used in this project are open-sourced and do not violate their terms and regulations**
196 |
197 | # Thank You !
198 |
199 |
200 |
201 |
--------------------------------------------------------------------------------
/dashboard/generate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Information
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
ChatConnect
31 |
32 |
33 |
34 |
53 |
54 |
55 |
56 |
57 |
137 |
138 |
139 |
140 |
141 |
142 |
Dashboard
143 |
144 |
145 |
146 |
147 |
148 |
View Sample JSON File
149 |
153 |
154 |
155 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
205 |
206 |
207 |
--------------------------------------------------------------------------------
/dashboard/integrate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Information
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
ChatConnect
30 |
31 |
32 |
33 |
52 |
53 |
54 |
55 |
56 |
136 |
137 |
138 |
139 |
140 |
141 |
Integration
142 |
143 |
144 |
145 |
146 |
147 |
Primary Card
148 |
152 |
153 |
154 |
163 |
164 |
165 |
166 |
167 |
168 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
181 |
182 |
183 |
191 |
192 |
For more detailed explanation click here regarding integration.
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
--------------------------------------------------------------------------------
/dashboard/info.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Information
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
ChatConnect
30 |
31 |
32 |
33 |
52 |
53 |
54 |
55 |
56 |
136 |
137 |
138 |
139 |
140 |
141 |
Dashboard
142 |
143 |
144 |
145 |
146 |
147 |
View Sample JSON File
148 |
152 |
153 |
154 |
155 |
156 |
Go to Sample Data Template
157 |
161 |
162 |
163 |
164 |
165 |
Steps to Enter Data for Chatbot
166 |
170 |
171 |
172 |
173 |
174 |
GitHub Repository
175 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
--------------------------------------------------------------------------------
/log-in.html:
--------------------------------------------------------------------------------
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 | Log In - ChatConnect
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
ChatConnect
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
78 |
79 | Log in
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
103 |
104 |
105 |
106 |
107 |
108 |
142 |
143 |
144 |
145 |
146 |
147 |
197 |
198 |
199 |
200 |
201 |
202 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
250 |
251 |
252 |
--------------------------------------------------------------------------------
/sign-up.html:
--------------------------------------------------------------------------------
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 | Sign Up - ChatConnect
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
ChatConnect
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
78 |
79 | Log in
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
103 |
104 |
105 |
106 |
107 |
108 |
150 |
151 |
152 |
153 |
154 |
155 |
205 |
206 |
207 |
208 |
209 |
210 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
258 |
259 |
260 |
--------------------------------------------------------------------------------
/images/after-login image1.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/dashboard/adminpanel.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | ChatConnect Admin Panel
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
ChatConnect
30 |
31 |
32 |
33 |
54 |
55 |
56 |
57 |
58 |
138 |
139 |
140 |
141 |
142 |
143 |
Dashboard
144 |
145 |
146 |
184 |
257 |
258 |
259 |
260 |
261 |
264 |
265 |
266 |
267 |
268 | Sr No
269 | Business Name
270 | Business Address
271 | Business Email
272 | Business Phone
273 | Business City
274 | Business State
275 | Business Country
276 | Business ZipCode
277 | Business Type
278 | Action
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
301 |
302 |
303 |
304 |
305 |
306 |
--------------------------------------------------------------------------------
/images/register-detail img1.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/css/swiper.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Swiper 4.4.6
3 | * Most modern mobile touch slider and framework with hardware accelerated transitions
4 | * http://www.idangero.us/swiper/
5 | *
6 | * Copyright 2014-2018 Vladimir Kharlampidi
7 | *
8 | * Released under the MIT License
9 | *
10 | * Released on: December 19, 2018
11 | */
12 | .swiper-container {
13 | margin: 0 auto;
14 | position: relative;
15 | overflow: hidden;
16 | list-style: none;
17 | padding: 0;
18 | /* Fix of Webkit flickering */
19 | z-index: 1;
20 | }
21 | .swiper-container-no-flexbox .swiper-slide {
22 | float: left;
23 | }
24 | .swiper-container-vertical > .swiper-wrapper {
25 | -webkit-box-orient: vertical;
26 | -webkit-box-direction: normal;
27 | -webkit-flex-direction: column;
28 | -ms-flex-direction: column;
29 | flex-direction: column;
30 | }
31 | .swiper-wrapper {
32 | position: relative;
33 | width: 100%;
34 | height: 100%;
35 | z-index: 1;
36 | display: -webkit-box;
37 | display: -webkit-flex;
38 | display: -ms-flexbox;
39 | display: flex;
40 | -webkit-transition-property: -webkit-transform;
41 | transition-property: -webkit-transform;
42 | -o-transition-property: transform;
43 | transition-property: transform;
44 | transition-property: transform, -webkit-transform;
45 | -webkit-box-sizing: content-box;
46 | box-sizing: content-box;
47 | }
48 | .swiper-container-android .swiper-slide,
49 | .swiper-wrapper {
50 | -webkit-transform: translate3d(0px, 0, 0);
51 | transform: translate3d(0px, 0, 0);
52 | }
53 | .swiper-container-multirow > .swiper-wrapper {
54 | -webkit-flex-wrap: wrap;
55 | -ms-flex-wrap: wrap;
56 | flex-wrap: wrap;
57 | }
58 | .swiper-container-free-mode > .swiper-wrapper {
59 | -webkit-transition-timing-function: ease-out;
60 | -o-transition-timing-function: ease-out;
61 | transition-timing-function: ease-out;
62 | margin: 0 auto;
63 | }
64 | .swiper-slide {
65 | -webkit-flex-shrink: 0;
66 | -ms-flex-negative: 0;
67 | flex-shrink: 0;
68 | width: 100%;
69 | height: 100%;
70 | position: relative;
71 | -webkit-transition-property: -webkit-transform;
72 | transition-property: -webkit-transform;
73 | -o-transition-property: transform;
74 | transition-property: transform;
75 | transition-property: transform, -webkit-transform;
76 | }
77 | .swiper-slide-invisible-blank {
78 | visibility: hidden;
79 | }
80 | /* Auto Height */
81 | .swiper-container-autoheight,
82 | .swiper-container-autoheight .swiper-slide {
83 | height: auto;
84 | }
85 | .swiper-container-autoheight .swiper-wrapper {
86 | -webkit-box-align: start;
87 | -webkit-align-items: flex-start;
88 | -ms-flex-align: start;
89 | align-items: flex-start;
90 | -webkit-transition-property: height, -webkit-transform;
91 | transition-property: height, -webkit-transform;
92 | -o-transition-property: transform, height;
93 | transition-property: transform, height;
94 | transition-property: transform, height, -webkit-transform;
95 | }
96 | /* 3D Effects */
97 | .swiper-container-3d {
98 | -webkit-perspective: 1200px;
99 | perspective: 1200px;
100 | }
101 | .swiper-container-3d .swiper-wrapper,
102 | .swiper-container-3d .swiper-slide,
103 | .swiper-container-3d .swiper-slide-shadow-left,
104 | .swiper-container-3d .swiper-slide-shadow-right,
105 | .swiper-container-3d .swiper-slide-shadow-top,
106 | .swiper-container-3d .swiper-slide-shadow-bottom,
107 | .swiper-container-3d .swiper-cube-shadow {
108 | -webkit-transform-style: preserve-3d;
109 | transform-style: preserve-3d;
110 | }
111 | .swiper-container-3d .swiper-slide-shadow-left,
112 | .swiper-container-3d .swiper-slide-shadow-right,
113 | .swiper-container-3d .swiper-slide-shadow-top,
114 | .swiper-container-3d .swiper-slide-shadow-bottom {
115 | position: absolute;
116 | left: 0;
117 | top: 0;
118 | width: 100%;
119 | height: 100%;
120 | pointer-events: none;
121 | z-index: 10;
122 | }
123 | .swiper-container-3d .swiper-slide-shadow-left {
124 | background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
125 | background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
126 | background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
127 | background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
128 | }
129 | .swiper-container-3d .swiper-slide-shadow-right {
130 | background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
131 | background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
132 | background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
133 | background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
134 | }
135 | .swiper-container-3d .swiper-slide-shadow-top {
136 | background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
137 | background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
138 | background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
139 | background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
140 | }
141 | .swiper-container-3d .swiper-slide-shadow-bottom {
142 | background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
143 | background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
144 | background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
145 | background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
146 | }
147 | /* IE10 Windows Phone 8 Fixes */
148 | .swiper-container-wp8-horizontal,
149 | .swiper-container-wp8-horizontal > .swiper-wrapper {
150 | -ms-touch-action: pan-y;
151 | touch-action: pan-y;
152 | }
153 | .swiper-container-wp8-vertical,
154 | .swiper-container-wp8-vertical > .swiper-wrapper {
155 | -ms-touch-action: pan-x;
156 | touch-action: pan-x;
157 | }
158 | .swiper-button-prev,
159 | .swiper-button-next {
160 | position: absolute;
161 | top: 50%;
162 | width: 27px;
163 | height: 44px;
164 | margin-top: -22px;
165 | z-index: 10;
166 | cursor: pointer;
167 | background-size: 27px 44px;
168 | background-position: center;
169 | background-repeat: no-repeat;
170 | }
171 | .swiper-button-prev.swiper-button-disabled,
172 | .swiper-button-next.swiper-button-disabled {
173 | opacity: 0.35;
174 | cursor: auto;
175 | pointer-events: none;
176 | }
177 | .swiper-button-prev,
178 | .swiper-container-rtl .swiper-button-next {
179 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
180 | left: 10px;
181 | right: auto;
182 | }
183 | .swiper-button-next,
184 | .swiper-container-rtl .swiper-button-prev {
185 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
186 | right: 10px;
187 | left: auto;
188 | }
189 | .swiper-button-prev.swiper-button-white,
190 | .swiper-container-rtl .swiper-button-next.swiper-button-white {
191 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
192 | }
193 | .swiper-button-next.swiper-button-white,
194 | .swiper-container-rtl .swiper-button-prev.swiper-button-white {
195 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
196 | }
197 | .swiper-button-prev.swiper-button-black,
198 | .swiper-container-rtl .swiper-button-next.swiper-button-black {
199 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
200 | }
201 | .swiper-button-next.swiper-button-black,
202 | .swiper-container-rtl .swiper-button-prev.swiper-button-black {
203 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
204 | }
205 | .swiper-button-lock {
206 | display: none;
207 | }
208 | .swiper-pagination {
209 | position: absolute;
210 | text-align: center;
211 | -webkit-transition: 300ms opacity;
212 | -o-transition: 300ms opacity;
213 | transition: 300ms opacity;
214 | -webkit-transform: translate3d(0, 0, 0);
215 | transform: translate3d(0, 0, 0);
216 | z-index: 10;
217 | }
218 | .swiper-pagination.swiper-pagination-hidden {
219 | opacity: 0;
220 | }
221 | /* Common Styles */
222 | .swiper-pagination-fraction,
223 | .swiper-pagination-custom,
224 | .swiper-container-horizontal > .swiper-pagination-bullets {
225 | bottom: 10px;
226 | left: 0;
227 | width: 100%;
228 | }
229 | /* Bullets */
230 | .swiper-pagination-bullets-dynamic {
231 | overflow: hidden;
232 | font-size: 0;
233 | }
234 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
235 | -webkit-transform: scale(0.33);
236 | -ms-transform: scale(0.33);
237 | transform: scale(0.33);
238 | position: relative;
239 | }
240 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
241 | -webkit-transform: scale(1);
242 | -ms-transform: scale(1);
243 | transform: scale(1);
244 | }
245 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
246 | -webkit-transform: scale(1);
247 | -ms-transform: scale(1);
248 | transform: scale(1);
249 | }
250 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
251 | -webkit-transform: scale(0.66);
252 | -ms-transform: scale(0.66);
253 | transform: scale(0.66);
254 | }
255 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
256 | -webkit-transform: scale(0.33);
257 | -ms-transform: scale(0.33);
258 | transform: scale(0.33);
259 | }
260 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
261 | -webkit-transform: scale(0.66);
262 | -ms-transform: scale(0.66);
263 | transform: scale(0.66);
264 | }
265 | .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
266 | -webkit-transform: scale(0.33);
267 | -ms-transform: scale(0.33);
268 | transform: scale(0.33);
269 | }
270 | .swiper-pagination-bullet {
271 | width: 8px;
272 | height: 8px;
273 | display: inline-block;
274 | border-radius: 100%;
275 | background: #000;
276 | opacity: 0.2;
277 | }
278 | button.swiper-pagination-bullet {
279 | border: none;
280 | margin: 0;
281 | padding: 0;
282 | -webkit-box-shadow: none;
283 | box-shadow: none;
284 | -webkit-appearance: none;
285 | -moz-appearance: none;
286 | appearance: none;
287 | }
288 | .swiper-pagination-clickable .swiper-pagination-bullet {
289 | cursor: pointer;
290 | }
291 | .swiper-pagination-bullet-active {
292 | opacity: 1;
293 | background: #007aff;
294 | }
295 | .swiper-container-vertical > .swiper-pagination-bullets {
296 | right: 10px;
297 | top: 50%;
298 | -webkit-transform: translate3d(0px, -50%, 0);
299 | transform: translate3d(0px, -50%, 0);
300 | }
301 | .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
302 | margin: 6px 0;
303 | display: block;
304 | }
305 | .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
306 | top: 50%;
307 | -webkit-transform: translateY(-50%);
308 | -ms-transform: translateY(-50%);
309 | transform: translateY(-50%);
310 | width: 8px;
311 | }
312 | .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
313 | display: inline-block;
314 | -webkit-transition: 200ms top, 200ms -webkit-transform;
315 | transition: 200ms top, 200ms -webkit-transform;
316 | -o-transition: 200ms transform, 200ms top;
317 | transition: 200ms transform, 200ms top;
318 | transition: 200ms transform, 200ms top, 200ms -webkit-transform;
319 | }
320 | .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
321 | margin: 0 4px;
322 | }
323 | .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
324 | left: 50%;
325 | -webkit-transform: translateX(-50%);
326 | -ms-transform: translateX(-50%);
327 | transform: translateX(-50%);
328 | white-space: nowrap;
329 | }
330 | .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
331 | -webkit-transition: 200ms left, 200ms -webkit-transform;
332 | transition: 200ms left, 200ms -webkit-transform;
333 | -o-transition: 200ms transform, 200ms left;
334 | transition: 200ms transform, 200ms left;
335 | transition: 200ms transform, 200ms left, 200ms -webkit-transform;
336 | }
337 | .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
338 | -webkit-transition: 200ms right, 200ms -webkit-transform;
339 | transition: 200ms right, 200ms -webkit-transform;
340 | -o-transition: 200ms transform, 200ms right;
341 | transition: 200ms transform, 200ms right;
342 | transition: 200ms transform, 200ms right, 200ms -webkit-transform;
343 | }
344 | /* Progress */
345 | .swiper-pagination-progressbar {
346 | background: rgba(0, 0, 0, 0.25);
347 | position: absolute;
348 | }
349 | .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
350 | background: #007aff;
351 | position: absolute;
352 | left: 0;
353 | top: 0;
354 | width: 100%;
355 | height: 100%;
356 | -webkit-transform: scale(0);
357 | -ms-transform: scale(0);
358 | transform: scale(0);
359 | -webkit-transform-origin: left top;
360 | -ms-transform-origin: left top;
361 | transform-origin: left top;
362 | }
363 | .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
364 | -webkit-transform-origin: right top;
365 | -ms-transform-origin: right top;
366 | transform-origin: right top;
367 | }
368 | .swiper-container-horizontal > .swiper-pagination-progressbar,
369 | .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
370 | width: 100%;
371 | height: 4px;
372 | left: 0;
373 | top: 0;
374 | }
375 | .swiper-container-vertical > .swiper-pagination-progressbar,
376 | .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
377 | width: 4px;
378 | height: 100%;
379 | left: 0;
380 | top: 0;
381 | }
382 | .swiper-pagination-white .swiper-pagination-bullet-active {
383 | background: #ffffff;
384 | }
385 | .swiper-pagination-progressbar.swiper-pagination-white {
386 | background: rgba(255, 255, 255, 0.25);
387 | }
388 | .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
389 | background: #ffffff;
390 | }
391 | .swiper-pagination-black .swiper-pagination-bullet-active {
392 | background: #000000;
393 | }
394 | .swiper-pagination-progressbar.swiper-pagination-black {
395 | background: rgba(0, 0, 0, 0.25);
396 | }
397 | .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
398 | background: #000000;
399 | }
400 | .swiper-pagination-lock {
401 | display: none;
402 | }
403 | /* Scrollbar */
404 | .swiper-scrollbar {
405 | border-radius: 10px;
406 | position: relative;
407 | -ms-touch-action: none;
408 | background: rgba(0, 0, 0, 0.1);
409 | }
410 | .swiper-container-horizontal > .swiper-scrollbar {
411 | position: absolute;
412 | left: 1%;
413 | bottom: 3px;
414 | z-index: 50;
415 | height: 5px;
416 | width: 98%;
417 | }
418 | .swiper-container-vertical > .swiper-scrollbar {
419 | position: absolute;
420 | right: 3px;
421 | top: 1%;
422 | z-index: 50;
423 | width: 5px;
424 | height: 98%;
425 | }
426 | .swiper-scrollbar-drag {
427 | height: 100%;
428 | width: 100%;
429 | position: relative;
430 | background: rgba(0, 0, 0, 0.5);
431 | border-radius: 10px;
432 | left: 0;
433 | top: 0;
434 | }
435 | .swiper-scrollbar-cursor-drag {
436 | cursor: move;
437 | }
438 | .swiper-scrollbar-lock {
439 | display: none;
440 | }
441 | .swiper-zoom-container {
442 | width: 100%;
443 | height: 100%;
444 | display: -webkit-box;
445 | display: -webkit-flex;
446 | display: -ms-flexbox;
447 | display: flex;
448 | -webkit-box-pack: center;
449 | -webkit-justify-content: center;
450 | -ms-flex-pack: center;
451 | justify-content: center;
452 | -webkit-box-align: center;
453 | -webkit-align-items: center;
454 | -ms-flex-align: center;
455 | align-items: center;
456 | text-align: center;
457 | }
458 | .swiper-zoom-container > img,
459 | .swiper-zoom-container > svg,
460 | .swiper-zoom-container > canvas {
461 | max-width: 100%;
462 | max-height: 100%;
463 | -o-object-fit: contain;
464 | object-fit: contain;
465 | }
466 | .swiper-slide-zoomed {
467 | cursor: move;
468 | }
469 | /* Preloader */
470 | .swiper-lazy-preloader {
471 | width: 42px;
472 | height: 42px;
473 | position: absolute;
474 | left: 50%;
475 | top: 50%;
476 | margin-left: -21px;
477 | margin-top: -21px;
478 | z-index: 10;
479 | -webkit-transform-origin: 50%;
480 | -ms-transform-origin: 50%;
481 | transform-origin: 50%;
482 | -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
483 | animation: swiper-preloader-spin 1s steps(12, end) infinite;
484 | }
485 | .swiper-lazy-preloader:after {
486 | display: block;
487 | content: '';
488 | width: 100%;
489 | height: 100%;
490 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
491 | background-position: 50%;
492 | background-size: 100%;
493 | background-repeat: no-repeat;
494 | }
495 | .swiper-lazy-preloader-white:after {
496 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
497 | }
498 | @-webkit-keyframes swiper-preloader-spin {
499 | 100% {
500 | -webkit-transform: rotate(360deg);
501 | transform: rotate(360deg);
502 | }
503 | }
504 | @keyframes swiper-preloader-spin {
505 | 100% {
506 | -webkit-transform: rotate(360deg);
507 | transform: rotate(360deg);
508 | }
509 | }
510 | /* a11y */
511 | .swiper-container .swiper-notification {
512 | position: absolute;
513 | left: 0;
514 | top: 0;
515 | pointer-events: none;
516 | opacity: 0;
517 | z-index: -1000;
518 | }
519 | .swiper-container-fade.swiper-container-free-mode .swiper-slide {
520 | -webkit-transition-timing-function: ease-out;
521 | -o-transition-timing-function: ease-out;
522 | transition-timing-function: ease-out;
523 | }
524 | .swiper-container-fade .swiper-slide {
525 | pointer-events: none;
526 | -webkit-transition-property: opacity;
527 | -o-transition-property: opacity;
528 | transition-property: opacity;
529 | }
530 | .swiper-container-fade .swiper-slide .swiper-slide {
531 | pointer-events: none;
532 | }
533 | .swiper-container-fade .swiper-slide-active,
534 | .swiper-container-fade .swiper-slide-active .swiper-slide-active {
535 | pointer-events: auto;
536 | }
537 | .swiper-container-cube {
538 | overflow: visible;
539 | }
540 | .swiper-container-cube .swiper-slide {
541 | pointer-events: none;
542 | -webkit-backface-visibility: hidden;
543 | backface-visibility: hidden;
544 | z-index: 1;
545 | visibility: hidden;
546 | -webkit-transform-origin: 0 0;
547 | -ms-transform-origin: 0 0;
548 | transform-origin: 0 0;
549 | width: 100%;
550 | height: 100%;
551 | }
552 | .swiper-container-cube .swiper-slide .swiper-slide {
553 | pointer-events: none;
554 | }
555 | .swiper-container-cube.swiper-container-rtl .swiper-slide {
556 | -webkit-transform-origin: 100% 0;
557 | -ms-transform-origin: 100% 0;
558 | transform-origin: 100% 0;
559 | }
560 | .swiper-container-cube .swiper-slide-active,
561 | .swiper-container-cube .swiper-slide-active .swiper-slide-active {
562 | pointer-events: auto;
563 | }
564 | .swiper-container-cube .swiper-slide-active,
565 | .swiper-container-cube .swiper-slide-next,
566 | .swiper-container-cube .swiper-slide-prev,
567 | .swiper-container-cube .swiper-slide-next + .swiper-slide {
568 | pointer-events: auto;
569 | visibility: visible;
570 | }
571 | .swiper-container-cube .swiper-slide-shadow-top,
572 | .swiper-container-cube .swiper-slide-shadow-bottom,
573 | .swiper-container-cube .swiper-slide-shadow-left,
574 | .swiper-container-cube .swiper-slide-shadow-right {
575 | z-index: 0;
576 | -webkit-backface-visibility: hidden;
577 | backface-visibility: hidden;
578 | }
579 | .swiper-container-cube .swiper-cube-shadow {
580 | position: absolute;
581 | left: 0;
582 | bottom: 0px;
583 | width: 100%;
584 | height: 100%;
585 | background: #000;
586 | opacity: 0.6;
587 | -webkit-filter: blur(50px);
588 | filter: blur(50px);
589 | z-index: 0;
590 | }
591 | .swiper-container-flip {
592 | overflow: visible;
593 | }
594 | .swiper-container-flip .swiper-slide {
595 | pointer-events: none;
596 | -webkit-backface-visibility: hidden;
597 | backface-visibility: hidden;
598 | z-index: 1;
599 | }
600 | .swiper-container-flip .swiper-slide .swiper-slide {
601 | pointer-events: none;
602 | }
603 | .swiper-container-flip .swiper-slide-active,
604 | .swiper-container-flip .swiper-slide-active .swiper-slide-active {
605 | pointer-events: auto;
606 | }
607 | .swiper-container-flip .swiper-slide-shadow-top,
608 | .swiper-container-flip .swiper-slide-shadow-bottom,
609 | .swiper-container-flip .swiper-slide-shadow-left,
610 | .swiper-container-flip .swiper-slide-shadow-right {
611 | z-index: 0;
612 | -webkit-backface-visibility: hidden;
613 | backface-visibility: hidden;
614 | }
615 | .swiper-container-coverflow .swiper-wrapper {
616 | /* Windows 8 IE 10 fix */
617 | -ms-perspective: 1200px;
618 | }
619 |
--------------------------------------------------------------------------------