Spaces:
Running
Running
| <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> |