ytdlp

Running

App Files Files Community

vbvbot9117 commited on Dec 28, 2024

Commit

be2b0cf

verified ·

1 Parent(s): 755a875

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +120 -45

templates/index.html CHANGED Viewed

@@ -6,65 +6,119 @@
     <title>YouTube Audio Downloader</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-100 min-h-screen">
-    <div class="container mx-auto px-4 py-8">
         <div class="max-w-2xl mx-auto">
-            <h1 class="text-3xl font-bold text-center mb-8 text-gray-800">YouTube Audio Downloader</h1>
-            <!-- Input Form -->
-            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
-                <div class="mb-4">
-                    <input type="text" id="youtubeUrl" placeholder="Paste YouTube URL here"
-                           class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                 </div>
                 <button onclick="getVideoInfo()"
-                        class="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-200">
                     Get Video Info
                 </button>
             </div>
             <!-- Video Info Section -->
-            <div id="videoInfo" class="hidden bg-white rounded-lg shadow-md p-6 mb-6">
-                <div id="videoDetails" class="mb-4">
-                    <div id="thumbnailContainer" class="mb-4"></div>
-                    <h2 id="videoTitle" class="text-xl font-semibold mb-2"></h2>
-                    <p id="channelName" class="text-gray-600"></p>
-                    <p id="duration" class="text-gray-600"></p>
-                </div>
-                <button onclick="downloadAudio()"
-                        class="w-full bg-green-500 text-white py-2 px-4 rounded-lg hover:bg-green-600 transition duration-200">
-                    Download Audio
-                </button>
-            </div>
-            <!-- Loading Indicator -->
-            <div id="loading" class="hidden">
-                <div class="flex justify-center items-center">
-                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
                 </div>
             </div>
-            <!-- Error Message -->
-            <div id="errorMessage" class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
-            </div>
         </div>
     </div>
     <script>
         function showLoading() {
-            $('#loading').removeClass('hidden');
         }
-        function hideLoading() {
-            $('#loading').addClass('hidden');
         }
         function showError(message) {
-            $('#errorMessage').text(message).removeClass('hidden');
-            setTimeout(() => {
-                $('#errorMessage').addClass('hidden');
-            }, 5000);
         }
         function formatDuration(seconds) {
@@ -90,17 +144,19 @@
                 data: JSON.stringify({ url: url }),
                 success: function(response) {
                     $('#thumbnailContainer').html(`
-                        <img src="${response.thumbnail}" alt="Video thumbnail" class="w-full rounded-lg">
                     `);
                     $('#videoTitle').text(response.title);
-                    $('#channelName').text(`Channel: ${response.channel}`);
-                    $('#duration').text(`Duration: ${formatDuration(response.duration)}`);
                     $('#videoInfo').removeClass('hidden');
-                    hideLoading();
                 },
                 error: function(xhr) {
                     showError(xhr.responseJSON?.error || 'Failed to get video information');
-                    hideLoading();
                 }
             });
         }
@@ -112,7 +168,16 @@
                 return;
             }
-            showLoading();
             $.ajax({
                 url: '/download',
@@ -132,14 +197,24 @@
                     document.body.appendChild(a);
                     a.click();
                     window.URL.revokeObjectURL(downloadUrl);
-                    hideLoading();
                 },
                 error: function(xhr) {
                     showError('Failed to download audio');
-                    hideLoading();
                 }
             });
         }
     </script>
 </body>
 </html>

     <title>YouTube Audio Downloader</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
 </head>
+<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-12">
         <div class="max-w-2xl mx-auto">
+            <!-- Header with animation -->
+            <div class="text-center mb-12 animate-fade-in">
+                <div class="flex items-center justify-center mb-4">
+                    <i class="fab fa-youtube text-red-500 text-5xl mr-3 animate-bounce"></i>
+                    <h1 class="text-4xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent">
+                        YouTube Audio Downloader
+                    </h1>
+                </div>
+                <p class="text-gray-600 text-lg">Convert and download your favorite YouTube videos as MP3</p>
+            </div>
+            <!-- Input Form with glassmorphism effect -->
+            <div class="bg-white bg-opacity-80 backdrop-blur-lg rounded-xl shadow-lg p-8 mb-8 transform transition-all duration-300 hover:shadow-xl border border-gray-100">
+                <div class="relative mb-6">
+                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                        <i class="fas fa-link text-blue-500"></i>
+                    </div>
+                    <input type="text" id="youtubeUrl"
+                           placeholder="Paste YouTube URL here"
+                           class="w-full pl-10 pr-4 py-4 border-2 border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all text-gray-700 bg-white bg-opacity-90">
                 </div>
                 <button onclick="getVideoInfo()"
