index.html

<script>
  document.documentElement.className = 'js';
</script>
<script>
  let jqueryParams = [],
    jQuery = function(r) {
      return jqueryParams = [...jqueryParams, r], jQuery
    },
    $ = function(r) {
      return jqueryParams = [...jqueryParams, r], $
    };
  window.jQuery = jQuery, window.$ = jQuery;
  let customHeadScripts = !1;
  jQuery.fn = jQuery.prototype = {}, $.fn = jQuery.prototype = {}, jQuery.noConflict = function(r) {
    if (window.jQuery) return jQuery = window.jQuery, $ = window.jQuery, customHeadScripts = !0, jQuery.noConflict
  }, jQuery.ready = function(r) {
    jqueryParams = [...jqueryParams, r]
  }, $.ready = function(r) {
    jqueryParams = [...jqueryParams, r]
  }, jQuery.load = function(r) {
    jqueryParams = [...jqueryParams, r]
  }, $.load = function(r) {
    jqueryParams = [...jqueryParams, r]
  }, jQuery.fn.ready = function(r) {
    jqueryParams = [...jqueryParams, r]
  }, $.fn.ready = function(r) {
    jqueryParams = [...jqueryParams, r]
  };
</script>
<script src="https://d3btrheyejmivy.cloudfront.net/wp-includes/js/jquery/jquery.min.js?ver=3.6.4" id="jquery-core-js"></script>
<script src="https://d3btrheyejmivy.cloudfront.net/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.0" id="jquery-migrate-js"></script>
<script id="jquery-js-after">
  jqueryParams.length && $.each(jqueryParams, function(e, r) {
    if ("function" == typeof r) {
      var n = String(r);
      n.replace("$", "jQuery");
      var a = new Function("return " + n)();
      $(document).ready(a)
    }
  });
</script>
<div class="introduction">
    <h2>Welcome to LinksGPT's Space</h2>
    <p>
        <a href="https://www.linksgpt.com" target="_blank" class="text-blue-600 hover:underline">LinksGPT</a> is a professional link management platform for custom short URLs, brand building, and conversion optimization. 
        It offers intelligent URL shortening and expansion, custom domains, team roles, customizable QR codes, tracking and AI-based in-depth analytics, deep linking, openAPI, and enhanced link security.
    </p>
    <p>
        <a href="https://www.linksgpt.com/url-expander" target="_blank" class="text-blue-600 hover:underline">URL Expander</a> is a tool that reveals the final destination of any URL, including shortened links. It allows users to see the original or expanded URL that is hidden behind a short link.
    </p>
