<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ibrahim Adams Image to URL Converter</title>
    <style>
        /* Background Video */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Poppins', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #000;
            overflow: hidden;
        }

        video#bgVideo {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

        .main {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.95);
            padding: 50px;
            border-radius: 15px;
            box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4);
            width: 95%;
            max-width: 600px;
        }

        .main h1 {
            margin-bottom: 20px;
            font-size: 28px;
            text-align: center;
            background: linear-gradient(90deg, #ff7eb3, #ff758c, #ff7eb3);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
        }

        .main input[type="file"] {
            font-size: 16px;
            text-align: center;
            background: rgba(240, 240, 240, 0.7);
            border: 1px solid #ddd;
            width: 300px;
            padding: 10px;
            border-radius: 5px;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .main button {
            font-size: 16px;
            padding: 10px;
            width: 300px;
            margin-top: 15px;
            border: none;
            border-radius: 5px;
            background: linear-gradient(90deg, #ff758c, #ff7eb3);
            color: #fff;
            cursor: pointer;
            box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
            transition: background 0.3s;
        }

        .main button:hover {
            background: linear-gradient(90deg, #ff758c, #ff5b88);
        }

        .main img {
            max-width: 100%;
            max-height: 250px;
            margin-top: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .link-container input {
            font-size: 16px;
            width: 90%;
            padding: 5px;
            border: none;
            border-bottom: 2px solid #ccc;
            margin-bottom: 10px;
            background: transparent;
            text-align: center;
        }

        .link-container button {
            font-size: 16px;
            width: 150px;
            margin-top: 10px;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background: linear-gradient(90deg, #ff758c, #ff7eb3);
            color: #fff;
            cursor: pointer;
            box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
        }

        .link-container button:hover {
            background: linear-gradient(90deg, #ff758c, #ff5b88);
        }

        /* Loading Animation */
        .loading {
            width: 40px;
            height: 40px;
            border: 5px solid rgba(0, 0, 0, 0.1);
            border-top: 5px solid #ff758c;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-top: 20px;
            display: none;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>

    <!-- Background Video -->
    <video id="bgVideo" autoplay muted loop>
        <source src="https://files.catbox.moe/2siipl.mp4" type="video/mp4">
    </video>

    <!-- Autoplay Song -->
    <audio id="bgAudio"></audio>

    <div class="main">
        <h1>BWM XMD URL GENERATOR</h1>
        <input type="file" id="imageInput" accept="image/*">
        <img id="preview" alt="Preview" style="display: none;">
        <button class="uploadImage" onclick="uploadImage()">Upload and Get URL</button>
        <div class="loading" id="loading"></div>
        <div class="link-container" style="display: none;">
            <input type="text" id="link" readonly>
            <button onclick="copyLink()">Copy Link</button>
            <button onclick="convertAgain()">Convert Again</button>
        </div>
    </div>

    <script>
        const githubRawBaseUrl = "https://raw.githubusercontent.com/ibrahimaitech/bwm-xmd-music/master/tiktokmusic";
        const audioFiles = Array.from({ length: 161 }, (_, i) => `sound${i + 1}.mp3`);

        const audio = document.getElementById('bgAudio');

        // Function to play a random song
        function playRandomSong() {
            const randomAudioFile = audioFiles[Math.floor(Math.random() * audioFiles.length)];
            const audioUrl = `${githubRawBaseUrl}/${randomAudioFile}`;
            audio.src = audioUrl;
            audio.play();
        }

        // Start playing a random song when the page is interacted with
        document.body.addEventListener('click', () => {
            audio.volume = 0.5; // Adjust volume
            playRandomSong();
        }, { once: true });

        // Automatically play the next random song when the current one ends
        audio.addEventListener('ended', playRandomSong);

        function uploadImage() {
            const fileInput = document.getElementById('imageInput');
            const file = fileInput.files[0];
            const loading = document.getElementById('loading');

            if (file) {
                const formData = new FormData();
                formData.append('image', file);

                // Show loading animation
                loading.style.display = 'block';

                fetch('https://api.imgbb.com/1/upload?key=9d7203bfe1190849decc1ca44f0a7685', {
                    method: 'POST',
                    body: formData,
                })
                .then(response => response.json())
                .then(data => {
                    const imageUrl = data.data.url;
                    document.getElementById('preview').src = imageUrl;
                    document.getElementById('preview').style.display = 'block';

                    const linkContainer = document.querySelector('.link-container');
                    linkContainer.style.display = 'flex';
                    document.querySelector('#link').value = imageUrl;
                    console.log('Image URL:', imageUrl);

                    // Remove the "Upload and Get URL" button
                    document.querySelector('.uploadImage').style.display = 'none';
                    document.querySelector('#imageInput').style.display = 'none';

                    // Hide loading animation
                    loading.style.display = 'none';
                })
                .catch(error => {
                    console.error('Error uploading image:', error);
                    loading.style.display = 'none'; // Hide loading animation
                });
            }
        }

        function copyLink() {
            const imageUrl = document.getElementById('link').value;

            // Create a temporary textarea to copy the URL to the clipboard
            const textarea = document.createElement('textarea');
            textarea.value = imageUrl;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);

            alert('Link copied to clipboard!');
        }

        function convertAgain() {
            // Reset the form for another conversion
            document.getElementById('imageInput').value = '';
            document.getElementById('preview').style.display = 'none';
            document.querySelector('.link-container').style.display = 'none';
            document.querySelector('.uploadImage').style.display = 'block';
        }
    </script>
</body>
</html>