+                        class="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-4 px-6 rounded-lg hover:from-blue-600 hover:to-blue-700 transition-all transform hover:scale-[1.02] flex items-center justify-center font-semibold">
+                    <i class="fas fa-search mr-2"></i>
                     Get Video Info
                 </button>
             </div>
             <!-- Video Info Section -->
+            <div id="videoInfo" class="hidden animate-fade-in">
+                <div class="bg-white bg-opacity-80 backdrop-blur-lg rounded-xl shadow-lg p-8 mb-8 transform transition-all duration-300 hover:shadow-xl border border-gray-100">
+                    <div id="videoDetails" class="mb-6">
+                        <div id="thumbnailContainer" class="mb-6 rounded-xl overflow-hidden shadow-md transform transition-all duration-300 hover:shadow-xl"></div>
+                        <h2 id="videoTitle" class="text-2xl font-semibold mb-4 text-gray-800"></h2>
+                        <div class="space-y-3">
+                            <p id="channelName" class="text-gray-600 flex items-center bg-gray-50 p-3 rounded-lg">
+                                <i class="fas fa-user-circle text-blue-500 mr-2"></i>
+                                <span></span>
+                            </p>
+                            <p id="duration" class="text-gray-600 flex items-center bg-gray-50 p-3 rounded-lg">
+                                <i class="fas fa-clock text-blue-500 mr-2"></i>
+                                <span></span>
+                            </p>
+                        </div>
+                    </div>
+                    <button onclick="downloadAudio()"
+                            class="w-full bg-gradient-to-r from-green-500 to-green-600 text-white py-4 px-6 rounded-lg hover:from-green-600 hover:to-green-700 transition-all transform hover:scale-[1.02] flex items-center justify-center font-semibold">
+                        <i class="fas fa-download mr-2"></i>
+                        Download Audio
+                    </button>
                 </div>
             </div>
         </div>
     </div>
     <script>
+        // Add custom styles for animations
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes fade-in {
+                from { opacity: 0; transform: translateY(20px); }
+                to { opacity: 1; transform: translateY(0); }
+            }
+            .animate-fade-in {
+                animation: fade-in 0.6s ease-out;
+            }
+        `;
+        document.head.appendChild(style);
         function showLoading() {
+            Swal.fire({
+                title: 'Processing...',
+                html: 'Please wait while we fetch the video information',
+                timerProgressBar: true,
+                showConfirmButton: false,
+                allowOutsideClick: false,
+                didOpen: () => {
+                    Swal.showLoading();
+                }
+            });
         }
+        function showSuccess(message) {
+            Swal.fire({
+                icon: 'success',
+                title: 'Success!',
+                text: message,
+                showConfirmButton: false,
+                timer: 2000,
+                position: 'top-end',
+                toast: true,
+                background: '#F0FDF4',
+                iconColor: '#22C55E'
+            });
         }
         function showError(message) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                text: message,
+                showConfirmButton: true,
+                position: 'top-end',
+                toast: true,
+                background: '#FEF2F2',
+                iconColor: '#EF4444'
+            });
         }
         function formatDuration(seconds) {
                 data: JSON.stringify({ url: url }),
                 success: function(response) {
                     $('#thumbnailContainer').html(`
+                        <img src="${response.thumbnail}" alt="Video thumbnail"
+                             class="w-full rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
                     `);
                     $('#videoTitle').text(response.title);
+                    $('#channelName span').text(`Channel: ${response.channel}`);
+                    $('#duration span').text(`Duration: ${formatDuration(response.duration)}`);
                     $('#videoInfo').removeClass('hidden');
+                    Swal.close();
+                    showSuccess('Video information retrieved successfully');
                 },
                 error: function(xhr) {
+                    Swal.close();
                     showError(xhr.responseJSON?.error || 'Failed to get video information');
                 }
             });
         }
                 return;
             }
+            Swal.fire({
+                title: 'Starting Download',
+                html: 'Preparing your audio file...',
+                timerProgressBar: true,
+                showConfirmButton: false,
+                allowOutsideClick: false,
+                didOpen: () => {
+                    Swal.showLoading();
+                }
+            });
             $.ajax({
                 url: '/download',
                     document.body.appendChild(a);
                     a.click();
                     window.URL.revokeObjectURL(downloadUrl);
+                    Swal.close();
+                    showSuccess('Download started successfully');
                 },
                 error: function(xhr) {
+                    Swal.close();
                     showError('Failed to download audio');
                 }
             });
         }
+        // Add nice entrance animation when page loads
+        document.addEventListener('DOMContentLoaded', function() {
+            document.body.style.opacity = '0';
+            setTimeout(() => {
+                document.body.style.transition = 'opacity 0.5s ease-in';
+                document.body.style.opacity = '1';
+            }, 100);
+        });
     </script>
 </body>
 </html>