</div>
<div class="et_pb_module et_pb_code et_pb_code_0">
  <div class="et_pb_code_inner">
    <div class="relative px-4 mx-auto">
      <div class="max-w-3xl mx-auto">
        <form class="sm:flex items-center mb-8">
          <input class="input w-full mb-3 sm:mb-0 sm:mr-4 py-4 px-6 rounded-[4px] text-gray-500 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple" id="url" placeholder="Try to shorten your URL, it expires in 7 days. Log in to create a permanent link." required="">
          <button id="shorten-btn" class="relative group sm:flex-shrink-0 inline-block w-full sm:w-auto py-4 px-6 text-center text-white bg-black font-semibold rounded-[4px] overflow-hidden" type="submit">
            <div class="absolute top-0 right-full w-full h-full bg-[#00DFAA] transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
            <span class="relative" id="shorten-btn-text">Shorten URL</span>
          </button>
        </form>
        <div class="" id="shortern-table-container">
          <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
              <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                <table class="min-w-full divide-y divide-gray-200 !mb-0 !border-none" id="shortened-links-list">
                  <thead class="bg-gray-50">
                    <tr>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center">
                          <span>Shortened URL</span>
                          <div class="inline-block text-left">
                            <svg class="w-3 h-3 ml-2 text-gray-500 cursor-pointer tooltip-icon" fill="#000000" viewBox="0 0 32 32">
                              <path d="M18 23l-1-0v-8.938c0-0.011-0.003-0.021-0.003-0.031s0.003-0.020 0.003-0.031c0-0.552-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v8h-1c-0.552 0-1 0.448-1 1s0.448 1 1 1h4c0.552 0 1-0.448 1-1s-0.448-1-1-1zM16 11c1.105 0 2-0.896 2-2s-0.895-2-2-2-2 0.896-2 2 0.896 2 2 2zM16-0c-8.836 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zM16 30.031c-7.72 0-14-6.312-14-14.032s6.28-14 14-14 14 6.28 14 14-6.28 14.032-14 14.032z"></path>
                            </svg>
                            <div class="absolute z-10 w-56 p-2 mt-4 ml-2 text-xs leading-tight text-white transform bg-black rounded-lg normal-case tooltip-text hidden font-normal">
                              <p> The temporary link will expire in 7 days. You can visit linksgpt.com to use more features.</p>
                            </div>
                          </div>
                        </div>
                      </th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> Original URL</th>
                      <th scope="col" class="relative px-6 py-3">
                        <span class="sr-only">Delete</span>
                      </th>
                    </tr>
                  </thead>
                  <tbody class="bg-white divide-y divide-gray-200">
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="relative mt-3 px-6 py-4 overflow-hidden rounded-xl">
          <div class="relative z-10 flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <a class="inline-flex flex-wrap items-center px-5 py-3.5 text-sm text-black font-bold rounded-lg transition duration-300 bg-[#00DFAA] hover:bg-[#1affc9]" href="https://www.linksgpt.com/?utm_source=HuggingFace" target="_blank" rel="noopener">
                <span class="mr-3 font-bold">Start using LinksGPT's professional url shortener service</span>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9.33333 3.33337L14 8.00004M14 8.00004L9.33333 12.6667M14 8.00004L2 8.00004" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>jQuery(function ($) {
        const baseurl = "https://app.linksgpt.com";
        const data = localStorage.getItem("shorten_links") || "[]";
        const dataArr = JSON.parse(data);

        const deleteSvg = `<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24" fill=none stroke=#ff6565 stroke-width=1.5 stroke-linecap=butt stroke-linejoin=round><line x1=20 y1=5 x2=5 y2=20></line><line x1=5 y1=5 x2=20 y2=20></line></svg>`;
        const copySvg = `<svg width=20px height=20px viewBox="0 0 1024 1024" xmlns=http://www.w3.org/2000/svg><path d="M768 832a128 128 0 0 1-128 128H192A128 128 0 0 1 64 832V384a128 128 0 0 1 128-128v64a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64h64z"/><path d="M384 128a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64H384zm0-64h448a128 128 0 0 1 128 128v448a128 128 0 0 1-128 128H384a128 128 0 0 1-128-128V192A128 128 0 0 1 384 64z"/></svg>`;


        function renderData(item) {
          $("#shortern-table-container").removeClass("hidden");
          $("#shortened-links-list tbody").prepend(
            "<tr><td class='px-6 py-4 whitespace-nowrap'><a class='text-[#00DFAA] font-bold' href='" +
              item.short_link +
              "' target=_blank>" +
              item.short_link +
              "</a></td><td class='px-6 py-4 whitespace-nowrap '><a class='inline-block w-64 truncate' href='" +
              item.original_link +
              "' target=_blank title='" +
              item.original_link +
              "'>" +
              item.original_link +
              "</a></td><td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'><div class='flex gap-[4px]'><a href=# class='w-[20px] copy-link hover:fill-[#818cf8]' data-id='" +
              item.code +
              "'>" +
              copySvg +
              "</a><a href=# class='w-[20px] fill-red-400 hover:fill-red-600 delete-link' data-id='" +
              item.code +
              "'>" +
              deleteSvg +
              "</a></div></td></tr>"
          );
        }

        dataArr.forEach((item) => {
          renderData(item);
        });

        if (dataArr.length > 0) {
          $("#shortern-table-container").removeClass("hidden");
        }

        $("#shortened-links-list").on("click", ".delete-link", function (e) {
          e.preventDefault();
          var id = $(this).data("id");
          $(this).parents("tr").remove();
          dataArr.forEach((item, index) => {
            if (item.code === id) {
              dataArr.splice(index, 1);
            }
          });
          localStorage.setItem("shorten_links", JSON.stringify(dataArr));

          if (dataArr.length === 0) {
            $("#shortern-table-container").addClass("hidden");
          }
        });

        $("form").submit(function (e) {
          e.preventDefault();
          var url = $("#url").val();

          // loading
          $("#shorten-btn-text").text("Shortening...");
          $("#shorten-btn").attr("disabled", true);
          $("#shorten-btn").addClass("bg-gray-400");

          $.ajax({
            url: `${baseurl}/api/v1/links/shorten`,
            type: "POST",
            data: {
              destination: url,
            },
            dataType: "json",
            success: function (data) {
              var shortLink = data.data.link;
              var originalLink = data.data.destination;
              const item = {
                short_link: shortLink,
                original_link: originalLink,
                code: data.data.file,
              };
              renderData(item);
              $("#url").val("");

              if (dataArr.length >= 3) {
                dataArr.shift();

                $("#shortened-links-list tbody tr:last-child").remove();
              }

              dataArr.push(item);
              localStorage.setItem("shorten_links", JSON.stringify(dataArr));

              $("#shorten-btn-text").text("Shorten URL");
              $("#shorten-btn").attr("disabled", false);
              $("#shorten-btn").removeClass("bg-gray-400").addClass("bg-black");
            },
            error: function (error) {
              showMessage("error", error.responseJSON.message);
              $("#shorten-btn-text").text("Shorten URL");
              $("#shorten-btn").attr("disabled", false);
              $("#shorten-btn").removeClass("bg-gray-400").addClass("bg-black");
            },
          });
        });

        // message component
        function showMessage(type, message) {
        }

        function copyToClipboard(val) {
          var aux = document.createElement("input");
          aux.setAttribute("value", val);
          document.body.appendChild(aux);
          aux.select();
          document.execCommand("copy");
          document.body.removeChild(aux);
        }

        $("#shortened-links-list").on("click", ".copy-link", function (e) {
          e.preventDefault();
          var id = $(this).data("id");
          var link = "";
          dataArr.forEach((item) => {
            if (item.code === id) {
              link = item.short_link;
            }
          });
          copyToClipboard(link);
          showMessage("success", "Link copied to clipboard");
        });

        $(".tooltip-icon").hover(
          function () {
            $(this).next().removeClass("hidden");
          },
          function () {
            $(this).next().addClass("hidden");
          }
        );
      });
    </script>
  </div>
