CodePen Embed - GRLqOOZ

<div id="container" align="center">
  <h2 id="header">Lookup your LiveAgent version</h2>
  <p id="paragraph1">To get the version of your LiveAgent account, enter your <strong>LiveAgent URL</strong> and hit <strong>"Get Version"</strong>.</p>
  <input id="inputAccount" value="" placeholder="Your LiveAgent URL [something.ladesk.com]"/>
  <button id="submitInput" type="submit" value="Get Version">Get Version<img id="loading" src="https://media.tenor.com/On7kvXhzml4AAAAj/loading-gif.gif" /></button>
  <span id="action">&times;</span>
  <span id="description">
    Paste the URL address of your agent panel - https://<strong><u>something.ladesk.com</u></strong>/agent/index.php?...
  </span>
  <span id="description2">
    Something went wrong!
  </span>
  <span id="description3">
    LiveAgent URL is <strong><u>mandatory</u></strong>!
  </span>
</div>

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
#header {
  font-family: "Poppins", sans-serif;
  position: absolute;
  top: -145px;
  left: -25px;
  text-align: left;
  color: #333;
}
#paragraph1 {
  font-family: "Poppins", sans-serif;
  position: absolute;
  top: -95px;
  left: -25px;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  color: #333;
}
#container {
  width: 630px;
  position: absolute;
  top: 120px;
  left: 26px;
}
#inputAccount {
  position: absolute;
  right: 30px;
  font-family: "Poppins", sans-serif;
  border: 0px;
  background-color: #f1f1f1;
  width: calc(100% - 30px);
  display: inline-block;
  border-radius: 8px;
  padding: 12px;
  color: #333;
  font-weight: 500;
  font-size: 13px;
  outline: 1px solid #ccc;
  z-index: 5;
  transition: .3s;
}
#inputAccount:hover {
  outline: 1px solid #888;
}
#inputAccount:focus {
  outline: 1px solid #333;
}
#submitInput {
  position: absolute;
  right: 29px;
  top: -1px;
  font-family: "Poppins", sans-serif;
  border: none;
  background-color: #333;
  width: 120px;
  display: inline-block;
  border-radius: 8px;
  padding: 13px 20px;
  color: #f1f1f1;
  font-weight: 600;
  font-size: 13px;
  outline: none;
  z-index: 10;
  transition: .3s;
  cursor: pointer;
}
#submitInput:hover {
  background-color: #222;
  transform: scale(1.05);
}
#loading {
  position: absolute;
  left: calc(50% - 5px);
  width: 20px;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: .2s;
}
#action {
  position: absolute;
  top: 0px;
  right: 30px;
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  color: #222;
}
#action:hover {
  transform: scale(1.2);
  color: #000;
}
#description {
  position: absolute;
  top: 50px;
  left: -20px;
  font-family: "Poppins", sans-serif;
  width: 600px;
  display: block;
  text-align: left;
  padding: 0;
  color: #999;
  font-weight: 400;
  font-size: 10px;
  outline: none;
  transition: .3s;
  z-index: 1;
}
#description2 {
  position: absolute;
  top: 4px;
  left: -24px;
  font-family: "Poppins", sans-serif;
  width: auto;
  display: block;
  text-align: left;
  padding: 6px 20px 14px;
  border-radius: 6px;
  color: #f1f1f1;
  background-color: #222;
  font-weight: 500;
  font-size: 12px;
  outline: none;
  transition: .3s;
  z-index: 1;
}
#description3 {
  position: absolute;
  top: 4px;
  left: -24px;
  font-family: "Poppins", sans-serif;
  width: auto;
  display: block;
  text-align: left;
  padding: 6px 20px 14px;
  border-radius: 6px;
  color: #f1f1f1;
  background-color: #222;
  font-weight: 500;
  font-size: 12px;
  outline: none;
  transition: .3s;
  z-index: 1;
}
#copy {
  filter: invert(1);
  width: 15px;
  position: absolute;
  top: 14px;
  margin-left: 4px;
  cursor: pointer;
  transition: .2s;
  z-index: 999;
  opacity: 0;
}
#copy:hover {
  transform: scale(1.2);
}
#copy2 {
  width: 15px;
  position: absolute;
  border-radius: 50%;
  top: 15px;
  margin-left: 4px;
  z-index: 999;
  opacity: 0;
  display: none;
  transition: .5s;
}

