<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aortx - Short & Safe Your Link</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .fade-in { animation: fadeIn 1s ease-in-out; }

        /* Hamburger Menu */
        .menu-hidden {
            display: none;
        }

        @media (min-width: 768px) {
            .menu-hidden {
                display: block;
            }
        }

        /* Animasi Loading */
        .spinner {
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-top: 4px solid #ffffff;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        footer {
            background-color: #141414; 
            color: #e5e5e5;
            text-align: center;
            padding: 1rem;
            font-size: 0.9rem;
            margin-top: 2rem;
            opacity: 0.8;
        }
        footer a {
            color: #e50914;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        footer a:hover {
            color: #f39c12;
        }
    </style>
</head>
<body class="bg-gray-900 text-white font-sans">
    <!-- Header dengan Navigasi -->
    <header class="w-full bg-gray-800 py-4 fade-in flex justify-between items-center px-6">
        <h1 class="text-2xl font-bold text-red-500">
            <span class="text-red-500">Aortx</span><span class="text-yellow-500">-URL</span>
        </h1>
        <!-- Hamburger Menu -->
        <div>
            <button id="menuBtn" class="text-white text-2xl focus:outline-none md:hidden">
                &#9776;
            </button>
        </div>
        <!-- Menu Dropdown -->
        <nav id="menu" class="menu-hidden bg-gray-700 p-4 rounded absolute top-16 right-6 md:relative md:top-0 md:right-0 md:flex md:bg-transparent md:p-0 md:rounded-none">
            <ul class="space-y-4 md:space-y-0 md:flex md:space-x-6">
                <li><a href="index.html" class="text-white hover:text-yellow-400">Official Site</a></li>
                <li><a href="https://t.me/Aortxservice_bot" class="text-white hover:text-yellow-400">Contact</a></li>
            </ul>
        </nav>
    </header>
<!-- Main Content -->
    <main class="flex flex-col items-center justify-center flex-1 w-full px-4 fade-in">
    	<br>
    	<br>
        <h2 class="text-2xl font-semibold mb-4">Paste the URL to be shortened</h2>
        <input id="url" type="text" placeholder="Enter the link here" class="w-full max-w-md p-2 mb-4 text-gray-900 rounded bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-500">
        <input id="alias" type="text" placeholder="Custom Alias (optional)" class="w-full max-w-md p-2 mb-4 text-gray-900 rounded bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-500">
        <button id="shortenBtn" class="px-4 py-2 mb-4 text-lg font-semibold text-white bg-red-500 rounded hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 transform hover:scale-105 transition-transform duration-300">Shorten URL</button>
        
        <!-- Animasi Loading -->
        <div id="loading" class="hidden mt-4">
            <div class="spinner mx-auto"></div>
            <p class="text-center text-yellow-400 mt-2">Processing your request...</p>
        </div>
<!-- Hasil Short Link -->
        <div id="result" class="w-full max-w-md mt-4 p-4 bg-gray-800 rounded shadow-lg hidden">
            <h3 class="text-xl font-semibold mb-2 text-center">Shortened URL:</h3>
            <p id="shortenedLink" class="text-center text-yellow-400 break-words"></p>
            <button id="copyBtn" class="px-4 py-2 mt-4 text-lg font-semibold text-white bg-green-500 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 transform hover:scale-105 transition-transform duration-300 hidden">Copy</button>
        </div>
        <br>
            <p class="mb-8 text-center">AortxURL is a free tool to shorten & Safe URLs and generate short links</p>
            <div class="w-full max-w-md space-y-4">
        <div class="p-4 bg-gray-800 rounded shadow-lg transform hover:scale-105 transition-transform duration-300">
          <h3 class="text-xl font-semibold mb-2">Easy</h3>
          <p>AortxURL is easy and fast, enter the long link to get your shortened link</p>
        </div>
<div class="p-4 bg-gray-800 rounded shadow-lg transform hover:scale-105 transition-transform duration-300">
          <h3 class="text-xl font-semibold mb-2">Shortened</h3>
          <p>Use any link, no matter what size, AortxURL always shortens</p>
        </div>
        <div class="p-4 bg-gray-800 rounded shadow-lg transform hover:scale-105 transition-transform duration-300">
          <h3 class="text-xl font-semibold mb-2">Safelink</h3>
          <p>There's a riddle to solve; if successful, it will lead to the shortened link you created.</p>
        </div>
        <br>
<a href="https://bicolink.com/ref/105260228674011553587"><img src="https://bicolink.com/i/bicolink_referal_banner.jpeg" style="width:150px;height:150px;"></a>
        </main>
        <br>
        	<br>
<footer>
      <p>© 2025 <a href="https://t.me/Aortxservice_bot" target="_blank">AortxUrl</a> - Tool to shorten & Safe a long link</p>

    <!-- JavaScript -->
    <script>
const menuBtn = document.getElementById('menuBtn');
        const menu = document.getElementById('menu');

        menuBtn.addEventListener('click', () => {
            menu.classList.toggle('menu-hidden');
        });

        const shortenBtn = document.getElementById('shortenBtn');
        const loadingDiv = document.getElementById('loading');
        const resultDiv = document.getElementById('result');
        const shortenedLink = document.getElementById('shortenedLink');
        const copyBtn = document.getElementById('copyBtn');

        shortenBtn.addEventListener('click', async () => {
            const url = document.getElementById('url').value;
            const alias = document.getElementById('alias').value;
            const apiToken = '8875526deedb79c7337a2781215ce85a87848092';
            const apiEndpoint = `https://bicolink.com/api`;

            if (!url) {
                alert('Please enter a URL.');
                return;
            }
loadingDiv.classList.remove('hidden');
            resultDiv.classList.add('hidden');
            copyBtn.classList.add('hidden');

            try {
                const apiUrl = `${apiEndpoint}?api=${apiToken}&url=${encodeURIComponent(url)}${alias ? `&alias=${alias}` : ''}`;
                const response = await fetch(apiUrl);
                const data = await response.json();

                if (data.status === 'success') {
                    shortenedLink.innerHTML = `<a href="${data.shortenedUrl}" target="_blank" class="text-blue-400 underline">${data.shortenedUrl}</a>`;
                    resultDiv.classList.remove('hidden');
                    copyBtn.classList.remove('hidden');
                } else {
                    alert(`Error: ${data.message}`);
                }
            } catch (error) {
                console.error('Error:', error);
                alert('Something went wrong! Please try again.');
            } finally {
                loadingDiv.classList.add('hidden');
            }
        });

        copyBtn.addEventListener('click', () => {
            const textToCopy = shortenedLink.textContent;

            navigator.clipboard.writeText(textToCopy).then(() => {
                alert('Shortened URL copied to clipboard!');
            }).catch(err => {
                console.error('Failed to copy text: ', err);
            });
        });
    </script>
</body>
</html>