Spaces:

AllBajo
/

mp3-mp4

Running

App Files Files Community

AllBajo commited on Jul 9, 2025

Commit

dd60a28

verified ·

1 Parent(s): 9e385de

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +486 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Mp3 Mp4
-emoji: 🏢
-colorFrom: red
 colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: mp3-mp4
+emoji: 🐳
+colorFrom: purple
 colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,486 @@
-<!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>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>mp3_mp4 - Video Downloader</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* Custom animations */
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        @keyframes slideUp {
+            from { transform: translateY(20px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-out forwards;
+        }
+        .slide-up {
+            animation: slideUp 0.4s ease-out forwards;
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.1);
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #4f46e5;
+            border-radius: 3px;
+        }
+        /* Dark mode toggle transition */
+        .dark-toggle {
+            transition: all 0.3s ease;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen transition-colors duration-300">
+    <!-- App Container -->
+    <div class="max-w-md mx-auto min-h-screen flex flex-col overflow-hidden relative" id="app">
+        <!-- Welcome Screen -->
+        <div id="welcome-screen" class="flex flex-col items-center justify-center flex-1 p-6 fade-in">
+            <div class="text-center slide-up">
+                <div class="w-24 h-24 bg-indigo-500 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
+                    <i class="fas fa-music text-white text-4xl"></i>
+                </div>
+                <h1 class="text-4xl font-bold text-indigo-600 dark:text-indigo-400 mb-2">mp3_mp4</h1>
+                <p class="text-lg text-gray-600 dark:text-gray-300 mb-8">Paste your link and download easily</p>
+                <button onclick="showMainScreen()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-8 rounded-full shadow-md transition-all transform hover:scale-105">
+                    Start
+                </button>
+            </div>
+        </div>
+        <!-- Main Screen -->
+        <div id="main-screen" class="flex-1 flex flex-col p-6 hidden">
+            <!-- Header -->
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">Download Media</h2>
+                <div class="flex items-center space-x-4">
+                    <button onclick="toggleDarkMode()" class="dark-toggle p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">
+                        <i class="fas fa-moon dark:hidden"></i>
+                        <i class="fas fa-sun hidden dark:block"></i>
+                    </button>
+                    <button onclick="showHistoryScreen()" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">
+                        <i class="fas fa-history"></i>
+                    </button>
+                </div>
+            </div>
+            <!-- Input Form -->
+            <div class="flex-1 flex flex-col">
+                <div class="mb-6">
+                    <label for="video-url" class="block text-sm font-medium mb-2">Video URL</label>
+                    <div class="relative">
+                        <input type="text" id="video-url" placeholder="Paste YouTube, TikTok, Instagram, etc. link here"
+                               class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all">
+                        <button onclick="pasteFromClipboard()" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 px-3 py-1 rounded-md text-sm transition-colors">
+                            <i class="fas fa-paste mr-1"></i> Paste
+                        </button>
+                    </div>
+                </div>
+                <div class="mb-6">
+                    <label class="block text-sm font-medium mb-2">Download Format</label>
+                    <div class="grid grid-cols-2 gap-4">
+                        <button id="mp3-btn" onclick="selectFormat('mp3')" class="format-btn bg-indigo-100 dark:bg-indigo-900 border-2 border-indigo-300 dark:border-indigo-700 py-3 px-4 rounded-lg flex items-center justify-center transition-all hover:bg-indigo-200 dark:hover:bg-indigo-800">
+                            <i class="fas fa-music mr-2"></i> MP3 (Audio)
+                        </button>
+                        <button id="mp4-btn" onclick="selectFormat('mp4')" class="format-btn bg-gray-100 dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-700 py-3 px-4 rounded-lg flex items-center justify-center transition-all hover:bg-gray-200 dark:hover:bg-gray-700">
+                            <i class="fas fa-video mr-2"></i> MP4 (Video)
+                        </button>
+                    </div>
+                </div>
+                <div class="mt-auto">
+                    <button id="download-btn" onclick="startDownload()" disabled class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg shadow-md transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center">
+                        <i class="fas fa-download mr-2"></i> Download
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Download Progress Screen -->
+        <div id="progress-screen" class="flex-1 flex flex-col items-center justify-center p-6 hidden">
+            <div class="text-center max-w-xs">
+                <div class="relative w-24 h-24 mb-6">
+                    <div class="absolute inset-0 rounded-full border-4 border-indigo-200 dark:border-indigo-800"></div>
+                    <div id="progress-circle" class="absolute inset-0 rounded-full border-4 border-indigo-500 border-t-indigo-500 border-r-indigo-500 animate-spin" style="clip: rect(0, 24px, 24px, 12px);"></div>
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <i id="progress-icon" class="fas fa-download text-indigo-500 text-2xl"></i>
+                    </div>
+                </div>
+                <h3 id="progress-title" class="text-xl font-semibold mb-2">Preparing Download</h3>
+                <p id="progress-message" class="text-gray-600 dark:text-gray-300 mb-6">Validating your link...</p>
+                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-6">
+                    <div id="progress-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
+                </div>
+                <button onclick="cancelDownload()" class="text-indigo-600 dark:text-indigo-400 font-medium hover:underline">
+                    Cancel
+                </button>
+            </div>
+        </div>
+        <!-- History Screen -->
+        <div id="history-screen" class="flex-1 flex flex-col p-6 hidden">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">Download History</h2>
+                <button onclick="showMainScreen()" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">
+                    <i class="fas fa-arrow-left"></i>
+                </button>
+            </div>
+            <div class="flex-1 overflow-y-auto">
+                <div id="history-list" class="space-y-3">
+                    <!-- History items will be added here dynamically -->
+                    <div class="text-center py-10 text-gray-500" id="empty-history">
+                        <i class="fas fa-history text-4xl mb-3 opacity-30"></i>
+                        <p>Your download history is empty</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Settings Menu -->
+        <div id="settings-menu" class="absolute inset-0 bg-white dark:bg-gray-800 shadow-lg z-10 hidden flex-col p-6">
+            <div class="flex justify-between items-center mb-8">
+                <h2 class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">Settings</h2>
+                <button onclick="hideSettingsMenu()" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="space-y-6">
+                <div>
+                    <h3 class="font-medium mb-3">Appearance</h3>
+                    <div class="flex items-center justify-between">
+                        <span>Dark Mode</span>
+                        <label class="relative inline-flex items-center cursor-pointer">
+                            <input type="checkbox" id="dark-mode-toggle" class="sr-only peer">
+                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div>
+                        </label>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="font-medium mb-3">Download Options</h3>
+                    <div class="space-y-4">
+                        <div class="flex items-center justify-between">
+                            <span>Default Format</span>
+                            <select class="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-200 rounded-md px-3 py-1 text-sm">
+                                <option>MP3</option>
+                                <option>MP4</option>
+                            </select>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span>Video Quality</span>
+                            <select class="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-200 rounded-md px-3 py-1 text-sm">
+                                <option>720p (Recommended)</option>
+                                <option>480p</option>
+                                <option>360p</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="font-medium mb-3">About</h3>
+                    <p class="text-sm text-gray-600 dark:text-gray-300">App mp3_mp4 - Designed to simplify your downloads</p>
+                    <p class="text-sm text-gray-500 mt-2">Version 1.0.0</p>
+                </div>
+            </div>
+            <div class="mt-auto pt-6">
+                <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg shadow-md transition-all">
+                    Save Settings
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // App state
+        let currentFormat = null;
+        let downloadInProgress = false;
+        let downloadHistory = JSON.parse(localStorage.getItem('downloadHistory')) || [];
+        // DOM elements
+        const welcomeScreen = document.getElementById('welcome-screen');
+        const mainScreen = document.getElementById('main-screen');
+        const progressScreen = document.getElementById('progress-screen');
+        const historyScreen = document.getElementById('history-screen');
+        const settingsMenu = document.getElementById('settings-menu');
+        const downloadBtn = document.getElementById('download-btn');
+        const videoUrlInput = document.getElementById('video-url');
+        const progressBar = document.getElementById('progress-bar');
+        const progressTitle = document.getElementById('progress-title');
+        const progressMessage = document.getElementById('progress-message');
+        const progressCircle = document.getElementById('progress-circle');
+        const progressIcon = document.getElementById('progress-icon');
+        const historyList = document.getElementById('history-list');
+        const emptyHistory = document.getElementById('empty-history');
+        const darkModeToggle = document.getElementById('dark-mode-toggle');
+        // Initialize app
+        function initApp() {
+            // Check for dark mode preference
+            if (localStorage.getItem('darkMode') === 'true' ||
+                (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                document.documentElement.classList.add('dark');
+                darkModeToggle.checked = true;
+            }
+            // Load history
+            renderHistory();
+        }
+        // Screen navigation
+        function showMainScreen() {
+            welcomeScreen.classList.add('hidden');
+            mainScreen.classList.remove('hidden');
+            progressScreen.classList.add('hidden');
+            historyScreen.classList.add('hidden');
+            settingsMenu.classList.add('hidden');
+        }
+        function showProgressScreen() {
+            mainScreen.classList.add('hidden');
+            progressScreen.classList.remove('hidden');
+        }
+        function showHistoryScreen() {
+            mainScreen.classList.add('hidden');
+            historyScreen.classList.remove('hidden');
+        }
+        function showSettingsMenu() {
+            settingsMenu.classList.remove('hidden');
+        }
+        function hideSettingsMenu() {
+            settingsMenu.classList.add('hidden');
+        }
+        // Format selection
+        function selectFormat(format) {
+            currentFormat = format;
+            // Update button styles
+            document.querySelectorAll('.format-btn').forEach(btn => {
+                btn.classList.remove('border-indigo-300', 'dark:border-indigo-700', 'bg-indigo-100', 'dark:bg-indigo-900');
+                btn.classList.add('border-gray-300', 'dark:border-gray-700', 'bg-gray-100', 'dark:bg-gray-800');
+            });
+            const selectedBtn = document.getElementById(`${format}-btn`);
+            selectedBtn.classList.remove('border-gray-300', 'dark:border-gray-700', 'bg-gray-100', 'dark:bg-gray-800');
+            selectedBtn.classList.add('border-indigo-300', 'dark:border-indigo-700', 'bg-indigo-100', 'dark:bg-indigo-900');
+            // Enable download button if URL is present
+            updateDownloadButtonState();
+        }
+        // Update download button state
+        function updateDownloadButtonState() {
+            const url = videoUrlInput.value.trim();
+            downloadBtn.disabled = !(url && currentFormat);
+        }
+        // Paste from clipboard
+        function pasteFromClipboard() {
+            navigator.clipboard.readText().then(text => {
+                videoUrlInput.value = text;
+                updateDownloadButtonState();
+            }).catch(err => {
+                console.error('Failed to read clipboard:', err);
+                // Fallback for browsers that don't support clipboard API
+                videoUrlInput.value = '';
+                videoUrlInput.placeholder = "Paste not supported, type manually";
+            });
+        }
+        // Start download process
+        function startDownload() {
+            const url = videoUrlInput.value.trim();
+            if (!url || !currentFormat) return;
+            showProgressScreen();
+            downloadInProgress = true;
+            // Simulate download process (in a real app, this would call your API)
+            simulateDownloadProcess(url, currentFormat);
+        }
+        // Cancel download
+        function cancelDownload() {
+            downloadInProgress = false;
+            progressTitle.textContent = 'Download Cancelled';
+            progressMessage.textContent = 'The download was cancelled by the user';
+            progressIcon.className = 'fas fa-times-circle text-red-500 text-2xl';
+            progressBar.style.width = '0%';
+            setTimeout(() => {
+                showMainScreen();
+            }, 2000);
+        }
+        // Simulate download process (replace with actual API call)
+        function simulateDownloadProcess(url, format) {
+            // Validation phase
+            progressTitle.textContent = 'Validating Link';
+            progressMessage.textContent = 'Checking if the URL is valid...';
+            progressBar.style.width = '10%';
+            setTimeout(() => {
+                if (!isValidUrl(url)) {
+                    downloadInProgress = false;
+                    progressTitle.textContent = 'Invalid Link';
+                    progressMessage.textContent = 'Please check the URL and try again';
+                    progressIcon.className = 'fas fa-exclamation-circle text-red-500 text-2xl';
+                    progressBar.style.width = '0%';
+                    setTimeout(() => {
+                        showMainScreen();
+                    }, 2000);
+                    return;
+                }
+                // Download phase
+                progressTitle.textContent = 'Downloading';
+                progressMessage.textContent = `Preparing ${format.toUpperCase()} file...`;
+                progressBar.style.width = '30%';
+                setTimeout(() => {
+                    progressBar.style.width = '60%';
+                    progressMessage.textContent = 'Processing media...';
+                    setTimeout(() => {
+                        // Completion phase
+                        downloadInProgress = false;
+                        progressBar.style.width = '100%';
+                        progressTitle.textContent = 'Download Complete';
+                        progressMessage.textContent = `Your ${format.toUpperCase()} file is ready`;
+                        progressIcon.className = 'fas fa-check-circle text-green-500 text-2xl';
+                        // Add to history
+                        addToHistory(url, format);
+                        setTimeout(() => {
+                            showMainScreen();
+                            progressBar.style.width = '0%';
+                        }, 2000);
+                    }, 1500);
+                }, 1500);
+            }, 1500);
+        }
+        // Validate URL (simplified for demo)
+        function isValidUrl(url) {
+            try {
+                new URL(url);
+                return true;
+            } catch (e) {
+                return false;
+            }
+        }
+        // History management
+        function addToHistory(url, format) {
+            const entry = {
+                id: Date.now(),
+                url,
+                format,
+                title: `Downloaded ${format.toUpperCase()} from ${extractDomain(url)}`,
+                date: new Date().toLocaleString(),
+                filename: `media_${Date.now()}.${format}`
+            };
+            downloadHistory.unshift(entry);
+            localStorage.setItem('downloadHistory', JSON.stringify(downloadHistory));
+            renderHistory();
+        }
+        function renderHistory() {
+            if (downloadHistory.length === 0) {
+                emptyHistory.classList.remove('hidden');
+                return;
+            }
+            emptyHistory.classList.add('hidden');
+            historyList.innerHTML = '';
+            downloadHistory.forEach(entry => {
+                const historyItem = document.createElement('div');
+                historyItem.className = 'bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700';
+                historyItem.innerHTML = `
+                    <div class="flex justify-between items-start mb-2">
+                        <h3 class="font-medium truncate">${entry.title}</h3>
+                        <span class="text-xs text-gray-500 ml-2 whitespace-nowrap">${entry.date}</span>
+                    </div>
+                    <div class="flex items-center justify-between text-sm">
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">
+                            ${entry.format.toUpperCase()}
+                        </span>
+                        <div class="space-x-2">
+                            <button onclick="playMedia('${entry.filename}')" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300">
+                                <i class="fas fa-play"></i> Play
+                            </button>
+                            <button onclick="showInFolder('${entry.filename}')" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300">
+                                <i class="fas fa-folder-open"></i> Folder
+                            </button>
+                        </div>
+                    </div>
+                `;
+                historyList.appendChild(historyItem);
+            });
+        }
+        // Simulate media actions
+        function playMedia(filename) {
+            alert(`In a real app, this would play: ${filename}`);
+        }
+        function showInFolder(filename) {
+            alert(`In a real app, this would open folder containing: ${filename}`);
+        }
+        // Extract domain from URL
+        function extractDomain(url) {
+            try {
+                const domain = new URL(url).hostname.replace('www.', '');
+                return domain.split('.')[0];
+            } catch (e) {
+                return 'unknown';
+            }
+        }
+        // Dark mode toggle
+        function toggleDarkMode() {
+            const isDark = document.documentElement.classList.toggle('dark');
+            localStorage.setItem('darkMode', isDark);
+            darkModeToggle.checked = isDark;
+        }
+        // Event listeners
+        videoUrlInput.addEventListener('input', updateDownloadButtonState);
+        darkModeToggle.addEventListener('change', toggleDarkMode);
+        // Initialize
+        document.addEventListener('DOMContentLoaded', initApp);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AllBajo/mp3-mp4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>