ytdlp

Running

App Files Files Community

vbvbot9117 commited on Dec 28, 2024

Commit

2ca7a17

verified ·

1 Parent(s): be2b0cf

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +104 -102

templates/index.html CHANGED Viewed

@@ -3,64 +3,73 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <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>
@@ -68,54 +77,48 @@
     </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'
             });
@@ -134,7 +137,7 @@
                 return;
             }
-            showLoading();
             $('#videoInfo').addClass('hidden');
             $.ajax({
@@ -145,14 +148,14 @@
                 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();
@@ -168,16 +171,7 @@
                 return;
             }
-            Swal.fire({
-                title: 'Starting Download',
-                html: 'Preparing your audio file...',
-                timerProgressBar: true,
-                showConfirmButton: false,
-                allowOutsideClick: false,
-                didOpen: () => {
-                    Swal.showLoading();
-                }
-            });
             $.ajax({
                 url: '/download',
@@ -198,23 +192,31 @@
                     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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YT 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-[#fafafa] dark:bg-gray-900 min-h-screen flex items-center justify-center p-4">
+    <div class="w-full max-w-xl mx-auto">
+        <!-- Ultra Modern Header -->
+        <div class="text-center mb-10 space-y-3">
+            <div class="inline-flex items-center justify-center p-2 rounded-full bg-red-50 dark:bg-red-900/20 mb-4">
+                <i class="fab fa-youtube text-red-500 text-3xl"></i>
             </div>
+            <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">
+                YouTube Audio Downloader
+            </h1>
+            <p class="text-gray-500 dark:text-gray-400 text-sm">Simple • Fast • High Quality</p>
+        </div>
+        <!-- Main Card -->
+        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg shadow-black/5 p-6 mb-6">
+            <!-- Search Input -->
+            <div class="relative mb-6 group">
+                <input type="text" id="youtubeUrl"
+                       placeholder="Paste YouTube URL here"
+                       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">
+                <div class="absolute inset-y-0 left-4 flex items-center pointer-events-none transition-transform group-focus-within:scale-110">
+                    <i class="fas fa-link text-gray-400 group-focus-within:text-blue-500 transition-colors"></i>
                 </div>
             </div>
+            <!-- Search Button -->
+            <button onclick="getVideoInfo()"
+                    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">
+                <i class="fas fa-search text-sm"></i>
+                <span>Get Video Info</span>
+            </button>
+        </div>
+        <!-- Video Info Card -->
+        <div id="videoInfo" class="hidden animate-fade-in">
+            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg shadow-black/5 overflow-hidden mb-6">
+                <!-- Thumbnail Container with Gradient Overlay -->
+                <div id="thumbnailContainer" class="relative">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent z-10"></div>
+                </div>
+                <!-- Video Details -->
+                <div class="p-6 space-y-4">
+                    <h2 id="videoTitle" class="text-xl font-semibold text-gray-800 dark:text-white line-clamp-2"></h2>
+                    <div class="space-y-2">
+                        <div id="channelName" class="flex items-center text-sm text-gray-500 dark:text-gray-400">
+                            <i class="fas fa-user-circle mr-2 text-blue-500"></i>
+                            <span></span>
+                        </div>
+                        <div id="duration" class="flex items-center text-sm text-gray-500 dark:text-gray-400">
+                            <i class="fas fa-clock mr-2 text-blue-500"></i>
+                            <span></span>
                         </div>
                     </div>
+                    <!-- Download Button -->
                     <button onclick="downloadAudio()"
+                            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">
+                        <i class="fas fa-download text-sm"></i>
+                        <span>Download MP3</span>
                     </button>
                 </div>
             </div>
     </div>
     <script>
+        const Toast = Swal.mixin({
+            toast: true,
+            position: 'top-end',
+            showConfirmButton: false,
+            timer: 3000,
+            timerProgressBar: true,
+            didOpen: (toast) => {
+                toast.addEventListener('mouseenter', Swal.stopTimer)
+                toast.addEventListener('mouseleave', Swal.resumeTimer)
             }
+        });
+        function showLoading(message) {
+            return Swal.fire({
+                html: `
+                    <div class="space-y-3">
+                        <div class="w-16 h-16 mx-auto border-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"></div>
+                        <div class="text-gray-600 text-sm">${message}</div>
+                    </div>
+                `,
                 showConfirmButton: false,
                 allowOutsideClick: false,
+                background: '#ffffff',
+                customClass: {
+                    popup: 'rounded-2xl'
                 }
             });
         }
         function showSuccess(message) {
+            Toast.fire({
                 icon: 'success',
+                title: message,
                 background: '#F0FDF4',
                 iconColor: '#22C55E'
             });
         }
         function showError(message) {
+            Toast.fire({
                 icon: 'error',
+                title: message,
                 background: '#FEF2F2',
                 iconColor: '#EF4444'
             });
                 return;
             }
+            showLoading('Fetching video information...');
             $('#videoInfo').addClass('hidden');
             $.ajax({
                 success: function(response) {
                     $('#thumbnailContainer').html(`
                         <img src="${response.thumbnail}" alt="Video thumbnail"
+                             class="w-full object-cover transition-transform duration-300 hover:scale-105">
                     `);
                     $('#videoTitle').text(response.title);
+                    $('#channelName span').text(response.channel);
+                    $('#duration span').text(formatDuration(response.duration));
                     $('#videoInfo').removeClass('hidden');
                     Swal.close();
+                    showSuccess('Video information retrieved');
                 },
                 error: function(xhr) {
                     Swal.close();
                 return;
             }
+            showLoading('Preparing your download...');
             $.ajax({
                 url: '/download',
                     a.click();
                     window.URL.revokeObjectURL(downloadUrl);
                     Swal.close();
+                    showSuccess('Download started');
                 },
                 error: function(xhr) {
                     Swal.close();
+                    showError('Download failed');
                 }
             });
         }
+        // Smooth page load animation
+        document.addEventListener('DOMContentLoaded', () => {
+            requestAnimationFrame(() => {
+                document.body.style.opacity = '0';
+                requestAnimationFrame(() => {
+                    document.body.style.transition = 'opacity 0.5s ease-in';
+                    document.body.style.opacity = '1';
+                });
+            });
         });
+        // Check system dark mode preference
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.classList.add('dark');
+        }
     </script>
+</head>
 </body>
 </html>