var trigger = 0;
const button = document.getElementById("submitInput");
const button2 = document.getElementById("action");
const inputStyle = document.getElementById("inputAccount");
var version = "";
button.addEventListener("click", function() {
 if (trigger === 0) {
  var input = document.getElementById("inputAccount").value;
  var img = document.getElementById("loading");
  if (input === "") {
    inputStyle.style.cssText = "background-color: #d1d1d1; outline: 1px solid #333;";
    document.getElementById("description3").style.top = "-30px";
        document.getElementById("description3").style.left = "-25px";
    setTimeout(() => {
      inputStyle.style.cssText = "background-color: #f1f1f1; outline: 1px solid #ccc;";
      document.getElementById("description3").style.top = "4px";
        document.getElementById("description3").style.left = "-24px";
    }, "3000");
    return;
  }
  button.style.cssText = "transition: 1s";
  setTimeout(() => {
    button.style.cssText = "transition: 1s;transform: scale(1) !important; width: 626px; color: #222; background-color: #222";
  }, "100");
  setTimeout(() => {
    img.style.opacity = "1";
  }, "400");
  var matchingPattern = /^(?:https?:\/\/)?((?:www\.)?[^:\/?\n]+)/img;;
  var match = matchingPattern.exec(input);
  if(match && match[1]) {
    console.log(match[1]);
    input = match[1];
  }
  fetch(`https://api.allorigins.win/get?charset=ISO-8859-1&url=${encodeURIComponent('https://')}` + input + `${encodeURIComponent('/docs/api/v3/')}`)
  .then(response => response.text())
  .then(data => {
    const versionRegex = /version=([0-9.]+)/; 
    const matchedGroups = data.match(versionRegex);
    if (matchedGroups && matchedGroups[1]) {
      version = matchedGroups[1];
      trigger=2;
      setTimeout(() => {
        img.style.opacity = "0";
      }, "1950");
      setTimeout(() => {
        button.innerHTML = `Your current LiveAgent version is <strong><u>${matchedGroups[1]}</u></strong> <img id='copy' src='https://cdn-icons-png.flaticon.com/512/1621/1621635.png'/><img id='copy2' src='https://png.pngtree.com/png-vector/20220801/ourmid/pngtree-check-icon-from-business-bicolor-set-accept-like-apply-vector-png-image_19358580.jpg'/>`;
        button.style.color = "#f1f1f1";
        button2.style.right = "-2px";
        button2.style.fontSize = "40px";
        button2.style.lineHeight = "44px";
        button2.innerHTML = "&times;";
      }, "2000");
      setTimeout(() => {
        const copy = document.getElementById("copy");
        copy.style.opacity = "1";
      }, "2500");
    } else {
      setTimeout(() => {
      trigger=1;
        button.innerHTML = "You've most likely provided an <strong><u>incorrect LiveAgent URL</u></strong>.<img id='copy' src='' style='display:none;'/>";
        button.style.color = "#f1f1f1";
        button2.style.right = "-2px";
        button2.style.fontSize = "30px";
        button2.style.lineHeight = "46px";
        button2.innerHTML = "&#8634;";
        document.getElementById("description2").style.top = "-30px";
        document.getElementById("description2").style.left = "-25px";
      }, "2000");
      setTimeout(() => {
        document.getElementById("description2").style.top = "4px";
        document.getElementById("description2").style.left = "-24px";
      }, "9000");
    }
  })
 } else if (trigger === 2) {
   copyTextToClipboard(version);
   function copyTextToClipboard(text) {
      var textField = document.createElement('textarea');
      textField.innerText = text;
      document.body.appendChild(textField);
      textField.select();
      document.execCommand('copy');
      textField.remove();
   }
   document.getElementById("copy").style.display = "none";
   document.getElementById("copy2").style.display = "inline";
   document.getElementById("copy2").style.opacity = "1";
  setTimeout(() => {
   document.getElementById("copy2").style.opacity = "0";
  }, "1500");
  setTimeout(() => {
   document.getElementById("copy").style.display = "inline";
   document.getElementById("copy2").style.display = "none";
  }, "2100");
 } else {
   return;
 }
});
button2.addEventListener("click", function() {
  const copy = document.getElementById("copy");
  copy.style.opacity = "0";
  trigger=0;
  button2.style.right = "30px";
  button.style.cssText = "transition: 0.6s; color: #222; transform: scale(1); width: 420px; background-color: #222;";
  setTimeout(() => {
    button.innerHTML = "Get Version";
    button.style.cssText = "transition: 1s; color: #222; transform: scale(1); width: 120px; background-color: #222;";
  }, "500");
  setTimeout(() => {
    button.innerHTML = "Get Version<img id='loading' src='https://media.tenor.com/On7kvXhzml4AAAAj/loading-gif.gif'/>";
    button.style.cssText = "width: 120px; color: #f1f1f1; transition: 0.3s;";
  }, "1100");
})

This Pen is owned by Sebastián Slušník on CodePen.

See more by @sebasti-n-slun-k on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.