</div>
<style>
/* Container styling */
.relative {
    margin-top: 0px;
}

/* Form styling */
form input.input {
    font-size: 14px;
    color: #333;
    transition: border-color 0.3s, box-shadow 0.3s;
}

form input.input:focus {
    border-color: #6B46C1;
    box-shadow: 0 0 5px rgba(107, 70, 193, 0.5);
}

form button {
    cursor: pointer;
    transition: transform 0.3s, background 0.3s;
}

form button:hover {
    transform: scale(1.05);
}

/* Table styling */
table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 15px;
}

thead th {
    background: #f9fafb;
    text-align: left;
    padding: 10px;
}

tbody tr:nth-child(even) {
    background: #f1f5f9;
}

tbody td {
    padding: 10px;
}

/* Tooltip icon styling */
.tooltip-icon {
    width: 12px;
    height: 12px;
    margin-left: 6px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    fill: #6B7280;
    transition: fill 0.3s;
}

.tooltip-icon:hover {
    fill: #4F46E5;
}

/* Tooltip text styling */
.tooltip-text {
    position: absolute;
    z-index: 10;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tooltip-icon:hover + .tooltip-text {
    opacity: 1;
    visibility: visible;
}

/* Call-to-action box styling */
.relative.mt-3 {
    position: relative;
    overflow: hidden;
    color: white;
    padding: 20px;
}

.relative.mt-3 h3 {
    margin: 0;
}

.relative.mt-3 a {
    color: black;
    transition: background 0.3s, transform 0.3s;
}

.relative.mt-3 a:hover {
    transform: translateY(-3px);
}

/* General button hover effect */
button:hover, a:hover {
    background: linear-gradient(to right, #00DFAA, #1affc9);
    transition: background 0.3s;
}

#url {
    width: 100%;
    max-width: 550px;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#url:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
    outline: none;
}

form .input,
#shorten-btn {
    height: 48px;
}

body {
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    margin: 0;
    padding: 0;
}

.introduction {
    margin-bottom: 24px;
    padding: 16px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.introduction h2 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

.introduction p {
    margin: 0 0 8px;
}


</style>