Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Twitter Video Downloader</title> | |
| <script src="https://cdn.jsdelivr.net/npm/react@18.0.0/umd/react.development.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/react-dom@18.0.0/umd/react-dom.development.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.js"></script> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .card-shadow { | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .hover-scale { | |
| transition: transform 0.3s ease; | |
| } | |
| .hover-scale:hover { | |
| transform: scale(1.02); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: .5; | |
| } | |
| } | |
| .slide-in { | |
| animation: slideIn 0.5s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| transform: translateY(-20px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .spinner { | |
| border: 3px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| border-top: 3px solid white; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { useState, useEffect } = React; | |
| function App() { | |
| const [url, setUrl] = useState(''); | |
| const [isProcessing, setIsProcessing] = useState(false); | |
| const [downloadOptions, setDownloadOptions] = useState([]); | |
| const [error, setError] = useState(''); | |
| const [showSuccess, setShowSuccess] = useState(false); | |
| const [copiedLink, setCopiedLink] = useState(null); | |
| const handleDownload = async (e) => { | |
| e.preventDefault(); | |
| setError(''); | |
| setDownloadOptions([]); | |
| setShowSuccess(false); | |
| if (!url.trim()) { | |
| setError('Please enter a Twitter URL'); | |
| return; | |
| } | |
| setIsProcessing(true); | |
| // Simulate processing delay | |
| setTimeout(() => { | |
| setIsProcessing(false); | |
| setDownloadOptions([ | |
| { quality: 'HD 1080p', size: '15.2 MB', url: '#' }, | |
| { quality: '720p', size: '8.7 MB', url: '#' }, | |
| { quality: '480p', size: '4.3 MB', url: '#' }, | |
| { quality: 'Audio Only', size: '3.2 MB', url: '#' } | |
| ]); | |
| }, 2000); | |
| }; | |
| const handleCopyLink = (index) => { | |
| setCopiedLink(index); | |
| setTimeout(() => setCopiedLink(null), 2000); | |
| }; | |
| return ( | |
| <div className="min-h-screen bg-gray-50"> | |
| {/* Header */} | |
| <header className="bg-white shadow-sm border-b"> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div className="flex justify-between items-center h-16"> | |
| <div className="flex items-center"> | |
| <i className="fab fa-twitter text-blue-400 text-2xl mr-3"></i> | |
| <h1 className="text-xl font-bold text-gray-900">Twitter Video Downloader</h1> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" className="text-blue-600 hover:text-blue-800 font-medium"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| {/* Main Content */} | |
| <main className="max-w-4xl mx-auto px-4 py-12"> | |
| <div className="text-center mb-8"> | |
| <h2 className="text-3xl font-bold text-gray-900 mb-4">Download Twitter Videos</h2> | |
| <p className="text-gray-600 max-w-2xl mx-auto"> | |
| Enter the URL of any Twitter video and download it in multiple qualities. | |
| Fast, simple, and completely free. | |
| </p> | |
| </div> | |
| {/* Download Form */} | |
| <div className="bg-white rounded-2xl card-shadow p-8 mb-8 slide-in"> | |
| <form onSubmit={handleDownload}> | |
| <div className="mb-6"> | |
| <label htmlFor="url" className="block text-sm font-medium text-gray-700 mb-2"> | |
| Twitter Video URL | |
| </label> | |
| <div className="relative"> | |
| <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i className="fas fa-link text-gray-400"></i> | |
| </div> | |
| <input | |
| type="url" | |
| id="url" | |
| value={url} | |
| onChange={(e) => setUrl(e.target.value)} | |
| placeholder="https://twitter.com/username/status/1234567890" | |
| className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" | |
| /> | |
| </div> | |
| </div> | |
| {error && ( | |
| <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg"> | |
| <p className="text-red-600 text-sm">{error}</p> | |
| </div> | |
| )} | |
| <button | |
| type="submit" | |
| disabled={isProcessing} | |
| className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-blue-700 transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed" | |
| > | |
| {isProcessing ? ( | |
| <span className="flex items-center justify-center"> | |
| <div className="spinner mr-3"></div> | |
| Processing... | |
| </span> | |
| ) : ( | |
| 'Download Video' | |
| )} | |
| </button> | |
| </form> | |
| </div> | |
| {/* Download Options */} | |
| {downloadOptions.length > 0 && ( | |
| <div className="bg-white rounded-2xl card-shadow p-8 slide-in"> | |
| <h3 className="text-xl font-semibold text-gray-900 mb-6">Available Downloads</h3> | |
| <div className="space-y-4"> | |
| {downloadOptions.map((option, index) => ( | |
| <div | |
| key={index} | |
| className="border border-gray-200 rounded-lg p-4 hover-scale cursor-pointer" | |
| > | |
| <div className="flex items-center justify-between"> | |
| <div className="flex items-center"> | |
| <div className="w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-600 rounded-lg flex items-center justify-center mr-4"> | |
| <i className="fas fa-video text-white"></i> | |
| </div> | |
| <div> | |
| <h4 className="font-medium text-gray-900">{option.quality}</h4> | |
| <p className="text-sm text-gray-500">{option.size}</p> | |
| </div> | |
| </div> | |
| <div className="flex items-center space-x-3"> | |
| <button | |
| onClick={() => handleCopyLink(index)} | |
| className="text-gray-400 hover:text-gray-600 transition duration-200" | |
| > | |
| <i className="fas fa-copy"></i> | |
| </button> | |
| <a | |
| href={option.url} | |
| download | |
| className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition duration-200" | |
| > | |
| Download | |
| </a> | |
| </div> | |
| </div> | |
| {copiedLink === index && ( | |
| <div className="mt-2 text-sm text-green-600"> | |
| <i className="fas fa-check mr-1"></i> | |
| Link copied to clipboard! | |
| </div> | |
| )} | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| )} | |
| {/* Success Message */} | |
| {showSuccess && ( | |
| <div className="mt-8 bg-green-50 border border-green-200 rounded-lg p-4"> | |
| <div className="flex items-center"> | |
| <i className="fas fa-check-circle text-green-500 mr-3"></i> | |
| <p className="text-green-700">Video downloaded successfully!</p> | |
| </div> | |
| </div> | |
| )} | |
| {/* How to Use */} | |
| <div className="mt-12 bg-white rounded-2xl card-shadow p-8"> | |
| <h3 className="text-xl font-semibold text-gray-900 mb-6">How to Use</h3> | |
| <div className="grid md:grid-cols-3 gap-6"> | |
| <div className="text-center"> | |
| <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i className="fas fa-link text-blue-600 text-xl"></i> | |
| </div> | |
| <h4 className="font-medium text-gray-900 mb-2">1. Copy URL</h4> | |
| <p className="text-sm text-gray-600">Copy the Twitter video URL you want to download</p> | |
| </div> | |
| <div className="text-center"> | |
| <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i className="fas fa-paste text-purple-600 text-xl"></i> | |
| </div> | |
| <h4 className="font-medium text-gray-900 mb-2">2. Paste URL</h4> | |
| <p className="text-sm text-gray-600">Paste the URL into the input field above</p> | |
| </div> | |
| <div className="text-center"> | |
| <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i className="fas fa-download text-green-600 text-xl"></i> | |
| </div> | |
| <h4 className="font-medium text-gray-900 mb-2">3. Download</h4> | |
| <p className="text-sm text-gray-600">Choose your preferred quality and download</p> | |
| </div> | |
| </div> | |
| </div> | |
| {/* Features */} | |
| <div className="mt-12 grid md:grid-cols-3 gap-6"> | |
| <div className="bg-white rounded-xl p-6 card-shadow hover-scale"> | |
| <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i className="fas fa-bolt text-blue-600"></i> | |
| </div> | |
| <h4 className="font-semibold text-gray-900 mb-2">Fast Downloads</h4> | |
| <p className="text-sm text-gray-600">High-speed processing for quick downloads</p> | |
| </div> | |
| <div className="bg-white rounded-xl p-6 card-shadow hover-scale"> | |
| <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i className="fas fa-shield-alt text-purple-600"></i> | |
| </div> | |
| <h4 className="font-semibold text-gray-900 mb-2">Secure & Private</h4> | |
| <p className="text-sm text-gray-600">Your data is never stored or shared</p> | |
| </div> | |
| <div className="bg-white rounded-xl p-6 card-shadow hover-scale"> | |
| <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i className="fas fa-mobile-alt text-green-600"></i> | |
| </div> | |
| <h4 className="font-semibold text-gray-900 mb-2">Mobile Friendly</h4> | |
| <p className="text-sm text-gray-600">Works perfectly on all devices</p> | |
| </div> | |
| </div> | |
| </main> | |
| {/* Footer */} | |
| <footer className="bg-gray-900 text-white py-8 mt-16"> | |
| <div className="max-w-7xl mx-auto px-4 text-center"> | |
| <p className="text-sm text-gray-400"> | |
| © 2024 Twitter Video Downloader. All rights reserved. | |
| </p> | |
| <p className="text-xs text-gray-500 mt-2"> | |
| This tool is for educational purposes only. Please respect copyright laws. | |
| </p> | |
| </div> | |
| </footer> | |
| </div> | |
| ); | |
| } | |
| ReactDOM.render(<App />, document.getElementById('root')); | |
| </script> | |
| </body> | |
| </html> |