Spaces:

LinksGPT
/

URLShortener

Running

App Files Files Community

LinksGPT commited on Nov 18, 2024

Commit

fa332ee

verified ·

1 Parent(s): d5a7e0d

Update index.html

Browse files

Files changed (1) hide show

index.html +426 -19

index.html CHANGED Viewed

@@ -1,19 +1,426 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</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/" 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>