Update templates/index.html
Browse files- templates/index.html +19 -9
templates/index.html
CHANGED
|
@@ -8,6 +8,17 @@
|
|
| 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,16 +55,13 @@
|
|
| 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
|
| 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-
|
| 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>
|
|
@@ -72,6 +80,7 @@
|
|
| 72 |
<span>Start Listening</span>
|
| 73 |
</button>
|
| 74 |
</div>
|
|
|
|
| 75 |
</div>
|
| 76 |
</div>
|
| 77 |
</div>
|
|
@@ -154,6 +163,7 @@
|
|
| 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 |
},
|
|
@@ -188,10 +198,10 @@
|
|
| 188 |
const audioPlayer = document.createElement('audio');
|
| 189 |
audioPlayer.src = audioUrl;
|
| 190 |
audioPlayer.controls = true;
|
| 191 |
-
audioPlayer.
|
| 192 |
-
audioPlayer.
|
| 193 |
|
| 194 |
-
const videoInfoContainer = document.querySelector('#
|
| 195 |
videoInfoContainer.appendChild(audioPlayer);
|
| 196 |
|
| 197 |
Swal.close();
|
|
@@ -216,7 +226,7 @@
|
|
| 216 |
});
|
| 217 |
|
| 218 |
// Check system dark mode preference
|
| 219 |
-
if (window.matchMedia('(prefers
|
| 220 |
document.documentElement.classList.add('dark');
|
| 221 |
}
|
| 222 |
</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 |
+
<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 |
|
| 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 <div id="thumbnailContainer" class="relative">
|
|
|
|
|
|
|
| 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-clamped-2"></h2>
|
|
|
|
| 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>
|
|
|
|
| 80 |
<span>Start Listening</span>
|
| 81 |
</button>
|
| 82 |
</div>
|
| 83 |
+
<div id="audioPlayerContainer" class="mt-4"></div>
|
| 84 |
</div>
|
| 85 |
</div>
|
| 86 |
</div>
|
|
|
|
| 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 |
},
|
|
|
|
| 198 |
const audioPlayer = document.createElement('audio');
|
| 199 |
audioPlayer.src = audioUrl;
|
| 200 |
audioPlayer.controls = true;
|
| 201 |
+
audioPlayer.autoplay = true; // Добавляем автовоспроизведение
|
| 202 |
+
audioPlayer.classList.add('audio-player'); // Добавляем класс для стилизации
|
| 203 |
|
| 204 |
+
const videoInfoContainer = document.querySelector('#audioPlayerContainer');
|
| 205 |
videoInfoContainer.appendChild(audioPlayer);
|
| 206 |
|
| 207 |
Swal.close();
|
|
|
|
| 226 |
});
|
| 227 |
|
| 228 |
// Check system dark mode preference
|
| 229 |
+
if (window.matchMedia('(prefers color scheme: dark)').matches) {
|
| 230 |
document.documentElement.classList.add('dark');
|
| 231 |
}
|
| 232 |
</script>
|