Hugging Face's logo

Spaces:
vikarshana
/
Deepseek
Build error

App Files Community
ssiisnsksksnsjsksk commited on
Commit
8f1ca22
·
verified ·
1 Parent(s): b9ee532

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +4 -218
templates/index.html CHANGED
@@ -1,222 +1,8 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>YT Audio • Downloader</title>
7
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
8
- <script src="https://cdn.tailwindcss.com"></script>
9
- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
10
- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
11
- </head>
12
- <body class="bg-[#fafafa] dark:bg-gray-900 min-h-screen flex items-center justify-center p-4">
13
- <div class="w-full max-w-xl mx-auto">
14
- <!-- Ultra Modern Header -->
15
- <div class="text-center mb-10 space-y-3">
16
- <div class="inline-flex items-center justify-center p-2 rounded-full bg-red-50 dark:bg-red-900/20 mb-4">
17
- <i class="fab fa-youtube text-red-500 text-3xl"></i>
18
- </div>
19
- <h1 class="text-3xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 bg-clip-text text-transparent">
20
- YouTube Audio Downloader
21
- </h1>
22
- <p class="text-gray-500 dark:text-gray-400 text-sm">Simple • Fast • High Quality</p>
23
- </div>
24
-
25
- <!-- Main Card -->
26
- <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg shadow-black/5 p-6 mb-6">
27
- <!-- Search Input -->
28
- <div class="relative mb-6 group">
29
- <input type="text" id="youtubeUrl"
30
- placeholder="Paste YouTube URL here"
31
- class="w-full pl-12 pr-4 py-4 bg-gray-50 dark:bg-gray-900/50 border-0 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all duration-300 text-gray-700 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500">
32
- <div class="absolute inset-y-0 left-4 flex items-center pointer-events-none transition-transform group-focus-within:scale-110">
33
- <i class="fas fa-link text-gray-400 group-focus-within:text-blue-500 transition-colors"></i>
34
- </div>
35
- </div>
36
 
