- ID de l'analyse :
- 27e918ab-71ef-4fa8-95c5-341f8930c845Terminée
- URL soumise :
- https://caainternetservice.com/index.php
- Fin du rapport :
Liens : 0 trouvé(s)
Liens sortants identifiés à partir de la page
Variables JavaScript : 19 trouvée(s)
Les variables JavaScript globales chargées dans l'objet fenêtre d'une page sont des variables déclarées en dehors des fonctions et accessibles depuis n'importe quel endroit du code au sein du champ d'application actuel
Nom | Type |
---|---|
onbeforetoggle | object |
documentPictureInPicture | object |
onscrollend | object |
sendMessage | function |
respondToUser | function |
displayBotResponse | function |
$ | function |
jQuery | function |
uidEvent | number |
bootstrap | object |
Messages de journal de console : 9 trouvé(s)
Messages consignés dans la console web
Type | Catégorie | Enregistrement |
---|---|---|
error | network |
|
warning | dom |
|
warning | dom |
|
verbose | dom |
|
verbose | dom |
|
verbose | dom |
|
verbose | dom |
|
verbose | dom |
|
verbose | dom |
|
HTML
Le corps HTML de la page en données brutes
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CAA Internet Services</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="CSS/style.css" rel="stylesheet">
<link rel="icon" href="logo_fab.jpg" type="image/jpg">
<style>.swal2-popup.swal2-toast{box-sizing:border-box;grid-column:1/4 !important;grid-row:1/4 !important;grid-template-columns:min-content auto min-content;padding:1em;overflow-y:hidden;background:#fff;box-shadow:0 0 1px rgba(0,0,0,.075),0 1px 2px rgba(0,0,0,.075),1px 2px 4px rgba(0,0,0,.075),1px 3px 8px rgba(0,0,0,.075),2px 4px 16px rgba(0,0,0,.075);pointer-events:all}.swal2-popup.swal2-toast>*{grid-column:2}.swal2-popup.swal2-toast .swal2-title{margin:.5em 1em;padding:0;font-size:1em;text-align:initial}.swal2-popup.swal2-toast .swal2-loading{justify-content:center}.swal2-popup.swal2-toast .swal2-input{height:2em;margin:.5em;font-size:1em}.swal2-popup.swal2-toast .swal2-validation-message{font-size:1em}.swal2-popup.swal2-toast .swal2-footer{margin:.5em 0 0;padding:.5em 0 0;font-size:.8em}.swal2-popup.swal2-toast .swal2-close{grid-column:3/3;grid-row:1/99;align-self:center;width:.8em;height:.8em;margin:0;font-size:2em}.swal2-popup.swal2-toast .swal2-html-container{margin:.5em 1em;padding:0;overflow:initial;font-size:1em;text-align:initial}.swal2-popup.swal2-toast .swal2-html-container:empty{padding:0}.swal2-popup.swal2-toast .swal2-loader{grid-column:1;grid-row:1/99;align-self:center;width:2em;height:2em;margin:.25em}.swal2-popup.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;width:2em;min-width:2em;height:2em;margin:0 .5em 0 0}.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content{display:flex;align-items:center;font-size:1.8em;font-weight:bold}.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring{width:2em;height:2em}.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line]{top:.875em;width:1.375em}.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left]{left:.3125em}.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right]{right:.3125em}.swal2-popup.swal2-toast .swal2-actions{justify-content:flex-start;height:auto;margin:0;margin-top:.5em;padding:0 .5em}.swal2-popup.swal2-toast .swal2-styled{margin:.25em .5em;padding:.4em .6em;font-size:1em}.swal2-popup.swal2-toast .swal2-success{border-color:#a5dc86}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line]{position:absolute;width:1.6em;height:3em;border-radius:50%}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left]{top:-0.8em;left:-0.5em;transform:rotate(-45deg);transform-origin:2em 2em;border-radius:4em 0 0 4em}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right]{top:-0.25em;left:.9375em;transform-origin:0 1.5em;border-radius:0 4em 4em 0}.swal2-popup.swal2-toast .swal2-success .swal2-success-ring{width:2em;height:2em}.swal2-popup.swal2-toast .swal2-success .swal2-success-fix{top:0;left:.4375em;width:.4375em;height:2.6875em}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line]{height:.3125em}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip]{top:1.125em;left:.1875em;width:.75em}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=long]{top:.9375em;right:.1875em;width:1.375em}.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip{animation:swal2-toast-animate-success-line-tip .75s}.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long{animation:swal2-toast-animate-success-line-long .75s}.swal2-popup.swal2-toast.swal2-show{animation:swal2-toast-show .5s}.swal2-popup.swal2-toast.swal2-hide{animation:swal2-toast-hide .1s forwards}div:where(.swal2-container){display:grid;position:fixed;z-index:1060;inset:0;box-sizing:border-box;grid-template-areas:"top-start top top-end" "center-start center center-end" "bottom-start bottom-center bottom-end";grid-template-rows:minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);height:100%;padding:.625em;overflow-x:hidden;transition:background-color .1s;-webkit-overflow-scrolling:touch}div:where(.swal2-container).swal2-backdrop-show,div:where(.swal2-container).swal2-noanimation{background:rgba(0,0,0,.4)}div:where(.swal2-container).swal2-backdrop-hide{background:rgba(0,0,0,0) !important}div:where(.swal2-container).swal2-top-start,div:where(.swal2-container).swal2-center-start,div:where(.swal2-container).swal2-bottom-start{grid-template-columns:minmax(0, 1fr) auto auto}div:where(.swal2-container).swal2-top,div:where(.swal2-container).swal2-center,div:where(.swal2-container).swal2-bottom{grid-template-columns:auto minmax(0, 1fr) auto}div:where(.swal2-container).swal2-top-end,div:where(.swal2-container).swal2-center-end,div:where(.swal2-container).swal2-bottom-end{grid-template-columns:auto auto minmax(0, 1fr)}div:where(.swal2-container).swal2-top-start>.swal2-popup{align-self:start}div:where(.swal2-container).swal2-top>.swal2-popup{grid-column:2;place-self:start center}div:where(.swal2-container).swal2-top-end>.swal2-popup,div:where(.swal2-container).swal2-top-right>.swal2-popup{grid-column:3;place-self:start end}div:where(.swal2-container).swal2-center-start>.swal2-popup,div:where(.swal2-container).swal2-center-left>.swal2-popup{grid-row:2;align-self:center}div:where(.swal2-container).swal2-center>.swal2-popup{grid-column:2;grid-row:2;place-self:center center}div:where(.swal2-container).swal2-center-end>.swal2-popup,div:where(.swal2-container).swal2-center-right>.swal2-popup{grid-column:3;grid-row:2;place-self:center end}div:where(.swal2-container).swal2-bottom-start>.swal2-popup,div:where(.swal2-container).swal2-bottom-left>.swal2-popup{grid-column:1;grid-row:3;align-self:end}div:where(.swal2-container).swal2-bottom>.swal2-popup{grid-column:2;grid-row:3;place-self:end center}div:where(.swal2-container).swal2-bottom-end>.swal2-popup,div:where(.swal2-container).swal2-bottom-right>.swal2-popup{grid-column:3;grid-row:3;place-self:end end}div:where(.swal2-container).swal2-grow-row>.swal2-popup,div:where(.swal2-container).swal2-grow-fullscreen>.swal2-popup{grid-column:1/4;width:100%}div:where(.swal2-container).swal2-grow-column>.swal2-popup,div:where(.swal2-container).swal2-grow-fullscreen>.swal2-popup{grid-row:1/4;align-self:stretch}div:where(.swal2-container).swal2-no-transition{transition:none !important}div:where(.swal2-container) div:where(.swal2-popup){display:none;position:relative;box-sizing:border-box;grid-template-columns:minmax(0, 100%);width:32em;max-width:100%;padding:0 0 1.25em;border:none;border-radius:5px;background:#fff;color:hsl(0,0%,33%);font-family:inherit;font-size:1rem}div:where(.swal2-container) div:where(.swal2-popup):focus{outline:none}div:where(.swal2-container) div:where(.swal2-popup).swal2-loading{overflow-y:hidden}div:where(.swal2-container) h2:where(.swal2-title){position:relative;max-width:100%;margin:0;padding:.8em 1em 0;color:inherit;font-size:1.875em;font-weight:600;text-align:center;text-transform:none;word-wrap:break-word}div:where(.swal2-container) div:where(.swal2-actions){display:flex;z-index:1;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;width:auto;margin:1.25em auto 0;padding:0}div:where(.swal2-container) div:where(.swal2-actions):not(.swal2-loading) .swal2-styled[disabled]{opacity:.4}div:where(.swal2-container) div:where(.swal2-actions):not(.swal2-loading) .swal2-styled:hover{background-image:linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))}div:where(.swal2-container) div:where(.swal2-actions):not(.swal2-loading) .swal2-styled:active{background-image:linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2))}div:where(.swal2-container) div:where(.swal2-loader){display:none;align-items:center;justify-content:center;width:2.2em;height:2.2em;margin:0 1.875em;animation:swal2-rotate-loading 1.5s linear 0s infinite normal;border-width:.25em;border-style:solid;border-radius:100%;border-color:#2778c4 rgba(0,0,0,0) #2778c4 rgba(0,0,0,0)}div:where(.swal2-container) button:where(.swal2-styled){margin:.3125em;padding:.625em 1.1em;transition:box-shadow .1s;box-shadow:0 0 0 3px rgba(0,0,0,0);font-weight:500}div:where(.swal2-container) button:where(.swal2-styled):not([disabled]){cursor:pointer}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm){border:0;border-radius:.25em;background:initial;background-color:#7066e0;color:#fff;font-size:1em}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):focus-visible{box-shadow:0 0 0 3px rgba(112,102,224,.5)}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny){border:0;border-radius:.25em;background:initial;background-color:#dc3741;color:#fff;font-size:1em}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny):focus-visible{box-shadow:0 0 0 3px rgba(220,55,65,.5)}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel){border:0;border-radius:.25em;background:initial;background-color:#6e7881;color:#fff;font-size:1em}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):focus-visible{box-shadow:0 0 0 3px rgba(110,120,129,.5)}div:where(.swal2-container) button:where(.swal2-styled).swal2-default-outline:focus-visible{box-shadow:0 0 0 3px rgba(100,150,200,.5)}div:where(.swal2-container) button:where(.swal2-styled):focus-visible{outline:none}div:where(.swal2-container) button:where(.swal2-styled)::-moz-focus-inner{border:0}div:where(.swal2-container) div:where(.swal2-footer){margin:1em 0 0;padding:1em 1em 0;border-top:1px solid #eee;color:inherit;font-size:1em;text-align:center}div:where(.swal2-container) .swal2-timer-progress-bar-container{position:absolute;right:0;bottom:0;left:0;grid-column:auto !important;overflow:hidden;border-bottom-right-radius:5px;border-bottom-left-radius:5px}div:where(.swal2-container) div:where(.swal2-timer-progress-bar){width:100%;height:.25em;background:rgba(0,0,0,.2)}div:where(.swal2-container) img:where(.swal2-image){max-width:100%;margin:2em auto 1em}div:where(.swal2-container) button:where(.swal2-close){z-index:2;align-items:center;justify-content:center;width:1.2em;height:1.2em;margin-top:0;margin-right:0;margin-bottom:-1.2em;padding:0;overflow:hidden;transition:color .1s,box-shadow .1s;border:none;border-radius:5px;background:rgba(0,0,0,0);color:#ccc;font-family:monospace;font-size:2.5em;cursor:pointer;justify-self:end}div:where(.swal2-container) button:where(.swal2-close):hover{transform:none;background:rgba(0,0,0,0);color:#f27474}div:where(.swal2-container) button:where(.swal2-close):focus-visible{outline:none;box-shadow:inset 0 0 0 3px rgba(100,150,200,.5)}div:where(.swal2-container) button:where(.swal2-close)::-moz-focus-inner{border:0}div:where(.swal2-container) .swal2-html-container{z-index:1;justify-content:center;margin:0;padding:1em 1.6em .3em;overflow:auto;color:inherit;font-size:1.125em;font-weight:normal;line-height:normal;text-align:center;word-wrap:break-word;word-break:break-word}div:where(.swal2-container) input:where(.swal2-input),div:where(.swal2-container) input:where(.swal2-file),div:where(.swal2-container) textarea:where(.swal2-textarea),div:where(.swal2-container) select:where(.swal2-select),div:where(.swal2-container) div:where(.swal2-radio),div:where(.swal2-container) label:where(.swal2-checkbox){margin:1em 2em 3px}div:where(.swal2-container) input:where(.swal2-input),div:where(.swal2-container) input:where(.swal2-file),div:where(.swal2-container) textarea:where(.swal2-textarea){box-sizing:border-box;width:auto;transition:border-color .1s,box-shadow .1s;border:1px solid hsl(0,0%,85%);border-radius:.1875em;background:rgba(0,0,0,0);box-shadow:inset 0 1px 1px rgba(0,0,0,.06),0 0 0 3px rgba(0,0,0,0);color:inherit;font-size:1.125em}div:where(.swal2-container) input:where(.swal2-input).swal2-inputerror,div:where(.swal2-container) input:where(.swal2-file).swal2-inputerror,div:where(.swal2-container) textarea:where(.swal2-textarea).swal2-inputerror{border-color:#f27474 !important;box-shadow:0 0 2px #f27474 !important}div:where(.swal2-container) input:where(.swal2-input):focus,div:where(.swal2-container) input:where(.swal2-file):focus,div:where(.swal2-container) textarea:where(.swal2-textarea):focus{border:1px solid #b4dbed;outline:none;box-shadow:inset 0 1px 1px rgba(0,0,0,.06),0 0 0 3px rgba(100,150,200,.5)}div:where(.swal2-container) input:where(.swal2-input)::placeholder,div:where(.swal2-container) input:where(.swal2-file)::placeholder,div:where(.swal2-container) textarea:where(.swal2-textarea)::placeholder{color:#ccc}div:where(.swal2-container) .swal2-range{margin:1em 2em 3px;background:#fff}div:where(.swal2-container) .swal2-range input{width:80%}div:where(.swal2-container) .swal2-range output{width:20%;color:inherit;font-weight:600;text-align:center}div:where(.swal2-container) .swal2-range input,div:where(.swal2-container) .swal2-range output{height:2.625em;padding:0;font-size:1.125em;line-height:2.625em}div:where(.swal2-container) .swal2-input{height:2.625em;padding:0 .75em}div:where(.swal2-container) .swal2-file{width:75%;margin-right:auto;margin-left:auto;background:rgba(0,0,0,0);font-size:1.125em}div:where(.swal2-container) .swal2-textarea{height:6.75em;padding:.75em}div:where(.swal2-container) .swal2-select{min-width:50%;max-width:100%;padding:.375em .625em;background:rgba(0,0,0,0);color:inherit;font-size:1.125em}div:where(.swal2-container) .swal2-radio,div:where(.swal2-container) .swal2-checkbox{align-items:center;justify-content:center;background:#fff;color:inherit}div:where(.swal2-container) .swal2-radio label,div:where(.swal2-container) .swal2-checkbox label{margin:0 .6em;font-size:1.125em}div:where(.swal2-container) .swal2-radio input,div:where(.swal2-container) .swal2-checkbox input{flex-shrink:0;margin:0 .4em}div:where(.swal2-container) label:where(.swal2-input-label){display:flex;justify-content:center;margin:1em auto 0}div:where(.swal2-container) div:where(.swal2-validation-message){align-items:center;justify-content:center;margin:1em 0 0;padding:.625em;overflow:hidden;background:hsl(0,0%,94%);color:#666;font-size:1em;font-weight:300}div:where(.swal2-container) div:where(.swal2-validation-message)::before{content:"!";display:inline-block;width:1.5em;min-width:1.5em;height:1.5em;margin:0 .625em;border-radius:50%;background-color:#f27474;color:#fff;font-weight:600;line-height:1.5em;text-align:center}div:where(.swal2-container) .swal2-progress-steps{flex-wrap:wrap;align-items:center;max-width:100%;margin:1.25em auto;padding:0;background:rgba(0,0,0,0);font-weight:600}div:where(.swal2-container) .swal2-progress-steps li{display:inline-block;position:relative}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step{z-index:20;flex-shrink:0;width:2em;height:2em;border-radius:2em;background:#2778c4;color:#fff;line-height:2em;text-align:center}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step{background:#2778c4}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step{background:#add8e6;color:#fff}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step-line{background:#add8e6}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step-line{z-index:10;flex-shrink:0;width:2.5em;height:.4em;margin:0 -1px;background:#2778c4}div:where(.swal2-icon){position:relative;box-sizing:content-box;justify-content:center;width:5em;height:5em;margin:2.5em auto .6em;border:0.25em solid rgba(0,0,0,0);border-radius:50%;border-color:#000;font-family:inherit;line-height:5em;cursor:default;user-select:none}div:where(.swal2-icon) .swal2-icon-content{display:flex;align-items:center;font-size:3.75em}div:where(.swal2-icon).swal2-error{border-color:#f27474;color:#f27474}div:where(.swal2-icon).swal2-error .swal2-x-mark{position:relative;flex-grow:1}div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line]{display:block;position:absolute;top:2.3125em;width:2.9375em;height:.3125em;border-radius:.125em;background-color:#f27474}div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=left]{left:1.0625em;transform:rotate(45deg)}div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=right]{right:1em;transform:rotate(-45deg)}div:where(.swal2-icon).swal2-error.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-error.swal2-icon-show .swal2-x-mark{animation:swal2-animate-error-x-mark .5s}div:where(.swal2-icon).swal2-warning{border-color:rgb(249.95234375,205.965625,167.74765625);color:#f8bb86}div:where(.swal2-icon).swal2-warning.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-warning.swal2-icon-show .swal2-icon-content{animation:swal2-animate-i-mark .5s}div:where(.swal2-icon).swal2-info{border-color:rgb(156.7033492823,224.2822966507,246.2966507177);color:#3fc3ee}div:where(.swal2-icon).swal2-info.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-info.swal2-icon-show .swal2-icon-content{animation:swal2-animate-i-mark .8s}div:where(.swal2-icon).swal2-question{border-color:rgb(200.8064516129,217.9677419355,225.1935483871);color:#87adbd}div:where(.swal2-icon).swal2-question.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-question.swal2-icon-show .swal2-icon-content{animation:swal2-animate-question-mark .8s}div:where(.swal2-icon).swal2-success{border-color:#a5dc86;color:#a5dc86}div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line]{position:absolute;width:3.75em;height:7.5em;border-radius:50%}div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=left]{top:-0.4375em;left:-2.0635em;transform:rotate(-45deg);transform-origin:3.75em 3.75em;border-radius:7.5em 0 0 7.5em}div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=right]{top:-0.6875em;left:1.875em;transform:rotate(-45deg);transform-origin:0 3.75em;border-radius:0 7.5em 7.5em 0}div:where(.swal2-icon).swal2-success .swal2-success-ring{position:absolute;z-index:2;top:-0.25em;left:-0.25em;box-sizing:content-box;width:100%;height:100%;border:.25em solid rgba(165,220,134,.3);border-radius:50%}div:where(.swal2-icon).swal2-success .swal2-success-fix{position:absolute;z-index:1;top:.5em;left:1.625em;width:.4375em;height:5.625em;transform:rotate(-45deg)}div:where(.swal2-icon).swal2-success [class^=swal2-success-line]{display:block;position:absolute;z-index:2;height:.3125em;border-radius:.125em;background-color:#a5dc86}div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip]{top:2.875em;left:.8125em;width:1.5625em;transform:rotate(45deg)}div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=long]{top:2.375em;right:.5em;width:2.9375em;transform:rotate(-45deg)}div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-tip{animation:swal2-animate-success-line-tip .75s}div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-long{animation:swal2-animate-success-line-long .75s}div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-circular-line-right{animation:swal2-rotate-success-circular-line 4.25s ease-in}[class^=swal2]{-webkit-tap-highlight-color:rgba(0,0,0,0)}.swal2-show{animation:swal2-show .3s}.swal2-hide{animation:swal2-hide .15s forwards}.swal2-noanimation{transition:none}.swal2-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}.swal2-rtl .swal2-close{margin-right:initial;margin-left:0}.swal2-rtl .swal2-timer-progress-bar{right:0;left:auto}@keyframes swal2-toast-show{0%{transform:translateY(-0.625em) rotateZ(2deg)}33%{transform:translateY(0) rotateZ(-2deg)}66%{transform:translateY(0.3125em) rotateZ(2deg)}100%{transform:translateY(0) rotateZ(0deg)}}@keyframes swal2-toast-hide{100%{transform:rotateZ(1deg);opacity:0}}@keyframes swal2-toast-animate-success-line-tip{0%{top:.5625em;left:.0625em;width:0}54%{top:.125em;left:.125em;width:0}70%{top:.625em;left:-0.25em;width:1.625em}84%{top:1.0625em;left:.75em;width:.5em}100%{top:1.125em;left:.1875em;width:.75em}}@keyframes swal2-toast-animate-success-line-long{0%{top:1.625em;right:1.375em;width:0}65%{top:1.25em;right:.9375em;width:0}84%{top:.9375em;right:0;width:1.125em}100%{top:.9375em;right:.1875em;width:1.375em}}@keyframes swal2-show{0%{transform:scale(0.7)}45%{transform:scale(1.05)}80%{transform:scale(0.95)}100%{transform:scale(1)}}@keyframes swal2-hide{0%{transform:scale(1);opacity:1}100%{transform:scale(0.5);opacity:0}}@keyframes swal2-animate-success-line-tip{0%{top:1.1875em;left:.0625em;width:0}54%{top:1.0625em;left:.125em;width:0}70%{top:2.1875em;left:-0.375em;width:3.125em}84%{top:3em;left:1.3125em;width:1.0625em}100%{top:2.8125em;left:.8125em;width:1.5625em}}@keyframes swal2-animate-success-line-long{0%{top:3.375em;right:2.875em;width:0}65%{top:3.375em;right:2.875em;width:0}84%{top:2.1875em;right:0;width:3.4375em}100%{top:2.375em;right:.5em;width:2.9375em}}@keyframes swal2-rotate-success-circular-line{0%{transform:rotate(-45deg)}5%{transform:rotate(-45deg)}12%{transform:rotate(-405deg)}100%{transform:rotate(-405deg)}}@keyframes swal2-animate-error-x-mark{0%{margin-top:1.625em;transform:scale(0.4);opacity:0}50%{margin-top:1.625em;transform:scale(0.4);opacity:0}80%{margin-top:-0.375em;transform:scale(1.15)}100%{margin-top:0;transform:scale(1);opacity:1}}@keyframes swal2-animate-error-icon{0%{transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0deg);opacity:1}}@keyframes swal2-rotate-loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes swal2-animate-question-mark{0%{transform:rotateY(-360deg)}100%{transform:rotateY(0)}}@keyframes swal2-animate-i-mark{0%{transform:rotateZ(45deg);opacity:0}25%{transform:rotateZ(-25deg);opacity:.4}50%{transform:rotateZ(15deg);opacity:.8}75%{transform:rotateZ(-5deg);opacity:1}100%{transform:rotateX(0);opacity:1}}body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown){overflow:hidden}body.swal2-height-auto{height:auto !important}body.swal2-no-backdrop .swal2-container{background-color:rgba(0,0,0,0) !important;pointer-events:none}body.swal2-no-backdrop .swal2-container .swal2-popup{pointer-events:all}body.swal2-no-backdrop .swal2-container .swal2-modal{box-shadow:0 0 10px rgba(0,0,0,.4)}@media print{body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown){overflow-y:scroll !important}body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown)>[aria-hidden=true]{display:none}body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown) .swal2-container{position:static !important}}body.swal2-toast-shown .swal2-container{box-sizing:border-box;width:360px;max-width:100%;background-color:rgba(0,0,0,0);pointer-events:none}body.swal2-toast-shown .swal2-container.swal2-top{inset:0 auto auto 50%;transform:translateX(-50%)}body.swal2-toast-shown .swal2-container.swal2-top-end,body.swal2-toast-shown .swal2-container.swal2-top-right{inset:0 0 auto auto}body.swal2-toast-shown .swal2-container.swal2-top-start,body.swal2-toast-shown .swal2-container.swal2-top-left{inset:0 auto auto 0}body.swal2-toast-shown .swal2-container.swal2-center-start,body.swal2-toast-shown .swal2-container.swal2-center-left{inset:50% auto auto 0;transform:translateY(-50%)}body.swal2-toast-shown .swal2-container.swal2-center{inset:50% auto auto 50%;transform:translate(-50%, -50%)}body.swal2-toast-shown .swal2-container.swal2-center-end,body.swal2-toast-shown .swal2-container.swal2-center-right{inset:50% 0 auto auto;transform:translateY(-50%)}body.swal2-toast-shown .swal2-container.swal2-bottom-start,body.swal2-toast-shown .swal2-container.swal2-bottom-left{inset:auto auto 0 0}body.swal2-toast-shown .swal2-container.swal2-bottom{inset:auto auto 0 50%;transform:translateX(-50%)}body.swal2-toast-shown .swal2-container.swal2-bottom-end,body.swal2-toast-shown .swal2-container.swal2-bottom-right{inset:auto 0 0 auto}</style></head><body><nav class="navbar navbar-expand-lg navbar-dark bg-dark py-2">
<div class="container">
<a class="navbar-brand fs-3" href="#">
<img src="images/logo_white.png" alt="CAA Logo" height="100">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link fs-5 me-3 active" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5 me-3 " href="general-plans-and-pricing.php">Plans & Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5 me-3 " href="general-contact-us.php">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5 me-3 " href="general-about-us.php">About Us</a>
</li>
<li class="nav-link fs-5 me-3 link-container">
<a href="#" data-bs-toggle="modal" data-bs-target="#loginModal">Login</a> |
<a href="#" data-bs-toggle="modal" data-bs-target="#signupModal">Apply Now!</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" id="loginModalDialog"> <!-- No modal-sm here initially -->
<div class="modal-content">
<button type="button" class="btn-close position-absolute top-0 end-0 m-2" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-body">
<div class="text-center">
<img src="images/logo.png" class="img-fluid mb-3" style="max-height: 100px;">
<h2 class="mb-4">LOGIN</h2>
</div>
<form id="loginForm" method="POST" enctype="multipart/form-data">
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-envelope"></i></span>
<input type="email" name="email" class="form-control" placeholder="Email" required="">
</div>
<div class="input-group mb-2">
<span class="input-group-text"><i class="bi bi-key"></i></span>
<input type="password" name="password" class="form-control" placeholder="Password" required="">
<button type="button" class="btn btn-outline-secondary" id="togglePassword">
<i class="bi bi-eye"></i>
</button>
</div>
<div class="d-flex justify-content-end mb-3">
<a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#forgotPasswordModal" data-bs-dismiss="modal">Forgot Password?</a>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-block">LOGIN</button>
</div>
<div class="text-center mt-3">
<span>Don't have an account? <a href="#" data-bs-toggle="modal" data-bs-target="#signupModal" data-bs-dismiss="modal">Sign up</a></span>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the default form submission
const formData = new FormData(this);
fetch('general-login-data.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
window.location.href = data.redirect_url;
} else {
Swal.fire({
icon: 'error',
title: 'Oops..',
text: data.message,
confirmButtonText: 'Try Again'
});
}
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
<div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" id="signupModalDialog"> <!-- No modal-sm here initially -->
<div class="modal-content">
<button type="button" class="btn-close position-absolute top-0 end-0 m-2" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-body">
<div class="text-center">
<h2 class="mb-4">SIGN UP</h2>
</div>
<form id="signupForm" method="POST" enctype="multipart/form-data">
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-person"></i></span>
<input type="text" class="form-control" name="full_name" id="full_name" placeholder="Full Name" required="" maxlength="50">
</div>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-card-list"></i></span>
<select id="idType" name="id_type" class="form-control" required="">
<option value="">ID Type</option>
<option value="passport">Passport</option>
<option value="driver_license">Driver's License</option>
<option value="national_id">National ID</option>
</select>
</div>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-upload"></i></span>
<input type="file" class="form-control" name="id_image" id="id_image" accept="image/*" required="">
</div>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-credit-card-2-front"></i></span>
<input type="text" class="form-control" name="id_number" id="id_number" placeholder="ID Number" required="" maxlength="20" pattern="[A-Za-z0-9]+" title="Only alphanumeric characters are allowed.">
</div>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-geo-alt"></i></span>
<input type="text" class="form-control" name="address" id="address" placeholder="Address" required="" maxlength="200">
</div>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-telephone"></i></span>
<input type="tel" class="form-control" name="phone_number" id="phone_number" placeholder="Phone Number" required="" maxlength="11" pattern="^\d{11}$" title="Must be 11 digits.">
</div>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-envelope"></i></span>
<input type="email" class="form-control" name="email" id="email" placeholder="Email" required="" maxlength="50">
</div>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-key"></i></span>
<input type="password" class="form-control" name="password" id="password" placeholder="Enter password" required="" minlength="8">
<button type="button" id="toggleSignupPassword" class="btn btn-outline-secondary">
<i class="bi bi-eye"></i>
</button>
</div>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-key"></i></span>
<input type="password" class="form-control" name="confirm_password" id="confirm_password" placeholder="Confirm Password" required="" minlength="8">
<button type="button" id="toggleConfirmPassword" class="btn btn-outline-secondary">
<i class="bi bi-eye"></i>
</button>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-block">SIGN UP</button>
</div>
<div class="text-center mt-3">
<span>Already have an account? <a href="#" data-bs-toggle="modal" data-bs-target="#loginModal" data-bs-dismiss="modal">Login</a></span>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="forgotPasswordModal" tabindex="-1" aria-labelledby="forgotPasswordModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<div class="text-center">
<img src="images/logo.png" class="img-fluid mb-3" style="max-height: 150px;">
<h2 class="mb-4">Forgot Password</h2>
<p>Please enter your email address to receive a reset code for your password.</p>
</div>
<form id="forgotPasswordForm">
<div class="input-group mb-3">
<span class="input-group-text">
<i class="bi bi-envelope"></i>
</span>
<input type="email" name="email" class="form-control" placeholder="Email" required="">
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-block">Send Reset Code</button>
</div>
<div class="text-center mt-3">
<span>Remembered your password? <a href="#" data-bs-toggle="modal" data-bs-target="#loginModal" data-bs-dismiss="modal">Log in</a></span>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<div class="text-center">
<img src="images/logo.png" class="img-fluid mb-3" style="max-height: 150px;">
<h2 class="mb-4">Reset Your Password</h2>
<p>Please enter the reset code sent to your email and set your new password.</p>
</div>
<form id="resetPasswordForm">
<div class="input-group mb-3">
<span class="input-group-text">
<i class="bi bi-key"></i>
</span>
<input type="text" name="reset_code" class="form-control" placeholder="Reset Code" required="">
</div>
<div class="input-group mb-3">
<span class="input-group-text">
<i class="bi bi-lock"></i>
</span>
<input type="password" name="new_password" class="form-control" placeholder="New Password" required="" id="newPassword">
<button class="btn btn-outline-secondary" type="button" id="toggleNewPassword">
<i class="bi bi-eye"></i>
</button>
</div>
<div class="input-group mb-3">
<span class="input-group-text">
<i class="bi bi-lock"></i>
</span>
<input type="password" name="confirm_new_password" class="form-control" placeholder="Confirm New Password" required="" id="confirmNewPassword">
<button class="btn btn-outline-secondary" type="button" id="toggleConfirmNewPassword">
<i class="bi bi-eye"></i>
</button>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-block">Reset Password</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
<div class="carousel-inner">
<div class="carousel-item active text-center animate__animated animate__fadeIn">
<div class="carousel-img-wrapper">
<a href="#">
<img src="images/hehe.png" class="d-block carousel-img" alt="Slide 1">
</a>
</div>
</div>
<div class="carousel-item text-center animate__animated animate__fadeIn">
<div class="carousel-img-wrapper">
<!-- Update this link to open the modal -->
<a href="#" data-bs-toggle="modal" data-bs-target="#signupModal">
<img src="images/haha.png" class="d-block carousel-img" alt="Slide 2">
</a>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Signup Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signupModalLabel">Sign Up</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" required="">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required="">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" required="">
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
</div>
</div>
</div>
<div class="container my-5">
<div class="card bg-light border-light shadow-lg p-4">
<h3 class="display-7 text-center mb-4 fw-bold">CLIENT REVIEWS</h3>
<!-- Mobile Carousel -->
<div id="reviewsCarouselMobile" class="carousel slide d-block d-md-none" data-bs-ride="carousel" data-bs-interval="3000" data-bs-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active animate__animated animate__fadeIn">
<div class="card border-light shadow-sm mb-3 text-center">
<div class="card-body">
<p class="fw-bold mb-2" style="font-size: 1rem;">Noel</p>
<p class="mb-3" style="font-size: 0.85rem;">"yare yare ojou sama"</p>
<div class="star-rating mb-2">
<i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i> </div>
<small class="text-muted" style="font-size: 0.75rem;">October 22, 2024</small>
</div>
</div>
</div>
<div class="carousel-item animate__animated animate__fadeIn">
<div class="card border-light shadow-sm mb-3 text-center">
<div class="card-body">
<p class="fw-bold mb-2" style="font-size: 1rem;">Jayvee Aranez</p>
<p class="mb-3" style="font-size: 0.85rem;">"Masyadong Pogi ang staff"</p>
<div class="star-rating mb-2">
<i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="far fa-star text-muted"></i> </div>
<small class="text-muted" style="font-size: 0.75rem;">October 21, 2024</small>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#reviewsCarouselMobile" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#reviewsCarouselMobile" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Desktop Carousel -->
<div id="reviewsCarouselDesktop" class="carousel slide d-none d-md-block" data-bs-ride="carousel" data-bs-interval="3000" data-bs-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active"><div class="row"> <div class="col-md-3">
<div class="card shadow-sm text-center animate__animated animate__fadeIn">
<div class="card-body card-reviews">
<p><strong>Noel</strong></p>
<div class="scrollable-message">
<p>"yare yare ojou sama"</p>
</div>
<div class="star-rating my-2">
<i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i> </div>
<small>October 22, 2024</small>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card shadow-sm text-center animate__animated animate__fadeIn">
<div class="card-body card-reviews">
<p><strong>Jayvee Aranez</strong></p>
<div class="scrollable-message">
<p>"Masyadong Pogi ang staff"</p>
</div>
<div class="star-rating my-2">
<i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="far fa-star text-muted"></i> </div>
<small>October 21, 2024</small>
</div>
</div>
</div>
</div></div> </div>
<button class="carousel-control-prev" type="button" data-bs-target="#reviewsCarouselDesktop" data-bs-slide="prev" style="display: none;">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#reviewsCarouselDesktop" data-bs-slide="next" style="display: none;">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<style>
.carousel {
position: relative;
z-index: 1;
}
.carousel-img-wrapper {
background-color: white;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
max-width: 100%;
margin: 0 auto;
}
.carousel-img {
object-fit: contain;
height: 60vh;
width: 100%;
}
/* Styling for mobile reviews carousel */
#reviewsCarouselMobile .card {
max-width: 90%;
margin: 0 auto;
}
.card-reviews {
padding: 10px;
}
.star-rating i {
font-size: 0.8rem;
}
/* Adjust the buttons in carouselExample */
#carouselExample .carousel-control-prev,
#carouselExample .carousel-control-next {
background-color: rgba(0, 0, 0, 0.5);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
/* Adjust the left position for the prev button in carouselExample */
#carouselExample .carousel-control-prev {
left: 100px;
}
/* Adjust the right position for the next button in carouselExample */
#carouselExample .carousel-control-next {
right: 100px;
}
@media (max-width: 767.98px) {
.carousel-img-wrapper {
padding: 5px;
}
}
@media (max-width: 600px) {
#carouselExample .carousel-control-prev {
left: 10px;
}
#carouselExample .carousel-control-next {
right: 10px;
}
}
</style>
<!-- chatbot.php -->
<div id="chatbot" class="chatbot">
<button id="chatbot-button" class="chatbot-button">💬</button>
<div id="chatbot-window" class="chatbot-window" style="display: none;">
<div class="chatbot-header">
<span>FAQ Chatbot</span>
<button id="close-chatbot" class="close-chatbot">×</button>
</div>
<div class="chatbot-body">
<p class="bot-response"><span class="robot-icon">🤖</span> Hello! How can I assist you today?</p>
</div>
<div class="plans-container">
<div class="plans-scroll"></div>
</div>
<div class="chatbot-footer">
<div class="suggested-questions">
<button class="suggested-question" data-question="What are your internet plans?">What are your internet plans?</button>
<button class="suggested-question" data-question="How to pay?">How to pay?</button>
</div>
<input type="text" id="user-input" placeholder="Type a message...">
<button id="send-button">Send</button>
</div>
<div id="loading" class="loading" style="display: none;">Loading...</div>
</div>
</div>
<script>
const chatbotButton = document.getElementById('chatbot-button');
const chatbotWindow = document.getElementById('chatbot-window');
const sendButton = document.getElementById('send-button');
const userInput = document.getElementById('user-input');
const chatbotBody = chatbotWindow.querySelector('.chatbot-body');
const loadingIndicator = document.getElementById('loading');
const closeChatbot = document.getElementById('close-chatbot');
const suggestedQuestionsDiv = document.querySelector('.suggested-questions');
chatbotButton.addEventListener('click', () => {
if (chatbotWindow.classList.contains('show')) {
// If currently shown, hide the window
chatbotWindow.classList.remove('show');
// Use a timeout to ensure the hide action happens after the transition
setTimeout(() => {
chatbotWindow.style.display = 'none';
}, 400); // Match this duration with the CSS transition duration
} else {
// Show the window
chatbotWindow.style.display = 'block';
// Allow the browser to render the change before adding the class
requestAnimationFrame(() => {
chatbotWindow.classList.add('show');
});
}
});
closeChatbot.addEventListener('click', () => {
chatbotWindow.classList.remove('show');
setTimeout(() => {
chatbotWindow.style.display = 'none';
}, 400); // Match this duration with the CSS transition duration
});
let isBotTyping = false; // Flag to track if bot is typing
// Event listener for the "Enter" key on the input field
userInput.addEventListener('keydown', function(event) {
if (event.key === 'Enter' && !isBotTyping) {
event.preventDefault(); // Prevent default action (like creating a new line)
const userMessage = userInput.value.trim();
if (userMessage !== '') {
sendMessage(userMessage);
}
}
});
// Send button click event
sendButton.addEventListener('click', () => {
const userMessage = userInput.value.trim();
if (userMessage !== '') {
sendMessage(userMessage);
}
});
const suggestedQuestions = document.querySelectorAll('.suggested-question');
suggestedQuestions.forEach(button => {
button.addEventListener('click', () => {
const question = button.getAttribute('data-question');
sendMessage(question);
suggestedQuestionsDiv.style.display = 'none';
});
});
function sendMessage(message) {
const userMessageElement = document.createElement('p');
userMessageElement.className = 'user-response';
userMessageElement.textContent = `You: ${message}`;
chatbotBody.appendChild(userMessageElement);
// Clear the input field
userInput.value = '';
// Hide the suggested questions after the user sends a message
suggestedQuestionsDiv.style.display = 'none';
// Call the function to generate a response from the bot
respondToUser(message);
}
function respondToUser(message) {
const lowerCaseMessage = message.toLowerCase();
let botResponse;
isBotTyping = true; // Disable "Enter" key during bot response
sendButton.disabled = true; // Disable the send button
// Create a typing indicator placeholder
const typingPlaceholder = document.createElement('p');
typingPlaceholder.className = 'bot-response';
typingPlaceholder.innerHTML = `<span class="robot-icon">🤖</span> Typing...`;
chatbotBody.appendChild(typingPlaceholder);
chatbotBody.scrollTop = chatbotBody.scrollHeight;
setTimeout(() => {
chatbotBody.removeChild(typingPlaceholder);
if (lowerCaseMessage.includes('internet plans') || lowerCaseMessage.includes('plans')) {
fetch('chat-fetch-plans.php')
.then(response => response.json())
.then(data => {
const plansScroll = document.querySelector('.plans-scroll');
plansScroll.innerHTML = '';
data.forEach(plan => {
const planElement = document.createElement('div');
planElement.className = 'plan-item';
planElement.innerHTML = `<strong>${plan.title}</strong>₱${plan.price}/month<br>${plan.description.replace(/\n/g, '<br>')}`;
plansScroll.appendChild(planElement);
});
const botMessageElement = document.createElement('p');
botMessageElement.className = 'bot-response';
botMessageElement.innerHTML = `<span class="robot-icon">🤖</span> Here are our current plans:`;
chatbotBody.appendChild(botMessageElement);
chatbotBody.appendChild(plansScroll);
chatbotBody.scrollTop = chatbotBody.scrollHeight;
sendButton.disabled = false;
isBotTyping = false;
})
.catch(error => {
botResponse = 'Sorry, I could not retrieve the plans at this time.';
displayBotResponse(botResponse);
});
} else if (lowerCaseMessage.includes('location') || lowerCaseMessage.includes('located')) {
botResponse = 'You can find us at Phase 2 Block 17 Lot, Lumina Homes, 27 Lansones Street, San Vicente, Santo Tomas, Batangas.';
displayBotResponse(botResponse);
} else if (lowerCaseMessage.includes('hello') || lowerCaseMessage.includes('hi')) {
botResponse = 'Hello! How can I help you today?';
displayBotResponse(botResponse);
} else if (lowerCaseMessage.includes('troubleshoot') || lowerCaseMessage.includes('problem') || lowerCaseMessage.includes('issue')) {
botResponse = `Here are some basic troubleshooting steps:
1. Restart your modem/router.
2. Check all cable connections.
3. Ensure your device is connected to the correct network.
4. Run a speed test and check for any outages in your area.`;
botResponse = botResponse.replace(/\n/g, '<br>');
displayBotResponse(botResponse);
} else if (lowerCaseMessage.includes('upgrade') || lowerCaseMessage.includes('upgrade plan')) {
botResponse = 'Yes, you can upgrade your plan at any time. Please contact our support team or you can submit a ticket, and they will assist you with the process.';
displayBotResponse(botResponse);
} else if (lowerCaseMessage.includes('payment methods') || lowerCaseMessage.includes('payment') || lowerCaseMessage.includes('pay')) {
botResponse = 'We accept various payment methods like GCASH and CASH only.';
displayBotResponse(botResponse);
} else if (lowerCaseMessage.includes('installation process') || lowerCaseMessage.includes('install')) {
botResponse = 'After filling up the application form, you will be notified if it is confirmed or cancelled. When your application is confirmed, we will contact you about your installation schedule.';
displayBotResponse(botResponse);
} else if (lowerCaseMessage.includes('check my bill') || lowerCaseMessage.includes('billing')) {
botResponse = 'You can check your billing details by logging into your account on our website.';
displayBotResponse(botResponse);
} else {
botResponse = "I'm sorry, I didn't understand that. Can you please rephrase?";
displayBotResponse(botResponse);
}
}, 1500);
}
function displayBotResponse(response) {
const botMessageElement = document.createElement('p');
botMessageElement.className = 'bot-response';
botMessageElement.innerHTML = `<span class="robot-icon">🤖</span> ${response}`;
chatbotBody.appendChild(botMessageElement);
chatbotBody.scrollTop = chatbotBody.scrollHeight;
sendButton.disabled = false;
isBotTyping = false;
userInput.focus();
}
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="script.js"></script>
</body></html>