Hugging Face's logo

Spaces:
dropkickJesus999
/
video2audio
Running

App Files Community
video2audio
File size: 8,745 Bytes 
3d4c1d2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video2Audio - Simple Converter</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-shadow {
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
        }
        .bg-custom-gradient {
            background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
        }
    </style>
</head>
<body class="bg-black text-white">
    <div class="min-h-screen bg-custom-gradient">
        <header class="container mx-auto px-4 py-8">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <i class="fas fa-microphone-alt text-red-600 text-3xl mr-2"></i>
                    <h1 class="text-2xl font-bold">Video<span class="text-red-600">2Audio</span></h1>
                </div>
                <nav>
                    <ul class="flex space-x-6">
                        <li><a href="#" class="hover:text-red-600">Home</a></li>
                        <li><a href="#" class="hover:text-red-600">About</a></li>
                        <li><a href="#" class="hover:text-red-600">FAQ</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <main class="container mx-auto px-4 py-12">
            <div class="max-w-4xl mx-auto text-center mb-12">
                <h2 class="text-4xl font-bold mb-4">Convert Videos to Audio Easily</h2>
                <p class="text-gray-400">Extract audio from any video file or YouTube URL</p>
            </div>

            <div class="max-w-2xl mx-auto bg-gray-900 rounded-xl p-8 custom-shadow">
                <div class="mb-6">
                    <div class="flex mb-4">
                        <button class="bg-red-600 text-white px-6 py-2 rounded-l-lg font-medium">URL</button>
                        <button class="bg-gray-800 text-white px-6 py-2 font-medium">Upload</button>
                        <button class="bg-gray-800 text-white px-6 py-2 rounded-r-lg font-medium">Device</button>
                    </div>
                    <div class="relative">
                        <input type="text" placeholder="Paste YouTube URL or video link here" 
                               class="w-full bg-gray-800 border border-gray-700 rounded-lg py-4 px-4 focus:outline-none focus:border-red-600 placeholder-gray-500">
                        <button class="absolute right-2 top-2 bg-red-600 text-white px-6 py-2 rounded-lg"><i class="fas fa-arrow-right"></i></button>
                    </div>
                </div>

                <div class="mb-8">
                    <h3 class="font-medium mb-3">Output Format</h3>
                    <div class="flex flex-wrap gap-3">
                        <button class="bg-gray-800 hover:bg-red-600 text-white px-4 py-2 rounded-lg">MP3</button>
                        <button class="bg-gray-800 hover:bg-red-600 text-white px-4 py-2 rounded-lg">WAV</button>
                        <button class="bg-gray-800 hover:bg-red-600 text-white px-4 py-2 rounded-lg">M4A</button>
                        <button class="bg-gray-800 hover:bg-red-600 text-white px-4 py-2 rounded-lg">OGG</button>
                        <button class="bg-gray-800 hover:bg-red-600 text-white px-4 py-2 rounded-lg">FLAC</button>
                    </div>
                </div>

                <div class="mb-6">
                    <h3 class="font-medium mb-3">Bitrate</h3>
                    <div class="flex items-center space-x-4">
                        <div class="w-full bg-gray-800 rounded-lg h-2">
                            <div class="bg-red-600 h-2 rounded-lg" style="width: 70%"></div>
                        </div>
                        <span class="text-gray-400">320 kbps</span>
                    </div>
                </div>

                <button class="w-full bg-red-600 hover:bg-red-700 text-white py-4 rounded-lg font-bold text-lg">
                    Convert Now <i class="fas fa-bolt ml-2"></i>
                </button>

                <div class="mt-6 text-center text-gray-400 text-sm">
                    <p>By using our service, you agree to our <a href="#" class="text-red-400 hover:underline">Terms of Service</a>.</p>
                    <p>We respect your privacy and comply with all applicable laws.</p>
                </div>
            </div>
        </main>

        <section class="container mx-auto px-4 py-12">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-3xl font-bold mb-8 text-center">Why Choose Our Service?</h2>
                <div class="grid md:grid-cols-3 gap-8">
                    <div class="bg-gray-900 p-6 rounded-xl text-center custom-shadow">
                        <div class="text-red-600 text-4xl mb-4"><i class="fas fa-shield-alt"></i></div>
                        <h3 class="text-xl font-bold mb-2">Safe & Secure</h3>
                        <p class="text-gray-400">Your files are processed securely and deleted immediately after conversion.</p>
                    </div>
                    <div class="bg-gray-900 p-6 rounded-xl text-center custom-shadow">
                        <div class="text-red-600 text-4xl mb-4"><i class="fas fa-bolt"></i></div>
                        <h3 class="text-xl font-bold mb-2">Fast Conversion</h3>
                        <p class="text-gray-400">Convert files in seconds with our high-speed servers.</p>
                    </div>
                    <div class="bg-gray-900 p-6 rounded-xl text-center custom-shadow">
                        <div class="text-red-600 text-4xl mb-4"><i class="fas fa-mobile-alt"></i></div>
                        <h3 class="text-xl font-bold mb-2">Mobile Friendly</h3>
                        <p class="text-gray-400">Works perfectly on all devices, anywhere.</p>
                    </div>
                </div>
            </div>
        </section>

        <footer class="bg-black py-8">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="mb-4 md:mb-0">
                        <h3 class="text-xl font-bold">Video<span class="text-red-600">2Audio</span></h3>
                        <p class="text-gray-500 text-sm">© 2023 All Rights Reserved</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <script>
        // Simple demo functionality
        document.querySelector('.fa-arrow-right').parentElement.addEventListener('click', function() {
            const urlInput = document.querySelector('input[type="text"]');
            if (urlInput.value.trim() === '') {
                alert('Please enter a valid video URL');
                return;
            }
            
            if (!urlInput.value.includes('http')) {
                alert('Please enter a valid URL starting with http:// or https://');
                return;
            }
            
            // In a real app, this would send the URL to a backend for processing
            console.log('Converting URL:', urlInput.value);
            
            // Show a success message (in a real app, this would happen after conversion)
            setTimeout(() => {
                alert('Conversion complete! Your audio file is ready to download.');
            }, 2000);
        });
    </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=dropkickJesus999/video2audio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>