main.js

$(document).ready(function () {
   // process bar
   setTimeout(function () {
      firstQuestion();
      $('.spinner').fadeOut();
      $('#preloader').delay(350).fadeOut('slow');
      $('body').delay(350).css({
         overflow: 'visible',
      });
   }, 600);
});

function init() {
   document.getElementById('titleWeb').innerHTML = CONFIG.titleWeb;
   $('#title').text(CONFIG.title);
   $('#desc').text(CONFIG.desc);
   $('#yes').text(CONFIG.btnYes);
   $('#no').text(CONFIG.btnNo);

   var xYes = (0.9 * $(window).width() - $('#yes').width() - $('#no').width()) / 2;
   var xNo = xYes + $('#yes').width() + 0.1 * $(window).width();
   var y = 0.75 * $(window).height();
   $('#yes').css('left', xYes);
   $('#yes').css('top', y);

   $('#no').css('left', xNo);
   $('#no').css('top', y);
}

function firstQuestion() {
   $('.content').hide();
   Swal.fire({
      title: CONFIG.introTitle,
      text: CONFIG.introDesc,
      imageUrl: 'img/logi.gif',
      imageWidth: 300,
      imageHeight: 300,
      background: '#fff url("img/iput-bg.jpg")',
      imageAlt: 'Custom image',
      confirmButtonText: CONFIG.btnIntro,
   }).then(function () {
      $('.content').show(200);
   });
   // Play the audio
}

// switch button position
function switchButton() {
   var audio = new Audio('sound/duck.mp3');
   audio.play();
   var leftNo = $('#no').css('left');
   var topNO = $('#no').css('top');
   var leftY = $('#yes').css('left');
   var topY = $('#yes').css('top');
   $('#no').css('left', leftY);
   $('#no').css('top', topY);
   $('#yes').css('left', leftNo);
   $('#yes').css('top', topNO);
}

// move random button position
function moveButton() {
   var x = Math.random() * ($(window).width() - $('#no').width()) * 0.9;
   var y = Math.random() * ($(window).height() - $('#no').height()) * 0.9;
   var left = x + 'px';
   var top = y + 'px';
   $('#no').css('left', left);
   $('#no').css('top', top);
}

init();

var n = 0;
$('#no').mousemove(function () {
   if (Math.random() < 0.5 || n == 1) switchButton();
   else moveButton();
   n++;
});

$('#no').click(() => {
   if (screen.width >= 900) switchButton();
});

// generate text in input
function textGenerate() {
   var n = '';
   var text = ' ' + CONFIG.reply;
   var a = Array.from(text);
   var textVal = $('#txtReason').val() ? $('#txtReason').val() : '';
   var count = textVal.length;
   if (count > 0) {
      for (let i = 1; i <= count; i++) {
         n = n + a[i];
         if (i == text.length + 1) {
            $('#txtReason').val('');
            n = '';
            break;
         }
      }
   }
   $('#txtReason').val(n);
   setTimeout('textGenerate()', 1);
}

// Function to check input and trigger custom alert if conditions are met
function checkInputAndShowPopup(input) {
   const name = input.toLowerCase();
   let message = `You're the one that I like! ${name}`;

   $('#customAlert').text(message).fadeIn();

   setTimeout(() => {
      $('#customAlert').fadeOut();
   }, 3000);
}

// show popup
$('#yes').click(function () {
   const userInput = prompt('Enter your name:'); // Replace with actual input method
   checkInputAndShowPopup(userInput);

   Swal.fire({
      title: CONFIG.question,
      html: true,
      width: 900,
      padding: '3em',
      html: "<input type='text' class='form-control' id='txtReason' onmousemove=textGenerate() placeholder='Whyyy thou????'>",
      background: '#fff url("img/iput-bg.jpg")',
      backdrop: `
              rgba(0,0,123,0.4)
              url("img/giphy2.gif")
              left top
              no-repeat
            `,
      confirmButtonColor: '#3085d6',
      confirmButtonColor: '#fe8a71',
      confirmButtonText: CONFIG.btnReply,
   }).then((result) => {
      if (result.value) {
         Swal.fire({
            width: 900,
            confirmButtonText: CONFIG.btnAccept,
            background: '#fff url("img/iput-bg.jpg")',
            title: CONFIG.mess,
            text: CONFIG.messDesc,
            confirmButtonColor: '#83d0c9',
            onClose: () => {
               window.location = CONFIG.messLink;
            },
         });
      }
   });
});