Update templates/index.html
Browse files- templates/index.html +26 -28
templates/index.html
CHANGED
|
@@ -8,17 +8,6 @@
|
|
| 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 |
-
<style>
|
| 12 |
-
.audio-player {
|
| 13 |
-
width: 100%;
|
| 14 |
-
margin-top: 1rem;
|
| 15 |
-
border: 1px solid #ddd;
|
| 16 |
-
border-radius: 0.5rem;
|
| 17 |
-
background-color: #fff;
|
| 18 |
-
padding: 0.5rem;
|
| 19 |
-
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
| 20 |
-
}
|
| 21 |
-
</style>
|
| 22 |
</head>
|
| 23 |
<body class="bg-[#fafafa] dark:bg-gray-900 min-h-screen flex items-center justify-center p-4">
|
| 24 |
<div class="w-full max-w-xl mx-auto">
|
|
@@ -55,21 +44,24 @@
|
|
| 55 |
|
| 56 |
<!-- Video Info Card -->
|
| 57 |
<div id="videoInfo" class="hidden animate-fade-in">
|
| 58 |
-
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow
|
|
|
|
|
|
|
| 59 |
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent z-10"></div>
|
| 60 |
</div>
|
| 61 |
|
| 62 |
<!-- Video Details -->
|
| 63 |
<div class="p-6 space-y-4">
|
| 64 |
-
<h2 id="videoTitle" class="text-xl font-semibold text-gray-800 dark:text-white line-
|
|
|
|
| 65 |
<div class="space-y-2">
|
| 66 |
<div id="channelName" class="flex items-center text-sm text-gray-500 dark:text-gray-400">
|
| 67 |
<i class="fas fa-user-circle mr-2 text-blue-500"></i>
|
| 68 |
<span></span>
|
| 69 |
</div>
|
| 70 |
-
<div id="duration" class="flex items-center text-sm text-gray-500
|
| 71 |
<i class="fas fa-clock mr-2 text-blue-500"></i>
|
| 72 |
-
<
|
| 73 |
</div>
|
| 74 |
</div>
|
| 75 |
|
|
@@ -80,7 +72,6 @@
|
|
| 80 |
<span>Start Listening</span>
|
| 81 |
</button>
|
| 82 |
</div>
|
| 83 |
-
<div id="audioPlayerContainer" class="mt-4"></div>
|
| 84 |
</div>
|
| 85 |
</div>
|
| 86 |
</div>
|
|
@@ -102,7 +93,7 @@
|
|
| 102 |
return Swal.fire({
|
| 103 |
html: `
|
| 104 |
<div class="space-y-3">
|
| 105 |
-
<div class="w-16 h-16 mx-auto border-4 border-gray-200 border-t-blue-500
|
| 106 |
<div class="text-gray-600 text-sm">${message}</div>
|
| 107 |
</div>
|
| 108 |
`,
|
|
@@ -127,7 +118,7 @@
|
|
| 127 |
function showError(message) {
|
| 128 |
Toast.fire({
|
| 129 |
icon: 'error',
|
| 130 |
-
title:
|
| 131 |
background: '#FEF2F2',
|
| 132 |
iconColor: '#EF4444'
|
| 133 |
});
|
|
@@ -136,7 +127,7 @@
|
|
| 136 |
function formatDuration(seconds) {
|
| 137 |
const minutes = Math.floor(seconds / 60);
|
| 138 |
const remainingSeconds = seconds % 60;
|
| 139 |
-
return `${minutes}:${
|
| 140 |
}
|
| 141 |
|
| 142 |
function getVideoInfo() {
|
|
@@ -146,7 +137,7 @@
|
|
| 146 |
return;
|
| 147 |
}
|
| 148 |
|
| 149 |
-
showLoading('Fetching video
|
| 150 |
$('#videoInfo').addClass('hidden');
|
| 151 |
|
| 152 |
$.ajax({
|
|
@@ -163,7 +154,6 @@
|
|
| 163 |
$('#channelName span').text(response.channel);
|
| 164 |
$('#duration span').text(formatDuration(response.duration));
|
| 165 |
$('#videoInfo').removeClass('hidden');
|
| 166 |
-
$('#audioPlayerContainer').empty(); // Очистим контейнер для плеера
|
| 167 |
Swal.close();
|
| 168 |
showSuccess('Video information retrieved');
|
| 169 |
},
|
|
@@ -181,7 +171,7 @@
|
|
| 181 |
return;
|
| 182 |
}
|
| 183 |
|
| 184 |
-
|
| 185 |
|
| 186 |
$.ajax({
|
| 187 |
url: '/download',
|
|
@@ -195,13 +185,21 @@
|
|
| 195 |
const blob = new Blob([response], { type: 'audio/mp3' });
|
| 196 |
const audioUrl = URL.createObjectURL(blob);
|
| 197 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 198 |
const audioPlayer = document.createElement('audio');
|
| 199 |
audioPlayer.src = audioUrl;
|
| 200 |
audioPlayer.controls = true;
|
| 201 |
-
audioPlayer.
|
| 202 |
-
audioPlayer.
|
|
|
|
|
|
|
| 203 |
|
| 204 |
-
const videoInfoContainer = document.querySelector('#
|
| 205 |
videoInfoContainer.appendChild(audioPlayer);
|
| 206 |
|
| 207 |
Swal.close();
|
|
@@ -225,10 +223,10 @@
|
|
| 225 |
});
|
| 226 |
});
|
| 227 |
|
| 228 |
-
// Check system dark
|
| 229 |
-
if (window.matchMedia('(prefers
|
| 230 |
document.documentElement.classList.add('dark');
|
| 231 |
}
|
| 232 |
-
</
|
| 233 |
</body>
|
| 234 |
</html>
|
|
|
|
| 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">
|
|
|
|
| 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 |
|
|
|
|
| 72 |
<span>Start Listening</span>
|
| 73 |
</button>
|
| 74 |
</div>
|
|
|
|
| 75 |
</div>
|
| 76 |
</div>
|
| 77 |
</div>
|
|
|
|
| 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 |
`,
|
|
|
|
| 118 |
function showError(message) {
|
| 119 |
Toast.fire({
|
| 120 |
icon: 'error',
|
| 121 |
+
title: Message,
|
| 122 |
background: '#FEF2F2',
|
| 123 |
iconColor: '#EF4444'
|
| 124 |
});
|
|
|
|
| 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() {
|
|
|
|
| 137 |
return;
|
| 138 |
}
|
| 139 |
|
| 140 |
+
showLoading('Fetching video Information...');
|
| 141 |
$('#videoInfo').addClass('hidden');
|
| 142 |
|
| 143 |
$.ajax({
|
|
|
|
| 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 |
},
|
|
|
|
| 171 |
return;
|
| 172 |
}
|
| 173 |
|
| 174 |
+
ShowLoading('Preparing audio...');
|
| 175 |
|
| 176 |
$.ajax({
|
| 177 |
url: '/download',
|
|
|
|
| 185 |
const blob = new Blob([response], { type: 'audio/mp3' });
|
| 186 |
const audioUrl = URL.createObjectURL(blob);
|
| 187 |
|
| 188 |
+
// Remove existing audio player if any
|
| 189 |
+
const existingPlayer = document.querySelector('#videoInfo audio');
|
| 190 |
+
if (existingPlayer) {
|
| 191 |
+
existingPlayer.remove();
|
| 192 |
+
}
|
| 193 |
+
|
| 194 |
const audioPlayer = document.createElement('audio');
|
| 195 |
audioPlayer.src = audioUrl;
|
| 196 |
audioPlayer.controls = true;
|
| 197 |
+
audioPlayer.style.width = '100%';
|
| 198 |
+
audioPlayer.style.marginTop = '1rem';
|
| 199 |
+
audioPlayer.style.marginTop = '1rem';
|
| 200 |
+
audioPlayer.classList.add('mt-4', 'w-full', 'bg-white', 'dark:bg-gray-800', 'rounded-xl', 'shadow-lg', 'shadow-black/5', 'p-4');
|
| 201 |
|
| 202 |
+
const videoInfoContainer = document.querySelector('#videoInfo .p-6');
|
| 203 |
videoInfoContainer.appendChild(audioPlayer);
|
| 204 |
|
| 205 |
Swal.close();
|
|
|
|
| 223 |
});
|
| 224 |
});
|
| 225 |
|
| 226 |
+
// Check system dark Mode Preference
|
| 227 |
+
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
| 228 |
document.documentElement.classList.add('dark');
|
| 229 |
}
|
| 230 |
+
</Script>
|
| 231 |
</body>
|
| 232 |
</html>
|