37
- <!-- Search Button -->
38
- <button onclick="getVideoInfo()"
39
- class="w-full bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white py-4 px-6 rounded-xl transition-all duration-300 flex items-center justify-center space-x-2 font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:ring-offset-2 dark:ring-offset-gray-800">
40
- <i class="fas fa-search text-sm"></i>
41
- <span>Get Video Info</span>
42
- </button>
43
- </div>
44
-
45
- <!-- Video Info Card -->
46
- <div id="videoInfo" class="hidden animate-fade-in">
47
- <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg shadow-black/5 overflow-hidden mb-6">
48
- <!-- Thumbnail Container with Gradient Overlay -->
49
- <div id="thumbnailContainer" class="relative">
50
- <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent z-10"></div>
51
- </div>
52
-
53
- <!-- Video Details -->
54
- <div class="p-6 space-y-4">
55
- <h2 id="videoTitle" class="text-xl font-semibold text-gray-800 dark:text-white line-clamp-2"></h2>
56
-
57
- <div class="space-y-2">
58
- <div id="channelName" class="flex items-center text-sm text-gray-500 dark:text-gray-400">
59
- <i class="fas fa-user-circle mr-2 text-blue-500"></i>
60
- <span></span>
61
- </div>
62
- <div id="duration" class="flex items-center text-sm text-gray-500 dark:text-gray-400">
63
- <i class="fas fa-clock mr-2 text-blue-500"></i>
64
- <span></span>
65
- </div>
66
- </div>
67
-
68
- <!-- Download Button -->
69
- <button onclick="downloadAudio()"
70
- class="w-full bg-green-500 hover:bg-green-600 active:bg-green-700 text-white py-4 px-6 rounded-xl transition-all duration-300 flex items-center justify-center space-x-2 font-medium focus:outline-none focus:ring-2 focus:ring-green-500/50 focus:ring-offset-2 dark:ring-offset-gray-800 mt-4">
71
- <i class="fas fa-download text-sm"></i>
72
- <span>Download MP3</span>
73
- </button>
74
- </div>
75
- </div>
76
- </div>
77
- </div>
78
-
79
- <script>
80
- const Toast = Swal.mixin({
81
- toast: true,
82
- position: 'top-end',
83
- showConfirmButton: false,
84
- timer: 3000,
85
- timerProgressBar: true,
86
- didOpen: (toast) => {
87
- toast.addEventListener('mouseenter', Swal.stopTimer)
88
- toast.addEventListener('mouseleave', Swal.resumeTimer)
89
- }
90
- });
91
-
92
- function showLoading(message) {
93
- return Swal.fire({
94
- html: `
95
- <div class="space-y-3">
96
- <div class="w-16 h-16 mx-auto border-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"></div>
97
- <div class="text-gray-600 text-sm">${message}</div>
98
- </div>
99
- `,
100
- showConfirmButton: false,
101
- allowOutsideClick: false,
102
- background: '#ffffff',
103
- customClass: {
104
- popup: 'rounded-2xl'
105
- }
106
- });
107
- }
108
-
109
- function showSuccess(message) {
110
- Toast.fire({
111
- icon: 'success',
112
- title: message,
113
- background: '#F0FDF4',
114
- iconColor: '#22C55E'
115
- });
116
- }
117
-
118
- function showError(message) {
119
- Toast.fire({
120
- icon: 'error',
121
- title: message,
122
- background: '#FEF2F2',
123
- iconColor: '#EF4444'
124
- });
125
- }
126
-
127
- function formatDuration(seconds) {
128
- const minutes = Math.floor(seconds / 60);
129
- const remainingSeconds = seconds % 60;
130
- return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
131
- }
132
-
133
- function getVideoInfo() {
134
- const url = $('#youtubeUrl').val().trim();
135
- if (!url) {
136
- showError('Please enter a YouTube URL');
137
- return;
138
- }
139
-
140
- showLoading('Fetching video information...');
141
- $('#videoInfo').addClass('hidden');
142
-
143
- $.ajax({
144
- url: '/get-info',
145
- type: 'POST',
146
- contentType: 'application/json',
147
- data: JSON.stringify({ url: url }),
148
- success: function(response) {
149
- $('#thumbnailContainer').html(`
150
- <img src="${response.thumbnail}" alt="Video thumbnail"
151
- class="w-full object-cover transition-transform duration-300 hover:scale-105">
152
- `);
153
- $('#videoTitle').text(response.title);
154
- $('#channelName span').text(response.channel);
155
- $('#duration span').text(formatDuration(response.duration));
156
- $('#videoInfo').removeClass('hidden');
157
- Swal.close();
158
- showSuccess('Video information retrieved');
159
- },
160
- error: function(xhr) {
161
- Swal.close();
162
- showError(xhr.responseJSON?.error || 'Failed to get video information');
163
- }
164
- });
165
- }
166
-
167
- function downloadAudio() {
168
- const url = $('#youtubeUrl').val().trim();
169
- if (!url) {
170
- showError('Please enter a YouTube URL');
171
- return;
172
- }
173
-
174
- showLoading('Preparing your download...');
175
-
176
- $.ajax({
177
- url: '/download',
178
- type: 'POST',
179
- contentType: 'application/json',
180
- data: JSON.stringify({ url: url }),
181
- xhrFields: {
182
- responseType: 'blob'
183
- },
184
- success: function(response) {
185
- const blob = new Blob([response], { type: 'audio/mp3' });
186
- const downloadUrl = window.URL.createObjectURL(blob);
187
- const a = document.createElement('a');
188
- a.style.display = 'none';
189
- a.href = downloadUrl;
190
- a.download = $('#videoTitle').text() + '.mp3';
191
- document.body.appendChild(a);
192
- a.click();
193
- window.URL.revokeObjectURL(downloadUrl);
194
- Swal.close();
195
- showSuccess('Download started');
196
- },
197
- error: function(xhr) {
198
- Swal.close();
199
- showError('Download failed');
200
- }
201
- });
202
- }
203
-
204
- // Smooth page load animation
205
- document.addEventListener('DOMContentLoaded', () => {
206
- requestAnimationFrame(() => {
207
- document.body.style.opacity = '0';
208
- requestAnimationFrame(() => {
209
- document.body.style.transition = 'opacity 0.5s ease-in';
210
- document.body.style.opacity = '1';
211
- });
212
- });
213
- });
214
-
215
- // Check system dark mode preference
216
- if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
217
- document.documentElement.classList.add('dark');
218
- }
219
- </script>
220
- </head>
221
  </body>
222
  </html>
 
1
  <!DOCTYPE html>
2
+ <html>
3
+
4
+ <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
 
6
+ <h1>පකද බලම්නේ</h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  </body>
8
  </html>