<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All-in-One Video Downloader</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }

        header {
            background: linear-gradient(to right, #4776E6, #8E54E9);
            color: white;
            padding: 25px 20px;
            text-align: center;
        }

        h1 {
            font-size: 1.8rem;
            margin-bottom: 10px;
        }

        .subtitle {
            font-size: 1rem;
            opacity: 0.9;
        }

        .main-content {
            padding: 25px;
        }

        .input-section {
            margin-bottom: 25px;
        }

        .input-group {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .url-input {
            padding: 15px;
            border: 2px solid #e1e1e1;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s;
        }

        .url-input:focus {
            border-color: #4776E6;
            outline: none;
            box-shadow: 0 0 0 3px rgba(71, 118, 230, 0.2);
        }

        .download-btn {
            background: linear-gradient(to right, #4776E6, #8E54E9);
            color: white;
            border: none;
            padding: 15px;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .download-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(71, 118, 230, 0.4);
        }

        .download-btn:active {
            transform: translateY(0);
        }

        .download-btn:disabled {
            background: #b0b0b0;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .loader {
            display: none;
            text-align: center;
            margin: 20px 0;
        }

        .spinner {
            border: 5px solid #f3f3f3;
            border-top: 5px solid #4776E6;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .results-section {
            display: none;
            margin-top: 25px;
        }

        .video-info {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        }

        .video-title {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: #333;
        }

        .video-author {
            color: #666;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .thumbnail-container {
            text-align: center;
            margin: 15px 0;
        }

        .video-thumbnail {
            max-width: 100%;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .download-options {
            margin-top: 20px;
        }

        .download-options h3 {
            margin-bottom: 15px;
            color: #333;
            border-bottom: 2px solid #e1e1e1;
            padding-bottom: 8px;
        }

        .media-option {
            background-color: white;
            border: 1px solid #e1e1e1;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s;
        }

        .media-option:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }

        .media-details {
            flex: 1;
        }

        .media-quality {
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

        .media-type {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 5px;
        }

        .media-size {
            color: #888;
            font-size: 0.85rem;
        }

        .download-link {
            background: linear-gradient(to right, #4776E6, #8E54E9);
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s;
            white-space: nowrap;
        }

        .download-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(71, 118, 230, 0.3);
        }

        .error-message {
            background-color: #ffeaea;
            color: #d63031;
            padding: 15px;
            border-radius: 10px;
            margin-top: 20px;
            display: none;
        }

        .supported-platforms {
            margin-top: 30px;
            text-align: center;
        }

        .platforms-title {
            font-size: 1.1rem;
            margin-bottom: 15px;
            color: #333;
        }

        .platform-icons {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .platform-icon {
            background-color: #f8f9fa;
            padding: 10px 15px;
            border-radius: 8px;
            font-weight: 600;
            color: #555;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
        }

        footer {
            text-align: center;
            padding: 20px;
            color: rgba(255, 255, 255, 0.8);
            margin-top: 30px;
            font-size: 0.9rem;
        }

        @media (max-width: 600px) {
            .container {
                border-radius: 15px;
            }
            
            header {
                padding: 20px 15px;
            }
            
            h1 {
                font-size: 1.5rem;
            }
            
            .main-content {
                padding: 20px 15px;
            }
            
            .media-option {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .download-link {
                align-self: stretch;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>All-in-One Video Downloader</h1>
            <p class="subtitle">Download videos from multiple platforms in one place</p>
        </header>
        
        <div class="main-content">
            <div class="input-section">
                <div class="input-group">
                    <input type="url" class="url-input" placeholder="Paste video URL here (TikTok, Instagram, etc.)" required>
                    <button class="download-btn" id="fetchBtn">
                        <span>Fetch Video</span>
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 16L12 4M12 16L8 12M12 16L16 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M4 20H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </button>
                </div>
            </div>
            
            <div class="loader" id="loader">
                <div class="spinner"></div>
                <p>Fetching video information...</p>
            </div>
            
            <div class="error-message" id="errorMessage"></div>
            
            <div class="results-section" id="resultsSection">
                <div class="video-info">
                    <h2 class="video-title" id="videoTitle"></h2>
                    <div class="video-author" id="videoAuthor"></div>
                    <div class="thumbnail-container">
                        <img class="video-thumbnail" id="videoThumbnail" src="" alt="Video Thumbnail">
                    </div>
                </div>
                
                <div class="download-options">
                    <h3>Download Options</h3>
                    <div id="downloadOptions"></div>
                </div>
            </div>
            
            <div class="supported-platforms">
                <h3 class="platforms-title">Supported Platforms</h3>
                <div class="platform-icons">
                    <div class="platform-icon">TikTok</div>
                    <div class="platform-icon">Instagram</div>
                    <div class="platform-icon">YouTube</div>
                    <div class="platform-icon">Facebook</div>
                    <div class="platform-icon">Twitter</div>
                </div>
            </div>
        </div>
    </div>
    
    <footer>
        <p>All-in-One Video Downloader &copy; 2023</p>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const urlInput = document.querySelector('.url-input');
            const fetchBtn = document.getElementById('fetchBtn');
            const loader = document.getElementById('loader');
            const errorMessage = document.getElementById('errorMessage');
            const resultsSection = document.getElementById('resultsSection');
            const videoTitle = document.getElementById('videoTitle');
            const videoAuthor = document.getElementById('videoAuthor');
            const videoThumbnail = document.getElementById('videoThumbnail');
            const downloadOptions = document.getElementById('downloadOptions');
            
            // API configuration
            const API_URL = 'https://social-download-all-in-one.p.rapidapi.com/v1/social/autolink';
            const API_KEY = '29f8c3b79amshc7b9755d426320dp1b94fajsn62b1821d47db';
            
            fetchBtn.addEventListener('click', fetchVideoInfo);
            
            // Allow Enter key to trigger the download
            urlInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    fetchVideoInfo();
                }
            });
            
            async function fetchVideoInfo() {
                const videoUrl = urlInput.value.trim();
                
                if (!videoUrl) {
                    showError('Please enter a valid video URL');
                    return;
                }
                
                // Reset UI
                hideError();
                hideResults();
                showLoader();
                fetchBtn.disabled = true;
                
                try {
                    const response = await fetch(API_URL, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-RapidAPI-Host': 'social-download-all-in-one.p.rapidapi.com',
                            'X-RapidAPI-Key': API_KEY
                        },
                        body: JSON.stringify({ url: videoUrl })
                    });
                    
                    if (!response.ok) {
                        throw new Error(`API request failed with status ${response.status}`);
                    }
                    
                    const data = await response.json();
                    
                    if (data.error) {
                        throw new Error(data.message || 'Failed to fetch video information');
                    }
                    
                    displayVideoInfo(data);
                    
                } catch (error) {
                    console.error('Error:', error);
                    showError(`Failed to fetch video: ${error.message}`);
                } finally {
                    hideLoader();
                    fetchBtn.disabled = false;
                }
            }
            
            function displayVideoInfo(data) {
                // Set video information
                videoTitle.textContent = data.title || 'Untitled Video';
                videoAuthor.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z" stroke="currentColor" stroke-width="2"/>
                    <path d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg> By ${data.author || 'Unknown'}`;
                
                if (data.thumbnail) {
                    videoThumbnail.src = data.thumbnail;
                    videoThumbnail.alt = data.title || 'Video Thumbnail';
                }
                
                // Clear previous download options
                downloadOptions.innerHTML = '';
                
                // Create download options for each media
                if (data.medias && data.medias.length > 0) {
                    data.medias.forEach((media, index) => {
                        const mediaOption = document.createElement('div');
                        mediaOption.className = 'media-option';
                        
                        const mediaDetails = document.createElement('div');
                        mediaDetails.className = 'media-details';
                        
                        const quality = document.createElement('div');
                        quality.className = 'media-quality';
                        quality.textContent = formatQuality(media.quality);
                        
                        const type = document.createElement('div');
                        type.className = 'media-type';
                        type.textContent = `${media.type.toUpperCase()} • ${media.extension.toUpperCase()}`;
                        
                        const size = document.createElement('div');
                        size.className = 'media-size';
                        size.textContent = formatFileSize(media.data_size);
                        
                        mediaDetails.appendChild(quality);
                        mediaDetails.appendChild(type);
                        mediaDetails.appendChild(size);
                        
                        const downloadLink = document.createElement('a');
                        downloadLink.className = 'download-link';
                        downloadLink.href = media.url;
                        downloadLink.target = '_blank';
                        downloadLink.textContent = 'Download';
                        
                        mediaOption.appendChild(mediaDetails);
                        mediaOption.appendChild(downloadLink);
                        
                        downloadOptions.appendChild(mediaOption);
                    });
                } else {
                    downloadOptions.innerHTML = '<p>No download options available for this video.</p>';
                }
                
                showResults();
            }
            
            function formatQuality(quality) {
                // Convert quality string to a more readable format
                return quality
                    .split('_')
                    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
                    .join(' ');
            }
            
            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }
            
            function showLoader() {
                loader.style.display = 'block';
            }
            
            function hideLoader() {
                loader.style.display = 'none';
            }
            
            function showResults() {
                resultsSection.style.display = 'block';
            }
            
            function hideResults() {
                resultsSection.style.display = 'none';
            }
            
            function showError(message) {
                errorMessage.textContent = message;
                errorMessage.style.display = 'block';
            }
            
            function hideError() {
                errorMessage.style.display = 'none';
            }
        });
    </script>
</body>
</html>