- 掃描 ID：
- 27e918ab-71ef-4fa8-95c5-341f8930c845已完成
- 已提交的 URL：
- https://caainternetservice.com/index.php
- 報告完成時間：
連結 · 找到 0 個
從頁面中識別的傳出連結
JavaScript 變數 · 找到 19 個
在頁面的視窗物件上載入的全域 JavaScript 變數是在函數外部宣告的變數，可從目前範圍內程式碼中的任何位置存取
| 名稱 | 類型 |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| sendMessage | function |
| respondToUser | function |
| displayBotResponse | function |
| $ | function |
| jQuery | function |
| uidEvent | number |
| bootstrap | object |
主控台記錄訊息 · 找到 9 條
記錄到 Web 主控台的訊息
| 類型 | 類別 | 記錄 |
|---|---|---|
| error | network |
|
| warning | dom |
|
| warning | dom |
|
| verbose | dom |
|
| verbose | dom |
|
| verbose | dom |
|
| verbose | dom |
|
| verbose | dom |
|
| verbose | dom |
|
HTML
頁面的原始 HTML 主體
<!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>