383 lines
9.6 KiB
JavaScript
383 lines
9.6 KiB
JavaScript
let isWhatsAppWidgetOpen = false;
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
updateCurrentTime();
|
|
setInterval(updateCurrentTime, 60000);
|
|
});
|
|
|
|
function toggleWhatsAppWidget() {
|
|
const popup = document.getElementById("whatsappPopup");
|
|
const button = document.querySelector(".whatsapp-button");
|
|
|
|
if (!isWhatsAppWidgetOpen) {
|
|
popup.classList.add("show");
|
|
button.style.transform = "rotate(360deg)";
|
|
isWhatsAppWidgetOpen = true;
|
|
|
|
setTimeout(() => {
|
|
const message = document.querySelector(".chat-message");
|
|
if (message) {
|
|
message.style.animation = "slideInUp 0.5s ease-out";
|
|
}
|
|
}, 200);
|
|
} else {
|
|
popup.classList.remove("show");
|
|
button.style.transform = "rotate(0deg)";
|
|
isWhatsAppWidgetOpen = false;
|
|
}
|
|
}
|
|
|
|
function sendWhatsAppMessage(prefilledMessage, helpdesk = "sistem") {
|
|
const helpdeskNumbers = {
|
|
sistem: "6285212436339",
|
|
blud: "6282211001180",
|
|
};
|
|
|
|
const phoneNumber = helpdeskNumbers[helpdesk];
|
|
const message =
|
|
prefilledMessage ||
|
|
`Halo, saya membutuhkan bantuan mengenai ${
|
|
helpdesk === "sistem" ? "Sistem Pesapakawan" : "BLUD UPST"
|
|
}.`;
|
|
const encodedMessage = encodeURIComponent(message);
|
|
const whatsappUrl = `https://wa.me/${phoneNumber}?text=${encodedMessage}`;
|
|
|
|
const button = document.querySelector(".whatsapp-chat-btn");
|
|
if (button) {
|
|
button.style.transform = "scale(0.95)";
|
|
setTimeout(() => {
|
|
button.style.transform = "scale(1)";
|
|
}, 150);
|
|
}
|
|
|
|
window.open(whatsappUrl, "_blank");
|
|
|
|
setTimeout(() => {
|
|
toggleWhatsAppWidget();
|
|
}, 300);
|
|
}
|
|
|
|
function showHelpdeskSelection(prefilledMessage) {
|
|
const modal = document.createElement("div");
|
|
modal.className = "helpdesk-modal";
|
|
modal.innerHTML = `
|
|
<div class="helpdesk-modal-content">
|
|
<h3>Pilih Helpdesk</h3>
|
|
<p>Silakan pilih helpdesk yang sesuai dengan kebutuhan Anda:</p>
|
|
<div class="helpdesk-options">
|
|
<button class="helpdesk-option" onclick="selectHelpdesk('sistem', '${prefilledMessage}')">
|
|
<div class="option-icon">💻</div>
|
|
<div class="option-details">
|
|
<h4>Help Desk Sistem Pesapakawan</h4>
|
|
<p>0852-1243-6339</p>
|
|
<small>Bantuan teknis aplikasi dan sistem</small>
|
|
</div>
|
|
</button>
|
|
<button class="helpdesk-option" onclick="selectHelpdesk('blud', '${prefilledMessage}')">
|
|
<div class="option-icon">❔</div>
|
|
<div class="option-details">
|
|
<h4>Helpdesk BLUD UPST</h4>
|
|
<p>0822-1100-1180</p>
|
|
<small>Bantuan layanan BLUD UPST</small>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<button class="close-modal" onclick="closeHelpdeskModal()">Tutup</button>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(modal);
|
|
|
|
setTimeout(() => {
|
|
modal.classList.add("show");
|
|
}, 10);
|
|
}
|
|
|
|
function selectHelpdesk(helpdesk, message) {
|
|
closeHelpdeskModal();
|
|
sendWhatsAppMessage(message, helpdesk);
|
|
}
|
|
|
|
function closeHelpdeskModal() {
|
|
const modal = document.querySelector(".helpdesk-modal");
|
|
if (modal) {
|
|
modal.classList.remove("show");
|
|
setTimeout(() => {
|
|
modal.remove();
|
|
}, 300);
|
|
}
|
|
}
|
|
|
|
function updateCurrentTime() {
|
|
const timeElement = document.getElementById("currentTime");
|
|
if (timeElement) {
|
|
const now = new Date();
|
|
const timeString = now.toLocaleTimeString("id-ID", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
});
|
|
timeElement.textContent = timeString;
|
|
}
|
|
}
|
|
|
|
document.addEventListener("click", function (event) {
|
|
const widget = document.querySelector(".whatsapp-widget");
|
|
const popup = document.getElementById("whatsappPopup");
|
|
|
|
if (widget && !widget.contains(event.target) && isWhatsAppWidgetOpen) {
|
|
popup.classList.remove("show");
|
|
document.querySelector(".whatsapp-button").style.transform = "rotate(0deg)";
|
|
isWhatsAppWidgetOpen = false;
|
|
}
|
|
});
|
|
|
|
document.addEventListener("click", function (event) {
|
|
if (event.target.closest(".whatsapp-popup")) {
|
|
event.stopPropagation();
|
|
}
|
|
});
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const optionButtons = document.querySelectorAll(".option-btn");
|
|
|
|
optionButtons.forEach((button, index) => {
|
|
button.style.animationDelay = `${index * 0.1}s`;
|
|
button.classList.add("fade-in-up");
|
|
});
|
|
});
|
|
|
|
const style = document.createElement("style");
|
|
style.textContent = `
|
|
.fade-in-up {
|
|
animation: fadeInUp 0.6s ease-out forwards;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
function showTypingIndicator() {
|
|
const messageContainer = document.querySelector(".chat-message");
|
|
const typingIndicator = document.createElement("div");
|
|
typingIndicator.className = "typing-indicator";
|
|
typingIndicator.innerHTML = `
|
|
<div class="typing-dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
`;
|
|
|
|
messageContainer.appendChild(typingIndicator);
|
|
|
|
setTimeout(() => {
|
|
typingIndicator.remove();
|
|
}, 2000);
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const whatsappButton = document.querySelector(".whatsapp-button");
|
|
|
|
whatsappButton.addEventListener("mouseenter", function () {
|
|
this.style.animationPlayState = "paused";
|
|
});
|
|
|
|
whatsappButton.addEventListener("mouseleave", function () {
|
|
this.style.animationPlayState = "running";
|
|
});
|
|
});
|
|
|
|
function createRipple(event) {
|
|
const button = event.currentTarget;
|
|
const circle = document.createElement("span");
|
|
const diameter = Math.max(button.clientWidth, button.clientHeight);
|
|
const radius = diameter / 2;
|
|
|
|
circle.style.width = circle.style.height = `${diameter}px`;
|
|
circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
|
|
circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
|
|
circle.classList.add("ripple");
|
|
|
|
const ripple = button.getElementsByClassName("ripple")[0];
|
|
if (ripple) {
|
|
ripple.remove();
|
|
}
|
|
|
|
button.appendChild(circle);
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const buttons = document.querySelectorAll(".option-btn, .whatsapp-chat-btn");
|
|
buttons.forEach((button) => {
|
|
button.addEventListener("click", createRipple);
|
|
});
|
|
});
|
|
|
|
const rippleStyle = document.createElement("style");
|
|
rippleStyle.textContent = `
|
|
.ripple {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
transform: scale(0);
|
|
animation: ripple 600ms linear;
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes ripple {
|
|
to {
|
|
transform: scale(4);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.option-btn, .whatsapp-chat-btn {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Helpdesk Modal Styles */
|
|
.helpdesk-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2000;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.helpdesk-modal.show {
|
|
opacity: 1;
|
|
}
|
|
|
|
.helpdesk-modal-content {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 25px;
|
|
max-width: 450px;
|
|
width: 90%;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
transform: translateY(20px);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.helpdesk-modal.show .helpdesk-modal-content {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.helpdesk-modal h3 {
|
|
margin: 0 0 10px 0;
|
|
color: #333;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.helpdesk-modal p {
|
|
margin: 0 0 20px 0;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.helpdesk-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.helpdesk-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 15px;
|
|
border: 2px solid #e9ecef;
|
|
border-radius: 10px;
|
|
background: #f8f9fa;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
text-align: left;
|
|
}
|
|
|
|
.helpdesk-option:hover {
|
|
border-color: #25D366;
|
|
background: #f0fff4;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.2);
|
|
}
|
|
|
|
.option-icon {
|
|
font-size: 24px;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #25D366;
|
|
border-radius: 8px;
|
|
color: white;
|
|
}
|
|
|
|
.option-details h4 {
|
|
margin: 0 0 5px 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.option-details p {
|
|
margin: 0 0 5px 0;
|
|
font-size: 14px;
|
|
color: #25D366;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.option-details small {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
.close-modal {
|
|
width: 100%;
|
|
padding: 12px;
|
|
background: #6c757d;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.close-modal:hover {
|
|
background: #5a6268;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.helpdesk-modal-content {
|
|
margin: 20px;
|
|
width: calc(100% - 40px);
|
|
}
|
|
|
|
.helpdesk-option {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(rippleStyle);
|